{% extends 'base.html.twig' %}

{% block title %}Évaluation du {{ evaluation.dateEvaluation|date('d/m/Y') }} - {{ beneficiaire.nom }} {{ beneficiaire.prenom }}{% endblock %}

{% block body %}
    {% include '_flash_messages.html.twig' %}
    <div class="d-flex">
        <!-- Include de la sidebar -->
        {% include '_sidebar.html.twig' with {
            'beneficiaire': beneficiaire,
            'sectionActive': 'evaluations'
        } %}

        <div class="main-content">
            <!-- Header -->
            <div class="dossier-header" style="padding: 11px 30px">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <div class="beneficiaire-info text-header">
                            <h4 class="mb-0">{{ beneficiaire.civilite ? beneficiaire.civilite|lower|title ~ ' ' : '' }}{{ beneficiaire.nom }} {{ beneficiaire.prenom }}</h4>
                            <small class="sous-titre d-flex align-items-center gap-2">
                                <span>
                                    <i class="fas fa-calendar me-1"></i>
                                    Évaluation du {{ evaluation.dateEvaluation|date('d/m/Y à H:i') }}
                                </span>
                            </small>
                        </div>
                    </div>

                    <div class="header-actions">
                        <!-- Bouton réorganiser -->
                        <button type="button" class="btn-action btn-retour" id="toggleReorder">
                            <i class="fas fa-sort"></i>
                            <span>Réorganiser</span>
                        </button>

                        <a href="{{ path('app_print_evaluation_diagnostic_objectifs', {'id': evaluation.id}) }}"
                           target="_blank"
                           class="btn-action btn-info">
                            <i class="fas fa-print"></i>
                            <span>Impr. Diag + Obj</span>
                        </a>

                        {% if evaluation.statut == 'brouillon' %}
                            <a href="{{ path('app_evaluation_diagnostic', {'beneficiaireId': beneficiaire.id, 'id': evaluation.id}) }}" class="btn-action btn-warning">
                                <i class="fas fa-edit"></i>
                                <span>Continuer</span>
                            </a>
                        {% elseif evaluation.statut == 'termine' %}
                            <a href="{{ path('app_evaluation_propositions', {'beneficiaireId': beneficiaire.id, 'id': evaluation.id}) }}" class="btn-action btn-warning">
                                <i class="fas fa-edit"></i>
                                <span>Modifier</span>
                            </a>
                        {% endif %}

                        <button type="button" class="btn-action btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                            <i class="fas fa-trash"></i>
                            <span>Supprimer</span>
                        </button>

                        <a href="{{ path('app_evaluation_index', {'beneficiaireId': beneficiaire.id}) }}" class="btn-action btn-retour">
                            <i class="fas fa-arrow-left"></i>
                            <span>Retour</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Contenu -->
            <div class="container-fluid p-4" id="sectionsContainer">
                <div class="row">
                    <div class="col-12">
                        <!-- Diagnostic -->
                        {% if evaluation.reponsesDiagnostic is not empty %}
                            {# Créer un mapping code question -> section #}
                            {% set codeQuestionToSection = {} %}
                            {% set sectionTitles = {
                                'etat_emotionnel': 'État émotionnel',
                                'symptomes_psychiques': 'Symptômes psychiques courants',
                                'sentiment_existentiel': 'Sentiment existentiel ou identitaire',
                                'lien_quotidien': 'Lien avec le quotidien et l\'insertion',
                                'experiences_traumatiques_psychiatriques': 'Expériences traumatiques ou psychiatriques',
                                'attentes_vis_soutien': 'Attentes vis-à-vis du soutien',
                                'difficultes_relationnelles_affectives': 'Difficultés relationnelles et affectives',
                                'instabilite_de_vie': 'Instabilité ou précarité de vie',
                                'souffrance_psychique': 'Souffrance psychique / trouble mental',
                                'echec_impossible': 'Échec ou impossibilité d\'insertion',
                                'sante_douleurs_chroniques': 'Santé physique et douleurs chroniques',
                                'experiences_traumatiques_passees': 'Expériences traumatiques passées'
                            } %}

                            {% for section, questions in questionsParSection %}
                                {% for question in questions %}
                                    {% set codeQuestionToSection = codeQuestionToSection|merge({(question.codeQuestion): section}) %}
                                {% endfor %}
                            {% endfor %}

                            <div class="section-item mb-4" data-section="diagnostic">
                                <div class="card border-0 shadow-sm card-enhanced">
                                    <div class="card-header bg-gradient-primary text-white d-flex justify-content-between align-items-center">
                                        <div>
                                            <h5 class="mb-0">
                                                <i class="fas fa-clipboard-check me-2"></i>
                                                Diagnostic - Problématiques identifiées
                                                <span class="badge bg-light text-header fs-6">
                                    {{ evaluation.reponsesDiagnostic|length }}
                                </span>
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            {% for codeQuestion in evaluation.reponsesDiagnostic %}
                                                <div class="col-md-6 mb-3">
                                                    <div class="problematique-item">
                                                        <i class="fas fa-check-circle text-success"></i>
                                                        <span class="code-badge">{{ codeQuestion }}</span>
                                                        {% if codeQuestionToSection[codeQuestion] is defined %}
                                                            <span class="badge text-white ms-2 purple-init" style="font-size: 0.75rem;">
                                                    Réf : {{ sectionTitles[codeQuestionToSection[codeQuestion]]|default(codeQuestionToSection[codeQuestion]|title|replace({'_': ' '})) }}
                                                </span>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                        <!-- Propositions thérapeutiques -->
                        {% set propositionsFinales = propositionsFinalesNormalisees|default(evaluation.propositionsFinales) %}
                        {% if propositionsFinales is not empty %}
                            <div class="section-item mb-4" data-section="propositions">
                                <div class="card border-0 shadow-sm card-enhanced">
                                    <div class="card-header bg-gradient-success text-white d-flex justify-content-between align-items-center">
                                        <div>
                                            <h5 class="mb-0">
                                                <i class="fas fa-lightbulb me-2"></i>
                                                Propositions thérapeutiques
                                            </h5>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            {% if evaluation.propositionsModifiees %}
                                                <span class="badge bg-light text-success">
                                        <i class="fas fa-user-edit"></i> Personnalisées
                                    </span>
                                            {% endif %}
                                            <button type="button" class="btn btn-sm btn-outline-light btn-plier" id="toggleAllSections" title="Tout plier/déplier">
                                                <i class="fas fa-compress-alt me-1" id="toggleAllIcon"></i>
                                                <span id="toggleAllText">Tout plier</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body" id="propositionsContainer">
                                        {% for section, typePropositions in propositionsFinales %}
                                            <div class="proposition-section-item mb-4" data-proposition-section="{{ section }}">
                                                <div class="section-block">

                                                    <div class="section-header d-flex justify-content-center align-items-center" style="padding: 5px">
                                                        <div class="section-number-badge" data-section-number="{{ loop.index }}">
                                                            {{ loop.index }}
                                                        </div>
                                                    </div>

                                                    <div class="section-header-modern d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapse-{{ section }}" aria-expanded="true" aria-controls="collapse-{{ section }}">
                                                        <div class="d-flex align-items-center gap-3">
                                                            <div>
                                                                {% if section == 'etat_emotionnel' %}
                                                                    <i class="fas fa-heart"></i>État émotionnel
                                                                {% elseif section == 'symptomes_psychiques' %}
                                                                    <i class="fas fa-brain"></i>Symptômes psychiques courants
                                                                {% elseif section == 'sentiment_existentiel' %}
                                                                    <i class="fas fa-search"></i>Sentiment existentiel ou identitaire
                                                                {% elseif section == 'lien_quotidien' %}
                                                                    <i class="fas fa-home"></i>Lien avec le quotidien et l'insertion
                                                                {% elseif section == 'experiences_traumatiques_psychiatriques' %}
                                                                    <i class="fas fa-exclamation-triangle"></i>Expériences traumatiques ou psychiatriques
                                                                {% elseif section == 'attentes_vis_soutien' %}
                                                                    <i class="fas fa-hands-helping"></i>Attentes vis-à-vis du soutien
                                                                {% elseif section == 'difficultes_relationnelles_affectives' %}
                                                                    <i class="fas fa-people-arrows"></i>Difficultés relationnelles et affectives
                                                                {% elseif section == 'instabilite_de_vie' %}
                                                                    <i class="fas fa-balance-scale"></i>Instabilité ou précarité de vie
                                                                {% elseif section == 'souffrance_psychique' %}
                                                                    <i class="fas fa-sad-tear"></i>Souffrance psychique / trouble mental
                                                                {% elseif section == 'echec_impossible' %}
                                                                    <i class="fas fa-ban"></i>Échec ou impossibilité d'insertion
                                                                {% elseif section == 'sante_douleurs_chroniques' %}
                                                                    <i class="fas fa-briefcase-medical"></i>Santé physique et douleurs chroniques
                                                                {% elseif section == 'experiences_traumatiques_passees' %}
                                                                    <i class="fas fa-history"></i>Expériences traumatiques passées
                                                                {% else %}
                                                                    <i class="fas fa-list"></i>{{ section|title|replace({'_': ' '}) }}
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                        <button class="btn btn-sm btn-link text-decoration-none p-0" type="button">
                                                            <i class="fas fa-chevron-up collapse-icon" style="transition: transform 0.3s ease;"></i>
                                                        </button>
                                                    </div>

                                                    <div id="collapse-{{ section }}" class="collapse show">
                                                        {# Afficher les propositions par question #}
                                                        {% set questionsSection = questionsParSection[section]|default([]) %}
                                                        {% for indexQuestion, question in questionsSection %}
                                                            <div class="problematique-block mb-4">
                                                                <div class="problematique-header">
                                                                    <div class="problematique-icon">
                                                                        <i class="fas fa-exclamation-circle"></i>
                                                                    </div>
                                                                    <div class="problematique-content">
                                                                        <span class="problematique-code">{{ question.codeQuestion }}</span>
                                                                    </div>
                                                                </div>

                                                                <div class="row proposition-row">
                                                                    {# Manifestation - Les données sont toujours au format 3D grâce à la normalisation #}
                                                                    {% if typePropositions['manifestation'] is defined and typePropositions['manifestation'][indexQuestion] is defined and typePropositions['manifestation'][indexQuestion] is not empty %}
                                                                        {% set manifestation = typePropositions['manifestation'][indexQuestion][0] ?? null %}
                                                                    {% else %}
                                                                        {% set manifestation = null %}
                                                                    {% endif %}
                                                                    {% if manifestation %}
                                                                        <div class="col-md-6 mb-3">
                                                                            <div class="proposition-card">
                                                                                <h6 class="proposition-type-title">
                                                                                    <i class="fas fa-eye"></i>Manifestations
                                                                                </h6>
                                                                                <div class="proposition-content">
                                                                                    <i class="fas fa-angle-right"></i>
                                                                                    <span>{{ manifestation }}</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    {% endif %}

                                                                    {# Objectifs - Les données sont toujours au format 3D grâce à la normalisation #}
                                                                    {% if typePropositions['objectif'] is defined and typePropositions['objectif'][indexQuestion] is defined and typePropositions['objectif'][indexQuestion] is not empty %}
                                                                        {% set objectifs = typePropositions['objectif'][indexQuestion] %}
                                                                    {% else %}
                                                                        {% set objectifs = [] %}
                                                                    {% endif %}
                                                                    {% if objectifs is not empty %}
                                                                        <div class="col-md-6 mb-3">
                                                                            <div class="proposition-card">
                                                                                <h6 class="proposition-type-title">
                                                                                    <i class="fas fa-bullseye"></i>Objectifs
                                                                                </h6>
                                                                                <div class="proposition-content">
                                                                                    {% for objectif in objectifs %}
                                                                                        <div class="mb-2">
                                                                                            <i class="fas fa-angle-right"></i>
                                                                                            <span>{{ objectif }}</span>
                                                                                        </div>
                                                                                    {% endfor %}
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    {% endif %}

                                                                    {# Piste - Les données sont toujours au format 3D grâce à la normalisation #}
                                                                    {% if typePropositions['piste'] is defined and typePropositions['piste'][indexQuestion] is defined and typePropositions['piste'][indexQuestion] is not empty %}
                                                                        {% set piste = typePropositions['piste'][indexQuestion][0] ?? null %}
                                                                    {% else %}
                                                                        {% set piste = null %}
                                                                    {% endif %}
                                                                    {% if piste %}
                                                                        <div class="col-md-6 mb-3">
                                                                            <div class="proposition-card">
                                                                                <h6 class="proposition-type-title">
                                                                                    <i class="fas fa-route"></i>Pistes
                                                                                </h6>
                                                                                <div class="proposition-content">
                                                                                    <i class="fas fa-angle-right"></i>
                                                                                    <span>{{ piste }}</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    {% endif %}

                                                                    {# Outil - Les données sont toujours au format 3D grâce à la normalisation #}
                                                                    {% if typePropositions['outil'] is defined and typePropositions['outil'][indexQuestion] is defined and typePropositions['outil'][indexQuestion] is not empty %}
                                                                        {% set outil = typePropositions['outil'][indexQuestion][0] ?? null %}
                                                                    {% else %}
                                                                        {% set outil = null %}
                                                                    {% endif %}
                                                                    {% if outil %}
                                                                        <div class="col-md-6 mb-3">
                                                                            <div class="proposition-card">
                                                                                <h6 class="proposition-type-title">
                                                                                    <i class="fas fa-tools"></i>Outils
                                                                                </h6>
                                                                                <div class="proposition-content">
                                                                                    <i class="fas fa-angle-right"></i>
                                                                                    <span>{{ outil }}</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                        <!-- Notes complémentaires -->
                        {% if evaluation.notesComplementaires %}
                            <div class="section-item mb-4" data-section="notes">
                                <div class="card border-0 shadow-sm card-enhanced">
                                    <div class="card-header bg-gradient-warning text-dark d-flex justify-content-between align-items-center">
                                        <h5 class="mb-0">
                                            <i class="fas fa-sticky-note me-2"></i>
                                            Notes complémentaires
                                        </h5>
                                        <i class="fas fa-grip-vertical drag-handle d-none"></i>
                                    </div>
                                    <div class="card-body notes-content">
                                        {{ evaluation.notesComplementaires|nl2br }}
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Panneau latéral de réorganisation (EN DEHORS de main-content) -->
    <div class="reorder-panel" id="reorderPanel">
        <div class="reorder-panel-header">
            <h5>
                <i class="fas fa-sort me-2"></i>
                Réorganiser les sections
            </h5>
            <button type="button" class="btn-close" id="closePanel"></button>
        </div>

        <div class="reorder-panel-body">
            <p class="text-muted small mb-3">
                <i class="fas fa-info-circle me-1"></i>
                Glissez les éléments pour modifier l'ordre d'affichage
            </p>

            <div id="sortableList" class="sortable-list">
                <!-- Les items seront ajoutés ici par JavaScript -->
            </div>
        </div>

        <div class="reorder-panel-footer">
            <button type="button" class="btn btn-action btn-retour w-100 mb-2" id="saveOrder">
                <i class="fas fa-save me-1"></i>
                Sauvegarder l'ordre
            </button>
            <button type="button" class="btn btn-action btn-retour w-100" id="cancelReorder">
                <i class="fas fa-times me-1"></i>
                Annuler
            </button>
        </div>
    </div>

    <!-- Overlay (EN DEHORS de main-content) -->
    <div class="reorder-overlay" id="reorderOverlay"></div>

    <!-- Modal de suppression -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Confirmer la suppression
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="lead">Êtes-vous sûr de vouloir supprimer l'évaluation du <strong>{{ evaluation.dateEvaluation|date('d/m/Y') }}</strong> ?</p>

                    {% if evaluation.statut == 'termine' %}
                        <div class="alert alert-warning border-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Attention :</strong> Cette évaluation est terminée et contient des données importantes.
                            La suppression est définitive et irréversible.
                        </div>
                    {% else %}
                        <div class="alert alert-info border-info">
                            <i class="fas fa-info-circle me-2"></i>
                            Cette évaluation est en brouillon. Vous pourrez toujours en créer une nouvelle.
                        </div>
                    {% endif %}

                    <div class="deletion-summary">
                        <h6 class="mb-3 fw-bold"><i class="fas fa-exclamation-triangle text-danger me-2"></i>Si un bilan est lié à cette évaluation, vous devez d'abord supprimer le bilan</h6>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>
                        Annuler
                    </button>
                    {{ include('evaluation/_delete_form.html.twig', {'evaluation': evaluation}) }}
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const toggleBtn = document.getElementById('toggleReorder');
            const closeBtn = document.getElementById('closePanel');
            const saveBtn = document.getElementById('saveOrder');
            const cancelBtn = document.getElementById('cancelReorder');
            const panel = document.getElementById('reorderPanel');
            const overlay = document.getElementById('reorderOverlay');
            const sortableList = document.getElementById('sortableList');
            const propositionsContainer = document.getElementById('propositionsContainer');

            // Vérifier que le conteneur existe
            if (!propositionsContainer) {
                console.warn('Aucun conteneur de propositions trouvé');
                if (toggleBtn) {
                    toggleBtn.style.display = 'none';
                }
                return;
            }

            const propositionSections = propositionsContainer.querySelectorAll('.proposition-section-item');

            // Si aucune section, masquer le bouton
            if (propositionSections.length === 0) {
                console.warn('Aucune section de proposition trouvée');
                if (toggleBtn) {
                    toggleBtn.style.display = 'none';
                }
                return;
            }

            let draggedElement = null;
            let sectionTitles = {};

            // Récupérer les titres des sections
            propositionSections.forEach(section => {
                const headerDiv = section.querySelector('.section-header-modern > div');
                const sectionId = section.dataset.propositionSection;
                if (headerDiv) {
                    sectionTitles[sectionId] = headerDiv.textContent.trim();
                }
            });

            // Créer la liste triable
            function createSortableList() {
                sortableList.innerHTML = '';
                const sections = Array.from(propositionsContainer.querySelectorAll('.proposition-section-item'));

                sections.forEach((section, index) => {
                    const sectionId = section.dataset.propositionSection;
                    const title = sectionTitles[sectionId] || 'Section sans titre';

                    const item = document.createElement('div');
                    item.className = 'sortable-item';
                    item.draggable = true;
                    item.dataset.sectionId = sectionId;

                    item.innerHTML = `
                        <div class="sortable-item-number">${index + 1}</div>
                        <div class="sortable-item-content">
                            <div class="sortable-item-title">${title}</div>
                        </div>
                        <div class="sortable-item-icon">
                            <i class="fas fa-grip-vertical"></i>
                        </div>
                    `;

                    // Événements drag & drop
                    item.addEventListener('dragstart', handleDragStart);
                    item.addEventListener('dragover', handleDragOver);
                    item.addEventListener('drop', handleDrop);
                    item.addEventListener('dragend', handleDragEnd);
                    item.addEventListener('dragenter', handleDragEnter);
                    item.addEventListener('dragleave', handleDragLeave);

                    sortableList.appendChild(item);
                });
            }

            // Ouvrir le panneau
            function openPanel() {
                createSortableList();
                panel.classList.add('active');
                overlay.classList.add('active');
            }

            // Fermer le panneau
            function closePanel() {
                panel.classList.remove('active');
                overlay.classList.remove('active');
            }

            // Handlers drag & drop
            function handleDragStart(e) {
                draggedElement = this;
                this.classList.add('dragging');
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/html', this.innerHTML);
            }

            function handleDragOver(e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
                return false;
            }

            function handleDragEnter(e) {
                if (this !== draggedElement && this.classList.contains('sortable-item')) {
                    this.classList.add('drag-over');
                }
            }

            function handleDragLeave(e) {
                this.classList.remove('drag-over');
            }

            function handleDrop(e) {
                e.stopPropagation();
                e.preventDefault();

                if (draggedElement !== this && this.classList.contains('sortable-item')) {
                    const allItems = Array.from(sortableList.querySelectorAll('.sortable-item'));
                    const draggedIndex = allItems.indexOf(draggedElement);
                    const targetIndex = allItems.indexOf(this);

                    if (draggedIndex < targetIndex) {
                        this.parentNode.insertBefore(draggedElement, this.nextSibling);
                    } else {
                        this.parentNode.insertBefore(draggedElement, this);
                    }

                    updateNumbers();
                }

                this.classList.remove('drag-over');
                return false;
            }

            function handleDragEnd(e) {
                this.classList.remove('dragging');
                const items = sortableList.querySelectorAll('.sortable-item');
                items.forEach(item => item.classList.remove('drag-over'));
            }

            // Mettre à jour les numéros dans le panneau
            function updateNumbers() {
                const items = sortableList.querySelectorAll('.sortable-item');
                items.forEach((item, index) => {
                    const number = item.querySelector('.sortable-item-number');
                    if (number) {
                        number.textContent = index + 1;
                    }
                });
            }

            // Mettre à jour les badges dans le contenu
            function updateContentBadges() {
                const sections = Array.from(propositionsContainer.querySelectorAll('.proposition-section-item'));
                sections.forEach((section, index) => {
                    const badge = section.querySelector('.section-number-badge');
                    if (badge) {
                        badge.textContent = index + 1;
                        badge.dataset.sectionNumber = index + 1;
                    }
                });
            }

            // Sauvegarder l'ordre
            saveBtn.addEventListener('click', function() {
                const newOrder = Array.from(sortableList.querySelectorAll('.sortable-item')).map(
                    item => item.dataset.sectionId
                );

                // Réorganiser les sections dans le DOM
                const sectionsArray = Array.from(propositionSections);
                newOrder.forEach((sectionId, index) => {
                    const section = sectionsArray.find(s => s.dataset.propositionSection === sectionId);
                    if (section) {
                        propositionsContainer.appendChild(section);
                    }
                });

                // Mettre à jour les badges numérotés
                updateContentBadges();

                // Sauvegarder sur le serveur via API
                fetch('{{ path('app_evaluation_save_order', {beneficiaireId: beneficiaire.id, id: evaluation.id}) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ order: newOrder })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Message succès
                            const container = document.querySelector('.container-fluid.p-4');
                            if (container) {
                                const alert = document.createElement('div');
                                alert.className = 'alert alert-success alert-dismissible fade show';
                                alert.innerHTML = `
                            <i class="fas fa-check-circle me-2"></i>
                            Ordre des sections sauvegardé avec succès !
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        `;
                                container.insertBefore(alert, container.firstChild);
                                setTimeout(() => alert.remove(), 3000);
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Erreur lors de la sauvegarde:', error);
                        const container = document.querySelector('.container-fluid.p-4');
                        if (container) {
                            const alert = document.createElement('div');
                            alert.className = 'alert alert-danger alert-dismissible fade show';
                            alert.innerHTML = `
                        <i class="fas fa-exclamation-circle me-2"></i>
                        Erreur lors de la sauvegarde de l'ordre.
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    `;
                            container.insertBefore(alert, container.firstChild);
                            setTimeout(() => alert.remove(), 3000);
                        }
                    });

                closePanel();
            });

            // Annuler
            cancelBtn.addEventListener('click', closePanel);

            // Toggle panel
            if (toggleBtn) {
                toggleBtn.addEventListener('click', openPanel);
            }
            if (closeBtn) {
                closeBtn.addEventListener('click', closePanel);
            }
            if (overlay) {
                overlay.addEventListener('click', closePanel);
            }

            // Charger l'ordre sauvegardé depuis la base de données
            {% if evaluation.propositionsOrder %}
            const savedOrder = {{ evaluation.propositionsOrder|json_encode|raw }};
            if (savedOrder && savedOrder.length > 0) {
                try {
                    const sectionsArray = Array.from(propositionSections);

                    savedOrder.forEach((sectionId, index) => {
                        const section = sectionsArray.find(s => s.dataset.propositionSection === sectionId);
                        if (section) {
                            propositionsContainer.appendChild(section);
                        }
                    });

                    // Mettre à jour les badges après le chargement
                    updateContentBadges();
                } catch (e) {
                    console.error('Erreur lors du chargement de l\'ordre sauvegardé:', e);
                }
            }
            {% endif %}
        });

        // Gestion des boutons de collapse/expand
        document.addEventListener('DOMContentLoaded', function() {
            // Attendre que Bootstrap soit chargé
            setTimeout(function() {
                // Sélectionner tous les éléments collapsibles dans le conteneur des propositions
                const propositionsContainer = document.getElementById('propositionsContainer');
                if (!propositionsContainer) return;

                const collapseElements = propositionsContainer.querySelectorAll('[id^="collapse-"]');

                collapseElements.forEach(function(collapseElement) {
                    // Trouver l'icône correspondante de manière plus spécifique
                    const collapseId = collapseElement.id;
                    const header = propositionsContainer.querySelector('[data-bs-target="#' + collapseId + '"]');

                    if (header) {
                        const icon = header.querySelector('.collapse-icon');

                        // Ajouter des écouteurs d'événements Bootstrap
                        collapseElement.addEventListener('show.bs.collapse', function() {
                            if (icon) {
                                icon.style.transform = 'rotate(0deg)';
                            }
                        });

                        collapseElement.addEventListener('hide.bs.collapse', function() {
                            if (icon) {
                                icon.style.transform = 'rotate(180deg)';
                            }
                        });
                    }
                });
            }, 100); // Délai de 100ms pour s'assurer que Bootstrap est initialisé
        });

        // Gestion du bouton "Tout plier/déplier"
        document.addEventListener('DOMContentLoaded', function() {
            const toggleAllBtn = document.getElementById('toggleAllSections');
            const toggleAllIcon = document.getElementById('toggleAllIcon');
            const toggleAllText = document.getElementById('toggleAllText');
            const propositionsContainer = document.getElementById('propositionsContainer');

            if (!toggleAllBtn || !propositionsContainer) return;

            let allExpanded = true; // Par défaut toutes les sections sont ouvertes

            toggleAllBtn.addEventListener('click', function() {
                const collapseElements = propositionsContainer.querySelectorAll('[id^="collapse-"]');

                if (allExpanded) {
                    // Tout plier
                    collapseElements.forEach(function(element) {
                        const bsCollapse = new bootstrap.Collapse(element, {
                            toggle: false
                        });
                        bsCollapse.hide();
                    });

                    // Mettre à jour le bouton
                    toggleAllIcon.className = 'fas fa-expand-alt';
                    toggleAllText.textContent = 'Tout déplier';
                    allExpanded = false;
                } else {
                    // Tout déplier
                    collapseElements.forEach(function(element) {
                        const bsCollapse = new bootstrap.Collapse(element, {
                            toggle: false
                        });
                        bsCollapse.show();
                    });

                    // Mettre à jour le bouton
                    toggleAllIcon.className = 'fas fa-compress-alt';
                    toggleAllText.textContent = 'Tout plier';
                    allExpanded = true;
                }
            });
        });
    </script>
{% endblock %}