{% extends 'gestion/_base.html.twig' %}
{% set active = 'produits' %}

{% block title %}Produits page d'accueil{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Catalogue</span>
            <h1 class="adm-page-title">Produits mis en avant</h1>
            <p class="adm-page-sub">Jusqu'à {{ maxSlots }} produits épinglés sur la page d'accueil, dans l'ordre choisi. Les places restantes sont complétées par les nouveautés.</p>
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_produits') }}">← Retour produits</a>
        </div>
    </div>

    <form method="post" class="adm-grid adm-grid--2">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_produit') }}">

        <div class="adm-card">
            <h2 class="adm-card-title">Sélection actuelle <span id="slot-count" class="adm-mono" style="text-transform:none;">({{ selected|length }}/{{ maxSlots }})</span></h2>
            <ul id="slot-list" class="adm-feed" style="min-height:80px;">
                {% for produit in selected %}
                    <li class="adm-feed-item adm-feed-item--slot" data-slot-id="{{ produit.id }}" style="border:1px solid var(--v2-steel-200);background:#fff;">
                        <span class="adm-slot-num">#{{ loop.index }}</span>
                        <img class="adm-table-thumb" src="{{ path('image_miniature', {id: produit.id}) }}" alt="" onerror="this.onerror=null;this.src='/assets/img-placeholder.svg'">
                        <div class="adm-feed-body">
                            <div class="adm-feed-title">{{ produit.libelle }}</div>
                            <div class="adm-feed-msg adm-mono">#{{ produit.id }}</div>
                        </div>
                        {# Sous 768 px, ce groupe passe seul sur une ligne : trois
                           boutons de 40 px ne laissaient plus lire le libellé. #}
                        <span class="adm-slot-actions">
                            <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-slot-up aria-label="Monter dans l'ordre">↑</button>
                            <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-slot-down aria-label="Descendre dans l'ordre">↓</button>
                            <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-slot-remove aria-label="Retirer de la sélection">✕</button>
                        </span>
                        <input type="hidden" name="slots[]" value="{{ produit.id }}">
                    </li>
                {% endfor %}
            </ul>
            <div style="margin-top:14px;text-align:right;">
                <button type="submit" class="adm-btn">Enregistrer la sélection</button>
            </div>
        </div>

        <div class="adm-card">
            <h2 class="adm-card-title">Produits disponibles</h2>
            {% if available is empty %}
                <div class="adm-empty"><p>Tous les produits visibles sont déjà sélectionnés.</p></div>
            {% else %}
                <ul class="adm-feed" style="max-height:520px;overflow-y:auto;">
                    {% for produit in available %}
                        <li class="adm-feed-item" data-avail-id="{{ produit.id }}">
                            <img class="adm-table-thumb" src="{{ path('image_miniature', {id: produit.id}) }}" alt="" onerror="this.onerror=null;this.src='/assets/img-placeholder.svg'">
                            <div class="adm-feed-body">
                                <div class="adm-feed-title">{{ produit.libelle }}</div>
                                <div class="adm-feed-msg adm-mono">#{{ produit.id }} · {{ produit.prixVente is not null ? produit.prixVente|number_format(2, ',', ' ') ~ ' €' }}</div>
                            </div>
                            <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-slot-add>Ajouter</button>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    </form>
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    var MAX = {{ maxSlots }};
    var list = document.getElementById('slot-list');

    function refreshCount() {
        document.getElementById('slot-count').textContent = '(' + list.children.length + '/' + MAX + ')';
        Array.prototype.forEach.call(list.children, function (li, i) {
            var num = li.querySelector('.adm-slot-num');
            if (num) num.textContent = '#' + (i + 1);
        });
    }

    document.addEventListener('click', function (e) {
        var up = e.target.closest('[data-slot-up]');
        if (up) {
            var li = up.closest('li');
            if (li.previousElementSibling) list.insertBefore(li, li.previousElementSibling);
            refreshCount();
            return;
        }
        var down = e.target.closest('[data-slot-down]');
        if (down) {
            var li2 = down.closest('li');
            if (li2.nextElementSibling) list.insertBefore(li2.nextElementSibling, li2);
            refreshCount();
            return;
        }
        var rm = e.target.closest('[data-slot-remove]');
        if (rm) {
            rm.closest('li').remove();
            refreshCount();
            return;
        }
        var add = e.target.closest('[data-slot-add]');
        if (add) {
            if (list.children.length >= MAX) {
                showNotification({ success: 'attention', title: 'Maximum ' + MAX + ' produits' });
                return;
            }
            var src = add.closest('li');
            var li3 = document.createElement('li');
            li3.className = 'adm-feed-item adm-feed-item--slot';
            li3.setAttribute('data-slot-id', src.getAttribute('data-avail-id'));
            li3.style.cssText = 'border:1px solid var(--v2-steel-200);background:#fff;';
            li3.innerHTML = '<span class="adm-slot-num"></span>'
                + src.querySelector('img').outerHTML
                + '<div class="adm-feed-body">' + src.querySelector('.adm-feed-body').innerHTML + '</div>'
                + '<span class="adm-slot-actions">'
                + '<button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-slot-up aria-label="Monter dans l\'ordre">↑</button>'
                + '<button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-slot-down aria-label="Descendre dans l\'ordre">↓</button>'
                + '<button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-slot-remove aria-label="Retirer de la sélection">✕</button></span>'
                + '<input type="hidden" name="slots[]" value="' + src.getAttribute('data-avail-id') + '">';
            list.appendChild(li3);
            src.remove();
            refreshCount();
        }
    });
})();
</script>
{% endblock %}