@extends('layouts.app')

@section('title', 'Data Keluarga Dasawisma')

@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 Keluarga Dasawisma</h1>
                <p class="text-gray-600 dark:text-gray-300 mt-1">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>
            </div>
        </div>
    </div>

    <!-- Form Section -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6 transition-colors duration-200">
        <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-6">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Form Data Keluarga Dasawisma</h2>
        </div>
        
        @php
            $isReadonly = auth()->user()->entity->name !== 'rt';
            $readonlyClass = $isReadonly ? 'bg-gray-100 dark:bg-gray-600' : 'bg-white dark:bg-gray-700';
            $readonlyAttr = $isReadonly ? 'readonly' : '';
        @endphp
        
        <form id="dataKeluargaDasawismaForm" class="space-y-6">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- RT/RW -->
                <div>
                    <label for="rt_rw" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">RT/RW</label>
                    <input type="text" 
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                           id="rt_rw" name="rt_rw" 
                           value="{{ $dataKeluargaDasawisma->rt_rw ?? '' }}" {{ $readonlyAttr }}>
                </div>

                <!-- Alamat -->
                <div>
                    <label for="alamat" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Alamat</label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                              id="alamat" name="alamat" rows="2" {{ $readonlyAttr }}>{{ $dataKeluargaDasawisma->alamat ?? '' }}</textarea>
                </div>

                <!-- Nama Kepala Rumah Tangga -->
                <div>
                    <label for="nama_kepala_rumah_tangga" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Kepala Rumah Tangga</label>
                    <input type="text" 
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-600 text-gray-900 dark:text-white transition-colors duration-200" 
                           id="nama_kepala_rumah_tangga" name="nama_kepala_rumah_tangga" 
                           value="{{ $dataKeluargaDasawisma->nama_kepala_rumah_tangga ?? '' }}" readonly>
                </div>

                <!-- Jumlah Anggota Keluarga -->
                <div>
                    <label for="jumlah_anggota_keluarga" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jumlah Anggota Keluarga</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="jumlah_anggota_keluarga" name="jumlah_anggota_keluarga" 
                               value="{{ $dataKeluargaDasawisma->jumlah_anggota_keluarga ?? '' }}" min="0" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">orang</span>
                    </div>
                </div>

                <!-- Laki-laki -->
                <div>
                    <label for="laki_laki" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Laki-laki</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="laki_laki" name="laki_laki" 
                               value="{{ $dataKeluargaDasawisma->laki_laki ?? '' }}" min="0" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">orang</span>
                    </div>
                </div>

                <!-- Perempuan -->
                <div>
                    <label for="perempuan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Perempuan</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="perempuan" name="perempuan" 
                               value="{{ $dataKeluargaDasawisma->perempuan ?? '' }}" min="0" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">orang</span>
                    </div>
                </div>

                <!-- Jumlah KK -->
                <div>
                    <label for="jumlah_kk" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jumlah KK</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="jumlah_kk" name="jumlah_kk" 
                               value="{{ $dataKeluargaDasawisma->jumlah_kk ?? '' }}" min="0" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">KK</span>
                    </div>
                </div>

                <!-- Jumlah Balita -->
                <div>
                    <label for="jumlah_balita" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jumlah Balita</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="jumlah_balita" name="jumlah_balita" 
                               value="{{ $dataKeluargaDasawisma->jumlah_balita ?? '' }}" min="0" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">anak</span>
                    </div>
                </div>

                <!-- PUS -->
                <div>
                    <label for="pus" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">PUS</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="pus" name="pus" 
                               value="{{ $dataKeluargaDasawisma->pus ?? '' }}" min="0" max="99" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">orang</span>
                    </div>
                </div>

                <!-- WUS -->
                <div>
                    <label for="wus" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">WUS</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="wus" name="wus" 
                               value="{{ $dataKeluargaDasawisma->wus ?? '' }}" min="0" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">orang</span>
                    </div>
                </div>

                <!-- 3 Buta -->
                <div>
                    <label for="tiga_buta" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">3 Buta</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="tiga_buta" name="tiga_buta" 
                               value="{{ $dataKeluargaDasawisma->tiga_buta ?? '' }}" min="0" max="99" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">orang</span>
                    </div>
                </div>

                <!-- Ibu Hamil -->
                <div>
                    <label for="ibu_hamil" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Ibu Hamil</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="ibu_hamil" name="ibu_hamil" 
                               value="{{ $dataKeluargaDasawisma->ibu_hamil ?? '' }}" min="0" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">orang</span>
                    </div>
                </div>

                <!-- Ibu Menyusui -->
                <div>
                    <label for="ibu_menyusui" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Ibu Menyusui</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="ibu_menyusui" name="ibu_menyusui" 
                               value="{{ $dataKeluargaDasawisma->ibu_menyusui ?? '' }}" min="0" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">orang</span>
                    </div>
                </div>

                <!-- Lansia -->
                <div>
                    <label for="lansia" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Lansia</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="lansia" name="lansia" 
                               value="{{ $dataKeluargaDasawisma->lansia ?? '' }}" min="0" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">orang</span>
                    </div>
                </div>

                <!-- Makanan Pokok Sehari-hari -->
                <div>
                    <label for="makanan_pokok" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Makanan Pokok Sehari-hari</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                            id="makanan_pokok" name="makanan_pokok" {{ $isReadonly ? 'disabled' : '' }}>
                        <option value="">Pilih...</option>
                        <option value="Beras" {{ ($dataKeluargaDasawisma->makanan_pokok ?? '') == 'Beras' ? 'selected' : '' }}>Beras</option>
                        <option value="Non Beras" {{ ($dataKeluargaDasawisma->makanan_pokok ?? '') == 'Non Beras' ? 'selected' : '' }}>Non Beras</option>
                    </select>
                </div>

                <!-- Mempunyai Jamban Keluarga -->
                <div>
                    <label for="mempunyai_jamban_keluarga" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Mempunyai Jamban Keluarga</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                            id="mempunyai_jamban_keluarga" name="mempunyai_jamban_keluarga" {{ $isReadonly ? 'disabled' : '' }}>
                        <option value="">Pilih...</option>
                        <option value="Ya" {{ ($dataKeluargaDasawisma->mempunyai_jamban_keluarga ?? '') == 'Ya' ? 'selected' : '' }}>Ya</option>
                        <option value="Tidak" {{ ($dataKeluargaDasawisma->mempunyai_jamban_keluarga ?? '') == 'Tidak' ? 'selected' : '' }}>Tidak</option>
                    </select>
                </div>

                <!-- Jumlah Jamban (conditional) -->
                <div id="jumlah_jamban_container" style="display: none;">
                    <label for="jumlah_jamban" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jumlah</label>
                    <div class="flex">
                        <input type="number" 
                               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                               id="jumlah_jamban" name="jumlah_jamban" 
                               value="{{ $dataKeluargaDasawisma->jumlah_jamban ?? '' }}" min="0" max="99" {{ $readonlyAttr }}>
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg text-gray-700 dark:text-gray-300">buah</span>
                    </div>
                </div>

                <!-- Sumber Air Keluarga -->
                <div>
                    <label for="sumber_air_keluarga" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sumber Air Keluarga</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                            id="sumber_air_keluarga" name="sumber_air_keluarga" {{ $isReadonly ? 'disabled' : '' }}>
                        <option value="">Pilih...</option>
                        <option value="PDAM" {{ ($dataKeluargaDasawisma->sumber_air_keluarga ?? '') == 'PDAM' ? 'selected' : '' }}>PDAM</option>
                        <option value="Sumur" {{ ($dataKeluargaDasawisma->sumber_air_keluarga ?? '') == 'Sumur' ? 'selected' : '' }}>Sumur</option>
                        <option value="Sungai" {{ ($dataKeluargaDasawisma->sumber_air_keluarga ?? '') == 'Sungai' ? 'selected' : '' }}>Sungai</option>
                        <option value="Lainnya" {{ ($dataKeluargaDasawisma->sumber_air_keluarga ?? '') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                    </select>
                </div>

                <!-- Sumber Air Lainnya (conditional) -->
                <div id="sumber_air_lainnya_container" style="display: none;">
                    <label for="sumber_air_lainnya" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sumber</label>
                    <input type="text" 
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                           id="sumber_air_lainnya" name="sumber_air_lainnya" 
                           value="{{ $dataKeluargaDasawisma->sumber_air_lainnya ?? '' }}" {{ $readonlyAttr }}>
                </div>

                <!-- Memiliki Tempat Pembuangan Sampah -->
                <div>
                    <label for="memiliki_tempat_pembuangan_sampah" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Memiliki Tempat Pembuangan Sampah</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                            id="memiliki_tempat_pembuangan_sampah" name="memiliki_tempat_pembuangan_sampah" {{ $isReadonly ? 'disabled' : '' }}>
                        <option value="">Pilih...</option>
                        <option value="Ya" {{ ($dataKeluargaDasawisma->memiliki_tempat_pembuangan_sampah ?? '') == 'Ya' ? 'selected' : '' }}>Ya</option>
                        <option value="Tidak" {{ ($dataKeluargaDasawisma->memiliki_tempat_pembuangan_sampah ?? '') == 'Tidak' ? 'selected' : '' }}>Tidak</option>
                    </select>
                </div>

                <!-- Mempunyai Saluran Pembuangan Air Limbah -->
                <div>
                    <label for="mempunyai_saluran_pembuangan_air_limbah" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Mempunyai Saluran Pembuangan Air Limbah</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                            id="mempunyai_saluran_pembuangan_air_limbah" name="mempunyai_saluran_pembuangan_air_limbah" {{ $isReadonly ? 'disabled' : '' }}>
                        <option value="">Pilih...</option>
                        <option value="Ya" {{ ($dataKeluargaDasawisma->mempunyai_saluran_pembuangan_air_limbah ?? '') == 'Ya' ? 'selected' : '' }}>Ya</option>
                        <option value="Tidak" {{ ($dataKeluargaDasawisma->mempunyai_saluran_pembuangan_air_limbah ?? '') == 'Tidak' ? 'selected' : '' }}>Tidak</option>
                    </select>
                </div>

                <!-- Menempel Stiker P4K -->
                <div>
                    <label for="menempel_stiker_p4k" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Menempel Stiker P4K</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                            id="menempel_stiker_p4k" name="menempel_stiker_p4k" {{ $isReadonly ? 'disabled' : '' }}>
                        <option value="">Pilih...</option>
                        <option value="Ya" {{ ($dataKeluargaDasawisma->menempel_stiker_p4k ?? '') == 'Ya' ? 'selected' : '' }}>Ya</option>
                        <option value="Tidak" {{ ($dataKeluargaDasawisma->menempel_stiker_p4k ?? '') == 'Tidak' ? 'selected' : '' }}>Tidak</option>
                    </select>
                </div>

                <!-- Kriteria Rumah -->
                <div>
                    <label for="kriteria_rumah" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kriteria Rumah</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                            id="kriteria_rumah" name="kriteria_rumah" {{ $isReadonly ? 'disabled' : '' }}>
                        <option value="">Pilih...</option>
                        <option value="Sehat" {{ ($dataKeluargaDasawisma->kriteria_rumah ?? '') == 'Sehat' ? 'selected' : '' }}>Sehat</option>
                        <option value="Kurang Sehat" {{ ($dataKeluargaDasawisma->kriteria_rumah ?? '') == 'Kurang Sehat' ? 'selected' : '' }}>Kurang Sehat</option>
                    </select>
                </div>

                <!-- Aktifitas UP2K -->
                <div>
                    <label for="aktifitas_up2k" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Aktifitas UP2K</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                            id="aktifitas_up2k" name="aktifitas_up2k" {{ $isReadonly ? 'disabled' : '' }}>
                        <option value="">Pilih...</option>
                        <option value="Ya" {{ ($dataKeluargaDasawisma->aktifitas_up2k ?? '') == 'Ya' ? 'selected' : '' }}>Ya</option>
                        <option value="Tidak" {{ ($dataKeluargaDasawisma->aktifitas_up2k ?? '') == 'Tidak' ? 'selected' : '' }}>Tidak</option>
                    </select>
                </div>

                <!-- Jenis Usaha (conditional) -->
                <div id="jenis_usaha_container" style="display: none;">
                    <label for="jenis_usaha" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Usaha</label>
                    <input type="text" 
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                           id="jenis_usaha" name="jenis_usaha" 
                           value="{{ $dataKeluargaDasawisma->jenis_usaha ?? '' }}" {{ $readonlyAttr }}>
                </div>

                <!-- Aktifitas Kegiatan Usaha Kesehatan Lingkungan -->
                <div>
                    <label for="aktifitas_kegiatan_usaha_kesehatan_lingkungan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Aktifitas Kegiatan Usaha Kesehatan Lingkungan</label>
                    <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent {{ $readonlyClass }} text-gray-900 dark:text-white transition-colors duration-200" 
                            id="aktifitas_kegiatan_usaha_kesehatan_lingkungan" name="aktifitas_kegiatan_usaha_kesehatan_lingkungan" {{ $isReadonly ? 'disabled' : '' }}>
                        <option value="">Pilih...</option>
                        <option value="Ya" {{ ($dataKeluargaDasawisma->aktifitas_kegiatan_usaha_kesehatan_lingkungan ?? '') == 'Ya' ? 'selected' : '' }}>Ya</option>
                        <option value="Tidak" {{ ($dataKeluargaDasawisma->aktifitas_kegiatan_usaha_kesehatan_lingkungan ?? '') == 'Tidak' ? 'selected' : '' }}>Tidak</option>
                    </select>
                </div>
            </div>

            @if(auth()->user()->entity->name === 'rt')
            <div class="flex justify-center mt-6">
                <button type="submit" class="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white px-6 py-2 rounded-lg transition duration-200">
                    <i class="fas fa-save mr-2"></i>Simpan
                </button>
            </div>
            @endif
        </form>
    </div>
</div>

    <!-- Data Warga Table -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mt-6 transition-colors duration-200">
        <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-6">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Data Anggota Keluarga</h3>
        </div>
        <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-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">No</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">No Reg</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Nama Anggota Keluarga</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status Dalam Keluarga</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status Dalam Perkawinan</th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider" colspan="2">Jenis Kelamin</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tgl Lahir / Umur</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Pendidikan</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Pekerjaan</th>
                    </tr>
                    <tr class="bg-gray-50 dark:bg-gray-700">
                        <th class="px-6 py-2"></th>
                        <th class="px-6 py-2"></th>
                        <th class="px-6 py-2"></th>
                        <th class="px-6 py-2"></th>
                        <th class="px-6 py-2"></th>
                        <th class="px-6 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">L</th>
                        <th class="px-6 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">P</th>
                        <th class="px-6 py-2"></th>
                        <th class="px-6 py-2"></th>
                        <th class="px-6 py-2"></th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($dataWargaTpPkk as $index => $warga)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $index + 1 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $warga->no_registrasi }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $warga->nama_warga }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $warga->status_dalam_keluarga }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $warga->status_perkawinan }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-900 dark:text-white">{{ $warga->jenis_kelamin == 'Laki-laki' ? 'L' : '' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-900 dark:text-white">{{ $warga->jenis_kelamin == 'Perempuan' ? 'P' : '' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ \Carbon\Carbon::parse($warga->tanggal_lahir)->format('d-m-Y') }} / {{ $warga->umur }} tahun</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $warga->pendidikan }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $warga->pekerjaan }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">Tidak ada data warga</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    const rumahTanggaId = {{ $rumahTangga->id }};
    
    // Show/hide conditional fields on page load
    toggleConditionalFields();
    
    // Auto-populate data on page load
    $.get(`/data-keluarga-dasawisma/auto-populate/${rumahTanggaId}`)
        .done(function(data) {
            $('#rt_rw').val(data.rt_rw);
            $('#alamat').val(data.alamat);
            $('#nama_kepala_rumah_tangga').val(data.nama_kepala_rumah_tangga);
            $('#jumlah_anggota_keluarga').val(data.jumlah_anggota_keluarga);
            $('#laki_laki').val(data.laki_laki);
            $('#perempuan').val(data.perempuan);
            $('#jumlah_kk').val(data.jumlah_kk);
            $('#jumlah_balita').val(data.jumlah_balita);
            $('#wus').val(data.wus);
            $('#ibu_hamil').val(data.ibu_hamil);
            $('#ibu_menyusui').val(data.ibu_menyusui);
            $('#lansia').val(data.lansia);
        })
        .fail(function() {
            console.log('Auto-populate data not available');
        });
    
    // Handle conditional fields
    $('#mempunyai_jamban_keluarga').change(function() {
        toggleJambanField();
    });
    
    $('#sumber_air_keluarga').change(function() {
        toggleSumberAirField();
    });
    
    $('#aktifitas_up2k').change(function() {
        toggleJenisUsahaField();
    });
    
    function toggleConditionalFields() {
        toggleJambanField();
        toggleSumberAirField();
        toggleJenisUsahaField();
    }
    
    function toggleJambanField() {
        if ($('#mempunyai_jamban_keluarga').val() === 'Ya') {
            $('#jumlah_jamban_container').show();
        } else {
            $('#jumlah_jamban_container').hide();
            $('#jumlah_jamban').val('');
        }
    }
    
    function toggleSumberAirField() {
        if ($('#sumber_air_keluarga').val() === 'Lainnya') {
            $('#sumber_air_lainnya_container').show();
        } else {
            $('#sumber_air_lainnya_container').hide();
            $('#sumber_air_lainnya').val('');
        }
    }
    
    function toggleJenisUsahaField() {
        if ($('#aktifitas_up2k').val() === 'Ya') {
            $('#jenis_usaha_container').show();
        } else {
            $('#jenis_usaha_container').hide();
            $('#jenis_usaha').val('');
        }
    }
    
    // Form submission
    $('#dataKeluargaDasawismaForm').submit(function(e) {
        e.preventDefault();
        
        const formData = $(this).serialize();
        
        $.post(`/data-keluarga-dasawisma/${rumahTanggaId}`, formData)
            .done(function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        // Reload page to show updated data
                        location.reload();
                    });
                }
            })
            .fail(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');
                }
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: errorMessage
                });
            });
    });
});
</script>
@endpush