{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Confirmer la souscription | {{ plan.titre }}{% endblock %}

{% block body %}
<div class="container-fluid py-5 px-4">
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-8">
            <div class="card border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
                
                {# --- HEADER VISUEL --- #}
                <div class="card-header bg-primary py-5 text-center border-0">
                    <div class="icon-shape bg-white text-primary mx-auto mb-3 shadow-sm" 
                         style="width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center;">
                        <i class="{{ plan.icone|default('fas fa-gem') }} fa-3x"></i>
                    </div>
                    <h2 class="text-white fw-bold h4 mb-0">Activation du pack {{ plan.titre }}</h2>
                </div>

                <div class="card-body p-4 p-md-5">
                    <div class="text-center mb-4">
                        <p class="text-muted mb-0">{{ plan.description }}</p>
                    </div>
                    
                    {# --- DETAILS DU PLAN --- #}
                    <div class="bg-light p-4 rounded-4 mb-4 border border-light">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted small text-uppercase fw-bold">Période</span>
                            <span class="fw-bold text-dark h6 mb-0">{{ plan.duree }} Mois</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted small text-uppercase fw-bold">Disponibilité</span>
                            <span class="badge bg-soft-success text-success rounded-pill px-3">Immédiate</span>
                        </div>
                        <hr class="opacity-10">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted small text-uppercase fw-bold">Prix Total</span>
                            <span class="fw-bold text-primary h5 mb-0">{{ (plan.prix * 12)|number_format(0, ',', ' ') }} F.CFA</span>
                        </div>
                    </div>

                    {# --- FORMULAIRE D'ACTION --- #}
                    <form action="{{ path('app_entreprise_abonnement_souscrire', {id: plan.id}) }}" method="POST">
                        <div class="alert alert-warning border-0 rounded-4 small mb-4 d-flex">
                            <i class="fas fa-exclamation-triangle me-3 mt-1"></i>
                            <span>En cliquant sur confirmer, votre abonnement sera activé et les limites de votre compte seront mises à jour instantanément.</span>
                        </div>

                        <div class="d-grid gap-3">
                            <button type="submit" class="btn btn-primary btn-lg fw-bold shadow-sm py-3" style="border-radius: 12px;">
                                <i class="fas fa-check-circle me-2"></i>Confirmer et Activer
                            </button>
                            
                            <a href="{{ path('app_entreprise_abonnement_plans') }}" class="btn btn-link text-muted text-decoration-none small text-center">
                                <i class="fas fa-times me-1"></i> Annuler et choisir un autre plan
                            </a>
                        </div>
                    </form>
                </div>

                <div class="card-footer bg-light border-0 py-3 text-center">
                    <small class="text-muted">
                        <i class="fas fa-lock me-1"></i> Transaction sécurisée par cryptage SSL
                    </small>
                </div>
            </div>
            
            {# --- RAPPEL DES AVANTAGES --- #}
            <div class="row mt-4 g-3">
                <div class="col-4 text-center">
                    <div class="small text-muted"><i class="fas fa-headset d-block mb-1 text-primary"></i> Support 24/7</div>
                </div>
                <div class="col-4 text-center">
                    <div class="small text-muted"><i class="fas fa-file-invoice d-block mb-1 text-primary"></i> Facture auto</div>
                </div>
                <div class="col-4 text-center">
                    <div class="small text-muted"><i class="fas fa-bolt d-block mb-1 text-primary"></i> Setup rapide</div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-soft-success { background-color: rgba(25, 135, 84, 0.1); }
    .icon-shape { transition: transform 0.3s ease; }
    .card:hover .icon-shape { transform: scale(1.1) rotate(5deg); }
</style>
{% endblock %}