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

{% block title %}Admin Keuangan{% endblock %}

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Selamat datang, {{ session.get('nama', 'Admin
    Keuangan') }} 👋</h5>
<small class="text-muted" style="font-size: 0.85rem;">Pantau arus kas, pemasukan, dan tagihan dengan mudah hari
    ini.</small>
{% 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: Profil & Filter -->
    <div class="d-flex flex-column align-items-end">


        <!-- Form Filter Riwayat -->
        <div class="d-flex align-items-center bg-white p-2 rounded-3 shadow-sm border border-light">
            <span class="text-muted fw-bold ms-2 me-2 d-none d-md-inline"
                style="font-size: 0.75rem; letter-spacing: 0.5px;">
                <i class="fas fa-history me-1"></i> RIWAYAT:
            </span>
            <form method="GET" action="/admin_keuangan/dashboard" class="d-flex gap-2 mb-0">

                <select name="bulan" class="form-select form-select-sm border-secondary-subtle text-dark fw-semibold"
                    style="width: 160px; cursor: pointer;">
                    {% for i in range(1, 13) %}
                    <option value="{{ i }}" {% if i==bulan_terpilih %}selected{% endif %}>
                        {{ daftar_bulan[i-1] }}
                    </option>
                    {% endfor %}
                </select>

                <select name="tahun" class="form-select form-select-sm border-secondary-subtle text-dark fw-semibold"
                    style="width: 110px; cursor: pointer;">
                    {% for th in pilihan_tahun %}
                    <option value="{{ th }}" {% if th==tahun_terpilih %}selected{% endif %}>
                        {{ th }} H
                    </option>
                    {% endfor %}
                </select>

                <button type="submit" class="btn btn-primary btn-sm px-3 fw-bold shadow-sm">
                    <i class="fas fa-search me-1"></i> Cek
                </button>
            </form>
        </div>
        <!-- Tutup Bagian Kanan: Profil & Filter -->
    </div>

</div>

<div class="row mb-4">
    <!-- 1. KOTAK SALDO -->
    <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon blue"><i class="fas fa-money-check-alt"></i></div>
            <div>
                <span class="text-muted fw-bold" style="font-size: 11px; white-space: nowrap;">TOTAL SALDO KAS</span>
                <h4 class="text-dark fw-bold mb-0 mt-1">Rp {{ "{:,.0f}".format(data.total_saldo).replace(',', '.') }}
                </h4>
            </div>
        </div>
    </div>

    <!-- 2. KOTAK PEMASUKAN -->
    <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
        <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;">PEMASUKAN BULAN
                    INI</span>
                <h4 class="text-dark fw-bold mb-0 mt-1">Rp {{ "{:,.0f}".format(data.total_pemasukan).replace(',', '.')
                    }}</h4>
            </div>
        </div>
    </div>

    <!-- 3. KOTAK PENGELUARAN -->
    <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
        <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;">PENGELUARAN BULAN
                    INI</span>
                <h4 class="text-dark fw-bold mb-0 mt-1">Rp {{ "{:,.0f}".format(data.total_pengeluaran).replace(',', '.')
                    }}</h4>
            </div>
        </div>
    </div>

    <!-- 4. KOTAK SETORAN PUSAT -->
    <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon blue"><i class="fas fa-building-columns"></i></div>
            <div>
                <span class="text-muted fw-bold" style="font-size: 11px; white-space: nowrap;">SETORAN BULAN INI</span>
                <h4 class="text-dark fw-bold mb-0 mt-1">Rp {{ "{:,.0f}".format(data.total_setoran).replace(',', '.') }}
                </h4>
            </div>
        </div>
    </div>
</div>

<div class="row">

    <!-- Kolom Grafik Bar (Arus Kas) -->
    <div class="col-md-8">
        <div class="card border-0 shadow-sm rounded-4 mb-4 p-3">
            <div class="section-header text-secondary">
                <i class="fas fa-chart-bar me-1"></i> Statistik Arus Kas (6 Bulan Terakhir)
            </div>
            <div class="panel-body p-3">
                <!-- TINGGI DITAMBAH JADI 45vh & DIBERI MIN-HEIGHT -->
                <div style="position: relative; height: 45vh; min-height: 280px; width: 100%;">
                    <canvas id="barChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Kolom Rincian Fisik Uang di Laci -->
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 mb-4 p-3 d-flex flex-column" style="height: 100%;">
            <div class="section-header text-secondary d-flex justify-content-between align-items-center">
                <span><i class="fas fa-wallet me-1"></i> Rincian Dana Masuk & Laci ({{ session.kategori }})</span>
            </div>

            <!-- Wadah Utama dengan Flexbox agar tinggi dinamis & tidak bocor -->
            <div class="panel-body p-3 d-flex flex-column" style="height: 48vh; min-height: 300px;">

                <div class="d-flex flex-column h-100">
                    <!-- TOTAL KASIR -->
                    <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
                        <span class="text-muted fw-bold" style="font-size: 0.75rem;">TOTAL UANG FISIK:</span>
                        <span class="fw-bold text-dark" style="font-size: 0.9rem;">Rp {{
                            "{:,.0f}".format(rincian_kas.total).replace(',', '.') }}</span>
                    </div>

                    <!-- WADAH TABEL (Sama Persis dengan Desain Asli) -->
                    <div class="flex-grow-1 custom-scrollbar" style="overflow-y: auto; padding-right: 5px;">
                        <table class="table table-sm table-borderless m-0 align-middle" style="font-size: 0.75rem;">
                            <thead class="border-bottom text-muted" style="font-size: 0.65rem; letter-spacing: 0.5px;">
                                <tr>
                                    <th class="py-2">SUMBER DANA</th>
                                    <th class="text-end py-2 text-success">TOTAL MASUK</th>
                                    <th class="text-end py-2 text-primary">SISA LACI</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Syahriyah Pondok -->
                                <tr>
                                    <td class="text-muted py-1">Syahriyah Pondok</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.syahriyah_pondok).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.syahriyah_pondok).replace(',', '.') }}</td>
                                </tr>
                                <!-- Syahriyah Madin -->
                                <tr>
                                    <td class="text-muted py-1">Syahriyah Madin</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.syahriyah_madin).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.syahriyah_madin).replace(',', '.') }}</td>
                                </tr>
                                <!-- Pendaftaran Pondok -->
                                <tr>
                                    <td class="text-muted py-1">Pendaftaran Pondok</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.pendaftaran_pondok).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.pendaftaran_pondok).replace(',', '.') }}</td>
                                </tr>
                                <!-- Pendaftaran Madin -->
                                <tr>
                                    <td class="text-muted py-1">Pendaftaran Madin</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.pendaftaran_madin).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.pendaftaran_madin).replace(',', '.') }}</td>
                                </tr>
                                <!-- Daftar Ulang Pondok -->
                                <tr>
                                    <td class="text-muted py-1">Daftar Ulang Pondok</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.daftar_ulang_pondok).replace(',', '.') }}
                                    </td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.daftar_ulang_pondok).replace(',', '.') }}</td>
                                </tr>
                                <!-- Daftar Ulang Madin -->
                                <tr>
                                    <td class="text-muted py-1">Daftar Ulang Madin</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.daftar_ulang_madin).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.daftar_ulang_madin).replace(',', '.') }}</td>
                                </tr>
                                <!-- Jariyah Pondok -->
                                <tr>
                                    <td class="text-muted py-1">Jariyah Pondok</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.jariyah_pondok).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.jariyah_pondok).replace(',', '.') }}</td>
                                </tr>
                                <!-- Jariyah Madin -->
                                <tr>
                                    <td class="text-muted py-1">Jariyah Madin</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.jariyah_madin).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.jariyah_madin).replace(',', '.') }}</td>
                                </tr>
                                <!-- Kalender -->
                                <tr>
                                    <td class="text-muted py-1">Kalender</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.kalender).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.kalender).replace(',', '.') }}</td>
                                </tr>
                                <!-- Raport -->
                                <tr>
                                    <td class="text-muted py-1">Raport</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.raport).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.raport).replace(',', '.') }}</td>
                                </tr>
                                <!-- Ujian Semester Ganjil -->
                                <tr>
                                    <td class="text-muted py-1">Ujian Ganjil</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.ujian_ganjil).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.ujian_ganjil).replace(',', '.') }}</td>
                                </tr>
                                <!-- Ujian Semester Genap -->
                                <tr>
                                    <td class="text-muted py-1">Ujian Genap</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.ujian_genap).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.ujian_genap).replace(',', '.') }}</td>
                                </tr>
                                <!-- UAM -->
                                <tr>
                                    <td class="text-muted py-1">UAM</td>
                                    <td class="text-success text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_pemasukan.uam).replace(',', '.') }}</td>
                                    <td class="text-primary text-end fw-bold py-1">{{
                                        "{:,.0f}".format(rincian_kas.uam).replace(',', '.') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}

    {% block scripts %}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Ambil data dari server yang dikirim melalui render_template
            const totalPemasukan = Number('{{ data.total_pemasukan }}');
            const totalPengeluaran = Number('{{ data.total_pengeluaran }}');

            // Data Grafik dari Python
            const labelBulanHijri = {{ label_grafik | tojson
        }};
        const dataPemasukanGrafik = {{ data_masuk | tojson }};
        const dataPengeluaranGrafik = {{ data_keluar | tojson }};

        // ---> INI VARIABEL SETORAN YANG KETINGGALAN TADI <---
        const dataSetoranGrafik = {{ data_setor | tojson }};

        // ====================================================================
        // LOGIKA HIGHLIGHT DATA (EFEK FOKUS & PUDAR)
        // ====================================================================

        const bulanAktif = labelBulanHijri[labelBulanHijri.length - 1];

        const warnaPemasukan = labelBulanHijri.map(bulan =>
            bulan === bulanAktif ? '#198754' : 'rgba(25, 135, 84, 0.25)'
        );

        const warnaPengeluaran = labelBulanHijri.map(bulan =>
            bulan === bulanAktif ? '#dc3545' : 'rgba(220, 53, 69, 0.25)'
        );

        // ---> INI WARNA SETORAN YANG KETINGGALAN TADI <---
        const warnaSetoran = labelBulanHijri.map(bulan =>
            bulan === bulanAktif ? '#0dcaf0' : 'rgba(13, 202, 240, 0.25)'
        );

        // ====================================================================

        // 1. Render Grafik Batang
        const ctxBar = document.getElementById('barChart').getContext('2d');

        // Hapus grafik lama jika ada agar tidak bentrok
        if (window.myBarChart) {
            window.myBarChart.destroy();
        }

        window.myBarChart = new Chart(ctxBar, {
            type: 'bar',
            data: {
                labels: labelBulanHijri,
                datasets: [
                    {
                        label: 'Pemasukan (Juta)',
                        data: dataPemasukanGrafik,
                        backgroundColor: warnaPemasukan,
                        borderRadius: 4
                    },
                    {
                        label: 'Pengeluaran (Juta)',
                        data: dataPengeluaranGrafik,
                        backgroundColor: warnaPengeluaran,
                        borderRadius: 4
                    },
                    {
                        label: 'Setoran Pusat (Juta)',
                        data: dataSetoranGrafik,
                        backgroundColor: warnaSetoran,
                        borderRadius: 4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { position: 'top' } }
            }
        });

        // 2. Render Grafik Donat
        if (document.getElementById('donutChart')) {
            const ctxDonut = document.getElementById('donutChart').getContext('2d');
            new Chart(ctxDonut, {
                type: 'doughnut',
                data: {
                    labels: ['Pemasukan', 'Pengeluaran'],
                    datasets: [{
                        data: [totalPemasukan, totalPengeluaran],
                        backgroundColor: ['#198754', '#dc3545'],
                        borderWidth: 2,
                        hoverOffset: 5
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '65%',
                    plugins: { legend: { position: 'bottom' } }
                }
            });
        }
    });
    </script>
    {% endblock %}