{# templates/cart/success.html.twig #}

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

{% block title %}Paiement réussi - NUM-ECARD{% endblock %}

{% block body %}
<style>
    .success-container {
        max-width: 700px;
        margin: 60px auto;
        padding: 0 20px;
        text-align: center;
    }
    
    .success-icon {
        width: 120px;
        height: 120px;
        background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 30px;
        font-size: 60px;
        animation: pulse 2s ease-in-out infinite;
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    
    .success-title {
        font-size: 32px;
        font-weight: 800;
        color: #1d1d1f;
        margin-bottom: 16px;
    }
    
    .success-subtitle {
        font-size: 18px;
        color: #86868b;
        margin-bottom: 40px;
        line-height: 1.6;
    }
    
    .success-card {
        background: white;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        margin-bottom: 30px;
        text-align: left;
    }
    
    .success-card h2 {
        font-size: 20px;
        font-weight: 700;
        color: #1d1d1f;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .order-info {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }
    
    @media (max-width: 500px) {
        .order-info {
            grid-template-columns: 1fr;
        }
    }
    
    .order-info-item {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 16px;
    }
    
    .order-info-label {
        font-size: 12px;
        color: #86868b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }
    
    .order-info-value {
        font-size: 16px;
        font-weight: 600;
        color: #1d1d1f;
    }
    
    .order-cards {
        border-top: 1px solid #f0f0f0;
        padding-top: 24px;
    }
    
    .order-cards h3 {
        font-size: 16px;
        font-weight: 600;
        color: #1d1d1f;
        margin-bottom: 16px;
    }
    
    .card-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px;
        background: #fafafa;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    
    .card-item:last-child {
        margin-bottom: 0;
    }
    
    .card-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 18px;
    }
    
    .card-details {
        flex: 1;
    }
    
    .card-name {
        font-size: 15px;
        font-weight: 600;
        color: #1d1d1f;
    }
    
    .card-fonction {
        font-size: 13px;
        color: #86868b;
    }
    
    .card-status {
        background: #e8f5e9;
        color: #4CAF50;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    
    .next-steps {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16px;
        padding: 30px;
        color: white;
        text-align: left;
    }
    
    .next-steps h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .step-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .step-list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 16px;
        font-size: 15px;
        line-height: 1.5;
    }
    
    .step-list li:last-child {
        margin-bottom: 0;
    }
    
    .step-number {
        width: 28px;
        height: 28px;
        background: rgba(255,255,255,0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
        flex-shrink: 0;
    }
    
    .btn-home {
        display: inline-block;
        background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
        color: white;
        padding: 16px 40px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 700;
        font-size: 16px;
        transition: all 0.3s;
        margin-top: 30px;
    }
    
    .btn-home:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(155, 89, 182, 0.4);
        color: white;
    }
    
    .confetti {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
        z-index: 1000;
    }
</style>

<div class="success-container">
    {% if paymentSuccess %}
    {# Paiement réussi #}
    <div class="success-icon">✓</div>
    
    <h1 class="success-title">Paiement réussi ! 🎉</h1>
    <p class="success-subtitle">
        Merci pour votre commande. Vos cartes de visite numériques sont en cours de création.<br>
        Vous recevrez un email de confirmation dans quelques instants.
    </p>
    
    {% if commandes is not empty %}
    <div class="success-card">
        <h2>📋 Détails de votre commande</h2>
        
        {% for commande in commandes %}
        <div class="order-info">
            <div class="order-info-item">
                <div class="order-info-label">Référence</div>
                <div class="order-info-value">{{ commande.reference }}</div>
            </div>
            <div class="order-info-item">
                <div class="order-info-label">Statut</div>
                <div class="order-info-value" style="color: #4CAF50;">✓ Payé</div>
            </div>
            <div class="order-info-item">
                <div class="order-info-label">Total HT</div>
                <div class="order-info-value">{{ commande.totalHT|number_format(2, ',', ' ') }} €</div>
            </div>
            <div class="order-info-item">
                <div class="order-info-label">Total TTC</div>
                <div class="order-info-value">{{ commande.totalTTC|number_format(2, ',', ' ') }} €</div>
            </div>
        </div>
        
        {% if commande.beneficiaires is not empty %}
        <div class="order-cards">
            <h3>🎴 Cartes commandées ({{ commande.beneficiaires|length }})</h3>
            
            {% for beneficiaire in commande.beneficiaires %}
            <div class="card-item">
                <div class="card-avatar">
                    {{ beneficiaire.prenom|slice(0,1)|upper }}{{ beneficiaire.nom|slice(0,1)|upper }}
                </div>
                <div class="card-details">
                    <div class="card-name">{{ beneficiaire.prenom }} {{ beneficiaire.nom }}</div>
                    <div class="card-fonction">{{ beneficiaire.fonction ?? beneficiaire.entreprise ?? 'Carte de visite' }}</div>
                </div>
                <div class="card-status">En création</div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        {% endfor %}
    </div>
    {% endif %}
    
    <div class="next-steps">
        <h3>🚀 Prochaines étapes</h3>
        <ul class="step-list">
            <li>
                <span class="step-number">1</span>
                <span>Vous recevrez un email de confirmation avec les détails de votre commande</span>
            </li>
            <li>
                <span class="step-number">2</span>
                <span>Notre équipe crée vos cartes de visite numériques (24-48h)</span>
            </li>
            <li>
                <span class="step-number">3</span>
                <span>Vous recevrez un email avec les liens vers vos cartes et vos QR codes</span>
            </li>
            <li>
                <span class="step-number">4</span>
                <span>Partagez vos cartes ! Par email, SMS, QR code ou réseaux sociaux</span>
            </li>
        </ul>
    </div>
    
    {% else %}
    {# Statut incertain - vérification en attente #}
    <div class="success-icon" style="background: linear-gradient(135deg, #FF9800 0%, #FFC107 100%);">⏳</div>
    
    <h1 class="success-title">Vérification en cours</h1>
    <p class="success-subtitle">
        Nous vérifions le statut de votre paiement.<br>
        Si tout est en ordre, vous recevrez un email de confirmation dans quelques instants.
    </p>
    
    {% if commandes is not empty %}
    <div class="success-card">
        <h2>📋 Commande(s) en attente de confirmation</h2>
        
        {% for commande in commandes %}
        <div class="order-info">
            <div class="order-info-item">
                <div class="order-info-label">Référence</div>
                <div class="order-info-value">{{ commande.reference }}</div>
            </div>
            <div class="order-info-item">
                <div class="order-info-label">Statut</div>
                <div class="order-info-value" style="color: #FF9800;">⏳ {{ commande.status|capitalize }}</div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endif %}
    
    <a href="{{ path('app_home') }}" class="btn-home">
        Retour à l'accueil
    </a>
</div>

{% if paymentSuccess %}
{# Animation confetti pour le succès #}
<script>
// Simple confetti effect
function createConfetti() {
    const colors = ['#9b59b6', '#3498db', '#e74c3c', '#f39c12', '#2ecc71'];
    const confettiContainer = document.createElement('div');
    confettiContainer.className = 'confetti';
    document.body.appendChild(confettiContainer);
    
    for (let i = 0; i < 50; i++) {
        const confetti = document.createElement('div');
        confetti.style.cssText = `
            position: absolute;
            width: 10px;
            height: 10px;
            background: ${colors[Math.floor(Math.random() * colors.length)]};
            left: ${Math.random() * 100}%;
            top: -10px;
            opacity: ${Math.random() + 0.5};
            transform: rotate(${Math.random() * 360}deg);
            animation: fall ${Math.random() * 3 + 2}s linear forwards;
        `;
        confettiContainer.appendChild(confetti);
    }
    
    // Add animation keyframes
    const style = document.createElement('style');
    style.textContent = `
        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }
    `;
    document.head.appendChild(style);
    
    // Remove after animation
    setTimeout(() => confettiContainer.remove(), 5000);
}

// Run on page load
createConfetti();
</script>
{% endif %}
{% endblock %}