{# templates/account/hebergement/show.html.twig #}
{% extends 'account/base_account.html.twig' %}
{% block title %}Hébergement — {{ beneficiaire.fullName }}{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <style>
        #qrBtn      { display: none !important; }
        #qrPanel    { display: none !important; }
        #userNavBtn { display: flex !important; }
    </style>
{% endblock %}


{% block body %}
<div style="max-width:600px;margin:40px auto;padding:0 20px;">

    <a href="{{ path('app_account_commande_show', {id: beneficiaire.commande.id}) }}"
       style="display:inline-flex;align-items:center;gap:6px;color:#667eea;text-decoration:none;font-size:14px;margin-bottom:24px;">
        ← Retour à la commande
    </a>

    <div style="background:white;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.09);padding:32px;">

        <h1 style="font-size:22px;font-weight:700;color:#1d1d1f;margin:0 0 4px;">🏠 Hébergement de votre carte</h1>
        <p style="color:#86868b;font-size:14px;margin:0 0 28px;">{{ beneficiaire.fullName }}</p>

        {# Statut badge #}
        {% set isOk = sub.isActive() %}
        <div style="background:{{ isOk ? '#d1fae5' : '#fee2e2' }};border-radius:14px;padding:20px 24px;margin-bottom:24px;display:flex;align-items:center;gap:16px;">
            <div style="font-size:36px;">{{ isOk ? '✅' : '🔴' }}</div>
            <div>
                <div style="font-size:16px;font-weight:700;color:{{ isOk ? '#065f46' : '#991b1b' }};">{{ sub.statusLabel }}</div>
                <div style="font-size:13px;color:{{ isOk ? '#047857' : '#b91c1c' }};margin-top:2px;">
                    {% if isOk %}
                        Expire le <strong>{{ sub.expiresAt|date('d/m/Y') }}</strong>
                        (dans {{ sub.daysUntilExpiration }} jours)
                    {% else %}
                        Expirée le <strong>{{ sub.expiresAt|date('d/m/Y') }}</strong> — carte inaccessible
                    {% endif %}
                </div>
            </div>
        </div>

        {# Infos #}
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px;">
            <div style="background:#f5f5f7;border-radius:12px;padding:16px;">
                <div style="font-size:11px;color:#86868b;font-weight:600;text-transform:uppercase;margin-bottom:4px;">Début</div>
                <div style="font-weight:700;color:#1d1d1f;">{{ sub.startsAt|date('d/m/Y') }}</div>
            </div>
            <div style="background:#f5f5f7;border-radius:12px;padding:16px;">
                <div style="font-size:11px;color:#86868b;font-weight:600;text-transform:uppercase;margin-bottom:4px;">Expiration</div>
                <div style="font-weight:700;color:#1d1d1f;">{{ sub.expiresAt|date('d/m/Y') }}</div>
            </div>
            {% if sub.lastRenewalAt %}
            <div style="background:#f5f5f7;border-radius:12px;padding:16px;">
                <div style="font-size:11px;color:#86868b;font-weight:600;text-transform:uppercase;margin-bottom:4px;">Dernier renouvellement</div>
                <div style="font-weight:700;color:#1d1d1f;">{{ sub.lastRenewalAt|date('d/m/Y') }}</div>
            </div>
            {% endif %}
        </div>

        {# Tarif #}
        <div style="background:#f0f4ff;border-radius:12px;padding:16px;margin-bottom:28px;font-size:14px;">
            💡 <strong>Tarif de renouvellement :</strong> {{ priceHT|number_format(2, ',', ' ') }} € HT
            / {{ priceTTC|number_format(2, ',', ' ') }} € TTC <em>par an et par carte</em>
            <br>Soit seulement <strong>1 € / mois</strong>.
        </div>

        {# CTA #}
        {% if not isOk or sub.daysUntilExpiration <= 30 %}
        <a href="{{ path('app_hebergement_renew', {id: beneficiaire.id}) }}"
           style="display:block;background:linear-gradient(135deg,#667eea,#764ba2);color:white;text-align:center;padding:16px;border-radius:14px;font-size:16px;font-weight:700;text-decoration:none;">
            🔄 Renouveler l'hébergement — {{ priceTTC|number_format(2, ',', ' ') }} € TTC
        </a>
        {% endif %}

    </div>
</div>
{% endblock %}