@extends('layouts.app')

@section('title', 'Academic Performance | Institution Axis')

@section('sidebar-menu')
    @include('schooladmin.partials.sidebar')
@endsection

@section('breadcrumb')
    <span><a href="{{ route('schooladmin.dashboard') }}">Home</a></span> / 
    <span><a href="{{ route('schooladmin.reports.index') }}">Reports</a></span> / 
    <span class="active-page">Academic Performance</span>
@endsection

@section('content')
<div class="container-fluid p-0">
    <div class="row g-4 mb-4">
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold">Average Score per Class</h5>
                    <button class="btn btn-sm btn-outline-secondary"><i class="fas fa-download"></i></button>
                </div>
                <div class="card-body">
                    <canvas id="classPerformanceChart" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold">Subject Wise Performance</h5>
                    <button class="btn btn-sm btn-outline-secondary"><i class="fas fa-download"></i></button>
                </div>
                <div class="card-body">
                    <canvas id="subjectPerformanceChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-12">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 fw-bold">Top 10 Performing Students (Overall)</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-4">Rank</th>
                                    <th>Student Name</th>
                                    <th>Class</th>
                                    <th>Average Score</th>
                                    <th class="text-end pe-4">Trend</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($topStudents as $index => $grade)
                                <tr>
                                    <td class="ps-4 fw-bold">#{{ $index + 1 }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="https://ui-avatars.com/api/?name={{ urlencode($grade->student->fullName()) }}&background=random" class="avatar-sm rounded-circle me-2" style="width: 32px; height: 32px;">
                                            {{ $grade->student->fullName() }}
                                        </div>
                                    </td>
                                    <td>{{ $grade->student->schoolClass->name }} {{ $grade->student->schoolClass->stream }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="badge {{ $grade->avg_score >= 80 ? 'bg-success' : ($grade->avg_score >= 60 ? 'bg-info' : 'bg-warning') }} me-2">
                                                {{ number_format($grade->avg_score, 1) }}%
                                            </span>
                                        </div>
                                    </td>
                                    <td class="text-end pe-4">
                                        <i class="fas fa-trending-up text-success"></i>
                                    </td>
                                </tr>
                                @endforeach
                                @if($topStudents->isEmpty())
                                <tr>
                                    <td colspan="5" class="text-center py-4">No performance data available yet.</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom-scripts')
<script>
    // Class Performance Chart
    const classCtx = document.getElementById('classPerformanceChart').getContext('2d');
    new Chart(classCtx, {
        type: 'horizontalBar',
        data: {
            labels: @json($classPerformance->map(fn($cp) => $cp->schoolClass->name . ' ' . $cp->schoolClass->stream)),
            datasets: [{
                label: 'Average Score (%)',
                data: @json($classPerformance->pluck('avg_score')),
                backgroundColor: 'rgba(75, 192, 192, 0.6)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    ticks: { beginAtZero: true, max: 100 }
                }]
            }
        }
    });

    // Subject Performance Chart
    const subjectCtx = document.getElementById('subjectPerformanceChart').getContext('2d');
    new Chart(subjectCtx, {
        type: 'polarArea',
        data: {
            labels: @json($subjectPerformance->map(fn($sp) => $sp->subject->name)),
            datasets: [{
                label: 'Average Score (%)',
                data: @json($subjectPerformance->pluck('avg_score')),
                backgroundColor: [
                    'rgba(255, 99, 132, 0.5)',
                    'rgba(54, 162, 235, 0.5)',
                    'rgba(255, 206, 86, 0.5)',
                    'rgba(75, 192, 192, 0.5)',
                    'rgba(153, 102, 255, 0.5)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
</script>
@endsection