@extends('layouts.portal')

@section('title', 'Results')

@section('page-header')
    <div class="mb-8">
        <h1 class="font-display text-2xl font-extrabold text-slate-900 sm:text-3xl">Results</h1>
        <p class="mt-1 text-sm text-slate-500">Published term results for {{ $child->full_name }}.</p>
    </div>
@endsection

@section('content')
    @if ($sheets->isEmpty())
        <x-portal.empty icon="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
                        message="No results have been published yet. You will see them here as soon as the school releases them."/>
    @else
        <div class="grid gap-4 md:grid-cols-2">
            @foreach ($sheets as $sheet)
                <div class="group relative overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm shadow-slate-900/[0.03] transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-900/5">
                    <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-accent-500 to-sky-400"></div>
                    <div class="flex items-center gap-5 p-6">
                        <div class="flex h-16 w-16 shrink-0 flex-col items-center justify-center rounded-2xl bg-gradient-to-br from-accent-500 to-accent-700 text-white shadow-lg shadow-accent-500/30">
                            <span class="font-display text-xl font-extrabold">{{ $sheet->average }}</span>
                            <span class="-mt-0.5 text-[10px] font-semibold uppercase tracking-wider">avg %</span>
                        </div>
                        <div class="min-w-0 flex-1">
                            <h2 class="font-display text-base font-bold text-slate-900">{{ $sheet->term?->name }}</h2>
                            <p class="text-xs font-medium text-slate-400">{{ $sheet->term?->academicYear?->name }} · {{ $sheet->classroom?->name }}</p>
                            <div class="mt-2 flex flex-wrap items-center gap-2">
                                <x-portal.badge tone="accent">Grade {{ $sheet->grade ?? '—' }}</x-portal.badge>
                                <x-portal.badge tone="sky">{{ ordinal($sheet->position ?? 0) }} of {{ $sheet->students_in_class ?? '—' }}</x-portal.badge>
                                <x-portal.badge tone="slate">Score {{ $sheet->total_score ?? '—' }}</x-portal.badge>
                            </div>
                        </div>
                    </div>
                    <a href="{{ route('portal.report-card', array_filter([$school->id, $sheet->id, $children->count() > 1 ? $child->id : null])) }}"
                       class="flex items-center justify-between border-t border-slate-50 bg-slate-50/60 px-6 py-3 text-sm font-bold text-accent-700 transition group-hover:bg-accent-50">
                        View full report card
                        <svg class="h-4 w-4 transition group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
                    </a>
                </div>
            @endforeach
        </div>
    @endif
@endsection