{% extends 'base.html.twig' %}

{% block title %}{{ 'subscription.success.title'|trans }} - {{ 'app.name'|trans }}{% endblock %}

{% set body_class = 'page-with-hero' %}

{% block hero %}
<!-- Hero Section Success -->
<section class="hero-section">
    <div class="hero-decoration">
        <i class="fas fa-check-circle"></i>
    </div>
    
    <div class="container">
        <div class="hero-content text-center">
            <div class="status-icon success">
                <i class="fas fa-check-circle"></i>
                </div>
            <h1 class="hero-title">{{ 'subscription.success.title'|trans }}</h1>
            <p class="hero-subtitle">
                    {{ 'subscription.success.congratulations'|trans }}
                </p>
            </div>
    </div>
</section>
{% endblock %}

{% block body %}
<div class="status-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-receipt me-2"></i>
                        {{ 'subscription.success.order_details'|trans }}
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>{{ 'subscription.success.subscription_info'|trans }}</h5>
                            <hr>
                            <p><strong>{{ 'subscription.success.email'|trans }}:</strong> {{ member.email }}</p>
                            <p><strong>{{ 'subscription.success.name'|trans }}:</strong> {{ member.fullName }}</p>
                            <p><strong>{{ 'subscription.success.company'|trans }}:</strong> {{ member.companyName }}</p>
                        </div>
                        <div class="col-md-6">
                            <h5>{{ 'subscription.success.payment_details'|trans }}</h5>
                            <hr>
                            {% if session %}
                                <p><strong>{{ 'subscription.success.amount'|trans }}:</strong> {{ (session.amount_total / 100)|number_format(2, ',', ' ') }} {{ session.currency|upper }}</p>
                                <p><strong>{{ 'subscription.success.status'|trans }}:</strong> 
                                    <span class="badge bg-success">{{ ('subscription.status.' ~ session.payment_status)|trans }}</span>
                                </p>
                                <p><strong>{{ 'subscription.success.session_id'|trans }}:</strong> <code>{{ session.id }}</code></p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            
                <div class="card mb-4">
                <div class="card-body">
                    <h5><i class="fas fa-info-circle text-info me-2"></i>{{ 'subscription.success.what_next'|trans }}</h5>
                    <hr>
                        <div class="support-grid">
                            <div class="support-item">
                                <i class="fas fa-envelope fa-2x mb-3 text-primary"></i>
                            <h6>{{ 'subscription.success.confirmation_email'|trans }}</h6>
                            <p class="text-muted small">
                                {{ 'subscription.success.email_description'|trans }}
                            </p>
                        </div>
                            <div class="support-item">
                                <i class="fas fa-user-check fa-2x mb-3 text-success"></i>
                            <h6>{{ 'subscription.success.account_activated'|trans }}</h6>
                            <p class="text-muted small">
                                {{ 'subscription.success.account_description'|trans }}
                            </p>
                        </div>
                            <div class="support-item">
                                <i class="fas fa-cog fa-2x mb-3 text-warning"></i>
                            <h6>{{ 'subscription.success.subscription_management'|trans }}</h6>
                            <p class="text-muted small">
                                {{ 'subscription.success.management_description'|trans }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
                <div class="status-actions">
                <div class="btn-group" role="group">
                    <a href="{{ path('subscription_index') }}" class="btn btn-primary me-3">
                        <i class="fas fa-credit-card me-2"></i>
                        {{ 'subscription.success.manage_subscription'|trans }}
                    </a>
                    <a href="{{ path('app_homepage') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-home me-2"></i>
                        {{ 'subscription.success.back_to_home'|trans }}
                    </a>
                </div>
            </div>
            
            <!-- Support -->
            <div class="alert alert-info mt-4" role="alert">
                <h6><i class="fas fa-headset me-2"></i>{{ 'subscription.success.need_help'|trans }}</h6>
                <p class="mb-0">
                    {{ 'subscription.success.support_description'|trans({
                        '%email%': 'support@antiquites-en-france.fr',
                        '%phone%': '01 23 45 67 89'
                    })|raw }}
                </p>
            </div>
        </div>
    </div>
</div>
</div>

<script>
// Afficher une notification de succès
document.addEventListener('DOMContentLoaded', function() {
    // Créer une notification toast personnalisée
    const toastHTML = `
        <div class="toast align-items-center text-white bg-success border-0 position-fixed top-0 end-0 m-3" 
             role="alert" aria-live="assertive" aria-atomic="true" 
             style="z-index: 1055;">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="fas fa-check-circle me-2"></i>
                    {{ 'subscription.success.toast_message'|trans }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" 
                        data-bs-dismiss="toast" aria-label="{{ 'common.close'|trans }}"></button>
            </div>
        </div>
    `;
    
    // Ajouter le toast au DOM
    document.body.insertAdjacentHTML('beforeend', toastHTML);
    
    // Afficher le toast
    const toast = new bootstrap.Toast(document.querySelector('.toast'));
    toast.show();
    
    // Supprimer le toast du DOM après qu'il soit caché
    document.querySelector('.toast').addEventListener('hidden.bs.toast', function() {
        this.remove();
    });
});
</script>
{% endblock %}