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

{% block title %}Nos Pizzas - Village de Menotey{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .pizza-card {
        transition: all 0.3s ease;
        height: 100%;
    }
    
    .pizza-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }
    
    .pizza-image {
        height: 200px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .pizza-card:hover .pizza-image {
        transform: scale(1.05);
    }
    
    .price-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: var(--accent-color);
        color: white;
        padding: 8px 12px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 1.1rem;
    }
    
    .category-filter {
        margin-bottom: 2rem;
    }
    
    .filter-btn {
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        background: transparent;
        border-radius: 25px;
        padding: 8px 20px;
        margin: 5px;
        transition: all 0.3s ease;
    }
    
    .filter-btn.active,
    .filter-btn:hover {
        background: var(--primary-color);
        color: white;
    }
    
    .vegetarian-badge {
        background: #28a745;
        color: white;
        font-size: 0.8rem;
        padding: 2px 8px;
        border-radius: 10px;
    }
    
    .add-to-cart-btn {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border: none;
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        font-weight: 500;
        transition: all 0.3s ease;
        width: 100%;
    }
    
    .add-to-cart-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(44, 85, 48, 0.3);
        color: white;
    }
    
    .cart-notification {
        position: fixed;
        top: 100px;
        right: 20px;
        background: var(--primary-color);
        color: white;
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        transform: translateX(400px);
        transition: transform 0.3s ease;
        z-index: 1000;
    }
    
    .cart-notification.show {
        transform: translateX(0);
    }
    
    /* Icône flottante du panier */
    .floating-cart {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 1001;
        text-decoration: none;
    }
    
    .floating-cart:hover {
        transform: scale(1.1);
        box-shadow: 0 12px 35px rgba(0,0,0,0.4);
        color: white;
    }
    
    .floating-cart .cart-count {
        position: absolute;
        top: -5px;
        right: -5px;
        background: var(--accent-color);
        color: white;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        border: 2px solid white;
    }
    
    /* Mini panier déroulant */
    .cart-dropdown {
        position: fixed;
        bottom: 110px;
        right: 30px;
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        min-width: 320px;
        max-height: 400px;
        overflow-y: auto;
        transform: scale(0) translateY(20px);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 1000;
        border: 1px solid #eee;
    }
    
    .cart-dropdown.show {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    
    .cart-dropdown-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 15px 20px;
        border-radius: 15px 15px 0 0;
        font-weight: bold;
    }
    
    .cart-dropdown-item {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s ease;
    }
    
    .cart-dropdown-item:hover {
        background: #f8f9fa;
    }
    
    .cart-dropdown-item:last-child {
        border-bottom: none;
    }
    
    .cart-dropdown-image {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        object-fit: cover;
        margin-right: 12px;
    }
    
    .cart-dropdown-info {
        flex: 1;
    }
    
    .cart-dropdown-name {
        font-weight: 600;
        margin-bottom: 4px;
        font-size: 14px;
    }
    
    .cart-dropdown-details {
        font-size: 12px;
        color: #666;
    }
    
    .cart-dropdown-price {
        font-weight: bold;
        color: var(--primary-color);
        font-size: 14px;
    }
    
    .cart-dropdown-footer {
        padding: 15px 20px;
        background: #f8f9fa;
        border-radius: 0 0 15px 15px;
    }
    
    .cart-dropdown-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        font-weight: bold;
        font-size: 16px;
    }
    
    .cart-dropdown-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .btn-cart-view {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        text-align: center;
        font-size: 13px;
        transition: all 0.2s ease;
    }
    
    .btn-cart-view:hover {
        background: var(--secondary-color);
        color: white;
    }
    
    .btn-cart-order {
        background: var(--accent-color);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        text-align: center;
        font-size: 13px;
        transition: all 0.2s ease;
    }
    
    .btn-cart-order:hover {
        background: #e65100;
        color: white;
    }
    
    /* Animation pour les cartes pizza quand ajoutées */
    .pizza-card.added {
        animation: cardPulse 0.6s ease;
        border: 2px solid var(--accent-color);
    }
    
    @keyframes cardPulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    /* Badge "Ajouté" sur les cartes */
    .added-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: var(--accent-color);
        color: white;
        padding: 6px 12px;
        border-radius: 15px;
        font-size: 12px;
        font-weight: bold;
        animation: fadeInUp 0.5s ease;
    }
    
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Boutons de contrôle de quantité */
    .quantity-controls {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    
    .btn-remove {
        background: #dc3545;
        border: none;
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        flex: 1;
    }
    
    .btn-remove:hover {
        background: #c82333;
        color: white;
        transform: translateY(-1px);
    }
    
    .btn-add {
        background: #28a745;
        border: none;
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        flex: 1;
    }
    
    .btn-add:hover {
        background: #218838;
        color: white;
        transform: translateY(-1px);
    }
    
    .quantity-display {
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 8px 12px;
        text-align: center;
        font-weight: bold;
        min-width: 60px;
    }
    
    /* Bouton de suppression dans le dropdown */
    .remove-item-btn {
        background: #dc3545;
        color: white;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-left: 8px;
    }
    
    .remove-item-btn:hover {
        background: #c82333;
        transform: scale(1.1);
    }
</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">Nos Pizzas Artisanales</h1>
                <p class="lead fade-in">Découvrez nos délicieuses pizzas préparées avec des ingrédients frais et locaux</p>
                <a href="#pizzas" class="btn btn-light btn-lg">
                    <i class="fas fa-arrow-down"></i> Voir nos pizzas
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Filter Section -->
<section class="section bg-light">
    <div class="container">
        <div class="category-filter text-center">
            <h3 class="mb-4">Choisissez votre catégorie</h3>
            <button class="filter-btn active" data-category="all">Toutes</button>
            {% for category, pizza_names in categories %}
                <button class="filter-btn" data-category="{{ category|lower }}">{{ category }}</button>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Pizzas Section -->
<section id="pizzas" class="section">
    <div class="container">
        <div class="section-title">
            <h2>Notre carte</h2>
            <p>Des pizzas authentiques pour tous les goûts</p>
        </div>
        
        <div class="row g-4" id="pizza-container">
            {% set sample_pizzas = [
                {
                    'id': 1,
                    'name': 'Margherita',
                    'description': 'La classique ! Sauce tomate, mozzarella, basilic frais et huile d\'olive',
                    'price': 12.50,
                    'category': 'Classiques',
                    'vegetarian': true,
                    'image': 'margherita.jpg'
                },
                {
                    'id': 2,
                    'name': 'Regina',
                    'description': 'Sauce tomate, mozzarella, jambon, champignons',
                    'price': 14.50,
                    'category': 'Classiques',
                    'vegetarian': false,
                    'image': 'regina.jpg'
                },
                {
                    'id': 3,
                    'name': 'Quatre Fromages',
                    'description': 'Mozzarella, roquefort, chèvre, emmental',
                    'price': 16.00,
                    'category': 'Classiques',
                    'vegetarian': true,
                    'image': 'quatre-fromages.jpg'
                },
                {
                    'id': 4,
                    'name': 'Menotey Spécial',
                    'description': 'Sauce tomate, mozzarella, comté AOP, noix, miel, salade',
                    'price': 18.50,
                    'category': 'Spécialités',
                    'vegetarian': true,
                    'image': 'menotey-special.jpg'
                },
                {
                    'id': 5,
                    'name': 'Comtoise',
                    'description': 'Crème fraîche, mozzarella, lardons, pommes de terre, reblochon',
                    'price': 17.50,
                    'category': 'Spécialités',
                    'vegetarian': false,
                    'image': 'comtoise.jpg'
                },
                {
                    'id': 6,
                    'name': 'Forestière',
                    'description': 'Sauce tomate, mozzarella, champignons des bois, persil, ail',
                    'price': 15.50,
                    'category': 'Spécialités',
                    'vegetarian': true,
                    'image': 'forestiere.jpg'
                },
                {
                    'id': 7,
                    'name': 'Végétale',
                    'description': 'Sauce tomate, légumes grillés, olives, herbes de Provence',
                    'price': 14.00,
                    'category': 'Végétariennes',
                    'vegetarian': true,
                    'image': 'vegetale.jpg'
                },
                {
                    'id': 8,
                    'name': 'Chèvre Miel',
                    'description': 'Sauce tomate, mozzarella, fromage de chèvre, miel, noix',
                    'price': 16.50,
                    'category': 'Végétariennes',
                    'vegetarian': true,
                    'image': 'chevre-miel.jpg'
                }
            ] %}
            
            {% for pizza in sample_pizzas %}
            <div class="col-lg-4 col-md-6 pizza-item" data-category="{{ pizza.category|lower }}">
                <div class="card pizza-card" data-pizza-id="{{ pizza.id }}">
                    <div class="position-relative overflow-hidden">
                        <img src="https://placehold.co/400x200/8fbc8f/ffffff?text={{ pizza.name|url_encode }}" 
                             class="card-img-top pizza-image" 
                             alt="{{ pizza.name }}">
                        <div class="price-badge">{{ pizza.price }}€</div>
                        
                        {% if pizza.vegetarian %}
                            <div class="position-absolute top-0 start-0 m-2">
                                <span class="vegetarian-badge">
                                    <i class="fas fa-leaf"></i> Végétarien
                                </span>
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">{{ pizza.name }}</h5>
                        <p class="card-text flex-grow-1">{{ pizza.description }}</p>
                        
                        <div class="mt-auto">
                            <div class="row align-items-center mb-3">
                                <div class="col-12">
                                    <span class="fw-bold text-primary fs-5">{{ pizza.price }}€</span>
                                </div>
                            </div>
                            
                            <!-- Contrôles de quantité dynamiques -->
                            <div id="controls-{{ pizza.id }}">
                                <!-- Bouton initial "Ajouter" (affiché par défaut) -->
                                <button class="add-to-cart-btn" id="initial-add-{{ pizza.id }}" onclick="addToCart({{ pizza.id }}, '{{ pizza.name }}', {{ pizza.price }})">
                                    <i class="fas fa-cart-plus"></i> Ajouter au panier
                                </button>
                                
                                <!-- Contrôles de quantité (masqués par défaut) -->
                                <div class="quantity-controls" id="quantity-controls-{{ pizza.id }}" style="display: none;">
                                    <button class="btn-remove" onclick="removeFromCart({{ pizza.id }})">
                                        <i class="fas fa-minus"></i> Retirer
                                    </button>
                                    <div class="quantity-display">
                                        <span id="quantity-display-{{ pizza.id }}">1</span>
                                    </div>
                                    <button class="btn-add" onclick="addToCart({{ pizza.id }}, '{{ pizza.name }}', {{ pizza.price }})">
                                        <i class="fas fa-plus"></i> Ajouter
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </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>Commande rapide</h5>
                        <p>Commandez en ligne et récupérez vos pizzas selon vos disponibilités</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-leaf fa-3x text-success mb-3"></i>
                        <h5>Ingrédients frais</h5>
                        <p>Nous privilégions les producteurs locaux pour des pizzas authentiques</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-credit-card fa-3x text-warning mb-3"></i>
                        <h5>Paiement flexible</h5>
                        <p>Payez en ligne ou sur place selon votre préférence</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Icône flottante du panier -->
<a href="{{ path('app_pizza_cart') }}" class="floating-cart" id="floating-cart">
    <i class="fas fa-shopping-cart fa-2x"></i>
    <span class="cart-count" id="floating-cart-count">0</span>
</a>

<!-- Mini panier déroulant -->
<div class="cart-dropdown" id="cart-dropdown">
    <div class="cart-dropdown-header">
        <i class="fas fa-shopping-cart me-2"></i>
        Mon Panier
    </div>
    <div id="cart-dropdown-items">
        <div class="text-center p-4 text-muted">
            <i class="fas fa-shopping-cart fa-3x mb-3" style="opacity: 0.3;"></i>
            <p>Votre panier est vide</p>
        </div>
    </div>
    <div class="cart-dropdown-footer" id="cart-dropdown-footer" style="display: none;">
        <div class="cart-dropdown-total">
            <span>Total: </span>
            <span id="cart-dropdown-total">0,00 €</span>
        </div>
        <div class="cart-dropdown-actions">
            <a href="{{ path('app_pizza_cart') }}" class="btn-cart-view">
                <i class="fas fa-eye me-1"></i>Voir panier
            </a>
            <a href="{{ path('app_pizza_order') }}" class="btn-cart-order">
                <i class="fas fa-credit-card me-1"></i>Commander
            </a>
        </div>
    </div>
</div>

<!-- Cart Notification -->
<div id="cart-notification" class="cart-notification">
    <i class="fas fa-check-circle me-2"></i>
    <span id="notification-text"></span>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
// Cart functionality
let cart = JSON.parse(localStorage.getItem('pizza-cart') || '{}');
let cartDropdownVisible = false;

// Update cart count on page load
document.addEventListener('DOMContentLoaded', function() {
    updateCartCount();
    updateFloatingCart();
    updateAllPizzaCardsDisplay();
    
    // Setup floating cart interactions
    setupFloatingCart();
    
    // Filter functionality
    const filterButtons = document.querySelectorAll('.filter-btn');
    const pizzaItems = document.querySelectorAll('.pizza-item');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            const category = this.dataset.category;
            
            // Update active button
            filterButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            // Filter pizzas
            pizzaItems.forEach(item => {
                if (category === 'all' || item.dataset.category === category) {
                    item.style.display = 'block';
                    item.classList.add('fade-in');
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
    
    // Hide cart dropdown when clicking outside
    document.addEventListener('click', function(e) {
        const floatingCart = document.getElementById('floating-cart');
        const cartDropdown = document.getElementById('cart-dropdown');
        
        if (!floatingCart.contains(e.target) && !cartDropdown.contains(e.target)) {
            hideCartDropdown();
        }
    });
});

function setupFloatingCart() {
    const floatingCart = document.getElementById('floating-cart');
    const cartDropdown = document.getElementById('cart-dropdown');
    
    floatingCart.addEventListener('click', function(e) {
        e.preventDefault();
        
        if (cartDropdownVisible) {
            hideCartDropdown();
        } else {
            showCartDropdown();
        }
    });
}

function showCartDropdown() {
    const cartDropdown = document.getElementById('cart-dropdown');
    updateCartDropdown();
    cartDropdown.classList.add('show');
    cartDropdownVisible = true;
}

function hideCartDropdown() {
    const cartDropdown = document.getElementById('cart-dropdown');
    cartDropdown.classList.remove('show');
    cartDropdownVisible = false;
}

function updateCartDropdown() {
    const itemsContainer = document.getElementById('cart-dropdown-items');
    const footer = document.getElementById('cart-dropdown-footer');
    const totalElement = document.getElementById('cart-dropdown-total');
    
    const cartItems = Object.values(cart);
    
    if (cartItems.length === 0) {
        itemsContainer.innerHTML = `
            <div class="text-center p-4 text-muted">
                <i class="fas fa-shopping-cart fa-3x mb-3" style="opacity: 0.3;"></i>
                <p>Votre panier est vide</p>
            </div>
        `;
        footer.style.display = 'none';
    } else {
        let itemsHTML = '';
        let total = 0;
        
        cartItems.forEach(item => {
            const itemTotal = item.price * item.quantity;
            total += itemTotal;
            
            itemsHTML += `
                <div class="cart-dropdown-item">
                    <img src="https://placehold.co/50x50/8B4513/FFFFFF?text=🍕" alt="${item.name}" class="cart-dropdown-image">
                    <div class="cart-dropdown-info">
                        <div class="cart-dropdown-name">${item.name}</div>
                        <div class="cart-dropdown-details">Quantité: ${item.quantity}</div>
                    </div>
                    <div class="cart-dropdown-price">${itemTotal.toFixed(2)} €</div>
                    <button class="remove-item-btn" onclick="removeItemFromCart(${item.id})" title="Supprimer">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;
        });
        
        itemsContainer.innerHTML = itemsHTML;
        totalElement.textContent = `${total.toFixed(2)} €`;
        footer.style.display = 'block';
    }
}

function updateFloatingCart() {
    const countElement = document.getElementById('floating-cart-count');
    const floatingCart = document.getElementById('floating-cart');
    const totalItems = Object.values(cart).reduce((sum, item) => sum + item.quantity, 0);
    
    countElement.textContent = totalItems;
    
    if (totalItems > 0) {
        countElement.style.display = 'flex';
        floatingCart.style.display = 'flex';
    } else {
        countElement.style.display = 'none';
        // Keep floating cart visible but with 0 count
    }
}

function addToCart(pizzaId, pizzaName, price) {
    const pizzaCard = document.querySelector(`[data-pizza-id="${pizzaId}"]`);
    
    if (cart[pizzaId]) {
        cart[pizzaId].quantity += 1;
    } else {
        cart[pizzaId] = {
            id: pizzaId,
            name: pizzaName,
            price: price,
            quantity: 1
        };
    }
    
    // Save to localStorage
    localStorage.setItem('pizza-cart', JSON.stringify(cart));
    
    // Update displays
    updateCartCount();
    updateFloatingCart();
    updatePizzaCardDisplay(pizzaId);
    
    // Add visual feedback to the card
    if (pizzaCard) {
        pizzaCard.classList.add('added');
        
        // Add temporary "Ajouté" badge
        const existingBadge = pizzaCard.querySelector('.added-badge');
        if (!existingBadge) {
            const badge = document.createElement('div');
            badge.className = 'added-badge';
            badge.innerHTML = '<i class="fas fa-check me-1"></i>Ajouté !';
            pizzaCard.style.position = 'relative';
            pizzaCard.appendChild(badge);
            
            // Remove badge after animation
            setTimeout(() => {
                if (badge.parentNode) {
                    badge.parentNode.removeChild(badge);
                }
            }, 2000);
        }
        
        // Remove animation class after animation completes
        setTimeout(() => {
            pizzaCard.classList.remove('added');
        }, 600);
    }
    
    // Show notification
    showNotification(`${pizzaName} ajoutée au panier !`);
}

function removeFromCart(pizzaId) {
    if (cart[pizzaId]) {
        cart[pizzaId].quantity -= 1;
        
        if (cart[pizzaId].quantity <= 0) {
            delete cart[pizzaId];
        }
        
        // Save to localStorage
        localStorage.setItem('pizza-cart', JSON.stringify(cart));
        
        // Update displays
        updateCartCount();
        updateFloatingCart();
        updatePizzaCardDisplay(pizzaId);
        
        // Show notification
        showNotification(`Pizza retirée du panier !`);
    }
}

function removeItemFromCart(pizzaId) {
    if (cart[pizzaId]) {
        const pizzaName = cart[pizzaId].name;
        delete cart[pizzaId];
        
        // Save to localStorage
        localStorage.setItem('pizza-cart', JSON.stringify(cart));
        
        // Update displays
        updateCartCount();
        updateFloatingCart();
        updateCartDropdown();
        updatePizzaCardDisplay(pizzaId);
        
        // Show notification
        showNotification(`${pizzaName} supprimée du panier !`);
    }
}

function updatePizzaCardDisplay(pizzaId) {
    const initialBtn = document.getElementById(`initial-add-${pizzaId}`);
    const quantityControls = document.getElementById(`quantity-controls-${pizzaId}`);
    const quantityDisplay = document.getElementById(`quantity-display-${pizzaId}`);
    
    if (cart[pizzaId] && cart[pizzaId].quantity > 0) {
        // Produit dans le panier - montrer les contrôles de quantité
        initialBtn.style.display = 'none';
        quantityControls.style.display = 'flex';
        quantityDisplay.textContent = cart[pizzaId].quantity;
    } else {
        // Produit pas dans le panier - montrer le bouton initial
        initialBtn.style.display = 'block';
        quantityControls.style.display = 'none';
    }
}

function updateAllPizzaCardsDisplay() {
    // Met à jour l'affichage de toutes les cartes pizza
    const pizzaCards = document.querySelectorAll('[data-pizza-id]');
    pizzaCards.forEach(card => {
        const pizzaId = card.getAttribute('data-pizza-id');
        updatePizzaCardDisplay(pizzaId);
    });
}

function updateCartCount() {
    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';
    }
}

function showNotification(message) {
    const notification = document.getElementById('cart-notification');
    const text = document.getElementById('notification-text');
    
    text.textContent = message;
    notification.classList.add('show');
    
    setTimeout(() => {
        notification.classList.remove('show');
    }, 3000);
}

// Add some animation delays
document.querySelectorAll('.pizza-item').forEach((item, index) => {
    item.style.animationDelay = `${index * 0.1}s`;
});
</script>
{% endblock %}