@extends('layouts.app')

@section('title', 'Former Staff')

@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">Former Staff</h1>
                <p class="text-xs text-muted-foreground">Staff who have left the school — restorable at any time</p>
            </div>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <div class="flex flex-col gap-3 p-3">
                <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">Role</th>
                                <th class="py-2 pr-3 font-medium">Left On</th>
                                <th class="py-2 pr-3 font-medium">Reason</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 font-medium">{{ $s->full_name }}</td>
                                    <td class="py-2.5 pr-3">{{ $s->role }}</td>
                                    <td class="py-2.5 pr-3 text-muted-foreground">{{ $s->left_on?->format('d M Y') }}</td>
                                    <td class="py-2.5 pr-3 text-muted-foreground">{{ $s->reason }}</td>
                                    <td class="py-2.5">
                                        <div class="flex items-center justify-end gap-1">
                                            <form method="post" action="{{ route('staff.restore', $s) }}">
                                                @csrf
                                                <button class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Restore</button>
                                            </form>
                                            <form method="post" action="{{ route('staff.former-destroy', $s) }}" onsubmit="return confirm('Permanently delete {{ $s->full_name }} from records?')">
                                                @csrf
                                                @method('DELETE')
                                                <button class="rounded-md border border-destructive/40 px-2 py-1 text-xs text-destructive hover:bg-destructive/5">Delete</button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            @if ($staff->isEmpty())
                                <tr><td colspan="6" class="py-10 text-center text-sm text-muted-foreground">No former staff on record.</td></tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                {{ $staff->links() }}
            </div>
        </div>
    </div>
@endsection