{% extends 'base.html.twig' %}

{% block title %}Ajouter un salarié{% endblock %}


{% block stylesheets %}
{{ parent() }}
<style>
.hidden {
    display: none !important;
}
.pointer-events-none {
    pointer-events: none;
    background-color: #e9ecef !important; /* Gris clair */
    color: #6c757d !important; /* Gris foncé */
    border-color: #ced4da !important; /* Bordure gris clair */
    opacity: 0.5; /* Ajout d'opacité pour rendre plus visible que le champ est désactivé */
}
</style>
{% endblock %}

{% block body %}
<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h1>Ajouter un salarié</h1>
                        
                        {{ form_start(form) }}
                        
                        {% if not form.vars.valid %}
                            <ul>
                                {% for child in form.children %}
                                    {% for error in child.vars.errors %}
                                        <li>{{ error.message }}</li>
                                    {% endfor %}
                                {% endfor %}
                            </ul>
                        {% endif %}

                        
                        <div class="mb-3" id="entrepriseContainer">
                            {{ form_label(form.contrat.entreprise, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.contrat.entreprise, {'attr': {'class': 'form-select'}, 'id': 'entreprise'}) }}
                        </div>

                        <div class="card mb-3" id="informationsContainer">
                            <div class="card-header">
                                 <h4 style="margin-bottom:35px;">Informations Salarié:</h4>
                                 <div class="mb-3" id="matriculeContainer">
                            {{ form_label(form.matricule, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.matricule, {'attr': {'class': 'form-control'}, 'id': 'matricule'}) }}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.titre, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.titre, {'attr': {'class': 'form-select'}}) }}
                        </div>
                        
                        <div class="mb-3">
                            {{ form_label(form.nom, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.nom, {'attr': {'class': 'form-control'}}) }}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.prenom, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.prenom, {'attr': {'class': 'form-control'}}) }}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.adresse1, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.adresse1, {'attr': {'class': 'form-control'}}) }}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.adresse2, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.adresse2, {'attr': {'class': 'form-control'}})}}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.codePostal, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.codePostal, {'attr': {'class': 'form-control'}}) }}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.ville, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.ville, {'attr': {'class': 'form-control'}}) }}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.dateNaissance, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.dateNaissance, {'attr': {'class': 'form-control', 'type': 'date', 'name': 'dateNaissance'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.niveauDiplome, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.niveauDiplome, {'attr': {'class': 'form-select'}}) }}
                        </div>
                    </div>
                </div>

                <div class="card mb-3" id="coordonnéeContainer">
                    <div class="card-header">
                            <h4 style="margin-bottom:35px;">Coordonnées:</h4>
                                <h5 style="margin-bottom:15px;margin-top:25px;">Coordonnées personnelles:</h5>
                        <div class="mb-3">
                            {{ form_label(form.telPerso, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.telPerso, {'attr': {'class': 'form-control phone-field'}}) }}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.mailPerso, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.mailPerso, {'attr': {'class': 'form-control'}}) }}
                        </div>

                                <h5 style="margin-bottom:15px;margin-top:25px;">Coordonnées professionnelles:</h5>
                        <div class="mb-3">
                           
                            {{ form_label(form.telPro, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.telPro, {'attr': {'class': 'form-control phone-field'}}) }}
                            
                            {{ form_label(form.mailPro, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.mailPro, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                </div>

                        <!-- Carte pour les champs de contrat -->
                        <div class="card mb-3" id="contratContainer">
                            <div class="card-header">
                                <h5 class="card-title">Détails du contrat</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3"  id="typeContrat">
                                    {{ form_label(form.contrat.typeContrat, null, {'label_attr': {'class': 'form-label'}}) }}*
                                    {{ form_widget(form.contrat.typeContrat, {'attr': {'class': 'form-control', 'id': 'typeContrat'}}) }}
                                </div>  

                                {#Champs differents selon contrat selectionné#}
                                <div class="mb-3" id="boiteInterimaireContainer" style="display:none;">
                                    {{ form_label(form.contrat.boiteInterimaire, null, {'label_attr': {'class': 'form-label'}}) }}*
                                    {{ form_widget(form.contrat.boiteInterimaire, {'attr': {'class': 'form-control'}, 'id': 'boiteInterimaire'}) }}
                                </div>

                                
                                <div class="mb-3" id="niveauQualifAlternantContainer" style="display:none;">
                                    {{ form_label(form.contrat.niveauQualifApprentissage, null, {'label_attr': {'class': 'form-label'}}) }}*
                                    {{ form_widget(form.contrat.niveauQualifApprentissage, {'attr': {'class': 'form-control'}}) }}
                                </div>

                                <div class="mb-3" id="coeffMajoration" style="display:none;">
                                    {{ form_label(form.contrat.coefficientMajoration, null, {'label_attr': {'class': 'form-label'}}) }}*
                                    {{ form_widget(form.contrat.coefficientMajoration, {'attr': {'class': 'form-control'}}) }}
                                </div>

                                 <div class="mb-3" id="statut">
                                            {{ form_label(form.contrat.statut, null, {'label_attr': {'class': 'form-label'}}) }}*
                                            {{ form_widget(form.contrat.statut, {'attr': {'class': 'form-control', 'id': 'nouveau_salarie_form_contrat_statut'}}) }}
                                        </div>

                                        <div class="mb-3" id="coeffNiveauPaieContainer">
                                            {{ form_label(form.contrat.coeffNiveauPaie, null, {'label_attr': {'class': 'form-label'}}) }}*
                                            {{ form_widget(form.contrat.coeffNiveauPaie, {'attr': {'class': 'form-control', 'id': 'nouveau_salarie_form_contrat_coeffNiveauPaie'}}) }}
                                        </div>


                                        <div class="mb-3" id="contratHoraireContainer">
                                            {{ form_label(form.contrat.contratHoraire, null, {'label_attr': {'class': 'form-label'}}) }}*
                                            {{ form_widget(form.contrat.contratHoraire, {'attr': {'class': 'form-select', 'id': 'nouveau_salarie_form_contrat_contratHoraire'}}) }}
                                        </div>

                                        <div class="mb-3" id="tauxHoraireContainer">
                                            {{ form_label(form.contrat.tauxHoraire, null, {'label_attr': {'class': 'form-label'}}) }}*
                                            {{ form_widget(form.contrat.tauxHoraire, {'attr': {'class': 'form-control', 'id': 'nouveau_salarie_form_contrat_tauxHoraire'}}) }}
                                        </div>

                                        <div class="mb-3">
                                            {{ form_label(form.contrat.salaireBrut, null, {'label_attr': {'class': 'form-label'}}) }}*
                                            {{ form_widget(form.contrat.salaireBrut, {'attr': {'class': 'form-control', 'id': 'nouveau_salarie_form_contrat_salaireBrut'}}) }}
                                        </div>

                                <div class="mb-3">
                                    {{ form_label(form.contrat.dateDebut, null, {'label_attr': {'class': 'form-label'}}) }}*
                                    {{ form_widget(form.contrat.dateDebut, {'attr': {'class': 'form-control', 'type': 'date'}}) }}
                                </div>

                                <div class="mb-3" id="containerDateFinTheorique" style="display:block;">
                                    {{ form_label(form.contrat.dateFinTheorique, null, {'label_attr': {'class': 'form-label'}}) }}*
                                    {{ form_widget(form.contrat.dateFinTheorique, {'attr': {'class': 'form-control', 'type': 'date'}}) }}
                                </div>

                                <div class="mb-3" id="containerPeriodeEssai" style="display:block;">
                                    {{ form_label(form.contrat.dureePeriodeEssai, null, {'label_attr': {'class': 'form-label'}}) }}*
                                    {{ form_widget(form.contrat.dureePeriodeEssai, {'attr': {'class': 'form-select', 'id': 'dureePeriodeEssai'}}) }}
                                </div>
                                <div class="mb-3" id="containerDateFinPeriodeEssai" style="display:block;">
                                    {{ form_label(form.contrat.dateFinPeriodeEssai, null, {'label_attr': {'class': 'form-label'}}) }}*
                                    {{ form_widget(form.contrat.dateFinPeriodeEssai, {'attr': {'class': 'form-control', 'type': 'date', 'id': 'dateFinPeriodeEssai'}}) }}
                                </div>
               
                                <div class="mb-3">
                                    {{ form_label(form.contrat.intitulePoste, null, {'label_attr': {'class': 'form-label'}}) }}*
                                    {{ form_widget(form.contrat.intitulePoste, {'attr': {'class': 'form-select'}}) }}
                                </div>

                                <div class="mb-3" id="managerContainer">
                                    {{ form_label(form.contrat.manager, null, {'label_attr': {'class': 'form-label'}}) }}
                                    {{ form_widget(form.contrat.manager, {'attr': {'class': 'form-check-input manager-checkbox'}}) }}
                                </div>
                        
                            </div>
                        </div>
                               


                                
                        <div class="mb-3">
                            {{ form_label(form.contrat.responsableHierarchique, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.contrat.responsableHierarchique, {'attr': {'class': 'form-control'}, 'id': 'responsable'}) }}
                        </div>

                        <!-- Carte pour les champs d'avantages -->
                       <div class="mb-3" id="hasAvantagesContainer">
                            {{ form_label(form.hasAvantages, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.hasAvantages, {'attr': {'class': 'form-check-input avantages-checkbox'}}) }}
                        </div>

                        <!-- Conteneur des champs d'avantages -->
                        <div class="card mb-3" id="avantagesContainer" style="display: none;">
                            <div class="card-body" id="detailsAvantagsContainer">
                               <div class="mb-3">
                                    {{ form_label(form.avantages.vehiculeEntreprise, null, {'label_attr': {'class': 'form-label'}}) }}
                                    {{ form_widget(form.avantages.vehiculeEntreprise, {'attr': {'class': 'form-select', 'id': 'nouveau_salarie_form_avantages_vehiculeEntreprise'}}) }}
                                </div>
                                       
                                        <div class="mb-3">
                                            {{ form_label(form.avantages.badgeTelepeage, null, {'label_attr': {'class': 'form-label'}}) }}
                                            {{ form_widget(form.avantages.badgeTelepeage, {'attr': {'class': 'form-control', 'id': 'badgeTelepeage'}}) }}
                                        </div>
                                        <div class="mb-3">
                                            {{ form_label(form.avantages.carteTotal, null, {'label_attr': {'class': 'form-label'}}) }}
                                            {{ form_widget(form.avantages.carteTotal, {'attr': {'class': 'form-control', 'id': 'carteTotal'}}) }}
                                        </div>
                                        <div class="mb-3">
                                            {{ form_label(form.avantages.device, null, {'label_attr': {'class': 'form-label'}}) }}
                                            {{ form_widget(form.avantages.device, {'attr': {'class': 'form-control', 'id': 'device'}}) }}
                                        </div>
                                        <div class="mb-3">
                                            {{ form_label(form.avantages.materiels, null, {'label_attr': {'class': 'form-label'}}) }}
                                            {{ form_widget(form.avantages.materiels, {'attr': {'class': 'form-control', 'id': 'materiels'}}) }}
                                        </div>
                                    </div>
                                </div>
                            

                        <div class="mb-3">
                            {{ form_label(form.numSecu, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.numSecu, {'attr': {'class': 'form-control', 'id': 'nouveau_salarie_form_numSecu'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.situationFamiliale, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.situationFamiliale, {'attr': {'class': 'form-select'}}) }}
                        </div>

                         <div class="mb-3">
                            {{ form_label(form.mutuelle, null, {'label_attr': {'class': 'form-label'}}) }}*
                            {{ form_widget(form.mutuelle, {'attr': {'class': 'form-check-input', 'id': 'mutuelle'}}) }}
                        </div>

                        <div class="mb-3" id="hasEnfantsContainer">
                            {{ form_label(form.hasEnfants, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.hasEnfants, {'attr': {'class': 'form-check-input enfant-checkbox'}}) }}
                        </div>

                        <div class="card mb-3" id="enfantsContainer" style="display:none;">
                            <div class="card-header" style="padding-bottom:0px;">
                                <h5 class="card-title" >Ajouter un enfant pour ce salarié</h5>
                            </div>
                           <div class="card-body" id="detailsEnfantsContainer">
                                    {% for enfant in form.enfants %}
                                        <div class="mb-3 enfant-form">
                                            {{ form_row(enfant.nom, {'attr': {'class': 'form-control'}}) }}
                                            {{ form_row(enfant.prenom, {'attr': {'class': 'form-control'}}) }}
                                            {{ form_row(enfant.dateNaissance, {'attr': {'class': 'form-control', 'type': 'date'}}) }}
                                        </div>
                                    {% endfor %}
                                {{ form_widget(form.enfants, {'attr': {'style': 'display: none;', 'required': false}}) }}
                            </div>
                            <div class="card-footer">
                                <button type="button" class="ajouter-custom font-14" id="addEnfantBtn"> <i class="ri-add-line"></i>Ajouter un autre enfant</button>
                            </div>
                     
</div>
              
                        
                                    <div class="col-12 text-center d-flex justify-content-center">
                                <button type="submit" >Ajouter</button>
                                {{ form_end(form) }}
                                <button class="retour-custom" onclick="retourPage(event);" style="margin-left:10px;">
                                    <i class="ri-reply-line font-14"></i> Retour
                                </button>
                            </div>
                             
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const statutSelect = document.getElementById('{{ form.contrat.statut.vars.id }}');
    const contratHoraireSelect = document.getElementById('{{ form.contrat.contratHoraire.vars.id }}');
    const tauxHoraireInput = document.getElementById('{{ form.contrat.tauxHoraire.vars.id }}');
    const tauxHoraireContainer = tauxHoraireInput.closest('.mb-3');
    const salaireBrutInput = document.getElementById('{{ form.contrat.salaireBrut.vars.id }}');
    const coeffNiveauPaieSelect = document.getElementById('{{ form.contrat.coeffNiveauPaie.vars.id }}');
    const typeContratSelect = document.getElementById('{{ form.contrat.typeContrat.vars.id }}');
    const numSecuInput = document.getElementById('{{ form.numSecu.vars.id }}');
    const hasEnfantsCheckbox = document.querySelector('.enfant-checkbox');
    const enfantsContainer = document.getElementById('enfantsContainer');
    const addEnfantBtn = document.getElementById('addEnfantBtn');
    const detailsEnfantsContainer = document.getElementById('detailsEnfantsContainer');
    const hasAvantagesCheckbox = document.querySelector('.avantages-checkbox');
    const avantagesContainer = document.getElementById('avantagesContainer');
    let enfantIndex = {{ form.enfants|length }};

    if (statutSelect && contratHoraireSelect) {
        statutSelect.addEventListener('change', handleStatutChange);
        contratHoraireSelect.addEventListener('change', handleContratHoraireChange);
        tauxHoraireInput.addEventListener('input', calculateSalaireBrut);

        function handleStatutChange() {
            const statut = statutSelect.value;
            fetch('/get-contrat-horaire-options', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json;charset=UTF-8' },
                body: JSON.stringify({ statut })
            })
            .then(response => response.json())
            .then(data => {
                updateContratHoraireOptions(data.choices, data.disabled);
                handleContratHoraireChange();
            })
            .catch(error => console.error('Failed to fetch contrat horaire options:', error));
        }

        function updateContratHoraireOptions(options, disabled) {
            contratHoraireSelect.innerHTML = ''; // Clear existing options
            options.forEach(option => {
                const opt = document.createElement('option');
                opt.value = option.value;
                opt.text = option.text;
                contratHoraireSelect.add(opt);
            });
            contratHoraireSelect.disabled = disabled;
            if (disabled && options.length > 0) {
                contratHoraireSelect.value = options[0].value;
            }
        }

        function handleContratHoraireChange() {
            const contratHoraire = contratHoraireSelect.value;
            if (contratHoraire === 'forfait') {
                tauxHoraireInput.value = '';
                tauxHoraireInput.disabled = true;
                tauxHoraireContainer.classList.add('hidden');
                salaireBrutInput.value = '';
            } else {
                tauxHoraireInput.disabled = false;
                tauxHoraireContainer.classList.remove('hidden');
                calculateSalaireBrut();
            }
        }

        function calculateSalaireBrut() {
            const contratHoraire = contratHoraireSelect.value;
            const tauxHoraire = parseFloat(tauxHoraireInput.value.replace(',', '.'));

            if (!isNaN(tauxHoraire)) {
                let salaireBrut;

                if (contratHoraire === '35_heures') {
                    salaireBrut = tauxHoraire * 151.67;
                } else if (contratHoraire === '39_heures') {
                    salaireBrut = tauxHoraire * 169;
                } else {
                    salaireBrut = '';
                }

                salaireBrutInput.value = salaireBrut !== '' ? salaireBrut.toFixed(2) : '';
            } else {
                salaireBrutInput.value = '';
            }
        }

        handleStatutChange(); // Initial call to set state based on current values
        handleContratHoraireChange(); // Set initial visibility of tauxHoraireContainer
    } else {
        console.error('One or more input elements not found');
    }

    if (coeffNiveauPaieSelect) {
        statutSelect.addEventListener('change', function() {
            var selectedValue = statutSelect.value;
            fetch('/update-coefficients?statut=' + selectedValue)
                .then(response => response.json())
                .then(data => updateCoeffNiveauPaieOptions(data))
                .catch(error => console.error('Error fetching coefficients:', error));
        });

        function updateCoeffNiveauPaieOptions(options) {
            coeffNiveauPaieSelect.innerHTML = ''; // Clear existing options
            for (const [text, value] of Object.entries(options)) {
                var opt = document.createElement('option');
                opt.value = value;
                opt.textContent = text;
                coeffNiveauPaieSelect.appendChild(opt);
            }
        }
    }

    if (typeContratSelect) {
        typeContratSelect.addEventListener('change', function() {
            var selectedValue = typeContratSelect.value;
            var niveauQualifAlternantContainer = document.getElementById('niveauQualifAlternantContainer');
            var containerDateFinTheorique = document.getElementById('containerDateFinTheorique');
            var boiteInterimaireContainer = document.getElementById('boiteInterimaireContainer');
            var coeffMajoration = document.getElementById('coeffMajoration');

            if (selectedValue === 'alternant' || selectedValue === 'apprentissage') {
                if (niveauQualifAlternantContainer) niveauQualifAlternantContainer.style.display = 'block';
                if (containerDateFinTheorique) containerDateFinTheorique.style.display = 'block';
                if (boiteInterimaireContainer) boiteInterimaireContainer.style.display = 'none';
                if (coeffMajoration) coeffMajoration.style.display = 'none';
            } else if (selectedValue === 'cdi') {
                if (niveauQualifAlternantContainer) niveauQualifAlternantContainer.style.display = 'none';
                if (containerDateFinTheorique) containerDateFinTheorique.style.display = 'none';
                if (boiteInterimaireContainer) boiteInterimaireContainer.style.display = 'none';
                if (coeffMajoration) coeffMajoration.style.display = 'none';
            } else if (selectedValue === 'interimaire') {
                if (niveauQualifAlternantContainer) niveauQualifAlternantContainer.style.display = 'none';
                if (containerDateFinTheorique) containerDateFinTheorique.style.display = 'block';
                if (boiteInterimaireContainer) boiteInterimaireContainer.style.display = 'block';
                if (coeffMajoration) coeffMajoration.style.display = 'block';
            } else {
                if (niveauQualifAlternantContainer) niveauQualifAlternantContainer.style.display = 'none';
                if (containerDateFinTheorique) containerDateFinTheorique.style.display = 'block';
                if (boiteInterimaireContainer) boiteInterimaireContainer.style.display = 'none';
                if (coeffMajoration) coeffMajoration.style.display = 'none';
            }
        });
    }

    if (numSecuInput) {
        numSecuInput.addEventListener('input', function () {
            let value = this.value.replace(/\D/g, ''); // Replace non-numeric characters
            if (value.length > 15) value = value.slice(0, 15); // Limit to 15 characters

            let formattedValue = '';
            if (value.length > 0) formattedValue += value.substring(0, 1);
            if (value.length > 1) formattedValue += ' ' + value.substring(1, 3);
            if (value.length > 3) formattedValue += ' ' + value.substring(3, 5);
            if (value.length > 5) formattedValue += ' ' + value.substring(5, 7);
            if (value.length > 7) formattedValue += ' ' + value.substring(7, 10);
            if (value.length > 10) formattedValue += ' ' + value.substring(10, 13);
            if (value.length > 13) formattedValue += ' ' + value.substring(13, 15);

            this.value = formattedValue.trim(); // Apply the format
        });
    }

    if (hasEnfantsCheckbox) {
        hasEnfantsCheckbox.addEventListener('change', function() {
            if (hasEnfantsCheckbox.checked) {
                enfantsContainer.style.display = 'block';
                addEnfantBtn.style.display = 'block';

                    var newEnfantForm = createEnfantForm(enfantIndex);
                    detailsEnfantsContainer.appendChild(newEnfantForm);
                    console.log('Added initial enfant form:', newEnfantForm);
                    enfantIndex++;
            } else {
                enfantsContainer.style.display = 'none';
                addEnfantBtn.style.display = 'none';
                while (detailsEnfantsContainer.firstChild) {
                    detailsEnfantsContainer.removeChild(detailsEnfantsContainer.firstChild);
                }
            }
        });

        if (hasEnfantsCheckbox.checked) {
            hasEnfantsCheckbox.dispatchEvent(new Event('change'));
        } else {
            enfantsContainer.style.display = 'none';
            addEnfantBtn.style.display = 'none';
            }
        }

        if (addEnfantBtn) {
            addEnfantBtn.addEventListener('click', function() {
                var newEnfantForm = createEnfantForm(enfantIndex);
                detailsEnfantsContainer.appendChild(newEnfantForm);
                console.log('Added new enfant form:', newEnfantForm);
                enfantIndex++;
            });
        }

        function createEnfantForm(index) {
            var newEnfantForm = document.createElement('div');
            newEnfantForm.classList.add('mb-3', 'enfant-form');
            newEnfantForm.innerHTML = `
                <div>
                    <button type="button" class="btn btn-danger btn-sm float-end remove-enfant" onclick="removeEnfantForm(this)">X</button>
                </div>
                <div>
                    <label for="form_enfants_${index}_nom" class="form-label">Nom</label>
                    <input type="text" id="form_enfants_${index}_nom" name="form[enfants][${index}][nom]" required="required" class="form-control">
                </div>
                <div>
                    <label for="form_enfants_${index}_prenom" class="form-label">Prénom</label>
                    <input type="text" id="form_enfants_${index}_prenom" name="form[enfants][${index}][prenom]" required="required" class="form-control">
                </div>
                <div>
                    <label for="form_enfants_${index}_dateNaissance" class="form-label">Date de naissance</label>
                    <input type="date" id="form_enfants_${index}_dateNaissance" name="form[enfants][${index}][dateNaissance]" required="required" class="form-control">
                </div>
            `;
            console.log('Created enfant form:', newEnfantForm);
            return newEnfantForm;
        }

        function removeEnfantForm(button) {
            var enfantForm = button.closest('.enfant-form');
            console.log('Removing enfant form:', enfantForm);
            enfantForm.parentNode.removeChild(enfantForm);
        }

        document.querySelector('form').addEventListener('submit', function(event) {
            var enfantForms = document.querySelectorAll('.enfant-form');
            console.log('Submitting form with enfant forms:');
            enfantForms.forEach(function(form, index) {
                var nom = form.querySelector('[name^="form[enfants][' + index + '][nom]"]').value;
                var prenom = form.querySelector('[name^="form[enfants][' + index + '][prenom]"]').value;
                var dateNaissance = form.querySelector('[name^="form[enfants][' + index + '][dateNaissance]"]').value;
                console.log('Enfant ' + index + ':', { nom, prenom, dateNaissance });
            });
        });
    });

    // Définition de la fonction pour supprimer un formulaire enfant
    function removeEnfantForm(button) {
        var enfantForm = button.closest('.enfant-form');
        enfantForm.parentNode.removeChild(enfantForm);
    }

    // Ajout d'un gestionnaire d'événements pour chaque bouton de suppression
    document.addEventListener('DOMContentLoaded', function() {
        var removeEnfantButtons = document.querySelectorAll('.remove-enfant');
        removeEnfantButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                removeEnfantForm(button);
            });
        });
    });

document.addEventListener('DOMContentLoaded', function() {
        var hasAvantagesCheckbox = document.querySelector('.avantages-checkbox');
        var avantagesContainer = document.getElementById('avantagesContainer');
        
        var detailsAvantagesContainer = document.getElementById('detailsAvantagesContainer');

    if (hasAvantagesCheckbox) {
        hasAvantagesCheckbox.addEventListener('change', function() {
                if (hasAvantagesCheckbox.checked) {
                    avantagesContainer.style.display = 'block';
                   
                } else {
                    avantagesContainer.style.display = 'none';
                
                    }
                })
            }
            })  
            ;

    </script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var entrepriseSelect = document.getElementById('entreprise');

    if (entrepriseSelect) {
        entrepriseSelect.addEventListener('change', function() {
            var selectedEntrepriseId = this.value;

            // Envoi de la requête AJAX pour récupérer les vehicules hiérarchiques
            fetch('/vehicules/' + selectedEntrepriseId, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erreur lors de la récupération des vehicule');
                }
                return response.json();
            })
            .then(vehicules => {
                updateVehicules(vehicules);
            })
            .catch(error => {
                console.error(error);
            });
        });
    }
});

function updateVehicules(vehicules) {
    var vehiculeSelect = document.getElementById('nouveau_salarie_form_avantages_vehiculeEntreprise');

    // Effacer les options actuelles du select
    vehiculeSelect.innerHTML = '';

    // Ajouter les nouvelles options basées sur la réponse AJAX
    vehicules.forEach(function(vehicule) {
        var option = document.createElement('option');
        option.value = vehicule.id;
        option.textContent = vehicule.affichageVehicule; // Utilisation du texte d'affichage fourni par le serveur
        vehiculeSelect.appendChild(option);
    });
}

    const dateDebutInput = document.getElementById('{{ form.contrat.dateDebut.vars.id }}');
    const dureePeriodeEssaiSelect = document.getElementById('{{ form.contrat.dureePeriodeEssai.vars.id }}');
    const dateFinPeriodeEssaiInput = document.getElementById('{{ form.contrat.dateFinPeriodeEssai.vars.id }}');

    if (dateDebutInput && dureePeriodeEssaiSelect) {
        dateDebutInput.addEventListener('change', updateDateFinPeriodeEssai);
        dureePeriodeEssaiSelect.addEventListener('change', updateDateFinPeriodeEssai);
        updateDateFinPeriodeEssai(); // Initial call to set state based on current values
    }

    function updateDateFinPeriodeEssai() {
        const dateDebut = new Date(dateDebutInput.value);
        const duree = dureePeriodeEssaiSelect.value;

        if (!isNaN(dateDebut.getTime()) && duree !== 'autre') {
            const monthsToAdd = parseInt(duree.split(' ')[0], 10);
            dateDebut.setMonth(dateDebut.getMonth() + monthsToAdd);

            const dateFinPeriodeEssai = dateDebut.toISOString().split('T')[0];
            dateFinPeriodeEssaiInput.value = dateFinPeriodeEssai;
            dateFinPeriodeEssaiInput.readOnly = true;  // Rendre le champ en lecture seule pour les durées prédéfinies
        } else if (duree === 'autre') {
            dateFinPeriodeEssaiInput.value = '';
            dateFinPeriodeEssaiInput.readOnly = false;  // Permettre l'entrée manuelle
        } else {
            dateFinPeriodeEssaiInput.value = '';
            dateFinPeriodeEssaiInput.readOnly = true;  // Par défaut, lecture seule
        }
    }

    const entrepriseSelectId = 'nouveau_salarie_form_contrat_entreprise';
    console.log('Attempting to find entreprise select with ID:', entrepriseSelectId);

    const entrepriseSelect = document.getElementById(entrepriseSelectId);
document.addEventListener('DOMContentLoaded', function() {
    var entrepriseSelect = document.getElementById('entreprise');

    if (!entrepriseSelect) {
        console.error('entreprise select not found');
        return;
    }

    console.log('entrepriseSelect found');

    entrepriseSelect.addEventListener('change', function() {
        var selectedEntrepriseId = entrepriseSelect.value;
        console.log('entrepriseSelect changed:', selectedEntrepriseId);

        // Envoi de la requête AJAX pour récupérer les responsables hiérarchiques
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/salarie/responsable');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onload = function() {
            if (xhr.status === 200) {
                var responsables = JSON.parse(xhr.responseText);
                console.log('Responsables received:', responsables);
                updateResponsables(responsables);
            } else {
                console.error('Erreur lors de la récupération des responsables hiérarchiques');
            }
        };
        xhr.send(JSON.stringify({ entrepriseId: selectedEntrepriseId }));
    });

    function updateResponsables(responsables) {
        var responsableSelect = document.getElementById('responsable');

        if (!responsableSelect) {
            console.error('responsable select not found');
            return;
        }

        console.log('Updating responsables');

        // Effacer les options actuelles du select
        responsableSelect.innerHTML = '';

        // Ajouter les nouvelles options basées sur la réponse AJAX
        responsables.forEach(function(responsable) {
            var option = document.createElement('option');
            option.value = responsable.id;
            option.textContent = responsable.affichageResponsableHierarchique;
            responsableSelect.appendChild(option);
        });

        console.log('New responsables options added');
    }
});
</script>
{% endblock %}