<?= $this->extend('layout/admin') ?>
<?= $this->section('content') ?>

<style>
.card-stat{border-radius:12px}
.card-stat .icon{font-size:35px;opacity:.4}
.big-number{font-size:32px;font-weight:900}
.progress-sm{height:10px;border-radius:5px}
.chart-box{height:300px}
</style>

<div class="row mb-3">
    <div class="col">
        <h4 class="fw-bold">
            <i class="fas fa-school text-primary me-1"></i>
            Dashboard SIMSEKO
        </h4>
        <div class="text-muted">
            Executive Monitoring – Sekolah Enterprise
        </div>
    </div>
</div>

<div class="row">

    <!-- TOTAL SISWA -->
    <div class="col-md-3">
        <div class="card shadow-sm card-stat border-primary">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted">Total Siswa</div>
                        <div class="big-number text-primary">
                            <?= $student_total ?? 0 ?>
                        </div>
                    </div>
                    <div class="icon">
                        <i class="fas fa-user-graduate text-primary"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- TOTAL GURU -->
    <div class="col-md-3">
        <div class="card shadow-sm card-stat border-success">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted">Guru & Staff</div>
                        <div class="big-number text-success">
                            <?= $teacher_total ?? 0 ?>
                        </div>
                    </div>
                    <div class="icon">
                        <i class="fas fa-chalkboard-teacher text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ABSENSI -->
    <div class="col-md-3">
        <div class="card shadow-sm card-stat border-warning">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted">Kehadiran Hari Ini</div>
                        <div class="big-number text-warning">
                            <?= number_format($attendance_today ?? 0, 2) ?>%
                        </div>
                    </div>
                    <div class="icon">
                        <i class="fas fa-user-check text-warning"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- KEUANGAN -->
    <div class="col-md-3">
        <div class="card shadow-sm card-stat border-info">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted">Realisasi SPP</div>
                        <div class="big-number text-info">
                            <?= number_format($spp_paid ?? 0, 0) ?>
                        </div>
                    </div>
                    <div class="icon">
                        <i class="fas fa-wallet text-info"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<hr>

<!-- AKADEMIK -->
<h5 class="fw-bold mb-3">Status Akademik</h5>

<div class="row">

    <div class="col-md-3">
        <div class="card shadow-sm card-stat border-success">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted">Rata-rata Nilai</div>
                        <div class="big-number text-success">
                            <?= number_format($avg_score ?? 0, 2) ?>
                        </div>
                    </div>
                    <div class="icon">
                        <i class="fas fa-star text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card shadow-sm card-stat border-danger">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted">Kasus BK</div>
                        <div class="big-number text-danger">
                            <?= $bk_case ?? 0 ?>
                        </div>
                    </div>
                    <div class="icon">
                        <i class="fas fa-exclamation-triangle text-danger"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<hr>

<!-- GRAFIK -->
<h5 class="fw-bold mb-3">Analytics</h5>

<div class="row">

    <div class="col-md-6 mb-3">
        <div class="card shadow-sm">
            <div class="card-header fw-bold">
                Tren Nilai Siswa
            </div>
            <div class="card-body">
                <canvas id="gradeChart" class="chart-box"></canvas>
            </div>
        </div>
    </div>

    <div class="col-md-6 mb-3">
        <div class="card shadow-sm">
            <div class="card-header fw-bold">
                Kehadiran Bulanan
            </div>
            <div class="card-body">
                <canvas id="attendanceChart" class="chart-box"></canvas>
            </div>
        </div>
    </div>

</div>

<hr>

<!-- NOTIFICATION -->
<h5 class="fw-bold mb-3">Notifikasi Penting</h5>

<div class="card shadow-sm">
    <div class="card-body">
        <?php if(!empty($notifications)): ?>
            <ul>
                <?php foreach($notifications as $n): ?>
                    <li><?= $n ?></li>
                <?php endforeach ?>
            </ul>
        <?php else: ?>
            <div class="text-muted">Tidak ada notifikasi</div>
        <?php endif ?>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
const gradeCtx = document.getElementById('gradeChart');
new Chart(gradeCtx, {
    type: 'line',
    data: {
        labels: <?= json_encode($grade_month ?? ['Jan','Feb','Mar','Apr']) ?>,
        datasets: [{
            label: 'Rata-rata Nilai',
            data: <?= json_encode($grade_value ?? [78,80,82,85]) ?>,
            borderWidth: 3
        }]
    }
});

const attCtx = document.getElementById('attendanceChart');
new Chart(attCtx, {
    type: 'bar',
    data: {
        labels: <?= json_encode($att_month ?? ['Jan','Feb','Mar','Apr']) ?>,
        datasets: [{
            label: 'Kehadiran %',
            data: <?= json_encode($att_value ?? [92,94,90,96]) ?>,
            borderWidth: 3
        }]
    }
});
</script>

<?= $this->endSection() ?>
