@extends('layouts.app') 
@section('content') 
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/forms/selects/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/css/plugins/ui/jqueryui.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/ui/jquery-ui.min.css')}}">
<style>
#sticky-wrapper, .header-navbar{
    display: none !important;
}
.category_slider{
    margin-bottom: 0px !important;
    padding-left: 10px !important;
}
.menu{
    width:100%;
}
.menu li {
    background-size: cover;
    border: 1px solid #e9e9e9;
    cursor: pointer;
    float: left;
    height: 130px;
    list-style: outside none none;
    margin-right: 10px;
    padding: 0;
    position: relative;
    width: 23.7%;
    text-align:center;
}
#menusListing {
    height: 511px;
    margin-top: 10px;
    max-height: 511px;
    overflow: auto;
}
#menusListing > ul {
    padding: 0;
}
#menusListing li {
    color: #cdcdcd;
    font-weight: 700;
    margin-bottom: 10px;
}
#menusListing .itemname {
    background: #6a90eb none repeat scroll 0 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 0;
    position: absolute;
    text-shadow: 2px 2px 5px #000000;
    top: 0;
    width: 100%;
}
.itemprice {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    color: #ffffff;
    font-family: Tahoma;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 0;
    position: absolute;
    text-shadow: 1px 1px 0 #000000;
    text-transform: capitalize;
    width: 100%;
}
.itemprice .price{
    font-size:20px;
    /* color:#D34250; */
}
.table td, .table th {
    padding: 0.75rem 0.7rem !important;
}
#total, #payment_payable_amount{
    font-size:20px;
    font-weight: bold;
    color: red;
}

#pos_items_form, .table td, .table th{
    padding: 5px !important;
} 
.cat_btn{
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 1.5rem 1rem !important;
    margin: 2px;
}
.cat_btn:hover{
    color: #fff !important;
    background-color:#4FC1E9 !important;
}
.modal-dialog {
    margin: 5px auto !important;
}
.modal-body {
    padding: 5px !important;
}
.addon_title{
    margin-left:17px;
    font-weight: 700;
}
</style>
@endsection

<div class="row">
    <div class="col-sm-8">
        
        <div class="card box-shadow-1">
            @foreach(\App\MenuCategories::where('status',1)->get() as $row)
            <button class="btn cat_btn category" data-id="{{$row->id}}">{{$row->category_name}}</button>
            @endforeach
        </div>

        <div class="card box-shadow-1">
            <div class="card-block" style="padding:0px 0px 10px 10px">                
                <div id="menusListing" class="menu text-center">
                    <div align="center" style="margin-top:30px;">
                        <img src="{{asset('assets/admin/images/cart.png')}}">
                    </div>
                </div>
            </div>
        </div>

    </div>
    
    <div class="col-sm-4">
        <div class="card box-shadow-1">
            <div class="card-block">
            
                <form id="pos_items_form" action="javascript:void(0);">
                    <table width="100%" class="table-condensed">
                        <thead>
                            <tr>
                                <th width="10%" style="text-align: left;"><strong>X</strong>&nbsp;&nbsp;</th>
                                <th width="45%" style="text-align: left;"><strong>Items</strong></th>
                                <th width="15%" style="text-align: center;"><strong>Qty</strong></th>
                                <th width="30%" style="text-align: right;"><strong>Price</strong></th>
                            </tr>
                        </thead>     
                        <tbody id="items_cart"> 
                        </tbody> 
                    </table>
                </form>

                <div id="pos-left-box-bottom" style="margin-top:16px">
                    <table class="table table-bordered table-condensed">
                        <tbody>
                            <tr>
                                <td align="left"><strong>Total Items</strong></td>
                                <td align="left"><span id="quantity">0</span></td>
                            </tr>
                            <tr>
                                <td align="left"><strong>Subtotal</strong></td>
                                <td align="right"><span id="subtotal">0</span></td>
                            </tr>
                            @if(isset($settings->tax) && $settings->tax != '')
                            <tr>
                                <td align="left"><strong>Tax ({{isset($settings->tax)?$settings->tax:0}}%)</strong></td>
                                <td align="right"><span id="tax"></span></td>
                            </tr>
                            @endif
                            <tr>
                                <td align="left"><strong>Total Payable</strong></td>
                                <td align="right"><span id="total"></span></td>
                            </tr>
                        </tbody>
                    </table>

                    <button id="pos_cancel" class="btn btn-danger col-sm-6" type="button"><i aria-hidden="true" class="fa fa-ban"></i> Cancel</button>
                    <button id="pos_payment" class="btn btn-success col-sm-6" type="button"><i aria-hidden="true" class="fa fa-money"></i> Payment</button>   

                </div>

            </div>
        </div>
    </div>
</div>

<!-- Payment MODEL -->
<div class="modal fade" id="payment_modal" style="overflow:hidden;" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Payment</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

                    <table class="table table-bordered" style="margin-bottom: 0px !important;">
                        <tr>
                            <th width="40%" style="text-align:right">Date</th>
                            <td> 
                                <input type="text" name="punch_date" id="punch_date" class="form-control datepicker" >
                            </td>
                        </tr>
                        <tr>
                            <th width="40%" style="text-align:right">Customer<br><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#customerModal">Add New</button></th>
                            <td> 
                            <select name="payment_customer_id" id="payment_customer_id" class="select2" placeholder="Select Customer" style="width:100%">
                            </select>
                            </td>
                        </tr>

                        <tr>
                            <th style="text-align:right"> Discount</th>
                            <td>
                                <input type="hidden" id="discount_value">
                                <input type="text" class="numbers" id="discount_apply">
                                <span style="float:right" id="discount_value_html">0</span>
                            </td>
                        </tr>

                        <tr>
                            <th width="40%" style="text-align:right">Order Type</th>
                            <td>
                                <select name="order_type" id="order_type" class="form-control">
                                    <option value="dinein">Dine In</option>
                                    <option value="takeaway">Takeaway</option>
                                    <option value="delivery">Delivery</option>
                                    <option value="drive-thru">Drive-Thru</option>
                                    <option value="complimentary">Complimentary</option>
                                    <option value="staff">Staff</option>
                                </select>
                            </td>
                        </tr>
                        <tr id="delivery_charges_tr" style="display:none">
                            <td style="text-align:right">
                                <!-- <b>Delivery Charges</b><br> -->
                                <input type="text" id="delivery_charges" class="numbers" placeholder="Delivery Charges" value="0">
                            </td>
                            <td>
                                <!-- <b>Riders</b><br> -->
                                <select name="rider" id="rider" class="form-control">
                                    <option value="">Select Rider</option>
                                    @if(isset($riders) && !empty($riders))
                                    @foreach($riders as $row)
                                    <option value="{{$row->name}}">{{$row->name}}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </td>
                        </tr>

                        <tr id="table_no_tr">
                            <td style="text-align:right">
                                <!-- <b>Table No</b><br> -->
                                <input type="text" id="table_no" class="numbers" placeholder="Table No" width="50px">
                            </td>
                            <td>
                                <!-- <b>Waiters</b><br> -->
                                <select name="waiter" id="waiter" class="form-control">
                                    <option value="">Select Waiter</option>
                                    @if(isset($waiters) && !empty($waiters))
                                    @foreach($waiters as $row)
                                    <option value="{{$row->name}}">{{$row->name}}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th style="text-align:right">Payment Type</th>
                            <td>
                                <select name="payment_paid_by" id="payment_paid_by" class="form-control ">
                                    <option value="Cash">Cash</option>
                                    <option value="Online">Online</option>
                                    <option value="CC">Credit Card</option>
                                </select>
                            </td>
                        </tr>

                        <tr id="payment_cash">
                            <th style="text-align:right">Paid</th>
                            <td>
                                <input type="text" id="payment_paid" class="numbers">
                                <button type="button" class="btn btn-primary" id="exact">Exact Amount</button>
                            </td>
                        </tr>
                        <tr id="payment_credit" style="display:none">
                            <th style="text-align:right">Credit Card</th>
                            <td>
                                <input type="text" id="payment_cc_no" class="form-control" placeholder="Credit Card No">
                                <br>
                                <input type="text" id="payment_card_holder" class="form-control" placeholder="Credit Card Holder">
                            </td>
                        </tr>
                        <!-- <tr id="payment_check" style="display:none">
                            <th style="text-align:right">Cheque</th>
                            <td>
                                <input type="text" id="payment_cheque_no" class="form-control" placeholder="Cheque No">
                            </td>
                        </tr> -->
                        <tr>
                            <th style="text-align:right">Return Change</th>
                            <td style="text-align:right"><span id="payment_return_change">0</span></td>
                        </tr>
                        <tr>
                            <th style="text-align:right">Total Items</th>
                            <td style="text-align:right"><span id="payment_items_purchased"></span></td>
                        </tr>
                        <tr>
                            <th style="text-align:right">Subtotal</th>
                            <td style="text-align:right"><b><span id="payment_subtotal"></span></b></td>
                        </tr>
                        @if(isset($settings->tax) && $settings->tax != '' && $settings->tax != 0)
                        <tr>
                            <th style="text-align:right">Tax ({{isset($settings->tax)?$settings->tax:0}}%)</th>
                            <td style="text-align:right"><b><span id="payment_tax"></span></b></td>
                        </tr>
                        @endif
                        <tr>
                            <th style="text-align:right">Total</th>
                            <td style="text-align:right"><b><span id="payment_payable_amount"></span></b></td>
                        </tr>

                        <tr>
                            <th style="text-align:right">Special Instructions</th>
                            <td><input type="text" name="special_instructions" id="special_instructions" class="form-control"></td>
                        </tr>

                    </table>

                </form>
            </div>
            <div class="modal-footer">
                <input type="hidden" name="transection_id" id="transection_id" value="0" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="save_pos_sale" class="btn btn-success save_pos">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- pos receipt modal -->
<div class="modal fade" id="pos_receipt_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="max-height:600px;overflow: auto;">
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

<!-- new customer modal -->
<div class="modal fade" id="customerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <form method="post" id="customersForm" action="{{route('saveCustomer')}}" validate>
        <input type="hidden" id="customer_id" name="id" value="" />
        {{ csrf_field() }}

        <div class="modal-content">
            <div class="modal-body">
                   
                <div class="row">
                    <div class="form-group col-sm-12">
                        <label><b>Name</b></label>
                        <input class="form-control" autocomplete="off" id="customer_name" name="name" placeholder="Name" type="text" required>
                    </div>

                    <div class="form-group col-sm-12">
                        <label><b>Mobile Number</b></label>
                        <input class="form-control numbers" autocomplete="off" id="customer_mobile" name="mobile_number" placeholder="Mobile Number" type="number" required>
                    </div>
                    
                    <div class="form-group col-sm-12">
                        <label><b>Address</b></label>
                        <input class="form-control" autocomplete="off" name="address" id="address" placeholder="Address" type="text">
                    </div>

                    <div class="form-group col-sm-12">
                        <label><b>Email</b></label>
                        <input class="form-control" autocomplete="off" id="email" name="email" placeholder="Email" type="email">
                    </div>
                    
                    
                </div>

            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" id="customer_submit" class="btn btn-primary">Save changes</button>
          </div>
        </div>
    </form>
  </div>
</div>

<!-- addons modal -->
<div class="modal fade" id="addonsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <form id="addons_form">
        <div class="modal-content" id="addons_container">
            <div class="modal-body">
            </div>
        </div>
    </form>
  </div>
</div>

@if(isset($settings->tax) && $settings->tax != '' && $settings->tax != 0)
@php $tax_is_applied = 1; @endphp
@else
@php $tax_is_applied = 0; @endphp
@endif

@section('js')
<script src="{{asset('assets/admin/vendors/js/forms/select/select2.full.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/forms/select/form-select2.min.js')}}" type="text/javascript"></script>
<script type="text/javascript" src="{{asset('assets/admin/js/bootbox.min.js')}}"></script>
<script src="{{asset('assets/admin/js/core/libraries/jquery_ui/jquery-ui.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/ui/jquery-ui/date-pickers.min.js')}}" type="text/javascript"></script>

<script type="text/javascript">

    function get_pos_customers(){
        $.ajax({
            url: "{{route('getPosCustomers')}}",
            type: "GET",
            success: function(response){
            $('#payment_customer_id').html(response);
            }
        });
    }

    get_pos_customers();

    $('body').on('change', '#order_type', function(){
        var value = $(this).val();
        if(value == "delivery"){
            $('#delivery_charges_tr').show();
        } else {
            $('#delivery_charges_tr').hide();
        }
    });

    $(function(){
        $(".datepicker").datepicker({ dateFormat: 'dd-mm-yy' }).datepicker("setDate", new Date());
        var selected_order_type = $('#order_type').find(":selected").val();
        if(selected_order_type == "delivery"){
            $('#delivery_charges').val('');
            $('#delivery_charges_tr').show();
        } else {
            $('#delivery_charges').val('');
            $('#delivery_charges_tr').hide();
        }
        $(".numbers").keypress(function (e) {
            //if the letter is not digit then display error and don't type anything
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            return false;
            }
        });
    });

    if(localStorage.getItem('cart')) { 
        localStorage.setItem('cart','');
        var cart = [];
    } 

    $(".category").on('click', function (event) {
        $.ajax({
            type: "GET",
            url:"{{route('getMenuItemsByCategory') }}",
            data:{id: $(this).data('id')},
            beforeSend: function(){
                $('#menusListing').html('<i style="font-size:30px;" class="icon-spinner12"></i>');
            },
            success: function(response){
            if (response) {
                //console.log(response);
                $("#menusListing").html(response);
            };
            }, 
        });
    });

    $('body').on('click', '.add_item_to_cart', function(){

        var html = "";
        var selected_addons = '';

        var category_id = $(this).data('category-id');
        var category_name = $(this).data('category-name');
        var id = $(this).data('id');
        var item_name = $(this).data('name');
        var item_price_title = $(this).data('item-price-title');
        var total_quantity = parseInt($('#quantity').text()); 
        var count_total_amt = parseFloat($('#subtotal').text());
        var price_id = $(this).data('price-id');
        var price_default_temp = $(this).data('price');
        var price_title = $(this).data('item-price-title').replace(/\s+/g, '')+'-'+id;
        var total_quantities = $('#items_cart .price-title-'+price_id+' input[type="number"]');
        var price_counts = $(this).attr('data-item-price-counts');
        var count_item_cart_id = $('#items_cart #'+id).length;
        var count_item_cart_title = $('#items_cart .price-title-'+price_id).length;
        var tax=parseFloat(<?php echo isset($settings)?$settings->tax:'0'?>);

        var addons = $(this).data('addons');
        if(addons === 1){
            var selected_addons = $('#addons_form').serializeArray();
        }else{
            var selected_addons = '';
        }
        

        var addon_price = 0;
        $(selected_addons).each(function(i, field){
            var addon_array = field.value.split('|');
            addon_price += addon_array[1];
        });

        var price_default = parseFloat(price_default_temp) + parseFloat(addon_price);

        // cart
        var cart_data = {
            category_id : category_id,
            category_name : category_name,
			item_id : id,
            item_name: item_name,
			price_id : price_id,
			price_title: item_price_title,
			price: price_default,
			qty: 1,
            addons: selected_addons
		};
        if(localStorage.getItem('cart')) { 
			var cart = JSON.parse(localStorage.getItem('cart'));
		} else { 
			var cart = [];
		}
    
        if(count_item_cart_title > 0){
            qty = parseInt(total_quantities.val())+1;
            total_quantities.val(qty);  
            
            // cart
            $.each(cart, function(key,item) {
                if(item.item_id == id){
                    cart[key].qty = parseInt(item.qty) + parseInt(1);
                } 
            });
            localStorage.setItem("cart",JSON.stringify(cart));

        }else{

            // cart
            cart.push(cart_data);
            localStorage.setItem("cart",JSON.stringify(cart));
            
            var html = '';
            html += '<tr id="'+id+'" class="price-title-'+price_id+'">';
            html +='<td width="5%" align="left">';
                html +='<a class="remove_item" style="cursor:pointer" data-title="price-title-'+price_id+'" title="remove" data-id="'+id+'">';
                    html +='<i style="font-size:20px;" class="icon-trash-o text-danger"></i>';
                html +='</a>';
            html +='</td>';
            html +='<td width="55%" align="left">'+item_name+' ('+item_price_title+') ';
            if(selected_addons != '' ){
                html +='<br>';
            var i = 0;
            $(selected_addons).each(function(i, field){
                var addon_array = field.value.split('|');
                html +='<small> '+addon_array[0]+ ' </small>';
            });
            }
            html += '</td>';
            html +='<td width="15%" align="center">';
                html +='<input class="add_item_quantity" data-id="'+id+'" style="width: 40px;" type="number" min="1" value="1" name="qty">';
                html +='<input type="hidden" value="'+id+'" name="item_id">';
                html +='<input type="hidden" value="'+price_default+'" name="price">';
                html +='<input type="hidden" value="'+item_name+'" name="item_name">';
                html +='<input type="hidden" value="'+item_price_title+'" name="item_price_title">';
            html +='</td>';
            html +='<td width="25%" align="right" class="price_default">'+price_default+'</td>';
            html +='</tr>';
        }

        if(total_quantity > 0){
            $('#quantity').text(total_quantity+1);
            var total = count_total_amt+price_default;
            tax=total*tax/100;
            $('#subtotal').text(total.toFixed(2));
            total=Number(total+tax);
            $('#total').text(total.toFixed(2));
        } else {
            $('#quantity').text(1);
            var total = count_total_amt+price_default;
            tax=total*tax/100;
            $('#subtotal').text(total.toFixed(2));
            total=Number(total+tax);
            $('#total').text(total.toFixed(2));
        }
        
        $('#tax').text(tax.toFixed(2));

        $('#items_cart').append(html); 
    });


    $('body').on('click', '.remove_item', function(){
        var tax= <?php echo isset($settings->tax)?$settings->tax:'0'; ?>;
        var id = $(this).attr('data-id');
        var title = $(this).attr('data-title');

        var total_quantity = parseInt($('#quantity').text());
        var count_total_amt = parseFloat($('#subtotal').text());

        var quantities = parseInt($('#items_cart .'+title+' input[type="number"]').val());
        
        var str=$('#items_cart .'+title+' .price_default').text();
        str = str.replace("Rs.", "");
        
        var price_default = parseFloat(str)*quantities;
        var total = count_total_amt-price_default;

        $('#quantity').text(total_quantity-quantities);
        $('#subtotal').text(total.toFixed(2));

        tax=(total*tax)/100;
        total=Number(total+tax);

        $('#total').text(total.toFixed(2));
        $('#tax').text(tax.toFixed(2));
        $('#discount').text(0);
        
        $(this).parent().parent().remove();

        var cart = $.parseJSON(localStorage.getItem('cart'));
		var newCart = [];
		$.each(cart, function(key,item) {
            if(item.item_id == id){
    
            } else { 
                newCart.push(item);
            }
		});
		 
		localStorage.setItem('cart',JSON.stringify(newCart));

    });

    $('body').on('change', '.add_item_quantity', function(){
        // var qty = 0;
        var price = 0;
        var tolal_qty = 0;
        var tolal_price = 0;
        var total = 0;
        var tax=<?php echo isset($settings->tax)?$settings->tax:'0'; ?>;
        var items = $('#pos_items_form').serializeArray();
        var cart = JSON.parse(localStorage.getItem('cart'));
        var flag = true;

        var id = $(this).data('id');

        var qty = parseInt($(this).val()); 
        $.each(cart, function(key,item) {
            if(item.item_id == id){
                // cart[key].qty = parseInt(item.qty) + parseInt(1);
                cart[key].qty = qty;
                flag = false;
            } 
        });
        localStorage.setItem("cart",JSON.stringify(cart));

        $.each(items, function(key, val) {
            if(val.name === "qty"){
                tolal_qty += parseInt(val.value);
                qty = parseInt(val.value);
            }
            if(val.name === "price"){
                tolal_price += parseFloat(val.value);
                price = parseFloat(val.value);
                total += parseFloat(price*qty);
            }  

        });
                
        $('#quantity').text(tolal_qty);
        $('#subtotal').text(total.toFixed(2));
        tax=total*tax/100;
        $('#discount').text(0);
        $('#tax').text(tax.toFixed(2));
        total=Number(total+tax);
        $('#total').text(total.toFixed(2));
    });

    $('body').on('click', '#pos_cancel', function(){
        bootbox.dialog({
            message: "Are you sure, you want to cancel this transection ? ",
            title: "Confirm",
            buttons: {
                success: {
                    label: "Yes",
                    className: "btn-success",
                    callback: function() {
                        $('#hold_status_id').val(0);
                        $('#quantity').text(0);
                        $('#subtotal').text(0);
                        $('#total').text(0);
                        $('#discount').text(0);
                        $('#tax').text(0);
                        $('#items_cart tr').remove();
                    }
                },
                danger: {
                label: "No",
                className: "btn-danger",
                callback: function() {
                   
                }
                }
            }
        });
    });

    // delivery_charges
    $('#delivery_charges').on('input', function(e) {
        var delivery_charges = $('#delivery_charges').val();
        var total_payable = $('#payment_payable_amount').text();
        var total = $('#total').text();
        
        if(delivery_charges == 0){
            var total_delivery_charges = 0;
        }else{
            var total_delivery_charges = delivery_charges;
        }

        var total_after_delivery_charges = (parseFloat(total)+parseFloat(total_delivery_charges));
        $('#payment_payable_amount').text(total_after_delivery_charges.toFixed(2));

    });

    //discount_apply
    $('#discount_apply').on('input', function(e) {
        
        var discount_apply = $('#discount_apply').val();
        var subtotal = $('#subtotal').text();
        
        if(discount_apply == 0){
            var total_disc_calculate = 0;
        }else{
            var total_disc_calculate = discount_apply;
        }
        
        var tax_is_applied = "{{$tax_is_applied}}";
        if(tax_is_applied == 1){
            var tax = $('#tax').html();
        }else{
            var tax = 0;
        }
        
        $('#discount_value').val(total_disc_calculate);
        $('#discount_value_html').html(total_disc_calculate);

        var total=(parseFloat(subtotal)-parseFloat(total_disc_calculate)+parseFloat(tax));

        if(subtotal == 0 || subtotal == ""){
            return bootbox.alert("<b>Alert!</b> <br /> Please select items first to apply discount!", function() {});
        } else {
            $('#total').text(total.toFixed(2));
            $('#payment_payable_amount').text(total.toFixed(2));
            $('#discount').text(parseFloat(discount_apply));
            $('#dsc_rate').text('('+parseFloat(discount_apply)+"%)");
        }    
        
    });

    $('body').on('click', '#exact', function(){
        var total_payable = $('#payment_payable_amount').text();
        total_payable = total_payable.replace("", "");
        $('#payment_paid').val(total_payable);
        var payment = $('#payment_paid').val();
        if(payment != "" || payment > 0){
            $('#payment_return_change').text((parseFloat(payment)-parseFloat(total_payable)).toFixed(2));
        } else {
            $('#payment_return_change').text(0);
        }
    });
    
    $('.form-horizontal #payment_paid').bind('input', function(){

        var total_payable = $('#total').text();
        var paid = $('#payment_paid').val();

        if(paid != "" || paid > 0){
            $('#payment_return_change').text((parseFloat(paid)-parseFloat(total_payable)).toFixed(2));
        } else {
            $('#payment_return_change').text(0);
        }
    });

    $('body').on('click', '#pos_payment', function(){

        if($('#payment_payable_amount').html() == ''){
            $('#discount_apply').val('');
            $('#payment_paid').val('');
        }
        
        var count_qty = $('#quantity').text();
        var total_payable = $('#total').text();
        var tax_value = $('#tax').text();
        tax = total_payable*tax_value/100;
        total = (parseInt(total_payable)+parseInt(tax));
        
        if(count_qty == 0){
            return bootbox.alert("<b>Alert!</b> <br /> Cart is empty, Please select at least one item to proceed! Thankyou", function() {});
        } else {
            $('#payment_modal #payment_payable_amount').text(total_payable);
            $('#payment_modal #payment_items_purchased').text(count_qty);
            $('#payment_modal #payment_subtotal').text($('#subtotal').text());
            $('#payment_modal #payment_tax').text($('#tax').text());

            $("#payment_modal").modal('show');
        }
    });

    $('body').on('change', '#order_type', function(){
        var value = $(this).val();
        if(value == "delivery"){
            $('#delivery_charges').val('');
            $('#delivery_charges_tr').show();
            $('#table_no').val('');
            $('#table_no_tr').hide();
        }else if(value == "dinein"){
            $('#delivery_charges').val('');
            $('#delivery_charges_tr').hide();
            $('#table_no').val('');
            $('#table_no_tr').show();
        } else {
            $('#delivery_charges').val('');
            $('#delivery_charges_tr').hide();
            $('#table_no').val('');
            $('#table_no_tr').hide();
        }
    });

    $('body').on('change', '#payment_paid_by', function(){
        var value = $(this).val();
        if(value == "Cash"){
            $('#payment_cash').show();
            $('#payment_credit').hide();
            // $('#payment_check').hide();
            
            $('#payment_cc_no').val('');
            $('#payment_card_holder').val('');
            // $('#payment_cheque_no').val('');
        } else if(value == "CC"){
            $('#payment_credit').show();
            $('#payment_cash').show();
            // $('#payment_check').hide();
            
            $('#payment_paid').val('');
            // $('#payment_cheque_no').val('');
        } else {
            // $('#payment_check').show();
            $('#payment_credit').hide();
            $('#payment_cash').show();
            
            $('#payment_paid').val('');
            $('#payment_cc_no').val('');
            $('#payment_card_holder').val('');
        }
    });

    $('body').on('click', '.save_pos', function(){
        if($('#quantity').text() == 0){
            return bootbox.alert("<b>Alert!</b> <br /> Please select at least one item to proceed! thanks", function() {});
        } else if($('#payment_paid').val() == ""){
            return bootbox.alert("<b>Alert!</b> <br /> Please enter paid value to proceed! thanks", function() {});
        } else {
                    
            $.ajax({
                type: 'POST',
                url: '{{route("savePos")}}',
                data: {
                    _token:$('meta[name="csrf-token"]').attr('content'),
                    punch_date:$('#punch_date').val(),
                    customer_id:$('#payment_customer_id').val(),
                    quantity:$('#quantity').text(),
                    subtotal:$('#subtotal').text(),
                    discount:$('#discount_apply').val(),
                    discount_value:$('#discount_value').val(),                    
                    tax:$('#tax').text(),
                    tax_rate:<?php echo isset($settings)?$settings->tax:'0'?>,
                    // total_payable:$('#total').text().replace('',""),
                    total_payable:$('#payment_payable_amount').text(),
                    order_type:$('#order_type').val(),
                    delivery_charges:$('#delivery_charges').val(),
                    payment_paid:$('#payment_paid').val(),
                    payment_return:$('#payment_return_change').text(),
                    payment_type:$('#payment_paid_by').val(),
                    cc_no:$('#payment_cc_no').val(),
                    card_holder:$('#payment_card_holder').val(),
                    // cheque_no:$('#payment_cheque_no').val(),
                    special_instructions:$('#special_instructions').val(),
                    rider:$('#rider').val(),
                    waiter:$('#waiter').val(),
                    table_no:$('#table_no').val(),
                    items:JSON.parse(localStorage.getItem('cart')),
                },
                beforeSend: function(){
                    $('#save_pos_sale').attr('disabled', true).html('<i class="icon-spinner12"></i>');
                },
                success: function (response) {

                    $('#save_pos_sale').attr('disabled', false).html('Save');

                    $("#payment_modal").modal('hide');
                    $('#pos_receipt_modal .modal-body').html(response);
                    $("#pos_receipt_modal").modal('show');
                    
                    $('#quantity').text(0);
                    $('#subtotal').text(0);
                    $('#total').text(0);
                    $('#discount').text(0);
                    $('#dsc_rate').text('('+0+'%)');
                    $('#discount_apply').val('');
                    $('#discount_value').val('');
                    $('#delivery_charges').val(''),
                    $('#discount_value_html').html('');
                    $('#tax').text(0);
                    $('#items_cart tr').remove();
                    $('#payment_paid').val(0);
                    $('#payment_return_change').text(0);
                    $('#menusListing').html('');
                    $('#special_instructions').val('');
                    $('#rider').val(''),
                    $('#waiter').val(''),
                    $('#table_no').val(''),
                    localStorage.setItem('cart','');
                }
            });  
                  
        }
    });

    $("#customer_submit").on('click', function (event) {
        if($('#customer_name').val()==""){
            return bootbox.alert("<b>Alert!</b> <br /> Customer Name is required.", function() {});
            return false;
        }
        if($('#customer_mobile').val()==""){
            return bootbox.alert("<b>Alert!</b> <br /> Customer Mobile is required.", function() {});
            return false;
        }

        $.ajax({
            type: "POST",
            url: "{{ route('savePosCustomer') }}",
            data: $('#customersForm').serialize(),
            beforeSend: function(){
                $('#customer_submit').attr('disabled', true).html('Loading...');
            },
            success: function (response) {
                $("#customer_submit").html('Save Changes').attr('disabled', false);
                if(response.status == 0){
                    return bootbox.alert("<b>Alert!</b><br />"+response.msg, function() {});
                    return false;
                }else{
                    get_pos_customers();
                    $('#customersForm')[0].reset();
                    $('#customerModal').modal('toggle');
                }
                
            }
        });	   
    });  

    $('body').on('click', '.item_addons', function(){
        $.ajax({
            type: "POST",
            url: "{{ route('getMenuAddonsAjax') }}",
            data: {
                category_id:$(this).attr("data-category-id"),
                categoty_name:$(this).attr("data-category-name"),
                item_id:$(this).attr("data-id"),
                item_name:$(this).attr("data-name"),
                item_price_title:$(this).attr("data-item-price-title"),
                item_price_id:$(this).attr("data-price-id"),
                item_price:$(this).attr("data-price"),
                _token:$('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                $('#addons_container').html(response);
                $('#addonsModal').modal('toggle');
            }
        });	 
    });  
   
</script>
@endsection 
@endsection