function updateCartDisplay() {
    let totalBill = 0;
    let cartHTML = "<h3>Your Cart:</h3><ul style='list-style: none; padding: 0;'>";
    cart.forEach((item, index) => {
        totalBill += item.itemTotal;
        const extras = item.extras.map((extra, i) => {
            const extraQuantity = item.extrasQuantities ? item.extrasQuantities[i] || 1 : 1;
            const extraTotal = extrasPrices[extra] * extraQuantity;
            totalBill += extraTotal;
            return `<li>
                        <div style='display: flex; justify-content: space-between; align-items: center;'>
                            <span>${extra}</span>
                            <span>Price: $${extrasPrices[extra].toFixed(2)}</span>
                            <div>
                                <label for='extra-quantity-${index}-${i}'>Quantity:</label>
                                <input type='number' id='extra-quantity-${index}-${i}' value='${extraQuantity}' min='1' style='width: 50px;' onchange='updateExtraQuantity(${index}, ${i}, this.value)'>
                            </div>
                            <span>Total: $${extraTotal.toFixed(2)}</span>
                            <input type='checkbox' id='extra-remove-${index}-${i}' onclick='removeExtra(${index}, ${i})'> Remove
                        </div>
                    </li>`;
        }).join('');

        cartHTML += `<li style='border-bottom: 1px solid #ddd; margin-bottom: 10px;'>
                        <div style='display: flex; justify-content: space-between; align-items: center;'>
                            <span>${item.name}</span>
                            <span>Item Price: $${item.price.toFixed(2)}</span>
                            <div>
                                <label for='item-quantity-${index}'>Quantity:</label>
                                <input type='number' id='item-quantity-${index}' value='${item.quantity}' min='1' style='width: 50px;' onchange='updateItemQuantity(${index}, this.value)'>
                            </div>
                            <span>Total: $${(item.price * item.quantity).toFixed(2)}</span>
                            <input type='checkbox' id='item-remove-${index}' onclick='removeItem(${index})'> Remove
                        </div>
                        <div style='margin-left: 20px;'>
                            <h4>Extras:</h4>
                            <ul style='list-style: none; padding: 0;'>${extras}</ul>
                        </div>
                        <div style='margin-left: 20px;'>
                            <strong>Instructions:</strong> ${item.instructions || "None"}
                        </div>
                    </li>`;
    });
    cartHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
    cartHTML += `<button style='margin-top: 10px; background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;' onclick='submitCart()'>Submit</button>`;
    document.getElementById('floating-cart').innerHTML = cartHTML;
}

function updateItemQuantity(index, newQuantity) {
    const quantity = parseInt(newQuantity) || 1;
    cart[index].quantity = quantity;
    cart[index].itemTotal = cart[index].price * quantity;
    updateCartDisplay();
}

function updateExtraQuantity(cartIndex, extraIndex, newQuantity) {
    const quantity = parseInt(newQuantity) || 1;
    cart[cartIndex].extrasQuantities = cart[cartIndex].extrasQuantities || [];
    cart[cartIndex].extrasQuantities[extraIndex] = quantity;
    updateCartDisplay();
}

function removeExtra(cartIndex, extraIndex) {
    cart[cartIndex].extras.splice(extraIndex, 1);
    if (cart[cartIndex].extrasQuantities) {
        cart[cartIndex].extrasQuantities.splice(extraIndex, 1);
    }
    updateCartDisplay();
}

function submitCart() {
    let finalOrderHTML = "<h3>Final Order:</h3><ul>";
    let totalBill = 0;
    cart.forEach(item => {
        totalBill += item.itemTotal;
        const extras = item.extras.map((extra, i) => {
            const extraQuantity = item.extrasQuantities ? item.extrasQuantities[i] || 1 : 1;
            const extraTotal = extrasPrices[extra] * extraQuantity;
            totalBill += extraTotal;
            return `${extra} (x${extraQuantity}) - $${extraTotal.toFixed(2)}`;
        }).join(', ');

        finalOrderHTML += `<li>
            ${item.name} (x${item.quantity}) - $${item.itemTotal.toFixed(2)}
            <br>Extras: ${extras}
            <br>Instructions: ${item.instructions || "None"}
        </li>`;
    });
    finalOrderHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
    document.getElementById('final-order').innerHTML = finalOrderHTML;
    alert("Your final order has been submitted!");
}