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

{% block title %}Renouveler l'hébergement — {{ beneficiaire.prenom }} {{ beneficiaire.nom }}{% endblock %}

{% block content %}

{# Breadcrumb #}
<nav class="ren-breadcrumb" aria-label="Fil d'Ariane">
    <a href="{{ path('app_hebergement_list') }}">← Mes Abonnements</a>
    <span>/</span>
    <span>{{ beneficiaire.prenom }} {{ beneficiaire.nom }}</span>
    <span>/</span>
    <span>Renouvellement</span>
</nav>

<div class="ren-layout">

    {# ══════════════════════════════
       PANNEAU GAUCHE — Info carte
    ══════════════════════════════ #}
    <div class="ren-card-panel">
        <h2 class="ren-panel-title">Récapitulatif de votre carte</h2>

        <div class="ren-identity">
            <div class="ren-avatar">
                {% if beneficiaire.avatarType == 'photo' and beneficiaire.photoFilename %}
                    <img src="/uploads/photos/{{ beneficiaire.photoFilename }}" alt="{{ beneficiaire.prenom }}">
                {% else %}
                    {{ beneficiaire.initiales ?? (beneficiaire.prenom|first ~ beneficiaire.nom|first)|upper }}
                {% endif %}
            </div>
            <div>
                <h3 class="ren-name">{{ beneficiaire.prenom }} {{ beneficiaire.nom }}</h3>
                {% if beneficiaire.fonction %}<p class="ren-role">{{ beneficiaire.fonction }}</p>{% endif %}
                {% if beneficiaire.entreprise %}<p class="ren-company">{{ beneficiaire.entreprise }}</p>{% endif %}
            </div>
        </div>

        {# Statut actuel #}
        <div class="ren-current-status">
            {% if sub.status == 'expired' %}
                <div class="ren-status-badge ren-status-badge--expired">❌ Hébergement expiré</div>
                <p class="ren-status-hint">Votre carte est actuellement inaccessible. Le renouvellement la réactivera immédiatement.</p>
            {% elseif sub.status == 'suspended' %}
                <div class="ren-status-badge ren-status-badge--suspended">⏸️ Hébergement suspendu</div>
                <p class="ren-status-hint">Votre carte a été suspendue. Le renouvellement la réactivera.</p>
            {% elseif sub.expiresAt %}
                {% set diff = sub.expiresAt.diff(date()) %}
                {% if diff.days <= 60 %}
                    <div class="ren-status-badge ren-status-badge--warn">⚠️ Expire dans {{ diff.days }} jour{{ diff.days > 1 ? 's' : '' }}</div>
                {% else %}
                    <div class="ren-status-badge ren-status-badge--active">✅ Actif jusqu'au {{ sub.expiresAt|date('d/m/Y') }}</div>
                {% endif %}
            {% endif %}
        </div>

        {# Timeline #}
        <div class="ren-timeline">
            <h4 class="ren-timeline-title">Ce qui va se passer</h4>
            <ol class="ren-steps">
                <li class="ren-step ren-step--done">
                    <div class="ren-step__dot">✓</div>
                    <div class="ren-step__body">
                        <strong>Paiement sécurisé</strong>
                        <span>Via Stripe — {{ priceTTC }}€ TTC</span>
                    </div>
                </li>
                <li class="ren-step">
                    <div class="ren-step__dot">2</div>
                    <div class="ren-step__body">
                        <strong>Confirmation immédiate</strong>
                        <span>Votre hébergement est prolongé d'1 an</span>
                    </div>
                </li>
                <li class="ren-step">
                    <div class="ren-step__dot">3</div>
                    <div class="ren-step__body">
                        <strong>Carte réactivée</strong>
                        <span>Accessible en quelques secondes</span>
                    </div>
                </li>
                <li class="ren-step">
                    <div class="ren-step__dot">4</div>
                    <div class="ren-step__body">
                        <strong>Facture reçue par email</strong>
                        <span>Disponible aussi dans Mes Commandes</span>
                    </div>
                </li>
            </ol>
        </div>
    </div>

    {# ══════════════════════════════
       PANNEAU DROIT — Paiement
    ══════════════════════════════ #}
    <div class="ren-payment-panel">
        <div class="ren-payment-box">

            <div class="ren-payment-header">
                <div class="ren-payment-icon">💳</div>
                <h2 class="ren-payment-title">Renouvellement hébergement</h2>
                <p class="ren-payment-desc">1 an d'hébergement pour la carte de <strong>{{ beneficiaire.prenom }} {{ beneficiaire.nom }}</strong></p>
            </div>

            {# Prix #}
            <div class="ren-price-block">
                <div class="ren-price-row">
                    <span>Hébergement annuel</span>
                    <span>{{ priceHT }}€</span>
                </div>
                <div class="ren-price-row">
                    <span>TVA 20%</span>
                    <span>{{ (priceTTC - priceHT)|number_format(2, ',', ' ') }}€</span>
                </div>
                <div class="ren-price-total">
                    <span>Total TTC</span>
                    <span class="ren-price-total__amount">{{ priceTTC }}€</span>
                </div>
            </div>

            {# Bouton paiement Stripe #}
            <form action="{{ path('app_hebergement_stripe_checkout', {id: beneficiaire.id}) }}" method="POST" id="stripeForm">
                <button type="submit" class="ren-pay-btn" id="payBtn">
                    <span class="ren-pay-btn__icon">🔒</span>
                    <span class="ren-pay-btn__text">
                        Payer {{ priceTTC }}€ TTC
                        <small>via Stripe sécurisé</small>
                    </span>
                    <span class="ren-pay-btn__arrow">→</span>
                </button>
            </form>

            {# Garanties #}
            <div class="ren-guarantees">
                <div class="ren-guarantee">
                    <span>🔐</span>
                    <span>Paiement 100% sécurisé (SSL/TLS)</span>
                </div>
                <div class="ren-guarantee">
                    <span>🏦</span>
                    <span>Traité par Stripe (certifié PCI DSS)</span>
                </div>
                <div class="ren-guarantee">
                    <span>📋</span>
                    <span>Facture envoyée automatiquement</span>
                </div>
                <div class="ren-guarantee">
                    <span>⚡</span>
                    <span>Réactivation instantanée</span>
                </div>
            </div>

            {# Logos cartes #}
            <div class="ren-card-logos">
                <span class="ren-card-logo ren-card-logo--visa">VISA</span>
                <span class="ren-card-logo ren-card-logo--mc">MC</span>
                <span class="ren-card-logo ren-card-logo--amex">AMEX</span>
                <span class="ren-card-logo ren-card-logo--stripe">stripe</span>
            </div>

        </div>

        {# Lien retour #}
        <div class="ren-back-link">
            <a href="{{ path('app_hebergement_list') }}">← Retour à mes abonnements</a>
        </div>
    </div>

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

{% block stylesheets %}
    {{ parent() }}
    <style>
    .ren-breadcrumb {
        display: flex; gap: .5rem; align-items: center;
        font-size: .85rem; color: #94a3b8;
        margin-bottom: 1.5rem;
    }
    .ren-breadcrumb a { color: #3b82f6; text-decoration: none; }
    .ren-breadcrumb a:hover { text-decoration: underline; }

    /* Layout 2 colonnes */
    .ren-layout {
        display: grid;
        grid-template-columns: 1fr 420px;
        gap: 2rem;
        align-items: start;
    }
    @media (max-width: 900px) { .ren-layout { grid-template-columns: 1fr; } }

    /* ═══ PANNEAU GAUCHE ═══ */
    .ren-card-panel {
        background: #fff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        padding: 2rem;
        box-shadow: 0 2px 12px rgba(0,0,0,.05);
    }
    .ren-panel-title {
        font-size: 1rem; font-weight: 700; color: #1e293b;
        margin-bottom: 1.5rem; padding-bottom: .75rem;
        border-bottom: 2px solid #f1f5f9;
    }

    .ren-identity {
        display: flex; align-items: center; gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .ren-avatar {
        width: 60px; height: 60px; border-radius: 50%;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff; font-weight: 700; font-size: 1.1rem;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden; flex-shrink: 0;
    }
    .ren-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .ren-name    { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0 0 .15rem; }
    .ren-role    { font-size: .85rem; color: #64748b; margin: 0; }
    .ren-company { font-size: .8rem; color: #94a3b8; margin: .1rem 0 0; }

    /* Status badges */
    .ren-current-status { margin-bottom: 1.5rem; }
    .ren-status-badge {
        display: inline-block;
        padding: .4rem 1rem;
        border-radius: 20px;
        font-size: .82rem; font-weight: 600;
        margin-bottom: .5rem;
    }
    .ren-status-badge--expired  { background: #fee2e2; color: #b91c1c; }
    .ren-status-badge--suspended{ background: #fef3c7; color: #92400e; }
    .ren-status-badge--warn     { background: #fef3c7; color: #92400e; }
    .ren-status-badge--active   { background: #dcfce7; color: #15803d; }
    .ren-status-hint { font-size: .83rem; color: #64748b; margin: 0; }

    /* Timeline */
    .ren-timeline-title { font-size: .9rem; font-weight: 700; color: #374151; margin-bottom: 1rem; }
    .ren-steps { list-style: none; padding: 0; margin: 0; }
    .ren-step {
        display: flex; gap: 1rem; align-items: flex-start;
        padding-bottom: 1rem;
        position: relative;
    }
    .ren-step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 15px; top: 32px;
        width: 2px; height: calc(100% - 10px);
        background: #e2e8f0;
    }
    .ren-step__dot {
        width: 32px; height: 32px; border-radius: 50%;
        background: #f1f5f9; border: 2px solid #e2e8f0;
        color: #94a3b8; font-size: .8rem; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; z-index: 1;
    }
    .ren-step--done .ren-step__dot { background: #dcfce7; border-color: #86efac; color: #15803d; }
    .ren-step__body strong { display: block; font-size: .88rem; color: #1e293b; }
    .ren-step__body span   { display: block; font-size: .8rem; color: #94a3b8; margin-top: .1rem; }

    /* ═══ PANNEAU DROIT ═══ */
    .ren-payment-panel { position: sticky; top: 1.5rem; }
    .ren-payment-box {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #e2e8f0;
        padding: 2rem;
        box-shadow: 0 4px 20px rgba(0,0,0,.08);
    }

    .ren-payment-header { text-align: center; margin-bottom: 1.5rem; }
    .ren-payment-icon   { font-size: 2.5rem; margin-bottom: .5rem; }
    .ren-payment-title  { font-size: 1.2rem; font-weight: 800; color: #1e293b; margin-bottom: .35rem; }
    .ren-payment-desc   { font-size: .85rem; color: #64748b; margin: 0; }

    /* Prix */
    .ren-price-block {
        background: #f8fafc;
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        border: 1px solid #e2e8f0;
    }
    .ren-price-row {
        display: flex; justify-content: space-between;
        font-size: .88rem; color: #475569;
        padding: .35rem 0;
        border-bottom: 1px dashed #e2e8f0;
    }
    .ren-price-total {
        display: flex; justify-content: space-between;
        font-size: 1rem; font-weight: 700; color: #1e293b;
        padding-top: .6rem; margin-top: .1rem;
    }
    .ren-price-total__amount { color: #2563eb; font-size: 1.3rem; }

    /* Bouton paiement */
    .ren-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: 1.25rem;
    }
    .ren-pay-btn:hover {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(37,99,235,.5);
    }
    .ren-pay-btn:active { transform: translateY(0); }
    .ren-pay-btn__icon { font-size: 1.3rem; }
    .ren-pay-btn__text { text-align: left; }
    .ren-pay-btn__text small { display: block; font-size: .72rem; font-weight: 400; opacity: .85; margin-top: .1rem; }
    .ren-pay-btn__arrow { font-size: 1.2rem; }

    /* Garanties */
    .ren-guarantees { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.25rem; }
    .ren-guarantee {
        display: flex; align-items: center; gap: .4rem;
        font-size: .75rem; color: #64748b;
        background: #f8fafc;
        border-radius: 8px;
        padding: .4rem .6rem;
    }

    /* Logos cartes */
    .ren-card-logos { display: flex; gap: .5rem; justify-content: center; }
    .ren-card-logo {
        padding: .3rem .6rem;
        border-radius: 5px;
        font-size: .72rem; font-weight: 800;
        letter-spacing: .05em;
        border: 1px solid #e2e8f0;
    }
    .ren-card-logo--visa   { background: #1a1f71; color: #fff; }
    .ren-card-logo--mc     { background: #eb001b; color: #fff; }
    .ren-card-logo--amex   { background: #007bc1; color: #fff; }
    .ren-card-logo--stripe { background: #635bff; color: #fff; font-weight: 400; font-style: italic; }

    .ren-back-link { text-align: center; margin-top: 1rem; }
    .ren-back-link a { color: #94a3b8; font-size: .85rem; text-decoration: none; }
    .ren-back-link a:hover { color: #3b82f6; }
    </style>
{% endblock %}

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