@extends('layouts.app')
@section('page_title', 'Grafik Prestasi')
@section('content')
<div class="row">
    <div class="col-md-6 col-lg-5">
        <div class="card-flat">
            <h6 class="fw-bold mb-3" style="font-size:14px;"><i class="bi bi-pie-chart me-2"></i>Grafik Prestasi Siswa</h6>
            <canvas id="chartPrestasi"></canvas>
        </div>
    </div>
    <div class="col-md-6 col-lg-7">
        <div class="card-flat">
            <h6 class="fw-bold mb-3" style="font-size:14px;">Ringkasan Prestasi</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 Prestasi</span>
                <span class="fw-bold">{{ count($data) }}</span>
            </div>
            @php $tingkatGroup = $data->groupBy('tingkat'); @endphp
            @foreach($tingkatGroup as $tingkat => $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">{{ $tingkat ?: 'Lainnya' }}</span>
                <span class="badge bg-primary" style="font-size:11px;">{{ count($items) }}</span>
            </div>
            @endforeach
            @php $juaraGroup = $data->groupBy('juara'); @endphp
            @foreach($juaraGroup as $juara => $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">Juara {{ $juara ?: '-' }}</span>
                <span class="badge bg-warning text-dark" 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 dataPrestasi = @json($data);
    const tingkatCount = {};
    dataPrestasi.forEach(item => {
        const tingkat = item.tingkat || 'Lainnya';
        tingkatCount[tingkat] = (tingkatCount[tingkat] || 0) + 1;
    });
    const labels = Object.keys(tingkatCount);
    const values = Object.values(tingkatCount);
    const colors = ['#0284c7','#10b981','#f59e0b','#ef4444','#6366f1','#8b5cf6','#ec4899'];

    new Chart(document.getElementById('chartPrestasi'), {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{ data: values, backgroundColor: colors.slice(0, labels.length), borderWidth: 2, borderColor: '#fff' }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            aspectRatio: 1.4,
            plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } }
        }
    });
</script>
@endpush