@extends('admin.layout')

@section('content')

<div class="container-fluid">

    <div class="mb-4">
        <h4 class="fw-bold">Grafik Pendaftaran per Jurusan</h4>
        <span class="text-muted">Menampilkan jumlah pendaftaran murid baru berdasarkan jurusan</span>
    </div>

    <!-- Grafik Balok -->
    <div class="card shadow-sm border-0">
        <div class="card-body">
            <canvas id="grafikPendaftaranAdmin"></canvas>
        </div>
    </div>

    <!-- Card Total per Jurusan -->
    <div class="row g-3 mt-4">
        @foreach($pendaftaranPerJurusan as $row)
        <div class="col-md-3 col-6">
            <div class="card shadow-sm border-0 text-center h-100">
                <div class="card-body">
                    <h6 class="text-muted">{{ $row->jurusan }}</h6>
                    <h3 class="fw-bold">{{ $row->total }}</h3>
                    <small class="text-muted">Pendaftaran</small>
                </div>
            </div>
        </div>
        @endforeach
    </div>

</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const ctx = document.getElementById('grafikPendaftaranAdmin');

    const jurusan = @json($pendaftaranPerJurusan->pluck('jurusan'));
    const total = @json($pendaftaranPerJurusan->pluck('total'));

    const warna = [
        '#06b81b', '#1b34f8', '#dc3545',
        '#ffc107', '#6f42c1', '#20c997', '#fd7e14'
    ];

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: jurusan,
            datasets: [{
                label: 'Jumlah Pendaftaran',
                data: total,
                backgroundColor: warna.slice(0, jurusan.length),
                barPercentage: 0.5,
                categoryPercentage: 0.6,
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 }
                }
            },
            plugins: {
                legend: { display: false }
            }
        }
    });
</script>
@endsection
