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

{% block title %}Nouveau bon cadeau{% endblock %}

{% block stylesheets %}
    {# Widget et aperçu de la page publique /carte-cadeau (classes gcc-/accbc-,
       aucun sélecteur global : 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">Nouveau bon cadeau</h1>
            <p class="adm-page-sub">Vente au comptoir — le règlement est déjà encaissé, le bon est actif dès sa création.</p>
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_bons_cadeaux') }}">← Bons cadeaux</a>
        </div>
    </div>

    <div class="gcc-grid"
         data-abc
         data-abc-atelier-id="{{ atelier ? atelier.id : '' }}">

        {# =============== Aperçu carte (design commun au site) =============== #}
        <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-abc-pv-value>100&nbsp;€</span>
                    <span class="accbc-value-sub" data-abc-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-abc-pv-pour>Pour qui vous voulez</span><span data-abc-pv-offert></span>
                </p>
            </article>
            <p class="gcc-preview-note">Aperçu — le code est généré à la création du bon.</p>
        </div>

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

            {# ---------- Étape 1 : le choix ---------- #}
            <div class="gcc-step" data-abc-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-abc-type="montant" aria-selected="true">
                        Carte cadeau
                    </button>
                    <button type="button" role="tab" class="gcc-toggle-opt" data-abc-type="activite" aria-selected="false" {{ atelier is null ? 'disabled' }}>
                        Carte atelier
                    </button>
                </div>

                <div class="gcc-zone" data-abc-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="abc_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-abc-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="adm-btn" data-abc-next>Suivant →</button>
                </div>
            </div>

            {# ---------- Étape 2 : la personnalisation ---------- #}
            <div class="gcc-step" data-abc-step="2" hidden>
                <p class="gcc-label">Pour…</p>
                <div class="gcc-fields">
                    <label class="gcc-field">
                        <span>Prénom (facultatif)</span>
                        <input type="text" data-abc-pour-prenom maxlength="40" placeholder="Camille">
                    </label>
                    <label class="gcc-field">
                        <span>Nom (facultatif)</span>
                        <input type="text" data-abc-pour-nom maxlength="40" placeholder="Durand">
                    </label>
                </div>
                <label class="gcc-check" style="margin-top:14px;">
                    <input type="checkbox" data-abc-envoyer>
                    <span>Envoyer cette carte par email&nbsp;?</span>
                </label>
                <div class="gcc-fields" data-abc-email-wrap hidden>
                    <label class="gcc-field gcc-field--wide">
                        <span>Email du bénéficiaire</span>
                        <input type="email" data-abc-pour-email maxlength="180" placeholder="camille@exemple.fr" autocomplete="off">
                    </label>
                </div>
                <p class="gcc-hint" data-abc-email-hint>Aucun envoi : communiquez le code au client — il s'affiche dans la liste après création.</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>Prénom de l'offrant (facultatif)</span>
                        <input type="text" data-abc-de-nom maxlength="80" placeholder="Alex">
                    </label>
                </div>
                <p class="gcc-offertpar is-empty">Offert par <em data-abc-offert-live>…</em></p>

                <label class="gcc-check">
                    <input type="checkbox" data-abc-papier>
                    <span>Carte physique personnalisée <em>(+5&nbsp;€)</em></span>
                </label>

                <p class="gcc-label" style="margin-top:22px;">Mode de règlement</p>
                <div class="adm-seg" role="radiogroup" aria-label="Mode de règlement">
                    {% for reglement in reglements %}
                        <label class="adm-seg-opt">
                            <input type="radio" name="abc_reglement" value="{{ reglement.value }}" {{ loop.first ? 'checked' }}>
                            <span>{{ reglement.label }}</span>
                        </label>
                    {% endfor %}
                </div>

                <div class="gcc-actions gcc-actions--split">
                    <button type="button" class="adm-btn adm-btn--ghost" data-abc-prev>← Précédent</button>
                    <button type="button" class="adm-btn" data-abc-add>
                        <span data-abc-add-label>Créer le bon</span>
                    </button>
                </div>
            </div>

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

                <div class="gcc-zone" data-abc-date-zone="date">
                    {% if creneaux is not empty %}
                        <p class="gcc-label">Les prochaines dates</p>
                        <div class="gcc-slots">
                            {% for c in creneaux %}
                                <button type="button" class="gcc-slot" data-abc-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-abc-slots-empty hidden>Rien de disponible sur cette période — essayez d'autres dates.</p>

                        <div class="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-abc-date-exacte>
                                </label>
                                <label class="gcc-field">
                                    <span>Du</span>
                                    <input type="date" data-abc-date-du>
                                </label>
                                <label class="gcc-field">
                                    <span>Au</span>
                                    <input type="date" data-abc-date-au>
                                </label>
                                <button type="button" class="adm-btn adm-btn--ghost gcc-datepick-reset" data-abc-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-abc-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.</p>
                    </div>
                </div>

                <div class="gcc-actions gcc-actions--split">
                    <button type="button" class="adm-btn adm-btn--ghost" data-abc-prev3>← Précédent</button>
                    <button type="button" class="adm-btn" data-abc-add-final>Créer le bon</button>
                </div>
            </div>

            {# ---------- Form réel (posté par le JS) ---------- #}
            <form method="post" action="{{ path('gestion_bon_cadeau_create') }}" data-abc-form hidden>
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_bon_cadeau') }}">
                <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="">
                <input type="hidden" name="reglement" value="carte">
            </form>
        </div>
    </div>
{% endblock %}

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