138 lines
5.1 KiB
JavaScript
138 lines
5.1 KiB
JavaScript
document.addEventListener("DOMContentLoaded", async () => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const conciertoId = params.get("id");
|
|
|
|
if (!conciertoId) {
|
|
console.error("Error: No se proporcionó un ID de concierto en la URL.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const respuesta = await fetch(`controladores/concierto_zonas.php?id_concierto=${conciertoId}`);
|
|
if (!respuesta.ok) throw new Error("Error al cargar los datos del concierto");
|
|
|
|
const concierto = await respuesta.json();
|
|
|
|
if (concierto.error) {
|
|
console.error(`Error: ${concierto.error}`);
|
|
return;
|
|
}
|
|
|
|
// Mostrar información del concierto
|
|
document.getElementById("nombre_concierto").textContent = concierto.nombre_concierto;
|
|
document.getElementById("artista").textContent = `Artista: ${concierto.artista}`;
|
|
document.getElementById("fecha").textContent = `Fecha: ${concierto.fecha}`;
|
|
|
|
// Mostrar zonas del concierto
|
|
const zonasContainer = document.getElementById("zonas-container");
|
|
zonasContainer.innerHTML = "";
|
|
|
|
if (!concierto.zonas || concierto.zonas.length === 0) {
|
|
console.error("No se encontraron zonas para este concierto.");
|
|
return;
|
|
}
|
|
|
|
concierto.zonas.forEach(zona => {
|
|
const zonaBtn = document.createElement("button");
|
|
zonaBtn.classList.add("boton-zona");
|
|
zonaBtn.textContent = `Ver Zona ${zona.nombre_zona}`;
|
|
zonaBtn.dataset.idZona = zona.id_zona;
|
|
|
|
zonaBtn.addEventListener("click", () => cargarDatosZona(zona));
|
|
|
|
zonasContainer.appendChild(zonaBtn);
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error("Error al obtener los datos del concierto:", error);
|
|
}
|
|
});
|
|
|
|
async function cargarDatosZona(zona) {
|
|
if (!zona) {
|
|
console.error("Error: Datos de zona no disponibles");
|
|
return;
|
|
}
|
|
|
|
// Mostrar información de la zona
|
|
document.getElementById("zonaNombre").textContent = `Zona: ${zona.nombre_zona || 'N/A'}`;
|
|
document.getElementById("zonaCapacidad").textContent = `Capacidad: ${zona.capacidad || 'N/A'}`;
|
|
document.getElementById("zonaPrecio").textContent = `Precio: $${zona.precio || 'N/A'}`;
|
|
document.getElementById("asientosDisponibles").textContent = `Disponibles: ${zona.asientos_disponibles ?? 0}`;
|
|
document.getElementById("asientosOcupados").textContent = `Ocupados: ${zona.asientos_ocupados ?? 0}`;
|
|
|
|
// Cargar los asientos disponibles
|
|
await cargarAsientos(zona.id_zona);
|
|
}
|
|
|
|
async function cargarAsientos(idZona) {
|
|
try {
|
|
const respuesta = await fetch(`controladores/obtener_asiento.php?id_zona=${idZona}`);
|
|
if (!respuesta.ok) throw new Error("Error al cargar los asientos");
|
|
|
|
const asientos = await respuesta.json();
|
|
|
|
const asientosContainer = document.getElementById("asientos-container");
|
|
asientosContainer.innerHTML = ""; // Limpiar antes de agregar nuevos
|
|
|
|
asientos.forEach(asiento => {
|
|
const asientoDiv = document.createElement("div");
|
|
asientoDiv.classList.add("asiento", asiento.estado);
|
|
asientoDiv.dataset.idAsiento = asiento.id_asiento;
|
|
asientoDiv.setAttribute("title", `Asiento #${asiento.id_asiento}`);
|
|
|
|
const icono = document.createElement("i");
|
|
icono.classList.add("bi", "bi-person-fill");
|
|
|
|
if (asiento.estado === "disponible") {
|
|
asientoDiv.appendChild(icono);
|
|
asientoDiv.addEventListener("click", () => seleccionarAsiento(asientoDiv, asiento.id_asiento));
|
|
} else {
|
|
icono.style.opacity = "0.3"; // Opacidad para los asientos ocupados
|
|
asientoDiv.appendChild(icono);
|
|
}
|
|
|
|
asientosContainer.appendChild(asientoDiv);
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error("Error al obtener los asientos:", error);
|
|
}
|
|
}
|
|
|
|
const asientosSeleccionados = new Set();
|
|
|
|
function seleccionarAsiento(elemento, idAsiento) {
|
|
if (asientosSeleccionados.has(idAsiento)) {
|
|
asientosSeleccionados.delete(idAsiento);
|
|
elemento.classList.remove("seleccionado");
|
|
} else {
|
|
asientosSeleccionados.add(idAsiento);
|
|
elemento.classList.add("seleccionado");
|
|
}
|
|
|
|
document.getElementById("comprarBoletos").disabled = asientosSeleccionados.size === 0;
|
|
}
|
|
|
|
document.getElementById("comprarBoletos").addEventListener("click", async () => {
|
|
if (asientosSeleccionados.size === 0) return;
|
|
|
|
try {
|
|
const respuesta = await fetch("controladores/comprar_asiento.php", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ asientos: Array.from(asientosSeleccionados) })
|
|
});
|
|
|
|
const resultado = await respuesta.json();
|
|
if (resultado.success) {
|
|
alert("Compra realizada con éxito.");
|
|
location.reload();
|
|
} else {
|
|
alert("Error al realizar la compra.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error al comprar boletos:", error);
|
|
}
|
|
});
|