{% extends 'admin_master/base_admin_master.html' if session.get('role') == 'admin_master' else 'admin_psb/base_admin_psb.html' %}
{% set active_page = 'psb_keuangan' if session.get('role') == 'admin_master' else 'keuangan' %}

{% block page_title %}<i class="fas fa-wallet text-primary me-2"></i> Keuangan Santri Baru{% endblock %}

{% block content %}



<div class="section-header mt-2">
    <i class="fas fa-hourglass-half text-warning"></i>
    <h6>Menunggu Pembayaran</h6>
</div>
<div class="card border-0 shadow-sm rounded-4 mb-4 p-3" style="background: white;">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 custom-table">
        <thead>
            <tr class="bg-light">
                    <th>NO. PEND</th>
                    <th>NAMA SANTRI</th>
                    <th>L/P</th>
                    <th>STATUS VERIFIKASI</th>
                    <th>AKSI KASIR</th>
                </tr>
            </thead>
            <tbody>
                {% for row in belum_bayar %}
                <tr>
                    <td class="fw-bold text-primary">{{ row.id_pendaftaran }}</td>
                    <td>{{ row.nama_lengkap }}</td>
                    <td>{{ row.jenis_kelamin }}</td>
                    <td><span class="badge bg-success bg-opacity-10 text-success rounded-pill fw-semibold border border-success px-3 py-2"><i class="fas fa-check me-1"></i> {{ row.status_verifikasi }}</span></td>
                    <td>
                        <button class="btn btn-primary btn-sm btn-action fw-bold"
                            data-id="{{ row.id_pendaftaran | escape }}"
                            data-nama="{{ row.nama_lengkap | escape }}"
                            data-jk="{{ row.jenis_kelamin | escape }}"
                            data-mukim="{{ row.status_mukim | escape }}"
                            onclick="bukaModalPembayaran(this.getAttribute('data-id'), this.getAttribute('data-nama'), this.getAttribute('data-jk'), this.getAttribute('data-mukim'))">
                            <i class="fas fa-money-check-alt me-1"></i> Proses Bayar
                        </button>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="text-center py-4 text-muted">Tidak ada tagihan yang menunggu.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="section-header mt-2">
    <i class="fas fa-history text-success"></i>
    <h6>Riwayat Transaksi (Lunas & Cicilan)</h6>
</div>
<div class="card border-0 shadow-sm rounded-4 mb-4 p-3" style="background: white;">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 custom-table">
        <thead>
            <tr class="bg-light">
                    <th>TANGGAL BAYAR</th>
                    <th>IDENTITAS SANTRI</th>
                    <th>HAK BENDAHARA</th>
                    <th>SERAGAM DAN KOS</th>
                    <th>PETUGAS KASIR</th>
                    <th>AKSI</th>
                </tr>
            </thead>
            <tbody>
                {% for rw in riwayat_bayar %}
                <tr>
                    <td><small class="text-muted">{{ rw.tanggal_bayar }}</small></td>
                    <td>
                        <span class="badge bg-dark mb-1">{{ rw.no_nota }}</span><br>
                        <strong>{{ rw.nama_santri }}</strong>
                    </td>
                    <td class="fw-bold text-success">Rp {{ "{:,.0f}".format(rw.hak_bendahara or 0).replace(',', '.') }}
                    </td>
                    <td class="fw-bold text-primary">Rp {{ "{:,.0f}".format(rw.hak_titipan or 0).replace(',', '.') }}
                    </td>
                    <td><small><i class="fas fa-user-tie me-1"></i> {{ rw.petugas }}</small></td>
                    <td>
                        <a href="/admin_psb/cetak_kuitansi/{{ rw.no_nota }}" target="_blank"
                            class="btn btn-secondary btn-sm btn-action fw-bold">
                            <i class="fas fa-print me-1"></i> Cetak
                        </a>
                        <button class="btn btn-danger btn-sm btn-action fw-bold ms-1"
                            onclick="hapusTransaksi('{{ rw.no_nota }}')">
                            <i class="fas fa-trash me-1"></i> Batal
                        </button>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="text-center py-4 text-muted">Belum ada riwayat transaksi nota.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // =====================================================
    // TARIF DARI DATABASE (via Pengaturan Tarif)
    // =====================================================
    const TARIF_RAW = {{ tarif | tojson | safe }};
    const getTarif = (key, defaultVal) => TARIF_RAW[key] != null ? parseInt(TARIF_RAW[key]) : defaultVal;

    const TARIF = {
        syahriyah_pondok_putra: getTarif('tarif_syahriyah_pondok_putra', 25000),
        syahriyah_pondok_putri: getTarif('tarif_syahriyah_pondok_putri', 25000),
        syahriyah_madin: getTarif('tarif_syahriyah_madin', 25000),
        pendaftaran_pondok: getTarif('tarif_pendaftaran_pondok', 50000),
        pendaftaran_madin: getTarif('tarif_pendaftaran_madin', 50000),
        daftar_ulang_pondok: getTarif('tarif_daftar_ulang_pondok', 30000),
        daftar_ulang_madin: getTarif('tarif_daftar_ulang_madin', 30000),
        jariyah_pondok: getTarif('tarif_jariyah_pondok', 50000),
        jariyah_madin: getTarif('tarif_jariyah_madin', 50000),
        kalender: getTarif('tarif_kalender', 27000),
        raport: getTarif('tarif_raport', 45000),
        semester_ganjil: getTarif('tarif_semester_ganjil', 10000),
        semester_genap: getTarif('tarif_semester_genap', 10000),
        uam: getTarif('tarif_uam', 50000),
        almamater_putra: getTarif('tarif_almamater_putra', 90000),
        almamater_putri: getTarif('tarif_almamater_putri', 90000),
        seragam_putih_putra: getTarif('tarif_seragam_putih_putra', 90000),
        seragam_putih_putri: getTarif('tarif_seragam_putih_putri', 90000),
        uang_makan_putra: getTarif('tarif_uang_makan_putra', 300000),
        uang_makan_putri: getTarif('tarif_uang_makan_putri', 300000),
    };

    // 1. Fungsi penghitung TOTAL DIBAYAR SEKARANG secara real-time (Hanya yang dicentang)
    function hitungTotalDinamic() {
        let grandTotal = 0;
        document.querySelectorAll('.input-bayar').forEach(input => {
            let cb = document.getElementById('cb_' + input.id);
            if (cb && cb.checked) {
                grandTotal += parseInt(input.value) || 0;
            }
        });
        document.getElementById('total_wajib_bayar').innerText = 'Rp ' + grandTotal.toLocaleString('id-ID');
    }

    // 2. Fungsi aktif/nonaktif input individual saat checkbox dicentang 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();
    }

    // 3. Fungsi Tombol Saklar "Pilih Semua" Per Kelompok Komponen
    function toggleGroup(groupClass, isChecked) {
        document.querySelectorAll('.' + groupClass).forEach(cb => {
            // Hanya mencentang komponen yang TIDAK disabled (belum lunas)
            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();
    }

    // 4. FUNGSI UTAMA: Pemanggil Pop-up Kasir & Sistem Deteksi Riwayat Kunci
    // 4. FUNGSI UTAMA: Pemanggil Pop-up Kasir & Sistem Deteksi Riwayat Kunci
    function bukaModalPembayaran(idPendaftaran, namaSantri, jenisKelamin, statusMukim) {
        fetch(`/api/cek_riwayat_pembayaran/${idPendaftaran}`)
            .then(response => response.json())
            .then(history => {
                let hb = history.bendahara || {};
                let ht = history.titipan || {};

                let isPutra = ['laki-laki', 'putra', 'l'].includes((jenisKelamin || "").toLowerCase());
                let isMukim = (statusMukim || "").toLowerCase().includes('mukim') && !(statusMukim || "").toLowerCase().includes('non');

                let labelMukim = isMukim ? "Mukim" : "Non-Mukim";
                let labelGender = isPutra ? "Putra" : "Putri";
                let tarifSeragamSatuan = isPutra ? TARIF.almamater_putra : TARIF.almamater_putri;
                let tarifSeragamPutihSatuan = isPutra ? TARIF.seragam_putih_putra : TARIF.seragam_putih_putri;
                let tarifMakan = (isPutra && isMukim) ? TARIF.uang_makan_putra : 0;
                let nomSyahriyahPondok = isPutra ? TARIF.syahriyah_pondok_putra : TARIF.syahriyah_pondok_putri;

                // HITUNG CONTEKAN: Seragam Putih dihapus dari hitungan wajib (tidak dikali 2 lagi)
                let totalPondokFull = isMukim ? (TARIF.pendaftaran_pondok + nomSyahriyahPondok + TARIF.jariyah_pondok) : 0;
                let totalMadinFull = TARIF.pendaftaran_madin + TARIF.syahriyah_madin + TARIF.jariyah_madin + TARIF.kalender + TARIF.raport;
                let totalTitipanFull = tarifSeragamSatuan + tarifMakan;
                let grandTotalFull = totalPondokFull + totalMadinFull + totalTitipanFull;


                // STRUKTUR HTML POP-UP KASIR (UI DIRAPIKAN)
                let htmlRincian = `
            <div class="text-start" style="font-size: 13px;">
                <div class="alert alert-info py-2 mb-3 shadow-sm border-0 d-flex justify-content-between align-items-center">
                    <div><strong>${idPendaftaran}</strong> - ${namaSantri}</div>
                    <div class="badge bg-primary fs-6"><i class="fas fa-user me-1"></i> ${jenisKelamin} &nbsp;|&nbsp; <i class="fas fa-home me-1"></i> ${labelMukim}</div>
                </div>
                
                <p class="text-muted mb-3" style="font-size: 12px;"><i class="fas fa-info-circle"></i> Komponen yang sudah lunas otomatis terkunci. Gunakan tombol <strong>Pilih Semua</strong> untuk memproses sisa tagihan.</p>

                <div class="row">
                    <!-- KOLOM KIRI: KAS BENDAHARA -->
                    <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> KAS BENDAHARA UTAMA</th></tr>
                            </thead>
                            <tbody>
                                ${isMukim ? `
                                <tr>
                                    <td colspan="2" class="bg-light p-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-bold text-success" style="font-size: 11px;">KOMPONEN PONDOK</span>
                                            <div class="form-check form-check-inline m-0 text-nowrap">
                                                <input class="form-check-input" type="checkbox" id="all_pondok" onchange="toggleGroup('cb-pondok', this.checked)">
                                                <label class="form-check-label text-dark fw-bold" for="all_pondok" style="cursor:pointer; font-size: 11px;">Pilih Semua</label>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                ${hb.pondok_daftar > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Pendaftaran Pondok</span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-pondok" type="checkbox" id="cb_bayar_daftar_pondok" onchange="toggleInputState('bayar_daftar_pondok')"><label class="form-check-label" for="cb_bayar_daftar_pondok">Pendaftaran Pondok</label></div></td>
                                    <td style="width: 110px;"><input type="number" id="bayar_daftar_pondok" class="form-control form-control-sm text-end input-bayar bg-light" value="${TARIF.pendaftaran_pondok}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`}
                                ${hb.pondok_syahriyah > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Syahriyah (Bln 1)</span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-pondok" type="checkbox" id="cb_bayar_syahriyah_pondok" onchange="toggleInputState('bayar_syahriyah_pondok')"><label class="form-check-label" for="cb_bayar_syahriyah_pondok">Syahriyah (Bln 1)</label></div></td>
                                    <td><input type="number" id="bayar_syahriyah_pondok" class="form-control form-control-sm text-end input-bayar bg-light" value="${nomSyahriyahPondok}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`}
                                ${hb.pondok_jariyah > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Jariyah Pondok</span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-pondok" type="checkbox" id="cb_bayar_jariyah_pondok" onchange="toggleInputState('bayar_jariyah_pondok')"><label class="form-check-label" for="cb_bayar_jariyah_pondok">Jariyah Pondok</label></div></td>
                                    <td><input type="number" id="bayar_jariyah_pondok" class="form-control form-control-sm text-end input-bayar bg-light" value="${TARIF.jariyah_pondok}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`}
                                ` : ''}
                                
                                <tr>
                                    <td colspan="2" class="bg-light p-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-bold text-primary" style="font-size: 11px;">KOMPONEN MADIN</span>
                                            <div class="form-check form-check-inline m-0 text-nowrap">
                                                <input class="form-check-input" type="checkbox" id="all_madin" onchange="toggleGroup('cb-madin', this.checked)">
                                                <label class="form-check-label text-dark fw-bold" for="all_madin" style="cursor:pointer; font-size: 11px;">Pilih Semua</label>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                ${hb.madin_daftar > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Pendaftaran Madin</span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-madin" type="checkbox" id="cb_bayar_daftar_madin" onchange="toggleInputState('bayar_daftar_madin')"><label class="form-check-label" for="cb_bayar_daftar_madin">Pendaftaran Madin</label></div></td>
                                    <td style="width: 110px;"><input type="number" id="bayar_daftar_madin" class="form-control form-control-sm text-end input-bayar bg-light" value="${TARIF.pendaftaran_madin}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`}
                                ${hb.madin_syahriyah > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Syahriyah (Bln 1)</span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-madin" type="checkbox" id="cb_bayar_syahriyah_madin" onchange="toggleInputState('bayar_syahriyah_madin')"><label class="form-check-label" for="cb_bayar_syahriyah_madin">Syahriyah (Bln 1)</label></div></td>
                                    <td><input type="number" id="bayar_syahriyah_madin" class="form-control form-control-sm text-end input-bayar bg-light" value="${TARIF.syahriyah_madin}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`}
                                ${hb.madin_jariyah > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Jariyah Madin</span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-madin" type="checkbox" id="cb_bayar_jariyah_madin" onchange="toggleInputState('bayar_jariyah_madin')"><label class="form-check-label" for="cb_bayar_jariyah_madin">Jariyah Madin</label></div></td>
                                    <td><input type="number" id="bayar_jariyah_madin" class="form-control form-control-sm text-end input-bayar bg-light" value="${TARIF.jariyah_madin}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`}
                                ${hb.madin_kalender > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Kalender</span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-madin" type="checkbox" id="cb_bayar_kalender" onchange="toggleInputState('bayar_kalender')"><label class="form-check-label" for="cb_bayar_kalender">Kalender</label></div></td>
                                    <td><input type="number" id="bayar_kalender" class="form-control form-control-sm text-end input-bayar bg-light" value="${TARIF.kalender}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`}
                                ${hb.madin_raport > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Raport</span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-madin" type="checkbox" id="cb_bayar_raport" onchange="toggleInputState('bayar_raport')"><label class="form-check-label" for="cb_bayar_raport">Raport</label></div></td>
                                    <td><input type="number" id="bayar_raport" class="form-control form-control-sm text-end input-bayar bg-light" value="${TARIF.raport}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`}

                            </tbody>
                        </table>
                    </div>

                    <!-- KOLOM KANAN: TITIPAN LUAR -->
                    <div class="col-lg-6">
                        <table class="table table-sm align-middle table-bordered mb-3">
                            <thead class="table-primary">
                                <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> TITIPAN LUAR</span>
                                        <div class="form-check form-check-inline m-0 text-nowrap">
                                            <input class="form-check-input" type="checkbox" id="all_titipan" onchange="toggleGroup('cb-titipan', this.checked)">
                                            <label class="form-check-label fw-bold text-dark" for="all_titipan" style="cursor:pointer; font-size: 11px;">Pilih Semua</label>
                                        </div>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                ${ht.titipan_almamater > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Seragam Almamater</span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-titipan" type="checkbox" id="cb_bayar_almamater" onchange="toggleInputState('bayar_almamater')"><label class="form-check-label" for="cb_bayar_almamater">Seragam Almamater</label></div></td>
                                    <td style="width: 110px;"><input type="number" id="bayar_almamater" class="form-control form-control-sm text-end input-bayar bg-light" value="${tarifSeragamSatuan}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`}
                                
                                <!-- LABEL OPSIONAL UNTUK SERAGAM PUTIH -->
                                ${ht.titipan_putih > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Seragam Putih <small class="text-muted">(Opsional)</small></span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-titipan" type="checkbox" id="cb_bayar_putih" onchange="toggleInputState('bayar_putih')"><label class="form-check-label" for="cb_bayar_putih">Seragam Putih <span class="badge bg-secondary ms-1" style="font-size:10px;">Opsional</span></label></div></td>
                                    <td><input type="number" id="bayar_putih" class="form-control form-control-sm text-end input-bayar bg-light" value="${tarifSeragamPutihSatuan}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`}
                                
                                ${(isPutra && isMukim) ? (ht.titipan_makan > 0 ? `
                                <tr class="table-light"><td><span class="text-success fw-bold"><i class="fas fa-check-circle me-1"></i> Kos Makan (Bulan 1)</span></td><td class="text-end text-muted fw-bold" style="padding-right:10px; font-size:11px;">LUNAS ✅</td></tr>
                                ` : `
                                <tr>
                                    <td><div class="form-check"><input class="form-check-input cb-titipan" type="checkbox" id="cb_bayar_makan" onchange="toggleInputState('bayar_makan')"><label class="form-check-label" for="cb_bayar_makan">Kos Makan (Bulan 1)</label></div></td>
                                    <td><input type="number" id="bayar_makan" class="form-control form-control-sm text-end input-bayar bg-light" value="${tarifMakan}" disabled oninput="hitungTotalDinamic()"></td>
                                </tr>`) : ''}
                            </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>

                        <!-- CONTEKAN TAGIHAN WAJIB -->
                        <div class="bg-light p-2 rounded border" style="font-size: 11.5px;">
                            <div class="fw-bold mb-1 border-bottom pb-1 text-center text-secondary">INFO TAGIHAN WAJIB (TANPA BAJU PUTIH)</div>
                            ${isMukim ? `
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-muted">Total bayar Pondok:</span>
                                <strong class="text-success">Rp ${totalPondokFull.toLocaleString('id-ID')}</strong>
                            </div>` : ''}
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-muted">Total Bayar Madin:</span>
                                <strong class="text-primary">Rp ${totalMadinFull.toLocaleString('id-ID')}</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-muted">Seragam & Kos (${labelGender}):</span>
                                <strong class="text-danger">Rp ${totalTitipanFull.toLocaleString('id-ID')}</strong>
                            </div>
                            <div class="d-flex justify-content-between pt-2 border-top border-2 mt-2">
                                <span class="fw-bold text-dark">GRAND TOTAL WAJIB:</span>
                                <strong class="text-dark" style="font-size: 13.5px;">Rp ${grandTotalFull.toLocaleString('id-ID')}</strong>
                            </div>
                        </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: 'Batal',
                    allowOutsideClick: false,
                    preConfirm: () => {
                        let safeParse = (id) => {
                            let cb = document.getElementById('cb_' + id);
                            let input = document.getElementById(id);
                            return (cb && cb.checked && input) ? parseInt(input.value) : 0;
                        };

                        let dataPembayaran = {
                            id_pendaftaran: idPendaftaran,
                            bayar_daftar_pondok: safeParse('bayar_daftar_pondok'),
                            bayar_syahriyah_pondok: safeParse('bayar_syahriyah_pondok'),
                            bayar_jariyah_pondok: safeParse('bayar_jariyah_pondok'),
                            bayar_daftar_madin: safeParse('bayar_daftar_madin'),
                            bayar_syahriyah_madin: safeParse('bayar_syahriyah_madin'),
                            bayar_jariyah_madin: safeParse('bayar_jariyah_madin'),
                            bayar_kalender: safeParse('bayar_kalender'),
                            bayar_raport: safeParse('bayar_raport'),
                            bayar_almamater: safeParse('bayar_almamater'),
                            bayar_putih: safeParse('bayar_putih'),
                            bayar_makan: safeParse('bayar_makan')
                        };

                        let totalDicek = Object.values(dataPembayaran).reduce((a, b) => (typeof b === 'number' ? a + b : a), 0);
                        if (totalDicek <= 0) {
                            Swal.showValidationMessage('Minimal centang 1 komponen biaya untuk menyimpan angsuran!');
                            return false;
                        }
                        return dataPembayaran;
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({ title: 'Menyimpan Transaksi...', allowOutsideClick: false, didOpen: () => { Swal.showLoading(); } });

                        fetch('/api/proses_pembayaran_custom', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(result.value)
                        })
                            .then(response => response.json())
                            .then(data => {
                                if (data.status === 'success') {
                                    Swal.fire({
                                        title: 'Tersimpan!',
                                        text: 'Transaksi cicilan berhasil dicatat.',
                                        icon: 'success',
                                        showCancelButton: true,
                                        confirmButtonColor: '#198754',
                                        cancelButtonColor: '#0d6efd',
                                        confirmButtonText: '<i class="fas fa-print"></i> Cetak Kuitansi',
                                        cancelButtonText: 'Tutup'
                                    }).then((pilihan) => {
                                        if (pilihan.isConfirmed) {
                                            window.open(`/admin_psb/cetak_kuitansi/${data.no_nota}`, '_blank');
                                        }
                                        window.location.reload();
                                    });
                                } else {
                                    Swal.fire('Gagal!', data.message, 'error');
                                }
                            })
                            .catch(error => {
                                Swal.fire('Error!', 'Gagal terhubung dengan server lokal.', 'error');
                            });
                    }
                });
            }).catch(err => {
                console.error(err);
                Swal.fire('Error!', 'Gagal mengambil riwayat keuangan siswa.', 'error');
            });
    }

    // 5. FUNGSI UNTUK MEMBATALKAN TRANSAKSI
    function hapusTransaksi(noNota) {
        Swal.fire({
            title: 'Batalkan Transaksi?',
            text: "Nota ini akan dihapus permanen dan tagihan santri akan kembali berstatus belum lunas.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="fas fa-trash"></i> Ya, Batalkan!',
            cancelButtonText: 'Tutup'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => { Swal.showLoading(); } });

                fetch(`/api/hapus_transaksi/${noNota}`, { method: 'POST' })
                    .then(res => res.json())
                    .then(data => {
                        if (data.status === 'success') {
                            Swal.fire('Terhapus!', 'Transaksi berhasil dibatalkan.', 'success')
                                .then(() => window.location.reload());
                        } else {
                            Swal.fire('Gagal!', data.message, 'error');
                        }
                    });
            }
        });
    }
</script>
{% endblock %}