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

@section('content')
    <div class="mb-6 flex items-center justify-between">
        <p class="text-sm text-gray-500">Overview of assessment setup, scores and published results</p>
        <form method="GET" class="flex items-center gap-2">
            <select name="term_id" onchange="this.form.submit()" class="rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                @foreach ($terms as $t)
                    <option value="{{ $t->id }}" {{ $termId == $t->id ? 'selected' : '' }}>{{ $t->name }}</option>
                @endforeach
            </select>
        </form>
    </div>

    <div class="grid grid-cols-2 gap-4 lg:grid-cols-6">
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Score Entries</p>
            <p class="mt-2 text-2xl font-bold text-gray-900">{{ number_format($totalScores) }}</p>
            <a href="{{ route('school.results.entry', $schoolId) }}" class="mt-1 block text-xs font-medium text-primary-600 hover:text-primary-700">Enter scores →</a>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Assessment Types</p>
            <p class="mt-2 text-2xl font-bold text-gray-900">{{ $totalAssessmentTypes }}</p>
            <a href="{{ route('school.exams.assessment-types', $schoolId) }}" class="mt-1 block text-xs font-medium text-primary-600 hover:text-primary-700">Configure →</a>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Grading Bands</p>
            <p class="mt-2 text-2xl font-bold text-gray-900">{{ $totalGrades }}</p>
            <a href="{{ route('school.exams.grading', $schoolId) }}" class="mt-1 block text-xs font-medium text-primary-600 hover:text-primary-700">Grading scale →</a>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Published</p>
            <p class="mt-2 text-2xl font-bold text-green-600">{{ $publishedSheets }}</p>
            <a href="{{ route('school.results.index', $schoolId) }}" class="mt-1 block text-xs font-medium text-primary-600 hover:text-primary-700">View →</a>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Approved</p>
            <p class="mt-2 text-2xl font-bold text-indigo-600">{{ $approvedSheets }}</p>
            <p class="mt-1 text-xs text-gray-500">{{ $submittedSheets }} submitted</p>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Draft Sheets</p>
            <p class="mt-2 text-2xl font-bold text-yellow-600">{{ $draftSheets }}</p>
            <p class="mt-1 text-xs text-gray-500">{{ number_format($totalStudents) }} total students</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">Classes with Published Results</h2>
                <a href="{{ route('school.results.index', $schoolId) }}" class="text-xs font-medium text-primary-600 hover:text-primary-700">Manage results →</a>
            </div>
            @forelse($classesWithResults as $class)
                <div class="flex items-center justify-between border-b border-gray-100 py-3 last:border-0">
                    <div>
                        <p class="text-sm font-medium text-gray-900">{{ $class->name }}</p>
                        <p class="text-xs text-gray-500">{{ $class->student_count }} student(s)</p>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-xs text-gray-500">{{ $class->published_count }}/{{ $class->student_count }} published</span>
                        <div class="h-1.5 w-24 rounded-full bg-gray-100">
                            <div class="h-1.5 rounded-full {{ $class->student_count > 0 ? 'bg-green-500' : 'bg-gray-200' }}" style="width: {{ $class->student_count > 0 ? min(100, ($class->published_count / $class->student_count) * 100) : 0 }}%"></div>
                        </div>
                    </div>
                </div>
            @empty
                <p class="py-8 text-center text-sm text-gray-500">No classes yet.</p>
            @endforelse
        </div>

        <div class="space-y-6">
            <a href="{{ route('school.results.upload', $schoolId) }}" class="block 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">📄 Manual Result Upload</h3>
                <p class="mt-1 text-xs text-gray-500">Download a per-student template, complete it in Excel, upload and import. Supports validation and preview before saving.</p>
            </a>
            <a href="{{ route('school.results.entry', $schoolId) }}" class="block 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">✏️ Score Entry</h3>
                <p class="mt-1 text-xs text-gray-500">Enter individual assessment scores per class, subject and term.</p>
            </a>
            <a href="{{ route('school.behaviour.index', $schoolId) }}" class="block 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">🧑‍🏫 Behaviour Ratings</h3>
                <p class="mt-1 text-xs text-gray-500">Affective and psychomotor ratings shown on report cards.</p>
            </a>
        </div>
    </div>
@endsection