{# 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">{{ cartData.total|number_format(2, ',', ' ') }} €</span>
                </div>
                
                <div class="total-details">
                    TVA (20%) : {{ (cartData.total * 0.20)|number_format(2, ',', ' ') }} €<br>
                    <strong>Total TTC : {{ (cartData.total * 1.20)|number_format(2, ',', ' ') }} €</strong>
                </div>

                {# ============================================
                   CHOIX DU MODE DE PAIEMENT
                   ============================================ #}
                <form action="{{ path('app_cart_checkout') }}" method="POST" id="checkout-form">
                    <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>

                    <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 des options de paiement
document.querySelectorAll('.payment-option').forEach(option => {
    option.addEventListener('click', function() {
        // Retirer la classe selected de toutes les options
        document.querySelectorAll('.payment-option').forEach(opt => {
            opt.classList.remove('selected');
        });
        // Ajouter la classe selected à l'option cliquée
        this.classList.add('selected');
        // Cocher le radio button
        this.querySelector('input[type="radio"]').checked = true;
    });
});
</script>
{% endblock %}