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, conciertoId);
    } catch (error) {
        console.error(error);
    }
});

function cargarZonas(zonas, conciertoId) {
    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 = async function () {
            document.querySelectorAll('.zona').forEach(el => el.classList.remove('selected'));
            div.classList.add('selected');
            await mostrarAsientos(conciertoId, zona.nombre_zona, zona.capacidad);
        };
        container.appendChild(div);
    });
}

async function mostrarAsientos(conciertoId, nombreZona, capacidad) {
    const asientosContainer = document.getElementById('asientos-container');
    asientosContainer.innerHTML = "";
    asientosContainer.style.display = "flex";

    try {
        const respuesta = await fetch(`controladores/asientos_ocupados.php?id=${conciertoId}&zona=${nombreZona}`);
        if (!respuesta.ok) throw new Error("Error al cargar los asientos ocupados");
        
        const asientosOcupados = await respuesta.json();

        for (let i = 1; i <= capacidad; i++) {
            let asiento = document.createElement('div');
            asiento.classList.add('asiento');
            asiento.innerHTML = `<i class="bi bi-person-fill"></i> ${i}`;

            if (asientosOcupados.includes(i)) {
                asiento.classList.add('ocupado');
            } else {
                asiento.onclick = function () {
                    asiento.classList.toggle('seleccionado');
                };
            }
            asientosContainer.appendChild(asiento);
        }
    } catch (error) {
        console.error(error);
        alert("Error al cargar los asientos");
    }
}

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.trim());
    alert(`Zona seleccionada: ${selectedZona.textContent}\nAsientos: ${asientosSeleccionados.join(', ')}`);
});