@extends('admin.layouts.contentLayoutMaster')

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

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
@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">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <a href="{{ Route('admin.point_exchanges.index') }}">
                        <button class="btn btn-light glow mr-1 mb-1">返回</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 class="container">
                        <div class="row">
                            <div class="col-md-8">
                                <ul class="nav nav-tabs justify-content-center" role="tablist">
                                    @yield('purchase-tab')
                                    @yield('decrease-tab')
                                    @yield('increase-tab')
                                    @yield('cancel-tab')
                                </ul>
                            </div>
                            <div class="col-md-3">
                                <div class="input-group">
                                    <input class="form-control border-end-0 border" type="search" v-model="mobile" value="" name="mobile" value="" placeholder="輸入電話號碼">
                                </div>
                            </div>
                        </div>
                        <div class="tab-content">
                            @yield('purchase-content')
                            @yield('decrease-content')
                            @yield('increase-content')
                            @yield('cancel-content')
                        </div>
                        <input type="hidden" name="action" id="action" v-model="action" @value="@{{ action }}">
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="row">


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

@endsection

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

@section('page-scripts')
<script>
    var day = new Date();
    var start_time = ( day.getFullYear()-1 ) + "-" + ( day.getMonth()+1 ) + "-" + day.getDate();
    var end_time = day.getFullYear() + "-" + ( day.getMonth()+1) + "-" + day.getDate();
    var url = '{{ route("ajax.admin.point_exchange.get.exchangeRecord") }}';

    var app = new Vue({
        el: '#app',
        data: {
            action : 'purchase',
            dataBlock: {},
            mobile: '',
            flatpickr_start: start_time,
            flatpickr_end: end_time,
        },mounted() {
            flatpickr(".publish_flatpickr", {
                enableTime: true,
                dateFormat: "Y-m-d",
            });

            var vm = this;
            $.ajax({
                type:"post",
                url: '{{ route("ajax.admin.point_exchange.get.exchangeRecord") }}',
                dataType: 'json',
                data:{
                    action: this.action,
                    time: { 'start_at':this.flatpickr_start, 'end_at':this.flatpickr_end },
                },
                success: function(response) {
                    vm.dataBlock = response['data'];
                },
                error: function (error) {
                    console.log('error');
                }
            });
        },methods: {
            check_model(str) {
                this.action = str;
                vm = this;

                $.ajax({
                    type:"post",
                    url: '{{ route("ajax.admin.point_exchange.get.exchangeRecord") }}',
                    dataType: 'json',
                    data:{
                        action: vm.action,
                        mobile: vm.mobile,
                    },
                    success: function(response) {
                        vm.dataBlock = response['data'];
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            },
            search() {
                var vm = this;

                $.ajax({
                    type:"post",
                    url: '{{ route("ajax.admin.point_exchange.get.exchangeRecord") }}',
                    dataType: 'json',
                    data:{
                        action: this.action,
                        mobile: vm.mobile,
                        time: { 'start_at':this.flatpickr_start, 'end_at':this.flatpickr_end },
                    },
                    success: function(response) {
                        vm.dataBlock = response['data'];
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            },
        },
    })
</script>
@endsection