// Only run mobile sidebar code on mobile devices
function isMobile() {
    return window.innerWidth <= 767;
}

let mobileElementsAdded = false;
let closeButton = null;

document.getElementById('mobileFilterToggle')?.addEventListener('click', function() {
    if(isMobile()) {
        const sidebar = document.querySelector('.mobile-filter-sidebar');
        if(!sidebar) return;
        
        sidebar.classList.toggle('show');
        this.classList.toggle('active');
        
        if(sidebar.classList.contains('show')) {
            document.body.classList.add('sidebar-open');
        } else {
            document.body.classList.remove('sidebar-open');
        }
    }
});

// Function to add close button
function addCloseButtonToSidebar() {
    if(!isMobile()) return;
    
    const sidebar = document.querySelector('.mobile-filter-sidebar');
    if(!sidebar) return;
    
    if(closeButton && closeButton.remove) {
        closeButton.remove();
        closeButton = null;
    }
    
    if(document.querySelector('.mobile-sidebar-close')) return;
    
    closeButton = document.createElement('button');
    closeButton.className = 'mobile-sidebar-close';
    closeButton.innerHTML = '<i class="fa-solid fa-times"></i>';
    
    closeButton.addEventListener('click', function() {
        sidebar.classList.remove('show');
        document.getElementById('mobileFilterToggle')?.classList.remove('active');
        document.body.classList.remove('sidebar-open');
    });
    
    sidebar.style.position = 'relative';
    sidebar.appendChild(closeButton);
}

// Remove close button on desktop
function removeCloseButton() {
    if(closeButton && closeButton.remove) {
        closeButton.remove();
        closeButton = null;
    }
    const existingCloseBtn = document.querySelector('.mobile-sidebar-close');
    if(existingCloseBtn && existingCloseBtn.remove) {
        existingCloseBtn.remove();
    }
}

// Close sidebar when clicking outside
document.addEventListener('click', function(event) {
    if(!isMobile()) return;
    
    const sidebar = document.querySelector('.mobile-filter-sidebar');
    const filterBtn = document.getElementById('mobileFilterToggle');
    
    if(sidebar && filterBtn && sidebar.classList.contains('show')) {
        if(!sidebar.contains(event.target) && !filterBtn.contains(event.target)) {
            sidebar.classList.remove('show');
            filterBtn.classList.remove('active');
            document.body.classList.remove('sidebar-open');
        }
    }
});
// Simple fix for Clear All button in mobile sidebar
document.addEventListener('click', function(e) {
    // Check if clicked element is the Clear All button inside mobile sidebar
    const clearBtn = e.target.closest('.mobile-clear-container .click-hide-parent');
    
    if(clearBtn) {
        e.preventDefault();
        e.stopPropagation();
        
        // Clear all active filters
        document.querySelectorAll('.active-list .active').forEach(function(el) {
            el.classList.remove('active');
        });
        
        // Reset price range
        const minPriceSpan = document.querySelector('.ui-range-value-min .min_price');
        const maxPriceSpan = document.querySelector('.ui-range-value-max .max_price');
        
        if(minPriceSpan) minPriceSpan.textContent = '0';
        if(maxPriceSpan) maxPriceSpan.textContent = '10000';
        
        // Reset slider if exists
        const slider = document.querySelector('.ui-range-slider');
        if(slider && slider.noUiSlider) {
            slider.noUiSlider.set([0, 10000]);
        }
        
        // Close sidebar
        const sidebar = document.querySelector('.mobile-filter-sidebar');
        const filterBtn = document.getElementById('mobileFilterToggle');
        if(sidebar) sidebar.classList.remove('show');
        if(filterBtn) filterBtn.classList.remove('active');
        document.body.classList.remove('sidebar-open');
        
        // Reload page to reset filters
        window.location.href = window.location.pathname;
    }
});
// Move elements into sidebar
function moveElementsToSidebar() {
    if(!isMobile()) {
        mobileElementsAdded = false;
        removeCloseButton();
        return;
    }
    
    if(mobileElementsAdded) return;
    
    const sidebar = document.querySelector('.mobile-filter-sidebar .categoryListing');
    if(!sidebar) return;
    
    if(document.querySelector('.mobile-sort-container')) return;
    
    const sortByContainer = document.querySelector('.desktop-only-filter .selectItems.f-right');
    const searchContainer = document.querySelector('.col-xl-4.col-lg-5.col-md-6 .searchBox-wrapper');
    
    const clearAllContainer = document.querySelector('.selectder-filter-contents');
    let clearAllClone = null;
    if(clearAllContainer) {
        clearAllClone = clearAllContainer.cloneNode(true);
        clearAllClone.className = 'mobile-clear-container';
        const clickHideFilter = clearAllClone.querySelector('.click-hide-filter');
        if(clickHideFilter) {
            clickHideFilter.classList.remove('d-none');
        }
    }
    
    const sortContainer = document.createElement('div');
    sortContainer.className = 'mobile-sort-container';
    if(sortByContainer) {
        const sortClone = sortByContainer.cloneNode(true);
        const sortHeader = document.createElement('h5');
        sortHeader.textContent = 'Sort By';
        sortContainer.appendChild(sortHeader);
        sortContainer.appendChild(sortClone);
    }
    
    const searchContainerMobile = document.createElement('div');
    searchContainerMobile.className = 'mobile-search-container';
    if(searchContainer) {
        const searchClone = searchContainer.cloneNode(true);
        searchContainerMobile.appendChild(searchClone);
    }
    
    if(sortByContainer) {
        sidebar.insertBefore(sortContainer, sidebar.firstChild);
    }
    
    if(searchContainer) {
        if(sortByContainer) {
            sidebar.insertBefore(searchContainerMobile, sortContainer.nextSibling);
        } else {
            sidebar.insertBefore(searchContainerMobile, sidebar.firstChild);
        }
    }
    
    if(clearAllClone) {
        let referenceNode = searchContainer ? searchContainerMobile : (sortByContainer ? sortContainer : null);
        if(referenceNode) {
            sidebar.insertBefore(clearAllClone, referenceNode.nextSibling);
        } else {
            sidebar.appendChild(clearAllClone);
        }
    }
    
    addCloseButtonToSidebar();
    mobileElementsAdded = true;
}

// Cleanup on desktop
function cleanupMobileElements() {
    if(!isMobile()) {
        const mobileSort = document.querySelector('.mobile-sort-container');
        const mobileSearch = document.querySelector('.mobile-search-container');
        const mobileClearAll = document.querySelector('.mobile-clear-container');
        
        if(mobileSort) mobileSort.remove();
        if(mobileSearch) mobileSearch.remove();
        if(mobileClearAll) mobileClearAll.remove();
        
        removeCloseButton();
        mobileElementsAdded = false;
    }
}

// Run on load and resize
document.addEventListener('DOMContentLoaded', function() {
    moveElementsToSidebar();
});

let resizeTimer;
window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if(isMobile()) {
            moveElementsToSidebar();
        } else {
            cleanupMobileElements();
            const sidebar = document.querySelector('.mobile-filter-sidebar');
            const filterBtn = document.getElementById('mobileFilterToggle');
            if(sidebar) sidebar.classList.remove('show');
            if(filterBtn) filterBtn.classList.remove('active');
            document.body.classList.remove('sidebar-open');
        }
    }, 250);
});