@extends('restaurant.layouts.master_order')

@section('style')
    <style>
        .card-haeder {
            padding: 5px;
            border: 1px solid #318777;
        }
        .add_button {
            background: blue;
            color: white;
            border-radius: 5px;
            padding: 1px 4px 1px 4px;
            cursor: pointer;
        }
        .add_button:hover {
            background: #0d6efd;
        }
        p {
            margin: 0;
        }
        ul{
            list-style: none;
            padding: 0;
        }
        .product_container {
            width: 100%;
            height: 100%;
            padding: 5px;
            border-radius: 5px;
        }

        .all_product{
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            overflow: auto;
        }
        .product {
            width: 130px;
            height: 130px;
            border: 1px solid #318777;
            position: relative;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .product_img {
            /* product img set background */
            width: 100%;
        }
        .product_details {
            /* product details set background */
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .5);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            opacity: 1;
            transition: all .5s ease;
        }
        /*product hover product_name text animation */
        .product:hover .product_details {
            opacity: 0;
        }

        .product_name {
            font-size: 15px;
            font-weight: bold;
            font-family: time;
            text-align: center;
        }
        .product_price {
            font-size: 15px;
            position: absolute;
            bottom: 0px;
        }
        .product_section {
            padding: 5px;
            height: 100%;
        }
        .bottom-section{
            height: 30px;
            background: #eaeaea;
        }
        .card {
            /* always fixed bottom */
            background: #eaeaea;
        }
        .card-body {
            /* padding: 0px; */
        }
        .tab-content {
            
        }
        .card-footer {
        }
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
        }
        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
            text-align: right;
        }
        .list-group-item {
            cursor: pointer;
            padding: 5px;
        }
        .list-group-item:hover {
            background: #e0e0e0;
        }
        .product-td > td {
            padding: 5px;
        }
        .txtAmount {
            text-align: right;
            font-weight: bold;
        }
        .btnActionList {
            cursor: pointer;
        }
        .btnActionList:hover {
            background: #690000;
        }
        .modelCmp {
            display: flex; 
            justify-content: space-between;
            margin-bottom: 5px;
        }
    </style>
@endsection

@section('home')

<div class="card" style="height: 100vh; margin: 0px;">
    <div class="card-haeder">
        <div class="p-2" style="text-align: center; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; background: #eaeaea;">
            <input style="display:none; width: 230px; height: 27px;" id="order_id" />
            <div style="display: flex; justify-content: center; flex-direction: column;">
                <input type="checkbox" class="reset_input " id="customer_type">
                <label for="customer_type">Credit Customer</label>
            </div>
            <div class="custom_cus_name">
                <input class="form-control reset_input" style=" width: 230px; height: 27px;" placeholder="Customer Phone" id="cus_phone" />
                <input class="form-control reset_input" style=" width: 230px; " placeholder="Customer Name" id="cus_name" />
            </div>
            <div class="credit_customer" style="display: none;">
                <h6>Customer Name <span class="add_button" id="addNewCustomer">+</span></h6>
                <select class="form-control select2 reset_input" style=" width: 230px;" id="credit_customer">
                </select>
            </div>
            <div class="">
                <h6>Table <span class="add_button" id="addNewTable">+</span></h6>
                <select name="table_[]" id="table_" style=" width: 250px !important;" class="form-control select_2" multiple>
                </select>
            </div>
            <div class="">
                <h6>Order Type <span class="add_button" id="addNewOrderType">+</span></h6>
                <select class="form-control select2 reset_input" style=" width: 230px;" id="orderTypes">
                </select>
            </div>
            <div class="">
                <h6>Waiter <span class="add_button" id="addNewWaiter">+</span></h6>
                <select class="form-control select_2 reset_input" style=" width: 230px;" id="waiter_">
                </select>
            </div>
            <div class="">
                <h6>Shipping Method <span class="add_button" id="addNewShippingMethod">+</span></h6>
                <select class="form-control select_2 reset_input" style=" width: 230px;" id="shippingMethods">
                </select>
            </div>
        </div>
    </div>
    <div class="card-body d-flex flex-wrap" style="padding: 0px; min-height: 400px;">
        <div class="product_section col-md-6">
            <div class="product_container d-flex flex-column">
                <ul class="flex-grow-0 d-flex flex-wrap" style="gap: 5px; margin: 0px;">
                    <li>
                        <button class="btn btn-md btn-primary product_button" id="all_item" value="All">All</button>
                    </li>
                    <li>
                        <button class="btn btn-md btn-primary product_button" id="packages_item" value="packageProducts">Package</button>
                    </li>
                    <li>
                        <button class="btn btn-md btn-primary product_button" id="category_item" value="categoryProducts">Category</button>
                    </li>
                    @foreach($menus as $menu)
                        <li>
                                                        <button class="btn btn-md btn-primary product_button" value="{{ $value }}">{{ $menu->name }}</button>
                        </li>
                    @endforeach
                </ul>
                <div class="flex-grow-0 d-flex flex-wrap" style="gap: 5px; margin: 5px 0px 5px 0px;">
                    <input class="form-control reset_input" style="height: 27px; " 
                    placeholder="Search ## Barcode/ Name/ Price" id="search_product" />
                </div>
                <div class="flex-grow-1 overflow-auto">
                    <img id="product_list_loading" src="{{ asset('restaurant/loading.gif') }}" style="width: 50%; position: absolute; z-index: 9999; 
                    left: 0; right: 0; bottom: 0; top: 0; margin: auto; display: none;" alt="">
                    <div id="product_list" class="">
                    </div>
                </div>
            </div>
        </div>
        <div class="sale-section col-md-6">
            <div class="d-flex flex-wrap" style="height: 100%;">
                <div class="col-md-8 d-flex flex-column" style="padding: 5px;">
                    <div class="search_product flex-grow-0">
                        <input class="form-control reset_input" style="height: 27px; " 
                        placeholder="Add Product Use Barcode" id="add_product_by_barcode" />
                    </div>
                    <div class="cart_product_list flex-grow-1" style="height: 150px; overflow: auto;">
                        <table class="datatable table-hover table-bordered" style="width: 100%;">
                            <thead style="text-align: center">
                                <tr>
                                    <th scope="col-5">Product Name</th>
                                    <th scope="col-2">Price</th>
                                    <th scope="col-3">Qty</th>
                                    <th scope="col-2">Total</th>
                                    <th scope="col-1"></th>
                                </tr>
                            </thead>
                            <tbody style="height: 100%; overflow: auto;">

                            </tbody>
                        </table>
                    </div>
                    <div class="flex-grow-0">
                        <div class="d-flex flex-wrap">
                            <div class="col-12" style="border: 1px solid #318777; padding: 5px;">
                                <div class="row">
                                    <div class="col-5">Total</div>
                                    <div class="col-2 text-right" id="qtyAmount" class="txtAmount"></div>
                                    <div class="col-5 text-right" id="totalAmount" class="txtAmount"></div>
                                </div>
                            </div>
                            <div class="col-6" style="border: 1px solid #318777; padding: 5px; display: flex; justify-content: space-between;">
                                <div>Discount:</div>
                                <div style="display: flex;">
                                    <div style="padding: 3px;">%</div>
                                    <input class="txtAmount" style="width: 50%;" type="number" id="discount_par" value="0" placeholder="%">
                                    <input class="txtAmount" style="width: 50%;" type="number" id="discountAmount" value="0" placeholder="TK">
                                </div>
                            </div>
                            <div class="col-6" style="border: 1px solid #318777; padding: 5px; display: flex; justify-content: space-between;">
                                <div>Net Total</div>
                                <div id="netTotalAmount" class="txtAmount"></div>
                            </div>
                            <div class="col-6" style="border: 1px solid #318777; padding: 5px; display: flex; justify-content: space-between;">
                                <div>Service Charge</div>
                                <div id="serviceChargePar" class="txtAmount"></div>
                                <div>% = </div>
                                <div id="serviceChargeAmount" class="txtAmount"></div>
                            </div>
                            <div class="col-6" style="border: 1px solid #318777; padding: 5px; display: flex; justify-content: space-between;">
                                <div>Waiter Comission</div>
                                <div id="waiterComissionPar" class="txtAmount"></div>
                                <div>% = </div>
                                <div id="waiterComissionAmount" class="txtAmount"></div>
                            </div>
                            <div class="col-6" style="border: 1px solid #318777; padding: 5px; display: flex; justify-content: space-between;">
                                <div>Shipping Charge</div>
                                <div id="shippingChargeAmount" class="txtAmount"></div>
                            </div>
                            <div class="col-6" style="border: 1px solid #318777; padding: 5px; display: flex; justify-content: space-between;">
                                <div>Tax</div>
                                <div id="vatAmount" class="txtAmount"></div>
                            </div>
                            <div class="col-6 d-none" style="border: 1px solid #318777; padding: 5px; display: flex; justify-content: space-between;">
                                <input type="number" id="coupon" placeholder="Coupon" style="width: 50%;">
                                <div id="couponAmount" class="txtAmount"></div>
                            </div>
                            <div class="col-12" style="border: 1px solid #318777; padding: 5px; display: flex; justify-content: space-between; font-size: 18px; font-weight: bold;">
                                <div>Grand Total</div>
                                <div id="grandTotalAmount" class="txtAmount"></div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between" style="gap: 5px; padding-top: 5px;">
                            <button class="btn btn-primary" style="width: 100%;" id="btnRefresh">Refresh</button>
                            <button class="btn btn-success" id="btn_bill" style="width: 100%;">Bill</button>
                            <button class="btn btn-warning btnOrder" style="width: 100%;" id="btn_item_order" value="order">Order</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4" style="padding: 0px;">
                    <div class="d-flex flex-column" style="padding: 5px;">
                        <h4 class="flex-grow-0">List Of Order</h4>
                        <input class="form-control flex-grow-0" id="order_list" type="text" placeholder="Search..">
                        <div class=" flex-grow-1" style="overflow: auto; height: calc(100vh - 230px);">
                            <ul class="list-group" id="order_lists">

                            </ul>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <div></div>
    </div>
      
    <!-- Modal -->
    <div class="modal fade" id="model_" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Make Bill</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-12 modelCmp" >
                                <label for="paymentAmount">Payment Amount</label>
                                <input type="number" class="form-control" id="paymentAmount" readonly style="width: 150px;">
                            </div>
                            <div class="col-12 modelCmp" >
                                <label>Payment Type</label>
                                <div>
                                    <input type="radio" name="paymentType" id="paymentType1" value="Cash" checked> <label for="paymentType1">Cash</label>
                                    <input type="radio" name="paymentType" id="paymentType2" value="Cradit"> <label for="paymentType2">Cradit</label>
                                    <input type="radio" name="paymentType" id="paymentType3" value="CheckIn"> <label for="paymentType3">CheckIn</label>
                                </div>
                            </div>
                            <div class="col-12 modelCmp" >
                                <label for="cashList">Cash List</label>
                                <select class="form-control" name="cashList" id="cashList" style="width: 150px;">
                                    @foreach ($cash_list as $value)
                                        <option value="{{ $value->id }}">{{ $value->name_eng }}</option>
                                    @endforeach
                                </select>
                                <input type="number" class="form-control customer_amount" id="cashAmount" placeholder="Cash Amount" style="width: 150px;">
                            </div>
                            <div class="col-12 modelCmp" >
                                <label for="bankList">Bank List</label>
                                <select class="form-control" name="bankList" id="bankList" style="width: 150px;">
                                    @foreach ($bank_list as $value)
                                        <option value="{{ $value->id }}">{{ $value->name_eng }}</option>
                                    @endforeach
                                </select>
                                <input type="number" class="form-control customer_amount" id="bankAmount" placeholder="Bank Amount" style="width: 150px;">
                            </div>
                            <div class="col-12 modelCmp" >
                                <label for="returnAmount">Return Amount</label>
                                <input type="number" class="form-control" id="returnAmount" readonly style="width: 150px;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="btn_bill_con" value="order_bill">Bill</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        // browser all keybord shortcut key disable
        $(document).keydown(function (e) {
            if(e.altKey && e.which == 65) {
                return false;
            }
        });

        // keybord shortcut key for product search press alt + p
        $(document).keydown(function (e) {
            if(e.altKey && e.which == 80) {
                $('#search_product').focus();
            }
        });

        // keybord shortcut key for order press alt + o
        $(document).keydown(function (e) {
            if(e.altKey && e.which == 79) {
                $('#btn_item_order').click();
            }
        });

        // keybord shortcut key for dis par press ctrl + alt + d
        $(document).keydown(function (e) {
            if(e.ctrlKey && e.altKey && e.which == 68) {
                $('#discount_par').focus();
            }
        });
        
        // keybord shortcut key for dis par press ctrl + alt + p
        $(document).keydown(function (e) {
            if(e.ctrlKey && e.altKey && e.which == 80) {
                $('#discountAmount').focus();
            }
        });

        $(document).ready(function () {
            $("#cus_phone").inputmask('8809999999999');
            select_search('credit_customer','parties',"party_type = 2 and name_eng LIKE ","id, name_eng as text");
            select_search('table_','res_multidata_settings',"type = 3 and status = 1 and name LIKE ","id, name as text");
            select_search('orderTypes','res_multidata_settings',"type = 5 and status = 1 and name LIKE ","id, name as text");
            select_search('waiter_','res_waiters',"status = 1 and name LIKE ","id, name as text");
            select_search('shippingMethods','res_multidata_settings',"type = 4 and status = 1 and name LIKE ","id, name as text");

            set_types_data('orderTypes','res_multidata_settings',"id = ","price as amount",'serviceChargePar','serviceChargeAmount');
            set_types_data('waiter_','res_multidata_settings',"id = 5","price as amount",'waiterComissionPar','waiterComissionAmount');
            set_types_data('shippingMethods','res_multidata_settings',"id = ","price as amount",'shippingChargeAmount','shippingChargeAmount');
            $("#all_item").click();
            load_order_list();
        });

        $(document).on('click','.billModal',function (event) {
            var grandTotalAmount = $('#grandTotalAmount').html();
            $('#paymentAmount').val(grandTotalAmount);
            $('#cashAmount').val(grandTotalAmount);
            bill_amount_calculation();
            $('#model_').modal('show');
        });

        $(document).on('click', '#btn_bill', function (event) {
            var grandTotalAmount = $('#grandTotalAmount').html();
            $('#paymentAmount').val(grandTotalAmount);
            $('#cashAmount').val(grandTotalAmount);
            var returnAmount = $('#returnAmount').val();
            bill_amount_calculation();
            if(grandTotalAmount == 0) {
                new Swal({
                    title: "Error!",
                    text: "Please add product!",
                    icon: "error",
                    timer: 2000,
                });
                return false;
            } else {
                $('#model_').modal('show');
            }
        });

        $(document).on('click', '#btn_bill_con', function (event) {
            var returnAmount = $('#returnAmount').val();
            if(returnAmount < 0) {
                new Swal({
                    title: "Error!",
                    text: "Payment amount is less than grand total!",
                    icon: "error",
                    timer: 2000,
                });
                return false;
            }
            else {
                var type = $(this).val();
                bill_save(type);
            }
        });

        $(document).on('click', '.btnOrder', function (event) {
            var grandTotalAmount = $('#grandTotalAmount').html();
            if(grandTotalAmount == 0) {
                new Swal({
                    title: "Error!",
                    text: "Please add product!",
                    icon: "error",
                    timer: 2000,
                });
                return false;
            } else {
                var type = $(this).val();
                bill_save(type);
            }
        });

        $('.customer_amount').keyup(function () {
            bill_amount_calculation();
        });

        function bill_amount_calculation() {
            var cashAmount = $('#cashAmount').val();
            var bankAmount = $('#bankAmount').val();
            var paymentAmount = $('#paymentAmount').val();
            var returnAmount = 0;
            if(cashAmount != '' && bankAmount != '') {
                returnAmount = (parseInt(cashAmount) + parseInt(bankAmount)) - paymentAmount;
            } else if(cashAmount != '') {
                returnAmount = parseInt(cashAmount) - paymentAmount;
            } else if(bankAmount != '') {
                returnAmount = parseInt(bankAmount) - paymentAmount;
            }
            //if return amount is negative then color red
            if(returnAmount < 0) {
                $('#returnAmount').css('color', 'red');
            } else {
                $('#returnAmount').css('color', 'black');
            }
            $('#returnAmount').val(returnAmount);
        }

        function load_order_list() {
            $.ajax({
                url: "{{ route('restaurant.order.liveSearch') }}",
                type: "GET",
                data: {
                    select: "id, order_no, bill_id, grand_total, created_at",
                    table: "res_orders",
                    condition: "bill_id = 0 and status = 1",
                    orderby : "id desc"
                },
                success: function (data) {
                    var html = "";
                    $.each(data, function (key, value) {
                        html += `<li class="list-group-item edit_action" data-id="`+ value.id +`">
                                    #`+ value.order_no +` 
                                    <span class="badge badge-warning badge-pill">Order</span>
                                    <span class="badge badge-secondary badge-pill">`+ value.grand_total +` TK</span>
                                    <span class="badge badge-danger badge-pill btnActionList btnCancel" data-id="`+ value.id +`">Cancel</span>
                                    <span class="badge badge-primary badge-pill">`+ date_format(value.created_at) +`</span>
                                </li>`;
                    });
                    $("#order_lists").html(html);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }

        $(document).on('click','.btnCancel',function (event) {
            // stop propagation
            event.stopPropagation();
            var id = $(this).data('id');
            new Swal({
                title: "Are you sure?",
                text: "Once deleted, you will not be able to recover this order!",
                icon: "warning",
            }).then((willDelete) => {
                if(willDelete.isConfirmed) {
                    $.ajax({
                        url: "{{ route('restaurant.order.cancel_order') }}",
                        type: "GET",
                        data: {
                            id: id
                        },
                        success: function (data) {
                            load_order_list();
                            //show alert
                            $('#btnRefresh').click();
                            new Swal({
                                title: "Success!",
                                text: "Order has been canceled!",
                                icon: "success",
                                timer: 2000,
                            });
                        },
                        error: function (data) {
                            console.log(data);
                            new Swal({
                                title: "Error!",
                                text: "Order cancel failed!",
                                icon: "error",
                                timer: 2000,
                            });
                        }
                    });
                }
            });
        });

        $(document).on('click','.edit_action',function () {
            $('#btnRefresh').click();
            var id = $(this).data('id');
            sweetalertLoader(true);
            $.ajax({
                url: "{{ route('restaurant.order.edit_data_load') }}",
                type: "GET",
                data: {
                    id: id
                },
                success: function (data) {
                    console.log(data);
                    $('#order_id').val(data.id);
                    $("#customer_type").prop('checked', data.customer_id != 0 ? true : false);
                    fun_customer_type();
                    if(data.customer) {
                        $("#cus_phone").val(data.customer.mobile);
                        $("#cus_name").val(data.customer.name_eng);
                        customer_option = '<option value="'+ data.customer.id +'" selected>'+ data.customer.name_eng +'</option>';
                        $("#credit_customer").html(customer_option);
                    } else {
                        $("#cus_name").val(data.customer_name);
                    }

                    if(data.table_infos) {
                        var table_option = '';
                        $.each(data.table_infos, function (key, value) {
                            table_option += '<option value="'+ value.id +'" selected>'+ value.name +'</option>';
                        });
                        $("#table_").html(table_option);
                    }

                    if(data.get_order_type) {
                        orderTypes_option = '<option value="'+ data.get_order_type.id +'" selected>'+ data.get_order_type.name +'</option>';
                        $("#orderTypes").html(orderTypes_option);
                    }

                    if(data.waiter) {
                        waiter_option = '<option value="'+ data.waiter.id +'" selected>'+ data.waiter.name +'</option>';
                        $("#waiter_").html(waiter_option);
                    }

                    if(data.get_shipping_method) {
                        shippingMethods_option = '<option value="'+ data.get_shipping_method.id +'" selected>'+ data.get_shipping_method.name +'</option>';
                        $("#shippingMethods").html(shippingMethods_option);
                    }
                    $("#discount_par").val(data.dis_par);
                    $('#waiterComissionPar').html(data.waiter_commision_par);
                    $('#serviceChargePar').html(data.order_type_par);
                    $('#shippingChargeAmount').html(data.shipping_cost);
                    
                    var html = "";
                    if(data.order_item_details) {
                        $.each(data.order_item_details, function (key, value) {
                            html += '<tr>';
                            html += `<td class="product-td" style="width: 50%;"><div class="product-td d-flex">`;
                            html += `<img src="`+ value.get_item_info.image +`" alt="" style="width: 30px; height: 30px; margin-right: 5px;">
                                    <div>`+ value.get_item_info.name_eng +`</div>`;
                            html += `</div></td>`;
                            html += '<td class="product-td product_price_" style="width: 10%; text-align: right; padding: 5px;">'+ value.get_item_info.sell_price +'</td>';
                            html += '<td class="product-td" style="display: flex">';
                            html += '<span class="add_button addQty flex-grow-0">+</span>';
                            html += '<input type="number" class="qty flex-grow-1" value="'+ value.qty +'" style="width: 33px; text-align: center;">';
                            html += '<span class="add_button subQty flex-grow-0">-</span>';
                            html += '</td>';
                            html += '<td class="product-td product_total" style="width: 10%; text-align: right; padding: 5px;">'+ value.qty * value.price +'</td>';
                            html += '<td class="product-td" style="width: 5%;"><div class="remove" style="cursor: pointer; color:red;"><i class="fa fa-trash"></i></div></td>';
                            html += `<td class="d-none product_id_">`+ value.item_id +`</td>`;
                            html += `<td class="d-none product_type_">product</td>`;
                            html += `<td class="d-none product_vat_">`+ value.var_par +`</td>`;
                            html += '</tr>';
                        });
                    }
                    if(data.order_package_details) {
                        $.each(data.order_package_details, function (key, value) {
                            var qty = value[0].qty / value[0].get_package_info.package_details.filter(x => x.item_id == value[0].item_id)[0].quantity;
                            html += '<tr>';
                            html += `<td class="product-td" style="width: 50%;"><div class="product-td d-flex">`;
                            html += `<img src="`+ value[0].get_package_info.photo +`" alt="" style="width: 30px; height: 30px; margin-right: 5px;">
                                <div>`+ value[0].get_package_info.name +`</div>`;
                            html += `</div></td>`;
                            html += '<td class="product-td product_price_" style="width: 10%; text-align: right; padding: 5px;">'+ value[0].get_package_info.package_price +'</td>';
                            html += '<td class="product-td" style="display: flex">';
                            html += '<span class="add_button addQty flex-grow-0">+</span>';
                            html += '<input type="number" class="qty flex-grow-1" value="'+ qty +'" style="width: 33px; text-align: center;">';
                            html += '<span class="add_button subQty flex-grow-0">-</span>';
                            html += '</td>';
                            html += '<td class="product-td" style="width: 10%; text-align: right; padding: 5px;">'+ qty * value[0].get_package_info.package_price +'</td>';
                            html += '<td class="product-td" style="width: 5%;"><div class="remove" style="cursor: pointer; color:red;"><i class="fa fa-trash"></i></div></td>';
                            html += `<td class="d-none product_id_">`+ value[0].package_id +`</td>`;
                            html += `<td class="d-none product_type_">package</td>`;
                            html += `<td class="d-none package_details">`;
                            $.each(value, function (key, value) {
                                var package_item = value.get_package_info.package_details.filter(x => x.item_id == value.item_id)[0];
                                var price = package_item.quantity * package_item.price;
                                html += `<li class="package_details_product">`;
                                html += `<p class="package_product_id_">`+ value.item_id +`</p>`;
                                html += `<p class="package_product_price_">`+ (price - (price * package_item.dis_par / 100))  +`</p>`;
                                html += `<p class="package_product_vat_">`+ value.var_par +`</p>`;
                                html += `</li>`;
                            });
                            html += `</td></tr>`;
                        });
                    }
                    $(".datatable tbody").append(html);
                    calTotalAmount();
                    sweetalertLoader(false);
                }
            });
        });

        function sweetalertLoader(isShow) {
            if(isShow) {
                new Swal({
                    title: "Loading...",
                    text: "Please wait",
                    imageUrl: "{{ asset('restaurant/loading.gif') }}",
                    showConfirmButton: false,
                    allowOutsideClick: false
                });
            }
            else {
                Swal.close();
            }
        }

        function date_format(date) {
            var date = new Date(date);
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var year = date.getFullYear();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            var am_pm = hours >= 12 ? 'PM' : 'AM';
            return year + "/" + day + "/" + month + " " + hours + ":" + minutes + ":" + seconds + " " + am_pm;
        }

        const set_types_data = (select_field,table,condition,select_data,par_field,amount_field) => {
            $('#'+select_field).on('change', function() {
                $("#"+par_field).html('');
                $("#"+amount_field).html('');
                var select = $(this).val();
                if(select){
                    $.ajax({
                        url: "{{ route('restaurant.order.liveSearch') }}",
                        type: "GET",
                        data: {
                            select: select_data,
                            table: table,
                            condition: select_field == 'waiter_' ? condition : condition +" '"+ select +"'"
                        },
                        success: function (data) {
                            $("#"+par_field).html(data[0].amount);
                            calTotalAmount();
                        },
                        error: function (data) {
                            console.log(data);
                        }
                    });
                }
                else {
                    calTotalAmount();
                }
            });
        }

        const select_search = (select_field,table,condition,select) => {
            $('#'+select_field).select2({
                placeholder: "Select "+select_field,
                // add first option empty
                allowClear: true,
                tags: true,
                ajax: {
                    url: "{{ route('restaurant.order.liveSearch') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            select: select,
                            table: table,
                            condition: condition +" '%"+ (params.term ? params.term : '%') +"%'"
                        }
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.text,
                                    id: item.id
                                }
                            })
                        };
                    },
                    cache: true
                }

            });
        }
        
        $('#btnRefresh').click(function () {
            $('#model_').modal('hide');
            $('#order_id').val('');
            $("#cus_phone").val('');
            $("#cus_name").val('');
            $("#credit_customer").html('');
            $("#table_").html('');
            $("#orderTypes").html('');
            $("#waiter_").html('');
            $("#shippingMethods").html('');
            $("#discount_par").val('');
            $("#discountAmount").val('');
            $("#coupon").val('');
            $("#totalAmount").text('0');
            $("#qtyAmount").text('0');
            $("#netTotalAmount").text('0');
            $("#serviceChargePar").text('0');
            $("#serviceChargeAmount").text('0');
            $("#waiterComissionPar").text('0');
            $("#waiterComissionAmount").text('0');
            $("#shippingChargeAmount").text('0');
            $("#vatAmount").text('0');
            $("#couponAmount").text('0');
            $("#grandTotalAmount").text('0');
            $(".datatable tbody").html('');
            calTotalAmount();
        });

        function bill_save(type) {
            new Swal({
                title: "Are you sure?",
                text: "Once order, you will not be able to recover this order!",
                icon: "warning",
            }).then((willOrder) => {
                if(willOrder.isConfirmed) {
                    var product_details = [];
                    $(".datatable tbody tr").each(function() {
                        var product_id = $(this).find(".product_id_").text();
                        product_details.push({
                            product_id: product_id,
                            package_id: $(this).find(".product_type_").text() == 'product' ? 0 : product_id,
                            product_qty: $(this).find(".qty").val()
                        });
                    });
                    data = {
                        id: $("#order_id").val(),
                        customer_type: $("#customer_type").is(":checked") ? 2 : 1,
                        cus_phone: $("#cus_phone").val(),
                        cus_name: $("#cus_name").val(),
                        credit_customer: $("#credit_customer").val(),
                        table_ids: $("#table_").val(),
                        orderTypes: $("#orderTypes").val(),
                        waiter_id: $("#waiter_").val(),
                        shippingMethods: $("#shippingMethods").val(),
                        discount_par: $("#discount_par").val(),
                        coupon: $("#coupon").val(),
                        cash_id: $("#cashList").val(),
                        bill_cash_amount: $("#cashAmount").val() ? parseFloat($("#cashAmount").val()) - parseFloat($("#returnAmount").val()) : 0,
                        bank_id: $("#bankList").val(),
                        bill_bank_amount: $("#bankAmount").val(),
                        type: type,
                        product_details: product_details
                    };
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('restaurant.order.sale_order') }}",
                        type: "POST",
                        data: data,
                        success: function (data) {
                            load_order_list();
                            $('#btnRefresh').click();
                            new Swal({
                                title: "Success!",
                                text: "Order has been created!",
                                icon: "success",
                                timer: 2000,
                            });
                        },
                        error: function (data) {
                            console.log(data);
                            new Swal({
                                title: "Error!",
                                text: "Order create failed!",
                                icon: "error",
                                timer: 2000,
                            });
                        }
                    });
                }
            });
        }

        $("#discount_par").change(function () {
            $("#discountAmount").val('');
            var discountPar = $(this).val();
            var totalAmount = $("#totalAmount").text();
            var discountAmount = totalAmount * (parseFloat(discountPar ? discountPar : 0) / 100);
            $("#discountAmount").val(parseFloat(discountAmount).toFixed(0));
            calTotalAmount();
        });

        $("#discountAmount").change(function () {
            $("#discount_par").val('');
            var discountAmount = $(this).val();
            var totalAmount = $("#totalAmount").text();
            var discountPar = (parseFloat(discountAmount ? discountAmount : 0) / totalAmount) * 100;
            $("#discount_par").val(parseFloat(discountPar).toFixed(2));
            calTotalAmount();
        });

        $(document).on('click','.addQty',function () {
            var qty = $(this).parent().find(".qty").val();
            qty++;
            $(this).parent().find(".qty").val(qty);
            calTotalAmount();
        });

        $(document).on('click','.subQty',function () {
            var qty = $(this).parent().find(".qty").val();
            qty--;
            $(this).parent().find(".qty").val(qty);
            if(qty <= 0) {
                $(this).parent().parent().remove();
            }
            calTotalAmount();
        });

        $(document).on('change','.qty',function () {
            var qty = $(this).val();
            if(qty <= 0) {
                $(this).parent().parent().remove();
            }
            calTotalAmount();
        });

        $(document).on('click','.remove',function () {
            $(this).parent().parent().remove();
            calTotalAmount();
        });

        function calTotalAmount() {
            try {
                var totalAmount = 0;
                var qtyAmount = 0;
                var vatAmount = 0;
                var discountAmount = 0;
                var netTotalAmount = 0;
                var serviceChargeAmount = 0;
                var waiterComissionAmount = 0;
                var shippingChargeAmount = 0;
                var couponAmount = 0;
                var grandTotalAmount = 0;

                discountPar = $("#discount_par").val();
                discountAmount = $("#discountAmount").val();
                serviceChargePar = $("#serviceChargePar").text();
                waiterComissionPar = $("#waiterComissionPar").text();

                $(".datatable tbody tr").each(function() {
                    var price = parseFloat($(this).find(".product_price_").text());
                    var qty = parseInt($(this).find(".qty").val() ? $(this).find(".qty").val() : 0);
                    var vat = parseFloat($(this).find(".product_vat_").text());
                    var total = price * qty;
                    $(this).find(".product_total").text(total);
                    totalAmount += total;
                    qtyAmount += qty;
                    
                    if($(this).find(".product_type_").text() == 'product') {
                        var product_vat_amount_ = (total - total * discountPar / 100) * vat / 100;
                        vatAmount += product_vat_amount_;
                    } else {
                        $(this).find(".package_details_product").each(function() {
                            var package_product_price_ = parseFloat($(this).find(".package_product_price_").text());
                            var package_product_vat_ = parseFloat($(this).find(".package_product_vat_").text());
                            var product_total = package_product_price_ * qty;
                            var product_vat_amount = (product_total - product_total * discountPar / 100) * package_product_vat_ / 100;
                            vatAmount += product_vat_amount;
                        });
                    }
                });

                $("#totalAmount").text(parseFloat(totalAmount).toFixed(0));
                $("#qtyAmount").text(parseFloat(qtyAmount).toFixed(0));

                if(discountPar) {
                    discountAmount = totalAmount * (parseFloat(discountPar ? discountPar : 0) / 100);
                } else if(discountAmount) {
                    discountPar = (parseFloat(discountAmount ? discountAmount : 0) / totalAmount) * 100;
                }

                netTotalAmount = totalAmount - discountAmount;
                serviceChargeAmount = netTotalAmount * (parseFloat(serviceChargePar ? serviceChargePar : 0) / 100);
                waiterComissionAmount = netTotalAmount * (parseFloat(waiterComissionPar ? waiterComissionPar : 0) / 100);

                discountAmount = parseFloat(parseFloat(discountAmount).toFixed(0));
                netTotalAmount = parseFloat(parseFloat(netTotalAmount).toFixed(0));
                serviceChargeAmount = parseFloat(parseFloat(serviceChargeAmount).toFixed(0));
                waiterComissionAmount = parseFloat(parseFloat(waiterComissionAmount).toFixed(0));
                vatAmount = parseFloat(parseFloat(vatAmount).toFixed(0));

                $("#discountAmount").val(discountAmount);
                $("#netTotalAmount").text(netTotalAmount);
                $("#serviceChargeAmount").text(serviceChargeAmount);
                $("#waiterComissionAmount").text(waiterComissionAmount);
                $("#vatAmount").text(vatAmount);

                shippingChargeAmount = parseFloat($("#shippingChargeAmount").text()?$("#shippingChargeAmount").text():0);
                couponAmount = parseFloat($("#couponAmount").text()?$("#couponAmount").text():0);

                grandTotalAmount = netTotalAmount + serviceChargeAmount + waiterComissionAmount + shippingChargeAmount + vatAmount - couponAmount;
                $("#grandTotalAmount").text(parseFloat(grandTotalAmount).toFixed(0));
            } catch (error) {
                console.log("calTotalAmount", error);
            }
            
        }

        $(document).on('click','.product',function() {
            var product_id = $(this).find(".product_id").text();
            var product_type = $(this).find(".product_type").text();
            var product_name = $(this).find(".product_name").text();
            var product_price = $(this).find(".product_price").text();
            var product_img = $(this).find(".product_img").attr('src');
            var product_vat = $(this).find(".product_vat").text();
            var product_qty = 1;
            var product_total = product_price * product_qty;
            var product_exist = false;

            $(".datatable tbody tr").each(function() {
                var product_id_ = $(this).find(".product_id_").text();
                var product_type_ = $(this).find(".product_type_").text();
                if(product_id_ == product_id && product_type_ == product_type) {
                    product_exist = true;
                    var qty = parseInt($(this).find(".qty").val() ? $(this).find(".qty").val() : 0);
                    qty++;
                    $(this).find(".qty").val(qty);
                    var total = product_price * qty;
                    $(this).find(".product_total").text(total);
                    $(this).css("background-color", "#9954ff");
                    setTimeout(() => {
                        $(this).css("background-color", "");
                    }, 50);
                    return false;
                }
            });

            if(!product_exist) {
                var html = "";
                html += '<tr>';
                html += `<td class="product-td" style="width: 50%;">
                            <div class="product-td d-flex">
                                <img src="`+ product_img +`" alt="" style="width: 30px; height: 30px; margin-right: 5px;">
                                <div>`+ product_name +`</div>
                            </div>
                        </td>`;
                html += '<td class="product-td product_price_" style="width: 10%; text-align: right; padding: 5px;">'+ product_price +'</td>';
                html += '<td class="product-td" style="display: flex">';
                html += '<span class="add_button addQty flex-grow-0">+</span>';
                html += '<input type="number" class="qty flex-grow-1" value="'+ product_qty +'" style="width: 33px; text-align: center;">';
                html += '<span class="add_button subQty flex-grow-0">-</span>';
                html += '</td>';
                html += '<td class="product-td product_total" style="width: 10%; text-align: right; padding: 5px;">'+ product_total +'</td>';
                html += '<td class="product-td" style="width: 5%;"><div class="remove" style="cursor: pointer; color:red;"><i class="fa fa-trash"></i></div></td>';
                html += `<td class="d-none product_id_">`+ product_id +`</td>`;
                html += `<td class="d-none product_type_">`+ product_type +`</td>`;
                
                if(product_type == 'package') {
                    html += `<td class="d-none package_details">`;
                    $(this).find(".package_product_details").each(function() {
                        html += `<li class="package_details_product">`;
                        html += `<p class="package_product_id_">`+ $(this).find(".package_product_id").text() +`</p>`;
                        html += `<p class="package_product_price_">`+ $(this).find(".package_product_price").text() +`</p>`;
                        html += `<p class="package_product_vat_">`+ $(this).find(".package_product_vat").text() +`</p>`;
                        html += `</li>`;
                    });
                    html += `</td>`;
                } else {
                    html += `<td class="d-none product_vat_">`+ product_vat +`</td>`;
                }
                
                html += '</tr>';
            }
            $(".datatable tbody").append(html);
            calTotalAmount();
        });

        $("#customer_type").click(fun_customer_type);

        function fun_customer_type() {
            $('#credit_customer').val('');
            $('#cus_name').val('');
            $('#cus_phone').val('');
            if ($("#customer_type").prop("checked") == true) {
                $(".custom_cus_name").hide();
                $(".credit_customer").show();
            } else if ($("#customer_type").prop("checked") == false) {
                $(".custom_cus_name").show();
                $(".credit_customer").hide();
            }
        }

        $("#order_list").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#order_lists li").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });

        $(".product_button").click(function () {
            var value = $(this).val();
            $("#product_list").html("");  
            $('#product_list_loading').show();
            $.ajax({
                url: "{{ route('restaurant.order.getProductList') }}",
                type: "GET",
                data: {
                    value
                },
                success: function (data) {
                    $("#product_list").html(data);
                    $('#product_list_loading').hide();
                },
                error: function (data) {
                    $('#product_list_loading').hide();
                }
            });
        });

        $('#search_product').on('keyup', function() {
            var value = $(this).val().toLowerCase();
            $("#product_list .product").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                // select first product
                if($(this).text().toLowerCase().indexOf(value) > -1) {
                    $(this).click();
                    return false;
                }
            });
        });

        $('#add_product_by_barcode').on('keyup', function() {
            var value = $(this).val().toLowerCase();
            console.log(value);
            
        });

    </script>
@endsection