{# templates/manager/formulaire/new2.html.twig #}

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

{% block title %}Création d'un formulaire - Étape 2{% 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>
        #volletDroit{
            border: 1px solid #ccc;
            background-color: #fff;
            padding: 5px;
        }
        #volletDroitHeader{
            font-weight: bold;
            background-color: #4e8bb1;
            color: #fff;
            padding: 5px;
        }
        .add-btn-link{
            font-family: 'Courier New';
            cursor: pointer;
            border: 1px solid #ccc;
            color: #000;
            padding: 5px;
            background-color: #eee;
            margin: 10px 0px;
            display: block;
            text-decoration: none;
            text-align: center;
        }
        #formZone{
            font-family: arial;
            background-color: #fff;
            padding: 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;
        }
        /* Styles pour les messages de notification */
        .toast-container {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 1050;
        }
        .vlegende {
            font-weight: bold;
        }

    </style>
{% endblock %}

{% block content %}
    {# 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-2">
            <div id="volletDroit">
                <div id="volletDroitHeader">Ajouter un champ d'indicateur</div>
                <div style="height: 10px"></div>
                
                {# Liste des types de champs générée dynamiquement #}
                {% set types_de_champs = [
                    {'id': 1, 'nom': 'Numérique'},
                    {'id': 2, 'nom': 'Texte'},
                    {'id': 3, 'nom': 'Zone de texte'},
                    {'id': 4, 'nom': 'E-mail'},
                    {'id': 5, 'nom': 'Téléphone'},
                    {'id': 6, 'nom': 'URL'},
                    {'id': 7, 'nom': 'Date'},
                    {'id': 8, 'nom': 'Champs à cocher'},
                    {'id': 9, 'nom': 'Bouton radio'},
                    {'id': 10, 'nom': 'Pièce jointe'},
                    {'id': 11, 'nom': 'Select prédéfini'},
                    {'id': 12, 'nom': 'Radio prédéfini'},
                    {'id': 13, 'nom': 'Champs lié'},
                    {'id': 14, 'nom': 'Bloc Titre'}
                ] %}
                
                {% 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 }}">
    {{ type_champ.nom }}
</a>
                {% endfor %}
                
                <div style="height: 20px"></div>
            </div>
        </div>

        <div class="col-md-8">
            <div id="formZone">
                
                <div class="ztitle">{{ formulaire.titre|upper }}</div>
                <div style="height: 10px"></div>
                
                {# La zone où les champs seront affichés #}
                <div id="champZone">
                    <div class="text-center text-info">
                        <i class="fas fa-spinner fa-spin text-success" style="font-size: 2em;"></i>
                        <div>Chargement des champs...</div>
                    </div>
                </div>
                
                <div style="height: 20px"></div>
                
                <div class="row" style="margin: 0; padding: 0;">
                    <div class="col-md-4" style="text-align: left;">
                        <a href="{{ path('manager_formulaire_edit', {'id': formulaire.id}) }}" class="btn btn-success"><i class="fa-solid fa-chevron-left"></i> Étape précédente</a>
                    </div>
                    <div class="col-md-4" style="text-align: center;">
                        <a href="{{ path('manager_formulaire_index') }}" class="btn btn-danger">Annuler l'opération</a>
                    </div>
                    <div class="col-md-4" style="text-align: right;">
                        <a href="{{ path('manager_formulaire_show', {'id': formulaire.id}) }}" class="btn btn-success">Enregistrer et terminer <i class="fa-solid fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div id="volletDroit">
                <div id="volletDroitHeader">
                    Information de base
                    <div style="float: right;">
                        <a style="color: #fff" href="{{ path('manager_formulaire_edit', {'id': formulaire.id}) }}"><i class="fa-solid fa-pencil" title="Modifier"></i></a>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div style="height: 5px"></div>
                <div>
                    <span class="vlegende">Nom de table / code : </span><br>
                    <span class="vdata">{{ formulaire.nomTable }}</span>
                </div>
                <div class="velement">
                    <span class="vlegende">Statut : </span><br>
                    <span class="vdata">
                        {% if formulaire.active %}
                            <i class="fa-solid fa-circle-check" data-toggle="tooltip" data-placement="top" title="Actif" style="font-size: 1.5em; color: #2ba558;"></i>
                        {% else %}
                            <i class="fa-solid fa-circle-xmark" data-toggle="tooltip" data-placement="top" title="Inactif" style="font-size: 1.5em; color: #fc825c;"></i>
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addChampModal" tabindex="-1" aria-labelledby="addChampModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addChampModalLabel">Ajouter un nouveau champ</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div id="modalBodyContent" class="modal-body text-center">
                    {# Le contenu du formulaire sera chargé ici via AJAX #}
                    <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>
{% endblock %}

{% block javascripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const addChampModal = new bootstrap.Modal(document.getElementById('addChampModal'));
        const modalElement = document.getElementById('addChampModal');
        const toastContainer = document.querySelector('.toast-container');
        let formulaireId = null;
        const firstOpenModalLink = document.querySelector('.open-modal');
        if (firstOpenModalLink) {
            formulaireId = firstOpenModalLink.dataset.formulaireId;
        }

        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.', 'danger', false);
                    if (data.form_html) {
                        document.getElementById('modalBodyContent').innerHTML = data.form_html;
                    }
                }
            } catch (error) {
                console.error('Erreur de soumission du formulaire:', error);
                showToast('Erreur de soumission du formulaire.', '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"><i class="fas fa-spinner fa-spin text-success" style="font-size: 2em;"></i><div>Chargement en cours...</div></div>';
            try {
                const response = await fetch(url);
                const html = await response.text();
                champZone.innerHTML = html;
                attachDeleteEventListeners();
                attachEditEventListeners();
                attachOrderEventListeners();
                attachValidationEventListeners();
                // Avec le MutationObserver, l'appel explicite n'est plus nécessaire ici.
                // initializeTooltips();
            } 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);
            }
        }

        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 ?');
                    if (confirmDelete) {
                        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);
                            }
                        } catch (error) {
                            console.error('Erreur de suppression:', error);
                            showToast('Erreur de suppression du champ.', 'danger', false);
                        }
                    }
                });
            });
        }

        function attachEditEventListeners() {
            document.querySelectorAll('.edit-champ-btn').forEach(button => {
                button.addEventListener('click', async function(event) {
                    event.preventDefault();
                    const champId = this.dataset.champId;
                    const modalTitle = `Modifier un champ : ${this.dataset.champNom.trim()}`;
                    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;
                    document.getElementById('modalBodyContent').innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin text-success" style="font-size: 2em;"></i></div>';
                    addChampModal.show();
                    try {
                        const formResponse = await fetch(formUrl, {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });
                        const formHtml = await formResponse.text();
                        document.getElementById('modalBodyContent').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, 'success');
                            refreshChampsList();
                        } else {
                            showToast(data.message, 'info');
                        }
                    } catch (error) {
                        console.error('Erreur lors du changement d\'ordre:', error);
                        showToast('Erreur lors du changement d\'ordre.', 'danger', false);
                    }
                });
            });
        }

        function attachValidationEventListeners() {
            document.querySelectorAll('select[name^="validate"]').forEach(selectElement => {
                selectElement.addEventListener('change', async function(event) {
                    const level = this.dataset.level;
                    const hierarchiqueId = this.value;
                    const formulaireId = {{ formulaire.id }};
                    
                    // Construire l'URL de la requête AJAX
                    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:', error);
                        showToast('Erreur de connexion au serveur.', 'danger', false);
                    }
                });
            });
        }


        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()}`;
                const formUrl = `{{ path('manager_formulaire_champ_add', {'formulaire_id': formulaire.id, 'type': 0}) | replace({'0': 'TEMP_TYPE'}) }}`.replace('TEMP_TYPE', typeId);
                document.getElementById('addChampModalLabel').textContent = modalTitle;
                document.getElementById('modalBodyContent').innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin text-success" style="font-size: 2em;"></i></div>';
                addChampModal.show();
                try {
                    const formResponse = await fetch(formUrl, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    const formHtml = await formResponse.text();
                    document.getElementById('modalBodyContent').innerHTML = formHtml;
                    attachFormSubmissionListener();
                } catch (error) {
                    console.error('Erreur lors du chargement du formulaire:', error);
                    showToast('Erreur lors du chargement du formulaire.', 'danger', false);
                }
            });
        });

        if (formulaireId) {
            refreshChampsList();
        }

        modalElement.addEventListener('hidden.bs.modal', function () {
            document.body.classList.remove('modal-open');
        });

        // ----------------------------------------------------
        MUTATIONOBSERVER
        // ----------------------------------------------------
        const champZone = document.getElementById('champZone');
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'childList' || mutation.type === 'attributes') {
                    // On détruit toutes les infobulles existantes pour éviter les doublons et les conflits
                    const tooltips = document.querySelectorAll('.tooltip');
                    tooltips.forEach(tooltip => tooltip.remove());

                    // On réinitialise les infobulles sur le nouveau contenu
                    const tooltipTriggerList = [].slice.call(document.querySelectorAll('#champZone [data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function(tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                }
            });
        });

        // On configure l'observateur pour surveiller les changements dans les enfants de la balise
        const config = { childList: true, subtree: true };
        observer.observe(champZone, config);

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