let orderIndex = 0;
    function addOrderRow(data = {}) {
        orderIndex++;

        const html = `
            <div class="row g-2 align-items-center mb-2" data-row="${orderIndex}">
                <div class="col-md-5 col-sm-12">
                    <input type="date" name="orders[${orderIndex}][tanggal]" value="${data.tanggal || ''}" class="form-control" required>
                </div>
                <div class="col-md-3 col-sm-12">
                    <select class="form-select" aria-label="Default select example" name="orders[${orderIndex}][type]" required>
                        <option value="" selected disabled>Kategori Pemesanan</option>
                        <option value="Same Day">Same Day</option>
                        <option value="Menu Normal">Perempuan</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-10">
                    <input type="number" name="orders[${orderIndex}][jumlah]" value="${data.jumlah || ''}" class="form-control" placeholder="Masukkan Jumlah" required min="1">
                </div>
                <div class="col-md-2 col-sm-2 d-flex">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeOrderRow(${orderIndex})"><i class="fa-solid fa-trash"></i></button>
                </div>
            </div>
        `;
        $('#order_input_wrapper').append(html);
    }

    function removeOrderRow(index) {
        $(`#order_input_wrapper [data-row="${index}"]`).remove();
    }
    function renderCartList() {
        $("#cartSidebar").offcanvas('show')
        $('#floatingCartButton').addClass('d-none');
        const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
        let total = 0;

        const html = cart.map(item => {
            const hargaNum = parseInt(item.harga.replace(/[^\d]/g, ''));
            let pesananHTML = '';

            item.pesanan.forEach((p, i) => {
                pesananHTML += `
                        <div class="row align-items-center mb-2" data-item-id="${item.id}" data-index="${i}">
                            <div class="col-5">
                                <input type="date" class="form-control form-control-sm tanggal-input" value="${p.tgl}" oninput="onTanggalChange(${item.id}, ${i})">
                            </div>
                            <div class="col-3">
                                <select class="form-select kategori-pemesanan-input" onchange="onKategoriChange(${item.id}, ${i})">
                                    <option value="" disabled ${!p.kategoriPemesanan ? 'selected' : ''}>Kategori Pemesanan</option>
                                    <option value="Same Day" ${p.kategoriPemesanan === 'Same Day' ? 'selected' : ''}>Same Day</option>
                                    <option value="Menu Normal" ${p.kategoriPemesanan === 'Menu Normal' ? 'selected' : ''}>Menu Normal</option>
                                </select>
                            </div>
                            <div class="col-2">
                                <input type="number" class="form-control form-control-sm jumlah-input" value="${p.jumlah}" min="1" oninput="onJumlahChange(${item.id}, ${i})">
                            </div>
                            <div class="col-2">
                                <button class="btn btn-sm btn-danger" onclick="removeOrderDate(${item.id}, ${i})"><i class="fa-solid fa-trash"></i></button>
                            </div>
                        </div>
                    `;
            });

            const itemTotal = item.pesanan.reduce((sum, p) => sum + (p.jumlah * hargaNum), 0);
            total += itemTotal;

            return `
            <div class="card mb-2 p-2">
                <div class="d-flex align-items-center">
                <img src="${item.foto}" class="me-3 rounded" style="width: 60px; height: 60px; object-fit: cover;">
                <div>
                    <div><strong>${item.nama_menu}</strong></div>
                    <div class="text-muted small">${item.harga}</div>
                </div>
                </div>

                <div class="mt-2">
                    ${pesananHTML}
                <button class="btn btn-sm btn-outline-primary mt-2" onclick="addOrderDate(${item.id})">+ Tambah Tanggal</button>
                </div>

                <div class="mt-3 d-flex justify-content-between align-items-center">
                <div><strong>Total:</strong> <span class="total-per-item" data-item-id="${item.id}">Rp ${itemTotal.toLocaleString('id-ID')}</span></div>
                <button class="btn btn-sm btn-outline-danger" onclick="removeCartItem(${item.id})">
                    <i class="fa-solid fa-trash"></i> Hapus Pesanan
                </button>
                </div>
            </div>
            `;
        }).join('');

        $('#cartListContainer').html(html);
        $('#cartTotal').text('Rp ' + total.toLocaleString('id-ID'));
    }


    function addOrderDate(itemId) {
        const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
        const item = cart.find(i => i.id === itemId);
        if (item) {
            item.pesanan.push({ tgl: '', jumlah: 1 });
            sessionStorage.setItem('cart', JSON.stringify(cart));
            renderCartList();

        }
    }

    function removeOrderDate(itemId, index) {
        const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
        const item = cart.find(i => i.id === itemId);
        if (item && item.pesanan.length > index) {
            item.pesanan.splice(index, 1);
            sessionStorage.setItem('cart', JSON.stringify(cart));
            renderCartList();
        }
    }

    function removeCartItem(itemId){
         let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
         cart = cart.filter(i => i.id !== itemId);
         sessionStorage.setItem('cart', JSON.stringify(cart));
         updateCartCount(cart.length);
         renderCartList()
    }

    function onJumlahChange(itemId, index) {
        const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
        const jumlahInput = document.querySelector(`div[data-item-id='${itemId}'][data-index='${index}'] .jumlah-input`).value;
        if (!isNaN(jumlahInput)) {
            cart.forEach(item => {
                if (item.id === itemId) {
                    item.pesanan[index].jumlah = parseInt(jumlahInput);
                }
            });
            sessionStorage.setItem('cart', JSON.stringify(cart));
            renderCartList();
        }
    }

    function onTanggalChange(itemId, index) {
        const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
        const tanggalInput = document.querySelector(`div[data-item-id='${itemId}'][data-index='${index}'] .tanggal-input`).value;
        cart.forEach(item => {
            if (item.id === itemId) {
                item.pesanan[index].tgl = tanggalInput;
            }
        });
        sessionStorage.setItem('cart', JSON.stringify(cart));
        validateCheckoutButton();
    }

    function onKategoriChange(itemId, index) {
        const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
        const item = cart.find(i => i.id === itemId);
        if (!item) return;

        const kategori = $(`[data-item-id='${itemId}'][data-index='${index}'] .kategori-pemesanan-input`).val();
        item.pesanan[index].kategoriPemesanan = kategori;
        sessionStorage.setItem('cart', JSON.stringify(cart));
    }


    function renderCartTotalOnly() {
        const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
        let total = 0;
        cart.forEach(item => {
            const hargaNum = parseInt(item.harga.replace(/[^\d]/g, ''));
            const itemTotal = item.pesanan.reduce((sum, p) => sum + (p.jumlah * hargaNum), 0);
            total += itemTotal;
        });
        $('#cartTotal').text('Rp ' + total.toLocaleString('id-ID'));
    }

    function updateFloatingCartButton() {
        const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
        const totalItem = cart.reduce((sum, item) => {
            return sum + item.pesanan.reduce((s, p) => s + p.jumlah, 0);
        }, 0);

        const totalHarga = cart.reduce((sum, item) => {
            const harga = parseInt(item.harga.replace(/[^\d]/g, ''));
            return sum + item.pesanan.reduce((s, p) => s + (p.jumlah * harga), 0);
        }, 0);

        if (cart.length > 0) {
            $('#floatingCartButton').removeClass('d-none');
            $('#floatingCartCount').text(totalItem);
            $('#floatingCartTotal').text('Rp ' + totalHarga.toLocaleString('id-ID'));
            $('#floatingCartDesc').text(`Total pesanan dari ${cart[0].nama_menu}`);
        } else {
            $('#floatingCartButton').addClass('d-none');
        }
    }