@extends('layouts.app')

@section('title', $staff->full_name)

@section('content')
    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div class="flex items-center gap-3">
                <span class="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-base font-semibold text-primary">{{ $staff->initials }}</span>
                <div class="flex flex-col">
                    <h1 class="text-lg font-semibold">{{ $staff->full_name }}</h1>
                    <p class="text-xs text-muted-foreground">{{ $staff->role }} · {{ $staff->staff_no }}</p>
                    <p class="mt-1 flex flex-wrap gap-1">
                        <span class="rounded-full bg-secondary px-2 py-0.5 text-[10px]">{{ $staff->employment_type }}</span>
                        <span class="rounded-full bg-secondary px-2 py-0.5 text-[10px]">{{ $staff->gender }}</span>
                    </p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('staff.edit', $staff) }}" class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Edit</a>
                <details class="relative">
                    <summary class="cursor-pointer list-none rounded-lg border border-destructive/40 px-3 py-2 text-sm text-destructive hover:bg-destructive/5">Remove (has left)</summary>
                    <form method="post" action="{{ route('staff.destroy', $staff) }}" class="absolute right-0 z-10 mt-2 w-64 rounded-xl border border-border bg-card p-3 shadow-lg">
                        @csrf
                        @method('DELETE')
                        <p class="text-xs text-muted-foreground">Mark as Former Staff — record the date and reason, then confirm.</p>
                        <label class="mt-2 block text-xs text-muted-foreground">Left on</label>
                        <input type="date" name="left_on" value="{{ now()->toDateString() }}" required class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <label class="mt-2 block text-xs text-muted-foreground">Reason</label>
                        <input name="reason" placeholder="e.g. Resigned, Retired, Contract ended" class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <button class="mt-3 w-full rounded-lg bg-destructive px-3 py-2 text-sm font-medium text-white hover:bg-destructive/90">Remove Staff Member</button>
                    </form>
                </details>
            </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
            <section class="rounded-xl border border-border bg-card p-4">
                <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Identity</h2>
                <div class="grid grid-cols-2 gap-x-3 gap-y-2 text-sm">
                    <x-field label="First name"><span class="text-[13px]">{{ $staff->first_name }}</span></x-field>
                    <x-field label="Middle name"><span class="text-[13px]">{{ $staff->middle_name }}</span></x-field>
                    <x-field label="Surname"><span class="text-[13px]">{{ $staff->surname }}</span></x-field>
                    <x-field label="Gender"><span class="text-[13px]">{{ $staff->gender }}</span></x-field>
                    <x-field label="ID / Passport No"><span class="font-mono text-xs">{{ $staff->id_passport }}</span></x-field>
                </div>
            </section>

            <section class="rounded-xl border border-border bg-card p-4">
                <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Contact</h2>
                <div class="grid grid-cols-2 gap-x-3 gap-y-2 text-sm">
                    <x-field label="Telephone"><span class="text-[13px]">{{ $staff->telephone }}</span></x-field>
                    <x-field label="Email"><span class="text-[13px]">{{ $staff->email }}</span></x-field>
                    <x-field label="Estate"><span class="text-[13px]">{{ $staff->estate }}</span></x-field>
                    <x-field label="Address"><span class="text-[13px]">{{ $staff->address }}</span></x-field>
                </div>
            </section>

            <section class="rounded-xl border border-border bg-card p-4">
                <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Employment</h2>
                <div class="grid grid-cols-2 gap-x-3 gap-y-2 text-sm">
                    <x-field label="Role"><span class="text-[13px]">{{ $staff->role }}</span></x-field>
                    <x-field label="System access role"><span class="text-[13px]">{{ $staff->role }}</span></x-field>
                    <x-field label="Staff / TSC No"><span class="font-mono text-xs">{{ $staff->staff_no }}</span></x-field>
                    <x-field label="Employment type"><span class="text-[13px]">{{ $staff->employment_type }}</span></x-field>
                    <x-field label="Qualification"><span class="text-[13px]">{{ $staff->qualification }}</span></x-field>
                    <x-field label="Basic salary"><span class="tabular-nums text-[13px]">KSh {{ number_format((float) $staff->basic_salary) }}</span></x-field>
                </div>
            </section>

            <section class="rounded-xl border border-border bg-card p-4">
                <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Statutory</h2>
                <div class="grid grid-cols-2 gap-x-3 gap-y-2 text-sm">
                    <x-field label="KRA PIN"><span class="font-mono text-xs">{{ $staff->kra_pin }}</span></x-field>
                    <x-field label="NSSF"><span class="font-mono text-xs">{{ $staff->nssf }}</span></x-field>
                    <x-field label="NHIF"><span class="font-mono text-xs">{{ $staff->nhif }}</span></x-field>
                </div>
            </section>
        </div>

        <section class="rounded-xl border border-border bg-card p-4">
            <div class="flex items-center justify-between">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Recent Attendance</h2>
                <a href="{{ route('staff.attendance-sheet') }}" class="text-xs text-primary hover:underline">Mark Register</a>
            </div>
            <div class="mt-3 flex flex-wrap gap-1.5">
                @foreach ($recent as $r)
                    <span class="rounded-lg px-2.5 py-1 text-xs {{ $r->status === 'P' ? 'bg-emerald-50 text-emerald-700' : 'bg-destructive/5 text-destructive' }}">
                        {{ $r->date->format('d M') }} · {{ $r->status }}
                    </span>
                @endforeach
                @if ($recent->isEmpty())
                    <span class="text-sm text-muted-foreground">No attendance recorded yet.</span>
                @endif
            </div>
        </section>
    </div>
@endsection