Actualizado 5/3/25

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();
+?>

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

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

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;

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(', ')}`);
+});

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>
+    <title>Compra de Boletos</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="css/ventanaPrincipal.css">
+    <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>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <a href="ventanaInsertarConcierto.html" class="navbar-brand">TicketFei</a>
-        <div class="container-fluid">
+        <div class="nav-links">
-            <a class="navbar-brand" href="ventanaPrincipal.html">TicketFei</a>
+            <a href="ventanaInsertarConcierto.html">Crear Conciertos</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+            <a href="ventanaConciertos.html">Ver Conciertos</a>
-                <span class="navbar-toggler-icon"></span>
+            <a href="#">Reporte Ventas</a>
-            </button>
+        </div>
-            <div class="collapse navbar-collapse" id="navbarNav">
+        <div class="search-container">
-                <ul class="navbar-nav me-auto">
+            <input type="search" id="buscadorColaborador" placeholder="Buscar...">
-                    <li class="nav-item">
+            <button id="buscadorBoton">Buscar</button>
-                        <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>
         </div>
     </nav>
 
-
+    <div class="container mt-4 text-center">
-    <div class="container mt-5">
+        <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>