function createCountdownWidget(containerId) {
    const container = document.getElementById(containerId);

    if (!container) return; // Seguridad

    container.innerHTML = ''; // Limpiar contenido anterior

    // Crear la estructura
    const description = document.createElement('div');
    description.id = containerId + "-event-description";
    description.innerHTML = "<h4>Próximo despacho:</h4>";

    const buttonsContainer = document.createElement('div');
    buttonsContainer.className = "buttons-container";

    const units = [
        { id: "days", label: "Días" },
        { id: "hours", label: "Horas" },
        { id: "minutes", label: "Minutos" },
        { id: "seconds", label: "Segundos" }
    ];

    units.forEach(unit => {
        const button = document.createElement('button');
        button.className = "countdown_button";

        const span = document.createElement('span');
        span.id = containerId + "-" + unit.id; // Importante: ID únicos
        const label = document.createElement('div');
        label.textContent = unit.label;

        button.appendChild(span);
        button.appendChild(label);
        buttonsContainer.appendChild(button);
    });

    container.appendChild(description);
    container.appendChild(buttonsContainer);
}

function startCountdown(containerId) {
    function countdownLoop() {
        var nowaux = new Date();
        var hora = 12;
        var minutos = 30;
        var desfaseHorario = -3;

        var eventDate = new Date('2024-02-24T12:30:00Z');
        eventDate.setHours(eventDate.getHours() - desfaseHorario);
        var horaevento = new Date();
        horaevento.setHours(hora, minutos, 0);

        if (eventDate.getTime() > nowaux.getTime()) {
            // Todavía no ocurre
        } else {
            switch (nowaux.getDay()) {
                case 5:
                    eventDate.setDate(nowaux.getDate() + 3);
                    break;
                case 6:
                    eventDate.setDate(nowaux.getDate() + 2);
                    break;
                case 0:
                    eventDate.setDate(nowaux.getDate() + 1);
                    break;
                default:
                    if (nowaux.getTime() > horaevento.getTime()) {
                        eventDate.setDate(nowaux.getDate() + 1);
                    } else {
                        eventDate.setDate(nowaux.getDate());
                    }
            }
            eventDate.setMonth(nowaux.getMonth());
            eventDate.setFullYear(nowaux.getFullYear());
            eventDate.setHours(hora, minutos, 0);
        }

        var remTime = eventDate.getTime() - nowaux.getTime();
        var s = Math.floor(remTime / 1000);
        var m = Math.floor(s / 60);
        var h = Math.floor(m / 60);
        var d = Math.floor(h / 24);

        h %= 24;
        m %= 60;
        s %= 60;

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

        document.getElementById(containerId + "-days").textContent = d;
        document.getElementById(containerId + "-hours").textContent = h;
        document.getElementById(containerId + "-minutes").textContent = m;
        document.getElementById(containerId + "-seconds").textContent = s;

        setTimeout(countdownLoop, 1000);
    }

    countdownLoop();
}

// Al cargar la página automáticamente
window.onload = function() {
    createCountdownWidget('countdown-widget');  // Widget afuera (normal)
    startCountdown('countdown-widget');          // Empieza el contador
};