<x-layouts::app :title="__('Manage Platform Payments')">
    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-4 mb-6">
        <flux:card>
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-sky-600">Total Invoices</p>
            <p class="mt-3 text-3xl font-semibold text-slate-900">{{ $payments->count() }}</p>
        </flux:card>
        <flux:card>
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-600">Total Revenue</p>
            <p class="mt-3 text-3xl font-semibold text-slate-900">${{ number_format($payments->where('status', 'paid')->sum('amount'), 2) }}</p>
        </flux:card>
        <flux:card>
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-cyan-600">Paid Invoices</p>
            <p class="mt-3 text-3xl font-semibold text-slate-900">{{ $payments->where('status', 'paid')->count() }}</p>
        </flux:card>
        <flux:card>
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-amber-600">Pending Invoices</p>
            <p class="mt-3 text-3xl font-semibold text-slate-900">{{ $payments->where('status', 'pending')->count() }}</p>
        </flux:card>
    </div>

    <flux:card>
        <flux:heading size="md" class="mb-4">Invoice History</flux:heading>
        <div class="overflow-x-auto">
            <table id="paymentsTable" class="min-w-full table-reset divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Invoice ID</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">School (Tenant)</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Description</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Amount</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Due Date</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Actions</th>
                    </tr>
                </thead>
                <tbody class=" divide-y divide-slate-200">
                    @foreach($payments as $payment)
                        <tr class="hover:bg-slate-50">
                            <td class="px-4 py-3 text-sm text-slate-700">#{{ $payment->id }}</td>
                            <td class="px-4 py-3 text-sm text-slate-900">{{ $payment->school_name }}</td>
                            <td class="px-4 py-3 text-sm text-slate-700">{{ $payment->description }}</td>
                            <td class="px-4 py-3 text-sm font-semibold text-slate-900">${{ number_format($payment->amount, 2) }}</td>
                            <td class="px-4 py-3 text-sm text-slate-700">{{ $payment->due_date ? date('Y-m-d', strtotime($payment->due_date)) : 'N/A' }}</td>
                            <td class="px-4 py-3 text-sm">
                                <flux:badge color="{{ $payment->status == 'paid' ? 'success' : 'warning' }}">{{ ucfirst($payment->status) }}</flux:badge>
                            </td>
                            <td class="px-4 py-3 text-sm space-x-2">
                                @if($payment->status == 'pending')
                                    <form action="{{ route('admin.billing.pay', $payment) }}" method="POST" class="inline">
                                        @csrf
                                        <button type="button" class="inline-flex items-center rounded-xl bg-emerald-600 px-3 py-2 text-xs font-semibold text-white hover:bg-emerald-700 confirm-action" data-confirm-title="Mark as Paid?" data-confirm-text="Are you sure you want to mark invoice #{{ $payment->id }} as paid?" data-confirm-icon="question" data-confirm-btn="Yes, Mark Paid">
                                            <i class="fas fa-check fa-sm mr-1"></i> Mark Paid
                                        </button>
                                    </form>
                                @else
                                    <span class="inline-flex items-center rounded-xl bg-slate-100 px-3 py-2 text-xs text-slate-500">Paid</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </flux:card>

    @push('scripts')
    <script>
        $(document).ready(function() {
            $('#paymentsTable').DataTable({ order: [[0, 'desc']] });
        });
    </script>
    @endpush
</x-layouts::app>
