{% extends 'admin_master/base_admin_master.html' if session.get('role') == 'admin_master' else 'admin_keuangan/base_admin_keuangan.html' %}
{% set active_page = 'keu_tunggakan' if session.get('role') == 'admin_master' else 'tunggakan' %}

{% block title %}Data Tunggakan{% endblock %}

{% block page_title %}Data Tunggakan Pembayaran Santri{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <span class="badge bg-secondary mt-1">Tahun Ajaran 2025/2026</span>
    </div>
    <div>
        <button class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambahTunggakan">
            <i class="fas fa-plus me-1"></i> Tambah Tunggakan
        </button>
    </div>
</div>

        <!-- Kartu Ringkasan -->
        <div class="row mb-4">
            <!-- Kartu 1: Total Nominal -->
            <div class="col-md-4">
                <div class="stat-card">
                    <div class="stat-icon blue"><i class="fas fa-money-bill-wave"></i></div>
                    <div>
                        <span class="text-muted fw-bold" style="font-size: 11px; white-space: nowrap; text-transform: uppercase;">TOTAL NOMINAL TUNGGAKAN</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">Rp {{ "{:,.0f}".format(total_nominal_semua).replace(',', '.') }}</h4>
                    </div>
                </div>
            </div>
            
            <!-- Kartu 2: Total Santri -->
            <div class="col-md-4">
                <div class="stat-card">
                    <div class="stat-icon green"><i class="fas fa-user-times"></i></div>
                    <div>
                        <span class="text-muted fw-bold" style="font-size: 11px; white-space: nowrap; text-transform: uppercase;">TOTAL SANTRI MENUNGGAK</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">{{ total_santri_menunggak }} Santri</h4>
                    </div>
                </div>
            </div>
            
            <!-- Kartu 3: Rata-rata Keterlambatan -->
            <div class="col-md-4">
                <div class="stat-card">
                    <div class="stat-icon red"><i class="fas fa-clock"></i></div>
                    <div>
                        <span class="text-muted fw-bold" style="font-size: 11px; white-space: nowrap; text-transform: uppercase;">RATA-RATA KETERLAMBATAN</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">{{ rata_terlambat }} Bulan</h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Panel Tabel -->
        <div class="card border-0 shadow-sm rounded-4 mb-4 p-3">
            
            <!-- Area Filter dan Pencarian -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                        <input type="text" id="searchInput" class="form-control" placeholder="Cari nama santri, NIS...">
                    </div>
                </div>
                <div class="col-md-2">
                    <select class="form-select text-muted" id="filterKelas">
                        <option value="">Semua Kelas</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select text-muted" id="filterJenis">
                        <option value="">Semua Jenis Tunggakan</option>
                    </select>
                </div>
                <div class="col-md-3 text-end">
                    <!-- Menggunakan tag <a> agar bisa langsung diarahkan ke route cetak di Flask -->
                    <a href="/admin_keuangan/cetak_rekap_tunggakan" target="_blank" class="btn btn-outline-success shadow-sm">
                        <i class="fas fa-file-pdf me-2"></i>Cetak Rekap PDF
                    </a>
                </div>
            </div>

            <!-- Tabel Data -->
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Santri / NIS</th>
                            <th>Kelas & Kamar</th>
                            <th>Jenis & Periode</th>
                            <th>Rincian Beban</th>
                            <th>Total Tunggakan</th>
                            <th>Status</th>
                            <th>Aksi Cepat</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Looping Data dari Python Jinja2 -->
                        {% for santri in data_santri %}
                        <tr>
                            <td>
                                <!-- Class fw-bold dihapus agar font menjadi reguler -->
                                <div class="text-dark">{{ santri.nama }}</div>
                                <div class="text-muted" style="font-size: 0.8rem;">NIS: {{ santri.nis }} • {{ santri.id_sistem }}</div>
                            </td>
                            <td>
                                <div class="td-kelas">{{ santri.kelas }}</div>
                                <div class="text-muted" style="font-size: 0.8rem;">{{ santri.kamar }}</div>
                            </td>
                            <td>
                                <div class="td-jenis">{{ santri.jenis }}</div>
                                <div class="text-muted" style="font-size: 0.8rem;">{{ santri.periode }}</div>
                            </td>
                            <td>
                                <div>{{ santri.rincian }}</div>
                            </td>
                            <td>
                                <div class="text-dark">{{ santri.total_tunggakan }}</div>
                            </td>
                            <td>
                                <span class="badge-status bg-belum-lunas"><i class="fas fa-circle me-1" style="font-size: 8px;"></i> {{ santri.status }}</span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <!-- Tombol WA -->
                                    <button class="btn btn-outline-success btn-action" title="Kirim Pengingat WhatsApp" 
                                            data-nama="{{ santri.nama }}"
                                            data-kelas="{{ santri.kelas }}"
                                            data-jenis="{{ santri.jenis }}"
                                            data-periode="{{ santri.periode }}"
                                            data-total="{{ santri.total_tunggakan }}"
                                            data-wa="{{ santri.no_wa }}"
                                            onclick="bukaModalWA(this)">
                                        <i class="fab fa-whatsapp"></i>
                                    </button>
                                    
                                    <!-- Tombol Lunas 1-Klik -->
                                    <form method="POST" action="/admin_keuangan/lunas/{{ santri.id_sistem }}" class="d-inline" onsubmit="return confirm('Yakin ingin melunasi tunggakan a.n {{ santri.nama }}?\n\nSistem akan otomatis mencatatnya ke Buku Kasir.');">
                                        <button type="submit" class="btn btn-outline-primary btn-action" title="Bayar / Lunas"><i class="fas fa-dollar-sign"></i></button>
                                    </form>
                                    
                                    <!-- Tombol Cetak Perjanjian -->
                                    <a href="/admin_keuangan/cetak_perjanjian/{{ santri.id_sistem }}" 
                                       target="_blank"
                                       class="btn btn-outline-secondary btn-action" 
                                       title="Cetak Surat Perjanjian">
                                        <i class="fas fa-print"></i>
                                    </a>
                                    
                                    <!-- Tombol Hapus -->
                                    <button class="btn btn-outline-danger btn-action" title="Hapus Data" 
                                            data-id="{{ santri.id_sistem }}"
                                            data-nama="{{ santri.nama }}"
                                            onclick="bukaModalHapus(this)">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination (Navigasi Halaman) -->
            <div class="d-flex justify-content-between align-items-center mt-4 text-muted" style="font-size: 0.85rem;">
                
                <!-- Info Data -->
                <div>
                    Menampilkan <span class="fw-bold text-dark">1</span> hingga <span class="fw-bold text-dark">10</span> dari <span class="fw-bold text-dark">{{ total_santri_menunggak }}</span> data
                </div>
                
                <!-- Tombol Navigasi -->
                <div class="d-flex gap-1">
                    <!-- Tombol Sebelumnya (Kondisi Disabled jika di halaman 1) -->
                    <a href="?page=1" class="btn btn-sm btn-light border text-muted disabled" aria-disabled="true">
                        <i class="fas fa-chevron-left me-1" style="font-size: 0.7rem;"></i> Sebelumnya
                    </a>
                    
                    <!-- Tombol Angka -->
                    <!-- Kondisi Active (Halaman saat ini) -->
                    <a href="?page=1" class="btn btn-sm btn-primary shadow-sm fw-bold px-3">1</a>
                    
                    <!-- Kondisi Normal -->
                    <a href="?page=2" class="btn btn-sm btn-light border text-muted px-3 hover-bg-gray">2</a>
                    <a href="?page=3" class="btn btn-sm btn-light border text-muted px-3 hover-bg-gray">3</a>
                    
                    <!-- Titik-titik jika halaman sangat banyak (Opsional) -->
                    <span class="btn btn-sm btn-link text-muted text-decoration-none px-1" style="pointer-events: none;">...</span>
                    <a href="?page=10" class="btn btn-sm btn-light border text-muted px-3 hover-bg-gray">10</a>
                    
                    <!-- Tombol Selanjutnya -->
                    <a href="?page=2" class="btn btn-sm btn-light border text-muted">
                        Selanjutnya <i class="fas fa-chevron-right ms-1" style="font-size: 0.7rem;"></i>
                    </a>
                </div>
                
            </div>

        </div>
    </div>
    
    <!-- MODAL: TAMBAH TUNGGAKAN -->
    <div class="modal fade" id="modalTambahTunggakan" tabindex="-1" aria-labelledby="modalTambahLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
            
            <!-- PENTING: Form digabung dengan modal-content agar scroll Bootstrap bekerja sempurna -->
            <form action="/admin_keuangan/tambah" method="POST" id="formTambahTunggakan" class="modal-content border-0 shadow-lg">
                
                <!-- Header Modal -->
                <div class="modal-header border-bottom-0 pb-0 pt-3 px-4">
                    <h5 class="modal-title fw-bold text-dark fs-5" id="modalTambahLabel">Tambah Data Tunggakan Santri</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Area Body Modal (Akan otomatis bisa di-scroll oleh Bootstrap) -->
                <div class="modal-body p-4 pt-2">
                    
                    <!-- Baris 1: Pencarian Cerdas Ala Google -->
                    <div class="row mb-2">
                        <div class="col-md-5">
                            <label class="form-label text-primary mb-1" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Cari NIS / Nama <i class="fas fa-search ms-1"></i></label>
                            
                            <!-- Wadah Position Relative untuk memunculkan Dropdown -->
                            <div class="position-relative">
                                <input type="text" class="form-control form-control-sm border-primary" name="nis" id="inputNisForm" placeholder="Ketik NIS atau Nama..." autocomplete="off" required>
                                
                                <!-- Kotak Dropdown Buatan Sendiri (Awalnya Disembunyikan) -->
                                <ul class="dropdown-menu w-100 shadow-sm" id="dropdownSiswa" style="max-height: 200px; overflow-y: auto; display: none; position: absolute; top: 100%; left: 0; z-index: 1050; padding: 0; margin-top: 2px;">
                                    <!-- Daftar pencarian akan muncul di sini via Javascript -->
                                </ul>
                            </div>

                        </div>
                        <div class="col-md-7 mt-2 mt-md-0">
                            <label class="form-label text-muted mb-1" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Nama Santri</label>
                            <input type="text" class="form-control form-control-sm bg-light" name="nama" id="inputNamaForm" placeholder="Otomatis terisi..." required readonly>
                        </div>
                    </div>

                    <!-- Baris 2: Kelas, Kamar & No. WA (Profil Santri) -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label text-muted mb-1" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Kelas</label>
                                <input type="text" class="form-control form-control-sm bg-light" name="kelas" id="inputKelasForm" placeholder="Otomatis terisi..." required readonly>
                            </div>
                            <div class="col-md-4 mt-2 mt-md-0">
                                <label class="form-label text-muted mb-1" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Kamar</label>
                                <input type="text" class="form-control form-control-sm bg-light" name="kamar" id="inputKamarForm" placeholder="Otomatis terisi..." readonly>
                            </div>
                            <div class="col-md-4 mt-2 mt-md-0">
                                <label class="form-label text-muted mb-1" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">No. WhatsApp</label>
                                <input type="text" class="form-control form-control-sm bg-light" name="no_wa" id="inputWaForm" placeholder="Otomatis terisi..." readonly>
                            </div>
                        </div>

                    <!-- Kotak Rincian Tunggakan -->
                    <div class="bg-light p-3 rounded border mb-3">
                        <label class="form-label text-dark mb-2" style="font-size: 0.75rem; font-weight: bold; text-transform: uppercase;">Rincian Tunggakan (Bisa isi lebih dari 1)</label>
                        
                        <!-- Rincian 1 -->
                        <div class="row mb-1">
                            <div class="col-6">
                                <select class="form-select form-select-sm" name="jenis_1">
                                    <option value="">-- Pilih Jenis 1 --</option>
                                    <optgroup label="KAS PONDOK">
                                        <option value="Pendaftaran Pondok">Pendaftaran Pondok</option>
                                        <option value="Daftar Ulang Pondok">Daftar Ulang Pondok</option>
                                        <option value="Syahriyah Pondok">Syahriyah Pondok</option>
                                        <option value="Jariyah Pondok">Jariyah Pondok</option>
                                    </optgroup>
                                    <optgroup label="KAS MADIN">
                                        <option value="Pendaftaran Madin">Pendaftaran Madin</option>
                                        <option value="Daftar Ulang Madin">Daftar Ulang Madin</option>
                                        <option value="Syahriyah Madin">Syahriyah Madin</option>
                                        <option value="Jariyah Madin">Jariyah Madin</option>
                                    </optgroup>
                                    <optgroup label="LAIN-LAIN">
                                        <option value="Ujian Semester Ganjil">Ujian Semester Ganjil</option>
                                        <option value="Ujian Semester Genap">Ujian Semester Genap</option>
                                        <option value="Ujian Akhir Madin (UAM)">Ujian Akhir Madin (UAM)</option>
                                        <option value="Kalender & Raport">Kalender & Raport</option>
                                        <option value="Lainnya...">Lainnya...</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="col-6">
                                <input type="number" class="form-control form-control-sm input-nominal" name="nominal_1" placeholder="Nominal (Rp)">
                            </div>
                        </div>
                        
                        <!-- Rincian 2 -->
                        <div class="row mb-1">
                            <div class="col-6">
                                <select class="form-select form-select-sm" name="jenis_2">
                                    <option value="">-- Pilih Jenis 2 --</option>
                                    <optgroup label="KAS PONDOK">
                                        <option value="Pendaftaran Pondok">Pendaftaran Pondok</option>
                                        <option value="Daftar Ulang Pondok">Daftar Ulang Pondok</option>
                                        <option value="Syahriyah Pondok">Syahriyah Pondok</option>
                                        <option value="Jariyah Pondok">Jariyah Pondok</option>
                                    </optgroup>
                                    <optgroup label="KAS MADIN">
                                        <option value="Pendaftaran Madin">Pendaftaran Madin</option>
                                        <option value="Daftar Ulang Madin">Daftar Ulang Madin</option>
                                        <option value="Syahriyah Madin">Syahriyah Madin</option>
                                        <option value="Jariyah Madin">Jariyah Madin</option>
                                    </optgroup>
                                    <optgroup label="LAIN-LAIN">
                                        <option value="Ujian Semester Ganjil">Ujian Semester Ganjil</option>
                                        <option value="Ujian Semester Genap">Ujian Semester Genap</option>
                                        <option value="Ujian Akhir Madin (UAM)">Ujian Akhir Madin (UAM)</option>
                                        <option value="Kalender & Raport">Kalender & Raport</option>
                                        <option value="Lainnya...">Lainnya...</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="col-6">
                                <input type="number" class="form-control form-control-sm input-nominal" name="nominal_2" placeholder="Nominal (Rp)">
                            </div>
                        </div>

                        <!-- Rincian 3 -->
                        <div class="row mb-2">
                            <div class="col-6">
                                <select class="form-select form-select-sm" name="jenis_3">
                                    <option value="">-- Pilih Jenis 3 --</option>
                                    <optgroup label="KAS PONDOK">
                                        <option value="Pendaftaran Pondok">Pendaftaran Pondok</option>
                                        <option value="Daftar Ulang Pondok">Daftar Ulang Pondok</option>
                                        <option value="Syahriyah Pondok">Syahriyah Pondok</option>
                                        <option value="Jariyah Pondok">Jariyah Pondok</option>
                                    </optgroup>
                                    <optgroup label="KAS MADIN">
                                        <option value="Pendaftaran Madin">Pendaftaran Madin</option>
                                        <option value="Daftar Ulang Madin">Daftar Ulang Madin</option>
                                        <option value="Syahriyah Madin">Syahriyah Madin</option>
                                        <option value="Jariyah Madin">Jariyah Madin</option>
                                    </optgroup>
                                    <optgroup label="LAIN-LAIN">
                                        <option value="Ujian Semester Ganjil">Ujian Semester Ganjil</option>
                                        <option value="Ujian Semester Genap">Ujian Semester Genap</option>
                                        <option value="Ujian Akhir Madin (UAM)">Ujian Akhir Madin (UAM)</option>
                                        <option value="Kalender & Raport">Kalender & Raport</option>
                                        <option value="Lainnya...">Lainnya...</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="col-6">
                                <input type="number" class="form-control form-control-sm input-nominal" name="nominal_3" placeholder="Nominal (Rp)">
                            </div>
                        </div>

                        <!-- Total -->
                        <div class="d-flex justify-content-between align-items-center pt-1 border-top">
                            <span class="text-muted fw-bold" style="font-size: 0.75rem;">TOTAL BEBAN:</span>
                            <span class="fs-6 fw-bold text-danger" id="totalBebanHitung">Rp 0</span>
                        </div>
                    </div>

                    <!-- Baris Bawah: Detail Tagihan (Dibagi 4 Kolom) -->
                        <div class="row mb-3">
                            <!-- Input tersembunyi ini yang akan dikirim ke sistem Python -->
                            <input type="hidden" name="periode" id="inputPeriodeAsli">

                            <!-- Kolom 1: Pilihan Bulan -->
                            <div class="col-md-3">
                                <label class="form-label text-muted mb-1" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Bln Periode</label>
                                <select class="form-select form-select-sm" id="pilihBulan" required>
                                    <option value="" disabled selected>-- Bulan --</option>
                                    <optgroup label="Hijriyah">
                                        <option value="Muharram">Muharram</option>
                                        <option value="Shafar">Shafar</option>
                                        <option value="Rabi'ul Awal">Rabi'ul Awal</option>
                                        <option value="Rabi'ul Akhir">Rabi'ul Akhir</option>
                                        <option value="Jumadil Awal">Jumadil Awal</option>
                                        <option value="Jumadil Akhir">Jumadil Akhir</option>
                                        <option value="Rajab">Rajab</option>
                                        <option value="Sya'ban">Sya'ban</option>
                                        <option value="Ramadhan">Ramadhan</option>
                                        <option value="Syawal">Syawal</option>
                                        <option value="Dzulqa'dah">Dzulqa'dah</option>
                                        <option value="Dzulhijjah">Dzulhijjah</option>
                                    </optgroup>
                                    <optgroup label="Masehi">
                                        <option value="Januari">Januari</option>
                                        <option value="Februari">Februari</option>
                                        <option value="Maret">Maret</option>
                                        <option value="April">April</option>
                                        <option value="Mei">Mei</option>
                                        <option value="Juni">Juni</option>
                                        <option value="Juli">Juli</option>
                                        <option value="Agustus">Agustus</option>
                                        <option value="September">September</option>
                                        <option value="Oktober">Oktober</option>
                                        <option value="November">November</option>
                                        <option value="Desember">Desember</option>
                                    </optgroup>
                                </select>
                            </div>
                            
                            <!-- Kolom 2: Input Tahun -->
                            <div class="col-md-3 mt-2 mt-md-0">
                                <label class="form-label text-muted mb-1" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Tahun</label>
                                <input type="number" class="form-control form-control-sm" id="inputTahun" placeholder="cth. 1447" min="1400" required>
                            </div>
                            
                            <!-- Kolom 3: Bulan Terlambat -->
                            <div class="col-md-3 mt-2 mt-md-0">
                                <label class="form-label text-muted mb-1" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Bln Terlambat</label>
                                <input type="number" class="form-control form-control-sm" name="bulan_terlambat" value="1" min="1">
                            </div>
                            
                            <!-- Kolom 4: Tanggal Perjanjian -->
                            <div class="col-md-3 mt-2 mt-md-0">
                                <label class="form-label text-primary mb-1" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Tgl Perjanjian</label>
                                <input type="date" class="form-control form-control-sm border-primary" name="tanggal_perjanjian">
                            </div>
                        </div>

                <!-- Footer Modal (Sekarang sejajar dan rapi karena bawaan Bootstrap) -->
                <div class="modal-footer border-top-0 pt-2 pb-3 px-4">
                    <button type="button" class="btn btn-light btn-sm border px-3" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm px-4 shadow-sm"><i class="fas fa-save me-2"></i>Simpan Data</button>
                </div>

            </form>
        </div>
    </div>

    <!-- MODAL: WHATSAPP REMINDER PREVIEW -->
    <div class="modal fade" id="modalWaPreview" tabindex="-1" aria-labelledby="modalWaLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                
                <!-- Header -->
                <div class="modal-header border-bottom-0 pb-0">
                    <div class="d-flex align-items-center">
                        <div class="bg-success bg-opacity-10 text-success rounded p-2 me-3">
                            <i class="fab fa-whatsapp fs-5"></i>
                        </div>
                        <div>
                            <h5 class="modal-title fw-bold text-dark mb-0" id="modalWaLabel">Kirim Pengingat WhatsApp</h5>
                            <small class="text-muted" id="waTargetNomor">Nomor Tujuan: -</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <!-- Body -->
                <div class="modal-body pt-4">
                    <div class="bg-light p-3 rounded border">
                        <p class="text-success fw-bold" style="font-size: 0.75rem; text-transform: uppercase;">Preview Pesan Otomatis:</p>
                        <!-- Tempat teks preview ditampilkan -->
                        <div id="waPreviewText" class="font-monospace text-dark" style="font-size: 0.85rem; white-space: pre-wrap;">
                            <!-- Teks akan diisi oleh JavaScript -->
                        </div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Tutup</button>
                    <a id="btnKirimWaSekarang" href="#" target="_blank" class="btn btn-success">
                        <i class="fab fa-whatsapp me-2"></i>Kirim WhatsApp Sekarang
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL: BAYAR / LUNASI TUNGGAKAN -->
    <div class="modal fade" id="modalBayarTunggakan" tabindex="-1" aria-labelledby="modalBayarLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                
                <!-- Header -->
                <div class="modal-header border-bottom-0 pb-0 pt-4 px-4">
                    <div>
                        <h5 class="modal-title fw-bold text-dark" id="modalBayarLabel">Catat Pembayaran Tunggakan</h5>
                        <small class="text-muted" id="bayarSubtitle">Santri: -</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <!-- Body Form -->
                <div class="modal-body p-4">
                    <form action="/admin_keuangan/bayar" method="POST" id="formBayar">
                        <input type="hidden" name="id_sistem" id="bayarIdSistem">
                        
                        <!-- Box Sisa Tunggakan -->
                        <div class="bg-light p-3 rounded border mb-4">
                            <div class="text-muted mb-1" style="font-size: 0.75rem; font-weight: 600;">Sisa Tunggakan Saat Ini</div>
                            <div class="fs-4 fw-bold text-warning" id="bayarSisaTunggakan">Rp 0</div>
                        </div>

                        <!-- Jumlah Bayar -->
                        <div class="mb-3">
                            <label class="form-label text-muted" style="font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;">Jumlah Pembayaran (Rp)</label>
                            <input type="number" class="form-control" name="jumlah_bayar" id="inputJumlahBayar" required>
                        </div>

                        <!-- Metode Bayar -->
                        <div class="mb-4">
                            <label class="form-label text-muted" style="font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;">Metode Pembayaran</label>
                            <select class="form-select" name="metode_bayar" required>
                                <option value="Tunai / Kasir Pesantren">Tunai / Kasir Pesantren</option>
                                <option value="Transfer Bank BSI">Transfer Bank BSI</option>
                                <option value="Virtual Account">Virtual Account</option>
                            </select>
                        </div>

                        <!-- Footer / Actions -->
                        <div class="d-flex justify-content-end gap-2 pt-2">
                            <button type="button" class="btn btn-light border px-3" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-success px-4 shadow-sm">Simpan Pembayaran</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Tersembunyi untuk Eksekusi Hapus -->
    <form action="/admin_keuangan/hapus" method="POST" id="formHapus">
        <input type="hidden" name="id_sistem" id="hapusIdSistem">
    </form>

   <!-- ========================================================== -->
    <!-- WADAH DATA JSON (Trik agar VS Code tidak error / garis merah) -->
    <!-- ========================================================== -->
{% endblock %}

{% block scripts %}
<script id="data-siswa-json" type="application/json">
        {{ daftar_siswa | tojson | safe }}
    </script>

    <!-- ========================================================== -->
    <!-- SCRIPT UTAMA HALAMAN TUNGGAKAN -->
    <!-- ========================================================== -->
    <script>
        function bukaModalWA(btn) {
            // Ambil data dari atribut tombol yang diklik
            const nama = btn.getAttribute('data-nama');
            const kelas = btn.getAttribute('data-kelas');
            const jenis = btn.getAttribute('data-jenis');
            const periode = btn.getAttribute('data-periode');
            const total = btn.getAttribute('data-total');
            const no_wa = btn.getAttribute('data-wa');

            const nomorTujuan = no_wa && no_wa !== 'None' ? no_wa : '628... (Tidak ada data)';
            document.getElementById('waTargetNomor').innerText = `Nomor Tujuan: +${nomorTujuan}`;
            
            const pesanPreview = `Assalamu'alaikum Wr. Wb.\n\nYth. Wali Santri dari *${nama}* (${kelas}).\n\nKami informasikan bahwa terdapat tunggakan pembayaran *${jenis}* periode *${periode}* sebesar *${total}*.\n\nMohon segera melakukan pelunasan melalui rekening resmi pesantren atau langsung ke kasir. Jazakumullah khairan katsiran.\n\n*Dashboard Keuangan Pondok Pesantren Pusat*`;
            document.getElementById('waPreviewText').innerText = pesanPreview;
            
            const pesanTerkirim = `Assalamu'alaikum Wr. Wb. Yth. Wali Santri ${nama}, mohon konfirmasi pelunasan tunggakan ${jenis} sebesar ${total}. Terima kasih.`;
            const urlWA = `https://wa.me/${nomorTujuan.replace(/\D/g,'')}?text=${encodeURIComponent(pesanTerkirim)}`;
            document.getElementById('btnKirimWaSekarang').href = urlWA;
            
            var myModalEl = document.getElementById('modalWaPreview');
            document.body.appendChild(myModalEl); 
            var waModal = bootstrap.Modal.getOrCreateInstance(myModalEl);
            waModal.show();
        }

        function bukaModalBayar(btn) {
            // Ambil data dari atribut tombol
            const idSistem = btn.getAttribute('data-id');
            const nama = btn.getAttribute('data-nama');
            const nis = btn.getAttribute('data-nis');
            const totalText = btn.getAttribute('data-total');

            document.getElementById('bayarSubtitle').innerText = `Santri: ${nama} (${nis})`;
            document.getElementById('bayarIdSistem').value = idSistem;
            document.getElementById('bayarSisaTunggakan').innerText = totalText;
            
            const nominalAngka = totalText.replace(/[^0-9]/g, '');
            document.getElementById('inputJumlahBayar').value = nominalAngka;
            
            var myModalEl = document.getElementById('modalBayarTunggakan');
            document.body.appendChild(myModalEl);
            var payModal = bootstrap.Modal.getOrCreateInstance(myModalEl);
            payModal.show();
        }

        function bukaModalHapus(btn) {
            // Ambil data dari atribut tombol
            const idSistem = btn.getAttribute('data-id');
            const nama = btn.getAttribute('data-nama');

            Swal.fire({
                title: 'Hapus Data Tunggakan?',
                text: "Data tunggakan atas nama " + nama + " akan dihapus permanen!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal',
                reverseButtons: false
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('hapusIdSistem').value = idSistem;
                    document.getElementById('formHapus').submit();
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            
            // --- 1. FITUR PENCARIAN CERDAS (ALA GOOGLE) ---
            let dataSiswaLengkap = [];
            try {
                const rawData = document.getElementById('data-siswa-json').textContent;
                dataSiswaLengkap = JSON.parse(rawData);
            } catch (e) {
                console.error("Gagal memuat data siswa:", e);
            }
            
            const inputNis = document.getElementById('inputNisForm');
            const dropdownSiswa = document.getElementById('dropdownSiswa');
            const inputNama = document.getElementById('inputNamaForm');
            const inputKelas = document.getElementById('inputKelasForm');
            const inputKamar = document.getElementById('inputKamarForm');
            const inputWa = document.getElementById('inputWaForm');

            if (inputNis && dropdownSiswa) {
                
                // Mencegah tombol Enter submit form saat sedang mengetik
                inputNis.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' || e.keyCode === 13) {
                        e.preventDefault();
                        return false;
                    }
                });

                // Menjalankan pencarian setiap kali ada huruf/angka yang diketik
                // Menjalankan pencarian setiap kali ada huruf/angka yang diketik
                inputNis.addEventListener('input', function() {
                    const kataKunci = this.value.toLowerCase().trim();
                    dropdownSiswa.innerHTML = ''; // Kosongkan daftar sebelumnya

                    if (kataKunci.length > 0) {
                        // Cari data yang cocok
                        const hasilCari = dataSiswaLengkap.filter(s => 
                            String(s.nis).toLowerCase().includes(kataKunci) || 
                            String(s.nama).toLowerCase().includes(kataKunci)
                        );

                        if (hasilCari.length > 0) {
                            hasilCari.forEach(siswa => {
                                const li = document.createElement('li');
                                const a = document.createElement('a');
                                a.className = 'dropdown-item border-bottom py-2';
                                a.href = '#';
                                a.style.fontSize = '0.85rem';
                                a.textContent = `${siswa.nis} - ${siswa.nama}`;

                                // AKSI KETIKA DAFTAR DI-KLIK
                                a.addEventListener('click', function(e) {
                                    e.preventDefault();
                                    
                                    // Masukkan data ke form
                                    inputNis.value = siswa.nis;
                                    inputNama.value = siswa.nama || '';
                                    inputKelas.value = siswa.kelas || '';
                                    
                                    // PERBAIKAN DI SINI: Sekarang JS akan mengambil data kamar, bukan dikosongkan!
                                    if(inputKamar) inputKamar.value = siswa.kamar || ''; 
                                    
                                    inputWa.value = siswa.no_wa || '';
                                    
                                    inputNis.classList.add('is-valid');
                                    dropdownSiswa.style.display = 'none'; // Tutup dropdown
                                });

                                li.appendChild(a);
                                dropdownSiswa.appendChild(li);
                            });
                            dropdownSiswa.style.display = 'block';
                        } else {
                            dropdownSiswa.innerHTML = '<li class="dropdown-item text-muted py-2" style="font-size:0.85rem;">Tidak ditemukan...</li>';
                            dropdownSiswa.style.display = 'block';
                            
                            inputNama.value = '';
                            inputKelas.value = '';
                            if(inputKamar) inputKamar.value = '';
                            inputWa.value = '';
                            inputNis.classList.remove('is-valid');
                        }
                    } else {
                        dropdownSiswa.style.display = 'none';
                        inputNama.value = '';
                        inputKelas.value = '';
                        if(inputKamar) inputKamar.value = '';
                        inputWa.value = '';
                        inputNis.classList.remove('is-valid');
                    }
                });

                // Menutup dropdown jika user meng-klik di luar area pencarian
                document.addEventListener('click', function(e) {
                    if (!inputNis.contains(e.target) && !dropdownSiswa.contains(e.target)) {
                        dropdownSiswa.style.display = 'none';
                    }
                });
            }
            
        

            // --- 2. FUNGSI HITUNG TOTAL BEBAN CERDAS ---
            const displayTotal = document.getElementById('totalBebanHitung');
            const inputTerlambat = document.querySelector('input[name="bulan_terlambat"]');

            function kalkulasiTotal() {
                let total = 0;
                const blnTerlambat = parseInt(inputTerlambat.value) || 1;

                for (let i = 1; i <= 3; i++) {
                    const jenis = document.querySelector(`select[name="jenis_${i}"]`).value;
                    const nominal = parseInt(document.querySelector(`input[name="nominal_${i}"]`).value) || 0;
                    
                    if (nominal > 0) {
                        // LOGIKA PEMILAH: Jika ada kata "Syahriyah", kalikan. Jika tidak, tetap 1x.
                        if (jenis.toLowerCase().includes('syahriyah')) {
                            total += (nominal * blnTerlambat);
                        } else {
                            total += nominal;
                        }
                    }
                }
                displayTotal.innerText = 'Rp ' + total.toLocaleString('id-ID');
            }

            // Jalankan kalkulasi setiap nominal atau bulan terlambat diubah
            for (let i = 1; i <= 3; i++) {
                document.querySelector(`input[name="nominal_${i}"]`).addEventListener('input', kalkulasiTotal);
            }
            if (inputTerlambat) inputTerlambat.addEventListener('input', kalkulasiTotal);

            // --- 3. VALIDASI KETAT & PENGGABUNGAN PERIODE ---
            
            // A. Proses Penggabungan Bulan & Tahun menjadi Periode (Tanpa ubah Python!)
            const pilihBulan = document.getElementById('pilihBulan');
            const inputTahun = document.getElementById('inputTahun');
            const inputPeriodeAsli = document.getElementById('inputPeriodeAsli');

            const gabungPeriode = () => {
                if (pilihBulan && inputTahun && inputPeriodeAsli) {
                    let tahun = inputTahun.value;
                    // Trik Cerdas: Jika admin mengetik tahun di bawah 2000 (misal 1447), otomatis ditambah huruf "H"
                    if (tahun && tahun < 2000) tahun += " H";
                    
                    // Gabungkan dan simpan ke form tersembunyi
                    inputPeriodeAsli.value = `${pilihBulan.value} ${tahun}`.trim();
                }
            };
            
            if (pilihBulan) pilihBulan.addEventListener('change', gabungPeriode);
            if (inputTahun) inputTahun.addEventListener('input', gabungPeriode);

            // Tambahkan bintang merah wajib isi ke kotak Bulan dan Tahun
            [pilihBulan, inputTahun].forEach(el => {
                if (el && !el.previousElementSibling.innerHTML.includes('*')) {
                    el.previousElementSibling.innerHTML += ' <span class="text-danger">*</span>';
                }
            });

            // B. Wajibkan 'Tanggal Perjanjian' diisi & tambahkan bintang merah kecil
            const inputTanggal = document.querySelector('input[name="tanggal_perjanjian"]');
            if (inputTanggal) {
                inputTanggal.setAttribute('required', 'required');
                if (!inputTanggal.previousElementSibling.innerHTML.includes('*')) {
                    inputTanggal.previousElementSibling.innerHTML += ' <span class="text-danger">*</span>';
                }
            }

            // C. Atur Logika Penguncian Kolom Tunggakan (Baris 1 sampai 3)
            for (let i = 1; i <= 3; i++) {
                const jenisSelect = document.querySelector(`select[name="jenis_${i}"]`);
                const nominalInput = document.querySelector(`input[name="nominal_${i}"]`);

                if (jenisSelect && nominalInput) {
                    if (i === 1) jenisSelect.setAttribute('required', 'required');

                    const aturNominal = () => {
                        if (jenisSelect.value === "") {
                            nominalInput.setAttribute('readonly', 'readonly');
                            nominalInput.classList.add('bg-light');
                            nominalInput.value = ''; 
                            if (i !== 1) nominalInput.removeAttribute('required'); 
                        } else {
                            nominalInput.removeAttribute('readonly');
                            nominalInput.classList.remove('bg-light');
                            nominalInput.setAttribute('required', 'required');
                            nominalInput.setAttribute('min', '1');
                        }
                        if (typeof kalkulasiTotal === "function") kalkulasiTotal(); 
                    };

                    aturNominal();
                    jenisSelect.addEventListener('change', function() {
                        aturNominal();
                        if (this.value !== "") nominalInput.focus();
                    });
                }
            }

            // --- 4. PENANGKAP FLASH MESSAGE ---
            const pesanSukses = "{{ get_flashed_messages(category_filter=['success'])[0] if get_flashed_messages(category_filter=['success']) else '' }}";
            const pesanError = "{{ get_flashed_messages(category_filter=['error'])[0] if get_flashed_messages(category_filter=['error']) else '' }}";

            if (typeof Swal !== 'undefined') {
                if (pesanSukses !== "") {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: pesanSukses,
                        timer: 2500,
                        showConfirmButton: false
                    });
                }
                
                if (pesanError !== "") {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: pesanError,
                        showConfirmButton: true
                    });
                }
            }
            
        });

        // --- POP-UP KONFIRMASI PEMECAH BULAN (SEBELUM SIMPAN) ---
            const formTambah = document.getElementById('formTambahTunggakan');
            if (formTambah) {
                formTambah.addEventListener('submit', function(e) {
                    e.preventDefault(); // Tahan form, jangan langsung dikirim

                    const namaSantri = document.getElementById('inputNamaForm').value;
                    const bulanAwal = document.getElementById('pilihBulan').value;
                    const bulanTerlambat = parseInt(document.querySelector('input[name="bulan_terlambat"]').value) || 1;
                    const totalUang = document.getElementById('totalBebanHitung').innerText;

                    // Daftar urutan bulan Hijriyah
                    const urutanBulan = ["Muharram", "Shafar", "Rabi'ul Awal", "Rabi'ul Akhir", "Jumadil Awal", "Jumadil Akhir", "Rajab", "Sya'ban", "Ramadhan", "Syawal", "Dzulqa'dah", "Dzulhijjah"];
                    
                    let daftarBulan = [];
                    let indexAwal = urutanBulan.indexOf(bulanAwal);
                    
                    if (indexAwal !== -1) {
                        for (let i = 0; i < bulanTerlambat; i++) {
                            // Looping cerdas: Jika lewat Dzulhijjah, otomatis kembali ke Muharram
                            daftarBulan.push(urutanBulan[(indexAwal + i) % 12]);
                        }
                    } else {
                        daftarBulan.push(bulanAwal); // Untuk bulan masehi
                    }

                    const teksBulan = daftarBulan.join(", ");

                    // Tampilkan Pop-up Konfirmasi
                    Swal.fire({
                        title: 'Konfirmasi Data',
                        html: `Tunggakan a.n <b>${namaSantri}</b> akan dicatat sebesar <b class="text-danger">${totalUang}</b>.<br><br>Untuk pelunasan ${bulanTerlambat} bulan:<br><b class="text-primary">${teksBulan}</b><br><br>Apakah rincian ini sudah benar?`,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#0d6efd',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, Simpan!',
                        cancelButtonText: 'Cek Lagi'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            formTambah.submit(); // Lanjutkan kirim ke Python
                        }
                    });
                });
            }

            // --- LOGIKA CERDAS: MATIKAN BULAN JIKA BUKAN SYAHRIYAH ---
            const jenisSelects = [
                document.querySelector('select[name="jenis_1"]'),
                document.querySelector('select[name="jenis_2"]'),
                document.querySelector('select[name="jenis_3"]')
            ];
            const boxBulan = document.getElementById('pilihBulan');
            const boxTerlambat = document.querySelector('input[name="bulan_terlambat"]');

            function cekJenisPembayaran() {
                let adaSyahriyah = false;
                
                // Cek apakah dari 3 baris rincian, ada kata "Syahriyah"
                jenisSelects.forEach(select => {
                    if (select && select.value.toLowerCase().includes('syahriyah')) {
                        adaSyahriyah = true;
                    }
                });

                if (adaSyahriyah) {
                    // Jika ada Syahriyah: Wajibkan dan Aktifkan Kotak Bulan & Terlambat
                    boxBulan.disabled = false;
                    boxBulan.required = true;
                    boxTerlambat.disabled = false;
                } else {
                    // Jika BUKAN Syahriyah: Matikan, Kosongkan Bulan, dan Kunci Terlambat jadi 1
                    boxBulan.disabled = true;
                    boxBulan.required = false;
                    boxBulan.value = ''; // Reset pilihan bulannya
                    
                    boxTerlambat.disabled = true;
                    boxTerlambat.value = '1'; // Kunci wajib 1 agar perkalian nominal tidak jadi 0
                }
                
                // Jalankan fungsi gabung periode (agar Python tidak error)
                if (typeof gabungPeriode === "function") gabungPeriode();
            }

            // Pasang sensor ke 3 kotak Jenis Tunggakan
            jenisSelects.forEach(select => {
                if (select) select.addEventListener('change', cekJenisPembayaran);
            });

            // Jalankan 1x saat pertama kali modal dibuka
            cekJenisPembayaran();

            // Fitur Pencarian (Search) & Filter Data Tunggakan
            const searchInput = document.getElementById('searchInput');
            const filterKelas = document.getElementById('filterKelas');
            const filterJenis = document.getElementById('filterJenis');
            const rows = document.querySelectorAll('.table-hover tbody tr');
            
            // 1. Ekstrak kelas & jenis unik untuk mengisi Dropdown secara Dinamis
            let uniqueKelas = new Set();
            let uniqueJenis = new Set();
            
            rows.forEach(row => {
                let textKelas = row.querySelector('.td-kelas')?.innerText.trim();
                let textJenis = row.querySelector('.td-jenis')?.innerText.trim();
                
                if(textKelas) uniqueKelas.add(textKelas);
                if(textJenis) {
                    // Jika jenis gabungan (Syahriyah, Daftar Ulang), kita split by koma agar rapi
                    let splitJenis = textJenis.split(',');
                    splitJenis.forEach(j => uniqueJenis.add(j.trim()));
                }
            });
            
            // Masukkan ke dalam dropdown (urut secara abjad)
            Array.from(uniqueKelas).sort().forEach(k => {
                let opt = document.createElement('option');
                opt.value = k.toLowerCase();
                opt.innerHTML = k;
                filterKelas.appendChild(opt);
            });
            
            Array.from(uniqueJenis).sort().forEach(j => {
                let opt = document.createElement('option');
                opt.value = j.toLowerCase();
                opt.innerHTML = j;
                filterJenis.appendChild(opt);
            });

            // 2. Fungsi Utama untuk memfilter baris
            function terapkanFilter() {
                let valSearch = searchInput ? searchInput.value.toLowerCase() : '';
                let valKelas = filterKelas ? filterKelas.value.toLowerCase() : '';
                let valJenis = filterJenis ? filterJenis.value.toLowerCase() : '';
                
                rows.forEach(row => {
                    let textRow = row.innerText.toLowerCase();
                    let textKelas = row.querySelector('.td-kelas')?.innerText.toLowerCase() || '';
                    let textJenis = row.querySelector('.td-jenis')?.innerText.toLowerCase() || '';
                    
                    let matchSearch = textRow.includes(valSearch);
                    let matchKelas = valKelas === '' || textKelas === valKelas;
                    let matchJenis = valJenis === '' || textJenis.includes(valJenis);
                    
                    if (matchSearch && matchKelas && matchJenis) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            }

            // 3. Pasang event listener ke semua input filter
            if(searchInput) searchInput.addEventListener('keyup', terapkanFilter);
            if(filterKelas) filterKelas.addEventListener('change', terapkanFilter);
            if(filterJenis) filterJenis.addEventListener('change', terapkanFilter);
    </script>

    <!-- Bootstrap JS (Opsional untuk interaktivitas modal dropdown) -->
    
    <!-- SweetAlert2 CSS & JS -->
{% endblock %}