@extends('layouts.app')

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

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Alumni List</h1>
            <p class="text-xs text-muted-foreground">Former students who have completed their studies</p>
        </div>

        <div class="flex flex-col gap-3 rounded-xl border border-border bg-card p-3">
            <div class="flex flex-wrap items-center gap-2">
                <div class="flex items-center gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2">
                    <svg class="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
                    <span class="text-lg font-semibold tabular-nums">{{ \App\Models\Student::whereNotNull('year_left')->count() }}</span>
                    <span class="text-sm text-muted-foreground">alumni</span>
                </div>

                <form method="get" class="relative min-w-52 flex-1">
                    <input type="hidden" name="size" value="{{ request('size', 10) }}">
                    <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="{{ request('q') }}" placeholder="Search name, admission no, UPI..."
                           class="h-8 w-full rounded-lg border border-input bg-transparent pl-8 pr-16 text-sm outline-none focus-visible:border-ring">
                    <button type="submit" class="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground hover:bg-primary/90">Search</button>
                </form>

                <form method="get" class="flex items-center gap-2 text-xs text-muted-foreground">
                    @if (request('q'))
                        <input type="hidden" name="q" value="{{ request('q') }}">
                    @endif
                    <span>Page size</span>
                    <select name="size" onchange="this.form.submit()"
                            class="h-8 rounded-md border border-input bg-transparent px-2 text-sm outline-none">
                        @foreach ([5, 10, 20, 50] as $n)
                            <option value="{{ $n }}" @selected((int) request('size', 10) === $n)>{{ $n }}</option>
                        @endforeach
                    </select>
                </form>

                <a href="{{ route('students.alumni.export', ['q' => request('q')]) }}" class="inline-flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1 text-sm transition-colors hover:bg-accent">
                    <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 12h-6"/><path d="M12 9v6"/></svg>
                    CSV
                </a>
                <a href="{{ route('students.alumni.print', ['q' => request('q')]) }}" target="_blank" class="inline-flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1 text-sm transition-colors hover:bg-accent">
                    <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="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
                    PDF
                </a>
            </div>

            <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="py-2 pr-3 font-medium">Adm No</th>
                            <th class="py-2 pr-3 font-medium">Name</th>
                            <th class="w-24 py-2 pr-3 font-medium">Gender</th>
                            <th class="w-28 py-2 pr-3 font-medium">Year Left</th>
                            <th class="w-36 py-2 pr-3 font-medium">Status</th>
                            <th class="w-36 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($students as $s)
                            <tr class="border-b border-border/60 last:border-0 hover:bg-accent/40">
                                <td class="py-2.5 pr-3 font-mono text-xs">{{ $s->admission_no }}</td>
                                <td class="py-2.5 pr-3">
                                    <a href="{{ route('students.show', $s) }}" class="font-medium hover:underline">{{ $s->full_name }}</a>
                                </td>
                                <td class="py-2.5 pr-3">{{ $s->gender }}</td>
                                <td class="py-2.5 pr-3 tabular-nums">{{ $s->year_left }}</td>
                                <td class="py-2.5 pr-3">
                                    <span class="inline-block rounded-full border border-border px-2 py-0.5 text-[10px]">Completed</span>
                                </td>
                                <td class="py-2.5">
                                    <div class="flex items-center justify-end gap-1">
                                        <a href="{{ route('students.leaving-certificate', $s) }}" target="_blank" class="rounded-md px-1.5 py-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground" title="Leaving certificate">
                                            <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="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><circle cx="10" cy="12" r="2"/><path d="m12 14 1.5 1.5"/><path d="m15 15 1.5 1.5"/><path d="m13.5 12 1.5 1.5"/><path d="m15 14 1.5 1.5"/></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>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="py-10 text-center text-sm text-muted-foreground">No alumni found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="flex items-center justify-between">
                <span class="text-xs text-muted-foreground">
                    Showing {{ $students->firstItem() ?? 0 }}–{{ $students->lastItem() ?? 0 }} of {{ $students->total() }}
                </span>
                {{ $students->links('pagination::tailwind') }}
            </div>
        </div>
    </div>
@endsection