<x-layouts::app :title="__('Payments')">
    @php
        $isAdmin = in_array(Auth::user()->role, ['admin', 'super_admin']);
    @endphp

    <div class="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div class="flex items-center gap-3">
            <flux:icon.banknotes class="size-5 text-green-600" />
            <flux:heading size="lg">{{ __('Payments') }}</flux:heading>
        </div>

        @if($isAdmin)
            <a href="{{ route('payments.create') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 transition">
                <i class="fas fa-plus"></i> {{ __('Record Payment') }}
            </a>
        @endif
    </div>

    <flux:card class="mb-6">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-center gap-2 text-yellow-600">
                <flux:icon.clock class="size-5" />
                <flux:heading size="sm">{{ __('Pending') }}</flux:heading>
                <flux:badge color="yellow">{{ $pending->count() }}</flux:badge>
            </div>
            <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
                <x-export-buttons table-id="pending-table" export-title="Pending Payments" :exclude-last="$isAdmin ? 1 : 0" />
                <flux:text variant="subtle">{{ __('Awaiting admin approval') }}</flux:text>
            </div>
        </div>

        <div class="mt-4 overflow-x-auto">
            <table id="pending-table" class="min-w-full table-reset divide-y divide-gray-200 dark:divide-zinc-700">
                <thead class="bg-slate-50 dark:bg-slate-900">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">#</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Student') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Destination') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Term') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Amount (RWF)') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Balance (RWF)') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Method') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Date') }}</th>
                        @if($isAdmin)
                            <th class="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Actions') }}</th>
                        @endif
                    </tr>
                </thead>
                <tbody class="dark:bg-slate-950 divide-y divide-gray-200 dark:divide-zinc-700">
                    @forelse($pending as $p)
                        <tr class="hover:bg-slate-50 dark:hover:bg-zinc-900/50">
                            <td class="px-4 py-3 text-sm text-slate-500 dark:text-zinc-400">{{ $loop->iteration }}</td>
                            <td class="px-4 py-3 text-sm text-slate-900 dark:text-zinc-200">{{ $p->student->name ?? 'Deleted Student' }}</td>
                            <td class="px-4 py-3 text-sm text-slate-600 dark:text-zinc-400">{{ $p->destination }}</td>
                            <td class="px-4 py-3 text-sm text-slate-600 dark:text-zinc-400">{{ $p->term }}</td>
                            <td class="px-4 py-3 text-sm text-slate-900 dark:text-zinc-200">{{ number_format($p->amount) }}</td>
                            <td class="px-4 py-3 text-sm">
                                @if($p->balance > 0)
                                    <flux:badge color="green">{{ number_format($p->balance) }}</flux:badge>
                                @else
                                    <span class="text-slate-400">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <flux:badge color="slate" class="capitalize">{{ str_replace('_', ' ', $p->payment_method ?? 'cash') }}</flux:badge>
                            </td>
                            <td class="px-4 py-3 text-sm text-slate-500">{{ $p->payment_date ? $p->payment_date->format('d M Y') : '-' }}</td>
                            @if($isAdmin)
                                <td class="px-4 py-3 text-sm text-center flex flex-wrap justify-center gap-1">
                                    @if($p->proof_of_payment)
                                        <button class="inline-flex items-center px-2 py-1 bg-cyan-600 hover:bg-cyan-700 text-white text-xs rounded shadow-sm view-proof-btn" data-url="{{ asset('storage/' . $p->proof_of_payment) }}" data-is-pdf="{{ str_ends_with($p->proof_of_payment, '.pdf') ? '1' : '0' }}" title="{{ __('View Proof') }}">
                                            <i class="fas fa-paperclip"></i>
                                        </button>
                                    @endif
                                    <form action="{{ route('payments.update', $p->id) }}" method="POST" class="inline">
                                        @csrf @method('PUT')
                                        <input type="hidden" name="student_id" value="{{ $p->student_id }}">
                                        <input type="hidden" name="destination" value="{{ $p->destination }}">
                                        <input type="hidden" name="term" value="{{ $p->term }}">
                                        <input type="hidden" name="amount" value="{{ $p->amount }}">
                                        <input type="hidden" name="payment_date" value="{{ $p->payment_date?->format('Y-m-d') }}">
                                        <input type="hidden" name="status" value="processed">
                                        <button class="inline-flex items-center px-2 py-1 bg-emerald-600 hover:bg-emerald-700 text-white text-xs rounded shadow-sm" title="{{ __('Approve') }}">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    </form>
                                    <a href="{{ route('payments.edit', $p->id) }}" class="inline-flex items-center px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded shadow-sm" title="{{ __('Edit') }}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('payments.destroy', $p->id) }}" method="POST" class="inline">
                                        @csrf @method('DELETE')
                                        <button type="button" class="inline-flex items-center px-2 py-1 bg-red-600 hover:bg-red-700 text-white text-xs rounded shadow-sm confirm-delete" title="{{ __('Delete') }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ $isAdmin ? 9 : 8 }}" class="px-4 py-6 text-center text-sm text-slate-500">{{ __('No pending payments.') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </flux:card>

    <flux:card class="mb-6">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-center gap-2 text-emerald-600">
                <flux:icon.check-circle class="size-5" />
                <flux:heading size="sm">{{ __('Processed') }}</flux:heading>
                <flux:badge color="green">{{ $processed->count() }}</flux:badge>
            </div>
            <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
                <x-export-buttons table-id="processed-table" export-title="Processed Payments" :exclude-last="$isAdmin ? 1 : 0" />
                <flux:text variant="subtle">{{ __('Verified & confirmed') }}</flux:text>
            </div>
        </div>

        <div class="mt-4 overflow-x-auto">
            <table id="processed-table" class="min-w-full table-reset divide-y divide-gray-200 dark:divide-zinc-700">
                <thead class="bg-slate-50 dark:bg-slate-900">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">#</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Student') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Destination') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Term') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Amount (RWF)') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Balance (RWF)') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Method') }}</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Date') }}</th>
                        @if($isAdmin)
                            <th class="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400">{{ __('Actions') }}</th>
                        @endif
                    </tr>
                </thead>
                <tbody class="dark:bg-slate-950 divide-y divide-gray-200 dark:divide-zinc-700">
                    @forelse($processed as $p)
                        <tr class="hover:bg-slate-50 dark:hover:bg-zinc-900/50">
                            <td class="px-4 py-3 text-sm text-slate-500 dark:text-zinc-400">{{ $loop->iteration }}</td>
                            <td class="px-4 py-3 text-sm text-slate-900 dark:text-zinc-200">{{ $p->student->name ?? 'Deleted Student' }}</td>
                            <td class="px-4 py-3 text-sm text-slate-600 dark:text-zinc-400">{{ $p->destination }}</td>
                            <td class="px-4 py-3 text-sm text-slate-600 dark:text-zinc-400">{{ $p->term }}</td>
                            <td class="px-4 py-3 text-sm text-slate-900 dark:text-zinc-200">{{ number_format($p->amount) }}</td>
                            <td class="px-4 py-3 text-sm">
                                @if($p->balance > 0)
                                    <flux:badge color="green">{{ number_format($p->balance) }}</flux:badge>
                                @else
                                    <span class="text-slate-400">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-sm">
                                @php
                                    $badgeColor = $p->payment_method === 'mobile_money' ? 'bg-yellow-100 text-yellow-800' : ($p->payment_method === 'bank_transfer' ? 'bg-blue-100 text-blue-800' : 'bg-slate-100 text-slate-800');
                                @endphp
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $badgeColor }} capitalize">{{ str_replace('_', ' ', $p->payment_method ?? 'cash') }}</span>
                            </td>
                            <td class="px-4 py-3 text-sm text-slate-500">{{ $p->payment_date ? $p->payment_date->format('d M Y') : '-' }}</td>
                            @if($isAdmin)
                                <td class="px-4 py-3 text-sm text-center flex flex-wrap justify-center gap-1">
                                    @if($p->proof_of_payment)
                                        <button class="inline-flex items-center px-2 py-1 bg-cyan-600 hover:bg-cyan-700 text-white text-xs rounded shadow-sm view-proof-btn" data-url="{{ asset('storage/' . $p->proof_of_payment) }}" data-is-pdf="{{ str_ends_with($p->proof_of_payment, '.pdf') ? '1' : '0' }}" title="{{ __('View Proof') }}">
                                            <i class="fas fa-paperclip"></i>
                                        </button>
                                    @endif
                                    <a href="{{ route('payments.edit', $p->id) }}" class="inline-flex items-center px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded shadow-sm" title="{{ __('Edit') }}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('payments.destroy', $p->id) }}" method="POST" class="inline">
                                        @csrf @method('DELETE')
                                        <button type="button" class="inline-flex items-center px-2 py-1 bg-red-600 hover:bg-red-700 text-white text-xs rounded shadow-sm confirm-delete" title="{{ __('Delete') }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ $isAdmin ? 9 : 8 }}" class="px-4 py-6 text-center text-sm text-slate-500">{{ __('No processed payments yet.') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </flux:card>

    <div x-data="{ open: false, url: '', isPdf: false }" @open-proof.window="open = true; url = $event.detail.url; isPdf = $event.detail.isPdf;" x-show="open" class="fixed inset-0 z-50 overflow-y-auto" x-cloak>
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="open = false" aria-hidden="true"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                            <h3 class="text-lg leading-6 font-medium text-gray-900 flex items-center border-b pb-2" id="modal-headline">
                                <i class="fas fa-paperclip text-cyan-600 mr-2"></i> {{ __('Proof of Payment') }}
                            </h3>
                            <div class="mt-4 flex justify-center">
                                <template x-if="isPdf">
                                    <p class="text-gray-500">{{ __('PDF files cannot be previewed inline. Click Open / Download to view.') }}</p>
                                </template>
                                <template x-if="!isPdf">
                                    <img :src="url" class="max-w-full rounded shadow" style="max-height: 60vh;" alt="{{ __('Proof of Payment') }}">
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-50 px-4 py-3 sm:px-6 flex justify-end gap-2 border-t border-slate-200">
                    <a :href="url" target="_blank" class="inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm">
                        <i class="fas fa-download mr-2"></i> {{ __('Open / Download') }}
                    </a>
                    <button @click="open = false" type="button" class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-slate-600 text-base font-medium text-white hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 sm:text-sm">
                        {{ __('Close') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <x-slot name="scripts">
        <script>
            document.querySelectorAll('.view-proof-btn').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    window.dispatchEvent(new CustomEvent('open-proof', {
                        detail: {
                            url: this.dataset.url,
                            isPdf: this.dataset.isPdf === '1'
                        }
                    }));
                });
            });
        </script>
    </x-slot>
</x-layouts::app>
