<x-filament-panels::page>
    <x-filament-panels::form wire:submit.prevent="generateReport">
        {{ $this->form }}
        <div class="flex items-center gap-4 mt-4">
            <x-filament::button type="button" class="w-1/2">
                <a href="{{ route('export.laporan-surat', ['start_date' => $this->start_date, 'end_date' => $this->end_date, 'tipe_surat' => $this->tipe_surat]) }}"
                   target="_blank" class="w-full">
                    Export PDF
                </a>
            </x-filament::button>
            <x-filament::button type="submit" wire:target="generateReport" wire:loading.attr="disabled" class="w-1/2">
                <span wire:loading.remove wire:target="generateReport">
                    Tampilkan Laporan
                </span>
                <span wire:loading wire:target="generateReport">
                    Loading...
                </span>
            </x-filament::button>
        </div>
    </x-filament-panels::form>

    <div class="mt-8">
        <h3 class="text-lg font-bold">Laporan {{ $this->tipeSuratOptions[$this->tipe_surat] ?? 'Semua Surat' }}</h3>
        <p class="text-sm text-gray-500">Periode: {{ Carbon\Carbon::parse($this->start_date)->translatedFormat('d F Y') }} sampai {{ Carbon\Carbon::parse($this->end_date)->translatedFormat('d F Y') }}</p>

        @if ($records)
            <div class="mt-4 overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-300">
                    <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">No. Surat</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Tipe Surat</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">NIK</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Nama Pemohon Surat</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Tanggal Pengajuan</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Status</th>
                    </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($records as $record)
                        <tr>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->nomor_surat }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $this->tipeSuratOptions[$record->id_tipe_surat] ?? '-' }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->nik }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->nama_lengkap }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ Carbon\Carbon::parse($record->tanggal_pengajuan)->translatedFormat('d F Y') }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->status }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-4 text-sm text-center text-gray-500">Tidak ada data ditemukan.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</x-filament-panels::page>