@extends('layouts.app')
@section('page_title', 'Grafik Pelanggaran')
@section('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">{{ count($data) }}</span>
            </div>
            @php $jenisGroup = $data->groupBy('jenis_pelanggaran'); @endphp
            @foreach($jenisGroup as $jenis => $items)
            <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">{{ $jenis ?: 'Lainnya' }}</span>
                <span class="badge bg-danger" style="font-size:11px;">{{ count($items) }}</span>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const dataPelanggaran = @json($data);
    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>
@endpush