{% extends 'gestion/_base.html.twig' %}
{% set active = 'bons-cadeaux' %}

{% block title %}Bons cadeaux{% endblock %}

{% block stylesheets %}
    {# gcc-toggle de la modale crédit (classes gcc- scopées, sans effet sur le chrome admin). #}
    <link rel="stylesheet" href="{{ asset('styles/ds-v2-pages.css') }}">
{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Boutique</span>
            <h1 class="adm-page-title">Bons cadeaux</h1>
            <p class="adm-page-sub">Un client présente son code ? Recherchez-le, vérifiez la validité, débitez le crédit.</p>
        </div>
        <div class="adm-page-head-actions">
            <form method="get" action="{{ path('gestion_bons_cadeaux') }}" class="adm-search-form">
                <input type="hidden" name="tab" value="{{ tab }}">
                <div class="adm-field">
                    <input type="search" name="q" value="{{ q }}" placeholder=" " id="search-q">
                    <label for="search-q">Code, bénéficiaire, client…</label>
                </div>
                <button type="submit" class="adm-btn adm-btn--ghost">Rechercher</button>
            </form>
            <a class="adm-btn" href="{{ path('gestion_bon_cadeau_new') }}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
                Nouveau bon
            </a>
        </div>
    </div>

    <div class="adm-tabs" style="margin-bottom:18px;">
        {% for key, label in {'actifs': 'Actifs', 'utilises': 'Utilisés', 'attente': 'En attente', 'annules': 'Annulés', 'tous': 'Tous'} %}
            <a class="adm-tab {{ tab == key ? 'is-active' }}" href="{{ path('gestion_bons_cadeaux', {tab: key, q: q ?: null}) }}">
                {{ label }}
                <span class="adm-tab-count">{{ tabCounts[key] }}</span>
            </a>
        {% endfor %}
    </div>

    {% if bons is empty %}
        <div class="adm-card">
            <div class="adm-empty">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4"/><path d="M5 12v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8M12 8v13M12 8s-2.5-5-5.5-5A2.5 2.5 0 0 0 6 8m6 0s2.5-5 5.5-5A2.5 2.5 0 0 1 18 8"/></svg>
                <p>Aucun bon {{ q ? 'pour cette recherche' : 'dans cet onglet' }}.</p>
            </div>
        </div>
    {% else %}
        {# Sous 768 px, chaque ligne devient une carte : code en tête, champs en
           libellé/valeur, bouton Options 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>Code</th><th>Nature</th><th>Montant</th><th>Acheteur</th><th>Bénéficiaire</th><th>Validité</th><th>Statut</th><th></th></tr>
                </thead>
                <tbody>
                    {% for bon in bons %}
                        {% set expire = bon.statut.value == 'actif' and bon.isExpire %}
                        <tr data-bon-row="{{ bon.id }}">
                            <td class="adm-cell-head" data-label="Code">
                                {# Code masqué : clic = révéler, re-clic = copier, re-clic = masquer. #}
                                <button type="button" class="adm-code is-blurred" data-code-blur data-code="{{ bon.code }}"
                                        title="Cliquer : révéler, copier, masquer">
                                    <span class="adm-code-txt">{{ bon.code }}</span>
                                </button>
                            </td>
                            <td data-label="Nature">
                                <div class="adm-cell-val">
                                    {{ bon.type.value == 'activite' ? 'Atelier' ~ (bon.atelier ? ' — ' ~ bon.atelier.titre) : 'Montant' }}{{ bon.envoiPapier ? ' · papier' }}
                                    {% if bon.tag %}<div class="adm-bon-tag">{{ bon.tag }}</div>{% endif %}
                                </div>
                            </td>
                            <td class="is-num" data-label="Montant">
                                <div class="adm-cell-val">
                                    {% if bon.solde != bon.montant %}
                                        <strong>{{ bon.solde|number_format(2, ',', ' ') }} €</strong>
                                        <div class="adm-sol-initial">{{ bon.montant|number_format(2, ',', ' ') }} €</div>
                                    {% else %}
                                        {{ bon.montant|number_format(2, ',', ' ') }} €
                                    {% endif %}
                                </div>
                            </td>
                            <td data-label="Acheteur">
                                <div class="adm-cell-val">
                                    {% if bon.client %}
                                        {{ bon.client.prenom }} {{ bon.client.nom }}
                                        <div class="adm-mono" style="font-size:0.72rem;opacity:.7;">{{ bon.client.email }}</div>
                                    {% elseif bon.modeReglement %}
                                        Vente boutique
                                        <div class="adm-mono" style="font-size:0.72rem;opacity:.7;">{{ bon.modeReglement.label }}</div>
                                    {% else %}—{% endif %}
                                </div>
                            </td>
                            <td data-label="Bénéficiaire">
                                <div class="adm-cell-val">
                                    {{ bon.pourNom ?: '—' }}
                                    {% if bon.pourEmail %}<div class="adm-mono" style="font-size:0.72rem;opacity:.7;">{{ bon.pourEmail }}</div>{% endif %}
                                    {% if bon.offertPar %}<div style="font-size:0.72rem;opacity:.7;">Offert par {{ bon.offertPar }}</div>{% endif %}
                                    {% if bon.envoiPapier and bon.adresseLivraison %}
                                        <div style="font-size:0.72rem;opacity:.7;">✉ {{ bon.adresseLivraison.libAdr }}, {{ bon.adresseLivraison.cp }} {{ bon.adresseLivraison.ville }}</div>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="adm-mono" style="font-size:0.78rem;" data-label="Validité">
                                {{ bon.expiresAt ? bon.expiresAt|date('d/m/Y') : '—' }}
                            </td>
                            <td data-label="Statut">
                                {% set smap = {'actif': 'green', 'attente': 'ember', 'utilise': 'neutral', 'annule': 'dark'} %}
                                <span class="adm-badge adm-badge--{{ expire ? 'dark' : smap[bon.statut.value]|default('neutral') }}" data-bon-badge>
                                    {{ expire ? 'Expiré' : bon.statut.label }}
                                </span>
                            </td>
                            <td class="adm-cell-actions">
                                <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm"
                                        data-bon-menu
                                        data-bon-id="{{ bon.id }}"
                                        data-bon-code="{{ bon.code }}"
                                        data-bon-statut="{{ bon.statut.value }}"
                                        data-bon-type="{{ bon.type.value }}"
                                        data-bon-expire="{{ expire ? '1' : '0' }}"
                                        data-bon-solde-cents="{{ (bon.solde * 100)|round }}"
                                        data-bon-titulaire="{{ bon.client ? (bon.client.nom ~ ' ' ~ bon.client.prenom) : (bon.pourNom ?: '') }}"
                                        data-bon-url="{{ path('gestion_bon_cadeau_detail', {id: bon.id}) }}">
                                    Options
                                    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                </button>
                                {% if bon.noteInterne %}
                                    <div class="adm-mono" style="font-size:0.72rem;opacity:.7;max-width:180px;white-space:normal;">{{ bon.noteInterne }}</div>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}

    {% include 'gestion/bons-cadeaux/_modals.html.twig' %}
{% endblock %}

{% block scripts %}
    <script src="{{ asset('scripts/ds-admin-bons.js') }}" defer></script>
{% endblock %}