{# templates/agent/formulaire/edit.html.twig #}
{% extends 'agent/agent_base.html.twig' %}

{% block title %}Formulaire - Modification{% endblock %}

{% block content %}
    {# Inclure les styles et les messages flash comme dans add.html.twig #}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        /* ... Vos styles CSS ... */
        #volletDroit { border: 1px solid #ccc; background-color: #fff; padding: 5px; }
        #volletDroitHeader { font-weight: bold; background-color: #4e8bb1; color: #fff; padding: 5px; display: flex; justify-content: space-between; align-items: center; }
        #volletDroit .vlegende { font-weight: bold; }
        #volletDroit .vdata { font-style: italic; }
        #volletDroit .velement { border-top: dotted #eee; margin-top: 3px; margin-bottom: 3px; }
        #formZone { font-family: arial; background-color: #fff; padding: 20px 20px 20px; border: 1px solid #ccc; }
        .ztitle { font-weight: bold; text-align: center; font-size: 18px; line-height: 24px; border: 1px solid #ccc; background-color: #acd6f0; padding: 10px; text-transform: uppercase; }
        .header-actions { display: flex; align-items: center; }
    </style>

    {# Affichage des messages flash #}
    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endfor %}

    <div class="row">
        <div class="col-md-9 offset-md-1">
            <div id="formZone">
                <div id="volletDroitHeader" style="margin-bottom: 10px">
                    <span>{{ formulaire.titre | upper }}</span>
                    {% if submission.etat <= 0 %}
                        {% if submission.submissionSuperviseur <= 0 %}
                            <div>
                                <div style="float:right">
                                    <button 
                                        type="button" 
                                        class="btn btn-sm btn-danger" 
                                        style="margin-left: 10px;"
                                        data-bs-toggle="modal" 
                                        data-bs-target="#confirmDeleteModal"
                                    >
                                        Supprimer
                                    </button>
                                </div>
                                <div style="float:right"><a href="{{ path('app_agent_formulaire_edit', {'formId': formulaire.id, 'submissionId': submission.id}) }}" class="btn btn-sm btn-light" style="margin-left: 10px;">Modifier</a></div>
                                <div style="clear:both"></div>
                            </div>
                        {% endif %}
                    {% endif %}
                </div>

                {# Affichez directement le HTML du formulaire d'édition passé par le contrôleur #}
                <div id="champZone">
                    {{ htmlFormulaire | raw }}
                </div>

                <div style="height: 20px"></div>
            </div>
        </div>
    </div>

    {# MODALE DE CONFIRMATION DE SUPPRESSION #}
    <div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmDeleteModalLabel">Confirmation de suppression</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Êtes-vous sûr de vouloir supprimer définitivement cette soumission ? Cette action est irréversible.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <a 
                        href="{{ path('app_agent_formulaire_delete', {'formId': formulaire.id, 'submissionId': submissionId}) }}" 
                        class="btn btn-danger"
                    >
                        Confirmer la suppression
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div style="text-align: center; margin: 10px 0">
        {% if submission.submissionSuperviseur <= 0 %}
            <a href="{{ path('app_agent_formulaire_list') }}" class="btn btn-secondary mt-3">
                <i class="glyphicon glyphicon-circle-arrow-left"></i> Retour à la liste
            </a>
        {% else %}
            <a href="{{ path('app_agent_formulaire_collab') }}" class="btn btn-secondary mt-3">
                <i class="glyphicon glyphicon-circle-arrow-left"></i> Retour à la liste
            </a>
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            
            /**
             * Fonction générique pour mettre à jour un sélecteur enfant (Région, Département, Sous-préfecture).
             * Gère la pré-sélection à partir de data-submitted-value et déclenche le niveau suivant.
             */
            function updateChildSelect(childSelectId, parentId, ajaxUrl) {
                const childSelect = document.getElementById(childSelectId);
                if (!childSelect) return;

                // Récupérer la valeur soumise (pour l'édition)
                const submittedValue = childSelect.dataset.submittedValue;
                
                childSelect.innerHTML = '<option value="">-- Chargement en cours... --</option>';
                // Note: On laisse le childSelect désactivé si on est en lecture seule
                // childSelect.disabled = true; // Laissez cette ligne commentée ou supprimez-la, la fonction disableAllFormFields le fera

                if (parentId) {
                    fetch(ajaxUrl + '/' + parentId, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(response => response.json())
                        .then(data => {
                            childSelect.innerHTML = '<option value="">-- Sélectionner --</option>';
                            
                            data.forEach(item => {
                                const option = document.createElement('option');
                                option.value = item.id;
                                option.textContent = item.nom;
                                
                                if (submittedValue && submittedValue == item.id) {
                                    option.selected = true;
                                }
                                
                                childSelect.appendChild(option);
                            });
                            // childSelect.disabled = false; // Ne pas réactiver si on veut tout désactiver
                            
                            if (submittedValue) {
                                delete childSelect.dataset.submittedValue;
                                
                                setTimeout(() => {
                                     childSelect.dispatchEvent(new Event('change'));
                                }, 50);
                            }
                        })
                        .catch(error => {
                            console.error('Erreur lors du chargement des options:', error);
                            childSelect.innerHTML = '<option value="">-- Erreur de chargement --</option>';
                            // childSelect.disabled = true; // Laissez cette ligne commentée
                        });
                } else {
                    childSelect.innerHTML = '<option value="">-- Sélectionner --</option>';
                    // childSelect.disabled = false; // Ne pas réactiver
                }
            }


            /**
             * Fonction pour gérer la logique spéciale des Communes et Villages (doubles sélecteurs).
             */
            function handleCommuneVillage(selectElement) {
                const parentId = selectElement.value;
                const communeSelect = document.getElementById(selectElement.dataset.childCommune);
                const villageSelect = document.getElementById(selectElement.dataset.childVillage);
                const ajaxUrl = selectElement.dataset.ajaxUrl;

                const submittedCommune = communeSelect ? communeSelect.dataset.submittedValue : null;
                const submittedVillage = villageSelect ? villageSelect.dataset.submittedValue : null;

                // La désactivation sera gérée par disableAllFormFields, nous gérons juste le chargement
                if (communeSelect) { communeSelect.innerHTML = '<option value="">-- Chargement en cours... --</option>'; }
                if (villageSelect) { villageSelect.innerHTML = '<option value="">-- Chargement en cours... --</option>'; }

                if (parentId) {
                    fetch(ajaxUrl + '/' + parentId, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(response => response.json())
                        .then(data => {
                            // Communes
                            if (communeSelect) {
                                communeSelect.innerHTML = '<option value="">-- Sélectionner une commune --</option>';
                                data.communes.forEach(item => {
                                    const option = document.createElement('option');
                                    option.value = item.id;
                                    option.textContent = item.nom;
                                    if (submittedCommune && submittedCommune == item.id) {
                                        option.selected = true;
                                        delete communeSelect.dataset.submittedValue;
                                    }
                                    communeSelect.appendChild(option);
                                });
                            }
                            // Villages
                            if (villageSelect) {
                                villageSelect.innerHTML = '<option value="">-- Sélectionner un village --</option>';
                                data.villages.forEach(item => {
                                    const option = document.createElement('option');
                                    option.value = item.id;
                                    option.textContent = item.nom;
                                    if (submittedVillage && submittedVillage == item.id) {
                                        option.selected = true;
                                        delete villageSelect.dataset.submittedValue;
                                    }
                                    villageSelect.appendChild(option);
                                });
                            }
                            // Ré-appliquer la désactivation après le chargement AJAX
                            disableAllFormFields(); 
                        })
                        .catch(error => {
                            console.error('Erreur lors du chargement des communes et villages:', error);
                            if(communeSelect) communeSelect.innerHTML = '<option value="">-- Erreur de chargement --</option>';
                            if(villageSelect) villageSelect.innerHTML = '<option value="">-- Erreur de chargement --</option>';
                        });
                } else {
                    if(communeSelect) { communeSelect.innerHTML = '<option value="">-- Sélectionner une commune --</option>'; }
                    if(villageSelect) { villageSelect.innerHTML = '<option value="">-- Sélectionner un village --</option>'; }
                }
            }


            /**
             * Attache les écouteurs d'événements 'change' et initialise la cascade pour l'édition.
             */
            function attachSelectListeners() {
                const parentSelects = document.querySelectorAll('select[data-child-select], select[data-child-commune]'); 
                
                parentSelects.forEach(select => {
                    
                    // 1. Logique d'initialisation (pour l'édition)
                    if (select.value) {
                        if (select.dataset.childSelect) {
                            const childSelectId = select.dataset.childSelect;
                            const ajaxUrl = select.dataset.ajaxUrl;
                            updateChildSelect(childSelectId, select.value, ajaxUrl);
                        }
                        
                        if (select.dataset.childCommune || select.dataset.childVillage) {
                            handleCommuneVillage(select);
                        }
                    }
                    
                    // 2. Logique d'écouteur (changement manuel) - CELA DOIT ÊTRE DÉSACTIVÉ EN MODE LECTURE SEULE
                    // Si le but est d'afficher le formulaire sans possibilité de modification,
                    // vous n'avez pas besoin d'attacher ces écouteurs.
                    // Si l'objectif est d'afficher les données, mais que les champs *peuvent* être modifiés 
                    // si l'utilisateur clique sur un bouton "Modifier" qui réactiverait les champs,
                    // alors on les laisse, mais le mieux est de les commenter/supprimer si c'est de la pure lecture.
                });
            }
            
            /**
             * NOUVELLE FONCTION : Désactive tous les champs de formulaire affichés.
             * Cela garantit un mode "lecture seule".
             */
            function disableAllFormFields() {
                // Sélectionne tous les inputs, selects et textareas
                const fields = document.querySelectorAll('#champZone input, #champZone select, #champZone textarea, #champZone button:not(.btn-danger)'); 
                
                fields.forEach(field => {
                    // Les boutons de suppression sont souvent des actions hors formulaire de données, 
                    // mais si vous voulez désactiver TOUT, supprimez le ':not(.btn-danger)'
                    field.setAttribute('disabled', 'disabled');
                    
                    // Optionnel : ajouter une classe visuelle
                    field.style.backgroundColor = '#f7f7f7'; 
                    field.style.cursor = 'not-allowed';
                });
            }


            // ÉTAPE 1: Initialiser la cascade de localités (pour remplir les champs enfants)
            attachSelectListeners();
            
            // ÉTAPE 2: Désactiver tous les champs pour le mode lecture seule
            disableAllFormFields();

            // Note : Si vous voulez réactiver les champs après un certain événement 
            // (comme le clic sur un bouton "Modifier" dans l'entête), vous devrez 
            // créer une fonction inverse (e.g., enableAllFormFields) et l'appeler.
            // Si le bouton 'Modifier' redirige vers une autre page d'édition, cette solution suffit.
        });
    </script>
{% endblock %}