<x-app-layout>
    <!-- Loading Spinner -->
    <div id="loading-spinner" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
        <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-indigo-500"></div>
    </div>

    <!-- Filter Section -->
    <div class="bg-white shadow-md rounded-md p-6 mb-8">
        <form method="GET" action="{{ route('payment.index') }}" class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
            @csrf

            @php
                $defaultStartDate = request('start_date') ?? now()->subDays(7)->format('Y-m-d');
                $defaultEndDate = request('end_date') ?? now()->format('Y-m-d');
            @endphp

            <!-- Start Date -->
            <div class="flex flex-col gap-1">
                <label for="start_date" class="text-sm font-medium text-gray-700">📅 Start Date</label>
                <input type="date" name="start_date" id="start_date" value="{{ $defaultStartDate }}"
                    class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
            </div>

            <!-- End Date -->
            <div class="flex flex-col gap-1">
                <label for="end_date" class="text-sm font-medium text-gray-700">📅 End Date</label>
                <input type="date" name="end_date" id="end_date" value="{{ $defaultEndDate }}"
                    class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
            </div>

            <!-- Apply Filter Button -->
            <div class="flex flex-col gap-1">
                <label class="invisible">Apply Filter</label>
                <button type="submit"
                    class="w-full px-6 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md shadow-md hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-400">
                    🔍 Apply Filter
                </button>
            </div>
        </form>
    </div>

    <!-- Statistics Section -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 p-6">
        <!-- Total Approved Money -->
        <div class="text-indigo-700 rounded-lg shadow-md p-6 text-center">
            <i class="fa-solid fa-money-bill fa-3x text-success mb-3"></i>
            <h3 class="text-3xl font-bold">${{ number_format($total, 2) }}</h3>
            <p class="text-sm font-medium">Total Approved Money</p>
        </div>

        <!-- Total Sold Tickets -->
        <div class="text-indigo-700 rounded-lg shadow-md p-6 text-center">
            <i class="fa-solid fa-ticket fa-3x text-orange-400 mb-3"></i>
            <h3 class="text-3xl font-bold">{{ $totalSoldTickets }}</h3>
            <p class="text-sm font-medium">Total Sold Tickets</p>
        </div>
    </div>

    <!-- Table Section -->
    <div class="bg-white shadow-md rounded-md p-6 mb-8">
        <div class="overflow-x-auto">
            <table class="w-full table-auto">
                <thead class="bg-indigo-600 text-white">
                    <tr>
                        <th class="px-5 py-3">ID</th>
                        <th class="px-5 py-3">Payment ID</th>
                        <th class="px-5 py-3">Name</th>
                        <th class="px-5 py-3">Phone</th>
                        <th class="px-5 py-3">Chair Type</th>
                        <th class="px-5 py-3">Seats</th>
                        <th class="px-5 py-3">Date</th>
                        <th class="px-5 py-3">Total($)</th>
                        {{-- <th class="px-5 py-3">Status</th> --}}
                    </tr>
                </thead>
                <tbody class="bg-white">
                    @forelse ($payment as $payments)
                        @php
                            $transaction = $transactions[$payments->tran_id] ?? null;
                        @endphp
                        <tr class="hover:bg-indigo-50 border-b border-gray-200">
                            <td class="px-5 py-3">{{ $payments->id }}</td>
                            <td class="px-5 py-3">{{ $payments->tran_id }}</td>
                            <td class="px-5 py-3">{{ $payments->name }}</td>
                            <td class="px-5 py-3">{{ $payments->phone_number }}</td>
                            <td class="px-5 py-3">{{ $payments->chair_type }}</td>
                            <td class="px-5 py-3">{{ $payments->number_chair }} Seat</td>
                            <td class="px-5 py-3">{{ $payments->created_at }}</td>
                            <td class="px-5 py-3">${{ $payments->total }}</td>
                            {{-- <td class="px-5 py-3">
                                @if ($transaction)
                                    <span class="text-green-600">✔️ {{ $transaction['payment_status'] }}</span>
                                @endif
                            </td> --}}
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center py-4 text-gray-500">
                                🚫 No payment records found for the selected filter.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</x-app-layout>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"></script>
<!-- Loader Script -->
<script>
    // Show the loading spinner when the page starts loading
    window.addEventListener('load', function() {
        document.getElementById('loading-spinner').style.display = 'none';
    });

    // Show the loading spinner when submitting the form
    document.querySelector('form').addEventListener('submit', function() {
        document.getElementById('loading-spinner').style.display = 'flex';
    });
</script>
