document.addEventListener('DOMContentLoaded', () => {
    let selectedZone = null;
    let selectedQuantity = 0;
    const pricePerTicket = 240000;
    const serviceFee = 45000;

    const zones = document.querySelectorAll('.zone-overlay');
    const modal = document.querySelector('.modal');
    const quantityDisplay = document.querySelector('.quantity-value');
    const sidebarSelection = document.querySelector('.selection-details');
    const continueBtn = document.querySelector('.btn-continue');
    const totalDisplay = document.querySelector('.total-amount');

    zones.forEach(zone => {
        zone.addEventListener('click', () => {
            selectedZone = zone.dataset.name;
            modal.style.display = 'flex';
            document.querySelector('.modal-zone-name').innerText = selectedZone;
        });
    });

    document.querySelectorAll('.quantity-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const isAdd = btn.classList.contains('add');
            if (isAdd && selectedQuantity < 10) {
                selectedQuantity++;
            } else if (!isAdd && selectedQuantity > 0) {
                selectedQuantity--;
            }
            quantityDisplay.innerText = selectedQuantity;
        });
    });

    document.querySelector('.btn-add').addEventListener('click', () => {
        if (selectedQuantity > 0) {
            updateSidebar();
            modal.style.display = 'none';
        }
    });

    document.querySelector('.btn-cancel').addEventListener('click', () => {
        modal.style.display = 'none';
        selectedQuantity = 0;
        quantityDisplay.innerText = 0;
    });

    function updateSidebar() {
        const total = (pricePerTicket + serviceFee) * selectedQuantity;
        sidebarSelection.innerHTML = `
            <div style="font-weight: bold; margin-bottom: 5px;">${selectedZone}</div>
            <div style="font-size: 14px; color: #666;">
                Cantidad: ${selectedQuantity} boletas<br>
                Precio p/u: $${pricePerTicket.toLocaleString()}<br>
                Servicio p/u: $${serviceFee.toLocaleString()}
            </div>
        `;
        totalDisplay.innerText = `$${total.toLocaleString()}`;
        continueBtn.disabled = false;
    }

    continueBtn.addEventListener('click', () => {
        // Enviar al carrito (simulado)
        const cartData = {
            zone: selectedZone,
            quantity: selectedQuantity,
            total: (pricePerTicket + serviceFee) * selectedQuantity
        };
        localStorage.setItem('cart', JSON.stringify(cartData));
        window.location.href = '../cart/index.html';
    });
});
