document.addEventListener("DOMContentLoaded", async () => {
    const urlParams = new URLSearchParams(window.location.search);
    const conciertoId = urlParams.get("id");
    if (!conciertoId) {
        alert("No se encontró el ID del concierto.");
        return;
    }
    
    try {
        const respuesta = await fetch(`controladores/concierto_zonas.php?id=${conciertoId}`);
        if (!respuesta.ok) throw new Error("Error al cargar las zonas del concierto");
        
        const zonas = await respuesta.json();
        cargarZonas(zonas);
    } catch (error) {
        console.error(error);
        alert("Error al cargar los datos del concierto");
    }
});

function cargarZonas(zonas) {
    const container = document.getElementById('zonas-container');
    container.innerHTML = "";

    zonas.forEach(zona => {
        let div = document.createElement('div');
        div.classList.add('zona', zona.nombre_zona.toLowerCase());
        div.textContent = `${zona.nombre_zona} - ${zona.capacidad} asientos - $${zona.precio}`;
        div.onclick = function() {
            document.querySelectorAll('.zona').forEach(el => el.classList.remove('selected'));
            div.classList.add('selected');
            mostrarAsientos(zona.capacidad);
        };
        container.appendChild(div);
    });
}

function mostrarAsientos(capacidad) {
    const asientosContainer = document.getElementById('asientos-container');
    asientosContainer.innerHTML = "";
    asientosContainer.style.display = "flex";
    
    for (let i = 0; i < capacidad; i++) {
        let asiento = document.createElement('div');
        asiento.classList.add('asiento');
        asiento.textContent = i + 1;
        asiento.onclick = function() {
            asiento.classList.toggle('seleccionado');
        };
        asientosContainer.appendChild(asiento);
    }
}

document.getElementById("confirmarSeleccion").addEventListener("click", () => {
    let selectedZona = document.querySelector('.zona.selected');
    if (!selectedZona) {
        alert("No has seleccionado ninguna zona.");
        return;
    }
    let selectedAsientos = document.querySelectorAll('.asiento.seleccionado');
    if (selectedAsientos.length === 0) {
        alert("No has seleccionado ningún asiento.");
        return;
    }
    let asientosSeleccionados = Array.from(selectedAsientos).map(asiento => asiento.textContent);
    alert(`Zona seleccionada: ${selectedZona.textContent}\nAsientos: ${asientosSeleccionados.join(', ')}`);
});