<!-- start Simple Custom CSS and JS -->
<script type="text/javascript">
<script>

let cart = [];

function addToCart(id, name, price) {
    let found = cart.find(item => item.id === id);

    if (found) {
        found.qty += 1;
    } else {
        cart.push({ id, name, price, qty: 1 });
    }

    renderCart();
}

function changeQty(id, change) {
    let item = cart.find(i => i.id === id);
    if (!item) return;

    item.qty += change;

    if (item.qty <= 0) {
        cart = cart.filter(i => i.id !== id);
    }

    renderCart();
}

function renderCart() {
    let html = '';
    let total = 0;

    cart.forEach(item => {
        total += item.price * item.qty;

        html += `
        <div>
            ${item.name} x ${item.qty}
            <button onclick="changeQty(${item.id}, -1)">-</button>
            <button onclick="changeQty(${item.id}, 1)">+</button>
        </div>
        `;
    });

    html += `<h3>Total: RM ${total.toFixed(2)}</h3>`;
    html += `<button onclick="placeOrder()">Place Order</button>`;

    document.getElementById('cart').innerHTML = html;
}

// AJAX URL
const ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";

function placeOrder() {

    let table = new URLSearchParams(window.location.search).get('table');

    fetch(ajax_url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
            action: 'create_pos_order',
            items: JSON.stringify(cart),
            table: table
        })
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            alert("Order Placed! #" + data.data.order_id);
            cart = [];
            renderCart();
        } else {
            alert("Error");
        }
    });
}</script>
<!-- end Simple Custom CSS and JS -->