<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-keluarga', ['start_date' => $this->start_date, 'end_date' => $this->end_date]) }}"
                   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">Data Kartu Keluarga</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. KK</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Kepala Keluarga</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Jumlah Anak</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Alamat</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Dusun</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">RT/RW</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Tanggal Dibuat</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_kk }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->kepala_keluarga ?? '-' }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->jumlah_anak }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->alamat }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->dusun->nama ?? '-' }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->rt }}/{{ $record->rw }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ Carbon\Carbon::parse($record->created_at)->translatedFormat('d F Y') }}</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>