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>`; } }