// Modern Script for Birthday Party Selection App

document.addEventListener('DOMContentLoaded', function() {
    // Initialize AOS animation library if loaded
    if (typeof AOS !== 'undefined') {
        AOS.init({
            duration: 800,
            easing: 'ease',
            once: true
        });
    }
    
    // Shopping Cart Functionality
    const cartButton = document.getElementById('cart-button');
    const cartDropdown = document.getElementById('cart-dropdown');
    const closeCart = document.getElementById('close-cart');
    const cartCounter = document.getElementById('cart-counter');
    const cartItems = document.getElementById('cart-items');
    const cartTotalPrice = document.getElementById('cart-total-price');
    const viewFullCart = document.getElementById('view-full-cart');

    // Tab functionality with smooth transitions
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabContents = document.querySelectorAll('.tab-content');

    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Remove active class from all buttons and contents
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContents.forEach(content => {
                content.classList.remove('active');
                content.style.opacity = '0';
            });
            
            // Add active class to clicked button and corresponding content
            button.classList.add('active');
            const targetId = button.getAttribute('data-tab');
            const targetContent = document.getElementById(targetId);
            
            // Apply smooth fade-in effect
            setTimeout(() => {
                targetContent.classList.add('active');
                setTimeout(() => {
                    targetContent.style.opacity = '1';
                    // Scroll to top of the page after tab is activated
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                }, 50);
            }, 100);
        });
    });

    // WhatsApp buttons in selected items section
    const sendToWhatsApp1 = document.getElementById('send-to-whatsapp1');
    const sendToWhatsApp2 = document.getElementById('send-to-whatsapp2');
    
    // Send to WhatsApp button 1
    if (sendToWhatsApp1) {
        sendToWhatsApp1.addEventListener('click', function() {
            if (selectedItems.length === 0) {
                alert('⚠️ Por favor seleccione al menos un elemento antes de enviar.\n\nExplore nuestras opciones de:\n• Decoraciones\n• Recreación\n• Adicionales\n• Happy Park');
                // Scroll to decorations section
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                return;
            }
            
            const message = buildItemsWhatsAppMessage();
            const whatsappUrl = `https://wa.me/573005919018?text=${message}`;
            
            console.log('Enviando cotización con', selectedItems.length, 'elementos');
            console.log('Total:', total);
            
            window.open(whatsappUrl, '_blank');
        });
    }
    
    // Send to WhatsApp button 2
    if (sendToWhatsApp2) {
        sendToWhatsApp2.addEventListener('click', function() {
            if (selectedItems.length === 0) {
                alert('⚠️ Por favor seleccione al menos un elemento antes de enviar.\n\nExplore nuestras opciones de:\n• Decoraciones\n• Recreación\n• Adicionales\n• Happy Park');
                // Scroll to decorations section
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                return;
            }
            
            const message = buildItemsWhatsAppMessage();
            const whatsappUrl = `https://wa.me/573165680671?text=${message}`;
            
            console.log('Enviando cotización con', selectedItems.length, 'elementos');
            console.log('Total:', total);
            
            window.open(whatsappUrl, '_blank');
        });
    }
    
    // Cart Button Event Listeners
    if (cartButton) {
        // Toggle cart dropdown when cart icon is clicked
        cartButton.addEventListener('click', function() {
            cartDropdown.classList.toggle('show');
            updateCartItems(); // Update cart contents when opened
        });
        
        // Close cart when close button is clicked
        closeCart.addEventListener('click', function() {
            cartDropdown.classList.remove('show');
        });
        
        // View full cart details
        viewFullCart.addEventListener('click', function() {
            cartDropdown.classList.remove('show');
            document.querySelector('.selected-items').scrollIntoView({
                behavior: 'smooth'
            });
        });
        
        // Close cart when clicking outside
        document.addEventListener('click', function(event) {
            if (!cartButton.contains(event.target) && 
                !cartDropdown.contains(event.target)) {
                cartDropdown.classList.remove('show');
            }
        });
    }
    
    // Function to update cart counter and contents
    function updateCartCounter() {
        if (cartCounter) {
            cartCounter.textContent = selectedItems.length;
            // Make the counter pulse when updated
            cartCounter.classList.add('pulse');
            setTimeout(() => {
                cartCounter.classList.remove('pulse');
            }, 300);
        }
    }
    
    // Function to update cart items display
    function updateCartItems() {
        if (!cartItems) return;
        
        cartItems.innerHTML = '';
        
        if (selectedItems.length === 0) {
            cartItems.innerHTML = '<p class="empty-cart">No hay elementos seleccionados</p>';
            cartTotalPrice.textContent = '$0';
            return;
        }
        
        // Add up to 3 items to the dropdown overview
        const displayItems = selectedItems.slice(0, 3);
        
        displayItems.forEach(item => {
            const itemElement = document.createElement('div');
            itemElement.className = 'cart-item';
            itemElement.innerHTML = `
                <span>${item.name.length > 20 ? item.name.substring(0, 20) + '...' : item.name}</span>
                <span>$${item.price.toLocaleString()}</span>
            `;
            cartItems.appendChild(itemElement);
        });
        
        // If there are more items than displayed
        if (selectedItems.length > 3) {
            const moreItems = document.createElement('div');
            moreItems.className = 'cart-item more-items';
            moreItems.innerHTML = `<span>y ${selectedItems.length - 3} elementos más...</span>`;
            cartItems.appendChild(moreItems);
        }
        
        // Update total
        cartTotalPrice.textContent = `$${total.toLocaleString()}`;
    }
    
    // Subtab functionality
    const subtabButtons = document.querySelectorAll('.subtab-button');
    const subtabContents = document.querySelectorAll('.subtab-content');

    subtabButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Remove active class from all buttons and contents
            subtabButtons.forEach(btn => btn.classList.remove('active'));
            subtabContents.forEach(content => {
                content.classList.remove('active');
                content.style.opacity = '0';
            });
            
            // Add active class to clicked button and corresponding content
            button.classList.add('active');
            const targetId = button.getAttribute('data-subtab');
            const targetContent = document.getElementById(targetId);
            
            // Apply smooth fade-in effect
            setTimeout(() => {
                targetContent.classList.add('active');
                setTimeout(() => {
                    targetContent.style.opacity = '1';
                    // Scroll to top of the page after subtab is activated
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                }, 50);
            }, 100);
        });
    });

    // Initialize all tab and subtab contents with opacity 0, then set active ones to 1
    tabContents.forEach(content => {
        content.style.opacity = '0';
        content.style.transition = 'opacity 0.3s ease';
    });
    document.querySelector('.tab-content.active').style.opacity = '1';
    
    subtabContents.forEach(content => {
        content.style.opacity = '0';
        content.style.transition = 'opacity 0.3s ease';
    });
    if (document.querySelector('.subtab-content.active')) {
        document.querySelector('.subtab-content.active').style.opacity = '1';
    }

    // Handle decoration and recreation plan selection with visual feedback
    const selectButtons = document.querySelectorAll('.select-btn');
    const selectedList = document.getElementById('selected-decorations');
    const totalElement = document.getElementById('total-price');
    
    let selectedItems = [];
    let total = 0;
    
    // LocalStorage key for cart persistence
    const CART_STORAGE_KEY = 'decoracionesMagicasCart';
    
    // Save cart to localStorage
    function saveCart() {
        try {
            const cartData = {
                items: selectedItems,
                total: total,
                timestamp: new Date().toISOString()
            };
            localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cartData));
        } catch (error) {
            console.error('Error saving cart to localStorage:', error);
        }
    }
    
    // Load cart from localStorage
    function loadCart() {
        try {
            const savedData = localStorage.getItem(CART_STORAGE_KEY);
            if (savedData) {
                const cartData = JSON.parse(savedData);
                selectedItems = cartData.items || [];
                total = cartData.total || 0;
                
                // Update UI with loaded data
                updateSelectedItems();
                
                console.log('Cart loaded from localStorage:', selectedItems.length, 'items');
            }
        } catch (error) {
            console.error('Error loading cart from localStorage:', error);
        }
    }
    
    // Clear cart from localStorage
    function clearCart() {
        try {
            localStorage.removeItem(CART_STORAGE_KEY);
            console.log('Cart cleared from localStorage');
        } catch (error) {
            console.error('Error clearing cart from localStorage:', error);
        }
    }
    
    // Load cart when page loads
    loadCart();

    selectButtons.forEach(button => {
        button.addEventListener('click', function() {
            const card = this.closest('.option-card');
            
            // Add visual feedback when clicked
            this.innerHTML = '<span>Seleccionado ✓</span>';
            this.classList.add('selected');
            
            // Add selected class to the card
            card.classList.add('selected');
            
            // Remove selected class from all other cards
            document.querySelectorAll('.option-card').forEach(otherCard => {
                if (otherCard !== card && otherCard.classList.contains('selected') && 
                   (card.closest('.tab-content') === otherCard.closest('.tab-content'))) {
                    otherCard.classList.remove('selected');
                    const otherBtn = otherCard.querySelector('.select-btn');
                    if (otherBtn) {
                        otherBtn.innerHTML = 'Seleccionar';
                        otherBtn.classList.remove('selected');
                    }
                }
            });
            
            // Reset button text after animation completes
            // but keep the card highlighted
            setTimeout(() => {
                this.innerHTML = 'Seleccionar';
            }, 1500);
            
            // Check if this button has data attributes for name and price (recreation plans)
            let name, price;
            
            if (this.dataset.name && this.dataset.price) {
                name = this.dataset.name;
                price = parseInt(this.dataset.price);
            } else {
                // Regular decoration items
                name = card.querySelector('h3').textContent;
                const priceText = card.querySelector('.option-price').textContent;
                price = parseInt(priceText.replace(/\D/g, ''));
            }
            
            // Check if item is already selected
            const existingItem = selectedItems.find(item => item.name === name);
            if (existingItem) {
                // Create notification
                const notification = document.createElement('div');
                notification.className = 'notification';
                notification.textContent = 'Este elemento ya ha sido seleccionado';
                document.body.appendChild(notification);
                
                // Remove after animation
                setTimeout(() => {
                    notification.remove();
                }, 3000);
                return;
            }
            
            // Add item to selected items
            selectedItems.push({ name, price });
            total += price;
            
            updateSelectedItems();
        });
    });

    // Handle additional items selection
    const additionalCheckboxes = document.querySelectorAll('.additional-item');
    
    additionalCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const name = this.dataset.name;
            const price = parseInt(this.dataset.price);
            
            if (this.checked) {
                selectedItems.push({ name, price, isAdditional: true });
                total += price;
                
                // Create a ripple effect
                const label = this.closest('.checkbox-item').querySelector('label');
                label.classList.add('checked');
                setTimeout(() => {
                    label.classList.remove('checked');
                }, 500);
            } else {
                const index = selectedItems.findIndex(item => item.name === name && item.isAdditional);
                if (index !== -1) {
                    total -= selectedItems[index].price;
                    selectedItems.splice(index, 1);
                }
            }
            
            updateSelectedItems();
        });
    });

    // Update the selected items list and total with animation
    function updateSelectedItems() {
        selectedList.innerHTML = '';
        
        if (selectedItems.length === 0) {
            // Show empty state message
            const emptyMessage = document.createElement('div');
            emptyMessage.className = 'empty-selection-message';
            emptyMessage.innerHTML = `
                <i class="fas fa-shopping-cart" style="font-size: 3rem; color: var(--gray-300); margin-bottom: 1rem;"></i>
                <p style="color: var(--gray-400); font-size: 1.1rem;">No has seleccionado ningún elemento</p>
                <p style="color: var(--gray-400); font-size: 0.9rem;">Explora nuestras opciones de decoraciones, recreación y adicionales</p>
            `;
            selectedList.appendChild(emptyMessage);
            
            totalElement.textContent = `$0`;
            updateCartCounter(); // Update cart counter
            updateCartItems(); // Update cart dropdown
            return;
        }
        
        selectedItems.forEach((item, index) => {
            const itemElement = document.createElement('div');
            itemElement.className = 'selected-item';
            itemElement.innerHTML = `
                <span class="item-name">${item.name}</span>
                <span class="item-price">$${item.price.toLocaleString()}</span>
                <button class="remove-item-btn" data-index="${index}" title="Eliminar">&times;</button>
            `;
            selectedList.appendChild(itemElement);
        });
        
        // Attach remove buttons event listeners
        document.querySelectorAll('.remove-item-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const index = parseInt(this.dataset.index);
                removeItem(index);
            });
        });
        
        // Animate the total changing
        animateValue(totalElement, total);
        
        // Update shopping cart
        updateCartCounter();
        updateCartItems();
        
        // Make sure the selected items section is visible
        const selectedItemsSection = document.querySelector('.selected-items');
        if (selectedItemsSection) {
            selectedItemsSection.style.display = 'block';
            selectedItemsSection.style.opacity = '1';
        }
        
        // Save cart to localStorage after updating
        saveCart();
    }
    
    // Remove item from selected items
    function removeItem(index) {
        if (index >= 0 && index < selectedItems.length) {
            const removedItem = selectedItems[index];
            selectedItems.splice(index, 1);
            total -= removedItem.price;
            if (total < 0) total = 0;
            updateSelectedItems();
        }
    }
    
    // Animate counting up the total
    function animateValue(element, endValue) {
        const startValue = parseInt(element.textContent.replace(/\D/g, '')) || 0;
        const duration = 500;
        const startTime = performance.now();
        
        function updateValue(currentTime) {
            const elapsedTime = currentTime - startTime;
            if (elapsedTime < duration) {
                const currentValue = Math.round(easeInOutQuad(elapsedTime, startValue, endValue - startValue, duration));
                element.textContent = `$${currentValue.toLocaleString()}`;
                requestAnimationFrame(updateValue);
            } else {
                element.textContent = `$${endValue.toLocaleString()}`;
            }
        }
        
        function easeInOutQuad(t, b, c, d) {
            t /= d/2;
            if (t < 1) return c/2*t*t + b;
            t--;
            return -c/2 * (t*(t-2) - 1) + b;
        }
        
        requestAnimationFrame(updateValue);
    }
    
    // Handle Price List Item Selection
    const addItemBtns = document.querySelectorAll('.add-item-btn');
    const adicionalesSelectedList = document.getElementById('adicionales-selected-list');
    
    if (addItemBtns.length > 0) {
        addItemBtns.forEach(button => {
            button.addEventListener('click', function() {
                const name = this.dataset.name;
                const price = parseInt(this.dataset.price);
                
                // Check if item is already selected
                const existingItem = selectedItems.find(item => item.name === name);
                if (existingItem) {
                    // Create notification
                    const notification = document.createElement('div');
                    notification.className = 'notification';
                    notification.textContent = 'Este elemento ya ha sido seleccionado';
                    document.body.appendChild(notification);
                    
                    // Remove after animation
                    setTimeout(() => {
                        notification.remove();
                    }, 3000);
                    return;
                }
                
                // Add item to selected items
                selectedItems.push({ name, price, isAdditional: true });
                total += price;
                
                // Update the main selected items UI
                updateSelectedItems();
                
                // Add to the adicionales selected list
                updateAdicionalesSelectedList();
                
                // Add visual feedback when clicked
                this.classList.add('selected');
                // Reset after animation completes
                setTimeout(() => {
                    this.classList.remove('selected');
                }, 500);
            });
        });
    }
    
    function updateAdicionalesSelectedList() {
        if (!adicionalesSelectedList) return;
        
        adicionalesSelectedList.innerHTML = '';
        
        // Filter for only additional items
        const adicionalesItems = selectedItems.filter(item => item.isAdditional);
        
        if (adicionalesItems.length === 0) {
            const emptyMessage = document.createElement('p');
            emptyMessage.textContent = 'No has seleccionado ningún adicional';
            emptyMessage.classList.add('empty-message');
            adicionalesSelectedList.appendChild(emptyMessage);
            return;
        }
        
        adicionalesItems.forEach(item => {
            const listItem = document.createElement('li');
            listItem.innerHTML = `
                <span>${item.name}</span>
                <div>
                    <span>$${item.price.toLocaleString()}</span>
                    <button class="remove-item" data-name="${item.name}">×</button>
                </div>
            `;
            adicionalesSelectedList.appendChild(listItem);
        });
        
        // Add remove functionality
        document.querySelectorAll('.remove-item').forEach(button => {
            button.addEventListener('click', function() {
                const itemName = this.dataset.name;
                const index = selectedItems.findIndex(item => item.name === itemName);
                if (index !== -1) {
                    total -= selectedItems[index].price;
                    selectedItems.splice(index, 1);
                    updateSelectedItems();
                    updateAdicionalesSelectedList();
                }
            });
        });
    }

    // Form submission with validation and feedback
    const partyForm = document.getElementById('party-form');
    const whatsappBackupBtn = document.getElementById('whatsapp-backup-btn');
    
    // Function to build WhatsApp message with full form data
    function buildWhatsAppMessage(formData) {
        let message = `*NUEVA SOLICITUD DE FIESTA*\n\n`;
        message += `*Información de Contacto:*\n`;
        message += `- Nombre del Padre/Madre: ${formData.parentName}\n`;
        message += `- Nombre del Niño/a: ${formData.childName}\n`;
        message += `- Edad del Niño/a: ${formData.childAge} años\n`;
        message += `- Email: ${formData.email}\n`;
        message += `- Teléfono: ${formData.phone}\n`;
        message += `- Fecha de la Fiesta: ${formData.partyDate}\n`;
        
        if (formData.notes && formData.notes.trim() !== '') {
            message += `- Notas Adicionales: ${formData.notes}\n`;
        }
        
        message += `\n*Elementos Seleccionados:*\n`;
        formData.selectedItems.forEach((item, index) => {
            message += `${index + 1}. ${item.name}: $${item.price.toLocaleString()}\n`;
        });
        
        message += `\n*TOTAL: $${total.toLocaleString()}*`;
        
        return encodeURIComponent(message);
    }
    
    // Function to build WhatsApp message with just selected items
    function buildItemsWhatsAppMessage() {
        let message = `*COTIZACIÓN DE ELEMENTOS*\n\n`;
        
        if (selectedItems.length === 0) {
            message += "No hay elementos seleccionados";
            return encodeURIComponent(message);
        }
        
        message += `*Elementos Seleccionados:*\n`;
        selectedItems.forEach((item, index) => {
            message += `${index + 1}. ${item.name}: $${item.price.toLocaleString()}\n`;
        });
        
        message += `\n*TOTAL: $${total.toLocaleString()}*`;
        
        return encodeURIComponent(message);
    }
    
    // Function to collect form data
    function collectFormData() {
        if (selectedItems.length === 0) {
            showFormError('Por favor seleccione al menos una decoración.');
            return null;
        }
        
        return {
            parentName: document.getElementById('parent-name').value,
            childName: document.getElementById('child-name').value,
            childAge: document.getElementById('child-age').value,
            email: document.getElementById('email').value,
            phone: document.getElementById('phone').value,
            partyDate: document.getElementById('party-date').value,
            notes: document.getElementById('notes').value,
            selectedItems
        };
    }
    
    // Function to validate the form
    function validateForm() {
        const requiredFields = ['parent-name', 'child-name', 'child-age', 'email', 'phone', 'party-date'];
        let isValid = true;
        
        requiredFields.forEach(field => {
            const element = document.getElementById(field);
            if (!element.value.trim()) {
                isValid = false;
                element.classList.add('error');
            } else {
                element.classList.remove('error');
            }
        });
        
        if (!isValid) {
            showFormError('Por favor complete todos los campos requeridos.');
        }
        
        return isValid;
    }
    
    // WhatsApp backup button handler
    if (whatsappBackupBtn) {
        whatsappBackupBtn.addEventListener('click', function(e) {
            e.preventDefault();
            
            if (!validateForm()) return;
            
            const formData = collectFormData();
            if (!formData) return;
            
            // Build WhatsApp message
            const whatsappMessage = buildWhatsAppMessage(formData);
            
            // Create WhatsApp URL for backup number
            const whatsappUrl = `https://wa.me/12018925499?text=${whatsappMessage}`;
            
            // Show success message
            showSuccessMessage('¡Gracias! Por favor, complete el envío a través de WhatsApp. Se abrirá una nueva ventana.');
            
            // Open WhatsApp in a new window
            window.open(whatsappUrl, '_blank');
        });
    }
    
    // Main form submission
    partyForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (!validateForm()) return;
        
        const formData = collectFormData();
        if (!formData) return;
        
        // Show loading state
        const submitBtn = this.querySelector('.submit-btn');
        const originalText = submitBtn.textContent;
        submitBtn.textContent = 'Enviando...';
        submitBtn.disabled = true;
        
        console.log('Form submitted:', formData);
        
        // Build WhatsApp message
        const whatsappMessage = buildWhatsAppMessage(formData);
        
        // Create WhatsApp URL for primary number
        const whatsappUrl = `https://wa.me/573005919018?text=${whatsappMessage}`;
        
        // Show success message
        showSuccessMessage('¡Gracias! Por favor, complete el envío a través de WhatsApp. Se abrirá una nueva ventana.');
        
        // Open WhatsApp in a new window
        window.open(whatsappUrl, '_blank');
        
        // Reset UI after success
        setTimeout(() => {
            // Reset button
            submitBtn.textContent = originalText;
            submitBtn.disabled = false;
            
            // Reset form and cart
            partyForm.reset();
            selectedItems = [];
            total = 0;
            updateSelectedItems();
            clearCart(); // Clear cart from localStorage after successful submission
        }, 1000);
    });
    
    // Helper function to show error
    function showFormError(message) {
        const errorElement = document.createElement('div');
        errorElement.className = 'form-error';
        errorElement.textContent = message;
        
        // Check if error already exists
        const existingError = document.querySelector('.form-error');
        if (existingError) existingError.remove();
        
        // Insert at top of form
        partyForm.insertBefore(errorElement, partyForm.firstChild);
        
        // Remove after timeout
        setTimeout(() => {
            errorElement.remove();
        }, 3000);
    }
    
    // Make sure all parts of the selected items section are visible
    const selectedItemsSection = document.querySelector('.selected-items');
    const whatsappButtonsContainer = document.querySelector('.whatsapp-buttons-container');
    if (selectedItemsSection) {
        selectedItemsSection.style.display = 'block';
    }
    if (whatsappButtonsContainer) {
        whatsappButtonsContainer.style.display = 'block';
    }
    
    // Helper function to show success message
    function showSuccessMessage(message) {
        const successElement = document.createElement('div');
        successElement.className = 'success-message';
        successElement.textContent = message;
        
        // Add to body
        document.body.appendChild(successElement);
        
        // Animate in
        setTimeout(() => {
            successElement.classList.add('show');
        }, 100);
        
        // Remove after timeout
        setTimeout(() => {
            successElement.classList.remove('show');
            setTimeout(() => {
                successElement.remove();
            }, 500);
        }, 5000);
    }
    
    // Add smooth scrolling for navigation
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
    
    // Happy Park calculator functionality
    const kidsNumberInput = document.getElementById('kids-number');
    const minusBtn = document.querySelector('.minus-btn:not(.pizza-minus)');
    const plusBtn = document.querySelector('.plus-btn:not(.pizza-plus)');
    const kidsCountSpan = document.getElementById('kids-count');
    const parkPriceSpan = document.getElementById('park-price');
    const timeSelectedSpan = document.getElementById('time-selected');
    const addParkBtn = document.getElementById('add-park-btn');
    const timeOptions = document.querySelectorAll('input[name="park-time"]');
    
    // Pizza quantity functionality
    const pizzaQuantityInput = document.getElementById('pizza-quantity');
    const pizzaMinusBtn = document.querySelector('.pizza-minus');
    const pizzaPlusBtn = document.querySelector('.pizza-plus');
    const addPizzaBtn = document.getElementById('add-pizza-btn');
    
    // Pizza functionality
    if (pizzaQuantityInput && addPizzaBtn) {
        function updatePizzaPrice() {
            const quantity = parseInt(pizzaQuantityInput.value) || 1;
            
            // Update button text with quantity and price
            const basePrice = 89000;
            const totalPrice = basePrice * quantity;
            addPizzaBtn.dataset.price = totalPrice;
            addPizzaBtn.dataset.name = `Combo Pizza Familiar (${quantity}x)`;
        }
        
        // Plus and minus buttons for pizza
        pizzaMinusBtn.addEventListener('click', () => {
            const currentValue = parseInt(pizzaQuantityInput.value) || 1;
            if (currentValue > 1) {
                pizzaQuantityInput.value = currentValue - 1;
                updatePizzaPrice();
            }
        });
        
        pizzaPlusBtn.addEventListener('click', () => {
            const currentValue = parseInt(pizzaQuantityInput.value) || 1;
            if (currentValue < 10) {
                pizzaQuantityInput.value = currentValue + 1;
                updatePizzaPrice();
            }
        });
        
        // Input change for pizza
        pizzaQuantityInput.addEventListener('change', () => {
            const currentValue = parseInt(pizzaQuantityInput.value) || 1;
            if (currentValue < 1) {
                pizzaQuantityInput.value = 1;
            } else if (currentValue > 10) {
                pizzaQuantityInput.value = 10;
            }
            updatePizzaPrice();
        });
        
        // Add pizza to selected items
        addPizzaBtn.addEventListener('click', function() {
            const quantity = parseInt(pizzaQuantityInput.value) || 1;
            const basePrice = 89000;
            const totalPrice = basePrice * quantity;
            
            // Create item name with quantity
            const name = `Combo Pizza Familiar (${quantity}x)`;
            
            // Check if already in selected items (any pizza combo)
            const existingItem = selectedItems.find(item => item.name.startsWith('Combo Pizza Familiar'));
            
            if (existingItem) {
                // If it exists, update it
                const index = selectedItems.indexOf(existingItem);
                total -= existingItem.price;
                selectedItems[index] = { name, price: totalPrice };
                total += totalPrice;
                
                // Create notification
                const notification = document.createElement('div');
                notification.className = 'notification success';
                notification.textContent = 'Pizza actualizada en tu fiesta';
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.remove();
                }, 3000);
            } else {
                // Add new item
                selectedItems.push({ name, price: totalPrice });
                total += totalPrice;
                
                // Create notification
                const notification = document.createElement('div');
                notification.className = 'notification success';
                notification.textContent = 'Pizza añadida a tu fiesta';
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.remove();
                }, 3000);
            }
            
            // Update UI
            updateSelectedItems();
            
            // Add visual feedback
            this.classList.add('selected');
            setTimeout(() => {
                this.classList.remove('selected');
            }, 500);
        });
        
        // Initialize
        updatePizzaPrice();
    }
    
    // Food options functionality in Desserts tab
    const weekdayRadio = document.getElementById('weekday');
    const weekendRadio = document.getElementById('weekend');
    const weekdayOptions = document.getElementById('weekday-options');
    const weekendOptions = document.getElementById('weekend-options');
    const addFoodBtn = document.getElementById('add-food-btn');
    
    // Food options functionality in Food tab
    const foodWeekdayRadio = document.getElementById('food-weekday');
    const foodWeekendRadio = document.getElementById('food-weekend');
    const foodWeekdayOptions = document.getElementById('food-weekday-options');
    const foodWeekendOptions = document.getElementById('food-weekend-options');
    const foodAddFoodBtn = document.getElementById('food-add-food-btn');
    
    // Event handlers for the desserts tab "Traer Propia Comida"
    if (weekdayRadio && weekendRadio) {
        // Handle day type selection
        weekdayRadio.addEventListener('change', function() {
            if (this.checked) {
                weekdayOptions.style.display = 'block';
                weekendOptions.style.display = 'none';
                // Update button with weekday selected option
                const selectedOption = document.querySelector('input[name="weekday-guests"]:checked');
                if (selectedOption) {
                    addFoodBtn.dataset.name = selectedOption.dataset.name;
                    addFoodBtn.dataset.price = selectedOption.value;
                }
            }
        });
        
        weekendRadio.addEventListener('change', function() {
            if (this.checked) {
                weekdayOptions.style.display = 'none';
                weekendOptions.style.display = 'block';
                // Update button with weekend selected option
                const selectedOption = document.querySelector('input[name="weekend-guests"]:checked');
                if (selectedOption) {
                    addFoodBtn.dataset.name = selectedOption.dataset.name;
                    addFoodBtn.dataset.price = selectedOption.value;
                }
            }
        });
        
        // Handle weekday guest selection
        document.querySelectorAll('input[name="weekday-guests"]').forEach(option => {
            option.addEventListener('change', function() {
                if (weekdayRadio.checked && this.checked) {
                    addFoodBtn.dataset.name = this.dataset.name;
                    addFoodBtn.dataset.price = this.value;
                }
            });
        });
        
        // Handle weekend guest selection
        document.querySelectorAll('input[name="weekend-guests"]').forEach(option => {
            option.addEventListener('change', function() {
                if (weekendRadio.checked && this.checked) {
                    addFoodBtn.dataset.name = this.dataset.name;
                    addFoodBtn.dataset.price = this.value;
                }
            });
        });
        
        // Add food option to selected items
        if (addFoodBtn) {
            addFoodBtn.addEventListener('click', function() {
                const name = this.dataset.name;
                const price = parseInt(this.dataset.price);
                
                // Check if already in selected items (any food option)
                const existingItem = selectedItems.find(item => item.name.includes('Traer Propia Comida'));
                
                if (existingItem) {
                    // If it exists, update it
                    const index = selectedItems.indexOf(existingItem);
                    total -= existingItem.price;
                    selectedItems[index] = { name, price };
                    total += price;
                    
                    // Create notification
                    const notification = document.createElement('div');
                    notification.className = 'notification success';
                    notification.textContent = 'Opción de comida actualizada en tu fiesta';
                    document.body.appendChild(notification);
                    
                    setTimeout(() => {
                        notification.remove();
                    }, 3000);
                } else {
                    // Add new item
                    selectedItems.push({ name, price });
                    total += price;
                    
                    // Create notification
                    const notification = document.createElement('div');
                    notification.className = 'notification success';
                    notification.textContent = 'Opción de comida añadida a tu fiesta';
                    document.body.appendChild(notification);
                    
                    setTimeout(() => {
                        notification.remove();
                    }, 3000);
                }
                
                // Update UI
                updateSelectedItems();
                
                // Add visual feedback
                this.innerHTML = '<span>Añadido ✓</span>';
                setTimeout(() => {
                    this.innerHTML = 'Añadir a mi fiesta';
                }, 1500);
            });
        }
    }
    
    // Event handlers for the food tab "Traer Propia Comida"
    if (foodWeekdayRadio && foodWeekendRadio) {
        // Handle day type selection
        foodWeekdayRadio.addEventListener('change', function() {
            if (this.checked) {
                foodWeekdayOptions.style.display = 'block';
                foodWeekendOptions.style.display = 'none';
                // Update button with weekday selected option
                const selectedOption = document.querySelector('input[name="food-weekday-guests"]:checked');
                if (selectedOption) {
                    foodAddFoodBtn.dataset.name = selectedOption.dataset.name;
                    foodAddFoodBtn.dataset.price = selectedOption.value;
                }
            }
        });
        
        foodWeekendRadio.addEventListener('change', function() {
            if (this.checked) {
                foodWeekdayOptions.style.display = 'none';
                foodWeekendOptions.style.display = 'block';
                // Update button with weekend selected option
                const selectedOption = document.querySelector('input[name="food-weekend-guests"]:checked');
                if (selectedOption) {
                    foodAddFoodBtn.dataset.name = selectedOption.dataset.name;
                    foodAddFoodBtn.dataset.price = selectedOption.value;
                }
            }
        });
        
        // Handle weekday guest selection
        document.querySelectorAll('input[name="food-weekday-guests"]').forEach(option => {
            option.addEventListener('change', function() {
                if (foodWeekdayRadio.checked && this.checked) {
                    foodAddFoodBtn.dataset.name = this.dataset.name;
                    foodAddFoodBtn.dataset.price = this.value;
                }
            });
        });
        
        // Handle weekend guest selection
        document.querySelectorAll('input[name="food-weekend-guests"]').forEach(option => {
            option.addEventListener('change', function() {
                if (foodWeekendRadio.checked && this.checked) {
                    foodAddFoodBtn.dataset.name = this.dataset.name;
                    foodAddFoodBtn.dataset.price = this.value;
                }
            });
        });
        
        // Add food option to selected items
        if (foodAddFoodBtn) {
            foodAddFoodBtn.addEventListener('click', function() {
                const name = this.dataset.name;
                const price = parseInt(this.dataset.price);
                
                // Check if already in selected items (any food option)
                const existingItem = selectedItems.find(item => item.name.includes('Traer Propia Comida'));
                
                if (existingItem) {
                    // If it exists, update it
                    const index = selectedItems.indexOf(existingItem);
                    total -= existingItem.price;
                    selectedItems[index] = { name, price };
                    total += price;
                    
                    // Create notification
                    const notification = document.createElement('div');
                    notification.className = 'notification success';
                    notification.textContent = 'Opción de comida actualizada en tu fiesta';
                    document.body.appendChild(notification);
                    
                    setTimeout(() => {
                        notification.remove();
                    }, 3000);
                } else {
                    // Add new item
                    selectedItems.push({ name, price });
                    total += price;
                    
                    // Create notification
                    const notification = document.createElement('div');
                    notification.className = 'notification success';
                    notification.textContent = 'Opción de comida añadida a tu fiesta';
                    document.body.appendChild(notification);
                    
                    setTimeout(() => {
                        notification.remove();
                    }, 3000);
                }
                
                // Update UI
                updateSelectedItems();
                
                // Add visual feedback
                this.innerHTML = '<span>Añadido ✓</span>';
                setTimeout(() => {
                    this.innerHTML = 'Añadir a mi fiesta';
                }, 1500);
            });
        }
    }

    // Dessert quantity functionality
    // Fruit portions
    const fruitQuantityInput = document.getElementById('fruit-quantity');
    const fruitMinusBtn = document.querySelector('.fruit-minus');
    const fruitPlusBtn = document.querySelector('.fruit-plus');
    const addFruitBtn = document.getElementById('add-fruit-btn');
    
    // Ice cream
    const icecreamQuantityInput = document.getElementById('icecream-quantity');
    const icecreamMinusBtn = document.querySelector('.icecream-minus');
    const icecreamPlusBtn = document.querySelector('.icecream-plus');
    const addIcecreamBtn = document.getElementById('add-icecream-btn');
    
    // Popcorn
    const popcornQuantityInput = document.getElementById('popcorn-quantity');
    const popcornMinusBtn = document.querySelector('.popcorn-minus');
    const popcornPlusBtn = document.querySelector('.popcorn-plus');
    const addPopcornBtn = document.getElementById('add-popcorn-btn');
    
    // Strawberries with chocolate
    const strawberryQuantityInput = document.getElementById('strawberry-quantity');
    const strawberryMinusBtn = document.querySelector('.strawberry-minus');
    const strawberryPlusBtn = document.querySelector('.strawberry-plus');
    const addStrawberryBtn = document.getElementById('add-strawberry-btn');
    
    // Personalized cups
    const cupQuantityInput = document.getElementById('cup-quantity');
    const cupMinusBtn = document.querySelector('.cup-minus');
    const cupPlusBtn = document.querySelector('.cup-plus');
    const addCupBtn = document.getElementById('add-cup-btn');
    
    // Generic function to handle dessert quantity buttons
    function setupDessertQuantityControl(inputElement, minusBtn, plusBtn, addBtn) {
        if (!inputElement || !minusBtn || !plusBtn || !addBtn) return;
        
        const minValue = parseInt(addBtn.dataset.min) || 1;
        const basePrice = parseInt(addBtn.dataset.price);
        const baseName = addBtn.dataset.name;
        
        // Minus button
        minusBtn.addEventListener('click', () => {
            const currentValue = parseInt(inputElement.value) || minValue;
            if (currentValue > minValue) {
                inputElement.value = currentValue - 1;
            }
        });
        
        // Plus button
        plusBtn.addEventListener('click', () => {
            const currentValue = parseInt(inputElement.value) || minValue;
            if (currentValue < 100) {
                inputElement.value = currentValue + 1;
            }
        });
        
        // Input change validation
        inputElement.addEventListener('change', () => {
            const currentValue = parseInt(inputElement.value) || minValue;
            if (currentValue < minValue) {
                inputElement.value = minValue;
            } else if (currentValue > 100) {
                inputElement.value = 100;
            }
        });
        
        // Add button
        addBtn.addEventListener('click', function() {
            const quantity = parseInt(inputElement.value) || minValue;
            const totalPrice = basePrice * quantity;
            const name = `${baseName} (${quantity}x)`;
            
            // Check if already in selected items (same type)
            const existingItem = selectedItems.find(item => item.name.startsWith(baseName));
            
            if (existingItem) {
                // Update existing item
                const index = selectedItems.indexOf(existingItem);
                total -= existingItem.price;
                selectedItems[index] = { name, price: totalPrice };
                total += totalPrice;
                
                // Create notification
                const notification = document.createElement('div');
                notification.className = 'notification success';
                notification.textContent = `${baseName} actualizado en tu fiesta`;
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.remove();
                }, 3000);
            } else {
                // Add new item
                selectedItems.push({ name, price: totalPrice });
                total += totalPrice;
                
                // Create notification
                const notification = document.createElement('div');
                notification.className = 'notification success';
                notification.textContent = `${baseName} añadido a tu fiesta`;
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.remove();
                }, 3000);
            }
            
            // Update UI
            updateSelectedItems();
            
            // Add visual feedback
            this.classList.add('selected');
            setTimeout(() => {
                this.classList.remove('selected');
            }, 500);
        });
    }
    
    // Setup all dessert quantity controls
    setupDessertQuantityControl(fruitQuantityInput, fruitMinusBtn, fruitPlusBtn, addFruitBtn);
    setupDessertQuantityControl(icecreamQuantityInput, icecreamMinusBtn, icecreamPlusBtn, addIcecreamBtn);
    setupDessertQuantityControl(popcornQuantityInput, popcornMinusBtn, popcornPlusBtn, addPopcornBtn);
    setupDessertQuantityControl(strawberryQuantityInput, strawberryMinusBtn, strawberryPlusBtn, addStrawberryBtn);
    setupDessertQuantityControl(cupQuantityInput, cupMinusBtn, cupPlusBtn, addCupBtn);

    // Happy Park functionality
    if (kidsNumberInput) {
        // Update price and kids count
        function updateParkPrice() {
            const kidsNumber = parseInt(kidsNumberInput.value) || 1;
            const selectedTimeOption = document.querySelector('input[name="park-time"]:checked');
            const price = parseInt(selectedTimeOption.value);
            const hours = selectedTimeOption.dataset.hours;
            
            // Price per child
            const totalPrice = price * kidsNumber;
            
            kidsCountSpan.textContent = kidsNumber;
            parkPriceSpan.textContent = `$${totalPrice.toLocaleString()}`;
            timeSelectedSpan.textContent = `${hours} hora${hours === "1" ? "" : "s"}`;
        }
        
        // Plus and minus buttons
        minusBtn.addEventListener('click', () => {
            const currentValue = parseInt(kidsNumberInput.value) || 1;
            if (currentValue > 1) {
                kidsNumberInput.value = currentValue - 1;
                updateParkPrice();
            }
        });
        
        plusBtn.addEventListener('click', () => {
            const currentValue = parseInt(kidsNumberInput.value) || 1;
            if (currentValue < 100) {
                kidsNumberInput.value = currentValue + 1;
                updateParkPrice();
            }
        });
        
        // Input change
        kidsNumberInput.addEventListener('change', () => {
            const currentValue = parseInt(kidsNumberInput.value) || 1;
            if (currentValue < 1) {
                kidsNumberInput.value = 1;
            } else if (currentValue > 100) {
                kidsNumberInput.value = 100;
            }
            updateParkPrice();
        });
        
        // Time option change
        timeOptions.forEach(option => {
            option.addEventListener('change', updateParkPrice);
        });
        
        // Add park to selected items
        if (addParkBtn) {
            addParkBtn.addEventListener('click', function() {
                // Get current values
                const kidsNumber = parseInt(kidsNumberInput.value) || 1;
                const selectedTimeOption = document.querySelector('input[name="park-time"]:checked');
                const pricePerKid = parseInt(selectedTimeOption.value);
                const hours = selectedTimeOption.dataset.hours;
                const totalPrice = pricePerKid * kidsNumber;
                
                // Create item name
                const name = `Happy Park: ${kidsNumber} niños por ${hours} hora${hours === "1" ? "" : "s"}`;
                
                // Check if already in selected items
                const existingItem = selectedItems.find(item => item.name.startsWith('Happy Park:'));
                if (existingItem) {
                    // If it exists, update it
                    const index = selectedItems.indexOf(existingItem);
                    total -= existingItem.price;
                    selectedItems[index] = { name, price: totalPrice };
                    total += totalPrice;
                } else {
                    // Add new item
                    selectedItems.push({ name, price: totalPrice });
                    total += totalPrice;
                }
                
                // Update UI
                updateSelectedItems();
                
                // Show success message
                const notification = document.createElement('div');
                notification.className = 'notification success';
                notification.textContent = 'Happy Park añadido a tu fiesta';
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.remove();
                }, 3000);
                
                // Add visual feedback
                this.innerHTML = '<span>Añadido ✓</span>';
                setTimeout(() => {
                    this.innerHTML = 'Añadir a mi fiesta';
                }, 1500);
            });
        }
    }
});