@extends('layouts.app')

@section('title', 'Dasa Wisma')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 transition-colors duration-200">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Dasa Wisma</h3>
        </div>
        <div class="p-6">
            <!-- Tab Navigation -->
            <div class="border-b border-gray-200 dark:border-gray-700" id="dasaWismaTabs">
                <nav class="-mb-px flex space-x-8">
                    <button class="py-2 px-1 border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 font-medium text-sm flex items-center" id="data-dasawisma-tab" data-target="#data-dasawisma" type="button" role="tab" aria-controls="data-dasawisma" aria-selected="true">
                        <i class="fas fa-home mr-2"></i>Data Dasawisma
                    </button>
                    <button class="py-2 px-1 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 font-medium text-sm flex items-center" id="tp-pkk-tab" data-target="#tp-pkk" type="button" role="tab" aria-controls="tp-pkk" aria-selected="false">
                        <i class="fas fa-users mr-2"></i>Kelompok Dasawisma
                    </button>
                    <button class="py-2 px-1 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 font-medium text-sm flex items-center" id="kelahiran-kematian-tab" data-target="#kelahiran-kematian" type="button" role="tab" aria-controls="kelahiran-kematian" aria-selected="false">
                        <i class="fas fa-heartbeat mr-2"></i>Hamil, Lahir & Meninggal
                    </button>
                </nav>
            </div>

            <!-- Tab Content -->
            <div class="mt-6" id="dasaWismaTabsContent">
                <!-- Tab Kelompok Dasawisma -->
                <div class="hidden" id="tp-pkk" role="tabpanel" aria-labelledby="tp-pkk-tab">
                    @if(auth()->user()->entity->name === 'rt')
                    <!-- Form Input -->
                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-6">
                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                            <h5 class="text-base font-medium text-gray-900 dark:text-white">Tambah Kelompok Dasawisma</h5>
                        </div>
                        <div class="p-4">
                            <form id="kelompokDasawismaForm">
                                @csrf
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div>
                                        <label for="nama_kelompok" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Kelompok Dasawisma</label>
                                        <input type="text" id="nama_kelompok" name="nama_kelompok" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" required>
                                    </div>
                                    <div>
                                        <label for="alamat" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Alamat</label>
                                        <input type="text" id="alamat" name="alamat" value="{{ auth()->user()->entity->nama }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" required>
                                    </div>
                                    <div>
                                        <label for="ketua" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Ketua</label>
                                        <select id="ketua" name="ketua" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" required>
                                            <option value="">Pilih Ketua...</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mt-4 flex justify-end">
                                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out">
                                        <i class="fas fa-plus mr-2"></i>Tambah Kelompok
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    @endif

                    <!-- Tabel Data -->
                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                            <h5 class="text-base font-medium text-gray-900 dark:text-white">Data Kelompok Dasawisma</h5>
                        </div>
                        <div class="p-4">
                            @if($kelompokDasawisma->count() > 0)
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700" id="kelompokTable">
                                    <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">Nama Kelompok</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Alamat</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Ketua</th>
                                            <th class="px-6 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">
                                        @foreach($kelompokDasawisma as $index => $kelompok)
                                        <tr>
                                            <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">{{ $kelompok->nama_kelompok }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $kelompok->alamat }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                                                @php
                                                    // Extract nama from ketua string (format: "Nama (NIK: xxxxx)")
                                                    $namaKetua = preg_replace('/\s*\(NIK:.*\)/', '', $kelompok->ketua);
                                                @endphp
                                                {{ $namaKetua }}
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                @if(auth()->user()->entity->name === 'rt')
                                                <button onclick="console.log('Edit button clicked for ID:', {{ $kelompok->id }}); editKelompok({{ $kelompok->id }}, {{ json_encode($kelompok->nama_kelompok) }}, {{ json_encode($kelompok->alamat) }}, {{ json_encode($kelompok->ketua) }})" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">
                                                    <i class="fas fa-edit"></i> Edit
                                                </button>
                                                <button onclick="deleteKelompok({{ $kelompok->id }}, {{ json_encode($kelompok->nama_kelompok) }})" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
                                                    <i class="fas fa-trash"></i> Hapus
                                                </button>
                                                @else
                                                <span class="text-gray-400 text-sm">-</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @else
                            <div class="text-center py-8">
                                <i class="fas fa-users fa-4x text-gray-400 dark:text-gray-500 mb-4"></i>
                                <h4 class="text-lg font-medium text-gray-600 dark:text-gray-400 mb-2">Belum Ada Data Kelompok Dasawisma</h4>
                                <p class="text-gray-500 dark:text-gray-500">@if(auth()->user()->entity->name === 'rt') Silakan tambahkan kelompok dasawisma baru menggunakan form di atas @else Data akan ditampilkan setelah RT menambahkan kelompok dasawisma @endif</p>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Tab Data Dasawisma -->
                <div class="" id="data-dasawisma" role="tabpanel" aria-labelledby="data-dasawisma-tab">
                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                            <h5 class="text-base font-medium text-gray-900 dark:text-white">Data Dasawisma Per {{ auth()->user()->entity->display_name }}</h5>
                        </div>
                        <div class="p-4">
                            <!-- Table Data Dasawisma -->
                            <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 scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">No</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">R.Tangga</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Warga</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Keluarga</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Dasawisma</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Alamat</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Ketua</th>
                                            <th scope="col" class="px-6 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">
                                        @forelse($kelompokDasawisma as $index => $kelompok)
                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $index + 1 }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                @php
                                                    $jumlahRumahTangga = $kelompok->rumahTanggaDasawisma->count();
                                                @endphp
                                                <button onclick="goToRumahTangga({{ $kelompok->id }})" 
                                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium 
                                                               {{ $jumlahRumahTangga > 0 ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
                                                    {{ $jumlahRumahTangga }}
                                                </button>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                                                @php
                                                    $totalWarga = 0;
                                                    foreach($kelompok->rumahTanggaDasawisma as $rumahTangga) {
                                                        $totalWarga += $rumahTangga->dataWargaTpPkk->count();
                                                    }
                                                @endphp
                                                {{ $totalWarga }}
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                                @php
                                    // Calculate total unique KK count for all rumah tangga in this kelompok
                                    $totalUniqueKK = 0;
                                    foreach($kelompok->rumahTanggaDasawisma as $rumahTangga) {
                                        $uniqueKKCount = $rumahTangga->dataWargaTpPkk->pluck('no_ktp')
                                            ->map(function($nik) {
                                                // Get nomor_kk from Penduduk table using NIK
                                                $penduduk = \App\Models\Penduduk::where('nik', $nik)->first();
                                                return $penduduk ? $penduduk->nomor_kk : null;
                                            })
                                            ->filter() // Remove null values
                                            ->unique()
                                            ->count();
                                        $totalUniqueKK += $uniqueKKCount;
                                    }
                                @endphp
                                {{ $totalUniqueKK }}
                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $kelompok->nama_kelompok }}</td>
                                            <td class="px-6 py-4 text-sm text-gray-900 dark:text-white">{{ $kelompok->alamat }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                                                @php
                                                    // Extract nama from ketua string (format: "Nama (NIK: xxxxx)")
                                                    $namaKetua = preg_replace('/\s*\(NIK:.*\)/', '', $kelompok->ketua);
                                                @endphp
                                                {{ $namaKetua }}
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                @if(auth()->user()->entity->name === 'rt')
                                                <div class="flex space-x-2">
                                                    <button onclick="editRumahTangga({{ $kelompok->id }})" 
                                                            class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button onclick="deleteRumahTangga({{ $kelompok->id }})" 
                                                            class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                                @else
                                                <span class="text-gray-400 dark:text-gray-500">-</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="8" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                                                Belum ada data kelompok dasawisma
                                            </td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tab Kelahiran & Kematian -->
                <div class="hidden" id="kelahiran-kematian" role="tabpanel" aria-labelledby="kelahiran-kematian-tab">
                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                            <h5 class="text-base font-medium text-gray-900 dark:text-white">Catatan Kehamilan, Kelahiran dan Kematian</h5>
                        </div>
                        <div class="p-4">
                            <form id="kelahiranKematianForm">
                                @csrf
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <!-- Kelompok Dasawisma -->
                                    <div>
                                        <label for="kk_kelompok" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kelompok Dasawisma</label>
                                        <select id="kk_kelompok" name="kelompok_dasawisma_id" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" required>
                                            <option value="">Pilih Kelompok...</option>
                                            @foreach($kelompokDasawisma as $kelompok)
                                                <option value="{{ $kelompok->id }}">{{ $kelompok->nama_kelompok }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <!-- Jenis Input Data -->
                                    <div>
                                        <label for="kk_jenis_input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Input Data</label>
                                        <select id="kk_jenis_input" name="jenis_input" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" required>
                                            <option value="">Pilih Jenis...</option>
                                            <option value="kehamilan">Catatan Kehamilan, Melahirkan dan Nifas</option>
                                            <option value="kelahiran">Catatan Kelahiran</option>
                                            <option value="kematian">Catatan Kematian</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Fields: Catatan Kehamilan -->
                                <div id="kk-kehamilan-fields" class="mt-4 hidden">
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div>
                                            <label for="kk_nama_ibu" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Ibu</label>
                                            <select id="kk_nama_ibu" name="nama_ibu" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" ></select>
                                        </div>
                                        <div>
                                            <label for="kk_nama_suami" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Suami</label>
                                            <select id="kk_nama_suami" name="nama_suami" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" ></select>
                                        </div>
                                        <div>
                                            <label for="kk_status_kehamilan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</label>
                                            <select id="kk_status_kehamilan" name="status_kehamilan" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                                <option value="">Pilih Status...</option>
                                                <option value="Hamil">Hamil</option>
                                                <option value="Melahirkan">Melahirkan</option>
                                                <option value="Nifas">Nifas</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Fields: Catatan Kelahiran -->
                                <div id="kk-kelahiran-fields" class="mt-4 hidden">
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div>
                                            <label for="kk_nama_bayi" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Bayi</label>
                                            <input type="text" id="kk_nama_bayi" name="nama_bayi" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                        </div>
                                        <div>
                                            <label for="kk_jk_bayi" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Kelamin</label>
                                            <select id="kk_jk_bayi" name="jenis_kelamin_bayi" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                                <option value="">Pilih...</option>
                                                <option value="L">L</option>
                                                <option value="P">P</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label for="kk_tgl_lahir_bayi" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal Lahir</label>
                                            <input type="date" id="kk_tgl_lahir_bayi" name="tanggal_lahir_bayi" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                        </div>
                                        <div>
                                            <label for="kk_akta_bayi" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Akta Kelahiran</label>
                                            <select id="kk_akta_bayi" name="akta_kelahiran_bayi" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                                <option value="">Pilih...</option>
                                                <option value="Ada">Ada</option>
                                                <option value="Tidak">Tidak</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Fields: Catatan Kematian -->
                                <div id="kk-kematian-fields" class="mt-4 hidden">
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div>
                                            <label for="kk_jenis_kematian" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Catatan Kematian</label>
                                            <select id="kk_jenis_kematian" name="jenis_kematian" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                                <option value="">Pilih...</option>
                                                <option value="Ibu">Ibu</option>
                                                <option value="Bayi">Bayi</option>
                                                <option value="Balita">Balita</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label for="kk_nama_kematian" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Ibu/Bayi/Balita</label>
                                            <select id="kk_nama_kematian" name="nama_kematian" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"></select>
                                        </div>
                                        <div id="kk_status_kematian_container" class="hidden">
                                            <label for="kk_status_kematian" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status (untuk Ibu)</label>
                                            <select id="kk_status_kematian" name="status_kematian" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                                <option value="">Pilih Status...</option>
                                                <option value="Hamil">Hamil</option>
                                                <option value="Melahirkan">Melahirkan</option>
                                                <option value="Nifas">Nifas</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label for="kk_jk_kematian" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Kelamin</label>
                                            <select id="kk_jk_kematian" name="jenis_kelamin_kematian" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" disabled>
                                                <option value="">-</option>
                                                <option value="L">L</option>
                                                <option value="P">P</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label for="kk_tgl_meninggal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal Meninggal</label>
                                            <input type="date" id="kk_tgl_meninggal" name="tanggal_meninggal" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                        </div>
                                        <div class="md:col-span-3">
                                            <label for="kk_sebab_meninggal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sebab Meninggal</label>
                                            <input type="text" id="kk_sebab_meninggal" name="sebab_meninggal" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                        </div>
                                        <div class="md:col-span-3">
                                            <label for="kk_keterangan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Keterangan</label>
                                            <input type="text" id="kk_keterangan" name="keterangan" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-6 flex justify-end">
                                    <button id="kk_save_btn" type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out">
                                        <i class="fas fa-save mr-2"></i>Simpan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
console.log('SCRIPT TAG LOADED');
    // Declare editingId in global scope so it can be accessed by window functions
    window.editingId = null;
    
    $(document).ready(function() {
        console.log('Document ready - JavaScript loaded');
        console.log('editingId initialized:', window.editingId);
        
        // Monitor editingId changes
        let originalEditingId = window.editingId;
        setInterval(() => {
            if (window.editingId !== originalEditingId) {
                console.log('EDITINGID CHANGED DETECTED:', 'from', originalEditingId, 'to', window.editingId);
                originalEditingId = window.editingId;
            }
        }, 100);
    // Tab functionality
        $('#dasaWismaTabs button').on('click', function() {
            const target = $(this).data('target');
        
        // Remove active classes from all tabs
        $('#dasaWismaTabs button').removeClass('border-blue-500 text-blue-600 dark:text-blue-400')
                                 .addClass('border-transparent text-gray-500 dark:text-gray-400');
        
        // Add active classes to clicked tab
        $(this).removeClass('border-transparent text-gray-500 dark:text-gray-400')
               .addClass('border-blue-500 text-blue-600 dark:text-blue-400');
        
        // Hide all tab content
        $('#dasaWismaTabsContent > div').addClass('hidden');
        
        // Show target tab content
        $(target).removeClass('hidden');
        
        // Update aria-selected
        $('#dasaWismaTabs button').attr('aria-selected', 'false');
        $(this).attr('aria-selected', 'true');
    });

    // Initialize Select2 for autocomplete
    $('#ketua').select2({
        placeholder: 'Ketik nama atau NIK untuk mencari...',
        allowClear: true,
        minimumInputLength: 2,
        theme: 'default',
        width: '100%',
        ajax: {
            url: '/api/search-warga',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        templateResult: function(data) {
            if (data.loading) {
                return data.text;
            }
            return $('<div>' + data.nama_lengkap + '<br><small class="text-gray-500">NIK: ' + data.nik + ' - ' + data.alamat + '</small></div>');
        },
        templateSelection: function(data) {
            return data.nama_lengkap || data.text;
        }
    });

    // Custom styling for Select2 to match theme
    $('<style>').text(`
        .select2-container--default .select2-selection--single {
            height: 42px !important;
            border: 1px solid #d1d5db !important;
            border-radius: 0.375rem !important;
            padding: 0.5rem 0.75rem !important;
            background-color: white !important;
        }
        .dark .select2-container--default .select2-selection--single {
            background-color: #374151 !important;
            border-color: #4b5563 !important;
            color: white !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 26px !important;
            padding-left: 0 !important;
            color: inherit !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
            right: 8px !important;
        }
        .select2-dropdown {
            border: 1px solid #d1d5db !important;
            border-radius: 0.375rem !important;
        }
        .dark .select2-dropdown {
            background-color: #374151 !important;
            border-color: #4b5563 !important;
        }
        .select2-container--default .select2-results__option {
            padding: 8px 12px !important;
        }
        .dark .select2-container--default .select2-results__option {
            color: white !important;
        }
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #3b82f6 !important;
        }
        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #d1d5db !important;
            border-radius: 0.375rem !important;
            padding: 0.5rem !important;
        }
        .dark .select2-container--default .select2-search--dropdown .select2-search__field {
            background-color: #4b5563 !important;
            border-color: #6b7280 !important;
            color: white !important;
        }
    `).appendTo('head');

    // Form submission
    $('#kelompokDasawismaForm').on('submit', function(e) {
        e.preventDefault();
        
        console.log('=== FORM SUBMIT EVENT TRIGGERED ===');
        console.log('FORM SUBMIT - editingId at start:', window.editingId);
        console.log('FORM SUBMIT - typeof editingId:', typeof window.editingId);
        console.log('FORM SUBMIT - editingId === null:', window.editingId === null);
        
        // Prevent double submission
        const submitBtn = $(this).find('button[type="submit"]');
        if (submitBtn.prop('disabled')) {
            return false;
        }
        
        // Disable submit button
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...');
        
        const formData = {
            nama_kelompok: $('#nama_kelompok').val(),
            alamat: $('#alamat').val(),
            ketua: $('#ketua option:selected').text() || $('#ketua').val(),
            _token: $('input[name="_token"]').val()
        };
        
        console.log('=== AFTER FORM DATA CREATION ===');
        console.log('AFTER FORM DATA - editingId:', window.editingId);
        console.log('AFTER FORM DATA - typeof editingId:', typeof window.editingId);
        console.log('=== AFTER FORM DATA CREATION END ===');

        // Store editing status before making request
        console.log('=== BEFORE URL DETERMINATION ===');
        console.log('BEFORE URL DETERMINATION - editingId:', window.editingId);
        console.log('BEFORE URL DETERMINATION - typeof editingId:', typeof window.editingId);
        
        const isEditing = window.editingId !== null;
        const currentEditingId = window.editingId;
        
        console.log('AFTER STORING - currentEditingId:', currentEditingId);
        console.log('AFTER STORING - typeof currentEditingId:', typeof currentEditingId);
        console.log('=== BEFORE URL DETERMINATION END ===');
        
        console.log('=== URL DETERMINATION START ===');
        console.log('editingId value:', window.editingId);
        console.log('editingId type:', typeof window.editingId);
        console.log('editingId truthy check:', !!window.editingId);
        console.log('editingId !== null:', window.editingId !== null);
        
        const url = window.editingId ? `/api/kelompok-dasawisma/${window.editingId}` : '/api/kelompok-dasawisma';
        const method = window.editingId ? 'PUT' : 'POST';
        
        console.log('=== FINAL RESULTS ===');
        console.log('Final URL:', url);
        console.log('Final Method:', method);
        console.log('=== URL DETERMINATION END ===');
        
        console.log('DEBUG - editingId:', window.editingId);
        console.log('DEBUG - URL:', url);
        console.log('DEBUG - Method:', method);
        console.log('DEBUG - FormData:', formData);
        
        $.ajax({
            url: url,
            method: method,
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function(xhr, settings) {
                console.log('AJAX Request Details:', {
                    url: settings.url,
                    method: settings.type,
                    data: settings.data
                });
            },
            success: function(response) {
                if (response.success) {
                    // Show success message
                    showAlert('success', response.message);
                    
                    // Reset form
                    resetForm();
                    
                    // Reload page to update table
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                }
            },
            error: function(xhr) {
                // Re-enable submit button
                const originalText = isEditing ? '<i class="fas fa-save mr-2"></i>Update Kelompok' : '<i class="fas fa-plus mr-2"></i>Tambah Kelompok';
                submitBtn.prop('disabled', false).html(originalText);
                
                const errors = xhr.responseJSON?.errors || {};
                let errorMessage = 'Terjadi kesalahan: ';
                
                if (Object.keys(errors).length > 0) {
                    errorMessage += Object.values(errors).flat().join(', ');
                } else {
                    errorMessage += xhr.responseJSON?.message || 'Silakan coba lagi';
                }
                
                showAlert('error', errorMessage);
            }
        });
    });

    // Move functions inside document ready scope
    window.editKelompok = function(id, namaKelompok, alamat, ketua) {
        console.log('=== EDIT KELOMPOK FUNCTION CALLED ===');
        console.log('editKelompok called with ID:', id);
        console.log('editingId before set:', window.editingId);
        console.log('typeof editingId before:', typeof window.editingId);
        window.editingId = id;
        console.log('editingId after set:', window.editingId);
        console.log('typeof editingId after:', typeof window.editingId);
        console.log('editingId === id:', window.editingId === id);
        
        // Test if editingId persists
        setTimeout(() => {
            console.log('editingId after 1 second:', window.editingId);
        }, 1000);
        
        // Fill form with existing data
        $('#nama_kelompok').val(namaKelompok);
        $('#alamat').val(alamat);
        
        // Create option for ketua and select it
        const ketuaOption = new Option(ketua, ketua, true, true);
        $('#ketua').append(ketuaOption).trigger('change');
        
        // Change button text
        $('#kelompokDasawismaForm button[type="submit"]').html('<i class="fas fa-save mr-2"></i>Update Kelompok');
        
        // Scroll to form
        $('html, body').animate({
            scrollTop: $('#kelompokDasawismaForm').offset().top - 100
        }, 500);
    };

    function resetForm() {
        window.editingId = null;
        $('#kelompokDasawismaForm')[0].reset();
        $('#ketua').val(null).trigger('change');
        $('#alamat').val('{{ auth()->user()->entity->nama }}');
        $('#kelompokDasawismaForm button[type="submit"]').prop('disabled', false).html('<i class="fas fa-plus mr-2"></i>Tambah Kelompok');
    }

    window.deleteKelompok = function(id, namaKelompok) {
        if (confirm(`Apakah Anda yakin ingin menghapus kelompok "${namaKelompok}"?`)) {
            $.ajax({
                url: `/api/kelompok-dasawisma/${id}`,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    showAlert('success', response.message);
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                },
                error: function(xhr) {
                    const errorMessage = xhr.responseJSON?.message || 'Terjadi kesalahan saat menghapus data';
                    showAlert('error', errorMessage);
                }
            });
        }
    };

    // ====== Kelahiran & Kematian: Select2 and logic ======
    function initPendudukSelect(selector) {
        $(selector).select2({
            placeholder: 'Ketik nama untuk mencari...',
            allowClear: true,
            minimumInputLength: 2,
            theme: 'default',
            width: '100%',
            ajax: {
                url: '/data-warga-tp-pkk/search/penduduk',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return { q: params.term };
                },
                processResults: function (data) {
                    // Endpoint returns an array of objects with id and text
                    return { results: data };
                },
                cache: true
            }
        });
    }

    initPendudukSelect('#kk_nama_ibu');
    initPendudukSelect('#kk_nama_suami');
    initPendudukSelect('#kk_nama_kematian');

    // Toggle fields by jenis input
    $('#kk_jenis_input').on('change', function() {
        const val = $(this).val();
        $('#kk-kehamilan-fields, #kk-kelahiran-fields, #kk-kematian-fields').addClass('hidden');
        $('#kk_nama_ibu, #kk_nama_suami, #kk_status_kehamilan').prop('required', false);
        $('#kk_nama_bayi, #kk_jk_bayi, #kk_tgl_lahir_bayi, #kk_akta_bayi').prop('required', false);
        $('#kk_jenis_kematian, #kk_nama_kematian, #kk_tgl_meninggal').prop('required', false);

        if (val === 'kehamilan') {
            $('#kk-kehamilan-fields').removeClass('hidden');
            $('#kk_nama_ibu, #kk_nama_suami, #kk_status_kehamilan').prop('required', true);
        } else if (val === 'kelahiran') {
            $('#kk-kelahiran-fields').removeClass('hidden');
            $('#kk_nama_bayi, #kk_jk_bayi, #kk_tgl_lahir_bayi, #kk_akta_bayi').prop('required', true);
        } else if (val === 'kematian') {
            $('#kk-kematian-fields').removeClass('hidden');
            $('#kk_jenis_kematian, #kk_nama_kematian, #kk_tgl_meninggal').prop('required', true);
        }
    });

    // Show/hide status for kematian only when jenis kematian = Ibu
    $('#kk_jenis_kematian').on('change', function() {
        const v = $(this).val();
        if (v === 'Ibu') {
            $('#kk_status_kematian_container').removeClass('hidden');
            $('#kk_status_kematian').prop('required', true);
        } else {
            $('#kk_status_kematian_container').addClass('hidden');
            $('#kk_status_kematian').prop('required', false).val('');
        }
    });

    // Autofill jenis kelamin from selected penduduk
    $('#kk_nama_kematian').on('select2:select', function(e) {
        const data = e.params.data;
        const jk = (data.jenis_kelamin || '').toLowerCase();
        if (jk.includes('laki')) {
            $('#kk_jk_kematian').val('L');
        } else if (jk.includes('perempuan')) {
            $('#kk_jk_kematian').val('P');
        } else {
            $('#kk_jk_kematian').val('');
        }
    });

    // Handler Simpan untuk Kelahiran & Kematian
    $('#kk_save_btn').on('click', function() {
        const btn = $(this);
        if (btn.prop('disabled')) return;

        const payload = {
            _token: $('meta[name="csrf-token"]').attr('content') || $('input[name="_token"]').val(),
            kelompok_dasawisma_id: $('#kk_kelompok').val(),
            jenis_input: $('#kk_jenis_input').val()
        };

        if (!payload.kelompok_dasawisma_id || !payload.jenis_input) {
            showAlert('error', 'Kelompok dan Jenis Input wajib diisi.');
            return;
        }

        if (payload.jenis_input === 'kehamilan') {
            payload.nama_ibu_id = $('#kk_nama_ibu').val();
            payload.nama_suami_id = $('#kk_nama_suami').val();
            payload.status_kehamilan = $('#kk_status_kehamilan').val();
        } else if (payload.jenis_input === 'kelahiran') {
            payload.nama_bayi = $('#kk_nama_bayi').val();
            payload.jenis_kelamin_bayi = $('#kk_jk_bayi').val();
            payload.tanggal_lahir_bayi = $('#kk_tgl_lahir_bayi').val();
            payload.akta_kelahiran_bayi = $('#kk_akta_bayi').val();
        } else if (payload.jenis_input === 'kematian') {
            payload.jenis_kematian = $('#kk_jenis_kematian').val();
            payload.nama_kematian_id = $('#kk_nama_kematian').val();
            payload.status_kematian = $('#kk_status_kematian').val();
            payload.jenis_kelamin_kematian = $('#kk_jk_kematian').val();
            payload.tanggal_meninggal = $('#kk_tgl_meninggal').val();
            payload.sebab_meninggal = $('#kk_sebab_meninggal').val();
            payload.keterangan = $('#kk_keterangan').val();
        }

        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...');
        $.ajax({
            url: '/api/kelahiran-kematian',
            method: 'POST',
            data: payload,
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function(resp) {
                showAlert('success', resp.message || 'Data berhasil disimpan');
                btn.prop('disabled', false).html('<i class="fas fa-save mr-2"></i>Simpan');
            },
            error: function(xhr) {
                const msg = xhr.responseJSON?.message || 'Terjadi kesalahan saat menyimpan';
                showAlert('error', msg);
                btn.prop('disabled', false).html('<i class="fas fa-save mr-2"></i>Simpan');
            }
        });
    });

    // Dark mode styling for Select2 (re-use existing block)
    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'bg-green-100 border-green-400 text-green-700' : 'bg-red-100 border-red-400 text-red-700';
        const iconClass = type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';
        
        const alertHtml = `
            <div class="${alertClass} border px-4 py-3 rounded mb-4 flex items-center" role="alert">
                <i class="${iconClass} mr-2"></i>
                <span>${message}</span>
            </div>
        `;
        
        // Remove existing alerts
        $('.border.px-4.py-3.rounded.mb-4').remove();
        
        // Determine active tab and target container
        let targetContainer = '#kelompokDasawismaForm';
        if ($('#kelahiran-kematian').is(':visible')) {
            targetContainer = '#kelahiranKematianForm';
        }

        // Add new alert at the top of the active form
        $(targetContainer).prepend(alertHtml);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            $('.border.px-4.py-3.rounded.mb-4').fadeOut();
        }, 5000);
    }

    // Functions for Data Dasawisma table
    window.goToRumahTangga = function(kelompokId) {
        window.location.href = `/rumah-tangga-dasawisma/${kelompokId}`;
    };

    window.editRumahTangga = function(kelompokId) {
        // For now, redirect to rumah tangga page for editing
        window.location.href = `/rumah-tangga-dasawisma/${kelompokId}`;
    };

    window.deleteRumahTangga = function(kelompokId) {
        if (confirm('Apakah Anda yakin ingin menghapus semua data rumah tangga dari kelompok dasawisma ini?')) {
            $.ajax({
                url: `/api/rumah-tangga-dasawisma/kelompok/${kelompokId}`,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    showAlert('success', response.message || 'Data rumah tangga berhasil dihapus');
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                },
                error: function(xhr) {
                    const errorMessage = xhr.responseJSON?.message || 'Terjadi kesalahan saat menghapus data';
                    showAlert('error', errorMessage);
                }
            });
        }
    };

}); // Close document ready
</script>
@endpush
@endsection