<?php
session_start();
if (!isset($_SESSION['username']) || $_SESSION['role'] !== 'guru') {
    header("Location: index.php");
    exit;
}

// Koneksi database
require_once 'config.php';

// Ambil data guru piket yang login
$username = $_SESSION['username'];
$guru_nama = '';

$query = "SELECT * FROM guru WHERE nip = '$username' LIMIT 1";
$result = mysqli_query($conn, $query);
if ($result && mysqli_num_rows($result) > 0) {
    $guru = mysqli_fetch_assoc($result);
    $guru_nama = $guru['nama'];
} else {
    $query_user = "SELECT * FROM users WHERE username = '$username' AND role = 'guru' LIMIT 1";
    $result_user = mysqli_query($conn, $query_user);
    if ($result_user && mysqli_num_rows($result_user) > 0) {
        $user = mysqli_fetch_assoc($result_user);
        $guru_nama = $user['nama'] ?? $username;
    }
}

// Ambil parameter filter
$tahun = $_GET['tahun'] ?? date('Y');
$bulan = $_GET['bulan'] ?? '';

// Ambil nama sekolah
$profil = mysqli_fetch_assoc(mysqli_query($conn, "SELECT nama_sekolah FROM profil_sekolah LIMIT 1"));
$nama_sekolah = $profil['nama_sekolah'] ?? 'Sistem Pelanggaran Siswa';

// ============================================================
// STATISTIK UMUM
// ============================================================

// Total pelanggaran
$query_total = "SELECT COUNT(*) as total FROM pelanggaran";
$result_total = mysqli_query($conn, $query_total);
$total_pelanggaran = mysqli_fetch_assoc($result_total)['total'] ?? 0;

// Total pelanggaran aktif
$query_aktif = "SELECT COUNT(*) as total FROM pelanggaran WHERE status = 'Aktif'";
$result_aktif = mysqli_query($conn, $query_aktif);
$total_aktif = mysqli_fetch_assoc($result_aktif)['total'] ?? 0;

// Total pelanggaran selesai
$query_selesai = "SELECT COUNT(*) as total FROM pelanggaran WHERE status = 'Selesai'";
$result_selesai = mysqli_query($conn, $query_selesai);
$total_selesai = mysqli_fetch_assoc($result_selesai)['total'] ?? 0;

// Total poin
$query_poin = "SELECT SUM(poin) as total FROM pelanggaran";
$result_poin = mysqli_query($conn, $query_poin);
$total_poin = mysqli_fetch_assoc($result_poin)['total'] ?? 0;

// Total siswa terlibat
$query_siswa = "SELECT COUNT(DISTINCT siswa_id) as total FROM pelanggaran";
$result_siswa = mysqli_query($conn, $query_siswa);
$total_siswa = mysqli_fetch_assoc($result_siswa)['total'] ?? 0;

// Rata-rata poin per pelanggaran
$rata_poin = $total_pelanggaran > 0 ? round($total_poin / $total_pelanggaran, 1) : 0;

// ============================================================
// STATISTIK PER BULAN
// ============================================================
$statistik_bulan = [];
for ($b = 1; $b <= 12; $b++) {
    $query = "SELECT COUNT(*) as total FROM pelanggaran WHERE MONTH(tanggal) = $b AND YEAR(tanggal) = $tahun";
    $result = mysqli_query($conn, $query);
    $statistik_bulan[$b] = mysqli_fetch_assoc($result)['total'] ?? 0;
}

// ============================================================
// STATISTIK PER KELAS
// ============================================================
$statistik_kelas = [];
$query_kelas = "SELECT s.kelas, COUNT(p.id) as jumlah, SUM(p.poin) as total_poin
                FROM siswa s
                LEFT JOIN pelanggaran p ON s.id = p.siswa_id
                WHERE s.status = 'aktif'
                GROUP BY s.kelas
                ORDER BY CAST(s.kelas AS UNSIGNED), s.kelas";
$result_kelas = mysqli_query($conn, $query_kelas);
while ($row = mysqli_fetch_assoc($result_kelas)) {
    $statistik_kelas[] = $row;
}

// ============================================================
// STATISTIK PER JENIS PELANGGARAN
// ============================================================
$statistik_jenis = [];
$query_jenis = "SELECT jenis_pelanggaran, COUNT(*) as jumlah, SUM(poin) as total_poin
                FROM pelanggaran
                GROUP BY jenis_pelanggaran
                ORDER BY jumlah DESC
                LIMIT 10";
$result_jenis = mysqli_query($conn, $query_jenis);
while ($row = mysqli_fetch_assoc($result_jenis)) {
    $statistik_jenis[] = $row;
}

// ============================================================
// STATISTIK PER STATUS
// ============================================================
$statistik_status = [
    'Aktif' => $total_aktif,
    'Selesai' => $total_selesai
];

// ============================================================
// STATISTIK PER KLASIFIKASI
// ============================================================
$query_berat = "SELECT COUNT(*) as total FROM pelanggaran WHERE poin >= 50";
$result_berat = mysqli_query($conn, $query_berat);
$total_berat = mysqli_fetch_assoc($result_berat)['total'] ?? 0;

$query_sedang = "SELECT COUNT(*) as total FROM pelanggaran WHERE poin >= 25 AND poin < 50";
$result_sedang = mysqli_query($conn, $query_sedang);
$total_sedang = mysqli_fetch_assoc($result_sedang)['total'] ?? 0;

$query_ringan = "SELECT COUNT(*) as total FROM pelanggaran WHERE poin < 25";
$result_ringan = mysqli_query($conn, $query_ringan);
$total_ringan = mysqli_fetch_assoc($result_ringan)['total'] ?? 0;

$statistik_klasifikasi = [
    'Berat' => $total_berat,
    'Sedang' => $total_sedang,
    'Ringan' => $total_ringan
];

// ============================================================
// STATISTIK PER BULAN (untuk chart)
// ============================================================
$bulan_names = [
    1 => 'Jan', 2 => 'Feb', 3 => 'Mar', 4 => 'Apr', 5 => 'Mei', 6 => 'Jun',
    7 => 'Jul', 8 => 'Agu', 9 => 'Sep', 10 => 'Okt', 11 => 'Nov', 12 => 'Des'
];

// ============================================================
// STATISTIK PER TAHUN
// ============================================================
$tahun_list = [];
$query_tahun = "SELECT DISTINCT YEAR(tanggal) as tahun FROM pelanggaran ORDER BY tahun DESC";
$result_tahun = mysqli_query($conn, $query_tahun);
while ($row = mysqli_fetch_assoc($result_tahun)) {
    $tahun_list[] = $row['tahun'];
}
if (empty($tahun_list)) {
    $tahun_list[] = date('Y');
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Statistik Pelanggaran - Guru Piket</title>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    
    <!-- Google Fonts - Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #f3f4f6;
            color: #1f2937;
            line-height: 1.5;
            padding: 20px;
        }

        /* Header */
        .header {
            background: white;
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .logo h2 {
            font-size: 1.5rem;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo h2 i {
            color: #3b82f6;
        }

        .logo p {
            font-size: 0.875rem;
            color: #666;
            margin-top: 5px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #f8f9fa;
            padding: 8px 15px;
            border-radius: 50px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            background: #3b82f6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .user-details .name {
            font-weight: 600;
            color: #333;
        }

        .user-details .role {
            font-size: 0.75rem;
            color: #666;
        }

        /* Title */
        h2 {
            text-align: center;
            margin-bottom: 5px;
            color: #333;
        }

        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }

        /* Filter Card */
        .filter-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .filter-form {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: flex-end;
        }

        .filter-group {
            flex: 1;
            min-width: 150px;
        }

        .filter-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            color: #555;
            font-size: 0.9rem;
        }

        .filter-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .filter-control:focus {
            outline: none;
            border-color: #3b82f6;
        }

        .btn-filter {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .btn-filter:hover {
            background: #2563eb;
        }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .stat-icon.total {
            background: #e3f2fd;
            color: #1565c0;
        }

        .stat-icon.aktif {
            background: #ffebee;
            color: #c62828;
        }

        .stat-icon.selesai {
            background: #dff0d8;
            color: #2e7d32;
        }

        .stat-icon.poin {
            background: #fff8e1;
            color: #ef6c00;
        }

        .stat-icon.siswa {
            background: #e8eaf6;
            color: #283593;
        }

        .stat-icon.rata {
            background: #e0e0e0;
            color: #333;
        }

        .stat-content h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 5px;
        }

        .stat-content p {
            color: #666;
            font-size: 0.875rem;
        }

        /* Chart Grid */
        .chart-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }

        .chart-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .chart-header h4 {
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .chart-header h4 i {
            color: #3b82f6;
        }

        .chart-container {
            height: 250px;
            position: relative;
        }

        /* Table */
        .table-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .table-header h4 {
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .table-header h4 i {
            color: #3b82f6;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            font-size: 14px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }

        th {
            background: #f8f9fa;
            font-weight: 600;
            color: #333;
        }

        td.text-left {
            text-align: left;
        }

        /* Badges */
        .badge {
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 12px;
            display: inline-block;
        }

        .badge-berat {
            background: #ef4444;
            color: white;
        }

        .badge-sedang {
            background: #f59e0b;
            color: white;
        }

        .badge-ringan {
            background: #10b981;
            color: white;
        }

        .badge-aktif {
            background: #ef4444;
            color: white;
        }

        .badge-selesai {
            background: #10b981;
            color: white;
        }

        /* Footer Buttons */
        .footer-buttons {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .footer-buttons a {
            padding: 8px 16px;
            background: #6c757d;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .footer-buttons a:hover {
            background: #5a6268;
        }

        .footer-buttons a.primary {
            background: #3b82f6;
        }

        .footer-buttons a.primary:hover {
            background: #2563eb;
        }

        .footer-buttons a.success {
            background: #10b981;
        }

        .footer-buttons a.success:hover {
            background: #059669;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .chart-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .filter-form {
                flex-direction: column;
            }

            .filter-group {
                width: 100%;
            }

            .btn-filter {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="header">
        <div class="logo">
            <h2>
                <i class="fas fa-chart-bar"></i>
                Statistik Pelanggaran
            </h2>
            <p><?= $nama_sekolah ?> • Guru Piket</p>
        </div>
        
        <div class="user-info">
            <div class="user-avatar">
                <?= strtoupper(substr($guru_nama, 0, 1)) ?>
            </div>
            <div class="user-details">
                <div class="name"><?= htmlspecialchars($guru_nama) ?></div>
                <div class="role">Guru Piket</div>
            </div>
        </div>
    </div>

    <!-- Title -->
    <h2>STATISTIK PELANGGARAN SISWA</h2>
    <div class="subtitle">Analisis data pelanggaran secara lengkap</div>

    <!-- Filter Card -->
    <div class="filter-card">
        <form method="get" class="filter-form">
            <div class="filter-group">
                <label>Tahun</label>
                <select name="tahun" class="filter-control">
                    <?php foreach ($tahun_list as $th): ?>
                    <option value="<?= $th ?>" <?= ($th == $tahun) ? 'selected' : '' ?>><?= $th ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            
            <div class="filter-group">
                <label>Bulan</label>
                <select name="bulan" class="filter-control">
                    <option value="">Semua Bulan</option>
                    <?php for ($b = 1; $b <= 12; $b++): ?>
                    <option value="<?= $b ?>" <?= ($b == $bulan) ? 'selected' : '' ?>><?= $bulan_names[$b] ?></option>
                    <?php endfor; ?>
                </select>
            </div>
            
            <div class="filter-group">
                <button type="submit" class="btn-filter">
                    <i class="fas fa-search"></i> Tampilkan
                </button>
            </div>
        </form>
    </div>

    <!-- Statistik Utama -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon total">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="stat-content">
                <h3><?= number_format($total_pelanggaran) ?></h3>
                <p>Total Pelanggaran</p>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon aktif">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-content">
                <h3><?= number_format($total_aktif) ?></h3>
                <p>Pelanggaran Aktif</p>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon selesai">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-content">
                <h3><?= number_format($total_selesai) ?></h3>
                <p>Pelanggaran Selesai</p>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon poin">
                <i class="fas fa-weight-hanging"></i>
            </div>
            <div class="stat-content">
                <h3><?= number_format($total_poin) ?></h3>
                <p>Total Poin</p>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon siswa">
                <i class="fas fa-users"></i>
            </div>
            <div class="stat-content">
                <h3><?= number_format($total_siswa) ?></h3>
                <p>Siswa Terlibat</p>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon rata">
                <i class="fas fa-calculator"></i>
            </div>
            <div class="stat-content">
                <h3><?= $rata_poin ?></h3>
                <p>Rata-rata Poin</p>
            </div>
        </div>
    </div>

    <!-- Charts -->
    <div class="chart-grid">
        <!-- Chart: Pelanggaran per Bulan -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>
                    <i class="fas fa-calendar-alt"></i>
                    Pelanggaran per Bulan <?= $tahun ?>
                </h4>
            </div>
            <div class="chart-container">
                <canvas id="chartBulan"></canvas>
            </div>
        </div>
        
        <!-- Chart: Klasifikasi Pelanggaran -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>
                    <i class="fas fa-chart-pie"></i>
                    Klasifikasi Pelanggaran
                </h4>
            </div>
            <div class="chart-container">
                <canvas id="chartKlasifikasi"></canvas>
            </div>
        </div>
        
        <!-- Chart: Status Pelanggaran -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>
                    <i class="fas fa-circle"></i>
                    Status Pelanggaran
                </h4>
            </div>
            <div class="chart-container">
                <canvas id="chartStatus"></canvas>
            </div>
        </div>
        
        <!-- Chart: Top Jenis Pelanggaran -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>
                    <i class="fas fa-list"></i>
                    Top Jenis Pelanggaran
                </h4>
            </div>
            <div class="chart-container">
                <canvas id="chartJenis"></canvas>
            </div>
        </div>
    </div>

    <!-- Tabel Statistik per Kelas -->
    <div class="table-container">
        <div class="table-header">
            <h4>
                <i class="fas fa-users"></i>
                Statistik per Kelas
            </h4>
        </div>
        
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Kelas</th>
                    <th>Jumlah Pelanggaran</th>
                    <th>Total Poin</th>
                    <th>Rata-rata Poin</th>
                    <th>Keterangan</th>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($statistik_kelas)): $no = 1; ?>
                    <?php foreach ($statistik_kelas as $row): 
                        $rata_kelas = $row['jumlah'] > 0 ? round($row['total_poin'] / $row['jumlah'], 1) : 0;
                        
                        // Tentukan kategori kelas
                        if ($rata_kelas >= 50) {
                            $kategori = '<span class="badge badge-berat">Berat</span>';
                        } elseif ($rata_kelas >= 25) {
                            $kategori = '<span class="badge badge-sedang">Sedang</span>';
                        } else {
                            $kategori = '<span class="badge badge-ringan">Ringan</span>';
                        }
                    ?>
                    <tr>
                        <td><?= $no++ ?></td>
                        <td class="text-left">Kelas <?= htmlspecialchars($row['kelas']) ?></td>
                        <td><?= $row['jumlah'] ?></td>
                        <td><?= $row['total_poin'] ?></td>
                        <td><?= $rata_kelas ?></td>
                        <td><?= $kategori ?></td>
                    </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="6" style="text-align:center; padding:20px;">Tidak ada data</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <!-- Tabel Statistik per Jenis Pelanggaran -->
    <div class="table-container">
        <div class="table-header">
            <h4>
                <i class="fas fa-exclamation-triangle"></i>
                Statistik per Jenis Pelanggaran
            </h4>
        </div>
        
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Jenis Pelanggaran</th>
                    <th>Jumlah</th>
                    <th>Total Poin</th>
                    <th>Rata-rata Poin</th>
                    <th>Klasifikasi</th>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($statistik_jenis)): $no = 1; ?>
                    <?php foreach ($statistik_jenis as $row): 
                        $rata_jenis = round($row['total_poin'] / $row['jumlah'], 1);
                        
                        // Tentukan klasifikasi
                        if ($rata_jenis >= 50) {
                            $klasifikasi = '<span class="badge badge-berat">Berat</span>';
                        } elseif ($rata_jenis >= 25) {
                            $klasifikasi = '<span class="badge badge-sedang">Sedang</span>';
                        } else {
                            $klasifikasi = '<span class="badge badge-ringan">Ringan</span>';
                        }
                    ?>
                    <tr>
                        <td><?= $no++ ?></td>
                        <td class="text-left"><?= htmlspecialchars($row['jenis_pelanggaran']) ?></td>
                        <td><?= $row['jumlah'] ?></td>
                        <td><?= $row['total_poin'] ?></td>
                        <td><?= $rata_jenis ?></td>
                        <td><?= $klasifikasi ?></td>
                    </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="6" style="text-align:center; padding:20px;">Tidak ada data</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <!-- Footer Buttons -->
    <div class="footer-buttons">
        <a href="dashboard_guru_piket.php" class="primary">
            <i class="fas fa-chart-pie"></i> Dashboard
        </a>
        <a href="laporkan_pelanggaran.php" class="success">
            <i class="fas fa-plus-circle"></i> Lapor Pelanggaran
        </a>
        <a href="semua_pelanggaran.php">
            <i class="fas fa-list"></i> Semua Pelanggaran
        </a>
        <a href="rekap_pelanggaran.php">
            <i class="fas fa-file-alt"></i> Rekap Bulanan
        </a>
    </div>

    <script>
        // Chart Pelanggaran per Bulan
        const ctxBulan = document.getElementById('chartBulan').getContext('2d');
        new Chart(ctxBulan, {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
                datasets: [{
                    label: 'Jumlah Pelanggaran',
                    data: [
                        <?php 
                        for ($b = 1; $b <= 12; $b++) {
                            echo $statistik_bulan[$b] . ',';
                        }
                        ?>
                    ],
                    backgroundColor: '#3b82f6',
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });

        // Chart Klasifikasi
        const ctxKlasifikasi = document.getElementById('chartKlasifikasi').getContext('2d');
        new Chart(ctxKlasifikasi, {
            type: 'doughnut',
            data: {
                labels: ['Berat', 'Sedang', 'Ringan'],
                datasets: [{
                    data: [
                        <?= $total_berat ?>,
                        <?= $total_sedang ?>,
                        <?= $total_ringan ?>
                    ],
                    backgroundColor: ['#ef4444', '#f59e0b', '#10b981'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // Chart Status
        const ctxStatus = document.getElementById('chartStatus').getContext('2d');
        new Chart(ctxStatus, {
            type: 'pie',
            data: {
                labels: ['Aktif', 'Selesai'],
                datasets: [{
                    data: [
                        <?= $total_aktif ?>,
                        <?= $total_selesai ?>
                    ],
                    backgroundColor: ['#ef4444', '#10b981'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // Chart Jenis Pelanggaran
        const ctxJenis = document.getElementById('chartJenis').getContext('2d');
        new Chart(ctxJenis, {
            type: 'bar',
            data: {
                labels: [
                    <?php 
                    foreach ($statistik_jenis as $row) {
                        echo "'" . addslashes(substr($row['jenis_pelanggaran'], 0, 15)) . "',";
                    }
                    ?>
                ],
                datasets: [{
                    label: 'Jumlah',
                    data: [
                        <?php 
                        foreach ($statistik_jenis as $row) {
                            echo $row['jumlah'] . ',';
                        }
                        ?>
                    ],
                    backgroundColor: '#f59e0b',
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    </script>
</body>
</html>