Actualización (Editar y Eliminar) 3/3/25

2025-03-03 07:59:39 -06:00 · 2025-03-03 07:59:39 -06:00 · d955299678
parent 58bb1526e8
commit d955299678
10 changed files with 683 additions and 2 deletions
--- a/controladores/actualizar_concierto.php
+++ b/controladores/actualizar_concierto.php
@ -0,0 +1,68 @@
+<?php
+include 'conexion.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id'])) {
+    $id = intval($_GET['id']);
+    $consulta = "SELECT * FROM conciertos WHERE id_concierto = ?";
+    $stmt = $conexionBD->prepare($consulta);
+    $stmt->bind_param("i", $id);
+    $stmt->execute();
+    $resultado = $stmt->get_result();
+    $concierto = $resultado->fetch_assoc();
+    
+    if ($concierto) {
+        $consulta_zonas = "SELECT * FROM zonas WHERE id_concierto = ?";
+        $stmt_zonas = $conexionBD->prepare($consulta_zonas);
+        $stmt_zonas->bind_param("i", $id);
+        $stmt_zonas->execute();
+        $resultado_zonas = $stmt_zonas->get_result();
+        while ($zona = $resultado_zonas->fetch_assoc()) {
+            $concierto['zonas'][] = $zona;
+        }
+        echo json_encode($concierto);
+    } else {
+        echo json_encode(["error" => "Concierto no encontrado"]);
+    }
+    exit;
+}
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $datos = json_decode(file_get_contents("php://input"), true);
+    if (!$datos || !isset($datos['id'])) {
+        echo json_encode(["actualizacionCorrecta" => false, "error" => "Datos incompletos"]);
+        exit;
+    }
+
+    // Actualizar la información del concierto
+    $consulta = "UPDATE conciertos SET nombre_concierto=?, artista=?, fecha=?, calle=?, colonia=?, numero_direccion=?, codigo_postal=?, estado=?, capacidad_total=? WHERE id_concierto=?";
+    $stmt = $conexionBD->prepare($consulta);
+    $stmt->bind_param("ssssssissi",
+        $datos['nombre_concierto'],
+        $datos['artista'],
+        $datos['fecha'],
+        $datos['calle'],
+        $datos['colonia'],
+        $datos['numero_direccion'],
+        $datos['codigo_postal'],
+        $datos['estado'],
+        $datos['capacidad_total'],
+        $datos['id']
+    );
+    $stmt->execute();
+
+    // Actualizar la información de las zonas
+    foreach ($datos['zonas'] as $zona) {
+        $consulta_zonas = "UPDATE zonas SET capacidad=?, precio=? WHERE id_concierto=? AND nombre_zona=?";
+        $stmt_zona = $conexionBD->prepare($consulta_zonas);
+        $stmt_zona->bind_param("idis",
+            $zona['capacidad'],
+            $zona['precio'],
+            $datos['id'],
+            $zona['nombre_zona']
+        );
+        $stmt_zona->execute();
+    }
+    
+    echo json_encode(["actualizacionCorrecta" => true]);
+    exit;
+}
--- a/controladores/buscar_conciertos.php
+++ b/controladores/buscar_conciertos.php
--- a/controladores/eliminar_concierto.php
+++ b/controladores/eliminar_concierto.php
@ -0,0 +1,35 @@
+<?php
+include 'conexion.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $datos = json_decode(file_get_contents("php://input"), true);
+    
+    if (!isset($datos['id'])) {
+        echo json_encode(["eliminacionCorrecta" => false, "error" => "ID de concierto no proporcionado"]);
+        exit;
+    }
+
+    $id = intval($datos['id']);
+    
+    // Eliminar las zonas relacionadas con el concierto
+    $consulta_zonas = "DELETE FROM zonas WHERE id_concierto = ?";
+    $stmt_zonas = $conexionBD->prepare($consulta_zonas);
+    $stmt_zonas->bind_param("i", $id);
+    $stmt_zonas->execute();
+    
+    // Eliminar el concierto
+    $consulta = "DELETE FROM conciertos WHERE id_concierto = ?";
+    $stmt = $conexionBD->prepare($consulta);
+    $stmt->bind_param("i", $id);
+    $stmt->execute();
+    
+    if ($stmt->affected_rows > 0) {
+        echo json_encode(["eliminacionCorrecta" => true]);
+    } else {
+        echo json_encode(["eliminacionCorrecta" => false, "error" => "No se pudo eliminar el concierto"]);
+    }
+    exit;
+} else {
+    echo json_encode(["error" => "Método no permitido"]);
+    exit;
+}
--- a/controladores/obtener_concierto.php
+++ b/controladores/obtener_concierto.php
@ -0,0 +1,38 @@
+<?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" => "ID de concierto no proporcionado"]);
+    exit;
+}
+
+$id = intval($_GET['id']);
+$consulta = "SELECT * FROM conciertos WHERE id_concierto = ?";
+$stmt = $conexionBD->prepare($consulta);
+$stmt->bind_param("i", $id);
+$stmt->execute();
+$resultado = $stmt->get_result();
+$concierto = $resultado->fetch_assoc();
+
+if (!$concierto) {
+    echo json_encode(["error" => "Concierto no encontrado"]);
+    exit;
+}
+
+$consulta_zonas = "SELECT * FROM zonas WHERE id_concierto = ?";
+$stmt_zonas = $conexionBD->prepare($consulta_zonas);
+$stmt_zonas->bind_param("i", $id);
+$stmt_zonas->execute();
+$resultado_zonas = $stmt_zonas->get_result();
+
+$concierto['zonas'] = [];
+while ($zona = $resultado_zonas->fetch_assoc()) {
+    $concierto['zonas'][] = $zona;
+}
+
+echo json_encode($concierto);
+exit;
--- a/css/modalActualizar.css
+++ b/css/modalActualizar.css
@ -0,0 +1,40 @@
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.182);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-contenido {
+    background: #343d46;
+    width: 200px;
+    height: 100px;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+modal-contenido p{
+    color: black;
+}
+
+.btn-modal {
+    padding: 10px 20px;
+    background: #1c1b2b;
+    color: white;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.btn-modal:hover {
+    background: #0056b3;
+}
--- a/css/modalEliminar.css
+++ b/css/modalEliminar.css
@ -0,0 +1,70 @@
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-contenido {
+    background: #25253e;
+    width: 300px;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.modal-contenido p {
+    color: #ffffff;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+
+.btn-modal {
+    margin-top: 10px;
+    padding: 10px 20px;
+    background: #1c1b2b;
+    color: white;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 14px;
+    transition: background 0.3s ease-in-out;
+}
+
+.btn-modal:hover {
+    background: #0056b3;
+}
+
+.modal-confirmacion {
+    background: #2b2b3a;
+    width: 320px;
+    padding: 25px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+}
+
+#btnCancelarEliminar {
+    background: #5a6268;
+}
+
+#btnCancelarEliminar:hover {
+    background: #444b50;
+}
+
+#btnConfirmarEliminar{
+    background-color:  #f5524c;
+}
+
+#btnConfirmarEliminar:hover{
+    background: #c9302c;
+}
--- a/editarConciertos.html
+++ b/editarConciertos.html
@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Editar Concierto</title>
+    <link rel="stylesheet" href="css/conciertos.css">
+    <link rel="stylesheet" href="css/formulario.css">
+    <link rel="stylesheet" href="css/modalActualizar.css">
+</head>
+<body>
+
+    <!-- Navbar -->
+    <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>
+    </nav>
+
+    <!-- Contenedor -->
+    <div class="container">
+        <h2 class="text-center">Editar Concierto</h2>
+        <form id="formulario">
+
+            <!-- Paso 1: Datos generales -->
+            <div id="paso1">
+                <div class="mb-3">
+                    <label for="nombre_concierto">Nombre del Concierto:</label>
+                    <input type="text" id="nombre_concierto" required>
+                </div>
+                <div class="mb-3">
+                    <label for="artista">Artista:</label>
+                    <input type="text" id="artista" required>
+                </div>
+                <div class="mb-3">
+                    <label for="fecha">Fecha del Concierto:</label>
+                    <input type="date" id="fecha" required>
+                </div>
+                <button type="button" class="btn next-btn" onclick="siguientePaso(2)">Siguiente</button>
+            </div>
+
+            <!-- Paso 2: Dirección -->
+            <div id="paso2" class="d-none">
+                <div class="mb-3">
+                    <label for="calle">Calle:</label>
+                    <input type="text" id="calle" required>
+                </div>
+                <div class="mb-3">
+                    <label for="colonia">Colonia:</label>
+                    <input type="text" id="colonia" required>
+                </div>
+                <div class="mb-3">
+                    <label for="numero_direccion">Número exterior:</label>
+                    <input type="text" id="numero_direccion" required>
+                </div>
+                <div class="mb-3">
+                    <label for="codigo_postal">Código Postal:</label>
+                    <input type="text" id="codigo_postal" required>
+                </div>
+                <div class="mb-3">
+                    <label for="estado">Estado:</label>
+                    <input type="text" id="estado" required>
+                </div>
+                <div class="mb-3">
+                    <label for="capacidad_total">Capacidad Total:</label>
+                    <input type="number" id="capacidad_total" required>
+                </div>
+                <button type="button" class="btn prev-btn" onclick="siguientePaso(1)">Anterior</button>
+                <button type="button" class="btn next-btn" onclick="siguientePaso(3)">Siguiente</button>
+            </div>
+
+            <!-- Paso 3: Zonas -->
+            <div id="paso3" class="d-none">
+                <fieldset>
+                    <legend>Zonas</legend>
+                    
+                    <div class="mb-3">
+                        <label>Zona General - Capacidad:</label>
+                        <input type="number" id="capacidad_general" required oninput="actualizarCapacidad()">
+                        <label>Precio:</label>
+                        <input type="number" step="0.01" id="precio_general" required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label>Zona Plata - Capacidad:</label>
+                        <input type="number" id="capacidad_plata" required oninput="actualizarCapacidad()">
+                        <label>Precio:</label>
+                        <input type="number" step="0.01" id="precio_plata" required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label>Zona Oro - Capacidad:</label>
+                        <input type="number" id="capacidad_oro" required oninput="actualizarCapacidad()">
+                        <label>Precio:</label>
+                        <input type="number" step="0.01" id="precio_oro" required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label>Zona VIP - Capacidad:</label>
+                        <input type="number" id="capacidad_vip" required oninput="actualizarCapacidad()">
+                        <label>Precio:</label>
+                        <input type="number" step="0.01" id="precio_vip" required>
+                    </div>
+                </fieldset>
+                
+                <!-- Agregar capacidad disponible -->
+                <p>Capacidad disponible: <span id="capacidad_disponible">0</span></p>
+
+                <button type="button" class="btn prev-btn" onclick="siguientePaso(2)">Anterior</button>
+                <button type="submit" class="btn submit-btn">Actualizar Concierto</button>
+            </div>
+        </form>
+        <div id="mensaje" class="mt-3 text-center"></div>
+    </div>
+
+    <div id="modalMensaje" class="modal">
+        <div class="modal-contenido">
+            <p id="modalTexto"></p>
+            <button id="cerrarModal" class="btn-modal">Cerrar</button>
+        </div>
+    </div>
+
+    <script src="js/editarConcierto.js"></script>
+</body>
+</html>
--- a/js/conciertos.js
+++ b/js/conciertos.js
@ -5,6 +5,61 @@ document.addEventListener("DOMContentLoaded", () => {
 const listaConciertos = document.getElementById("listaConciertos");
 const buscadorBoton = document.getElementById("buscadorBoton");
 const buscadorInput = document.getElementById("buscadorColaborador");
+const modal = document.getElementById("modalMensaje");
+const modalTexto = document.getElementById("modalTexto");
+const cerrarModal = document.getElementById("cerrarModal");
+const modalConfirmacion = document.getElementById("modalConfirmacion");
+const modalConfirmarTexto = document.getElementById("modalConfirmarTexto");
+const btnConfirmarEliminar = document.getElementById("btnConfirmarEliminar");
+const btnCancelarEliminar = document.getElementById("btnCancelarEliminar");
+let conciertoIdEliminar = null; // Para almacenar el ID del concierto a eliminar
+
+// Ocultar modales al inicio
+modal.style.display = "none";
+modalConfirmacion.style.display = "none";
+
+// Función para mostrar modal de mensaje (confirmación de eliminación exitosa)
+function mostrarModal(mensaje) {
+    modalTexto.textContent = mensaje;
+    modal.style.display = "flex";
+    setTimeout(() => {
+        modal.style.display = "none";
+    }, 2000); // Se cierra automáticamente en 2 segundos
+}
+
+// Función para mostrar el modal de confirmación antes de eliminar
+function mostrarModalConfirmacion(id) {
+    conciertoIdEliminar = id;
+    modalConfirmarTexto.textContent = "¿Estás seguro de que deseas eliminar este concierto?";
+    modalConfirmacion.style.display = "flex";
+}
+
+// Evento para cerrar el modal de confirmación sin eliminar
+btnCancelarEliminar.addEventListener("click", () => {
+    modalConfirmacion.style.display = "none";
+});
+
+// Evento para confirmar eliminación
+btnConfirmarEliminar.addEventListener("click", async () => {
+    if (conciertoIdEliminar) {
+        await eliminarConcierto(conciertoIdEliminar);
+    }
+    modalConfirmacion.style.display = "none"; // Cierra el modal después de eliminar
+});
+
+// Evento para cerrar el modal de mensaje manualmente
+cerrarModal.addEventListener("click", () => {
+    modal.style.display = "none";
+});
+
+window.addEventListener("click", (event) => {
+    if (event.target === modal) {
+        modal.style.display = "none";
+    }
+    if (event.target === modalConfirmacion) {
+        modalConfirmacion.style.display = "none";
+    }
+});

 async function cargarConciertos(filtro = "") {
    try {
@ -42,8 +97,8 @@ async function cargarConciertos(filtro = "") {
                <div class="menu-container">
                    <button class="menu-btn">⋮</button>
                    <div class="menu">
-                        <button class="edit">Editar</button>
-                        <button class="delete">Eliminar</button>
+                        <button class="edit" data-id="${concierto.id}">Editar</button>
+                        <button class="delete" data-id="${concierto.id}">Eliminar</button>
                    </div>
                </div>
                <img src="img/concierto_${concierto.id}.jpg" alt="Concierto" class="card-img">
@ -58,6 +113,17 @@ async function cargarConciertos(filtro = "") {
                <button class="btn-comprar">Comprar Boletos</button>
            `;

+            // Evento para editar
+            tarjeta.querySelector(".edit").addEventListener("click", () => {
+                window.location.href = `editarConciertos.html?id=${concierto.id}`;
+            });
+
+            // Evento para eliminar usando el modal de confirmación
+            tarjeta.querySelector(".delete").addEventListener("click", (e) => {
+                const id = e.target.dataset.id;
+                mostrarModalConfirmacion(id);
+            });
+
            listaConciertos.appendChild(tarjeta);
            tarjetas.push(tarjeta);
        });
@ -91,3 +157,27 @@ document.addEventListener("click", (e) => {
        });
    }
 });
+
+/** 🔹 Función para eliminar el concierto usando modal */
+async function eliminarConcierto(id) {
+    try {
+        const respuesta = await fetch("controladores/eliminar_concierto.php", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ id })
+        });
+
+        const resultado = await respuesta.json();
+        if (resultado.eliminacionCorrecta) {
+            mostrarModal("Concierto eliminado correctamente");
+            cargarConciertos(); // Recargar la lista
+        } else {
+            mostrarModal("Error al eliminar el concierto");
+        }
+    } catch (error) {
+        console.error(error);
+        mostrarModal("Error de conexión con el servidor");
+    }
+}
--- a/js/editarConcierto.js
+++ b/js/editarConcierto.js
@ -0,0 +1,194 @@
+const params = new URLSearchParams(window.location.search);
+const conciertoId = params.get("id");
+const formulario = document.getElementById("formulario");
+const modal = document.getElementById("modalMensaje");
+const modalTexto = document.getElementById("modalTexto");
+const cerrarModal = document.getElementById("cerrarModal");
+let capacidadTotal = 0;
+
+modal.style.display = "none";
+
+function mostrarModal(mensaje) {
+    modalTexto.textContent = mensaje;
+    modal.style.display = "flex";
+}
+
+cerrarModal.addEventListener("click", () => {
+    modal.style.display = "none";
+});
+
+window.addEventListener("click", (event) => {
+    if (event.target === modal) {
+        modal.style.display = "none";
+    }
+});
+
+function siguientePaso(paso) {
+    document.querySelectorAll("[id^='paso']").forEach(p => p.classList.add("d-none"));
+    document.getElementById(`paso${paso}`).classList.remove("d-none");
+
+    if (paso === 3) {
+        capacidadTotal = parseInt(document.getElementById("capacidad_total").value) || 0;
+        document.getElementById("capacidad_disponible").textContent = capacidadTotal;
+        // ✅ Llamar a actualizar capacidad después de cargar los datos
+        actualizarCapacidad();
+    }
+}
+
+// ✅ Función para actualizar la capacidad disponible
+function actualizarCapacidad() {
+    let sumaZonas = 0;
+    ["capacidad_general", "capacidad_plata", "capacidad_oro", "capacidad_vip"].forEach(id => {
+        sumaZonas += parseInt(document.getElementById(id).value) || 0;
+    });
+
+    let capacidadDisponibleElement = document.getElementById("capacidad_disponible");
+    let restante = capacidadTotal - sumaZonas;
+
+    if (restante < 0) {
+        capacidadDisponibleElement.textContent = "⚠️ Excede la capacidad total";
+        capacidadDisponibleElement.style.color = "red";
+    } else if (restante > 0) {
+        capacidadDisponibleElement.textContent = `⚠️ Faltan ${restante} lugares`;
+        capacidadDisponibleElement.style.color = "orange";
+    } else {
+        capacidadDisponibleElement.textContent = `✅ Todo correcto`;
+        capacidadDisponibleElement.style.color = "green";
+    }
+}
+
+// ✅ Función para validar la capacidad antes de actualizar
+function validarCapacidadZonas() {
+    let sumaZonas = 0;
+    ["capacidad_general", "capacidad_plata", "capacidad_oro", "capacidad_vip"].forEach(id => {
+        sumaZonas += parseInt(document.getElementById(id).value) || 0;
+    });
+
+    let capacidadTotalInput = parseInt(document.getElementById("capacidad_total").value);
+
+    if (sumaZonas < capacidadTotalInput) {
+        mostrarModal(`⚠️ Error: La suma de las capacidades es menor`);
+        return false;
+    }
+
+    if (sumaZonas > capacidadTotalInput) {
+        mostrarModal(`⚠️ Error: La suma de las capacidades es mayor`);
+        return false;
+    }
+
+    return true;
+}
+
+// ✅ Bloquear la actualización si la validación no pasa
+formulario.addEventListener("submit", async (event) => {
+    event.preventDefault();
+
+    if (!validarCapacidadZonas()) {
+        return; // 🚫 Bloquear la actualización si la validación falla
+    }
+
+    await actualizarConcierto(conciertoId);
+});
+
+// ✅ Función para cargar los datos del concierto
+async function cargarDatosConcierto(id) {
+    try {
+        const respuesta = await fetch(`/ProyectoTicketFei/controladores/obtener_concierto.php?id=${id}`);
+        if (!respuesta.ok) throw new Error("Error al cargar los datos del concierto");
+
+        const concierto = await respuesta.json();
+
+        document.getElementById("nombre_concierto").value = concierto.nombre_concierto;
+        document.getElementById("artista").value = concierto.artista;
+        document.getElementById("fecha").value = concierto.fecha;
+        document.getElementById("calle").value = concierto.calle;
+        document.getElementById("colonia").value = concierto.colonia;
+        document.getElementById("numero_direccion").value = concierto.numero_direccion;
+        document.getElementById("codigo_postal").value = concierto.codigo_postal;
+        document.getElementById("estado").value = concierto.estado;
+        document.getElementById("capacidad_total").value = concierto.capacidad_total;
+        capacidadTotal = parseInt(concierto.capacidad_total); // Guardar la capacidad total
+
+        if (concierto.zonas && concierto.zonas.length > 0) {
+            concierto.zonas.forEach(zona => {
+                switch (zona.nombre_zona) {
+                    case "General":
+                        document.getElementById("capacidad_general").value = zona.capacidad;
+                        document.getElementById("precio_general").value = zona.precio;
+                        break;
+                    case "Plata":
+                        document.getElementById("capacidad_plata").value = zona.capacidad;
+                        document.getElementById("precio_plata").value = zona.precio;
+                        break;
+                    case "Oro":
+                        document.getElementById("capacidad_oro").value = zona.capacidad;
+                        document.getElementById("precio_oro").value = zona.precio;
+                        break;
+                    case "VIP":
+                        document.getElementById("capacidad_vip").value = zona.capacidad;
+                        document.getElementById("precio_vip").value = zona.precio;
+                        break;
+                }
+            });
+        } else {
+            console.warn("⚠️ No se encontraron zonas para este concierto.");
+        }
+
+    } catch (error) {
+        console.error("❌ Error en cargarDatosConcierto:", error);
+    }
+}
+
+// ✅ Función para actualizar el concierto
+async function actualizarConcierto(id) {
+    if (!validarCapacidadZonas()) return; // 🚫 Bloquear la actualización si la validación falla
+
+    const datosConcierto = {
+        id: id,
+        nombre_concierto: document.getElementById("nombre_concierto").value.trim(),
+        artista: document.getElementById("artista").value.trim(),
+        fecha: document.getElementById("fecha").value,
+        calle: document.getElementById("calle").value.trim(),
+        colonia: document.getElementById("colonia").value.trim(),
+        numero_direccion: document.getElementById("numero_direccion").value.trim(),
+        codigo_postal: document.getElementById("codigo_postal").value.trim(),
+        estado: document.getElementById("estado").value.trim(),
+        capacidad_total: document.getElementById("capacidad_total").value,
+        zonas: [
+            { nombre_zona: "General", capacidad: document.getElementById("capacidad_general").value, precio: document.getElementById("precio_general").value },
+            { nombre_zona: "Plata", capacidad: document.getElementById("capacidad_plata").value, precio: document.getElementById("precio_plata").value },
+            { nombre_zona: "Oro", capacidad: document.getElementById("capacidad_oro").value, precio: document.getElementById("precio_oro").value },
+            { nombre_zona: "VIP", capacidad: document.getElementById("capacidad_vip").value, precio: document.getElementById("precio_vip").value }
+        ]
+    };
+
+    try {
+        const respuesta = await fetch("/ProyectoTicketFei/controladores/actualizar_concierto.php", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(datosConcierto)
+        });
+
+        const resultado = await respuesta.json();
+        if (resultado.actualizacionCorrecta) {
+            mostrarModal("✅ Concierto actualizado correctamente");
+            setTimeout(() => {
+                window.location.href = "ventanaConciertos.html";
+            }, 2000);
+        } else {
+            mostrarModal("⚠️ Error al actualizar el concierto");
+        }
+    } catch (error) {
+        console.error(error);
+        mostrarModal("⚠️ Error de conexión con el servidor");
+    }
+}
+
+// ✅ Llamar a cargar los datos cuando la página cargue
+(async function () {
+    if (conciertoId) {
+        await cargarDatosConcierto(conciertoId);
+    }
+})();
--- a/ventanaConciertos.html
+++ b/ventanaConciertos.html
@ -7,6 +7,7 @@
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <link rel="stylesheet" href="css/conciertos.css">
+    <link rel="stylesheet" href="css/modalEliminar.css">
 </head>
 <body>

@ -25,6 +26,23 @@

    <div id="listaConciertos"></div>

+    <!-- Modal de mensaje -->
+    <div id="modalMensaje" class="modal">
+        <div id="modalPanel" class="modal-contenido">
+            <p id="modalTexto"></p>
+            <button id="cerrarModal" class="btn-modal">Cerrar</button>
+        </div>
+    </div>
+
+    <!-- Modal de confirmación -->
+    <div id="modalConfirmacion" class="modal">
+        <div class="modal-contenido">
+            <p id="modalConfirmarTexto"></p>
+            <button id="btnCancelarEliminar" class="btn-modal">Cancelar</button>
+            <button id="btnConfirmarEliminar" class="btn-modal">Eliminar</button>
+        </div>
+    </div>
+
    <script src="js/conciertos.js"></script>

 </body>