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

{% block title %}Bon {{ bon.code }}{% 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 %}
    {% set expire = bon.statut.value == 'actif' and bon.isExpire %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Boutique</span>
            <h1 class="adm-page-title">Bon cadeau</h1>
            <p class="adm-page-sub" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                <button type="button" class="adm-code is-blurred" data-code-blur data-code="{{ bon.code }}"
                        title="Cliquer : révéler, copier, masquer" style="font-size:0.95rem;">
                    <span class="adm-code-txt">{{ bon.code }}</span>
                </button>
                {% 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>
                <span class="adm-badge adm-badge--neutral">{{ bon.type.label }}</span>
                {% if bon.envoiPapier %}<span class="adm-badge adm-badge--ember">Carte papier</span>{% endif %}
            </p>
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_bons_cadeaux') }}">← Bons cadeaux</a>
            <button type="button" class="adm-btn"
                    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>
        </div>
    </div>

    <div class="adm-grid adm-grid--2">

        {# ===== Crédit & validité ===== #}
        <div class="adm-card">
            <h2 class="adm-card-title">Crédit &amp; validité</h2>
            <p style="margin:0 0 4px;font-family:var(--v2-font-display);font-size:2rem;color:var(--v2-green-deep);">
                {{ bon.solde|number_format(2, ',', ' ') }}&nbsp;€
            </p>
            {% if bon.solde != bon.montant %}
                <p class="adm-sol-initial" style="margin:0 0 12px;font-size:0.85rem;">Montant initial : {{ bon.montant|number_format(2, ',', ' ') }} €</p>
            {% else %}
                <p style="margin:0 0 12px;font-size:0.78rem;color:var(--v2-ink-soft);">Crédit intact.</p>
            {% endif %}
            <div style="display:grid;gap:6px;">
                <div class="adm-kv-row"><span>Créé le</span><strong class="adm-mono">{{ bon.createdAt|date('d/m/Y H\\hi') }}</strong></div>
                <div class="adm-kv-row"><span>Activé le</span><strong class="adm-mono">{{ bon.activatedAt ? bon.activatedAt|date('d/m/Y') : '—' }}</strong></div>
                <div class="adm-kv-row"><span>Valable jusqu'au</span><strong class="adm-mono">{{ bon.expiresAt ? bon.expiresAt|date('d/m/Y') : '—' }}</strong></div>
                <div class="adm-kv-row"><span>Utilisé le</span><strong class="adm-mono">{{ bon.usedAt ? bon.usedAt|date('d/m/Y H\\hi') : '—' }}</strong></div>
                {% if bon.type.value == 'activite' %}
                    <div class="adm-kv-row">
                        <span>Atelier</span>
                        <strong>{{ bon.atelier ? bon.atelier.titre : '—' }}</strong>
                    </div>
                    <div class="adm-kv-row">
                        <span>Place réservée</span>
                        <strong class="adm-mono">{{ bon.creneau ? bon.creneau.startAt|date('d/m/Y à H\\hi') : 'date au choix du bénéficiaire' }}</strong>
                    </div>
                {% endif %}
            </div>
        </div>

        {# ===== Achat & règlement ===== #}
        <div class="adm-card">
            <h2 class="adm-card-title">Achat &amp; règlement</h2>
            <div style="display:grid;gap:6px;">
                <div class="adm-kv-row">
                    <span>Acheteur</span>
                    <strong>{{ bon.client ? (bon.client.prenom ~ ' ' ~ bon.client.nom) : 'Vente boutique' }}</strong>
                </div>
                {% if bon.client %}
                    <div class="adm-kv-row"><span>Email</span><strong class="adm-mono" style="font-size:0.78rem;">{{ bon.client.email }}</strong></div>
                {% endif %}
                <div class="adm-kv-row">
                    <span>Réglé par</span>
                    <strong>{{ bon.modeReglement ? bon.modeReglement.label : (bon.commande ? 'En ligne (PayPal)' : '—') }}</strong>
                </div>
                <div class="adm-kv-row">
                    <span>Montant payé</span>
                    <strong class="adm-mono">{{ bon.montantTotal|number_format(2, ',', ' ') }} €{{ bon.envoiPapier ? ' (dont 5,00 € papier)' }}</strong>
                </div>
                {% if bon.commande %}
                    <div class="adm-kv-row">
                        <span>Commande</span>
                        <a class="adm-row-link adm-mono" style="font-size:0.78rem;" href="{{ path('gestion_commande_detail', {reference: bon.commande.reference}) }}">{{ bon.commande.reference }}</a>
                    </div>
                {% endif %}
            </div>
        </div>

        {# ===== Bénéficiaire ===== #}
        <div class="adm-card">
            <h2 class="adm-card-title">Bénéficiaire</h2>
            <div style="display:grid;gap:6px;">
                <div class="adm-kv-row"><span>Pour</span><strong>{{ bon.pourNom ?: '—' }}</strong></div>
                <div class="adm-kv-row"><span>Email</span><strong class="adm-mono" style="font-size:0.78rem;">{{ bon.pourEmail ?: '—' }}</strong></div>
                <div class="adm-kv-row"><span>Offert par</span><strong>{{ bon.offertPar ?: '—' }}</strong></div>
                {% if bon.message %}
                    <div style="margin-top:4px;color:var(--v2-ink-soft);font-style:italic;">« {{ bon.message }} »</div>
                {% endif %}
            </div>
            {% if bon.envoiPapier %}
                <h2 class="adm-card-title" style="margin-top:18px;">Envoi de la carte papier</h2>
                {% if bon.adresseLivraison %}
                    <p style="margin:0;font-size:0.85rem;">
                        {{ bon.adresseLivraison.prenom }} {{ bon.adresseLivraison.nom }}<br>
                        {{ bon.adresseLivraison.libAdr }}<br>
                        {{ bon.adresseLivraison.cp }} {{ bon.adresseLivraison.ville }}
                        {% if bon.adresseLivraison.infoSupp %}<br><span style="color:var(--v2-ink-soft);">{{ bon.adresseLivraison.infoSupp }}</span>{% endif %}
                    </p>
                {% else %}
                    <p style="margin:0;font-size:0.85rem;color:var(--v2-ink-soft);">Carte remise en boutique (pas d'adresse d'envoi).</p>
                {% endif %}
            {% endif %}
        </div>

        {# ===== Étiquette + note interne ===== #}
        <div class="adm-card">
            <h2 class="adm-card-title">Étiquette</h2>
            <p style="margin:0 0 10px;font-size:0.8rem;color:var(--v2-ink-soft);">Repère discret dans la liste — ex. «&nbsp;À envoyer&nbsp;» tant que la carte papier n'est pas partie.</p>
            <form method="post" action="{{ path('gestion_bon_cadeau_tag', {id: bon.id}) }}" style="display:flex;gap:8px;align-items:center;">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_bon_cadeau') }}">
                <div class="adm-field" style="flex:1;">
                    <input type="text" id="bon-tag" name="tag" value="{{ bon.tag }}" placeholder=" " maxlength="30" list="bon-tag-suggestions">
                    <label for="bon-tag">Étiquette (vide = aucune)</label>
                    <datalist id="bon-tag-suggestions">
                        <option value="À envoyer"></option>
                        <option value="Envoyé"></option>
                        <option value="À rappeler"></option>
                    </datalist>
                </div>
                <button type="submit" class="adm-btn adm-btn--sm">Enregistrer</button>
            </form>

            <h2 class="adm-card-title" style="margin-top:18px;">Note interne</h2>
            <p style="margin:0;font-size:0.85rem;{{ bon.noteInterne ? '' : 'color:var(--v2-ink-soft);' }}">
                {{ bon.noteInterne ?: 'Aucune note.' }}
            </p>
        </div>
    </div>

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

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