@extends('layout.admin_v2.main')
@push('css')
    <link rel="stylesheet" href="{{asset('css/affiliate_info/affiliate_info.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"
          integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
    <style>
        body > * {
            font-weight: bold;
            color: #51595C;
            font-size: 14px;
        }

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

        .btn:hover {
            opacity: 0.7;
        }

        a {
            text-decoration: underline;
            font-weight: bold;
            cursor: pointer;
            color: #5799DB;
        }

        input {
            height: 34px;
        }

        td {
            color: #51595C;
        }
        #tbl-aff, #tbl-aff.table > thead{
            background-color: unset;
        }

        #tbl-aff.table > thead > tr > th {
            border: none !important;
            background-color: #F2F2F2 !important;
            color: #51595c !important;
            padding: 11px 7px;
            font-size: 14px;
        }

        #tbl-aff.table > tbody > tr > td {
            border: none;
            border-bottom: 1px solid #F2F2F2;
            font-size: 13px;
            font-weight: 600;
        }

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

        .active_btn {
            background-color: #7D9195;
            color: white !important;
            border: 2px solid #7D9195;
            width: 140px;
        }

        .noactive_btn {
            background-color: #FFFFFF;
            border: 2px solid #7D9195;
            color: #7D9195 !important;
            width: 140px;
        }

        .btn-success:focus, .btn-success:active, .btn-success:hover {
            color: #fff;
            background-color: #08BF5A;
            border-color: #08BF5A;
        }

        .btn-success:focus {
            opacity: 1 !important;
        }

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

        #manage_payment_admin .filter-date {
            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;
        }

        #manage_payment_admin .filter-date:hover {
            background-color: #F8F8F8;
        }
        #manage_payment_admin .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;
        }
        #manage_payment_admin .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;*/
        }
        .md-row {
            display: flex;
            align-items: center;
            margin-top: 15px;
        }
        .md-row input{
            border: 1px solid #D3D3D3;
            height: 37px;
        }
        #modalSettingInfoAdmin .text-danger{
            margin-left: 49px;
            color: #F44336;
        }
    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="masteredit" id="manage_payment_admin" v-cloak>
            <h2 style="font-weight: bold;padding-left: 0; font-size: 20px">アフィリエイター管理</h2>
            <div class="row">
                <div class="col-sm-12" style="display: flex; align-items: center; justify-content: space-between">
                    <div style="display: flex; align-items: center; ">
                        <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>
                        <button type="button" class="btn btn-sns-line btn-sns-line-light  "
                                v-on:click="showBillData"
                                v-bind:class="(action == 'bill') ? 'active_btn ' : 'noactive_btn '"
                                style="margin-left: 30px;margin-right: 11px;">報酬発生のみ
                        </button>
                        <button type="button" class="btn btn-sns-line btn-sns-line-light  "
                                v-on:click="showAllData"
                                v-bind:class="(action == 'all') ? 'active_btn ' : 'noactive_btn ' "
                        >一覧
                        </button>
                        <button type="button" class="btn btn-sns-line btn-sns-line-success"
                                :disabled="items.length == 0"
                                v-on:click="exportCsv"
                                style="background-color: #F4FBF2; border: 2px solid #08BF5A; color: #08BF5A !important; margin-left: 15px ">
                            CSV <i style="margin-left: 5px"
                                    class="fas fa-arrow-alt-to-bottom"></i></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: 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="200">200</option>
                            <option value="500">500</option>
                        </select>
                        <div style="margin-left: 3px;word-break: keep-all;">件表示</div>
                    </div>

                </div>

            </div>
            <div class="content-page" style="  overflow: auto;">
                <table class="table" id="tbl-aff">
                   <thead>
                   <tr>
                       <th style="border-radius: 4px 0 0 4px;">No.</th>
                       <th style="text-align: left;    min-width: 80px;">ユーザー名 </th>
{{--                       <th  style="text-align: left">アドレス</th>--}}
                       <th style=" min-width: 67px;">銀行番号 </th>
                       <th style=" min-width: 67px; text-align: left">銀行名 </th>
                       <th style=" min-width: 67px;">支店番号</th>
                       <th style=" min-width: 67px; text-align: left">支店名 </th>
                       <th style=" min-width: 67px;">口座番号</th>
                       <th style=" min-width: 67px;">受取人名 </th>
                       <th style=" min-width: 67px;">紹介件数</th>
                       <th style="text-align: right;min-width: 67px;">報酬金額 </th>
{{--                       <th style=" min-width: 67px;">報酬比率</th>--}}
                       <th style=" min-width: 67px;">登録番号</th>
                       <th style="border-radius: 0 4px 4px 0;min-width: 55px;"></th>

                       {{--                        <th>預金種目 <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('account_type')"></th>--}}


                   </tr>
                   </thead>

                    <tbody>
                    <tr v-if="items.length > 0" v-for="(item,index) in items">
                        <td>@{{ index+1 }}</td>
                        <td  style="text-align: left"><a :href="'manage-payment/' +item.user_id">@{{item.name}}</a></td>
                        <td>@{{item.admin_bank_number}}</td>
                        <td style="text-align: left">@{{item.bank_name}}</td>
                        <td>@{{item.branch_number}}</td>
                        <td style="text-align: left">@{{item.branch_name}}</td>
                        <td>@{{item.account_number}}</td>
                        <td>@{{item.account_holder_name}}</td>
                        <td>@{{item.count_user_intro}}</td>
                        <td  style="text-align: center;">
                            <div class="font-weight-bold text-right" style="">
                                <span v-if="filter_month">¥ @{{formatCurrency(item.total_amount_month)}}</span>
                                <span v-else> ¥ @{{formatCurrency(item.total_amount_all )}}</span>
                            </div>
                        </td>

                        <td>
                            <span v-if="item.invoice_number">◯</span>
                            <span v-else>-</span>
                        </td>
                        <td>
                            <a
                                    style="cursor: pointer; font-weight: 700"
                               data-toggle='modal'
                               data-target='#modalSettingInfoAdmin'
                               v-on:click="showAdminChangeInfoBank(item)">編集</a>
                        </td>
                    </tr>
                    <tr v-show="items.length == 0">
                        <td colspan="14"> データがありません。</td>
                    </tr>
                    </tbody>
                </table>
                <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>
            </div>
            <div class="modal fade" id="modalSettingInfoAdmin"
                 tabindex="-1" role="dialog"
                 aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header" style="border-bottom: none">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <i class="fas fa-times" style="color: #898F90 !important;"></i></button>
                            <h2 class="text-center" style="font-weight: bold; font-size: 25px; margin-bottom: 0"> 振込情報編集</h2>

                        </div>
                        <div class="modal-body">
                            <div class="row md-row" >
                                <div class="col-sm-2 col-sm-offset-1 title-left">
                                    銀行番号
                                </div>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" v-model="bankAdmin.admin_bank_number">
                                </div>
                            </div>
                            <div class="text-danger pt-1" v-show="errors.admin_bank_number">@{{ errors.admin_bank_number }}</div>
                            <div class="row md-row" >
                                <div class="col-sm-2 col-sm-offset-1 title-left" >
                                    支店番号
                                </div>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" v-model="bankAdmin.branch_number">
                                </div>
                            </div>
                            <div class="text-danger pt-1" v-show="errors.branch_number">@{{ errors.branch_number }}</div>

                            <div class="row md-row" >
                                <div class="col-sm-2 col-sm-offset-1 title-left" >
                                    口座番号
                                </div>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" v-model="bankAdmin.account_number">
                                </div>
                            </div>
                            <div class="text-danger pt-1" v-show="errors.account_number">@{{ errors.account_number }}</div>

                            <div class="row md-row" >
                                <div class="col-sm-2 col-sm-offset-1 title-left" >
                                    受取人名
                                </div>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" v-model="bankAdmin.account_holder_name">
                                </div>
                            </div>
                            <div class="text-danger pt-1" v-show="errors.account_holder_name">@{{ errors.account_holder_name }}</div>
                            <div class="row md-row" >
                                <div class="col-sm-2 col-sm-offset-1 title-left" >
                                    報酬比率
                                </div>
                                <div class="col-sm-8">
                                    <div style="display: flex;     align-items: flex-end;">
                                        <input class="form-control" type="number" style="width: 80px" v-model="bankAdmin.commission_rate">
                                        <span style="font-weight: bold; margin-left: 5px">%</span>
                                    </div>

                                </div>
                            </div>
                            <div class="text-danger pt-1" v-show="errors.commission_rate">@{{ errors.commission_rate }}</div>
                        </div>

                        <div class="text-center">
                            <button type="button" class="btn btn-sns-line btn-sns-line-success"
                                    v-on:click="saveChangeInfoBank"
                                    style=" width: 114px;margin-bottom: 30px;">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>

@endsection
@push('script')
    {{--    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></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 src="/js/validate/validate.js?v={{config('sns-line.version')}}"></script>
    <script type="application/javascript"
            src="/js/admin/manage-payment_v2.js?v={{config("sns-line.version")}}"></script>
    <script>
        $(function () {
            // $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
            // $('.filter-month').datepicker({
            //     format         : 'yyyy/mm',
            //     todayHighlight : true,
            //     autoclose      : true,
            //     // theme:'dark',
            // });
        });
    </script>
    {{--    <script>--}}
    {{--        $(document).ready(function () {--}}
    {{--            $.datepicker.setDefaults($.datepicker.regional["ja"]);--}}
    {{--            $('.datepicker').datepicker({--}}
    {{--                format: 'yyyy-mm-dd',--}}
    {{--                todayHighlight: true,--}}
    {{--                autoclose: true,--}}
    {{--            });--}}
    {{--        });--}}

    {{--    </script>--}}
    <script>
        $(document).ready(function () {
            $(".total-user-intro .change_status").click(function () {
                let arrData = [];
                let searchParams = new URLSearchParams(window.location.search);
                let filter_month = searchParams.get('filter_month')
                $('input.change_status_payment:checked').each(function () {
                    arrData.push($(this).val());
                });
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '/admin/change-status-payment',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: arrData,
                        filter_month: filter_month
                    },
                    beforeSend: function () {
                        $.LoadingOverlay('show');
                    },
                    success: function (data) {
                        $.LoadingOverlay('hide')
                        location.reload();
                    }
                });
            })
            $(".total-user-intro .un_change_status").click(function () {
                let arrData = [];
                let searchParams = new URLSearchParams(window.location.search);
                let filter_month = searchParams.get('filter_month')
                $('input.change_status_payment:checked').each(function () {
                    arrData.push($(this).val());
                });
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '/admin/unchange-status-payment',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: arrData,
                        filter_month: filter_month
                    },
                    beforeSend: function () {
                        $.LoadingOverlay('show');
                    },
                    success: function (data) {
                        $.LoadingOverlay('hide')
                        location.reload();
                    }
                });
            })
        })
    </script>
@endpush