@extends('layouts.app')

@section('title', 'Staff 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">Staff List</h1>
                <p class="text-xs text-muted-foreground">Active staff roster</p>
            </div>
            <a href="{{ route('staff.create') }}" class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Add Staff</a>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <div class="flex flex-col gap-3 p-3">
                <form method="get" action="{{ route('staff.index') }}" class="flex flex-wrap items-center gap-2">
                    <input name="q" value="{{ $q }}" placeholder="Search name, ID, email..." class="h-8 min-w-52 flex-1 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <select name="role" class="h-8 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <option value="">All Roles</option>
                        @foreach (\App\Models\Staff::ROLES as $r)
                            <option value="{{ $r }}" @selected($role === $r)>{{ $r }}</option>
                        @endforeach
                    </select>
                    <select name="employment" class="h-8 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <option value="">All Employment</option>
                        @foreach (\App\Models\Staff::EMPLOYMENT_TYPES as $t)
                            <option value="{{ $t }}" @selected($employment === $t)>{{ $t }}</option>
                        @endforeach
                    </select>
                    <button class="h-8 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Filter</button>
                    @if ($q !== '' || $role !== '' || $employment !== '')
                        <a href="{{ route('staff.index') }}" class="h-8 rounded-lg border border-border px-3 py-1.5 text-sm hover:bg-accent">Clear</a>
                    @endif
                </form>

                <div class="flex flex-wrap gap-2 text-xs text-muted-foreground">
                    <span class="rounded-full bg-secondary px-2.5 py-1">{{ $totals['total'] }} active</span>
                    <span class="rounded-full bg-secondary px-2.5 py-1">{{ $totals['teaching'] }} teaching</span>
                    <span class="rounded-full bg-secondary px-2.5 py-1">{{ $totals['support'] }} non-teaching</span>
                    <span class="rounded-full bg-secondary px-2.5 py-1">{{ $totals['permanent'] }} permanent</span>
                    <span class="rounded-full bg-secondary px-2.5 py-1">{{ $totals['contract'] }} contract</span>
                </div>

                <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">ID/Passport</th>
                                <th class="py-2 pr-3 font-medium">Name</th>
                                <th class="py-2 pr-3 font-medium">Gender</th>
                                <th class="py-2 pr-3 font-medium">Role</th>
                                <th class="py-2 pr-3 font-medium">Employment</th>
                                <th class="py-2 pr-3 font-medium">Telephone</th>
                                <th class="py-2 text-right font-medium">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($staff as $s)
                                <tr class="border-b last:border-0 hover:bg-accent/40">
                                    <td class="py-2.5 pr-3 font-mono text-xs">{{ $s->id_passport }}</td>
                                    <td class="py-2.5 pr-3">
                                        <a href="{{ route('staff.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">
                                        <span class="inline-block max-w-36 truncate rounded-full border border-border px-2.5 py-0.5 text-[10px]">{{ $s->role }}</span>
                                    </td>
                                    <td class="py-2.5 pr-3 text-muted-foreground">{{ $s->employment_type }}</td>
                                    <td class="py-2.5 pr-3 text-muted-foreground">{{ $s->telephone }}</td>
                                    <td class="py-2.5">
                                        <div class="flex items-center justify-end gap-1">
                                            <a href="{{ route('staff.edit', $s) }}" class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Edit</a>
                                            <a href="{{ route('staff.show', $s) }}" class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Profile</a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            @if ($staff->isEmpty())
                                <tr><td colspan="7" class="py-10 text-center text-sm text-muted-foreground">No staff match your filters.</td></tr>
                            @endif
                        </tbody>
                    </table>
                </div>

                {{ $staff->links() }}
            </div>
        </div>
    </div>
@endsection