    <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-penduduk', ['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 Penduduk</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">NIK</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Nama</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">Tempat, Tanggal Lahir</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">Pekerjaan</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->nik }}</td>
                                <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->nama }}</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->tempat_lahir }}, {{ Carbon\Carbon::parse($record->tanggal_lahir)->translatedFormat('d F Y') }}</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->pekerjaan }}</td>
                                <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">{{ $record->status_penduduk }}</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>