{# templates/admin/website_page/_partials/_statistique.html.twig #}

<div class="stats-management-zone">
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h6 class="fw-bold text-dark mb-1">
                <i class="fas fa-chart-pie me-2 text-warning"></i>Indicateurs de Performance
            </h6>
            <p class="text-muted small mb-0">Ces chiffres seront animés lors du défilement sur le site.</p>
        </div>
        {# Bouton avec classe unique pour éviter les conflits JS #}
        <button type="button" class="btn btn-warning btn-sm shadow-sm px-3 fw-bold js-stat-add-btn" 
                data-list-selector="#statistiques-fields-list">
            <i class="fas fa-plus-circle me-1"></i> Nouveau chiffre
        </button>
    </div>

    {# Container avec classe unique et ID spécifique #}
    <ul id="statistiques-fields-list" 
        class="list-unstyled row g-3 js-stat-container"
        data-prototype="{{ _self.render_stat_item(form.statistiques.vars.prototype)|e('html_attr') }}"
        data-widget-counter="{{ form.statistiques|length }}">
        
        {% for statField in form.statistiques %}
            {# Affichage sur toute la largeur (col-12) #}
            <li class="js-stat-item col-12 animate__animated animate__zoomIn">
                {{ _self.render_stat_item(statField) }}
            </li>
        {% endfor %}
    </ul>
</div>

{# Macro pour le rendu d'un item #}
{% macro render_stat_item(field) %}
    <div class="card border-0 shadow-sm bg-white hover-shadow transition-all overflow-hidden stat-card">
        <div class="card-body p-3 position-relative">
            
            {# Bouton de suppression unique #}
            <button type="button" class="btn btn-link text-danger js-stat-remove position-absolute top-0 end-0 p-2 shadow-none" title="Supprimer">
                <i class="fas fa-times-circle"></i>
            </button>

            <div class="d-flex align-items-center gap-4 mt-2">
                {# Contrôles de tri à gauche #}
                <div class="d-flex flex-column gap-1 bg-light rounded p-1 border">
                    <button type="button" class="btn btn-link btn-sm p-0 text-secondary js-stat-move-up" title="Monter">
                        <i class="fas fa-chevron-up" style="font-size: 0.8rem;"></i>
                    </button>
                    <button type="button" class="btn btn-link btn-sm p-0 text-secondary js-stat-move-down" title="Descendre">
                        <i class="fas fa-chevron-down" style="font-size: 0.8rem;"></i>
                    </button>
                    <div class="d-none">
                        {{ form_widget(field.ordre, {'attr': {'class': 'js-stat-order-input'}}) }}
                    </div>
                </div>

                {# Champs de formulaire alignés horizontalement #}
                <div class="flex-grow-1">
                    <div class="row align-items-end g-3">
                        <div class="col-md-3">
                            {{ form_label(field.value, 'Valeur') }}
                            {{ form_widget(field.value) }}
                        </div>
                        <div class="col-md-8">
                            {{ form_label(field.label, 'Libellé') }}
                            {{ form_widget(field.label) }}
                        </div>
                        {% if field.description is defined %}
                            <div class="col-md-5">
                                {{ form_label(field.description, 'Description') }}
                                {{ form_widget(field.description) }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

<style>
    .stat-card { border-left: 4px solid #ffc107 !important; transition: all 0.3s ease; }
    .hover-shadow:hover { transform: translateX(5px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1) !important; }
    .stat-card label { font-size: 0.75rem !important; text-transform: uppercase; color: #6c757d; font-weight: 700; margin-bottom: 4px; }
    .js-stat-move-up:hover, .js-stat-move-down:hover { color: #ffc107 !important; }
</style>

<script>
/**
 * Gestion isolée des statistiques (un bloc par ligne et pas de double ajout)
 */
(function() {
    const initStatModule = () => {
        const container = document.querySelector('.js-stat-container');
        const addBtn = document.querySelector('.js-stat-add-btn');

        if (!container || !addBtn || addBtn.dataset.statDone) return;

        const updateIndexes = () => {
            container.querySelectorAll('.js-stat-item').forEach((item, idx) => {
                const input = item.querySelector('.js-stat-order-input');
                if (input) input.value = idx;
            });
        };

        // --- AJOUT ---
        addBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation(); // Évite les triggers multiples des scripts globaux

            const prototype = container.dataset.prototype;
            const counter = parseInt(container.dataset.widgetCounter || 0);
            
            const html = prototype.replace(/__name__/g, counter);
            const li = document.createElement('li');
            li.className = 'js-stat-item col-12 animate__animated animate__zoomIn';
            li.innerHTML = html;

            container.appendChild(li);
            container.dataset.widgetCounter = counter + 1;
            updateIndexes();
        });

        // --- ACTIONS ---
        container.addEventListener('click', function(e) {
            const item = e.target.closest('.js-stat-item');
            if (!item) return;

            // Monter
            if (e.target.closest('.js-stat-move-up')) {
                e.preventDefault();
                const prev = item.previousElementSibling;
                if (prev && prev.classList.contains('js-stat-item')) {
                    item.parentNode.insertBefore(item, prev);
                    updateIndexes();
                }
            } 
            // Descendre
            else if (e.target.closest('.js-stat-move-down')) {
                e.preventDefault();
                const next = item.nextElementSibling;
                if (next && next.classList.contains('js-stat-item')) {
                    item.parentNode.insertBefore(next, item);
                    updateIndexes();
                }
            } 
            // Supprimer
            else if (e.target.closest('.js-stat-remove')) {
                e.preventDefault();
                if (confirm('Supprimer cet indicateur ?')) {
                    item.classList.replace('animate__zoomIn', 'animate__zoomOut');
                    item.addEventListener('animationend', () => {
                        item.remove();
                        updateIndexes();
                    }, { once: true });
                }
            }
        });

        // Empêche la ré-initialisation
        addBtn.dataset.statDone = "true";
    };

    // Chargement compatible Turbo / Standard
    document.addEventListener('DOMContentLoaded', initStatModule);
    if (document.readyState !== 'loading') initStatModule();
})();
</script>