@php
    $worker = $worker ?? null;
@endphp

<div class="card mb-3">
    <div class="card-body">
        <h2 class="h6 fw-semibold mb-3">{{ __('lang.worker_section_office') }}</h2>
        <div class="row g-3">
            <div class="col-md-4">
                <label for="job_type_id" class="form-label">{{ __('lang.job_type') }} <span class="text-danger">*</span></label>
                <select name="job_type_id" id="job_type_id" class="js-searchable-select form-select @error('job_type_id') is-invalid @enderror" required>
                    <option value="">{{ __('lang.select_option') }}</option>
                    @foreach ($jobTypes as $jobType)
                        <option value="{{ $jobType->id }}" @selected(old('job_type_id', $worker->job_type_id ?? null) == $jobType->id)>{{ $jobType->name }}</option>
                    @endforeach
                </select>
                @error('job_type_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="col-md-4">
                <x-ui.input name="monthly_salary" type="number" step="0.001" min="0" :label="__('lang.monthly_salary')" :value="$worker->monthly_salary ?? null" />
            </div>

            <div class="col-md-4">
                <x-ui.input name="contract_period_years" type="number" min="0" max="10" :label="__('lang.contract_period_years')" :value="$worker->contract_period_years ?? null" />
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h2 class="h6 fw-semibold mb-3">{{ __('lang.worker_section_passport') }}</h2>
        <div class="row g-3">
            <div class="col-md-3">
                <x-ui.input name="passport_number" :label="__('lang.passport_number')" :value="$worker->passport_number ?? null" />
            </div>
            <div class="col-md-3">
                <x-ui.input name="passport_issue_place" :label="__('lang.passport_issue_place')" :value="$worker->passport_issue_place ?? null" />
            </div>
            <div class="col-md-3">
                <x-ui.input name="passport_issue_date" type="date" :label="__('lang.passport_issue_date')" :value="optional($worker->passport_issue_date ?? null)->format('Y-m-d')" />
            </div>
            <div class="col-md-3">
                <x-ui.input name="passport_expiry_date" type="date" :label="__('lang.passport_expiry_date')" :value="optional($worker->passport_expiry_date ?? null)->format('Y-m-d')" />
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h2 class="h6 fw-semibold mb-3">{{ __('lang.worker_section_personal') }}</h2>
        <div class="row g-3">
            <div class="col-md-6">
                <x-ui.input name="name" :label="__('lang.worker_name')" :value="$worker->name ?? null" required />
            </div>

            <div class="col-md-3">
                <label for="nationality_id" class="form-label">{{ __('lang.nationality') }} <span class="text-danger">*</span></label>
                <select name="nationality_id" id="nationality_id" class="js-searchable-select form-select @error('nationality_id') is-invalid @enderror" required>
                    <option value="">{{ __('lang.select_option') }}</option>
                    @foreach ($nationalities as $nationality)
                        <option value="{{ $nationality->id }}" @selected(old('nationality_id', $worker->nationality_id ?? null) == $nationality->id)>{{ $nationality->name }}</option>
                    @endforeach
                </select>
                @error('nationality_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="col-md-3">
                <x-ui.input name="religion" :label="__('lang.religion')" :value="$worker->religion ?? null" />
            </div>

            <div class="col-md-3">
                <x-ui.input name="date_of_birth" type="date" :label="__('lang.date_of_birth')" :value="optional($worker->date_of_birth ?? null)->format('Y-m-d')" required />
            </div>

            <div class="col-md-3">
                <x-ui.input name="place_of_birth" :label="__('lang.place_of_birth')" :value="$worker->place_of_birth ?? null" />
            </div>

            <div class="col-md-3">
                <label for="marital_status" class="form-label">{{ __('lang.marital_status') }}</label>
                <select name="marital_status" id="marital_status" class="form-select">
                    <option value="">{{ __('lang.select_option') }}</option>
                    @foreach (\App\Models\Worker::MARITAL_STATUSES as $status)
                        <option value="{{ $status }}" @selected(old('marital_status', $worker->marital_status ?? null) === $status)>{{ __('lang.marital_status_'.$status) }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3">
                <x-ui.input name="children_count" type="number" min="0" :label="__('lang.children_count')" :value="$worker->children_count ?? null" />
            </div>

            <div class="col-md-4">
                <x-ui.input name="home_address" :label="__('lang.home_address')" :value="$worker->home_address ?? null" />
            </div>

            <div class="col-md-4">
                <x-ui.input name="contact_number" :label="__('lang.contact_number')" :value="$worker->contact_number ?? null" />
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h2 class="h6 fw-semibold mb-3">{{ __('lang.worker_section_physical') }}</h2>
        <div class="row g-3">
            <div class="col-md-3">
                <x-ui.input name="weight_kg" type="number" step="0.01" min="0" :label="__('lang.weight_kg')" :value="$worker->weight_kg ?? null" />
            </div>
            <div class="col-md-3">
                <x-ui.input name="height" :label="__('lang.height')" :value="$worker->height ?? null" />
            </div>
            <div class="col-md-3">
                <x-ui.input name="complexion" :label="__('lang.complexion')" :value="$worker->complexion ?? null" />
            </div>
            <div class="col-md-3">
                <x-ui.input name="education" :label="__('lang.education')" :value="$worker->education ?? null" />
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h2 class="h6 fw-semibold mb-3">{{ __('lang.worker_section_languages') }}</h2>
        <div class="row g-3">
            <div class="col-md-6">
                <label for="english_level" class="form-label">{{ __('lang.english_level') }}</label>
                <select name="english_level" id="english_level" class="form-select">
                    <option value="">{{ __('lang.select_option') }}</option>
                    @foreach (\App\Models\Worker::LANGUAGE_LEVELS as $level)
                        <option value="{{ $level }}" @selected(old('english_level', $worker->english_level ?? null) === $level)>{{ __('lang.language_level_'.$level) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6">
                <label for="arabic_level" class="form-label">{{ __('lang.arabic_level') }}</label>
                <select name="arabic_level" id="arabic_level" class="form-select">
                    <option value="">{{ __('lang.select_option') }}</option>
                    @foreach (\App\Models\Worker::LANGUAGE_LEVELS as $level)
                        <option value="{{ $level }}" @selected(old('arabic_level', $worker->arabic_level ?? null) === $level)>{{ __('lang.language_level_'.$level) }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h2 class="h6 fw-semibold mb-3">{{ __('lang.worker_section_skills') }}</h2>
        <div class="d-flex flex-wrap gap-4">
            @foreach (['skill_cooking', 'skill_cleaning', 'skill_washing', 'skill_babysitting', 'skill_ironing', 'skill_sewing'] as $skill)
                <div class="form-check form-check-reverse">
                    <input type="checkbox" class="form-check-input" name="{{ $skill }}" id="{{ $skill }}" value="1" {{ old($skill, $worker->{$skill} ?? false) ? 'checked' : '' }}>
                    <label class="form-check-label" for="{{ $skill }}">{{ __('lang.'.$skill) }}</label>
                </div>
            @endforeach
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h2 class="h6 fw-semibold mb-3">{{ __('lang.worker_section_previous_employment') }}</h2>
        <div data-repeater>
            <div data-repeater-rows>
                @foreach (old('experiences', $worker?->experiences->toArray() ?? []) as $i => $experience)
                    <div class="row g-2 align-items-end mb-2" data-repeater-row>
                        <div class="col-md-5">
                            <x-ui.input name="experiences[{{ $i }}][country]" :label="__('lang.previous_country')" :value="$experience['country'] ?? null" />
                        </div>
                        <div class="col-md-5">
                            <x-ui.input name="experiences[{{ $i }}][period]" :label="__('lang.previous_period')" :value="$experience['period'] ?? null" />
                        </div>
                        <div class="col-md-2 d-flex mb-3">
                            <x-ui.icon-button data-repeater-remove :label="__('lang.delete')" style="color: var(--bs-danger);">
                                <i class="bi bi-trash3"></i>
                            </x-ui.icon-button>
                        </div>
                    </div>
                @endforeach
            </div>

            <template data-repeater-template>
                <div class="row g-2 align-items-end mb-2" data-repeater-row>
                    <div class="col-md-5">
                        <x-ui.input name="experiences[__INDEX__][country]" :label="__('lang.previous_country')" />
                    </div>
                    <div class="col-md-5">
                        <x-ui.input name="experiences[__INDEX__][period]" :label="__('lang.previous_period')" />
                    </div>
                    <div class="col-md-2 d-flex mb-3">
                        <x-ui.icon-button data-repeater-remove :label="__('lang.delete')" style="color: var(--bs-danger);">
                            <i class="bi bi-trash3"></i>
                        </x-ui.icon-button>
                    </div>
                </div>
            </template>

            <button type="button" class="btn btn-sm btn-light border" data-repeater-add>
                <i class="bi bi-plus-lg me-1"></i>{{ __('lang.add_experience_row') }}
            </button>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h2 class="h6 fw-semibold mb-3">{{ __('lang.worker_section_contact_person') }}</h2>
        <div class="row g-3">
            <div class="col-md-3">
                <x-ui.input name="emergency_contact_name" :label="__('lang.emergency_contact_name')" :value="$worker->emergency_contact_name ?? null" />
            </div>
            <div class="col-md-3">
                <x-ui.input name="emergency_contact_number" :label="__('lang.emergency_contact_number')" :value="$worker->emergency_contact_number ?? null" />
            </div>
            <div class="col-md-3">
                <x-ui.input name="emergency_contact_relationship" :label="__('lang.emergency_contact_relationship')" :value="$worker->emergency_contact_relationship ?? null" />
            </div>
            <div class="col-md-3">
                <x-ui.input name="emergency_contact_address" :label="__('lang.address')" :value="$worker->emergency_contact_address ?? null" />
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h2 class="h6 fw-semibold mb-3">{{ __('lang.remarks') }}</h2>
        <textarea name="remarks" class="form-control" rows="3">{{ old('remarks', $worker->remarks ?? null) }}</textarea>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h2 class="h6 fw-semibold mb-3">{{ __('lang.worker_section_photos') }}</h2>
        <div class="row g-4">
            <div class="col-sm-6 col-lg-4">
                <label class="form-label d-block">{{ __('lang.photo') }}</label>
                @if ($worker?->photoUrl())
                    <img src="{{ $worker->photoUrl() }}" alt="" class="rounded-3 border mb-2 d-block" style="width: 6rem; height: 6rem; object-fit: cover;">
                @endif
                <input type="file" name="photo" class="form-control form-control-sm" accept="image/*">
                @error('photo') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>

            <div class="col-sm-6 col-lg-4">
                <label class="form-label d-block">{{ __('lang.cv_attachment') }}</label>
                @if ($worker?->cvAttachmentUrl())
                    <a href="{{ $worker->cvAttachmentUrl() }}" target="_blank" rel="noopener" class="d-block mb-2 small">
                        <i class="bi bi-file-earmark-text me-1"></i>{{ __('lang.view_file') }}
                    </a>
                @endif
                <input type="file" name="cv_attachment" class="form-control form-control-sm" accept="image/*,application/pdf">
                @error('cv_attachment') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
        </div>
    </div>
</div>

@push('styles')
    <link rel="stylesheet" href="{{ asset('admin/vendor/tom-select/tom-select.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/css/tom-select-rtl.css') }}">
@endpush

@push('scripts')
    <script src="{{ asset('admin/vendor/tom-select/tom-select.complete.min.js') }}"></script>
    <script src="{{ asset('admin/js/location-select.js') }}"></script>
    <script src="{{ asset('admin/js/repeater.js') }}"></script>
@endpush