@props([
    'action',
    'method' => 'POST',
    'position' => null,
    'departmentOptions' => [],
    'jobGradeOptions' => [],
    'submitLabel',
])

<form method="POST" action="{{ $action }}" novalidate>
    @csrf
    @if (strtoupper($method) !== 'POST')
        @method($method)
    @endif

    <div class="card">
        <div class="card-body">
            <div class="row g-3">
                @if ($position !== null)
                    <div class="col-md-4">
                        <x-ui.form.reference
                            :label="__('positions.fields.reference')"
                            :value="$position->code"
                        />
                    </div>
                @endif
                <div class="{{ $position !== null ? 'col-md-4' : 'col-md-6' }}">
                    <x-ui.form.input
                        name="title"
                        :label="__('positions.fields.title')"
                        :value="$position?->title"
                        :placeholder="__('positions.placeholders.title')"
                        required
                    />
                </div>

                <div class="{{ $position !== null ? 'col-md-4' : 'col-md-6' }}">
                    <x-ui.form.search-select
                        name="department_id"
                        lookup="departments"
                        :label="__('positions.fields.department')"
                        :options="$departmentOptions"
                        :selected="$position?->department_id"
                        :placeholder="__('positions.placeholders.department')"
                        required
                    />
                </div>

                <div class="col-md-6">
                    <x-ui.form.search-select
                        name="job_grade_id"
                        :label="__('positions.fields.job_grade')"
                        :options="$jobGradeOptions"
                        :selected="old('job_grade_id', $position?->job_grade_id)"
                        :placeholder="__('positions.placeholders.job_grade')"
                        optional
                    />
                </div>
                <div class="col-md-3">
                    <x-ui.form.input name="min_salary" type="number" step="0.01" min="0"
                        :label="__('positions.fields.min_salary')" :value="old('min_salary', $position?->min_salary)" />
                </div>
                <div class="col-md-3">
                    <x-ui.form.input name="max_salary" type="number" step="0.01" min="0"
                        :label="__('positions.fields.max_salary')" :value="old('max_salary', $position?->max_salary)" />
                </div>

                <div class="col-md-6">
                    <x-ui.form.input
                        name="salary"
                        type="number"
                        step="0.01"
                        min="0"
                        :label="__('positions.fields.salary')"
                        :value="old('salary', $position !== null ? $position->salary : null)"
                        :placeholder="__('positions.placeholders.salary')"
                        required
                    />
                </div>

                @if ($position !== null)
                    <div class="col-md-6">
                        <x-ui.form.select
                            name="is_active"
                            :label="__('positions.fields.status')"
                            :options="[
                                1 => __('positions.status.active'),
                                0 => __('positions.status.inactive'),
                            ]"
                            :selected="$position->is_active ? 1 : 0"
                            required
                        />
                    </div>
                @endif

                <div class="col-12">
                    <x-ui.form.field
                        name="description"
                        :label="__('positions.fields.description')"
                        optional
                        id="description"
                    >
                        <textarea
                            id="description"
                            name="description"
                            rows="5"
                            class="form-control @error('description') is-invalid @enderror"
                            placeholder="{{ __('positions.placeholders.description') }}"
                        >{{ old('description', $position?->description) }}</textarea>
                    </x-ui.form.field>
                </div>
                @foreach (['responsibilities', 'required_skills', 'kpis', 'required_training', 'career_path'] as $field)
                    <div class="col-md-6">
                        <x-ui.form.field :name="$field" :label="__('positions.fields.'.$field)" optional :id="$field">
                            <textarea id="{{ $field }}" name="{{ $field }}" rows="3"
                                class="form-control @error($field) is-invalid @enderror">{{ old($field, $position?->{$field}) }}</textarea>
                        </x-ui.form.field>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card-footer d-flex justify-content-end gap-2 bg-white">
            <x-ui.buttons.secondary :href="route('hr.positions.index')">
                {{ __('common.cancel') }}
            </x-ui.buttons.secondary>

            <x-ui.buttons.primary type="submit" icon="fe fe-save">
                {{ $submitLabel }}
            </x-ui.buttons.primary>
        </div>
    </div>
</form>
