@extends('layouts.app')

@section('title', 'SBA / KNEC CBA')

@section('content')
    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">SBA / KNEC CBA</h1>
                <p class="text-xs text-muted-foreground">School-Based Assessment scoring with KNEC competency levels</p>
            </div>
            <a href="{{ route('academics.sba-knec-cba.csv', ['form' => $form, 'stream' => $stream, 'area' => $area, 'level' => 1]) }}"
               class="rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium hover:bg-accent">Export CSV</a>
        </div>

        @include('partials.flashes')

        <div class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
            <form method="get" action="{{ route('academics.sba-knec-cba') }}" class="flex flex-wrap items-end gap-3">
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Learning Area</label>
                    <select name="area" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach (\App\Support\Academics::LEARNING_AREAS as $a)
                            <option value="{{ $a }}" @selected($area === $a)>{{ $a }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Form</label>
                    <select name="form" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach (\App\Support\Academics::FORMS as $f)
                            <option value="{{ $f }}" @selected($form === $f)>{{ $f }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Stream</label>
                    <select name="stream" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach (\App\Support\Academics::STREAMS as $st)
                            <option value="{{ $st }}" @selected($stream === $st)>{{ $st }}</option>
                        @endforeach
                    </select>
                </div>
                <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Load</button>
            </form>
        </div>

        <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
            @foreach (\App\Support\Academics::SBA_LEVELS as $level)
                <div class="rounded-xl border border-border bg-card p-4">
                    <span class="rounded px-1.5 py-0.5 text-xs font-bold text-primary">{{ $level['code'] }}</span>
                    <span class="block text-sm text-muted-foreground">{{ $level['label'] }}</span>
                </div>
            @endforeach
        </div>

        @if ($load && $assessments->isNotEmpty())
            <form method="post" action="{{ route('academics.sba-knec-cba.store') }}" class="rounded-xl border border-border bg-card">
                @csrf
                <div class="flex items-center justify-between border-b border-border p-3">
                    <h2 class="text-sm font-semibold">Score Entry · {{ $area }} · {{ $form }} {{ $stream }}</h2>
                    <span class="text-xs text-muted-foreground">{{ count($rows) }} students</span>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                                <th class="px-3 py-2 font-medium">Student</th>
                                @foreach ($assessments as $a)
                                    <th class="px-3 py-2 text-center font-medium" title="{{ $a->title }}">{{ $a->type }} ({{ $a->out_of }})</th>
                                @endforeach
                                <th class="px-3 py-2 text-center font-medium">Level</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($rows as $row)
                                @php $pct = array_sum($row['scores']) / (count($row['scores']) * 100) * 100; @endphp
                                <tr class="border-b last:border-0">
                                    <td class="px-3 py-2">
                                        <span class="block font-medium">{{ $row['student']->full_name }}</span>
                                        <span class="font-mono text-[11px] text-muted-foreground">{{ $row['student']->admission_no }}</span>
                                    </td>
                                    @foreach ($assessments as $a)
                                        <td class="px-3 py-2 text-center">
                                            <input type="number" name="scores[{{ $a->id }}][{{ $row['student']->id }}]" value="{{ $row['scores'][$a->id] }}"
                                                   min="0" max="{{ $a->out_of }}"
                                                   class="h-9 w-20 rounded-lg border border-input bg-transparent px-3 text-center text-sm tabular-nums outline-none focus-visible:border-ring">
                                        </td>
                                    @endforeach
                                    <td class="px-3 py-2 text-center">
                                        <span class="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary">{{ \App\Support\Academics::sbaLevelFor($pct)['code'] }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="flex items-center justify-between border-t border-border p-3">
                    <form method="post" action="{{ route('academics.sba-knec-cba.clear') }}" onsubmit="return confirm('Clear all entered scores for this class?')">
                        @csrf
                        <input type="hidden" name="form" value="{{ $form }}">
                        <input type="hidden" name="stream" value="{{ $stream }}">
                        <input type="hidden" name="assessment_id" value="{{ $assessments->first()->id }}">
                        <button class="rounded-lg border border-destructive/40 px-3 py-2 text-sm text-destructive hover:bg-destructive/5">Clear Scores</button>
                    </form>
                    <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Scores</button>
                </div>
            </form>
        @else
            <div class="grid gap-6 lg:grid-cols-3">
                @forelse ($assessments as $a)
                    <div class="rounded-xl border border-border bg-card p-4">
                        <div class="flex items-center justify-between">
                            <span class="rounded bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary">{{ $a->type }}</span>
                            <span class="text-xs text-muted-foreground">out of {{ $a->out_of }}</span>
                        </div>
                        <h2 class="mt-2 text-sm font-semibold">{{ $a->title }}</h2>
                        <p class="mt-1 text-xs text-muted-foreground">{{ $a->learning_area }}</p>
                        <p class="mt-3 text-xs text-muted-foreground">Press <strong>Load</strong> above to record or view scores for {{ $form }} {{ $stream }}.</p>
                    </div>
                @empty
                    <div class="rounded-xl border border-border bg-card p-10 text-center text-sm text-muted-foreground">
                        No assessments found for {{ $area }}. Add assessments from the seed data or load a different learning area.
                    </div>
                @endforelse
            </div>
        @endif
    </div>
@endsection