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

{% block title %}Images menu{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Communication</span>
            <h1 class="adm-page-title">Images du menu produits</h1>
            <p class="adm-page-sub">Photos affichées dans le menu déroulant « Nos Produits » du site — la première est montrée en premier, défilement automatique.</p>
        </div>
    </div>

    <div class="adm-card">
        <h2 class="adm-card-title">Photos <span style="font-weight:400;text-transform:none;letter-spacing:0;">— {{ maxImages }} maximum, réordonnez avec les flèches</span></h2>

        <div id="img-grid" class="adm-imggrid" style="margin-top:0;">
            {% for file in imageFiles %}
                <figure class="adm-imgbox" data-img-file="{{ file }}">
                    <img src="{{ asset('assets/header-carousel/' ~ file) }}?v={{ 'now'|date('U') }}" alt="" style="cursor:zoom-in;" data-img-zoom>
                    <figcaption>
                        <span class="adm-imgbox-head">
                            <span data-img-label>#{{ loop.index }}</span>
                            <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-img-delete title="Supprimer" style="padding:2px 7px;">✕</button>
                        </span>
                        <span class="adm-imgbox-arrows">
                            <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-img-left title="Avancer">←</button>
                            <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-img-right title="Reculer">→</button>
                        </span>
                    </figcaption>
                </figure>
            {% endfor %}
        </div>
        {% if imageFiles is empty %}
            <div class="adm-empty" id="img-empty"><p>Aucune photo — le menu s'affichera sans carrousel.</p></div>
        {% endif %}

        <div style="margin-top:14px;">
            <input type="file" id="img-upload" multiple accept="image/jpeg,image/png,image/webp" hidden>
            <div class="adm-dropzone" id="edit-img-drop" role="button" tabindex="0" aria-label="Ajouter des photos">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/></svg>
                <span><strong>Glissez vos photos ici</strong> ou cliquez pour parcourir</span>
                <span style="font-size:0.74rem;">jpg / png / webp · 20 Mo max · photos recadrées en carré à l'affichage</span>
            </div>
        </div>
    </div>

    {# Visionneuse plein écran #}
    <div id="img-lightbox" class="adm-modal-overlay" hidden style="cursor:zoom-out;">
        <img src="" alt="" style="max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:var(--v2-sh-lift);">
    </div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    var api = function (action) { return '/gestion/api/carrousel/images' + action; };
    var grid = document.getElementById('img-grid');

    function currentOrder() {
        return Array.prototype.map.call(grid.querySelectorAll('[data-img-file]'), function (el) {
            return el.getAttribute('data-img-file');
        });
    }

    function refreshCaptions() {
        Array.prototype.forEach.call(grid.querySelectorAll('[data-img-file]'), function (el, i) {
            el.querySelector('[data-img-label]').textContent = '#' + (i + 1);
        });
    }

    /* Reconstruit la grille depuis la réponse API — pas de rechargement de page. */
    function rebuildGrid(files) {
        grid.innerHTML = '';
        files.forEach(function (file, i) {
            var fig = document.createElement('figure');
            fig.className = 'adm-imgbox';
            fig.setAttribute('data-img-file', file);
            fig.innerHTML = '<img alt="" style="cursor:zoom-in;" data-img-zoom>'
                + '<figcaption>'
                + '<span class="adm-imgbox-head"><span data-img-label></span>'
                + '<button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-img-delete title="Supprimer" style="padding:2px 7px;">✕</button></span>'
                + '<span class="adm-imgbox-arrows">'
                + '<button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-img-left title="Avancer">←</button>'
                + '<button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-img-right title="Reculer">→</button>'
                + '</span></figcaption>';
            fig.querySelector('img').src = '/assets/header-carousel/' + file + '?v=' + Date.now();
            fig.querySelector('[data-img-label]').textContent = '#' + (i + 1);
            grid.appendChild(fig);
        });
        var empty = document.getElementById('img-empty');
        if (empty) { empty.hidden = files.length > 0; }
    }

    function saveOrder() {
        admFetch(api('/reorder'), { body: { order: currentOrder() } }).then(function (data) {
            showNotification({ success: true, title: 'Ordre du carrousel enregistré' });
            rebuildGrid(data.files);
        });
    }

    grid.addEventListener('click', function (e) {
        var fig = e.target.closest('[data-img-file]');
        if (!fig) return;

        if (e.target.closest('[data-img-left]')) {
            var prev = fig.previousElementSibling;
            if (prev) { grid.insertBefore(fig, prev); refreshCaptions(); saveOrder(); }
            return;
        }
        if (e.target.closest('[data-img-right]')) {
            var next = fig.nextElementSibling;
            if (next) { grid.insertBefore(next, fig); refreshCaptions(); saveOrder(); }
            return;
        }
        if (e.target.closest('[data-img-delete]')) {
            admConfirm({ title: 'Supprimer cette photo ?', message: 'Elle disparaîtra immédiatement du menu du site.', okLabel: 'Supprimer', danger: true })
                .then(function (ok) {
                    if (!ok) return;
                    admFetch(api('/delete'), { body: { file: fig.getAttribute('data-img-file') } }).then(function (data) {
                        showNotification({ success: true, title: 'Photo supprimée' });
                        rebuildGrid(data.files);
                    });
                });
            return;
        }
        if (e.target.hasAttribute('data-img-zoom')) {
            var lb = document.getElementById('img-lightbox');
            lb.querySelector('img').src = e.target.src;
            lb.hidden = false;
        }
    });

    document.getElementById('img-lightbox').addEventListener('click', function () { this.hidden = true; });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') document.getElementById('img-lightbox').hidden = true;
    });

    var uploadInput = document.getElementById('img-upload');
    var dropzone = document.getElementById('edit-img-drop');

    function uploadFiles(files) {
        if (!files.length) return;
        var fd = new FormData();
        Array.prototype.forEach.call(files, function (f) { fd.append('images[]', f); });
        admFetch(api(''), { body: fd }).then(function (data) {
            if (data.rejected && data.rejected.length) {
                showNotification({ success: 'attention', title: 'Certaines photos ont été refusées', message: data.rejected.join(', ') });
            } else {
                showNotification({ success: true, title: data.added + ' photo(s) ajoutée(s)' });
            }
            rebuildGrid(data.files);
            uploadInput.value = '';
        });
    }

    dropzone.addEventListener('click', function () { uploadInput.click(); });
    dropzone.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); uploadInput.click(); } });
    ['dragover', 'dragenter'].forEach(function (t) {
        dropzone.addEventListener(t, function (e) { e.preventDefault(); dropzone.classList.add('is-dragover'); });
    });
    ['dragleave', 'drop'].forEach(function (t) {
        dropzone.addEventListener(t, function (e) { e.preventDefault(); dropzone.classList.remove('is-dragover'); });
    });
    dropzone.addEventListener('drop', function (e) { uploadFiles(e.dataTransfer.files); });
    uploadInput.addEventListener('change', function () { uploadFiles(uploadInput.files); });
})();
</script>
{% endblock %}