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

    // Crear la estructura
    const description = document.createElement('div');
    description.id = "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 = unit.id;

        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 countdown() {
    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);

    // Comparar las fechas
    if (eventDate.getTime() > nowaux.getTime()) {
        // La eventDate todavía no ocurre
    } else {
        // Ya expiró, programar próximo evento
        switch (nowaux.getDay()) {
            case 5: // Viernes
                if (nowaux.getTime() > horaevento.getTime()) {
                    eventDate.setDate(nowaux.getDate() + 3);
                } else {
                    eventDate.setDate(nowaux.getDate());
                }
                break;
            case 6: // Sábado
                eventDate.setDate(nowaux.getDate() + 2);
                break;
            case 0: // Domingo
                eventDate.setDate(nowaux.getDate() + 1);
                break;
            default: // Lunes a jueves
                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("days").textContent = d;
    document.getElementById("hours").textContent = h;
    document.getElementById("minutes").textContent = m;
    document.getElementById("seconds").textContent = s;

    setTimeout(countdown, 1000);
}


// Cuando la página esté lista:
window.onload = function() {
    createCountdownWidget('countdown-widget');
    countdown();
};

(function() {
    // Crear e inyectar estilos CSS
    const style = document.createElement('style');
    style.textContent = `
        #whatsapp-float {
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 60px;
            height: 60px;
            background-color: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            cursor: pointer;
            z-index: 1000;
            transition: transform 0.3s;
        }
        #whatsapp-float:hover {
            transform: scale(1.1);
        }
        #whatsapp-float img {
            width: 30px;
            height: 30px;
        }
        #whatsapp-tooltip {
            position: absolute;
            bottom: 70px;
            left: 0;
            background: #333;
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        #whatsapp-float:hover #whatsapp-tooltip {
            opacity: 1;
        }
    `;
    document.head.appendChild(style);

    // Crear contenedor flotante
    const whatsappButton = document.createElement('div');
    whatsappButton.id = 'whatsapp-float';

    // Crear imagen de WhatsApp
    const whatsappIcon = document.createElement('img');
    whatsappIcon.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg';
    whatsappIcon.alt = 'WhatsApp';

    // Crear tooltip (opcional)
    const tooltip = document.createElement('div');
    tooltip.id = 'whatsapp-tooltip';
    tooltip.textContent = 'Chatea con nosotros';

    // Armar estructura
    whatsappButton.appendChild(whatsappIcon);
    whatsappButton.appendChild(tooltip);
    document.body.appendChild(whatsappButton);

    // Agregar funcionalidad de click
    whatsappButton.addEventListener('click', function() {
        const chatUrl = 'https://sdk.dfktv2.com/widget?conv_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1dWlkIjoiMTc0MzgwNjc3NjMzOTk1MyIsImV4cGlyeSI6MTc0NjM5ODc4MH0.Rl6DfxHeiN1psVbgY_lDB4VKftSWMlbDxxZDUQzj6qY&flow_token=tkbxw34ku6gktz7h&locale=es&domain=sdk.dfktv2.com#/';

        const newWindow = window.open(chatUrl, 'whatsappChat', 'width=400,height=600');

        if (!newWindow || newWindow.closed || typeof newWindow.closed == 'undefined') {
            if (confirm("Tu navegador bloqueó la apertura del chat. ¿Quieres abrirlo manualmente?")) {
                window.location.href = chatUrl;
            }
        }
    });
})();