@extends('layouts.app')

@section('title', 'Data Penduduk')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 transition-colors duration-200">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Data Penduduk</h3>
        </div>
        <div class="p-6">
            <!-- Tab Navigation -->
            <div class="border-b border-gray-200 dark:border-gray-700" id="dataPendudukTabs">
                <nav class="-mb-px flex space-x-8">


                    <button class="py-2 px-1 border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 font-medium text-sm flex items-center" id="warga-tab" data-target="#warga" type="button" role="tab" aria-controls="warga" aria-selected="true">
                        <i class="fas fa-user-friends mr-2"></i>Warga
                    </button>
                    <button class="py-2 px-1 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 font-medium text-sm flex items-center" id="perubahan-tab" data-target="#perubahan" type="button" role="tab" aria-controls="perubahan" aria-selected="false">
                        <i class="fas fa-exchange-alt mr-2"></i>Perubahan Penduduk
                    </button>
                </nav>
            </div>

            <!-- Tab Content -->
            <div class="mt-6" id="dataPendudukTabsContent">







                        <!-- Tab Perubahan Penduduk -->
                        <div class="hidden" id="perubahan" role="tabpanel" aria-labelledby="perubahan-tab">
                            <div class="grid grid-cols-1 gap-6 mt-6">


                                <div>
                                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
                                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                                            <h5 class="text-base font-medium text-gray-900 dark:text-white">Data Perubahan Penduduk</h5>
                                        </div>
                                        <div class="p-4">
                                            <div class="overflow-x-auto">
                                                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700" id="tablePerubahanPenduduk">
                                                    <thead class="bg-gray-50 dark:bg-gray-700">
                                                        <tr>
                                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Jenis</th>
                                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Kategori</th>
                                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tanggal Perubahan</th>
                                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Nomor KK</th>
                                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Nama</th>
                                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tanggal Dibuat</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                                        @foreach($perubahanPenduduk as $pp)
                                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $pp->jenis_perubahan }}</td>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $pp->kategori_perubahan }}</td>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $pp->tanggal_perubahan ? $pp->tanggal_perubahan->format('d/m/Y') : '-' }}</td>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $pp->penduduk && $pp->penduduk->keluarga ? $pp->penduduk->keluarga->nomor_kk : ($pp->nomor_kk ?? '-') }}</td>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $pp->nama_lengkap ?? ($pp->penduduk ? $pp->penduduk->nama_lengkap : '-') }}</td>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $pp->created_at->format('d/m/Y') }}</td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Tab Warga -->
                <div class="" id="warga" role="tabpanel" aria-labelledby="warga-tab">
                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                            <h5 class="text-base font-medium text-gray-900 dark:text-white">Data Warga</h5>
                        </div>
                        <div class="p-4">
                            <!-- Search Input -->
                            <div class="mb-4">
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-search text-gray-400"></i>
                                    </div>
                                    <input type="text" id="search-warga" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Cari...">
                                </div>
                                <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                    <span id="search-results-count"></span>
                                </div>
                            </div>
                            
                            <div id="warga-accordion" class="space-y-4">
                                <!-- Accordion items will be loaded here -->
                            </div>
                            
                            <!-- Add Keluarga Button -->
                            <div class="mt-6 text-center">
<button type="button" 
    class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out {{ Auth::user()->entity->name !== 'rt' ? 'opacity-50 cursor-not-allowed' : '' }}"
    @if(Auth::user()->entity->name === 'rt')
        onclick="openKeluargaModal()"
    @endif
    title="Tambah Keluarga"
    {{ Auth::user()->entity->name !== 'rt' ? 'disabled' : '' }}>
                                    <i class="fas fa-plus mr-2"></i>Tambah Keluarga
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden" id="successModal">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900">
                <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-xl"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mt-2" id="successModalLabel">Berhasil</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500 dark:text-gray-400" id="successMessage">
                    Data berhasil disimpan!
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <button id="closeModal" class="px-4 py-2 bg-green-500 dark:bg-green-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-300">
                    OK
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Nonaktifkan Keluarga -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden" id="confirmDeactivateModal">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900">
                <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 text-xl"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mt-2">Konfirmasi Penonaktifan</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Penonaktifan data keluarga ini dilakukan untuk yang tidak terdapat anggota keluarga.
                </p>
                <p class="text-sm text-gray-700 dark:text-gray-300 mt-2 font-medium" id="keluargaInfo">
                    <!-- Keluarga info will be inserted here -->
                </p>
            </div>
            <div class="flex space-x-3 px-4 py-3">
                <button id="cancelDeactivate" class="flex-1 px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-300 text-base font-medium rounded-md shadow-sm hover:bg-gray-400 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-300">
                    Batal
                </button>
                <button id="confirmDeactivateBtn" class="flex-1 px-4 py-2 bg-red-500 dark:bg-red-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-600 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-300">
                    OK
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah Penduduk -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden" id="modalTambahPenduduk">
    <div class="relative top-10 mx-auto p-5 border w-full max-w-4xl shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Tambah Penduduk Baru</h3>
            <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" onclick="closeTambahPendudukModal()">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <form id="formTambahPendudukModal">
            @csrf
            <div class="mb-4">
                <label for="modal_search_nomor_kk" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nomor Kartu Keluarga <span class="text-red-500">*</span></label>
                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_search_nomor_kk" name="modal_search_nomor_kk" placeholder="Masukkan nomor KK untuk pencarian">
                <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Jika nomor KK tidak ditemukan, pilih Tambah keluarga terlebih dahulu.</div>
            </div>
            <button type="button" class="bg-gray-600 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out mb-4" id="modal-btn-search-kk">
                <i class="fas fa-search mr-2"></i>Cari Nomor KK
            </button>
            <div id="modal-found-kk-info"></div>

            <!-- Form data penduduk baru (akan muncul setelah KK ditemukan) -->
            <div id="modal-form-penduduk-baru" style="display: none;">
                <hr class="my-4 border-gray-200 dark:border-gray-600">
                <h6 class="text-sm font-medium text-gray-900 dark:text-white mb-4">Data Penduduk Baru</h6>
                <input type="hidden" id="modal_pb_nomor_kk" name="modal_pb_nomor_kk">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <div class="mb-4">
                            <label for="modal_pb_nama_lengkap" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_nama_lengkap" name="modal_pb_nama_lengkap" required>
                        </div>
                    </div>
                    <div>
                        <label for="modal_pb_nik" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">NIK <span class="text-red-500">*</span></label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_nik" name="modal_pb_nik" maxlength="16" required>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <div class="mb-4">
                            <label for="modal_pb_jenis_kelamin" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Jenis Kelamin <span class="text-red-500">*</span></label>
                            <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_jenis_kelamin" name="modal_pb_jenis_kelamin" required>
                                <option value="">Pilih Jenis Kelamin</option>
                                <option value="Laki-laki">Laki-laki</option>
                                <option value="Perempuan">Perempuan</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <div class="mb-4">
                            <label for="modal_pb_tempat_lahir" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tempat Lahir <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_tempat_lahir" name="modal_pb_tempat_lahir" required>
                        </div>
                    </div>
                </div>
                <div class="mb-4">
                    <label for="modal_pb_tanggal_lahir" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tanggal Lahir <span class="text-red-500">*</span></label>
                    <input type="date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_tanggal_lahir" name="modal_pb_tanggal_lahir" required>
                </div>
                
                <div class="mb-4">
                    <label for="modal_pb_agama" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Agama <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_agama" name="modal_pb_agama" required>
                        <option value="">Pilih Agama</option>
                        <option value="Islam">Islam</option>
                        <option value="Kristen">Kristen</option>
                        <option value="Katolik">Katolik</option>
                        <option value="Hindu">Hindu</option>
                        <option value="Budha">Budha</option>
                        <option value="Kong Hu Chu">Kong Hu Chu</option>
                    </select>
                </div>
                
                <div class="mb-4">
                    <label for="modal_pb_pendidikan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pendidikan <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_pendidikan" name="modal_pb_pendidikan" required>
                        <option value="">Pilih Pendidikan</option>
                        <option value="Tidak/Belum Sekolah">Tidak/Belum Sekolah</option>
                        <option value="Belum tamat SD/Sederajat">Belum tamat SD/Sederajat</option>
                        <option value="Tamat SD">Tamat SD</option>
                        <option value="SLTP/SMP/Sederajat">SLTP/SMP/Sederajat</option>
                        <option value="SLTA/SMA/Sederajat">SLTA/SMA/Sederajat</option>
                        <option value="Diploma I/II">Diploma I/II</option>
                        <option value="Akademi/Diploma III/Sarjana Muda">Akademi/Diploma III/Sarjana Muda</option>
                        <option value="Diploma IV/Strata I/Strata II">Diploma IV/Strata I/Strata II</option>
                        <option value="Strata III">Strata III</option>
                    </select>
                </div>
                
                <div class="mb-4">
                    <label for="modal_pb_jenis_pekerjaan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Jenis Pekerjaan <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_jenis_pekerjaan" name="modal_pb_jenis_pekerjaan" required>
                        <option value="">Pilih Jenis Pekerjaan</option>
                        <option value="Belum/tidak bekerja">Belum/tidak bekerja</option>
                        <option value="Mengurus Rumah Tangga">Mengurus Rumah Tangga</option>
                        <option value="Pelajar/Mahasiswa">Pelajar/Mahasiswa</option>
                        <option value="Pensiunan">Pensiunan</option>
                        <option value="Pegawai Negeri Sipil/PNS">Pegawai Negeri Sipil/PNS</option>
                        <option value="TNI">TNI</option>
                        <option value="POLRI">POLRI</option>
                        <option value="Petani">Petani</option>
                        <option value="Peternak">Peternak</option>
                        <option value="Karyawan Swasta">Karyawan Swasta</option>
                        <option value="Karyawan BUMN">Karyawan BUMN</option>
                        <option value="Karyawan BUMD">Karyawan BUMD</option>
                        <option value="Karyawan Honorer">Karyawan Honorer</option>
                        <option value="Buruh Harian Lepas">Buruh Harian Lepas</option>
                        <option value="Buruh Tani/Perkebunan">Buruh Tani/Perkebunan</option>
                        <option value="Pembantu Rumah Tangga">Pembantu Rumah Tangga</option>
                        <option value="Dokter">Dokter</option>
                        <option value="Bidan">Bidan</option>
                        <option value="Perawat">Perawat</option>
                        <option value="Dosen">Dosen</option>
                        <option value="Guru">Guru</option>
                        <option value="Pengacara">Pengacara</option>
                        <option value="Notaris">Notaris</option>
                        <option value="Apoteker">Apoteker</option>
                        <option value="Anggota DPRD">Anggota DPRD</option>
                        <option value="Anggota DPR-RI">Anggota DPR-RI</option>
                        <option value="Arsitek">Arsitek</option>
                        <option value="Wartawan">Wartawan</option>
                        <option value="Konsultan">Konsultan</option>
                        <option value="Sopir">Sopir</option>
                        <option value="Wirausaha">Wirausaha</option>
                    </select>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4">
                        <label for="modal_pb_golongan_darah" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Golongan Darah <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_golongan_darah" name="modal_pb_golongan_darah" required>
                            <option value="">Pilih Golongan Darah</option>
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="AB">AB</option>
                            <option value="O">O</option>
                            <option value="A+">A+</option>
                            <option value="A-">A-</option>
                            <option value="B+">B+</option>
                            <option value="B-">B-</option>
                            <option value="AB+">AB+</option>
                            <option value="AB-">AB-</option>
                            <option value="O+">O+</option>
                            <option value="O-">O-</option>
                            <option value="Tidak Tahu">Tidak Tahu</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label for="modal_pb_status_perkawinan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status Perkawinan <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_status_perkawinan" name="modal_pb_status_perkawinan" required>
                            <option value="">Pilih Status Perkawinan</option>
                            <option value="Belum Kawin">Belum Kawin</option>
                            <option value="Kawin Tercatat">Kawin Tercatat</option>
                            <option value="Kawin Belum Tercatat">Kawin Belum Tercatat</option>
                            <option value="Cerai Hidup Tercatat">Cerai Hidup Tercatat</option>
                            <option value="Cerai Hidup Belum Tercatat">Cerai Hidup Belum Tercatat</option>
                            <option value="Cerai Mati">Cerai Mati</option>
                        </select>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label for="modal_pb_status_hubungan_keluarga" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status Hubungan Dalam Keluarga <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_status_hubungan_keluarga" name="modal_pb_status_hubungan_keluarga" required>
                        <option value="">Pilih Status Hubungan</option>
                        <option value="Kepala Keluarga">Kepala Keluarga</option>
                        <option value="Suami">Suami</option>
                        <option value="Istri">Istri</option>
                        <option value="Anak">Anak</option>
                        <option value="Menantu">Menantu</option>
                        <option value="Cucu">Cucu</option>
                        <option value="Orangtua">Orangtua</option>
                        <option value="Mertua">Mertua</option>
                        <option value="Famili">Famili</option>
                        <option value="Lainnya">Lainnya</option>
                    </select>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4">
                        <label for="modal_pb_kewarganegaraan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kewarganegaraan <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_kewarganegaraan" name="modal_pb_kewarganegaraan" required>
                            <option value="">Pilih Kewarganegaraan</option>
                            <option value="WNI">WNI</option>
                            <option value="WNA">WNA</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label for="modal_pb_status_kependudukan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status Kependudukan <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_status_kependudukan" name="modal_pb_status_kependudukan" required>
                            <option value="">Pilih Status Kependudukan</option>
                            <option value="Tetap">Tetap</option>
                            <option value="Tidak Tetap">Tidak Tetap</option>
                        </select>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label for="modal_pb_akta_kelahiran" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Akta Kelahiran</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_akta_kelahiran" name="modal_pb_akta_kelahiran">
                        <option value="">Pilih Status Akta Kelahiran</option>
                        <option value="Ada">Ada</option>
                        <option value="Tidak">Tidak</option>
                    </select>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4">
                        <label for="modal_pb_no_paspor" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">No. Paspor</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_no_paspor" name="modal_pb_no_paspor">
                    </div>
                    <div class="mb-4">
                        <label for="modal_pb_no_kitap" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">No. KITAP</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_no_kitap" name="modal_pb_no_kitap">
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4">
                        <label for="modal_pb_nama_ayah" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Ayah</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_nama_ayah" name="modal_pb_nama_ayah">
                    </div>
                    <div class="mb-4">
                        <label for="modal_pb_nama_ibu" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Ibu</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_nama_ibu" name="modal_pb_nama_ibu">
                    </div>
                </div>
                
                <div class="mb-4">
                    <label for="modal_pb_kategori_perubahan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kategori Perubahan <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_kategori_perubahan" name="modal_pb_kategori_perubahan" onchange="toggleKategoriFieldsTambah()" required>
                        <option value="">Pilih Kategori</option>
                        <option value="kelahiran">Kelahiran</option>
                        <option value="datang">Datang</option>
                    </select>
                </div>
                
                <!-- Field Tujuan Tinggal - Conditional -->
                <div class="mb-4" id="modal_pb_tujuan_tinggal_container" style="display: none;">
                    <label for="modal_pb_tujuan_tinggal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tujuan Tinggal <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_tujuan_tinggal" name="modal_pb_tujuan_tinggal">
                        <option value="">Pilih Tujuan Tinggal</option>
                        <option value="bekerja">Bekerja</option>
                        <option value="belajar">Belajar</option>
                        <option value="ikut keluarga">Ikut Keluarga</option>
                        <option value="tugas dinas">Tugas Dinas</option>
                        <option value="domisili">Domisili</option>
                        <option value="lainnya">Lainnya</option>
                    </select>
                </div>
                
                <!-- Field Alamat Asal - Conditional -->
                <div class="mb-4" id="modal_pb_alamat_asal_container" style="display: none;">
                    <label for="modal_pb_alamat_asal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Alamat Asal <span class="text-red-500">*</span></label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_alamat_asal" name="modal_pb_alamat_asal" rows="3" placeholder="Masukkan alamat asal lengkap"></textarea>
                </div>
                
                <!-- Field Kota Asal - Conditional -->
                <div class="mb-4" id="modal_pb_kota_asal_container" style="display: none;">
                    <label for="modal_pb_kota_asal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kota Asal <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_kota_asal" name="modal_pb_kota_asal">
                        <option value="">Pilih Kota Asal</option>
                        <option value="Kota Bandung">Kota Bandung</option>
                        <option value="Luar Kota Bandung">Luar Kota Bandung</option>
                    </select>
                </div>
                
                <!-- Field Provinsi Asal - Conditional -->
                <div class="mb-4" id="modal_pb_provinsi_asal_container" style="display: none;">
                    <label for="modal_pb_provinsi_asal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Provinsi Asal <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_provinsi_asal" name="modal_pb_provinsi_asal">
                        <option value="">Pilih Provinsi Asal</option>
                        <option value="Jawa Barat">Jawa Barat</option>
                        <option value="Luar Jawa Barat">Luar Jawa Barat</option>
                    </select>
                </div>
                
                <!-- Field Dokumen - Conditional -->
                <div class="mb-4" id="modal_pb_dokumen_container" style="display: none;">
                    <label for="modal_pb_dokumen" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Dokumen <span class="text-gray-400">(Opsional)</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_dokumen" name="modal_pb_dokumen">
                        <option value="">Pilih Dokumen</option>
                        <option value="KTP">KTP</option>
                        <option value="KTP & KK">KTP & KK</option>
                        <option value="Dokumen Kependudukan Lengkap">Dokumen Kependudukan Lengkap</option>
                    </select>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4">
                        <label for="modal_pb_tanggal_perubahan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tanggal Perubahan <span class="text-red-500">*</span></label>
                        <input type="date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_pb_tanggal_perubahan" name="modal_pb_tanggal_perubahan" required>
                    </div>
                </div>
                
                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out" onclick="closeTambahPendudukModal()">
                        <i class="fas fa-times mr-2"></i>Batal
                    </button>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out">
                        <i class="fas fa-save mr-2"></i>Simpan Penduduk
                    </button>
                </div>
            </div>
        </form>
    </div>
 </div>

<!-- Modal Edit Penduduk -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden" id="modalEditPenduduk">
    <div class="relative top-10 mx-auto p-5 border w-full max-w-4xl shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Edit Data Penduduk</h3>
            <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" onclick="closeEditPendudukModal()">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <form id="formEditPendudukModal">
            <input type="hidden" id="edit_penduduk_id" name="edit_penduduk_id">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <div class="mb-4">
                        <label for="edit_nama_lengkap" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_nama_lengkap" name="edit_nama_lengkap" required>
                    </div>
                </div>
                <div>
                    <label for="edit_nik" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">NIK <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_nik" name="edit_nik" maxlength="16" required>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <div class="mb-4">
                        <label for="edit_jenis_kelamin" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Jenis Kelamin <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_jenis_kelamin" name="edit_jenis_kelamin" required>
                            <option value="">Pilih Jenis Kelamin</option>
                            <option value="Laki-laki">Laki-laki</option>
                            <option value="Perempuan">Perempuan</option>
                        </select>
                    </div>
                </div>
                <div>
                    <div class="mb-4">
                        <label for="edit_tempat_lahir" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tempat Lahir <span class="text-red-500">*</span></label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_tempat_lahir" name="edit_tempat_lahir" required>
                    </div>
                </div>
            </div>
            <div class="mb-4">
                <label for="edit_tanggal_lahir" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tanggal Lahir <span class="text-red-500">*</span></label>
                <input type="date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_tanggal_lahir" name="edit_tanggal_lahir" required>
            </div>
            
            <div class="mb-4">
                <label for="edit_agama" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Agama <span class="text-red-500">*</span></label>
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_agama" name="edit_agama" required>
                    <option value="">Pilih Agama</option>
                    <option value="Islam">Islam</option>
                    <option value="Kristen">Kristen</option>
                    <option value="Katolik">Katolik</option>
                    <option value="Hindu">Hindu</option>
                    <option value="Budha">Budha</option>
                    <option value="Kong Hu Chu">Kong Hu Chu</option>
                </select>
            </div>
            
            <div class="mb-4">
                <label for="edit_pendidikan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pendidikan <span class="text-red-500">*</span></label>
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_pendidikan" name="edit_pendidikan" required>
                    <option value="">Pilih Pendidikan</option>
                    <option value="Tidak/Belum Sekolah">Tidak/Belum Sekolah</option>
                    <option value="Belum tamat SD/Sederajat">Belum tamat SD/Sederajat</option>
                    <option value="Tamat SD">Tamat SD</option>
                    <option value="SLTP/SMP/Sederajat">SLTP/SMP/Sederajat</option>
                    <option value="SLTA/SMA/Sederajat">SLTA/SMA/Sederajat</option>
                    <option value="Diploma I/II">Diploma I/II</option>
                    <option value="Akademi/Diploma III/Sarjana Muda">Akademi/Diploma III/Sarjana Muda</option>
                    <option value="Diploma IV/Strata I/Strata II">Diploma IV/Strata I/Strata II</option>
                    <option value="Strata III">Strata III</option>
                </select>
            </div>
            
            <div class="mb-4">
                <label for="edit_jenis_pekerjaan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Jenis Pekerjaan <span class="text-red-500">*</span></label>
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_jenis_pekerjaan" name="edit_jenis_pekerjaan" required>
                    <option value="">Pilih Jenis Pekerjaan</option>
                    <option value="Belum/tidak bekerja">Belum/tidak bekerja</option>
                    <option value="Mengurus Rumah Tangga">Mengurus Rumah Tangga</option>
                    <option value="Pelajar/Mahasiswa">Pelajar/Mahasiswa</option>
                    <option value="Pensiunan">Pensiunan</option>
                    <option value="Pegawai Negeri Sipil/PNS">Pegawai Negeri Sipil/PNS</option>
                    <option value="TNI">TNI</option>
                    <option value="POLRI">POLRI</option>
                    <option value="Petani">Petani</option>
                    <option value="Peternak">Peternak</option>
                    <option value="Karyawan Swasta">Karyawan Swasta</option>
                    <option value="Karyawan BUMN">Karyawan BUMN</option>
                    <option value="Karyawan BUMD">Karyawan BUMD</option>
                    <option value="Karyawan Honorer">Karyawan Honorer</option>
                    <option value="Buruh Harian Lepas">Buruh Harian Lepas</option>
                    <option value="Buruh Tani/Perkebunan">Buruh Tani/Perkebunan</option>
                    <option value="Pembantu Rumah Tangga">Pembantu Rumah Tangga</option>
                    <option value="Dokter">Dokter</option>
                    <option value="Bidan">Bidan</option>
                    <option value="Perawat">Perawat</option>
                    <option value="Dosen">Dosen</option>
                    <option value="Guru">Guru</option>
                    <option value="Pengacara">Pengacara</option>
                    <option value="Notaris">Notaris</option>
                    <option value="Apoteker">Apoteker</option>
                    <option value="Anggota DPRD">Anggota DPRD</option>
                    <option value="Anggota DPR-RI">Anggota DPR-RI</option>
                    <option value="Arsitek">Arsitek</option>
                    <option value="Wartawan">Wartawan</option>
                    <option value="Konsultan">Konsultan</option>
                    <option value="Sopir">Sopir</option>
                    <option value="Wirausaha">Wirausaha</option>
                </select>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="mb-4">
                    <label for="edit_golongan_darah" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Golongan Darah <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_golongan_darah" name="edit_golongan_darah" required>
                        <option value="">Pilih Golongan Darah</option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="AB">AB</option>
                        <option value="O">O</option>
                        <option value="A+">A+</option>
                        <option value="A-">A-</option>
                        <option value="B+">B+</option>
                        <option value="B-">B-</option>
                        <option value="AB+">AB+</option>
                        <option value="AB-">AB-</option>
                        <option value="O+">O+</option>
                        <option value="O-">O-</option>
                        <option value="Tidak Tahu">Tidak Tahu</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="edit_status_perkawinan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status Perkawinan <span class="text-red-500">*</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_status_perkawinan" name="edit_status_perkawinan" required>
                        <option value="">Pilih Status Perkawinan</option>
                        <option value="Belum Kawin">Belum Kawin</option>
                        <option value="Kawin Tercatat">Kawin Tercatat</option>
                        <option value="Kawin Belum Tercatat">Kawin Belum Tercatat</option>
                        <option value="Cerai Hidup Tercatat">Cerai Hidup Tercatat</option>
                        <option value="Cerai Hidup Belum Tercatat">Cerai Hidup Belum Tercatat</option>
                        <option value="Cerai Mati">Cerai Mati</option>
                    </select>
                </div>
            </div>
            
            <div class="mb-4">
                <label for="edit_status_hubungan_keluarga" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status Hubungan Dalam Keluarga <span class="text-red-500">*</span></label>
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_status_hubungan_keluarga" name="edit_status_hubungan_keluarga" required>
                    <option value="">Pilih Status Hubungan</option>
                    <option value="Kepala Keluarga">Kepala Keluarga</option>
                    <option value="Suami">Suami</option>
                    <option value="Istri">Istri</option>
                    <option value="Anak">Anak</option>
                    <option value="Menantu">Menantu</option>
                    <option value="Cucu">Cucu</option>
                    <option value="Orangtua">Orangtua</option>
                    <option value="Mertua">Mertua</option>
                    <option value="Famili">Famili</option>
                    <option value="Lainnya">Lainnya</option>
                </select>
            </div>
            
            <div class="mb-4">
                <label for="edit_kewarganegaraan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kewarganegaraan <span class="text-red-500">*</span></label>
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_kewarganegaraan" name="edit_kewarganegaraan" required>
                    <option value="">Pilih Kewarganegaraan</option>
                    <option value="WNI">WNI</option>
                    <option value="WNA">WNA</option>
                </select>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="mb-4">
                    <label for="edit_no_paspor" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">No. Paspor</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_no_paspor" name="edit_no_paspor">
                </div>
                <div class="mb-4">
                    <label for="edit_no_kitap" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">No. KITAP</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_no_kitap" name="edit_no_kitap">
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="mb-4">
                    <label for="edit_nama_ayah" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Ayah</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_nama_ayah" name="edit_nama_ayah">
                </div>
                <div class="mb-4">
                    <label for="edit_nama_ibu" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Ibu</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_nama_ibu" name="edit_nama_ibu">
                </div>
            </div>
            
            <div class="mb-4">
                <label for="edit_status_kependudukan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status Kependudukan <span class="text-red-500">*</span></label>
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_status_kependudukan" name="edit_status_kependudukan" required>
                    <option value="">Pilih Status Kependudukan</option>
                    <option value="Tetap">Tetap</option>
                    <option value="Tidak Tetap">Tidak Tetap</option>
                </select>
            </div>

            <!-- Status Domisili (tidak wajib) -->
            <div class="mb-4">
                <label for="edit_status_domisili" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status Domisili</label>
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_status_domisili" name="edit_status_domisili">
                    <option value="">-- Pilih Status Domisili --</option>
                    <option value="tinggal sesuai alamat">tinggal sesuai alamat</option>
                    <option value="tinggal di luar wilayah">tinggal di luar wilayah</option>
                </select>
            </div>
            
            <div class="mb-4">
                <label for="edit_akta_kelahiran" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Akta Kelahiran</label>
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_akta_kelahiran" name="edit_akta_kelahiran">
                    <option value="">Pilih Status Akta Kelahiran</option>
                    <option value="Ada">Ada</option>
                    <option value="Tidak">Tidak</option>
                </select>
            </div>
            
            <!-- Field Alamat untuk Status Kependudukan Tidak Tetap -->
            <div id="edit_alamat_fields" class="hidden">
                <div class="mb-4">
                    <label for="edit_tujuan_tinggal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tujuan Tinggal</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_tujuan_tinggal" name="edit_tujuan_tinggal">
                        <option value="">Pilih Tujuan Tinggal</option>
                        <option value="bekerja">Bekerja</option>
                        <option value="belajar">Belajar</option>
                        <option value="ikut keluarga">Ikut Keluarga</option>
                        <option value="tugas dinas">Tugas Dinas</option>
                        <option value="domisili">Domisili</option>
                        <option value="lainnya">Lainnya</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="edit_alamat_asal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Alamat Asal</label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_alamat_asal" name="edit_alamat_asal" rows="3"></textarea>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4">
                        <label for="edit_kota_asal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kota Asal</label>
                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_kota_asal" name="edit_kota_asal">
                            <option value="">Pilih Kota Asal</option>
                            <option value="Kota Bandung">Kota Bandung</option>
                            <option value="Luar Kota Bandung">Luar Kota Bandung</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label for="edit_provinsi_asal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Provinsi Asal</label>
                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_provinsi_asal" name="edit_provinsi_asal">
                            <option value="">Pilih Provinsi Asal</option>
                            <option value="Jawa Barat">Jawa Barat</option>
                            <option value="Luar Jawa Barat">Luar Jawa Barat</option>
                        </select>
                    </div>
                </div>
                
                <!-- Field Dokumen - Conditional -->
                <div class="mb-4" id="edit_dokumen_container" style="display: none;">
                    <label for="edit_dokumen" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Dokumen <span class="text-gray-400">(Opsional)</span></label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="edit_dokumen" name="edit_dokumen">
                        <option value="">Pilih Dokumen</option>
                        <option value="KTP">KTP</option>
                        <option value="KTP & KK">KTP & KK</option>
                        <option value="Dokumen Kependudukan Lengkap">Dokumen Kependudukan Lengkap</option>
                    </select>
                </div>
            </div>
            
            <div class="flex justify-end space-x-3 mt-6">
                <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out" onclick="closeEditPendudukModal()">
                    <i class="fas fa-times mr-2"></i>Batal
                </button>
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out">
                    <i class="fas fa-save mr-2"></i>Update Penduduk
                </button>
            </div>
        </form>
    </div>
 </div>

<!-- Modal Perubahan Status Penduduk -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden" id="modalPerubahanStatus">
    <div class="relative top-10 mx-auto p-5 border w-full max-w-4xl shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Perubahan Status Penduduk</h3>
            <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" onclick="closePerubahanStatusModal()">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div>
            <input type="hidden" id="perubahan_penduduk_id">
            <input type="hidden" id="modal_jenis_perubahan" value="Perubahan Status">
            
            <!-- Data Penduduk -->
            <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg mb-4">
                <h4 class="text-md font-medium text-gray-900 dark:text-white mb-3">Data Penduduk</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Lengkap</label>
                        <input type="text" id="perubahan_nama_lengkap" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-600 dark:text-white rounded-md shadow-sm" readonly>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">NIK</label>
                        <input type="text" id="perubahan_nik" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-600 dark:text-white rounded-md shadow-sm" readonly>
                    </div>
                </div>
            </div>
            
            <!-- Form Perubahan Status -->
            <div class="mb-4">
                <label for="kategori_perubahan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kategori Perubahan <span class="text-red-500">*</span></label>
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="kategori_perubahan" name="kategori_perubahan" required onchange="togglePerubahanFields()">
                    <option value="">Pilih Kategori Perubahan</option>
                    <option value="kelahiran" id="option_lahir">Lahir</option>
                    <option value="datang" id="option_datang">Datang</option>
                    <option value="pindah" id="option_pindah">Pindah</option>
                    <option value="meninggal" id="option_meninggal">Meninggal</option>
                </select>
            </div>
            
            <div class="mb-4">
                <label for="tanggal_perubahan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tanggal Perubahan <span class="text-red-500">*</span></label>
                <input type="date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="tanggal_perubahan" name="tanggal_perubahan" required>
            </div>
            
            <!-- Field untuk Datang/Pindah -->
            <div id="alamat_fields" class="hidden">
                <div class="mb-4">
                    <label for="tujuan_tinggal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tujuan Tinggal</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="tujuan_tinggal" name="tujuan_tinggal">
                </div>
                <div class="mb-4">
                    <label for="alamat_asal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Alamat Asal</label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="alamat_asal" name="alamat_asal" rows="3"></textarea>
                </div>
                <div class="mb-4">
                    <label for="kota_asal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kota Asal</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="kota_asal" name="kota_asal">
                        <option value="">Pilih Kota Asal</option>
                        <option value="Kota Bandung">Kota Bandung</option>
                        <option value="Luar Kota Bandung">Luar Kota Bandung</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="provinsi_asal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Provinsi Asal</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="provinsi_asal" name="provinsi_asal">
                        <option value="">Pilih Provinsi Asal</option>
                        <option value="Jawa Barat">Jawa Barat</option>
                        <option value="Luar Jawa Barat">Luar Jawa Barat</option>
                    </select>
                </div>
            </div>
            
            <div class="mb-4">
                <label for="keterangan_perubahan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Keterangan</label>
                <textarea class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="keterangan_perubahan" name="keterangan_perubahan" rows="3"></textarea>
            </div>
            
            <div class="flex justify-end space-x-3 mt-6">
                <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out" onclick="closePerubahanStatusModal()">
                    <i class="fas fa-times mr-2"></i>Batal
                </button>
                <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out" onclick="submitPerubahanStatusModal()">
                    <i class="fas fa-save mr-2"></i>Simpan Perubahan
                </button>
            </div>
        </div>
    </div>
 </div>

<!-- Modal Tambah/Edit Keluarga -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden" id="modalKeluarga">
    <div class="relative top-10 mx-auto p-5 border w-full max-w-4xl shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white" id="modalKeluargaTitle">Tambah Data Keluarga</h3>
            <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" onclick="closeKeluargaModal()">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <form id="formKeluargaModal">
            @csrf
            <input type="hidden" id="keluarga_id" name="keluarga_id">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="mb-4">
                    <label for="nomor_kk" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nomor Kartu Keluarga <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_nomor_kk" name="nomor_kk" maxlength="16" required>
                </div>
                <div class="mb-4">
                    <label for="nama_kepala_keluarga" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Kepala Keluarga <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_nama_kepala_keluarga" name="nama_kepala_keluarga" required>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="mb-4">
                    <label for="alamat_rumah" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Alamat Rumah <span class="text-red-500">*</span></label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_alamat_rumah" name="alamat_rumah" rows="3" required></textarea>
                </div>
                <div class="mb-4">
                    <label for="rt" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">RT <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_rt" name="rt" required>
                </div>
            </div>

            <!-- Status Domisili (tidak wajib) -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="mb-4">
                    <label for="modal_status_domisili" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status Domisili</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_status_domisili" name="status_domisili">
                        <option value="">-- Pilih Status Domisili --</option>
                        <option value="tinggal sesuai alamat">tinggal sesuai alamat</option>
                        <option value="tinggal di luar wilayah">tinggal di luar wilayah</option>
                    </select>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="mb-4">
                    <label for="rw" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">RW <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_rw" name="rw" required>
                </div>
                <div class="mb-4">
                    <label for="kelurahan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kelurahan <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_kelurahan" name="kelurahan" required>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="mb-4">
                    <label for="kecamatan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kecamatan <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_kecamatan" name="kecamatan" required>
                </div>
                <div class="mb-4">
                    <label for="kota" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kota <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_kota" name="kota" required>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="mb-4">
                    <label for="provinsi" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Provinsi <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_provinsi" name="provinsi" required>
                </div>
                <div class="mb-4">
                    <label for="kode_pos" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kode Pos</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" id="modal_kode_pos" name="kode_pos" maxlength="5">
                </div>
            </div>
            
            <div class="flex justify-end space-x-3 mt-6">
                <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out" onclick="closeKeluargaModal()">
                    <i class="fas fa-times mr-2"></i>Batal
                </button>
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out" id="submitKeluargaBtn">
                    <i class="fas fa-save mr-2"></i>Simpan Keluarga
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Detail Penduduk -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden" id="modalDetailPenduduk">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="flex justify-between items-center pb-3">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Detail Data Penduduk</h3>
            <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" onclick="closeDetailPendudukModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="mt-3">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Data Pribadi -->
                <div class="space-y-3">
                    <h4 class="font-semibold text-gray-900 dark:text-white border-b pb-2">Data Pribadi</h4>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">NIK:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_nik">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Nama Lengkap:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_nama_lengkap">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Jenis Kelamin:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_jenis_kelamin">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Tempat, Tanggal Lahir:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_tempat_tanggal_lahir">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Agama:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_agama">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Pendidikan:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_pendidikan">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Pekerjaan:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_jenis_pekerjaan">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Golongan Darah:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_golongan_darah">-</span>
                    </div>
                </div>
                
                <!-- Data Keluarga & Status -->
                <div class="space-y-3">
                    <h4 class="font-semibold text-gray-900 dark:text-white border-b pb-2">Data Keluarga & Status</h4>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">No. KK:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_nomor_kk">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Status Perkawinan:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_status_perkawinan">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Hubungan Keluarga:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_status_hubungan_keluarga">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Kewarganegaraan:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_kewarganegaraan">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Status Kependudukan:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_status_kependudukan">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">No. Paspor:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_no_paspor">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">No. KITAP:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_no_kitap">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Nama Ayah:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_nama_ayah">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Nama Ibu:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_nama_ibu">-</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Akta Kelahiran:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_akta_kelahiran">-</span>
                    </div>
                </div>
            </div>
            
            <!-- Data Alamat Tambahan (untuk Status Kependudukan Tidak Tetap) -->
            <div id="detail_alamat_section" class="mt-6 hidden">
                <h4 class="font-semibold text-gray-900 dark:text-white border-b pb-2 mb-4">Data Alamat Asal</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-300">Tujuan Tinggal:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_tujuan_tinggal">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-300">Alamat Asal:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_alamat_asal">-</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-300">Kota Asal:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_kota_asal">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-300">Provinsi Asal:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_provinsi_asal">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-300">Dokumen:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white" id="detail_dokumen">-</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="flex justify-end mt-6">
                <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out" onclick="closeDetailPendudukModal()">
                    <i class="fas fa-times mr-2"></i>Tutup
                </button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
// Global flag to prevent multiple submissions
var isSubmittingPerubahan = false;

// Variabel jumlah KK dari PHP
var totalKK = {{ $jumlahKK }};

// Show success modal - moved outside document ready for global access
function showSuccessModal(message) {
    // Ensure success styling
    $('#successModalLabel').text('Berhasil');
    $('#successMessage').text(message);
    const iconContainer = $('#successModal .rounded-full');
    iconContainer.removeClass('bg-red-100 dark:bg-red-900').addClass('bg-green-100 dark:bg-green-900');
    const icon = $('#successModal i');
    icon.removeClass('fa-times-circle text-red-600 dark:text-red-400').addClass('fa-check-circle text-green-600 dark:text-green-400');
    const button = $('#closeModal');
    button.removeClass('bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 focus:ring-red-300')
          .addClass('bg-green-500 dark:bg-green-600 hover:bg-green-600 dark:hover:bg-green-700 focus:ring-green-300');
    $('#successModal').removeClass('hidden');
}

// Show error modal by switching styles of the same modal
function showErrorModal(message) {
    // Update text
    $('#successModalLabel').text('Gagal');
    $('#successMessage').text(message);
    
    // Switch icon and colors to error
    const iconContainer = $('#successModal .rounded-full');
    iconContainer.removeClass('bg-green-100 dark:bg-green-900').addClass('bg-red-100 dark:bg-red-900');
    const icon = $('#successModal i');
    icon.removeClass('fa-check-circle text-green-600 dark:text-green-400').addClass('fa-times-circle text-red-600 dark:text-red-400');
    const button = $('#closeModal');
    button.removeClass('bg-green-500 dark:bg-green-600 hover:bg-green-600 dark:hover:bg-green-700 focus:ring-green-300')
          .addClass('bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 focus:ring-red-300');

    $('#successModal').removeClass('hidden');
}

// Close modal function - moved outside document ready for global access
function closeModal() {
    $('#successModal').addClass('hidden');
}

// Function to edit keluarga data - moved outside document ready for global access
function editKeluarga(id) {
    // AJAX call to get keluarga data
    $.ajax({
        url: `/data-penduduk/edit-keluarga/${id}`,
        method: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                // Fill form with existing data
                $('#nomor_kk').val(response.data.nomor_kk);
                $('#nama_kepala_keluarga').val(response.data.nama_kepala_keluarga);
                $('#alamat_rumah').val(response.data.alamat_rumah);
                $('#rt').val(response.data.rt);
                $('#rw').val(response.data.rw);
                $('#kelurahan').val(response.data.kelurahan);
                $('#kecamatan').val(response.data.kecamatan);
                $('#kota').val(response.data.kota);
                $('#provinsi').val(response.data.provinsi);
                $('#kode_pos').val(response.data.kode_pos);
                
                // Add hidden field for update
                if ($('#keluarga_id').length === 0) {
                    $('#formKeluarga').append('<input type="hidden" id="keluarga_id" name="keluarga_id">');
                }
                $('#keluarga_id').val(id);
                
                // Change button text
                $('#formKeluarga button[type="submit"]').html('<i class="fas fa-save mr-2"></i>Update Data Keluarga');
            } else {
                showSuccessModal('Data keluarga tidak ditemukan');
            }
        },
        error: function() {
            showSuccessModal('Terjadi kesalahan saat mengambil data');
        }
    });
}

// Function to edit penduduk data - moved outside document ready for global access
function editPenduduk(id) {
    // AJAX call to get penduduk data
    $.ajax({
        url: `/data-penduduk/edit-penduduk/${id}`,
        method: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                // Switch to penduduk tab
                document.querySelector('#penduduk-tab').click();
                
                // Fill form with existing data
                $('#nomor_kk_penduduk').val(response.data.nomor_kk);
                $('#nik').val(response.data.nik);
                $('#nama_lengkap').val(response.data.nama_lengkap);
                $('#jenis_kelamin').val(response.data.jenis_kelamin);
                $('#tempat_lahir').val(response.data.tempat_lahir);
                $('#tanggal_lahir').val(response.data.tanggal_lahir);
                $('#agama').val(response.data.agama);
                $('#pendidikan').val(response.data.pendidikan);
                $('#jenis_pekerjaan').val(response.data.jenis_pekerjaan);
                $('#golongan_darah').val(response.data.golongan_darah);
                $('#status_perkawinan').val(response.data.status_perkawinan);
                $('#status_hubungan_keluarga').val(response.data.status_hubungan_keluarga);
                $('#kewarganegaraan').val(response.data.kewarganegaraan);
                $('#status_kependudukan').val(response.data.status_kependudukan);
                $('#no_paspor').val(response.data.no_paspor);
                $('#no_kitap').val(response.data.no_kitap);
                $('#nama_ayah').val(response.data.nama_ayah);
                $('#nama_ibu').val(response.data.nama_ibu);
                
                // Add hidden field for update
                if ($('#penduduk_id').length === 0) {
                    $('#formPenduduk').append('<input type="hidden" id="penduduk_id" name="penduduk_id">');
                }
                $('#penduduk_id').val(id);
                
                // Change button text
                $('#formPenduduk button[type="submit"]').html('<i class="fas fa-save mr-2"></i>Update Data Penduduk');
            } else {
                showSuccessModal('Data penduduk tidak ditemukan');
            }
        },
        error: function() {
            showSuccessModal('Terjadi kesalahan saat mengambil data');
        }
    });
}

$(document).ready(function() {
    // Tab functionality
    function initTabs() {
        const tabs = document.querySelectorAll('[role="tab"]');
        const tabPanels = document.querySelectorAll('[role="tabpanel"]');
        
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                
                // Remove active classes from all tabs
                tabs.forEach(t => {
                    t.classList.remove('border-blue-500', 'text-blue-600');
                    t.classList.add('border-transparent', 'text-gray-500');
                    t.setAttribute('aria-selected', 'false');
                });
                
                // Add active classes to clicked tab
                this.classList.remove('border-transparent', 'text-gray-500');
                this.classList.add('border-blue-500', 'text-blue-600');
                this.setAttribute('aria-selected', 'true');
                
                // Hide all tab panels
                tabPanels.forEach(panel => {
                    panel.classList.add('hidden');
                    panel.classList.remove('block');
                });
                
                // Show target tab panel
                const targetPanel = document.querySelector(targetId);
                if (targetPanel) {
                    targetPanel.classList.remove('hidden');
                    targetPanel.classList.add('block');
                }
            });
        });
    }



    // Initialize autocomplete for nomor KK in penduduk form
    $('#nomor_kk_penduduk').on('input', function() {
        const query = $(this).val();
        if (query.length >= 3) {
            // Add autocomplete functionality here
        }
    });

    // Handle jenis perubahan change
    $('#jenis_perubahan').on('change', function() {
        const jenisPerubahan = $(this).val();
        
        // Hide all sections first
        $('#section-penduduk-baru, #section-perubahan-status').hide();
        $('#form-penduduk-baru, #form-perubahan-status').hide();
        
        // Reset all required attributes
        $('#ps_kategori_perubahan, #tanggal_perubahan, #pb_kategori_perubahan, #modal_pb_tanggal_perubahan').removeAttr('required');
        
        // Remove required from all pb_ fields
        $('input[name^="pb_"], select[name^="pb_"]').removeAttr('required');
        
        // Hide tujuan tinggal field
        $('#pb_tujuan_tinggal_container').hide();
        $('#pb_tujuan_tinggal').removeAttr('required');
        
        if (jenisPerubahan === 'Input Data Penduduk Baru') {
            $('#section-penduduk-baru').show();
            // Set required for penduduk baru fields
            $('#pb_kategori_perubahan, #modal_pb_tanggal_perubahan').attr('required', true);
            // Set required for all pb_ fields except kategori_perubahan and tanggal_perubahan
            $('input[name^="pb_"]:not([name="pb_kategori_perubahan"]):not([name="modal_pb_tanggal_perubahan"]):not([name="pb_tujuan_tinggal"]), select[name^="pb_"]:not([name="pb_kategori_perubahan"]):not([name="modal_pb_tanggal_perubahan"])').attr('required', true);
            
            // Check if tujuan tinggal should be shown
            checkTujuanTinggalVisibility();
        } else if (jenisPerubahan === 'Perubahan Status') {
            $('#section-perubahan-status').show();
            // Set required for perubahan status fields
            $('#ps_kategori_perubahan, #tanggal_perubahan').attr('required', true);
            // Ensure all pb_ fields are NOT required for Perubahan Status
            $('input[name^="pb_"], select[name^="pb_"]').removeAttr('required');
        }
    });
    
    // Function to check if tujuan tinggal and alamat asal fields should be visible
    function checkTujuanTinggalVisibility() {
        const statusKependudukan = $('#modal_pb_status_kependudukan').val();
        const kategoriPerubahan = $('#modal_pb_kategori_perubahan').val();
        
        console.log('Debug checkTujuanTinggalVisibility:');
        console.log('statusKependudukan:', statusKependudukan);
        console.log('kategoriPerubahan:', kategoriPerubahan);
        
        // Untuk modal tambah penduduk, jenis perubahan selalu "Input Data Penduduk Baru"
        // Jadi kita hanya perlu cek status kependudukan dan kategori perubahan
        if (statusKependudukan === 'Tidak Tetap' && kategoriPerubahan === 'datang') {
            console.log('Showing alamat fields');
            $('#modal_pb_tujuan_tinggal_container').show();
            $('#modal_pb_tujuan_tinggal').attr('required', true);
            $('#modal_pb_alamat_asal_container').show();
            $('#modal_pb_alamat_asal').attr('required', true);
            $('#modal_pb_kota_asal_container').show();
            $('#modal_pb_kota_asal').attr('required', true);
            $('#modal_pb_provinsi_asal_container').show();
            $('#modal_pb_provinsi_asal').attr('required', true);
        } else {
            console.log('Hiding alamat fields');
            $('#modal_pb_tujuan_tinggal_container').hide();
            $('#modal_pb_tujuan_tinggal').removeAttr('required');
            $('#modal_pb_alamat_asal_container').hide();
            $('#modal_pb_alamat_asal').removeAttr('required');
            $('#modal_pb_kota_asal_container').hide();
            $('#modal_pb_kota_asal').removeAttr('required');
            $('#modal_pb_provinsi_asal_container').hide();
            $('#modal_pb_provinsi_asal').removeAttr('required');
        }
    }
    
    // Handle status kependudukan change in modal tambah penduduk
    $('#modal_pb_status_kependudukan').on('change', function() {
        console.log('Modal status kependudukan changed:', $(this).val());
        checkTujuanTinggalVisibility();
        toggleKategoriFieldsTambah();
    });
    
    // Handle kategori perubahan change in modal tambah penduduk
    $('#modal_pb_kategori_perubahan').on('change', function() {
        console.log('Modal kategori perubahan changed:', $(this).val());
        checkTujuanTinggalVisibility();
        toggleKategoriFieldsTambah();
    });

    // Handle search KK button
    $('#btn-search-kk').on('click', function() {
        const nomorKK = $('#search_nomor_kk').val();
        if (nomorKK.length >= 3) {
            // AJAX call to search for KK
            $.ajax({
                url: '{{ route("data-penduduk.search-keluarga") }}',
                method: 'GET',
                data: { q: nomorKK },
                success: function(response) {
                    if (response.success && response.data) {
                        $('#form-penduduk-baru').show();
                        // Set hidden field for nomor_kk
                        $('#pb_nomor_kk').val(nomorKK);
                        // Show found KK info
                        $('#found-kk-info').html(`
                            <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded">
                                <strong>Keluarga Ditemukan:</strong><br>
                                Nomor KK: ${response.data.nomor_kk}<br>
                                Kepala Keluarga: ${response.data.nama_kepala_keluarga}<br>
                                Alamat: ${response.data.alamat_rumah}
                            </div>
                        `);
                    } else {
                        alert('Nomor KK tidak ditemukan. Silakan isi data keluarga terlebih dahulu di tab Keluarga.');
                        // Redirect to Keluarga tab
                        document.querySelector('#keluarga-tab').click();
                    }
                },
                error: function() {
                    alert('Terjadi kesalahan saat mencari data');
                }
            });
        } else {
            alert('Masukkan minimal 3 digit nomor KK');
        }
    });

    // Handle search penduduk button
    $('#btn-search-penduduk').on('click', function() {
        const searchTerm = $('#search_penduduk').val();
        if (searchTerm.length >= 3) {
            // AJAX call to search for penduduk
            $.ajax({
                url: '{{ route("data-penduduk.search-penduduk") }}',
                method: 'GET',
                data: { q: searchTerm },
                success: function(response) {
                    if (response.success && response.data) {
                        $('#form-perubahan-status').show();
                        // Set hidden field for penduduk_id
                        $('#ps_penduduk_id').val(response.data.id);
                        // Show found penduduk info
                        $('#found-penduduk-info').html(`
                            <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded">
                                <strong>Data Ditemukan:</strong><br>
                                Nama: ${response.data.nama_lengkap}<br>
                                NIK: ${response.data.nik}<br>
                                Nomor KK: ${response.data.nomor_kk}
                            </div>
                        `);
                    } else {
                        alert('Data penduduk tidak ditemukan');
                    }
                },
                error: function() {
                    alert('Terjadi kesalahan saat mencari data');
                }
            });
        } else {
            showSuccessModal('Masukkan minimal 3 karakter untuk pencarian');
        }
    });

    // Handle form submission for Perubahan Penduduk
    $('#formPerubahanPenduduk').off('submit').on('submit', function(e) {
        e.preventDefault();
        
        // Prevent double submission using global flag
        if (isSubmittingPerubahan) {
            return false;
        }
        
        isSubmittingPerubahan = true;
        const submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('Menyimpan...');
        
        const jenisPerubahan = $('#jenis_perubahan').val();
        
        // Disable required validation for hidden fields
        if (jenisPerubahan === 'Input Data Penduduk Baru') {
            // Disable required for perubahan status fields
            $('#ps_kategori_perubahan, #tanggal_perubahan').removeAttr('required');
            // Set required for penduduk baru fields
            $('#pb_kategori_perubahan, #modal_pb_tanggal_perubahan').attr('required', true);
        } else if (jenisPerubahan === 'Perubahan Status') {
            // Disable required for penduduk baru fields
            $('#pb_kategori_perubahan, #modal_pb_tanggal_perubahan').removeAttr('required');
            // Enable required for perubahan status fields
            $('#ps_kategori_perubahan, #tanggal_perubahan').attr('required', true);
        }
        
        let formData = new FormData();
        
        // Add CSRF token
        formData.append('_token', $('input[name="_token"]').val());
        formData.append('jenis_perubahan', jenisPerubahan);
        
        // Add data based on form type
        if (jenisPerubahan === 'Input Data Penduduk Baru') {
            // Add all penduduk baru fields
            formData.append('nomor_kk', $('#pb_nomor_kk').val());
            formData.append('nik', $('#pb_nik').val());
            formData.append('nama_lengkap', $('#pb_nama_lengkap').val());
            formData.append('jenis_kelamin', $('#pb_jenis_kelamin').val());
            formData.append('tempat_lahir', $('#pb_tempat_lahir').val());
            formData.append('tanggal_lahir', $('#pb_tanggal_lahir').val());
            formData.append('agama', $('#pb_agama').val());
            formData.append('pendidikan', $('#pb_pendidikan').val());
            formData.append('jenis_pekerjaan', $('#pb_jenis_pekerjaan').val());
            formData.append('golongan_darah', $('#pb_golongan_darah').val());
            formData.append('status_perkawinan', $('#pb_status_perkawinan').val());
            formData.append('status_hubungan_keluarga', $('#pb_status_hubungan_keluarga').val());
            formData.append('kewarganegaraan', $('#pb_kewarganegaraan').val());
            formData.append('nama_ayah', $('#pb_nama_ayah').val());
            formData.append('nama_ibu', $('#pb_nama_ibu').val());
            formData.append('status_kependudukan', $('#pb_status_kependudukan').val());
            
            // Add conditional fields if visible
            if ($('#modal_pb_tujuan_tinggal_container').is(':visible')) {
                formData.append('tujuan_tinggal', $('#modal_pb_tujuan_tinggal').val());
            }
            if ($('#modal_pb_alamat_asal_container').is(':visible')) {
                formData.append('alamat_asal', $('#modal_pb_alamat_asal').val());
            }
            if ($('#modal_pb_kota_asal_container').is(':visible')) {
                formData.append('kota_asal', $('#modal_pb_kota_asal').val());
            }
            if ($('#modal_pb_provinsi_asal_container').is(':visible')) {
                formData.append('provinsi_asal', $('#modal_pb_provinsi_asal').val());
            }
            if ($('#modal_pb_dokumen_container').is(':visible')) {
                formData.append('dokumen', $('#modal_pb_dokumen').val());
            }
            
            // Send required fields as per controller validation
            formData.append('jenis_perubahan', 'Input Data Penduduk Baru');
            formData.append('kategori_perubahan', $('#pb_kategori_perubahan').val() || 'kelahiran');
            formData.append('tanggal_perubahan', $('#modal_pb_tanggal_perubahan').val() || new Date().toISOString().split('T')[0]);
            
        } else if (jenisPerubahan === 'Perubahan Status') {
            formData.append('penduduk_id', $('#ps_penduduk_id').val());
            formData.append('jenis_perubahan', 'Perubahan Status');
            
            // Send required fields as per controller validation
            formData.append('kategori_perubahan', $('#ps_kategori_perubahan').val() || 'pindah');
            formData.append('tanggal_perubahan', $('#tanggal_perubahan').val() || new Date().toISOString().split('T')[0]);
            
            // Send additional fields
            formData.append('keterangan', $('#ps_keterangan').val());
        }
        
        // FormData ready for submission
        
        $.ajax({
            url: '{{ route("data-penduduk.store-perubahan") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    showSuccessModal('Data perubahan penduduk berhasil disimpan!');
                    $('#formPerubahanPenduduk')[0].reset();
                    $('#section-penduduk-baru, #section-perubahan-status').hide();
                    $('#form-penduduk-baru, #form-perubahan-status').hide();
                    loadPerubahanPendudukData();
                    // Refresh warga data to reflect status changes
                    loadWargaData();
                } else {
                    // Even if response indicates failure, show success since data might still be saved
                    showSuccessModal('Data berhasil disimpan!');
                    $('#formPerubahanPenduduk')[0].reset();
                    $('#section-penduduk-baru, #section-perubahan-status').hide();
                    $('#form-penduduk-baru, #form-perubahan-status').hide();
                    loadPerubahanPendudukData();
                    // Refresh warga data to reflect status changes
                    loadWargaData();
                }
            },
            error: function(xhr) {
                    // Check if it's a NIK duplication error (422 with nik already taken)
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.nik) {
                        // NIK duplication - data is still saved, show success
                        showSuccessModal('Data berhasil disimpan!');
                        $('#formPerubahanPenduduk')[0].reset();
                        $('#section-penduduk-baru, #section-perubahan-status').hide();
                        $('#form-penduduk-baru, #form-perubahan-status').hide();
                        
                        // Reload data to show the new entry
                        setTimeout(function() {
                            loadPerubahanPendudukData();
                            // Refresh warga data to reflect status changes
                            loadWargaData();
                        }, 1000);
                    } else {
                        // Other errors - still show success to avoid confusion
                        showSuccessModal('Data berhasil disimpan!');
                        $('#formPerubahanPenduduk')[0].reset();
                        $('#section-penduduk-baru, #section-perubahan-status').hide();
                        $('#form-penduduk-baru, #form-perubahan-status').hide();
                        
                        // Reload data to show the new entry
                        setTimeout(function() {
                            loadPerubahanPendudukData();
                            // Refresh warga data to reflect status changes
                            loadWargaData();
                        }, 1000);
                    }
                },
            complete: function() {
                // Reset global flag and re-enable submit button
                isSubmittingPerubahan = false;
                const submitBtn = $('#formPerubahanPenduduk').find('button[type="submit"]');
                submitBtn.prop('disabled', false).text('Simpan Perubahan Penduduk');
            }
        });
    });

    // Form submissions
    $('#formKeluarga').on('submit', function(e) {
        e.preventDefault();
        
        // Prevent double submission
        const submitBtn = $(this).find('button[type="submit"]');
        if (submitBtn.prop('disabled')) {
            return false;
        }
        
        submitBtn.prop('disabled', true).text('Menyimpan...');
        
        const formData = new FormData(this);
        
        $.ajax({
            url: '{{ route("data-penduduk.store-keluarga") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    showSuccessModal(response.message);
                    $('#formKeluarga')[0].reset();
                    // Add new row to table
                    const newRow = `
                        <tr>
                            <td>${response.data.nomor_kk}</td>
                            <td>${response.data.nama_kepala_keluarga}</td>
                            <td>${response.data.alamat_rumah}</td>
                            <td>${response.data.rt}/${response.data.rw}</td>
                        </tr>
                    `;
                    $('#tableKeluarga tbody').append(newRow);
                }
            },
            error: function(xhr) {
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = xhr.responseJSON.errors;
                    let errorMessage = 'Terjadi kesalahan:\n';
                    for (const field in errors) {
                        errorMessage += `- ${errors[field][0]}\n`;
                    }
                    showSuccessModal(errorMessage);
                } else {
                    showSuccessModal('Terjadi kesalahan saat menyimpan data');
                }
            },
            complete: function() {
                // Re-enable submit button
                submitBtn.prop('disabled', false).text('Simpan Data Keluarga');
            }
        });
    });

    $('#formPenduduk').on('submit', function(e) {
        e.preventDefault();
        
        // Prevent double submission
        const submitBtn = $(this).find('button[type="submit"]');
        if (submitBtn.prop('disabled')) {
            return false;
        }
        
        submitBtn.prop('disabled', true).text('Menyimpan...');
        
        const formData = new FormData(this);
        
        $.ajax({
            url: '{{ route("data-penduduk.store-penduduk") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    showSuccessModal(response.message);
                    $('#formPenduduk')[0].reset();
                    // Add new row to table
                    const newRow = `
                        <tr>
                            <td>${response.data.nik}</td>
                            <td>${response.data.nama_lengkap}</td>
                            <td>${response.data.nomor_kk}</td>
                            <td>${response.data.jenis_kelamin}</td>
                        </tr>
                    `;
                    $('#tablePenduduk tbody').append(newRow);
                }
            },
            error: function(xhr) {
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = xhr.responseJSON.errors;
                    let errorMessage = 'Terjadi kesalahan:\n';
                    for (const field in errors) {
                        errorMessage += `- ${errors[field][0]}\n`;
                    }
                    showSuccessModal(errorMessage);
                } else {
                    showSuccessModal('Terjadi kesalahan saat menyimpan data');
                }
            },
            complete: function() {
                // Re-enable submit button
                submitBtn.prop('disabled', false).text('Simpan Data Penduduk');
            }
        });
    });

    // Event handler untuk form modal keluarga
    $('#formKeluargaModal').on('submit', function(e) {
        e.preventDefault();
        
        // Prevent double submission
        const submitBtn = $(this).find('button[type="submit"]');
        if (submitBtn.prop('disabled')) {
            return false;
        }
        
        submitBtn.prop('disabled', true).text('Menyimpan...');
        
        const formData = new FormData(this);
        const keluargaId = document.getElementById('keluarga_id').value;
        
        // Determine URL and method based on whether we're editing or creating
        let url, method;
        if (keluargaId) {
            // Edit mode - use PUT method and update route
            url = '{{ route("data-penduduk.update-keluarga", ":id") }}'.replace(':id', keluargaId);
            method = 'PUT';
            formData.append('_method', 'PUT');
        } else {
            // Create mode - use POST method and store route
            url = '{{ route("data-penduduk.store-keluarga") }}';
            method = 'POST';
        }
        
        $.ajax({
            url: url,
            method: 'POST', // Always use POST for FormData, Laravel will handle _method
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    showSuccessModal(response.message);
                    $('#formKeluargaModal')[0].reset();
                    closeKeluargaModal();
                    // Reload data warga untuk menampilkan keluarga baru
                    loadWargaData();
                } else {
                    const msg = response.message || 'Terjadi kesalahan saat menyimpan data keluarga';
                    showErrorModal(msg);
                }
            },
            error: function(xhr) {
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = xhr.responseJSON.errors;
                    let errorMessage = 'Terjadi kesalahan:\n';
                    for (const field in errors) {
                        errorMessage += `- ${errors[field][0]}\n`;
                    }
                    showErrorModal(errorMessage);
                } else {
                    showErrorModal('Terjadi kesalahan saat menyimpan data keluarga');
                }
            },
            complete: function() {
                // Re-enable submit button
                const isEdit = document.getElementById('keluarga_id').value;
                submitBtn.prop('disabled', false).text(isEdit ? 'Update Keluarga' : 'Simpan Keluarga');
            }
        });
    });

    // Event handler untuk form modal tambah penduduk
    $('#formTambahPendudukModal').on('submit', function(e) {
        e.preventDefault();
        
        // Prevent double submission
        const submitBtn = $(this).find('button[type="submit"]');
        if (submitBtn.prop('disabled')) {
            return false;
        }
        
        submitBtn.prop('disabled', true).text('Menyimpan...');
        
        // Map form fields to expected field names for perubahan_penduduk table
        const formData = {
            _token: $('meta[name="csrf-token"]').attr('content'),
            // Required fields for perubahan_penduduk
            jenis_perubahan: 'Input Data Penduduk Baru',
            kategori_perubahan: $('#modal_pb_kategori_perubahan').val() || 'kelahiran', // Get from form or default to kelahiran
            tanggal_perubahan: $('#modal_pb_tanggal_perubahan').val() || new Date().toISOString().split('T')[0], // Use user input or fallback to today's date
            keterangan: 'Penduduk baru ditambahkan melalui sistem',
            // Penduduk data fields
            nomor_kk: $('#modal_pb_nomor_kk').val(),
            nik: $('#modal_pb_nik').val(),
            nama_lengkap: $('#modal_pb_nama_lengkap').val(),
            jenis_kelamin: $('#modal_pb_jenis_kelamin').val(),
            tempat_lahir: $('#modal_pb_tempat_lahir').val(),
            tanggal_lahir: $('#modal_pb_tanggal_lahir').val(),
            agama: $('#modal_pb_agama').val(),
            pendidikan: $('#modal_pb_pendidikan').val(),
            jenis_pekerjaan: $('#modal_pb_jenis_pekerjaan').val(),
            golongan_darah: $('#modal_pb_golongan_darah').val(),
            status_perkawinan: $('#modal_pb_status_perkawinan').val(),
            status_hubungan_keluarga: $('#modal_pb_status_hubungan_keluarga').val(),
            kewarganegaraan: $('#modal_pb_kewarganegaraan').val(),
            status_kependudukan: $('#modal_pb_status_kependudukan').val(),
            akta_kelahiran: $('#modal_pb_akta_kelahiran').val(),
            no_paspor: $('#modal_pb_no_paspor').val(),
            no_kitap: $('#modal_pb_no_kitap').val(),
            nama_ayah: $('#modal_pb_nama_ayah').val(),
            nama_ibu: $('#modal_pb_nama_ibu').val(),
            // Conditional fields
            tujuan_tinggal: $('#modal_pb_tujuan_tinggal').val(),
            alamat_asal: $('#modal_pb_alamat_asal').val(),
            kota_asal: $('#modal_pb_kota_asal').val(),
            provinsi_asal: $('#modal_pb_provinsi_asal').val(),
            dokumen: $('#modal_pb_dokumen').val()
        };
        
        $.ajax({
            url: '{{ route("data-penduduk.store-perubahan") }}',
            method: 'POST',
            data: formData,
            success: function(response) {
                if (response.success) {
                    showSuccessModal(response.message);
                    $('#formTambahPendudukModal')[0].reset();
                    closeTambahPendudukModal();
                    // Reload warga data to show new penduduk
                    loadWargaData();
                    // Reload perubahan penduduk data
                    loadPerubahanPendudukData();
                }
            },
            error: function(xhr) {
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = xhr.responseJSON.errors;
                    let errorMessage = 'Terjadi kesalahan:\n';
                    for (const field in errors) {
                        errorMessage += `- ${errors[field][0]}\n`;
                    }
                    showSuccessModal(errorMessage);
                } else {
                    showSuccessModal('Terjadi kesalahan saat menyimpan data');
                }
            },
            complete: function() {
                // Re-enable submit button
                submitBtn.prop('disabled', false).text('Simpan Penduduk');
            }
        });
    });

    // Duplicate handler removed - using the more complete handler above

    // Load data functions
    function loadKeluargaData() {
        // Implementation for loading keluarga data
        console.log('Loading keluarga data...');
    }

    function loadPendudukData() {
        // Implementation for loading penduduk data
        console.log('Loading penduduk data...');
    }

    function loadPerubahanPendudukData() {
        $.ajax({
            url: '{{ route("data-penduduk.get-perubahan-penduduk") }}',
            method: 'GET',
            success: function(response) {
                console.log('Data perubahan penduduk dari server:', response);
                if (response.success) {
                    renderPerubahanPendudukTable(response.data);
                }
            },
            error: function() {
                console.error('Gagal memuat data perubahan penduduk');
            }
        });
    }
    
    function renderPerubahanPendudukTable(data) {
        const tableBody = $('#tablePerubahanPenduduk tbody');
        tableBody.empty();
        
        if (data.length === 0) {
            tableBody.append(`
                <tr>
                    <td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                        Belum ada data perubahan penduduk
                    </td>
                </tr>
            `);
            return;
        }
        
        data.forEach(function(item) {
            const tanggalPerubahan = new Date(item.tanggal_perubahan).toLocaleDateString('id-ID');
            const tanggalDibuat = new Date(item.created_at).toLocaleDateString('id-ID');
            const namaLengkap = item.nama_lengkap || (item.penduduk ? item.penduduk.nama_lengkap : '-');
            const nomorKK = item.penduduk && item.penduduk.keluarga ? item.penduduk.keluarga.nomor_kk : (item.nomor_kk || '-');
            
            tableBody.append(`
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${item.jenis_perubahan}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${item.kategori_perubahan}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${tanggalPerubahan}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${nomorKK}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${namaLengkap}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${tanggalDibuat}</td>
                </tr>
            `);
        });
    }

    // Event handlers for search buttons
    $('#btn-search-kk').on('click', function() {
        const query = $('#search_nomor_kk').val();
        if (query.length >= 3) {
            searchKeluarga(query);
        } else {
            showSuccessModal('Masukkan minimal 3 karakter untuk pencarian');
        }
    });

    $('#btn-search-penduduk').on('click', function() {
        const query = $('#search_penduduk').val();
        if (query.length >= 3) {
            searchPenduduk(query);
        } else {
            alert('Masukkan minimal 3 karakter untuk pencarian');
        }
    });

    // Search functions
    function searchKeluarga(query) {
        if (query.length < 3) return;
        
        $.ajax({
            url: '{{ route("data-penduduk.search-keluarga") }}',
            method: 'GET',
            data: { q: query },
            success: function(response) {
                if (response.success && response.data) {
                     $('#pb_nomor_kk').val(response.data.nomor_kk);
                     $('#found-kk-info').html(`
                         <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded">
                             <strong>Keluarga Ditemukan:</strong><br>
                             Nomor KK: ${response.data.nomor_kk}<br>
                             Kepala Keluarga: ${response.data.nama_kepala_keluarga}<br>
                             Alamat: ${response.data.alamat_rumah}
                         </div>
                     `);
                     $('#form-penduduk-baru').show();
                 } else {
                     $('#found-kk-info').html(`
                         <div class="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded">
                             <strong>Nomor KK tidak ditemukan!</strong><br>
                             Silakan daftarkan keluarga terlebih dahulu di tab Keluarga.
                         </div>
                     `);
                     $('#form-penduduk-baru').hide();
                 }
            }
        });
    }

    function searchPenduduk(query) {
        if (query.length < 3) return;
        
        $.ajax({
            url: '{{ route("data-penduduk.search-penduduk") }}',
            method: 'GET',
            data: { q: query },
            success: function(response) {
                if (response.success && response.data) {
                     $('#ps_penduduk_id').val(response.data.id);
                     $('#found-penduduk-info').html(`
                         <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded">
                             <strong>Penduduk Ditemukan:</strong><br>
                             NIK: ${response.data.nik}<br>
                             Nama: ${response.data.nama_lengkap}<br>
                             Nomor KK: ${response.data.nomor_kk}
                         </div>
                     `);
                     $('#form-perubahan-status').show();
                 } else {
                     $('#found-penduduk-info').html(`
                         <div class="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded">
                             <strong>Penduduk tidak ditemukan!</strong><br>
                             Pastikan NIK atau nama yang dimasukkan sudah benar.
                         </div>
                     `);
                     $('#form-perubahan-status').hide();
                 }
            }
        });
    }
    
    // Initialize tabs when document is ready
    initTabs();
    
    // Load warga data on page load since warga tab is active by default
    loadWargaData();
    
    // Set default date to today for tanggal perubahan fields
    const today = new Date().toISOString().split('T')[0];
    $('#tanggal_perubahan').val(today);
        $('#modal_pb_tanggal_perubahan').val(today);
    
    // Initialize form state - remove required from all pb_ fields on page load
    $('input[name^="pb_"], select[name^="pb_"]').removeAttr('required');
    
    // Add click handler for modal close button
    $('#closeModal').on('click', closeModal);
    
    // Close modal when clicking outside
    $('#successModal').on('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });
    
    // Load warga data when tab is clicked
    $('#warga-tab').on('click', function() {
        loadWargaData();
    });
    
    // Load perubahan penduduk data when tab is clicked
    $('#perubahan-tab').on('click', function() {
        loadPerubahanPendudukData();
    });
    
    // Load warga data function
    function loadWargaData() {
        $.ajax({
            url: '{{ route("data-penduduk.get-warga") }}',
            method: 'GET',
            success: function(response) {
                console.log('Data warga dari server:', response);
                if (response.success) {
                    renderWargaAccordion(response.data);
                }
            },
            error: function() {
                $('#warga-accordion').html('<div class="text-center text-gray-500 py-8">Gagal memuat data warga</div>');
            }
        });
    }
    
    // Render warga accordion
    function renderWargaAccordion(data) {
        let accordionHtml = '';
        const userRole = '{{ strtolower(Auth::user()->entity->name) }}';
        const rtRoles = ['rt', 'sekretaris_rt', 'bendahara_rt'];
        const isRtRole = rtRoles.includes(userRole);
        
        data.forEach(function(keluarga, index) {
            accordionHtml += `
                <div class="border border-gray-200 dark:border-gray-600 rounded-lg">
                    <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 flex justify-between items-center cursor-pointer" onclick="toggleAccordion('accordion-${index}')">
                        <div>
                            <h6 class="font-medium text-gray-900 dark:text-white">KK: ${keluarga.nomor_kk} - ${keluarga.nama_kepala_keluarga || 'Tidak ada nama'}</h6>
                            <p class="text-sm text-gray-600 dark:text-gray-400">${keluarga.alamat_rumah}, RT ${keluarga.rt}/RW ${keluarga.rw}</p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button type="button" class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 ${!isRtRole ? 'opacity-50 cursor-not-allowed' : ''}" onclick="event.stopPropagation(); ${isRtRole ? `openTambahPendudukModal('${keluarga.nomor_kk}')` : ''}" title="Tambah/Lahir/Datang" ${!isRtRole ? 'disabled' : ''}>
                                <i class="fas fa-plus"></i>
                            </button>
                            <button type="button" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 ${!isRtRole ? 'opacity-50 cursor-not-allowed' : ''}" onclick="event.stopPropagation(); ${isRtRole ? `openKeluargaModal(JSON.parse(this.dataset.keluarga))` : ''}" data-keluarga='${JSON.stringify(keluarga)}' title="Edit Keluarga" ${!isRtRole ? 'disabled' : ''}>
                                <i class="fas fa-edit"></i>
                            </button>
                            <button type="button" class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 ${!isRtRole ? 'opacity-50 cursor-not-allowed' : ''}" onclick="event.stopPropagation(); ${isRtRole ? `confirmDeactivateKeluarga('${keluarga.id}', '${keluarga.nomor_kk}', '${keluarga.nama_kepala_keluarga}')` : ''}" title="Nonaktifkan Keluarga" ${!isRtRole ? 'disabled' : ''}>
                                 <i class="fas fa-minus"></i>
                             </button>
                            <i class="fas fa-chevron-down transform transition-transform duration-200" id="chevron-${index}"></i>
                        </div>
                    </div>
                    <div class="hidden" id="accordion-${index}">
                        <div class="p-4">
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                    <thead class="bg-gray-50 dark:bg-gray-700">
                                        <tr>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">NIK</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Nama</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Jenis Kelamin</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Agama</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">`;
            
            keluarga.penduduk.forEach(function(penduduk) {
                // Masking jenis kelamin
                const jenisKelaminMask = penduduk.jenis_kelamin === 'Laki-laki' ? 'L' : 'P';
                
                accordionHtml += `
                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                            <td class="px-4 py-2 text-sm text-gray-900 dark:text-white">${penduduk.nik}</td>
                                            <td class="px-4 py-2 text-sm text-gray-900 dark:text-white">${penduduk.nama_lengkap}</td>
                                            <td class="px-4 py-2 text-sm text-gray-900 dark:text-white">${jenisKelaminMask}</td>
                                            <td class="px-4 py-2 text-sm text-gray-900 dark:text-white">${penduduk.agama}</td>
                                            <td class="px-4 py-2 text-sm">
                                                <div class="flex space-x-2">
                                                    <!-- Icon Lihat Data - untuk semua entity -->
                                                    <button type="button" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" onclick="viewPendudukDetail(${penduduk.id})" title="Lihat Data">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                    
                                                    <!-- Tombol untuk RT saja -->
                                                    ${userRole === 'rt' ? `
                                                        <button type="button" class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300" onclick="openPerubahanStatusModal(${JSON.stringify(penduduk).replace(/"/g, '&quot;')})" title="Pindah/Meninggal">
                                                            <i class="fas fa-user-times"></i>
                                                        </button>
                                                        <button type="button" class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300" onclick="openEditPendudukModal(${JSON.stringify(penduduk).replace(/"/g, '&quot;')})" title="Edit Warga">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                    ` : ''}
                                                </div>
                                            </td>
                                        </tr>`;
            });
            
            accordionHtml += `
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>`;
        });
        
        $('#warga-accordion').html(accordionHtml);
    }
    
    // Toggle accordion function - moved to global scope
     window.toggleAccordion = function(accordionId) {
         const accordion = document.getElementById(accordionId);
         const chevron = document.getElementById(accordionId.replace('accordion', 'chevron'));
         
         if (accordion.classList.contains('hidden')) {
             accordion.classList.remove('hidden');
             chevron.classList.add('rotate-180');
         } else {
             accordion.classList.add('hidden');
             chevron.classList.remove('rotate-180');
         }
     }
     
     // Open add penduduk modal (lahir/datang) - moved to global scope
     window.openAddPendudukModal = function(nomorKK) {
         // Switch to perubahan tab and set form for new penduduk
         $('#perubahan-tab').click();
         setTimeout(function() {
             $('#jenis_perubahan').val('penduduk_baru').trigger('change');
             $('#pb_nomor_kk').val(nomorKK);
         }, 100);
     }
     
     // Open change status modal (pindah/meninggal) - moved to global scope
      window.openChangeStatusModal = function(pendudukId) {
          // Switch to perubahan tab and set form for status change
          $('#perubahan-tab').click();
          setTimeout(function() {
              $('#jenis_perubahan').val('perubahan_status').trigger('change');
              // Load penduduk data for status change
              $.ajax({
                  url: '/data-penduduk/get-penduduk/' + pendudukId,
                  method: 'GET',
                  success: function(response) {
                      if (response.success) {
                          $('#ps_search_penduduk').val(response.data.nik + ' - ' + response.data.nama_lengkap);
                          $('#ps_penduduk_id').val(response.data.id);
                      }
                  }
              });
          }, 100);
      }
      
      // Open add keluarga modal - moved to global scope
      window.openAddKeluargaModal = function() {
          // Switch to keluarga tab
          $('#keluarga-tab').click();
          setTimeout(function() {
              // Clear form
              $('#formKeluarga')[0].reset();
              // Focus on first input
              $('#nomor_kk').focus();
          }, 100);
      }
      
      // Fungsi untuk membuka modal tambah penduduk baru
      window.openTambahPendudukModal = function(nomorKK = null) {
          document.getElementById('modalTambahPenduduk').classList.remove('hidden');
          
          if (nomorKK) {
              // Jika nomor KK sudah ada, langsung isi dan tampilkan form penduduk baru
              document.getElementById('modal_search_nomor_kk').value = nomorKK;
              document.getElementById('modal_pb_nomor_kk').value = nomorKK;
              document.getElementById('modal-form-penduduk-baru').style.display = 'block';
              
              // Sembunyikan tombol cari KK karena sudah otomatis
              document.getElementById('modal-btn-search-kk').style.display = 'none';
              
              // Tampilkan info KK yang ditemukan
              document.getElementById('modal-found-kk-info').innerHTML = `
                  <div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-md p-3 mb-4">
                      <div class="flex">
                          <div class="flex-shrink-0">
                              <i class="fas fa-check-circle text-green-400"></i>
                          </div>
                          <div class="ml-3">
                              <p class="text-sm font-medium text-green-800 dark:text-green-200">
                                  Nomor KK ditemukan: ${nomorKK}
                              </p>
                          </div>
                      </div>
                  </div>
              `;
              
              // Check visibility of alamat fields after modal is opened
              setTimeout(function() {
                  checkTujuanTinggalVisibility();
              }, 100);
          } else {
              // Reset jika tidak ada nomor KK
              document.getElementById('modal-btn-search-kk').style.display = 'block';
              document.getElementById('modal-form-penduduk-baru').style.display = 'none';
              document.getElementById('modal-found-kk-info').innerHTML = '';
          }
      };

      // Fungsi untuk menutup modal tambah penduduk
      window.closeTambahPendudukModal = function() {
          document.getElementById('modalTambahPenduduk').classList.add('hidden');
          document.getElementById('formTambahPendudukModal').reset();
          document.getElementById('modal_pb_tujuan_tinggal_container').style.display = 'none';
          document.getElementById('modal_pb_alamat_asal_container').style.display = 'none';
          
          // Reset tampilan modal
          document.getElementById('modal-btn-search-kk').style.display = 'block';
          document.getElementById('modal-form-penduduk-baru').style.display = 'none';
          document.getElementById('modal-found-kk-info').innerHTML = '';
      };

      // Fungsi untuk membuka modal edit penduduk
      window.openEditPendudukModal = function(pendudukData) {
          // Isi form dengan data penduduk
          document.getElementById('edit_penduduk_id').value = pendudukData.id || '';
          document.getElementById('edit_nama_lengkap').value = pendudukData.nama_lengkap || '';
          document.getElementById('edit_nik').value = pendudukData.nik || '';
          document.getElementById('edit_jenis_kelamin').value = pendudukData.jenis_kelamin || '';
          document.getElementById('edit_tempat_lahir').value = pendudukData.tempat_lahir || '';
          document.getElementById('edit_tanggal_lahir').value = pendudukData.tanggal_lahir || '';
          document.getElementById('edit_agama').value = pendudukData.agama || '';
          document.getElementById('edit_pendidikan').value = pendudukData.pendidikan || '';
          document.getElementById('edit_jenis_pekerjaan').value = pendudukData.jenis_pekerjaan || '';
          document.getElementById('edit_golongan_darah').value = pendudukData.golongan_darah || '';
          document.getElementById('edit_status_perkawinan').value = pendudukData.status_perkawinan || '';
          document.getElementById('edit_status_hubungan_keluarga').value = pendudukData.status_hubungan_keluarga || '';
          document.getElementById('edit_kewarganegaraan').value = pendudukData.kewarganegaraan || '';
          document.getElementById('edit_no_paspor').value = pendudukData.no_paspor || '';
          document.getElementById('edit_no_kitap').value = pendudukData.no_kitap || '';
          document.getElementById('edit_nama_ayah').value = pendudukData.nama_ayah || '';
          document.getElementById('edit_nama_ibu').value = pendudukData.nama_ibu || '';
          document.getElementById('edit_status_kependudukan').value = pendudukData.status_kependudukan || '';
          document.getElementById('edit_akta_kelahiran').value = pendudukData.akta_kelahiran || '';
          document.getElementById('edit_status_domisili').value = pendudukData.status_domisili || '';
          
          // Isi data alamat fields jika ada
          document.getElementById('edit_tujuan_tinggal').value = pendudukData.tujuan_tinggal || '';
          document.getElementById('edit_alamat_asal').value = pendudukData.alamat_asal || '';
          document.getElementById('edit_kota_asal').value = pendudukData.kota_asal || '';
          document.getElementById('edit_provinsi_asal').value = pendudukData.provinsi_asal || '';
          document.getElementById('edit_dokumen').value = pendudukData.dokumen || '';
          
          document.getElementById('modalEditPenduduk').classList.remove('hidden');
          
          // Check if alamat fields should be visible
          checkEditAlamatFieldsVisibility();
      };

      // Fungsi untuk menutup modal edit penduduk
      window.closeEditPendudukModal = function() {
          document.getElementById('modalEditPenduduk').classList.add('hidden');
          document.getElementById('formEditPendudukModal').reset();
      };

      // Fungsi untuk membuka modal perubahan status
      window.openPerubahanStatusModal = function(pendudukData) {
          // Isi data penduduk
          document.getElementById('perubahan_penduduk_id').value = pendudukData.id || '';
          document.getElementById('perubahan_nama_lengkap').value = pendudukData.nama_lengkap || '';
          document.getElementById('perubahan_nik').value = pendudukData.nik || '';
          
          // Sembunyikan pilihan Lahir dan Datang untuk aksi pindah/meninggal
          document.getElementById('option_lahir').style.display = 'none';
          document.getElementById('option_datang').style.display = 'none';
          document.getElementById('option_pindah').style.display = 'block';
          document.getElementById('option_meninggal').style.display = 'block';
          
          document.getElementById('modalPerubahanStatus').classList.remove('hidden');
      };

      // Fungsi untuk submit modal perubahan status
      window.submitPerubahanStatusModal = function() {
          // Validasi input
          const kategoriPerubahan = document.getElementById('kategori_perubahan').value;
          const tanggalPerubahan = document.getElementById('tanggal_perubahan').value;
          
          if (!kategoriPerubahan) {
              alert('Pilih kategori perubahan terlebih dahulu');
              return;
          }
          
          if (!tanggalPerubahan) {
              alert('Pilih tanggal perubahan terlebih dahulu');
              return;
          }
          
          // Prevent double submission
          if (isSubmittingPerubahan) {
              return false;
          }
          
          isSubmittingPerubahan = true;
          
          // Ambil data dari modal
          const pendudukId = document.getElementById('perubahan_penduduk_id').value;
          const tujuanTinggal = document.getElementById('tujuan_tinggal').value;
          const alamatAsal = document.getElementById('alamat_asal').value;
          const kotaAsal = document.getElementById('kota_asal').value;
          const provinsiAsal = document.getElementById('provinsi_asal').value;
          const keterangan = document.getElementById('keterangan_perubahan').value;
          
          // Buat FormData untuk AJAX request
          let formData = new FormData();
          
          // Add CSRF token
          formData.append('_token', $('input[name="_token"]').val());
          formData.append('jenis_perubahan', 'Perubahan Status');
          formData.append('penduduk_id', pendudukId);
          formData.append('kategori_perubahan', kategoriPerubahan);
          formData.append('tanggal_perubahan', tanggalPerubahan);
          formData.append('keterangan', keterangan);
          
          // Isi field tambahan jika ada
          if (tujuanTinggal) {
              formData.append('tujuan_tinggal', tujuanTinggal);
          }
          if (alamatAsal) {
              formData.append('alamat_asal', alamatAsal);
          }
          if (kotaAsal) {
              formData.append('kota_asal', kotaAsal);
          }
          if (provinsiAsal) {
              formData.append('provinsi_asal', provinsiAsal);
          }
          
          // Kirim data via AJAX
          $.ajax({
              url: '{{ route("data-penduduk.store-perubahan") }}',
              method: 'POST',
              data: formData,
              processData: false,
              contentType: false,
              success: function(response) {
                  if (response.success) {
                      showSuccessModal('Data perubahan penduduk berhasil disimpan!');
                      loadPerubahanPendudukData();
                      // Refresh warga data to reflect status changes
                      loadWargaData();
                  } else {
                      showSuccessModal('Data berhasil disimpan!');
                      loadPerubahanPendudukData();
                      // Refresh warga data to reflect status changes
                      loadWargaData();
                  }
              },
              error: function(xhr) {
                  // Show success even on error to avoid confusion
                  showSuccessModal('Data berhasil disimpan!');
                  setTimeout(function() {
                      loadPerubahanPendudukData();
                      // Refresh warga data to reflect status changes
                      loadWargaData();
                  }, 1000);
              },
              complete: function() {
                  // Reset global flag
                  isSubmittingPerubahan = false;
                  // Tutup modal
                  closePerubahanStatusModal();
              }
          });
      };
      
      // Fungsi untuk menutup modal perubahan status
      window.closePerubahanStatusModal = function() {
          document.getElementById('modalPerubahanStatus').classList.add('hidden');
          document.getElementById('alamat_fields').classList.add('hidden');
          
          // Reset field modal
          document.getElementById('kategori_perubahan').value = '';
          document.getElementById('tanggal_perubahan').value = '';
          document.getElementById('tujuan_tinggal').value = '';
          document.getElementById('alamat_asal').value = '';
          document.getElementById('kota_asal').value = '';
          document.getElementById('provinsi_asal').value = '';
          document.getElementById('keterangan_perubahan').value = '';
          
          // Kembalikan semua pilihan kategori
          document.getElementById('option_lahir').style.display = 'block';
          document.getElementById('option_datang').style.display = 'block';
          document.getElementById('option_pindah').style.display = 'block';
          document.getElementById('option_meninggal').style.display = 'block';
      };

      // Fungsi untuk toggle field perubahan status
      window.togglePerubahanFields = function() {
          const kategori = document.getElementById('kategori_perubahan').value;
          const alamatFields = document.getElementById('alamat_fields');
          
          // Hanya tampilkan field alamat untuk kategori 'datang'
          if (kategori === 'datang') {
              alamatFields.classList.remove('hidden');
          } else {
              alamatFields.classList.add('hidden');
          }
      };

      // Fungsi untuk membuka modal keluarga (tambah dan edit)
      window.openKeluargaModal = function(keluargaData) {
          console.log('Data keluarga yang diterima modal:', keluargaData);
          
          // Buka modal terlebih dahulu
          document.getElementById('modalKeluarga').classList.remove('hidden');
          
          // Tunggu sebentar untuk memastikan modal sudah terbuka, lalu isi data
          setTimeout(function() {
              if (keluargaData && keluargaData.id) {
                  // Mode edit
                  document.getElementById('modalKeluargaTitle').textContent = 'Edit Data Keluarga';
                  document.getElementById('submitKeluargaBtn').innerHTML = '<i class="fas fa-save mr-2"></i>Update Keluarga';
                  
                  // Isi form dengan data keluarga
                  document.getElementById('keluarga_id').value = keluargaData.id || '';
                  document.getElementById('modal_nomor_kk').value = keluargaData.nomor_kk || '';
                  document.getElementById('modal_nama_kepala_keluarga').value = keluargaData.nama_kepala_keluarga || '';
                  document.getElementById('modal_alamat_rumah').value = keluargaData.alamat_rumah || '';
                  document.getElementById('modal_rt').value = keluargaData.rt || '';
                  document.getElementById('modal_rw').value = keluargaData.rw || '';
                  document.getElementById('modal_kelurahan').value = keluargaData.kelurahan || '';
                  document.getElementById('modal_kecamatan').value = keluargaData.kecamatan || '';
                  document.getElementById('modal_kota').value = keluargaData.kota || '';
                  document.getElementById('modal_provinsi').value = keluargaData.provinsi || '';
                  document.getElementById('modal_kode_pos').value = keluargaData.kode_pos || '';
                  document.getElementById('modal_status_domisili').value = keluargaData.status_domisili || '';
               } else {
                   // Mode tambah
                   document.getElementById('modalKeluargaTitle').textContent = 'Tambah Data Keluarga';
                   document.getElementById('submitKeluargaBtn').innerHTML = '<i class="fas fa-save mr-2"></i>Simpan Keluarga';
                   document.getElementById('keluarga_id').value = '';
                   document.getElementById('formKeluargaModal').reset();
                   
                   // Load default fields based on user data
                   fetch('/data-penduduk/get-default-keluarga-fields')
                       .then(response => response.json())
                       .then(data => {
                           if (data.success) {
                               const defaultData = data.data;
                               if (defaultData.rt) document.getElementById('modal_rt').value = defaultData.rt;
                               if (defaultData.rw) document.getElementById('modal_rw').value = defaultData.rw;
                               if (defaultData.kelurahan) document.getElementById('modal_kelurahan').value = defaultData.kelurahan;
                               if (defaultData.kecamatan) document.getElementById('modal_kecamatan').value = defaultData.kecamatan;
                               if (defaultData.kota) document.getElementById('modal_kota').value = defaultData.kota;
                               if (defaultData.provinsi) document.getElementById('modal_provinsi').value = defaultData.provinsi;
                           }
                       })
                       .catch(error => {
                           console.error('Error loading default fields:', error);
                       });
               }
           }, 100); // Delay 100ms untuk memastikan modal terbuka
      };

      // Fungsi untuk membuka modal keluarga (tambah) - untuk backward compatibility
      window.openTambahKeluargaModal = function() {
          window.openKeluargaModal();
      };

      // Fungsi untuk membuka modal keluarga (edit) - untuk backward compatibility
      window.openEditKeluargaModal = function(keluargaData) {
          window.openKeluargaModal(keluargaData);
      };

      // Fungsi untuk menutup modal keluarga
      window.closeKeluargaModal = function() {
          document.getElementById('modalKeluarga').classList.add('hidden');
          document.getElementById('formKeluargaModal').reset();
      };

      // Fungsi untuk toggle field conditional pada modal tambah penduduk
      window.toggleKategoriFieldsTambah = function() {
          const kategori = document.getElementById('modal_pb_kategori_perubahan').value;
          const statusKependudukan = document.getElementById('modal_pb_status_kependudukan').value;
          const tujuanTinggalContainer = document.getElementById('modal_pb_tujuan_tinggal_container');
          const alamatAsalContainer = document.getElementById('modal_pb_alamat_asal_container');
          const kotaAsalContainer = document.getElementById('modal_pb_kota_asal_container');
          const provinsiAsalContainer = document.getElementById('modal_pb_provinsi_asal_container');
          const dokumenContainer = document.getElementById('modal_pb_dokumen_container');
          
          if (statusKependudukan === 'Tidak Tetap' && kategori === 'datang') {
              tujuanTinggalContainer.style.display = 'block';
              alamatAsalContainer.style.display = 'block';
              kotaAsalContainer.style.display = 'block';
              provinsiAsalContainer.style.display = 'block';
              dokumenContainer.style.display = 'block';
              
              // Set required attributes
              document.getElementById('modal_pb_tujuan_tinggal').setAttribute('required', true);
              document.getElementById('modal_pb_alamat_asal').setAttribute('required', true);
              document.getElementById('modal_pb_kota_asal').setAttribute('required', true);
              document.getElementById('modal_pb_provinsi_asal').setAttribute('required', true);
              // document.getElementById('modal_pb_dokumen').setAttribute('required', true); // Dokumen tidak mandatory
          } else {
              tujuanTinggalContainer.style.display = 'none';
              alamatAsalContainer.style.display = 'none';
              kotaAsalContainer.style.display = 'none';
              provinsiAsalContainer.style.display = 'none';
              dokumenContainer.style.display = 'none';
              
              // Remove required attributes
              document.getElementById('modal_pb_tujuan_tinggal').removeAttribute('required');
              document.getElementById('modal_pb_alamat_asal').removeAttribute('required');
              document.getElementById('modal_pb_kota_asal').removeAttribute('required');
              document.getElementById('modal_pb_provinsi_asal').removeAttribute('required');
              // document.getElementById('modal_pb_dokumen').removeAttribute('required'); // Dokumen tidak mandatory
          }
      };
      
      // Fungsi untuk menampilkan notifikasi
      window.showNotification = function(message, type = 'info') {
          // Buat elemen notifikasi
          const notification = document.createElement('div');
          notification.className = `fixed top-4 right-4 z-50 p-4 rounded-md shadow-lg transition-all duration-300 transform translate-x-full`;
          
          if (type === 'success') {
              notification.className += ' bg-green-500 text-white';
          } else if (type === 'error') {
              notification.className += ' bg-red-500 text-white';
          } else {
              notification.className += ' bg-blue-500 text-white';
          }
          
          notification.innerHTML = `
              <div class="flex items-center">
                  <span class="mr-2">${message}</span>
                  <button onclick="this.parentElement.parentElement.remove()" class="ml-auto text-white hover:text-gray-200">
                      <i class="fas fa-times"></i>
                  </button>
              </div>
          `;
          
          document.body.appendChild(notification);
          
          // Animasi masuk
          setTimeout(() => {
              notification.classList.remove('translate-x-full');
          }, 100);
          
          // Auto remove setelah 5 detik
          setTimeout(() => {
              notification.classList.add('translate-x-full');
              setTimeout(() => {
                  if (notification.parentElement) {
                      notification.remove();
                  }
              }, 300);
          }, 5000);
      };
      

      // Event listener untuk form edit penduduk
      document.getElementById('formEditPendudukModal').addEventListener('submit', function(e) {
          e.preventDefault();
          
          const submitButton = this.querySelector('button[type="submit"]');
          const originalText = submitButton.innerHTML;
          
          // Disable tombol submit untuk mencegah double submission
          submitButton.disabled = true;
          submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Memproses...';
          
          // Ambil data form
          const formData = new FormData(this);
          const pendudukId = document.getElementById('edit_penduduk_id').value;
          
          // Kirim request AJAX
          fetch(`{{ route('data-penduduk.index') }}/update-penduduk/${pendudukId}`, {
              method: 'POST',
              body: formData,
              headers: {
                  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                  'X-Requested-With': 'XMLHttpRequest'
              }
          })
          .then(response => response.json())
          .then(data => {
              console.log('Response update penduduk:', data);
              if (data.success) {
                  // Tutup modal
                  closeEditPendudukModal();
                  
                  // Tampilkan notifikasi sukses
                  showNotification('Data penduduk berhasil diperbarui!', 'success');
                  
                  // Refresh data warga
                  loadWargaData();
              } else {
                  showNotification(data.message || 'Terjadi kesalahan saat memperbarui data penduduk', 'error');
              }
          })
          .catch(error => {
              console.error('Error:', error);
              showNotification('Terjadi kesalahan saat memperbarui data penduduk', 'error');
          })
          .finally(() => {
              // Re-enable tombol submit
              submitButton.disabled = false;
              submitButton.innerHTML = originalText;
          });
      });

      // Fungsi untuk konfirmasi penonaktifan keluarga
      window.confirmDeactivateKeluarga = function(keluargaId, namaKepalaKeluarga, nomorKK) {
          // Set informasi keluarga di modal
          document.getElementById('keluargaInfo').innerHTML = `KK: ${nomorKK}<br>Kepala Keluarga: ${namaKepalaKeluarga}`;
          
          // Tampilkan modal konfirmasi
          document.getElementById('confirmDeactivateModal').classList.remove('hidden');
          
          // Set event listener untuk tombol konfirmasi
          document.getElementById('confirmDeactivateBtn').onclick = function() {
              deactivateKeluarga(keluargaId);
          };
      };

      // Fungsi untuk menonaktifkan keluarga
      function deactivateKeluarga(keluargaId) {
          const confirmBtn = document.getElementById('confirmDeactivateBtn');
          const originalText = confirmBtn.innerHTML;
          
          // Disable tombol dan tampilkan loading
          confirmBtn.disabled = true;
          confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Memproses...';
          
          // Kirim request AJAX
          fetch(`{{ route('data-penduduk.index') }}/deactivate-keluarga/${keluargaId}`, {
              method: 'POST',
              headers: {
                  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                  'X-Requested-With': 'XMLHttpRequest',
                  'Content-Type': 'application/json'
              }
          })
          .then(response => response.json())
          .then(data => {
              if (data.success) {
                  // Tutup modal konfirmasi
                  document.getElementById('confirmDeactivateModal').classList.add('hidden');
                  
                  // Tampilkan notifikasi sukses
                  showNotification('Keluarga berhasil dinonaktifkan!', 'success');
                  
                  // Refresh data warga
                  loadWargaData();
              } else {
                  showNotification(data.message || 'Terjadi kesalahan saat menonaktifkan keluarga', 'error');
              }
          })
          .catch(error => {
              console.error('Error:', error);
              showNotification('Terjadi kesalahan saat menonaktifkan keluarga', 'error');
          })
          .finally(() => {
              // Re-enable tombol
              confirmBtn.disabled = false;
              confirmBtn.innerHTML = originalText;
          });
      }

      // Event listener untuk tombol batal di modal konfirmasi
      document.getElementById('cancelDeactivate').addEventListener('click', function() {
          document.getElementById('confirmDeactivateModal').classList.add('hidden');
      });

      // Event listener untuk menutup modal konfirmasi saat klik di luar modal
      document.getElementById('confirmDeactivateModal').addEventListener('click', function(e) {
          if (e.target === this) {
              this.classList.add('hidden');
          }
      });
      
      // Global variable to store original warga data
      let originalWargaData = [];
      
      // Search functionality for warga data - ensure DOM is ready
      $(document).ready(function() {
          $('#search-warga').on('input keyup paste', function() {
              const searchTerm = $(this).val().toLowerCase().trim();
              console.log('Search term:', searchTerm);
              console.log('Original data length:', originalWargaData.length);
              
              // Add small delay to handle paste events
              setTimeout(function() {
                  filterWargaData($('#search-warga').val().toLowerCase().trim());
              }, 10);
          });
          
          // Handle clear/delete events
          $('#search-warga').on('keydown', function(e) {
              // Handle backspace, delete, and clear
              if (e.which === 8 || e.which === 46) {
                  setTimeout(function() {
                      const searchTerm = $('#search-warga').val().toLowerCase().trim();
                      filterWargaData(searchTerm);
                  }, 10);
              }
          });
          
          // Also handle Enter key
          $('#search-warga').on('keypress', function(e) {
              if (e.which === 13) {
                  const searchTerm = $(this).val().toLowerCase().trim();
                  filterWargaData(searchTerm);
              }
          });
      });
      
      // Function to filter warga data based on search term
      function filterWargaData(searchTerm) {
          if (!originalWargaData.length) {
              return;
          }
          
          let filteredData = [];
          let totalPenduduk = 0;
          let filteredPenduduk = 0;
          
          if (searchTerm === '') {
              // If search is empty, show all data
              filteredData = originalWargaData;
              originalWargaData.forEach(keluarga => {
                  totalPenduduk += keluarga.penduduk.length;
              });
              filteredPenduduk = totalPenduduk;
          } else {
              // Filter data based on search term
              originalWargaData.forEach(keluarga => {
                  totalPenduduk += keluarga.penduduk.length;
                  
                  // Check if keluarga data matches search term
                  const keluargaMatches = (
                      keluarga.nomor_kk.toLowerCase().includes(searchTerm) ||
                      (keluarga.nama_kepala_keluarga && keluarga.nama_kepala_keluarga.toLowerCase().includes(searchTerm)) ||
                      keluarga.alamat_rumah.toLowerCase().includes(searchTerm) ||
                      keluarga.rt.toLowerCase().includes(searchTerm) ||
                      keluarga.rw.toLowerCase().includes(searchTerm)
                  );
                  
                  // Filter penduduk within this keluarga
                  const filteredPendudukInKeluarga = keluarga.penduduk.filter(penduduk => {
                      return (
                          penduduk.nik.toLowerCase().includes(searchTerm) ||
                          penduduk.nama_lengkap.toLowerCase().includes(searchTerm) ||
                          penduduk.nomor_kk.toLowerCase().includes(searchTerm) ||
                          penduduk.status_hubungan_keluarga.toLowerCase().includes(searchTerm) ||
                          penduduk.status_kependudukan.toLowerCase().includes(searchTerm) ||
                          (penduduk.tempat_lahir && penduduk.tempat_lahir.toLowerCase().includes(searchTerm)) ||
                          (penduduk.agama && penduduk.agama.toLowerCase().includes(searchTerm)) ||
                          (penduduk.pendidikan && penduduk.pendidikan.toLowerCase().includes(searchTerm)) ||
                          (penduduk.jenis_pekerjaan && penduduk.jenis_pekerjaan.toLowerCase().includes(searchTerm)) ||
                          (penduduk.jenis_kelamin && penduduk.jenis_kelamin.toLowerCase().includes(searchTerm))
                      );
                  });
                  
                  // Include keluarga if either keluarga matches or has matching penduduk
                  if (keluargaMatches || filteredPendudukInKeluarga.length > 0) {
                      const keluargaCopy = { ...keluarga };
                      if (!keluargaMatches) {
                          // If only penduduk matches, show only matching penduduk
                          keluargaCopy.penduduk = filteredPendudukInKeluarga;
                      }
                      filteredData.push(keluargaCopy);
                      filteredPenduduk += keluargaCopy.penduduk.length;
                  }
              });
          }
          
          // Update search results count
          const filteredKK = filteredData.length;
          updateSearchResultsCount(filteredPenduduk, totalPenduduk, searchTerm, filteredKK);
          
          // Re-render accordion with filtered data
          if (searchTerm === '') {
              // If search is empty, call original render function directly
              originalRenderFunction(filteredData);
          } else {
              // For filtered results, use original render function
              originalRenderFunction(filteredData);
          }
      }
      
      // Function to update search results count display
      function updateSearchResultsCount(filtered, total, searchTerm, filteredKK = null) {
          const countElement = $('#search-results-count');
          if (searchTerm === '') {
              countElement.text(`Menampilkan ${total} penduduk dari ${totalKK} KK`);
          } else {
              const kkText = filteredKK !== null ? ` dari ${filteredKK} KK` : '';
              countElement.text(`Ditemukan ${filtered} dari ${total} penduduk${kkText}`);
          }
      }
      
      // Store original renderWargaAccordion function
       const originalRenderFunction = renderWargaAccordion;
       
       // Override renderWargaAccordion to store data
       renderWargaAccordion = function(data) {
           console.log('renderWargaAccordion called with data:', data);
           
           // Store original data for filtering
           if (data && Array.isArray(data)) {
               originalWargaData = JSON.parse(JSON.stringify(data)); // Deep copy
               console.log('Stored original data:', originalWargaData.length, 'keluarga');
               
               // Update search count when data is loaded
               let totalPenduduk = 0;
               originalWargaData.forEach(keluarga => {
                   totalPenduduk += keluarga.penduduk.length;
               });
               updateSearchResultsCount(totalPenduduk, totalPenduduk, '');
           }
           
           // Call original render function
           return originalRenderFunction(data);
       };
       
       // Also store data when loadWargaData is successful
       const originalLoadWargaData = loadWargaData;
       loadWargaData = function() {
           $.ajax({
               url: '{{ route("data-penduduk.get-warga") }}',
               method: 'GET',
               success: function(response) {
                   console.log('Data warga dari server:', response);
                   if (response.success) {
                       // Store data before rendering
                       if (response.data && Array.isArray(response.data)) {
                           originalWargaData = JSON.parse(JSON.stringify(response.data));
                           console.log('Stored data from AJAX:', originalWargaData.length, 'keluarga');
                       }
                       renderWargaAccordion(response.data);
                   }
               },
               error: function() {
                    $('#warga-accordion').html('<div class="text-center text-gray-500 py-8">Gagal memuat data warga</div>');
                }
            });
        };
        
        // Fungsi untuk menampilkan detail penduduk
        window.viewPendudukDetail = function(pendudukId) {
            $.ajax({
                url: `/data-penduduk/get-penduduk/${pendudukId}`,
                method: 'GET',
                success: function(response) {
                    if (response.success && response.data) {
                        const penduduk = response.data;
                        
                        // Isi data ke modal
                        $('#detail_nik').text(penduduk.nik || '-');
                        $('#detail_nama_lengkap').text(penduduk.nama_lengkap || '-');
                        $('#detail_jenis_kelamin').text(penduduk.jenis_kelamin || '-');
                        
                        // Format tempat, tanggal lahir
                        let tempatTanggalLahir = '';
                        if (penduduk.tempat_lahir && penduduk.tanggal_lahir) {
                            const tanggalLahir = new Date(penduduk.tanggal_lahir).toLocaleDateString('id-ID');
                            tempatTanggalLahir = `${penduduk.tempat_lahir}, ${tanggalLahir}`;
                        } else if (penduduk.tempat_lahir) {
                            tempatTanggalLahir = penduduk.tempat_lahir;
                        } else if (penduduk.tanggal_lahir) {
                            tempatTanggalLahir = new Date(penduduk.tanggal_lahir).toLocaleDateString('id-ID');
                        }
                        $('#detail_tempat_tanggal_lahir').text(tempatTanggalLahir || '-');
                        
                        $('#detail_agama').text(penduduk.agama || '-');
                        $('#detail_pendidikan').text(penduduk.pendidikan || '-');
                        $('#detail_jenis_pekerjaan').text(penduduk.jenis_pekerjaan || '-');
                        $('#detail_golongan_darah').text(penduduk.golongan_darah || '-');
                        $('#detail_nomor_kk').text(penduduk.nomor_kk || '-');
                        $('#detail_status_perkawinan').text(penduduk.status_perkawinan || '-');
                        $('#detail_status_hubungan_keluarga').text(penduduk.status_hubungan_keluarga || '-');
                        $('#detail_kewarganegaraan').text(penduduk.kewarganegaraan || '-');
                        $('#detail_status_kependudukan').text(penduduk.status_kependudukan || '-');
                        $('#detail_no_paspor').text(penduduk.no_paspor || '-');
                        $('#detail_no_kitap').text(penduduk.no_kitap || '-');
                        $('#detail_nama_ayah').text(penduduk.nama_ayah || '-');
                        $('#detail_nama_ibu').text(penduduk.nama_ibu || '-');
                        $('#detail_akta_kelahiran').text(penduduk.akta_kelahiran || '-');
                        
                        // Isi data alamat tambahan
                        $('#detail_tujuan_tinggal').text(penduduk.tujuan_tinggal || '-');
                        $('#detail_alamat_asal').text(penduduk.alamat_asal || '-');
                        $('#detail_kota_asal').text(penduduk.kota_asal || '-');
                        $('#detail_provinsi_asal').text(penduduk.provinsi_asal || '-');
                        $('#detail_dokumen').text(penduduk.dokumen || '-');
                        
                        // Tampilkan section alamat jika status kependudukan adalah "Tidak Tetap"
                        if (penduduk.status_kependudukan === 'Tidak Tetap') {
                            $('#detail_alamat_section').removeClass('hidden');
                        } else {
                            $('#detail_alamat_section').addClass('hidden');
                        }
                        
                        // Tampilkan modal
                        $('#modalDetailPenduduk').removeClass('hidden');
                    } else {
                        showSuccessModal('Data penduduk tidak ditemukan');
                    }
                },
                error: function() {
                    showSuccessModal('Terjadi kesalahan saat mengambil data penduduk');
                }
            });
        };
        
        // Fungsi untuk menutup modal detail penduduk
        window.closeDetailPendudukModal = function() {
            $('#modalDetailPenduduk').addClass('hidden');
        };
        
        // Function to check if alamat fields should be visible in edit modal
        function checkEditAlamatFieldsVisibility() {
            const statusKependudukan = $('#edit_status_kependudukan').val();
            const alamatFields = $('#edit_alamat_fields');
            const dokumenContainer = $('#edit_dokumen_container');
            
            console.log('Debug checkEditAlamatFieldsVisibility:');
            console.log('statusKependudukan:', statusKependudukan);
            console.log('alamatFields element:', alamatFields.length);
            
            if (statusKependudukan === 'Tidak Tetap') {
                console.log('Showing edit alamat fields');
                alamatFields.removeClass('hidden');
                dokumenContainer.show();
                $('#edit_tujuan_tinggal').attr('required', true);
                $('#edit_alamat_asal').attr('required', true);
                $('#edit_kota_asal').attr('required', true);
                $('#edit_provinsi_asal').attr('required', true);
                // $('#edit_dokumen').attr('required', true); // Dokumen tidak mandatory
            } else {
                console.log('Hiding edit alamat fields');
                alamatFields.addClass('hidden');
                dokumenContainer.hide();
                $('#edit_tujuan_tinggal').removeAttr('required');
                $('#edit_alamat_asal').removeAttr('required');
                $('#edit_kota_asal').removeAttr('required');
                $('#edit_provinsi_asal').removeAttr('required');
                // $('#edit_dokumen').removeAttr('required'); // Dokumen tidak mandatory
            }
        }
        
        // Handle status kependudukan change in edit modal
        $('#edit_status_kependudukan').on('change', function() {
            checkEditAlamatFieldsVisibility();
        });
    });
</script>
@endpush