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

{% block title %}Dashboard - Admin Database{% endblock %}
{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Selamat datang, {{ session.get('nama', 'Admin Database') }} 👋</h5>
<small class="text-muted" style="font-size: 0.85rem;">Berikut adalah pantauan data pusat pesantren.</small>
{% endblock %}

{% block extra_head %}
<style>
    .bule-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .bule-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    .bule-stat-icon {
        position: absolute; top: 0; right: 0; padding: 1rem;
        opacity: 0.1; transition: opacity 0.2s;
    }
    .bule-card:hover .bule-stat-icon { opacity: 0.2; }
    .text-bp-primary { color: #00685f !important; }
    .text-bp-secondary { color: #006c51 !important; }
    .text-bp-tertiary { color: #006574 !important; }
    .text-bp-warning { color: #e67e22 !important; }
    .text-bp-dark { color: #1e293b !important; }
    .bg-bp-primary { background-color: #00685f !important; }
    .bg-bp-secondary { background-color: #59dcb1 !important; }

    .bp-progress { background-color: #f1f5f9; border-radius: 9999px; height: 12px; overflow: hidden; }
    .bp-progress-bar { height: 100%; border-radius: 9999px; }

    .bp-table th {
        background-color: transparent; color: #64748b; font-weight: 600;
        font-size: 0.75rem; border-bottom: 1px solid #e2e8f0; padding: 0.75rem 1rem;
        text-transform: uppercase; letter-spacing: 0.05em;
    }
    .bp-table td {
        padding: 0.75rem 1rem; vertical-align: middle;
        border-bottom: 1px solid #f1f5f9; color: #475569; font-size: 0.85rem;
    }
    .bp-table tr:hover td { background-color: #f8fafc; }
    .bp-table tr:last-child td { border-bottom: none; }

    .bp-badge-success {
        background-color: rgba(20,184,166,0.1); color: #0d9488;
        border: 1px solid rgba(13,148,136,0.2); padding: 0.2rem 0.6rem;
        border-radius: 9999px; font-size: 0.7rem; font-weight: 600;
    }
    .bp-badge-danger {
        background-color: rgba(239,68,68,0.1); color: #ef4444;
        border: 1px solid rgba(239,68,68,0.2); padding: 0.2rem 0.6rem;
        border-radius: 9999px; font-size: 0.7rem; font-weight: 600;
    }
    .bp-badge-warning {
        background-color: rgba(245,158,11,0.1); color: #f59e0b;
        border: 1px solid rgba(245,158,11,0.2); padding: 0.2rem 0.6rem;
        border-radius: 9999px; font-size: 0.7rem; font-weight: 600;
    }

    .bp-alert-danger {
        background-color: #fef2f2; border: 1px solid #fecaca;
        border-radius: 6px; padding: 0.85rem 1rem; display: flex; gap: 0.75rem; align-items: flex-start;
    }
    .bp-alert-warning {
        background-color: #fffbeb; border: 1px solid #fde68a;
        border-radius: 6px; padding: 0.85rem 1rem; display: flex; gap: 0.75rem; align-items: flex-start;
    }
    .bp-alert-info {
        background-color: #eff6ff; border: 1px solid #bfdbfe;
        border-radius: 6px; padding: 0.85rem 1rem; display: flex; gap: 0.75rem; align-items: flex-start;
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-4"></div>

<!-- ROW 1: KARTU STATISTIK -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-4 col-lg-2">
        <div class="bule-card position-relative h-100 cursor-pointer overflow-hidden" onclick="window.location.href='/admin_database/santri'">
            <div class="bule-stat-icon"><i class="fas fa-users text-bp-primary" style="font-size: 2.5rem;"></i></div>
            <div class="p-3 d-flex flex-column justify-content-center h-100 position-relative z-1">
                <span class="text-muted fw-semibold text-uppercase mb-2" style="font-size: 0.7rem; letter-spacing: 0.05em;">Santri Aktif</span>
                <h2 class="fw-bold mb-0 text-bp-primary" style="font-size: 1.75rem;">{{ total_santri }}</h2>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="bule-card position-relative h-100 cursor-pointer overflow-hidden" onclick="window.location.href='/admin_database/guru'">
            <div class="bule-stat-icon"><i class="fas fa-chalkboard-teacher text-bp-secondary" style="font-size: 2.5rem;"></i></div>
            <div class="p-3 d-flex flex-column justify-content-center h-100 position-relative z-1">
                <span class="text-muted fw-semibold text-uppercase mb-2" style="font-size: 0.7rem; letter-spacing: 0.05em;">Guru Aktif</span>
                <h2 class="fw-bold mb-0 text-bp-secondary" style="font-size: 1.75rem;">{{ total_guru }}</h2>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="bule-card position-relative h-100 cursor-pointer overflow-hidden" onclick="window.location.href='/admin_database/kelas'">
            <div class="bule-stat-icon"><i class="fas fa-school text-bp-tertiary" style="font-size: 2.5rem;"></i></div>
            <div class="p-3 d-flex flex-column justify-content-center h-100 position-relative z-1">
                <span class="text-muted fw-semibold text-uppercase mb-2" style="font-size: 0.7rem; letter-spacing: 0.05em;">Kelas</span>
                <h2 class="fw-bold mb-0 text-bp-tertiary" style="font-size: 1.75rem;">{{ total_kelas }}</h2>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="bule-card position-relative h-100 cursor-pointer overflow-hidden" onclick="window.location.href='/admin_database/kamar'">
            <div class="bule-stat-icon"><i class="fas fa-bed text-bp-warning" style="font-size: 2.5rem;"></i></div>
            <div class="p-3 d-flex flex-column justify-content-center h-100 position-relative z-1">
                <span class="text-muted fw-semibold text-uppercase mb-2" style="font-size: 0.7rem; letter-spacing: 0.05em;">Kamar</span>
                <h2 class="fw-bold mb-0 text-bp-warning" style="font-size: 1.75rem;">{{ total_kamar }}</h2>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="bule-card position-relative h-100 cursor-pointer overflow-hidden" onclick="window.location.href='/admin_database/alumni'">
            <div class="bule-stat-icon"><i class="fas fa-user-graduate text-bp-dark" style="font-size: 2.5rem;"></i></div>
            <div class="p-3 d-flex flex-column justify-content-center h-100 position-relative z-1">
                <span class="text-muted fw-semibold text-uppercase mb-2" style="font-size: 0.7rem; letter-spacing: 0.05em;">Alumni</span>
                <h2 class="fw-bold mb-0 text-bp-dark" style="font-size: 1.75rem;">{{ total_alumni }}</h2>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="bule-card position-relative h-100 cursor-pointer overflow-hidden" onclick="window.location.href='/admin_database/mutakhoorijin'">
            <div class="bule-stat-icon"><i class="fas fa-scroll text-bp-dark" style="font-size: 2.5rem;"></i></div>
            <div class="p-3 d-flex flex-column justify-content-center h-100 position-relative z-1">
                <span class="text-muted fw-semibold text-uppercase mb-2" style="font-size: 0.7rem; letter-spacing: 0.05em;">Mutakhoorijin</span>
                <h2 class="fw-bold mb-0 text-bp-dark" style="font-size: 1.75rem;">{{ total_mutakhoorijin }}</h2>
            </div>
        </div>
    </div>
</div>

<!-- ROW 2: DEMOGRAFI + PERINGATAN -->
<div class="row g-4 mb-4">
    <div class="col-lg-8 d-flex flex-column gap-4">
        <!-- Demografi Santri -->
        <div class="bule-card p-4">
            <h6 class="fw-bold text-dark mb-4" style="font-size: 1rem;">Demografi Santri</h6>
            <div class="d-flex flex-column gap-4">
                <div>
                    <div class="d-flex justify-content-between mb-2" style="font-size: 0.85rem;">
                        <span class="fw-medium text-dark">Putra</span>
                        <span class="text-muted">{{ total_putra }} santri ({{ persen_putra }}%)</span>
                    </div>
                    <div class="bp-progress">
                        <div class="bp-progress-bar bg-bp-primary" style="width: {{ persen_putra }}%"></div>
                    </div>
                </div>
                <div>
                    <div class="d-flex justify-content-between mb-2" style="font-size: 0.85rem;">
                        <span class="fw-medium text-dark">Putri</span>
                        <span class="text-muted">{{ total_putri }} santri ({{ persen_putri }}%)</span>
                    </div>
                    <div class="bp-progress">
                        <div class="bp-progress-bar bg-bp-secondary" style="width: {{ persen_putri }}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistik Kelas -->
        <div class="bule-card overflow-hidden">
            <div class="d-flex justify-content-between align-items-center px-4 py-3 border-bottom bg-light bg-opacity-50">
                <h6 class="fw-bold text-dark mb-0" style="font-size: 1rem;">Statistik Kelas</h6>
                <a href="/admin_database/kelas" class="text-bp-primary text-decoration-none" style="font-size: 0.8rem; font-weight: 600;">Lihat Semua</a>
            </div>
            <div class="table-responsive">
                <table class="table bp-table mb-0">
                    <thead>
                        <tr>
                            <th>Nama Kelas</th>
                            <th>Jenjang</th>
                            <th class="text-center">Putra</th>
                            <th class="text-center">Putri</th>
                            <th class="text-end">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for k in statistik_kelas %}
                        <tr>
                            <td class="fw-medium text-dark">{{ k.nama_kelas }}</td>
                            <td><span class="bp-badge-success">{{ k.jenjang }}</span></td>
                            <td class="text-center">{{ k.putra|default(0)|int }}</td>
                            <td class="text-center">{{ k.putri|default(0)|int }}</td>
                            <td class="text-end fw-semibold">{{ k.jumlah_santri }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4" style="font-size: 0.85rem;">
                                <i class="fas fa-info-circle me-1"></i> Belum ada data kelas aktif.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Statistik Kamar -->
        <div class="bule-card overflow-hidden">
            <div class="d-flex justify-content-between align-items-center px-4 py-3 border-bottom bg-light bg-opacity-50">
                <h6 class="fw-bold text-dark mb-0" style="font-size: 1rem;">Statistik Kamar</h6>
                <a href="/admin_database/kamar" class="text-bp-primary text-decoration-none" style="font-size: 0.8rem; font-weight: 600;">Lihat Semua</a>
            </div>
            <div class="table-responsive">
                <table class="table bp-table mb-0">
                    <thead>
                        <tr>
                            <th>Kamar</th>
                            <th>Asrama</th>
                            <th>L/P</th>
                            <th class="text-center">Kapasitas</th>
                            <th class="text-center">Terisi</th>
                            <th class="text-center">Sisa</th>
                            <th class="text-center">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for km in statistik_kamar %}
                        <tr>
                            <td class="fw-medium text-dark">{{ km.nama_kamar }}</td>
                            <td>{{ km.nama_asrama or '-' }}</td>
                            <td>{{ km.jenis_kelamin }}</td>
                            <td class="text-center">{{ km.kapasitas }}</td>
                            <td class="text-center">{{ km.terisi }}</td>
                            <td class="text-center">{{ km.tersedia }}</td>
                            <td class="text-center">
                                {% if km.kapasitas and km.terisi >= km.kapasitas %}
                                    <span class="bp-badge-danger"><i class="fas fa-exclamation-triangle me-1" style="font-size: 0.6rem;"></i>Penuh</span>
                                {% elif km.persen >= 80 %}
                                    <span class="bp-badge-warning">Hampir Penuh</span>
                                {% else %}
                                    <span class="bp-badge-success">Tersedia</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4" style="font-size: 0.85rem;">
                                <i class="fas fa-info-circle me-1"></i> Belum ada data kamar aktif.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Kolom Kanan -->
    <div class="col-lg-4 d-flex flex-column gap-4">
        
        <!-- Peringatan & Tindakan -->
        <div class="bule-card p-4">
            <div class="d-flex align-items-center gap-2 mb-3 pb-3 border-bottom">
                <i class="fas fa-exclamation-circle text-warning"></i>
                <h6 class="fw-bold text-dark mb-0" style="font-size: 1rem;">Perlu Tindakan</h6>
            </div>
            
            <div class="d-flex flex-column gap-3">
                {% if santri_tanpa_kelas > 0 %}
                <div class="bp-alert-danger">
                    <div class="mt-1"><div style="width: 8px; height: 8px; border-radius: 50%; background-color: #ef4444;"></div></div>
                    <div>
                        <p class="mb-1 fw-medium text-dark" style="font-size: 0.85rem;">{{ santri_tanpa_kelas }} santri belum memiliki kelas</p>
                        <a href="/admin_database/santri" class="text-bp-primary text-decoration-none" style="font-size: 0.75rem; font-weight: 600;">Atur Sekarang →</a>
                    </div>
                </div>
                {% endif %}

                {% if santri_tanpa_kamar > 0 %}
                <div class="bp-alert-warning">
                    <div class="mt-1"><div style="width: 8px; height: 8px; border-radius: 50%; background-color: #f59e0b;"></div></div>
                    <div>
                        <p class="mb-1 fw-medium text-dark" style="font-size: 0.85rem;">{{ santri_tanpa_kamar }} santri belum memiliki kamar</p>
                        <a href="/admin_database/santri" class="text-bp-primary text-decoration-none" style="font-size: 0.75rem; font-weight: 600;">Atur Sekarang →</a>
                    </div>
                </div>
                {% endif %}

                {% if kamar_penuh|length > 0 %}
                <div class="bp-alert-warning">
                    <div class="mt-1"><div style="width: 8px; height: 8px; border-radius: 50%; background-color: #f59e0b;"></div></div>
                    <div>
                        <p class="mb-1 fw-medium text-dark" style="font-size: 0.85rem;">{{ kamar_penuh|length }} kamar sudah penuh</p>
                        <a href="/admin_database/kamar" class="text-bp-primary text-decoration-none" style="font-size: 0.75rem; font-weight: 600;">Tinjau Kamar →</a>
                    </div>
                </div>
                {% endif %}

                {% if santri_tanpa_kelas == 0 and santri_tanpa_kamar == 0 and kamar_penuh|length == 0 %}
                <div class="bp-alert-info">
                    <div class="mt-1"><div style="width: 8px; height: 8px; border-radius: 50%; background-color: #3b82f6;"></div></div>
                    <div>
                        <p class="mb-0 text-muted" style="font-size: 0.85rem;">Semua data dalam kondisi baik. Tidak ada peringatan.</p>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Kamar Penuh -->
        {% if kamar_penuh|length > 0 %}
        <div class="bule-card overflow-hidden">
            <div class="px-4 py-3 border-bottom bg-light bg-opacity-50">
                <h6 class="fw-bold text-dark mb-0" style="font-size: 1rem;"><i class="fas fa-door-open text-warning me-2"></i>Kamar Penuh</h6>
            </div>
            <ul class="list-group list-group-flush">
                {% for km in kamar_penuh %}
                <li class="list-group-item px-4 py-3 d-flex justify-content-between align-items-center border-bottom">
                    <div>
                        <p class="mb-0 fw-medium text-dark" style="font-size: 0.85rem;">{{ km.nama_kamar }} ({{ km.jenis_kelamin }})</p>
                        <p class="mb-0 text-muted" style="font-size: 0.75rem;">{{ km.terisi }}/{{ km.kapasitas }} terisi</p>
                    </div>
                    <i class="fas fa-exclamation-triangle text-warning"></i>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <!-- Santri Terbaru -->
        <div class="bule-card overflow-hidden">
            <div class="d-flex justify-content-between align-items-center px-4 py-3 border-bottom bg-light bg-opacity-50">
                <h6 class="fw-bold text-dark mb-0" style="font-size: 1rem;">Santri Terbaru</h6>
                <a href="/admin_database/santri" class="text-bp-primary text-decoration-none" style="font-size: 0.8rem; font-weight: 600;">Lihat Semua</a>
            </div>
            <ul class="list-group list-group-flush">
                {% for s in santri_terbaru %}
                <li class="list-group-item px-4 py-3 border-bottom">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <p class="mb-0 fw-medium text-dark" style="font-size: 0.85rem;">{{ s.nama_lengkap }}</p>
                            <p class="mb-0 text-muted" style="font-size: 0.75rem;">{{ s.id_santri or '-' }} · {{ s.tingkat_kelas or '-' }}</p>
                        </div>
                        <span class="text-muted" style="font-size: 0.7rem;">
                            {% if s.jenis_kelamin in ['Laki-laki', 'L', 'Putra'] %}
                                <span class="badge bg-primary bg-opacity-10 text-primary border border-primary" style="font-size: 0.65rem;">L</span>
                            {% else %}
                                <span class="badge bg-danger bg-opacity-10 text-danger border border-danger" style="font-size: 0.65rem;">P</span>
                            {% endif %}
                        </span>
                    </div>
                </li>
                {% else %}
                <li class="list-group-item px-4 py-4 text-center text-muted" style="font-size: 0.85rem;">
                    <i class="fas fa-info-circle me-1"></i> Belum ada data santri.
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}