@extends('layouts.app')

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

@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">Marks Status</h1>
                <p class="text-xs text-muted-foreground">Recording progress and lock state per class and subject</p>
            </div>
            <a href="{{ route('academics.marks-status.csv', ['form' => $form, 'stream' => $stream, 'subject' => $subject]) }}"
               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="grid grid-cols-2 gap-3 sm:grid-cols-4">
            @foreach ([
                ['Open', 'open', 'bg-sky-500/15 text-sky-700'],
                ['Recorded', 'recorded', 'bg-emerald-500/15 text-emerald-700'],
                ['Locked', 'locked', 'bg-slate-500/15 text-slate-600'],
                ['Pending', 'pending', 'bg-amber-500/15 text-amber-700'],
            ] as [$label, $key, $classes])
                <div class="rounded-xl border border-border bg-card p-4">
                    <span class="text-sm font-semibold">{{ $label }}</span>
                    <span class="mt-1 block text-2xl font-semibold tabular-nums {{ $classes }}">{{ $counts[$key] ?? 0 }}</span>
                </div>
            @endforeach
        </div>

        <div class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
            <form method="get" action="{{ route('academics.marks-status') }}" 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">
                        <option value="All forms" @selected($form === 'All forms')>All forms</option>
                        @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">
                        <option value="All streams" @selected($stream === 'All streams')>All streams</option>
                        @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">
                        <option value="">All subjects</option>
                        @foreach ($allSubjects as $sub)
                            <option value="{{ $sub }}" @selected($subject === $sub)>{{ $sub }}</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">Filter</button>
            </form>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <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">Form</th>
                            <th class="px-3 py-2 font-medium">Stream</th>
                            <th class="px-3 py-2 font-medium">Subject</th>
                            <th class="px-3 py-2 font-medium">Status</th>
                            <th class="px-3 py-2 font-medium">Done</th>
                            <th class="px-3 py-2 font-medium">Progress</th>
                            <th class="px-3 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $row)
                            <tr class="border-b last:border-0">
                                <td class="px-3 py-2">{{ $row->form }}</td>
                                <td class="px-3 py-2">{{ $row->stream }}</td>
                                <td class="px-3 py-2 font-medium">{{ $row->subject }}</td>
                                <td class="px-3 py-2">
                                    <span class="rounded-full px-2 py-0.5 text-[10px] font-medium
                                        {{ $row->status === 'Locked' ? 'bg-slate-500/15 text-slate-600' : ($row->status === 'Recorded' ? 'bg-emerald-500/15 text-emerald-700' : ($row->status === 'Pending' ? 'bg-amber-500/15 text-amber-700' : 'bg-sky-500/15 text-sky-700')) }}">
                                        {{ $row->status }}
                                    </span>
                                </td>
                                <td class="px-3 py-2 tabular-nums">{{ $row->done }} / {{ $row->total }}</td>
                                <td class="px-3 py-2">
                                    <div class="h-2 w-32 overflow-hidden rounded-full bg-accent">
                                        <div class="h-full rounded-full bg-emerald-500"
                                             style="width: {{ $row->total ? round($row->done / $row->total * 100) : 0 }}%"></div>
                                    </div>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="flex items-center justify-end">
                                        <form method="post" action="{{ route('academics.marks-status.toggle', $row->id) }}">
                                            @csrf
                                            <button class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">
                                                {{ $row->status === 'Locked' ? 'Unlock' : 'Lock' }}
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="px-3 py-10 text-center text-sm text-muted-foreground">No rows match your filter.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection