@extends('layouts.app')

@section('title', 'Data Warga TP-PKK')

@section('content')
<div class="container mx-auto px-4 py-6 max-w-7xl">
    <!-- Header -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6 transition-colors duration-200">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Data Warga TP-PKK</h1>
                <p class="text-gray-600 dark:text-gray-300 mt-1">Kepala Rumah Tangga: {{ $rumahTangga->nama_kepala_rumah_tangga }}</p>
                <p class="text-gray-600 dark:text-gray-300">Kelompok: {{ $rumahTangga->kelompokDasawisma->nama_kelompok }}</p>
                <p class="text-gray-600 dark:text-gray-300">Alamat: {{ $rumahTangga->alamat }}</p>
            </div>
            <div class="flex space-x-2">
                <a href="{{ route('rumah-tangga-dasawisma.index', $rumahTangga->kelompokDasawisma->id) }}" class="bg-gray-500 hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition duration-200">
                    <i class="fas fa-arrow-left mr-2"></i>Kembali
                </a>
                @if(auth()->user()->entity->name === 'rt')
                <button id="open-family-modal-btn" class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition duration-200">
                    <i class="fas fa-plus mr-2"></i>Tambah Data
                </button>
                @endif
            </div>
        </div>
    </div>

    <!-- Family Selection Modal -->
    @if(auth()->user()->entity->name === 'rt')
    <div id="family-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-6xl shadow-lg rounded-md bg-white dark:bg-gray-800">
            <div class="mt-3">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Pilih Data Keluarga</h3>
                    <button id="close-family-modal" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <div class="flex items-center justify-between mb-2">
                    <div class="relative w-full md:w-1/3">
                        <input type="text" id="family-search" placeholder="Cari nama penduduk..." 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">
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"><i class="fas fa-search"></i></span>
                    </div>
                </div>
                <div class="overflow-x-auto max-h-96">
                    <table class="min-w-full table-auto" id="family-table">
                        <thead class="bg-gray-50 dark:bg-gray-700 sticky top-0">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    <input type="checkbox" id="select-all-family" class="rounded">
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">NIK</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Nama Lengkap</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">JK</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Umur</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status Keluarga</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Alamat</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" id="family-tbody">
                            <!-- Data will be loaded here -->
                        </tbody>
                    </table>
                </div>
                
                <div class="flex justify-end space-x-2 mt-4">
                    <button id="cancel-family-selection" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition duration-200">
                        <i class="fas fa-times mr-2"></i>Batal
                    </button>
                    <button id="save-family-selection" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200">
                        <i class="fas fa-save mr-2"></i>Simpan
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Edit Modal -->
    @if(auth()->user()->entity->name === 'rt')
    <div id="edit-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white dark:bg-gray-800">
            <div class="mt-3">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        <i class="fas fa-edit mr-2"></i>Edit Data Warga TP-PKK
                    </h3>
                    <button id="close-edit-modal" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <form id="edit-warga-form" class="space-y-4">
                    <input type="hidden" id="edit_warga_id" name="warga_id">
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- No. Registrasi -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">No. Registrasi</label>
                            <input type="text" id="edit_no_registrasi" name="no_registrasi" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" readonly>
                        </div>
                        
                        <!-- Nama Warga -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Warga</label>
                            <input type="text" id="edit_nama_warga" name="nama_warga" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" readonly>
                        </div>
                        
                        <!-- Jabatan PKK -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jabatan PKK</label>
                            <input type="text" id="edit_jabatan_pkk" name="jabatan_pkk" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                        </div>
                        
                        <!-- Akseptor KB -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Akseptor KB</label>
                            <select id="edit_akseptor_kb" name="akseptor_kb" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih</option>
                                <option value="ya">Ya</option>
                                <option value="tidak">Tidak</option>
                            </select>
                        </div>
                        
                        <!-- Jenis Akseptor KB (conditional) -->
                        <div id="edit_jenis_akseptor_kb_div" style="display: none;">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Akseptor KB</label>
                            <select id="edit_jenis_akseptor_kb" name="jenis_akseptor_kb" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih Jenis</option>
                                <option value="pil">Pil</option>
                                <option value="kondom_pria">Kondom Pria</option>
                                <option value="suntik">Suntik</option>
                                <option value="implan">Implan</option>
                                <option value="iud">IUD</option>
                                <option value="kondom_wanita">Kondom Wanita</option>
                                <option value="spermisida">Spermisida</option>
                                <option value="diafragma">Diafragma</option>
                                <option value="cervical_cap">Cervical Cap</option>
                                <option value="koyo_ortho_evra">Koyo Ortho Evra</option>
                                <option value="cincin_vagina">Cincin Vagina</option>
                                <option value="kb_permanen">KB Permanen/Steril</option>
                            </select>
                        </div>
                        
                        <!-- Aktif Posyandu -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Aktif Kegiatan Posyandu</label>
                            <select id="edit_aktif_posyandu" name="aktif_posyandu" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih</option>
                                <option value="ya">Ya</option>
                                <option value="tidak">Tidak</option>
                            </select>
                        </div>
                        
                        <!-- Frekuensi Posyandu (conditional) -->
                        <div id="edit_frekuensi_posyandu_div" style="display: none;">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Frekuensi</label>
                            <select id="edit_frekuensi_posyandu" name="frekuensi_posyandu" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih Frekuensi</option>
                                <option value="sekali/bulan">Sekali/Bulan</option>
                                <option value="sekali/2bulan">Sekali/2 Bulan</option>
                                <option value="sekali/3bulan">Sekali/3 Bulan</option>
                                <option value=">4 bulan sekali">Lebih dari 4 Bulan Sekali</option>
                            </select>
                        </div>
                        
                        <!-- Program Bina Keluarga Balita -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Mengikuti Program Bina Keluarga Balita</label>
                            <select id="edit_bina_keluarga_balita" name="bina_keluarga_balita" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih</option>
                                <option value="ya">Ya</option>
                                <option value="tidak">Tidak</option>
                            </select>
                        </div>
                        
                        <!-- Memiliki Tabungan -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Memiliki Tabungan</label>
                            <select id="edit_memiliki_tabungan" name="memiliki_tabungan" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih</option>
                                <option value="ya">Ya</option>
                                <option value="tidak">Tidak</option>
                            </select>
                        </div>
                        
                        <!-- Mengikuti Kelompok Belajar -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Mengikuti Kelompok Belajar</label>
                            <select id="edit_mengikuti_kelompok_belajar" name="mengikuti_kelompok_belajar" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih</option>
                                <option value="ya">Ya</option>
                                <option value="tidak">Tidak</option>
                            </select>
                        </div>
                        
                        <!-- Jenis Kelompok Belajar (conditional) -->
                        <div id="edit_jenis_kelompok_belajar_div" style="display: none;">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Kelompok Belajar</label>
                            <select id="edit_jenis_kelompok_belajar" name="jenis_kelompok_belajar" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih Jenis</option>
                                <option value="paket_a">Paket A</option>
                                <option value="paket_b">Paket B</option>
                                <option value="paket_c">Paket C</option>
                                <option value="kf">KF</option>
                            </select>
                        </div>
                        
                        <!-- Mengikuti PAUD -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Mengikuti PAUD/Sejenis</label>
                            <select id="edit_mengikuti_paud" name="mengikuti_paud" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih</option>
                                <option value="ya">Ya</option>
                                <option value="tidak">Tidak</option>
                            </select>
                        </div>
                        
                        <!-- Ikut Kegiatan Koperasi -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Ikut Kegiatan Koperasi</label>
                            <select id="edit_ikut_koperasi" name="ikut_koperasi" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih</option>
                                <option value="ya">Ya</option>
                                <option value="tidak">Tidak</option>
                            </select>
                        </div>
                        
                        <!-- Status Ibu Hamil (only for women above 17) -->
                        <div id="edit_status_ibu_hamil_div" style="display: none;">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status Ibu Hamil</label>
                            <select id="edit_status_ibu_hamil" name="status_ibu_hamil" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih</option>
                                <option value="ya">Ya</option>
                                <option value="tidak">Tidak</option>
                            </select>
                        </div>
                        
                        <!-- Status Ibu Menyusui (only for women above 17) -->
                        <div id="edit_status_ibu_menyusui_div" style="display: none;">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status Ibu Menyusui</label>
                            <select id="edit_status_ibu_menyusui" name="status_ibu_menyusui" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih</option>
                                <option value="ya">Ya</option>
                                <option value="tidak">Tidak</option>
                            </select>
                        </div>
                        
                        <!-- Berkebutuhan Khusus -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Berkebutuhan Khusus</label>
                            <select id="edit_berkebutuhan_khusus" name="berkebutuhan_khusus" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Pilih</option>
                                <option value="ya">Ya</option>
                                <option value="tidak">Tidak</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="flex justify-end space-x-2 mt-6">
                        <button type="button" id="cancel-edit" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition duration-200">
                            <i class="fas fa-times mr-2"></i>Batal
                        </button>
                        <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200">
                            <i class="fas fa-save mr-2"></i>Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endif

    <!-- View Modal -->
    <div id="view-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white dark:bg-gray-800">
            <div class="mt-3">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        <i class="fas fa-eye mr-2"></i>Lihat Data Warga TP-PKK
                    </h3>
                    <button id="close-view-modal" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- Data Identitas -->
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                            <h4 class="text-md font-semibold text-gray-800 dark:text-white mb-3">Data Identitas</h4>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">No. Registrasi:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_no_registrasi">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">No. KTP:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_no_ktp">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Nama Warga:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_nama_warga">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Jabatan PKK:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_jabatan_pkk">-</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="view_jenis_kelamin">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Tempat Lahir:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_tempat_lahir">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Tanggal Lahir:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_tanggal_lahir">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Umur:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_umur">-</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="view_status_perkawinan">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Status dalam Keluarga:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_status_dalam_keluarga">-</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="view_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="view_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="view_pekerjaan">-</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Data Program PKK -->
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                            <h4 class="text-md font-semibold text-gray-800 dark:text-white mb-3">Data Program PKK</h4>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Akseptor KB:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_akseptor_kb">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Jenis Akseptor KB:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_jenis_akseptor_kb">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Aktif Posyandu:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_aktif_posyandu">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Frekuensi Posyandu:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_frekuensi_posyandu">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Program Bina Keluarga Balita:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_program_bina_keluarga_balita">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Memiliki Tabungan:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_memiliki_tabungan">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Mengikuti Kelompok Belajar:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_mengikuti_kelompok_belajar">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Jenis Kelompok Belajar:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_jenis_kelompok_belajar">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Mengikuti PAUD:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_mengikuti_paud">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Ikut Kegiatan Koperasi:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_ikut_kegiatan_koperasi">-</span>
                                </div>
                                <div class="flex justify-between" id="view_status_ibu_hamil_row" style="display: none;">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Status Ibu Hamil:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_status_ibu_hamil">-</span>
                                </div>
                                <div class="flex justify-between" id="view_status_ibu_menyusui_row" style="display: none;">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Status Ibu Menyusui:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_status_ibu_menyusui">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-300">Berkebutuhan Khusus:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_berkebutuhan_khusus">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Alamat -->
                    <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                        <h4 class="text-md font-semibold text-gray-800 dark:text-white mb-3">Alamat</h4>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-300">Alamat Lengkap:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_alamat">-</span>
                        </div>
                    </div>
                    
                    <!-- Rumah Tangga -->
                    <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                        <h4 class="text-md font-semibold text-gray-800 dark:text-white mb-3">Data Rumah Tangga</h4>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-300">Nama Kepala Rumah Tangga:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white" id="view_nama_kepala_rumah_tangga">-</span>
                        </div>
                    </div>
                    
                    <div class="flex justify-end mt-6">
                        <button type="button" id="close-view-modal-btn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition duration-200">
                            <i class="fas fa-times mr-2"></i>Tutup
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-200">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">
            <i class="fas fa-table mr-2"></i>Data Warga TP-PKK
        </h2>
        
        <div class="overflow-x-auto">
            <table class="min-w-full table-auto" id="data-warga-table">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">No</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Kegiatan</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">No. Reg</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Nama Warga</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">JK</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Jabatan PKK</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Umur</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Stts Dlm Keluarga</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Pend</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Pekerjaan</th>
                        <th class="px-4 py-3 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" id="data-warga-tbody">
                    @forelse($dataWargaTpPkk as $index => $warga)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $index + 1 }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            <a href="{{ route('kegiatan-warga.index', $warga->id) }}" 
                               class="{{ $warga->kegiatanWarga ? 'text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400' }}" 
                               title="{{ $warga->kegiatanWarga ? 'Data kegiatan sudah terisi - Klik untuk melihat/edit' : 'Data kegiatan belum terisi - Klik untuk mengisi' }}">
                                <i class="fas fa-tasks text-lg"></i>
                            </a>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $warga->no_registrasi }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $warga->nama_warga }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $warga->jenis_kelamin_singkat }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $warga->jabatan_pkk ?? '-' }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $warga->umur }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $warga->status_dalam_keluarga }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $warga->pendidikan }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $warga->pekerjaan }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            <div class="flex space-x-2">
                                <button class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300" onclick="viewWarga({{ $warga->id }})" title="Lihat Data">
                                    <i class="fas fa-eye"></i>
                                </button>
                                @if(auth()->user()->entity->name === 'rt')
                                <button class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" onclick="editWarga({{ $warga->id }})" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300" onclick="deleteWarga({{ $warga->id }})" title="Hapus">
                                    <i class="fas fa-trash"></i>
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="11" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                            <div class="flex flex-col items-center">
                                <i class="fas fa-users text-4xl text-gray-300 dark:text-gray-600 mb-2"></i>
                                <p>Belum ada data warga TP-PKK</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    console.log('Document ready, jQuery version:', $.fn.jquery);
    console.log('Select2 available:', typeof $.fn.select2 !== 'undefined');
    
    let familySearchTimer = null;
    let selectedFamilyIds = new Set();
    const rumahTanggaId = {{ $rumahTangga->id }};
    
    // Toggle form visibility with simplified logic
    $('#toggle-form-btn').off('click').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        try {
            const formSection = $('#form-section');
            const btn = $(this);
            
            console.log('Toggle button clicked');
            console.log('Form section exists:', formSection.length);
            console.log('Form is visible:', formSection.is(':visible'));
            
            if (formSection.is(':visible')) {
                // Hide form
                formSection.hide();
                btn.html('<i class="fas fa-plus mr-2"></i>Tambah Data');
                console.log('Form hidden');
            } else {
                // Show form
                formSection.show();
                btn.html('<i class="fas fa-minus mr-2"></i>Tutup Form');
                console.log('Form shown');
            }
        } catch (error) {
            console.error('Error in toggle form:', error);
        }
    });
    
    // Initialize autocomplete for Nama Kepala Rumah Tangga with error handling
    try {
        $('#nama_kepala_rumah_tangga').select2({
            placeholder: 'Pilih Nama Kepala Rumah Tangga',
            allowClear: true,
            ajax: {
                url: '{{ route("data-warga-tp-pkk.search-penduduk") }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term,
                        type: 'nama'
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.map(function(item) {
                            return {
                                id: item.nama,
                                text: item.text,
                                data: item
                            };
                        })
                    };
                },
                cache: true
            }
        });
    } catch (error) {
        console.error('Error initializing nama_kepala_rumah_tangga select2:', error);
    }

    // Auto-fill No. KTP when Nama Kepala Rumah Tangga is selected
    $('#nama_kepala_rumah_tangga').on('select2:select', function (e) {
        const data = e.params.data.data;
        
        // Auto-fill No. KTP field
        $('#no_ktp').empty().append(new Option(data.nik + ' - ' + data.nama, data.nik, true, true)).trigger('change');
        
        // Also fill other form fields
        fillFormFromPenduduk(data);
    });

    // Initialize autocomplete for No. KTP with error handling
    try {
        $('#no_ktp').select2({
            placeholder: 'Pilih No. KTP',
            allowClear: true,
            ajax: {
                url: '{{ route("data-warga-tp-pkk.search-penduduk") }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term,
                        type: 'ktp'
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.map(function(item) {
                            return {
                                id: item.nik,
                                text: item.text,
                                data: item
                            };
                        })
                    };
                },
                cache: true
            }
        });
    } catch (error) {
        console.error('Error initializing no_ktp select2:', error);
    }

    // Auto-fill form when KTP is selected
    $('#no_ktp').on('select2:select', function (e) {
        const data = e.params.data.data;
        fillFormFromPenduduk(data);
    });

    // Function to fill form from penduduk data
    function fillFormFromPenduduk(data) {
        $('#nama_warga').val(data.nama);
        $('#jenis_kelamin').val(data.jenis_kelamin);
        $('#tempat_lahir').val(data.tempat_lahir);
        $('#tanggal_lahir').val(data.tanggal_lahir);
        $('#status_perkawinan').val(data.status_perkawinan);
        $('#status_dalam_keluarga').val(data.status_hubungan_keluarga);
        $('#agama').val(data.agama);
        $('#alamat').val(data.alamat);
        $('#pendidikan').val(data.pendidikan);
        $('#pekerjaan').val(data.pekerjaan);
        
        // Calculate age
        if (data.tanggal_lahir) {
            const birthDate = new Date(data.tanggal_lahir);
            const today = new Date();
            let age = today.getFullYear() - birthDate.getFullYear();
            const monthDiff = today.getMonth() - birthDate.getMonth();
            
            if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                age--;
            }
            
            $('#umur').val(age);
        }
    }

    // Generate No. Registrasi on page load
    generateNoRegistrasi();

    function generateNoRegistrasi() {
        $.get('{{ route("data-warga-tp-pkk.generate-no-registrasi") }}')
            .done(function(response) {
                $('#no_registrasi').val(response.no_registrasi);
            })
            .fail(function() {
                console.error('Failed to generate no registrasi');
            });
    }

    // Show/hide conditional fields
    $('#akseptor_kb').change(function() {
        if ($(this).val() === 'ya') {
            $('#jenis_akseptor_kb_div').show();
            $('#jenis_akseptor_kb').prop('required', true);
        } else {
            $('#jenis_akseptor_kb_div').hide();
            $('#jenis_akseptor_kb').prop('required', false).val('');
        }
    });

    $('#aktif_posyandu').change(function() {
        if ($(this).val() === 'ya') {
            $('#frekuensi_posyandu_div').show();
            $('#frekuensi_posyandu').prop('required', true);
        } else {
            $('#frekuensi_posyandu_div').hide();
            $('#frekuensi_posyandu').prop('required', false).val('');
        }
    });

    $('#mengikuti_kelompok_belajar').change(function() {
        if ($(this).val() === 'ya') {
            $('#jenis_kelompok_belajar_div').show();
            $('#jenis_kelompok_belajar').prop('required', true);
        } else {
            $('#jenis_kelompok_belajar_div').hide();
            $('#jenis_kelompok_belajar').prop('required', false).val('');
        }
    });

    // Form submission
    $('#data-warga-form').submit(function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();
        
        // Disable submit button
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...');
        
        $.ajax({
            url: '{{ route("data-warga-tp-pkk.store", $rumahTangga->id) }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    // Show success message
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                    
                    // Add new row to table
                    addRowToTable(response.data);
                    
                    // Reset form
                    resetForm();
                    
                    // Generate new no registrasi
                    generateNoRegistrasi();
                }
            },
            error: function(xhr) {
                let errorMessage = 'Terjadi kesalahan saat menyimpan data.';
                
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = xhr.responseJSON.errors;
                    errorMessage = Object.values(errors).flat().join('\n');
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: errorMessage
                });
            },
            complete: function() {
                // Re-enable submit button
                submitBtn.prop('disabled', false).html(originalText);
            }
        });
    });

    // Reset form
    // Modal functionality
    $('#open-family-modal-btn').click(function() {
        $('#family-search').val('');
        loadFamilyData();
        $('#family-modal').removeClass('hidden');
        setTimeout(function(){ $('#family-search').focus(); }, 100);
    });

    $('#close-family-modal, #cancel-family-selection').click(function() {
        $('#family-modal').addClass('hidden');
    });

    $('#select-all-family').change(function() {
        $('.family-checkbox').prop('checked', this.checked).trigger('change');
        if (this.checked) {
            (window.familyDataCache || []).forEach(function(item){ selectedFamilyIds.add(String(item.id)); });
        } else {
            selectedFamilyIds.clear();
        }
    });

    $(document).on('change', '.family-checkbox', function() {
        const id = String($(this).val());
        if ($(this).is(':checked')) {
            selectedFamilyIds.add(id);
        } else {
            selectedFamilyIds.delete(id);
        }
    });

    $('#save-family-selection').click(function() {
        // Prevent double-click
        if ($(this).prop('disabled')) {
            return;
        }
        
        const selectedData = [];
        $('.family-checkbox:checked').each(function() {
            selectedData.push($(this).val());
        });

        if (selectedData.length === 0) {
            alert('Pilih minimal satu data untuk disimpan');
            return;
        }

        // Disable button to prevent double submission
        $(this).prop('disabled', true).text('Menyimpan...');
        
        bulkStoreWarga(selectedData);
    });



    function loadFamilyData() {
        const rumahTanggaId = {{ $rumahTangga->id }};
        
        $.ajax({
            url: `/data-warga-tp-pkk/family-data/${rumahTanggaId}`,
            method: 'GET',
            success: function(response) {
                // Cache data for client-side search
                window.familyDataCache = response.data || [];

                // Initial render
                let tableBody = '';
                (window.familyDataCache).forEach(function(item) {
                    const alamatLengkap = `${item.alamat_rumah}, RT ${item.rt}, RW ${item.rw}, ${item.kelurahan}, ${item.kecamatan}, ${item.kota}, ${item.provinsi}`;
                    const jkSingkat = item.jenis_kelamin === 'Laki-laki' ? 'L' : 'P';

                    // Calculate age from birth date
                    const birthDate = new Date(item.tanggal_lahir);
                    const today = new Date();
                    let age = today.getFullYear() - birthDate.getFullYear();
                    const monthDiff = today.getMonth() - birthDate.getMonth();
                    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                        age--;
                    }

                    const checked = selectedFamilyIds.has(String(item.id)) ? 'checked' : '';
                    tableBody += `
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-white">
                            <td class="px-4 py-2">
                                <input type="checkbox" class="family-checkbox" value="${item.id}" ${checked}>
                            </td>
                            <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${item.nik}</td>
                            <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${item.nama_lengkap}</td>
                            <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${jkSingkat}</td>
                            <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${age}</td>
                            <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${item.status_hubungan_keluarga}</td>
                            <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${alamatLengkap}</td>
                        </tr>
                    `;
                });
                $('#family-tbody').html(tableBody);

                // Bind search with debounce for live filtering
                $('#family-search').off('input').on('input', function() {
                    clearTimeout(familySearchTimer);
                    const term = $(this).val().trim().toLowerCase();
                    familySearchTimer = setTimeout(function() {
                        let filteredBody = '';
                        (window.familyDataCache || []).forEach(function(item) {
                            const name = (item.nama_lengkap || '').toLowerCase();
                            if (!term || name.includes(term)) {
                                const alamatLengkap = `${item.alamat_rumah}, RT ${item.rt}, RW ${item.rw}, ${item.kelurahan}, ${item.kecamatan}, ${item.kota}, ${item.provinsi}`;
                                const jkSingkat = item.jenis_kelamin === 'Laki-laki' ? 'L' : 'P';

                                // Calculate age from birth date
                                const birthDate = new Date(item.tanggal_lahir);
                                const today = new Date();
                                let age = today.getFullYear() - birthDate.getFullYear();
                                const monthDiff = today.getMonth() - birthDate.getMonth();
                                if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                                    age--;
                                }

                                const checked = selectedFamilyIds.has(String(item.id)) ? 'checked' : '';
                                filteredBody += `
                                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-white">
                                        <td class="px-4 py-2">
                                            <input type="checkbox" class="family-checkbox" value="${item.id}" ${checked}>
                                        </td>
                                        <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${item.nik}</td>
                                        <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${item.nama_lengkap}</td>
                                        <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${jkSingkat}</td>
                                        <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${age}</td>
                                        <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${item.status_hubungan_keluarga}</td>
                                        <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">${alamatLengkap}</td>
                                    </tr>
                                `;
                            }
                        });
                        $('#family-tbody').html(filteredBody);
                    }, 250);
                });
            },
            error: function(xhr) {
                alert('Error loading family data');
            }
        });
    }

    function bulkStoreWarga(selectedData) {
        const rumahTanggaId = {{ $rumahTangga->id }};
        
        $.ajax({
            url: `/data-warga-tp-pkk/bulk-store/${rumahTanggaId}`,
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                selected_ids: selectedData
            },
            success: function(response) {
                if (response.success) {
                    alert('Data berhasil disimpan!');
                    $('#family-modal').addClass('hidden');
                    location.reload(); // Reload to show new data
                } else {
                    alert('Error: ' + response.message);
                    // Re-enable button on error
                    $('#save-family-selection').prop('disabled', false).text('Simpan Data Terpilih');
                }
            },
            error: function(xhr) {
                alert('Gagal menyimpan data. Silakan coba lagi.');
                // Re-enable button on error
                $('#save-family-selection').prop('disabled', false).text('Simpan Data Terpilih');
            }
        });
    }

    function addRowToTable(data) {
        const tbody = $('#data-warga-tbody');
        const emptyRow = tbody.find('tr td[colspan="11"]').closest('tr');
        
        if (emptyRow.length) {
            emptyRow.remove();
        }
        
        const rowCount = tbody.find('tr').length + 1;
        const jkSingkat = data.jenis_kelamin === 'Laki-laki' ? 'L' : 'P';
        
        const newRow = `
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${rowCount}</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
                    <button class="text-blue-600 hover:text-blue-800" title="Lihat Kegiatan">
                        <i class="fas fa-eye text-gray-500"></i>
                    </button>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${data.no_registrasi}</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${data.nama_warga}</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${jkSingkat}</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${data.jabatan_pkk || '-'}</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${data.umur}</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${data.status_dalam_keluarga}</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${data.pendidikan}</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${data.pekerjaan}</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
                    <button class="text-blue-600 hover:text-blue-800 mr-2" onclick="editWarga(${data.id})" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="text-red-600 hover:text-red-800" onclick="deleteWarga(${data.id})" title="Hapus">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
        
        tbody.append(newRow);
    }

    // Edit modal functionality
    $('#close-edit-modal, #cancel-edit').click(function() {
        $('#edit-modal').addClass('hidden');
    });

    // View modal functionality
    $('#close-view-modal, #close-view-modal-btn').click(function() {
        $('#view-modal').addClass('hidden');
    });

    // Conditional fields for edit modal
    $('#edit_akseptor_kb').change(function() {
        if ($(this).val() === 'ya') {
            $('#edit_jenis_akseptor_kb_div').show();
            $('#edit_jenis_akseptor_kb').prop('required', true);
        } else {
            $('#edit_jenis_akseptor_kb_div').hide();
            $('#edit_jenis_akseptor_kb').prop('required', false).val('');
        }
    });

    $('#edit_aktif_posyandu').change(function() {
        if ($(this).val() === 'ya') {
            $('#edit_frekuensi_posyandu_div').show();
            $('#edit_frekuensi_posyandu').prop('required', true);
        } else {
            $('#edit_frekuensi_posyandu_div').hide();
            $('#edit_frekuensi_posyandu').prop('required', false).val('');
        }
    });

    $('#edit_mengikuti_kelompok_belajar').change(function() {
        if ($(this).val() === 'ya') {
            $('#edit_jenis_kelompok_belajar_div').show();
            $('#edit_jenis_kelompok_belajar').prop('required', true);
        } else {
            $('#edit_jenis_kelompok_belajar_div').hide();
            $('#edit_jenis_kelompok_belajar').prop('required', false).val('');
        }
    });

    // Edit form submission
    $('#edit-warga-form').submit(function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const wargaId = $('#edit_warga_id').val();
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();
        
        // Disable submit button
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...');
        
        $.ajax({
            url: `/data-warga-tp-pkk/update/${wargaId}`,
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'X-HTTP-Method-Override': 'PUT'
            },
            success: function(response) {
                if (response.success) {
                    alert('Data berhasil diperbarui!');
                    $('#edit-modal').addClass('hidden');
                    location.reload(); // Reload to show updated data
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(xhr) {
                let errorMessage = 'Terjadi kesalahan saat menyimpan data';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                alert(errorMessage);
            },
            complete: function() {
                // Re-enable submit button
                submitBtn.prop('disabled', false).html(originalText);
            }
        });
    });

});

// Global functions for onclick handlers
function editWarga(id) {
    // Fetch warga data and populate edit form
    $.ajax({
        url: `/data-warga-tp-pkk/edit/${id}`,
        method: 'GET',
        success: function(response) {
            if (response.success) {
                const data = response.data;
                
                // Populate form fields
                $('#edit_warga_id').val(data.id);
                $('#edit_no_registrasi').val(data.no_registrasi);
                $('#edit_nama_warga').val(data.nama_warga);
                $('#edit_jabatan_pkk').val(data.jabatan_pkk || '');
                $('#edit_akseptor_kb').val(data.akseptor_kb || '');
                $('#edit_jenis_akseptor_kb').val(data.jenis_akseptor_kb || '');
                $('#edit_aktif_posyandu').val(data.aktif_posyandu || '');
                $('#edit_frekuensi_posyandu').val(data.frekuensi_posyandu || '');
                $('#edit_bina_keluarga_balita').val(data.program_bina_keluarga_balita || '');
                    $('#edit_memiliki_tabungan').val(data.memiliki_tabungan || '');
                    $('#edit_mengikuti_kelompok_belajar').val(data.mengikuti_kelompok_belajar || '');
                    $('#edit_jenis_kelompok_belajar').val(data.jenis_kelompok_belajar || '');
                    $('#edit_mengikuti_paud').val(data.mengikuti_paud || '');
                    $('#edit_ikut_koperasi').val(data.ikut_kegiatan_koperasi || '');
                    $('#edit_status_ibu_hamil').val(data.status_ibu_hamil || '');
                    $('#edit_status_ibu_menyusui').val(data.status_ibu_menyusui || '');
                    $('#edit_berkebutuhan_khusus').val(data.berkebutuhan_khusus || '');
                
                // Show pregnancy and breastfeeding fields only for women above 17 years old
                if (data.jenis_kelamin === 'Perempuan' && data.umur > 17) {
                    $('#edit_status_ibu_hamil_div').show();
                    $('#edit_status_ibu_menyusui_div').show();
                } else {
                    $('#edit_status_ibu_hamil_div').hide();
                    $('#edit_status_ibu_menyusui_div').hide();
                    $('#edit_status_ibu_hamil').val('');
                    $('#edit_status_ibu_menyusui').val('');
                }
                
                // Trigger conditional field visibility
                $('#edit_akseptor_kb').trigger('change');
                $('#edit_aktif_posyandu').trigger('change');
                $('#edit_mengikuti_kelompok_belajar').trigger('change');
                
                // Show modal
                $('#edit-modal').removeClass('hidden');
            } else {
                alert('Error: ' + response.message);
            }
        },
        error: function(xhr) {
            alert('Error loading data for edit');
        }
    });
}

function deleteWarga(id) {
    if (confirm('Apakah Anda yakin ingin menghapus data ini?')) {
        $.ajax({
            url: `/data-warga-tp-pkk/delete/${id}`,
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    location.reload(); // Reload to show updated data
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(xhr) {
                alert('Error deleting data');
            }
        });
    }
}

function viewWarga(id) {
    // Fetch warga data and populate view modal
    $.ajax({
        url: `/data-warga-tp-pkk/edit/${id}`,
        method: 'GET',
        success: function(response) {
            if (response.success) {
                const data = response.data;
                
                // Populate view fields
                $('#view_no_registrasi').text(data.no_registrasi || '-');
                $('#view_no_ktp').text(data.no_ktp || '-');
                $('#view_nama_warga').text(data.nama_warga || '-');
                $('#view_jabatan_pkk').text(data.jabatan_pkk || '-');
                $('#view_jenis_kelamin').text(data.jenis_kelamin || '-');
                $('#view_tempat_lahir').text(data.tempat_lahir || '-');
                
                // Format tanggal lahir
                if (data.tanggal_lahir) {
                    const date = new Date(data.tanggal_lahir);
                    const formattedDate = date.toLocaleDateString('id-ID', {
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric'
                    });
                    $('#view_tanggal_lahir').text(formattedDate);
                } else {
                    $('#view_tanggal_lahir').text('-');
                }
                
                $('#view_umur').text(data.umur ? data.umur + ' tahun' : '-');
                $('#view_status_perkawinan').text(data.status_perkawinan || '-');
                $('#view_status_dalam_keluarga').text(data.status_dalam_keluarga || '-');
                $('#view_agama').text(data.agama || '-');
                $('#view_pendidikan').text(data.pendidikan || '-');
                $('#view_pekerjaan').text(data.pekerjaan || '-');
                $('#view_alamat').text(data.alamat || '-');
                $('#view_nama_kepala_rumah_tangga').text(data.nama_kepala_rumah_tangga || '-');
                
                // Program PKK data
                $('#view_akseptor_kb').text(data.akseptor_kb === 'ya' ? 'Ya' : (data.akseptor_kb === 'tidak' ? 'Tidak' : '-'));
                $('#view_jenis_akseptor_kb').text(data.jenis_akseptor_kb || '-');
                $('#view_aktif_posyandu').text(data.aktif_posyandu === 'ya' ? 'Ya' : (data.aktif_posyandu === 'tidak' ? 'Tidak' : '-'));
                $('#view_frekuensi_posyandu').text(data.frekuensi_posyandu || '-');
                $('#view_program_bina_keluarga_balita').text(data.program_bina_keluarga_balita === 'ya' ? 'Ya' : (data.program_bina_keluarga_balita === 'tidak' ? 'Tidak' : '-'));
                $('#view_memiliki_tabungan').text(data.memiliki_tabungan === 'ya' ? 'Ya' : (data.memiliki_tabungan === 'tidak' ? 'Tidak' : '-'));
                $('#view_mengikuti_kelompok_belajar').text(data.mengikuti_kelompok_belajar === 'ya' ? 'Ya' : (data.mengikuti_kelompok_belajar === 'tidak' ? 'Tidak' : '-'));
                $('#view_jenis_kelompok_belajar').text(data.jenis_kelompok_belajar || '-');
                $('#view_mengikuti_paud').text(data.mengikuti_paud === 'ya' ? 'Ya' : (data.mengikuti_paud === 'tidak' ? 'Tidak' : '-'));
                $('#view_ikut_kegiatan_koperasi').text(data.ikut_kegiatan_koperasi === 'ya' ? 'Ya' : (data.ikut_kegiatan_koperasi === 'tidak' ? 'Tidak' : '-'));
                
                // Show pregnancy and breastfeeding status only for women above 17 years old
                if (data.jenis_kelamin === 'Perempuan' && data.umur > 17) {
                    $('#view_status_ibu_hamil').text(data.status_ibu_hamil === 'ya' ? 'Ya' : (data.status_ibu_hamil === 'tidak' ? 'Tidak' : '-'));
                    $('#view_status_ibu_menyusui').text(data.status_ibu_menyusui === 'ya' ? 'Ya' : (data.status_ibu_menyusui === 'tidak' ? 'Tidak' : '-'));
                    $('#view_status_ibu_hamil_row').show();
                    $('#view_status_ibu_menyusui_row').show();
                } else {
                    $('#view_status_ibu_hamil_row').hide();
                    $('#view_status_ibu_menyusui_row').hide();
                }
                
                // Show berkebutuhan khusus status
                $('#view_berkebutuhan_khusus').text(data.berkebutuhan_khusus === 'ya' ? 'Ya' : (data.berkebutuhan_khusus === 'tidak' ? 'Tidak' : '-'));
                
                // Show modal
                $('#view-modal').removeClass('hidden');
            } else {
                alert('Error: ' + response.message);
            }
        },
        error: function(xhr) {
            alert('Error loading data for view');
        }
    });
}
</script>
@endpush
@endsection