$(document).ready(function () {
        const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
        if (cart.length > 0) {
            $('#floatingCartButton').removeClass('d-none');
            }
    });



    function fetchMenu(filter = {}) {
        const containerGuest = $("#order_guest_id");
         if(filter.jenis_menu === "konsultasi"){
                const jadwalList = [
                    {
                        nama_dokter: "dr. Andi exp, Sp.A",
                        spesialis: "Spesialis Anak",
                        hari: "Senin - Rabu",
                        jam: "08.00 - 11.00"
                    },
                    {
                        nama_dokter: "dr. Siti exp, Sp.GK",
                        spesialis: "Spesialis Gizi Klinik",
                        hari: "Kamis - Jumat",
                        jam: "09.00 - 12.00"
                    },
                    {
                        nama_dokter: "dr. Dimas exp, Sp.PD",
                        spesialis: "Spesialis Penyakit Dalam",
                        hari: "Sabtu",
                        jam: "10.00 - 13.00"
                    }
                ];

                let html = `
                    <div class="container">
                        <h4 class="mb-4">Jadwal Konsultasi</h4>
                        <div class="list-group">
                `;

                jadwalList.forEach(jadwal => {
                    html += `
                        <div class="list-group-item border rounded-3 mb-3 p-3 shadow-sm">
                            <h5 class="mb-1">${jadwal.nama_dokter}</h5>
                            <p class="mb-1 text-muted">${jadwal.spesialis}</p>
                            <p class="mb-1"><strong>Hari:</strong> ${jadwal.hari}</p>
                            <p class="mb-2"><strong>Jam:</strong> ${jadwal.jam}</p>
                        </div>
                    `;
                });

                html += `</div></div>`;
                return containerGuest.html(html);

        }   
        let params = new URLSearchParams({
            page: filter.page || 1,
            per_page: filter.per_page || 12,
            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 session = JSON.parse(sessionStorage.getItem('customerData') || '{}')
                let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
                if(cart.length > 0){
                    updateCartCount(cart.length)
                }
                if(session.nama_customer){
                    $("#welcomeMessage").html(`Selamat Datang, <strong>${session.nama_customer}</strong> !`)
                }
                const menus = res.data.data || [];

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


                let html = '<div class="container"><div class="row row-cols-1 row-cols-md-2 g-4">';
                    menus.forEach(menu => {
                        html += `
                        <div class="col-md-3 mb-4">
                            <div class="card h-100 shadow-sm p-2 rounded-4">
                                <!-- Gambar Makanan -->
                                <img src="gambar/${menu.foto || '3.jpeg'}"
                                    class="rounded shadow-sm object-fit-cover" height="150px"
                                    alt="${menu.nama_menu}">
                                  <!-- Info Tersedia Tanggal -->
                                <div class="text-muted small mt-2 px-1">
                                 ${
                                        menu.apakah_someday
                                        ? `<i class="fa fa-calendar-check me-1 text-success"></i> Tersedia setiap hari (Senin - Minggu)`
                                        : (menu.dmph && menu.dmph.length > 0
                                            ? `<i class="fa fa-calendar-alt me-1 text-success"></i> Tersedia pada tanggal:
                                                ${menu.dmph.slice(0, 5).map(i => i.tgl_harian).join(', ')}
                                                ${menu.dmph.length > 5 ? ` dan ${menu.dmph.length - 5} lainnya...` : ''}`
                                            : `<i class="fa fa-calendar-times me-1 text-danger"></i> Tidak tersedia saat ini`)
                                    }
                                </div>

                                 <!-- Ketersediaan Siang/Sore -->
                                    <div class="text-muted small mt-1 px-1">
                                    ${
                                        menu.apakah_menu_siang && menu.apakah_menu_sore
                                        ? `<i class="fa fa-clock me-1 text-success"></i> Tersedia untuk makan siang dan sore`
                                        : menu.apakah_menu_siang
                                            ? `<i class="fa fa-sun me-1 text-warning"></i> Tersedia untuk makan siang`
                                            : menu.apakah_menu_sore
                                            ? `<i class="fa fa-moon me-1 text-primary"></i> Tersedia untuk makan sore`
                                            : `<i class="fa fa-ban me-1 text-danger"></i> Tidak tersedia untuk waktu makan apapun`
                                    }
                                    </div>

                                    <div class="text-muted small">
                                    ${
                                        menu.apakah_someday 
                                        ? `<span class="badge bg-success ms-2 tx" title="Tersedia setiap hari">Menu Someday</span>
`
                                        :  `<span class="badge bg-warning text-dark ms-2" title="Hanya tersedia di tanggal tertentu">Menu Normal</span>
`
                                    }
                                    </div>
                                <!-- Nama & Harga -->
                                <h5 class="fw-bold mb-1 mt-2">${menu.nama}</h5>
                                <div class="row text-muted small">
                                    <div class="col-12 fw-semibold">Harga</div>
                                    <div class="col-6">Karyawan:</div>
                                    <div class="col-6 text-end fw-semibold">Rp ${parseInt(menu.harga_karyawan).toLocaleString('id-ID')}</div>
                                    <div class="col-6">Keluarga Pasien:</div>
                                    <div class="col-6 text-end fw-semibold">Rp ${parseInt(menu.harga_keluarga_pasien).toLocaleString('id-ID')}</div>
                                </div>


                                <!-- Kategori Diet (Badge) -->
                                    <div class="mb-3">
                                    ${(menu.klasifikasiMenu || [])
                                        .slice(0, 2)
                                        .map(tag => {
                                        const name = tag.nama_kategori_diet || '';
                                        const truncated = name.length > 12 ? name.substring(0, 12) + '...' : name;
                                        return `<span class="badge bg-secondary me-1 mb-1" title="${name}">${truncated}</span>`;
                                        }).join('')}
                                    ${(menu.klasifikasiMenu || []).length > 2
                                        ? `<span class="badge bg-secondary">+${(menu.klasifikasiMenu.length - 2)} lainnya</span>`
                                        : ''}
                                    </div>
                                  
                                <!-- Tombol Order -->
                                <div class="d-flex p-2 mt-auto">
                                    <button class="btn btn-outline-success w-50 me-2"
                                        onclick="orderMenu(this)"
                                        data-id="${menu.master_menu_id || menu.master_paket_menu_id}"
                                        data-nama_menu="${menu.nama}"
                                        data-harga_karyawan="${menu.harga_karyawan}"
                                        data-harga_keluarga_pasien="${menu.harga_keluarga_pasien}"
                                        data-jenis_menu="${menu.jenis_menu}"
                                        data-deskripsi="${menu.deskripsi}"
                                        data-klasifikasi_menu="${(menu.klasifikasiMenu || []).map(tag => tag.nama_kategori_diet).join(', ')}"
                                        data-foto="${menu.foto}">
                                       <i class="fa-solid fa-circle-info"></i> Detail
                                    </button>
                                    <button class="btn btn-success w-50"
                                    onclick="saveItem(this)"
                                    data-id="${menu.master_menu_id ?? menu.master_paket_menu_id}"
                                    data-nama_menu="${menu.nama}"
                                    data-harga_karyawan="${menu.harga_karyawan}"
                                    data-harga_keluarga_pasien="${menu.harga_keluarga_pasien}"
                                    data-jenis_menu="${menu.jenis_menu}"
                                    data-deskripsi="${menu.deskripsi}"
                                    data-klasifikasi_menu="${(menu.klasifikasiMenu || []).map(tag => tag.nama_kategori_diet).join(', ')}"
                                    data-foto="${menu.foto}">
                                    <i class="fas fa-shopping-cart me-1"></i> Order
                                    </button>
                                </div>
                            </div>
                        </div>

                        `;
                    });

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

                html += `<div class="col-md-12 d-flex justify-content-between align-items-center mt-3">`;

                if(res.data.total > 12){
                    html +=`<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="12" ${filter.per_page == 12 ? 'selected' : ''}>12</option>
                                    <option value="24" ${filter.per_page == 24 ? 'selected' : ''}>24</option>
                                    <option value="50" ${filter.per_page == 50 ? 'selected' : ''}>50</option>
                                </select>
                        </div>`
                }
                // Pagination buttons
                if (res.data.last_page > 1) {
                    html += `
                            <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);
            });
    }

    const modalCheckout = $("#checkoutModal")
    function orderMenu(e){
        const klasifikasiStr = $(e).data('klasifikasi_menu') || '';
        const tags = klasifikasiStr.split(',').map(tag => tag.trim()).filter(tag => tag !== '')

        const klasifikasiMenu =tags.map(tag => `
            <span class="badge bg-secondary me-1 mb-1">${tag}</span>
            `).join('');

        modalCheckout.modal("show")
        $('#cathering_order_photo').attr('src', `/gambar/${$(e).data('foto')}`)
        $('#cathering_order_name').text($(e).data('nama_menu'))
        $('#cathering_order_menu_id').text($(e).data('id'))
        $('#cathering_order_jenis_menu').text($(e).data('jenis_menu'))
        $('#cathering_order_deskripsi').text($(e).data('deskripsi'))
        $('#cathering_order_price_keluarga_pasien').text("Rp " + parseInt($(e).data('harga_keluarga_pasien')).toLocaleString('id-ID'))
        $('#cathering_order_price_karyawan').text("Rp " + parseInt($(e).data('harga_karyawan')).toLocaleString('id-ID'))
        $("#tag_klasifikasi_menu").html(klasifikasiMenu)
    }

    function updateCartCount(count) {
        const $cartCount = $('#cartCount');
        if (count > 0) {
            $cartCount.text(count).show();
            let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');

            let menuNames = cart.map(item => item.nama_menu).join(', ');
            const maxLength = 50;

            if (menuNames.length > maxLength) {
                menuNames = menuNames.substring(0, maxLength).trim() + '...';
            }
            $('#floatingCartButton').removeClass('d-none');
            $('#floatingCartCount').text(cart.length);
            $('#floatingCartDesc').text(menuNames);
            $("#scroll-top").addClass('d-none');
        } else {
            $cartCount.hide();
            $('#floatingCartButton').addClass('d-none');
        }
    }

    function parseRupiahToNumber(rpText) {
        return parseInt(rpText.replace(/[^\d]/g, ''), 10) || 0;
    }


    $("#checkoutForm").on('submit', function(e){
             e.preventDefault();

            let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
            const now = new Date();
            const todayFormatted = now.getFullYear() + '-' + (now.getMonth() + 1).toString().padStart(2, '0') + '-' + now.getDate().toString().padStart(2, '0')

            const orders = [{
                tgl: todayFormatted,
                jumlah: 1,
                kategoriPemesanan: ''
            }];
            let idText = $("#cathering_order_menu_id").text().trim();
            let idMenu = parseInt(idText.replace(/[^\d]/g, ''), 10);
            let foto = $('#cathering_order_photo').attr('src')
            let resultFoto = foto.replace('/gambar', '');
            
            let namaMenu = $("#cathering_order_name").text();

            let existingItem = cart.find(item => item.id_menu === idMenu && item.nama_menu === namaMenu);

                if(existingItem){
                    orders.forEach(newOrder => {
                        const existingOrder =existingItem.pesanan.find(p => p.tgl === newOrder.tgl)
                        if(existingOrder){
                            existingOrder.jumlah += newOrder.jumlah;
                        }else{
                            existingItem.pesanan.push(newOrder)
                        }
                    })
                }else{
                    const orderItem ={
                        id:Date.now(),
                        id_menu : $("#cathering_order_menu_id").text(),
                        nama_menu : $("#cathering_order_name").text(),
                        harga_karyawan : parseRupiahToNumber($("#cathering_order_price_karyawan").text()),
                        harga_kp : parseRupiahToNumber($("#cathering_order_price_keluarga_pasien").text()),
                        foto: resultFoto,
                        jenis_menu: $('#cathering_order_jenis_menu').text(),
                        deskripsi:$("#cathering_order_deskripsi").text(),
                        pesanan : orders
                    }
                    cart.push(orderItem)
                }

            sessionStorage.setItem('cart', JSON.stringify(cart))
            updateCartCount(cart.length)
            modalCheckout.modal('hide')
    })

    function saveItem(e){
        let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');

        const now = new Date();
        const todayFormatted = now.getFullYear() + '-' + (now.getMonth() + 1).toString().padStart(2, '0') + '-' + now.getDate().toString().padStart(2, '0')

        const orders = [{
            tgl: todayFormatted,
            jumlah: 1,
            kategoriPemesanan: ''
        }];

        let idMenu = $(e).data('id');
        let namaMenu = $(e).data('nama_menu');
        let existingItem = cart.find(item => item.id_menu === idMenu && item.nama_menu === namaMenu);
            if(existingItem){
                orders.forEach(newOrder => {
                    const existingOrder =existingItem.pesanan.find(p => p.tgl === newOrder.tgl)
                        if(existingOrder){
                            existingOrder.jumlah += newOrder.jumlah;
                        }else{
                            existingItem.pesanan.push(newOrder)
                        }
                })
            }else{
                const orderItem ={
                    id:Date.now(),
                    id_menu : idMenu,
                    nama_menu : namaMenu,
                    harga_karyawan : $(e).data('harga_karyawan'),
                    harga_kp : $(e).data('harga_keluarga_pasien'),
                    foto: $(e).data('foto'),
                    jenis_menu: $(e).data('jenis_menu'),
                    deskripsi: $(e).data('deskripsi'),
                    pesanan : orders
                }
                cart.push(orderItem)
            }
            sessionStorage.setItem('cart', JSON.stringify(cart))
            updateCartCount(cart.length)
    }

    function checkout(){
         const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
         if(cart.length > 0){
            window.location.href = '/checkout'
         }else{
            alert("Pilih Menu terlebih dahulu yang ingin dipesan !");
            return
         }
    }