{% 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 'tagihan' %}

{% block title %}Tagihan{% endblock %}

{% block page_title %}Kelola Tagihan Santri{% endblock %}

{% block content %}
<!-- HEADER KONTEN (Desain Bersih & Rapi) -->
        <div class="d-flex justify-content-between align-items-start mb-4">
            
            <!-- Bagian Kiri: Judul & Status Periode -->
            <div>
                
                <div class="d-flex align-items-center gap-2 mt-2">
                    <!-- Badge Penanda Waktu Asli Saat Ini -->
                    <span class="badge bg-primary px-3 py-2 shadow-sm" style="font-size: 0.85rem; letter-spacing: 0.5px;">
                        <i class="fas fa-calendar-check me-1"></i> Bulan Berjalan: {{ nama_bulan_sekarang }} {{ tahun_sekarang }} H
                    </span>
                    
                    <!-- Tombol kembali (Hanya muncul jika admin sedang mem-filter masa lalu) -->
                    {% if is_riwayat %}
                    <a href="/admin_keuangan/dashboard" class="btn btn-sm btn-outline-danger shadow-sm py-1 fw-bold" style="font-size: 0.8rem;">
                        <i class="fas fa-undo me-1"></i> Kembali
                    </a>
                    {% endif %}
                </div>
            </div>

            <!-- Bagian Kanan: Tombol -->
            <div>
                <form method="POST" action="/admin_keuangan/tagihan/generate_spp" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin men-generate tagihan SPP bulan ini untuk semua santri yang aktif?');">
                    <button type="submit" class="btn btn-warning shadow-sm me-2"><i class="fas fa-magic"></i> Generate SPP Bulan Ini</button>
                </form>
                <button class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#tambahTagihanModal">
                    <i class="fas fa-plus"></i> Tambah Tagihan Baru
                </button>
            </div>
        </div>

        <div class="container-fluid pt-1">

    <!-- Menampilkan pesan flash -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="bule-card rounded-2 shadow-sm border-0 overflow-hidden bg-white mt-4">
            <div class="table-responsive">
                <table class="table mb-0 align-middle table-hover text-start" id="tagihanTable" style="font-size: 0.875rem;">
                    <thead>
<tr class="bg-white border-bottom border-light-subtle">
                        <tr>
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">No</th>
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">Tanggal</th>
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">Nama Santri</th>
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">Jenis Tagihan</th>
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">Nominal</th>
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">Telah Dibayar</th>
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">Status</th>
                            <th class="py-3 px-4 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="border-top-0">
                        {% for row in tagihan_list %}
                        <tr class="action-row-hover border-bottom border-light-subtle">
<td>{{ loop.index }}</td>
                            <td>{{ row.tanggal_tagihan.strftime('%d-%m-%Y') }}</td>
                            <td>{{ row.nama_lengkap }} <br><small class="text-muted">{{ row.id_santri }}</small></td>
                            <td>{{ row.jenis_tagihan }} <br><small class="text-muted">{{ row.keterangan }}</small></td>
                            <td>Rp {{ "{:,.0f}".format(row.nominal).replace(',', '.') }}</td>
                            <td class="text-success">Rp {{ "{:,.0f}".format(row.jumlah_dibayar).replace(',', '.') }}</td>
                            <td>
                                {% if row.status == 'lunas' %}
                                <span class="badge bg-success">Lunas</span>
                                {% elif row.status == 'sebagian' %}
                                <span class="badge bg-warning text-dark">Sebagian</span>
                                {% else %}
                                <span class="badge bg-danger">Belum</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if row.status != 'lunas' %}
                                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#bayarTagihanModal" onclick="siapkanBayar('{{ row.id }}', '{{ row.nominal - row.jumlah_dibayar }}', '{{ row.nama_lengkap }}')"><i class="fas fa-money-bill-wave"></i> Bayar</button>
                                {% endif %}
                                <form method="POST" action="/admin_keuangan/tagihan/hapus/{{ row.id }}" class="d-inline" onsubmit="return confirm('Hapus tagihan ini?');"><button type="submit" class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i> Hapus</button></form>
                            </td>
                        </tr>
                        {% else %}
                        <tr class="action-row-hover border-bottom border-light-subtle">
                            <td colspan="8" class="text-center py-5 border-0">
                                <div class="d-flex flex-column align-items-center justify-content-center text-muted">
                                    <i class="fas fa-receipt mb-3" style="font-size: 3rem; color: #cbd5e1;"></i>
                                    <h6 class="fw-medium mb-1">Belum ada data Tagihan</h6>
                                    <small>Data tagihan yang dibuat untuk santri akan muncul di sini.</small>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah Tagihan Manual (Model Tunggakan) -->
<div class="modal fade" id="tambahTagihanModal" tabindex="-1" aria-labelledby="tambahTagihanModalLabel" 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="tambahTagihanModalLabel">Tambah Tagihan Santri</h5>
                    <small class="text-muted">Masukkan rincian tagihan baru</small>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <form action="/admin_keuangan/tagihan" method="POST" id="formTambahTagihan">
                <div class="modal-body p-4 pt-2">
                    
                    <!-- Pencarian Cerdas -->
                    <div class="mb-3">
                        <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>
                        <div class="position-relative">
                            <input type="text" class="form-control form-control-sm border-primary" id="inputPencarianSantri" placeholder="Ketik NIS atau Nama..." autocomplete="off" required>
                            <input type="hidden" name="id_santri" id="id_santri" required>
                            <input type="hidden" id="jenis_kelamin_hidden">
                            <ul class="dropdown-menu w-100 shadow-sm" id="dropdownHasilSantri" style="max-height: 200px; overflow-y: auto; display: none; position: absolute; top: 100%; left: 0; z-index: 1050; padding: 0; margin-top: 2px;">
                            </ul>
                        </div>
                    </div>

                    <!-- Rincian Tagihan 1-3 -->
                    <div class="bg-light p-3 rounded border mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted" style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Rincian Tagihan</span>
                        </div>
                        
                        <!-- Rincian 1 -->
                        <div class="row mb-1">
                            <div class="col-6">
                                <select class="form-select form-select-sm jenis-tagihan" name="jenis_1" required>
                                    <option value="">-- Pilih Jenis 1 --</option>
                                    <optgroup label="Syahriyah">
                                        <option value="Syahriyah Pondok">Syahriyah Pondok</option>
                                        <option value="Syahriyah Madin">Syahriyah Madin</option>
                                    </optgroup>
                                    <optgroup label="Pendaftaran & Jariyah">
                                        <option value="Pendaftaran Pondok">Pendaftaran Pondok</option>
                                        <option value="Pendaftaran Madin">Pendaftaran Madin</option>
                                        <option value="Daftar Ulang Pondok">Daftar Ulang Pondok</option>
                                        <option value="Daftar Ulang Madin">Daftar Ulang Madin</option>
                                        <option value="Jariyah Pondok">Jariyah Pondok</option>
                                        <option value="Jariyah Madin">Jariyah Madin</option>
                                    </optgroup>
                                    <optgroup label="Lainnya">
                                        <option value="Kalender">Kalender</option>
                                        <option value="Raport">Raport</option>
                                        <option value="Semester Ganjil">Semester Ganjil</option>
                                        <option value="Semester Genap">Semester Genap</option>
                                        <option value="UAM">UAM</option>
                                        <option value="Almamater">Almamater</option>
                                        <option value="Seragam">Seragam</option>
                                        <option value="Kos/Makan">Kos/Makan</option>
                                        <option value="Lainnya">Lainnya...</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="col-6">
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text bg-white">Rp</span>
                                    <input type="number" class="form-control nominal-tagihan" name="nominal_1" placeholder="0" required>
                                </div>
                            </div>
                        </div>

                        <!-- Rincian 2 -->
                        <div class="row mb-1">
                            <div class="col-6">
                                <select class="form-select form-select-sm jenis-tagihan" name="jenis_2">
                                    <option value="">-- Pilih Jenis 2 --</option>
                                    <!-- Options populated by JS to save space -->
                                </select>
                            </div>
                            <div class="col-6">
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text bg-white">Rp</span>
                                    <input type="number" class="form-control nominal-tagihan" name="nominal_2" placeholder="0">
                                </div>
                            </div>
                        </div>

                        <!-- Rincian 3 -->
                        <div class="row mb-1">
                            <div class="col-6">
                                <select class="form-select form-select-sm jenis-tagihan" name="jenis_3">
                                    <option value="">-- Pilih Jenis 3 --</option>
                                    <!-- Options populated by JS to save space -->
                                </select>
                            </div>
                            <div class="col-6">
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text bg-white">Rp</span>
                                    <input type="number" class="form-control nominal-tagihan" name="nominal_3" placeholder="0">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pilihan Bulan Khusus Syahriyah -->
                    <div class="row mb-3" id="areaBulanSyahriyah" style="display: none;">
                        <div class="col-7">
                            <label class="form-label text-muted" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Bulan Awal Syahriyah</label>
                            <select class="form-select form-select-sm orange" id="pilihBulan" name="bulan_syahriyah">
                                <option value="">-- Pilih Bulan --</option>
                                <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>
                            </select>
                        </div>
                        <div class="col-5">
                            <label class="form-label text-muted" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Jumlah Bulan</label>
                            <input type="number" class="form-control form-control-sm orange" name="jumlah_bulan" id="jumlahBulan" value="1" min="1" max="12">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="keterangan" class="form-label text-muted" style="font-size: 0.7rem; font-weight: bold; text-transform: uppercase;">Keterangan Tambahan (Opsional)</label>
                        <textarea class="form-control form-control-sm" id="keterangan" name="keterangan" rows="2" placeholder="Catatan tagihan..."></textarea>
                    </div>

                    <!-- Total Beban -->
                    <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top">
                        <span class="text-muted fw-bold">TOTAL TAGIHAN</span>
                        <h4 class="mb-0 fw-bold text-danger" id="totalTagihanHitung">Rp 0</h4>
                    </div>

                </div>
                <div class="modal-footer border-top-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary px-4 fw-medium"><i class="fas fa-save me-2"></i> Simpan Tagihan</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal Bayar Tagihan -->
<div class="modal fade" id="bayarTagihanModal" tabindex="-1" aria-labelledby="bayarTagihanModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header border-bottom-0 pb-0">
                <h5 class="modal-title fw-bold" id="bayarTagihanModalLabel">Bayar Tagihan Santri</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="/admin_keuangan/tagihan/bayar" method="POST">
                <div class="modal-body">
                    <input type="hidden" id="modal_id_tagihan" name="id_tagihan">
                    
                    <div class="p-3 bg-light rounded-3 mb-3 border">
                        <div class="text-muted small mb-1">Nama Santri</div>
                        <div class="fw-semibold text-dark" id="modal_nama_santri"></div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Sisa Tagihan yang Harus Dibayar</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0">Rp</span>
                            <input type="text" class="form-control border-start-0 bg-white" id="modal_sisa_bayar_display" readonly>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="nominal_bayar" class="form-label text-muted small fw-bold">Nominal Pembayaran</label>
                        <div class="input-group">
                            <span class="input-group-text bg-primary text-white border-primary">Rp</span>
                            <input type="number" class="form-control border-primary shadow-none" id="nominal_bayar" name="nominal_bayar" required>
                        </div>
                        <div class="form-text mt-2"><i class="fas fa-info-circle"></i> Masukkan jumlah uang yang dibayarkan santri saat ini.</div>
                    </div>
                </div>
                <div class="modal-footer border-top-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary px-4 fw-medium"><i class="fas fa-check me-2"></i> Proses Pembayaran</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    function siapkanBayar(id, sisaBayar, nama) {
        document.getElementById('modal_id_tagihan').value = id;
        document.getElementById('modal_nama_santri').textContent = nama;
        
        // Format rupiah untuk tampilan
        let sisaRupiah = parseInt(sisaBayar).toLocaleString('id-ID');
        document.getElementById('modal_sisa_bayar_display').value = sisaRupiah;
        
        // Default isi input dengan full tagihan, tapi bisa diedit untuk cicil
        document.getElementById('nominal_bayar').value = parseInt(sisaBayar);
        
        // Fokus otomatis ke input nominal setelah modal terbuka
        setTimeout(() => {
            document.getElementById('nominal_bayar').focus();
            document.getElementById('nominal_bayar').select();
        }, 500);
    }
</script><script>
    // Data tarif dari database backend
    const tarifDb = {
        'Syahriyah Pondok Putra': parseInt("{{ tarif.tarif_syahriyah_pondok_putra or 0 }}"),
        'Syahriyah Pondok Putri': parseInt("{{ tarif.tarif_syahriyah_pondok_putri or 0 }}"),
        'Syahriyah Madin': parseInt("{{ tarif.tarif_syahriyah_madin or 0 }}"),
        'Pendaftaran Pondok': parseInt("{{ tarif.tarif_pendaftaran_pondok or 0 }}"),
        'Pendaftaran Madin': parseInt("{{ tarif.tarif_pendaftaran_madin or 0 }}"),
        'Daftar Ulang Pondok': parseInt("{{ tarif.tarif_daftar_ulang_pondok or 0 }}"),
        'Daftar Ulang Madin': parseInt("{{ tarif.tarif_daftar_ulang_madin or 0 }}"),
        'Jariyah Pondok': parseInt("{{ tarif.tarif_jariyah_pondok or 0 }}"),
        'Jariyah Madin': parseInt("{{ tarif.tarif_jariyah_madin or 0 }}"),
        'Kalender': parseInt("{{ tarif.tarif_kalender or 0 }}"),
        'Raport': parseInt("{{ tarif.tarif_raport or 0 }}"),
        'Semester Ganjil': parseInt("{{ tarif.tarif_semester_ganjil or 0 }}"),
        'Semester Genap': parseInt("{{ tarif.tarif_semester_genap or 0 }}"),
        'UAM': parseInt("{{ tarif.tarif_uam or 0 }}"),
        'Almamater': parseInt("{{ tarif.tarif_almamater or 0 }}"),
        'Seragam': parseInt("{{ tarif.tarif_seragam_putih or 0 }}"),
        'Kos/Makan': parseInt("{{ tarif.tarif_kos_makan or 0 }}")
    };


<!-- Data Santri JSON -->
<script id="dataSiswaJson" type="application/json">
    {{ santri_list | tojson | safe }}
</script><script>
    // ==== PENCARIAN CERDAS SANTRI (AUTOCOMPLETE) ====
    const inputPencarian = document.getElementById('inputPencarianSantri');
    const dropdownHasil = document.getElementById('dropdownHasilSantri');
    const hiddenIdSantri = document.getElementById('id_santri');
    const hiddenJk = document.getElementById('jenis_kelamin_hidden');
    let dataSiswa = [];

    try {
        const rawData = document.getElementById('dataSiswaJson').textContent;
        dataSiswa = JSON.parse(rawData);
    } catch (e) {
        console.error("Gagal memuat data siswa JSON:", e);
    }

    if (inputPencarian && dropdownHasil) {
        // Matikan enter pada input pencarian
        inputPencarian.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                return false;
            }
        });

        inputPencarian.addEventListener('input', function() {
            const kataKunci = this.value.toLowerCase().trim();
            dropdownHasil.innerHTML = '';
            
            // Reset hidden inputs jika user merubah ketikan
            hiddenIdSantri.value = '';
            hiddenJk.value = '';

            if (kataKunci.length > 0) {
                const hasilCari = dataSiswa.filter(s => 
                    String(s.id_santri).toLowerCase().includes(kataKunci) || 
                    String(s.nama_lengkap).toLowerCase().includes(kataKunci)
                ).slice(0, 20); // Batasi 20 hasil agar cepat

                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.id_santri} - ${siswa.nama_lengkap}`;

                        a.addEventListener('click', function(e) {
                            e.preventDefault();
                            inputPencarian.value = `${siswa.id_santri} - ${siswa.nama_lengkap}`;
                            hiddenIdSantri.value = siswa.id_santri;
                            hiddenJk.value = siswa.jenis_kelamin || '';
                            
                            dropdownHasil.style.display = 'none';
                            
                            // Trigger update nominal jika tagihan sudah dipilih
                            hitungTotalTagihan();
                        });

                        li.appendChild(a);
                        dropdownHasil.appendChild(li);
                    });
                    dropdownHasil.style.display = 'block';
                } else {
                    const li = document.createElement('li');
                    li.innerHTML = '<span class="dropdown-item text-muted disabled">Tidak ditemukan</span>';
                    dropdownHasil.appendChild(li);
                    dropdownHasil.style.display = 'block';
                }
            } else {
                dropdownHasil.style.display = 'none';
            }
        });

        // Sembunyikan dropdown saat klik di luar
        document.addEventListener('click', function(e) {
            if (!inputPencarian.contains(e.target) && !dropdownHasil.contains(e.target)) {
                dropdownHasil.style.display = 'none';
            }
        });
    }

    // ==== LOGIKA FORM TUNGGAKAN MODEL (TOTAL & SYAHRIYAH) ====
    const jenisSelects = document.querySelectorAll('.jenis-tagihan');
    const nominalInputs = document.querySelectorAll('.nominal-tagihan');
    const totalDisplay = document.getElementById('totalTagihanHitung');
    const areaBulan = document.getElementById('areaBulanSyahriyah');
    const pilihBulan = document.getElementById('pilihBulan');
    const jumlahBulan = document.getElementById('jumlahBulan');

    // Clone options dari jenis_1 ke jenis_2 dan jenis_3
    const optGroupHtml = jenisSelects[0].innerHTML;
    if(jenisSelects[1]) jenisSelects[1].innerHTML = optGroupHtml.replace('-- Pilih Jenis 1 --', '-- Pilih Jenis 2 --');
    if(jenisSelects[2]) jenisSelects[2].innerHTML = optGroupHtml.replace('-- Pilih Jenis 1 --', '-- Pilih Jenis 3 --');

    function hitungTotalTagihan() {
        let total = 0;
        let adaSyahriyah = false;

        // Cek Syahriyah dan Hitung Total
        jenisSelects.forEach((select, index) => {
            const val = select.value;
            let nomInput = nominalInputs[index];
            
            if (val) {
                // Auto isi nominal jika kosong
                if (nomInput.value === "") {
                    const hiddenJk = document.getElementById('jenis_kelamin_hidden');
                    let jk = hiddenJk && hiddenJk.value ? hiddenJk.value : "Laki-laki";
                    let targetKey = val;
                    if(val === "Syahriyah Pondok") {
                        targetKey = (jk === "Perempuan" || jk === "Putri") ? "Syahriyah Pondok Putri" : "Syahriyah Pondok Putra";
                    }
                    if(tarifDb[targetKey]) {
                        nomInput.value = tarifDb[targetKey];
                    }
                }

                if (val.toLowerCase().includes('syahriyah')) {
                    adaSyahriyah = true;
                }
            }

            // Tambahkan ke total
            if (nomInput.value) {
                total += parseInt(nomInput.value) || 0;
            }
        });

        // Jika ada syahriyah, tampilkan kotak bulan dan kalikan dengan jumlah bulan
        if (adaSyahriyah) {
            areaBulan.style.display = 'flex';
            pilihBulan.required = true;
            
            let pengaliBulan = parseInt(jumlahBulan.value) || 1;
            // Kita kalikan khusus item syahriyah saja yang dikalikan bulan, tapi untuk gampangnya di UI:
            // Lebih baik kita re-kalkulasi: total = (total_non_syahriyah) + (total_syahriyah * pengaliBulan)
            total = 0;
            jenisSelects.forEach((select, index) => {
                const val = select.value;
                const nom = parseInt(nominalInputs[index].value) || 0;
                if (val.toLowerCase().includes('syahriyah')) {
                    total += (nom * pengaliBulan);
                } else {
                    total += nom;
                }
            });
        } else {
            areaBulan.style.display = 'none';
            pilihBulan.required = false;
        }

        totalDisplay.innerText = "Rp " + total.toLocaleString('id-ID');
    }

    jenisSelects.forEach(sel => sel.addEventListener('change', hitungTotalTagihan));
    nominalInputs.forEach(inp => inp.addEventListener('input', hitungTotalTagihan));
    if(jumlahBulan) jumlahBulan.addEventListener('input', hitungTotalTagihan);
</script>
<!-- Bootstrap JS -->
{% endblock %}