@extends('layouts.backend')

@section('title', $title)

@section('content')
<style>
    .select2-container--default {
        width: 100% !important;
    }
</style>
<!-- start vue app -->
<div id="vueapp">

<div class="block block-rounded block-bordered" id="block-table-product-2" >
    <div id="accordion" role="tablist" aria-multiselectable="true">
        @foreach($productCategory as $index => $cate)
        <div class="block block-rounded mb-1">
            <div class="block-header block-header-default" role="tab" id="accordion_h{{ $index }}">
                <a class="font-w600 collapsed" 
                    data-toggle="collapse" 
                    data-parent="#accordion" 
                    href="#accordion_q{{ $index }}" 
                    aria-expanded="false" 
                    aria-controls="accordion_q{{ $index }}" 
                    style="width: 100%;" >{{ $cate->name }}</a>
            </div>
            <div id="accordion_q{{ $index }}" class="collapse" role="tabpanel" aria-labelledby="accordion_h{{ $index }}" data-parent="#accordion" style="">
                <div class="block-content">
                    <div class="row gutters-tiny push" >
                                                @foreach ($products as $index2 => $product)
                            @if(strcmp($product->status, STATUS_ACTIVE) == 0)
                            <div class="col-md-2 col-sm-3 col-6">
                                <a class="block text-center bg-primary" href="javascript:;" v-on:click="addProductByClick('{{ $product->id }}')" >
                                    <div class="block-content block-content-full aspect-ratio-16-9 d-flex justify-content-center align-items-center">
                                        <div>
                                            <div class="font-w600 mt-2 text-white">{{ $product->name }}</div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="productid" value="{{ $product->id }}" >
                                </a>
                            </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

<div class="block block-rounded block-bordered" id="block-table" >
    <div class="block-header block-header-default">
        <h3 class="block-title">รายการสินค้า</h3>
        <div class="block-options">
            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></i></button>
        </div>
    </div>
    <div class="block-content pb-4" >
        <div class="row" >
            <div class="col-12 col-md-9" >
                            </div>
            <div class="col-12 col-md-3" >
                <button type="button" class="btn btn-lg btn-info btn-block btn-checkout-modal">Checkout</button>
                <button type="button" class="btn btn-lg btn-warning btn-block btn-invoice-print">Invoice</button>
            </div>
        </div>
        <table class="table table-hover table-vcenter" >
            <thead class="thead-light" >
                <tr>
                    <th style="width: 6%;" class="text-center" >#</th>
                    <th style="width: 30%;" >สินค้า</th>
                    <th style="width: 8%;" class="text-right" >จำนวน</th>
                    <th style="width: 20%;" class="text-center" colspan="2" >ส่วนลด</th>
                    <th style="width: 12%;" class="text-right" >Subtotal</th>
                    <th style="width: 12%;" class="text-right" >ส่วนลด</th>
                    <th style="width: 12%;" class="text-right" >Total</th>
                </tr>
            </thead>
            <tbody id="table-body2" >
                <tr v-for="p in products" >
                    <td class="text-center" >
                        <button type="button" class="btn btn-danger btn-rounded btn-sm" v-on:click="openModalRemoveProduct(p)" >
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                    </td>
                    <td>
                        <p class="m-0 p-0" >@{{ p.name }}</p>
                        <p class="m-0 p-0 font-size-sm text-muted" >Unit Price : <em>@{{ p.price_text }}</em></p>
                    </td>
                    <td class="text-right" >
                        <input class="form-control form-control-sm" type="number" name="row-qty" v-model:number="p.qty" v-on:change="changeQty(p)" min="1" style="text-align: right;" >
                    </td>
                    <td>
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control" v-model:number="p.discount_percent" v-on:change="changeLineDiscountPercent(p)" >
                            <div class="input-group-append">
                                <span class="input-group-text" >%</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control" v-model:number="p.discount_fixed" v-on:change="changeLineDiscountFixed(p)" >
                            <div class="input-group-append">
                                <span class="input-group-text" >B</span>
                            </div>
                        </div>
                    </td>
                    <td class="text-right" >@{{ p.subtotal_text }}</td>
                    <td class="text-right" >@{{ p.discount_text }}</td>
                    <td class="text-right" >@{{ p.total_text }}</td>
                </tr>
            </tbody>
            <tfoot class="thead-light" id="table-footer" style="border-top: 2px solid #000" >
                <tr>
                    <td colspan="5" class="text-right" >Subtotal</td>
                    <td colspan="3" class="text-right subtotal" >@{{ subtotal_text }}</td>
                </tr>
                <tr>
                    <td colspan="5" class="text-right" >ส่วนลดตามรายการ</td>
                    <td colspan="3" class="text-right" >@{{ line_discount_total_text }}</td>
                </tr>
                <tr>
                    <td colspan="5" class="text-right" >ส่วนลดอาหาร</td>
                    <td>
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control" v-model:number="food_discount_percent" v-on:change="changeFoodDiscountPercent()" >
                            <div class="input-group-append">
                                <span class="input-group-text" >%</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control" v-model:number="food_discount_fixed" v-on:change="changeFoodDiscountFixed()" >
                            <div class="input-group-append">
                                <span class="input-group-text" >B</span>
                            </div>
                        </div>
                    </td>
                    <td class="text-right" >@{{ food_discount_text }}</td>
                </tr>
                <!-- drink discount -->
                <tr>
                    <td colspan="5" class="text-right" >ส่วนลดเครื่องดื่ม</td>
                    <td>
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control" v-model:number="drink_discount_percent" v-on:change="changeDrinkDiscountPercent()" >
                            <div class="input-group-append">
                                <span class="input-group-text" >%</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control" v-model:number="drink_discount_fixed" v-on:change="changeDrinkDiscountFixed()" >
                            <div class="input-group-append">
                                <span class="input-group-text" >B</span>
                            </div>
                        </div>
                    </td>
                    <td class="text-right" >@{{ drink_discount_text }}</td>
                </tr>
                <!-- end drink discount -->
                <!-- bill discount -->
                <tr>
                    <td colspan="5" class="text-right" >ส่วนลดท้ายบิล</td>
                    <td>
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control" v-model:number="bill_discount_percent" v-on:change="changeBillDiscountPercent()" >
                            <div class="input-group-append">
                                <span class="input-group-text" >%</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control" v-model:number="bill_discount_fixed" v-on:change="changeBillDiscountFixed()" >
                            <div class="input-group-append">
                                <span class="input-group-text" >B</span>
                            </div>
                        </div>
                    </td>
                    <td class="text-right" >@{{ bill_discount_text }}</td>
                </tr>
                <!-- end bill discount -->
                <tr v-if="customer_found" >
                    <td colspan="7" class="text-right" >
                        <span>หักแต้มลูกค้า (</span>
                        <span class="usage_point_text" >@{{ customer_point }}</span>
                        <span>)</span>
                    </td>
                    <td colspan="1" class="text-right" >
                        <input type="number" class="form-control form-control-sm text-right" 
                            id="usage_point" name="usage_point" 
                            v-model:number="customer_point_use" v-on:change="changeCustomerUsePoint()" >
                    </td>
                </tr>
                <tr>
                    <td colspan="7" class="text-right discount_mode" >รวมส่วนลดทั้งหมด</td>
                    <td colspan="1" class="text-right discount_total" >@{{ discount_total_text }}</td>
                </tr>
                <tr>
                    <td colspan="7" class="text-right service_charge_footer" >@{{ service_charge_footer }}</td>
                    <td colspan="1" class="text-right service_charge" >@{{ service_charge_text }}</td>
                </tr>
                <tr>
                    <td colspan="7" class="text-right" >@{{ vat_type_text }}</td>
                    <td colspan="1" class="text-right vat" >@{{ vat_total_text }}</td>
                </tr>
                <tr>
                    <td colspan="7" class="text-right" >Total</td>
                    <td colspan="1" class="text-right total" >@{{ total_text }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<div class="block block-rounded block-bordered block-mode-hidden" id="block-customer" >
    <div class="block-header block-header-default">
        <h3 class="block-title">ลูกค้า</h3>
        <div class="block-options">
            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></i></button>
        </div>
    </div>
    <div class="block-content pb-4" >
        <input type="hidden" class="table_id" name="table_id" id="table_id" value="{{ $table_id }}" >
        <form method="POST" action="{{ route('stock-save') }}" id="form_checkout" >
            <div class="row" >
                <div class="col-12 col-md-9" >
                        {!! HTMLRender::formSelect('customer_id', trans('cashier.searchcustomer'), $customers_select, 0, ['span' => true, 'select2' => true, 'firstrow' => true]) !!}
                        
                        <div class="row" >
                            <div class="col-md-3" >&nbsp;</div>
                            <div class="col-md-9" >
                                <button type="button" id="btn-add-customer" class="btn btn-sm btn-primary" v-on:click="changeCustomer()" >Add</button>
                            </div>
                        </div>
                        <br>
                        {!! HTMLRender::formText('customer_point', null, trans('customer.point'), ['span' => true, 'readonly' => 'readonly']) !!}
                        {!! HTMLRender::formText('customer_fullname', null, trans('customer.fullname'), ['span' => true]) !!}
                        {!! HTMLRender::formText('customer_taxid', null, trans('customer.taxid'), ['span' => true]) !!}
                        {!! HTMLRender::formText('customer_tel', null, trans('customer.tel'), ['span' => true]) !!}
                        {!! HTMLRender::formText('customer_email', null, trans('customer.email'), ['span' => true]) !!}
                        {!! HTMLRender::formTextArea('customer_address', null, trans('customer.address'), ['span' => true]) !!}
                    
                        {{ csrf_field() }}
                </div>
            </div>
        </form>
    </div>
</div>

<div class="block block-rounded block-bordered block-mode-hidden">
    <div class="block-header block-header-default">
        <h3 class="block-title">VAT</h3>
        <div class="block-options">
            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></i></button>
        </div>
    </div>
    <div class="block-content">
        <h2 class="content-heading">ประเภท</h2>
        <div class="form-group">
                        <div class="custom-control custom-radio custom-control-inline custom-control-primary">
                <input type="radio" class="custom-control-input" id="vat_type_{{ $v }}" name="vat_type" 
                    v-model="vat_type" value="{{ $v }}" v-on:change="changeVatType()" 
                >
                <label class="custom-control-label" for="vat_type_{{ $v }}">{{ trans('lang.vat_type_' . $v) }}</label>
            </div>
                        <div class="custom-control custom-radio custom-control-inline custom-control-primary">
                <input type="radio" class="custom-control-input" id="vat_type_{{ $v }}" name="vat_type" 
                    v-model="vat_type" value="{{ $v }}" v-on:change="changeVatType()" 
                >
                <label class="custom-control-label" for="vat_type_{{ $v }}">{{ trans('lang.vat_type_' . $v) }}</label>
            </div>
                        <div class="custom-control custom-radio custom-control-inline custom-control-primary">
                <input type="radio" class="custom-control-input" id="vat_type_{{ $v }}" name="vat_type" 
                    v-model="vat_type" value="{{ $v }}" v-on:change="changeVatType()" 
                >
                <label class="custom-control-label" for="vat_type_{{ $v }}">{{ trans('lang.vat_type_' . $v) }}</label>
            </div>
                    </div>

        <h2 class="content-heading">จำนวน</h2>
        <div class="form-group row">
            <div class="col-3">
                <input type="number" class="form-control" v-model:number="vat" v-on:change="changeVat()" >
            </div>
        </div>
        <h2 class="content-heading">Service Charge %</h2>
        <div class="form-group row">
            <div class="col-3">
                <input type="number" class="form-control" v-model:number="service_charge_percent" v-on:change="changeServiceChargePercent()" >
            </div>
        </div>
    </div>
</div>

</div> <!-- end vue app -->

<div class="modal" id="checkout-modal" tabindex="-1" role="dialog" aria-labelledby="modal-block-vcenter" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="block block-themed block-transparent mb-0">
                <div class="block-header bg-primary-dark">
                    <h3 class="block-title">สรุปรวม</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content pb-4">
                    
                </div>
            </div>
            <input type="hidden" class="table-id" name="table-id" value="" >
        </div>
    </div>
</div>

<script id="script-modal-content" type="text/x-handlebars-template">
    <div class="row">
        <div class="col-md-8 col-12 text-right">
            <span class="text-muted">
                Service Charge
            </span>
        </div>
        <div class="col-md-4 col-12 text-right">
            <label>@{{ service_charge }}</label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-12 text-right">
            <span class="text-muted">
                @{{ vat_type_text }}
            </span>
        </div>
        <div class="col-md-4 col-12 text-right">
            <label>@{{ vat_total_text }}</label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-12 text-right">
            <span class="text-muted">
                Subtotal
            </span>
        </div>
        <div class="col-md-4 col-12 text-right">
            <label>@{{ subtotal_text }}</label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-12 text-right">
            <span class="text-muted">
                ส่วนลดทั้งหมด
            </span>
        </div>
        <div class="col-md-4 col-12 text-right">
            <label>@{{ discount_total_text }}</label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-12 text-right">
            <span class="text-muted">
                Total
            </span>
        </div>
        <div class="col-md-4 col-12 text-right">
            <label>@{{ total_text }}</label>
        </div>
    </div>
    <h3 class="content-heading pt-0">จ่ายเงิน</h3>
    <div class="form-group">
        <div class="custom-control custom-radio custom-control-lg custom-control-inline">
            <input type="radio" class="custom-control-input credit" id="credit" name="credit" value="credit" >
            <label class="custom-control-label" for="credit">Credit</label>
        </div>
        <div class="custom-control custom-radio custom-control-lg custom-control-inline">
            <input type="radio" class="custom-control-input transfer" id="transfer" name="credit" value="transfer" >
            <label class="custom-control-label" for="transfer">โอนเงิน</label>
        </div>
    </div>
    <input type="number" class="form-control form-control-lg mb-1" id="cash" name="cash" placeholder="cash">
    <button type="button" class="btn btn-lg btn-info btn-block btn-checkout-confirm disabled">Checkout</button>
    <input type="hidden" class="checkout_total" id="checkout_total" name="checkout_total" value="@{{ total }}">
</script>

<script id="entry-template" type="text/x-handlebars-template">
    <tr>
        <td>@{{ name }}</td>
        <td class="text-center" >
            <button type="button" class="btn btn-danger btn-rounded btn-del-row-product">
                <i class="fa fa-fw fa-times"></i>
            </button>
        </td>
        <td class="text-right" >
            <input class="form-control row-qty" type="number" name="row-qty" value="@{{ qty }}" min="1" style="text-align: right;" >
        </td>
        <td class="text-right" >@{{ price_text }}</td>
        <td class="text-right td-discount" >
            <input class="form-control row-discount td-discount" type="number" name="row-discount" value="@{{ discount }}" min="0" style="text-align: right;" >
        </td>
        <td class="text-right" >@{{ total_text }}</td>
        <input type="hidden" name="id" value="@{{ id }}" >
        <input type="hidden" name="product_id" value="@{{ product_id }}" >
    </tr>
</script>

<script id="script-modal-change" type="text/x-handlebars-template">
    <div class="row">
        <div class="col-12 text-center">
            <h1 class="text-muted">
                เงินทอน @{{ change_text }} บาท
            </h1>
        </div>
    </div>
</script>

{!! view('cancelorder.cancelorder')->render() !!}

@endsection

@section('css')
<link rel="stylesheet" href="assets/js/plugins/select2/css/select2.min.css" />
<style>
    #table-body2 td{
        padding-right: 4px;
        padding-left: 4px;
    }
</style>
@endsection

@section('script')
<script src="packages/handlebars/handlebars.min.js"></script>
<script src="assets/js/plugins/select2/js/select2.full.min.js"></script>
<script src="{{ asset('js/vue.js') }}"></script>
<script type="text/javascript">
$(document).ready(function () {
    (function ($) {
        $(".discount-mode").on("change", function(){
            var mode = $(this).val();
            console.log('mode', mode);
            Dashmix.block('state_loading', '#block-table');
            $.post("{{ route('sale-change-discount-mode') }}", {
                table_id: table_id,
                _token: $('meta[name="csrf-token"]').attr('content'),
                mode: mode
            }, function(res){
                getData();
                Dashmix.block('state_normal', '#block-table');
            }, 'json');
        });

        $(".discount-type").on("change", function(){
            var type = $(this).val();
            console.log('type', type);
            Dashmix.block('state_loading', '#block-table');
            $.post("{{ route('sale-change-discount-type') }}", {
                table_id: table_id,
                _token: $('meta[name="csrf-token"]').attr('content'),
                type: type
            }, function(res){
                getData();
                Dashmix.block('state_normal', '#block-table');
            }, 'json');
        });

        $(".discount-value").on("change", function(){
            var value = $(this).val();
            console.log('value', value);
            Dashmix.block('state_loading', '#block-table');
            $.post("{{ route('sale-change-discount') }}", {
                table_id: table_id,
                _token: $('meta[name="csrf-token"]').attr('content'),
                value: value
            }, function(res){
                getData();
                Dashmix.block('state_normal', '#block-table');
            }, 'json');
        });

        /////////////

        // vue app
        var vueapp = new Vue({
            el: '#vueapp',
            data: {
                products : [],
                table_id : parseInt("{{ $table_id }}", 10),

                line_discount_total_text: 0,
                line_discount_total: 0,

                food_discount_percent: 0,
                drink_discount_percent: 0,
                food_discount_fixed: 0,
                drink_discount_fixed: 0,
                bill_discount_percent: 0,
                bill_discount_fixed: 0,

                food_discount_text: 0,
                drink_discount_text: 0,
                bill_discount_text: 0,

                is_food_discount: false,
                is_drink_discount: false,
                is_line_food_discount: false,
                is_line_drink_discount: false,

                category_discount: 0,
                category_discount_text: 0,

                service_charge_percent: 0,
                service_charge_footer: "",
                subtotal_text: 0,
                service_charge_text: 0,

                total_text: 0,
                vat: 0,
                vat_type: 0,
                vat_total_text: 0,
                vat_type_text: "",
                discount_total_text: 0,
                customer_id: 0,
                customer_point: 0,
                customer_point_use: 0,
                customer_found: false,
                processing: false
            },
            methods: {
                init: function(){
                    console.log("init");
                    this.getProducts();
                },
                loading: function(){
                    Dashmix.block('state_loading', '#block-table');
                },
                endloading: function(){
                    Dashmix.block('state_normal', '#block-table');
                },
                getToken: function(){
                    return $('meta[name="csrf-token"]').attr('content');
                },
                getProducts: function(){
                    var _this = this;
                    this.loading();
                    $.get("{{ route('checkout-products') }}", {
                        table_id: this.table_id
                    }, function(res){
                        console.log('res', res);
                        _this.products = res.products;
                        _this.line_discount_total_text = res.calculate.line_discount_total_text;
                        _this.line_discount_total = res.calculate.line_discount_total;

                        _this.food_discount_text = res.calculate.food_discount_text;
                        _this.food_discount_percent = res.calculate.food_discount_percent;
                        _this.food_discount_fixed = res.calculate.food_discount_fixed;

                        _this.drink_discount_text = res.calculate.drink_discount_text;
                        _this.drink_discount_percent = res.calculate.drink_discount_percent;
                        _this.drink_discount_fixed = res.calculate.drink_discount_fixed;

                        _this.category_discount = res.calculate.category_discount;
                        _this.category_discount_text = res.calculate.category_discount_text;

                        _this.bill_discount_percent = res.calculate.bill_discount_percent;
                        _this.bill_discount_fixed = res.calculate.bill_discount_fixed;
                        _this.bill_discount_text = res.calculate.bill_discount_text;

                        _this.service_charge_footer = res.calculate.service_charge_footer;
                        _this.service_charge_text = res.calculate.service_charge_text;
                        _this.service_charge_percent = res.calculate.service_charge_percent;
                        _this.subtotal_text = res.calculate.subtotal_text;

                        _this.vat = res.calculate.vat;
                        _this.vat_total_text = res.calculate.vat_total_text;
                        _this.vat_type_text = res.calculate.vat_type_text;
                        _this.vat_type = res.calculate.vat_type;

                        _this.discount_total_text = res.calculate.discount_total_text;
                        _this.total_text = res.calculate.total_text;

                        _this.is_food_discount = res.calculate.is_food_discount;
                        _this.is_drink_discount = res.calculate.is_drink_discount;
                        _this.is_line_food_discount = res.calculate.is_line_food_discount;
                        _this.is_line_drink_discount = res.calculate.is_line_drink_discount;

                        _this.endloading();
                    }, 'json');
                },
                addProductByClick: function(productid){
                    this.addProduct(productid);
                },
                addProductBySearch: function(productid){
                    this.addProduct($("#product_add_id").val());
                },
                addProduct: function(productid){
                    var _this = this;
                    $.post("{{ route('sale-add-product') }}", {
                        _token: this.getToken(),
                        product_id: productid
                    }, function(res){
                        if (res.status) {
                            _this.getProducts();
                        }
                    }, 'json');
                },
                openModalRemoveProduct: function(p){
                    $("#modal-cancel-order #product_id").val(p.product_id);
                    $("#modal-cancel-order #table_id").val(this.table_id);
                    $("#modal-cancel-order #table_product_id").val(p.id);
                    $("#modal-cancel-order").modal("show");
                },
                removeProduct: function(){
                    var _this = this;
                    var product_id = $("#modal-cancel-order #product_id").val();
                    var table_id = $("#modal-cancel-order #table_id").val();
                    var id = $("#modal-cancel-order #table_product_id").val();
                    $.post("{{ route('cancel-order') }}", {
                        _token: _this.getToken(),
                        product_id: product_id,
                        table_id: table_id,
                        remark: $("#modal-cancel-order #cancel_remark").val()
                    }, function (resdel) {
                        $("#modal-cancel-order").modal("hide");
                        var params = {
                            _token: _this.getToken(),
                            table_id: table_id,
                            id: id,
                            product_id: product_id,
                        };
                        $.post("{{ route('del-checkout-product') }}", params, function(res){
                            _this.getProducts();
                        }, 'json');
                    }, 'json');
                },
                changeQty: function(p){
                    var _this = this;
                    var params = {
                        _token: this.getToken(),
                        table_id: this.table_id,
                        id: p.id,
                        product_id: p.product_id,
                        qty: p.qty
                    };
                    $.post("{{ route('change-qty-checkout-product') }}", params, function(res){
                        _this.getProducts();
                    }, 'json');
                },
                changeLineDiscountPercent: function(p){
                    if (p.bar_type == 1) { // food
                        if (this.is_food_discount) {
                            alert("ส่วนลดรายการไม่สามารถใช้ร่วมกับส่วนลดอาหารได้");
                            p.discount_percent = 0;
                        }
                    } else if (p.bar_type == 2) { // drink
                        if (this.is_drink_discount) {
                            alert("ส่วนลดรายการไม่สามารถใช้ร่วมกับส่วนลดเครื่องดื่มได้");
                            p.discount_percent = 0;
                        }
                    }
                    var url = "{{ route('change-line-discount-percent') }}";
                    var discount = p.discount_percent;
                    this.changeLineDiscount(p, url, discount);
                },
                changeLineDiscountFixed: function(p){
                    if (p.bar_type == 1) { // food
                        if (this.is_food_discount) {
                            alert("ส่วนลดรายการไม่สามารถใช้ร่วมกับส่วนลดอาหารได้");
                            p.discount_fixed = 0;
                        }
                    } else if (p.bar_type == 2) { // drink
                        if (this.is_drink_discount) {
                            alert("ส่วนลดรายการไม่สามารถใช้ร่วมกับส่วนลดเครื่องดื่มได้");
                            p.discount_fixed = 0;
                        }
                    }
                    var url = "{{ route('change-line-discount-fixed') }}";
                    var discount = p.discount_fixed;
                    this.changeLineDiscount(p, url, discount);
                },
                changeLineDiscount: function(p, url, discount){
                    var _this = this;
                    var params = {
                        _token: this.getToken(),
                        table_id: this.table_id,
                        id: p.id,
                        discount: discount
                    };
                    $.post(url, params, function(res){
                        _this.getProducts();
                    }, 'json');
                },
                changeFoodDiscountPercent: function(){
                    //if (parseFloat(this.line_discount_total) != 0) {
                    if (this.is_line_food_discount) {
                        alert("ส่วนลดรายการไม่สามารถใช้ร่วมกับส่วนลดอาหารได้");
                        this.food_discount_percent = 0;
                    }
                    var url = "{{ route('change-food-discount-percent') }}";
                    this.changeFoodDiscount(url, this.food_discount_percent);
                },
                changeFoodDiscountFixed: function(){
                    if (this.is_line_food_discount) {
                        alert("ส่วนลดรายการไม่สามารถใช้ร่วมกับส่วนลดอาหารได้");
                        this.food_discount_fixed = 0;
                    }
                    var url = "{{ route('change-food-discount-fixed') }}";
                    this.changeFoodDiscount(url, this.food_discount_fixed);
                },
                changeFoodDiscount: function(url, discount){
                    var _this = this;
                    var params = {
                        _token: this.getToken(),
                        table_id: this.table_id,
                        discount: discount
                    };
                    $.post(url, params, function(res){
                        _this.getProducts();
                    }, 'json');
                },
                changeDrinkDiscountPercent: function(){
                    if (this.is_line_drink_discount) {
                        alert("ส่วนลดรายการไม่สามารถใช้ร่วมกับส่วนลดเครื่องดื่มได้");
                        this.drink_discount_percent = 0;
                    }
                    var url = "{{ route('change-drink-discount-percent') }}";
                    this.changeDrinkDiscount(url, this.drink_discount_percent);
                },
                changeDrinkDiscountFixed: function(){
                    if (this.is_line_drink_discount) {
                        alert("ส่วนลดรายการไม่สามารถใช้ร่วมกับส่วนลดเครื่องดื่มได้");
                        this.drink_discount_fixed = 0;
                    }
                    var url = "{{ route('change-drink-discount-fixed') }}";
                    this.changeDrinkDiscount(url, this.drink_discount_fixed);
                },
                changeDrinkDiscount: function(url, discount){
                    var _this = this;
                    var params = {
                        _token: this.getToken(),
                        table_id: this.table_id,
                        discount: discount
                    };
                    $.post(url, params, function(res){
                        _this.getProducts();
                    }, 'json');
                },

                changeBillDiscountPercent: function(){
                    var url = "{{ route('change-bill-discount-percent') }}";
                    this.changeBillDiscount(url, this.bill_discount_percent);
                },
                changeBillDiscountFixed: function(){
                    var url = "{{ route('change-bill-discount-fixed') }}";
                    this.changeBillDiscount(url, this.bill_discount_fixed);
                },
                changeBillDiscount: function(url, discount){
                    var _this = this;
                    var params = {
                        _token: this.getToken(),
                        table_id: this.table_id,
                        discount: discount
                    };
                    $.post(url, params, function(res){
                        _this.getProducts();
                    }, 'json');
                },
                changeServiceChargePercent: function(){
                    var _this = this;
                    this.loading();
                    $.post("{{ route('sale-change-service_charge_percent') }}", {
                        table_id: this.table_id,
                        _token: this.getToken(),
                        value: this.service_charge_percent
                    }, function(res){
                        _this.endloading();
                        _this.getProducts();
                    }, 'json');
                },
                changeVat: function(){
                    var _this = this;
                    this.loading();
                    $.post("{{ route('sale-change-vat') }}", {
                        table_id: this.table_id,
                        _token: this.getToken(),
                        value: this.vat
                    }, function(res){
                        _this.endloading();
                        _this.getProducts();
                    }, 'json');
                },
                changeVatType: function(){
                    var _this = this;
                    this.loading();
                    $.post("{{ route('sale-change-vat-type') }}", {
                        table_id: this.table_id,
                        _token: this.getToken(),
                        type: this.vat_type
                    }, function(res){
                        _this.endloading();
                        _this.getProducts();
                    }, 'json');
                },
                // customer
                changeCustomer: function(){
                    var _this = this;
                    var customer_id = $("#customer_id").val();
                    this.loading();
                    $.get("{{ route('sale-get-customer') }}", {
                        customer_id: customer_id,
                        _token: this.getToken(),
                    }, function(res){
                        if (res.status) {
                            $("#customer_fullname").val(res.fullname);
                            $("#customer_taxid").val(res.taxid);
                            $("#customer_address").val(res.address);
                            $("#customer_tel").val(res.tel);
                            $("#customer_email").val(res.email);
                            $("#customer_point").val(res.point);

                            //$(".usage_point_text").html(res.point);
                            _this.customer_point = res.point;
                            _this.customer_found = true;
                        } else {
                            $("#customer_fullname").val();
                            $("#customer_taxid").val();
                            $("#customer_address").val();
                            $("#customer_tel").val();
                            $("#customer_email").val();
                            $("#customer_point").val(0);

                            //$(".usage_point_text").html('0');
                            _this.customer_point = 0;
                            _this.customer_found = false;
                        }
                        _this.endloading();
                    }, 'json');
                },
                changeCustomerUsePoint: function () {
                    if (this.customer_point_use > this.customer_point) {
                        alert("แต้มไม่พอสำหรับลูกค้ารายนี้");
                        this.customer_point_use = this.customer_point;
                    }
                },
                printInvoice: function(){
                    var params = {
                        _token: this.getToken(),
                        table_id: this.table_id
                    };
                    $.post("{{ route('sale-print-invoice') }}", params, function(res){
                        w = window.open(null, 'print', "width=1200,height=1200");
                        w.document.write(res.html);
                        setTimeout(function() {
                            w.focus();
                            w.print();
                            w.close();
                        }, 300);
                    }, 'json');
                },
                showCheckoutModal: function(){
                    $.get("{{ route('checkout-products') }}", {
                        table_id: this.table_id
                    }, function(res){
                        console.log('res', res);
                        var source   = document.getElementById("script-modal-content").innerHTML;
                        var template = Handlebars.compile(source);
                        var html    = template(res.calculate);
                        $('#checkout-modal .block-content').html(html);
                        $('#checkout-modal').modal('show');
                    }, 'json');
                },
                checkout: function(){
                    if ($(this).hasClass("disabled")) {
                        //
                        return false;
                    }
                    if (this.processing) {
                        return false;
                    }
                    this.processing = true;
                    var cash = $("#cash").val();
                    cash = parseFloat(cash);
                    var checkout_total = $("#checkout-modal .block-content .checkout_total").val();
                    checkout_total = parseFloat(checkout_total);
                    var params = {
                        _token: this.getToken(),
                        credit: $("#checkout-modal .credit").prop("checked"),
                        transfer: $("#checkout-modal .transfer").prop("checked"),
                        checkout_total: checkout_total,
                        cash: cash,
                        customer_id: $("#form_checkout #customer_id").val(),
                        customer_taxid: $("#form_checkout #customer_taxid").val(),
                        customer_email: $("#form_checkout #customer_email").val(),
                        customer_tel: $("#form_checkout #customer_tel").val(),
                        customer_address: $("#form_checkout #customer_address").val(),
                        customer_fullname: $("#form_checkout #customer_fullname").val(),
                        customer_point_use: this.customer_point_use,
                        table_id: this.table_id
                    };
                    console.log('params', params);
                    //console.log('customer_point_use', this.customer_point_use);
                    $("#checkout-modal .block-content .btn-checkout-confirm").addClass("disabled");
                    $.post("{{ route('sale-checkout-save') }}", params, function(res){
                        console.log('res', res);
                        printReceipt(res.order_id, res.redirect, res, function(res){
                            if (res.show_change_modal) {
                                var source   = document.getElementById("script-modal-change").innerHTML;
                                var template = Handlebars.compile(source);
                                var params = {
                                    change_text: res.change_text
                                };
                                var html = template(params);
                                $('#checkout-modal .block-content').html(html);
                                $('#checkout-modal').on('hidden.bs.modal', function (e) {
                                    if (res.order_id) {
                                        //printReceipt(res.order_id, res.redirect);
                                        window.location.href = res.redirect;
                                    }
                                });
                                $('#checkout-modal').modal('show');
                            } else {
                                if (res.order_id) {
                                    //printReceipt(res.order_id, res.redirect);
                                    window.location.href = res.redirect;
                                }
                            }
                        });
                    }, 'json');
                }
            }
        });
        vueapp.init();

        $('.js-select2').select2({
            placeholder: 'Select'
        });

        $(document).on("click", ".btn-modal-cancel-order", function(){
            vueapp.removeProduct();
        });





        $(".btn-checkout-modal").on("click", function(){
            vueapp.showCheckoutModal();
        });

        $(document).on("change", "#cash", function(){
            var cash = $(this).val();
            cash = parseFloat(cash);
            var checkout_total = $("#checkout-modal .block-content .checkout_total").val();
            checkout_total = parseFloat(checkout_total);
            $("#checkout-modal .block-content .btn-checkout-confirm").addClass("disabled");
            if (isNaN(cash)) {
                //
                return false;
            }
            if (isNaN(checkout_total)) {
                //
                return false;
            }
            if (cash < checkout_total) {
                //
                return false;
            }
            console.log('cash', cash);
            console.log('checkout_total', checkout_total);
            $("#checkout-modal .block-content .btn-checkout-confirm").removeClass("disabled");
        });

        function printReceipt(order_id, redirect, res_cb, cb){
            $.get("{{ route('print-receipt') }}", {
                order_id: order_id
            }, function(res){
                console.log('res', res);
                if (res.status) {
                    w = window.open(null, 'print', "width=1200,height=1200");
                    w.document.write(res.html);
                    setTimeout(function() {
                        w.focus();
                        w.print();
                        w.close();
                        cb(res_cb);
                    }, 300);
                }
            }, 'json');
        }

        $(document).on("click", "#checkout-modal .block-content .btn-checkout-confirm", function(){
            vueapp.checkout();
        });

        $(".btn-invoice-print").on("click", function(){
            vueapp.printInvoice();
        });

    })(jQuery);
});
</script>

@endsection