@extends('backoffice.layout.master')
@section('setSectionTitle', __('Modifica Offerta di Lavoro'))
@section('setSectionDescription', __('Modifica l\'offerta di lavoro: :title', ['title' => $job->title]))

@section('setContent')
    <div class="container-fluid">
        <form action="{{ route('organization.jobs.update', $job->id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="row">
                <div class="col-12 col-md-6 col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="form-group mb-4">
                                        <x-select-field
                                            label="{{ __('Tipo di contratto') }}"
                                            name="contract_type"
                                            :data="$contractTypes"
                                            value="value"
                                            text="text"
                                            :selected="old('contract_type', $job->contract_type)"
                                            :required="[true, false]"
                                            />
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="form-group mb-4">
                                        <x-select-field
                                            label="{{ __('Modalità di lavoro') }}"
                                            name="work_mode"
                                            :data="$workModes"
                                            value="value"
                                            text="text"
                                            :selected="old('work_mode', $job->work_mode)"
                                            :required="[true, false]"
                                            />
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="form-group mb-4">
                                        <x-select-field
                                            label="{{ __('Sede di lavoro') }}"
                                            name="organization_site_id"
                                            :data="$organizationSites"
                                            value="id"
                                            text="alias"
                                            :selected="old('organization_site_id', $job->organization_site_id)"
                                            :required="[true, false]"
                                            />
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="form-group mb-4">
                                        <x-input-field
                                            label="{{ __('Orario di lavoro') }}"
                                            name="working_hours"
                                            :value="old('working_hours', $job->working_hours)"
                                            :required="[false, false]"
                                            />
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="form-group mb-4">
                                        <x-input-field
                                            label="{{ __('Retribuzione minima') }}"
                                            name="ral_min"
                                            type="number"
                                            :value="old('ral_min', $job->ral_min)"
                                            :required="[false, false]"
                                            />
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="form-group mb-4">
                                        <x-input-field
                                            label="{{ __('Retribuzione massima') }}"
                                            name="ral_max"
                                            type="number"
                                            :value="old('ral_max', $job->ral_max)"
                                            :required="[false, false]"
                                            />
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group mb-4">
                                        <label for="description" class="form-label">{{ __('Descrizione offerta di lavoro') }}</label>
                                        <textarea
                                            class="form-control"
                                            id="description"
                                            name="description"
                                            required
                                            rows="6"
                                            >{{ old('description', $job->description) }}</textarea>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group mb-4">
                                        <label for="benefits" class="form-label">{{ __('Benefits') }}</label>
                                        <textarea
                                            class="form-control"
                                            id="benefits"
                                            name="benefits"
                                            rows="6"
                                            >{{ old('benefits', $job->benefits) }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="col-12">
                                <div class="form-group mb-4">
                                    <x-input-field
                                        label="{{ __('Posizione') }}"
                                        name="position"
                                        :value="old('position', $job->position)"
                                        :required="[true, false]"
                                        />
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group mb-4">
                                    <x-select-field
                                        label="{{ __('Categoria') }}"
                                        name="job_category_id"
                                        :data="$jobsCategories"
                                        value="id"
                                        text="name"
                                        :selected="old('job_category_id', $job->job_category_id)"
                                        :required="[true, false]"
                                        />
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label skills-label">{{ __('Skills richieste') }}</label>
                                <div class="skills-selection"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="d-flex">
                        <button type="submit" class="btn btn-success">{{ __('Salva modifiche') }}</button>
                    </div>
                </div>

            </div>
        </form>
    </div>

@endsection

@section('setBodyEnd')
    <script>
        const skills = @json($skills);
        const selectedSkills = @json($selectedSkills);

        document.addEventListener('DOMContentLoaded', function() {
            const categorySelect = document.getElementById('job_category_id');
            const skillsContainer = document.querySelector('.skills-selection');
            const skillsLabel = document.querySelector('.skills-label');
            let currentCategoryId = categorySelect.value;

            // Funzione per rendere le skills
            function renderSkills(categoryId, isInitialLoad = false) {
                skillsContainer.innerHTML = '';
                skillsLabel.style.display = 'none';

                if (!categoryId) {
                    return;
                }

                const categorySkills = skills.filter(skill => skill.job_category_id == categoryId);

                if (categorySkills.length === 0) {
                    skillsContainer.innerHTML = '<p class="text-muted small">{{ __("Nessuna skill disponibile per questa categoria") }}</p>';
                    return;
                }

                skillsLabel.style.display = 'block';

                const skillsWrapper = document.createElement('div');
                skillsWrapper.className = 'skills-checkboxes';

                categorySkills.forEach(skill => {
                    const checkboxDiv = document.createElement('div');
                    checkboxDiv.className = 'form-check mb-2';

                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.className = 'form-check-input';
                    checkbox.id = `skill_${skill.id}`;
                    checkbox.name = 'skills[]';
                    checkbox.value = skill.id;

                    // Preseleziono le skills già associate solo al caricamento iniziale
                    if (isInitialLoad && selectedSkills.includes(skill.id)) {
                        checkbox.checked = true;
                    }

                    const label = document.createElement('label');
                    label.className = 'form-check-label';
                    label.htmlFor = `skill_${skill.id}`;
                    label.textContent = skill.name;

                    checkboxDiv.appendChild(checkbox);
                    checkboxDiv.appendChild(label);
                    skillsWrapper.appendChild(checkboxDiv);
                });

                skillsContainer.appendChild(skillsWrapper);
            }

            // Renderizzo le skills all'avvio se c'è una categoria selezionata
            if (currentCategoryId) {
                renderSkills(currentCategoryId, true);
            } else {
                skillsLabel.style.display = 'none';
            }

            // Evento per cambiamento categoria
            categorySelect.addEventListener('change', function() {
                renderSkills(this.value, false);
                currentCategoryId = this.value;
            });
        });
    </script>
@endsection