@extends('layouts.app')

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

@php
    $pageQuery = array_filter($filters, fn ($v) => $v !== '');
    $makeLink = fn ($key) => route('students.index', $pageQuery + ['sort' => $key, 'dir' => ($sort === $key && $dir === 'asc') ? 'desc' : 'asc']);
    $arrow = fn ($key) => $sort === $key ? ($dir === 'asc' ? '↑' : '↓') : '↕';
@endphp

@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">Students List</h1>
                <p class="text-xs text-muted-foreground">Active student roster</p>
            </div>
            <a href="{{ route('students.create') }}" class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">Admit Student</a>
        </div>

        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ([
                ['label' => 'Active students', 'value' => $totals['active'], 'accent' => 'text-primary'],
                ['label' => 'Boarding', 'value' => $totals['boarding'], 'accent' => 'text-emerald-600'],
                ['label' => 'Day scholars', 'value' => $totals['day'], 'accent' => 'text-sky-600'],
                ['label' => 'Per class (avg)', 'value' => (int) round($totals['active'] / count(\App\Models\Student::FORMS)), 'accent' => 'text-amber-600'],
            ] as $c)
                <div class="rounded-xl border border-border bg-card">
                    <div class="flex items-center gap-3 p-4">
                        <span class="flex size-9 items-center justify-center rounded-lg bg-foreground/5 text-sm font-semibold {{ $c['accent'] }}">+</span>
                        <div class="flex flex-col leading-tight">
                            <span class="text-xs text-muted-foreground">{{ $c['label'] }}</span>
                            <span class="text-xl font-semibold tabular-nums">{{ $c['value'] }}</span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="rounded-xl border border-border bg-card">
            <div class="flex flex-wrap gap-x-8 gap-y-2 p-3">
                @foreach ($byClass as $form => $c)
                    <div class="flex items-baseline gap-2">
                        <span class="text-sm font-medium">{{ $form }}</span>
                        <span class="text-sm tabular-nums text-muted-foreground">{{ $c['total'] }} total</span>
                        <span class="text-xs text-muted-foreground">{{ $c['boarding'] }} boarding · {{ $c['day'] }} day</span>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <div class="flex flex-col gap-3 p-3">
                <form method="get" action="{{ route('students.index') }}" class="flex flex-wrap items-center gap-2">
                    <div class="relative min-w-52 flex-1">
                        <svg class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                        <input name="q" value="{{ $filters['q'] }}" placeholder="Search name, admission no, NEMIS…"
                               class="h-8 w-full rounded-lg border border-input bg-transparent pl-8 pr-3 text-xs outline-none focus-visible:border-ring">
                    </div>
                    <select name="class" class="h-8 rounded-lg border border-input bg-transparent px-2 text-xs outline-none focus-visible:border-ring">
                        <option value="">All Classes</option>
                        @foreach (\App\Models\Student::FORMS as $f)
                            <option value="{{ $f }}" @selected($filters['class'] === $f)>{{ $f }}</option>
                        @endforeach
                    </select>
                    <select name="gender" class="h-8 rounded-lg border border-input bg-transparent px-2 text-xs outline-none focus-visible:border-ring">
                        <option value="">All Gender</option>
                        <option value="Male" @selected($filters['gender'] === 'Male')>Male</option>
                        <option value="Female" @selected($filters['gender'] === 'Female')>Female</option>
                    </select>
                    <select name="category" class="h-8 rounded-lg border border-input bg-transparent px-2 text-xs outline-none focus-visible:border-ring">
                        <option value="">All Categories</option>
                        <option value="Boarding" @selected($filters['category'] === 'Boarding')>Boarding</option>
                        <option value="Day" @selected($filters['category'] === 'Day')>Day</option>
                    </select>
                    @if ($pageQuery)
                        <button type="button" onclick="window.location='{{ route('students.index') }}'"
                                class="rounded-lg border border-border px-3 py-1.5 text-xs">Clear</button>
                    @endif
                    <button type="submit" class="rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground">Filter</button>
                    <span class="mx-1 hidden h-8 w-px bg-border sm:block"></span>
                    <a href="{{ route('students.export', $pageQuery) }}" class="rounded-lg border border-border px-3 py-1.5 text-xs">CSV</a>
                    <a href="{{ route('students.kemis', $pageQuery) }}" class="rounded-lg border border-border px-3 py-1.5 text-xs">KEMIS Export</a>
                </form>

                <form method="post" action="{{ route('students.bulk-transfer') }}" id="bulkForm">
                    @csrf
                    <div class="overflow-x-auto">
                        <table class="w-full table-fixed border-collapse text-sm">
                            <thead>
                                <tr class="border-b border-border text-left text-xs text-muted-foreground">
                                    <th class="w-9 py-2 pr-2">
                                        <input type="checkbox" id="selectAll" class="accent-primary">
                                    </th>
                                    <th class="w-24 py-2 pr-3">
                                        <a href="{{ $makeLink('admission_no') }}" class="inline-flex items-center gap-1 font-medium uppercase tracking-wide hover:text-foreground">Adm No {{ $arrow('admission_no') }}</a>
                                    </th>
                                    <th class="py-2 pr-3">
                                        <a href="{{ $makeLink('name') }}" class="inline-flex items-center gap-1 font-medium uppercase tracking-wide hover:text-foreground">Name {{ $arrow('name') }}</a>
                                    </th>
                                    <th class="w-20 py-2 pr-3 font-medium">Gender</th>
                                    <th class="w-24 py-2 pr-3 font-medium">Class</th>
                                    <th class="w-24 py-2 pr-3 font-medium">Category</th>
                                    <th class="w-32 py-2 pr-3 font-medium">House</th>
                                    <th class="w-36 py-2 text-right font-medium">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($students as $s)
                                    <tr class="group border-b border-border/60 last:border-0 hover:bg-accent/40">
                                        <td class="py-2.5 pr-2">
                                            <input type="checkbox" name="ids[]" value="{{ $s->id }}" class="row-check accent-primary">
                                        </td>
                                        <td class="py-2.5 pr-3">
                                            <a href="{{ route('students.show', $s) }}" class="font-mono text-xs font-medium tabular-nums text-primary hover:underline">{{ $s->admission_no }}</a>
                                        </td>
                                        <td class="py-2.5 pr-3">
                                            <div class="flex min-w-0 flex-col leading-tight">
                                                <a href="{{ route('students.show', $s) }}" class="truncate font-medium hover:underline">{{ $s->full_name }}</a>
                                                <span class="truncate text-xs text-muted-foreground">UPI {{ $s->upi }}</span>
                                            </div>
                                        </td>
                                        <td class="py-2.5 pr-3 text-muted-foreground">{{ $s->gender }}</td>
                                        <td class="py-2.5 pr-3">
                                            <span class="font-medium">{{ $s->class_name }}</span>
                                            <span class="text-muted-foreground">{{ $s->stream }}</span>
                                        </td>
                                        <td class="py-2.5 pr-3">
                                            <span class="inline-flex h-5 items-center rounded-full px-2 text-[10px] {{ $s->category === 'Boarding' ? 'bg-muted text-muted-foreground' : 'border border-border text-muted-foreground' }}">{{ $s->category }}</span>
                                        </td>
                                        <td class="py-2.5 pr-3 text-muted-foreground">{{ $s->house }}</td>
                                        <td class="py-2.5">
                                            <div class="flex items-center justify-end gap-1">
                                                <a href="{{ route('students.edit', $s) }}" class="rounded-md px-1.5 py-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground" title="Edit"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg></a>
                                                <a href="{{ route('students.show', $s) }}" class="rounded-md px-1.5 py-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground" title="View profile"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg></a>
                                                <button type="submit" form="transfer_{{ $s->id }}" onclick="return confirm('Transfer {{ $s->full_name }} out?')"
                                                        class="rounded-md px-1.5 py-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive" title="Remove (transfer out)"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="py-10 text-center text-sm text-muted-foreground">No students match your filters.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div id="bulkBar" class="hidden mt-3 items-center gap-3 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2">
                        <span class="text-sm"><strong id="selectedCount">0</strong> selected</span>
                        <button type="submit" onclick="return confirm('Transfer the selected students out?')" class="rounded-lg border border-destructive/40 px-3 py-1 text-xs text-destructive">Remove Selected</button>
                        <button type="button" onclick="clearSelection()" class="ml-auto rounded-lg px-2 py-1 text-xs text-muted-foreground">Clear selection</button>
                    </div>
                </form>

                @foreach ($students as $s)
                    <form id="transfer_{{ $s->id }}" method="post" action="{{ route('students.transfer', $s) }}" class="hidden">
                        @csrf
                        <input type="hidden" name="reason" value="Transferred to another school">
                    </form>
                @endforeach

                <div class="mt-2">
                    {{ $students->links('pagination::tailwind') }}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const selectAll = document.getElementById('selectAll');
    const rows = Array.from(document.querySelectorAll('.row-check'));
    const bulkBar = document.getElementById('bulkBar');
    const countEl = document.getElementById('selectedCount');

    function update() {
        const n = rows.filter(r => r.checked).length;
        countEl.textContent = n;
        bulkBar.classList.toggle('hidden', n === 0);
        bulkBar.classList.toggle('flex', n > 0);
        if (selectAll) selectAll.checked = rows.length > 0 && n === rows.length;
    }

    function clearSelection() {
        rows.forEach(r => (r.checked = false));
        update();
    }

    selectAll.addEventListener('change', () => rows.forEach(r => (r.checked = selectAll.checked)), update);
    rows.forEach(r => r.addEventListener('change', update));
    update();
</script>
@endpush