<!-- Form Sekolah -->
<div id="sekolahModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 relative overflow-hidden">
    <div class="absolute top-[-15%] right-[-10%] w-64 h-64 bg-blue-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-8 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/30">
          <i class="fa-solid fa-school text-xl"></i>
        </div>
        <div>
          <h3 id="sekolahModalTitle" class="text-2xl font-black text-gray-800 tracking-tight">Tambah Sekolah</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Master Data Pendidikan</p>
        </div>
      </div>
      <button onclick="window.closeSekolahModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark fa-lg"></i></button>
    </div>

    <form id="sekolahForm" onsubmit="event.preventDefault(); window.handleSekolahSubmit();"
      class="space-y-5 relative z-10">
      <input type="hidden" id="sekolah_id"> <input type="hidden" id="sekolah_isEdit" value="false">
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Nama
          Sekolah</label>
        <input type="text" id="sekolah_nama"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Misal: SDN 1 Lhokseumawe" required>
      </div>
      <div class="relative" style="z-index: 9999;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Jenjang
          Pendidikan</label>
        <div class="relative custom-dropdown group" style="z-index: 9999;">
          <input type="hidden" id="sekolah_jenjang" value="SD">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl flex justify-between items-center dropdown-trigger font-bold text-sm text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text">SD Sederajat</span>
            <i
              class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 top-[105%] bg-white border border-gray-100 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden"
            style="z-index: 9999;">
            <div class="py-2">
              <div
                class="px-5 py-3 hover:bg-blue-50 cursor-pointer text-sm font-bold text-gray-700 transition-colors dropdown-item"
                data-value="TK">TK / PAUD Sederajat</div>
              <div
                class="px-5 py-3 hover:bg-blue-50 cursor-pointer text-sm font-bold text-gray-700 transition-colors dropdown-item"
                data-value="SD">SD Sederajat</div>
              <div
                class="px-5 py-3 hover:bg-blue-50 cursor-pointer text-sm font-bold text-gray-700 transition-colors dropdown-item"
                data-value="SMP">SMP Sederajat</div>
              <div
                class="px-5 py-3 hover:bg-blue-50 cursor-pointer text-sm font-bold text-gray-700 transition-colors dropdown-item"
                data-value="SMA">SMA Sederajat</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Alamat</label>
        <textarea id="sekolah_alamat" rows="2"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize resize-none"
          placeholder="Jalan, Desa, Kecamatan..."></textarea>
      </div>
      <div class="relative" style="z-index: 9998;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Status</label>
        <div class="relative custom-dropdown group" style="z-index: 9998;">
          <input type="hidden" id="sekolah_status" value="Aktif">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl flex justify-between items-center dropdown-trigger text-sm font-bold text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text">Aktif Beroperasi</span>
            <i
              class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 bottom-[100%] mb-2 bg-white border border-gray-100 rounded-2xl shadow-[0_-10px_40px_rgba(0,0,0,0.08)] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden"
            style="z-index: 9998;">
            <div class="py-2">
              <div
                class="px-5 py-3 hover:bg-blue-50 cursor-pointer text-sm font-bold text-gray-700 transition-colors dropdown-item"
                data-value="Aktif">Aktif Beroperasi</div>
              <div
                class="px-5 py-3 hover:bg-red-50 cursor-pointer text-sm font-bold text-red-500 transition-colors dropdown-item"
                data-value="Nonaktif">Nonaktif / Tutup</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pt-5 flex gap-4 border-t border-gray-100 mt-2">
        <button type="button" onclick="window.closeSekolahModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button type="submit"
          class="w-2/3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgb(59,130,246,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex justify-center items-center gap-2"><i
            class="fa-solid fa-floppy-disk"></i> Simpan Data</button>
      </div>
    </form>
  </div>
</div>

<!-- Form Posyandu -->
<div id="posyanduModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 relative overflow-hidden">
    <div class="absolute top-[-15%] right-[-10%] w-64 h-64 bg-rose-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-8 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-rose-500 to-pink-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-rose-500/30">
          <i class="fa-solid fa-house-medical text-xl"></i>
        </div>
        <div>
          <h3 id="posyanduModalTitle" class="text-2xl font-black text-gray-800 tracking-tight">Tambah Posyandu</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Master Data Kesehatan</p>
        </div>
      </div>
      <button onclick="window.closePosyanduModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark fa-lg"></i></button>
    </div>

    <form id="posyanduForm" onsubmit="event.preventDefault(); window.handlePosyanduSubmit();"
      class="space-y-5 relative z-10">
      <input type="hidden" id="posyandu_id"> <input type="hidden" id="posyandu_isEdit" value="false">
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Nama
          Posyandu</label>
        <input type="text" id="posyandu_nama"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Misal: Posyandu Melati 1" required>
      </div>
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Lokasi /
          Desa</label>
        <textarea id="posyandu_lokasi" rows="2"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize resize-none"
          placeholder="Jalan, Desa, Kecamatan..." required></textarea>
      </div>
      <div class="relative" style="z-index: 9998;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Status</label>
        <div class="relative custom-dropdown group" style="z-index: 9998;">
          <input type="hidden" id="posyandu_status" value="Aktif">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl flex justify-between items-center dropdown-trigger text-sm font-bold text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text">Aktif Beroperasi</span>
            <i
              class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 bottom-[100%] mb-2 bg-white border border-gray-100 rounded-2xl shadow-[0_-10px_40px_rgba(0,0,0,0.08)] z-[150] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden"
            style="z-index: 9998;">
            <div class="py-2">
              <div
                class="px-5 py-3 hover:bg-rose-50 cursor-pointer text-sm font-bold text-gray-700 transition-colors dropdown-item"
                data-value="Aktif">Aktif Beroperasi</div>
              <div
                class="px-5 py-3 hover:bg-red-50 cursor-pointer text-sm font-bold text-red-500 transition-colors dropdown-item"
                data-value="Nonaktif">Nonaktif / Tutup</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pt-5 flex gap-4 border-t border-gray-100 mt-2">
        <button type="button" onclick="window.closePosyanduModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button type="submit"
          class="w-2/3 bg-gradient-to-r from-rose-600 to-pink-600 hover:from-rose-700 hover:to-pink-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgb(225,29,72,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex justify-center items-center gap-2"><i
            class="fa-solid fa-floppy-disk"></i> Simpan Data</button>
      </div>
    </form>
  </div>
</div>

<!-- Form Siswa -->
<!-- === MODAL: RIWAYAT ANTROPOMETRI === -->
<div id="antropometriModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-4xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 max-h-[95vh] overflow-y-auto custom-scrollbar relative">
    <div class="absolute top-0 right-0 w-64 h-64 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none"></div>

    <div class="flex justify-between items-start mb-6 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
          <i class="fa-solid fa-chart-line text-xl"></i>
        </div>
        <div>
          <h3 id="antropometriModalTitle" class="text-2xl font-black text-gray-800 tracking-tight">Riwayat Pertumbuhan
          </h3>
          <p id="antropometriModalSubtitle" class="text-xs font-bold text-gray-400 uppercase tracking-widest mt-1">
            Nama Siswa/Balita</p>
        </div>
      </div>
      <button onclick="window.closeAntropometriModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark fa-lg"></i></button>
    </div>

    <div class="relative z-[20] flex flex-col lg:flex-row gap-6 mb-6">
      <!-- Area Kiri: Chart -->
      <div class="flex-1 bg-white border border-gray-100 shadow-sm rounded-3xl p-5">
        <canvas id="personalGrowthChart" style="width: 100%; max-height: 250px;"></canvas>
      </div>
      <!-- Area Kanan: Form Input Baru -->
      <div class="w-full lg:w-1/3 bg-gray-50 border border-gray-100 rounded-3xl p-5 flex flex-col justify-center">
        <h5 class="text-sm font-black text-gray-700 uppercase tracking-wide mb-4 border-b border-gray-200 pb-2"><i
            class="fa-solid fa-plus mr-1"></i> Tambah Pengukuran</h5>
        <input type="hidden" id="antro_entity_id">
        <input type="hidden" id="antro_entity_type">
        <div class="mb-3">
          <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1">Tanggal</label>
          <input type="text" id="antro_tgl"
            class="datepicker w-full px-4 py-2.5 bg-white border border-gray-200 rounded-xl text-xs outline-none"
            required>
        </div>
        <div class="flex gap-2 mb-4">
          <div class="flex-1">
            <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1">TB (cm)</label>
            <input type="number" step="0.1" id="antro_tb"
              class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-xl text-xs outline-none" placeholder="0"
              required>
          </div>
          <div class="flex-1">
            <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1">BB (kg)</label>
            <input type="number" step="0.1" id="antro_bb"
              class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-xl text-xs outline-none" placeholder="0"
              required>
          </div>
        </div>
        <button onclick="window.saveAntropometri()"
          class="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-bold text-xs py-3 rounded-xl shadow-md transition-all shadow-emerald-500/30 uppercase tracking-wider">Simpan
          Data</button>
      </div>
    </div>

    <!-- Tabel Log History -->
    <div class="relative z-10 overflow-hidden border border-gray-100 rounded-2xl bg-white">
      <div class="max-h-[200px] overflow-y-auto custom-scrollbar">
        <table class="w-full text-left border-collapse">
          <thead class="bg-gray-50 text-[10px] font-black text-gray-400 uppercase tracking-widest sticky top-0">
            <tr>
              <th class="p-3 border-b border-gray-100">Tanggal Pengukuran</th>
              <th class="p-3 border-b border-gray-100">Tinggi Badan (cm)</th>
              <th class="p-3 border-b border-gray-100">Berat Badan (kg)</th>
              <th class="p-3 border-b border-gray-100 text-right">Aksi</th>
            </tr>
          </thead>
          <tbody id="antropometriTableBody" class="text-sm text-gray-700 divide-y divide-gray-50">
            <!-- Render otomatis -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Form Penerima Manfaat (Unified: Siswa + Guru + Staf) -->
<div id="penerimaModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-3xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 max-h-[95vh] overflow-y-auto custom-scrollbar relative">
    <div class="absolute top-[-10%] right-[-5%] w-64 h-64 bg-blue-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="absolute bottom-[-10%] left-[-5%] w-64 h-64 bg-indigo-400/10 rounded-full blur-3xl pointer-events-none">
    </div>

    <div class="flex justify-between items-start mb-8 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-blue-500 to-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/30">
          <i class="fa-solid fa-user-plus text-xl"></i>
        </div>
        <div>
          <h3 id="penerimaModalTitle" class="text-2xl font-black text-gray-800 tracking-tight">Tambah Penerima Manfaat</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Formulir Data Penerima Manfaat</p>
        </div>
      </div>
      <button onclick="window.closePenerimaModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark fa-lg"></i></button>
    </div>

    <form id="penerimaForm" onsubmit="event.preventDefault(); window.handlePenerimaSubmit();"
      class="grid grid-cols-1 md:grid-cols-2 gap-5 relative z-10">
      <input type="hidden" id="penerima_id"> <input type="hidden" id="penerima_isEdit" value="false">

      <!-- Jabatan Kode (menentukan field yang tampil) -->
      <div class="col-span-1 md:col-span-2 relative" style="z-index: 9999;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Kategori Penerima</label>
        <div class="relative custom-dropdown group" style="z-index: 9999;">
          <input type="hidden" id="penerima_jabatan_kode" value="1">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl flex justify-between items-center dropdown-trigger font-bold text-sm text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text"><i class="fa-solid fa-user-graduate mr-2 text-blue-500"></i> Siswa — Penerima Utama</span>
            <i class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 top-[105%] bg-white border border-gray-100 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden"
            style="z-index: 9999;">
            <div class="py-2">
              <div class="px-5 py-3 hover:bg-blue-50 cursor-pointer text-sm font-bold text-blue-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="1" onclick="if(window._onJabatanKodeChange) window._onJabatanKodeChange('1')"><i class="fa-solid fa-user-graduate"></i> Siswa — Penerima Utama</div>
              <div class="px-5 py-3 hover:bg-amber-50 cursor-pointer text-sm font-bold text-amber-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="2" onclick="if(window._onJabatanKodeChange) window._onJabatanKodeChange('2')"><i class="fa-solid fa-chalkboard-user"></i> Guru & Kepala Sekolah</div>
              <div class="px-5 py-3 hover:bg-violet-50 cursor-pointer text-sm font-bold text-violet-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="3" onclick="if(window._onJabatanKodeChange) window._onJabatanKodeChange('3')"><i class="fa-solid fa-user-tie"></i> Staf Lainnya</div>
            </div>
          </div>
        </div>
      </div>

      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">NISN</label>
        <input type="text" id="penerima_nisn"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 uppercase"
          placeholder="Nomor Induk Siswa Nasional">
      </div>
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Nama Penerima Manfaat <span class="text-red-400">*</span></label>
        <input type="text" id="penerima_nama"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Ketik nama lengkap" required>
      </div>

      <div class="relative" style="z-index: 9997;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Jenis Kelamin <span class="text-[9px] text-gray-400 normal-case">(L=392, P=64)</span></label>
        <div class="relative custom-dropdown group" style="z-index: 9997;">
          <input type="hidden" id="penerima_jk" value="L">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl flex justify-between items-center dropdown-trigger font-bold text-sm text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text"><i class="fa-solid fa-mars text-blue-500 mr-1"></i> Laki-Laki (Kode 392)</span>
            <i class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 top-[105%] bg-white border border-gray-100 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden"
            style="z-index: 9997;">
            <div class="py-2">
              <div class="px-5 py-3 hover:bg-blue-50 cursor-pointer text-sm font-bold text-blue-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="L"><i class="fa-solid fa-mars"></i> Laki-Laki (Kode 392)</div>
              <div class="px-5 py-3 hover:bg-pink-50 cursor-pointer text-sm font-bold text-pink-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="P"><i class="fa-solid fa-venus"></i> Perempuan (Kode 64)</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Tanggal Lahir <span class="text-[9px] text-gray-400 normal-case">(DD-MM-YYYY)</span> <span class="text-red-400">*</span></label>
        <input type="text" id="penerima_tgl"
          class="datepicker w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 text-gray-700"
          placeholder="Pilih tanggal lahir" required>
      </div>

      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Nama Orang Tua</label>
        <input type="text" id="penerima_nama_orangtua"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Nama orang tua / wali">
      </div>

      <!-- Posisi Detail (hanya tampil untuk kode 2 & 3) -->
      <div id="penerima_jabatan_detail_container" class="relative" style="z-index: 9996; display: none;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Posisi Detail</label>
        <div class="relative custom-dropdown group" style="z-index: 9996;">
          <input type="hidden" id="penerima_jabatan" value="Guru Kelas">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-amber-400 focus:ring-4 focus:ring-amber-500/20 rounded-2xl flex justify-between items-center dropdown-trigger font-bold text-sm text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text">Guru Kelas</span>
            <i class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 top-[105%] bg-white border border-gray-100 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden max-h-48 overflow-y-auto custom-scrollbar"
            style="z-index: 9996;">
            <div class="py-2" id="penerimaJabatanMenu"></div>
          </div>
        </div>
      </div>

      <!-- Kelas (hanya tampil untuk siswa) -->
      <div id="penerima_kelas_container">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Kelas</label>
        <input type="text" id="penerima_kelas"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 uppercase"
          placeholder="Misal: 1, 2, 3A...">
      </div>

      <!-- Status -->
      <div class="relative" style="z-index: 9995;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Status <span class="text-[9px] text-gray-400 normal-case">(true=Aktif, false=Nonaktif)</span></label>
        <div class="relative custom-dropdown group" style="z-index: 9995;">
          <input type="hidden" id="penerima_status" value="Aktif">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl flex justify-between items-center dropdown-trigger font-bold text-sm text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text">Aktif (Kode true)</span>
            <i class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 bottom-[100%] mb-2 bg-white border border-gray-100 rounded-2xl shadow-[0_-10px_40px_rgba(0,0,0,0.08)] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden"
            style="z-index: 9995;">
            <div class="py-2">
              <div class="px-5 py-3 hover:bg-emerald-50 cursor-pointer text-sm font-bold text-emerald-600 transition-colors dropdown-item"
                data-value="Aktif">Aktif (Kode true)</div>
              <div class="px-5 py-3 hover:bg-red-50 cursor-pointer text-sm font-bold text-red-500 transition-colors dropdown-item"
                data-value="Nonaktif">Tidak Aktif (Kode false)</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Fisik: TB + BB (hanya tampil untuk siswa) -->
      <div id="penerima_fisik_container" class="col-span-1 md:col-span-2 grid grid-cols-2 gap-5">
        <div>
          <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Tinggi Badan</label>
          <div class="relative">
            <input type="number" step="any" id="penerima_tb"
              class="w-full pl-5 pr-12 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
              placeholder="0">
            <span class="absolute right-4 top-4 text-xs font-bold text-gray-400 pointer-events-none">cm</span>
          </div>
        </div>
        <div>
          <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Berat Badan</label>
          <div class="relative">
            <input type="number" step="any" id="penerima_bb"
              class="w-full pl-5 pr-12 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
              placeholder="0">
            <span class="absolute right-4 top-4 text-xs font-bold text-gray-400 pointer-events-none">kg</span>
          </div>
        </div>
      </div>

      <!-- No HP (hanya tampil untuk guru/staf) -->
      <div id="penerima_nohp_container" class="col-span-1 md:col-span-2" style="display: none;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">No HP</label>
        <input type="tel" id="penerima_hp"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
          placeholder="08...">
      </div>

      <div class="col-span-1 md:col-span-2">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Riwayat Alergi</label>
        <input type="text" id="penerima_alergi"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Contoh: Debu, Makanan Laut (Isi '-' jika tidak ada)">
      </div>

      <div class="col-span-1 md:col-span-2 pt-6 flex gap-4 border-t border-gray-100 mt-2">
        <button type="button" onclick="window.closePenerimaModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button type="submit"
          class="w-2/3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgb(59,130,246,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex justify-center items-center gap-2"><i
            class="fa-solid fa-floppy-disk"></i> Simpan Data</button>
      </div>
    </form>
  </div>
</div>

<!-- Form Import Penerima Manfaat (Unified) -->
<div id="importPenerimaModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-4xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 relative overflow-hidden">
    <div class="absolute top-[-10%] right-[-5%] w-64 h-64 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-6 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-teal-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
          <i class="fa-solid fa-file-excel text-xl"></i>
        </div>
        <div>
          <h3 class="text-2xl font-black text-gray-800 tracking-tight">Import Data Penerima Manfaat</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Paste dari Microsoft Excel</p>
        </div>
      </div>
      <button onclick="window.closeImportPenerimaModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark"></i></button>
    </div>

    <div class="relative z-10">
      <div class="bg-blue-50 border border-blue-100 rounded-2xl p-4 mb-5 text-sm text-blue-800">
        <div class="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-3">
          <div>
            <p class="font-bold mb-1"><i class="fa-solid fa-circle-info mr-1"></i> Format Kolom Import:</p>
            <p
              class="font-mono bg-white px-2 py-1 rounded border border-blue-200 mt-2 inline-block text-[10px] md:text-xs">
              NISN | Nama Penerima | Tgl Lahir (DD-MM-YYYY) | JK (L/P) | Nama Ortu | Posisi | Status (Aktif/Nonaktif) | TB | BB | Kelas | Alergi | No HP</p>
            <div class="mt-2 text-[10px] text-blue-600">
              <p><b>Jenis Kelamin:</b> L = Laki-Laki, P = Perempuan</p>
              <p><b>Posisi:</b> Siswa, Guru Kelas, Kepala Sekolah, atau posisi lainnya</p>
              <p><b>Status:</b> Aktif atau Nonaktif</p>
            </div>
          </div>
          <div class="flex flex-row gap-2 shrink-0 w-full xl:w-auto mt-2 xl:mt-0">
            <a href="/api/template/siswa" target="_blank"
              class="flex-1 xl:flex-none bg-white border border-blue-200 text-blue-600 hover:bg-blue-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
              <i class="fa-solid fa-download"></i> Template
            </a>
            @if(auth()->check() && auth()->user()->role === 'Super Admin')
              <label
                class="flex-1 xl:flex-none cursor-pointer bg-white border border-rose-200 text-rose-600 hover:bg-rose-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
                <i class="fa-solid fa-upload"></i> Upload
                <input type="file" class="hidden" accept=".xlsx,.xls" onchange="window.uploadTemplate('siswa', this)">
              </label>
            @endif
          </div>
        </div>
      </div>

      <!-- Tab: Paste atau Upload File -->
      <div class="flex gap-2 mb-3">
        <button type="button" id="tabPaste" onclick="window.switchImportTab('paste')"
          class="px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-widest transition-all border-2"
          style="background:#2563eb; color:#fff; border-color:#2563eb;">
          <i class="fa-solid fa-paste mr-1"></i> Paste Data
        </button>
        <button type="button" id="tabFile" onclick="window.switchImportTab('file')"
          class="px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-widest transition-all border-2"
          style="background:#fff; color:#4b5563; border-color:#e5e7eb;">
          <i class="fa-solid fa-file-excel mr-1"></i> Upload File Excel
        </button>
      </div>

      <!-- Panel Paste -->
      <div id="panelPaste">
        <textarea id="import_penerima_data"
          class="w-full h-48 px-5 py-4 bg-gray-50 border border-gray-200 focus:bg-white focus:border-emerald-400 focus:ring-4 focus:ring-emerald-500/20 rounded-2xl outline-none font-mono text-sm shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] custom-scrollbar resize-none whitespace-pre transition-all placeholder-gray-400"
          placeholder="Paste data excel Anda di sini..."></textarea>
      </div>

      <!-- Panel File Upload -->
      <div id="panelFile" style="display: none;">
        <label class="flex flex-col items-center justify-center w-full h-48 bg-gray-50 border-2 border-dashed border-gray-300 rounded-2xl cursor-pointer hover:border-emerald-400 hover:bg-emerald-50/30 transition-all">
          <div class="flex flex-col items-center justify-center pt-5 pb-6" id="fileUploadLabel">
            <i class="fa-solid fa-cloud-arrow-up text-4xl text-gray-300 mb-3"></i>
            <p class="text-sm font-bold text-gray-500">Klik atau drag file Excel di sini</p>
            <p class="text-xs text-gray-400 mt-1">Format: .xlsx atau .xls</p>
          </div>
          <input type="file" id="import_penerima_file" class="hidden" accept=".xlsx,.xls" onchange="window.onImportFileSelected(this)">
        </label>
      </div>
      <div class="pt-6 flex gap-4 border-t border-gray-100 mt-5">
        <button type="button" onclick="window.closeImportPenerimaModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button onclick="window.handleImportPenerimaSubmit()"
          class="w-2/3 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgba(16,185,129,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex items-center justify-center gap-2"><i
            class="fa-solid fa-cloud-arrow-up"></i> Mulai Import</button>
      </div>
    </div>
  </div>
</div>
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-3xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 max-h-[95vh] overflow-y-auto custom-scrollbar relative">
    <div class="absolute top-[-10%] right-[-5%] w-64 h-64 bg-blue-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="absolute bottom-[-10%] left-[-5%] w-64 h-64 bg-indigo-400/10 rounded-full blur-3xl pointer-events-none">
    </div>

    <div class="flex justify-between items-start mb-8 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-blue-500 to-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/30">
          <i class="fa-solid fa-user-graduate text-xl"></i>
        </div>
        <div>
          <h3 id="siswaModalTitle" class="text-2xl font-black text-gray-800 tracking-tight">Tambah Data Siswa</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Formulir Pendaftaran Siswa</p>
        </div>
      </div>
      <button onclick="window.closeSiswaModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark fa-lg"></i></button>
    </div>

    <form id="siswaForm" onsubmit="event.preventDefault(); window.handleSiswaSubmit();"
      class="grid grid-cols-1 md:grid-cols-2 gap-5 relative z-10">
      <input type="hidden" id="siswa_id"> <input type="hidden" id="siswa_isEdit" value="false">

      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">NISN</label>
        <input type="text" id="siswa_nisn"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 uppercase"
          placeholder="Nomor Induk Siswa Nasional" required>
      </div>
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Nama Lengkap
          Siswa</label>
        <input type="text" id="siswa_nama"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Ketik nama lengkap siswa" required>
      </div>

      <div class="relative" style="z-index: 9999;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Jenis
          Kelamin</label>
        <div class="relative custom-dropdown group" style="z-index: 9999;">
          <input type="hidden" id="siswa_jk" value="L">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl flex justify-between items-center dropdown-trigger font-bold text-sm text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text">Laki-laki (L)</span>
            <i
              class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 top-[105%] bg-white border border-gray-100 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] z-[150] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden"
            style="z-index: 9999;">
            <div class="py-2">
              <div
                class="px-5 py-3 hover:bg-blue-50 cursor-pointer text-sm font-bold text-blue-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="L"><i class="fa-solid fa-mars"></i> Laki-laki (L)</div>
              <div
                class="px-5 py-3 hover:bg-pink-50 cursor-pointer text-sm font-bold text-pink-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="P"><i class="fa-solid fa-venus"></i> Perempuan (P)</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Tanggal
          Lahir</label>
        <input type="text" id="siswa_tgl"
          class="datepicker w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 text-gray-700"
          placeholder="Pilih tanggal lahir" required>
      </div>

      <div id="siswa_kelas_container">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Kelas</label>
        <input type="text" id="siswa_kelas"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 uppercase"
          placeholder="Misal: 1, 2, 3A..." required>
      </div>
      <div class="relative" style="z-index: 9998;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Status
          Keaktifan</label>
        <div class="relative custom-dropdown group" style="z-index: 9998;">
          <input type="hidden" id="siswa_status" value="Aktif">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl flex justify-between items-center dropdown-trigger font-bold text-sm text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text">Aktif (Masuk Hitungan)</span>
            <i
              class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 bottom-[100%] mb-2 bg-white border border-gray-100 rounded-2xl shadow-[0_-10px_40px_rgba(0,0,0,0.08)] z-[150] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden"
            style="z-index: 9998;">
            <div class="py-2">
              <div
                class="px-5 py-3 hover:bg-emerald-50 cursor-pointer text-sm font-bold text-emerald-600 transition-colors dropdown-item"
                data-value="Aktif">Aktif (Masuk Hitungan)</div>
              <div
                class="px-5 py-3 hover:bg-red-50 cursor-pointer text-sm font-bold text-red-500 transition-colors dropdown-item"
                data-value="Nonaktif">Nonaktif / Libur (Dikecualikan)</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-span-1 md:col-span-2 grid grid-cols-2 gap-5">
        <div>
          <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Tinggi
            Badan</label>
          <div class="relative">
            <input type="number" step="any" id="siswa_tb"
              class="w-full pl-5 pr-12 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
              placeholder="0" required>
            <span class="absolute right-4 top-4 text-xs font-bold text-gray-400 pointer-events-none">cm</span>
          </div>
        </div>
        <div>
          <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Berat
            Badan</label>
          <div class="relative">
            <input type="number" step="any" id="siswa_bb"
              class="w-full pl-5 pr-12 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
              placeholder="0" required>
            <span class="absolute right-4 top-4 text-xs font-bold text-gray-400 pointer-events-none">kg</span>
          </div>
        </div>
      </div>

      <div class="col-span-1 md:col-span-2">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Riwayat
          Alergi</label>
        <input type="text" id="siswa_alergi"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-4 focus:ring-blue-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Contoh: Debu, Makanan Laut (Isi '-' jika tidak ada)" required>
      </div>

      <div class="col-span-1 md:col-span-2 pt-6 flex gap-4 border-t border-gray-100 mt-2">
        <button type="button" onclick="window.closeSiswaModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button type="submit"
          class="w-2/3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgb(59,130,246,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex justify-center items-center gap-2"><i
            class="fa-solid fa-floppy-disk"></i> Simpan Data Siswa</button>
      </div>
    </form>
  </div>
</div>

<!-- Form Tendik -->
<div id="tendikModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-3xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 max-h-[95vh] overflow-visible relative">
    <div class="absolute top-[-10%] right-[-5%] w-64 h-64 bg-amber-400/10 rounded-full blur-3xl pointer-events-none">
    </div>

    <div class="flex justify-between items-start mb-8 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-amber-500 to-orange-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-amber-500/30">
          <i class="fa-solid fa-chalkboard-user text-xl"></i>
        </div>
        <div>
          <h3 id="tendikModalTitle" class="text-2xl font-black text-gray-800 tracking-tight">Tambah Tenaga Pendidik
          </h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Formulir Data Pegawai</p>
        </div>
      </div>
      <button onclick="window.closeTendikModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark fa-lg"></i></button>
    </div>

    <form id="tendikForm" onsubmit="event.preventDefault(); window.handleTendikSubmit();"
      class="grid grid-cols-1 md:grid-cols-2 gap-5 relative z-10">
      <input type="hidden" id="tendik_id"> <input type="hidden" id="tendik_isEdit" value="false">

      <div class="col-span-1 md:col-span-2">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Nama Lengkap &
          Gelar</label>
        <input type="text" id="tendik_nama"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-amber-400 focus:ring-4 focus:ring-amber-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Ketik nama lengkap tendik" required>
      </div>

      <div class="relative" style="z-index: 9999;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Jenis
          Kelamin</label>
        <div class="relative custom-dropdown group" style="z-index: 9999;">
          <input type="hidden" id="tendik_jk" value="L">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-amber-400 focus:ring-4 focus:ring-amber-500/20 rounded-2xl flex justify-between items-center dropdown-trigger font-bold text-sm text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text">Laki-laki (L)</span>
            <i
              class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 top-[105%] bg-white border border-gray-100 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] z-[150] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden"
            style="z-index: 9999;">
            <div class="py-2">
              <div
                class="px-5 py-3 hover:bg-amber-50 cursor-pointer text-sm font-bold text-blue-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="L"><i class="fa-solid fa-mars"></i> Laki-laki (L)</div>
              <div
                class="px-5 py-3 hover:bg-pink-50 cursor-pointer text-sm font-bold text-pink-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="P"><i class="fa-solid fa-venus"></i> Perempuan (P)</div>
            </div>
          </div>
        </div>
      </div>

      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Tanggal
          Lahir</label>
        <input type="text" id="tendik_tgl"
          class="datepicker w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-amber-400 focus:ring-4 focus:ring-amber-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 text-gray-700"
          placeholder="Pilih tanggal lahir" required>
      </div>

      <div class="relative" style="z-index: 9998;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Jabatan /
          Posisi</label>
        <div class="relative custom-dropdown group" style="z-index: 9998;">
          <input type="hidden" id="tendik_jabatan" value="Kepala Sekolah">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-amber-400 focus:ring-4 focus:ring-amber-500/20 rounded-2xl flex justify-between items-center dropdown-trigger font-bold text-sm text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text">Kepala Sekolah</span>
            <i
              class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 top-[105%] bg-white border border-gray-100 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] z-[150] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden max-h-48 overflow-y-auto custom-scrollbar"
            style="z-index: 9998;">
            <div class="py-2" id="tendikJabatanMenu"></div>
          </div>
        </div>
      </div>

      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">No HP</label>
        <input type="tel" id="tendik_hp"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-amber-400 focus:ring-4 focus:ring-amber-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
          placeholder="08..." required>
      </div>

      <div class="col-span-1 md:col-span-2 pt-6 flex gap-4 border-t border-gray-100 mt-2">
        <button type="button" onclick="window.closeTendikModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button type="submit"
          class="w-2/3 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgba(245,158,11,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex justify-center items-center gap-2"><i
            class="fa-solid fa-floppy-disk"></i> Simpan Tendik</button>
      </div>
    </form>
  </div>
</div>

<!-- Form Import Siswa -->
<div id="importSiswaModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-4xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 relative overflow-hidden">
    <div class="absolute top-[-10%] right-[-5%] w-64 h-64 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-6 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-teal-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
          <i class="fa-solid fa-file-excel text-xl"></i>
        </div>
        <div>
          <h3 class="text-2xl font-black text-gray-800 tracking-tight">Import Data Siswa</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Paste dari Microsoft Excel</p>
        </div>
      </div>
      <button onclick="window.closeImportSiswaModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark"></i></button>
    </div>

    <div class="relative z-10">
      <div class="bg-blue-50 border border-blue-100 rounded-2xl p-4 mb-5 text-sm text-blue-800">
        <div class="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-3">
          <div>
            <p class="font-bold mb-1"><i class="fa-solid fa-circle-info mr-1"></i> Panduan Copy-Paste Excel:</p>
            <p
              class="font-mono bg-white px-2 py-1 rounded border border-blue-200 mt-2 inline-block text-[10px] md:text-xs">
              NISN | Nama Lengkap | L/P | YYYY-MM-DD | Kelas | TB | BB | Alergi | Status</p>
          </div>
          <div class="flex flex-row gap-2 shrink-0 w-full xl:w-auto mt-2 xl:mt-0">
            <a href="/api/template/siswa" target="_blank"
              class="flex-1 xl:flex-none bg-white border border-blue-200 text-blue-600 hover:bg-blue-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
              <i class="fa-solid fa-download"></i> Template
            </a>
            @if(auth()->check() && auth()->user()->role === 'Super Admin')
              <label
                class="flex-1 xl:flex-none cursor-pointer bg-white border border-rose-200 text-rose-600 hover:bg-rose-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
                <i class="fa-solid fa-upload"></i> Upload
                <input type="file" class="hidden" accept=".xlsx,.xls" onchange="window.uploadTemplate('siswa', this)">
              </label>
            @endif
          </div>
        </div>
      </div>
      <textarea id="import_siswa_data"
        class="w-full h-48 px-5 py-4 bg-gray-50 border border-gray-200 focus:bg-white focus:border-emerald-400 focus:ring-4 focus:ring-emerald-500/20 rounded-2xl outline-none font-mono text-sm shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] custom-scrollbar resize-none whitespace-pre transition-all placeholder-gray-400"
        placeholder="Paste data excel Anda di sini..."></textarea>
      <div class="pt-6 flex gap-4 border-t border-gray-100 mt-5">
        <button type="button" onclick="window.closeImportSiswaModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button onclick="window.handleImportSiswaSubmit()"
          class="w-2/3 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgba(16,185,129,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex items-center justify-center gap-2"><i
            class="fa-solid fa-cloud-arrow-up"></i> Mulai Import</button>
      </div>
    </div>
  </div>
</div>

<div id="importTendikModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-4xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 relative overflow-hidden">
    <div class="absolute top-[-10%] right-[-5%] w-64 h-64 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-6 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-teal-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
          <i class="fa-solid fa-file-excel text-xl"></i>
        </div>
        <div>
          <h3 class="text-2xl font-black text-gray-800 tracking-tight">Import Data Tendik</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Paste dari Microsoft Excel</p>
        </div>
      </div>
      <button onclick="window.closeImportTendikModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark"></i></button>
    </div>

    <div class="relative z-10">
      <div class="bg-amber-50 border border-amber-100 rounded-2xl p-4 mb-5 text-sm text-amber-800">
        <div class="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-3">
          <div>
            <p class="font-bold mb-1"><i class="fa-solid fa-circle-info mr-1"></i> Panduan Copy-Paste Excel:</p>
            <p
              class="font-mono bg-white px-2 py-1 rounded border border-amber-200 mt-2 inline-block text-[10px] md:text-xs">
              Nama Lengkap & Gelar | L/P | YYYY-MM-DD | Jabatan | No HP</p>
          </div>
          <div class="flex flex-row gap-2 shrink-0 w-full xl:w-auto mt-2 xl:mt-0">
            <a href="/api/template/tendik" target="_blank"
              class="flex-1 xl:flex-none bg-white border border-amber-200 text-amber-600 hover:bg-amber-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
              <i class="fa-solid fa-download"></i> Template
            </a>
            @if(auth()->check() && auth()->user()->role === 'Super Admin')
              <label
                class="flex-1 xl:flex-none cursor-pointer bg-white border border-rose-200 text-rose-600 hover:bg-rose-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
                <i class="fa-solid fa-upload"></i> Upload
                <input type="file" class="hidden" accept=".xlsx,.xls" onchange="window.uploadTemplate('tendik', this)">
              </label>
            @endif
          </div>
        </div>
      </div>
      <textarea id="import_tendik_data"
        class="w-full h-48 px-5 py-4 bg-gray-50 border border-gray-200 focus:bg-white focus:border-emerald-400 focus:ring-4 focus:ring-emerald-500/20 rounded-2xl outline-none font-mono text-sm shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] custom-scrollbar resize-none whitespace-pre transition-all placeholder-gray-400"
        placeholder="Paste data excel Anda di sini..."></textarea>
      <div class="pt-6 flex gap-4 border-t border-gray-100 mt-5">
        <button type="button" onclick="window.closeImportTendikModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button onclick="window.handleImportTendikSubmit()"
          class="w-2/3 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgba(16,185,129,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex items-center justify-center gap-2"><i
            class="fa-solid fa-cloud-arrow-up"></i> Mulai Import</button>
      </div>
    </div>
  </div>
</div>

<!-- Form Data Balita -->
<div id="balitaModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-3xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 max-h-[95vh] overflow-y-auto custom-scrollbar relative">
    <div class="absolute top-[-10%] right-[-5%] w-64 h-64 bg-rose-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-8 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-rose-500 to-pink-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-rose-500/30">
          <i class="fa-solid fa-baby text-xl"></i>
        </div>
        <div>
          <h3 id="balitaModalTitle" class="text-2xl font-black text-gray-800 tracking-tight">Tambah Data Balita</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Master Data Balita</p>
        </div>
      </div>
      <button onclick="window.closeBalitaModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark fa-lg"></i></button>
    </div>

    <form id="balitaForm" onsubmit="event.preventDefault(); window.handleBalitaSubmit();"
      class="grid grid-cols-1 md:grid-cols-2 gap-5 relative z-10">
      <input type="hidden" id="balita_id"> <input type="hidden" id="balita_isEdit" value="false">
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">NIK
          Balita</label>
        <input type="text" id="balita_nik"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
          placeholder="Nomor Induk Kependudukan" required>
      </div>
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Nama Lengkap
          Balita</label>
        <input type="text" id="balita_nama"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Ketik nama lengkap balita" required>
      </div>
      <div class="relative" style="z-index: 9999;">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Jenis
          Kelamin</label>
        <div class="relative custom-dropdown group" style="z-index: 9999;">
          <input type="hidden" id="balita_jk" value="L">
          <button type="button"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl flex justify-between items-center dropdown-trigger font-bold text-sm text-gray-700 shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] transition-all">
            <span class="dropdown-text">Laki-laki (L)</span><i
              class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
          </button>
          <div
            class="absolute left-0 right-0 top-[105%] bg-white border border-gray-100 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] z-[150] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden"
            style="z-index: 9999;">
            <div class="py-2">
              <div
                class="px-5 py-3 hover:bg-blue-50 cursor-pointer text-sm font-bold text-blue-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="L"><i class="fa-solid fa-mars"></i> Laki-laki (L)</div>
              <div
                class="px-5 py-3 hover:bg-pink-50 cursor-pointer text-sm font-bold text-pink-600 transition-colors dropdown-item flex items-center gap-2"
                data-value="P"><i class="fa-solid fa-venus"></i> Perempuan (P)</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Tanggal
          Lahir</label>
        <input type="text" id="balita_tgl"
          class="datepicker w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 text-gray-700"
          placeholder="Pilih tanggal lahir" required>
      </div>
      <div class="col-span-1 md:col-span-2">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Nama Orang
          Tua</label>
        <input type="text" id="balita_ortu"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Nama ayah atau ibu" required>
      </div>
      <div class="col-span-1 md:col-span-2 grid grid-cols-2 gap-5">
        <div>
          <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Tinggi
            Badan</label>
          <div class="relative">
            <input type="number" step="any" id="balita_tb"
              class="w-full pl-5 pr-12 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
              placeholder="0" required>
            <span class="absolute right-4 top-4 text-xs font-bold text-gray-400 pointer-events-none">cm</span>
          </div>
        </div>
        <div>
          <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Berat
            Badan</label>
          <div class="relative">
            <input type="number" step="any" id="balita_bb"
              class="w-full pl-5 pr-12 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
              placeholder="0" required>
            <span class="absolute right-4 top-4 text-xs font-bold text-gray-400 pointer-events-none">kg</span>
          </div>
        </div>
      </div>
      <div class="col-span-1 md:col-span-2">
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Riwayat
          Alergi</label>
        <input type="text" id="balita_alergi"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-rose-400 focus:ring-4 focus:ring-rose-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Contoh: Susu Sapi, Debu (Isi '-' jika tidak ada)" required>
      </div>
      <div class="col-span-1 md:col-span-2 pt-6 flex gap-4 border-t border-gray-100 mt-2">
        <button type="button" onclick="window.closeBalitaModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button type="submit"
          class="w-2/3 bg-gradient-to-r from-rose-600 to-pink-600 hover:from-rose-700 hover:to-pink-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgb(225,29,72,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex justify-center items-center gap-2"><i
            class="fa-solid fa-floppy-disk"></i> Simpan Data</button>
      </div>
    </form>
  </div>
</div>

<!-- Form Ibu Hamil -->
<div id="ibuHamilModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 relative overflow-hidden">
    <div class="absolute top-[-15%] right-[-10%] w-64 h-64 bg-purple-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-8 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-purple-500/30">
          <i class="fa-solid fa-person-pregnant text-xl"></i>
        </div>
        <div>
          <h3 id="ibuHamilModalTitle" class="text-2xl font-black text-gray-800 tracking-tight">Tambah Ibu Hamil</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Master Data Kesehatan</p>
        </div>
      </div>
      <button onclick="window.closeIbuHamilModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark fa-lg"></i></button>
    </div>

    <form id="ibuHamilForm" onsubmit="event.preventDefault(); window.handleIbuHamilSubmit();"
      class="space-y-5 relative z-10">
      <input type="hidden" id="ibuhamil_id"> <input type="hidden" id="ibuhamil_isEdit" value="false">
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">NIK
          Ibu</label>
        <input type="text" id="ibuhamil_nik"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-purple-400 focus:ring-4 focus:ring-purple-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
          placeholder="Nomor Induk Kependudukan" required>
      </div>
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Nama Lengkap
          Ibu</label>
        <input type="text" id="ibuhamil_nama"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-purple-400 focus:ring-4 focus:ring-purple-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Ketik nama lengkap ibu hamil" required>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
          <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Tanggal
            HPHT</label>
          <div class="relative">
            <input type="text" id="ibuhamil_usia"
              class="datepicker w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-purple-400 focus:ring-4 focus:ring-purple-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 text-gray-700"
              placeholder="Pilih tanggal HPHT" required>
          </div>
        </div>
        <div>
          <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Riwayat
            Alergi</label>
          <input type="text" id="ibuhamil_alergi"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-purple-400 focus:ring-4 focus:ring-purple-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
            placeholder="Isi '-' jika tidak ada" required>
        </div>
      </div>
      <div class="pt-5 flex gap-4 border-t border-gray-100 mt-2">
        <button type="button" onclick="window.closeIbuHamilModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button type="submit"
          class="w-2/3 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgba(147,51,234,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex justify-center items-center gap-2"><i
            class="fa-solid fa-floppy-disk"></i> Simpan Data</button>
      </div>
    </form>
  </div>
</div>

<!-- Form Ibu Menyusui -->
<div id="ibuMenyusuiModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 relative overflow-hidden">
    <div class="absolute top-[-15%] right-[-10%] w-64 h-64 bg-teal-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-8 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-teal-500 to-teal-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-teal-500/30">
          <i class="fa-solid fa-person-breastfeeding text-xl"></i>
        </div>
        <div>
          <h3 id="ibuMenyusuiModalTitle" class="text-2xl font-black text-gray-800 tracking-tight">Tambah Ibu Menyusui
          </h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Master Data Kesehatan</p>
        </div>
      </div>
      <button onclick="window.closeIbuMenyusuiModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark fa-lg"></i></button>
    </div>

    <form id="ibuMenyusuiForm" onsubmit="event.preventDefault(); window.handleIbuMenyusuiSubmit();"
      class="space-y-5 relative z-10">
      <input type="hidden" id="ibumenyusui_id"> <input type="hidden" id="ibumenyusui_isEdit" value="false">
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">NIK
          Ibu</label>
        <input type="text" id="ibumenyusui_nik"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-teal-400 focus:ring-4 focus:ring-teal-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400"
          placeholder="Nomor Induk Kependudukan" required>
      </div>
      <div>
        <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Nama Lengkap
          Ibu</label>
        <input type="text" id="ibumenyusui_nama"
          class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-teal-400 focus:ring-4 focus:ring-teal-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
          placeholder="Ketik nama lengkap ibu menyusui" required>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
          <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Tanggal
            Lahir Bayi</label>
          <div class="relative">
            <input type="text" id="ibumenyusui_usia"
              class="datepicker w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-teal-400 focus:ring-4 focus:ring-teal-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 text-gray-700"
              placeholder="Pilih tanggal lahir bayi" required>
          </div>
        </div>
        <div>
          <label class="block text-[11px] font-black text-gray-500 uppercase tracking-widest mb-1.5 ml-1">Riwayat
            Alergi</label>
          <input type="text" id="ibumenyusui_alergi"
            class="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 focus:bg-white focus:border-teal-400 focus:ring-4 focus:ring-teal-500/20 rounded-2xl outline-none transition-all text-sm font-semibold shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] placeholder-gray-400 capitalize"
            placeholder="Isi '-' jika tidak ada" required>
        </div>
      </div>
      <div class="pt-5 flex gap-4 border-t border-gray-100 mt-2">
        <button type="button" onclick="window.closeIbuMenyusuiModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button type="submit"
          class="w-2/3 bg-gradient-to-r from-teal-600 to-emerald-600 hover:from-teal-700 hover:to-emerald-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgba(13,148,136,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex justify-center items-center gap-2"><i
            class="fa-solid fa-floppy-disk"></i> Simpan Data</button>
      </div>
    </form>
  </div>
</div>

<!-- Import Modals Posyandu -->
<div id="importBalitaModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-4xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 relative overflow-hidden">
    <div class="absolute top-[-10%] right-[-5%] w-64 h-64 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-6 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-teal-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
          <i class="fa-solid fa-file-excel text-xl"></i>
        </div>
        <div>
          <h3 class="text-2xl font-black text-gray-800 tracking-tight">Import Data Balita</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Paste dari Microsoft Excel</p>
        </div>
      </div>
      <button onclick="window.closeImportBalitaModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark fa-lg"></i></button>
    </div>

    <div class="relative z-10">
      <div class="bg-blue-50 border border-blue-100 rounded-2xl p-4 mb-5 text-sm text-blue-800">
        <div class="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-3">
          <div>
            <p class="font-bold mb-1"><i class="fa-solid fa-circle-info mr-1"></i> Panduan Copy-Paste Excel:</p>
            <p
              class="font-mono bg-white px-2 py-1 rounded border border-blue-200 mt-2 inline-block text-[10px] md:text-xs">
              NIK | Nama Balita | L/P | YYYY-MM-DD | Nama Orang Tua | TB | BB | Alergi</p>
          </div>
          <div class="flex flex-row gap-2 shrink-0 w-full xl:w-auto mt-2 xl:mt-0">
            <a href="/api/template/balita" target="_blank"
              class="flex-1 xl:flex-none bg-white border border-blue-200 text-blue-600 hover:bg-blue-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
              <i class="fa-solid fa-download"></i> Template
            </a>
            @if(auth()->check() && auth()->user()->role === 'Super Admin')
              <label
                class="flex-1 xl:flex-none cursor-pointer bg-white border border-rose-200 text-rose-600 hover:bg-rose-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
                <i class="fa-solid fa-upload"></i> Upload
                <input type="file" class="hidden" accept=".xlsx,.xls" onchange="window.uploadTemplate('balita', this)">
              </label>
            @endif
          </div>
        </div>
      </div>
      <textarea id="import_balita_data"
        class="w-full h-48 px-5 py-4 bg-gray-50 border border-gray-200 focus:bg-white focus:border-emerald-400 focus:ring-4 focus:ring-emerald-500/20 rounded-2xl outline-none font-mono text-sm shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] custom-scrollbar resize-none whitespace-pre transition-all placeholder-gray-400"
        placeholder="Paste data excel Anda di sini..."></textarea>
      <div class="pt-6 flex gap-4 border-t border-gray-100 mt-5">
        <button type="button" onclick="window.closeImportBalitaModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button onclick="window.handleImportBalitaSubmit()"
          class="w-2/3 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgba(16,185,129,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex items-center justify-center gap-2"><i
            class="fa-solid fa-cloud-arrow-up"></i> Mulai Import</button>
      </div>
    </div>
  </div>
</div>

<div id="importIbuHamilModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-4xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 relative overflow-hidden">
    <div class="absolute top-[-10%] right-[-5%] w-64 h-64 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-6 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-teal-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
          <i class="fa-solid fa-file-excel text-xl"></i>
        </div>
        <div>
          <h3 class="text-2xl font-black text-gray-800 tracking-tight">Import Data Ibu Hamil</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Paste dari Microsoft Excel</p>
        </div>
      </div>
      <button onclick="window.closeImportIbuHamilModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark"></i></button>
    </div>

    <div class="relative z-10">
      <div class="bg-blue-50 border border-blue-100 rounded-2xl p-4 mb-5 text-sm text-blue-800">
        <div class="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-3">
          <div>
            <p class="font-bold mb-1"><i class="fa-solid fa-circle-info mr-1"></i> Panduan Copy-Paste Excel:</p>
            <p
              class="font-mono bg-white px-2 py-1 rounded border border-blue-200 mt-2 inline-block text-[10px] md:text-xs">
              NIK | Nama Ibu | Tanggal HPHT (YYYY-MM-DD) | Alergi</p>
          </div>
          <div class="flex flex-row gap-2 shrink-0 w-full xl:w-auto mt-2 xl:mt-0">
            <a href="/api/template/ibuhamil" target="_blank"
              class="flex-1 xl:flex-none bg-white border border-blue-200 text-blue-600 hover:bg-blue-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
              <i class="fa-solid fa-download"></i> Template
            </a>
            @if(auth()->check() && auth()->user()->role === 'Super Admin')
              <label
                class="flex-1 xl:flex-none cursor-pointer bg-white border border-rose-200 text-rose-600 hover:bg-rose-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
                <i class="fa-solid fa-upload"></i> Upload
                <input type="file" class="hidden" accept=".xlsx,.xls" onchange="window.uploadTemplate('ibuhamil', this)">
              </label>
            @endif
          </div>
        </div>
      </div>
      <textarea id="import_ibuhamil_data"
        class="w-full h-48 px-5 py-4 bg-gray-50 border border-gray-200 focus:bg-white focus:border-emerald-400 focus:ring-4 focus:ring-emerald-500/20 rounded-2xl outline-none font-mono text-sm shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] custom-scrollbar resize-none whitespace-pre transition-all placeholder-gray-400"
        placeholder="Paste data excel Anda di sini..."></textarea>
      <div class="pt-6 flex gap-4 border-t border-gray-100 mt-5">
        <button type="button" onclick="window.closeImportIbuHamilModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button onclick="window.handleImportIbuHamilSubmit()"
          class="w-2/3 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgba(16,185,129,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex items-center justify-center gap-2"><i
            class="fa-solid fa-cloud-arrow-up"></i> Mulai Import</button>
      </div>
    </div>
  </div>
</div>

<div id="importIbuMenyusuiModal"
  class="hidden fixed inset-0 bg-gray-900/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 opacity-0 transition-opacity duration-300">
  <div
    class="bg-white/90 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-8 md:p-10 w-full max-w-4xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform scale-95 transition-all duration-300 relative overflow-hidden">
    <div class="absolute top-[-10%] right-[-5%] w-64 h-64 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none">
    </div>
    <div class="flex justify-between items-start mb-6 relative z-10">
      <div class="flex items-center gap-4">
        <div
          class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-teal-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
          <i class="fa-solid fa-file-excel text-xl"></i>
        </div>
        <div>
          <h3 class="text-2xl font-black text-gray-800 tracking-tight">Import Data Ibu Menyusui</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Paste dari Microsoft Excel</p>
        </div>
      </div>
      <button onclick="window.closeImportIbuMenyusuiModal()"
        class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i
          class="fa-solid fa-xmark"></i></button>
    </div>

    <div class="relative z-10">
      <div class="bg-amber-50 border border-amber-100 rounded-2xl p-4 mb-5 text-sm text-amber-800">
        <div class="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-3">
          <div>
            <p class="font-bold mb-1"><i class="fa-solid fa-circle-info mr-1"></i> Panduan Copy-Paste Excel:</p>
            <p class="font-mono bg-white px-2 py-1 rounded border border-amber-200 mt-2 inline-block text-[10px] md:text-xs">NIK | Nama Ibu | Tanggal Lahir Bayi (YYYY-MM-DD) | Alergi</p>
          </div>
          <div class="flex flex-row gap-2 shrink-0 w-full xl:w-auto mt-2 xl:mt-0">
            <a href="/api/template/ibumenyusui" target="_blank" class="flex-1 xl:flex-none bg-white border border-amber-200 text-amber-600 hover:bg-amber-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
              <i class="fa-solid fa-download"></i> Template
            </a>
            @if(auth()->check() && auth()->user()->role === 'Super Admin')
            <label class="flex-1 xl:flex-none cursor-pointer bg-white border border-rose-200 text-rose-600 hover:bg-rose-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
              <i class="fa-solid fa-upload"></i> Upload
              <input type="file" class="hidden" accept=".xlsx,.xls" onchange="window.uploadTemplate('ibumenyusui', this)">
            </label>
            @endif
          </div>
        </div>
      </div>
      <textarea id="import_ibumenyusui_data"
        class="w-full h-48 px-5 py-4 bg-gray-50 border border-gray-200 focus:bg-white focus:border-emerald-400 focus:ring-4 focus:ring-emerald-500/20 rounded-2xl outline-none font-mono text-sm shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] custom-scrollbar resize-none whitespace-pre transition-all placeholder-gray-400"
        placeholder="Paste data excel Anda di sini..."></textarea>
      <div class="pt-6 flex gap-4 border-t border-gray-100 mt-5">
        <button type="button" onclick="window.closeImportIbuMenyusuiModal()"
          class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button onclick="window.handleImportIbuMenyusuiSubmit()"
          class="w-2/3 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgba(13,148,136,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex items-center justify-center gap-2"><i
            class="fa-solid fa-cloud-arrow-up"></i> Mulai Import</button>
      </div>
    </div>
  </div>
</div>

<!-- ===================================== -->
<!-- MODAL KADER -->
<!-- ===================================== -->
<div id="kaderModal" class="fixed inset-0 z-[100] hidden flex items-center justify-center transition-all duration-300 opacity-0">
  <div class="absolute inset-0 bg-gray-900/40 backdrop-blur-sm" onclick="window.closeKaderModal()"></div>
  <div class="bg-white w-full max-w-2xl rounded-3xl shadow-2xl relative z-10 m-4 flex flex-col max-h-[90vh] scale-95 transition-transform duration-300">
    <div class="px-6 py-5 border-b border-gray-100 flex justify-between items-center bg-white rounded-t-3xl shrink-0">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center">
          <i class="fa-solid fa-user-nurse text-lg"></i>
        </div>
        <div>
          <h3 id="kaderModalTitle" class="text-lg font-black text-gray-800 tracking-tight">Tambah Data Kader</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-0.5">Formulir Kader Posyandu</p>
        </div>
      </div>
      <button onclick="window.closeKaderModal()" class="w-8 h-8 bg-gray-50 hover:bg-rose-50 text-gray-400 hover:text-rose-500 rounded-full flex items-center justify-center transition-all"><i class="fa-solid fa-xmark"></i></button>
    </div>

    <div class="p-6 overflow-y-auto custom-scrollbar">
      <form id="kaderForm" onsubmit="event.preventDefault(); window.handleKaderSubmit();" class="space-y-5">
        <input type="hidden" id="kader_id">
        
        <div>
          <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Nama Kader <span class="text-rose-500">*</span></label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400"><i class="fa-solid fa-user"></i></div>
            <input type="text" id="kader_nama" required class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 focus:bg-white focus:border-orange-400 focus:ring-4 focus:ring-orange-500/20 rounded-xl outline-none font-bold text-gray-700 transition-all placeholder-gray-400" placeholder="Contoh: Siti Aminah">
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div class="relative" style="z-index: 9999;">
            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Jenis Kelamin</label>
            <div class="relative custom-dropdown group" style="z-index: 9999;">
              <input type="hidden" id="kader_jk" value="P">
              <button type="button" class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 focus:bg-white focus:border-orange-400 focus:ring-4 focus:ring-orange-500/20 rounded-xl flex justify-between items-center dropdown-trigger font-bold text-gray-700 transition-all text-sm">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400"><i class="fa-solid fa-venus-mars"></i></div>
                <span class="dropdown-text">Perempuan</span>
                <i class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
              </button>
              <div class="absolute left-0 right-0 top-[100%] mt-2 bg-white border border-gray-100 rounded-xl shadow-lg z-[150] opacity-0 invisible -translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden">
                <div class="py-2">
                  <div class="px-5 py-3 hover:bg-blue-50 cursor-pointer text-sm font-bold text-blue-600 transition-colors dropdown-item flex items-center gap-2" data-value="L"><i class="fa-solid fa-mars"></i> Laki-Laki</div>
                  <div class="px-5 py-3 hover:bg-pink-50 cursor-pointer text-sm font-bold text-pink-600 transition-colors dropdown-item flex items-center gap-2" data-value="P"><i class="fa-solid fa-venus"></i> Perempuan</div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Tanggal Lahir</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400"><i class="fa-solid fa-calendar-day"></i></div>
              <input type="text" id="kader_tgl" class="datepicker w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 focus:bg-white focus:border-orange-400 focus:ring-4 focus:ring-orange-500/20 rounded-xl outline-none font-bold text-gray-700 transition-all placeholder-gray-400 cursor-pointer" placeholder="Pilih Tanggal">
            </div>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div>
            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Jabatan</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400"><i class="fa-solid fa-sitemap"></i></div>
              <input type="text" id="kader_jabatan" class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 focus:bg-white focus:border-orange-400 focus:ring-4 focus:ring-orange-500/20 rounded-xl outline-none font-bold text-gray-700 transition-all placeholder-gray-400" placeholder="Contoh: Ketua, Anggota">
            </div>
          </div>
          <div>
            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">No Handphone</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400"><i class="fa-solid fa-phone"></i></div>
              <input type="text" id="kader_nohp" class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 focus:bg-white focus:border-orange-400 focus:ring-4 focus:ring-orange-500/20 rounded-xl outline-none font-bold text-gray-700 transition-all placeholder-gray-400" placeholder="Contoh: 08123456789">
            </div>
          </div>
        </div>

        <div class="relative" style="z-index: 9998;">
          <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Status</label>
          <div class="relative custom-dropdown group" style="z-index: 9998;">
            <input type="hidden" id="kader_status" value="Aktif">
            <button type="button" class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 focus:bg-white focus:border-orange-400 focus:ring-4 focus:ring-orange-500/20 rounded-xl flex justify-between items-center dropdown-trigger font-bold text-gray-700 transition-all text-sm">
              <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400"><i class="fa-solid fa-power-off"></i></div>
              <span class="dropdown-text">Aktif</span>
              <i class="fa-solid fa-chevron-down text-gray-400 dropdown-icon pointer-events-none transition-transform duration-300"></i>
            </button>
            <div class="absolute left-0 right-0 bottom-[100%] mb-2 bg-white border border-gray-100 rounded-xl shadow-lg z-[150] opacity-0 invisible translate-y-2 transition-all duration-300 dropdown-menu overflow-hidden" style="z-index: 9998;">
              <div class="py-2">
                <div class="px-5 py-3 hover:bg-emerald-50 cursor-pointer text-sm font-bold text-emerald-600 transition-colors dropdown-item flex items-center gap-2" data-value="Aktif"><i class="fa-solid fa-check-circle"></i> Aktif</div>
                <div class="px-5 py-3 hover:bg-rose-50 cursor-pointer text-sm font-bold text-rose-600 transition-colors dropdown-item flex items-center gap-2" data-value="Nonaktif"><i class="fa-solid fa-times-circle"></i> Nonaktif</div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>

    <div class="px-6 py-5 border-t border-gray-100 bg-gray-50/50 rounded-b-3xl flex justify-end gap-3 shrink-0">
      <button type="button" onclick="window.closeKaderModal()" class="px-6 py-2.5 bg-white border border-gray-200 hover:bg-gray-50 text-gray-700 font-bold rounded-xl transition-all text-xs uppercase tracking-widest shadow-sm">Batal</button>
      <button type="button" onclick="window.handleKaderSubmit()" class="px-6 py-2.5 bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 text-white font-bold rounded-xl shadow-lg transition-all text-xs uppercase tracking-widest transform hover:-translate-y-0.5"><i class="fa-solid fa-save mr-2"></i> Simpan Data</button>
    </div>
  </div>
</div>

<!-- ===================================== -->
<!-- MODAL IMPORT KADER -->
<!-- ===================================== -->
<div id="importKaderModal" class="fixed inset-0 z-[100] hidden flex items-center justify-center transition-all duration-300 opacity-0">
  <div class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onclick="window.closeImportKaderModal()"></div>
  <div class="bg-white w-full max-w-3xl rounded-[2rem] shadow-2xl relative z-10 m-4 p-8 flex flex-col max-h-[90vh]">
    <div class="flex justify-between items-start mb-6">
      <div class="flex items-center gap-4">
        <div class="w-14 h-14 bg-orange-50 text-orange-600 rounded-2xl flex items-center justify-center shrink-0">
          <i class="fa-solid fa-file-import text-2xl"></i>
        </div>
        <div>
          <h3 class="text-2xl font-black text-gray-800 tracking-tight leading-none mb-1">Import Kader</h3>
          <p class="text-xs font-bold text-gray-400 uppercase tracking-widest">Copy-Paste Data Excel</p>
        </div>
      </div>
      <button onclick="window.closeImportKaderModal()" class="w-10 h-10 bg-gray-100 hover:text-red-500 rounded-full flex items-center justify-center transition-all duration-300 hover:rotate-90"><i class="fa-solid fa-xmark"></i></button>
    </div>

    <div class="relative z-10">
      <div class="bg-amber-50 border border-amber-100 rounded-2xl p-4 mb-5 text-sm text-amber-800">
        <div class="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-3">
          <div>
            <p class="font-bold mb-1"><i class="fa-solid fa-circle-info mr-1"></i> Panduan Copy-Paste Excel:</p>
            <p class="font-mono bg-white px-2 py-1 rounded border border-amber-200 mt-2 inline-block text-[10px] md:text-xs">Nama Kader | L/P | YYYY-MM-DD | Jabatan | No HP | Aktif/Nonaktif</p>
          </div>
          <div class="flex flex-row gap-2 shrink-0 w-full xl:w-auto mt-2 xl:mt-0">
            <a href="/api/template/kader" target="_blank" class="flex-1 xl:flex-none bg-white border border-amber-200 text-amber-600 hover:bg-amber-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
              <i class="fa-solid fa-download"></i> Template
            </a>
            @if(auth()->check() && auth()->user()->role === 'Super Admin')
            <label class="flex-1 xl:flex-none cursor-pointer bg-white border border-rose-200 text-rose-600 hover:bg-rose-600 hover:text-white px-3 py-2 rounded-xl text-[10px] font-bold transition-colors shadow-sm flex items-center justify-center gap-1.5 uppercase tracking-wide">
              <i class="fa-solid fa-upload"></i> Upload
              <input type="file" class="hidden" accept=".xlsx,.xls" onchange="window.uploadTemplate('kader', this)">
            </label>
            @endif
          </div>
        </div>
      </div>
      <textarea id="import_kader_data" class="w-full h-48 px-5 py-4 bg-gray-50 border border-gray-200 focus:bg-white focus:border-orange-400 focus:ring-4 focus:ring-orange-500/20 rounded-2xl outline-none font-mono text-sm shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)] custom-scrollbar resize-none whitespace-pre transition-all placeholder-gray-400" placeholder="Paste data excel Anda di sini..."></textarea>
      <div class="pt-6 flex gap-4 border-t border-gray-100 mt-5">
        <button type="button" onclick="window.closeImportKaderModal()" class="w-1/3 bg-white border-2 border-gray-100 hover:bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl transition-all text-xs uppercase tracking-widest">Batal</button>
        <button onclick="window.handleImportKaderSubmit()" class="w-2/3 bg-gradient-to-r from-orange-600 to-amber-600 hover:from-orange-700 hover:to-amber-700 text-white font-bold py-4 rounded-2xl shadow-[0_8px_20px_rgba(249,115,22,0.3)] hover:-translate-y-1 transition-all text-xs uppercase tracking-widest flex items-center justify-center gap-2"><i class="fa-solid fa-cloud-arrow-up"></i> Mulai Import</button>
      </div>
    </div>
  </div>
</div>

<!-- Removed missing assets/js/app.js -->

<!-- Security: Anti-Inspect & Anti-DevTools -->
<script>
  (function () {
    'use strict';

    // 2. Disable DevTools keyboard shortcuts
    document.addEventListener('keydown', function (e) {
      // F12
      if (e.key === 'F12' || e.keyCode === 123) {
        e.preventDefault(); e.stopPropagation(); return false;
      }
      // Ctrl+Shift+I (Inspect)
      if (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'i' || e.keyCode === 73)) {
        e.preventDefault(); e.stopPropagation(); return false;
      }
      // Ctrl+Shift+J (Console)
      if (e.ctrlKey && e.shiftKey && (e.key === 'J' || e.key === 'j' || e.keyCode === 74)) {
        e.preventDefault(); e.stopPropagation(); return false;
      }
      // Ctrl+Shift+C (Element picker)
      if (e.ctrlKey && e.shiftKey && (e.key === 'C' || e.key === 'c' || e.keyCode === 67)) {
        e.preventDefault(); e.stopPropagation(); return false;
      }
      // Ctrl+U (View Source)
      if (e.ctrlKey && (e.key === 'U' || e.key === 'u' || e.keyCode === 85)) {
        e.preventDefault(); e.stopPropagation(); return false;
      }
      // Ctrl+S (Save page)
      if (e.ctrlKey && (e.key === 'S' || e.key === 's' || e.keyCode === 83)) {
        e.preventDefault(); e.stopPropagation(); return false;
      }
      // Cmd+Option+I (Mac Inspect)
      if (e.metaKey && e.altKey && (e.key === 'I' || e.key === 'i' || e.keyCode === 73)) {
        e.preventDefault(); e.stopPropagation(); return false;
      }
      // Cmd+Option+J (Mac Console)
      if (e.metaKey && e.altKey && (e.key === 'J' || e.key === 'j' || e.keyCode === 74)) {
        e.preventDefault(); e.stopPropagation(); return false;
      }
      // Cmd+Option+U (Mac View Source)
      if (e.metaKey && e.altKey && (e.key === 'U' || e.key === 'u' || e.keyCode === 85)) {
        e.preventDefault(); e.stopPropagation(); return false;
      }
    });

    // 3. DevTools detection via debugger timing
    var _dtCheck = setInterval(function () {
      var start = performance.now();
      debugger;
      var end = performance.now();
      if (end - start > 100) {
        document.body.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100vh;background:#111;color:#ef4444;font-family:Inter,sans-serif;text-align:center;padding:40px;"><div><i class="fa-solid fa-shield-halved" style="font-size:4rem;margin-bottom:20px;display:block;"></i><h1 style="font-size:2rem;font-weight:900;margin-bottom:10px;">AKSES DITOLAK</h1><p style="color:#94a3b8;font-size:0.9rem;">Developer Tools terdeteksi. Halaman ini dilindungi.</p></div></div>';
        clearInterval(_dtCheck);
      }
    }, 3000);

    // 5. Console warning
    console.log('%c⛔ PERINGATAN!', 'color: red; font-size: 40px; font-weight: bold;');
    console.log('%cIni adalah fitur browser untuk developer. Jika seseorang menyuruh Anda menyalin atau menempel sesuatu di sini, itu adalah penipuan.', 'color: #333; font-size: 16px;');

  })();
</script>
</body>

</html>