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

{% block title %}Ajouter un contrat pour ce salarié{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.hidden {
    display: none !important;
}
.input-disabled {
   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 contrat pour {{salarie.titre}} {{salarie.nom}} {{salarie.prenom}}</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="typeContrat">
                                    {{ form_label(form.typeContrat, null, {'label_attr': {'class': 'form-label'}}) }}*
                                    {{ form_widget(form.typeContrat, {'attr': {'class': 'form-control', 'id': 'typeContrat'}}) }}
                                </div>

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

                                <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="boiteInterimaireContainer" style="display:none;">
                                            {{ form_label(form.boiteInterimaire, null, {'label_attr': {'class': 'form-label'}}) }}*
                                            {{ form_widget(form.boiteInterimaire, {'attr': {'class': 'form-control', 'id': 'boiteInterimaire'}}) }}
                                        </div>

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

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

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

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

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

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

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

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

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

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

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

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

                                        <div class="col-12 text-center"> 
                                            <button type="submit">Ajouter ce contrat</button>
                                            {{ form_end(form) }}
                                            <button class="retour-custom" onclick="retourPage(event);">
                                                <i class="ri-reply-line font-14"></i> Retour
                                            </button>
                                        </div>    
                                    </div>    
                                </div>   
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>          
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const statutSelect = document.getElementById('nouveau_contrat_salarie_form_statut');
    const contratHoraireSelect = document.getElementById('nouveau_contrat_salarie_form_contratHoraire');
    const tauxHoraireInput = document.getElementById('nouveau_contrat_salarie_form_tauxHoraire');
    const tauxHoraireContainer = document.getElementById('tauxHoraireContainer');
    const salaireBrutInput = document.getElementById('nouveau_contrat_salarie_form_salaireBrut');

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

        function handleStatutChange() {
            const statut = statutSelect.value;
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/get-contrat-horaire-options');
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.onload = function () {
                if (xhr.status === 200) {
                    const data = JSON.parse(xhr.responseText);
                    updateContratHoraireOptions(data.choices, data.disabled);
                    handleContratHoraireChange();
                } else {
                    console.error('Failed to fetch contrat horaire options');
                }
            };
            xhr.send(JSON.stringify({ statut }));
        }

        function updateContratHoraireOptions(options, disabled) {
            while (contratHoraireSelect.options.length > 0) {
                contratHoraireSelect.remove(0);
            }

            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 * 151.67;
                } else {
                    salaireBrut = '';
                }

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

        handleStatutChange();
        handleContratHoraireChange();
    } else {
        console.error('One or more input elements not found');
    }
});

</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded and parsed');
    
    var statutSelect = document.getElementById('nouveau_contrat_salarie_form_statut');
    var coeffNiveauPaieSelect = document.getElementById('nouveau_contrat_salarie_form_coeffNiveauPaie');

    if (!statutSelect || !coeffNiveauPaieSelect) {
        console.error('One or more input elements not found');
        console.log('statutSelect:', statutSelect);
        console.log('coeffNiveauPaieSelect:', coeffNiveauPaieSelect);
        return;
    }

    console.log('statutSelect and coeffNiveauPaieSelect found');

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

        fetch('/update-coefficients?statut=' + selectedValue)
            .then(response => {
                console.log('Received response:', response);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Coefficients received:', data);
                updateCoeffNiveauPaieOptions(data);
            })
            .catch(error => console.error('Error fetching coefficients:', error));
    });

    function updateCoeffNiveauPaieOptions(options) {
        console.log('Updating coeffNiveauPaie options with:', options);

        // Clear current options
        while (coeffNiveauPaieSelect.options.length) {
            coeffNiveauPaieSelect.remove(0);
        }

        // Add new options
        for (const [text, value] of Object.entries(options)) {
            var opt = document.createElement('option');
            opt.value = value;
            opt.textContent = text;
            coeffNiveauPaieSelect.appendChild(opt);
        }
        console.log('New options added:', options);
    }
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded and parsed');

    var typeContratSelect = document.getElementById('nouveau_contrat_salarie_form_typeContrat');

    if (!typeContratSelect) {
        console.error('typeContrat select not found');
        return;
    }

    console.log('typeContratSelect found');
    console.log('typeContratSelect options:', typeContratSelect.options);

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

        var niveauQualifAlternantContainer = document.getElementById('niveauQualifAlternantContainer');
        var containerDateFinTheorique = document.getElementById('containerDateFinTheorique');
        var boiteInterimaireContainer = document.getElementById('boiteInterimaireContainer');
        var coeffMajoration = document.getElementById('coeffMajoration');

        console.log('niveauQualifAlternantContainer:', niveauQualifAlternantContainer);
        console.log('containerDateFinTheorique:', containerDateFinTheorique);
        console.log('boiteInterimaireContainer:', boiteInterimaireContainer);
        console.log('coeffMajoration:', 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';
            }
        }
    });
});

</script>

<script>
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>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dateDebutInput = document.getElementById('{{ form.dateDebut.vars.id }}');
    const dureePeriodeEssaiSelect = document.getElementById('{{ form.dureePeriodeEssai.vars.id }}');
    const dateFinPeriodeEssaiInput = document.getElementById('{{ form.dateFinPeriodeEssai.vars.id }}');

    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
        }
    }

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

</script>
{% endblock %}