@extends('layouts.backend')

@section('content')

<div class="row" >
    <div class="col-sm-6" >
        @blocknh()

        <table class="table table-hover table-vcenter" >
            <thead class="thead-light" >
                <tr>
                    <th style="width: 70%;" >สินค้า</th>
                    <th style="width: 20%;" >จำนวน</th>
                    <th style="width: 10%;" >ลบ</th>
                </tr>
            </thead>
            <tbody id="table-body" >
                
            </tbody>
        </table>
        <input type="hidden" name="table_id" id="table_id" value="{{ $table_id }}" >

        @endblocknh
    </div>
    <div class="col-sm-6" >
        @blocknh()
        <div class="row gutters-tiny push" >
            @foreach ($products as $index => $product)
            <div class="col-3">
                <a class="block text-center bg-primary add-product" href="javascript:;" >
                    <div class="block-content block-content-full aspect-ratio-16-9 d-flex justify-content-center align-items-center">
                        <div>
                            <div class="font-w600 mt-2 text-uppercase text-muted">{{ $product->name }}</div>
                        </div>
                    </div>
                    <input type="hidden" name="productid" value="{{ $product->id }}" >
                </a>
            </div>
            @endforeach
        </div>
        @endblocknh
    </div>
</div>

<script id="entry-template" type="text/x-handlebars-template">
    <tr>
        <td>@{{ name }}</td>
        <td>
            <input type="number" class="form-control product-qty" name="qty" placeholder="qty" value="@{{ qty }}" >
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-rounded">
                <i class="fa fa-fw fa-times mr-1"></i>
            </button>
        </td>
        <input type="hidden" name="product_id" value="@{{ id }}" >
    </tr>
</script>

@endsection

@section('script')
<script src="packages/handlebars/handlebars.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        (function ($) {

            function addProduct(id){
                $.post('rb-admin/addtableproduct', {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    product_id: id,
                    table_id: $("#table_id").val()
                }, function (res) {
                    if (res.status) {
                        var html = getTableObject(res.product);
                        $("#table-body").append(html);
                    }
                }, 'json');
            }

            function getTableObject(product){
                var source   = document.getElementById("entry-template").innerHTML;
                var template = Handlebars.compile(source);
                var context = {
                    name : product.name,
                    qty : product.qty,
                    id : product.product_id,
                };
                var html    = template(context);
                return html;
            }

            $(".add-product").on("click", function(){
                var productid = $(this).find("input:hidden[name=productid]").val();
                addProduct(productid);
            });

            $(document).on("change", ".product-qty", function () {
                var qty = $(this).val();
                var product_id = $(this).parents("tr").find("input:hidden[name=product_id]").val();
                $.post('rb-admin/changeqtytableproduct', {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    product_id: product_id,
                    table_id: $("#table_id").val(),
                    qty: qty
                }, function (res) {
                    /* if (res.status) {
                        var html = getTableObject(res.product);
                        $("#table-body").append(html);
                    } */
                }, 'json');
            });

            $.get('rb-admin/gettableproduct', {
                table_id: $("#table_id").val()
            }, function(res){
                var table_products = res.table_products;
                console.log('res', table_products);
                table_products.forEach(function(product){
                    var html = getTableObject(product);
                    $("#table-body").append(html);
                });
            }, 'json');

        })(jQuery);
    });

</script>

@endsection