{# templates/manager/hierarchique/index.html.twig #}

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

{# Définition de la macro récursive pour le rendu de l'arborescence #}
{% macro renderTree(structures) %}
    {% for structure in structures %}
        <li class="hierarchy-item">
            <div class="hierarchy-node d-flex align-items-center justify-content-between p-2 border-bottom">
                <span class="d-flex align-items-center">
                    {% if structure.children is not empty %}
                        {# ATTENTION : On change l'icône pour qu'elle pointe vers le bas par défaut (développé) #}
                        {# La classe "toggle-children" tournera l'icône à 90deg pour simuler le "fermé" #}
                        <i class="fas fa-caret-right me-2 text-muted toggle-children" 
                            data-bs-toggle="collapse" 
                            data-bs-target="#collapse-{{ structure.idStructure }}" 
                            aria-expanded="true" {# DÉFINI À TRUE #}
                            aria-controls="collapse-{{ structure.idStructure }}">
                        </i>
                    {% endif %}
                    <strong>{{ structure.nom }}</strong> {% if structure.code is not empty %} <small class="text-muted ms-2">({{ structure.code }})</small>{% endif %}
                </span>
                <div class="node-actions btn-group btn-group-sm" role="group">
                    
                    {# PARAMÈTRE CONSERVÉ : 'id' #}
                    <button type="button" class="btn btn-warning open-modal" data-action="edit" data-url="{{ path('app_manager_hierarchique_edit', {'id': structure.idStructure}) }}" title="Modifier la structure">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ structure.idStructure }}" title="Supprimer la structure">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
            </div>

            {# Modale de confirmation de suppression #}
            <div class="modal fade" id="deleteModal{{ structure.idStructure }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ structure.idStructure }}" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg-danger text-white">
                            <h5 class="modal-title" id="deleteModalLabel{{ structure.idStructure }}"><i class="fas fa-exclamation-triangle me-2"></i> Confirmation de suppression</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Êtes-vous sûr de vouloir supprimer la structure "{{ structure.nom }}" ? Cette action est irréversible.
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                            <form method="post" action="{{ path('app_manager_hierarchique_delete', {'id': structure.idStructure}) }}" style="display:inline;">
                                
                                {# Correction du bug CSRF #}
                                {% set csrf_key = 'delete' ~ structure.idStructure %}
<input type="hidden" name="_token" value="{{ csrf_token(csrf_key) }}">
                                
                                <button type="submit" class="btn btn-danger">Confirmer la suppression</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            {% if structure.children is not empty %}
                {# ATTENTION : On supprime la classe "collapse" pour que le contenu soit affiché par défaut #}
                <ul class="hierarchy-tree" id="collapse-{{ structure.idStructure }}">
                    {{ _self.renderTree(structure.children) }}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
{% endmacro %}

{% block title %}Gestion de la Hiérarchie{% endblock %}

{% block content %}
    <style>
        .hierarchy-tree {
            list-style: none;
            padding-left: 0;
            margin-left: 20px;
            border-left: 1px solid #ddd;
        }
        .hierarchy-tree .hierarchy-item {
            position: relative;
            padding-left: 10px;
        }
        .hierarchy-tree .hierarchy-item::before {
            content: '';
            position: absolute;
            left: -1px;
            top: 20px;
            width: 12px;
            height: 1px;
            background-color: #ddd;
        }
        .hierarchy-node {
            background-color: #f8f9fa;
            border-radius: 4px;
            margin: 5px 0;
            padding: 8px 10px !important;
            transition: background-color 0.2s;
            cursor: pointer;
        }
        .hierarchy-node:hover {
            background-color: #e9ecef;
        }
        .toggle-children {
            transition: transform 0.2s;
            cursor: pointer;
        }
        /* Ajustement du CSS pour que l'icône soit en position fermée (tournée) quand elle est *vraiment* fermée */
        .toggle-children[aria-expanded="false"] {
            transform: rotate(0deg); /* Position par défaut (pointe à droite) */
        }
        .toggle-children[aria-expanded="true"] {
            transform: rotate(90deg); /* Position tournée (pointe vers le bas/développé) */
        }
    </style>

    <div class="container-fluid">
        <h1 class="h3 mb-4 text-gray-800">Gestion de la Hiérarchie des Postes</h1>

        {# Affichage des messages flash (inchangé) #}
        {% for type, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ type == 'success' ? 'success' : 'danger' }} 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="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Arborescence</h6>
                <button type="button" class="btn btn-primary btn-sm open-modal" data-action="new" data-url="{{ path('app_manager_hierarchique_new') }}" title="Ajouter une nouvelle structure">
                    <i class="fas fa-plus"></i> Nouvelle structure
                </button>
            </div>
            <div class="card-body">
                {% if rootStructures is not empty %}
                    <ul class="hierarchy-tree border-0">
                        {{ _self.renderTree(rootStructures) }}
                    </ul>
                {% else %}
                    <div class="alert alert-info">
                        Aucune structure n'a été trouvée. Cliquez sur **Nouvelle structure** pour commencer.
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    {# Modale générique pour les actions (inchangée) #}
    <div class="modal fade" id="mainModal" tabindex="-1" aria-labelledby="mainModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title text-body-emphasis" id="mainModalLabel">Chargement...</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {# Contenu chargé via AJAX #}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const mainModalElement = document.getElementById('mainModal');
            const mainModalBody = mainModalElement.querySelector('.modal-body');
            const mainModalTitle = mainModalElement.querySelector('.modal-title');
            const modalInstance = new bootstrap.Modal(mainModalElement, {}); 

            // --- 1. FONCTION DE CHARGEMENT AJAX (inchangée) ---
            const loadModalContent = async (url, title = 'Détails de la structure') => {
                // État de chargement
                mainModalBody.innerHTML = '<div class="text-center p-5"><i class="fas fa-spinner fa-spin me-2"></i> Chargement...</div>';
                mainModalTitle.textContent = title;
                modalInstance.show();

                try {
                    const response = await fetch(url);
                    if (!response.ok) {
                        throw new Error(`Erreur HTTP: ${response.status}`);
                    }
                    const html = await response.text();
                    mainModalBody.innerHTML = html;
                } catch (error) {
                    console.error('Erreur de chargement du contenu de la modal:', error);
                    mainModalBody.innerHTML = '<div class="alert alert-danger">Erreur de chargement du contenu. Veuillez réessayer.</div>';
                }
            };

            // Écouteur pour ouvrir la modale (inchangé)
            document.querySelectorAll('.open-modal').forEach(button => {
                button.addEventListener('click', function() {
                    const url = this.getAttribute('data-url');
                    const action = this.getAttribute('data-action');
                    let title = '';

                    switch (action) {
                        case 'show':
                            title = 'Détails de la structure';
                            break;
                        case 'edit':
                            title = 'Modification de la structure';
                            break;
                        case 'new':
                            title = 'Création d\'une nouvelle structure';
                            break;
                        default:
                            title = this.title || 'Opération de structure';
                    }

                    if (url) {
                        loadModalContent(url, title);
                    }
                });
            });

            // --- 2. GESTION DE LA SOUMISSION DU FORMULAIRE PAR DÉLÉGATION (Logique corrigée) ---
            mainModalElement.addEventListener('submit', async (event) => {
                if (event.target.tagName === 'FORM') {
                    event.preventDefault();
                    const form = event.target;
                    const url = form.action;
                    const formData = new FormData(form);

                    const submitButton = form.querySelector('button[type="submit"]');
                    // 💡 Correction de la portée de la variable
                    const originalHtml = submitButton ? submitButton.innerHTML : 'Enregistrer'; 
                    
                    if (submitButton) {
                        submitButton.disabled = true;
                        submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> En cours...';
                    }

                    try {
                        const response = await fetch(url, {
                            method: form.method,
                            body: formData,
                        });

                        const contentType = response.headers.get('content-type');

                        // ✅ DÉTECTION DU SUCCÈS : Si le contrôleur retourne 204 No Content 
                        // OU si le statut est 200/OK et qu'il n'y a pas de contenu HTML
                        if (response.status === 204 || (response.ok && contentType && !contentType.includes('text/html'))) {
                            modalInstance.hide();
                            // 🚀 Recharge la page pour afficher les données mises à jour et les messages flash
                            location.reload(); 
                            return; // Sortir immédiatement après le rechargement
                        }

                        location.reload(); 
						return; 

                        
                    } catch (error) {
                        console.error('Erreur lors de la soumission du formulaire:', error);
                        mainModalBody.innerHTML = '<div class="alert alert-danger">Une erreur inattendue est survenue. Veuillez vérifier la console.</div>';
                    } finally {
                        // Réactiver le bouton (en cas d'erreur ou si le formulaire est re-rendu avec des erreurs)
                        const newSubmitButton = mainModalElement.querySelector('button[type="submit"]'); 
                        if (newSubmitButton) { 
                            newSubmitButton.disabled = false;
                            newSubmitButton.innerHTML = originalHtml;
                        }
                    }
                }
            });

            // --- 3. GESTION DE LA FERMETURE (inchangée) ---
            mainModalElement.addEventListener('hidden.bs.modal', () => {
                mainModalBody.innerHTML = '';
                mainModalTitle.textContent = 'Chargement...';
            });
            
            // --- 4. GESTION DE L'ICÔNE (inchangée) ---
            document.querySelectorAll('.toggle-children').forEach(icon => {
                const targetId = icon.getAttribute('data-bs-target');
                const targetElement = document.querySelector(targetId);

                if (targetElement) {
                    targetElement.addEventListener('hidden.bs.collapse', () => {
                        icon.setAttribute('aria-expanded', 'false');
                    });
                    targetElement.addEventListener('shown.bs.collapse', () => {
                        icon.setAttribute('aria-expanded', 'true');
                    });
                }
            });
        });
    </script>
{% endblock %}