85 lines
3.1 KiB
JavaScript
85 lines
3.1 KiB
JavaScript
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);
|
|
alert("Error al cargar los datos del concierto");
|
|
}
|
|
});
|
|
|
|
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(', ')}`);
|
|
});
|