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

{% block title %}Bandeaux{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Communication</span>
            <h1 class="adm-page-title">Bandeaux d'annonce</h1>
            <p class="adm-page-sub">Messages affichés en haut de la boutique — promotions, fermetures, informations.</p>
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn" href="{{ path('gestion_bandeau_new') }}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
                Nouvelle campagne
            </a>
        </div>
    </div>

    {% if actif %}
        <div class="adm-callout adm-callout--success" style="margin-bottom:16px;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>
            <span>En ligne actuellement : <strong>{{ actif.message }}</strong></span>
        </div>
    {% else %}
        <div class="adm-callout adm-callout--info" style="margin-bottom:16px;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M11 12h1v4h1"/></svg>
            <span>Aucun bandeau affiché sur la boutique en ce moment.</span>
        </div>
    {% endif %}

    {% if bandeaux is empty %}
        <div class="adm-card"><div class="adm-empty"><p>Aucune campagne — créez la première.</p></div></div>
    {% else %}
        {# Sous 768 px, chaque ligne devient une carte : message en tête, dates
           et état 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>Message</th><th>Type</th><th>Mode</th><th>Du</th><th>Au</th><th>Priorité</th><th>État</th><th></th></tr>
                </thead>
                <tbody>
                    {% for banner in bandeaux %}
                        {% set etat = banner.etat %}
                        <tr>
                            <td class="adm-cell-head" style="max-width:340px;" data-label="Message"><strong>{{ banner.message|length > 90 ? banner.message|slice(0, 90) ~ '…' : banner.message }}</strong></td>
                            <td data-label="Type">{{ banner.type.value == 'promo' ? 'Promo' : 'Info' }}</td>
                            <td data-label="Mode">{{ banner.mode.value == 'defilant' ? 'Défilant' : 'Statique' }}</td>
                            <td class="adm-mono" style="font-size:0.78rem;" data-label="Du">{{ banner.startAt|date('d/m/Y H:i') }}</td>
                            <td class="adm-mono" style="font-size:0.78rem;" data-label="Au">{{ banner.endAt ? banner.endAt|date('d/m/Y H:i') : 'Jusqu\'à désactivation' }}</td>
                            <td data-label="Priorité">{{ banner.priorite < 0 ? 'Faible' : (banner.priorite > 0 ? 'Important' : 'Standard') }}</td>
                            <td data-label="État">
                                {% set emap = {'actif': 'green', 'programme': 'ember', 'expire': 'neutral', 'desactive': 'dark'} %}
                                {% set elabel = {'actif': 'En ligne', 'programme': 'Programmé', 'expire': 'Expiré', 'desactive': 'Désactivé'} %}
                                <span class="adm-badge adm-badge--{{ emap[etat] }}">{{ elabel[etat] }}</span>
                            </td>
                            <td class="adm-cell-actions">
                                <a class="adm-btn adm-btn--ghost adm-btn--sm" href="{{ path('gestion_bandeau_edit', {id: banner.id}) }}">Éditer</a>
                                <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-toggle-banner="{{ banner.id }}">
                                    {{ banner.actif ? 'Désactiver' : 'Activer' }}
                                </button>
                                <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-delete-banner="{{ banner.id }}">Supprimer</button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    document.addEventListener('click', function (e) {
        var toggle = e.target.closest('[data-toggle-banner]');
        if (toggle) {
            admFetch('/gestion/api/bandeaux/' + toggle.getAttribute('data-toggle-banner') + '/toggle', { body: {} })
                .then(function (data) {
                    showNotification({ success: true, title: data.actif ? 'Campagne activée' : 'Campagne désactivée' });
                    window.location.reload();
                });
            return;
        }
        var del = e.target.closest('[data-delete-banner]');
        if (del) {
            admConfirm({
                title: 'Supprimer la campagne',
                message: 'Le bandeau sera définitivement supprimé.',
                okLabel: 'Supprimer',
                danger: true
            }).then(function (ok) {
                if (!ok) return;
                admFetch('/gestion/api/bandeaux/' + del.getAttribute('data-delete-banner') + '/delete', { body: {} })
                    .then(function () {
                        showNotification({ success: true, title: 'Campagne supprimée' });
                        window.location.reload();
                    });
            });
        }
    });
})();
</script>
{% endblock %}