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

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

{% block title %}Mon Panier{% endblock %}

{% block body %}
<style>
    .cart-container {
        max-width: 1000px;
        margin: 40px auto;
        padding: 0 20px;
    }
    
    .cart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }
    
    .cart-header h1 {
        font-size: 28px;
        font-weight: 800;
        color: #1d1d1f;
        margin: 0;
    }
    
    .cart-count {
        background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
        color: white;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
    }
    
    .cart-empty {
        text-align: center;
        padding: 80px 20px;
        background: #f8f9fa;
        border-radius: 20px;
    }
    
    .cart-empty-icon {
        font-size: 80px;
        margin-bottom: 20px;
    }
    
    .cart-empty h2 {
        font-size: 24px;
        font-weight: 700;
        color: #1d1d1f;
        margin-bottom: 12px;
    }
    
    .cart-empty p {
        color: #86868b;
        margin-bottom: 30px;
    }
    
    .cart-empty a {
        display: inline-block;
        background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
        color: white;
        padding: 14px 32px;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s;
    }
    
    .cart-empty a:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(155, 89, 182, 0.4);
    }
    
    .cart-item {
        background: white;
        border-radius: 16px;
        margin-bottom: 16px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .cart-item:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    }
    .cart-item-header {
        padding: 20px 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .cart-item-header:hover {
        background: #fafafa;
    }
    .cart-item-icon {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        flex-shrink: 0;
    }
    .cart-item-info {
        flex: 1;
        min-width: 0;
    }
    .cart-item-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 4px;
    }
    .cart-item-title h3 {
        font-size: 17px;
        font-weight: 700;
        color: #1d1d1f;
        margin: 0;
    }
    .cart-item-subtitle {
        font-size: 14px;
        color: #86868b;
    }
    .badge-new {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .cart-item-price {
        font-size: 22px;
        font-weight: 800;
        color: #1d1d1f;
        margin-right: 12px;
    }
    .cart-item-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .btn-edit {
        width: 38px;
        height: 38px;
        background: #e8f4fd;
        border: none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #1976d2;
        font-size: 16px;
        transition: all 0.2s;
        cursor: pointer;
    }
    .btn-edit:hover {
        background: #bbdefb;
        transform: scale(1.05);
    }
    .btn-delete {
        width: 38px;
        height: 38px;
        background: #fff0f0;
        border: none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #e53935;
        font-size: 16px;
        transition: all 0.2s;
        cursor: pointer;
    }
    .btn-delete:hover {
        background: #ffdddd;
        transform: scale(1.05);
    }
    .btn-toggle {
        width: 38px;
        height: 38px;
        background: #f5f5f7;
        border: none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: all 0.3s;
        cursor: pointer;
        color: #666;
    }
    .btn-toggle:hover {
        background: #e5e5e5;
    }
    .btn-toggle.active {
        transform: rotate(180deg);
        background: #e8f4fd;
        color: #1976d2;
    }
    
    .cart-item-details {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: #fafafa;
    }
    .cart-item-details.open {
        max-height: 800px;
    }
    .cart-item-details-inner {
        padding: 24px;
        border-top: 1px solid #eee;
    }
    
    .fields-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
        margin-bottom: 20px;
    }
    .field-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
        background: white;
        border-radius: 10px;
    }
    .field-icon {
        font-size: 20px;
    }
    .field-content {
        flex: 1;
    }
    .field-label {
        font-size: 12px;
        color: #86868b;
        margin-bottom: 2px;
    }
    .field-value {
        font-size: 14px;
        color: #1d1d1f;
        word-break: break-word;
    }
    
    .fields-section {
        margin-top: 20px;
    }
    .fields-section-title {
        font-size: 14px;
        font-weight: 600;
        color: #1d1d1f;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .btn-edit-large {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: white;
        border: 2px solid #1976d2;
        color: #1976d2;
        padding: 10px 20px;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s;
        margin-top: 16px;
    }
    .btn-edit-large:hover {
        background: #1976d2;
        color: white;
    }
    
    /* Récapitulatif */
    .cart-summary {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .cart-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .btn-continue {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        background: white;
        border: 2px solid #e5e5e5;
        border-radius: 10px;
        color: #1d1d1f;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s;
    }
    .btn-continue:hover {
        border-color: #9b59b6;
        color: #9b59b6;
    }
    
    .btn-clear {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        background: #fff0f0;
        border: none;
        border-radius: 10px;
        color: #e53935;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s;
    }
    .btn-clear:hover {
        background: #ffdddd;
    }
    
    .cart-total-box {
        background: white;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        min-width: 320px;
    }
    
    .total-line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    .total-label {
        font-size: 16px;
        color: #86868b;
    }
    .total-amount {
        font-size: 24px;
        font-weight: 800;
        color: #1d1d1f;
    }
    
    .total-details {
        font-size: 14px;
        color: #86868b;
        padding: 12px 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin-bottom: 16px;
    }
    
    /* ============================================
       SECTION CHOIX MODE DE PAIEMENT
       ============================================ */
    .payment-options {
        margin: 20px 0;
        padding-top: 16px;
        border-top: 1px solid #eee;
    }
    
    .payment-options-title {
        font-size: 14px;
        font-weight: 600;
        color: #1d1d1f;
        margin-bottom: 12px;
    }
    
    .payment-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border: 2px solid #e5e5e5;
        border-radius: 10px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: all 0.2s;
        background: white;
    }
    
    .payment-option:hover {
        border-color: #9b59b6;
        background: #faf5fc;
    }
    
    .payment-option.selected {
        border-color: #9b59b6;
        background: linear-gradient(135deg, rgba(155, 89, 182, 0.05) 0%, rgba(195, 155, 211, 0.1) 100%);
    }
    
    .payment-option input[type="radio"] {
        display: none;
    }
    
    .payment-radio {
        width: 20px;
        height: 20px;
        border: 2px solid #ccc;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s;
    }
    
    .payment-option.selected .payment-radio {
        border-color: #9b59b6;
    }
    
    .payment-radio-inner {
        width: 10px;
        height: 10px;
        background: #9b59b6;
        border-radius: 50%;
        transform: scale(0);
        transition: transform 0.2s;
    }
    
    .payment-option.selected .payment-radio-inner {
        transform: scale(1);
    }
    
    .payment-info {
        flex: 1;
    }
    
    .payment-label {
        font-weight: 600;
        color: #1d1d1f;
        font-size: 15px;
    }
    
    .payment-desc {
        font-size: 12px;
        color: #86868b;
        margin-top: 2px;
    }
    
    .payment-badge {
        background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);
        color: white;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
    }
    
    .klarna-logo {
        height: 20px;
        margin-left: auto;
    }
    
    .payment-installment {
        text-align: right;
        font-size: 13px;
        color: #1d1d1f;
        font-weight: 500;
    }
    
    .btn-checkout {
        display: block;
        width: 100%;
        padding: 16px 24px;
        background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
        border: none;
        border-radius: 12px;
        color: white;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        transition: all 0.3s;
        cursor: pointer;
    }
    .btn-checkout:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(155, 89, 182, 0.4);
    }
    
    .cart-info {
        margin-top: 30px;
        padding: 20px;
        background: #f0f9ff;
        border-radius: 12px;
        font-size: 14px;
        color: #0369a1;
        line-height: 1.6;
    }

    @media (max-width: 768px) {
        .cart-summary {
            flex-direction: column;
        }
        .cart-total-box {
            width: 100%;
            min-width: auto;
        }
    }
</style>

<div class="cart-container">
    <div class="cart-header">
        <h1>🛒 Mon Panier</h1>
        {% if cartData.items is not empty %}
            <span class="cart-count">{{ cartData.count }} article{% if cartData.count > 1 %}s{% endif %}</span>
        {% endif %}
    </div>

    {% for message in app.flashes('success') %}
        <div style="background: #d4edda; color: #155724; padding: 12px 20px; border-radius: 8px; margin-bottom: 20px;">
            ✅ {{ message }}
        </div>
    {% endfor %}

    {% for message in app.flashes('warning') %}
        <div style="background: #fff3cd; color: #856404; padding: 12px 20px; border-radius: 8px; margin-bottom: 20px;">
            ⚠️ {{ message }}
        </div>
    {% endfor %}

    {% if app.request.query.get('cancelled') %}
        <div style="background: #fff3cd; color: #856404; padding: 12px 20px; border-radius: 8px; margin-bottom: 20px;">
            ⚠️ Paiement annulé. Votre panier a été conservé.
        </div>
    {% endif %}

    {% if cartData.items is empty %}
        <div class="cart-empty">
            <div class="cart-empty-icon">🛒</div>
            <h2>Votre panier est vide</h2>
            <p>Commencez par créer votre carte de visite numérique !</p>
            <a href="{{ path('app_home') }}">Découvrir nos offres</a>
        </div>
    {% else %}
        {# Liste des cartes #}
        <div class="cart-items">
            {% for item in cartData.items %}
                {% set card = item.full_data %}
                <div class="cart-item">
                    <div class="cart-item-header" onclick="toggleDetails('{{ item.id }}')">
                        <div class="cart-item-icon">
                            {% if item.type == 'premium' %}👑
                            {% elseif item.type == 'force' or item.type == 'forcevente' %}💪
                            {% elseif item.type starts with 'multi' %}🎴
                            {% else %}📇{% endif %}
                        </div>
                        
                        <div class="cart-item-info">
                            <div class="cart-item-title">
                                <h3>{{ item.prenom }} {{ item.nom }}</h3>
                                <span class="badge-new">{{ item.type|upper }}</span>
                            </div>
                            <div class="cart-item-subtitle">
                                {% if item.fonction %}{{ item.fonction }}{% endif %}
                                {% if item.fonction and item.entreprise %} • {% endif %}
                                {% if item.entreprise %}{{ item.entreprise }}{% endif %}
                                {% if not item.fonction and not item.entreprise %}Carte de visite numérique{% endif %}
                            </div>
                        </div>
                        
                        <div class="cart-item-price">{{ item.price|number_format(2, ',', ' ') }} €</div>
                        
                        <div class="cart-item-actions">
                            <a href="{{ path('app_cart_edit', {id: item.id}) }}" class="btn-edit" title="Modifier" onclick="event.stopPropagation()">✏️</a>
                            <a href="{{ path('app_cart_remove', {id: item.id}) }}" class="btn-delete" title="Supprimer" onclick="event.stopPropagation(); return confirm('Supprimer cette carte ?')">🗑️</a>
                            <button class="btn-toggle" id="toggle-{{ item.id }}">▼</button>
                        </div>
                    </div>
                    
                    {# Détails dépliables #}
                    <div class="cart-item-details" id="details-{{ item.id }}">
                        <div class="cart-item-details-inner">
                            <div class="fields-grid">
                                {% if card.email|default %}
                                <div class="field-item">
                                    <div class="field-icon">📧</div>
                                    <div class="field-content">
                                        <div class="field-label">Email</div>
                                        <div class="field-value">{{ card.email }}</div>
                                    </div>
                                </div>
                                {% endif %}
                                
                                {% if card.mobile|default or card.fixe|default %}
                                <div class="field-item">
                                    <div class="field-icon">📱</div>
                                    <div class="field-content">
                                        <div class="field-label">Téléphone</div>
                                        <div class="field-value">
                                            {{ card.mobile|default(card.fixe) }}
                                            {% if card.mobile|default and card.fixe|default %} / {{ card.fixe }}{% endif %}
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                                
                                {% if card.site_web|default %}
                                <div class="field-item">
                                    <div class="field-icon">🌐</div>
                                    <div class="field-content">
                                        <div class="field-label">Site web</div>
                                        <div class="field-value">{{ card.site_web|default('') }}</div>
                                    </div>
                                </div>
                                {% endif %}
                                
                                {% if card.adresse|default %}
                                <div class="field-item">
                                    <div class="field-icon">📍</div>
                                    <div class="field-content">
                                        <div class="field-label">Adresse</div>
                                        <div class="field-value">{{ card.adresse }}</div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                            
                            {% if card.linkedin|default or card.facebook|default or card.insta|default or card.youtube|default or card.tiktok|default or card.x|default %}
                            <div class="fields-section">
                                <div class="fields-section-title">
                                    <span>🔗</span> Réseaux sociaux
                                </div>
                                <div class="fields-grid">
                                    {% if card.linkedin|default %}
                                    <div class="field-item">
                                        <div class="field-icon">💼</div>
                                        <div class="field-content">
                                            <div class="field-label">LinkedIn</div>
                                            <div class="field-value">{{ card.linkedin }}</div>
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% if card.insta|default %}
                                    <div class="field-item">
                                        <div class="field-icon">📷</div>
                                        <div class="field-content">
                                            <div class="field-label">Instagram</div>
                                            <div class="field-value">{{ card.insta }}</div>
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% if card.facebook|default %}
                                    <div class="field-item">
                                        <div class="field-icon">📘</div>
                                        <div class="field-content">
                                            <div class="field-label">Facebook</div>
                                            <div class="field-value">{{ card.facebook }}</div>
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% if card.youtube|default %}
                                    <div class="field-item">
                                        <div class="field-icon">▶️</div>
                                        <div class="field-content">
                                            <div class="field-label">YouTube</div>
                                            <div class="field-value">{{ card.youtube }}</div>
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}
                            
                            <a href="{{ path('app_cart_edit', {id: item.id}) }}" class="btn-edit-large">
                                ✏️ Modifier cette carte
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        {# Récapitulatif et actions #}
        <div class="cart-summary">
            <div class="cart-actions">
                <a href="{{ path('app_home') }}" class="btn-continue">
                    ← Continuer mes achats
                </a>
                <a href="{{ path('app_cart_clear') }}" class="btn-clear" onclick="return confirm('Êtes-vous sûr de vouloir vider votre panier ?')">
                    🗑️ Vider le panier
                </a>
            </div>

            <div class="cart-total-box">
                <div class="total-line">
                    <span class="total-label">Total HT</span>
                    <span class="total-amount" id="total-ht">{{ cartData.total|number_format(2, ',', ' ') }} €</span>
                </div>

                {# ── Bloc code promo ── #}
                <div style="margin: 14px 0; padding: 14px; background: #f8f7ff;
                            border-radius: 12px; border: 1px solid #e8e4f3;">
                    <div style="font-size: 13px; font-weight: 600; color: #1d1d1f; margin-bottom: 10px;">
                        🏷️ Code promo
                    </div>
                    <div style="display: flex; gap: 8px;" id="promo-input-row">
                        <input type="text" id="promo-code-input"
                               placeholder="AMB101, VIP101..."
                               style="flex:1; padding: 10px 14px; border: 1.5px solid #e0ddf5;
                                      border-radius: 10px; font-size: 14px; font-family: monospace;
                                      text-transform: uppercase; letter-spacing: .05em; outline: none;"
                               oninput="this.value=this.value.toUpperCase()"
                               onfocus="this.style.borderColor='#9b59b6'"
                               onblur="this.style.borderColor='#e0ddf5'"
                               onkeydown="if(event.key==='Enter'){event.preventDefault();appliquerCode()}">
                        <button type="button" onclick="appliquerCode()"
                                style="padding: 10px 18px; background: linear-gradient(135deg,#9b59b6,#8e44ad);
                                       color: white; border: none; border-radius: 10px; font-size: 13px;
                                       font-weight: 600; cursor: pointer; white-space: nowrap;">
                            Appliquer
                        </button>
                    </div>
                    <div id="promo-message" style="display:none; margin-top: 8px; font-size: 13px;"></div>
                    <div id="promo-applied" style="display:none; margin-top: 8px;">
                        <div style="display:flex; justify-content:space-between; align-items:center;
                                    background:white; border-radius:8px; padding: 8px 12px;
                                    border: 1px solid #d4edda;">
                            <div>
                                <span style="font-family:monospace; font-weight:700; color:#1a7a4a;" id="promo-code-display"></span>
                                <span style="font-size:12px; color:#2f9e44; margin-left:8px;" id="promo-remise-display"></span>
                            </div>
                            <button type="button" onclick="supprimerCode()"
                                    style="background:none;border:none;color:#dc2626;font-size:18px;cursor:pointer;line-height:1;">✕</button>
                        </div>
                    </div>
                    <input type="hidden" id="promo-code-hidden" name="promo_code" value="">
                    <input type="hidden" id="promo-remise-hidden" name="promo_remise" value="0">
                </div>

                {# Ligne remise — masquée par défaut #}
                <div id="remise-line" style="display:none; margin-bottom: 8px;">
                    <div style="display:flex; justify-content:space-between; font-size:14px; color:#2f9e44; font-weight:600;">
                        <span>🎉 Remise code promo</span>
                        <span id="remise-montant">- 0,00 €</span>
                    </div>
                </div>

                <div class="total-line" style="border-top: 1px solid #f0f0f0; padding-top: 10px; margin-top: 4px;">
                    <span class="total-label">Total HT après remise</span>
                    <span class="total-amount" id="total-ht-remise" style="color:#9b59b6;">{{ cartData.total|number_format(2, ',', ' ') }} €</span>
                </div>

                <div class="total-details" id="total-details">
                    TVA (20%) : <span id="tva-montant">{{ (cartData.total * 0.20)|number_format(2, ',', ' ') }}</span> €<br>
                    <strong>Total TTC : <span id="total-ttc">{{ (cartData.total * 1.20)|number_format(2, ',', ' ') }}</span> €</strong>
                </div>

                {# ============================================
                   CHOIX DU MODE DE PAIEMENT
                   ============================================ #}
                <form action="{{ path('app_cart_checkout') }}" method="POST" id="checkout-form">
                    <input type="hidden" name="promo_code" id="form-promo-code" value="">
                    <input type="hidden" name="promo_remise" id="form-promo-remise" value="0">
                    <div class="payment-options">
                        <div class="payment-options-title">💳 Choisissez votre mode de paiement</div>
                        
                        {# Paiement comptant #}
                        <label class="payment-option selected" data-payment="card">
                            <input type="radio" name="payment_mode" value="card" checked>
                            <div class="payment-radio">
                                <div class="payment-radio-inner"></div>
                            </div>
                            <div class="payment-info">
                                <div class="payment-label">Payer en 1x</div>
                                <div class="payment-desc">Carte bancaire</div>
                            </div>
                            <div class="payment-installment">
                                {{ (cartData.total * 1.20)|number_format(2, ',', ' ') }} €
                            </div>
                        </label>
                        
                        {# Paiement en 3x #}
                        <label class="payment-option" data-payment="klarna_3">
                            <input type="radio" name="payment_mode" value="klarna_3">
                            <div class="payment-radio">
                                <div class="payment-radio-inner"></div>
                            </div>
                            <div class="payment-info">
                                <div class="payment-label">Payer en 3x sans frais</div>
                                <div class="payment-desc">3 mensualités avec Klarna</div>
                            </div>
                            <span class="payment-badge">Sans frais</span>
                            <div class="payment-installment">
                                3 x {{ ((cartData.total * 1.20) / 3)|number_format(2, ',', ' ') }} €
                            </div>
                        </label>
                        
                        {# Paiement en 4x #}
                        <label class="payment-option" data-payment="klarna_4">
                            <input type="radio" name="payment_mode" value="klarna_4">
                            <div class="payment-radio">
                                <div class="payment-radio-inner"></div>
                            </div>
                            <div class="payment-info">
                                <div class="payment-label">Payer en 4x sans frais</div>
                                <div class="payment-desc">4 mensualités avec Klarna</div>
                            </div>
                            <span class="payment-badge">Sans frais</span>
                            <div class="payment-installment">
                                4 x {{ ((cartData.total * 1.20) / 4)|number_format(2, ',', ' ') }} €
                            </div>
                        </label>
                    </div>

                    {# OPT-IN MARKETING — RGPD : facultatif, jamais pré-coché #}
                    <div style="display:flex;align-items:flex-start;gap:10px;margin:16px 0;padding:14px;background:#f8f7ff;border-radius:10px;border:1px solid #e8e4f3">
                        <input
                            type="checkbox"
                            name="optin_marketing"
                            id="optin_marketing_checkout"
                            value="1"
                            style="width:16px;height:16px;margin-top:3px;accent-color:#667eea;flex-shrink:0;cursor:pointer"
                        >
                        <label for="optin_marketing_checkout" style="font-size:12px;color:#3a3a3c;line-height:1.5;cursor:pointer">
                            J'accepte de recevoir les actualités, conseils et offres NUM-ECARD par email.
                            <span style="display:block;color:#86868b;font-size:11px;margin-top:2px;">
                                Facultatif — vous pouvez vous désabonner à tout moment.
                            </span>
                        </label>
                    </div>

                    <button type="submit" class="btn-checkout">
                        🔒 Procéder au paiement →
                    </button>
                </form>
            </div>
        </div>

        <div class="cart-info">
            ℹ️ Les cartes seront créées et activées après validation de votre paiement<br>
            📧 Vous recevrez un email de confirmation avec les détails de votre commande
        </div>
    {% endif %}
</div>

<script>
function toggleDetails(itemId) {
    const details = document.getElementById('details-' + itemId);
    const toggle = document.getElementById('toggle-' + itemId);
    
    if (details.classList.contains('open')) {
        details.classList.remove('open');
        toggle.classList.remove('active');
    } else {
        details.classList.add('open');
        toggle.classList.add('active');
    }
}

// Gestion options de paiement
document.querySelectorAll('.payment-option').forEach(option => {
    option.addEventListener('click', function() {
        document.querySelectorAll('.payment-option').forEach(opt => opt.classList.remove('selected'));
        this.classList.add('selected');
        this.querySelector('input[type="radio"]').checked = true;
        updateInstallments();
    });
});

// ── Code promo ──────────────────────────────────────────────────────────────
const totalHTBrut = {{ cartData.total }};
let remisePourcentage = 0;

function appliquerCode() {
    const code = document.getElementById('promo-code-input').value.trim();
    if (!code) return;

    fetch('{{ path("app_cart_validate_promo") }}', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest'},
        body: JSON.stringify({code: code})
    })
    .then(r => r.json())
    .then(data => {
        const msg = document.getElementById('promo-message');
        if (data.valid) {
            remisePourcentage = data.remise;
            document.getElementById('promo-code-display').textContent = code;
            document.getElementById('promo-remise-display').textContent = '−' + data.remise + '% sur le HT';
            document.getElementById('promo-code-hidden').value = code;
            document.getElementById('promo-remise-hidden').value = data.remise;
            document.getElementById('form-promo-code').value = code;
            document.getElementById('form-promo-remise').value = data.remise;
            document.getElementById('promo-input-row').style.display = 'none';
            document.getElementById('promo-applied').style.display = 'block';
            msg.style.display = 'none';
            updateTotals();
        } else {
            msg.style.display = 'block';
            msg.style.color = '#dc2626';
            msg.textContent = '❌ ' + (data.message ?? 'Code invalide ou expiré.');
        }
    })
    .catch(() => {
        const msg = document.getElementById('promo-message');
        msg.style.display = 'block';
        msg.style.color = '#dc2626';
        msg.textContent = '❌ Erreur lors de la validation du code.';
    });
}

function supprimerCode() {
    remisePourcentage = 0;
    document.getElementById('promo-code-input').value = '';
    document.getElementById('promo-code-hidden').value = '';
    document.getElementById('promo-remise-hidden').value = '0';
    document.getElementById('form-promo-code').value = '';
    document.getElementById('form-promo-remise').value = '0';
    document.getElementById('promo-input-row').style.display = 'flex';
    document.getElementById('promo-applied').style.display = 'none';
    document.getElementById('promo-message').style.display = 'none';
    document.getElementById('remise-line').style.display = 'none';
    updateTotals();
}

function updateTotals() {
    const remiseMontant = totalHTBrut * remisePourcentage / 100;
    const htApresRemise = totalHTBrut - remiseMontant;
    const tva = htApresRemise * 0.20;
    const ttc = htApresRemise * 1.20;

    const fmt = v => v.toFixed(2).replace('.', ',');

    document.getElementById('total-ht-remise').textContent = fmt(htApresRemise) + ' €';
    document.getElementById('tva-montant').textContent = fmt(tva);
    document.getElementById('total-ttc').textContent = fmt(ttc);

    if (remisePourcentage > 0) {
        document.getElementById('remise-line').style.display = 'flex';
        document.getElementById('remise-montant').textContent = '− ' + fmt(remiseMontant) + ' €';
    } else {
        document.getElementById('remise-line').style.display = 'none';
    }
    updateInstallments(ttc);
}

function updateInstallments(ttc) {
    if (!ttc) {
        const remiseMontant = totalHTBrut * remisePourcentage / 100;
        ttc = (totalHTBrut - remiseMontant) * 1.20;
    }
    const fmt = v => v.toFixed(2).replace('.', ',');
    const els = document.querySelectorAll('.payment-installment');
    if (els[0]) els[0].textContent = fmt(ttc) + ' €';
    if (els[1]) els[1].textContent = '3 x ' + fmt(ttc / 3) + ' €';
    if (els[2]) els[2].textContent = '4 x ' + fmt(ttc / 4) + ' €';
}

</script>
{% endblock %}