document.addEventListener("DOMContentLoaded", () => {
    cargarConciertos();
});

const listaConciertos = document.getElementById("listaConciertos");

// Función para cargar conciertos
async function cargarConciertos() {
    try {
        const respuesta = await fetch('controladores/conciertos.php');
        if (!respuesta.ok) throw new Error("Error al cargar conciertos");

        const conciertos = await respuesta.json();
        listaConciertos.innerHTML = ""; // Limpiar la lista antes de agregar nuevos

        let tarjetas = [];

        conciertos.forEach(concierto => {
            const tarjeta = document.createElement("div");
            tarjeta.classList.add("concierto-card");

            let zonasHTML = "";
            if (concierto.zonas.length > 0) {
                zonasHTML = `<ul class="text-sm card-text">`;
                concierto.zonas.forEach(zona => {
                    zonasHTML += `<li>🔹 ${zona.nombre_zona}: <b>${zona.capacidad} asientos</b> - $${zona.precio}</li>`;
                });
                zonasHTML += `</ul>`;
            }

            tarjeta.innerHTML = `
                <img src="img/concierto_${concierto.id}.jpg" alt="Concierto">
                <div class="card-body">
                    <h3 class="card-title">${concierto.nombre_concierto}</h3>
                    <p class="card-text">🎤 ${concierto.artista}</p>
                    <p class="card-text">📅 ${concierto.fecha}</p>
                    <p class="card-text">📍 ${concierto.direccion || 'No definida'}</p>
                    <p class="card-text">🎟 ${concierto.capacidad_total} Asistentes</p>
                    ${zonasHTML}
                </div>
                <button class="btn-comprar">Comprar Boletos</button>
            `;

            listaConciertos.appendChild(tarjeta);
            tarjetas.push(tarjeta);
        });

        // Aplicar animación GSAP
        gsap.fromTo(
            tarjetas,
            { opacity: 0, scale: 0.9 },
            { opacity: 1, scale: 1, duration: 0.6, stagger: 0.2, ease: "power3.out" }
        );

    } catch (error) {
        console.error(error);
        listaConciertos.innerHTML = `<p class="text-red-500">No se pudieron cargar los conciertos.</p>`;
    }
}