ProyectoTicketFei/js/conciertos.js

document.addEventListener("DOMContentLoaded", () => {
    cargarConciertos();
});

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 {
        const respuesta = await fetch('controladores/conciertos.php');
        if (!respuesta.ok) throw new Error("Error al cargar conciertos");

        const conciertos = await respuesta.json();
        listaConciertos.innerHTML = "";

        const conciertosFiltrados = filtro
            ? conciertos.filter(c => c.nombre_concierto.toLowerCase().includes(filtro.toLowerCase()))
            : conciertos;

        if (conciertosFiltrados.length === 0) {
            listaConciertos.innerHTML = `<p class="text-red-500 text-center">No se encontraron conciertos.</p>`;
            return;
        }

        let tarjetas = [];

        conciertosFiltrados.forEach((concierto) => {
            const tarjeta = document.createElement("div");
            tarjeta.classList.add("concierto-card");

            let zonasHTML = "";
            if (concierto.zonas.length > 0) {
                zonasHTML = `<ul class="text-sm text-gray-300 mt-2">`;
                concierto.zonas.forEach(zona => {
                    zonasHTML += `<li>🔹 ${zona.nombre_zona}: <b>${zona.capacidad} asientos</b> - $${zona.precio}</li>`;
                });
                zonasHTML += `</ul>`;
            }

            tarjeta.innerHTML = `
                <div class="menu-container">
                    <button class="menu-btn">⋮</button>
                    <div class="menu">
                        <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">
                <div class="card-body">
                    <h3 class="card-title">${concierto.nombre_concierto}</h3>
                    <p class="card-text">🎤 ${concierto.artista}</p>
                    <p class="card-text">📅 ${concierto.fecha}</p>
                    <p class="card-text">📍 ${concierto.direccion || 'No definida'}</p>
                    <p class="card-text">🎟 ${concierto.capacidad_total} Asistentes</p>
                    ${zonasHTML}
                </div>
                <button class="btn-comprar" data-id="${concierto.id}">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);
            });

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

        gsap.fromTo(
            tarjetas,
            { opacity: 0, scale: 0.9 },
            { opacity: 1, scale: 1, duration: 0.6, stagger: 0.2, ease: "power3.out" }
        );

    } catch (error) {
        console.error(error);
        listaConciertos.innerHTML = `<p class="text-red-500">No se pudieron cargar los conciertos.</p>`;
    }
}

buscadorBoton.addEventListener('click', (event) => {
    event.preventDefault();
    const termino = buscadorInput.value.trim();
    cargarConciertos(termino);
});

document.addEventListener("click", (e) => {
    if (e.target.classList.contains("menu-btn")) {
        e.stopPropagation();
        let menu = e.target.nextElementSibling;
        menu.style.display = menu.style.display === "block" ? "none" : "block";
    } else {
        document.querySelectorAll(".menu").forEach(menu => {
            menu.style.display = "none";
        });
    }
});

/** 🔹 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");
    }
}