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

{% block title %}Carte cadeau — Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Offrez une carte cadeau Vulcan' Affûtage (50 à 500 €) ou un atelier de création de couteau. Personnalisée, envoyée par email ou en version papier.{% endblock %}
{% block canonical %}carte-cadeau{% 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 %}
{% set contactPhone = setting('contact.phone') ?: '04 73 37 29 05' %}
<main class="nhp-main">

    {# ============================ HERO ============================ #}
    <section class="v2-phero" data-v2-hero>
        <div class="nhp-wrap">
            <span class="nhp-eyebrow">Le cadeau qui coupe court aux hésitations</span>
            <h1 class="v2-phero-title">La carte <em>cadeau</em>.</h1>
            <p class="v2-phero-sub">Un montant libre sur toute la boutique, ou l'atelier de création de couteau. Personnalisée, valable 12 mois.</p>
        </div>
    </section>

    <section class="nhp-section nhp-section--light">
        <div class="nhp-wrap">
            <div class="gcc-grid nhp-reveal"
                 data-gcc
                 data-gcc-atelier-id="{{ atelier ? atelier.id : '' }}"
                 data-gcc-atelier-prix="{{ atelier ? atelier.prix : '' }}">

                {# =============== Aperçu carte (design commun) =============== #}
                <div class="gcc-preview-col">
                    <article class="accbc-card gcc-preview" aria-hidden="true">
                        <div class="accbc-top">
                            <span class="accbc-brand">Vulcan'Affûtage</span>
                            <span class="accbc-validity">Valable 12 mois</span>
                        </div>
                        <p class="accbc-value">
                            <span data-gcc-pv-value>100&nbsp;€</span>
                            <span class="accbc-value-sub" data-gcc-pv-sub>sur toute la boutique et les ateliers</span>
                        </p>
                        <div class="accbc-code">
                            <span class="accbc-code-txt">VA-••••-••••</span>
                        </div>
                        <p class="accbc-meta">
                            <span data-gcc-pv-pour>Pour qui vous voulez</span><span data-gcc-pv-offert></span>
                        </p>
                    </article>
                    <p class="gcc-preview-note">Aperçu — le code sera envoyé par email après la commande.</p>
                </div>

                {# ==================== Widget en 2 étapes ==================== #}
                <div class="gcc-widget">

                    {# ---------- Étape 1 : le choix ---------- #}
                    <div class="gcc-step" data-gcc-step="1">
                        <div class="gcc-toggle" role="tablist" aria-label="Type de carte">
                            <span class="gcc-toggle-thumb" aria-hidden="true"></span>
                            <button type="button" role="tab" class="gcc-toggle-opt is-active" data-gcc-type="montant" aria-selected="true">
                                Carte cadeau
                            </button>
                            {# Sans atelier ouvert à la réservation, l'onglet est hachuré et
                               non sélectionnable — mais reste cliquable pour expliquer
                               pourquoi et renvoyer vers le téléphone de l'atelier. #}
                            <button type="button" role="tab" class="gcc-toggle-opt{{ atelier is null ? ' is-locked' : '' }}"
                                    data-gcc-type="activite" aria-selected="false"
                                    {% if atelier is null %}aria-disabled="true" data-gcc-locked="Aucun créneau n'est actuellement disponible à la réservation en ligne, contactez l'atelier au {{ contactPhone }}."{% endif %}>
                                Carte atelier
                            </button>
                        </div>

                        <div class="gcc-zone" data-gcc-zone="montant">
                            <p class="gcc-label">Choisissez le montant</p>
                            <div class="gcc-paliers" role="radiogroup" aria-label="Montant de la carte cadeau">
                                {% for palier in paliers %}
                                    <label class="gcc-palier">
                                        <input type="radio" name="gcc_montant" value="{{ palier }}" {{ palier == 100 ? 'checked' }}>
                                        <span>{{ palier }}&nbsp;€</span>
                                    </label>
                                {% endfor %}
                            </div>
                            <p class="gcc-hint">Utilisable en une fois, sur toute la boutique et les ateliers.</p>
                        </div>

                        <div class="gcc-zone" data-gcc-zone="activite" hidden>
                            {% if atelier %}
                                <p class="gcc-label">L'atelier offert</p>
                                <div class="gcc-atelier">
                                    <div class="gcc-atelier-head">
                                        <h3>{{ atelier.titre }}</h3>
                                        <span class="gcc-atelier-prix">{{ atelier.prix|number_format(0, ',', ' ') }}&nbsp;€ <small>/ pers.</small></span>
                                    </div>
                                    <p class="gcc-atelier-meta">
                                        {{ (atelier.dureeMinutes // 60) }}h{{ atelier.dureeMinutes % 60 > 0 ? '%02d'|format(atelier.dureeMinutes % 60) }} à l'établi ·
                                        1 personne · guidé par l'artisan
                                    </p>
                                    <p class="gcc-hint">Le bénéficiaire choisit sa date plus tard, parmi les créneaux en ligne — le bon est valable 12 mois.</p>
                                </div>
                            {% endif %}
                        </div>

                        <div class="gcc-actions">
                            <button type="button" class="nhp-btn nhp-btn--primary" data-gcc-next>
                                Suivant
                                <svg class="nhp-btn-arrow" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </button>
                        </div>
                    </div>

                    {# ---------- Étape 2 : la personnalisation ---------- #}
                    <div class="gcc-step" data-gcc-step="2" hidden>
                        <p class="gcc-label">Pour…</p>
                        <div class="gcc-toggle" role="tablist" aria-label="Destinataire de la carte">
                            <span class="gcc-toggle-thumb" data-gcc-dest-thumb aria-hidden="true"></span>
                            <button type="button" role="tab" class="gcc-toggle-opt is-active" data-gcc-dest="offrir" aria-selected="true">
                                Pour offrir
                            </button>
                            <button type="button" role="tab" class="gcc-toggle-opt" data-gcc-dest="moi" aria-selected="false">
                                Pour moi
                            </button>
                        </div>

                        <div data-gcc-dest-zone="offrir">
                            <div class="gcc-fields">
                                <label class="gcc-field">
                                    <span>Prénom</span>
                                    <input type="text" data-gcc-pour-prenom maxlength="40" placeholder="Camille" required>
                                </label>
                                <label class="gcc-field">
                                    <span>Nom (facultatif)</span>
                                    <input type="text" data-gcc-pour-nom maxlength="40" placeholder="Durand">
                                </label>
                            </div>
                            <label class="gcc-check" style="margin-top:14px;">
                                <input type="checkbox" data-gcc-envoyer checked>
                                <span>Envoyer cette carte par email&nbsp;?</span>
                            </label>
                            <div class="gcc-fields" data-gcc-email-wrap>
                                <label class="gcc-field gcc-field--wide">
                                    <span>Email du bénéficiaire</span>
                                    <input type="email" data-gcc-pour-email maxlength="180" placeholder="camille@exemple.fr" autocomplete="off">
                                </label>
                            </div>
                            <p class="gcc-hint" data-gcc-email-hint hidden>Le bénéficiaire ne sera pas notifié : le code vous sera transmis via votre espace client et par mail.</p>

                            <p class="gcc-label" style="margin-top:22px;">De la part de</p>
                            <div class="gcc-fields">
                                <label class="gcc-field gcc-field--wide">
                                    <span>Votre prénom (facultatif)</span>
                                    <input type="text" data-gcc-de-nom maxlength="80" placeholder="Alex" autocomplete="given-name">
                                </label>
                            </div>
                            <p class="gcc-offertpar is-empty" data-gcc-offert-wrap>Offert par <em data-gcc-offert-live>…</em></p>
                        </div>

                        <div data-gcc-dest-zone="moi" hidden>
                            <div class="gcc-atelier">
                                <p class="gcc-atelier-meta" style="margin:0;">La carte vous est envoyée <strong>par email juste après la commande</strong>, utilisable en boutique et sur les ateliers.</p>
                            </div>
                        </div>

                        <div class="gcc-actions gcc-actions--split">
                            <button type="button" class="nhp-btn nhp-btn--ghost" data-gcc-prev>
                                <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" style="transform:rotate(180deg);"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                Précédent
                            </button>
                            <button type="button" class="nhp-btn nhp-btn--primary" data-gcc-add>
                                <span data-gcc-add-label>Ajouter au panier</span>
                                <svg class="nhp-btn-arrow" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </button>
                        </div>
                    </div>

                    {# ---------- Étape 3 (bon atelier) : la date ---------- #}
                    <div class="gcc-step" data-gcc-step="3" hidden>
                        <div class="gcc-toggle" role="tablist" aria-label="Choix de la date">
                            <span class="gcc-toggle-thumb" data-gcc-date-thumb aria-hidden="true"></span>
                            <button type="button" role="tab" class="gcc-toggle-opt is-active" data-gcc-date-mode="date" aria-selected="true">
                                Choisir une date
                            </button>
                            <button type="button" role="tab" class="gcc-toggle-opt" data-gcc-date-mode="plus-tard" aria-selected="false">
                                Plus tard
                            </button>
                        </div>

                        <div class="gcc-zone" data-gcc-date-zone="date">
                            {% if creneaux is not empty %}
                                <p class="gcc-label">Les prochaines dates</p>
                                <div class="gcc-slots" data-gcc-slots>
                                    {% for c in creneaux %}
                                        <button type="button" class="gcc-slot" data-gcc-slot
                                                data-creneau-id="{{ c.id }}" data-date="{{ c.date }}"
                                                data-date-longue="{{ c.dateLongue }}" {{ loop.index > 7 ? 'hidden' }}>
                                            <span class="gcc-slot-day">{{ c.jour }}</span>
                                            <span class="gcc-slot-month">{{ c.mois }}</span>
                                            <span class="gcc-slot-hour">{{ c.heure }}</span>
                                            <span class="gcc-slot-places">{{ c.places }} pl.</span>
                                        </button>
                                    {% endfor %}
                                </div>
                                <p class="gcc-hint" data-gcc-slots-empty hidden>Rien de disponible sur cette période — essayez d'autres dates.</p>

                                <div class="gcc-datepick" data-gcc-datepick>
                                    <p class="gcc-label" style="margin-top:18px;">Ou cherchez une date</p>
                                    <div class="gcc-datepick-fields">
                                        <label class="gcc-field">
                                            <span>Une date précise</span>
                                            <input type="date" data-gcc-date-exacte>
                                        </label>
                                        <label class="gcc-field">
                                            <span>Du</span>
                                            <input type="date" data-gcc-date-du>
                                        </label>
                                        <label class="gcc-field">
                                            <span>Au</span>
                                            <input type="date" data-gcc-date-au>
                                        </label>
                                        <button type="button" class="nhp-btn nhp-btn--ghost gcc-datepick-reset" data-gcc-date-reset>Réinitialiser</button>
                                    </div>
                                </div>
                            {% else %}
                                <p class="gcc-hint">Aucune date ouverte à la réservation pour le moment — choisissez « Plus tard » : le bénéficiaire réservera dès l'ouverture des prochains créneaux.</p>
                            {% endif %}
                        </div>

                        <div class="gcc-zone" data-gcc-date-zone="plus-tard" hidden>
                            <div class="gcc-atelier">
                                <p class="gcc-atelier-meta" style="margin:0;">Le bénéficiaire choisit sa date <strong>quand il le souhaite</strong>, parmi les créneaux en ligne — le bon est valable 12 mois. C'est l'option la plus souple.</p>
                            </div>
                        </div>

                        <div class="gcc-actions gcc-actions--split">
                            <button type="button" class="nhp-btn nhp-btn--ghost" data-gcc-prev3>
                                <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" style="transform:rotate(180deg);"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                Précédent
                            </button>
                            <button type="button" class="nhp-btn nhp-btn--primary" data-gcc-add-final>
                                Ajouter au panier
                                <svg class="nhp-btn-arrow" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </button>
                        </div>
                    </div>

                    {# ---------- Form réel (posté par le JS) ---------- #}
                    <form method="post" action="{{ path('app_panier_add_bon') }}" data-gcc-form hidden>
                        <input type="hidden" name="_token" value="{{ csrf_token('bon') }}">
                        <input type="hidden" name="type" value="montant">
                        <input type="hidden" name="montant" value="100">
                        <input type="hidden" name="atelier" value="{{ atelier ? atelier.id : '' }}">
                        <input type="hidden" name="creneau" value="">
                        <input type="hidden" name="papier" value="0">
                        <input type="hidden" name="pour_nom" value="">
                        <input type="hidden" name="pour_email" value="">
                        <input type="hidden" name="offert_par" value="">
                    </form>
                </div>
            </div>
        </div>
    </section>

    {# ==================== Réassurance ==================== #}
    <section class="nhp-section nhp-section--paper">
        <div class="nhp-wrap">
            <div class="atl-infos nhp-reveal">
                <div class="atl-info">
                    <h3>Immédiat</h3>
                    <p>Le code vous est envoyé <strong>par email</strong> et/ou au bénéficiaire.</p>
                </div>
                <div class="atl-info">
                    <h3>Format Relax</h3>
                    <p><strong>12 mois</strong> pour en profiter sur la boutique en ligne et les ateliers, et <strong>2 ans</strong> en boutique à Clermont-Ferrand.</p>
                </div>
                <div class="atl-info">
                    <h3>Version papier</h3>
                    <p>Une carte <strong>imprimée et personnalisée</strong>, envoyée par courrier (+5&nbsp;€).</p>
                </div>
            </div>
        </div>
    </section>

    {# ==================== Modal papier ==================== #}
    <div class="gcc-modal-backdrop" data-gcc-modal hidden>
        <div class="gcc-modal" role="dialog" aria-modal="true" aria-labelledby="gcc-modal-title">
            <button type="button" class="gcc-modal-x" data-gcc-modal-close aria-label="Fermer sans ajouter">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
            <span class="gcc-modal-ico" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M22 8 12 13 2 8"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>
            </span>
            <h2 id="gcc-modal-title">Une attention en plus&nbsp;?</h2>
            <p>Voulez-vous recevoir cette carte <strong>unique &amp; personnalisée</strong> par courrier&nbsp;? <b>(+5&nbsp;€)</b></p>
            <div class="gcc-modal-actions">
                <button type="button" class="nhp-btn nhp-btn--primary" data-gcc-modal-oui>
                    Oui, version papier
                    <svg class="nhp-btn-arrow" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
                <button type="button" class="nhp-btn nhp-btn--ghost" data-gcc-modal-non>Non merci</button>
            </div>
        </div>
    </div>

</main>
{% endblock %}

{% block other_javascripts %}
    <script src="{{ asset('scripts/ds-v2-app.js') }}" defer></script>
    <script src="{{ asset('scripts/carte-cadeau.js') }}" defer></script>
{% endblock %}