// source --> https://custombirthdaybanners.co.uk/wp-content/themes/flatsome-child/js/cbb-script.js 
document.addEventListener("DOMContentLoaded", function () {
            function showRow(rowId, buttonId) {
                var allRows = document.querySelectorAll(".row-hidden");
                allRows.forEach(function (row) {
                    row.classList.add("hidden");
                });

                var selectedRow = document.getElementById(rowId);
                selectedRow.classList.remove("hidden");

                var allButtons = document.querySelectorAll("button");
                allButtons.forEach(function (button) {
                    button.classList.remove("active");
                });

                var clickedButton = document.getElementById(buttonId);
                clickedButton.classList.add("active");
            }

            showRow("vinylBannersRow", "vinylBannersBtn");

            document.getElementById("vinylBannersBtn").addEventListener("click", function () {
                showRow("vinylBannersRow", "vinylBannersBtn");
            });

            document.getElementById("meshBannersBtn").addEventListener("click", function () {
                showRow("meshBannersRow", "meshBannersBtn");
            });

            document.getElementById("rollUpStandsBtn").addEventListener("click", function () {
                showRow("rollUpStandsRow", "rollUpStandsBtn");
            });

            document.getElementById("popupStandsBtn").addEventListener("click", function () {
                showRow("popupStandsRow", "popupStandsBtn");
            });
});

document.addEventListener("DOMContentLoaded", function () {
    function showRow(rowId, buttonId) {
        var allRows = document.querySelectorAll(".row-hidden-2");
        allRows.forEach(function (row) {
            row.classList.add("hidden-2");
        });

        var selectedRow = document.getElementById(rowId);
        selectedRow.classList.remove("hidden-2");

        var allButtons = document.querySelectorAll(".buttons-for-switching button");
        allButtons.forEach(function (button) {
            button.classList.remove("active-2");
        });

        var clickedButton = document.getElementById(buttonId);
        clickedButton.classList.add("active-2");
    }

    showRow("vinylBannersRowMob", "vinylBannersBtnMob");

    document.getElementById("vinylBannersBtnMob").addEventListener("click", function () {
        showRow("vinylBannersRowMob", "vinylBannersBtnMob");
    });

    document.getElementById("meshBannersBtnMob").addEventListener("click", function () {
        showRow("meshBannersRowMob", "meshBannersBtnMob");
    });

    document.getElementById("rollUpStandsBtnMob").addEventListener("click", function () {
        showRow("rollUpStandsRowMob", "rollUpStandsBtnMob");
    });
});


document.addEventListener('DOMContentLoaded', function () {
        var container = document.querySelector('.cat-btns-flex');
        var isDragging = false;
        var startX;
        var scrollLeft;

        container.addEventListener('mousedown', function (e) {
            isDragging = true;
            startX = e.pageX - container.offsetLeft;
            scrollLeft = container.scrollLeft;
            container.classList.add('dragging');
        });

        container.addEventListener('mouseleave', function () {
            isDragging = false;
            container.classList.remove('dragging');
        });

        container.addEventListener('mouseup', function () {
            isDragging = false;
            container.classList.remove('dragging');
        });

        container.addEventListener('mousemove', function (e) {
            if (!isDragging) return;
            e.preventDefault();
            var x = e.pageX - container.offsetLeft;
            var walk = (x - startX) * 1.5; // Adjust scrolling speed
            container.scrollLeft = scrollLeft - walk;
        });
    });
    
document.addEventListener('DOMContentLoaded', function () {
        var toggleFilters = document.getElementById('toggleFilters');
        var sidebar = document.getElementById('sidebar');
        var closeSidebar = document.getElementById('closeSidebar');
        var viewResults = document.getElementById('viewResults');

        toggleFilters.addEventListener('click', function () {
            sidebar.classList.toggle('open');
        });

        closeSidebar.addEventListener('click', function () {
            sidebar.classList.remove('open');
        });

        viewResults.addEventListener('click', function () {
            // Add logic to handle the "View Results" button click
        });
    });  
// // Define the viewCategory function in the global scope
// function viewCategory(categoryLink) {
//     // Fetch products for the selected category using AJAX
//     var xhr = new XMLHttpRequest();
//     xhr.open('GET', categoryLink, true);
//     xhr.onreadystatechange = function() {
//         if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
//             // Update product container with fetched products
//             document.getElementById('product-container').innerHTML = xhr.responseText;
//         }
//     };
//     xhr.send();
// }

// // Event listener for dropdowns and button in Code-1
// document.addEventListener('DOMContentLoaded', function() {
//     document.querySelectorAll('.category-dropdown, #viewResults').forEach(function(element) {
//         element.addEventListener('change', function() {
//             // Get selected values from dropdowns
//             var selectedCategory = document.querySelector('.category-dropdown').value;

//             // Send AJAX request to fetch products based on selected category
//             var xhr = new XMLHttpRequest();
//             xhr.open('POST', 'fetch-products.php', true);
//             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//             xhr.onreadystatechange = function() {
//                 if (xhr.readyState === XMLHttpRequest.DONE) {
//                     if (xhr.status === 200) {
//                         // Update product container with fetched products
//                         document.getElementById('product-container').innerHTML = xhr.responseText;
//                     } else {
//                         console.error('Error fetching products: ' + xhr.status);
//                     }
//                 }
//             };
//             xhr.send('category=' + selectedCategory);
//         });
//     });
// });

// // Event listener for "View More" button
// document.querySelector('.view-all-button a').addEventListener('click', function(event) {
//     event.preventDefault();
//     var offset = document.querySelectorAll('.products-col').length; // Calculate the offset based on the number of already loaded products
//     var selectedCategory = document.querySelector('.category-dropdown').value;

//     // Send AJAX request to fetch more products
//     var xhr = new XMLHttpRequest();
//     xhr.open('POST', 'fetch-more-products.php', true);
//     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//     xhr.onreadystatechange = function() {
//         if (xhr.readyState === XMLHttpRequest.DONE) {
//             if (xhr.status === 200) {
//                 // Append fetched products to Code-2
//                 document.getElementById('product-container').insertAdjacentHTML('beforeend', xhr.responseText);
//             } else {
//                 console.error('Error fetching more products: ' + xhr.status);
//             }
//         }
//     };
//     xhr.send('category=' + selectedCategory + '&offset=' + offset);
// });

document.addEventListener('DOMContentLoaded', function() {
    const filterContainer = document.querySelector('.cat-btns-flex');
    const leftArrow = document.querySelector('.left-arrow');
    const rightArrow = document.querySelector('.right-arrow');

    // Check the scroll position and toggle arrow opacity
    function updateArrowOpacity() {
        // If we are at the start of the scrollable area, hide the left arrow
        if (filterContainer.scrollLeft === 0) {
            leftArrow.style.opacity = 0.3; // low opacity
        } else {
            leftArrow.style.opacity = 1; // full opacity
        }

        // If we are at the end of the scrollable area, hide the right arrow
        if (filterContainer.scrollLeft + filterContainer.offsetWidth >= filterContainer.scrollWidth) {
            rightArrow.style.opacity = 0.3; // low opacity
        } else {
            rightArrow.style.opacity = 1; // full opacity
        }
    }

    // Scroll the filter container left or right on arrow click
    leftArrow.addEventListener('click', function() {
        filterContainer.scrollBy({ left: -200, behavior: 'smooth' });
        updateArrowOpacity();
    });

    rightArrow.addEventListener('click', function() {
        filterContainer.scrollBy({ left: 200, behavior: 'smooth' });
        updateArrowOpacity();
    });

    // Initial check on page load
    updateArrowOpacity();
});