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

{% block title %}{{ isNew ? 'Nouveau produit' : 'Produit — ' ~ produit.libelle }}{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Catalogue</span>
            <h1 class="adm-page-title">{{ isNew ? 'Nouveau produit' : produit.libelle }}</h1>
            {% if not isNew %}<p class="adm-page-sub adm-mono">#{{ produit.id }} · créé le {{ produit.dhCreation|date('d/m/Y') }}</p>{% endif %}
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_produits') }}">← Retour</a>
        </div>
    </div>

    <form method="post" enctype="multipart/form-data" 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">Informations</h2>
            <div class="adm-form">
                <div class="adm-field">
                    <input type="text" id="f-libelle" name="libelle" value="{{ produit.libelle }}" placeholder=" " required maxlength="150">
                    <label for="f-libelle">Libellé</label>
                </div>
                <div class="adm-form-row">
                    <div class="adm-field">
                        <input type="text" id="f-prix" name="prix" value="{{ produit.prixVente is not null ? produit.prixVente }}" placeholder=" " required inputmode="decimal">
                        <label for="f-prix">Prix (€)</label>
                    </div>
                    <div class="adm-field">
                        <select id="f-type" name="type" required>
                            {% for type in types %}
                                <option value="{{ type.value }}" {{ produit.typeProduit and produit.typeProduit.value == type.value ? 'selected' }}>{{ type.value|replace({'_': ' '})|capitalize }}</option>
                            {% endfor %}
                        </select>
                        <label for="f-type">Type</label>
                    </div>
                </div>
                <div class="adm-form-row" id="f-modelvariante-row">
                    <div class="adm-field">
                        <select id="f-modele" name="modele">
                            <option value="">Aucun modèle</option>
                            {% for modele in modeles %}
                                <option value="{{ modele.id }}" {{ produit.model and produit.model.id == modele.id ? 'selected' }}>{{ modele.libelle }}</option>
                            {% endfor %}
                        </select>
                        <label for="f-modele">Modèle (couteaux)</label>
                    </div>
                    <div class="adm-field">
                        <select id="f-variante" name="variante">
                            <option value="">Aucune variante</option>
                            {% for variante in variantes %}
                                <option value="{{ variante.value }}" {{ produit.variante and produit.variante.value == variante.value ? 'selected' }}>{{ variante.value|capitalize }}</option>
                            {% endfor %}
                        </select>
                        <label for="f-variante">Variante</label>
                    </div>
                </div>
                <div class="adm-form-row">
                    <div class="adm-field">
                        <select id="f-boutique" name="boutique">
                            {% for boutique in boutiques %}
                                <option value="{{ boutique.value }}" {{ produit.statusBoutique and produit.statusBoutique.value == boutique.value ? 'selected' }}>{{ boutique.value|capitalize }}</option>
                            {% endfor %}
                        </select>
                        <label for="f-boutique">Statut boutique</label>
                    </div>
                    <label class="adm-check" style="align-self:center;">
                        <input type="checkbox" name="visible" value="1" {{ isNew or produit.status.value == 'visible' ? 'checked' }}>
                        Visible sur la boutique
                    </label>
                </div>
                <div class="adm-field">
                    <textarea id="f-description" name="description" placeholder=" " style="min-height:140px;">{{ produit.description }}</textarea>
                    <label for="f-description">Description</label>
                </div>
                <div style="text-align:right;">
                    <button type="submit" class="adm-btn">{{ isNew ? 'Créer le produit' : 'Enregistrer' }}</button>
                </div>
            </div>
        </div>

        <div class="adm-card">
            <h2 class="adm-card-title">Images <span style="font-weight:400;text-transform:none;letter-spacing:0;">— la première est la vignette</span></h2>

            {% if isNew %}
                {# Zone de dépôt fixe + previews réorganisables avant création. #}
                <input type="file" id="new-img-input" name="images[]" multiple accept="image/jpeg,image/png,image/webp" hidden>
                <div class="adm-dropzone" id="new-img-drop" role="button" tabindex="0" aria-label="Ajouter des images">
                    <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 images ici</strong> ou cliquez pour parcourir</span>
                    <span style="font-size:0.74rem;">jpg / png / webp · 20 Mo max par image</span>
                </div>
                <div class="adm-imggrid" id="new-img-grid" hidden></div>
                <p class="adm-field-help" id="new-img-help" hidden>La première image est la vignette — réorganisez avec les flèches avant de créer le produit.</p>
            {% else %}
                <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/product/' ~ 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 == 1 ? 'VIGNETTE' : '#' ~ 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 image — le produit affichera le visuel par défaut.</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 images">
                        <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 des images ici</strong> ou cliquez pour en ajouter</span>
                        <span style="font-size:0.74rem;">jpg / png / webp · 20 Mo max · ← → pour réordonner</span>
                    </div>
                </div>
            {% endif %}
        </div>
    </form>

    {# 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';
    // Modèle/Variante ne concernent que les couteaux (voir ProductType) : masqués sinon,
    // pour éviter d'associer un modèle/variante de couteau à un tire-bouchon, un accessoire, etc.
    var typeSelect = document.getElementById('f-type');
    var row = document.getElementById('f-modelvariante-row');
    var modeleSelect = document.getElementById('f-modele');
    var varianteSelect = document.getElementById('f-variante');

    function sync() {
        var isCouteau = 'couteau' === typeSelect.value;
        row.hidden = !isCouteau;
        if (!isCouteau) {
            modeleSelect.value = '';
            varianteSelect.value = '';
        }
    }

    typeSelect.addEventListener('change', sync);
    sync();
})();
</script>
{% if not isNew %}
<script>
(function () {
    'use strict';
    var PRODUIT_ID = {{ produit.id }};
    var api = function (action) { return '/gestion/api/produits/' + PRODUIT_ID + '/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 === 0 ? 'VIGNETTE' : '#' + (i + 1)) + ' ';
        });
    }

    /* Reconstruit la grille depuis la réponse API — pas de rechargement de page,
       les notifications restent donc lisibles. */
    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/product/' + file + '?v=' + Date.now();
            fig.querySelector('[data-img-label]').textContent = 0 === i ? 'VIGNETTE' : '#' + (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 des images 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 image ?', message: 'La numérotation sera automatiquement resserrée.', 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: 'Image 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 images ont été refusées', message: data.rejected.join(', ') });
            } else {
                showNotification({ success: true, title: data.added + ' image(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>
{% else %}
<script>
(function () {
    'use strict';
    var input = document.getElementById('new-img-input');
    var drop = document.getElementById('new-img-drop');
    var grid = document.getElementById('new-img-grid');
    var help = document.getElementById('new-img-help');
    var items = []; // { file, url } — l'ordre visuel devient l'ordre d'upload.

    function syncInput() {
        var dt = new DataTransfer();
        items.forEach(function (it) { dt.items.add(it.file); });
        input.files = dt.files;
    }

    function render() {
        grid.hidden = 0 === items.length;
        help.hidden = 0 === items.length;
        grid.innerHTML = '';
        items.forEach(function (it, i) {
            var box = document.createElement('figure');
            box.className = 'adm-imgbox';
            box.innerHTML = '<img alt="">'
                + '<figcaption>'
                + '<span class="adm-imgbox-head"><span data-img-label></span>'
                + '<button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-new-del="' + i + '" 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-new-left="' + i + '" title="Avancer">←</button>'
                + '<button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-new-right="' + i + '" title="Reculer">→</button>'
                + '</span></figcaption>';
            box.querySelector('img').src = it.url;
            box.querySelector('[data-img-label]').textContent = 0 === i ? 'VIGNETTE' : '#' + (i + 1);
            grid.appendChild(box);
        });
        syncInput();
    }

    function addFiles(files) {
        var rejected = [];
        Array.prototype.forEach.call(files, function (f) {
            if (!/^image\/(jpeg|png|webp)$/.test(f.type) || f.size > 20 * 1024 * 1024) {
                rejected.push(f.name);
                return;
            }
            items.push({ file: f, url: URL.createObjectURL(f) });
        });
        if (rejected.length) {
            showNotification({ success: 'attention', title: 'Fichier(s) refusé(s)', message: rejected.join(', ') });
        }
        render();
        grid.scrollTop = grid.scrollHeight;
    }

    drop.addEventListener('click', function () { input.click(); });
    drop.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); input.click(); } });
    ['dragover', 'dragenter'].forEach(function (t) {
        drop.addEventListener(t, function (e) { e.preventDefault(); drop.classList.add('is-dragover'); });
    });
    ['dragleave', 'drop'].forEach(function (t) {
        drop.addEventListener(t, function (e) { e.preventDefault(); drop.classList.remove('is-dragover'); });
    });
    drop.addEventListener('drop', function (e) { addFiles(e.dataTransfer.files); });
    input.addEventListener('change', function () { addFiles(input.files); });

    grid.addEventListener('click', function (e) {
        var del = e.target.closest('[data-new-del]');
        if (del) {
            var i = parseInt(del.getAttribute('data-new-del'), 10);
            URL.revokeObjectURL(items[i].url);
            items.splice(i, 1);
            render();
            return;
        }
        var left = e.target.closest('[data-new-left]');
        if (left) {
            var l = parseInt(left.getAttribute('data-new-left'), 10);
            if (l > 0) { items.splice(l - 1, 0, items.splice(l, 1)[0]); render(); }
            return;
        }
        var right = e.target.closest('[data-new-right]');
        if (right) {
            var r = parseInt(right.getAttribute('data-new-right'), 10);
            if (r < items.length - 1) { items.splice(r + 1, 0, items.splice(r, 1)[0]); render(); }
        }
    });
})();
</script>
{% endif %}
{% endblock %}