@extends('admin.layouts.contentLayoutMaster')

@section('title','點數兌換')

@section('vendor-styles')

@endsection

@section('page-styles')
<style>
    label {
        font-size: 1em;
    }
    .num-block div button {
        width: 100%;
        height:50px;
    }
    .card-footer div button {
        width: 100%;
        height:50px;
    }
</style>
@endsection

@section('content')
@include('admin.point_exchanges.tag.master')
<section id="app">
    <form class="form form-horizontal" action="#" @submit.prevent="checkForm"  method="POST">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <a href="{{ Route('admin.point_exchanges.list') }}">
                        <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">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend" >
                                          <span class="input-group-text" style="width: 120px">會員QR Code</span>
                                        </div>
                                        <input type="text" class="form-control" id="QRcode" name="QRcode" placeholder="請掃描會員QR Code">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="input-group mb-1">
                                        <div class="input-group-prepend">
                                          <span class="input-group-text" style="width: 120px">會員電話</span>
                                        </div>
                                        <input type="text" class="form-control" v-model="mobile" v-bind:class="{ 'is-invalid': mobile_error }" placeholder="請輸入會員電話">
                                        <div class="invalid-feedback">
                                            @{{ mobile_err_msg }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="input-group mb-1">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" style="width: 120px">服務</span>
                                        </div>
                                        <select class="custom-select" v-model="firm_service" @click="change_select()" v-bind:class="{ 'is-invalid': firm_service_error }">
                                            <option v-for="(itme, key) in user_info.firm_services"  v-bind:value="key">@{{ itme }}</option>
                                        </select>
                                        <button class="btn btn-primary glow ml-1" type="button" @click="search()">搜尋</button> 
                                        <div class="invalid-feedback" style="display: inline-block"> @{{ firm_service_err_msg }} </div>
                                    </div>
                                    
                                </div>
                                <div class="col-md-9" style="">
                                    <div class="input-group mb-1  rounded-sm"  style="height:100px;border:1px solid #DFE3E7">
                                        <div class="input-group-prepend col-md-6  align-items-center" style="font-size: 1rem">
                                            <label for="">姓名:</label>
                                            <span class="text-primary align-items-center">@{{ user_info.name }}</span>
                                        </div>
                                        <div class="input-group-prepend col-md-6  align-items-center">
                                            <label for="">經驗值:</label>
                                            <span class="text-primary">@{{ user_info.purchases }}</span>
                                        </div>
                                        <div class="input-group-prepend col-md-6">
                                            <label for="">點數:</label>
                                            <span class="text-primary">@{{ user_info.point }}</span>
                                        </div>
                                        <div class="input-group-prepend col-md-6">
                                            <label for="">等級:</label>
                                            <span class="text-primary">@{{ user_info.rank }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group ">
                                        <button class="btn btn btn-danger glow mb-1" type="button" style="width: 100%;padding:10px" data-toggle="modal"data-target="#staticBackdrop" @click="clickDecrease()">兌點</button><br>
                                        <button class="btn btn btn-secondary glow" type="button" style="width: 100%;padding:10px" data-toggle="modal" data-target="#staticBackdrop" @click="clickIncrease()">贈點</button>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="input-group mb-1">
                                        <div class="input-group-prepend">
                                          <span class="input-group-text" style="width: 120px">消費金額</span>
                                        </div>
                                        <input type="text" class="form-control" v-model="purchase_price" placeholder="請輸入消費金額" v-bind:class="{ 'is-invalid': purchase_price_error }">
                                        <div class="invalid-feedback" style="display: inline-block"> @{{ 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">
                        <div class="card-body">
                            <div class="num-block row">
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('1')">1</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('2')">2</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('3')">3</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('4')">4</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('5')">5</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('6')">6</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('7')">7</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('8')">8</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('9')">9</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-danger glow mr-1 mb-1" type="button" @click="purchase_clear()">清除</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="purchase_append('0')">0</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="">.</button> 
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-success glow mr-1 mb-1" type="submit">確認付款</button> 
                            </div>
                        </div>
                    </div>
                
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
            <form class="form form-horizontal" action="#"  method="POST">
                <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">@{{ model_title }}</h5>
                        <button type="button" class="close bg-danger" data-dismiss="modal" aria-label="Close" @click="close()">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <div class="num-block row">
                                <div class="col-md-12">
                                    <div class="input-group mb-1">
                                        <div class="input-group-prepend">
                                        <span class="input-group-text" style="width: 120px">點數</span>
                                        </div>
                                        <input type="text" class="form-control" id="point" name="point" v-model="point_current" placeholder="請輸入點數">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="append('1')">1</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="append('2')">2</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="append('3')">3</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="append('4')">4</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="append('5')">5</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="append('6')">6</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="append('7')">7</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="append('8')">8</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="append('9')">9</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-danger glow mr-1 mb-1" type="button" @click="clear()">清除</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="append('0')">0</button> 
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-light glow mr-1 mb-1" type="button" @click="">.</button> 
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-success glow mr-1 mb-1" type="submit">送出</button> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>

@endsection

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

@section('page-scripts')
<script>
    var app = new Vue({
        el: '#app',
        data: {
            purchase_price: 0,
            point_current: 0,
            user_info: {},
            action: 'purchase',
            model_title: '消費紀錄',
            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,
        },
        methods: {
            checkForm: function (e) {
                console.log('firm_service',this.firm_service);
                console.log(this.firm_service_error);
                // 服務防呆
                if (JSON.stringify(this.firm_service) === '{}') {
                    this.firm_service_error = true;
                    this.firm_service_err_msg = '請選擇服務';
                    console.log('555');
                    return false;
                }
                // 消費金額防呆
                if(this.action == 'purchase'){
                    if(this.purchase_price<=0 || this.purchase_price==''){
                        this.purchase_price_error = true;
                        this.purchase_price_err_msg = '消費金額不為 0';
                        return false;
                    }
                    this.purchase_price_error = false;
                }
                
                this.firm_service_error = false;
                var vm = this;
                $.ajax({
                    type:"post",
                    url: '{{ route("ajax.admin.point_exchange.get.savePointExchane") }}',
                    dataType: 'json',
                    data:{
                        action: this.action,
                        mobile: this.mobile,
                        user_id: this.user_info.user_id,
                        firm_service: this.firm_service,
                        point_current: this.point_current,
                        purchase_price: this.purchase_price,
                    },
                    success: function(response) {
                        $('#staticBackdrop').modal('hide');
                        vm.user_info = response['data'];
                        Swal.fire(
                            vm.model_title+response['data']['message']['message'],
                            "",
                            response['data']['message']['status'],
                        );
                        vm.point_current = 0;
                        vm.purchase_price = 0;
                        vm.action = 'purchase';
                        vm.model_title = '消費紀錄';
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
                
                e.preventDefault();
            },
            search() {
                if (this.mobile == '') {
                    this.mobile_error = true;
                    this.mobile_err_msg = '請填入電話號碼';
                    return false;
                }
                this.mobile_error = false;
                var vm = this;
                $.ajax({
                    type:"post",
                    url: '{{ route("ajax.admin.point_exchange.get.userInformation") }}',
                    dataType: 'json',
                    data:{
                        mobile:this.mobile
                    },
                    success: function(response) {
                        vm.user_info = response['data'];
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            },
            purchase_append(number) {
                this.purchase_price = this.purchase_price === 0 ? parseInt(`${number}`) : parseInt(`${this.purchase_price}${number}`) ;
            },
            purchase_clear() {
                this.purchase_price = '' ;
            },
            append(number) {
                this.point_current = this.point_current === 0 ? parseInt(`${number}`) : parseInt(`${this.point_current}${number}`) ;
            },
            clear() {
                this.point_current = '' ;
            },
            clickDecrease() {
                this.action = 'decreasePoint';
                this.model_title = '兌點';
            },
            clickIncrease() {
                this.action = 'increasePoint';
                this.model_title = '贈點';
            },
            close() {
                this.action = 'purchase';
                this.model_title = '消費紀錄';
                this.point_current = 0;
            },
            change_select() {
                this.firm_service_error = false;
            }
        },
    })
</script>
@endsection