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

<div class="row mb-4">
    <div class="col-md-6">
        {{ form_label(form.futureTitre) }}
        {{ form_widget(form.futureTitre) }}
    </div>
    <div class="col-md-6">
        {{ form_label(form.futureSousTitre) }}
        {{ form_widget(form.futureSousTitre) }}
    </div>
</div>

<hr class="my-4 opacity-25">

<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0 text-primary fw-bold"><i class="fas fa-list-ol me-2"></i>Liste des points forts</h5>
    <a href="https://icons.getbootstrap.com/" target="_blank" class="btn btn-sm btn-outline-info">
        <i class="bi bi-search me-1"></i>Catalogue d'icônes
    </a>
</div>

{# LISTE DES ATOUTS #}
<div id="atouts-container" 
     class="collection-list"
     data-prototype="{{ _self.render_atout_item(form.futures.vars.prototype)|e('html_attr') }}"
     data-widget-counter="{{ form.futures|length }}">
    
    {% for futureField in form.futures %}
        {{ _self.render_atout_item(futureField) }}
    {% endfor %}
</div>

<div class="text-center mt-4">
    <button type="button" class="btn btn-primary px-4 shadow-sm fw-bold add-atout-btn">
        <i class="fas fa-plus-circle me-2"></i>Ajouter un nouvel atout
    </button>
</div>

{# --- MACRO POUR UN ATOUT UNIQUE --- #}
{% macro render_atout_item(field) %}
    <div class="atout-item border rounded-3 p-3 mb-3 bg-white shadow-sm position-relative">
        <div class="row g-3 align-items-center">
            
            {# 1. Contrôles de tri #}
            <div class="col-auto d-flex flex-column gap-1 border-end pe-3">
                <button type="button" class="btn btn-outline-secondary btn-sm move-up" title="Monter">
                    <i class="fas fa-chevron-up"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm move-down" title="Descendre">
                    <i class="fas fa-chevron-down"></i>
                </button>
                {# Champ ordre masqué : sa valeur est pilotée par updateOrders() #}
                {{ form_widget(field.ordre, {'attr': {'class': 'atout-order-input d-none'}}) }}
            </div>

            {# 2. Preview & Input Icône #}
            <div class="col-md-2 text-center border-end">
                <div class="icon-preview-wrapper mx-auto mb-2 shadow-sm border border-primary-subtle bg-light rounded">
                    <i class="bi bi-question text-muted"></i>
                </div>
                {{ form_label(field.icone, 'Icône') }}
                {{ form_widget(field.icone, {'attr': {'class': 'form-control form-control-sm icone-input', 'placeholder': 'bi-star'}}) }}
            </div>

            {# 3. Contenu #}
            <div class="col">
                <div class="row g-2">
                    <div class="col-12">
                        {{ form_label(field.titre) }}
                        {{ form_widget(field.titre) }}
                    </div>
                    <div class="col-12">
                        {{ form_label(field.description) }}
                        {{ form_widget(field.description, {'attr': {'rows': '2'}}) }}
                    </div>
                </div>
            </div>
        </div>

        <button type="button" class="btn btn-sm text-danger remove-atout position-absolute top-0 end-0 mt-2 me-2" title="Supprimer">
            <i class="fas fa-times-circle fa-lg"></i>
        </button>
    </div>
{% endmacro %}

<style>
    .icon-preview-wrapper { 
        width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; 
        font-size: 1.5rem; color: #0d6efd; background: #f8f9fa;
    }
    .atout-item { border-left: 5px solid #dee2e6 !important; transition: all 0.2s; }
    .atout-item:hover { border-left-color: #0d6efd !important; background-color: #f8f9fa !important; }
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('atouts-container');

    /**
     * Parcourt tous les blocs présents et assigne un numéro d'ordre 
     * correspondant à leur position physique dans la liste.
     */
    const updateOrders = () => {
        const items = container.querySelectorAll('.atout-item');
        items.forEach((item, index) => {
            // Sélectionne l'input ordre (par classe ou par name Symfony)
            const orderInput = item.querySelector('input[name*="[ordre]"]');
            if (orderInput) {
                orderInput.value = index; 
                // index 0 pour le 1er, 1 pour le 2ème, etc.
            }
        });
    };

    const updatePreview = (input) => {
        const item = input.closest('.atout-item');
        if (!item) return;
        const preview = item.querySelector('.icon-preview-wrapper i');
        const val = input.value.trim();
        preview.className = val.startsWith('bi-') ? `bi ${val}` : 'bi bi-question text-muted';
    };

    // Init previews au chargement
    container.querySelectorAll('.icone-input').forEach(updatePreview);

    document.addEventListener('click', (e) => {
        const btnAdd = e.target.closest('.add-atout-btn');
        const btnRem = e.target.closest('.remove-atout');
        const btnUp  = e.target.closest('.move-up');
        const btnDown = e.target.closest('.move-down');

        // AJOUT : Le nouvel élément est placé à la fin et reçoit l'ordre max + 1
        if (btnAdd) {
            let counter = parseInt(container.dataset.widgetCounter);
            const proto = container.dataset.prototype.replace(/__name__/g, counter);
            
            container.insertAdjacentHTML('beforeend', proto);
            container.dataset.widgetCounter = counter + 1;
            
            // On recalcule les ordres (le nouveau prendra l'index length-1)
            updateOrders();
            
            const lastItem = container.lastElementChild;
            const newTitle = lastItem.querySelector('input[name*="[titre]"]');
            if (newTitle) newTitle.focus();
        }

        // SUPPRESSION
        if (btnRem) {
            if(confirm('Supprimer cet atout ?')) {
                btnRem.closest('.atout-item').remove();
                updateOrders();
            }
        }

        // RÉORDONNANCEMENT (UP / DOWN)
        if (btnUp || btnDown) {
            const item = (btnUp || btnDown).closest('.atout-item');
            if (btnUp && item.previousElementSibling) {
                item.parentNode.insertBefore(item, item.previousElementSibling);
            } else if (btnDown && item.nextElementSibling) {
                item.parentNode.insertBefore(item.nextElementSibling, item);
            }
            // Après le déplacement DOM, on synchronise les valeurs du champ 'ordre'
            updateOrders();
        }
    });

    document.addEventListener('input', (e) => {
        if (e.target.classList.contains('icone-input')) {
            updatePreview(e.target);
        }
    });
});
</script>