<div class="p-4 max-w-6xl mx-auto">
    <x-loading-spinner wire:target="generate" />

    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
        <div class="text-xl font-bold text-gray-900">Virtual Bank Account</div>
        <div class="text-sm text-gray-500 mt-1">Generate a dedicated account number you can share for bank transfers</div>

        <div class="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div class="border border-gray-200 rounded-xl p-4">
                <div class="font-semibold text-gray-900">Current Account</div>

                @if($virtualAccount)
                    <div class="mt-3 space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-500">Bank</span>
                            <span class="font-medium text-gray-900">{{ $virtualAccount->bank_name }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Account Number</span>
                            <span class="font-medium text-gray-900">{{ $virtualAccount->account_number }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Account Name</span>
                            <span class="font-medium text-gray-900">{{ $virtualAccount->account_name }}</span>
                        </div>
                    </div>
                @else
                    <div class="mt-3 text-sm text-gray-500">No virtual account generated yet.</div>
                @endif
            </div>

            <div class="border border-gray-200 rounded-xl p-4">
                @if(!$virtualAccount)
                    <div class="font-semibold text-gray-900">Generate Account</div>
                    <div class="mt-3">
                        <x-input-label value="BVN" />
                        <x-text-input wire:model.defer="bvn" class="w-full mt-1" />
                        <x-input-error :messages="$errors->get('bvn')" class="mt-2" />
                    </div>

                    <div class="mt-4">
                        <x-primary-button wire:click="generate" class="rounded-xl px-6 py-3">
                            Generate Account Number
                        </x-primary-button>
                    </div>
                @else
                    <div class="font-semibold text-gray-900">Generate Account</div>
                    <div class="mt-3 text-sm text-gray-500">
                        Account already generated.
                    </div>
                @endif
            </div>
        </div>
    </div>

    <x-slot:headerTitle>
        Virtual Account
    </x-slot:headerTitle>
</div>
