@extends('layouts.app')
@section('title', 'Analytics')
@section('breadcrumb', 'Analytics & Reports')

@section('content')
<h4 class="fw-bold mb-4" style="color:#0f3d23;">
    <i class="bi bi-bar-chart-line me-2" style="color:#c9a94d;"></i>MCSS Analytics & Reports
</h4>

<div class="row g-3 mb-4">
    {{-- Enrollment trend --}}
    <div class="col-lg-6">
        <div class="card table-card">
            <div class="card-header bg-white py-3">
                <span class="fw-semibold">Enrollment Trend (by Year)</span>
            </div>
            <div class="card-body"><canvas id="enrollTrend" height="220"></canvas></div>
        </div>
    </div>
    {{-- Transfer trend --}}
    <div class="col-lg-6">
        <div class="card table-card">
            <div class="card-header bg-white py-3">
                <span class="fw-semibold">Transfer Volume ({{ now()->year }})</span>
            </div>
            <div class="card-body"><canvas id="transferTrend" height="220"></canvas></div>
        </div>
    </div>
    {{-- Gender distribution --}}
    <div class="col-lg-4">
        <div class="card table-card">
            <div class="card-header bg-white py-3"><span class="fw-semibold">Gender Distribution</span></div>
            <div class="card-body"><canvas id="genderChart" height="200"></canvas></div>
        </div>
    </div>
    {{-- Top schools --}}
    <div class="col-lg-8">
        <div class="card table-card">
            <div class="card-header bg-white py-3"><span class="fw-semibold">Top Schools by Enrollment</span></div>
            <div class="card-body"><canvas id="topSchoolsChart" height="200"></canvas></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

// Enrollment trend
new Chart(document.getElementById('enrollTrend'), {
    type: 'line',
    data: {
        labels: @json($enrollmentTrend->pluck('year')),
        datasets: [{ label: 'Enrollments', data: @json($enrollmentTrend->pluck('count')),
            borderColor: '#1a6b3c', backgroundColor: 'rgba(26,107,60,.1)', tension: .4, fill: true }]
    },
    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
});

// Transfer trend
new Chart(document.getElementById('transferTrend'), {
    type: 'bar',
    data: {
        labels: @json($transferTrend->pluck('month')->map(fn($m) => $MONTHS[$m-1] ?? $m)),
        datasets: [{ label: 'Transfers', data: @json($transferTrend->pluck('count')),
            backgroundColor: '#c9a94d', borderRadius: 5 }]
    },
    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
});

// Gender
new Chart(document.getElementById('genderChart'), {
    type: 'doughnut',
    data: {
        labels: @json($genderStats->pluck('gender')->map(fn($g) => ucfirst($g ?? 'Unknown'))),
        datasets: [{ data: @json($genderStats->pluck('count')),
            backgroundColor: ['#1565c0','#c62828','#6a1b9a'] }]
    },
    options: { responsive: true }
});

// Top schools
new Chart(document.getElementById('topSchoolsChart'), {
    type: 'bar',
    data: {
        labels: @json($topSchools->pluck('name')->map(fn($n) => strlen($n) > 22 ? substr($n,0,22).'…' : $n)),
        datasets: [{ label: 'Students', data: @json($topSchools->pluck('student_count')),
            backgroundColor: '#1a6b3c', borderRadius: 5 }]
    },
    options: { responsive: true, indexAxis: 'y', plugins: { legend: { display: false } }, scales: { x: { beginAtZero: true } } }
});
</script>
@endpush