{% extends 'sites/template-default/base.html.twig' %}

{% block title %}Mon panier | {{ site.name }}{% endblock %}

{% block body %}
<div class="cart-page">
    <div class="container">
        <div class="cart-header">
            <h1><i class="fas fa-shopping-cart"></i> Mon panier</h1>
        </div>

        <div class="cart-content" id="cart-content">
            {# Le contenu sera généré par JavaScript #}
            <div class="cart-loading">
                <i class="fas fa-spinner fa-spin fa-3x"></i>
                <p>Chargement de votre panier...</p>
            </div>
        </div>
    </div>
</div>

<style>
.cart-page {
    min-height: 60vh;
    padding: 4rem 0;
    background: #f8f9fa;
}

.cart-header {
    text-align: center;
    margin-bottom: 3rem;
}

.cart-header h1 {
    font-size: 2.5rem;
    color: #1e293b;
    font-weight: 700;
}

.cart-header h1 i {
    color: var(--site-primary-color, #10b981);
    margin-right: 1rem;
}

.cart-content {
    max-width: 1000px;
    margin: 0 auto;
}

.cart-loading {
    text-align: center;
    padding: 4rem 2rem;
    color: #64748b;
}

.cart-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cart-empty i {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

.cart-empty h2 {
    font-size: 1.8rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.cart-empty p {
    color: #94a3b8;
    margin-bottom: 2rem;
}

.cart-items {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.cart-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-image {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
    background: #f1f5f9;
}

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cart-item-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.cart-item-price {
    font-size: 1.1rem;
    color: var(--site-primary-color, #10b981);
    font-weight: 600;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.25rem;
}

.cart-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--site-primary-color, #10b981);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cart-qty-btn:hover {
    background: var(--site-primary-color-dark, #059669);
}

.cart-qty-value {
    min-width: 40px;
    text-align: center;
    font-weight: 600;
}

.cart-item-remove {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-item-remove:hover {
    background: #dc2626;
}

.cart-summary {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.cart-summary-row.total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--site-primary-color, #10b981);
    padding-top: 1rem;
    border-top: 2px solid #e2e8f0;
    margin-top: 1rem;
}

.cart-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-continue {
    flex: 1;
    padding: 1rem 2rem;
    background: #e2e8f0;
    color: #1e293b;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.btn-continue:hover {
    background: #cbd5e1;
}

.btn-checkout {
    flex: 2;
    padding: 1rem 2rem;
    background: var(--site-primary-color, #10b981);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-checkout:hover {
    background: var(--site-primary-color-dark, #059669);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

@media (max-width: 768px) {
    .cart-item {
        flex-direction: column;
    }

    .cart-actions {
        flex-direction: column;
    }

    .cart-item-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    loadCart();
});

function loadCart() {
    const cartContent = document.getElementById('cart-content');
    const cart = JSON.parse(localStorage.getItem('izibrick_cart') || '[]');

    if (cart.length === 0) {
        cartContent.innerHTML = `
            <div class="cart-empty">
                <i class="fas fa-shopping-cart"></i>
                <h2>Votre panier est vide</h2>
                <p>Découvrez nos produits et ajoutez-les à votre panier</p>
                <a href="javascript:history.back()" class="btn-checkout">
                    <i class="fas fa-arrow-left"></i> Continuer mes achats
                </a>
            </div>
        `;
        return;
    }

    let total = 0;
    let itemsHtml = '';

    cart.forEach((item, index) => {
        const itemTotal = item.price * item.quantity;
        total += itemTotal;

        itemsHtml += `
            <div class="cart-item" data-index="${index}">
                <div class="cart-item-image">
                    <i class="fas fa-box fa-3x" style="color: #cbd5e1;"></i>
                </div>
                <div class="cart-item-details">
                    <h3 class="cart-item-name">${item.name}</h3>
                    <div class="cart-item-price">${item.price.toFixed(2)} €</div>
                </div>
                <div class="cart-item-actions">
                    <div class="cart-item-quantity">
                        <button class="cart-qty-btn" onclick="updateQuantity(${index}, ${item.quantity - 1})">
                            <i class="fas fa-minus"></i>
                        </button>
                        <span class="cart-qty-value">${item.quantity}</span>
                        <button class="cart-qty-btn" onclick="updateQuantity(${index}, ${item.quantity + 1})">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <button class="cart-item-remove" onclick="removeItem(${index})">
                        <i class="fas fa-trash"></i> Supprimer
                    </button>
                </div>
            </div>
        `;
    });

    cartContent.innerHTML = `
        <div class="cart-items">
            ${itemsHtml}
        </div>
        <div class="cart-summary">
            <div class="cart-summary-row">
                <span>Sous-total</span>
                <span>${total.toFixed(2)} €</span>
            </div>
            <div class="cart-summary-row">
                <span>Livraison</span>
                <span>Calculée à l'étape suivante</span>
            </div>
            <div class="cart-summary-row total">
                <span>Total</span>
                <span>${total.toFixed(2)} €</span>
            </div>
            <div class="cart-actions">
                <a href="javascript:history.back()" class="btn-continue">
                    <i class="fas fa-arrow-left"></i> Continuer mes achats
                </a>
                <a href="{{ path('shop_checkout', {'siteName': site.internalName}) }}" class="btn-checkout">
                    Passer la commande <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    `;
}

function updateQuantity(index, newQuantity) {
    if (newQuantity < 1) {
        removeItem(index);
        return;
    }

    let cart = JSON.parse(localStorage.getItem('izibrick_cart') || '[]');
    if (cart[index]) {
        cart[index].quantity = newQuantity;
        localStorage.setItem('izibrick_cart', JSON.stringify(cart));
        loadCart();
    }
}

function removeItem(index) {
    let cart = JSON.parse(localStorage.getItem('izibrick_cart') || '[]');
    cart.splice(index, 1);
    localStorage.setItem('izibrick_cart', JSON.stringify(cart));
    loadCart();
}
</script>
{% endblock %}