function fetchMenu(filter = {}) {
    const containerGuest = $("#order_guest_id");
    let params = new URLSearchParams({
        page: filter.page || 1,
        per_page: filter.per_page || 6,
        search: filter.search || '',
        jenis_menu: filter.jenis_menu || ''
    }).toString();

    containerGuest.html('<p class="text-muted">Memuat data....</p>');

    fetch(`/datamenu?${params}`)
        .then(res => res.json())
        .then(res => {
            if (!res.status)
                return containerGuest.html('<p class="text-danger">Gagal Memuat Data...</p>');

            const menus = res.data.data || [];

            if (menus.length === 0)
                return containerGuest.html('<p class="text-muted">Pencarian tidak ditemukan.</p>');

            let html = '<div class="container"><div class="row row-cols-1 row-cols-md-2 g-4">';
            if (res.data.last_page > 1) {
                html += `<div class="col-md-12 d-flex justify-content-end mt-4 gap-2">`;
                for (let i = 1; i <= res.data.last_page; i++) {
                    html += `
                        <button class="btn btn-outline-success btn-sm ${res.data.current_page === i ? 'active' : ''}"
                            onclick='fetchMenu(${JSON.stringify({...filter, page: i})})'>${i}</button>`;
                }
                html += `</div>`;
            }
                menus.forEach(menu => {
                    html += `
                    <div class="col-md-6">
                        <div class="card h-100 shadow-sm">
                            <div class="row g-0 h-100">
                                <!-- Bagian kiri (gambar) -->
                                <div class="col-md-5 d-flex align-items-center p-2">
                                    <img src="gambar/${menu.foto || 'default.jpg'}" class="img-fluid rounded" alt="${menu.nama_menu}">
                                </div>

                                <!-- Bagian kanan (konten) -->
                                <div class="col-md-7 d-flex flex-column p-3">
                                    <div class="flex-grow-1">
                                        <h5 class="card-title mb-1">${menu.nama}</h5>
                                        <p class="mb-1">Rp ${parseInt(menu.harga_public).toLocaleString('id-ID')}</p>
                                        <p class="text-muted small">${menu.deskripsi || ''}</p>
                                        <div class="mb-2">
                                            ${(menu.klasifikasiMenu || []).map(tag => `<span class="badge bg-secondary me-1 mb-1">${tag.nama_kategori_diet}</span>`).join('')}
                                        </div>
                                    </div>
                                </div>
                                <!-- Tombol selalu di bawah -->
                                <div class="col-md-12 mt-auto p-2">
                                        <button class="btn btn-success w-100" onclick="orderMenu(this)"
                                            data-id="${menu.master_menu_id}"
                                            data-nama_menu="${menu.nama_menu}"
                                            data-harga="${menu.harga_public}"
                                            data-foto="${menu.foto}">Order</button>
                                    </div>
                            </div>
                        </div>
                    </div>
                    `;
                });



            html += '</div></div>';

            // Pagination buttons
             if (res.data.last_page > 1) {
                html += `<div class="col-md-12 d-flex justify-content-between align-items-center mt-3">
                        <div>
                            <label for="perPageSelect" class="me-2">Tampilkan:</label>
                            <select id="perPageSelect" class="form-select form-select-sm d-inline-block w-auto" onchange="changePerPage(this)">
                                <option value="6" ${filter.perPage == 6 ? 'selected' : ''}>6</option>
                                <option value="10" ${filter.perPage == 10 ? 'selected' : ''}>10</option>
                                <option value="20" ${filter.perPage == 20 ? 'selected' : ''}>20</option>
                            </select>
                        </div>
                        <div class="d-flex gap-2">`;
                for (let i = 1; i <= res.data.last_page; i++) {
                    html += `
                        <button class="btn btn-outline-success btn-sm ${res.data.current_page === i ? 'active' : ''}"
                            onclick='fetchMenu(${JSON.stringify({...filter, page: i})})'>${i}</button>`;
                }
                html += `</div>`;
            }
            containerGuest.html(html);
        })
        .catch(err => {
            containerGuest.html('<p class="text-danger">Terjadi kesalahan saat memuat data.</p>');
            console.error(err);
        });
}



function orderMenu(data){

}