let filterState = {};
$(document).ready(function(){
    const jenisMenuAwal = $("#tabJenisMenu .nav-link.active").data("filter")
     filterState ={
        jenis_menu: jenisMenuAwal,
        search:'',
        per_page: 12,
    }

    fetchMenu(filterState, getActiveFilters())

    $('#tabJenisMenu .nav-link').on('click', function(e){
        e.preventDefault();
        const jenis = $(this).data('filter')
        $('#tabJenisMenu .nav-link').removeClass('active text-success').addClass('text-black');

        $(this).closest('.nav-link').removeClass('text-black').addClass('active text-success');


        filterState.jenis_menu = jenis
        fetchMenu(filterState, getActiveFilters())
    })

    let searchTimout;
    $('#searchMenu').on('input', function(){
        clearTimeout(searchTimout);
        const keyword = $(this).val();

        searchTimout = setTimeout(() => {
            filterState.search = keyword;
            fetchMenu(filterState, getActiveFilters())
        }, 300)
    })
})

function changePerPage(select) {
    const newPerPage = parseInt(select.value);
    filterState.per_page = newPerPage
    fetchMenu(filterState, getActiveFilters())
}


 const menuAvailable = document.getElementById('menu_available')
    document.querySelectorAll('[data-filter-menu]').forEach(btn => {
        btn.addEventListener('click', function(){
            this.classList.toggle('active')
            const normalBtns = document.querySelectorAll('[data-filter-menu="normal"]');
            const normalIsActive = Array.from(normalBtns).some(btn => btn.classList.contains('active'));

            if(normalIsActive){
                menuAvailable.classList.remove('d-none')
            }else{
                menuAvailable.classList.add('d-none')
            }
            
            fetchMenu(filterState, getActiveFilters())
        })
    })
    function getActiveFilters() {
        return Array.from(document.querySelectorAll('[data-filter-menu].active'))
            .map(btn => btn.dataset.filterMenu);
    }