{# templates/manager/formulaire/new2.html.twig - Étape 2 : Construction des champs #}

{% extends 'manager/manager_base.html.twig' %}

{% block title %}Création d'un formulaire - Étape 2/2 : Champs{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" xintegrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2g2nFqG+0N+jQG/jKxLp/0t0b8T6G9t2/k9Tq+9D6xI2+0A" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <style>
        /* Styles pour l'ancienne Vollet Droit, mis à jour pour Card/Bootstrap */
        .sidebar-panel-header {
            font-weight: bold;
            background-color: var(--bs-primary); /* Utilisation de la variable Bootstrap pour la couleur primaire */
            color: #fff; /* Assuré que le texte est blanc pour un fond primaire foncé (Correction de contraste) */
            padding: .75rem;
            font-size: 1rem;
        }
        
        .add-btn-link {
            font-family: 'Courier New', monospace; /* Police monospace pour les outils */
            cursor: pointer;
            border: 1px solid var(--bs-gray-400);
            color: var(--bs-body-color);
            padding: 8px 10px;
            background-color: var(--bs-gray-100);
            margin: 5px 0;
            display: block;
            text-decoration: none;
            text-align: left; /* Alignement à gauche pour un meilleur affichage du texte */
            border-radius: .25rem;
            transition: background-color 0.2s, border-color 0.2s;
        }
        .add-btn-link:hover {
            background-color: var(--bs-gray-200);
            border-color: var(--bs-primary);
        }
        
        /* Zone de travail du formulaire */
        #formZone {
            font-family: Arial, sans-serif;
            background-color: #fff;
            padding: 20px;
            border: 1px solid var(--bs-gray-300);
            border-radius: .5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
			
        }
        
        .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;
        }
		
		.ztitle2 {
            
            font-size: 18px;
            line-height:24px;
            border: 1px solid #ccc;
            background-color: #acd6f0;
            padding: 10px;
            
        }
        
        .vlegende {
            font-weight: bold;
            color: var(--bs-secondary);
            font-size: .85rem;
        }

        /* Styles pour les messages de notification (toasts) - conservé */
        .toast-container {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 1050;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <h3 class="mb-4 text-body-emphasis">
            <i class="fas fa-hammer me-2 text-warning"></i> Construction du formulaire - Étape 2/2
        </h3>
        
        {# 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 g-4 mb-3">
            
            {# COLONNE 1 (md-3) : Outils / Types de Champs #}
            <div class="col-md-3">
                <div class="card shadow-sm">
                    <div class="ztitle2"> 
                        <i class="fas fa-plus-square me-2"></i> Ajouter un champ
                    </div>
                    <div class="card-body p-2">
                        {# Liste des types de champs générée dynamiquement #}
                        {% set types_de_champs = [
                            {'id': 1, 'nom': 'Numérique', 'icon': 'fa-hashtag'},
                            {'id': 2, 'nom': 'Texte', 'icon': 'fa-font'},
                            {'id': 3, 'nom': 'Zone de texte', 'icon': 'fa-align-left'},
                            {'id': 4, 'nom': 'E-mail', 'icon': 'fa-envelope'},
                            {'id': 5, 'nom': 'Téléphone', 'icon': 'fa-phone'},
                            {'id': 6, 'nom': 'URL', 'icon': 'fa-link'},
                            {'id': 7, 'nom': 'Date', 'icon': 'fa-calendar-alt'},
                            {'id': 8, 'nom': 'Champs à cocher', 'icon': 'fa-square-check'},
                            {'id': 9, 'nom': 'Bouton radio', 'icon': 'fa-dot-circle'},
                            {'id': 10, 'nom': 'Pièce jointe', 'icon': 'fa-paperclip'},
                            {'id': 11, 'nom': 'Select prédéfini', 'icon': 'fa-list-select'},
                            {'id': 12, 'nom': 'Radio prédéfini', 'icon': 'fa-circle-dot'},
                            {'id': 15, 'nom': 'Checkbox prédéfini', 'icon': 'fa-square-check'},
                            {'id': 13, 'nom': 'Champs lié', 'icon': 'fa-link'},
                            {'id': 14, 'nom': 'Bloc Titre', 'icon': 'fa-heading'}
                        ] %}
                        
                        {% for type_champ in types_de_champs %}
                            <a href="#" class="add-btn-link open-modal" data-type="{{ type_champ.id }}" data-formulaire-id="{{ formulaire.id }}">
                                <i class="fas {{ type_champ.icon }} me-2"></i> {{ type_champ.nom }}
                            </a>
                        {% endfor %}
                    </div>
                </div>
            </div>

            {# COLONNE 2 (md-9) : Zone de construction du formulaire - LARGEUR MISE À JOUR (7 -> 9) #}
            <div class="col-md-9">
			{# Le style .ztitle a le bon contraste de couleurs (texte primaire sur fond subtil) #}
                    <div class="ztitle ">
                        <i class="fas fa-file-alt me-2"></i> {{ formulaire.titre|upper }}
                    </div>
                <div id="formZone" class="shadow">
                    
                    
                    
                    
                    
                    {# La zone où les champs seront affichés via AJAX #}
                    <div id="champZone" >
                        <div class="text-center text-info py-5">
                            <i class="fas fa-spinner fa-spin text-success" style="font-size: 2.5em;"></i>
                            <div class="mt-2">Chargement des champs...</div>
                        </div>
                    </div>
                    
                    <hr class="my-4">
                    
                    {# Boutons de navigation #}
                    <div class="row g-2 justify-content-between">
                        <div class="col-auto">
                            <a href="{{ path('manager_formulaire_edit', {'id': formulaire.id}) }}" class="btn btn-primary shadow-sm">
                                <i class="fa-solid fa-chevron-left me-1"></i> Étape précédente
                            </a>
                        </div>
                        <div class="col-auto">
                            <a href="{{ path('manager_formulaire_index') }}" class="btn btn-danger shadow-sm">
                                <i class="fa-solid fa-times me-1"></i> Annuler l'opération
                            </a>
                        </div>
                        <div class="col-auto">
                            {# Supposons que 'manager_formulaire_show' est la page de visualisation finale #}
                            <a href="{{ path('manager_formulaire_show', {'id': formulaire.id}) }}" class="btn btn-success shadow-sm">
                                Enregistrer et terminer <i class="fa-solid fa-check me-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        {# Modal pour l'ajout/édition de champ (conservé) #}
        <div class="modal fade" id="addChampModal" tabindex="-1" aria-labelledby="addChampModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header bg-default ">
                        <h5 class="modal-title" id="addChampModalLabel">Ajouter un nouveau champ</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div id="modalBodyContent" class="modal-body ">
                        <i class="fas fa-spinner fa-spin text-success" style="font-size: 2em;"></i>
                    </div>
                </div>
            </div>
        </div>

        {# Conteneur pour les notifications (toasts) (conservé) #}
        <div class="toast-container"></div>
    </div>
{% endblock %}

{% block javascripts %}
{{ parent() }}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // --- Références et Initialisation ---
        const addChampModal = new bootstrap.Modal(document.getElementById('addChampModal'));
        const modalElement = document.getElementById('addChampModal');
        const modalBody = document.getElementById('modalBodyContent');
        const toastContainer = document.querySelector('.toast-container');
        let formulaireId = document.querySelector('.open-modal')?.dataset.formulaireId || null;
        
        // --- Fonctions utilitaires ---
        
        function showToast(message, type, autoclose = true) {
            const toast = document.createElement('div');
            toast.className = `toast align-items-center text-white bg-${type} border-0`;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">${message}</div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            `;
            toastContainer.appendChild(toast);
            const bsToast = new bootstrap.Toast(toast, { autohide: autoclose });
            bsToast.show();
        }

        async function handleFormSubmission(form) {
            const formData = new FormData(form);
            const url = form.getAttribute('action');
            try {
                const response = await fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                const data = await response.json();
                
                if (data.success) {
                    addChampModal.hide();
                    showToast(data.message, 'success');
                    refreshChampsList();
                } else {
                    showToast(data.message || 'Erreur lors de l\'opération sur le champ. Vérifiez les champs.', 'danger', false);
                    if (data.form_html) {
                        modalBody.innerHTML = data.form_html;

                        if (data.form_action_url) {
                            const formElement = modalBody.querySelector('form#form_add_edit_champ');
                            if (formElement) {
                                formElement.action = data.form_action_url;
                            }
                        }
                        attachFormSubmissionListener();
                    }
                }
            } catch (error) {
                console.error('Erreur de soumission du formulaire:', error);
                showToast('Erreur de soumission du formulaire (problème de connexion/serveur).', 'danger', false);
            }
        }

        function attachFormSubmissionListener() {
            const form = document.getElementById('form_add_edit_champ');
            if (form) {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();
                    handleFormSubmission(form);
                });
            }
        }

        async function refreshChampsList() {
            if (!formulaireId) return;
            const url = `/manager/formulaire/${formulaireId}/champ/list`;
            const champZone = document.getElementById('champZone');
            champZone.innerHTML = '<div class="text-center text-info py-5"><i class="fas fa-spinner fa-spin text-success" style="font-size: 2.5em;"></i><div class="mt-2">Chargement en cours...</div></div>';
            try {
                const response = await fetch(url);
                const html = await response.text();
                champZone.innerHTML = html;
                attachDeleteEventListeners();
                attachEditEventListeners();
                attachOrderEventListeners();
            } catch (error) {
                champZone.innerHTML = '<p class="text-danger">Erreur lors du chargement des champs.</p>';
                console.error('Erreur de chargement de la liste des champs:', error);
            }
        }
        
        // --- Écouteurs pour les actions CRUD/Ordre sur les champs (NON MODIFIÉES) ---

        function attachDeleteEventListeners() {
            document.querySelectorAll('.delete-champ-btn').forEach(button => {
                button.addEventListener('click', async function(event) {
                    event.preventDefault();
                    const champId = this.dataset.champId;
                    // Utilisation d'un modal ou d'un message box personnalisé est préférable à `confirm()`
                    const confirmDelete = confirm('Êtes-vous sûr de vouloir supprimer ce champ ? Cette action est irréversible.'); 
                    if (confirmDelete) {
                        document.getElementById('champZone').innerHTML = '<div class="text-center text-info py-5"><i class="fas fa-spinner fa-spin text-success" style="font-size: 2.5em;"></i><div class="mt-2">Suppression en cours...</div></div>';
                        try {
                            const response = await fetch(`/manager/formulaire/${formulaireId}/champ/${champId}`, {
                                method: 'DELETE',
                                headers: { 'X-Requested-With': 'XMLHttpRequest' }
                            });
                            const data = await response.json();
                            if (data.success) {
                                showToast(data.message, 'success');
                                refreshChampsList();
                            } else {
                                showToast(data.message || 'Erreur lors de la suppression du champ.', 'danger', false);
                                refreshChampsList();
                            }
                        } catch (error) {
                            console.error('Erreur de suppression:', error);
                            showToast('Erreur de suppression du champ.', 'danger', false);
                            refreshChampsList();
                        }
                    }
                });
            });
        }

        function attachEditEventListeners() {
            document.querySelectorAll('.edit-champ-btn').forEach(button => {
                button.addEventListener('click', async function(event) {
                    event.preventDefault();
                    const champId = this.dataset.champId;
                    const champNom = this.dataset.champNom.trim();
                    const modalTitle = `Modifier un champ : ${champNom}`;
                    const formUrl = `{{ path('manager_formulaire_champ_edit', {'formulaire_id': formulaire.id, 'id': 0}) | replace({'0': 'TEMP_ID'}) }}`.replace('TEMP_ID', champId);
                    
                    document.getElementById('addChampModalLabel').textContent = modalTitle;
                    modalBody.innerHTML = '<div class="text-center py-5"><i class="fas fa-spinner fa-spin text-success" style="font-size: 2.5em;"></i></div>';
                    addChampModal.show();
                    
                    try {
                        const formResponse = await fetch(formUrl, {
                            headers: { 'X-Requested-With': 'XMLHttpRequest' }
                        });
                        const formHtml = await formResponse.text();
                        modalBody.innerHTML = formHtml;
                        attachFormSubmissionListener();
                    } catch (error) {
                        console.error('Erreur lors du chargement du formulaire d\'édition:', error);
                        showToast('Erreur lors du chargement du formulaire.', 'danger', false);
                    }
                });
            });
        }

        function attachOrderEventListeners() {
            document.querySelectorAll('.order-up-btn, .order-down-btn').forEach(button => {
                button.addEventListener('click', async function(event) {
                    event.preventDefault();
                    const champId = this.dataset.champId;
                    const direction = this.dataset.direction;
                    const url = `/manager/formulaire/${formulaireId}/champ/${champId}/${direction}`;
                    try {
                        const response = await fetch(url, {
                            method: 'POST',
                            headers: { 'X-Requested-With': 'XMLHttpRequest' }
                        });
                        const data = await response.json();
                        if (data.success) {
                            showToast(data.message, 'info');
                            refreshChampsList();
                        } else {
                            showToast(data.message, 'warning');
                        }
                    } catch (error) {
                        console.error('Erreur lors du changement d\'ordre:', error);
                        showToast('Erreur lors du changement d\'ordre.', 'danger', false);
                    }
                });
            });
        }
        
        // La fonction attachValidationEventListeners est supprimée
        // et son code est déplacé dans la délégation d'événement ci-dessous.

        // --- Écouteurs pour l'ouverture du Modal d'ajout (NON MODIFIÉ) ---

        // --- Écouteurs pour l'ouverture du Modal d'ajout (VERSION CORRIGÉE) ---

// Définissez une variable Twig qui contient le chemin de la route avec un placeholder facile à remplacer.
// 'MANAGER_ID' sera remplacé côté client par le typeId.
const ADD_CHAMP_BASE_URL = "{{ path('manager_formulaire_champ_add', {'formulaire_id': formulaire.id, 'type': 'MANAGER_ID'}) }}";

document.querySelectorAll('.open-modal').forEach(link => {
    link.addEventListener('click', async function(event) {
        event.preventDefault();
        
        const typeId = this.dataset.type; // Contient l'ID du type de champ (ex: 16, 13, 11)
        const modalTitle = `Ajouter un champ : ${this.textContent.trim()}`;
        
        // CORRECTION MAJEURE : On remplace directement le placeholder 'MANAGER_ID' par la valeur typeId
        const formUrl = ADD_CHAMP_BASE_URL.replace('MANAGER_ID', typeId);
        
        // Débogage : Affiche l'URL finale construite (À vérifier dans la console pour confirmer la bonne valeur)
        // console.log('URL construite:', formUrl); 
        
        document.getElementById('addChampModalLabel').textContent = modalTitle;
        modalBody.innerHTML = '<div class="text-center py-5"><i class="fas fa-spinner fa-spin text-success" style="font-size: 2.5em;"></i></div>';
        addChampModal.show();
        
        try {
            const formResponse = await fetch(formUrl, {
                // Assurez-vous que le serveur est prêt pour une requête AJAX
                headers: { 'X-Requested-With': 'XMLHttpRequest' } 
            });
            
            // Ajout d'une vérification pour les erreurs HTTP (comme 500)
            if (!formResponse.ok) {
                 // Si la réponse n'est pas OK (y compris 500), elle sera traitée dans le catch ou affichée ici.
                const errorText = await formResponse.text();
                throw new Error(`Erreur HTTP ${formResponse.status} lors du chargement du formulaire : ${errorText.substring(0, 100)}...`);
            }
            
            const formHtml = await formResponse.text();
            modalBody.innerHTML = formHtml;
            attachFormSubmissionListener();
            
        } catch (error) {
            console.error('Erreur lors du chargement du formulaire (serveur ou connexion):', error);
            showToast('Erreur lors du chargement du formulaire. Vérifiez les logs du serveur pour le 500.', 'danger', false);
        }
    });
});

        // --- Initialisation et Observer ---
        
        // ***************************************************************
        // NOUVEAU : DÉLÉGATION D'ÉVÉNEMENT POUR LES SELECTS DE VALIDATION
        // ***************************************************************
        document.body.addEventListener('change', async function(event) {
            // Cible l'élément <select> uniquement s'il correspond au sélecteur
            if (event.target && event.target.matches('select[name^="validate"]')) {
                const selectElement = event.target;
                const level = selectElement.dataset.level;
                const hierarchiqueId = selectElement.value;
                const formulaireId = {{ formulaire.id }}; // Cette variable est injectée par Twig
                
                console.log(`Changement détecté: Niveau ${level}, ID: ${hierarchiqueId}`); // Pour le débogage
                
                const url = `/manager/formulaire/${formulaireId}/update-validation`;

                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                        body: JSON.stringify({ niveau: level, hierarchique_id: hierarchiqueId })
                    });
                    
                    const data = await response.json();

                    if (response.ok) {
                        showToast(data.message, 'success');
                    } else {
                        showToast(data.error || 'Erreur lors de la mise à jour de la validation.', 'danger', false);
                    }
                } catch (error) {
                    console.error('Erreur AJAX validation:', error);
                    showToast('Erreur de connexion au serveur (validation).', 'danger', false);
                }
            }
        });
        // ***************************************************************

        if (formulaireId) {
            refreshChampsList();
            // L'appel à attachValidationEventListeners() est supprimé ici
        }

        modalElement.addEventListener('hidden.bs.modal', function () {
            modalBody.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin text-success" style="font-size: 2em;"></i></div>';
        });

        const champZone = document.getElementById('champZone');
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'childList' || mutation.type === 'attributes') {
                    document.querySelectorAll('.tooltip').forEach(tooltip => tooltip.remove());

                    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function(tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                }
            });
        });

        const config = { childList: true, subtree: true };
        observer.observe(document.body, config);

    });
</script>
{% endblock %}