<x-layouts::app :title="__('Make Payment')">
    <div class="space-y-8">
        <flux:card class="p-6">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
                <flux:link :href="route('parent.dashboard')" wire:navigate>
                    <flux:button variant="outline" class="!px-3 !py-2.5">
                        <flux:icon.arrow-left class="size-4" />
                    </flux:button>
                </flux:link>
                <div>
                    <flux:heading size="lg">{{ __('Payment for :name', ['name' => $student->name]) }}</flux:heading>
                    <flux:text variant="subtle">{{ __('Class') }} {{ $student->class }} · {{ $student->destination }}</flux:text>
                </div>
            </div>
        </flux:card>

        @if(session('error'))
            <flux:callout variant="danger">
                {{ session('error') }}
            </flux:callout>
        @endif

        <flux:card>
            <div x-data="{ activeTab: 'mobile-money' }" class="bg-white">
                <div class="border-b border-slate-200 bg-slate-50">
                    <nav class="flex overflow-x-auto" aria-label="Payment Methods">
                        @if(in_array('mobile_money', $enabledPaymentMethods ?? ['mobile_money','card','bank_transfer','cash']))
                        <button @click="activeTab = 'mobile-money'"
                                :class="activeTab === 'mobile-money' ? 'border-indigo-500 text-indigo-600 bg-white' : 'border-transparent text-slate-500 hover:text-slate-700 hover:bg-slate-100'"
                                class="flex-1 whitespace-nowrap py-4 px-6 border-b-2 font-bold text-sm transition-all duration-200 focus:outline-none">
                            <flux:icon.mobile class="size-4 mr-2 text-yellow-500" />
                            {{ __('Mobile Money') }}
                        </button>
                        @endif
                        @if(in_array('card', $enabledPaymentMethods ?? ['mobile_money','card','bank_transfer','cash']))
                        <button @click="activeTab = 'card-payment'"
                                :class="activeTab === 'card-payment' ? 'border-indigo-500 text-indigo-600 bg-white' : 'border-transparent text-slate-500 hover:text-slate-700 hover:bg-slate-100'"
                                class="flex-1 whitespace-nowrap py-4 px-6 border-b-2 font-bold text-sm transition-all duration-200 focus:outline-none">
                            <flux:icon.credit-card class="size-4 mr-2 text-blue-500" />
                            {{ __('Card') }}
                        </button>
                        @endif
                        @if(in_array('bank_transfer', $enabledPaymentMethods ?? ['mobile_money','card','bank_transfer','cash']))
                        <button @click="activeTab = 'bank-transfer'"
                                :class="activeTab === 'bank-transfer' ? 'border-indigo-500 text-indigo-600 bg-white' : 'border-transparent text-slate-500 hover:text-slate-700 hover:bg-slate-100'"
                                class="flex-1 whitespace-nowrap py-4 px-6 border-b-2 font-bold text-sm transition-all duration-200 focus:outline-none">
                            <flux:icon.building-bank class="size-4 mr-2 text-green-500" />
                            {{ __('Bank Transfer') }}
                        </button>
                        @endif
                        @if(in_array('cash', $enabledPaymentMethods ?? ['mobile_money','card','bank_transfer','cash']))
                        <button @click="activeTab = 'cash-payment'"
                                :class="activeTab === 'cash-payment' ? 'border-indigo-500 text-indigo-600 bg-white' : 'border-transparent text-slate-500 hover:text-slate-700 hover:bg-slate-100'"
                                class="flex-1 whitespace-nowrap py-4 px-6 border-b-2 font-bold text-sm transition-all duration-200 focus:outline-none">
                            <flux:icon.money class="size-4 mr-2 text-slate-500" />
                            {{ __('Cash') }}
                        </button>
                        @endif
                    </nav>
                </div>

                <div class="p-8">
                    @if(in_array('mobile_money', $enabledPaymentMethods ?? ['mobile_money','card','bank_transfer','cash']))
                    <div x-show="activeTab === 'mobile-money'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-y-4" x-transition:enter-end="opacity-100 transform translate-y-0">
                        <flux:callout variant="warning" class="mb-6">
                            {{ __('Pay via MTN Mobile Money or Airtel Money. You will be redirected to a secure payment page.') }}
                        </flux:callout>
                        <form action="{{ route('parent.pay.flutterwave', $student) }}" method="POST">
                            @csrf
                            @include('parent._payment_fields', ['currentTerm' => $currentTerm])
                            <div class="flex items-center mb-6">
                                <input type="checkbox" id="save_card_mm" name="save_card" value="1" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                <label for="save_card_mm" class="ml-2 block text-sm text-slate-600">{{ __('Save payment method for future auto-payments') }}</label>
                            </div>
                            <flux:button type="submit" variant="primary" class="w-full py-4 text-sm">
                                <flux:icon.mobile class="size-4 mr-2" />
                                {{ __('Pay with Mobile Money') }}
                            </flux:button>
                        </form>
                    </div>
                    @endif

                    @if(in_array('card', $enabledPaymentMethods ?? ['mobile_money','card','bank_transfer','cash']))
                    <div x-show="activeTab === 'card-payment'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-y-4" x-transition:enter-end="opacity-100 transform translate-y-0" style="display: none;">
                        <flux:callout variant="info" class="mb-6">
                            {{ __('Pay with your Visa or Mastercard. Optionally save your card for automated future payments.') }}
                        </flux:callout>
                        <form action="{{ route('parent.pay.flutterwave', $student) }}" method="POST">
                            @csrf
                            @include('parent._payment_fields', ['currentTerm' => $currentTerm])
                            <div class="flex items-center mb-6">
                                <input type="checkbox" id="save_card_c" name="save_card" value="1" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                <label for="save_card_c" class="ml-2 block text-sm text-slate-600">{{ __('Save card for automatic future payments') }}</label>
                            </div>
                            <flux:button type="submit" variant="primary" class="w-full py-4 text-sm">
                                <flux:icon.credit-card class="size-4 mr-2" />
                                {{ __('Pay with Card') }}
                            </flux:button>
                        </form>
                    </div>
                    @endif

                    @if(in_array('bank_transfer', $enabledPaymentMethods ?? ['mobile_money','card','bank_transfer','cash']))
                    <div x-show="activeTab === 'bank-transfer'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-y-4" x-transition:enter-end="opacity-100 transform translate-y-0" style="display: none;">
                        <flux:callout variant="info" class="mb-6">
                            {{ __('Transfer directly to the school’s bank account, then record your payment details here.') }}
                        </flux:callout>

                        @if($bankAccounts->isNotEmpty())
                        <div class="grid gap-4 mb-8">
                            @foreach($bankAccounts as $ba)
                            <flux:card variant="secondary" class="p-5">
                                <flux:heading size="sm" class="mb-3 flex items-center gap-2 text-indigo-800">
                                    <flux:icon.building-bank class="size-4" />
                                    {{ $ba->label ?: $ba->bank_name }}
                                </flux:heading>
                                <div class="grid grid-cols-2 gap-y-2 text-sm text-slate-700">
                                    <span class="text-indigo-600">{{ __('Bank') }}:</span><span class="font-semibold">{{ $ba->bank_name }}</span>
                                    <span class="text-indigo-600">{{ __('Account Name') }}:</span><span class="font-semibold">{{ $ba->account_name }}</span>
                                    <span class="text-indigo-600">{{ __('Account Number') }}:</span><span class="font-mono font-semibold">{{ $ba->account_number }}</span>
                                    @if($ba->branch)<span class="text-indigo-600">{{ __('Branch') }}:</span><span>{{ $ba->branch }}</span>@endif
                                    @if($ba->swift_code)<span class="text-indigo-600">{{ __('SWIFT/BIC') }}:</span><span>{{ $ba->swift_code }}</span>@endif
                                </div>
                            </flux:card>
                            @endforeach
                        </div>
                        @else
                        <flux:callout variant="warning" class="mb-6">
                            {{ __('Bank details are not configured yet. Please contact the school.') }}
                        </flux:callout>
                        @endif

                        <form action="{{ route('parent.pay.store', $student) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="payment_method" value="bank_transfer">
                            @include('parent._payment_fields', ['currentTerm' => $currentTerm])
                            <div class="mb-4">
                                <x-input-label for="payment_date_bank" :value="__('Transfer Date')" class="font-bold mb-1" />
                                <x-text-input type="date" id="payment_date_bank" name="payment_date" class="block w-full" :value="date('Y-m-d')" required />
                            </div>
                            <div class="mb-8">
                                <x-input-label for="proof_bank" :value="__('Proof of Payment (optional)')" class="font-bold mb-1" />
                                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-indigo-400 transition-colors duration-200">
                                    <div class="space-y-1 text-center">
                                        <flux:icon.cloud-upload class="size-6 text-gray-400 mb-2" />
                                        <div class="flex text-sm text-slate-600">
                                            <label for="proof_bank" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none">
                                                <span>{{ __('Upload a file') }}</span>
                                                <input id="proof_bank" name="proof_of_payment" type="file" class="sr-only" accept="image/*,.pdf">
                                            </label>
                                            <p class="pl-1">{{ __('or drag and drop') }}</p>
                                        </div>
                                        <flux:text variant="subtle" class="text-xs">{{ __('PNG, JPG, PDF up to 4MB') }}</flux:text>
                                        <p id="proof_bank_name" class="text-xs text-emerald-600 font-bold mt-2"></p>
                                    </div>
                                </div>
                            </div>
                            <flux:button type="submit" variant="primary" class="w-full py-4 text-sm">
                                <flux:icon.check class="size-4 mr-2" />
                                {{ __('Record Bank Transfer') }}
                            </flux:button>
                        </form>
                    </div>
                    @endif

                    @if(in_array('cash', $enabledPaymentMethods ?? ['mobile_money','card','bank_transfer','cash']))
                    <div x-show="activeTab === 'cash-payment'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-y-4" x-transition:enter-end="opacity-100 transform translate-y-0" style="display: none;">
                        <flux:callout variant="info" class="mb-6">
                            {{ __('Record a cash payment that was made at the school office.') }}
                        </flux:callout>
                        <form action="{{ route('parent.pay.store', $student) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="payment_method" value="cash">
                            @include('parent._payment_fields', ['currentTerm' => $currentTerm])
                            <div class="mb-4">
                                <x-input-label for="payment_date_cash" :value="__('Payment Date')" class="font-bold mb-1" />
                                <x-text-input type="date" id="payment_date_cash" name="payment_date" class="block w-full" :value="date('Y-m-d')" required />
                            </div>
                            <div class="mb-8">
                                <x-input-label for="proof_cash" :value="__('Receipt Image (optional)')" class="font-bold mb-1" />
                                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-indigo-400 transition-colors duration-200">
                                    <div class="space-y-1 text-center">
                                        <flux:icon.camera class="size-6 text-gray-400 mb-2" />
                                        <div class="flex text-sm text-slate-600">
                                            <label for="proof_cash" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none">
                                                <span>{{ __('Upload a file') }}</span>
                                                <input id="proof_cash" name="proof_of_payment" type="file" class="sr-only" accept="image/*,.pdf">
                                            </label>
                                            <p class="pl-1">{{ __('or drag and drop') }}</p>
                                        </div>
                                        <flux:text variant="subtle" class="text-xs">{{ __('PNG, JPG, PDF up to 4MB') }}</flux:text>
                                        <p id="proof_cash_name" class="text-xs text-emerald-600 font-bold mt-2"></p>
                                    </div>
                                </div>
                            </div>
                            <flux:button type="submit" variant="primary" class="w-full py-4 text-sm">
                                <flux:icon.money class="size-4 mr-2" />
                                {{ __('Record Cash Payment') }}
                            </flux:button>
                        </form>
                    </div>
                    @endif
                </div>
            </div>
        </flux:card>
    </div>

    <x-slot name="scripts">
    <script>
        document.getElementById('proof_bank')?.addEventListener('change', function() {
            if(this.files[0]) document.getElementById('proof_bank_name').textContent = 'Selected: ' + this.files[0].name;
        });
        document.getElementById('proof_cash')?.addEventListener('change', function() {
            if(this.files[0]) document.getElementById('proof_cash_name').textContent = 'Selected: ' + this.files[0].name;
        });
    </script>
    </x-slot>
</x-layouts::app>
