@extends('backoffice.layout.master')
@section('setSectionTitle', __('Nuova Offerta di Lavoro'))
@section('setSectionDescription', __('Crea una nuova offerta di lavoro per la tua organizzazione'))

@section('setContent')
    <div class="container-fluid">
        <form action="{{ route('organization.jobs.store') }}" method="POST">
            @csrf
            <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"
                                            :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"
                                            :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"
                                            :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"
                                            :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"
                                            :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"
                                            :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"
                                            ></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"
                                            ></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"
                                        :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"
                                        :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">{{ __('Crea offerta di lavoro') }}</button>
                    </div>
                </div>

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

@endsection

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

        document.addEventListener('DOMContentLoaded', function() {
            const categorySelect = document.getElementById('job_category_id');
            const skillsContainer = document.querySelector('.skills-selection');
            const skillsLabel = document.querySelector('.skills-label');
            skillsLabel.style.display = 'none';

            categorySelect.addEventListener('change', function() {
                const selectedCategoryId = this.value;
                skillsContainer.innerHTML = '';
                skillsLabel.style.display = 'none';

                if (!selectedCategoryId) {
                    return;
                }

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

                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;

                    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);
            });
        });
    </script>
@endsection