<x-app-layout>
    <x-slot name="header">
        {{ __('Report by Destination') }}
    </x-slot>

    <div class="container mx-auto px-4 py-6">
        <div class="mb-6">
            <flux:heading size="2xl">{{ \App\Helpers\Qs::getSchoolName() }}</flux:heading>
        </div>
        {{-- Filter Card --}}
        <div class="bg-white dark:bg-slate-950 shadow-md rounded-lg overflow-hidden mb-6 border border-gray-200 dark:border-zinc-700">
            <div class="bg-gray-50 dark:bg-slate-900 px-6 py-4 border-b border-gray-200 dark:border-zinc-800">
                <h6 class="font-bold text-indigo-600 flex items-center">
                    <i class="fas fa-filter mr-2"></i> Filter Reports
                </h6>
            </div>
            <div class="p-6">
                <form action="{{ route('reports.by-destination') }}" method="GET" class="flex flex-wrap items-end gap-4">
                    <div class="w-full md:w-auto flex-1 min-w-[200px]">
                        <x-input-label for="destination_name" :value="__('Destination')" class="mb-1" />
                        <select name="destination_name" id="destination_name" class="w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm transition duration-150 ease-in-out" onchange="this.form.submit()">
                            <option value="">All Destinations</option>
                            @foreach($destinations as $d)
                                <option value="{{ $d->name }}" {{ request('destination_name') == $d->name ? 'selected' : '' }}>
                                    {{ $d->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-full md:w-auto">
                        <x-input-label for="start_date" :value="__('Start Date')" class="mb-1" />
                        <x-text-input type="date" id="start_date" name="start_date" class="block w-full" :value="request('start_date')" onchange="this.form.submit()" />
                    </div>
                    <div class="w-full md:w-auto">
                        <x-input-label for="end_date" :value="__('End Date')" class="mb-1" />
                        <x-text-input type="date" id="end_date" name="end_date" class="block w-full" :value="request('end_date')" onchange="this.form.submit()" />
                    </div>
                    <div class="w-full md:w-auto">
                        <a href="{{ route('reports.by-destination') }}" class="inline-flex items-center px-4 py-2 bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-300 focus:bg-gray-300 active:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 h-[42px]">
                            Clear
                        </a>
                    </div>
                </form>
            </div>
        </div>

        {{-- Stats Card --}}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white dark:bg-slate-950 shadow-md rounded-lg border-l-4 border-green-500 p-6 flex items-center">
                <div class="flex-shrink-0 bg-green-100 dark:bg-green-900 p-3 rounded-full mr-4">
                    <i class="fas fa-coins text-green-600 text-xl"></i>
                </div>
                <div>
                    <p class="text-xs font-bold text-green-600 uppercase tracking-wider mb-1">Total Collected</p>
                    <p class="text-2xl font-bold text-gray-800">{{ number_format($totalCollected) }} <span class="text-sm font-normal text-gray-500">RWF</span></p>
                </div>
            </div>
        </div>

        {{-- Summary Table Card --}}
        <div class="bg-white dark:bg-slate-950 shadow-md rounded-lg overflow-hidden mb-8 border border-gray-200 dark:border-zinc-700">
         <div class="bg-gray-50 dark:bg-slate-900 px-6 py-4 border-b border-gray-200 dark:border-zinc-800 flex justify-between items-center">
                <h6 class="font-bold text-gray-700 flex items-center">
                    <i class="fas fa-chart-pie mr-2 text-indigo-500"></i> Destination Summary
                </h6>
                 <x-export-buttons table-id="dest-summary-table" export-title="Payment Report by Destination - Summary" />
            </div>
            <div class="p-6">
                <div class="overflow-x-auto">
                    <table id="dest-summary-table" class="min-w-full table-reset divide-y divide-gray-200 dark:divide-zinc-700 border border-gray-100 dark:border-zinc-800 rounded-lg overflow-hidden">
                        <thead class="bg-gray-50 dark:bg-slate-900">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Destination</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Total Collected (RWF)</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-slate-950 divide-y divide-gray-200 dark:divide-zinc-700">
                            @foreach($destinationSummary as $destination => $total)
                            <tr class="hover:bg-gray-50 dark:hover:bg-zinc-900/50 transition-colors duration-150">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-zinc-200">{{ $destination }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-zinc-400">{{ number_format($total) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Details Table Card --}}
        <div class="bg-white dark:bg-slate-950 shadow-md rounded-lg overflow-hidden border border-gray-200 dark:border-zinc-700">
           <div class="bg-gray-50 dark:bg-slate-900 px-6 py-4 border-b border-gray-200 dark:border-zinc-800 flex justify-between items-center">
                <h6 class="font-bold text-gray-700 flex items-center">
                    <i class="fas fa-list-alt mr-2 text-indigo-500"></i> Payment Details
                </h6>
             <x-export-buttons table-id="dest-detail-table" export-title="Payment Report by Destination - Details" />
            </div>
            <div class="p-6">
                <div class="overflow-x-auto">
                   <table id="dest-detail-table" class="min-w-full table-reset divide-y divide-gray-200 dark:divide-zinc-700 border border-gray-100 dark:border-zinc-800 rounded-lg overflow-hidden">
                        <thead class="bg-gray-50 dark:bg-slate-900">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Date</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Student</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Class</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Term</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Amount (RWF)</th>
                            </tr>
                        </thead>
                        <tbody class="dark:bg-slate-950 divide-y divide-gray-200 dark:divide-zinc-700">
                            @foreach($payments as $p)
                            <tr class="hover:bg-gray-50 dark:hover:bg-zinc-900/50 transition-colors duration-150">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-zinc-400">{{ $p->payment_date ? $p->payment_date->format('M d, Y') : '-' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-zinc-200">{{ $p->student->name ?? 'N/A' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-zinc-400">{{ $p->student->class ?? 'N/A' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-zinc-400">{{ $p->term }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-800 dark:text-zinc-200">{{ number_format($p->amount) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

 
</x-app-layout>
