@extends('layouts.school')

@section('title', 'Academic Performance')
@section('header', 'Academic Performance')

@section('content')
    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
        <form method="GET" action="{{ route('school.reports.academic-performance', request()->route('schoolId')) }}" class="flex flex-col gap-4 sm:flex-row sm:items-end">
            <div class="flex-1">
                <label class="block text-sm font-medium text-gray-700">Class *</label>
                <select name="class_id" required onchange="this.form.submit()" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <option value="">Select class...</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ $classId == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex-1">
                <label class="block text-sm font-medium text-gray-700">Term *</label>
                <select name="term_id" required onchange="this.form.submit()" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @foreach($terms as $term)
                        <option value="{{ $term->id }}" {{ $termId == $term->id ? 'selected' : '' }}>{{ $term->name }}{{ $term->is_current ? ' (current)' : '' }}</option>
                    @endforeach
                </select>
            </div>
            <p class="text-xs text-gray-400">Pass mark: {{ $passMark }}% (configurable via settings key <span class="font-mono">results.pass_mark</span>)</p>
        </form>
    </div>

    @if($analytics)
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                <p class="text-sm text-gray-500">Students Graded</p>
                <p class="text-3xl font-display font-bold text-gray-900 mt-1">{{ $analytics['students_graded'] }}</p>
            </div>
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                <p class="text-sm text-gray-500">Class Average</p>
                <p class="text-3xl font-display font-bold text-gray-900 mt-1">{{ $analytics['class_average'] !== null ? $analytics['class_average'].'%' : '-' }}</p>
            </div>
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                <p class="text-sm text-gray-500">Pass Rate (avg &ge; {{ $passMark }}%)</p>
                <p class="text-3xl font-display font-bold {{ ($analytics['pass_rate'] ?? 0) >= 50 ? 'text-green-600' : 'text-red-600' }} mt-1">{{ $analytics['pass_rate'] !== null ? $analytics['pass_rate'].'%' : '-' }}</p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
                <div class="border-b border-gray-200 px-6 py-4"><h3 class="font-display font-semibold text-gray-900">Top 5 Students</h3></div>
                <table class="min-w-full divide-y divide-gray-200">
                    <tbody class="divide-y divide-gray-100">
                        @forelse($analytics['top_students'] as $row)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-3 w-12 text-sm font-bold text-primary-600">{{ $row['position'] }}</td>
                                <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ $row['student']->full_name }}</td>
                                <td class="px-6 py-3 text-right text-sm font-semibold">{{ $row['average'] }}%</td>
                                <td class="px-6 py-3 text-right text-sm text-gray-500">{{ $row['grade'] }}</td>
                            </tr>
                        @empty
                            <tr><td class="px-6 py-8 text-center text-sm text-gray-500">No graded students.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
                <div class="border-b border-gray-200 px-6 py-4"><h3 class="font-display font-semibold text-gray-900">Needs Attention (below pass mark)</h3></div>
                <table class="min-w-full divide-y divide-gray-200">
                    <tbody class="divide-y divide-gray-100">
                        @forelse($analytics['at_risk'] as $row)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ $row['student']->full_name }}</td>
                                <td class="px-6 py-3 text-right text-sm font-semibold text-red-600">{{ $row['average'] }}%</td>
                                <td class="px-6 py-3 text-right text-sm text-gray-500">{{ $row['grade'] }}</td>
                            </tr>
                        @empty
                            <tr><td class="px-6 py-8 text-center text-sm text-green-600">All students are above the pass mark.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4"><h3 class="font-display font-semibold text-gray-900">Subject Performance</h3></div>
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Subject</th>
                        <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Average</th>
                        <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Highest</th>
                        <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Lowest</th>
                        <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Pass Rate</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($analytics['subjects'] as $row)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ $row['subject']->name }}</td>
                            <td class="px-6 py-3 text-center text-sm text-gray-600">{{ $row['average'] !== null ? $row['average'].'%' : '-' }}</td>
                            <td class="px-6 py-3 text-center text-sm text-green-600">{{ $row['highest'] ?? '-' }}</td>
                            <td class="px-6 py-3 text-center text-sm text-red-600">{{ $row['lowest'] ?? '-' }}</td>
                            <td class="px-6 py-3 text-center text-sm font-medium {{ ($row['pass_rate'] ?? 100) >= 50 ? 'text-gray-900' : 'text-red-600' }}">{{ $row['pass_rate'] !== null ? $row['pass_rate'].'%' : '-' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">No subjects configured for this class.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @endif
@endsection