@extends('layouts.school')
@section('title', 'Exam Dashboard')
@section('header', 'Exam Management')

@section('content')
    <div class="mb-6">
        <p class="text-sm text-gray-500">Overview of examinations across your school</p>
    </div>

    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <div class="flex items-center justify-between">
                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Total Exams</p>
                <span class="text-lg">📝</span>
            </div>
            <p class="mt-2 text-2xl font-bold text-gray-900">{{ $totalExams }}</p>
            <p class="mt-1 text-xs text-gray-500">{{ $totalClasses }} active classes</p>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <div class="flex items-center justify-between">
                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Published</p>
                <span class="text-lg">✅</span>
            </div>
            <p class="mt-2 text-2xl font-bold text-green-600">{{ $publishedExams }}</p>
            <a href="{{ route('school.exams.index', $schoolId) }}" class="mt-1 block text-xs font-medium text-primary-600 hover:text-primary-700">View exams →</a>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <div class="flex items-center justify-between">
                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Drafts</p>
                <span class="text-lg">📄</span>
            </div>
            <p class="mt-2 text-2xl font-bold text-yellow-600">{{ $draftExams }}</p>
            <a href="{{ route('school.exams.create', $schoolId) }}" class="mt-1 block text-xs font-medium text-primary-600 hover:text-primary-700">Create exam →</a>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <div class="flex items-center justify-between">
                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Results Entered</p>
                <span class="text-lg">🎯</span>
            </div>
            <p class="mt-2 text-2xl font-bold text-gray-900">{{ number_format($totalResults) }}</p>
            <p class="mt-1 text-xs text-gray-500">{{ $currentTerm?->name ? 'Current term: ' . $currentTerm->name : 'No current term' }}</p>
        </div>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2 rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
            <div class="mb-4 flex items-center justify-between">
                <h2 class="text-sm font-semibold text-gray-900">Recent Examinations</h2>
                <a href="{{ route('school.exams.index', $schoolId) }}" class="text-xs font-medium text-primary-600 hover:text-primary-700">View all →</a>
            </div>
            @forelse($recentExams as $exam)
                <div class="flex items-center justify-between border-b border-gray-100 py-3 last:border-0">
                    <div>
                        <a href="{{ route('school.exams.show', [$schoolId, $exam->id]) }}" class="text-sm font-medium text-gray-900 hover:text-primary-600">{{ $exam->name }}</a>
                        <p class="text-xs text-gray-500">{{ $exam->classroom?->name ?? '—' }} · {{ $exam->term?->name ?? '—' }} · {{ ucfirst($exam->type) }} · {{ $exam->total_marks }} marks</p>
                    </div>
                    <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $exam->is_published ? 'bg-green-50 text-green-700' : 'bg-yellow-50 text-yellow-700' }}">
                        {{ $exam->is_published ? 'Published' : 'Draft' }}
                    </span>
                </div>
            @empty
                <p class="py-8 text-center text-sm text-gray-500">No examinations yet. <a href="{{ route('school.exams.create', $schoolId) }}" class="font-medium text-primary-600 hover:text-primary-700">Create your first exam</a></p>
            @endforelse
        </div>

        <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
            <h2 class="mb-4 text-sm font-semibold text-gray-900">Exams by Type</h2>
            @php
                $types = ['exam' => 'Exams', 'test' => 'Tests', 'assignment' => 'Assignments'];
                $colors = ['exam' => 'bg-blue-50 text-blue-700', 'test' => 'bg-purple-50 text-purple-700', 'assignment' => 'bg-orange-50 text-orange-700'];
                $counts = [];
                foreach ($types as $key => $label) {
                    $counts[$key] = $examsByType->get($key, 0);
                }
                $max = max(1, (int) $examsByType->max());
            @endphp
            <div class="space-y-4">
                @foreach ($types as $key => $label)
                    <div>
                        <div class="mb-1 flex items-center justify-between">
                            <span class="text-sm text-gray-700">{{ $label }}</span>
                            <span class="text-sm font-semibold text-gray-900">{{ $counts[$key] }}</span>
                        </div>
                        <div class="h-2 rounded-full bg-gray-100">
                            <div class="h-2 rounded-full bg-primary-500" style="width: {{ $counts[$key] > 0 ? ($counts[$key] / $max) * 100 : 0 }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-6 border-t border-gray-100 pt-4">
                <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500">Grading</h3>
                <p class="text-sm text-gray-700">Grading bands: <strong class="font-semibold">{{ $totalGrades }}</strong></p>
                <a href="{{ route('school.exams.grading', $schoolId) }}" class="mt-2 inline-block text-xs font-medium text-primary-600 hover:text-primary-700">Manage grading scale →</a>
            </div>
        </div>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        <a href="{{ route('school.exams.timetable.index', $schoolId) }}" class="group rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 transition hover:shadow-md">
            <h3 class="text-sm font-semibold text-gray-900 group-hover:text-primary-600">🗓️ Examination Schedule</h3>
            <p class="mt-1 text-xs text-gray-500">Plan exam dates, times, rooms and supervisors for each subject.</p>
        </a>
        <a href="{{ route('school.exams.candidates.index', $schoolId) }}" class="group rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 transition hover:shadow-md">
            <h3 class="text-sm font-semibold text-gray-900 group-hover:text-primary-600">👥 Examination Candidates</h3>
            <p class="mt-1 text-xs text-gray-500">Select which students are sitting for each examination.</p>
        </a>
        <a href="{{ route('school.exams.attendance.index', $schoolId) }}" class="group rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 transition hover:shadow-md">
            <h3 class="text-sm font-semibold text-gray-900 group-hover:text-primary-600">📋 Examination Attendance</h3>
            <p class="mt-1 text-xs text-gray-500">Mark student attendance per exam per subject.</p>
        </a>
    </div>
@endsection