{% extends 'admin_master/base_admin_master.html' if session.get('role') ==
'admin_master' else 'admin_keuangan/base_admin_keuangan.html' %} {% set
active_page = 'keu_tagihan' if session.get('role') == 'admin_master' else
'syahriyah' %} {% block title %}Keuangan Syahriyah{% endblock %} {% block
page_title %}Terima Pembayaran Syahriyah{% endblock %} {% block content %}

<div class="row">
  <div class="col-md-5 mb-4 align-self-start">
    <div class="card card-custom p-4">
      <h5 class="fw-bold border-bottom pb-2 mb-3">
        <i class="fas fa-search me-2 text-primary"></i> Cari Santri
      </h5>

      <form id="formCari" method="POST" action="">
        <div class="mb-3">
          <label class="form-label text-muted fw-bold small"
            >Masukkan NIS / ID Santri</label
          >
          <div class="input-group">
            <span class="input-group-text"><i class="fas fa-id-card"></i></span>
            <input
              type="text"
              id="inputNis"
              class="form-control"
              name="nis"
              placeholder="Contoh: 202601"
              required
            />
            <button class="btn btn-primary" type="submit">Cari Data</button>
          </div>
        </div>
      </form>

      <div class="mt-4">
        <h6 class="fw-bold text-muted mb-2">
          <i class="fas fa-list me-1"></i> Referensi Data Santri
        </h6>
        <div
          class="table-responsive"
          style="
            max-height: 350px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 5px;
          "
        >
          <table
            class="table table-hover table-sm mb-0"
            style="font-size: 0.85rem"
          >
            <thead
              class="table-light"
              style="position: sticky; top: 0; z-index: 1"
            >
              <tr>
                <th>ID Santri</th>
                <th>Nama Lengkap</th>
                <th class="text-center">Aksi</th>
              </tr>
            </thead>
            <tbody>
              {% for s in semua_santri %}
              <tr>
                <td class="fw-bold">{{ s.id_santri }}</td>
                <td>{{ s.nama_lengkap }}</td>
                <td class="text-center">
                  <button
                    class="btn btn-sm btn-outline-primary py-0 px-2"
                    onclick="pilihSantri('{{ s.id_santri }}')"
                  >
                    <i class="fas fa-hand-pointer"></i> Pilih
                  </button>
                </td>
              </tr>
              {% else %}
              <tr>
                <td colspan="3" class="text-center text-muted py-3">
                  Belum ada data di database
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-7 mb-4">
    <div
      class="card card-custom p-4 bg-light border border-dashed"
      style="max-height: calc(100vh - 120px); overflow-y: auto"
    >
      {% if error %}
      <div class="alert alert-danger mb-3">
        <i class="fas fa-exclamation-triangle me-2"></i> {{ error }}
      </div>
      {% endif %} {% if data_santri %}
      <h5 class="fw-bold border-bottom pb-2 mb-3">
        <i class="fas fa-user-check me-2 text-success"></i> Data Santri
        Ditemukan
      </h5>
      <div class="bg-white p-3 rounded shadow-sm mb-4">
        <table class="table table-borderless table-sm mb-0">
          <tr>
            <td width="130" class="text-muted">ID Santri</td>
            <td>
              :
              <span class="badge bg-primary fs-6"
                >{{ data_santri.id_santri }}</span
              >
            </td>
          </tr>
          <tr>
            <td class="text-muted">Nama Lengkap</td>
            <td>
              :
              <span class="fw-bold text-dark"
                >{{ data_santri.nama_lengkap }}</span
              >
            </td>
          </tr>
          <tr>
            <td class="text-muted">NISM</td>
            <td>: {{ data_santri.nism }}</td>
          </tr>
        </table>
      </div>

      <div class="row mb-4">
        <div class="col-12">
          <button
            type="button"
            class="btn btn-outline-primary w-100 fw-bold py-2 shadow-sm"
            onclick="bukaModalKasir('{{ data_santri.id_santri }}', '{{ data_santri.nama_lengkap }}', '{{ data_santri.jenis_kelamin }}', '{{ data_santri.status_mukim }}', '{{ data_santri.tingkat_kelas }}')"
          >
            <i class="fas fa-calculator me-2"></i> Input Pembayaran
          </button>
        </div>
      </div>

      <h6 class="fw-bold mt-2 mb-3">
        <i class="fas fa-file-invoice-dollar text-warning me-2"></i> Daftar
        Tagihan Belum Lunas (Bayar Otomatis)
      </h6>

      <form action="/admin_keuangan/proses_bayar_tagihan" method="POST">
        <input
          type="hidden"
          name="id_santri"
          value="{{ data_santri.id_santri }}"
        />
        <div class="table-responsive">
          <table
            class="table table-hover table-sm text-start mb-3"
            style="font-size: 0.9rem"
          >
            <thead class="table-light">
              <tr>
                <th class="text-center" width="50">
                  <input
                    type="checkbox"
                    id="checkAll"
                    class="form-check-input"
                  />
                </th>
                <th>Detail Tagihan</th>
                <th class="text-end">Sisa Bayar</th>
              </tr>
            </thead>
            <tbody>
              {% for tagihan in tagihan_list %}
              <tr>
                <td class="text-center">
                  <input
                    type="checkbox"
                    name="tagihan_ids[]"
                    value="{{ tagihan.id }}"
                    class="form-check-input tagihan-checkbox"
                  />
                </td>
                <td>
                  <strong>{{ tagihan.jenis_tagihan }}</strong>
                  {% if tagihan.bulan %} - {{ tagihan.bulan }}{% endif %}
                  <div class="small text-muted">
                    {{ tagihan.tanggal_tagihan.strftime('%d-%m-%Y') }}
                  </div>
                </td>
                <td class="text-end fw-bold text-danger">
                  Rp {{ "{:,.0f}".format(tagihan.nominal -
                  tagihan.jumlah_dibayar).replace(',', '.') }}
                </td>
              </tr>
              {% else %}
              <tr>
                <td colspan="3" class="text-center text-muted py-4">
                  <i
                    class="fas fa-check-circle text-success fs-2 mb-2 block"
                  ></i
                  ><br />
                  Semua tagihan santri ini sudah lunas.
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        {% if tagihan_list %}
        <button
          type="submit"
          class="btn btn-success w-100 fw-bold py-2 shadow-sm"
        >
          <i class="fas fa-check-circle me-2"></i> Proses Pembayaran Terpilih
        </button>
        {% endif %}
      </form>

      <!-- ================= SISIPAN RIWAYAT PEMBAYARAN ================= -->
      <div
        class="card border-0 shadow-sm mt-4 bg-white"
        style="border-radius: 10px"
      >
        <div class="card-body p-3">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="fw-bold mb-0">
              <i class="fas fa-history text-secondary me-2"></i> Riwayat
              Terakhir
            </h6>
            <a
              href="#"
              class="btn btn-sm btn-outline-primary"
              style="font-size: 0.75rem"
            >
              Lihat Detail
            </a>
          </div>

          <div class="table-responsive">
            <table
              class="table table-sm table-hover align-middle mb-0"
              style="font-size: 0.85rem"
            >
              <thead class="text-secondary" style="background-color: #f8fafc">
                <tr>
                  <th class="py-2 border-bottom-0">Tanggal</th>
                  <th class="py-2 border-bottom-0">Bulan Tagihan</th>
                  <th class="py-2 border-bottom-0">Nominal</th>
                  <th class="py-2 border-bottom-0 text-center">Aksi</th>
                  <!-- INI YANG DIUBAH -->
                </tr>
              </thead>
              <!-- ID PENTING DITARUH DI SINI -->
              <tbody id="tabel_riwayat_terakhir">
                <tr>
                  <td
                    colspan="4"
                    class="text-center text-muted py-3"
                    style="font-size: 12px"
                  >
                    <i class="fas fa-spinner fa-spin me-1"></i> Menunggu data...
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!-- ================= END RIWAYAT PEMBAYARAN ================= -->

      {% elif not error %}
      <div
        class="d-flex flex-column align-items-center justify-content-center h-100 text-center text-muted"
      >
        <i class="fas fa-user-graduate fs-1 mb-3 text-secondary"></i>
        <h5>Data Santri Belum Dipilih</h5>
        <p class="small">
          Silakan ketik ID atau pilih dari daftar di samping kiri.
        </p>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  // =====================================================
  // TARIF DARI DATABASE (via Pengaturan Tarif)
  // =====================================================
  const TARIF = {
      syahriyah_pondok_putra: {{ tarif.get('tarif_syahriyah_pondok_putra', 25000) }},
      syahriyah_pondok_putri: {{ tarif.get('tarif_syahriyah_pondok_putri', 25000) }},
      syahriyah_madin: {{ tarif.get('tarif_syahriyah_madin', 25000) }},
      pendaftaran_pondok: {{ tarif.get('tarif_pendaftaran_pondok', 50000) }},
      pendaftaran_madin: {{ tarif.get('tarif_pendaftaran_madin', 50000) }},
      daftar_ulang_pondok: {{ tarif.get('tarif_daftar_ulang_pondok', 30000) }},
      daftar_ulang_madin: {{ tarif.get('tarif_daftar_ulang_madin', 30000) }},
      jariyah_pondok: {{ tarif.get('tarif_jariyah_pondok', 50000) }},
      jariyah_madin: {{ tarif.get('tarif_jariyah_madin', 50000) }},
      kalender: {{ tarif.get('tarif_kalender', 27000) }},
      raport: {{ tarif.get('tarif_raport', 45000) }},
      semester_ganjil: {{ tarif.get('tarif_semester_ganjil', 10000) }},
      semester_genap: {{ tarif.get('tarif_semester_genap', 10000) }},
      uam: {{ tarif.get('tarif_uam', 50000) }},
      almamater_putra: {{ tarif.get('tarif_almamater_putra', 90000) }},
      almamater_putri: {{ tarif.get('tarif_almamater_putri', 90000) }},
      seragam_putih_putra: {{ tarif.get('tarif_seragam_putih_putra', 90000) }},
      seragam_putih_putri: {{ tarif.get('tarif_seragam_putih_putri', 90000) }},
      uang_makan_putra: {{ tarif.get('tarif_uang_makan_putra', 300000) }},
      uang_makan_putri: {{ tarif.get('tarif_uang_makan_putri', 300000) }},
      };

  function pilihSantri(id_santri) {
      document.getElementById('inputNis').value = id_santri;
      document.getElementById('formCari').submit();
  }

  // Script untuk check/uncheck all
  document.addEventListener("DOMContentLoaded", function () {
      const checkAll = document.getElementById('checkAll');
      const checkboxes = document.querySelectorAll('.tagihan-checkbox');

      if (checkAll) {
          checkAll.addEventListener('change', function () {
              checkboxes.forEach(cb => cb.checked = this.checked);
          });
      }

      checkboxes.forEach(cb => {
          cb.addEventListener('change', function () {
              if (!this.checked) checkAll.checked = false;
              if (document.querySelectorAll('.tagihan-checkbox:checked').length === checkboxes.length) checkAll.checked = true;
          });
      });
  });

  // --- FUNGSI BARU: POP-UP RINCIAN TAGIHAN (TATA LETAK DISEMPURNAKAN & ANTI-RUSAK) ---
  async function bukaModalTagihan(nisSantri, namaSantri, kelasSantri, jenisKelamin, statusMukim, tahunPilih = null) {
      if (!nisSantri) {
          Swal.fire('Peringatan', 'Silakan pilih santri terlebih dahulu!', 'warning');
          return;
      }

      Swal.fire({
          title: 'Menarik Data Tagihan...',
          allowOutsideClick: false,
          didOpen: () => { Swal.showLoading(); }
      });

      try {
          // 1. Cek Status Santri
          let jk = (jenisKelamin || "").toLowerCase();
          let isLakiLaki = ['laki-laki', 'putra', 'l', 'laki - laki', 'laki'].includes(jk.trim());
          let sm = (statusMukim || "").toLowerCase();
          let isMukim = sm === 'mukim' || sm === 'y' || sm === 'ya' || (sm.includes('mukim') && !sm.includes('non'));

          let isSantriLama = false;
          try {
              let resStatus = await fetch(`/api/get_status_santri/${nisSantri}`);
              let dataStatus = await resStatus.json();
              if (dataStatus.status === 'success') { isSantriLama = (dataStatus.kategori === 'Lama'); }
          } catch (e) { console.error(e); }

          // 2. Tarik Data Rekap Tagihan dari API
          let dataBulan = [];
          let syahriyahLunas = [];
          let komponenLunas = [];
          let tahunAjaran = '1446 H';
          let totalSyahriyahLunas = 0;
          let totalNominalLunas = 0;
          let totalNominalBelum = 0;

          try {
              let urlRekap = `/api/rekap_tagihan_tahunan/${nisSantri}`;
              if (tahunPilih) {
                  urlRekap += `?tahun=${encodeURIComponent(tahunPilih)}`;
              }
              let resRekap = await fetch(urlRekap);
              let dataRekap = await resRekap.json();
              if (dataRekap.status === 'success') {
                  syahriyahLunas = dataRekap.syahriyah_lunas || [];
                  komponenLunas = dataRekap.komponen_lain_lunas || [];
                  tahunPilih = dataRekap.tahun; // clean year string without ' H'
                  tahunAjaran = dataRekap.tahun + ' H';
              }
          } catch (e) { console.error("Gagal load API Rekap", e); }

          // 3. Render Tabel Syahriyah
          let htmlTabelSyahriyah = '';
          let bulanDefault = ['Muharram', 'Shafar', "Rabi'ul Awal", "Rabi'ul Akhir", 'Jumadil Awal', 'Jumadil Akhir', 'Rajab', "Sya'ban", 'Ramadhan', 'Syawal', "Dzulqa'dah", 'Dzulhijjah'];
          let listBulan = dataBulan.length > 0 ? dataBulan : bulanDefault.map(b => ({ bulan: b, status: 'Belum' }));

          let nomSyahriyahPondok = isLakiLaki ? TARIF.syahriyah_pondok_putra : TARIF.syahriyah_pondok_putri;
          let formatRp = (angka) => angka.toLocaleString('id-ID');
          let nomSyahriyahPondokStr = isMukim ? formatRp(nomSyahriyahPondok) : '0';
          let nomSyahriyahMadinStr = formatRp(TARIF.syahriyah_madin);
          let totalSyahriyahBulanIni = TARIF.syahriyah_madin + (isMukim ? nomSyahriyahPondok : 0);
          let totalSyahriyahBulanIniStr = formatRp(totalSyahriyahBulanIni);

          listBulan.forEach((item, index) => {
              let isLunas = syahriyahLunas.some(bulanLunas => (bulanLunas || '').toLowerCase().includes(item.bulan.toLowerCase())) || item.status === 'Lunas';
              if (isLunas) {
                  totalSyahriyahLunas++;
                  totalNominalLunas += totalSyahriyahBulanIni;
              } else {
                  totalNominalBelum += totalSyahriyahBulanIni;
              }

              let badgeTabel = isLunas
                  ? '<span class="text-success fw-bold text-nowrap"><i class="fas fa-check-circle"></i> Lunas</span>'
                  : '<span class="text-danger fw-bold text-nowrap"><i class="fas fa-times-circle"></i> Belum</span>';
              let bgStatus = isLunas ? '#f8fff9' : '#fff5f5';

              htmlTabelSyahriyah += `
                      <tr>
                          <td class="text-center py-1 td-custom">${index + 1}</td>
                          <td class="text-start py-1 ps-2 td-custom text-dark text-nowrap">${item.bulan}</td>
                          <td class="text-end py-1 pe-2 td-custom text-dark text-nowrap">${nomSyahriyahPondokStr}</td>
                          <td class="text-end py-1 pe-2 td-custom text-dark text-nowrap">${nomSyahriyahMadinStr}</td>
                          <td class="text-end py-1 pe-2 td-custom text-dark text-nowrap">${totalSyahriyahBulanIniStr}</td>
                          <td class="text-center py-1 td-custom" style="background-color: ${bgStatus};">${badgeTabel}</td>
                      </tr>
                  `;
          });

          // LOGIKA DETEKSI KELAS AKHIR
          let namaKelasBersih = String(kelasSantri || '').toUpperCase().replace(/[^A-Z0-9]/g, '');
          let berhakUAM = namaKelasBersih.includes("IIITSANAWIYAH") ||
              namaKelasBersih.includes("3TSANAWIYAH") ||
              namaKelasBersih.includes("IIIALIYAH") ||
              namaKelasBersih.includes("3ALIYAH");

          // 4. Render Tabel Biaya Lainnya (Teks disesuaikan agar hemat tempat)
          let nomDaftarPondok = isSantriLama ? TARIF.daftar_ulang_pondok : TARIF.pendaftaran_pondok;
          let nomDaftarMadin = isSantriLama ? TARIF.daftar_ulang_madin : TARIF.pendaftaran_madin;

          let biayaLainnya = [];
          if (isMukim) {
              biayaLainnya.push({ id: 'jariyah_pondok', jenis: 'Jariyah Pondok', ket: 'Tahunan', nominal: formatRp(TARIF.jariyah_pondok) });
              if (isSantriLama) {
                  biayaLainnya.push({ id: 'daftar_ulang_pondok', jenis: 'Daftar Ulang P.', ket: 'S. Lama', nominal: formatRp(nomDaftarPondok) });
              } else {
                  biayaLainnya.push({ id: 'pendaftaran_pondok', jenis: 'Pendaftaran Pondok', ket: 'S. Baru', nominal: formatRp(nomDaftarPondok) });
              }
          }

          biayaLainnya.push({ id: 'jariyah_madin', jenis: 'Jariyah Madin', ket: 'Tahunan', nominal: formatRp(TARIF.jariyah_madin) });
          if (isSantriLama) {
              biayaLainnya.push({ id: 'daftar_ulang_madin', jenis: 'Daftar Ulang M.', ket: 'S. Lama', nominal: formatRp(nomDaftarMadin) });
          } else {
              biayaLainnya.push({ id: 'pendaftaran_madin', jenis: 'Pendaftaran Madin', ket: 'S. Baru', nominal: formatRp(nomDaftarMadin) });
          }

          biayaLainnya.push(
              { id: 'kalender', jenis: 'Kalender', ket: 'Tahunan', nominal: formatRp(TARIF.kalender) },
              { id: 'semester_ganjil', jenis: 'Semester 1', ket: 'Ganjil', nominal: formatRp(TARIF.semester_ganjil) },
              { id: 'semester_genap', jenis: 'Semester 2', ket: 'Genap', nominal: formatRp(TARIF.semester_genap) }
          );

          if (berhakUAM) {
              biayaLainnya.push({ id: 'uam', jenis: 'UAM', ket: 'Kls Akhir', nominal: formatRp(TARIF.uam) });
          }

          // Kalkulator Otomatis Biaya Lainnya
          let htmlBiayaLain = '';
          let totalBiayaLainnya = 0;

          biayaLainnya.forEach((b, i) => {
              let isLunas = komponenLunas.includes(b.id);
              let badgeTabel = isLunas
                  ? '<span class="text-success fw-bold text-nowrap"><i class="fas fa-check-circle"></i> Lunas</span>'
                  : '<span class="text-danger fw-bold text-nowrap"><i class="fas fa-times-circle"></i> Belum</span>';
              let bgStatus = isLunas ? '#f8fff9' : '#fff5f5';

              let nomInt = parseInt(b.nominal.replace(/\./g, ''));
              totalBiayaLainnya += nomInt;
              if (isLunas) {
                  totalNominalLunas += nomInt;
              } else {
                  totalNominalBelum += nomInt;
              }

              htmlBiayaLain += `
                      <tr>
                          <td class="text-center py-1 td-custom">${i + 1}</td>
                          <td class="text-start py-1 ps-2 td-custom text-dark text-nowrap">${b.jenis}</td>
                          <td class="text-start py-1 text-muted td-custom text-nowrap" style="font-size: 10px;">${b.ket}</td>
                          <td class="text-end py-1 pe-2 td-custom text-dark text-nowrap">${b.nominal}</td>
                          <td class="text-center py-1 td-custom" style="background-color: ${bgStatus};">${badgeTabel}</td>
                      </tr>
                  `;
          });

          let strTotalBiayaLainnya = formatRp(totalBiayaLainnya);

          let tarifAlmamater = isLakiLaki ? TARIF.almamater_putra : TARIF.almamater_putri;
          let tarifPutih = isLakiLaki ? TARIF.seragam_putih_putra : TARIF.seragam_putih_putri;
          let uangMakan = (isLakiLaki && isMukim) ? TARIF.uang_makan_putra : 0;
          let totalSeragamKos = tarifAlmamater + tarifPutih + uangMakan;

          let totalSyahriyahTahunan = totalSyahriyahBulanIni * 12;
          let grandTotalSemua = totalSyahriyahTahunan + totalBiayaLainnya + totalSeragamKos;
          let strGrandTotal = formatRp(grandTotalSemua);

          // 5. Cek Seragam & Kos
          let ikonL = '<i class="fas fa-check-circle text-success ms-1"></i>';
          let ikonB = '<i class="fas fa-times-circle text-danger ms-1"></i>';

          let listSeragamKos = [];
          listSeragamKos.push({ id: 'uang_almamater', nominal: tarifAlmamater, nama: 'Almamater' });
          listSeragamKos.push({ id: 'uang_seragam_putih', nominal: tarifPutih, nama: 'Putih' });
          if (isLakiLaki && isMukim) listSeragamKos.push({ id: 'uang_kos_makan', nominal: uangMakan, nama: 'Kos Makan' });

          let seragamHtml = '';
          listSeragamKos.forEach(sk => {
              let isLunas = komponenLunas.includes(sk.id);
              if (isLunas) { totalNominalLunas += sk.nominal; } else { totalNominalBelum += sk.nominal; }
              let badge = isLunas ? ikonL : ikonB;
              seragamHtml += `<div class="d-flex justify-content-between text-dark"><span>${sk.nama} ${badge}</span><span>${formatRp(sk.nominal)}</span></div>`;
          });

          let almaLunas = komponenLunas.includes('uang_almamater') ? ikonL : ikonB;
          let putihLunas = komponenLunas.includes('uang_seragam_putih') ? ikonL : ikonB;
          let kosLunas = komponenLunas.includes('uang_kos_makan') ? ikonL : ikonB;

          // 6. Buat Dropdown Tahun Ajaran
          let tahunHTML = `<select id="select-tahun-tagihan" class="form-select form-select-sm d-inline-block w-auto border-success text-success fw-bold shadow-sm" onchange="bukaModalTagihan('${nisSantri}', '${namaSantri.replace(/'/g, "\\'")}', '${kelasSantri.replace(/'/g, "\\'")}', '${jenisKelamin}', '${statusMukim}', this.value)">`;
          for (let i = 1445; i <= 1455; i++) {
              let isSelected = (i == tahunPilih) ? 'selected' : '';
              tahunHTML += `<option value="${i}" ${isSelected}>Tahun Ajaran ${i} H</option>`;
          }
          tahunHTML += '</select>';

          window.pindahTabPopUp = function (target) {
              // Sembunyikan semua konten
              document.getElementById('konten-syahriyah').style.display = 'none';
              document.getElementById('konten-lainnya').style.display = 'none';

              let navS = document.getElementById('nav-syahriyah');
              let navL = document.getElementById('nav-lainnya');

              navS.classList.remove('active', 'text-dark');
              navS.classList.add('text-muted');
              navS.style.borderBottom = 'none';

              navL.classList.remove('active', 'text-dark');
              navL.classList.add('text-muted');
              navL.style.borderBottom = 'none';

              // Tampilkan yang dipilih
              document.getElementById('konten-' + target).style.display = 'block';
              let activeNav = document.getElementById('nav-' + target);
              activeNav.classList.add('active', 'text-dark');
              activeNav.classList.remove('text-muted');
              activeNav.style.borderBottom = '3px solid #0d6efd';
          };

          // --- 7. RENDER TAMPILAN GAYA BARU (BOOTSTRAP STANDARD) ---
          let badgeStatus = isSantriLama
              ? '<span class="badge bg-secondary ms-2">Santri Lama</span>'
              : '<span class="badge bg-primary ms-2">Santri Baru</span>';

          let htmlRincian = `
                  <div class="text-start" style="font-size: 13px;">

                      <!-- 1. BAGIAN HEADER & PROFIL (Mirip Modal Kasir) -->
                      <div class="alert alert-info py-2 mb-3 shadow-sm border-0">
                          <div class="row g-2 align-items-center">
                              <div class="col-md-7 text-start">
                                  <strong style="font-size: 14px; color: #0f5132;">
                                      <i class="fas fa-user-circle me-1"></i> ${nisSantri} - ${namaSantri || '-'} ${badgeStatus}
                                  </strong>
                                  <div class="mt-1" style="font-size: 12px; color: #0f5132;">
                                      <i class="fas fa-graduation-cap me-1"></i> Kelas: ${kelasSantri || '-'}
                                      <span class="ms-3"><i class="fas fa-check-circle me-1"></i> Syahriyah: ${totalSyahriyahLunas}/12 Lunas</span>
                                  </div>
                              </div>
                              <div class="col-md-5 d-flex justify-content-md-end gap-1 pe-5">
                                  ${tahunHTML}
                              </div>
                          </div>
                      </div>

                      <!-- 2. GRID UTAMA -->
                      <div class="row">

                          <!-- KOLOM KIRI: MENU TAB & TABEL -->
                          <div class="col-lg-8 mb-3">

                              <!-- Tombol Navigasi Tab (Bootstrap Standard) -->
                              <ul class="nav nav-tabs mb-3" style="border-bottom: 2px solid #dee2e6;">
                                  <li class="nav-item">
                                      <button id="nav-syahriyah" class="nav-link active fw-bold text-dark px-4" onclick="window.pindahTabPopUp('syahriyah')" style="border:none; border-bottom: 3px solid #0d6efd; background: transparent;">
                                          <i class="fas fa-calendar-alt me-1 text-primary"></i> Syahriyah
                                      </button>
                                  </li>
                                  <li class="nav-item">
                                      <button id="nav-lainnya" class="nav-link fw-bold text-muted px-4" onclick="window.pindahTabPopUp('lainnya')" style="border:none; background: transparent;">
                                          <i class="fas fa-box-open me-1"></i> Biaya Lainnya
                                      </button>
                                  </li>
                              </ul>

                              <!-- KONTEN TAB 1: SYAHRIYAH -->
                              <div id="konten-syahriyah" style="display: block;">
                                  <table class="table table-sm align-middle table-bordered table-hover mb-0">
                                      <thead class="table-dark text-center">
                                          <tr>
                                              <th style="width: 40px;">No</th>
                                              <th class="text-start">Bulan</th>
                                              <th>Pondok (Rp)</th>
                                              <th>Madin (Rp)</th>
                                              <th>Total (Rp)</th>
                                              <th style="width: 80px;">Status</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          ${htmlTabelSyahriyah}
                                          <tr class="table-info fw-bold">
                                              <td colspan="2" class="text-start ps-2">TOTAL 12 BULAN</td>
                                              <td class="text-end pe-2">${isMukim ? formatRp(nomSyahriyahPondok * 12) : '0'}</td>
                                              <td class="text-end pe-2">${formatRp(TARIF.syahriyah_madin * 12)}</td>
                                              <td class="text-end pe-2">${formatRp(totalSyahriyahTahunan)}</td>
                                              <td class="text-center"><i class="fas fa-check-circle text-success"></i></td>
                                          </tr>
                                      </tbody>
                                  </table>
                              </div>

                              <!-- KONTEN TAB 2: BIAYA LAINNYA -->
                              <div id="konten-lainnya" style="display: none;">
                                  <table class="table table-sm align-middle table-bordered table-hover mb-3">
                                      <thead class="table-dark text-center">
                                          <tr>
                                              <th style="width: 40px;">No</th>
                                              <th class="text-start">Jenis Pembayaran</th>
                                              <th class="text-start">Keterangan</th>
                                              <th>Nominal (Rp)</th>
                                              <th style="width: 80px;">Status</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          ${htmlBiayaLain}
                                          <tr class="table-info fw-bold">
                                              <td colspan="3" class="text-start ps-2">TOTAL BIAYA LAINNYA</td>
                                              <td class="text-end pe-2">${strTotalBiayaLainnya}</td>
                                              <td class="text-center"><i class="fas fa-check-circle text-success"></i></td>
                                          </tr>
                                      </tbody>
                                  </table>

                                  <!-- Rincian Seragam & Kos -->
                                  <div class="card border-primary mb-3">
                                      <div class="card-header bg-primary text-white fw-bold py-1">
                                          <i class="fas fa-tshirt me-1"></i> SERAGAM & BIAYA LAIN (${isLakiLaki ? 'PUTRA' : 'PUTRI'})
                                      </div>
                                      <div class="card-body py-2">
                                          ${seragamHtml}
                                      </div>
                                  </div>
                              </div>

                          </div>

                          <!-- KOLOM KANAN: RINGKASAN TOTAL -->
                          <div class="col-lg-4 mb-3">
                              <div class="card shadow-sm border-0 h-100 bg-light">
                                  <div class="card-header bg-dark text-white fw-bold py-2">
                                      <i class="fas fa-wallet me-1"></i> KAS KEUANGAN
                                  </div>
                                  <div class="card-body p-3">

                                      <div class="mb-3 pb-2 border-bottom border-secondary border-opacity-25">
                                          <div class="fw-bold text-dark mb-2 border-bottom border-secondary border-opacity-25 pb-1" style="font-size: 12px;">Rincian Total Beban</div>
                                          <div class="d-flex justify-content-between text-muted mb-1" style="font-size: 11px;"><span>Total Syahriyah</span><span>Rp${formatRp(totalSyahriyahTahunan)}</span></div>
                                          <div class="d-flex justify-content-between text-muted mb-1" style="font-size: 11px;"><span>Biaya Lainnya</span><span>Rp${strTotalBiayaLainnya}</span></div>
                                          <div class="d-flex justify-content-between text-muted mb-1" style="font-size: 11px;"><span>Seragam & Lain</span><span>Rp${formatRp(totalSeragamKos)}</span></div>
                                          <div class="d-flex justify-content-between fw-bold text-dark mt-2 pt-2 border-top border-secondary border-opacity-25" style="font-size: 12px;">
                                              <span>TOTAL KEWAJIBAN</span><span>Rp${strGrandTotal}</span>
                                          </div>
                                      </div>

                                      <!-- BLOK SISA TAGIHAN (PENTING) -->
                                      <div class="mb-3">
                                          <div class="d-flex justify-content-between text-muted mb-1" style="font-size: 12px;">
                                              <span>Telah Dibayar</span><span class="text-success fw-bold">Rp${formatRp(totalNominalLunas)}</span>
                                          </div>
                                          <div class="d-flex justify-content-between fw-bold text-dark mt-1" style="font-size: 14px;">
                                              <span>SISA TAGIHAN</span><span class="${totalNominalBelum > 0 ? 'text-danger' : 'text-success'} fs-5">Rp${formatRp(totalNominalBelum)}</span>
                                          </div>
                                      </div>

                                      <div class="text-center mt-3">
                                          <div class="alert ${totalNominalBelum === 0 ? 'alert-success' : 'alert-danger'} border border-${totalNominalBelum === 0 ? 'success' : 'danger'} fw-bold py-3 mb-0" style="font-size: 14px;">
                                              ${totalNominalBelum === 0 ? '<i class="fas fa-check-circle me-1"></i> TAGIHAN LUNAS' : '<i class="fas fa-exclamation-triangle me-1"></i> ADA TUNGGAKAN'}
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>

                      </div>

                  </div>
              `;

          Swal.fire({
              html: htmlRincian,
              width: '1150px',
              padding: '1.5em',
              showConfirmButton: true,
              showDenyButton: false,
              showCancelButton: true,
              showCloseButton: true,
              confirmButtonColor: '#059669', // Hijau tua elegan
              cancelButtonColor: '#f3f4f6',
              confirmButtonText: '<i class="fas fa-cash-register me-2"></i> <span class="fw-bold">BUKA MESIN KASIR</span>',
              cancelButtonText: '<span class="text-dark fw-bold">TUTUP</span>',
              customClass: {
                  title: 'd-none',
                  confirmButton: 'shadow-sm px-4 py-2 mx-1 border-0 rounded-2',
                  cancelButton: 'shadow-sm px-4 py-2 mx-1 border text-dark rounded-2',
                  popup: 'rounded-4'
              }
          })

          Swal.fire({
              html: htmlRincian,
              width: '1150px', // Pop-up diperlebar agar tidak ada teks terdesak
              showConfirmButton: true,
              showDenyButton: false,
              showCancelButton: true,
              showCloseButton: false,
              confirmButtonColor: '#0d6efd',
              cancelButtonColor: '#6c757d',
              confirmButtonText: '<i class="fas fa-cash-register me-1"></i> <span class="fw-bold" style="font-size: 13px;">BUKA MESIN KASIR</span>',
              cancelButtonText: '<span class="text-white fw-bold" style="font-size: 13px;">TUTUP</span>',
              customClass: {
                  title: 'd-none',
                  confirmButton: 'shadow-sm text-white px-4 py-2 mx-1',
                  cancelButton: 'shadow-sm text-white px-4 py-2 mx-1',
                  popup: 'rounded-3 p-4'
              }
          }).then((result) => {
              if (result.isConfirmed) {
                  let tombolKasirUtama = document.querySelector('button[onclick^="bukaModalKasir"]');
                  if (tombolKasirUtama) {
                      tombolKasirUtama.click();
                  } else {
                      Swal.fire('Info', 'Silakan klik tombol "Buka Mesin Kasir" yang berwarna hijau di halaman utama.', 'info');
                  }
              }
          });

      } catch (e) {
          Swal.fire('Error', 'Gagal memuat rincian tagihan.', 'error');
      }
  }

  // Fungsi Pembuat Baris Tabel Kasir Otomatis
  function generateRow(label, id, nominal, groupClass) {
      return `
          <tr>
              <td>
                  <div class="form-check">
                      <input class="form-check-input ${groupClass}" type="checkbox" id="cb_${id}" onchange="toggleInputState('${id}')">
                      <label class="form-check-label" for="cb_${id}">${label}</label>
                  </div>
              </td>
              <td style="width: 110px;">
                  <input type="number" id="${id}" class="form-control form-control-sm text-end input-bayar bg-light" value="${nominal}" disabled oninput="hitungTotalDinamic()">
              </td>
          </tr>`;
  }

  // Fungsi Aktif/Nonaktif Input Manual
  function toggleInputState(idInput) {
      let cb = document.getElementById('cb_' + idInput);
      let input = document.getElementById(idInput);
      if (input) {
          input.disabled = !cb.checked;
          input.classList.toggle('bg-light', !cb.checked);
      }
      hitungTotalDinamic();
  }

  // Fungsi Tombol Saklar "Pilih Semua"
  function toggleGroup(groupClass, isChecked) {
      document.querySelectorAll('.' + groupClass).forEach(cb => {
          if (!cb.disabled) {
              cb.checked = isChecked;
              let idInput = cb.id.replace('cb_', '');
              let inputField = document.getElementById(idInput);
              if (inputField) {
                  inputField.disabled = !isChecked;
                  inputField.classList.toggle('bg-light', !isChecked);
              }
          }
      });
      hitungTotalDinamic();
  }

  // Fungsi Penghitung Total Real-time
  function hitungTotalDinamic() {
      let grandTotal = 0;
      document.querySelectorAll('.input-bayar').forEach(input => {
          let cb = document.getElementById('cb_' + input.id);
          if (cb && cb.checked && !input.disabled) {
              grandTotal += parseInt(input.value) || 0;
          }
      });
      document.getElementById('total_wajib_bayar').innerText = 'Rp ' + grandTotal.toLocaleString('id-ID');
  }

  async function bukaModalKasir(idSantri, namaSantri, jenisKelamin, statusMukim, tingkat_kelas, idTransaksiGrup = null, indexBulanAktif = null) {

      // Jika belum ada ID Grup (Baru buka kasir), buat ID keranjang baru
      if (!idTransaksiGrup) {
          idTransaksiGrup = "TXM-" + new Date().getTime();
      }

      // =======================================================
      // 🤖 DETEKSI GENDER, STATUS MUKIM & SANTRI BARU/LAMA
      // =======================================================
      let isLakiLaki = ['laki-laki', 'putra', 'l', 'laki - laki', 'laki'].includes((jenisKelamin || "").toLowerCase().trim());
      let isMukim = (statusMukim || "").toLowerCase().includes('mukim') && !(statusMukim || "").toLowerCase().includes('non');
      let isSantriLama = false;

      try {
          let resStatus = await fetch(`/api/get_status_santri/${idSantri}`);
          let dataStatus = await resStatus.json();
          if (dataStatus.status === 'success') {
              isSantriLama = (dataStatus.kategori === 'Lama');
          }
      } catch (err) {
          console.error("Gagal mendeteksi status santri:", err);
      }

      // Tampilan Lencana
      let badgeStatus = isSantriLama
          ? '<span class="badge bg-secondary ms-2">Santri Lama</span>'
          : '<span class="badge bg-primary ms-2">Santri Baru</span>';

      // =======================================================
      // 🤖 ROBOT PENDETEKSI KELAS AKHIR (UAM)
      // =======================================================
      let dataKelasMentah = (typeof tingkat_kelas !== 'undefined' && tingkat_kelas !== null) ? tingkat_kelas :
          (typeof kelas !== 'undefined' && kelas !== null) ? kelas : "";

      let namaKelas = String(dataKelasMentah).replace(/\s+/g, ' ').toUpperCase().trim();

      let berhakUAM = namaKelas.includes("III TSANAWIYAH") ||
          namaKelas.includes("3 TSANAWIYAH") ||
          namaKelas.includes("III ALIYAH") ||
          namaKelas.includes("3 ALIYAH");

      // Set Variabel Dinamis
      let namaDaftarPondok = isSantriLama ? 'Daftar Ulang Pondok' : 'Pendaftaran Pondok';
      let idDaftarPondok = isSantriLama ? 'daftar_ulang_pondok' : 'pendaftaran_pondok';
      let nomDaftarPondok = isSantriLama ? TARIF.daftar_ulang_pondok : TARIF.pendaftaran_pondok;

      let namaDaftarMadin = isSantriLama ? 'Daftar Ulang Madin' : 'Pendaftaran Madin';
      let idDaftarMadin = isSantriLama ? 'daftar_ulang_madin' : 'pendaftaran_madin';
      let nomDaftarMadin = isSantriLama ? TARIF.daftar_ulang_madin : TARIF.pendaftaran_madin;
      let nomRaport = TARIF.raport;

      // =======================================================
      // 🤖 DETEKSI TAHUN & BULAN HIJRIYAH HARI INI (OTOMATIS)
      // =======================================================
      let tahunHariIni = 1446; // Nilai default jika browser tidak support
      let indexBulanHariIni = 0; // Nilai default (Muharram = 0)

      try {
          // Membaca tanggal sistem komputer dan konversi otomatis ke Hijriyah
          let kalenderHijriah = new Intl.DateTimeFormat('id-ID-u-ca-islamic', { year: 'numeric', month: 'numeric' }).formatToParts(new Date());

          let tahunTerdeteksi = parseInt(kalenderHijriah.find(part => part.type === 'year').value);
          let bulanTerdeteksi = parseInt(kalenderHijriah.find(part => part.type === 'month').value);

          if (!isNaN(tahunTerdeteksi)) tahunHariIni = tahunTerdeteksi;

          // Dikurangi 1 karena array bulanArray dimulai dari indeks 0
          if (!isNaN(bulanTerdeteksi)) indexBulanHariIni = bulanTerdeteksi - 1;
      } catch (error) {
          console.log("Browser tidak support auto-hijriyah, fallback ke nilai default.");
      }

      // Jika ini pertama kali modal dibuka (belum klik tambah bulan), atur ke bulan hari ini
      if (indexBulanAktif === null) {
          indexBulanAktif = indexBulanHariIni;
      }

      // 1. Generate Pilihan Tahun Hijriyah
      let tahunHTML = '';
      for (let i = 1446; i <= 1455; i++) {
          let isSelected = (i === tahunHariIni) ? 'selected' : '';
          tahunHTML += `<option value="${i} H" ${isSelected}>${i} H</option>`;
      }

      // 2. Generate Pilihan Bulan dengan mendeteksi indeks aktif (Agar otomatis maju ke bulan depannya)
      let bulanArray = ['Muharram', 'Shafar', "Rabi'ul Awal", "Rabi'ul Akhir", 'Jumadil Awal', 'Jumadil Akhir', 'Rajab', "Sya'ban", 'Ramadhan', 'Syawal', "Dzulqa'dah", 'Dzulhijjah'];
      let bulanHTML = '';
      bulanArray.forEach((bln, idx) => {
          let selected = (indexBulanAktif === idx) ? 'selected' : '';
          bulanHTML += `<option value="${bln}" data-index="${idx}" ${selected}>${bln}</option>`;
      });

      // 3. Render Tabel Pondok (Hanya jika Mukim)
      let tabelPondokHTML = isMukim ? `
      <tr>
          <td colspan="2" class="bg-light p-1">
              <div class="d-flex justify-content-between align-items-center">
                  <span class="fw-bold text-success" style="font-size: 11px;">KEUANGAN PONDOK</span>
                  <div class="form-check form-check-inline m-0">
                      <input class="form-check-input" type="checkbox" id="all_pondok" onchange="toggleGroup('cb-pondok', this.checked)">
                      <label class="form-check-label fw-bold text-dark" for="all_pondok" style="cursor:pointer; font-size: 11px;">Pilih Semua</label>
                  </div>
              </div>
          </td>
      </tr>
      ${generateRow(namaDaftarPondok, idDaftarPondok, nomDaftarPondok, 'cb-pondok')}
      ${generateRow('Syahriyah Pondok', 'syahriyah_pondok', isLakiLaki ? TARIF.syahriyah_pondok_putra : TARIF.syahriyah_pondok_putri, 'cb-pondok')}
      ${generateRow('Jariyah Pondok', 'jariyah_pondok', TARIF.jariyah_pondok, 'cb-pondok')}
  ` : ''; // Kosongkan jika Non-Mukim

      // Desain HTML Dalam Pop-up
      let htmlRincian = `
      <div class="text-start" style="font-size: 13px;">
          <div class="alert alert-info py-2 mb-3 shadow-sm border-0">
              <div class="row g-2 align-items-center">
                  <div class="col-md-5 text-start">
                      <strong style="font-size: 14px; color: #0f5132;"><i class="fas fa-user-circle me-1"></i> ${idSantri} - ${namaSantri} ${badgeStatus}</strong>
                  </div>

                  <div class="col-md-7 d-flex justify-content-md-end gap-1 alignment-dropdown-kasir">
                      <select class="form-select form-select-sm border-secondary shadow-sm px-2 py-1" id="swal_tahun_bayar" style="font-size: 12px; width: 90px; cursor: pointer;">
                          ${tahunHTML}
                      </select>
                      <select class="form-select form-select-sm border-secondary shadow-sm px-2 py-1" id="swal_bulan_bayar" style="font-size: 12px; width: 130px; cursor: pointer;">
                          ${bulanHTML}
                      </select>
                      <input type="text" class="form-control form-control-sm border-secondary shadow-sm px-2 py-1 bg-light text-muted" id="swal_petugas_kasir" value="{{ session.nama }}" style="font-size: 12px; width: 110px;" readonly title="Kasir Otomatis Sesuai Login">
                  </div>
              </div>
          </div>

          <p class="text-muted mb-2" style="font-size: 12px;"><i class="fas fa-info-circle"></i> Centang komponen biaya yang ingin dilunasi.</p>

          <div class="row">
              <div class="col-lg-6 mb-3">
                  <table class="table table-sm align-middle table-bordered mb-0">
                      <thead class="table-dark">
                          <tr><th colspan="2" class="py-2"><i class="fas fa-university me-1"></i> PEMBAYARAN PONDOK & MADIN</th></tr>
                      </thead>
                      <tbody>
                          ${tabelPondokHTML}

                          <tr>
                              <td colspan="2" class="bg-light p-1">
                                  <div class="d-flex justify-content-between align-items-center">
                                      <span class="fw-bold text-primary" style="font-size: 11px;">KEUANGAN MADIN</span>
                                      <div class="form-check form-check-inline m-0">
                                          <input class="form-check-input" type="checkbox" id="all_madin" onchange="toggleGroup('cb-madin', this.checked)">
                                          <label class="form-check-label fw-bold text-dark" for="all_madin" style="cursor:pointer; font-size: 11px;">Pilih Semua</label>
                                      </div>
                                  </div>
                              </td>
                          </tr>
                          ${generateRow(namaDaftarMadin, idDaftarMadin, nomDaftarMadin, 'cb-madin')}
                          ${generateRow('Syahriyah Madin', 'syahriyah_madin', TARIF.syahriyah_madin, 'cb-madin')}
                          ${generateRow('Jariyah Madin', 'jariyah_madin', TARIF.jariyah_madin, 'cb-madin')}
                          ${generateRow('Kalender', 'kalender', TARIF.kalender, 'cb-madin')}
                          ${generateRow('Raport', 'raport', nomRaport, 'cb-madin')}
                      </tbody>
                  </table>
              </div>

              <div class="col-lg-6">
                  <!-- TABEL SERAGAM / TITIPAN -->
                  <table class="table table-sm align-middle table-bordered mb-3">
                      <thead style="background-color: #cce5ff; color: #004085;">
                          <tr>
                              <th colspan="2" class="p-2">
                                  <div class="d-flex justify-content-between align-items-center">
                                      <span><i class="fas fa-box-open me-1"></i> SERAGAM, DLL</span>
                                      <div class="form-check form-check-inline m-0">
                                          <input class="form-check-input" type="checkbox" id="all_titipan" onchange="toggleGroup('cb-titipan', this.checked)">
                                          <label class="form-check-label fw-bold" for="all_titipan" style="cursor:pointer; font-size: 11px;">Pilih Semua</label>
                                      </div>
                                  </div>
                              </th>
                          </tr>
                      </thead>
                      <tbody>
                          ${generateRow('Seragam Almamater', 'uang_almamater', isLakiLaki ? TARIF.almamater_putra : TARIF.almamater_putri, 'cb-titipan')}
                          ${generateRow('Seragam Putih <span class="badge bg-secondary ms-1" style="font-size:10px;">Opsional</span>', 'uang_seragam_putih', isLakiLaki ? TARIF.seragam_putih_putra : TARIF.seragam_putih_putri, 'cb-titipan')}
                          ${(isLakiLaki && isMukim) ? generateRow('Kos Makan', 'uang_kos_makan', TARIF.uang_makan_putra, 'cb-titipan') : ''}
                      </tbody>
                  </table>

                  <!-- TABEL TAGIHAN MUSIMAN / UJIAN -->
                  <table class="table table-sm align-middle table-bordered mb-3">
                      <thead style="background-color: #fff3cd; color: #856404;">
                          <tr>
                              <th colspan="2" class="p-2">
                                  <div class="d-flex justify-content-between align-items-center">
                                      <span><i class="fas fa-file-alt me-1"></i> TAGIHAN MUSIMAN / UJIAN</span>
                                      <div class="form-check form-check-inline m-0">
                                          <input class="form-check-input" type="checkbox" id="all_musiman" onchange="toggleGroup('cb-musiman', this.checked)">
                                          <label class="form-check-label fw-bold" for="all_musiman" style="cursor:pointer; font-size: 11px;">Pilih Semua</label>
                                      </div>
                                  </div>
                              </th>
                          </tr>
                      </thead>
                      <tbody>
                          ${generateRow('Semester Ganjil', 'semester_ganjil', TARIF.semester_ganjil, 'cb-musiman')}
                          ${generateRow('Semester Genap', 'semester_genap', TARIF.semester_genap, 'cb-musiman')}
                          ${berhakUAM ? generateRow('Ujian Akhir Madin (UAM)', 'uam', TARIF.uam, 'cb-musiman') : ''}
                      </tbody>
                  </table>

                  <div class="bg-success text-white p-2 rounded shadow-sm d-flex flex-column align-items-center justify-content-center mb-3">
                      <span class="fw-bold" style="font-size: 11px;">TOTAL DIBAYAR SEKARANG:</span>
                      <span class="fw-bold" style="font-size: 20px;" id="total_wajib_bayar">Rp 0</span>
                  </div>
              </div>
          </div>
      </div>
  `;

      Swal.fire({
          title: 'Proses Pembayaran Kasir',
          html: htmlRincian,
          width: '850px',
          showCancelButton: true,
          confirmButtonColor: '#0d6efd',
          cancelButtonColor: '#6c757d',
          confirmButtonText: '<i class="fas fa-save me-1"></i> Simpan Transaksi',
          cancelButtonText: 'Tutup',
          allowOutsideClick: false,

          didOpen: () => {
              const dropdownTahun = document.getElementById('swal_tahun_bayar');
              const dropdownBulan = document.getElementById('swal_bulan_bayar');
              const confirmButton = Swal.getConfirmButton();

              async function deteksiStatusLunas() {
                  let tahunMentah = dropdownTahun.value;
                  let tahunBersih = tahunMentah.replace(' H', '').trim();
                  let bulanDipilih = dropdownBulan.value;

                  try {
                      let response = await fetch(`/api/cek_komponen?nis=${idSantri}&tahun=${tahunBersih}&bulan=${bulanDipilih}`);
                      let data = await response.json();

                      if (data.status === 'success') {
                          let komponen = data.komponen_lunas || {};

                          document.querySelectorAll('.input-bayar').forEach(input => {
                              let idKomponen = input.id;
                              let cb = document.getElementById('cb_' + idKomponen);
                              let label = document.querySelector(`label[for='cb_${idKomponen}']`);

                              if (label && label.innerHTML.includes('LUNAS')) {
                                  label.innerHTML = label.innerHTML.replace(' <span class="badge bg-success ms-1" style="font-size:9px;">LUNAS</span>', '');
                              }

                              if (komponen[idKomponen]) {
                                  if (cb) {
                                      cb.disabled = true;
                                      cb.checked = false;
                                  }
                                  input.disabled = true;
                                  input.classList.add('bg-light');

                                  if (label) {
                                      label.innerHTML += ' <span class="badge bg-success ms-1" style="font-size:9px;">LUNAS</span>';
                                  }
                              }
                              else {
                                  if (cb) {
                                      cb.disabled = false;
                                  }
                              }
                          });

                          let checkboxAktif = document.querySelectorAll('.form-check-input:not(:disabled):not([id^="all_"])');

                          if (checkboxAktif.length === 0) {
                              confirmButton.disabled = true;
                              Swal.showValidationMessage(`<i class="fas fa-check-circle me-1"></i> Semua komponen bulan ${bulanDipilih} ${tahunMentah} SUDAH LUNAS.`);
                              const valMessage = Swal.getValidationMessage();
                              if (valMessage) {
                                  valMessage.style.backgroundColor = '#d1e7dd';
                                  valMessage.style.color = '#0f5132';
                              }
                          } else {
                              confirmButton.disabled = false;
                              Swal.resetValidationMessage();
                          }

                          hitungTotalDinamic();
                      }
                  } catch (error) {
                      console.error("Gagal mengecek status lunas per komponen:", error);
                  }
              }

              dropdownTahun.addEventListener('change', deteksiStatusLunas);
              dropdownBulan.addEventListener('change', deteksiStatusLunas);
              deteksiStatusLunas();
          },

          preConfirm: () => {
              let selectBulan = document.getElementById('swal_bulan_bayar');
              let bulanTerpilih = selectBulan.value;
              // Tangkap index bulan saat ini untuk modal otomatis maju ke bulan depan
              let currentIdx = parseInt(selectBulan.options[selectBulan.selectedIndex].getAttribute('data-index'));
              let tahunTerpilih = document.getElementById('swal_tahun_bayar').value;
              let petugasTerpilih = document.getElementById('swal_petugas_kasir').value;

              let totalNominal = 0;
              let dataKirim = {};

              document.querySelectorAll('.input-bayar').forEach(input => {
                  let idKomponen = input.id;
                  let cb = document.getElementById('cb_' + idKomponen);

                  // HANYA proses data JIKA checkbox-nya ADA dan sedang DICENTANG
                  if (cb && cb.checked && !cb.disabled) {
                      let nominal = parseInt(input.value) || 0;
                      totalNominal += nominal;
                      dataKirim[idKomponen] = nominal;
                  }
              });

              if (totalNominal <= 0) {
                  Swal.showValidationMessage('Gagal: Minimal centang 1 komponen biaya yang belum lunas!');
                  return false;
              }

              dataKirim['nis'] = idSantri;
              dataKirim['nama_lengkap'] = namaSantri;
              dataKirim['kelas'] = tingkat_kelas || '-';
              dataKirim['status_mukim'] = statusMukim || '-';
              dataKirim['jenis_kelamin'] = jenisKelamin || '-';

              dataKirim['petugas_kasir'] = petugasTerpilih;
              dataKirim['tahun_bayar'] = tahunTerpilih;
              dataKirim['bulan_pilihan'] = bulanTerpilih;

              // KUNCI: Kirimkan ID Keranjang ke Python
              dataKirim['id_transaksi_grup'] = idTransaksiGrup;

              return fetch('/admin_keuangan/proses_bayar', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify(dataKirim)
              })
                  .then(response => response.json())
                  .then(data => {
                      if (data.status === 'success') {
                          // Sisipkan data ID dan bulan depan untuk pop up selanjutnya
                          data.id_grup = idTransaksiGrup;
                          data.next_index = (currentIdx + 1) % 12; // Jika sampai Dzulhijjah, kembali ke Muharram
                          return data;
                      } else {
                          throw new Error(data.message);
                      }
                  })
                  .catch(error => {
                      Swal.showValidationMessage(`Error: ${error}`);
                  });
          }
      }).then((result) => {
          if (result.isConfirmed && result.value) {
              let data = result.value;

              // POP UP BARU UNTUK PILIHAN LANJUT / CETAK / TUTUP
              Swal.fire({
                  title: 'Transaksi Disimpan!',
                  text: 'Apakah ada tagihan bulan lain yang ingin dibayar sekaligus?',
                  icon: 'success',
                  showCancelButton: true,
                  showDenyButton: true,

                  // 1. Matikan gaya tombol raksasa bawaan SweetAlert
                  buttonsStyling: false,

                  // 2. Gunakan gaya tombol kecil (btn-sm) dari Bootstrap yang lebih rapi
                  customClass: {
                      confirmButton: 'btn btn-primary btn-sm px-3 mx-1 shadow-sm',
                      denyButton: 'btn btn-success btn-sm px-3 mx-1 shadow-sm',
                      cancelButton: 'btn btn-outline-danger btn-sm px-3 mx-1 shadow-sm'
                  },

                  // 3. Teksnya kita buat lebih padat agar tidak kepanjangan
                  confirmButtonText: '<i class="fas fa-print me-1"></i> Cetak Nota',
                  denyButtonText: '<i class="fas fa-cart-plus me-1"></i> Tambah Bulan',
                  cancelButtonText: '<i class="fas fa-times me-1"></i> Tutup'

              }).then((pilihan) => {
                  if (pilihan.isConfirmed) {
                      // Pilihan 1: Selesai & Cetak
                      window.open(`/admin_keuangan/cetak_kuitansi_syahriyah/${data.id_grup}`, '_blank');
                      window.location.reload();
                  } else if (pilihan.isDenied) {
                      // Pilihan 2: LANJUT KE BULAN DEPAN
                      bukaModalKasir(idSantri, namaSantri, jenisKelamin, statusMukim, tingkat_kelas, data.id_grup, data.next_index);
                  } else {
                      // Pilihan 3: Kasir klik "Tutup"
                      window.location.reload();
                  }
              });
          }
      });
  }

  if (window.history.replaceState) {
      window.history.replaceState(null, null, window.location.href);
  }

  // ==========================================
  // FUNGSI MEMUAT RIWAYAT PEMBAYARAN
  // ==========================================
  async function loadRiwayatTerakhir(nis) {
      let tbody = document.getElementById('tabel_riwayat_terakhir');
      const escapeHtml = value => String(value ?? '').replace(/[&<>'"]/g, ch => ({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','\"':'&quot;'}[ch]));

      try {
          let response = await fetch(`/api/riwayat_santri/${nis}`);
          let res = await response.json();

          if (res.status === 'success') {
              if (res.data.length === 0) {
                  tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-3" style="font-size: 12px;">Belum ada riwayat pembayaran</td></tr>';
              } else {
                  let html = '';
                  res.data.forEach(trx => {
                      // Format Rupiah
                      let formatRupiah = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(trx.total_diterima);

                      html += `
                          <tr style="font-size: 13px;">
                              <td>${escapeHtml(trx.tanggal_format)}</td>
                              <td>Syahriyah ${escapeHtml(trx.spp_bulan)} ${escapeHtml(trx.untuk_tahun)}</td>
                              <td>${formatRupiah}</td>
                              <td class="text-center">
                                  <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" style="font-size: 11px;" onclick="window.open('/admin_keuangan/cetak_kuitansi_syahriyah/${trx.id_transaksi}', '_blank')">
                                      <i class="fas fa-print me-1"></i> Cetak
                                  </button>
                              </td>
                          </tr>
                          `;
                  });
                  tbody.innerHTML = html;
              }
          } else {
              tbody.innerHTML = `<tr><td colspan="4" class="text-center text-danger py-3" style="font-size: 12px;"><b>Error:</b> ${escapeHtml(res.message)}</td></tr>`;
          }
      } catch (e) {
          tbody.innerHTML = `<tr><td colspan="4" class="text-center text-danger py-3" style="font-size: 12px;"><b>Gagal koneksi ke server API</b></td></tr>`;
          console.error("Error load riwayat:", e);
      }
  }

  // ================================================================
  // MASUKKAN KODE INI (PEMICU OTOMATIS SAAT HALAMAN SELESAI DIMUAT)
  // ================================================================
  document.addEventListener("DOMContentLoaded", function () {
      // Menggunakan inline Jinja di dalam string agar VS Code tidak bingung
      let nisSantri = "{{ data_santri.id_santri if data_santri else '' }}";

      // Cek apakah string tidak kosong (artinya ada data santri yang di-render)
      if (nisSantri !== "") {
          // Langsung tembak API riwayat secara otomatis!
          loadRiwayatTerakhir(nisSantri);
      }
  });
</script>
{% endblock %}