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

    fetchMenu(filterState)

    $('#tabJenisMenu .btn').on('click', function(e) {
        e.preventDefault();
        const jenis = $(this).data('filter');

        // reset semua button jadi outline-success
        $('#tabJenisMenu .btn')
            .removeClass('btn-success active')
            .addClass('btn-outline-success');

        // set button yang dipilih jadi active
        $(this)
            .removeClass('btn-outline-success')
            .addClass('btn-success active');

        // reset datepicker & label
        datePicker.clear();
        $('#tanggalTerpilihLabel').addClass('d-none').text('');
        $('#resetTanggal').addClass('d-none');

        // set filter state
        filterState.jenis_menu = jenis;
        fetchMenu(filterState);
    });

    $(".alert-link").on('click', function(e){
        e.preventDefault();
        $('#tabJenisMenu .btn').removeClass('btn-success active').addClass('btn-outline-success');
        $('#tabJenisMenu .btn[data-filter="konsultasi" ]').removeClass('btn-outline-success').addClass('btn-success active');

         if (typeof datePicker !== 'undefined') {
                datePicker.clear();
            }

        filterState.jenis_menu = 'konsultasi';

        document.getElementById('tanggalTerpilihLabel').classList.add('d-none'); // Sembunyikan label
        document.getElementById('tanggalTerpilihLabel').textContent = '';
        document.getElementById('resetTanggal').classList.add('d-none');

        fetchMenu(filterState);
    })

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

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


})

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