<div class="container">
    <div id="container-products"></div>
</div>
<script>
    var allProductsAvailable = [];
    
    // Função de formatação de números em moeda brasileira
    Number.prototype.formatMoney = function(c = 2, d = ".", e = ",", f = false) {
        let n = this,
            s = n < 0 ? "-" : "",
            i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
            j = (i.length > 3) ? i.length % 3 : 0;
        let r = s + (j ? i.substr(0, j) + e : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + e) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
        return f ? "R$ " + r : r;
    };

    // Função que converte um número para o formato de Real
    function toReal(valor, prefixo) {
        return prefixo + " " + Number(valor).formatMoney(2, ",", ".");
    }

    // Função que cria a lista de produtos e insere no HTML
    function createListProducts(produtos) {
        console.log("Produtos:", produtos);
        var container = document.getElementById("container-products");
        var htmlContent = "";

        produtos.forEach(function(produto) {
            // Obtém a imagem primária e, se existir, a segunda imagem
            var primaryImageUrl = produto.ProductImage?.[0]?.https || "";
            var secondaryImageUrl = produto.ProductImage?.[1]?.https || "";

            // Se não houver imagem ou se for placeholder, pula o produto
            if (!primaryImageUrl || primaryImageUrl === "https://via.placeholder.com/150") {
                return;
            }

            // Cria o HTML do produto, incluindo atributos data para as imagens
            var productHTML = '<div class="product">' +
                '  <div class="image">' +
                '    <a href="{link}" class="space-image large">' +
                '      <img class="swiper-lazy transform product-image" src="{image}" data-original="{image}" data-secondary="{image2}" alt="{name}">' +
                '    </a>' +
                '  </div>' +
                '  <a href="{link}" class="info-product">' +
                '    <div class="product-name"><h3>{name}</h3></div>' +
                '    <div class="down-line">{boxPrice}</div>' +
                '  </a>' +
                '</div>';

            // Substituições de link, imagem e nome
            productHTML = productHTML
                .replace(/{link}/g, produto.url?.https || "#")
                .replace(/{image}/g, primaryImageUrl)
                .replace(/{image2}/g, secondaryImageUrl)
                .replace(/{name}/g, produto.name);

            // Cria o HTML de preço com base na disponibilidade e valores
            var promotionalPrice = Number(produto.promotional_price);
            var priceHTML = "";
            if (produto.available && Number(produto.price)) {
                priceHTML = '<div class="box-price">' +
                                '<div class="price">' +
                                    '<div class="product-price">' +
                                        '{before}<span class="price-off">{price}</span>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="product-payment">{payment}</div>' +
                            '</div>';
                var beforePrice = "";
                if (promotionalPrice) {
                    beforePrice = '<div class="price-before"><span class="line-price">{price}</span></div>'
                                  .replace("{price}", toReal(Number(produto.price), "R$"));
                }
                priceHTML = priceHTML
                    .replace("{before}", beforePrice)
                    .replace("{price}", promotionalPrice ? toReal(promotionalPrice, "R$") : toReal(Number(produto.price), "R$"))
                    .replace("{payment}", produto.payment_option_html);
            } else {
                if (produto.available) {
                    priceHTML = '<div class="box-price"><div class="price"><div class="product-price"><p>Sob Consulta</p></div></div></div>';
                } else {
                    priceHTML = '<div class="box-price"><div class="price"><div class="product-price"><p>Indisponível</p></div></div></div>';
                }
            }

            productHTML = productHTML.replace("{boxPrice}", priceHTML);
            htmlContent += '<div class="item swiper-slide">' + productHTML + '</div>';
        });

        // Insere os produtos na página
        container.innerHTML = '<div class="swiper-container"><div class="swiper-wrapper list-product">' + htmlContent + '</div></div>';
    }

    // Função para adicionar o efeito de hover na troca de imagem
    function addHoverEffect() {
        var images = document.querySelectorAll('.product-image');
        images.forEach(function(img) {
            img.addEventListener('mouseover', function() {
                var secondary = img.getAttribute('data-secondary');
                if (secondary && secondary.trim() !== "") {
                    img.src = secondary;
                }
            });
            img.addEventListener('mouseout', function() {
                var original = img.getAttribute('data-original');
                if (original) {
                    img.src = original;
                }
            });
        });
    }

    // Função que busca os produtos na API
    function fetchProducts() {
        fetch("https://www.ahazeinolook.com.br/web_api/web_api/products?sort=id_desc&limit=50&available=1")
            .then((response) => response.json())
            .then((data) => {
                console.log("Resposta da API:", data);
                if (data.Products) {
                    data.Products.forEach((item) => {
                        allProductsAvailable.push(item.Product);
                    });
                    createListProducts(allProductsAvailable);
                    addHoverEffect(); // Adiciona o efeito de hover após renderizar os produtos
                } else {
                    console.error("Estrutura inesperada da resposta da API", data);
                }
            })
            .catch((error) => {
                console.error("Falha ao buscar produtos", error);
            });
    }

    // Inicia a busca dos produtos
    fetchProducts();
</script>