@extends('layouts.portal')

@php
    $ctxStudent = $ctx['student'];
    $ctxTerm = $ctx['term'];
@endphp

@section('title', 'Report Card - ' . ($ctxTerm->name ?? ''))

@section('page-header')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
        <div>
            <a href="{{ $sectionUrl('results') }}" class="text-sm font-medium text-accent-600 hover:text-accent-700">&larr; All results</a>
            <h1 class="mt-1 font-display text-2xl font-extrabold text-slate-900 sm:text-3xl">{{ $ctxTerm->name }} Report Card</h1>
            <p class="mt-1 text-sm text-slate-500">{{ $ctxTerm->academicYear?->name }} &middot; {{ $ctx['student']?->class?->name ?? ($ctx['sheet']->classroom?->name ?? '') }}</p>
        </div>
        <button onclick="window.print()" class="inline-flex items-center gap-2 rounded-full bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-slate-900/20 transition hover:bg-slate-700">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5z"/></svg>
            Print
        </button>
    </div>
@endsection

@section('content')
    {{-- Shared professional template styles (scoped to #report-card) --}}
    @include('school.results.report-styles')

    <div class="overflow-x-auto rounded-2xl bg-slate-100 p-4 sm:p-6">
        @include('school.results.report-partial', ['ctx' => $ctx, 'pdf' => false])
    </div>

    <p class="mt-4 text-center text-xs text-slate-300">
        Verify anytime at {{ url('/') }}/verify-result &middot; Code: <span class="font-mono font-semibold text-slate-400">{{ $ctx['sheet']?->verification_code }}</span>
    </p>
@endsection