@extends('layouts.app')

@section('title', 'Pendataan PHBS')

@section('content')
<div class="max-w-5xl mx-auto px-4 py-6">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Pendataan PHBS</h1>

  <form id="phbsForm" class="space-y-6 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
    <!-- 1. Nama Anggota Keluarga -->
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Anggota Keluarga</label>
      <div class="flex items-center gap-3">
        <button type="button" id="btnPilihAnggota" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
          <i class="fas fa-user-check mr-2"></i>Pilih Warga
        </button>
        <span class="text-sm text-gray-500 dark:text-gray-400">Dapat memilih banyak warga sekaligus berdasarkan filter</span>
      </div>
      <div class="mt-2">
        <button type="button" id="btnClearSelection" class="inline-flex items-center px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-xs font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
          <i class="fas fa-user-times mr-2"></i>Hapus Warga Terpilih
        </button>
      </div>
      <input type="hidden" name="penduduk_ids[]" id="pendudukIds">
      <div id="selectedAnggota" class="mt-3 flex flex-wrap gap-2"></div>
    </div>

    <!-- 2. Usia (otomatis) -->
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Usia (otomatis)</label>
      <div id="usiaSummary" class="text-sm text-gray-700 dark:text-gray-300">Belum ada anggota dipilih.</div>
    </div>

    <!-- Persalinan (muncul jika ada perempuan >15 th) -->
    <div id="sectionPersalinan" class="hidden border-t pt-4">
      <h3 class="text-md font-semibold text-gray-800 dark:text-white mb-3">Persalinan</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Ibu bersalin</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="ibu_bersalin" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="ibu_bersalin" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Linakes</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="linakes" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="linakes" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
        </div>
      </div>
      <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Bagian ini hanya disimpan untuk anggota perempuan usia ≥15 tahun.</p>
    </div>

    <!-- Pemberian ASI Eksklusif -->
    <div id="sectionAsi" class="border-t pt-4">
      <h3 class="text-md font-semibold text-gray-800 dark:text-white mb-3">Pemberian ASI Eksklusif</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div id="fieldAsiSaja" class="hidden">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">ASI saja</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="asi_saja" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="asi_saja" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Muncul jika ada anggota usia < 6 bulan.</p>
        </div>
        <div id="fieldLulusAsi" class="hidden">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Lulus ASI</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="lulus_asi" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="lulus_asi" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Muncul jika ada anggota usia 6–12 bulan.</p>
        </div>
      </div>
    </div>

    <!-- Menimbang & indikator PHBS -->
    <div class="border-t pt-4">
      <h3 class="text-md font-semibold text-gray-800 dark:text-white mb-3">Indikator PHBS</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Ditimbang rutin</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="ditimbang_rutin" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="ditimbang_rutin" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Menggunakan Air Bersih</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="air_bersih" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="air_bersih" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
        </div>
        <div id="fieldCuciTanganBenar" class="hidden">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cuci tangan benar</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="cuci_tangan_benar" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="cuci_tangan_benar" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Muncul jika ada anggota usia ≥10 tahun.</p>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Jamban Sehat</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="jamban_sehat" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="jamban_sehat" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
        </div>
        <div id="fieldBerantasJentik" class="hidden">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Berantas jentik nyamuk</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="berantas_jentik" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="berantas_jentik" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Muncul jika ada anggota usia ≥10 tahun.</p>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Konsumsi buah/sayur</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="konsumsi_buah_sayur" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="konsumsi_buah_sayur" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
        </div>
        <div id="fieldAktifitasFisik" class="hidden">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Aktifitas fisik</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="aktifitas_fisik" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="aktifitas_fisik" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Muncul jika ada anggota usia ≥10 tahun.</p>
        </div>
        <div id="fieldTidakMerokok" class="hidden">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tidak merokok</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="tidak_merokok" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="tidak_merokok" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Muncul jika ada anggota usia ≥10 tahun.</p>
        </div>
      </div>
    </div>

    <!-- Tambahan usia >=15 -->
    <div id="sectionCekRutin" class="hidden border-t pt-4">
      <h3 class="text-md font-semibold text-gray-800 dark:text-white mb-3">Cek Kesehatan Rutin</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cek Tekanan Darah (≥1x/tahun)</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="cek_tekanan_darah" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="cek_tekanan_darah" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cek Gula Darah (≥1x/tahun)</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="cek_gula_darah" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="cek_gula_darah" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
        </div>
      </div>
      <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Muncul jika ada anggota usia ≥15 tahun.</p>
    </div>

    <!-- Status Rumah Tangga & Perilaku Hidup Sehat -->
    <div class="border-t pt-4">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status Rumah Tangga</label>
          <select name="status_rumah_tangga" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">-- Pilih --</option>
            <option value="Sehat">Sehat</option>
            <option value="Tidak Sehat">Tidak Sehat</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Perilaku Hidup Sehat</label>
          <div class="flex items-center gap-4">
            <label class="inline-flex items-center"><input type="radio" name="perilaku_hidup_sehat" value="1" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Ya</span></label>
            <label class="inline-flex items-center"><input type="radio" name="perilaku_hidup_sehat" value="0" class="text-blue-600"><span class="ml-2 text-gray-800 dark:text-gray-200">Tidak</span></label>
          </div>
        </div>
      </div>
    </div>

    <!-- Aksi -->
    <div class="pt-4 flex items-center gap-3">
      <button type="button" id="btnSimpanPhbs" class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
        <i class="fas fa-save mr-2"></i>Simpan
      </button>
      <span class="text-sm text-gray-500 dark:text-gray-400">Jawaban akan disimpan untuk semua anggota yang dipilih (hanya field yang relevan per usia/jenis kelamin).</span>
    </div>
  </form>

  <!-- Modal pilih anggota -->
  <div id="modalAnggota" class="fixed inset-0 bg-black bg-opacity-50 hidden z-40">
    <div class="max-w-3xl mx-auto mt-16 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Pilih Anggota Keluarga</h3>
        <button id="btnCloseModal" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white"><i class="fas fa-times"></i></button>
      </div>
      <div class="px-6 py-4 space-y-4">
        <!-- Filter -->
        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
          <label class="inline-flex items-center text-sm"><input type="checkbox" id="filterUnder6"><span class="ml-2 text-gray-800 dark:text-gray-200">Dibawah 6 bulan</span></label>
          <label class="inline-flex items-center text-sm"><input type="checkbox" id="filter6to12"><span class="ml-2 text-gray-800 dark:text-gray-200">Usia 6–12 bulan</span></label>
          <label class="inline-flex items-center text-sm"><input type="checkbox" id="filterFemale"><span class="ml-2 text-gray-800 dark:text-gray-200">Perempuan</span></label>
          <label class="inline-flex items-center text-sm"><input type="checkbox" id="filterAbove10"><span class="ml-2 text-gray-800 dark:text-gray-200">Usia ≥10 tahun</span></label>
          <label class="inline-flex items-center text-sm"><input type="checkbox" id="filterAbove15"><span class="ml-2 text-gray-800 dark:text-gray-200">Usia ≥15 tahun</span></label>
        </div>
        <!-- Pencarian nama -->
        <div>
          <div class="relative">
            <span class="absolute inset-y-0 left-2 flex items-center text-gray-400"><i class="fas fa-search"></i></span>
            <input type="text" id="searchPendudukInput" class="w-full pl-8 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Cari nama penduduk...">
          </div>
        </div>
        <div class="flex items-center justify-between">
          <div class="text-sm text-gray-600 dark:text-gray-300" id="resultCount">-</div>
          <div class="flex items-center gap-3">
            <label class="inline-flex items-center text-sm"><input type="checkbox" id="checkAll"><span class="ml-2 text-gray-800 dark:text-gray-200">Pilih semua</span></label>
            <button type="button" id="btnApplySelection" class="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-md">Pilih</button>
          </div>
        </div>
        <!-- List -->
        <div class="max-h-80 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded">
          <table class="min-w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th class="px-3 py-2 text-left text-gray-800 dark:text-gray-200">Nama</th>
                <th class="px-3 py-2 text-left text-gray-800 dark:text-gray-200">JK</th>
                <th class="px-3 py-2 text-left text-gray-800 dark:text-gray-200">Usia</th>
                <th class="px-3 py-2 text-left text-gray-800 dark:text-gray-200">No KK</th>
                <th class="px-3 py-2 text-left text-gray-800 dark:text-gray-200">Pilih</th>
              </tr>
            </thead>
            <tbody id="pendudukTable" class="divide-y divide-gray-200 dark:divide-gray-700"></tbody>
          </table>
        </div>
      </div>
      <div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end">
        <button id="btnCancelModal" class="px-3 py-2 bg-gray-600 hover:bg-gray-700 text-white text-sm rounded-md">Batal</button>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const modal = document.getElementById('modalAnggota');
  const btnOpen = document.getElementById('btnPilihAnggota');
  const btnClose = document.getElementById('btnCloseModal');
  const btnCancel = document.getElementById('btnCancelModal');
  const btnApply = document.getElementById('btnApplySelection');
  const btnClear = document.getElementById('btnClearSelection');
  const pendudukTable = document.getElementById('pendudukTable');
  const checkAll = document.getElementById('checkAll');
  const resultCount = document.getElementById('resultCount');
  const selectedAnggota = document.getElementById('selectedAnggota');
  const usiaSummary = document.getElementById('usiaSummary');
  const pendudukIdsInput = document.getElementById('pendudukIds');

  const filterUnder6 = document.getElementById('filterUnder6');
  const filter6to12 = document.getElementById('filter6to12');
  const filterFemale = document.getElementById('filterFemale');
  const filterAbove10 = document.getElementById('filterAbove10');
  const filterAbove15 = document.getElementById('filterAbove15');
  const searchInput = document.getElementById('searchPendudukInput');

  let fetched = [];
  let selected = [];
  let searchQuery = '';

  function openModal() { modal.classList.remove('hidden'); fetchPenduduk(); }
  function closeModal() { modal.classList.add('hidden'); }

  btnOpen.addEventListener('click', openModal);
  btnClose.addEventListener('click', closeModal);
  btnCancel.addEventListener('click', closeModal);
  btnClear.addEventListener('click', function(){ selected = []; updateSelectedUI(); });

  [filterUnder6, filter6to12, filterFemale, filterAbove10, filterAbove15].forEach(el => {
    el.addEventListener('change', fetchPenduduk);
  });

  // Debounce helper
  function debounce(fn, delay) {
    let t;
    return function(...args) {
      clearTimeout(t);
      t = setTimeout(() => fn.apply(this, args), delay);
    };
  }

  // Pencarian nama (autosearch)
  searchInput.addEventListener('input', debounce(function(e){
    searchQuery = (e.target.value || '').trim();
    // Coba gunakan server-side filter jika tersedia
    fetchPenduduk();
  }, 250));

  checkAll.addEventListener('change', function() {
    const checkboxes = pendudukTable.querySelectorAll('input[type="checkbox"][data-id]');
    checkboxes.forEach(cb => { cb.checked = checkAll.checked; });
  });

  btnApply.addEventListener('click', function() {
    const checkboxes = pendudukTable.querySelectorAll('input[type="checkbox"][data-id]');
    const newlySelected = [];
    checkboxes.forEach(cb => { if (cb.checked) newlySelected.push(parseInt(cb.getAttribute('data-id'))); });
    // Tambahkan pilihan baru ke daftar sebelumnya (tanpa menghapus yang sudah ada)
    selected = Array.from(new Set([ ...selected, ...newlySelected ]));
    updateSelectedUI();
    closeModal();
  });

  function fetchPenduduk() {
    const params = new URLSearchParams();
    if (filterUnder6.checked) params.append('under_6_months', 'true');
    if (filter6to12.checked) params.append('age_6_12_months', 'true');
    if (filterFemale.checked) params.append('female', 'true');
    if (filterAbove10.checked) params.append('above_10_years', 'true');
    if (filterAbove15.checked) params.append('above_15_years', 'true');
    if (searchQuery) params.append('q', searchQuery);

    fetch(`{{ route('posyandu.phbs.search-penduduk') }}?` + params.toString())
      .then(res => res.json())
      .then(json => {
        fetched = json.data || [];
        // Fallback client-side filter jika backend tidak memproses q
        if (searchQuery) {
          const q = searchQuery.toLowerCase();
          fetched = fetched.filter(item => (item.nama_lengkap || '').toLowerCase().includes(q));
        }
        renderTable();
      })
      .catch(err => { console.error(err); });
  }

  function renderTable() {
    pendudukTable.innerHTML = '';
    resultCount.textContent = `Ditemukan ${fetched.length} penduduk`;
    fetched.forEach(item => {
      const umurStr = (item.umur_bulan != null && item.umur_bulan < 24)
        ? `${item.umur_bulan} bln`
        : `${item.umur_tahun ?? '-'} th`;
      const tr = document.createElement('tr');
      const checkedAttr = selected.includes(item.id) ? 'checked' : '';
      tr.innerHTML = `
        <td class="px-3 py-2 text-gray-800 dark:text-gray-100">${item.nama_lengkap}</td>
        <td class="px-3 py-2 text-gray-800 dark:text-gray-100">${item.jenis_kelamin}</td>
        <td class="px-3 py-2 text-gray-800 dark:text-gray-100">${umurStr}</td>
        <td class="px-3 py-2 text-gray-800 dark:text-gray-100">${item.nomor_kk || '-'}</td>
        <td class="px-3 py-2"><input type="checkbox" data-id="${item.id}" ${checkedAttr}></td>
      `;
      pendudukTable.appendChild(tr);
    });
  }

  function updateSelectedUI() {
    selectedAnggota.innerHTML = '';
    const selectedData = fetched.filter(x => selected.includes(x.id));
    if (selectedData.length === 0) {
      usiaSummary.textContent = 'Belum ada anggota dipilih.';
      pendudukIdsInput.value = '';
      toggleSections({ hasFemale15: false, hasUnder6: false, has6to12: false, hasAbove10: false, hasAbove15: false });
      return;
    }

    pendudukIdsInput.value = JSON.stringify(selected);
    let hasFemale15 = false, hasUnder6 = false, has6to12 = false, hasAbove10 = false, hasAbove15 = false;
    selectedData.forEach(item => {
      const umurStr = (item.umur_bulan != null && item.umur_bulan < 24)
        ? `${item.umur_bulan} bln`
        : `${item.umur_tahun ?? '-'} th`;
      const badge = document.createElement('span');
      badge.className = 'inline-flex items-center gap-2 px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-md text-xs';
      badge.innerHTML = `<span>${item.nama_lengkap} • ${umurStr} • ${item.jenis_kelamin}</span>
        <button type=\"button\" class=\"text-red-600 dark:text-red-400 hover:underline\" data-remove-id=\"${item.id}\">hapus</button>`;
      selectedAnggota.appendChild(badge);
      const btnRemove = badge.querySelector('[data-remove-id]');
      btnRemove.addEventListener('click', function(){
        selected = selected.filter(id => id !== item.id);
        updateSelectedUI();
      });

      if (item.jenis_kelamin === 'Perempuan' && (item.umur_tahun ?? -1) >= 15) hasFemale15 = true;
      if ((item.umur_bulan ?? 999) < 6) hasUnder6 = true;
      if ((item.umur_bulan ?? -1) >= 6 && (item.umur_bulan ?? -1) <= 12) has6to12 = true;
      if ((item.umur_tahun ?? -1) >= 10) hasAbove10 = true;
      if ((item.umur_tahun ?? -1) >= 15) hasAbove15 = true;
    });

    usiaSummary.textContent = `Dipilih ${selectedData.length} orang.`;
    toggleSections({ hasFemale15, hasUnder6, has6to12, hasAbove10, hasAbove15 });
  }

  function toggleSections(flags) {
    document.getElementById('sectionPersalinan').classList.toggle('hidden', !flags.hasFemale15);
    document.getElementById('fieldAsiSaja').classList.toggle('hidden', !flags.hasUnder6);
    document.getElementById('fieldLulusAsi').classList.toggle('hidden', !flags.has6to12);
    document.getElementById('fieldCuciTanganBenar').classList.toggle('hidden', !flags.hasAbove10);
    document.getElementById('fieldBerantasJentik').classList.toggle('hidden', !flags.hasAbove10);
    document.getElementById('fieldAktifitasFisik').classList.toggle('hidden', !flags.hasAbove10);
    document.getElementById('fieldTidakMerokok').classList.toggle('hidden', !flags.hasAbove10);
    document.getElementById('sectionCekRutin').classList.toggle('hidden', !flags.hasAbove15);
  }

  // Simpan
  document.getElementById('btnSimpanPhbs').addEventListener('click', function() {
    if (!selected.length) { alert('Silakan pilih minimal satu anggota.'); return; }
    const form = document.getElementById('phbsForm');
    const formData = new FormData(form);

    // Parse selected IDs from hidden input JSON
    formData.delete('penduduk_ids[]');
    selected.forEach(id => formData.append('penduduk_ids[]', id));

    fetch(`{{ route('posyandu.phbs.store') }}`, {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
        'Accept': 'application/json'
      },
      body: formData,
    })
    .then(async res => {
      const ct = res.headers.get('content-type') || '';
      if (!res.ok) {
        // Coba parse JSON jika tersedia, jika tidak ambil text
        if (ct.includes('application/json')) {
          const errJson = await res.json();
          const msg = errJson.message || 'Gagal menyimpan.';
          throw new Error(msg);
        } else {
          const errText = await res.text();
          throw new Error(errText || 'Gagal menyimpan (non-JSON response).');
        }
      }
      if (ct.includes('application/json')) {
        return res.json();
      } else {
        // Jika server mengembalikan non-JSON, anggap gagal
        const txt = await res.text();
        throw new Error(txt || 'Respons tidak berformat JSON.');
      }
    })
    .then(json => {
      if (json.status === 'ok') {
        alert(`Berhasil menyimpan untuk ${json.count} anggota.`);
        form.reset();
        selected = []; updateSelectedUI();
      } else {
        alert('Gagal menyimpan.');
      }
    })
    .catch(err => { console.error(err); alert(`Terjadi kesalahan saat menyimpan: ${err.message}`); });
  });
});
</script>
@endsection