@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('common.hr')],
        ['label' => __('recruitment.hiring.title'), 'url' => route('hr.recruitment.hiring.index')],
        ['label' => __('recruitment.hiring.wizard_title')],
    ];
    $p = old() ?: $prefill;
@endphp

<x-ui.layout.page
    :title="__('recruitment.hiring.wizard_title')"
    :subtitle="__('recruitment.hiring.wizard_subtitle', ['candidate' => $offer->candidate?->full_name ?? $offer->reference_code])"
    page-icon="fe fe-user-check"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('hr.recruitment.hiring.index')" icon="fe fe-arrow-left">
            {{ __('recruitment.common.back') }}
        </x-ui.buttons.secondary>
    </x-slot:actions>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <h6 class="mb-3">{{ __('recruitment.hiring.steps.review') }}</h6>
            <div class="row g-3 small">
                <div class="col-md-3"><span class="text-muted">{{ __('recruitment.offer_letters.fields.reference') }}</span><div><code>{{ $offer->reference_code }}</code></div></div>
                <div class="col-md-3"><span class="text-muted">{{ __('recruitment.offer_letters.fields.candidate') }}</span><div>{{ $offer->candidate?->full_name }}</div></div>
                <div class="col-md-3"><span class="text-muted">{{ __('recruitment.offer_letters.fields.vacancy') }}</span><div>{{ $offer->vacancy?->title }}</div></div>
                <div class="col-md-3"><span class="text-muted">{{ __('recruitment.offer_letters.fields.position') }}</span><div>{{ $offer->position?->title }}</div></div>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('hr.recruitment.hiring.store', $offer) }}" class="vstack gap-4">
        @csrf

        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h6 class="mb-3">{{ __('recruitment.hiring.steps.employee') }}</h6>
                <div class="row g-3" data-geo-cascade>
                    <div class="col-md-6">
                        <x-ui.form.input name="full_name" :label="__('employees.fields.full_name')" :value="$p['full_name'] ?? null" required />
                    </div>
                    <div class="col-md-6">
                        <x-ui.form.input name="email" type="email" :label="__('employees.fields.email')" :value="$p['email'] ?? null" />
                    </div>
                    <div class="col-md-6">
                        <x-ui.form.input name="phone_1" :label="__('employees.fields.phone_1')" :value="$p['phone_1'] ?? null" required />
                    </div>
                    <div class="col-md-6">
                        <x-ui.form.input name="national_id" :label="__('employees.fields.national_id')" :value="$p['national_id'] ?? null" required />
                    </div>
                    <div class="col-md-4">
                        <x-ui.form.select
                            name="gender"
                            :label="__('employees.fields.gender')"
                            :options="['' => '—', 'male' => __('employees.gender.male'), 'female' => __('employees.gender.female'), 'other' => __('employees.gender.other')]"
                            :selected="$p['gender'] ?? null"
                            required
                        />
                    </div>
                    <div class="col-md-4">
                        <x-ui.form.input name="nationality" :label="__('employees.fields.nationality')" :value="$p['nationality'] ?? null" />
                    </div>
                    <div class="col-md-4">
                        <x-ui.form.input name="hire_date" type="date" :label="__('employees.fields.hire_date')" :value="$p['hire_date'] ?? null" required />
                    </div>
                    <div class="col-md-4">
                        <x-ui.form.input name="probation_end_date" type="date" :label="__('employees.fields.probation_end_date')" :value="$p['probation_end_date'] ?? null" />
                    </div>
                    <div class="col-md-4">
                        <x-ui.form.search-select
                            name="department_id"
                            lookup="departments"
                            :label="__('employees.fields.department')"
                            :options="$departmentOptions"
                            :selected="$p['department_id'] ?? null"
                            required
                        />
                    </div>
                    <div class="col-md-4">
                        <x-ui.form.search-select
                            name="position_id"
                            lookup="positions"
                            lookup-parent="department_id"
                            :label="__('employees.fields.position')"
                            :options="$positionOptions"
                            :selected="$p['position_id'] ?? null"
                            required
                        />
                    </div>
                    <div class="col-md-4">
                        <x-ui.form.select
                            name="employment_status_id"
                            :label="__('employees.fields.employment_status')"
                            :options="['' => '—'] + $employmentStatusOptions"
                            :selected="$p['employment_status_id'] ?? null"
                            required
                        />
                    </div>
                    <div class="col-md-4">
                        <x-ui.form.search-select
                            name="manager_employee_id"
                            lookup="employees"
                            :label="__('employees.fields.manager')"
                            :options="$managerOptions"
                            :selected="old('manager_employee_id')"
                            optional
                        />
                    </div>
                    @if(auth()->user()?->can('employees.salary.view') || auth()->user()?->can('recruitment.manage'))
                        <div class="col-md-4">
                            <x-ui.form.input name="salary" type="number" step="0.01" min="0" :label="__('employees.fields.salary')" :value="$p['salary'] ?? null" required />
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h6 class="mb-3">{{ __('recruitment.hiring.steps.contract') }}</h6>
                <div class="form-check">
                    <input type="hidden" name="create_employment_contract" value="0">
                    <input class="form-check-input" type="checkbox" name="create_employment_contract" value="1" id="create_contract" @checked(old('create_employment_contract', true))>
                    <label class="form-check-label" for="create_contract">{{ __('recruitment.hiring.fields.create_contract') }}</label>
                </div>
            </div>
        </div>

        @if ($canCreateUser)
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="mb-3">{{ __('recruitment.hiring.steps.user') }}</h6>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="create_user_account" value="1" id="create_user" @checked(old('create_user_account'))>
                        <label class="form-check-label" for="create_user">{{ __('recruitment.hiring.fields.create_user') }}</label>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <x-ui.form.input name="password" type="password" :label="__('rbac.users.password')" />
                        </div>
                        <div class="col-md-6">
                            <x-ui.form.input name="password_confirmation" type="password" :label="__('rbac.users.password_confirm')" />
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ __('rbac.users.columns.roles') }}</label>
                            <div class="row g-2">
                                @foreach ($roles as $role)
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="role_ids[]" value="{{ $role->id }}" id="role_{{ $role->id }}"
                                                @checked(in_array((int) $role->id, old('role_ids', $defaultRoleIds), true))>
                                            <label class="form-check-label" for="role_{{ $role->id }}">{{ $role->name }}</label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            @error('role_ids')<div class="text-danger small">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h6 class="mb-3">{{ __('recruitment.hiring.steps.confirm') }}</h6>
                <div class="mb-3">
                    <label class="form-label" for="notes">{{ __('recruitment.hiring.fields.notes') }}</label>
                    <textarea name="notes" id="notes" rows="3" class="form-control">{{ old('notes') }}</textarea>
                </div>
                <x-ui.buttons.primary type="submit" icon="fe fe-check">{{ __('recruitment.hiring.actions.complete') }}</x-ui.buttons.primary>
            </div>
        </div>
    </form>
</x-ui.layout.page>

@push('scripts')
    <script src="{{ asset('assets/admin/js/erp-geo-cascade.js') }}"></script>
@endpush
