diff --git a/controladores/concierto_zonas.php b/controladores/concierto_zonas.php
new file mode 100644
index 0000000..881d12d
--- /dev/null
+++ b/controladores/concierto_zonas.php
@@ -0,0 +1,44 @@
+<?php
+include 'conexion.php';
+
+header('Content-Type: application/json');
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
+
+if (!isset($_GET['id'])) {
+ echo json_encode(["error" => "No se proporcion贸 un ID de concierto"]);
+ exit;
+}
+
+$conciertoId = intval($_GET['id']);
+
+$consulta = "SELECT nombre_zona, capacidad, precio FROM zonas WHERE id_concierto = ? ORDER BY FIELD(nombre_zona, 'General', 'Plata', 'Oro', 'VIP')";
+
+$stmt = $conexionBD->prepare($consulta);
+if (!$stmt) {
+ echo json_encode(["error" => "Error en la preparaci贸n de la consulta: " . $conexionBD->error]);
+ exit;
+}
+
+$stmt->bind_param('i', $conciertoId);
+$stmt->execute();
+$resultado = $stmt->get_result();
+
+$zonas = [];
+while ($fila = $resultado->fetch_assoc()) {
+ $zonas[] = [
+ 'nombre_zona' => $fila['nombre_zona'],
+ 'capacidad' => $fila['capacidad'],
+ 'precio' => $fila['precio']
+ ];
+}
+
+if (empty($zonas)) {
+ echo json_encode(["error" => "No se encontraron zonas para este concierto"]);
+} else {
+ echo json_encode($zonas, JSON_PRETTY_PRINT);
+}
+
+$stmt->close();
+$conexionBD->close();
+?>
\ No newline at end of file
diff --git a/css/zonas.css b/css/zonas.css
new file mode 100644
index 0000000..6e2a65d
--- /dev/null
+++ b/css/zonas.css
@@ -0,0 +1,101 @@
+.mapa-estadio {
+ position: relative;
+ width: 600px;
+ height: 500px;
+ background-color: #f0f0f0;
+ border-radius: 50% 50% 0 0;
+ margin: auto;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.escenario {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ height: 140px;
+ background-color: black;
+ color: white;
+ text-align: center;
+ line-height: 60px;
+ font-weight: bold;
+ border-radius: 10px 10px 0 0;
+}
+
+.zona {
+ position: absolute;
+ cursor: pointer;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: bold;
+ color: white;
+ border-radius: 50% 50% 0 0;
+}
+
+.general {
+ background-color: gray;
+ width: 100%;
+ height: 40%;
+ bottom: 10%;
+ left: 0;
+ border-radius: 50% 50% 0 0;
+}
+
+.plata {
+ background-color: silver;
+ width: 80%;
+ height: 30%;
+ bottom: 20%;
+ left: 10%;
+ border-radius: 50% 50% 0 0;
+}
+
+.oro {
+ background-color: gold;
+ width: 60%;
+ height: 25%;
+ bottom: 30%;
+ left: 20%;
+ border-radius: 50% 50% 0 0;
+}
+
+.vip {
+ background-color: purple;
+ width: 40%;
+ height: 20%;
+ bottom: 10%;
+ left: 30%;
+ border-radius: 50% 50% 0 0;
+}
+
+.selected { border: 3px solid red; }
+
+.asientos-container {
+ display: none;
+ margin-top: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.asiento {
+ width: 30px;
+ height: 30px;
+ margin: 5px;
+ display: inline-block;
+ text-align: center;
+ line-height: 30px;
+ border-radius: 5px;
+ cursor: pointer;
+ background-color: green;
+ color: white;
+}
+
+.asiento.seleccionado { background-color: orange; }
\ No newline at end of file
diff --git a/js/conciertos.js b/js/conciertos.js
index 4f44c17..0494e1f 100644
--- a/js/conciertos.js
+++ b/js/conciertos.js
@@ -110,7 +110,7 @@ async function cargarConciertos(filtro = "") {
<p class="card-text">馃師 ${concierto.capacidad_total} Asistentes</p>
${zonasHTML}
</div>
- <button class="btn-comprar">Comprar Boletos</button>
+ <button class="btn-comprar" data-id="${concierto.id}">Comprar Boletos</button>
`;
// Evento para editar
@@ -124,6 +124,11 @@ async function cargarConciertos(filtro = "") {
mostrarModalConfirmacion(id);
});
+ tarjeta.querySelector(".btn-comprar").addEventListener("click", (e) => {
+ const id = e.target.dataset.id;
+ window.location.href = `ventaBoletos.html?id=${id}`;
+ });
+
listaConciertos.appendChild(tarjeta);
tarjetas.push(tarjeta);
});
diff --git a/js/crearConciertos.js b/js/crearConciertos.js
index fc892ed..82abb6a 100644
--- a/js/crearConciertos.js
+++ b/js/crearConciertos.js
@@ -9,28 +9,39 @@ document.addEventListener("DOMContentLoaded", () => {
if (paso === 3) {
capacidadTotal = parseInt(document.getElementById("capacidad_total").value) || 0;
- document.getElementById("capacidad_disponible").textContent = capacidadTotal;
+ const capacidadDisponible = document.getElementById("capacidad_disponible");
+ if (capacidadDisponible) {
+ capacidadDisponible.textContent = capacidadTotal;
+ }
}
}
function actualizarCapacidad() {
let asignado = 0;
["capacidad_general", "capacidad_plata", "capacidad_oro", "capacidad_vip"].forEach(id => {
- asignado += parseInt(document.getElementById(id).value) || 0;
+ const input = document.getElementById(id);
+ if (input) {
+ asignado += parseInt(input.value) || 0;
+ }
});
const restante = capacidadTotal - asignado;
- document.getElementById("capacidad_disponible").textContent = restante < 0 ? "Excede la capacidad total" : restante;
+ const capacidadDisponible = document.getElementById("capacidad_disponible");
+ if (capacidadDisponible) {
+ capacidadDisponible.textContent = restante < 0 ? "Excede la capacidad total" : restante;
+ }
}
formulario.addEventListener("submit", async (event) => {
event.preventDefault();
- if (parseInt(document.getElementById("capacidad_disponible").textContent) < 0) {
+ const capacidadDisponible = document.getElementById("capacidad_disponible");
+ if (capacidadDisponible && parseInt(capacidadDisponible.textContent) < 0) {
mensajeDiv.innerHTML = '<div class="alert alert-danger">Error: La suma de capacidades de zonas no puede exceder la capacidad total.</div>';
return;
}
+ // 馃敼 Construir objeto JSON con todas las zonas
const datosConcierto = {
nombre_concierto: document.getElementById("nombre_concierto").value.trim(),
artista: document.getElementById("artista").value.trim(),
@@ -40,10 +51,59 @@ document.addEventListener("DOMContentLoaded", () => {
numero_direccion: document.getElementById("numero_direccion").value.trim(),
codigo_postal: document.getElementById("codigo_postal").value.trim(),
estado: document.getElementById("estado").value.trim(),
- capacidad_total: capacidadTotal
+ capacidad_total: capacidadTotal,
+ zonas: [
+ {
+ nombre_zona: "General",
+ capacidad: parseInt(document.getElementById("capacidad_general").value) || 0,
+ precio: parseFloat(document.getElementById("precio_general").value) || 0
+ },
+ {
+ nombre_zona: "Plata",
+ capacidad: parseInt(document.getElementById("capacidad_plata").value) || 0,
+ precio: parseFloat(document.getElementById("precio_plata").value) || 0
+ },
+ {
+ nombre_zona: "Oro",
+ capacidad: parseInt(document.getElementById("capacidad_oro").value) || 0,
+ precio: parseFloat(document.getElementById("precio_oro").value) || 0
+ },
+ {
+ nombre_zona: "VIP",
+ capacidad: parseInt(document.getElementById("capacidad_vip").value) || 0,
+ precio: parseFloat(document.getElementById("precio_vip").value) || 0
+ }
+ ]
};
- mensajeDiv.innerHTML = '<div class="alert alert-success">Concierto registrado correctamente.</div>';
+ console.log("Enviando datos:", JSON.stringify(datosConcierto)); // Depuraci贸n
+
+ try {
+ const respuesta = await fetch("controladores/insertar_concierto.php", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify(datosConcierto)
+ });
+
+ const resultado = await respuesta.json();
+ console.log("Respuesta del servidor:", resultado); // Depuraci贸n
+
+ if (!resultado.insercionCorrecta) {
+ throw new Error(resultado.error || "Error al guardar el concierto");
+ }
+
+ mensajeDiv.innerHTML = '<div class="alert alert-success">Concierto registrado correctamente.</div>';
+
+ setTimeout(() => {
+ window.location.href = "ventanaConciertos.html";
+ }, 2000);
+
+ } catch (error) {
+ console.error("Error:", error);
+ mensajeDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
+ }
});
window.siguientePaso = siguientePaso;
diff --git a/js/ventaBoletos.js b/js/ventaBoletos.js
new file mode 100644
index 0000000..6f859fc
--- /dev/null
+++ b/js/ventaBoletos.js
@@ -0,0 +1,67 @@
+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);
+ } catch (error) {
+ console.error(error);
+ alert("Error al cargar los datos del concierto");
+ }
+});
+
+function cargarZonas(zonas) {
+ 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 = function() {
+ document.querySelectorAll('.zona').forEach(el => el.classList.remove('selected'));
+ div.classList.add('selected');
+ mostrarAsientos(zona.capacidad);
+ };
+ container.appendChild(div);
+ });
+}
+
+function mostrarAsientos(capacidad) {
+ const asientosContainer = document.getElementById('asientos-container');
+ asientosContainer.innerHTML = "";
+ asientosContainer.style.display = "flex";
+
+ for (let i = 0; i < capacidad; i++) {
+ let asiento = document.createElement('div');
+ asiento.classList.add('asiento');
+ asiento.textContent = i + 1;
+ asiento.onclick = function() {
+ asiento.classList.toggle('seleccionado');
+ };
+ asientosContainer.appendChild(asiento);
+ }
+}
+
+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);
+ alert(`Zona seleccionada: ${selectedZona.textContent}\nAsientos: ${asientosSeleccionados.join(', ')}`);
+});
diff --git a/ventaBoletos.html b/ventaBoletos.html
index a0605fb..3450ec5 100644
--- a/ventaBoletos.html
+++ b/ventaBoletos.html
@@ -3,50 +3,45 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Registro de Conciertos</title>
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
- <link rel="stylesheet" href="css/ventanaPrincipal.css">
+ <title>Compra de Boletos</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+ <script defer src="js/ventaBoletos.js"></script>
+ <link rel="stylesheet" href="css/conciertos.css">
+ <link rel="stylesheet" href="css/zonas.css">
</head>
<body>
-
-
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
- <div class="container-fluid">
- <a class="navbar-brand" href="ventanaPrincipal.html">TicketFei</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav me-auto">
- <li class="nav-item">
- <a class="nav-link active" href="ventanaPrincipal.html">Conciertos</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Reporte Ventas</a>
- </li>
- <li class="nav-item">
- <form class="d-flex">
- <input class="form-control me-2" type="search" id="buscadorColaborador" placeholder="Buscar concierto" aria-label="Buscar">
- <button class="btn btn-outline-light" type="submit" id="buscadorBoton">
- <i class="bi bi-search"></i>
- </button>
- </form>
- </li>
-
- </ul>
- <button class="btn btn-danger" id="cerrarSesion">Cerrar Sesi贸n</button>
-
- </div>
+
+ <nav>
+ <a href="ventanaInsertarConcierto.html" class="navbar-brand">TicketFei</a>
+ <div class="nav-links">
+ <a href="ventanaInsertarConcierto.html">Crear Conciertos</a>
+ <a href="ventanaConciertos.html">Ver Conciertos</a>
+ <a href="#">Reporte Ventas</a>
+ </div>
+ <div class="search-container">
+ <input type="search" id="buscadorColaborador" placeholder="Buscar...">
+ <button id="buscadorBoton">Buscar</button>
</div>
</nav>
-
- <div class="container mt-5">
-
-
+ <div class="container mt-4 text-center">
+ <h2>Selecciona tu zona</h2>
+ </div>
+
+ <div class="mapa-estadio">
+ <div class="escenario">ESCENARIO</div>
+ <div class="zona general" onclick="seleccionarZona('General')">General</div>
+ <div class="zona plata" onclick="seleccionarZona('Plata')">Plata</div>
+ <div class="zona oro" onclick="seleccionarZona('Oro')">Oro</div>
+ <div class="zona vip" onclick="seleccionarZona('VIP')">VIP</div>
+ </div>
+
+ <div id="asientos-container" class="asientos-container"></div>
+
+ <div class="text-center mt-3">
+ <button class="btn btn-primary" id="confirmarSeleccion">Confirmar selecci贸n</button>
</div>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
- <script src="js/conciertos.js"></script>
</body>
-</html>
+</html>
\ No newline at end of file