{# templates/manager/champslie/new2.html.twig - Étape 2 : Construction des champs du Sous-Formulaire #}

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

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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2g2nFqG+0N+jQG/jKxLp/0t0b8T6G9t2/k9Tq+9D6xI2+0A" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <style>
        /* Styles pour le panneau latéral (ancien #volletDroit), mis à jour pour Card/Bootstrap */
        .sidebar-panel-header {
            font-weight: bold;
            background-color: var(--bs-primary); /* Couleur primaire Bootstrap */
            color: #fff;
            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 (ancien #formZone) */
        #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);
        }
        
        /* Titre principal (ancien .ztitle) */
        .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;
        }
        
        /* Titre panneau latéral (ancien #volletDroitHeader) */
        .ztitle2 {
            
            font-size: 18px;
            line-height:24px;
            border: 1px solid #ccc;
            background-color: #acd6f0;
            padding: 10px;
            
        }
        
        /* Styles pour les messages de notification (toasts) - conservé */
        .toast-container {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 1050;
        }
        
        .vlegende { /* Conservé pour le cas où il est utilisé dans les champs affichés */
            font-weight: bold;
            color: var(--bs-secondary);
            font-size: .85rem;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <h3 class="mb-4 text-body-emphasis">
            <i class="fas fa-cubes me-2 text-warning"></i> Construction du sous-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 - Remplace #volletDroit #}
            <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 - AJOUT DES ICÔNES #}
                        {% 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'}
                        ] %}
                        
                        {% for type_champ in types_de_champs %}
                            <a href="#" class="add-btn-link open-modal"
                            data-type="{{ type_champ.id }}"
                            data-champslie-id="{{ champslie.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 sous-formulaire - Remplace la deuxième div col-md-9 #}
            <div class="col-md-9">
                <div class="ztitle ">
                    <i class="fas fa-file-alt me-2"></i> {{ champslie.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 - Utilisation des classes Bootstrap (justify-content-between) #}
                    <div class="row g-2 justify-content-between">
                        <div class="col-auto">
                            <a href="{{ path('manager_formulaire_champslie_edit', {'id': champslie.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_champslie_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">
                            <a href="{{ path('manager_formulaire_champslie_show', {'id': champslie.id}) }}" class="btn btn-success shadow-sm">
                                Enregistrer et terminer <i class="fa-solid fa-check ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Modal pour l'ajout/édition de champ - Ajout de la couleur du header #}
        <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  text-white"> {# Utilisation de bg-primary pour cohérence #}
                        <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) #}
        <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 champslieId = document.querySelector('.open-modal')?.dataset.champslieId || null;

        // On réinitialise les tooltips (l'initialisation initiale est conservée)
        function refreshTooltips() {
            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);
            });
        }
        refreshTooltips(); // Appel initial

        // --- Fonctions utilitaires (Mises à jour des noms de variables pour 'champslie') ---
        
        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, delay: 5000 });
            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;
                        // Nécessaire si l'action du formulaire est mise à jour après une erreur
                        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 (!champslieId) return;
            // Assurez-vous que l'URL est correcte pour l'entité "champslie"
            const url = `/manager/champslie/${champslieId}/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();
                // Assurez-vous de rafraîchir les tooltips après le chargement AJAX
                refreshTooltips(); 
            } 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 (URLs ajustées) ---

        function attachDeleteEventListeners() {
            document.querySelectorAll('.delete-champ-btn').forEach(button => {
                button.addEventListener('click', async function(event) {
                    event.preventDefault();
                    const champId = this.dataset.champId;
                    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 {
                            // URL ajustée pour 'champslie'
                            const response = await fetch(`/manager/champslie/${champslieId}/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}`;
                    // URL ajustée pour 'champslie'
                    const formUrl = `{{ path('manager_formulaire_champslie_champ_edit', {'champslie_id': champslie.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;
                    // URL ajustée pour 'champslie'
                    const url = `/manager/champslie/${champslieId}/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);
                    }
                });
            });
        }
        
        // --- Écouteurs pour l'ouverture du Modal d'ajout (URLs ajustées) ---

        document.querySelectorAll('.open-modal').forEach(link => {
            link.addEventListener('click', async function(event) {
                event.preventDefault();
                const typeId = this.dataset.type;
                const modalTitle = `Ajouter un champ : ${this.textContent.trim()}`;
                // URL ajustée pour 'champslie'
                const formUrl = `{{ path('manager_formulaire_champslie_champ_add', {'champslie_id': champslie.id, 'type': 0}) | replace({'0': 'TEMP_TYPE'}) }}`.replace('TEMP_TYPE', typeId);
                
                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:', error);
                    showToast('Erreur lors du chargement du formulaire.', 'danger', false);
                }
            });
        });

        // --- Initialisation et Observer (Conservé mais ciblant 'champZone') ---
        if (champslieId) {
            refreshChampsList();
        }

        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>';
            // Assurez-vous que la classe 'modal-open' n'est pas forcée si Bootstrap le gère correctement.
        });

        const champZone = document.getElementById('champZone');
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'childList' || mutation.type === 'attributes') {
                    // Les tooltips sont gérés dans refreshChampsList(), mais on laisse l'observer pour le cas où champZone est manipulée autrement.
                    refreshTooltips();
                }
            });
        });

        const config = { childList: true, subtree: true };
        observer.observe(champZone, config);
    });
</script>
{% endblock %}