const displayCount = {
    category1: 6,
    category2: 6,
    category3: 6,
    category5: 6,
    category6: 6,
    category8: 6,
    category9: 6,
    category11: 6,
    category99: 6,
    category99999: 6,
};

let currentCategory = "all";
let searchFilter = "";

function lazy_load() {
    const lazyImages = document.querySelectorAll("img[data-src]");
            lazyImages.forEach(img => {
                if ("IntersectionObserver" in window) {
                    const observer = new IntersectionObserver((entries, obs) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                const src = entry.target.getAttribute('data-src');
                                if (src) {
                                    entry.target.src = src;
                                    entry.target.removeAttribute('data-src');
                                }
                                obs.unobserve(entry.target);
                            }
                        });
                    });
                    observer.observe(img);
                } else {
                    img.src = img.getAttribute('data-src');
                    img.removeAttribute('data-src');
                }
            });
}

// Hàm render sản phẩm
function renderProducts() {
    const categories = currentCategory === "all" ? ["category1", "category2", "category3", "category5", "category6", "category8", "category9", "category11", "category99999"] : [currentCategory];

    // Hiển thị hoặc ẩn các danh mục
    document.querySelectorAll('.category-section').forEach(section => {
        const productList = section.querySelector(`.${section.id}-list`);
        const filteredProducts = products.filter(p => 
            p.category === section.id && 
            p.name.toLowerCase().includes(searchFilter.toLowerCase())
        );
        
        if (filteredProducts.length > 0 && (categories.includes(section.id) || currentCategory === 'all')) {
            section.classList.add('active');
            productList.innerHTML = '';

            const productsToDisplay = filteredProducts.slice(0, displayCount[section.id]);
            productsToDisplay.forEach(product => {
                const productItem = document.createElement('div');
                productItem.className = 'product-item';
                productItem.innerHTML = `
                    <a href="${product.shop}" target="_blank">
                    <img src="/images/default.png" data-src="${product.image}" alt="${product.name} thumbnail" loading="lazy">
                    <h3>${product.name}</h3>
                    </a>
                `;
                productList.appendChild(productItem);
            });
        } else {
            section.classList.remove('active');
        }
    });
}


// Load thêm sản phẩm
document.querySelectorAll('.load-more-btn').forEach(button => {
    button.addEventListener('click', () => {
        const category = button.getAttribute('data-category');
        displayCount[category] += 6;
        renderProducts();
        lazy_load();
    });
});

// Lọc theo danh mục
document.querySelectorAll('.filter-btn').forEach(button => {
    button.addEventListener('click', () => {
        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');

        currentCategory = button.getAttribute('data-category');
        renderProducts();
        lazy_load();
    });
});

// Tìm kiếm sản phẩm
document.getElementById('searchBox').addEventListener('input', function () {
    searchFilter = this.value.toLowerCase();
    renderProducts();
    lazy_load();
});

// Gọi hàm render sản phẩm ban đầu
renderProducts();

// Hàm render sản phẩm
const displayCountHot = 3;

function renderHotProducts() {
    const productListHot = document.querySelector('.category99-list');
    productListHot.innerHTML = ''; // Xóa sản phẩm cũ trước khi render mới

    // Lấy sản phẩm từ mảng products_hot
    const productsToDisplayHot = products_hot.slice(0, displayCountHot);

    productsToDisplayHot.forEach(product => {
        const productItem = document.createElement('div');
        productItem.className = 'product-item';
        productItem.innerHTML = `
            <a href="${product.shop}" target="_blank">
            <img src="/images/default.png" data-src="${product.image}" alt="${product.name} thumbnail" loading="lazy">
            <h3>${product.name}</h3>
            </a>
        `;
        productListHot.appendChild(productItem);
    });
}

// Sự kiện tải thêm sản phẩm nổi bật
document.querySelector('.load-more-btn[data-category="category99"]').addEventListener('click', () => {
    displayCountHot += 3; // Tăng số lượng hiển thị
    renderHotProducts();
});

// Gọi hàm render sản phẩm nổi bật
renderHotProducts();

document.getElementById("toggleView").addEventListener("click", function(event) {
    event.preventDefault(); // Ngăn không cho liên kết chuyển hướng
    const profile_function = document.querySelector('.profile');
    const profilefunctional = document.querySelector('.profile-functional');
    const overlay_control = document.querySelector('.overlay_control');

    // Kiểm tra để hiển thị hoặc ẩn
    if (profilefunctional.classList.contains('profile-fade')) {
        profilefunctional.classList.remove('profile-fade'); // Gỡ bỏ lớp 'hidden' để hiển thị
        overlay_control.classList.remove('overlay'); // Gỡ bỏ lớp 'hidden' để hiển thị
    } else {
        profilefunctional.classList.add('profile-fade'); // Gỡ bỏ lớp 'hidden' để hiển thị
        overlay_control.classList.add('overlay'); // Gỡ bỏ lớp 'hidden' để hiển thị
    }

    // Thay đổi văn bản của liên kết
    if (this.textContent === "Xem thêm") {
        this.textContent = "Ẩn bớt";
    } else {
        this.textContent = "Xem thêm";
    }
});