@extends('layouts.app')

@section('title', 'Record Marks')

@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">Record Marks</h1>
                <p class="text-xs text-muted-foreground">Enter raw marks for a class, subject and exam</p>
            </div>
            <a href="{{ route('academics.record-marks.csv', ['form' => $form, 'stream' => $stream, 'subject' => $subject, 'exam' => $exam->name ?? 'Mid Term']) }}"
               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.record-marks') }}" class="flex flex-wrap items-end gap-3">
                <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>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Subject</label>
                    <select name="subject" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach ($subjectsForForm as $sub)
                            <option value="{{ $sub }}" @selected($subject === $sub)>{{ $sub }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Exam</label>
                    <select name="exam" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach (\App\Models\Exam::orderBy('id')->get() as $ex)
                            <option value="{{ $ex->name }}" @selected($exam && $exam->id === $ex->id)>{{ $ex->name }} ({{ $ex->out_of }})</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>
                <span class="text-xs text-muted-foreground">Max {{ $exam->out_of ?? '—' }} marks</span>
            </form>
        </div>

        @if ($load && $exam)
            <form method="post" action="{{ route('academics.record-marks.store') }}" class="rounded-xl border border-border bg-card">
                @csrf
                <input type="hidden" name="form" value="{{ $form }}">
                <input type="hidden" name="subject" value="{{ $subject }}">
                <input type="hidden" name="exam_id" value="{{ $exam->id }}">
                <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">Adm No</th>
                                <th class="px-3 py-2 font-medium">Student</th>
                                <th class="px-3 py-2 text-center font-medium">Mark (out of {{ $exam->out_of }})</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($rows as $row)
                                <tr class="border-b last:border-0">
                                    <td class="px-3 py-2 font-mono text-xs">{{ $row['student']->admission_no }}</td>
                                    <td class="px-3 py-2 font-medium">{{ $row['student']->full_name }}</td>
                                    <td class="px-3 py-2 text-center">
                                        <input type="number" name="marks[{{ $row['student']->id }}]" value="{{ $row['mark'] }}"
                                               min="0" max="{{ $exam->out_of }}"
                                               class="h-9 w-24 rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring">
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="flex items-center justify-between border-t border-border p-3">
                    <span class="text-xs text-muted-foreground">{{ $rows->count() }} students · {{ $subject }} · {{ $exam->name }}</span>
                    <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Marks</button>
                </div>
            </form>
        @else
            <div class="rounded-xl border border-border bg-card p-10 text-center text-sm text-muted-foreground">
                Select form, stream, subject and exam then press <strong>Load</strong> to enter marks.
            </div>
        @endif
    </div>
@endsection