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

{% block title %}Panier - Village de Menotey{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.cart-item {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.cart-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.cart-summary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 15px;
    padding: 2rem;
    position: sticky;
    top: 100px;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity-btn {
    width: 35px;
    height: 35px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quantity-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.empty-cart {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-light);
}

.empty-cart i {
    font-size: 4rem;
    margin-bottom: 2rem;
    opacity: 0.5;
}

.loading-cart {
    text-align: center;
    padding: 4rem 2rem;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}
</style>
{% endblock %}

{% block body %}
<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="fade-in">Mon Panier</h1>
                <p class="lead fade-in">Vérifiez votre commande avant de finaliser</p>
            </div>
        </div>
    </div>
</section>

<!-- Cart Section -->
<section class="section">
    <div class="container">
        <!-- Loading State -->
        <div id="cart-loading" class="loading-cart">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Chargement...</span>
            </div>
            <p class="mt-3">Chargement de votre panier...</p>
        </div>
        
        <!-- Empty Cart State -->
        <div id="cart-empty" class="empty-cart" style="display: none;">
            <i class="fas fa-shopping-cart"></i>
            <h3>Votre panier est vide</h3>
            <p>Découvrez nos délicieuses pizzas artisanales</p>
            <a href="{{ path('app_pizza_list') }}" class="btn btn-primary btn-lg mt-3">
                <i class="fas fa-pizza-slice"></i> Voir nos pizzas
            </a>
        </div>
        
        <!-- Cart Content -->
        <div id="cart-content" class="row" style="display: none;">
            <!-- Cart Items -->
            <div class="col-lg-8">
                <h3 class="mb-4">Articles dans votre panier</h3>
                <div id="cart-items">
                    <!-- Items will be dynamically loaded here -->
                </div>
                
                <div class="d-flex justify-content-between mt-4">
                    <a href="{{ path('app_pizza_list') }}" class="btn btn-outline-primary">
                        <i class="fas fa-arrow-left"></i> Continuer les achats
                    </a>
                    <button class="btn btn-outline-secondary" onclick="clearCart()">
                        <i class="fas fa-trash"></i> Vider le panier
                    </button>
                </div>
            </div>
            
            <!-- Cart Summary -->
            <div class="col-lg-4 mt-4">
                <div class="cart-summary">
                    <h4 class="mb-4">Résumé de commande</h4>
                    
                    <div class="d-flex justify-content-between mb-3">
                        <span>Sous-total</span>
                        <span class="fw-bold" id="subtotal">0,00€</span>
                    </div>
                    
                    <div class="d-flex justify-content-between mb-3">
                        <span>Frais de service</span>
                        <span>Gratuit</span>
                    </div>
                    
                    <hr class="my-3" style="border-color: rgba(255,255,255,0.3);">
                    
                    <div class="d-flex justify-content-between mb-4">
                        <span class="fs-5 fw-bold">Total</span>
                        <span class="fs-5 fw-bold" id="total">0,00€</span>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <a href="{{ path('app_pizza_order') }}" class="btn btn-light btn-lg">
                            <i class="fas fa-credit-card"></i> Commander
                        </a>
                        
                        <small class="text-center mt-2" style="opacity: 0.8;">
                            <i class="fas fa-lock"></i> Paiement sécurisé
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Info Section -->
<section class="section bg-light">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 text-center border-0">
                    <div class="card-body">
                        <i class="fas fa-clock fa-3x text-primary mb-3"></i>
                        <h5>Préparation rapide</h5>
                        <p>Vos pizzas sont préparées fraîches à la commande</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 text-center border-0">
                    <div class="card-body">
                        <i class="fas fa-shield-alt fa-3x text-success mb-3"></i>
                        <h5>Paiement sécurisé</h5>
                        <p>Transactions protégées par Stripe</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 text-center border-0">
                    <div class="card-body">
                        <i class="fas fa-phone fa-3x text-warning mb-3"></i>
                        <h5>Support disponible</h5>
                        <p>Contactez-nous pour toute question</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    loadCartFromLocalStorage();
});

function loadCartFromLocalStorage() {
    const cartData = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
    const cartLoading = document.getElementById('cart-loading');
    const cartEmpty = document.getElementById('cart-empty');
    const cartContent = document.getElementById('cart-content');
    
    // Masquer le loading
    cartLoading.style.display = 'none';
    
    if (Object.keys(cartData).length === 0) {
        cartEmpty.style.display = 'block';
        cartContent.style.display = 'none';
        return;
    }
    
    // Afficher le contenu du panier
    cartEmpty.style.display = 'none';
    cartContent.style.display = 'block';
    
    // Générer le HTML des items
    let itemsHtml = '';
    let total = 0;
    
    Object.values(cartData).forEach((item, index) => {
        const itemTotal = item.price * item.quantity;
        total += itemTotal;
        
        itemsHtml += `
            <div class="cart-item">
                <div class="row align-items-center p-3">
                    <div class="col-md-3">
                        <img src="https://placehold.co/150x100/8fbc8f/ffffff?text=${encodeURIComponent(item.name)}" 
                             class="img-fluid rounded" 
                             alt="${item.name}">
                    </div>
                    
                    <div class="col-md-4">
                        <h5>${item.name}</h5>
                        <p class="text-muted mb-1">Délicieuse pizza artisanale</p>
                    </div>
                    
                    <div class="col-md-2">
                        <div class="quantity-controls">
                            <button class="quantity-btn" onclick="updateQuantity(${item.id}, -1)">
                                <i class="fas fa-minus"></i>
                            </button>
                            <span class="mx-2 fw-bold">${item.quantity}</span>
                            <button class="quantity-btn" onclick="updateQuantity(${item.id}, 1)">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="col-md-2">
                        <div class="text-center">
                            <p class="mb-1 fw-bold text-primary fs-5">${itemTotal.toFixed(2).replace('.', ',')}€</p>
                            <small class="text-muted">${item.price.toFixed(2)}€ x ${item.quantity}</small>
                        </div>
                    </div>
                    
                    <div class="col-md-1">
                        <button class="btn btn-outline-danger btn-sm" 
                                onclick="removeFromCart(${item.id})" 
                                title="Supprimer">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
    });
    
    document.getElementById('cart-items').innerHTML = itemsHtml;
    
    // Mettre à jour les totaux
    document.getElementById('subtotal').textContent = total.toFixed(2).replace('.', ',') + '€';
    document.getElementById('total').textContent = total.toFixed(2).replace('.', ',') + '€';
}

function updateQuantity(pizzaId, change) {
    let cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
    
    if (cart[pizzaId]) {
        cart[pizzaId].quantity += change;
        
        if (cart[pizzaId].quantity <= 0) {
            delete cart[pizzaId];
        }
        
        localStorage.setItem('pizza-cart', JSON.stringify(cart));
        loadCartFromLocalStorage();
        updateCartCount();
    }
}

function removeFromCart(pizzaId) {
    if (confirm('Êtes-vous sûr de vouloir supprimer cet article ?')) {
        let cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
        delete cart[pizzaId];
        localStorage.setItem('pizza-cart', JSON.stringify(cart));
        loadCartFromLocalStorage();
        updateCartCount();
    }
}

function clearCart() {
    if (confirm('Êtes-vous sûr de vouloir vider votre panier ?')) {
        localStorage.removeItem('pizza-cart');
        loadCartFromLocalStorage();
        updateCartCount();
    }
}

function updateCartCount() {
    const cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
    const totalItems = Object.values(cart).reduce((sum, item) => sum + item.quantity, 0);
    const badge = document.querySelector('.cart-badge');
    if (badge) {
        badge.textContent = totalItems;
        badge.style.display = totalItems > 0 ? 'flex' : 'none';
    }
}
</script>
{% endblock %}