<?php $__env->startSection('page_title', 'Grafik Pelanggaran'); ?>
<?php $__env->startSection('content'); ?>
<div class="row">
    <div class="col-md-8 col-lg-6">
        <div class="card-flat">
            <h6 class="fw-bold mb-3" style="font-size:14px;"><i class="bi bi-bar-chart me-2"></i>Grafik Pelanggaran Siswa</h6>
            <canvas id="chartPelanggaran"></canvas>
        </div>
    </div>
    <div class="col-md-4 col-lg-6">
        <div class="card-flat">
            <h6 class="fw-bold mb-3" style="font-size:14px;">Ringkasan</h6>
            <div class="d-flex justify-content-between align-items-center py-2" style="border-bottom:1px solid #f1f5f9; font-size:13px;">
                <span class="text-muted">Total Pelanggaran</span>
                <span class="fw-bold"><?php echo e(count($data)); ?></span>
            </div>
            <?php $jenisGroup = $data->groupBy('jenis_pelanggaran'); ?>
            <?php $__currentLoopData = $jenisGroup; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $jenis => $items): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="d-flex justify-content-between align-items-center py-2" style="border-bottom:1px solid #f1f5f9; font-size:13px;">
                <span class="text-muted"><?php echo e($jenis ?: 'Lainnya'); ?></span>
                <span class="badge bg-danger" style="font-size:11px;"><?php echo e(count($items)); ?></span>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const dataPelanggaran = <?php echo json_encode($data, 15, 512) ?>;
    const jenisCount = {};
    dataPelanggaran.forEach(item => {
        const jenis = item.jenis_pelanggaran || 'Lainnya';
        jenisCount[jenis] = (jenisCount[jenis] || 0) + 1;
    });
    const labels = Object.keys(jenisCount);
    const values = Object.values(jenisCount);
    const colors = ['#ef4444','#f97316','#f59e0b','#10b981','#0284c7','#6366f1','#8b5cf6','#ec4899'];

    new Chart(document.getElementById('chartPelanggaran'), {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{ label: 'Jumlah', data: values, backgroundColor: colors.slice(0, labels.length), borderRadius: 6 }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            aspectRatio: 1.8,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
        }
    });
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\Samsul Arifin\Downloads\absensismkn1prajekan\resources\views/admin/pages/grafik-pelanggaran.blade.php ENDPATH**/ ?>