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

{% block title %}Notre Carte - Le Reflex{% endblock %}

{% block body %}
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8 text-center">Notre Carte des Pizzas</h1>
    
    <div class="grid gap-6 md:gap-8">
        {% for pizza in pizzas %}
            <div class="bg-white rounded-lg shadow-md overflow-hidden" data-pizza-id="{{ pizza.id }}">
                <div class="flex flex-col md:flex-row">
                    {% if pizza.imageFilename %}
                        <div class="md:w-1/3">
                            <img src="{{ asset('uploads/pizzas/' ~ pizza.imageFilename) }}" 
                                alt="{{ pizza.name }}"
                                class="w-full max-h-48 object-cover">
                        </div>
                    {% endif %}
                    
                    <div class="p-6 md:w-2/3">
                        <div class="flex justify-between items-start mb-4">
                            <h2 class="text-xl font-semibold">{{ pizza.name }}</h2>
                            <div class="text-xl font-bold text-red-600">{{ pizza.price|number_format(2, '.', ',') }} €</div>
                        </div>
                        
                        <p class="text-gray-600 mb-4">{{ pizza.description|raw }}</p>
                        
                        {% if pizza.toppings|length > 0 %}
                            <div class="mb-4">
                                <!-- Button to toggle the toppings -->
                                <button class="w-full bg-gray-200 text-left py-2 px-4 rounded-lg mb-4 focus:outline-none focus:ring-2 focus:ring-red-500" id="topping-toggle-{{ pizza.id }}">
                                    Suppléments disponibles
                                </button>

                                <!-- Toppings list -->
                                <div id="topping-list-{{ pizza.id }}" class="hidden space-y-2">
                                    {% for topping in pizza.toppings %}
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" 
                                                   name="toppings[]" 
                                                   value="{{ topping.id }}"
                                                   class="rounded border-gray-300 text-red-600 focus:ring-red-500"
                                                   data-price="{{ topping.additionalPrice }}">
                                            <span>{{ topping.name }} (+{{ topping.additionalPrice|number_format(2, '.', ',') }} €)</span>
                                        </label>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                        
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="font-semibold">Total:</span>
                                <span class="total-price font-bold">{{ pizza.price|number_format(2, ',', ' ') }} €</span>
                            </div>
                            <button class="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors">
                                Commander
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle the topping list when clicking the button
    document.querySelectorAll('[id^="topping-toggle-"]').forEach(button => {
        button.addEventListener('click', function() {
            const pizzaId = button.id.split('-')[2]; // Get pizza ID from button ID
            const toppingList = document.getElementById('topping-list-' + pizzaId);
            toppingList.classList.toggle('hidden'); // Show or hide the list
        });
    });

    // Update total when toppings are selected or unselected
    document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
        checkbox.addEventListener('change', updateTotal);
    });

    function updateTotal(event) {
        const pizzaCard = event.target.closest('[data-pizza-id]');
        const basePrice = parseFloat(pizzaCard.querySelector('.text-red-600').textContent.replace(' €', '').replace(',', '.'));
        const totalElement = pizzaCard.querySelector('.total-price');
        
        let total = basePrice;
        
        pizzaCard.querySelectorAll('input[type="checkbox"]:checked').forEach(checkbox => {
            total += parseFloat(checkbox.dataset.price);
        });
        
        totalElement.textContent = total.toFixed(2).replace('.', ',') + ' €';
    }
});
</script>
{% endblock %}