{% extends "admin/base_admin.html" %}

{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
<!-- Stats Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="stat-card">
            <div class="icon bg-success bg-opacity-10 text-success">
                <i class="fas fa-users"></i>
            </div>
            <div class="number">{{ stats.total_siswa }}</div>
            <div class="label">Siswa Aktif</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card">
            <div class="icon bg-primary bg-opacity-10 text-primary">
                <i class="fas fa-money-bill-wave"></i>
            </div>
            <div class="number">Rp {{ "{:,.0f}".format(stats.jumlah_bayar_bulan_ini).replace(",", ".") }}</div>
            <div class="label">Pemasukan Bulan Ini</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card">
            <div class="icon bg-info bg-opacity-10 text-info">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="number">{{ stats.total_bayar_bulan_ini }}</div>
            <div class="label">SPP Lunas</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card">
            <div class="icon bg-warning bg-opacity-10 text-warning">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="number">{{ stats.total_tunggakan }}</div>
            <div class="label">Tunggakan</div>
        </div>
    </div>
</div>

<!-- Chart & Recent -->
<div class="row g-4">
    <div class="col-lg-8">
        <div class="card-table">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-chart-bar me-2 text-success"></i>Grafik Pembayaran per Bulan</h5>
            </div>
            <div class="card-body">
                <canvas id="paymentChart" height="250"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card-table">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-clock me-2 text-success"></i>Pembayaran Terbaru</h5>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    {% for r in recent %}
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-bold">{{ r.nama }}</div>
                            <small class="text-muted">{{ r.bulan }} - {{ r.kelas }}</small>
                        </div>
                        <span class="badge bg-success">Rp {{ "{:,.0f}".format(r.total_bayar).replace(",", ".") }}</span>
                    </div>
                    {% else %}
                    <div class="list-group-item text-center text-muted py-4">
                        Belum ada pembayaran
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tunggakan -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card-table">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-exclamation-circle me-2 text-warning"></i>Tunggakan Berjalan</h5>
                <a href="/admin/pembayaran?status=belum_bayar" class="btn btn-sm btn-outline-warning">Lihat Semua</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Nama</th>
                                <th>Kelas</th>
                                <th>Bulan</th>
                                <th>Total</th>
                                <th>WA Ortu</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for t in tunggakan %}
                            <tr>
                                <td>{{ t.nama }}</td>
                                <td><span class="badge bg-secondary">{{ t.kelas }}</span></td>
                                <td>{{ t.bulan }}</td>
                                <td>Rp {{ "{:,.0f}".format(t.total_bayar).replace(",", ".") }}</td>
                                <td><a href="https://wa.me/{{ t.no_wa_ortu }}" target="_blank" class="text-decoration-none"><i class="fab fa-whatsapp text-success"></i> {{ t.no_wa_ortu }}</a></td>
                                <td>
                                    <form method="POST" action="/admin/pembayaran/bayar/{{ t.id }}" style="display:inline">
                                        <button type="submit" class="btn btn-sm btn-success btn-action" onclick="return confirm('Konfirmasi pembayaran?')">
                                            <i class="fas fa-check me-1"></i>Lunas
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">
                                    <i class="fas fa-check-circle fa-2x mb-2 text-success"></i><br>
                                    Tidak ada tunggakan. Alhamdulillah!
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const ctx = document.getElementById('paymentChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: {{ chart_labels | tojson }},
        datasets: [{
            label: 'Pembayaran (Rp)',
            data: {{ chart_data | tojson }},
            backgroundColor: 'rgba(26, 95, 42, 0.8)',
            borderColor: '#1a5f2a',
            borderWidth: 1,
            borderRadius: 8
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, ticks: { callback: v => 'Rp ' + v.toLocaleString('id-ID') } }
        }
    }
});
</script>
{% endblock %}