@extends('layouts.app')

@section('title', 'Exam Settings')

@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">Exam Settings</h1>
                <p class="text-xs text-muted-foreground">Exams, grade scales and subjects-done matrix</p>
            </div>
        </div>

        @include('partials.flashes')

        <div class="flex flex-wrap gap-1 rounded-xl border border-border bg-card p-1 text-sm">
            @foreach ([['exams', 'Exams'], ['grades', 'Grade Scales'], ['done', 'Subjects Done']] as [$key, $label])
                <a href="{{ route('academics.exam-settings', ['tab' => $key, 'system' => $system]) }}"
                   class="rounded-lg px-3 py-1.5 transition-colors {{ $tab === $key ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-accent' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>

        @if ($tab === 'exams')
            <div class="grid gap-6 lg:grid-cols-3">
                <div class="rounded-xl border border-border bg-card lg:col-span-2">
                    <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">Exam</th>
                                    <th class="px-3 py-2 font-medium">Term</th>
                                    <th class="px-3 py-2 font-medium">Year</th>
                                    <th class="px-3 py-2 font-medium">Out Of</th>
                                    <th class="px-3 py-2 font-medium">Weight (%)</th>
                                    <th class="px-3 py-2 font-medium">Scale</th>
                                    <th class="px-3 py-2 text-right font-medium">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($exams as $exam)
                                    <tr class="border-b last:border-0">
                                        <form method="post" action="{{ route('academics.exams.update', $exam->id) }}" class="contents">
                                            @csrf
                                            @method('PUT')
                                            <td class="px-3 py-2">
                                                <input name="name" value="{{ $exam->name }}" @disabled($exam->locked)
                                                       class="h-9 w-full min-w-36 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                            </td>
                                            <td class="px-3 py-2">
                                                <select name="term" @disabled($exam->locked) class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                                    @foreach ([1, 2, 3] as $t)
                                                        <option value="{{ $t }}" @selected($exam->term === 'Term '.$t)>Term {{ $t }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td class="px-3 py-2">
                                                <input name="year" value="{{ $exam->year }}" @disabled($exam->locked) class="h-9 w-20 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                            </td>
                                            <td class="px-3 py-2">
                                                <input type="number" name="out_of" value="{{ $exam->out_of }}" @disabled($exam->locked) class="h-9 w-20 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                            </td>
                                            <td class="px-3 py-2">
                                                <input type="number" name="percentage" value="{{ $exam->percentage }}" @disabled($exam->locked) class="h-9 w-20 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                            </td>
                                            <td class="px-3 py-2">
                                                <select name="system" @disabled($exam->locked) class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                                    @foreach (\App\Support\Academics::GRADE_SCALES as $s)
                                                        <option value="{{ $s }}" @selected($exam->system === $s)>{{ $s }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td class="px-3 py-2">
                                                <div class="flex items-center justify-end gap-1">
                                                    <button @disabled($exam->locked) class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Update</button>
                                                    <button form="delete-exam-{{ $exam->id }}" @disabled($exam->locked)
                                                            class="rounded-md border border-destructive/40 px-2 py-1 text-xs text-destructive hover:bg-destructive/5">Delete</button>
                                                    @if ($exam->locked)
                                                        <span class="rounded-full bg-slate-500/15 px-2 py-0.5 text-[10px] font-medium text-slate-600">Locked</span>
                                                    @endif
                                                </div>
                                            </td>
                                        </form>
                                        <form id="delete-exam-{{ $exam->id }}" method="post" action="{{ route('academics.exams.destroy', $exam->id) }}" onsubmit="return confirm('Delete {{ $exam->name }} and its marks?')">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </tr>
                                @empty
                                    <tr><td colspan="7" class="px-3 py-10 text-center text-sm text-muted-foreground">No exams yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="rounded-xl border border-border bg-card">
                    <form method="post" action="{{ route('academics.exams.store') }}" class="flex flex-col gap-3 p-4">
                        @csrf
                        <h2 class="text-sm font-semibold">Add Exam</h2>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs text-muted-foreground">Exam name</label>
                            <input name="name" placeholder="e.g. CAT 3" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="flex flex-col gap-1.5">
                                <label class="text-xs text-muted-foreground">Term</label>
                                <select name="term" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                    @foreach ([1, 2, 3] as $t)
                                        <option value="{{ $t }}">Term {{ $t }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="flex flex-col gap-1.5">
                                <label class="text-xs text-muted-foreground">Year</label>
                                <select name="year" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                    @foreach ($years as $y)
                                        <option value="{{ $y }}" @selected($y === '2026')>{{ $y }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="flex flex-col gap-1.5">
                                <label class="text-xs text-muted-foreground">Out of</label>
                                <input type="number" name="out_of" value="100" min="1" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            </div>
                            <div class="flex flex-col gap-1.5">
                                <label class="text-xs text-muted-foreground">Weight (%)</label>
                                <input type="number" name="percentage" value="100" min="1" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            </div>
                        </div>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs text-muted-foreground">Grade scale</label>
                            <select name="system" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                @foreach (\App\Support\Academics::GRADE_SCALES as $s)
                                    <option value="{{ $s }}" @selected($s === 'KJSEA')>{{ $s }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Add Exam</button>
                    </form>
                </div>
            </div>
        @endif

        @if ($tab === 'grades')
            <div class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
                <form method="get" action="{{ route('academics.exam-settings') }}" class="flex items-end gap-3">
                    <input type="hidden" name="tab" value="grades">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">System</label>
                        <select name="system" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            @foreach (\App\Support\Academics::GRADE_SCALES as $s)
                                <option value="{{ $s }}" @selected($system === $s)>{{ $s }}</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>

            @php
                $rows = \App\Models\GradeScale::where('system', $system)->get();
            @endphp
            <div class="rounded-xl border border-border bg-card">
                <div class="flex items-center justify-between border-b border-border p-3">
                    <h2 class="text-sm font-semibold">Grade Scale · {{ $system }}</h2>
                    <span class="text-xs text-muted-foreground">{{ $rows->count() }} grades</span>
                </div>
                <form method="post" action="{{ route('academics.grades.save') }}" class="p-3">
                    @csrf
                    <input type="hidden" name="system" value="{{ $system }}">
                    <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="py-2 pr-3 font-medium">Grade</th>
                                    <th class="py-2 pr-3 font-medium">Min</th>
                                    <th class="py-2 pr-3 font-medium">Max</th>
                                    <th class="py-2 pr-3 font-medium">Points</th>
                                    <th class="py-2 font-medium">Remarks</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($rows as $i => $grade)
                                    <tr class="border-b last:border-0">
                                        <td class="py-2 pr-3">
                                            <input name="rows[{{ $i }}][grade]" value="{{ $grade->grade }}" class="h-9 w-20 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="py-2 pr-3">
                                            <input type="number" name="rows[{{ $i }}][min]" value="{{ $grade->min }}" class="h-9 w-20 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="py-2 pr-3">
                                            <input type="number" name="rows[{{ $i }}][max]" value="{{ $grade->max }}" class="h-9 w-20 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="py-2 pr-3">
                                            <input type="number" name="rows[{{ $i }}][points]" value="{{ $grade->points }}" class="h-9 w-20 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="py-2">
                                            <input name="rows[{{ $i }}][remarks]" value="{{ $grade->remarks }}" class="h-9 w-full min-w-40 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="py-8 text-center text-sm text-muted-foreground">No grades for {{ $system }}. Save below to create the scale.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <button class="mt-3 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Grade Scale</button>
                </form>
            </div>
        @endif

        @if ($tab === 'done')
            <div class="rounded-xl border border-border bg-card">
                <div class="flex items-center justify-between border-b border-border p-3">
                    <h2 class="text-sm font-semibold">Subjects Done Matrix</h2>
                    <span class="text-xs text-muted-foreground">Subjects completed per class stream</span>
                </div>
                <form method="post" action="{{ route('academics.subjects-done.save') }}" class="p-3">
                    @csrf
                    <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="py-2 pr-3 font-medium">Class</th>
                                    @foreach ($subjects as $sub)
                                        <th class="py-2 pr-3 font-medium">{{ str_replace(' & Government', '', $sub) }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($classes as $cls)
                                    <tr class="border-b last:border-0">
                                        <td class="py-2 pr-3 font-medium">{{ $cls }}</td>
                                        @foreach ($subjects as $sub)
                                            <td class="py-2 pr-3 text-center">
                                                <input type="checkbox" name="classes[{{ $cls }}][]" value="{{ $sub }}"
                                                       @checked(in_array($sub, $doneByClass[$cls] ?? [], true))
                                                       class="size-4 accent-emerald-600">
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <button class="mt-3 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Subjects Done</button>
                </form>
            </div>
        @endif
    </div>
@endsection