<!-- Configuración del temporizador -->
{% assign collection_timer_year = "2026" %}  <!-- Año de finalización de la oferta -->
{% assign collection_timer_month = "3" %}  <!-- Mes de finalización (marzo) -->
{% assign collection_timer_day = "21" %}  <!-- Día de finalización -->
{% assign collection_timer_hour = "15" %}  <!-- Hora de finalización (24h) -->
{% assign collection_timer_minute = "46" %}  <!-- Minuto de finalización -->
{% assign collection_timer_second = "59" %}  <!-- Segundo de finalización -->

<!-- Configuración del texto del temporizador -->
{% assign collection_timer_message = "¡Oferta exclusiva por tiempo limitado!" %}  <!-- Mensaje mostrado junto al temporizador -->

{% if collection.size > 0 %}
    {% assign discount_format = "corner-badge" %}
    {% assign show_hover_image = true %}
    {% assign cant_producto_mostrar = "8" %}
    {% assign addToCart = true %}

<div class="collection-timer-container mt-4">
    <div class="collection-timer-title" title="{{ collection.title }}">
        <a href="{{ collection.link }}">{{ collection.title }}</a>
    </div>
    <div class="collection-timer-content">
        <div class="collection-timer-box">
            <span class="collection-days">00</span>
            <div class="collection-timer-label">Días</div>
        </div>
        <div class="collection-timer-box">
            <span class="collection-hours">00</span>
            <div class="collection-timer-label">Horas</div>
        </div>
        <div class="collection-timer-box">
            <span class="collection-minutes">00</span>
            <div class="collection-timer-label">Minutos</div>
        </div>
        <div class="collection-timer-box">
            <span class="collection-seconds">00</span>
            <div class="collection-timer-label">Segundos</div>
        </div>
    </div>
    <div class="collection-timer-message">
    <svg class="timer-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm1-5h-2V7h2v5Z" fill="currentColor"/>
    </svg>
    {{ collection_timer_message }}
</div>

    
    <!-- Flecha animada que apunta hacia abajo -->
    <div class="scroll-arrow-container">
        <svg class="scroll-arrow scroll-down-arrow" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
        </svg>
    </div>
</div>

<div class="collection-container">
    <!-- Sección de productos -->
    <section class="bs-collection-temporizer grid products-section">
        {% for product in collection limit: cant_producto_mostrar %}
            <div class="bs-collection__product border" data-bs="product" data-info="{{ product.id }}">
                <a href="{{ product.link }}" title="{{ product.title }}">
                    <div class="bs-img-square hover">
                        {% if product.discountRate > 0 %}
                            <div class="bs-discount {{ discount_format }}">
                                <span>-{{ product.discountRate }}%</span>
                            </div>
                        {% endif %}

                        {% assign outStock = false %}
                        {% if product.classification != 1 %}
                            {% if product.totalStock < 1 and product.stockControl == 1 %}
                                {% if product.allowNegativeStock == 0 %}
                                    {% assign outStock = true %}
                                    <div class="bs-collection__product-stock">Sin Stock</div>
                                {% endif %}
                            {% endif %}
                        {% endif %}

                        <!-- Imágenes con hover -->
                        <picture
                            {% if show_hover_image and product.images %}
                                {% for img in product.images %}
                                    {% if img.href != product.default_image %}
                                        style="--image-hover:url('{{ img.href | image_url: 'M' }}')"
                                        {% break %}
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        >
                            <source {{ product.default_image | source_tag_attributes: 'L' }}>
                            <source {{ product.default_image | source_tag_attributes: 'M' }}>
                            <source {{ product.default_image | source_tag_attributes: 'S' }}>
                            <img
                                {% if product.default_image.size > 0 %}
                                    {{ product.default_image | img_tag_attributes: 'S' }}
                                    onerror="this.onerror=null;this.src='{{ product.default_image }}';"
                                {% else %}
                                    {{ site.logo | img_tag_attributes: 'S' }}
                                {% endif %}
                                alt="{{ product.title }}"
                                loading="lazy"
                            >
                        </picture>
                    </div>
                </a>

                <a class="bs-collection__product-info" href="{{ product.link }}" title="{{ product.title }}">
                    <h3 class="bs-collection__product-title">
                        {{ product.title | strip_html | truncate: 60, '...' }}
                    </h3> 
                    {% if product.notice %}
                        <div class="bs-collection__product-notice">
                            {{ product.notice | strip_html | truncate: 60, '...' }}
                        </div>
                    {% endif %}
                    {% if product.brand.name %}
                        <span class="bs-collection__product-brand">{{ product.brand.name }}</span>
                    {% endif %}
                </a>

                <div class="bs-collection__product-price">
                    {% if product.discount_rate > 0 %}
                        <del class="bs-collection__old-price">
                            {{ product.fpWithoutDiscount | money_filter }}
                        </del>
                    {% endif %}
                    {% if product.discount_cant > 1 %}
                        <small class="bs-collection__discount-condition">
                            Por compras desde {{ product.discount_cant | round }} unidades
                        </small>
                    {% endif %}
                    <strong class="bs-collection__product-final-price {% if product.discount_rate > 0 %}has-discount{% endif %}">
                        {{ product.final_price | money_filter }}
                    </strong>
                </div> 

                {% if addToCart %}
                    <div class="bs-product-cart mt-auto">
                        {% if outStock %}
                            <button class="btn btn-primary mt-1 invisible t{{ product.unlimitedStock }}" disabled>
                                Agotado
                            </button>
                        {% else %}
                            <button class="btn btn-primary mt-1 t{{ product.unlimitedStock }}" data-bs="cart.add.collection">
                                Agregar al carro
                            </button>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </section>

    <div class="text-center mt-3">
        <a class="btn btn-secondary btn-collection-show" href="{{ collection.link }}">
            Ver todos los productos 
        </a>
    </div>
</div>

<script>
// Función principal que inicia y actualiza la cuenta regresiva de la colección
function startCollectionCountdown(targetDate, serverTime) {
    // Obtiene los elementos del DOM donde se mostrará la cuenta regresiva y la colección
    const collectionCountdownElement = document.querySelector(".collection-timer-container"); 
    const collectionContainerElement = document.querySelector(".collection-container"); 
    const collectionDaysElement = document.querySelector(".collection-days");
    const collectionHoursElement = document.querySelector(".collection-hours");
    const collectionMinutesElement = document.querySelector(".collection-minutes");
    const collectionSecondsElement = document.querySelector(".collection-seconds");

    // Variable que lleva el tiempo actual del servidor, se incrementa cada segundo
    let currentServerTime = serverTime;

    // Función interna que actualiza los valores de la cuenta regresiva
    function updateCollectionCountdown() {
        // Incrementa el tiempo del servidor en 1000ms (1 segundo)
        currentServerTime += 1000;

        // Calcula el tiempo restante entre la fecha objetivo y el tiempo actual del servidor
        const timeLeft = targetDate - currentServerTime;

        // Si el tiempo restante es menor o igual a 0, oculta el temporizador y la colección
        if (timeLeft <= 0) {
            collectionCountdownElement.classList.add("collection-timer-expired"); 
            collectionContainerElement.classList.add("collection-expired");
            return;
        }

        // Calcula los días, horas, minutos y segundos restantes
        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        // Actualiza los valores en la UI con dos dígitos
        collectionDaysElement.textContent = days.toString().padStart(2, "0");
        collectionHoursElement.textContent = hours.toString().padStart(2, "0");
        collectionMinutesElement.textContent = minutes.toString().padStart(2, "0");
        collectionSecondsElement.textContent = seconds.toString().padStart(2, "0");
    }

    // Ejecuta la función de actualización inmediatamente para mostrar los valores iniciales
    updateCollectionCountdown();

    // Configura un intervalo para actualizar la cuenta regresiva cada segundo
    setInterval(updateCollectionCountdown, 1000);
}

// Configuración de la fecha objetivo del temporizador en UTC
const collectionOfferEndDate = Date.UTC(
    parseInt("{{ collection_timer_year }}"),
    parseInt("{{ collection_timer_month }}") - 1, // Restamos 1 porque los meses en JS van de 0 a 11
    parseInt("{{ collection_timer_day }}"),
    parseInt("{{ collection_timer_hour }}"),
    parseInt("{{ collection_timer_minute }}"),
    parseInt("{{ collection_timer_second }}")
);

// Inicia la cuenta regresiva pasando la fecha objetivo y el tiempo inicial del servidor
startCollectionCountdown(collectionOfferEndDate, {{serverTimeMs}});

// Agrega un evento de clic a la flecha animada para desplazar la vista a la sección de productos
document.querySelector('.scroll-down-arrow').addEventListener('click', function() {
    // Obtiene el elemento de la sección de productos
    const productsSection = document.querySelector('.products-section');

    // Si la sección existe, desplaza suavemente la vista hacia ella
    if (productsSection) {
        productsSection.scrollIntoView({
            behavior: 'smooth', 
            block: 'center' 
        });
    }
});
</script>
{% endif %}