@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;
        }
        #adminPaymentHistory .table{
            background-color: unset;
        }
        #adminPaymentHistory .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;
        }


        #adminPaymentHistory .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;
        }

        #adminPaymentHistory .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;
        }
        #adminPaymentHistory .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;
        }
        /*#adminPaymentHistory .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;
        }

        .ellipsis {
            display: inline-block;    /* hoặc block */
            max-width: 300px;         /* giới hạn chiều rộng */
            white-space: nowrap;      /* không xuống dòng */
            overflow: hidden;         /* ẩn phần dư */
            text-overflow: ellipsis;  /* hiện dấu … */
            vertical-align: middle;   /* căn đẹp khi có icon */
        }
    </style>
@endpush
@section('content')
    <article class="sub" id="adminPaymentHistory" 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;" v-on:click="preMonth()"></i>
                            {{--                        <label>@{{ filter_year +'年' }}</label>--}}
                            <input type="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" 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">
                        <button type="button" class="btn btn-sns-line btn-sns-line-dark" v-on:click="searchKeyWord" style="background-color: #96ADB2">検索</button>
                    </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: 20px;    font-size: 18px;">  ¥@{{ formatPrice(totalAmount) }}</span>

                        <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="10">10</option>--}}
                            <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>課金ID</th>
                    <th>ユーザー名</th>
                    <th>決済時アドレス</th>
                    <th>登録URL</th>
                    <th style="min-width: 97px">料金プラン</th>

                    <th style="text-align: right">決済額</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 v-if="item.parent_month == 0 ">@{{ formatDate(item.payment_date) }}</span>--}}
{{--                        <span v-else>@{{ formatDate(item.created_at) }}</span>--}}
                        <span>@{{ formatDate(item.datetime_payment) }}</span>
                    </td>
                    <td>
                        <span v-if="item.univa_charge_id">@{{ item.univa_charge_id}}</span>
                        <span v-else-if="item.stripe_charge_id">@{{ item.stripe_charge_id}}</span>
                        <span v-else>-</span>
                    </td>
                    <td>
                       <a :href="'manage-payment/' +item.user_id +'?form_p=2'"> @{{ item.username }}</a>
                    </td>
                    <td>
                        @{{ item.email }}
                    </td>
                    <td>
                        <a class="ellipsis" :href="item.path_intro">@{{ item.path_intro }}</a>
                    </td>
{{--                    <td>@{{ item.reason}}</td>--}}
                    <td>
                        <div v-if="item.contract_type == 'free'">フリー</div>
                        <span v-else-if="item.status_refund == 1 && item.amount < 0" >
                                返金
                        </span>
                        <div v-else>@{{ reasonBillGetPlan(item.reason, item.number_slot_bill ) }}</div>
                    </td>
                    <td style="text-align: right">
{{--                        ¥@{{ formatPrice(item.amount)}}--}}
                        <span v-if="item.amount <0 ">-¥@{{ formatPrice(item.amount_refund ) }}</span>
                        <span v-else>¥@{{ formatPrice(item.amount ) }}</span>
                    </td>
                    <td>
                        <span v-if="item.type_bill == 1 || item.type_bill == 2">カード</span>
                        <span v-else>銀行振込</span>
                    </td>
                    <td style="text-align: center">@{{ item.totalBill }}</td>
                </tr>
                <tr v-show="items.length == 0">
                    <td colspan="8"> データがありません。</td>
                </tr>
{{--                <tr>--}}
{{--                    <th colspan="6">合計</th>--}}
{{--                    <th>{{ number_format($totalAmount) }}</th>--}}
{{--                    <th>{{ number_format($totalRate, 2) }}</th>--}}
{{--                </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 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.js?v={{config("sns-line.version")}}"></script>

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

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