<?php /* Dashboard View */ ?>
<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard | Tatib 5</title>
    <link rel="icon" type="image/png" href="<?= base_url('logo.png') ?>">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            font-family: 'Poppins', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #0f172a, #1d4ed8, #38bdf8);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* HEADER */

        .top-header {
            background: linear-gradient(135deg, #1E3A8A, #2563EB);
            color: #fff;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 10px 25px rgba(37, 99, 235, .25);
        }

        .btn-back {
            color: white;
            text-decoration: none;
            font-weight: 600;
        }

        .btn-back:hover {
            color: #FFD54F;
        }

        .header-title {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-header {
            width: 60px;
        }

        .header-title h4 {
            margin: 0;
            font-weight: 700;
        }

        .header-title small {
            opacity: .9;
        }

        .navbar {
            background: rgba(255, 255, 255, .08);
            backdrop-filter: blur(12px);
        }

        body {
            font-family: Poppins, sans-serif;
            background: #f5f7fb
        }

        .btn-back {
            color: #fff;
            text-decoration: none;
            font-weight: 600
        }

        .stat-card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
            transition: .3s
        }

        .stat-card:hover {
            transform: translateY(-5px)
        }

        .stat-card i {
            font-size: 35px;
            margin-bottom: 10px
        }

        .card-header {
            font-weight: 600
        }

        footer {
            margin-top: 40px;
            background: #FFD54F;
            padding: 20px;
            color: #1E3A8A
        }

        .footer h5 {
            font-weight: 700;
            margin-bottom: 5px;
            color: #1E3A8A;
        }

        .footer-link {
            color: #1E3A8A;
            text-decoration: none;
            font-weight: 600;
            transition: .3s;
        }

        .footer-link i {
            margin-right: 6px;
            font-size: 18px;
        }

        .footer-link:hover {
            color: #0f172a;
        }
    </style>
</head>

<body>

    <div class="top-header">
        <a href="<?= base_url('/') ?>" class="btn-back">
            <i class="fa-solid fa-arrow-left"></i>
            Kembali
        </a>
        <div class="header-title">
            <img src="<?= base_url('logo.png') ?>" class="logo-header">
            <div>
                <h4>TIM TATIB 5</h4>
                <small>SMP Negeri 5 Bandung</small>
            </div>
        </div>
    </div>

    <div class="container my-4">

        <div class="row g-3">

            <div class="col-md-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fa-solid fa-users text-primary"></i>
                        <h3><?= $totalSiswa ?? 0 ?></h3>
                        <div>Total Murid</div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fa-solid fa-triangle-exclamation text-danger"></i>
                        <h3><?= $totalPelanggaran ?? 0 ?></h3>
                        <div>Total Pelanggaran</div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fa-solid fa-calendar-day text-success"></i>
                        <h3><?= $hariIni ?? 0 ?></h3>
                        <div>Pelanggaran Hari Ini</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fa-solid fa-trophy text-warning"></i>
                        <h3><?= $totalPenghargaan ?></h3>
                        <div>Total Penghargaan</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="row mt-4">

            <!-- Pelanggaran -->
            <div class="col-lg-6 mb-4">
                <div class="card shadow h-100">
                    <div class="card-header bg-danger text-white">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                        Grafik Pelanggaran Terbanyak
                    </div>

                    <div class="card-body" style="height:450px;">
                        <canvas id="grafikPelanggaran"></canvas>
                    </div>
                </div>
            </div>

            <!-- Penghargaan -->
            <div class="col-lg-6 mb-4">
                <div class="card shadow h-100">
                    <div class="card-header bg-warning">
                        <i class="fa-solid fa-trophy"></i>
                        Grafik Penghargaan Terbanyak
                    </div>

                    <div class="card-body" style="height:450px;">
                        <canvas id="grafikPenghargaan"></canvas>
                    </div>
                </div>
            </div>

        </div>

        <div class="row">

            <!-- Bulanan Pelanggaran -->
            <div class="col-lg-6 mb-4">
                <div class="card shadow h-100">
                    <div class="card-header bg-primary text-white">
                        <i class="fa-solid fa-chart-line"></i>
                        Pelanggaran per Bulan
                    </div>

                    <div class="card-body" style="height:350px;">
                        <canvas id="grafikBulanan"></canvas>
                    </div>
                </div>
            </div>

            <!-- Bulanan Penghargaan -->
            <div class="col-lg-6 mb-4">
                <div class="card shadow h-100">
                    <div class="card-header bg-success text-white">
                        <i class="fa-solid fa-award"></i>
                        Penghargaan per Bulan
                    </div>

                    <div class="card-body" style="height:350px;">
                        <canvas id="grafikPenghargaanBulanan"></canvas>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <footer class="footer mt-5">

        <div class="container">

            <div class="row align-items-center">

                <!-- Kiri -->
                <div class="col-md-6 text-md-start text-center mb-3 mb-md-0">

                    <h5 class="mb-1">
                        SMP Negeri 5 Bandung
                    </h5>

                    <small>
                        Jl. Sumatra No. 40, Bandung <br>
                        Sistem Informasi Tata Tertib © 2026
                    </small>

                </div>

                <!-- Kanan -->
                <div class="col-md-6 text-md-end text-center">

                    <a href="https://instagram.com/bdg.smpn5" class="footer-link me-4" target="_blank">

                        <i class="fab fa-instagram"></i>

                        @bdg.smpn5

                    </a>

                    <a href="https://youtube.com/" class="footer-link" target="_blank">

                        <i class="fab fa-youtube"></i>

                        SMP Negeri 5 Bandung

                    </a>

                </div>

            </div>

        </div>

    </footer>

    <script>
        const labelsPelanggaran =
            <?= json_encode(array_column($grafikPelanggaran ?? [], 'nama_pelanggaran')); ?>;

        const jumlahMurid =
            <?= json_encode(array_column($grafikPelanggaran ?? [], 'jumlah')); ?>;

        new Chart(document.getElementById('grafikPelanggaran'), {

            type: 'bar',

            data: {

                labels: labelsPelanggaran,

                datasets: [{

                    label: 'Jumlah Murid',

                    data: jumlahMurid,

                    backgroundColor: '#2563EB',

                    borderRadius: 8

                }]

            },

            options: {

                responsive: true,

                maintainAspectRatio: false,

                indexAxis: 'y',

                plugins: {

                    legend: {
                        display: false
                    }

                },

                scales: {

                    y: {
                        ticks: {
                            font: {
                                size: 11
                            }
                        }
                    },

                    x: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0,
                            stepSize: 1
                        }
                    }

                }

            }

        });

        const namaBulan = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des'];
        let dataBulanan = new Array(12).fill(0);
        <?php if (isset($bulanan)): foreach ($bulanan as $b): ?>
                dataBulanan[<?= $b['bulan'] - 1 ?>] = <?= $b['jumlah'] ?>;
        <?php endforeach;
        endif; ?>

        new Chart(document.getElementById('grafikBulanan'), {
            type: 'line',
            data: {
                labels: namaBulan,
                datasets: [{
                    label: 'Jumlah Pelanggaran',
                    data: dataBulanan,
                    fill: true,
                    tension: .35
                }]
            },
            options: {
                responsive: true,

                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1,
                            precision: 0
                        }
                    }
                }
            }
        });


        const penghargaan =
            <?= json_encode(array_column($grafikPenghargaan ?? [], 'nama_penghargaan')); ?>;

        const jumlahPenghargaan =
            <?= json_encode(array_column($grafikPenghargaan ?? [], 'jumlah')); ?>;

        new Chart(document.getElementById('grafikPenghargaan'), {

            type: 'bar',

            data: {
                labels: penghargaan,
                datasets: [{
                    label: 'Jumlah Murid',
                    data: jumlahPenghargaan,
                    backgroundColor: '#f59e0b',
                    borderRadius: 8
                }]
            },

            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }

        });

        let penghargaanBulanan = new Array(12).fill(0);

        <?php foreach ($penghargaanBulanan ?? [] as $b): ?>

            penghargaanBulanan[<?= $b['bulan'] - 1 ?>] = <?= $b['jumlah'] ?>;

        <?php endforeach; ?>

        new Chart(document.getElementById('grafikPenghargaanBulanan'), {

            type: 'line',

            data: {
                labels: namaBulan,
                datasets: [{
                    label: 'Jumlah Penghargaan',
                    data: penghargaanBulanan,
                    borderColor: '#16a34a',
                    backgroundColor: 'rgba(34,197,94,.2)',
                    fill: true,
                    tension: .4
                }]
            },

            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }

        });
    </script>

</body>

</html>