{# templates/account/card_modify_recap.html.twig #}
{% extends 'account/base_account.html.twig' %}

{% block title %}Confirmation de modification — NUM-ECARD{% endblock %}

{% block body %}
<div style="background:#f5f5f7;min-height:100vh;padding:40px 20px 100px;"><div style="max-width:960px;margin:0 auto;">
<style>
.recap-nav { display:flex; gap:.5rem; align-items:center; font-size:.85rem; color:#94a3b8; margin-bottom:1.5rem; }
.recap-nav a { color:#2563eb; text-decoration:none; }
.recap-nav a:hover { text-decoration:underline; }

/* Stepper */
.recap-stepper { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:2.5rem; }
.recap-step { display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.recap-step__dot {
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.85rem; font-weight:700;
    border:2px solid #e2e8f0; background:#fff; color:#94a3b8;
}
.recap-step__dot--done   { background:#dcfce7; border-color:#86efac; color:#15803d; }
.recap-step__dot--active { background:#2563eb; border-color:#2563eb; color:#fff; }
.recap-step__label { font-size:.7rem; color:#94a3b8; text-align:center; max-width:70px; line-height:1.3; }
.recap-step__label--active { color:#2563eb; font-weight:600; }
.recap-step-line { flex:1; height:2px; background:#e2e8f0; margin:0 .4rem 1.4rem; min-width:36px; }
.recap-step-line--done { background:#86efac; }

/* Layout */
.recap-layout { display:grid; grid-template-columns:1fr 380px; gap:2rem; align-items:start; max-width:960px; }
@media (max-width:860px) { .recap-layout { grid-template-columns:1fr; } }

/* Info panel */
.recap-info {
    background:#fff; border-radius:16px;
    border:1px solid #e2e8f0; padding:2rem;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.recap-info__title { font-size:1.05rem; font-weight:700; color:#1e293b; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:2px solid #f8fafc; }

/* Carte concernée */
.recap-card-id {
    display:flex; align-items:center; gap:1rem;
    background:#f8fafc; border-radius:12px; padding:1rem;
    border:1px solid #e2e8f0; margin-bottom:1.5rem;
}
.recap-card-id__avatar {
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,#667eea,#764ba2);
    color:#fff; font-weight:700; font-size:.95rem;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.recap-card-id__name    { font-size:.95rem; font-weight:700; color:#1e293b; margin:0 0 .1rem; }
.recap-card-id__sub     { font-size:.8rem; color:#64748b; margin:0; }

/* Ce qui est inclus */
.recap-includes { list-style:none; padding:0; margin:0 0 1.5rem; }
.recap-includes li {
    display:flex; align-items:center; gap:.65rem;
    padding:.55rem 0; border-bottom:1px solid #f1f5f9;
    font-size:.875rem; color:#475569;
}
.recap-includes li:last-child { border-bottom:none; }
.recap-includes li .ri-check { color:#10b981; font-size:1rem; flex-shrink:0; }

/* Avertissement nom/prénom */
.recap-warning {
    background:#fef3c7; border:1px solid #fde68a;
    border-radius:10px; padding:.9rem 1rem;
    display:flex; gap:.75rem; align-items:flex-start;
}
.recap-warning__icon { font-size:1.1rem; flex-shrink:0; }
.recap-warning__text { font-size:.83rem; color:#92400e; line-height:1.55; }
.recap-warning__text strong { display:block; margin-bottom:.2rem; }

/* Payment panel */
.recap-pay { position:sticky; top:1.5rem; }
.recap-pay-box {
    background:#fff; border-radius:20px;
    border:1px solid #e2e8f0; padding:2rem;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.recap-pay-header { text-align:center; margin-bottom:1.5rem; }
.recap-pay-icon  { font-size:2.5rem; margin-bottom:.5rem; }
.recap-pay-title { font-size:1.15rem; font-weight:800; color:#1e293b; margin-bottom:.25rem; }
.recap-pay-desc  { font-size:.85rem; color:#64748b; }

.recap-price-block {
    background:#f8fafc; border-radius:12px;
    padding:1rem; margin-bottom:1.5rem;
    border:1px solid #e2e8f0;
}
.recap-price-row { display:flex; justify-content:space-between; font-size:.88rem; color:#475569; padding:.35rem 0; border-bottom:1px dashed #e2e8f0; }
.recap-price-row:last-child { border-bottom:none; }
.recap-price-total { display:flex; justify-content:space-between; font-size:1rem; font-weight:700; color:#1e293b; padding-top:.65rem; margin-top:.1rem; }
.recap-price-total__amount { color:#2563eb; font-size:1.35rem; }

.recap-pay-btn {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff; border:none; border-radius:14px;
    padding:1rem 1.5rem; cursor:pointer;
    font-size:1rem; font-weight:700;
    transition:all .2s; box-shadow:0 4px 14px rgba(37,99,235,.4);
    margin-bottom:1rem;
}
.recap-pay-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.5); }
.recap-pay-btn:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.recap-pay-btn__text { text-align:left; }
.recap-pay-btn__text small { display:block; font-size:.72rem; font-weight:400; opacity:.85; }

.recap-back { display:block; text-align:center; color:#94a3b8; font-size:.82rem; text-decoration:none; margin-top:.75rem; }
.recap-back:hover { color:#ef4444; }

.recap-guarantees { margin-top:1.25rem; display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.recap-guarantee { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:#64748b; background:#f8fafc; border-radius:7px; padding:.35rem .55rem; }
</style>

<nav class="recap-nav">
    <a href="{{ path('app_card_modify', {id: beneficiaire.id}) }}">← Retour au formulaire</a>
    <span>/</span>
    <span>Confirmation</span>
</nav>

{# Stepper #}
<div class="recap-stepper">
    <div class="recap-step">
        <div class="recap-step__dot recap-step__dot--done">✓</div>
        <span class="recap-step__label">Formulaire</span>
    </div>
    <div class="recap-step-line recap-step-line--done"></div>
    <div class="recap-step">
        <div class="recap-step__dot recap-step__dot--active">2</div>
        <span class="recap-step__label recap-step__label--active">Confirmation</span>
    </div>
    <div class="recap-step-line"></div>
    <div class="recap-step">
        <div class="recap-step__dot">3</div>
        <span class="recap-step__label">Paiement Stripe</span>
    </div>
    <div class="recap-step-line"></div>
    <div class="recap-step">
        <div class="recap-step__dot">4</div>
        <span class="recap-step__label">Mise à jour carte</span>
    </div>
</div>

<div class="recap-layout">

    {# ── Panneau gauche ── #}
    <div class="recap-info">
        <h2 class="recap-info__title">📋 Récapitulatif de votre modification</h2>

        {# Carte concernée #}
        <div class="recap-card-id">
            <div class="recap-card-id__avatar">
                {{ beneficiaire.initiales ?? (beneficiaire.prenom|first ~ beneficiaire.nom|first)|upper }}
            </div>
            <div>
                <p class="recap-card-id__name">{{ beneficiaire.prenom }} {{ beneficiaire.nom }}</p>
                <p class="recap-card-id__sub">
                    {{ beneficiaire.fonction ?? '' }}
                    {% if beneficiaire.entreprise %} · {{ beneficiaire.entreprise }}{% endif %}
                </p>
            </div>
        </div>

        {# Ce qui est inclus dans la modif #}
        <p style="font-size:.8rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem;">Ce que vous pouvez modifier</p>
        <ul class="recap-includes">
            <li><span class="ri-check">✓</span> Fonction / Titre · Entreprise · Slogan</li>
            <li><span class="ri-check">✓</span> Email · Téléphone(s) · Adresse</li>
            <li><span class="ri-check">✓</span> Tous les réseaux sociaux</li>
            <li><span class="ri-check">✓</span> Logo · Couleurs · Template</li>
            <li><span class="ri-check">✓</span> Services · Fonctionnalités</li>
        </ul>

        {# Avertissement nom/prénom #}
        <div class="recap-warning">
            <span class="recap-warning__icon">⚠️</span>
            <div class="recap-warning__text">
                <strong>Prénom et Nom non modifiables</strong>
                Le prénom et le nom du bénéficiaire sont liés à l'identité de la carte et ne peuvent pas être changés.
                Pour changer d'identité, vous devez commander une nouvelle carte.
            </div>
        </div>
    </div>

    {# ── Panneau droit : paiement ── #}
    <div class="recap-pay">
        <div class="recap-pay-box">

            <div class="recap-pay-header">
                <div class="recap-pay-icon">💳</div>
                <h2 class="recap-pay-title">Modification de carte</h2>
                <p class="recap-pay-desc">Forfait unique · tous champs inclus</p>
            </div>

            <div class="recap-price-block">
                <div class="recap-price-row">
                    <span>Modification forfaitaire</span>
                    <span>{{ priceHT|number_format(2, ',', ' ') }} €</span>
                </div>
                <div class="recap-price-row">
                    <span>TVA 20%</span>
                    <span>{{ tva|number_format(2, ',', ' ') }} €</span>
                </div>
                <div class="recap-price-total">
                    <span>Total TTC</span>
                    <span class="recap-price-total__amount">{{ priceTTC|number_format(2, ',', ' ') }} €</span>
                </div>
            </div>

            <form action="{{ path('app_card_modify_stripe', {id: beneficiaire.id}) }}" method="POST" id="payForm">
                <button type="submit" class="recap-pay-btn" id="payBtn">
                    <span style="font-size:1.3rem;">🔒</span>
                    <span class="recap-pay-btn__text">
                        Payer {{ priceTTC|number_format(2, ',', ' ') }} € TTC
                        <small>via Stripe sécurisé</small>
                    </span>
                    <span>→</span>
                </button>
            </form>

            <a href="{{ path('app_card_modify', {id: beneficiaire.id}) }}" class="recap-back">
                ← Modifier ma saisie
            </a>

            <div class="recap-guarantees">
                <div class="recap-guarantee"><span>🔐</span> Paiement SSL</div>
                <div class="recap-guarantee"><span>🏦</span> Stripe PCI DSS</div>
                <div class="recap-guarantee"><span>⚡</span> Mise à jour instantanée</div>
                <div class="recap-guarantee"><span>📋</span> Facture email</div>
            </div>
        </div>
    </div>

</div>

<script>
document.getElementById('payForm').addEventListener('submit', function () {
    const btn = document.getElementById('payBtn');
    btn.disabled = true;
    btn.querySelector('.recap-pay-btn__text').innerHTML =
        'Redirection vers Stripe…<small>Veuillez patienter</small>';
});
</script>
</div></div>
{% endblock %}