datatableMasterMenu.bootstrapTable({
        url: "/dashboard/datatable/menu",
        showColumns: true,
        showColumnsToggleAll: true,
        showRefresh: true,
        sortable: true,
        search: true,
        searchOnEnterKey: false,
        searchHighlight: true,
        pagination: true,
        serverSide: true,
        pageSize: 10,
        pageList: [10, 20, 30, 40, 50, 100, 200],
        cookie: true,
        icons: {
            refresh: "fas fa-sync-alt",   // atau ganti ke icon lain
            columns: "fas fa-th-large"
        },

        columns: [
            {
                title: "Action",
                field: 'master_menu_id',
                formatter: function(value, row) {
                     let statusLabel = '';
                    if (!row.status) {
                        statusLabel = `<div class="text-danger small mb-1"><strong>Tidak Aktif</strong></div>`;
                    }

                    let buttons = ''
                        buttons += `
                            <button class="btn btn-sm btn-primary me-2" onclick="editMasterMenu(this)" data-master_menu_id="${row.master_menu_id}"
                            data-nama="${row?.nama_menu}"
                            data-foto="${row?.foto}"
                            data-harga_public="${row?.harga_public}"
                            data-harga_karyawan="${row?.harga_karyawan}"
                            data-jenis_menu="${row?.jenis_menu}"
                            data-apakah_someday="${row?.apakah_someday ? 1 : 0}"
                            data-apakah_menu_siang="${row?.apakah_menu_siang ? 1 : 0}"
                            data-apakah_menu_sore="${row?.apakah_menu_sore ? 1 : 0}"
                            data-deskripsi="${row?.deskripsi}"
                            data-tgl="${encodeURIComponent(JSON.stringify(row?.tgl || []))}"
                            data-kalori="${encodeURIComponent(JSON.stringify(row?.kalori || []))}"
                            data-kategori_diet="${encodeURIComponent(JSON.stringify(row?.kategoriDiet || []))}"

                            >
                                <i class="fa-solid fa-pencil"></i>
                            </button>
                        `
                        buttons += `
                            <button class="btn btn-sm btn-danger me-2" onclick="deleteMasterMenu(this)"
                            data-master_menu_id="${row.master_menu_id}"
                            data-nama="${row?.nama_menu}"
                            >
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        `
                        buttons += `
                            <button class="btn btn-sm btn-info me-2" onclick="detailMasterMenu(this)"
                            data-master_menu_id="${row.master_menu_id}"
                            data-nama="${row?.nama_menu}"
                            data-foto="${row?.foto}"
                            data-harga_public="${row?.harga_public}"
                            data-harga_karyawan="${row?.harga_karyawan}"
                            data-jenis_menu="${row?.jenis_menu}"
                            data-apakah_someday="${row?.apakah_someday ? 1 : 0}"
                            data-apakah_menu_siang="${row?.apakah_menu_siang ? 1 : 0}"
                            data-apakah_menu_sore="${row?.apakah_menu_sore ? 1 : 0}"
                            data-deskripsi="${row?.deskripsi}"
                            data-tgl="${encodeURIComponent(JSON.stringify(row?.tgl || []))}"
                            data-kalori="${encodeURIComponent(JSON.stringify(row?.kalori || []))}"
                            data-klasifikasi_menu="${encodeURIComponent(JSON.stringify(row?.kategoriDiet || []))}"
                            >
                                <i class="fa-solid fa-circle-info"></i>
                            </button>
                        `
                        buttons +=`
                             <div class="form-check form-switch" data-master_menu_id="${row.master_menu_id}">
                                <input class="form-check-input" type="checkbox" role="switch" id="switchActiveMenu" ${row?.status ? 'checked' : ''}>
                            </div>
                        `
                    return `
                        ${statusLabel}
                        <div class="d-flex space-x">
                        ${buttons}
                        </div>
                    `;
                },
                width: 120
            },
            {
                title:"Nama Menu",
                formatter:function(value, row){
                    return row?.kalori[0]?.nilai_kalori ? row?.nama_menu + ' ' + '(' + row?.kalori[0]?.nilai_kalori + ' kal)' : row?.nama_menu
                },
                width: 300
            },
            {
                title:"Harga",
                field:"master_menu_id",
                formatter: function(value, row) {
                    return `<ul style="white-space: nowrap;">
                                <li>Public : <strong>Rp ${parseInt(row.harga_public).toLocaleString('id-ID')}</strong></li>
                                <li>Karyawan : <strong>Rp ${parseInt(row.harga_karyawan).toLocaleString('id-ID')}</strong></li>
                            </ul>`
                },
                width: 200
            },
            {
                title:"Kategori",
                field:"jenis_menu",
            },
            {
                title: "Kategori Menu",
                field: "master_menu_id",
                formatter: function (value, row) {
                    if (row?.apakah_someday) {
                        return `<span class="badge bg-warning text-dark">Sameday</span>`;
                    }
                    return `<span class="badge bg-success text-dark">Menu Normal</span>`;
                }
            },
            {
                title: "Waktu Makan",
                field: "master_menu_id",
                formatter: function (value, row) {
                    if (row?.apakah_menu_siang && row?.apakah_menu_sore) {
                        return `Makan Siang & Sore`;
                    } else if (row?.apakah_menu_siang) {
                        return `Makan Siang`;
                    } else if (row?.apakah_menu_sore) {
                        return `Makan Sore`;
                    } else  {
                        return `-`;
                    }
                },
                width: 250
            },
            {
                title:"Tanggal Tersedia",
                field:"master_menu_id",
                formatter: function(value, row){
                    if(row.apakah_someday) return 'Senin - Minggu'
                    let tglAvlb = '';
                    tglAvlb = row?.tgl ? row?.tgl.map(item => item?.tgl_harian).join(', ') : '-';
                    return tglAvlb;
                }
            },

        ],
        rowStyle: function(row, index) {
            if (!row.status) {
                return {
                    classes: 'row-disabled'
                };
            }
            return {};
        }
    });

   // Tambahkan event listener pada elemen induk (misalnya, body)
    document.body.addEventListener('click', function(event) {
        if (event.target.type === 'checkbox' && event.target.id === 'switchActiveMenu') {
            const isChecked = event.target.checked;
            const masterMenuId = event.target.closest('.form-check').getAttribute('data-master_menu_id');
            toggleActiveMenu(masterMenuId, isChecked);
        }
    });

    // Fungsi untuk menangani aktivasi atau deaktivasi menu
    function toggleActiveMenu(masterMenuId, isChecked) {
        fetch(`/dashboard/menu/switch/${masterMenuId}/${isChecked}`, {
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
            },
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
             Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: 'Status  Menu diperbarui',
                    timer: 1500,
                    showConfirmButton: false,
                    backdrop: true,
                });
            datatableMasterMenu.bootstrapTable('refresh');
        })
        .catch(err => {
            console.error('Error:', err);
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: err.message || 'Terjadi kesalahan pada server.',
            });
        });
    }