@extends('admin.layouts.contentLayoutMaster')

@section('title','新增消費紀錄')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
@endsection

@section('page-styles')
<style>
    .invalid-feedback {
        display: inline-block
    }

    .input-group-text-width {
        width: 120px;
    }

    /* user infomation */
    .user-info-block {
        height:100px;
        border:1px solid #DFE3E7;
    }

    .user-info-block .user-info-label {
        font-size: 1.5em;
        color:#bcc6d1;
    }
    
    .user-info-block .user-info-text {
        font-size: 1.5em;
        font-weight: bold;
        
    }

    .num-block div button {
        width: 100%;
        height:50px;
    }
    .btn-font {
        font-size: 2em;
    }
    .btn-light {
        font-size: 36px;
    }

    .scan_block {
        /* width: 35%;*/ 
    }

    .scan_block .scan_item {
        font-size:3rem;
    }

    .voucher_block {
        background-color: #F2F4F4;
        margin-left: 15px;
    }
    .voucher .voucher_content {
        padding: 5px;
    }
    .voucher .voucher_content .voucher_name{
        font-size: 40px;
    }
    .voucher .voucher_content .voucher_code{
        font-size: 12px;
    }
    .voucher .voucher_content .amount {
        top: 5px;
        font-size:20px;
    }
        
</style>
@endsection

@section('content')
@include('admin.purchases.tag.master')
<section id="app">
    <div id="reader" width="600"></div>
    <form class="form form-horizontal" ac tion="#" method="POST">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header pb-0 pt-1">
                        <a class="url_link" href="{{ Route('admin.purchases.list', ['mobile' => $mobile]) }}">
                            <button class="btn btn-secondary glow mr-1 mb-1" type="button">紀錄</button>
                        </a>
                        <a class="heading-elements-toggle"><i class="bx bx-dots-vertical font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li>
                                    <a data-action="collapse"><i class="bx bx-chevron-down"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body pb-0">
                            <div class="row">

                                {{-- search --}}
                                <div class="col-xl-11 col-10">
                                    <div class="input-group mb-1">
                                        <div class="input-group-prepend">
                                          <span class="input-group-text input-group-text-width">會員電話</span>
                                        </div>
                                        <input 
                                            type="text" 
                                            class="form-control w-75" 
                                            placeholder="請輸入會員電話" 
                                            ref="mobile"
                                            v-bind:class="{ 'is-invalid': mobile_error }" 
                                            v-model="mobile" 
                                            v-on:keyup.enter="enteraSearch()" 
                                            @focus="focusHere('mobile')"
                                            :readonly="window.width < 1024"
                                        >
                                        <div class="invalid-feedback">
                                            @{{ mobile_err_msg }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-1 col-2 d-flex justify-content-end">
                                    <div class="scan_block">
                                        <i class="bx bx-barcode scan_item pt-0 mt-0" @click="scan()"></i>
                                    </div>
                                </div>
                                <div class="col-xl-11 col-10">
                                    <div class="input-group mb-1">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text input-group-text-width">服務</span>
                                        </div>
                                        <select 
                                            class="custom-select w-75" 
                                            v-bind:class="{ 'is-invalid': firm_service_error }"
                                            v-model="firm_service" 
                                            @click="change_select()" 
                                        >
                                            <option v-for="(itme, key) in user_info.firm_services"  v-bind:value="key">@{{ itme }}</option>
                                        </select>
                                        
                                        <div class="invalid-feedback">
                                            @{{ firm_service_err_msg }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-1 col-2 d-flex justify-content-end">
                                    <button class="btn btn-primary glow mb-1" type="button" @click="search()">搜尋</button> 
                                </div>
                                <div class="col-xl-11 col-10">
                                    <div class="input-group mb-1">
                                        <div class="input-group-prepend">
                                          <span class="input-group-text input-group-text-width">折價券</span>
                                        </div>
                                        <select 
                                            class="form-control select2 w-75" 
                                            v-model='voucher_id' 
                                            v-select="voucher_select"  
                                            style="width: 75%"
                                            @change="searchVoucher()"
                                        >
                                        </select>
                                        <div class="invalid-feedback">
                                            @{{ voucher_err_msg }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-1 col-2 d-flex justify-content-end">
                                    <div class="scan_block">
                                        <i class="bx bx-barcode scan_item pt-0 mt-0" @click="scanVoucher()"></i>
                                    </div>
                                </div>

                                {{-- user infomation --}}
                                <div class="col-md-12">
                                    <div class="input-group mb-1 rounded-sm user-info-block">
                                        <div class="input-group-prepend col-md-4">
                                            <label class="user-info-label" for="">姓名:</label>
                                            <span class="text-primary user-info-text align-items-center">@{{ user_info.name }}</span>
                                        </div>
                                        <div class="input-group-prepend col-md-6">
                                            <label class="user-info-label" for="">累積次數:</label>
                                            <span class="text-primary user-info-text">@{{ user_info.quantity }}</span>
                                        </div>
                                        <div class="input-group-prepend col-md-4">
                                            <label class="user-info-label" for="">等級:</label>
                                            <span class="text-primary user-info-text">@{{ user_info.rank }}</span>
                                        </div>
                                        <div class="input-group-prepend col-md-6">
                                            <label class="user-info-label" for="">累積金額:</label>
                                            <span class="text-primary user-info-text">@{{ format(user_info.purchases) }}</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- voucher --}}
                                <div class="col-11 voucher_block mb-1 pt-1 pb-1" v-if="voucher_list"  v-for="(item) in voucher_list">
                                    <div class="voucher" data-clickthrough="link">
                                        <div class="voucher_label">
                                                <div class="bd-border_solid"></div>
                                            <div class="bd-border_dotted"></div> 
                                        </div>
                                        <div class="voucher_content">
                                            <span class="voucher_name">
                                                @{{ item.metadata.name }} 
                                            </span>
                                            <span class="voucher_code">
                                                (@{{ item.code }})
                                            </span>
                                            
                                            <ul>
                                                <span>　</span>
                                                <li v-if="item.metadata.minimum_amount">
                                                    低消：@{{ item.metadata.minimum_amount }}
                                                </li>    
                                            </ul>
                                            <span class="amount">
                                                @{{ format(item.amount) }}
                                            </span>         
                                        </div>
                                    </div>
                                </div>
                                <div class="col-1"></div>

                                <div class="col-md-12">
                                    <div class="input-group mb-1">
                                        <div class="input-group-prepend">
                                          <span class="input-group-text input-group-text-width">消費金額</span>
                                        </div>
                                        <input 
                                            type="text" 
                                            class="form-control" 
                                            placeholder="請輸入消費金額" 
                                            ref="purchase_price"
                                            v-bind:class="{ 'is-invalid': purchase_price_error }" 
                                            v-model="purchase_price" 
                                            :readonly="window.width < 1024"
                                            @focus="focusHere('purchase_price')" 
                                        >
                                        <div class="invalid-feedback">
                                            @{{ purchase_price_err_msg }}
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" v-model="user_info.user_id">
                                <input type="hidden" v-model="action">
                            </div>
                        </div>
                    </div>
                

                    <div class="card-content collapse show">

                        {{-- toggle number keyboard --}}
                        <div class="card-body pb-0" v-if="window.width >= 1024">
                            <div class="custom-control custom-switch custom-control-inline mb-1">
                                <input type="checkbox" class="custom-control-input" id="showKeyboard" name="showKeyboard" v-model="showKeyboard">
                                <label class="custom-control-label mr-1" for="showKeyboard"></label>
                            </div>
                        </div>

                        {{-- number keyboard --}}
                        <div class="card-body pb-0" v-if="window.width < 1024 || showKeyboard == true">
                            <div class="num-block row">
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('1')">1</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('2')">2</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('3')">3</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('4')">4</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('5')">5</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('6')">6</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('7')">7</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('8')">8</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('9')">9</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-danger glow mr-1 mb-1 btn-font" type="button" @click="purchase_clear()">清除</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('0')">0</button> 
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_backspace()">←</button> 
                                </div>
                            </div>
                        </div>

                        {{-- submit --}}
                        <div class="card-footer d-flex justify-content-center text-center pb-0 pt-0">
                            <button class="btn btn-success btn-lg glow mb-1 w-100 h-100 btn-font" type="button" @click="checkForm()">確認付款</button>
                        </div>

                    </div>
                
                </div>
            </div>
        </div>
    </form>
</section>

@endsection

@section('vendor-scripts')
<script src="{{ asset('plugins/vue/vue.js') }}"></script>
<script src="{{ asset('vendors/js/forms/select/select2.js') }}"></script>
<script src="{{ asset('plugins/html5-qrcode/html5-qrcode.min.js') }}"></script>
@endsection

@section('page-scripts')
<script>
    function updateFunction (el, binding) {
        let options = binding.value || {};

        $(el).select2(options).unbind().on("select2:select", (e) => {
            el.dispatchEvent(new Event('change', { target: e.target }));
        });
    }
    
    Vue.directive('select', {
        inserted: updateFunction ,
        componentUpdated: updateFunction,
    });


    function formatFunction (voucher) {
        if (!voucher.id) {
            return voucher.text;
        }

        // let el = $(voucher.element);       
        let minimum_amount = (!voucher.metadata.minimum_amount) ? 0 :voucher.metadata.minimum_amount;
        let voucherDom = $(`
            <span class="ticket">
                <span>${voucher.metadata.name}</span>
                | <span>  折   ${voucher.amount}</span>
                | <span>  低消 ${minimum_amount}</span>
                | <span>   ${voucher.code}</span>
            </span>
        `);
        
        return voucherDom;
    }

    var app = new Vue({
        el: '#app',
        data: {
            window: {
                width: 0,
                height: 0
            },
            showKeyboard: 0,
            purchase_price: 0,
            user_info: {},
            action: 'purchase',
            model_title: '消費紀錄',
            mobile: "{{ $mobile }}",
            mobile_err_msg:'',
            mobile_error: false,
            firm_service: '',
            firm_service_err_msg:'',
            firm_service_error: false,
            purchase_price_err_msg:'',
            purchase_price_error: false,
            focus_field: 'mobile',
            voucher_id: '',
            voucher_list: '',
            voucher_error: false,
            voucher_err_msg: '',
            customTemplateValue: '',
            voucher_select: {
                templateResult: formatFunction,
                templateSelection: formatFunction,
                data:'',
            },  
        },watch: {
            purchase_price: function(newData) {
                this.purchase_price = (newData != '') ? parseInt(newData) : 0 ;
            }
        },created() {
            window.addEventListener('resize', this.handleResize);
            this.handleResize();
        },destroyed() {
            window.removeEventListener('resize', this.handleResize);
        },methods: {
            handleResize() {
                this.window.width = window.innerWidth;
                this.window.height = window.innerHeight;
            },
            checkForm: function (e) {
                let vm = this;

                // 電話防呆
                if (vm.mobile == '') {
                    vm.mobile_error = true;
                    vm.mobile_err_msg = '填入電話號碼';
                    return false;
                }else{
                    vm.mobile_error = false;
                }

                // 服務防呆
                if(vm.firm_service){
                    vm.firm_service_error = false;
                    vm.firm_service_err_msg = '';
                }else{
                    vm.firm_service_error = true;
                    vm.firm_service_err_msg = '找不到服務';
                    return false;
                }

                // 消費金額防呆
                if(vm.purchase_price <= 0 || vm.purchase_price == ''){
                    vm.purchase_price_error = true;
                    vm.purchase_price_err_msg = '消費金額不為 0';
                    return false;
                }else{
                    vm.purchase_price_err_msg = '';
                    vm.purchase_price_error = false;
                }

                // 折價券防呆
                if(vm.voucher_error){
                    vm.voucher_error = true;
                    vm.voucher_error_msg = '無效折價券';
                    return false;
                }else{
                    vm.voucher_error = false;
                    vm.voucher_error_msg = '';
                }
                Swal.fire({
                    title: '確認付款？',
                    type: 'question',
                    showCloseButton: true,
                    showCancelButton: true,
                    confirmButtonText: 'YES',
                    cancelButtonText: 'NO',
                    confirmButtonClass: 'btn btn-primary',
                    cancelButtonClass: 'btn btn-light',
                }).then(function(response) {
                    if (response.value === true) {
                        $.ajax({
                            type:"post",
                            url: '{{ route("ajax.admin.purchases.get.addPurchase") }}',
                            dataType: 'json',
                            data:{
                                action: vm.action,
                                mobile: vm.mobile,
                                user_id: vm.user_info.user_id,
                                firm_service: vm.firm_service,
                                purchase_price: vm.purchase_price,
                                voucher_id: vm.voucher_id,
                            },
                            success: function(response) {
                                // if(response['data']['message']['status'] === 'success'){
                                //     $('#staticBackdrop').modal('hide');
                                //     vm.action = 'purchase';
                                //     vm.purchase_price = 0;
                                //     vm.mobile = '';
                                //     vm.user_info = {};
                                //     vm.voucher_id = '';
                                //     vm.voucher_list = '';
                                //     vm.voucher_select = {};
                                // }

                                Swal.fire(
                                    response['data']['message']['message'],
                                    "",
                                    response['data']['message']['status'],
                                ).then(() => location.href = '{{ Route("admin.purchases.create") }}');
                                
                            },
                            error: function (error) {
                                swal('發生異常', error.statusText, "error");
                            }
                        }); 
                    }
                });
                

            },search() {
                let vm = this;
                
                if (vm.mobile == '') {
                    vm.mobile_error = true;
                    vm.mobile_err_msg = '填入電話號碼';
                    return false;
                }else{
                    vm.mobile_error = false;
                }

                let list_link = '{{ route("admin.purchases.list") }}';
                $('.url_link').attr('href', list_link + '?mobile='+vm.mobile);

                $.ajax({
                    type:"post",
                    url: '{{ route("ajax.admin.purchases.get.userInformation") }}',
                    dataType: 'json',
                    data:{
                        mobile:vm.mobile,
                    },
                    success: function(response) {
                        vm.user_info = response['data'];
                        vm.purchase_price = 0;
                        vm.voucher_select.data = {};
                        vm.voucher_select.data = response['data']['vouchers'];
                        // 根據登入角色services_id，預設帶入對應的服務
                        let auth_id = (vm.user_info.auth_id)? vm.user_info.auth_id.toString():1;
                        let firm_services_id = (vm.user_info.firm_services)? vm.user_info.firm_services:1;
                        if(Object.keys(firm_services_id).indexOf(auth_id) != -1){;
                            vm.firm_service  = Object.keys(firm_services_id)[Object.keys(firm_services_id).indexOf(auth_id)];
                        }else{
                            vm.firm_service  = Object.keys(firm_services_id)[0];
                        }

                        // 服務防呆
                        if(vm.user_info.firm_services){
                            vm.firm_service_error = false;
                            vm.firm_service_err_msg = '';
                            vm.$refs.purchase_price.focus();
                        }else{
                            vm.firm_service_error = true;
                            vm.firm_service_err_msg = '查無此會員';
                            vm.voucher_select.data = {};
                            return false;
                        }

                        if (vm.firm_service === ''){
                            vm.firm_service  = 1;
                        }


                    },
                    error: function (error) {
                        swal('發生異常', error.statusText, "error");
                    }
                });
            },format: function(value) {
                if(value > -1){
                    const NumberFormat = new Intl.NumberFormat();
                    return '$ ' + NumberFormat.format(value);
                }
            },format_date: function(value) {
                return value.slice(0,10);            
            },purchase_append(number) {
                let vm = this;
                if(vm.focus_field === 'voucher_id'){
                    value = vm.voucher_id;
                    value = value === 0 ? `${number}` : `${value}${number}`;
                    vm[vm.focus_field] = value;
                }else{
                    value = vm.focus_field === 'purchase_price' ? vm.purchase_price : vm.mobile;
                    value = value === 0 ? `${number}` : `${value}${number}`;
                    vm[vm.focus_field] = value;
                }
            },purchase_clear() {
                let vm = this;
                let value = vm.focus_field === 'purchase_price' ? 0: '';
                if(vm.focus_field === 'voucher_id'){
                    vm.voucher_error = false;
                    vm.voucher_err_msg = '';
                }
                vm[vm.focus_field] = value;
            },purchase_backspace() {
                let vm = this;
                let value = '';
                switch (vm.focus_field) {
                    case 'purchase_price':
                        value = vm.purchase_price.toString();
                        value = value.length > 0 ? value.slice(0, -1) : 0;
                        break;
                    case 'voucher_id':
                        value = vm.voucher_id.toString();
                        value = value.length > 0 ? value.slice(0, -1) : '';
                        if(value === ''){
                            vm.voucher_error = false;
                            vm.voucher_err_msg = '';
                        }
                        break
                    default:
                        value = vm.mobile.toString();
                        value = value.length > 0 ? value.slice(0, -1) : '';
                        break;
                }
                vm[vm.focus_field] = value;
            },change_select() {
                this.firm_service_error = false;
            },focusHere(value) {
                let vm  = this;
                vm.focus_field = value
            },scan(){
                const html5QrCode = new Html5Qrcode("reader");
                const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                    this.mobile = decodedText;
                    this.search();
                    html5QrCode.stop();
                };
                
                const config = { fps: 10, qrbox: {width: 500,height: 200} };
                let startParam =  { 
                    // 後鏡頭
                    facingMode: "environment" 
                } 
                html5QrCode.start(startParam, config, qrCodeSuccessCallback);
            },enteraSearch: function () {
                this.search();
            },getVoucher: function(code) {
                console.log(code);

                return this.voucher_select.data.filter(e => e.code == code).pop();
            },scanVoucher(){
                vm = this;
                if(window.innerWidth > 768){
                    windowsWidth = 500;
                }else{
                    windowsWidth = 250;
                }
                const html5QrCode = new Html5Qrcode("reader");
                const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                    vm.voucher_id = vm.getVoucher(decodedText).id;
                    vm.searchVoucher();
                    html5QrCode.stop();
                };
                
                const config = { fps: 10, qrbox: {width: windowsWidth,height: windowsWidth} };
                let startParam =  { 
                    // 後鏡頭
                    facingMode: "environment" 
                } 
                html5QrCode.start(startParam, config, qrCodeSuccessCallback);
            },searchVoucher(){
                vm = this;
                $.ajax({
                    type:"post",
                    url: '{{ route("ajax.admin.purchases.get.getUservoucher") }}',
                    dataType: 'json',
                    data:{
                        voucher_id:vm.voucher_id,
                        user_id: vm.user_info.user_id
                    },
                    success: function(response) {
                        var status = response['data']['status'];
                        vm.voucher_list = [response['data']['vouchers']];
                    
                        if(vm.voucher_id !== ''){
                            if(status || response['data'].length === 0){
                                vm.voucher_error = false;
                                vm.voucher_err_msg = '';
                                vm.$refs.purchase_price.focus();
                            }else{
                                vm.voucher_error = true;
                                vm.voucher_err_msg = '無效折價券';
                                return false;
                            }
                        }else{
                            vm.voucher_list = '';
                        }
                    },
                    error: function (error) {
                        if(error.status === 500){
                            swal('發生異常', error.statusText, "error");
                        }else{
                            vm.voucher_error = false;
                            vm.voucher_err_msg = '';
                            vm.voucher_list = '';
                        }
                    }
                });
            }
        },beforeMount(){
            let vm = this;
            if(this.mobile != ''){
                let list_link = '{{ route("admin.purchases.list") }}';
                $('.url_link').attr('href', list_link + '?mobile='+vm.mobile);
                $.ajax({
                    type:"post",
                    url: '{{ route("ajax.admin.purchases.get.userInformation") }}',
                    dataType: 'json',
                    data:{
                        mobile:this.mobile,
                    },
                    success: function(response) {
                        vm.user_info = response['data'];
                        vm.voucher_select.data = {};
                        vm.voucher_select.data = response['data']['vouchers'];
                        
                        // 服務防呆
                        if(vm.user_info.firm_services){
                            vm.firm_service_error = false;
                            vm.firm_service_err_msg = '';
                        }else{
                            vm.firm_service_error = true;
                            vm.firm_service_err_msg = '找不到服務';
                            return false;
                        }

                        // 根據登入角色services_id，預設帶入對應的服務
                        let auth_id = (vm.user_info.auth_id)? vm.user_info.auth_id.toString():1;
                        let firm_services_id = (vm.user_info.firm_services)? vm.user_info.firm_services:1;
                        if(Object.keys(firm_services_id).indexOf(auth_id) != -1){;
                            vm.firm_service  = Object.keys(firm_services_id)[Object.keys(firm_services_id).indexOf(auth_id)];
                        }else{
                            vm.firm_service  = Object.keys(firm_services_id)[0];
                        }
                    },
                    error: function (error) {
                        swal('發生異常', error.statusText, "error");
                    }
                });
            }
        },mounted() {
            this.$refs.mobile.focus();
        }
    })
</script>
@endsection