@props(['staff' => null, 'roles' => [], 'departments' => [], 'employmentTypes' => [], 'employmentStatuses' => [], 'genders' => []])

@php
    $roleOptions = $roles->mapWithKeys(fn ($role) => [
        $role->name => $role->label ?: \Illuminate\Support\Str::headline($role->name),
    ]);

    $departmentOptions = $departments->pluck('name', 'id');

    $currentRole = old('role', $staff?->roles->first()?->name);
@endphp

<div class="grid gap-6 lg:grid-cols-3">
    <div class="space-y-6 lg:col-span-2">
        <x-card title="Identity" icon="user-cog">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.input name="name" label="Full name" required :value="$staff?->name"
                              placeholder="As it should appear on clinical documents" />

                <x-form.input name="email" label="Work email" type="email" required :value="$staff?->email"
                              hint="Used to sign in and to receive system notifications." />

                <x-form.input name="designation" label="Designation" required :value="$staff?->designation"
                              placeholder="e.g. Consultant Paediatrician" />

                <x-form.select name="role" label="Role" required :options="$roleOptions" :value="$currentRole"
                               hint="The role decides which permissions the account carries." />

                <x-form.select name="department_id" label="Department" :options="$departmentOptions"
                               :value="$staff?->department_id" placeholder="Unassigned" />

                @unless ($staff)
                    <x-form.input name="employee_no" label="Employee number"
                                  hint="Leave blank to allocate the next number automatically." />
                @endunless

                <x-form.select name="gender" label="Gender" :options="$genders" :value="$staff?->gender" />

                <x-form.input name="date_of_birth" label="Date of birth" type="date" :value="$staff?->date_of_birth?->toDateString()" />

                <x-form.input name="national_id" label="National ID / passport" :value="$staff?->national_id" />

                <x-form.input name="phone" label="Mobile number" :value="$staff?->phone" />

                <div class="sm:col-span-2">
                    <x-form.input name="address" label="Postal / residential address" :value="$staff?->address" />
                </div>
            </div>
        </x-card>

        @if ($staff?->isDoctor() || ! $staff)
            <x-card title="Clinical credentials" icon="stethoscope">
                <p class="mb-4 text-xs text-slate-500">
                    Required for clinicians. The licence expiry drives a renewal reminder on the dashboard.
                </p>
                <div class="grid gap-5 sm:grid-cols-2">
                    <x-form.input name="specialization" label="Specialization" :value="$staff?->specialization"
                                  placeholder="e.g. Cardiology" />

                    <x-form.input name="qualification" label="Highest qualification" :value="$staff?->qualification"
                                  placeholder="e.g. MMed, MBChB" />

                    <x-form.input name="license_no" label="Practising licence number" :value="$staff?->license_no" />

                    <x-form.input name="license_expiry" label="Licence expiry" type="date"
                                  :value="$staff?->license_expiry?->toDateString()" />

                    <x-form.input name="consultation_fee" label="Consultation fee"
                                  type="number" step="0.01" prefix="{{ currency_code() }}"
                                  :value="$staff?->consultation_fee"
                                  hint="Default fee applied when this clinician opens a clinic session." />
                </div>
            </x-card>
        @endif

        <x-card title="Emergency contact" icon="phone">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.input name="emergency_contact_name" label="Contact name" :value="$staff?->emergency_contact_name" />
                <x-form.input name="emergency_contact_phone" label="Contact number" :value="$staff?->emergency_contact_phone" />
            </div>
        </x-card>
    </div>

    <div class="space-y-6">
        @unless ($staff)
            <x-card title="Sign-in credentials" icon="lock">
                <div class="space-y-5">
                    <x-form.input name="password" label="Temporary password" type="password" required
                                  hint="At least 12 characters with upper and lower case, a number and a symbol." />

                    <x-form.input name="password_confirmation" label="Confirm password" type="password" required />

                    <input type="hidden" name="send_invite" value="0">
                    <x-form.checkbox name="send_invite" label="Allow sign-in immediately"
                                     hint="Leave unticked to create the account on hold until you are ready to hand it over."
                                     checked />
                </div>
            </x-card>
        @endunless

        <x-card title="Employment" icon="building">
            <div class="space-y-5">
                <x-form.select name="employment_type" label="Employment type" required
                               :options="$employmentTypes" :value="$staff?->employment_type ?? 'permanent'" />

                <x-form.select name="employment_status" label="Employment status" required
                               :options="$employmentStatuses" :value="$staff?->employment_status ?? 'active'" />

                <x-form.input name="date_joined" label="Date joined" type="date"
                              :value="$staff?->date_joined?->toDateString()" />

                <x-form.textarea name="notes" label="Internal notes" :rows="3" :value="$staff?->notes"
                                 placeholder="Visible to administrators only." />
            </div>
        </x-card>
    </div>
</div>

<div class="mt-6 flex flex-wrap items-center justify-end gap-3">
    <a href="{{ $staff ? route('admin.staff.show', $staff) : route('admin.staff.index') }}"
       class="hms-btn-secondary">Cancel</a>
    <button type="submit" class="hms-btn-primary">
        <x-icon name="check" size="sm" />
        {{ $staff ? 'Save changes' : 'Create account' }}
    </button>
</div>