@extends('layouts.app')

@section('title', 'Class List')

@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">Class List</h1>
                <p class="text-xs text-muted-foreground">Per-class printable roll with stream statistics</p>
            </div>
            <a href="{{ route('students.class-list.csv', ['class' => $className]) }}" class="rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium hover:bg-accent">Export CSV</a>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <div class="flex flex-wrap items-end gap-3 p-3">
                <form method="get" action="{{ route('students.class-list') }}" class="flex flex-wrap items-end gap-3">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Class</label>
                        <select name="class" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            @foreach (\App\Models\Student::FORMS as $f)
                                <option value="{{ $f }}" @selected($className === $f)>{{ $f }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Filter</label>
                        <select name="stat" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            <option value="">All students</option>
                            @foreach (['Boarding', 'Day', 'Boys', 'Girls'] as $s)
                                <option value="{{ $s }}" @selected($statFilter === $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>
                <a href="{{ route('students.class-list.print', ['class' => $className]) }}"
                   onclick="window.open(this.href,'print','width=1000,height=800');return false;"
                   class="ml-auto h-9 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium hover:bg-accent">Print List</a>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($stats as $stream => $s)
                <div class="rounded-xl border border-border bg-card p-4">
                    <div class="flex items-baseline justify-between">
                        <span class="text-sm font-semibold">{{ $className }} {{ $stream }}</span>
                        <span class="text-xl font-semibold tabular-nums">{{ $s['total'] }}</span>
                    </div>
                    <p class="mt-2 text-xs text-muted-foreground">
                        <span class="text-sky-600">{{ $s['boys'] }} boys</span> ·
                        <span class="text-pink-600">{{ $s['girls'] }} girls</span> ·
                        <span class="text-emerald-600">{{ $s['boarding'] }} boarding</span> ·
                        <span class="text-amber-600">{{ $s['day'] }} day</span>
                    </p>
                </div>
            @endforeach
        </div>

        <div class="rounded-xl border border-border bg-card">
            <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 font-medium">Gender</th>
                        <th class="px-3 py-2 font-medium">Class</th>
                        <th class="px-3 py-2 font-medium">Category</th>
                        <th class="px-3 py-2 font-medium">UPI</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($students as $s)
                        <tr class="border-b last:border-0">
                            <td class="px-3 py-2 font-mono text-xs">{{ $s->admission_no }}</td>
                            <td class="px-3 py-2">
                                <a href="{{ route('students.show', $s) }}" class="font-medium hover:underline">{{ $s->full_name }}</a>
                            </td>
                            <td class="px-3 py-2">{{ $s->gender }}</td>
                            <td class="px-3 py-2">{{ $s->class_name }} {{ $s->stream }}</td>
                            <td class="px-3 py-2">{{ $s->category }}</td>
                            <td class="px-3 py-2 font-mono text-xs">{{ $s->upi }}</td>
                        </tr>
                    @endforeach
                    @if ($students->isEmpty())
                        <tr><td colspan="6" class="px-3 py-10 text-center text-sm text-muted-foreground">No students in this class.</td></tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
@endsection