{% set contratResilie =  contrat  and  contrat.contratResiliations[0] is defined ? contrat.contratResiliations[0] %}
<div id="popup-resilier-{{ equipement.id }}" style="display:none" class="popup-resilier-contrat" >
    {% if contratResilie %}
        <div class="d-flex">
            <button  class="btn  btn-outline-danger me-1 ms-auto" data-confirm="1" data-href="{{ path('equipement_cancel_resiliation_contrat', {id: contrat.contratResiliations[0].id}) }}" >Annuler la résiliation</button>
        </div>
    {% endif %}
    <form class="px-0 form_resilier_contrat" action="{{ path('post_equipement_resilier_contrat', {id: equipement.id}) }}" method="post">
        <input type="hidden" data-formchanged="no" name="id_contrat_resiliation" value="{{ contratResilie ? contratResilie.id : '' }}">
        <div class="d-flex mb-3 flex-column">
            <div class="form-check-inline">Mode de résiliation </div>
            <div class="d-flex" style="margin-left: 58px;">
                <div class="form-check form-check-inline ms-0">
                    <input class="form-check-input check-input-fill" data-formchanged="no" type="radio" name="mode_resilisation_client" value="Email"
                           {% if not contratResilie or (contratResilie.typeEnvoi and contratResilie.typeEnvoi.libelle == 'Email') %}checked{% endif %}>
                    <label class="form-check-label">E-mail</label>
                </div>
                <div class="form-check form-check-inline " style="margin-left: 153px;">
                    <input class="form-check-input check-input-fill" data-formchanged="no" type="radio" name="mode_resilisation_client" value="Courrier"
                           {% if contratResilie and contratResilie.typeEnvoi and  contratResilie.typeEnvoi.libelle == 'Courrier' %}checked{% endif %}>
                    <label class="form-check-label" >Courrier</label>
                </div>
            </div>
        </div>
        <div class="d-flex mb-3 flex-column">
            <div class="form-check-inline">Date de résiliation souhaitée: </div>
            <div class="d-flex" style="margin-left: 58px;">
                <div class="form-check form-check-inline ms-0">
                    <input class="form-check-input check-input-fill" data-formchanged="no" type="radio" name="type_date_resiliation" value="contrat"
                           data-change-target="#date-resiliation-{{ equipement.id }}" 
                           {% if not contratResilie or (contratResilie and contratResilie.date == contrat.dateFinContrat) %}checked{% endif %}>
                    <label class="form-check-label" >Date de fin du contrat</label>
                </div>
                <div class="form-check form-check-inline" style="margin-left: 58px;">
                    <input class="form-check-input check-input-fill" data-formchanged="no" type="radio" name="type_date_resiliation" id="type_date_resiliation_choice" value="date"
                           data-change-target="#date-resiliation-{{ equipement.id }}"
                           {% if contratResilie and  contratResilie.date != contrat.dateFinContrat %}checked{% endif %}>
                    <label class="form-check-label" >Date de la demande de résiliation</label>
                </div>
                <div class="form-check form-check-inline" id="date-resiliation-{{ equipement.id }}" 
                     style="{% if contratResilie and  contratResilie.date != contrat.dateFinContrat %}display:block{% else %}display:none{% endif %}">
                    <input class="form-control" type="date" name="date_resiliation"  data-formchanged="no"
                           value="{{ contratResilie ? contratResilie.date|date('Y-m-d') : 'now'|date('Y-m-d') }}" 
                           min="{{ 'now'|date('Y-m-d') }}">
                </div>
            </div>
        </div>
        <div class="d-flex mb-3 flex-column">
            <div class="form-check-inline">Le client a t'il donné un motif de résiliation ?</div>
            <div class="d-flex" style="margin-left: 58px;">
                <div class="form-check form-check-inline ms-0">
                    <input class="form-check-input check-input-fill" data-formchanged="no" type="radio" name="motif_resiliation_donne" value="oui"
                           data-change-target="#container-motif-{{ equipement.id }}"
                           {% if contratResilie and  contratResilie.contratMotifResiliation %}checked{% endif %}>
                    <label class="form-check-label" for="inlineRadio1">Oui</label>
                </div>
                <div class="form-check form-check-inline" style="margin-left: 174px;">
                    <input class="form-check-input check-input-fill" data-formchanged="no" type="radio" name="motif_resiliation_donne" value="non"
                           data-change-target="#container-motif-{{ equipement.id }}"
                           {% if (contratResilie and not contratResilie.contratMotifResiliation) or not contratResilie %}checked{% endif %}>
                    <label class="form-check-label" for="inlineRadio2">Non</label>
                </div>
            </div>
        </div>
        <div id="container-motif-{{ equipement.id }}" style="{% if contratResilie and  contratResilie.contratMotifResiliation %}display: block{% else %}display: none{% endif %}">
            <div class="d-flex align-items-center mb-2">
                <div style="width:39px;">Motif</div>
                <div class="d-flex flex-grow-1">
                    <select name="motif" class="form-control" id="resiliation_motif" data-formchanged="no">
                        {% for motif in contratMotifsResiliation %}
                            <option value="{{ motif.id }}" 
                                {% if contratResilie and contratResilie.contratMotifResiliation and contratResilie.contratMotifResiliation.id == motif.id %}selected{% endif %}>
                                {{ motif.libelle }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="d-flex flex-column" style="margin-left: 39px;">
                <select name="marque_change" class="form-control form-control-sm me-4 hide resiliation_block" id="resiliation_autre_marque" data-formchanged="no">
                    <option value="" checked style="color: #95a5a6;opacity: 1;">Marque si connue</option>
                    {% for marque in equipementMarques %}
                        <option value="{{ marque.id }}"
                            {% if contratResilie and contratResilie.equipementMarque and contratResilie.equipementMarque.id == marque.id %}selected{% endif %}>
                            {{ marque.libelle }}
                        </option>
                    {% endfor %}
                </select>
                <select name="resiliation_intervention_insatisfait" class="form-control form-control-sm me-4 hide resiliation_block" data-formchanged="no" id="resiliation_intervention">
                    <option value="" checked style="color: #95a5a6;opacity: 1;">Choix de l'intervention si connue</option>
                    {% for intervention in equipement.interventions %}
                        <option value="{{ intervention.id }}"
                            {% if contratResilie and contratResilie.intervention and contratResilie.intervention.id == intervention.id %}selected{% endif %}>
                            {{ intervention.getFormattedInterventionForResiliation }}
                        </option>
                    {% endfor %}
                </select>
                <input type="text" name="resiliation_autre_input" class="form-control form-control-sm hide resiliation_block"  data-formchanged="no"
                       placeholder="Précision si connue" id="resiliation_autre"
                       value="{{ contratResilie ? contratResilie.motifSiAutre : '' }}">
            </div>
        </div>
        <div class="form-group d-flex justify-content-center mt-4">
            <div class="form-actions-row">
                <button class="btn btn-outline-danger btn-close-popup" data-dxpopup-id="popup-resilier-{{ equipement.id }}" type="button">Annuler</button>
                <button class="btn btn-outline-success me-3" type="submit">{{ contratResilie ? 'Modifier' : 'Valider' }}</button>
            </div>
        </div>
    </form>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let previousMotif = document.getElementById('resiliation_motif').value;
        let dateResiliationInput = document.querySelector('input[name="date_resiliation"]');
        let dateFinContrat = '{{ contrat and contrat.dateFinContrat ? contrat.dateFinContrat|date("Y-m-d") : "" }}';

        // Fonction qui gère l'affichage des blocs selon la valeur sélectionnée
        function handleResiliationDisplay() {
            // Ajouter la classe hide à tous les blocs de résiliation
            document.querySelectorAll('.resiliation_block').forEach(block => {
                block.classList.add('hide');
            });

            // Récupérer la valeur sélectionnée
            const selectedValue = document.getElementById('resiliation_motif').value;

            // Ne réinitialiser les valeurs que si on change de motif
            if (selectedValue !== previousMotif) {
                // Réinitialiser les valeurs des champs
                document.getElementById('resiliation_autre_marque').selectedIndex = 0;
                document.getElementById('resiliation_intervention').selectedIndex = 0;
                document.getElementById('resiliation_autre').value = '';
            }

            // Gérer les différents cas
            if (selectedValue === '1') {
                document.getElementById('resiliation_autre_marque').classList.remove('hide');
            } else if (selectedValue === '7') {
                document.getElementById('resiliation_intervention').classList.remove('hide');
            } else if (selectedValue === '11') {
                document.getElementById('resiliation_autre').classList.remove('hide');
            }

            // Mettre à jour le motif précédent
            previousMotif = selectedValue;
        }

        // Fonction pour gérer le changement de date de résiliation
        function handleDateResiliationChange() {
            const typeDateChoice = document.getElementById('type_date_resiliation_choice');
            const currentDateValue = dateResiliationInput.value;
            
            if (typeDateChoice.checked) {
                // Si la valeur précédente était la date de fin de contrat ou si elle est vide/nulle
                if (currentDateValue === dateFinContrat || !currentDateValue) {
                    // Définir la valeur à aujourd'hui
                    const today = new Date().toISOString().split('T')[0];
                    dateResiliationInput.value = today;
                }
            }
        }

        // Appeler la fonction au chargement de la page
        handleResiliationDisplay();

        // Ajouter l'écouteur d'événement pour le changement de motif
        document.getElementById('resiliation_motif').addEventListener('change', handleResiliationDisplay);
        
        // Ajouter l'écouteur d'événement pour le changement de type de date
        document.getElementById('type_date_resiliation_choice').addEventListener('change', handleDateResiliationChange);
    });
</script>