@php
    /** @var \App\Models\User|null $staff */
    $staff = $staff ?? null;
    /** @var \Illuminate\Support\Collection|\App\Models\Role[] $roles */
    $roles = $roles ?? collect();
    $selectedRoles = collect(old('role_ids', $staff?->roles->pluck('id')->all() ?? []))->map(fn ($id) => (string) $id);
    $statusValue = old('status', $staff?->status ?? 'active');
@endphp
<div class="form-grid user-form-grid">
    <div class="form-group">
        <label for="name">Full name <span class="req">*</span></label>
        <input class="input" id="name" name="name" value="{{ old('name', $staff?->name) }}" placeholder="Full name" required>
    </div>
    <div class="form-group">
        <label for="email">Email <span class="req">*</span></label>
        <input class="input" id="email" type="email" name="email" value="{{ old('email', $staff?->email) }}" placeholder="staff@jobnixy.com" required>
    </div>
    <div class="form-group">
        <label for="phone">Mobile</label>
        <input class="input" id="phone" name="phone" value="{{ old('phone', $staff?->phone) }}" placeholder="+2348012345678">
    </div>
    <div class="form-group">
        <label for="password">
            @if($staff)
                Password <span class="label-note">(leave blank to keep current password)</span>
            @else
                Password <span class="req">*</span>
            @endif
        </label>
        <input class="input" id="password" type="password" name="password" placeholder="{{ $staff ? '' : 'Password' }}" @required(!$staff) minlength="8" autocomplete="new-password">
    </div>
    <div class="form-group">
        <label for="status">Status <span class="req">*</span></label>
        <select class="input" id="status" name="status" required>
            @foreach(['active','suspended','frozen','pending'] as $s)
                <option value="{{ $s }}" @selected($statusValue === $s)>{{ ucfirst($s) }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group form-span-2">
        <label>Roles <span class="req">*</span></label>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;">
            @forelse($roles as $role)
                <label class="checkbox-row" title="{{ $role->description }}">
                    <input type="checkbox" name="role_ids[]" value="{{ $role->id }}" @checked($selectedRoles->contains((string) $role->id))>
                    {{ $role->name }}
                </label>
            @empty
                <span style="color:var(--muted);">No roles defined.</span>
            @endforelse
        </div>
    </div>
</div>