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

{% block title %}Paiement confirmé — NUM-ECARD{% endblock %}

{% block content %}

<div class="suc-wrapper">

    {# Confetti animation #}
    <div class="suc-confetti" aria-hidden="true">
        {% for i in 1..20 %}
            <div class="suc-confetti__piece suc-confetti__piece--{{ i }}"></div>
        {% endfor %}
    </div>

    <div class="suc-card">
        <div class="suc-icon">✅</div>
        <h1 class="suc-title">Paiement confirmé !</h1>
        <p class="suc-subtitle">
            L'hébergement de la carte de
            <strong>{{ beneficiaire.prenom }} {{ beneficiaire.nom }}</strong>
            a été renouvelé avec succès.
        </p>

        {# Récap #}
        <div class="suc-recap">
            <div class="suc-recap__row">
                <span class="suc-recap__icon">📅</span>
                <div>
                    <strong>Valide jusqu'au</strong>
                    <span>{{ sub.expiresAt ? sub.expiresAt|date('d MMMM Y', locale='fr') : 'Dans 1 an' }}</span>
                </div>
            </div>
            <div class="suc-recap__row">
                <span class="suc-recap__icon">🃏</span>
                <div>
                    <strong>Carte</strong>
                    <span>{{ beneficiaire.prenom }} {{ beneficiaire.nom }}{% if beneficiaire.fonction %} — {{ beneficiaire.fonction }}{% endif %}</span>
                </div>
            </div>
            <div class="suc-recap__row">
                <span class="suc-recap__icon">📩</span>
                <div>
                    <strong>Facture</strong>
                    <span>Envoyée par email — accessible dans Mes Commandes</span>
                </div>
            </div>
        </div>

        {# Actions #}
        <div class="suc-actions">
            <a href="{{ path('carte', {slug: (beneficiaire.prenom ~ '-' ~ beneficiaire.nom)|lower|replace({' ': '-'}) }) }}"
               class="suc-btn suc-btn--primary" target="_blank" rel="noopener">
                👁️ Voir ma carte
            </a>
            <a href="{{ path('app_hebergement_list') }}" class="suc-btn suc-btn--outline">
                📡 Mes abonnements
            </a>
            <a href="{{ path('app_account_dashboard') }}" class="suc-btn suc-btn--ghost">
                🏠 Tableau de bord
            </a>
        </div>
    </div>
</div>

    <style>
        #qrBtn      { display: none !important; }
        #qrPanel    { display: none !important; }
        #userNavBtn { display: flex !important; }
    </style>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
    .suc-wrapper {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 70vh;
        padding: 2rem 1rem;
        position: relative;
    }

    /* Confetti */
    .suc-confetti { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
    .suc-confetti__piece {
        position: absolute;
        width: 10px; height: 10px;
        border-radius: 2px;
        animation: confettiFall 3s ease-in forwards;
        opacity: 0;
    }
    @keyframes confettiFall {
        0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
        100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }
    {% for i in 1..20 %}
    .suc-confetti__piece--{{ i }} {
        left: {{ (i * 5)|default(50) }}%;
        top: {{ (i * 3 % 30)|default(0) }}%;
        background: hsl({{ i * 18 }}, 70%, 55%);
        animation-delay: {{ (i * 0.15)|number_format(2) }}s;
        animation-duration: {{ (2.5 + i * 0.1)|number_format(1) }}s;
        width: {{ (6 + i % 8) }}px;
        height: {{ (6 + i % 8) }}px;
    }
    {% endfor %}

    .suc-card {
        background: #fff;
        border-radius: 24px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 8px 40px rgba(0,0,0,.1);
        padding: 3rem 2.5rem;
        max-width: 520px;
        width: 100%;
        text-align: center;
        position: relative;
        z-index: 1;
        margin-top: 1rem;
    }

    .suc-icon { font-size: 4rem; margin-bottom: 1rem; animation: popIn .5s cubic-bezier(.175,.885,.32,1.275); }
    @keyframes popIn {
        0%   { transform: scale(0); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }

    .suc-title {
        font-size: 1.75rem; font-weight: 800;
        color: #1e293b; margin-bottom: .5rem;
    }
    .suc-subtitle { font-size: .95rem; color: #64748b; margin-bottom: 2rem; line-height: 1.6; }

    .suc-recap {
        background: #f8fafc;
        border-radius: 14px;
        padding: 1.25rem;
        margin-bottom: 2rem;
        text-align: left;
        border: 1px solid #e2e8f0;
    }
    .suc-recap__row {
        display: flex; align-items: center; gap: .9rem;
        padding: .6rem 0;
        border-bottom: 1px dashed #e2e8f0;
    }
    .suc-recap__row:last-child { border-bottom: none; }
    .suc-recap__icon { font-size: 1.2rem; flex-shrink: 0; }
    .suc-recap__row strong { display: block; font-size: .82rem; font-weight: 700; color: #374151; }
    .suc-recap__row span   { display: block; font-size: .82rem; color: #64748b; }

    .suc-actions { display: flex; flex-direction: column; gap: .75rem; }
    .suc-btn {
        display: flex; align-items: center; justify-content: center; gap: .5rem;
        padding: .8rem 1.5rem;
        border-radius: 12px;
        font-size: .9rem; font-weight: 600;
        text-decoration: none;
        transition: all .18s;
    }
    .suc-btn--primary {
        background: linear-gradient(135deg, #10b981, #059669);
        color: #fff;
        box-shadow: 0 3px 12px rgba(16,185,129,.4);
    }
    .suc-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(16,185,129,.5); color: #fff; }
    .suc-btn--outline {
        border: 1.5px solid #3b82f6; color: #3b82f6;
        background: transparent;
    }
    .suc-btn--outline:hover { background: #eff6ff; }
    .suc-btn--ghost { background: #f1f5f9; color: #475569; }
    .suc-btn--ghost:hover { background: #e2e8f0; }
    </style>
{% endblock %}