<?php
// Proteksi khusus guru
require_once __DIR__ . '/../auth/protect_guru.php';

// Header khusus guru
require_once __DIR__ . '/../includes/header_guru.php';

// Database
require_once __DIR__ . '/../config/db.php';
?>

<link rel="stylesheet" href="/presensi_v1/assets/css/style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="container-fluid dashboard-wrapper">

    <!-- ========================== TOP STAT CARDS ========================== -->
    <div class="row g-4 mb-4">

        <div class="col-6 col-md-3">
            <div class="matrix-card matrix-blue shadow-sm">
                <div class="matrix-icon"><i class="bi bi-people"></i></div>
                <small class="text-muted">Total Siswa</small>
                <h3 id="card-total" class="mb-0">0</h3>
            </div>
        </div>

        <div class="col-6 col-md-3">
            <div class="matrix-card matrix-green shadow-sm">
                <div class="matrix-icon"><i class="bi bi-check2-circle"></i></div>
                <small class="fw-bold text-success">Hadir</small>
                <h3 id="card-hadir" class="mb-0 text-success">0</h3>
            </div>
        </div>

        <div class="col-6 col-md-3">
            <div class="matrix-card matrix-orange shadow-sm">
                <div class="matrix-icon"><i class="bi bi-alarm"></i></div>
                <small class="fw-bold text-warning">Terlambat</small>
                <h3 id="card-telat" class="mb-0 text-warning">0</h3>
            </div>
        </div>

        <div class="col-6 col-md-3">
            <div class="matrix-card matrix-red shadow-sm">
                <div class="matrix-icon"><i class="bi bi-x-circle"></i></div>
                <small class="fw-bold text-danger">Alpha</small>
                <h3 id="card-alpha" class="mb-0 text-danger">0</h3>
            </div>
        </div>

    </div>


    <!-- ========================== GRAPH 7 HARI ========================== -->
    <div class="row g-4 mb-4">
        <div class="col-md-7">
            <div class="card shadow-sm p-4 matrix-panel">
                <h5 class="fw-semibold mb-3">Rekap 7 Hari Terakhir</h5>
                <canvas id="chart7"></canvas>
            </div>
        </div>

        <div class="col-md-5">
            <div class="card shadow-sm p-4 matrix-panel">
                <h5 class="fw-semibold mb-3">Presensi Terbaru</h5>
                <ul id="recent-list" class="list-group list-group-flush small"></ul>
            </div>
        </div>
    </div>

</div>

<script>
let chart7 = null;

async function loadGuruDashboard() {
    try {
        const res = await fetch("/presensi_v1/ajax/dashboard_data.php");
        const data = await res.json();

        // Update Card
        document.getElementById("card-total").innerText = data.total;
        document.getElementById("card-hadir").innerText = data.today.H;
        document.getElementById("card-telat").innerText = data.today.T;
        document.getElementById("card-alpha").innerText = data.today.alpha;

        // Update Chart
        if (chart7) chart7.destroy();

        chart7 = new Chart(document.getElementById("chart7"), {
            type: 'line',
            data: {
                labels: data.trend7.labels,
                datasets: [
                    { label: "Hadir", data: data.trend7.hadir, borderColor: "#28a745", tension: .35 },
                    { label: "Terlambat", data: data.trend7.telat, borderColor: "#fd7e14", tension: .35 },
                    { label: "Alpha", data: data.trend7.alpha, borderColor: "#dc3545", tension: .35 }
                ]
            }
        });

        // Presensi Terbaru
        const ul = document.getElementById("recent-list");
        ul.innerHTML = "";
        data.recent.forEach(r => {
            ul.innerHTML += `
                <li class="list-group-item d-flex justify-content-between align-items-start">
                    <div>
                        <strong>${r.nama ?? "UID:" + r.uid}</strong><br>
                        <small class="text-muted">NIS: ${r.nis ?? "-"} • ${r.tanggal} ${r.waktu}</small>
                    </div>
                    <span class="badge ${
                        r.keterangan === 'H' ? 'bg-success' :
                        r.keterangan === 'T' ? 'bg-warning text-dark' : 
                        'bg-danger'
                    }">${r.keterangan}</span>
                </li>
            `;
        });

    } catch (err) {
        console.error(err);
    }
}

loadGuruDashboard();
setInterval(loadGuruDashboard, 4000);
</script>

<?php require_once __DIR__ . '/../includes/footer.php'; ?>
