{% extends 'base.html.twig' %}

{% block title %}Mes cartes cadeaux — Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Vos cartes et bons cadeaux : codes, montants et validité.{% endblock %}
{% block canonical %}mes-cartes-cadeaux{% endblock %}
{% block seoIndex %}<meta name="robots" content="noindex, follow">{% endblock %}
{% block headerCompte %}gColor{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/ds-v2.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/ds-v2-pages.css') }}">
{% endblock %}

{% block body %}
<main class="nhp-main">

    <section class="v2-phero" data-v2-hero>
        <div class="nhp-wrap">
            <span class="nhp-eyebrow">Espace client</span>
            <h1 class="v2-phero-title">Mes cartes <em>cadeaux</em>.</h1>
            <p class="v2-phero-sub">Vos bons achetés — codes, montants et validité.</p>
        </div>
    </section>

    <section class="nhp-section nhp-section--light">
        <div class="nhp-wrap">
            {% include 'compte/_tabs.html.twig' with { current: 'cartes' } only %}

            <div class="acc-panel nhp-reveal d1">
                {% if bons is empty %}
                    <h2 class="nhp-h2" style="font-size:1.4rem;margin-bottom:8px;">Aucune carte cadeau pour l'instant.</h2>
                    <p class="pdet-desc" style="margin-bottom:22px;">
                        Offrez un atelier de création de couteau ou une carte d'un montant libre —
                        le code est envoyé par email dès le paiement confirmé, valable 12 mois.
                    </p>
                    <a href="{{ path('app_carte_cadeau') }}" class="nhp-btn nhp-btn--primary">Offrir une carte cadeau</a>
                {% else %}
                    <div class="accbc-grid">
                        {% for bon in bons %}
                            {% set expire = bon.statut.value == 'actif' and bon.isExpire %}
                            <article class="accbc-card {{ bon.statut.value != 'actif' or expire ? 'accbc-card--off' }}" data-acc-bon>
                                <div class="accbc-top">
                                    <span class="accbc-brand">Vulcan'Affûtage</span>
                                    <span class="nhp-chip {{ {
                                        'actif': 'nhp-chip--dispo',
                                        'utilise': 'nhp-chip--expo',
                                        'annule': 'nhp-chip--vendu',
                                    }[bon.statut.value]|default('nhp-chip--vendu') }}">{{ expire ? 'Expirée' : bon.statut.label }}</span>
                                </div>
                                <p class="accbc-value">
                                    {% if bon.type.value == 'activite' and bon.atelier %}
                                        {{ bon.atelier.titre }}<span class="accbc-value-sub">1 personne</span>
                                    {% else %}
                                        {{ bon.montant|number_format(0, ',', ' ') }}&nbsp;€<span class="accbc-value-sub">sur toute la boutique</span>
                                    {% endif %}
                                </p>
                                <div class="accbc-code" data-bon-code data-code="{{ bon.code }}">
                                    <span class="accbc-code-txt is-blurred" data-bon-code-txt>{{ bon.code }}</span>
                                    <button type="button" class="accbc-code-btn" data-bon-reveal aria-label="Afficher le code">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                    </button>
                                    <button type="button" class="accbc-code-btn" data-bon-copy aria-label="Copier le code">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                                    </button>
                                </div>
                                <p class="accbc-meta">
                                    {% if bon.pourNom %}Pour {{ bon.pourNom }} · {% endif %}
                                    {% if bon.offertPar %}Offert par {{ bon.offertPar }} · {% endif %}
                                    {% if bon.creneau %}
                                        Atelier réservé le {{ bon.creneau.startAt|date('d/m/Y à H\\hi') }}
                                    {% elseif bon.statut.value == 'utilise' %}
                                        Utilisée le {{ bon.usedAt ? bon.usedAt|date('d/m/Y') : '' }}
                                    {% elseif bon.expiresAt %}
                                        Valable jusqu'au {{ bon.expiresAt|date('d/m/Y') }}
                                    {% endif %}
                                    {% if bon.envoiPapier %} · version papier envoyée par courrier{% endif %}
                                </p>
                            </article>
                        {% endfor %}
                    </div>
                    <p class="pdet-desc" style="margin-top:18px;">
                        Le code s'utilise en boutique ou par téléphone, en une fois.
                        Une question ? Appelez-nous : {{ setting('contact.phone') ?: '04 73 37 29 05' }}.
                    </p>
                {% endif %}
            </div>
        </div>
    </section>

</main>
{% endblock %}

{% block other_javascripts %}
    <script src="{{ asset('scripts/ds-v2-app.js') }}" defer></script>
    <script>
    // Codes floutés : œil = afficher/masquer, copie via presse-papiers.
    document.addEventListener("click", function (e) {
        var reveal = e.target.closest("[data-bon-reveal]");
        if (reveal) {
            var txt = reveal.closest("[data-bon-code]").querySelector("[data-bon-code-txt]");
            txt.classList.toggle("is-blurred");
            return;
        }
        var copy = e.target.closest("[data-bon-copy]");
        if (copy) {
            var code = copy.closest("[data-bon-code]").dataset.code;
            (navigator.clipboard ? navigator.clipboard.writeText(code) : Promise.reject())
                .then(function () {
                    if (window.showNotification) showNotification({ success: true, title: "Code copié", message: code });
                })
                .catch(function () {
                    window.prompt("Copiez le code :", code);
                });
        }
    });
    </script>
{% endblock %}