@extends('layouts.app')

@section('title', $staff ? 'Edit Staff' : 'Add Staff')

@section('content')
    <div class="mx-auto flex max-w-2xl flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">{{ $staff ? 'Edit Staff' : 'Add New Staff' }}</h1>
            <p class="text-xs text-muted-foreground">{{ $staff ? 'Update personal and employment details' : 'Personal details and employment fields' }}</p>
        </div>

        <form method="post" action="{{ $staff ? route('staff.update', $staff) : route('staff.store') }}" class="flex flex-col gap-6">
            @csrf
            @if ($staff) @method('PUT') @endif

            <section class="flex flex-col gap-3 rounded-xl border border-border bg-card p-4">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Personal Details</h2>
                <div class="grid grid-cols-2 gap-3">
                    <x-field label="First Name" required>
                        <x-input name="first_name" value="{{ old('first_name', $staff?->first_name) }}" required />
                    </x-field>
                    <x-field label="Middle Name">
                        <x-input name="middle_name" value="{{ old('middle_name', $staff?->middle_name) }}" />
                    </x-field>
                    <x-field label="Last Name" required>
                        <x-input name="surname" value="{{ old('surname', $staff?->surname) }}" required />
                    </x-field>
                    <x-field label="Gender" required>
                        <select name="gender" required class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            <option value="Male" @selected(old('gender', $staff?->gender) === 'Male')>Male</option>
                            <option value="Female" @selected(old('gender', $staff?->gender) === 'Female')>Female</option>
                        </select>
                    </x-field>
                    <x-field label="ID/Passport No" required>
                        <x-input name="id_passport" value="{{ old('id_passport', $staff?->id_passport) }}" required />
                    </x-field>
                    <x-field label="Telephone">
                        <x-input name="telephone" value="{{ old('telephone', $staff?->telephone) }}" />
                    </x-field>
                    <x-field label="Email">
                        <x-input name="email" value="{{ old('email', $staff?->email) }}" />
                    </x-field>
                    <x-field label="Estate">
                        <x-input name="estate" value="{{ old('estate', $staff?->estate) }}" />
                    </x-field>
                    <div class="col-span-2">
                        <x-field label="Address">
                            <x-input name="address" value="{{ old('address', $staff?->address) }}" />
                        </x-field>
                    </div>
                </div>
            </section>

            <section class="flex flex-col gap-3 rounded-xl border border-border bg-card p-4">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Employment</h2>
                <div class="grid grid-cols-2 gap-3">
                    <x-field label="Role" required>
                        <select name="role" required class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            @foreach (\App\Models\Staff::ROLES as $r)
                                <option value="{{ $r }}" @selected(old('role', $staff?->role) === $r)>{{ $r }}</option>
                            @endforeach
                        </select>
                    </x-field>
                    <x-field label="Staff/TSC No" required>
                        <x-input name="staff_no" value="{{ old('staff_no', $staff?->staff_no) }}" required />
                    </x-field>
                    <x-field label="Employment Type" required>
                        <select name="employment_type" required class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            @foreach (\App\Models\Staff::EMPLOYMENT_TYPES as $t)
                                <option value="{{ $t }}" @selected(old('employment_type', $staff?->employment_type) === $t)>{{ $t }}</option>
                            @endforeach
                        </select>
                    </x-field>
                    <x-field label="Qualification">
                        <x-input name="qualification" value="{{ old('qualification', $staff?->qualification) }}" />
                    </x-field>
                    <x-field label="Basic Salary (KSh)">
                        <x-input type="number" step="0.01" name="basic_salary" value="{{ old('basic_salary', $staff?->basic_salary) }}" />
                    </x-field>
                </div>
            </section>

            <section class="flex flex-col gap-3 rounded-xl border border-border bg-card p-4">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Statutory</h2>
                <div class="grid grid-cols-2 gap-3">
                    <x-field label="KRA PIN">
                        <x-input name="kra_pin" value="{{ old('kra_pin', $staff?->kra_pin) }}" />
                    </x-field>
                    <x-field label="NSSF">
                        <x-input name="nssf" value="{{ old('nssf', $staff?->nssf) }}" />
                    </x-field>
                    <x-field label="NHIF">
                        <x-input name="nhif" value="{{ old('nhif', $staff?->nhif) }}" />
                    </x-field>
                </div>
            </section>

            <div class="flex items-center gap-2">
                <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">{{ $staff ? 'Save Changes' : 'Add Staff' }}</button>
                <a href="{{ $staff ? route('staff.show', $staff) : route('staff.index') }}" class="rounded-lg border border-border px-4 py-2 text-sm hover:bg-accent">Cancel</a>
            </div>
        </form>
    </div>
@endsection