document.addEventListener("DOMContentLoaded", () => {
    const formulario = document.getElementById("formulario");
    const mensajeDiv = document.getElementById("mensaje");
    let capacidadTotal = 0;

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

    function actualizarCapacidad() {
        let asignado = 0;
        ["capacidad_general", "capacidad_plata", "capacidad_oro", "capacidad_vip"].forEach(id => {
            asignado += parseInt(document.getElementById(id).value) || 0;
        });

        const restante = capacidadTotal - asignado;
        document.getElementById("capacidad_disponible").textContent = restante < 0 ? "Excede la capacidad total" : restante;
    }

    formulario.addEventListener("submit", async (event) => {
        event.preventDefault();

        if (parseInt(document.getElementById("capacidad_disponible").textContent) < 0) {
            mensajeDiv.innerHTML = '<div class="alert alert-danger">Error: La suma de capacidades de zonas no puede exceder la capacidad total.</div>';
            return;
        }

        const datosConcierto = {
            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: capacidadTotal
        };

        mensajeDiv.innerHTML = '<div class="alert alert-success">Concierto registrado correctamente.</div>';
    });

    window.siguientePaso = siguientePaso;
    window.actualizarCapacidad = actualizarCapacidad;
});