@extends('layouts.app')
@section('title', $staff->exists ? 'Edit Staff' : 'New Staff')
@section('content')
<x-ui.form-shell
    :title="$staff->exists ? 'Edit Staff User' : 'Create Staff User'"
    description="Create staff with only the essential identity, branch and login details required to start work. Additional employment and access information is optional."
    :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Staff','url'=>route('admin.users.index')],['label'=>$staff->exists?'Edit Staff':'Create Staff']]"
>
    <form method="POST" enctype="multipart/form-data" action="{{ $staff->exists ? route('admin.users.update',$staff) : route('admin.users.store') }}" class="mf-form">
        @csrf
        @if($staff->exists)@method('PUT')@endif

        <x-ui.form-section title="Required staff details" description="Only these fields are required to create a staff account. Employee number is generated automatically by the system.">
            <x-ui.form-grid>
                <div class="mf-col-4"><label class="mf-field-label">Full name</label><input name="name" value="{{ old('name',$staff->name) }}" class="mf-input" required>@error('name')<p class="mf-field-error">{{ $message }}</p>@enderror</div>
                <div class="mf-col-4"><label class="mf-field-label">Position</label><input name="position" value="{{ old('position',$staff->position) }}" class="mf-input" required>@error('position')<p class="mf-field-error">{{ $message }}</p>@enderror</div>
                <div class="mf-col-4"><label class="mf-field-label">Phone number</label><input name="phone" value="{{ old('phone',$staff->phone) }}" class="mf-input" required>@error('phone')<p class="mf-field-error">{{ $message }}</p>@enderror</div>
                <div class="mf-col-4"><label class="mf-field-label">Branch</label><select class="mf-input" name="primary_branch_id" required><option value="">Select branch</option>@foreach($branches as $branch)<option value="{{ $branch->id }}" @selected(old('primary_branch_id',$staff->primary_branch_id)==$branch->id)>{{ $branch->name }}</option>@endforeach</select>@error('primary_branch_id')<p class="mf-field-error">{{ $message }}</p>@enderror</div>
                <div class="mf-col-4"><label class="mf-field-label">Username</label><input name="username" value="{{ old('username',$staff->username) }}" class="mf-input" required>@error('username')<p class="mf-field-error">{{ $message }}</p>@enderror</div>
                <div class="mf-col-4"><label class="mf-field-label">Password {{ $staff->exists ? '(leave blank to keep current)' : '' }}</label><input type="password" name="password" class="mf-input" {{ $staff->exists?'':'required' }}>@error('password')<p class="mf-field-error">{{ $message }}</p>@enderror</div>
            </x-ui.form-grid>
        </x-ui.form-section>

        <x-ui.form-section title="Optional employee information" description="Add these details when available. They are not required to create the staff account.">
            <x-ui.form-grid>
                @if($staff->exists)
                    <div class="mf-col-3"><label class="mf-field-label">Employee number</label><input value="{{ $staff->employee_number ?: 'Generated automatically' }}" class="mf-input" disabled><p class="mf-field-help">System-generated and cannot be changed.</p></div>
                @endif
                <div class="mf-col-4"><label class="mf-field-label">Email</label><input type="email" name="email" value="{{ old('email',$staff->email) }}" class="mf-input">@error('email')<p class="mf-field-error">{{ $message }}</p>@enderror</div>
                <div class="mf-col-3"><label class="mf-field-label">National ID / NIN</label><input name="nin" value="{{ old('nin',$staff->nin) }}" class="mf-input">@error('nin')<p class="mf-field-error">{{ $message }}</p>@enderror</div>
                <div class="mf-col-2"><label class="mf-field-label">Employment date</label><input type="date" name="employed_at" value="{{ old('employed_at',optional($staff->employed_at)->format('Y-m-d')) }}" class="mf-input"></div>
                <div class="mf-col-3"><label class="mf-field-label">Employment status</label><select class="mf-input" name="status"><option value="active" @selected(old('status',$staff->status ?: 'active')==='active')>Active</option><option value="inactive" @selected(old('status',$staff->status)==='inactive')>Inactive</option></select></div>
                <div class="mf-col-5"><label class="mf-field-label">Profile photo</label><input type="file" name="profile_photo" accept="image/png,image/jpeg,image/webp" class="mf-input"><p class="mf-field-help">JPEG, PNG or WebP. Used for staff identification within the system.</p></div>
            </x-ui.form-grid>
        </x-ui.form-section>

        <x-ui.form-section title="Additional branch access" description="The selected Branch above is automatically assigned as the primary branch. Select only extra branches this employee may also access.">
            <div class="mf-option-grid">
                @foreach($branches as $branch)
                    <label class="mf-option"><input type="checkbox" name="branch_ids[]" value="{{ $branch->id }}" @checked(in_array($branch->id, old('branch_ids',$staff->exists?$staff->branches->pluck('id')->all():[])))><span>{{ $branch->name }}</span></label>
                @endforeach
            </div>
        </x-ui.form-section>

        <x-ui.form-section title="Roles & permissions" description="You can assign only roles within your own delegation ceiling. Protected role assignments are preserved automatically.">
            @if($roles->isNotEmpty())
                <div class="mf-option-grid">
                    @foreach($roles as $role)
                        <label class="mf-option"><input type="checkbox" name="role_ids[]" value="{{ $role->id }}" @checked(in_array($role->id, old('role_ids',$staff->exists?$staff->roles->pluck('id')->all():[])))><span><strong>{{ $role->display_name }}</strong>@if($role->description)<small class="block text-muted-foreground">{{ $role->description }}</small>@endif</span></label>
                    @endforeach
                </div>
            @else
                <p class="text-sm text-muted-foreground">No role assignments are available within your current authorization scope.</p>
            @endif

            @if($protectedRoles->isNotEmpty())
                <div class="mt-3">
                    <p class="mf-field-label">Protected existing roles</p>
                    <p class="mf-field-help">These roles exceed your delegation ceiling and will remain unchanged.</p>
                    <div class="mf-option-grid mt-2">
                        @foreach($protectedRoles as $role)
                            <div class="mf-option opacity-75"><span><strong>{{ $role->display_name }}</strong><small class="block text-muted-foreground">Protected · {{ $role->name }}</small></span></div>
                        @endforeach
                    </div>
                </div>
            @endif
        </x-ui.form-section>

        <x-ui.form-actions>
            <a class="mf-btn" href="{{ route('admin.users.index') }}">Cancel</a>
            <button class="mf-btn mf-btn-primary">Save staff user</button>
        </x-ui.form-actions>
    </form>
</x-ui.form-shell>
@endsection
