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

{% block title %}Produits{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Catalogue</span>
            <h1 class="adm-page-title">Gestion des produits</h1>
            <p class="adm-page-sub">{{ total }} produit{{ total > 1 ? 's' }}</p>
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_produits_slots') }}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l9-8 9 8"/><path d="M5 10v10h5v-6h4v6h5V10"/></svg>
                Produits page d'accueil
            </a>
            <a class="adm-btn" href="{{ path('gestion_produit_new') }}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
                Nouveau produit
            </a>
        </div>
    </div>

    <form method="get" action="{{ path('gestion_produits') }}" class="adm-card" style="margin-bottom:16px;">
        <div class="adm-form-row">
            <div class="adm-field">
                <select name="type">
                    <option value="">Tous les types</option>
                    {% for type in types %}
                        <option value="{{ type.value }}" {{ filters.type == type.value ? 'selected' }}>{{ type.value|replace({'_': ' '})|capitalize }}</option>
                    {% endfor %}
                </select>
                <label>Type</label>
            </div>
            <div class="adm-field">
                <select name="boutique">
                    <option value="">Tous les statuts</option>
                    <option value="vente" {{ filters.boutique == 'vente' ? 'selected' }}>En vente</option>
                    <option value="vendu" {{ filters.boutique == 'vendu' ? 'selected' }}>Vendu</option>
                    <option value="exposition" {{ filters.boutique == 'exposition' ? 'selected' }}>Exposition</option>
                </select>
                <label>Boutique</label>
            </div>
            <div class="adm-field">
                <select name="visibilite">
                    <option value="">Visibles et masqués</option>
                    <option value="visible" {{ filters.visibilite == 'visible' ? 'selected' }}>Visibles</option>
                    <option value="no_visible" {{ filters.visibilite == 'no_visible' ? 'selected' }}>Masqués</option>
                </select>
                <label>Visibilité</label>
            </div>
            <div class="adm-field">
                <input type="search" name="q" value="{{ filters.q }}" placeholder=" ">
                <label>Recherche libellé</label>
            </div>
            <button type="submit" class="adm-btn adm-btn--ghost" style="align-self:center;">Filtrer</button>
        </div>
    </form>

    {% if produits is empty %}
        <div class="adm-card"><div class="adm-empty"><p>Aucun produit ne correspond.</p></div></div>
    {% else %}
        {# Sous 768 px, chaque ligne devient une carte : vignette, libellé en
           tête, champs en libellé/valeur, actions en pied (cf. §18 du DS). #}
        <div class="adm-table-wrap adm-table-wrap--cards">
            <table class="adm-table adm-table--cards">
                <thead>
                    <tr><th></th><th>Libellé</th><th>Type</th><th>Modèle</th><th>Prix</th><th>Boutique</th><th>Visible</th><th></th></tr>
                </thead>
                <tbody>
                    {% for produit in produits %}
                        <tr data-produit-row="{{ produit.id }}">
                            <td class="adm-cell-media" style="width:92px;"><img class="adm-table-thumb" src="{{ path('image_miniature', {id: produit.id}) }}" alt="" style="cursor:zoom-in;" data-thumb-zoom="{{ produit.libelle }}" onerror="this.onerror=null;this.src='/assets/img-placeholder.svg';this.style.cursor='default';this.removeAttribute('data-thumb-zoom')"></td>
                            <td class="adm-cell-head" data-label="Libellé">
                                <strong>{{ produit.libelle }}</strong>
                                <div class="adm-mono" style="font-size:0.7rem;color:var(--v2-ink-soft);">#{{ produit.id }}{% if produit.homePriority %} · slot accueil {{ produit.homePriority }}{% endif %}</div>
                            </td>
                            <td data-label="Type">{{ produit.typeProduit.value|replace({'_': ' '})|capitalize }}</td>
                            <td data-label="Modèle">{{ produit.model ? produit.model.libelle : '—' }}</td>
                            <td class="is-num" data-label="Prix">{{ produit.prixVente is not null ? produit.prixVente|number_format(2, ',', ' ') ~ ' €' : '—' }}</td>
                            <td data-label="Boutique">
                                {% set bmap = {'vente': 'green', 'vendu': 'neutral', 'exposition': 'ember'} %}
                                <span class="adm-badge adm-badge--{{ bmap[produit.statusBoutique.value] }}">{{ produit.statusBoutique.value }}</span>
                            </td>
                            <td data-label="Visible">
                                <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-toggle-visible="{{ produit.id }}">
                                    {{ produit.status.value == 'visible' ? 'Visible' : 'Masqué' }}
                                </button>
                            </td>
                            <td class="adm-cell-actions">
                                <a class="adm-btn adm-btn--ghost adm-btn--sm" href="{{ path('gestion_produit_edit', {id: produit.id}) }}">Éditer</a>
                                <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-delete-produit="{{ produit.id }}" data-libelle="{{ produit.libelle }}">Supprimer</button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {# Agrandissement de la vignette #}
        <div id="thumb-lightbox" class="adm-modal-overlay" hidden>
            <div style="position:relative;max-width:min(560px, 92vw);">
                <img src="" alt="" style="width:100%;border-radius:12px;box-shadow:var(--v2-sh-lift);display:block;background:#fff;">
                <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-lightbox-close aria-label="Fermer"
                        style="position:absolute;top:10px;right:10px;padding:6px 10px;border-radius:50%;">✕</button>
            </div>
        </div>

        {% if pages > 1 %}
            <nav class="adm-pagination" aria-label="Pagination">
                {% for p in 1..pages %}
                    {% if p == page %}
                        <span class="current">{{ p }}</span>
                    {% else %}
                        <a href="{{ path('gestion_produits', filters|merge({page: p})) }}">{{ p }}</a>
                    {% endif %}
                {% endfor %}
            </nav>
        {% endif %}
    {% endif %}
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    document.addEventListener('click', function (e) {
        var zoom = e.target.closest('[data-thumb-zoom]');
        if (zoom) {
            var lb = document.getElementById('thumb-lightbox');
            var img = lb.querySelector('img');
            img.src = zoom.src;
            img.alt = zoom.getAttribute('data-thumb-zoom');
            lb.hidden = false;
            return;
        }
        var lbOpen = document.getElementById('thumb-lightbox');
        if (lbOpen && !lbOpen.hidden && (e.target.closest('[data-lightbox-close]') || e.target === lbOpen)) {
            lbOpen.hidden = true;
            return;
        }
        var toggle = e.target.closest('[data-toggle-visible]');
        if (toggle) {
            admFetch('/gestion/api/produits/' + toggle.getAttribute('data-toggle-visible') + '/toggle', { body: {} })
                .then(function (data) {
                    toggle.textContent = data.visible ? 'Visible' : 'Masqué';
                    showNotification({ success: true, title: data.visible ? 'Produit visible sur la boutique' : 'Produit masqué' });
                });
            return;
        }
        var del = e.target.closest('[data-delete-produit]');
        if (del) {
            admConfirm({
                title: 'Supprimer le produit',
                message: '« ' + del.getAttribute('data-libelle') + ' » et ses images seront définitivement supprimés.',
                okLabel: 'Supprimer',
                danger: true
            }).then(function (ok) {
                if (!ok) return;
                admFetch('/gestion/api/produits/' + del.getAttribute('data-delete-produit') + '/delete', { body: {} })
                    .then(function () {
                        var row = del.closest('tr');
                        if (row) row.remove();
                        showNotification({ success: true, title: 'Produit supprimé' });
                    });
            });
        }
    });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            var lb = document.getElementById('thumb-lightbox');
            if (lb) lb.hidden = true;
        }
    });
})();
</script>
{% endblock %}