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

{% block title %}Mon panier - {{ parent() }}{% endblock %}

{% block body %}
<div class="container mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6">Mon panier</h2>

    <div id="cart-items" class="space-y-4">
        <!-- Les éléments du panier seront ajoutés ici par JavaScript -->
    </div>

    <div class="mt-6">
        <button id="clear-cart" class="inline-block px-6 py-2 text-white bg-red-600 hover:bg-red-700 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-red-500" disabled>
            Vider le panier
        </button>
    </div>
</div>

<div class="mt-6">
    <button id="validate-cart" class="inline-block px-6 py-2 text-white bg-green-600 hover:bg-green-700 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-green-500" disabled>
        Valider la commande
    </button>
</div>

<!-- JavaScript pour gérer le panier -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const clearCartButton = document.getElementById('clear-cart');
        const validateCartButton = document.getElementById('validate-cart');
        const cartItemsContainer = document.getElementById('cart-items');

        const apiEndpoints = {
            getCart: "{{ path('api_cart_get') }}",
            clearCart: "{{ path('api_cart_clear') }}",
            decreaseQuantity: "{{ path('api_cart_decrease', {'id': 'ID_PLACEHOLDER'}) }}",
            increaseQuantity: "{{ path('api_cart_add', {'id': 'ID_PLACEHOLDER'}) }}"
        };

        // Function to fetch the cart and update the UI
        function fetchCart() {
            fetch(apiEndpoints.getCart)
                .then(response => response.json())
                .then(data => updateCartItems(data.cart))
                .catch(error => console.error('Error fetching cart:', error));
        }

        // Function to update the cart items in the UI
        function updateCartItems(cart) {
            cartItemsContainer.innerHTML = '';

            if (cart.length > 0) {
                cart.forEach(cartItem => {
                    const imageElements = cartItem.product.images.map(image => {
                        return `<img src="{{ asset('images/products/') }}/${image}" alt="${cartItem.product.name}" class="w-16 h-16 object-cover rounded-lg">`;
                    }).join('');

                    const cartItemElement = `
                        <div class="cart-item flex items-center justify-between bg-white p-4 rounded-lg shadow-md" data-product-id="${cartItem.product.id}">
                            <div class="flex items-center">
                                <div class="flex space-x-2">
                                    ${imageElements}
                                </div>
                                <div class="ml-4">
                                    <h3 class="text-lg font-semibold">${cartItem.product.name}</h3>
                                    <p class="text-gray-500">${cartItem.product.price} €</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-4">
                                <div class="flex items-center space-x-2">
                                    <button aria-label="Retirer" class="decrease-quantity text-gray-500 hover:text-gray-700 focus:outline-none">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
                                        </svg>
                                    </button>
                                    <span class="text-gray-700 font-medium">${cartItem.quantity}</span>
                                    <button aria-label="Ajouter" class="increase-quantity text-gray-500 hover:text-gray-700 focus:outline-none">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                        </svg>
                                    </button>
                                </div>
                                <div>
                                    <span class="text-gray-700 font-medium">${cartItem.quantity * cartItem.product.price} €</span>
                                </div>
                            </div>
                        </div>`;
                    cartItemsContainer.insertAdjacentHTML('beforeend', cartItemElement);
                });

                clearCartButton.disabled = false;
                validateCartButton.disabled = false;
            } else {
                cartItemsContainer.innerHTML = '<p class="text-gray-500">Votre panier est vide.</p>' +
                '<a href="{{ path('app_product_index', { availability: 'sale' }) }}" class="hover:text-gray-400">Découvrez nos produits</a>';
                clearCartButton.disabled = true;
                validateCartButton.disabled = true;
            }

            attachEventListeners();
        }

        // Function to attach event listeners
        function attachEventListeners() {
            // Attach event listeners for quantity buttons
            document.querySelectorAll('.decrease-quantity').forEach(button => {
                button.removeEventListener('click', handleDecreaseQuantity); // Avoid multiple attachments
                button.addEventListener('click', handleDecreaseQuantity);
            });

            document.querySelectorAll('.increase-quantity').forEach(button => {
                button.removeEventListener('click', handleIncreaseQuantity); // Avoid multiple attachments
                button.addEventListener('click', handleIncreaseQuantity);
            });
        }

        // Handler for decreasing quantity
        function handleDecreaseQuantity(event) {
            const productId = event.currentTarget.closest('.cart-item').dataset.productId;
            const url = apiEndpoints.decreaseQuantity.replace('ID_PLACEHOLDER', productId);

            fetch(url, { method: 'POST' })
                .then(response => response.json())
                .then(() => fetchCart())
                .catch(error => console.error('Error decreasing quantity:', error));
        }

        // Handler for increasing quantity
        function handleIncreaseQuantity(event) {
            const productId = event.currentTarget.closest('.cart-item').dataset.productId;
            const url = apiEndpoints.increaseQuantity.replace('ID_PLACEHOLDER', productId);

            fetch(url, { method: 'POST' })
                .then(response => response.json())
                .then(() => fetchCart())
                .catch(error => console.error('Error increasing quantity:', error));
        }

        // Event listeners for clear cart and validate cart buttons
        clearCartButton.addEventListener('click', () => {
            if (!clearCartButton.disabled) {
                fetch(apiEndpoints.clearCart, { method: 'POST' })
                    .then(response => response.json())
                    .then(() => fetchCart())
                    .catch(error => console.error('Error clearing cart:', error));
            }
        });

        validateCartButton.addEventListener('click', () => {
            if (!validateCartButton.disabled) {
                // Redirect to order page
                window.location.href = "{{ path('app_command_new') }}";
            }
        });

        // Initial fetch to load cart items
        fetchCart();
    });
</script>
{% endblock %}