@extends('admin.layouts.contentLayoutMaster')

@section('title','查詢消費紀錄')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
<link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.2.0/css/all.css">
@endsection

@section('page-styles')
@endsection

@section('content')

@include('admin.purchases.tag.master')


<section id="app">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <a href="{{ Route('admin.purchases.create', ['mobile' => $mobile]) }}">
                        <button class="btn btn-light glow mr-1 mb-1">返回</button>
                    </a>
                    <h4 class="card-title">搜尋</h4>
                    <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">
                    @yield('purchase-search-pagination')
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            @yield('purchase-content-pagination')
            @yield('cancel-content')
        </div>
    </div>
</section>

@endsection

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

@section('page-scripts')
<script>
    var day = new Date();
    var start_time = ( day.getFullYear() ) + "-" + ("0" + (day.getMonth())).slice(-2) + "-" + ("0" + day.getDate()).slice(-2);
    var end_time = day.getFullYear() + "-" + ("0" + (day.getMonth() + 1)).slice(-2) + "-" + ("0" + day.getDate()).slice(-2);

    var app = new Vue({
        el: '#app',
        data: {
            dataBlock: {},
            mobile: '{{ $mobile }}',
            flatpickr_start: start_time,
            flatpickr_end: end_time,
            total_data: 0,
            now_page: 1,
            total_page: 1,
            page_size: 10,
            is_previous_disable: false,
            is_next_disable: false,
            pagination_list: [],
        },mounted() {
            flatpickr(".publish_flatpickr", {});
            get_exchange_record(this, this.mobile, this.flatpickr_start, this.flatpickr_end, 1, 10);
        },methods: {
            check_model(str) {
                get_exchange_record(this, this.mobile, this.flatpickr_start, this.flatpickr_end, 1, 10);
            },
            search(page, page_size) {
                get_exchange_record(this, this.mobile, this.flatpickr_start, this.flatpickr_end, page, page_size);
            },
            cancel: function (id,index) {
                var vm=this;

                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.cancelPurchase") }}',
                            dataType: 'json',
                            data:{
                                id: id
                            },
                            success: function(response) {
                                if(response['data'] === true){
                                    swal('已取消', '', "success");
                                    vm.dataBlock.splice(index, 1);
                                }else{
                                    swal('取消失敗', response['data']['status'], "error");
                                }
                            },
                            error: function (error) {
                                swal('發生異常', error.statusText, "error");
                            }
                        });
                    }
                });
            },
        },
    });

    function get_exchange_record(self, mobile, start, end, page, page_size)
    {
        $.ajax({
            type:"post",
            url: '{{ route("ajax.admin.purchases.get.exchangeRecord") }}?page=' + page,
            dataType: 'json',
            data:{
                mobile: mobile,
                time: {
                    'start_at':start,
                    'end_at':end
                },
                page_size: page_size
            },
            success: function(response) {
                self.dataBlock = response.data;
                self.total_data = response.total;
                self.now_page = response.current_page;
                self.total_page = response.last_page;

                // 頁碼更新
                self.is_previous_disable = self.now_page === 1;
                self.is_next_disable = self.now_page === self.total_page;

                // 組頁碼表 10個1排
                let pagination_list = [];
                let now_column = parseInt((self.now_page - 1) / 10);
                console.log(now_column);
                console.log(self.now_page);
                // 若非前10 加上 ...
                if (now_column !== 0) {
                    pagination_list.push('...');
                }
                // 串起該排
                for (let i = 1; i <= 10; i++) {
                    let page = (now_column * 10) + i;
                    if (page > self.total_page){
                        break;
                    }

                    pagination_list.push(page);
                }
                // 非後10 加上...
                if (now_column !== parseInt(self.total_page / 10)) {
                    pagination_list.push('...');
                }

                self.pagination_list = pagination_list;
            },
            error: function (error) {
                swal('發生異常', error.statusText, "error");
            }
        });


    }

</script>
@endsection