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

{% block title %}Rekap Laporan{% endblock %}

{% block page_title %}Rekap Laporan Keuangan{% endblock %}

{% block content %}
<!-- Header -->
        <div class="d-flex justify-content-between align-items-end mb-3">
            <div>
                
                <span class="badge bg-dark mt-1 px-3 py-2 rounded-pill">
                    <i class="fas fa-calendar-alt me-1"></i> {{ teks_bulan_filter }}
                </span>
            </div>
            <div class="d-flex gap-2">
                <a href="/admin_keuangan/laporan/export?bulan={{ bulan_terpilih }}&tahun={{ tahun_terpilih }}" 
                   class="btn btn-success btn-sm">
                    <i class="fas fa-file-excel me-1"></i> Export Excel
                </a>
                <button class="btn btn-primary btn-sm" onclick="window.print()">
                    <i class="fas fa-print me-1"></i> Cetak
                </button>
            </div>
        </div>

        <!-- Filter Hijriyah -->
        <form method="GET" action="/admin_keuangan/laporan" class="d-flex flex-wrap align-items-center gap-2 mb-4 bg-white p-3 rounded-3 shadow-sm border border-light">
            <i class="fas fa-filter text-muted"></i>
            <span class="text-muted fw-semibold" style="font-size: 0.85rem;">Filter Periode:</span>
            <select name="bulan" class="form-select form-select-sm border-secondary-subtle text-dark fw-semibold" style="width: 140px; 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: 140px; cursor: pointer;">
                {% for t in pilihan_tahun %}
                <option value="{{ t }}" {% if t == tahun_terpilih %}selected{% endif %}>{{ t }} H</option>
                {% endfor %}
            </select>
            <button type="submit" class="btn btn-primary btn-sm">
                <i class="fas fa-search me-1"></i> Tampilkan
            </button>
        </form>

        <!-- 4 Kartu Statistik -->
        <div class="row mb-3">
            <div class="col-md-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; text-transform: uppercase;">TOTAL PEMASUKAN</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">
                            Rp {{ "{:,.0f}".format(total_pemasukan) }}
                        </h4>
                    </div>
                </div>
            </div>
            <div class="col-md-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; text-transform: uppercase;">TOTAL PENGELUARAN</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">
                            Rp {{ "{:,.0f}".format(total_pengeluaran) }}
                        </h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon blue"><i class="fas fa-money-check-dollar"></i></div>
                    <div>
                        <span class="text-muted fw-bold" style="font-size: 11px; white-space: nowrap; text-transform: uppercase;">SALDO BERSIH</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">
                            Rp {{ "{:,.0f}".format(saldo_bersih) }}
                        </h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon orange"><i class="fas fa-user-check"></i></div>
                    <div>
                        <span class="text-muted fw-bold" style="font-size: 11px; white-space: nowrap; text-transform: uppercase;">SANTRI LUNAS BULAN INI</span>
                        <h4 class="text-dark fw-bold mb-0 mt-1">
                            {{ jumlah_santri_lunas }} Santri
                        </h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bagian Grafik -->
        <div class="row mb-4">
            <!-- Bar Chart -->
            <div class="col-md-8">
                <div class="card border-0 shadow-sm rounded-4 mb-4 p-3 p-4 h-100">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h5 class="fw-bold mb-1" style="color: #2b3445;">
                                <i class="fas fa-chart-simple text-secondary me-2"></i>Arus Kas per Bulan
                            </h5>
                            <span class="text-muted" style="font-size: 0.85rem;">
                                Perbandingan pemasukan dan pengeluaran — Tahun {{ tahun_terpilih }} H
                            </span>
                        </div>
                        <div class="d-flex align-items-center gap-3" style="font-size: 0.8rem;">
                            <span><i class="fas fa-circle text-success me-1"></i>Pemasukan</span>
                            <span><i class="fas fa-circle text-danger me-1"></i>Pengeluaran</span>
                        </div>
                    </div>
                    <div style="height: 260px;">
                        <canvas id="barChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- Pie Chart -->
            <div class="col-md-4">
                <div class="card border-0 shadow-sm rounded-4 mb-4 p-3 p-4 h-100">
                    <h5 class="fw-bold mb-1" style="color: #2b3445;">
                        <i class="fas fa-chart-pie text-secondary me-2"></i>Komposisi Pengeluaran
                    </h5>
                    <span class="text-muted" style="font-size: 0.85rem;">Periode: {{ teks_bulan_filter }}</span>
                    
                    <div class="d-flex justify-content-center mt-3" style="height: 160px;">
                        <canvas id="pieChart"></canvas>
                    </div>
                    
                    <!-- Legend Dinamis -->
                    <div class="mt-3" id="pie-legend">
                        {% set warna_pie = ['#0d6efd', '#198754', '#f59e0b', '#dc3545', '#6f42c1', '#0dcaf0'] %}
                        {% for label in pie_labels %}
                        <div class="d-flex justify-content-between border-bottom pb-1 mb-1" style="font-size: 0.78rem;">
                            <span class="text-muted">
                                <i class="fas fa-circle me-1" style="color: {{ warna_pie[loop.index0 % 6] }};"></i>
                                {{ label }}
                            </span>
                            <span class="fw-bold text-dark">
                                Rp {{ "{:,.0f}".format(pie_data[loop.index0]) }}
                            </span>
                        </div>
                        {% else %}
                        <p class="text-muted text-center mt-3" style="font-size: 0.85rem;">Belum ada data pengeluaran</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabel Rincian Transaksi -->
        <div class="card border-0 shadow-sm rounded-4 mb-4 p-3 p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold mb-0" style="color: #2b3445;">
                    <i class="fas fa-list text-secondary me-2"></i>Rincian Transaksi
                </h5>
                
                <!-- Tab Filter Client-side -->
                <ul class="nav nav-pills" style="font-size: 0.85rem;" id="tabFilter">
                    <li class="nav-item">
                        <a class="nav-link active py-1 px-3" href="#" data-filter="semua">Semua</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-muted py-1 px-3" href="#" data-filter="Pemasukan">Pemasukan</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-muted py-1 px-3" href="#" data-filter="Pengeluaran">Pengeluaran</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-muted py-1 px-3" href="#" data-filter="Setoran">Setoran</a>
                    </li>
                </ul>
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle" id="tabelTransaksi">
                    <thead>
                        <tr>
                            <th width="22%">Tanggal (Hijriyah)</th>
                            <th width="14%">Kategori</th>
                            <th width="44%">Keterangan</th>
                            <th width="20%" class="text-end">Nominal</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for r in riwayat_gabungan %}
                        <tr class="baris-transaksi" data-jenis="{{ r.jenis }}">
                            <td class="text-muted">{{ r.tanggal_hijri }}</td>
                            <td>
                                {% if r.jenis == 'Pemasukan' %}
                                <span class="badge bg-success bg-opacity-10 text-success px-2 py-1 border border-success">
                                    <i class="fas fa-arrow-up me-1" style="font-size: 0.7rem;"></i>Pemasukan
                                </span>
                                {% elif r.jenis == 'Pengeluaran' %}
                                <span class="badge bg-danger bg-opacity-10 text-danger px-2 py-1 border border-danger">
                                    <i class="fas fa-arrow-down me-1" style="font-size: 0.7rem;"></i>Pengeluaran
                                </span>
                                {% else %}
                                <span class="badge bg-warning bg-opacity-10 text-warning px-2 py-1 border orange">
                                    <i class="fas fa-paper-plane me-1" style="font-size: 0.7rem;"></i>Setoran
                                </span>
                                {% endif %}
                            </td>
                            <td>{{ r.keterangan }}</td>
                            <td class="text-end {% if r.tanda == '+' %}text-nominal-in{% else %}text-nominal-out{% endif %}">
                                {{ r.tanda }} Rp {{ "{:,.0f}".format(r.nominal) }}
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">
                                <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                                Belum ada transaksi pada bulan {{ teks_bulan_filter }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <!-- Script Chart.js -->
{% endblock %}

{% block scripts %}
<script>
        Chart.defaults.font.family = '"Segoe UI", Tahoma, Geneva, Verdana, sans-serif';
        Chart.defaults.color = '#6c757d';

        // === 1. Bar Chart (Arus Kas 12 Bulan) ===
        const labelGrafik = {{ label_grafik | tojson }};
        const dataMasuk = {{ data_pemasukan_grafik | tojson }};
        const dataKeluar = {{ data_pengeluaran_grafik | tojson }};

        const ctxBar = document.getElementById('barChart').getContext('2d');
        new Chart(ctxBar, {
            type: 'bar',
            data: {
                labels: labelGrafik,
                datasets: [
                    {
                        label: 'Pemasukan (juta)',
                        data: dataMasuk,
                        backgroundColor: '#198754',
                        borderRadius: 4,
                        barPercentage: 0.7
                    },
                    {
                        label: 'Pengeluaran (juta)',
                        data: dataKeluar,
                        backgroundColor: '#dc3545',
                        borderRadius: 4,
                        barPercentage: 0.7
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: {
                        beginAtZero: true,
                        border: { display: false },
                        grid: { color: '#f8f9fa' },
                        ticks: { callback: function(v) { return v.toFixed(1) + ' jt'; } }
                    },
                    x: { border: { display: false }, grid: { display: false } }
                }
            }
        });

        // === 2. Pie Chart (Komposisi Pengeluaran) ===
        const pieLabels = {{ pie_labels | tojson }};
        const pieData = {{ pie_data | tojson }};
        const warnaPie = ['#0d6efd', '#198754', '#f59e0b', '#dc3545', '#6f42c1', '#0dcaf0'];

        const ctxPie = document.getElementById('pieChart').getContext('2d');
        new Chart(ctxPie, {
            type: 'doughnut',
            data: {
                labels: pieLabels,
                datasets: [{
                    data: pieData.length > 0 ? pieData : [1],
                    backgroundColor: pieData.length > 0 ? warnaPie.slice(0, pieLabels.length) : ['#e2e8f0'],
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '72%',
                plugins: { legend: { display: false } }
            }
        });

        // === 3. Filter Tab Tabel ===
        document.querySelectorAll('#tabFilter .nav-link').forEach(function(tab) {
            tab.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelectorAll('#tabFilter .nav-link').forEach(t => {
                    t.classList.remove('active');
                    t.classList.add('text-muted');
                });
                this.classList.add('active');
                this.classList.remove('text-muted');

                const filter = this.getAttribute('data-filter');
                document.querySelectorAll('.baris-transaksi').forEach(function(row) {
                    if (filter === 'semua' || row.getAttribute('data-jenis') === filter) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            });
        });
    </script>
    
    <!-- Bootstrap JS -->
{% endblock %}