{{ block title }}
Enjoy a 10 HKD discount if you spend 100 HKD or more!
<br>
Enjoy a total of 30 HKD discount if you spend 200 HKD or more!
{{ endblock }}
{{ block content }}
<h3>Please order your meal:</h3>
<br>
<h5>My cart</h5>
<table class="table table-striped">
    <thead>
    <tr>
        <th>Name</th>
        <th>Quantity</th>
        <th>Price</th>
        <th></th>
    </tr>
    </thead>
    <tbody id="cart-body">

    </tbody>
</table>
<br>
<h5>Summary</h5>
<table class="table table-striped">
    <thead>
      <tr>
        <th>Sum</th>
        <th>Discount</th>
        <th>Final Price</th>
      </tr>
    </thead>
    <tbody id="cart-body_2">

    </tbody>
  </table>

<p>
    <button type="button" class="btn btn-primary" onclick="checkout()">
        Checkout: <b><span id="cart-total"></span></b>
    </button>
    <div id="confirm-btns" style="display: none;">
        <button onclick="goback()" type="button" class="btn btn-secondary" >Keep Shopping</button>
        <button class="btn btn-secondary" >Confirm</button>
    </div>
    

    <script>
        let myCart = document.getElementById('cart-body');
        let cartTotal = document.getElementById('cart-total');
        let summary = document.getElementById('cart-body_2'); // summary table, can be modified

        // function cu(amount) {
        //     return `${amount} HKD`;
        // }

        function liveRecv(data) {
            let html = '';
            for (let item of data.items) {
                item.total_price = Math.round(item.total_price*100)/100 // round to 2 decimal places
                data.sum = Math.round(data.sum*100)/100
                data.final_price = Math.round(data.final_price*100)/100
                html += 
                `
                <tr>
                    <td>${item.name}</td>
                    <td>${item.quantity}</td>
                    <td>${item.total_price} HKD</td>
                    <td><button type="button" value="${item.sku}" onclick="removeFromCart(this)" class="btn btn-secondary">-1</button></td>
                </tr>
                `;
            }

            myCart.innerHTML = html;
            
            let html_2 = `
                <tr>
                    <td>${data.sum} HKD</td>
                    <td>${data.discount} HKD</td>
                    <td>${data.final_price} HKD</td>
                </tr>
                `;
            summary.innerHTML = html_2;
            cartTotal.innerText = `${data.final_price} HKD`;
        }

    </script>

<h3>Menu</h3>
<div class="d-flex flex-wrap">
    {{ for p in C.PRODUCTS }}
    <div class="card">
        <div class="card-body">
            <img src="{{ static p.image_path }}" class="card-img-top" style="width: 145px">
            <h5 class="card-title">{{ p.name }}</h5>
            <p class="card-text">
                Price: {{ p.unit_price }}
            </p>
            <button type="button" value="{{ p.sku }}" onclick="addToCart(this)" class="btn btn-secondary">+1</button>
        </div>
    </div>
    {{ endfor }}
</div>

<script>
    function addToCart(ele) {
        modifyCart(ele.value, 1);
    }

    function removeFromCart(ele) {
        modifyCart(ele.value, -1);
    }

    function modifyCart(sku, delta) {
        liveSend({'sku': sku, 'delta': delta});
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });
    function checkout() {
        document.getElementById("confirm-btns").style.display = "block"
    }
    function goback() {
        document.getElementById("confirm-btns").style.display = "none"
    }

</script>


<!-- icon attribution; remove this if you're not using the grocery icons -->
<!-- <br><br><br>
<div style="font-size: x-small;">
    Icons made by <a style="color: inherit;" href="https://www.freepik.com" title="Freepik">Freepik</a>
    from <a style="color: inherit;" href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</div> -->

{{ endblock }}