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

{% block title %}Pengeluaran Kasir{% endblock %}

{% block page_title %}Manajemen Transaksi{% endblock %}

{% block content %}
<!-- Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            
            <span class="badge bg-primary fs-6 px-3 py-2 rounded-pill"><i class="fas fa-calendar-alt me-1"></i> Bulan Berjalan: {{ nama_bulan_aktif }} {{ tahun_aktif_str }} H</span>
        </div>

        <!-- 4 Kartu Ringkasan -->
        <div class="row mb-3 align-items-stretch">
            <div class="col-md-3 mb-2 mb-md-0">
                <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 PEMASUKAN</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">Rp {{ "{:,.0f}".format(total_pemasukan).replace(',', '.') }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-2 mb-md-0">
                <div class="stat-card">
                    <div class="stat-icon green"><i class="fas fa-arrow-trend-up"></i></div>
                    <div>
                        <span class="text-muted fw-bold" style="font-size: 11px; white-space: nowrap; text-transform: uppercase;">SETORAN BULAN INI</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">Rp {{ "{:,.0f}".format(total_setoran).replace(',', '.') }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-2 mb-md-0">
                <div class="stat-card">
                    <div class="stat-icon red"><i class="fas fa-arrow-trend-down"></i></div>
                    <div>
                        <span class="text-muted fw-bold" style="font-size: 11px; white-space: nowrap; text-transform: uppercase;">PENGELUARAN BULAN INI</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">Rp {{ "{:,.0f}".format(total_pengeluaran).replace(',', '.') }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon blue"><i class="fas fa-vault"></i></div>
                    <div>
                        <span class="text-muted fw-bold" style="font-size: 11px; white-space: nowrap; text-transform: uppercase;">SISA SALDO</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">Rp {{ "{:,.0f}".format(sisa_saldo).replace(',', '.') }}</h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Baris Filter & Tombol Aksi -->
        <div class="card border-0 shadow-sm rounded-4 mb-4 p-3 p-3 mb-4">
            <div class="row g-2 align-items-center">
                <div class="col-md-2">
                    <input type="date" class="form-control" title="Tanggal Awal">
                </div>
                <div class="col-md-2">
                    <select class="form-select">
                        <option value="">Semua Kategori</option>
                        <option value="Operasional">Operasional</option>
                        <option value="Pembangunan">Pembangunan</option>
                    </select>
                </div>
                <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" class="form-control border-start-0 ps-0" placeholder="Cari keterangan atau keperluan...">
                    </div>
                </div>
                <!-- KODE BARU (DROPDOWN) -->
<div class="col-md-4 text-end">
    <div class="dropdown">
        <button class="btn btn-primary px-4 fw-bold rounded-pill shadow-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-plus me-1"></i> Tambah Transaksi
        </button>
        <!-- KODE DROPDOWN YANG BENAR -->
<ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2" style="border-radius: 10px; min-width: 200px;">
    <li>
    <a class="dropdown-item py-2 d-flex align-items-center" href="javascript:void(0);" onclick="bukaModalPengeluaran()">
        <!-- Menggunakan warna merah (text-danger) agar selaras dengan tema pengeluaran -->
        <i class="fas fa-file-invoice-dollar text-danger me-2" style="width: 20px; text-align: center;"></i> 
        <span>Catat Pengeluaran</span>
    </a>
</li>
    <li>
    <!-- Pastikan href="#" diganti, dan hapus semua embel-embel data-bs-toggle -->
    <a class="dropdown-item py-2 d-flex align-items-center" href="javascript:void(0);" onclick="bukaModalSetoran()">
        <i class="fas fa-building-columns text-success me-2" style="width: 20px; text-align: center;"></i> 
        <span>Setoran ke Pusat</span>
    </a>
</li>
</ul>
    </div>
</div>
            </div>
        </div>

        <!-- Area Tabel Data (Sistem Tab) -->
        <div class="card border-0 shadow-sm rounded-4 mb-4 p-3">
            <!-- Navigasi Tab -->
            <ul class="nav nav-tabs px-3 pt-3" id="transaksiTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pengeluaran-tab" data-bs-toggle="tab" data-bs-target="#pengeluaran" type="button" role="tab">
                        <i class="fas fa-arrow-down text-danger me-1"></i> Riwayat Pengeluaran
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="setoran-tab" data-bs-toggle="tab" data-bs-target="#setoran" type="button" role="tab">
                        <i class="fas fa-arrow-up text-success me-1"></i> Riwayat Setoran
                    </button>
                </li>
            </ul>

            <!-- Isi Tab -->
            <div class="tab-content" id="transaksiTabContent">
                
                <!-- Tab Pengeluaran -->
                <div class="tab-pane fade show active p-3" id="pengeluaran" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th class="text-center" width="5%">No</th>
                                    <th width="15%">Tanggal</th>
                                    <th width="15%">Kategori</th>
                                    <th width="20%">Keperluan</th>
                                    <th width="20%">Keterangan</th>
                                    <th class="text-end" width="15%">Nominal</th>
                                    <th class="text-center" width="10%">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Loop Jinja2 Data dari Python -->
                                <!-- KODE YANG BENAR -->
{% if riwayat %}
    {% for row in riwayat %}
    <tr>
        <td class="text-center">{{ loop.index }}</td>
        <td>{{ row.tanggal }}</td>
        <td><span class="badge bg-secondary">{{ row.kategori }}</span></td>
        <td>{{ row.keperluan }}</td>
        <td class="text-muted">{{ row.keterangan }}</td>
        <td class="text-end text-nominal-out">Rp {{ "{:,.0f}".format(row.nominal).replace(',', '.') }}</td>
        <td class="text-center">
            <button onclick="editPengeluaran('{{ row.id_transaksi }}')" class="btn btn-sm btn-outline-primary" title="Edit">
                <i class="fas fa-edit"></i>
            </button>
            <button onclick="hapusPengeluaran('{{ row.id_transaksi }}')" class="btn btn-sm btn-outline-danger" title="Hapus">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>
    {% endfor %} <!-- SUDAH DIPERBAIKI -->
{% else %}
                                    <tr>
                                        <td colspan="7" class="text-center py-4 text-muted">Belum ada data pengeluaran.</td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Tab Setoran -->
                <div class="tab-pane fade p-3" id="setoran" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th class="text-center" width="5%">No</th>
                                    <th width="15%">Tanggal</th>
                                    <th width="15%">Kategori</th>
                                    <th width="20%">Sumber / Penyetor</th>
                                    <th width="20%">Keterangan</th>
                                    <th class="text-end" width="15%">Nominal</th>
                                    <th class="text-center" width="10%">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if data_setoran %}
                                    {% for row in data_setoran %}
                                    <tr>
                                        <td class="text-center">{{ loop.index }}</td>
                                        <td>{{ row.tanggal }}</td>
                                        <td><span class="badge bg-success">Setoran Pusat</span></td>
                                        <td>
                                            <div class="fw-bold text-dark">{{ row.penyetor }}</div>
                                            <div class="text-muted" style="font-size: 11px;">Penerima: {{ row.penerima }}</div>
                                        </td>
                                        <td>{{ row.keterangan if row.keterangan else '-' }}</td>
                                        <td class="text-end fw-bold text-success">
                                            Rp {{ "{:,.0f}".format(row.total_setoran).replace(',', '.') }}
                                        </td>
                                        <td class="text-center text-nowrap align-middle">
    <div class="d-flex justify-content-center gap-1">
        <!-- Tombol Cetak -->
        <a href="/admin_keuangan/cetak_setoran/{{ row.id_setoran }}" target="_blank" class="btn btn-sm btn-outline-info" title="Cetak Bukti Setoran">
            <i class="fas fa-print"></i>
        </a>
        
        <!-- Tombol Edit -->
        <button onclick="editSetoran('{{ row.id_setoran }}')" class="btn btn-sm btn-outline-primary" title="Edit">
            <i class="fas fa-edit"></i>
        </button>
        
        <!-- Tombol Hapus -->
        <button onclick="hapusSetoran('{{ row.id_setoran }}')" class="btn btn-sm btn-outline-danger" title="Hapus">
            <i class="fas fa-trash"></i>
        </button>
    </div>
</td>
                                    </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <!-- Jika kamu melihat ikon folder ini setelah di-refresh, berarti kodenya sudah berhasil terpasang! -->
                                        <td colspan="7" class="text-center py-4 text-muted">
                                            <i class="fas fa-folder-open fs-4 mb-2 text-black-50"></i><br>
                                            Belum ada data setoran saat ini.
                                        </td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div> <!-- End Content Wrapper -->
<<!-- MODAL EDIT PENGELUARAN (DESAIN BARU 2 KOLOM) -->
<div class="modal fade" id="modalEditPengeluaran" tabindex="-1" aria-hidden="true">
    <!-- Menggunakan modal-lg agar form lebih lebar dan lega -->
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 15px;">
            
            <!-- Header Polos -->
            <div class="modal-header border-0 text-center pb-0 d-flex justify-content-center position-relative mt-2">
                <h4 class="modal-title fw-bold text-dark w-100">Edit Pengeluaran</h4>
                <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body px-4 px-md-5 pb-4 mt-2">
                
                <!-- Kotak Info Kuning -->
                <div class="alert border-0 border-start border-4 border-danger d-flex align-items-center p-3 mb-4 shadow-sm" style="background-color: #fff3cd;">
                    <i class="fas fa-file-invoice-dollar fs-3 text-danger me-3"></i>
                    <div>
                        <h6 class="mb-1 fw-bold text-dark">Form Edit Pengeluaran</h6>
                        <small class="text-muted">Perbarui detail arus kas keluar dari laci bendahara dengan teliti.</small>
                    </div>
                </div>

                <form id="formEditPengeluaran">
                    <input type="hidden" id="edit_id_transaksi">
                    
                    <!-- BARIS 1: Pos Dana & Kategori (2 Kolom) -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-secondary" style="font-size: 14px;"><i class="fas fa-wallet me-1"></i> Sumber Pos Dana: <span class="text-danger">*</span></label>
                            <select class="form-select border-secondary-subtle" id="edit_pos_uang">
                                <option value="">-- Pilih Pos Dana --</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-md-6">
                            <label class="form-label fw-bold text-secondary" style="font-size: 14px;"><i class="fas fa-tags me-1"></i> Kategori: <span class="text-danger">*</span></label>
                            <select class="form-select border-secondary-subtle" id="edit_kategori">
                                <option value="">-- Pilih Kategori --</option>
                                <option value="ATK & Fotokopi">ATK & Fotokopi</option>
                                <option value="Konsumsi & Dapur">Konsumsi & Dapur</option>
                                <option value="Transportasi & Bensin">Transportasi & Bensin</option>
                                <option value="Pemeliharaan & Tukang">Pemeliharaan & Tukang</option>
                                <option value="Honor / Bisaroh">Honor / Bisaroh</option>
                                <option value="Listrik, Air & Internet">Listrik, Air & Internet</option>
                                <option value="Kegiatan / Event Acara">Kegiatan / Event Acara</option>
                                <option value="Lain-lain">Lain-lain</option>
                            </select>
                        </div>
                    </div>

                    <!-- BARIS 2: Nominal & Tanggal (2 Kolom) -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-secondary" style="font-size: 14px;"><i class="fas fa-money-bill-wave me-1"></i> Nominal Keluar (Rp): <span class="text-danger">*</span></label>
                            <input type="number" class="form-control border-danger text-danger fw-bold" id="edit_nominal">
                        </div>
                        
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-secondary" style="font-size: 14px;"><i class="far fa-calendar-alt me-1"></i> Tanggal Transaksi: <span class="text-danger">*</span></label>
                            <input type="date" class="form-control border-secondary-subtle" id="edit_tanggal">
                        </div>
                    </div>

                    <!-- BARIS 3: Keperluan (Full 1 Kolom) -->
                    <div class="mb-3">
                        <label class="form-label fw-bold text-secondary" style="font-size: 14px;"><i class="fas fa-shopping-cart me-1"></i> Keperluan Utama: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control border-secondary-subtle" id="edit_keperluan" placeholder="Contoh: Pembelian tinta printer dan HVS 2 rim">
                    </div>

                    <!-- BARIS 4: Keterangan (Full 1 Kolom) -->
                    <div class="mb-4">
                        <label class="form-label fw-bold text-secondary" style="font-size: 14px;"><i class="fas fa-comment-dots me-1"></i> Keterangan Tambahan:</label>
                        <textarea class="form-control border-secondary-subtle" id="edit_keterangan" rows="2" placeholder="Catatan tambahan (opsional)..."></textarea>
                    </div>

                    <!-- Tombol Simpan & Batal (Rata Tengah) -->
                    <div class="d-flex justify-content-center gap-2 mt-4 mb-2">
                        <button type="button" class="btn btn-danger px-4 py-2 fw-bold shadow-sm" onclick="simpanEditPengeluaran()">
                            <i class="fas fa-save me-1"></i> Simpan Perubahan
                        </button>
                        <button type="button" class="btn btn-secondary px-4 py-2 fw-bold shadow-sm" data-bs-dismiss="modal">
                            Batal
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- MODAL EDIT SETORAN MODERN -->
<div class="modal fade" id="modalEditSetoran" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered"> <!-- Tambah centered agar di tengah layar -->
        <div class="modal-content border-0" style="border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
            
            <!-- HEADER MODAL -->
            <div class="modal-header border-bottom-0 pb-0 px-4 pt-4">
                <div class="d-flex align-items-center">
                    <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                        <i class="fas fa-pen"></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold text-dark mb-0">Edit Rincian Setoran</h5>
                        <small class="text-muted">Perbarui data transaksi dengan teliti</small>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body px-4 pt-4">
                <form id="formEditSetoran">
                    <input type="hidden" id="edit_setoran_id">
                    
                    <!-- INFORMASI UTAMA (2 Kolom) -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="label-modern fw-bold">Tanggal & Waktu</label>
                            <input type="datetime-local" class="form-control" id="edit_setoran_tanggal">
                        </div>
                        <div class="col-md-6">
                            <label class="label-modern fw-bold">Penyetor (Sumber)</label>
                            <input type="text" class="form-control" id="edit_setoran_penyetor" placeholder="Nama Penyetor">
                        </div>
                        <div class="col-md-6">
                            <label class="label-modern fw-bold">Keterangan Tambahan</label>
                            <input type="text" class="form-control" id="edit_setoran_keterangan" placeholder="Contoh: Titipan, Angsuran, dll">
                        </div>
                        <div class="col-md-6">
                            <label class="label-modern fw-bold">Penerima (Kasir)</label>
                            <input type="text" class="form-control" id="edit_setoran_penerima" placeholder="Nama Penerima">
                        </div>
                    </div>

                    <div class="d-flex align-items-center mb-3 mt-4">
                        <h6 class="fw-bold text-dark mb-0"><i class="fas fa-wallet text-success me-2"></i>Rincian Nominal</h6>
                        <div class="ms-3 flex-grow-1" style="height: 1px; background-color: #e9ecef;"></div>
                    </div>
                    
                    <!-- RINCIAN UANG (2 Kolom) -->
                    <div class="row g-3">
                        <!-- Kolom Kiri -->
                        <div class="col-md-6">
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Syahriyah Pondok</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_sp" value="0" oninput="hitungTotalModal()">
                            </div>
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Jariyah Pondok</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_jp" value="0" oninput="hitungTotalModal()">
                            </div>
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Daftar Ulang Pndk</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_dp" value="0" oninput="hitungTotalModal()">
                            </div>
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Semester Ganjil</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_sgan" value="0" oninput="hitungTotalModal()">
                            </div>
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Semester Genap</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_sgen" value="0" oninput="hitungTotalModal()">
                            </div>
                        </div>
                        
                        <!-- Kolom Kanan -->
                        <div class="col-md-6">
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Syahriyah Madin</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_sm" value="0" oninput="hitungTotalModal()">
                            </div>
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Jariyah Madin</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_jm" value="0" oninput="hitungTotalModal()">
                            </div>
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Daftar Ulang Mdn</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_dm" value="0" oninput="hitungTotalModal()">
                            </div>
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Kalender</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_kl" value="0" oninput="hitungTotalModal()">
                            </div>
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Raport</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_rp" value="0" oninput="hitungTotalModal()">
                            </div>
                            <div class="input-group mb-2 shadow-sm rounded">
                                <span class="input-group-text bg-white" style="width: 145px; font-size: 0.85rem;">Ujian Akhir (UAM)</span>
                                <span class="input-group-text input-group-text-rp border-start-0">Rp</span>
                                <input type="number" class="form-control edit-nominal no-spinner input-nominal-modern" id="edit_uam" value="0" oninput="hitungTotalModal()">
                            </div>
                        </div>
                    </div>

                    <!-- TOTAL REALTIME (Desain Baru Gradasi) -->
                    <div class="mt-4 p-4 rounded-3 text-white d-flex justify-content-between align-items-center shadow" style="background: linear-gradient(135deg, #198754 0%, #146c43 100%);">
                        <div>
                            <span class="d-block text-white-50 fw-bold" style="font-size: 0.85rem; letter-spacing: 1px;">TOTAL KESELURUHAN</span>
                            <small>Akumulasi dari seluruh rincian</small>
                        </div>
                        <div class="text-end">
                            <h2 class="mb-0 fw-bold" id="display_total_modal">Rp 0</h2>
                        </div>
                        <input type="hidden" id="edit_setoran_nominal">
                    </div>
                </form>
            </div>
            
            <!-- FOOTER -->
            <div class="modal-footer border-top-0 px-4 pb-4 pt-2 d-flex justify-content-between">
                <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-success px-4 fw-bold shadow-sm" onclick="simpanEditSetoran()">
                    <i class="fas fa-check-circle me-2"></i>Simpan Perubahan
                </button>
            </div>
            
        </div>
    </div>
</div>
    


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
{% endblock %}

{% block scripts %}
<script>
    // =====================================================================
    // 1. FUNGSI BANTUAN (TERMASUK FITUR BUKA KUNCI INPUT)
    // =====================================================================
    window.toggleInput = function(idItem) {
        let cb = document.getElementById('cb_' + idItem);
        let inputEl = document.getElementById('input_' + idItem);
        if (cb && inputEl) {
            inputEl.disabled = !cb.checked;
        }
    };

    window.toggleGroupSetoran = function(groupClass, isChecked) {
        document.querySelectorAll('.' + groupClass).forEach(cb => {
            cb.checked = isChecked;
            
            let idItem = cb.id.replace('cb_', '');
            window.toggleInput(idItem);
        });
        window.hitungTotalSetoran();
    };

    window.hitungTotalSetoran = function() {
        let totalNominal = 0;
        document.querySelectorAll('.input-setoran').forEach(input => {
            let idKomponen = input.id.replace('input_', '');
            let cb = document.getElementById('cb_' + idKomponen);
            
            if (cb && cb.checked) {
                totalNominal += parseInt(input.value) || 0;
            }
        });
        document.getElementById('total_wajib_setor').innerText = 'Rp ' + totalNominal.toLocaleString('id-ID');
    };

    // =====================================================================
    // 2. FUNGSI UTAMA MEMBUKA MODAL SETORAN
    // =====================================================================
    function bukaModalSetoran() {
        
        // --- DETEKSI BULAN & TAHUN HIJRIYAH HARI INI OTOMATIS ---
        // Mengambil Bulan dan Tahun Aktif dari Backend Python
        let currentHijriYear = parseInt("{{ tahun_aktif_str }}") || 1448;
        let namaBulanAktif = "{{ nama_bulan_aktif | safe }}";

        let tahunHTML = '';
        for (let i = 1446; i <= 1455; i++) {
            let isSelected = (i === currentHijriYear) ? 'selected' : '';
            tahunHTML += `<option value="${i} H" ${isSelected}>${i} H</option>`;
        }

        const bulanArray = ["Muharram", "Safar", "Rabi'ul Awal", "Rabi'ul Akhir", "Jumadil Awal", "Jumadil Akhir", "Rajab", "Sya'ban", "Ramadhan", "Syawal", "Dzulqa'dah", "Dzulhijjah"];
        
        let bulanHTML = '';
        bulanArray.forEach(bln => {
            let isSelected = (bln === namaBulanAktif) ? 'selected' : '';
            bulanHTML += `<option value="${bln}" ${isSelected}>${bln}</option>`;
        });
        // --------------------------------------------------------

        function generateRowSetoran(label, idItem, classGroup) {
            return `
            <tr class="border-bottom">
                <td class="align-middle ps-3">
                    <div class="form-check">
                        <input class="form-check-input ${classGroup}" type="checkbox" id="cb_${idItem}" onchange="toggleInput('${idItem}'); hitungTotalSetoran()">
                        <label class="form-check-label small text-dark" for="cb_${idItem}" style="cursor:pointer; font-size: 12px;">${label}</label>
                    </div>
                </td>
                <td class="text-end pe-2 align-middle" width="35%">
                    <input type="number" class="form-control form-control-sm text-end input-setoran" id="input_${idItem}" value="0" oninput="hitungTotalSetoran()" disabled>
                </td>
            </tr>`;
        }

        let htmlRincian = `
            <div class="text-start" style="font-size: 13px;">
                <div class="alert alert-info py-2 mb-3 shadow-sm border-0">
                    <div class="row g-2 align-items-center">
                        <div class="col-md-6 text-start">
                            <strong style="font-size: 14px; color: #0f5132;"><i class="fas fa-building-columns me-1"></i> Rekap Penyetoran Pusat</strong>
                        </div>
                        <div class="col-md-6 d-flex justify-content-md-end gap-1">
                            <select class="form-select form-select-sm border-secondary shadow-sm px-2 py-1" id="swal_tahun_setor" style="font-size: 12px; width: 90px; cursor: pointer;">
                                ${tahunHTML}
                            </select>
                            <select class="form-select form-select-sm border-secondary shadow-sm px-2 py-1" id="swal_bulan_setor" style="font-size: 12px; width: 130px; cursor: pointer;">
                                ${bulanHTML}
                            </select>
                        </div>
                    </div>
                </div>

                <p class="text-muted mb-2" style="font-size: 12px;"><i class="fas fa-info-circle"></i> Centang terlebih dahulu, lalu sesuaikan nominal yang akan disetor.</p>

                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <table class="table table-sm align-middle table-bordered mb-0">
                            <thead class="table-dark">
                                <tr><th colspan="2" class="py-2"><i class="fas fa-university me-1"></i> SETORAN PONDOK & MADIN</th></tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="2" class="bg-light p-1">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-bold text-success" style="font-size: 11px;">KEUANGAN PONDOK</span>
                                            <div class="form-check form-check-inline m-0">
                                                <input class="form-check-input" type="checkbox" id="all_pondok" onchange="toggleGroupSetoran('cb-pondok', this.checked)">
                                                <label class="form-check-label fw-bold text-dark" for="all_pondok" style="cursor:pointer; font-size: 11px;">Pilih Semua</label>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                ${generateRowSetoran('Daftar Ulang Pondok', 'dp', 'cb-pondok')}
                                ${generateRowSetoran('Syahriyah Pondok', 'sp', 'cb-pondok')}
                                ${generateRowSetoran('Jariyah Pondok', 'jp', 'cb-pondok')}

                                <tr>
                                    <td colspan="2" class="bg-light p-1 mt-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-bold text-primary" style="font-size: 11px;">KEUANGAN MADIN</span>
                                            <div class="form-check form-check-inline m-0">
                                                <input class="form-check-input" type="checkbox" id="all_madin" onchange="toggleGroupSetoran('cb-madin', this.checked)">
                                                <label class="form-check-label fw-bold text-dark" for="all_madin" style="cursor:pointer; font-size: 11px;">Pilih Semua</label>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                ${generateRowSetoran('Daftar Ulang Madin', 'dm', 'cb-madin')}
                                ${generateRowSetoran('Syahriyah Madin', 'sm', 'cb-madin')}
                                ${generateRowSetoran('Jariyah Madin', 'jm', 'cb-madin')}
                                ${generateRowSetoran('Kalender', 'kl', 'cb-madin')}
                                ${generateRowSetoran('Raport', 'rp', 'cb-madin')}
                            </tbody>
                        </table>
                    </div>

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

                        <!-- KOLOM TAMBAHAN: PENYETOR, BENDAHARA, & KETERANGAN -->
                        <div class="card border-0 shadow-sm bg-light p-3 mb-3" style="font-size: 12px;">
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <label class="form-label fw-bold mb-1 text-dark">Nama Penyetor:</label>
                                    <input type="text" class="form-control form-control-sm border-secondary" id="swal_nama_penyetor" placeholder="Nama yang menyetor...">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold mb-1 text-dark">Nama Bendahara Pusat:</label>
                                    <input type="text" class="form-control form-control-sm border-secondary" id="swal_nama_bendahara" placeholder="Penerima dana...">
                                </div>
                                <div class="col-12 mt-2">
                                    <label class="form-label fw-bold mb-1 text-dark">Keterangan:</label>
                                    <input type="text" class="form-control form-control-sm border-secondary" id="swal_keterangan_setor" placeholder="Catatan tambahan (opsional)...">
                                </div>
                            </div>
                        </div>

                        <!-- TOTAL -->
                        <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 DISETOR SEKARANG:</span>
                            <span class="fw-bold" style="font-size: 20px;" id="total_wajib_setor">Rp 0</span>
                        </div>
                    </div>
                </div>
            </div>
        `;

        // =====================================================================
        // BUKA MODAL SWEETALERT
        // =====================================================================
        Swal.fire({
            title: 'Proses Penyetoran Pusat',
            html: htmlRincian,
            width: '850px',
            showCancelButton: true,
            confirmButtonColor: '#0d6efd',
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="fas fa-save me-1"></i> Simpan Setoran',
            cancelButtonText: 'Tutup',
            allowOutsideClick: false,
            
            didOpen: () => {
                const dropdownTahun = document.getElementById('swal_tahun_setor');
                const dropdownBulan = document.getElementById('swal_bulan_setor');
                
                async function ambilDataRekap() {
                    let tahunBersih = dropdownTahun.value.replace(' H', '').trim();
                    let bulanDipilih = dropdownBulan.value;
                    
                    try {
                        let response = await fetch(`/api/get_rekap_setoran?tahun=${tahunBersih}&bulan=${bulanDipilih}`);
                        let data = await response.json();
                        
                        if (data.status === 'success') {
                            let tarif = data.data;
                            
                            const mapInput = {
                                'input_dp': 'Daftar Ulang Pondok',
                                'input_sp': 'Syahriyah Pondok',
                                'input_jp': 'Jariyah Pondok',
                                'input_dm': 'Daftar Ulang Madin',
                                'input_sm': 'Syahriyah Madin',
                                'input_jm': 'Jariyah Madin',
                                'input_kl': 'Kalender',
                                'input_rp': 'Raport',
                                'input_sgan': 'Semester Ganjil',
                                'input_sgen': 'Semester Genap',
                                'input_uam': 'Ujian Akhir Madin (UAM)'
                            };
                            
                            for (const [idHTML, namaDB] of Object.entries(mapInput)) {
                                let inputEl = document.getElementById(idHTML);
                                if (inputEl) {
                                    inputEl.value = tarif[namaDB] || 0;
                                }
                            }
                            
                            window.hitungTotalSetoran();
                        }
                    } catch (error) {
                        console.error("Gagal mengambil data rekap:", error);
                    }
                }
                dropdownTahun.addEventListener('change', ambilDataRekap);
                dropdownBulan.addEventListener('change', ambilDataRekap);
                
                // Ambil data pertama kali saat pop-up terbuka
                ambilDataRekap();
            },
            
            preConfirm: () => {
                let totalNominal = 0;
                let dataKirim = {}; 

                document.querySelectorAll('.input-setoran').forEach(input => {
                    let idKomponen = input.id.replace('input_', '');
                    let cb = document.getElementById('cb_' + idKomponen);
                    
                    if (cb && cb.checked) {
                        let nominal = parseInt(input.value) || 0;
                        totalNominal += nominal;
                        dataKirim[idKomponen] = nominal; 
                    }
                });

                if (totalNominal <= 0) {
                    Swal.showValidationMessage('Gagal: Minimal centang 1 komponen untuk disetor!');
                    return false;
                }

                let namaPenyetor = document.getElementById('swal_nama_penyetor').value.trim();
                let namaBendahara = document.getElementById('swal_nama_bendahara').value.trim();
                let keteranganSetor = document.getElementById('swal_keterangan_setor').value.trim();

                if (!namaPenyetor || !namaBendahara) {
                    Swal.showValidationMessage('Gagal: Nama Penyetor dan Nama Bendahara wajib diisi!');
                    return false;
                }

                dataKirim['penyetor'] = namaPenyetor;
                dataKirim['bendahara'] = namaBendahara;
                dataKirim['keterangan'] = keteranganSetor;
                dataKirim['tahun_setor'] = document.getElementById('swal_tahun_setor').value;
                dataKirim['bulan_setor'] = document.getElementById('swal_bulan_setor').value;

                // MENGIRIM DATA KE PYTHON
                // MENGIRIM DATA KE PYTHON
                return fetch('/api/simpan_setoran', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ total: totalNominal, rincian: dataKirim })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status !== 'success') {
                        throw new Error(data.message);
                    }
                    
                    // KUNCI PERBAIKAN JS: Tambahkan id_setoran di sini
                    // Agar bisa dibaca oleh tombol Cetak!
                    return { 
                        total: totalNominal, 
                        rincian: dataKirim,
                        id_setoran: data.id_setoran 
                    }; 
                })
                .catch(error => {
                    Swal.showValidationMessage(`Terjadi kesalahan MySQL: ${error.message}`);
                });
            }
        }).then((result) => {
    if (result.isConfirmed && result.value) {
        Swal.fire({
            title: 'Berhasil Disimpan!',
            html: `Uang sebesar <b>Rp ${result.value.total.toLocaleString('id-ID')}</b> telah disetorkan.`,
            icon: 'success',
            showCancelButton: true,
            confirmButtonColor: '#198754',
            cancelButtonColor: '#0d6efd',
            confirmButtonText: '<i class="fas fa-check me-1"></i> Selesai',
            cancelButtonText: '<i class="fas fa-print me-1"></i> Cetak Struk',
            reverseButtons: true // Membalik posisi tombol agar 'Cetak' di kanan
        }).then((printResult) => {
            // Asumsi: Python mengembalikan id_setoran saat proses INSERT berhasil
            // Jika tidak, kamu perlu menyesuaikan response JSON dari '/api/simpan_setoran'
            let idSetoran = result.value.id_setoran; 
            
            if (printResult.dismiss === Swal.DismissReason.cancel) {
                // Jika tombol "Cetak Struk" diklik, buka tab baru
                window.open(`/admin_keuangan/cetak_setoran/${idSetoran}`, '_blank');
                window.location.reload(); 
            } else {
                // Jika tombol "Selesai" diklik, hanya refresh halaman
                window.location.reload();
            }
        });
    }
});
    }

  
    // =====================================================================
    // 3. FUNGSI MEMBUKA MODAL CATAT PENGELUARAN (FINAL + DATABASE)
    // =====================================================================
    // =====================================================================
    // 3. FUNGSI MEMBUKA MODAL CATAT PENGELUARAN (FINAL + DATABASE)
    // =====================================================================
    function bukaModalPengeluaran() {
        
        let today = new Date().toISOString().split('T')[0];

        // --- Mengambil Bulan & Tahun Hijriyah dari Backend (Lebih Aman) ---
        let currentHijriYear = "{{ tahun_aktif_str }}"; 
        let namaBulanAktif = "{{ nama_bulan_aktif }}";
        // ----------------------------------------------------------------------

        let htmlPengeluaran = `
            <div class="text-start" style="font-size: 13px;">
                <div class="alert alert-warning py-2 mb-3 shadow-sm border-0 d-flex align-items-center">
                    <i class="fas fa-hand-holding-usd fs-4 me-3 text-danger"></i>
                    <div>
                        <strong style="font-size: 14px; color: #856404;">Form Pencatatan Pengeluaran</strong><br>
                        <span style="font-size: 11px; color: #664d03;">Catat detail arus kas keluar dari laci bendahara dengan teliti.</span>
                    </div>
                </div>

                <div class="card border-0 shadow-sm bg-white p-3 mb-2" style="border-top: 3px solid #dc3545 !important;">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold mb-1 text-dark"><i class="fas fa-wallet text-secondary me-1"></i> Sumber Pos Dana: <span class="text-danger">*</span></label>
                            <select id="pengeluaran_sumber" class="form-select form-select-sm border-secondary shadow-sm" style="cursor:pointer;">
                                <option value="" selected disabled>-- Pilih Pos Dana --</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="Semester Ganjil">Ujian Semester Ganjil</option>
                                    <option value="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-md-6">
                            <label class="form-label fw-bold mb-1 text-dark"><i class="fas fa-tags text-secondary me-1"></i> Kategori: <span class="text-danger">*</span></label>
                            <select id="pengeluaran_kategori" class="form-select form-select-sm border-secondary shadow-sm" style="cursor:pointer;">
                                <option value="" selected disabled>-- Pilih Kategori --</option>
                                <option value="ATK & Fotokopi">ATK & Fotokopi</option>
                                <option value="Konsumsi & Dapur">Konsumsi & Dapur</option>
                                <option value="Transportasi & Bensin">Transportasi & Bensin</option>
                                <option value="Pemeliharaan & Tukang">Pemeliharaan & Tukang</option>
                                <option value="Honor & Gaji">Honor / Bisaroh</option>
                                <option value="Listrik, Air & Internet">Listrik, Air & Internet</option>
                                <option value="Kegiatan / Event">Kegiatan / Event Acara</option>
                                <option value="Lain-lain">Lain-lain</option>
                            </select>
                        </div>

                        <div class="col-12"><hr class="my-1 text-muted"></div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold text-secondary" style="font-size: 14px;">
                                <i class="fas fa-money-bill-wave me-1"></i> Nominal Keluar (Rp): <span class="text-danger">*</span>
                            </label>
    
                            <input type="number" class="form-control border-danger text-danger fw-bold" id="nominal" name="nominal" placeholder="0" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold mb-1 text-dark"><i class="fas fa-calendar-alt text-secondary me-1"></i> Tanggal Transaksi: <span class="text-danger">*</span></label>
                            <input type="date" id="pengeluaran_tanggal" class="form-control form-control-sm border-secondary shadow-sm text-center" value="${today}">
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-bold mb-1 text-dark"><i class="fas fa-shopping-cart text-secondary me-1"></i> Keperluan Utama: <span class="text-danger">*</span></label>
                            <input type="text" id="pengeluaran_keperluan" class="form-control form-control-sm border-secondary shadow-sm" placeholder="Contoh: Pembelian tinta printer dan HVS 2 rim">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold mb-1 text-dark"><i class="fas fa-user-check text-secondary me-1"></i> Penerima Dana: <span class="text-danger">*</span></label>
                            <input type="text" id="pengeluaran_penerima" class="form-control form-control-sm border-secondary shadow-sm" placeholder="Contoh: Ust. Budi">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold mb-1 text-dark"><i class="fas fa-user-tie text-secondary me-1"></i> Diserahkan Oleh: <span class="text-danger">*</span></label>
                            <input type="text" id="pengeluaran_bendahara" class="form-control form-control-sm border-secondary shadow-sm" placeholder="Nama Kasir / Bendahara">
                        </div>

                        <div class="col-12 mt-3">
                            <label class="form-label fw-bold mb-1 text-dark"><i class="fas fa-comment-dots text-secondary me-1"></i> Keterangan Tambahan:</label>
                            <textarea id="pengeluaran_keterangan" class="form-control form-control-sm border-secondary shadow-sm" rows="2" placeholder="Catatan tambahan (opsional)..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
        `;

        Swal.fire({
            title: 'Catat Pengeluaran Baru',
            html: htmlPengeluaran,
            width: '700px',
            showCancelButton: true,
            confirmButtonColor: '#dc3545', 
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="fas fa-file-invoice-dollar me-1"></i> Simpan Pengeluaran',
            cancelButtonText: 'Batal',
            allowOutsideClick: false,
            showLoaderOnConfirm: true,
            
            preConfirm: () => {
                let sumber = document.getElementById('pengeluaran_sumber').value;
                let kategori = document.getElementById('pengeluaran_kategori').value;
                let tanggal = document.getElementById('pengeluaran_tanggal').value;
                
                // PERBAIKAN 1: Sesuaikan ID nominal dengan yang ada di HTML
                let nominal = document.getElementById('nominal').value; 
                
                let keperluan = document.getElementById('pengeluaran_keperluan').value.trim();
                let penerima = document.getElementById('pengeluaran_penerima').value.trim();
                let bendahara = document.getElementById('pengeluaran_bendahara').value.trim();
                let keterangan = document.getElementById('pengeluaran_keterangan').value.trim();

                // Validasi data wajib
                if (!sumber || !kategori || !tanggal || !nominal || !keperluan || !penerima || !bendahara) {
                    Swal.showValidationMessage('Gagal: Semua kolom berlabel (*) wajib diisi!');
                    return false;
                }

                if (parseInt(nominal) <= 0) {
                    Swal.showValidationMessage('Gagal: Nominal pengeluaran tidak boleh 0 atau minus!');
                    return false;
                }

                // PERBAIKAN 2: Sesuaikan nama variabel dengan yang diminta Python
                // (Karena di Python belum ada kolom penerima_dana, kita gabungkan saja ke keterangan)
                let gabungKeterangan = keterangan;
                if (penerima !== "") {
                    gabungKeterangan = `[Penerima: ${penerima}] ` + keterangan;
                }

                // Siapkan data untuk dikirim ke Python
                // Siapkan data untuk dikirim ke Python (dikirim secara terpisah)
                let dataPengeluaran = {
                    sumber_dana: sumber,
                    kategori: kategori,
                    tanggal: tanggal,
                    nominal: parseInt(nominal),
                    keperluan: keperluan,
                    petugas_kasir: bendahara,
                    nama_penerima: penerima, // <--- Mengirim nama penerima ke Python
                    keterangan: keterangan,  // <--- Keterangan tetap murni keterangan
                    bulan_hijriyah: namaBulanAktif,
                    tahun_pembukuan: currentHijriYear.toString() // Ini mengirim "1448" murni tanpa "H"
                };

                // PERBAIKAN 3: Sesuaikan rute URL dengan fungsi di Python
                return fetch('/admin_keuangan/proses_pengeluaran', { 
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(dataPengeluaran)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status !== 'success') {
                        throw new Error(data.message);
                    }
                    return dataPengeluaran;
                })
                .catch(error => {
                    Swal.showValidationMessage(`Terjadi kesalahan: ${error.message}`);
                });
            }
        }).then((result) => {
            if (result.isConfirmed && result.value) {
                Swal.fire({
                    title: 'Berhasil Disimpan!',
                    html: `Dana sebesar <b class="text-danger">Rp ${result.value.nominal.toLocaleString('id-ID')}</b> telah dicatat di database.`,
                    icon: 'success',
                    buttonsStyling: false, 
                    customClass: { confirmButton: 'btn btn-primary btn-sm px-4 shadow-sm' },
                    confirmButtonText: '<i class="fas fa-check me-1"></i> OK'
                }).then(() => {
                    window.location.reload(); 
                });
            }

        }).then((result) => {
            if (result.isConfirmed && result.value) {
                Swal.fire({
                    title: 'Berhasil Disimpan!',
                    html: `Dana sebesar <b class="text-danger">Rp ${result.value.nominal.toLocaleString('id-ID')}</b> telah dicatat di database.`,
                    icon: 'success',
                    buttonsStyling: false, 
                    customClass: { confirmButton: 'btn btn-primary btn-sm px-4 shadow-sm' },
                    confirmButtonText: '<i class="fas fa-check me-1"></i> OK'
                }).then(() => {
                    // Refresh halaman otomatis agar data terbaru muncul di tabel riwayat
                    window.location.reload(); 
                });
            }
        });
    }

    function hapusPengeluaran(idTransaksi) {
        Swal.fire({
            title: 'Hapus Data?',
            text: "Data pengeluaran yang dihapus tidak bisa dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Mengirim perintah hapus ke Python
                fetch('/api/hapus_pengeluaran', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id_transaksi: idTransaksi })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        Swal.fire('Terhapus!', 'Data berhasil dihapus.', 'success')
                        .then(() => {
                            window.location.reload(); // Refresh halaman otomatis
                        });
                    } else {
                        Swal.fire('Gagal', data.message, 'error');
                    }
                })
                .catch(error => {
                    Swal.fire('Error', 'Terjadi kesalahan sistem.', 'error');
                });
            }
        });
    }

    // Fungsi untuk membuka modal dan mengisi data lama
    // FUNGSI DETEKTIF UNTUK PENGELUARAN
    function editPengeluaran(idTransaksi) {
        console.log("ID Transaksi yang diklik:", idTransaksi); // Cek apakah ID-nya masuk

        if (!idTransaksi) {
            Swal.fire('Error', 'ID Transaksi kosong! Cek variabel di tabel HTML.', 'error');
            return;
        }

        fetch(`/api/get_pengeluaran/${idTransaksi}`)
        .then(async response => {
            if (!response.ok) {
                // Jika server merespons error (misal 404 atau 500)
                const textError = await response.text();
                throw new Error(`HTTP Error ${response.status}: ${textError.substring(0, 50)}...`);
            }
            return response.json();
        })
        .then(res => {
            if (res.status === 'success') {
                document.getElementById('edit_id_transaksi').value = res.data.id_transaksi;
                document.getElementById('edit_tanggal').value = res.data.tanggal ? res.data.tanggal.substring(0, 10) : '';
                document.getElementById('edit_kategori').value = res.data.kategori;
                document.getElementById('edit_keperluan').value = res.data.keperluan;
                document.getElementById('edit_keterangan').value = res.data.keterangan;
                document.getElementById('edit_nominal').value = res.data.nominal;
                
                var modalEdit = new bootstrap.Modal(document.getElementById('modalEditPengeluaran'));
                modalEdit.show();
            } else {
                Swal.fire('Error Database', res.message, 'error');
            }
        })
        .catch(err => {
            console.error(err);
            Swal.fire('Gagal Mengambil Data!', err.toString(), 'error');
        });
    }

    function simpanEditPengeluaran() {
        // Mengambil data dari form
        const dataEdit = {
            id_transaksi: document.getElementById('edit_id_transaksi').value,
            tanggal: document.getElementById('edit_tanggal').value,
            kategori: document.getElementById('edit_kategori').value,
            sumber_dana: document.getElementById('edit_pos_uang').value,
            keperluan: document.getElementById('edit_keperluan').value,
            keterangan: document.getElementById('edit_keterangan').value,
            nominal: document.getElementById('edit_nominal').value
        };

        // Validasi
        if(!dataEdit.tanggal || !dataEdit.keperluan || !dataEdit.nominal || !dataEdit.sumber_dana) {
            Swal.fire('Peringatan', 'Tanggal, sumber_dana, Keperluan, dan Nominal harus diisi!', 'warning');
            return;
        }

        // Proses kirim data ke Python
        fetch('/api/edit_pengeluaran', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(dataEdit)
        })
        .then(async response => {
            if (!response.ok) {
                // Jika server python mati atau error 500
                const textError = await response.text();
                throw new Error(`HTTP Error ${response.status}: ${textError.substring(0, 100)}`);
            }
            return response.json();
        })
        .then(res => {
            if (res.status === 'success') {
                Swal.fire('Berhasil!', res.message, 'success').then(() => {
                    window.location.reload();
                });
            } else {
                // Jika Python mengirim pesan error MySQL (misal kolom tidak ditemukan)
                Swal.fire('Gagal (Dari Database)', res.message, 'error');
            }
        })
        .catch(err => {
            console.error(err);
            // Menampilkan error javascript/jaringan yang sebenarnya
            Swal.fire('Error Asli:', err.toString(), 'error');
        });
    }

    // --- FUNGSI HAPUS SETORAN ---
    function hapusSetoran(idSetoran) {
        Swal.fire({
            title: 'Hapus Setoran?',
            text: "Data setoran akan dihapus permanen!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch('/api/hapus_setoran', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id_setoran: idSetoran })
                }).then(res => res.json()).then(data => {
                    if (data.status === 'success') {
                        Swal.fire('Terhapus!', data.message, 'success').then(() => window.location.reload());
                    } else {
                        Swal.fire('Gagal', data.message, 'error');
                    }
                }).catch(() => Swal.fire('Error', 'Gagal koneksi ke server.', 'error'));
            }
        });
    }

    // --- FUNGSI MENGAMBIL DATA & BUKA MODAL SETORAN (VERSI RINCIAN LENGKAP) ---
function editSetoran(idSetoran) {
    console.log("ID Setoran yang diklik:", idSetoran);

    if (!idSetoran) {
        Swal.fire('Error', 'ID Setoran kosong! Cek variabel di tabel HTML.', 'error');
        return;
    }

    // Pastikan endpoint fetch sesuai dengan route di app.py
    fetch(`/api/get_setoran/${idSetoran}`)
    .then(async response => {
        if (!response.ok) {
            const textError = await response.text();
            throw new Error(`HTTP Error ${response.status}: ${textError.substring(0, 50)}...`);
        }
        return response.json();
    })
    .then(res => {
        if (res.status === 'success') {
            let row = res.data;

            // 1. Isi form utama
            document.getElementById('edit_setoran_id').value = row.id_setoran;
            // Sesuaikan format tanggal untuk input datetime-local (YYYY-MM-DDTHH:MM)
            document.getElementById('edit_setoran_tanggal').value = row.tanggal ? row.tanggal.substring(0, 16).replace(' ', 'T') : '';
            document.getElementById('edit_setoran_penyetor').value = row.penyetor;
            document.getElementById('edit_setoran_penerima').value = row.penerima;
            document.getElementById('edit_setoran_keterangan').value = row.keterangan || '';
            
            // 2. Isi form rincian nominal (ubah nilai null dari database menjadi 0)
            document.getElementById('edit_sp').value = row.syahriyah_pondok || 0;
            document.getElementById('edit_jp').value = row.jariyah_pondok || 0;
            document.getElementById('edit_dp').value = row.daftar_ulang_pondok || 0;
            document.getElementById('edit_sm').value = row.syahriyah_madin || 0;
            document.getElementById('edit_jm').value = row.jariyah_madin || 0;
            document.getElementById('edit_dm').value = row.daftar_ulang_madin || 0;
            document.getElementById('edit_kl').value = row.kalender || 0;
            document.getElementById('edit_rp').value = row.raport || 0;
            document.getElementById('edit_sgan').value = row.semester_1 || 0;
            document.getElementById('edit_sgen').value = row.semester_2 || 0;
            document.getElementById('edit_uam').value = row.uam || 0;

            // 3. Kalkulasi total agar angka terupdate di layar
            hitungTotalModal();

            // 4. Buka Modal Bootstrap
            var modalEdit = new bootstrap.Modal(document.getElementById('modalEditSetoran'));
            modalEdit.show();
        } else {
            Swal.fire('Error Database', res.message, 'error');
        }
    })
    .catch(err => {
        console.error(err);
        Swal.fire('Gagal Mengambil Data Setoran!', err.toString(), 'error');
    });
}

// --- FUNGSI HITUNG TOTAL OTOMATIS SAAT DIKETIK ---
function hitungTotalModal() {
    let total = 0;
    // Mengambil semua input yang memiliki class 'edit-nominal'
    document.querySelectorAll('.edit-nominal').forEach(input => {
        total += (parseInt(input.value) || 0);
    });
    
    // Perbarui teks di layar dan simpan ke input hidden
    document.getElementById('display_total_modal').innerHTML = `Rp ${total.toLocaleString('id-ID')}`;
    document.getElementById('edit_setoran_nominal').value = total;
}

// --- FUNGSI SIMPAN EDIT SETORAN (VERSI RINCIAN LENGKAP) ---
function simpanEditSetoran() {
    const dataEdit = {
        id_setoran: document.getElementById('edit_setoran_id').value,
        tanggal: document.getElementById('edit_setoran_tanggal').value.replace('T', ' '),
        penyetor: document.getElementById('edit_setoran_penyetor').value,
        penerima: document.getElementById('edit_setoran_penerima').value,
        keterangan: document.getElementById('edit_setoran_keterangan').value,
        total_nominal: parseInt(document.getElementById('edit_setoran_nominal').value) || 0,
        
        // Tangkap seluruh angka rincian yang diedit
        sp: parseInt(document.getElementById('edit_sp').value) || 0,
        jp: parseInt(document.getElementById('edit_jp').value) || 0,
        dp: parseInt(document.getElementById('edit_dp').value) || 0,
        sm: parseInt(document.getElementById('edit_sm').value) || 0,
        jm: parseInt(document.getElementById('edit_jm').value) || 0,
        dm: parseInt(document.getElementById('edit_dm').value) || 0,
        kl: parseInt(document.getElementById('edit_kl').value) || 0,
        rp: parseInt(document.getElementById('edit_rp').value) || 0,
        sgan: parseInt(document.getElementById('edit_sgan').value) || 0,
        sgen: parseInt(document.getElementById('edit_sgen').value) || 0,
        uam: parseInt(document.getElementById('edit_uam').value) || 0
    };

    if(!dataEdit.tanggal || !dataEdit.penyetor || dataEdit.total_nominal === 0) {
        Swal.fire('Peringatan', 'Tanggal, Penyetor, dan Rincian Nominal harus diisi!', 'warning');
        return;
    }

    // Pastikan endpoint fetch sesuai dengan route update di app.py
    fetch('/api/update_setoran', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(dataEdit)
    })
    .then(res => res.json())
    .then(res => {
        if (res.status === 'success') {
            // Sembunyikan modal sebelum memuat ulang
            let modalEl = document.getElementById('modalEditSetoran');
            let modalInst = bootstrap.Modal.getInstance(modalEl);
            if (modalInst) modalInst.hide();

            Swal.fire('Berhasil!', res.message, 'success').then(() => window.location.reload());
        } else {
            Swal.fire('Gagal', res.message, 'error');
        }
    })
    .catch(() => Swal.fire('Error', 'Terjadi kesalahan sistem.', 'error'));
}
    
</script>
    <!-- Script Bootstrap -->
{% endblock %}