163 lines
5.7 KiB
JavaScript
163 lines
5.7 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 alert("Debe seleccionar al menos un asiento.");
|
|
|
|
const nombreComprador = prompt("Ingrese su nombre para el boleto:");
|
|
if (!nombreComprador) return alert("Debe ingresar un nombre.");
|
|
|
|
const datos = {
|
|
asientos: Array.from(asientosSeleccionados), // Convertir Set a Array
|
|
nombre_comprador: nombreComprador
|
|
};
|
|
|
|
console.log(" Enviando datos a PHP:", JSON.stringify(datos));
|
|
|
|
try {
|
|
const respuesta = await fetch("controladores/comprar_asiento.php", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "applicat ion/json"
|
|
},
|
|
body: JSON.stringify(datos)
|
|
});
|
|
|
|
const textoRespuesta = await respuesta.text();
|
|
console.log("📥 Respuesta del servidor:", textoRespuesta);
|
|
|
|
const resultado = JSON.parse(textoRespuesta);
|
|
|
|
if (resultado.success) {
|
|
alert(resultado.message);
|
|
|
|
// Espera 2 segundos antes de redirigir
|
|
setTimeout(() => {
|
|
window.location.href = "boletos.html";
|
|
}, 2000);
|
|
|
|
} else {
|
|
alert("Error al realizar la compra: " + resultado.error);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error al comprar boletos:", error);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|