@extends('layout.admin.main')
@section('title', 'エルメ紹介 一般（一覧）')
@push('css')

    <link rel="stylesheet" href="{{asset('css/affiliate_info/affiliate_info.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"
          integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">

    <style>
        body {
            color: #222222;
            font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif, "Apple Color Emoji", emojisymbols, "Glyphicons Halflings";
        }
        label:after{
            content: unset;
        }
        #management_aff .filter-month {
            /*background: url(/images/calendar.png) right 5px 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;
        }
        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;*/
        }
        .tab_right_top{
            display: flex;
            align-items: center;
            color: #51595C;
        }
        .tab_right_top .arrow{
            background-color: #F2F2F2;
            border-radius: 2px;
            color: white;
            padding: 8px 7px;
            cursor: pointer;
            font-size: 23px;
            font-weight: 200;
        }
        .tab_right_top > *{
            margin-left: 9px;
        }
        /* The slider */
        .c-switch {
            position: relative;
            display: inline-block;
            width: 54px;
            height: 24px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .c-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .c-switch input.active-background {
            background-color: #08BF5A; 
        }

        .c-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #CDD6DD;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .c-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 6px;
            bottom: 3px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }
        .c-slider:after {
            position: absolute;
            content: "";
            right: 11px;
            bottom: 6px;
            font-size: 13px;
            color: white;
        }

        #management_aff input:checked + .c-slider {
            background-color: #96ADB2;
        }

        /*input:focus + .slider {*/
        /*    box-shadow: 0 0 1px #2196F3;*/
        /*}*/

        #management_aff input:checked + .c-slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        #management_aff  input:checked + .c-slider:after {
            /*content: "ON";*/
            left: -15px;
            bottom: 6px;
        }
        /* Rounded sliders */
        .c-slider.round {
            border-radius: 34px;
        }

        .c-slider.active {
            background-color: #08BF5A;
        }

        .c-slider.round:before {
            border-radius: 50%;
        }
        #management_aff .table>tbody>tr>th{
            border: none !important;
            background-color: #F8F8F8 !important;
            padding-top: 12px;
            text-align: left;
            font-size: 14px;
            font-weight: 600;
            color: #222222;
        }
        .table>tbody>tr>td{
            border: none ;
            border-bottom: 1px solid #F2F2F2;
            text-align: left;
            font-size: 13px;
        }
        .pagination li.disabled {
            opacity: 0.1; 
        }
        .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
            background-color: white;
        }
        [v-cloak] {
            display: none;
        }
        #modalApplyTermAff .box_term_aff::-webkit-scrollbar {
            width: 8px;
        }

        #modalApplyTermAff .box_term_aff::-webkit-scrollbar-track{
            /*box-shadow: inset 0 0 5px grey;*/
            border-radius: 10px;
        }
        #modalApplyTermAff .box_term_aff::-webkit-scrollbar-thumb{
            background: #E0E0E0;
            border-radius: 10px;
        }
        .box_term_aff{
            border: 1px solid #D0D0D0;
            border-radius: 5px;
            padding: 15px;
            max-height: 452px;
            overflow: auto;
            font-size: 12px;
            margin: 10px 43px;
            font-weight: 300;
            color: #222222;
        }
        .tt_term{
            font-weight: bold;
        }

        .intro-terms {
            overflow: auto; 
            max-height: 500px; 
            border-radius: 5px; 
            border: 1px solid #D0D0D0;
        }

        .intro-terms::-webkit-scrollbar {
            width: 10px;
        }

        .intro-terms::-webkit-scrollbar-track{
            border-radius:10px
        }

        .intro-terms::-webkit-scrollbar-thumb{
            background: #E0E0E0;
            border-radius: 10px;
        }

        .introterm_frame {
            width:100%; 
            height: 12510px;
            
        }

        .container-table {
            margin-top: 20px;
        }

        .link-aff {
            width: 55%;
        }

        .table {
            margin-top: 25px;
        }

        .filter-right {
            display: flex;
        }

        .f14-w300{
            font-size: 14px;
            font-weight: 300;
        }
        
        .f16-w600{
            font-size: 16px;
            font-weight: 600;
        }

        .f16-w300{
            font-size: 16px;
            font-weight: 300;
        }

        .btn-sns-line-custom {
            border: 1px solid #08BF5A;
            border-radius: 3px;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            color: #08BF5A !important;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            border-top: transparent;
            border-right: transparent;
            border-left: transparent;
            border-bottom: 2px solid #08BF5A;
            color: #08BF5A !important;
            font-weight: 600;
        }

        .pagination-container {
            display: flex;
            float: right;
        }

        .pagination > li > a {
            border: 0;
        }
        #management_aff .nav-tabs >li >a{
            color: #888888 !important;
            cursor: pointer;
        }
        #management_aff .nav-tabs > li.active a {
            color: #08BF5A !important;
            cursor: pointer;
        }

        @media (max-width: 1280px) {
            .link-aff {
                max-width: 450px;
                max-height: 134px;
            }
            
            .description , .container-table{
                max-width: 800px;
            }

            .filter-month {
                max-width: 120px;
            }

            .tab_right_top > *{
                margin-left: 5px;
            }
        }
    </style>
@endpush
@section('content')
<div id="app">
    <div class="management_aff" id="management_aff" v-cloak>
        <div class="row">
            <div class="col-md-10">
                <div class="container-table" style="display: flex; align-items: center; justify-content: space-between; margin-top: 15px">
                    <h2 style="font-size: 20px;  font-weight: 600; color: #222222">エルメ紹介プログラム</h2>
                    <a href="/admin/register-info-aff-v2" class="btn btn-sns-line btn-sns-line-custom f14-w300"
                       style="padding: 8px 13px 6px 13px; color: #08BF5A; !important">紹介者情報編集  <i style="margin-left: 5px; font-size: 18px;" class="fal fa-edit"></i></a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10">
                <div class="link-aff" style="background-color: #F8F8F8; border-radius: 5px; padding: 20px; margin-top: 20px">
                    <div style="display: flex; justify-content: space-between; font-size: 15px; flex-direction: column;">
                        <p class="f16-w600">紹介用エルメ新規登録URL</p>
                        <p class="f14-w300">こちらのリンクを紹介したい方に送信してください。</p>
                    </div>
                    <div  style="position: relative; width: 100%; margin-top: 12px" >
                        <input type="text" id="input-register-user" value="{{env('LINK_AFF')}}?ucode={{$hashUserId}}"
                               placeholder="紹介者情報登録後に紹介用URLが表示されます"
                               class="form-control input-register-user" readonly style="box-shadow: none;border: 2px solid #E8E8E8; background-color: white; height: 40px; font-weight: initial">
                        <i class="fal fa-copy" v-on:click="copyUrlEvent" style="top: 9px; cursor: pointer;
                            position: absolute;
                            right: 13px;
                            font-size: 22px;
                            color: #888888;"> 
                        </i>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-10">
                <div class="description" style="background-color: #F8F8F8; border-radius: 5px; padding: 20px; margin-top: 20px">
                    <div class="text-left f16-w600">ご確認事項
                        <a target="_blank" href="https://lme.jp/referral_system_terms_general/" style="color: #888888; text-decoration: underline; margin-left: 20px; cursor: pointer; font-size: 12px; font-weight: 500;">利用規約</a>
                    </div>
                    <div class="f14-w300" style="margin-bottom: 15px; margin-top: 7px;">
                    ・紹介用URLからアカウントが作成された場合、即時以下のリストに反映されます。 <br>
                    　反映されていない場合は、紹介者URLに紹介したユーザーが紐づかなかった形となります。
                    </div>
                    <div class="f14-w300" style=" font-weight: initial">
                        <p style="color: #F44336">・一般的なアフィリエイト同様、キャッシュ等が原因で紹介者URLに紹介したユーザーが紐付かなかった場合でも <br>
                        　後から紐付けするなどの対応はできかねますのでご注意ください。</p><br>
                        ・インボイス制度（登録番号）の登録がない場合は、紹介報酬額から１０％を差し引いた金額（なお、負担軽減措置の 　<br>
                        適用期間中は適用される特例割合に応じて差し引く割合を２％又は５％に変更します。）をお支払いします。<br> <br>
                        ・報酬は月末締め、翌月15日払いとなります。
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-10">
                <div class="tab-container" style="margin-top: 20px;">
                    <ul class="nav nav-tabs">
                        <li class="nav-item" :class="{ active: activeTab === 'tab1' }">
                            <a class="nav-link f16-w300" style="font-size: 16px !important" href="#" @click.prevent="changeTab('tab1')">エルメアカウント作成日</a>
                        </li>
                        <li class="nav-item" :class="{ active: activeTab === 'tab2' }">
                            <a class="nav-link f16-w300" style="font-size: 16px !important" href="#" @click.prevent="changeTab('tab2')">報酬発生（LINE公式アカウント接続）日</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="modal fade" id="modal_introterm">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="padding: 30px 50px; width: 900px;margin-top: 100px">
                    <div class="text-center" style="font-size: 18px;font-weight: 600; color: #222222; padding-bottom: 20px;">
                        L Message紹介制度 利用規約
                    </div>
                    <div class="test-center intro-terms" style="">
                        <iframe src="https://lme.jp/referral_system_terms_general/" class="introterm_frame" scrolling="no"></iframe>
                    </div>
                    <div class="text-center" style="padding-top: 20px;">
                        <button class="btn btn-sns-line-lg btn-sns btn-sns-line-success" data-dismiss="modal" style="width: 180px; font-weight: bold; font-size: 18px;">同意する</button>    
                    </div>
                </div>
            </div>
        </div>



        {{--        <div class="link-register row" style="margin-top: 10px">--}}
        {{--            <span class="col-md-2" style="font-weight: 500;font-size: 18px">Link javascript</span>--}}
        {{--            <div class="col-md-10" style="float: left">--}}
        {{--                <input type="text" id="link-javascript"--}}
        {{--                       value="<script src='{{asset('js/affiliate_info/get_ucode.js')}}'></script>"--}}
        {{--                       class="input-register-user" readonly>--}}
        {{--                <button class="btn btn-warning" onclick="copyJs()">コピー</button>--}}
        {{--            </div>--}}
        {{--        </div>--}}
        
        <div class="row" style="margin: 0;" v-if="activeTab === 'tab1'">
            <div class="col-md-10" style="padding: 0;">
                <div class="container-table">
                    <div class="aff-info " style="display: flex; align-items: center;justify-content: space-between;">
                        <!-- <div class="total-user-intro " style="margin-top: 20px; font-size: 15px">
                            報酬額 @{{formatNumber(totalMoneyForAff)}}円
                        </div> -->

                        <div class="filter-left">
                            <div class="tab_right_top">
                                <i class="fas fa-chevron-left arrow" style="margin-left: 0;" v-on:click="preMonth()"></i>
                                <input type="month" v-model="filter_month" class="form-control text-center filter-month"
                                        v-on:change="filterMonth"
                                        style="cursor:pointer;width: 200px; border: 1px solid #E8E8E8; height: 40px; font-size: 14px; border-radius: 3px; cursor: pointer; color: #222222">
                                <i class="fas fa-chevron-right arrow" v-on:click="nextMonth()"></i>
                                <a href="" class="btn btn-sns-line f14-w300" style="color: #222222 !important ; border: 1px solid #DDDDDD; border-radius: 4px; height: 40px; display: flex; align-items: center;" @click.prevent="getFullPeriodData">全期間</a>
                                <a href="" class="btn btn-sns-line f14-w300" style="color: #222222 !important ; border: 1px solid #DDDDDD; border-radius: 4px; height: 40px; display: flex; align-items: center; gap: 10px;" @click.prevent="exportCSV">
                                    CSV
                                <i class="far fa-arrow-to-bottom" aria-hidden="true"></i>
                                </a>

                            </div>
                        </div>
                        <div class="filter-right" style="align-items: center">
                            <div style="font-size: 14px">
                                報酬発生者のみ表示
                            </div>
                            <label class="c-switch">
                                <input value="1"
                                        v-model="is_bill"
                                        v-on:change="changeShow(is_bill)"
                                        type="checkbox"
                                        >
                                <span class="c-slider round" :class="{ 'active': is_bill === 0 }"></span>
                            </label>
                        </div>
                    </div>
                    <table class="table ">
                        <tbody>
                        <tr class="">
                            <th style="width:240px;border-radius: 4px 0px 0px 4px;padding-left: 15px;">紹介したユーザー名</th>
                            <th @click="sort('user_created_at')" style="cursor: pointer;">
                                アカウント作成日時
                                <i class="fas fa-sort"></i>
{{--                                <i class="fa" :class="getSortClass('user_created_at')" aria-hidden="true"></i>--}}
                            </th>
                            <th @click="sort('bots_created_at')" style="text-align: left; cursor: pointer;">
                                LOA接続日時
                                <i class="fas fa-sort"></i>
{{--                                <i class="fa" :class="getSortClass('bots_created_at')" aria-hidden="true"></i>--}}
                            </th>
                            <th style="text-align: left; border-right: 1px solid #ccc !important;">LOA名</th>
                            <th style="border-radius: 0px 4px 4px 0; text-align: center;    width: 120px;">報酬額</th>
                            <!-- <th>ステータス</th> -->
                        </tr>
                        <tr v-if="items && items.length > 0" v-for="(item, index) in items">
                            <td class="td-cell-payment-detail" style="padding-left: 15px; font-size: 14px;"> @{{ item.user_username ? item.user_username : 'このアカウントは削除されました' }}</td>
                            <td class="td-cell-payment-detail" style="padding-left: 15px; font-size: 14px;">
                               <!-- <span v-if="item.remain_day >= 365 && item.parent_month == 0 ">@{{ formatDate(item.payment_date) }}</span> -->
                               <span>@{{ item.user_created_at ? formatDateNew(item.user_created_at) : '-' }}</span>
                            </td>
                            <td class="td-cell-payment-detail" style="font-size: 14px;">
                                <span> @{{ item.bots_created_at ? formatDateNew(item.bots_created_at) : '-' }} </span>
                            </td>
                            <td style="text-align: left; font-size: 14px; border-right: 1px solid #ccc !important;">@{{ item.bots_view_name ? item.bots_view_name : '-' }}</td>
                            <td class="td-cell-payment-detail" style="text-align: center; font-size: 14px;">
{{--                                <span v-if="item.plan_type == 2 || item.contract_type == 'free'">報酬未発生</span>--}}
                                <span v-if="item.amount_fee <0 ">-@{{ formatNumber(-item.amount_fee ) }} 円</span>
                                <span v-else-if="item.type_bill == -1 " style="font-size: 14px; font-weight: 300; color: #222222">報酬未発生</span>
                                <span v-else>@{{ formatNumber(item.amount_fee ) }} 円</span>
                            </td>
    
                        </tr>
                        <tr v-if="items.length == 0">
                            <td style="text-align: center" colspan="6">データがありません。</td>
                        </tr>
    
                        </tbody>
                    </table>
                    <div class="pagination-container">
                        <p class="f14-w300" style="margin-top: 4px; margin-right: 30px;">@{{ startRecord }} - @{{ endRecord }} / @{{ pagination.total }}行</p> 
                        <ul class="pagination" style="margin-bottom: 10px; margin-top: 0;">
                            <li class="btn_prev" :class="{ disabled: pagination.current_page === 1 }">
                                <a href="#" aria-label="Previous" style="padding: 4px 9px;" @click.prevent="changePage(pagination.current_page - 1)">
                                    <span aria-hidden="true" style="color:#2B2F36">
                                        <i class="fas fa-chevron-left"></i>
                                    </span>
                                </a>
                            </li>
                            <li class="btn_next" :class="{ disabled: pagination.current_page === pagination.last_page  || pagination.total === 0 } ">
                                <a href="#" aria-label="Next" style="padding: 4px 9px;" @click.prevent="changePage(pagination.current_page + 1)">
                                    <span aria-hidden="true" style="color:#2B2F36">
                                    <i class="fas fa-chevron-right"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="modal fade" id="modalApplyTermAff"
                         tabindex="-1" role="dialog"
                         data-backdrop="static" data-keyboard="false"
                         aria-labelledby="modalApplyTermAff">
                        <div class="modal-dialog modal-lg" role="document" style="margin-top: 100px">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <iframe id="myIframe" src="https://lme.jp/referral_system_terms_general/" style="height:65vh;width:100%;">

                                    </iframe>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-sns-line btn-sns-line-success "
                                            v-on:click="saveApplyTermAff"
                                            style="background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #08BF5A;color: #08BF5A !important; font-weight: 300; font-size:16px ;
border-radius: 5px; outline: none; width: 167px;margin: 20px;    height: 38px;">
                                        同意する
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin: 0;" v-if="activeTab === 'tab2'">
            <div class="col-md-10" style="padding: 0;">
                <div class="container-table">
                    <div class="aff-info " style="display: flex; align-items: center;justify-content: space-between;">
                            <!-- <div class="total-user-intro " style="margin-top: 20px; font-size: 15px">
                                報酬額 @{{formatNumber(totalMoneyForAff)}}円
                            </div> -->

                        <div class="filter-left">
                            <div class="tab_right_top">
                                <i class="fas fa-chevron-left arrow" style="margin-left: 0;" v-on:click="preMonth()"></i>
                                <input type="month" v-model="filter_month" class="form-control text-center filter-month"
                                        v-on:change="filterMonth"
                                        style="cursor:pointer;width: 200px; border: 1px solid #E8E8E8; height: 40px; font-size: 14px; border-radius: 3px; cursor: pointer; color: #222222">
                                <i class="fas fa-chevron-right arrow" v-on:click="nextMonth()"></i>
                                <a href="" class="btn btn-sns-line f14-w300" style="color: #222222 !important ; border: 1px solid #DDDDDD; border-radius: 4px; height: 40px; display: flex; align-items: center;" @click.prevent="getFullPeriodData">全期間</a>
                                <a href="" class="btn btn-sns-line f14-w300" style="color: #222222 !important ; border: 1px solid #DDDDDD; border-radius: 4px; height: 40px; display: flex; align-items: center; gap: 10px;" @click.prevent="exportCSV">
                                    CSV
                                <i class="far fa-arrow-to-bottom" aria-hidden="true"></i>
                                </a>

                            </div>
                        </div>
                        <div class="filter-right" style="border-bottom: 1px solid #DDDDDD;    padding: 12px;">
                            <span class="f16-w600">報酬額合計</span>
                            <p style="font-size: 16px; margin-left: 10px;">@{{formatNumber(totalMoneyForAff)}}円</p>
                        </div>
                    </div>
                    <table class="table ">
                        <tbody>
                        <tr class="">
                            <th style="width:240px;border-radius: 4px 0px 0px 4px;padding-left: 15px;">紹介したユーザー名</th>
                            <th @click="sort('bots_created_at')" style="text-align: left; cursor: pointer;">
                                LOA接続日時
                                <i class="fas fa-sort"></i>
{{--                                <i class="fa" :class="getSortClass('bots_created_at')" aria-hidden="true"></i>--}}
                            </th>
                            <th style="text-align: left;">LOA名</th>
                            <th @click="sort('user_created_at')" style="width:220px;cursor: pointer; border-right: 1px solid #ccc !important;">
                                アカウント作成日時
                                <i class="fas fa-sort"></i>
{{--                                <i class="fa" :class="getSortClass('user_created_at')" aria-hidden="true"></i>--}}
                            </th>
                            <th style="border-radius: 0px 4px 4px 0; text-align: center;    width: 86px;">報酬額</th>
                            <!-- <th>ステータス</th> -->
                        </tr>
                        <tr v-if="items && items.length > 0" v-for="(item, index) in items">
                            <td class="td-cell-payment-detail" style="padding-left: 15px; font-size: 14px;"> @{{ item.user_username ? item.user_username : 'このアカウントは削除されました' }}</td>
                            <td class="td-cell-payment-detail" style="font-size: 14px;">
                                <span> @{{ item.bots_created_at ? formatDateNew(item.bots_created_at) : '-' }} </span>
                            </td>
                            <td style="text-align: left; font-size: 14px;">@{{ item.bots_view_name ? item.bots_view_name : '-' }}</td>
                            <td class="td-cell-payment-detail" style="padding-left: 15px; font-size: 14px; border-right: 1px solid #ccc !important;">
                            <!-- <span v-if="item.remain_day >= 365 && item.parent_month == 0 ">@{{ formatDate(item.payment_date) }}</span> -->
                            <span>@{{ item.user_created_at ? formatDateNew(item.user_created_at) : '-' }}</span>
                            </td>
                            <td class="td-cell-payment-detail" style="text-align: center; font-size: 14px;">
                                <span v-if="item.type_bill == -1">報酬未発生</span>
                                <span v-else-if="item.amount_fee <0 ">-@{{ formatNumber(-item.amount_fee ) }} 円</span>
                                <span v-else>@{{ formatNumber(item.amount_fee ) }} 円</span>
                            </td>
    
                        </tr>
                        <tr v-if="items.length == 0">
                            <td style="text-align: center" colspan="6">データがありません。</td>
                        </tr>
    
                        </tbody>
                    </table>
                    <div class="pagination-container">
                        <p class="f14-w300" style="margin-top: 4px; margin-right: 30px;">@{{ startRecord }} - @{{ endRecord }} / @{{ pagination.total }}行</p> 
                        <ul class="pagination" style="margin-bottom: 10px; margin-top: 0;">
                            <li class="btn_prev" :class="{ disabled: pagination.current_page === 1 }">
                                <a href="#" aria-label="Previous" style="padding: 4px 9px;" @click.prevent="changePage(pagination.current_page - 1)">
                                    <span aria-hidden="true" style="color:#2B2F36">
                                        <i class="fas fa-chevron-left"></i>
                                    </span>
                                </a>
                            </li>
                            <li class="btn_next" :class="{ disabled: pagination.current_page === pagination.last_page  || pagination.total === 0 } ">
                                <a href="#" aria-label="Next" style="padding: 4px 9px;" @click.prevent="changePage(pagination.current_page + 1)">
                                    <span aria-hidden="true" style="color:#2B2F36">
                                    <i class="fas fa-chevron-right"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@push('script')
    <script>

        var rate_aff = null;
    </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="{{asset('js/affiliate_info/manage_affiliate.js')}}?v={{config('sns-line.version')}}"></script>
    <script>
        $(function () {
            $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
            $('.date-picker').datepicker({
                dateFormat: "yy年mm月",
                theme:'dark',
                changeMonth: true,
                changeYear: true,
                onClose: function() {
                    var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
                },
                beforeShow: function() {
                    if ((selDate = $(this).val()).length > 0)
                    {
                        iYear = selDate.substring(0, 4);
                        console.log($(this).datepicker('option', 'monthNames'));
                        console.log(selDate.substring(5, selDate.length));
                        iMonth = jQuery.inArray(selDate.substring(5, selDate.length), $(this).datepicker('option', 'monthNames'));
                        $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                        $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
                    }
                }
            });
        });
    </script>
@endpush