@extends('layout.admin_v2.main')
@push('css')
<link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
<style>
    .center input,
    .center button {
        width: 50%;
        margin: 20px auto;
        font-size: 100%;
        text-align: center;
        padding: 10px;
    }

    div.btn button {
        display: block;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        padding: 10px 10px;
        font-size: 85%;
        background: #4A96B2;
        color: #fff;
        margin-top: 5px;
        border: 0;
        width: 50%;
        cursor: pointer;

    }

    .btn {
        border-radius: 4px !important;
    }

    * {
        font-weight: bold;
    }

    #adminPaymentHistoryMonthly .table {
        background-color: unset;
    }

    #adminPaymentHistoryMonthly .table th {
        border-top: unset !important;
        border-right: unset !important;
        font-size: 14px;
        background-color: #F2F2F2 !important;
        color: #51595C;
        text-align: left;
        padding-top: 10px;
    }

    #adminPaymentHistoryMonthly .table td {
        border-top: unset !important;
        border-bottom: 1px solid #F4F6F7;
        font-size: 13px;
        text-align: left;
    }

    .tab_right_top {
        display: flex;
        align-items: center;
        color: #51595C;
    }

    .tab_right_top i {
        background-color: #F2F2F2;
        border-radius: 5px;
        color: white;
        padding: 12px 8px;
        cursor: pointer;
    }

    .tab_right_top>* {
        margin-left: 9px;
    }

    #adminPaymentHistoryMonthly .filter-month {
        /*background: url(/images/ic-calendar_new.png) left 9px center no-repeat;*/
        appearance: none;
        -webkit-appearance: none;
        /* Support for Google Chrome và Safari. */
        -moz-appearance: none;
        /* Support for firefox. */
        -ms-appearance: none;
        /* Support for Internet Explorer. */
        -o-appearance: none;
        /* Support for Opera. */
        position: relative;
    }

    #adminPaymentHistoryMonthly .filter-month:hover {
        background-color: #F8F8F8;
    }

    /*input[type="date"]::-webkit-inner-spin-button,*/
    /*input[type="date"]::-webkit-calendar-picker-indicator,*/
    input[type="month"]::-webkit-inner-spin-button,
    input[type="month"]::-webkit-calendar-picker-indicator {
        /*display: none;*/
        /*visibility: hidden;*/
        /*min-width: 0;*/
        /*max-width: 0;*/
        /*padding: 0;*/
        /*border: 0;*/
        background: none;
        width: 100%;
        position: absolute;
        /*-webkit-appearance: none;*/
    }

    [v-cloak] {
        display: none !important;
    }

    /*#adminPaymentHistoryMonthly .pagination > .active > a{*/
    /*    background-color:#08BF5A  ;*/
    /*    color: white !important;*/
    /*}*/
    a {
        font-weight: bold;
        text-decoration: underline;
        color: #5799DB;
    }

    .pagination {
        vertical-align: middle;
        margin-bottom: 26px;
    }


    .pagination>li.active>a {
        background-color: white !important;
        color: #08BF5A !important;
        border-color: white !important;
        font-weight: bold;
    }

    .pagination>li.active>a:hover {
        background-color: white !important;
        color: #08BF5A !important;
        border-color: white !important;
    }
</style>
@endpush
@section('content')
<article class="sub" id="adminPaymentHistoryMonthly" v-cloak>
    <section class="masteredit">
        <h2 class="font-weight-bold" style="font-size: 20px; padding: 0">解約一覧</h2>
        <div class="row">
            <div class="col-sm-12" style="display: flex; align-items: center; justify-content: space-between">
                <div style="display: flex; width: 100% ">
                    <div class="tab_right_top">
                        <i class="fas fa-chevron-left" style="margin-left: 0; height: 40px;" v-on:click="preMonth()"></i>
                        {{-- <label>@{{ filter_year +'年' }}</label>--}}
                        <input type="month" id="filter_month" v-model="filter_month" class="form-control text-center filter-month" v-on:change="filterMonth" style="width: 145px; border: 1px solid #E8E8E8; height: 40px">
                        <i class="fas fa-chevron-right" style="height: 40px;" v-on:click="nextMonth()"></i>

                    </div>
                    <input type="text" class="form-control" v-model="keyword" style="width: 300px; border: 1px solid #E8E8E8; height: 40px; margin-left: 20px; margin-right: 10px; margin-top: 3px;">
                    <button type="button" class="btn btn-sns-line btn-sns-line-dark" v-on:click="searchKeyWord" style="background-color: #96ADB2; height: 40px; margin-top: 3px;">検索</button>
                    <a :href="'/admin/comment-reason-cancel-contract?filter_time='+filter_month" type="button" class="btn btn-sns-line btn-sns-line-dark" style="background-color: #7D9195; width: 150px; height: 40px; margin-left: 20px ; line-height: 30px; text-decoration: none; margin-top: 3px;"> 解約理由</a>
                </div>

                <div style="display: flex;  align-items: flex-end;    font-size: 15px;">
                    <span style="margin-right: 16px;word-break: keep-all;">表示件数</span>
                    <span style="word-break: keep-all; margin-right: 10px;    font-size: 18px;">@{{ pagination.total }}件</span>
                    <select class="form-control my_class input_border" style="width: 91px;    border: 1px solid rgb(232, 232, 232);    height: 40px;font-size: 15px" v-model="per_page" v-on:change="changePerPage(per_page)">
                        <option value="100">100</option>
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                        <option value="2000">2000</option>
                    </select>
                    <div style="margin-left: 3px;word-break: keep-all;">件表示</div>
                </div>

            </div>

        </div>

        <div class="table-responsive table-responsive-sm">
            <table class="table">
                <tbody>
                    <tr>
                        <th style="border-radius: 4px 0 0 4px;padding-left: 16px;min-width: 111px">解約日時</th>
                        <th>LOA名称</th>
                        <th>ユーザー名</th>
                        <th>決済時アドレス</th>
                        <th style="text-align: right; padding-right: 15px ;">金額</th>
                        <th style="min-width: 78px">決済方法</th>
                        <th style="border-radius: 0 4px 4px 0;min-width: 80px; text-align: center">継続回数</th>
                    </tr>
                    <tr v-if="items.length > 0" v-for="(item, index) in items">
                        <td style="padding-left: 16px;">
                            <span>@{{ formatDate(item.time_cancel) }}</span>
                        </td>
                        <td>
                            <span v-if="item.view_name">@{{ item.view_name}}</span>
                            <span v-else-if="item.contract_type == 'enterprise'">EP@{{ item.number_slot}}</span>
                            <span v-else>-</span>
                        </td>
                        <td>
                            <a :href="'manage-payment/' +item.id + '?form_p=3'"> @{{ item.username }}</a>
                            <span v-if="item.username == 'NULL'">-</span>
                        </td>
                        <td>
                            <span> @{{ item.email }}</span>
                            <span v-if="item.email == 'NULL'">-</span>
                        </td>

                        <td style="text-align: right">
                            <span>¥@{{ formatPrice(item.amount_payment ) }}</span>

                        </td>
                        <td>
                            <span v-if="item.payment_method == 1 ">カード</span>
                            <span v-else>銀行振込</span>
                        </td>
                        <td style="text-align: center">
                            <span>@{{item.totalBill}}</span>
                        </td>
                    </tr>
                    <tr v-show="items.length == 0">
                        <td colspan="8"> データがありません。</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <ul class="pagination" style="margin-bottom: 10px;    margin-top: 0;" v-if="pagination.total > pagination.per_page">
            <li v-if="pagination.current_page > 1" class="btn_prev">
                <a href="#" aria-label="Previous" style="    padding: 4px 9px;" @click.prevent="changePage(pagination.current_page - 1)">
                    <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-left"></i></span>
                </a>
            </li>
            <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
                <a href="#" @click.prevent="changePage(page)" style="border: unset">@{{ page }}</a>
            </li>
            <li v-if="pagination.current_page < pagination.last_page" class="btn_next">
                <a href="#" aria-label="Next" style="    padding: 4px 9px;" @click.prevent="changePage(pagination.current_page + 1)">
                    <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-right"></i></span>
                </a>
            </li>
            </li>
        </ul>
    </section>
</article>
@endsection
@push('script')
<script>
    var timeGet = "{{isset($_GET['filter_time']) ? $_GET['filter_time'] : ''}}";
    console.log('timeGet', timeGet)
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="/js/vue-paginate.js"></script>
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<!-- <script type="application/javascript"
            src="/js/admin/admin_payment_history_monthly.js?v={{config("sns-line.version")}}"></script> -->
<script type="application/javascript" src="/js/admin/list_cancel_contract.js?v={{config("sns-line.version")}}"></script>

<script>
    $(document).ready(function() {
        var datePickerObj = {
            format: 'yyyy-mm-dd',
            todayHighlight: true,
            autoclose: true,
            setDate: new Date()
        };

        $('.datepicker').datepicker(datePickerObj);
    });
</script>
@endpush