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

    <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">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="{{asset('css/affiliate_info/v3/affiliate_info.css')}}?v={{config("sns-line.version")}}">

    <style>
        label:after{
            content: unset;
        }
        .management_aff{
            color: #51595c;
            font-weight: bold;
            max-width: 1650px;
        }
        #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 i{
            background-color: #F2F2F2;
            border-radius: 5px;
            color: white;
            padding: 8px 7px;
            cursor: pointer;
            font-size: 23px;
        }
        .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-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.round:before {
            border-radius: 50%;
        }
        #management_aff .table>tbody>tr>th{
            border: none !important;
            background-color: #96ADB2 !important;
            padding-top: 12px;
            text-align: left;
            font-size: 13px;
        }
        .table>tbody>tr>td{
            border: none ;
            border-bottom: 1px solid #F2F2F2;
            text-align: left;
            font-size: 13px;
        }
        [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 rgb(208, 208, 208);
            border-radius: 5px;
            padding: 15px;
            max-height: 452px;
            overflow: auto;
            font-size: 13px;
            margin: 10px 43px;
            font-weight: 500;
        }
        .tt_term{
            font-weight: 600;
        }

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

        .btn-edit {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #08BF5A;
            border-radius: 3px;
            color: #08BF5A !important;
            font-size: 14px;
            font-weight: 300;
        }
        .tooltipp {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;
            opacity: 1;
            width: 220px;
            height: 60px;
            color: #222222;
            font-size: 14px;
            font-weight: 300;
            text-align: center;
            position: absolute;
            right: -80px;
            top: 120px;
            padding-top: 10px;
            display: none;
        }
        .truncate-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
        .btn-sns-line-success {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #08BF5A;
            border-radius: 5px;
            opacity: 1;
            color: #08BF5A !important;
        }
        .btn-sns-line-success:hover {
            background: #08BF5A 0% 0% no-repeat padding-box;
            color: #FFFFFF !important;
        }
    </style>
@endpush
@section('content')
    <div class="management_aff" id="management_aff" v-cloak>
        <div class="row">
            <div class="col-md-11">
                <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 15px; margin-right: 10px">
                    <h2 style="font-size: 20px;  font-weight: 600;">エルメ紹介プログラム（継続報酬用）</h2>
                    <a href="/admin/register-info-aff-v2" class="btn btn-sns-line btn-edit"
                       style="    font-size: 14px;
    padding: 8px 13px 6px 13px; font-weight: 600;">紹介者情報編集  <i style="margin-left: 5px" class="fas fa-edit"></i></a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-11">
                <div  style="background-color: #F8F8F8; border-radius: 5px; padding: 20px; margin-top: 20px; margin-right: 10px">
                    <div style="display: flex; align-items: center; font-size: 16px; font-weight: 600">
                        <p>紹介用エルメ新規登録URL</p>
{{--                        <p>報酬割合 継続{{ $rateAff*100 }}%</p>--}}
                        <div style="font-size: 14px; font-weight: 300; color: #222222; margin-left: 18px">こちらのリンクを紹介したい方にご案内してください。</div>
                    </div>
                    <div  style="width: 100%; margin-top: 12px;" class="d-flex justify-content-between align-items-center">
                        <div style="width: calc(-20px + 50%);">
                            <span style="font-size: 14px; font-weight: 600; color: #222222">サービスLP</span>
                            <div style="position: relative">
                                <input type="text" id="input-register-user" value="{{env('LINK_AFF')}}?ucode={{$hashUserId}}"
                                       placeholder="紹介者情報登録後に紹介用URLが表示されます"
                                       class="form-control input-register-user" readonly style="color: #222222; box-shadow: none; border: 1px solid #DDDDDD; border-radius: 5px; background-color: white; height: 40px; font-weight: 300">
                                <i class="far fa-copy" v-on:click="copyUrlEvent('#input-register-user')" style="top: 9px; cursor: pointer;
                            position: absolute;
                            right: 13px;
                            font-size: 22px;
                            color: #7D9195;"> </i>
                            </div>
                        </div>
                        <div style="width: calc(-20px + 50%);">
                            <span style="font-size: 14px; font-weight: 600; color: #222222">アカウント新規登録ページ</span>
                            <div style="position: relative">
                                <input type="text" id="input-direct-register-user" value="{{ asset("/register_user") . '/' . $hashUserId}}"
                                       placeholder="紹介者情報登録後に紹介用URLが表示されます"
                                       class="form-control input-register-user" readonly style="color: #222222; box-shadow: none; border: 1px solid #DDDDDD; border-radius: 5px; background-color: white; height: 40px; font-weight: 300; padding-right: 40px">
                                <i class="far fa-copy" v-on:click="copyUrlEvent('#input-direct-register-user')" style="top: 9px; cursor: pointer;
                            position: absolute;
                            right: 13px;
                            font-size: 22px;
                            color: #7D9195;"> </i>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-md-11">
                <div  style="background-color: #F8F8F8; border-radius: 5px; padding: 20px; margin-top: 20px; margin-right: 10px">
                    <div class="text-left" style="font-size: 16px; font-weight: 600">ご確認事項
                        <a target="_blank" href="https://lme.jp/referral_system_terms/" style="color: #888888; text-decoration: underline; margin-left: 16px; cursor: pointer; font-weight: 500; font-size: 14px">利用規約</a>
                    </div>
                    <div class="guide-14" style="font-size: 14px; font-weight: 400; margin-top: 10px; line-height: 22px; margin-left: -1px;">
                        <p style="margin-top: 7px">・報酬は月末締め、翌月15日払いとなります。</p>
                        <p style="margin-top: 7px">・インボイス制度（登録番号）の登録がない場合は、紹介報酬額から１０％を差し引いた金額をお支払いします。</p>
                        <p>（なお、負担軽減措置の適用期間中は適用される特例割合に応じて差し引く割合を２％又は５％に変更します。）</p>
                        <p style="margin-top: 7px">・紹介用URLからアカウントが作成された場合、即時以下のリストに反映されます。</p>
                        <p style="margin-left: 14px">反映されていない場合は、紹介者URLに紹介したユーザーが紐づかなかった形となります。</p>
                        <p style="color: #F44336; font-weight: 600; margin-top: 7px">・一般的なアフィリエイト同様、キャッシュ等が原因で紹介用URLに紹介したユーザーが紐付かなかった場合でも</p>
                        <p style="color: #F44336; font-weight: 600; margin-left: 14px">後から紐付けするなどの対応はできかねますのでご注意ください。</p>
                        <p style="margin-top: 7px">・年払いでの決済の場合は、12分割で報酬が支払われます。年払いでの決済の場合にエルメユーザーへの返金があった場合は返金理由を問わず</p>
                        <p style="margin-left: 14px">分割の報酬受取が停止いたします。</p>
                        <p style="margin-top: 7px">・適用する報酬率はエルメアカウント登録（紹介）日に関わらず、「有料プラン（アップグレード）契約日」を基準といたします。</p>
                    </div>
                    <div class="guide-27" style="font-size: 14px; font-weight: 400; margin-top: 10px; line-height: 22px; margin-left: -1px;">
                        <p style="margin-top: 7px">・報酬は月末締め、翌月15日払いとなります。</p>
                        <p style="margin-top: 7px">・インボイス制度（登録番号）の登録がない場合は、紹介報酬額から１０％を差し引いた金額をお支払いします。</p>
                        <p>（なお、負担軽減措置の適用期間中は適用される特例割合に応じて差し引く割合を２％又は５％に変更します。）</p>
                        <p style="margin-top: 7px">・紹介用URLからアカウントが作成された場合、即時以下のリストに反映されます。反映されていない場合は、紹介者URLに紹介したユーザーが紐づかなかった形となります。</p>
                        <p style="color: #F44336; font-weight: 600; margin-top: 7px">・一般的なアフィリエイト同様、キャッシュ等が原因で紹介用URLに紹介したユーザーが紐付かなかった場合でも後から紐付けするなどの対応はできかねますのでご注意ください。</p>
                        <p style="margin-top: 7px">・年払いでの決済の場合は、12分割で報酬が支払われます。年払いでの決済の場合にエルメユーザーへの返金があった場合は返金理由を問わず分割の報酬受取が停止いたします。</p>
                        <p style="margin-top: 7px">・適用する報酬率はエルメアカウント登録（紹介）日に関わらず、「有料プラン（アップグレード）契約日」を基準といたします。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-11">
                <div class="rate-history">
                    <div class="box-rate">
                        <div class="d-flex justify-content-between">
                            <p style="font-size: 16px; font-weight: 600">あなたの報酬率</p>
                            <p style="font-size: 14px; font-weight: 300">ランク：{{ $labelPattern['rank'] }}</p>
                        </div>
                        <div class="" style="margin-top: 10px">
                            <div class="tbr-header tbr-row d-flex">
                                <div style="justify-content: start;">契約日ごとの報酬率</div>
                                <div>スタンダード</div>
                                <div>プロ</div>
                            </div>
                            <div class="tbr-row d-flex bg-white" v-for="item in rateHistories">
                                <div style="display: flex; justify-content: start;">
                                    <p style="justify-content: start; margin-right: 5px" :class="{ 'certified-agency': item.is_certified_agency }">@{{ formatDate(item.date_apply_rate, '', 'YYYY/MM/DD') }}</p>
                                    <p>@{{ item.unit_times_text }}</p>
                                    <p class="tooltip-container" style="margin-left: 10px" v-if="item.is_certified_agency">
                                        <i class="fal fa-info-circle" style="cursor: pointer"></i>
                                        <span class="c-tooltip">
                                <span>登録されている日付は</span>
                                <span>認定代理店として</span>
                                <span>登録された日です。</span>
                            </span>
                                    </p>
                                </div>
                                <div>@{{ item.rate_standard ? item.rate_standard + ' %' : '提供なし' }}</div>
                                <div>@{{ item.rate_pro ? item.rate_pro + ' %' : '提供なし' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modal_introterm">
            <div class="modal-dialog " style="height: calc(-80px + 100vh)">
                <div class="modal-content" style="padding: 30px 50px; width: 900px; top: 50%; left: 50%; transform: translate(-50%,-50%)">
                    <div class="text-center" style="font-size: 18px; padding-bottom: 20px;">
                        エルメ紹介制度 利用規約
                    </div>
                    <div class="test-center intro-terms" style="">
                        <iframe src="https://lme.jp/referral_system_terms/" class="introterm_frame" scrolling="no"></iframe>
                    </div>
                    <div class="text-center" style="padding-top: 20px;">
                        <button v-if="datetime_apply_term_aff == null || datetime_apply_term_aff == ''" class="btn btn-sns-line-lg btn-sns btn-sns-line-success" data-dismiss="modal" style="width: 180px; font-weight: 300; font-size: 16px;" v-on:click="saveApplyTermAff">同意する</button>
                        <button v-else class="btn btn-sns-line-lg btn-sns" data-dismiss="modal" style="width: 180px; font-weight: 300; font-size: 14px; background: #ffffff; border: 1px solid #D0D0D0; color: #888888">閉じる</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin: 0;">
            <div class="col-md-11" style="padding: 0;">
                <div class="d-flex justify-content-start" style="border-bottom: 2px solid #DDDDDD; margin-bottom: 20px; margin-right: 10px">
                    <span class="tab-content" style="padding-right: 15px; margin-right: 15px; padding-left: 15px;"
                          :class="{ 'active-tab' : tab == TAB_FILTER.USER }"
                          @click="changeTab(TAB_FILTER.USER)">紹介者リスト</span>
                    <span class="tab-content" style="padding-right: 15px; padding-left: 15px;"
                          :class="{ 'active-tab' : tab == TAB_FILTER.COMMISSION }"
                          @click="changeTab(TAB_FILTER.COMMISSION)">報酬確定リスト</span>
                    <span class="tab-content" style="padding-right: 15px; padding-left: 15px;"
                          :class="{ 'active-tab' : tab == TAB_FILTER.UNCONFIRMED }"
                          @click="changeTab(TAB_FILTER.UNCONFIRMED)">報酬予定リスト</span>
                </div>
                <div v-if="tab == TAB_FILTER.USER">
                    <div class="aff-info " style="display: flex; align-items: baseline; justify-content: space-between;">
                        <div class="d-flex justify-content-start align-items-center">
                            <!-- <div class="time-range-container" style="padding: 0px; margin-right: 10px">
                                <input type="text" id="filter-range"
                                       class="form-control dateranger" readonly>
                                <i class="far fa-calendar" style="color: #E0E0E0"></i>
                            </div> -->
                            <div class="" style="display: flex; align-items: center; font-size: 15px; margin-right: 20px">
                                <div class="tab_right_top">
                                    <i class="far fa-chevron-left" style="margin-left: 0;" v-on:click="preMonth()"></i>
                                    <div style="position: relative">
                                        <input type="month" v-model="filter_month" class="form-control text-center filter-month"
                                               v-on:change="filterMonth"
                                               style="width: 200px; border: 1px solid #E8E8E8; height: 40px; font-size: 14px; font-weight: 400; color: #222222; cursor: pointer;">
                                        <div class="skin-ip-month" @click="toggleFilterMonth('.filter-month')"></div>
                                    </div>
                                    <i class="far fa-chevron-right" v-on:click="nextMonth()"></i>
                                </div>
                            </div>
                            <div class="" style="margin-right: 5px">
                                <button class="btn-search-all" @click="getAll()">全期間</button>
                            </div>
                        </div>
                    </div>
{{--                    <div class="filter" style="margin: 20px 0">--}}
{{--                        <span style="margin-right: 20px; color: #222222; font-size: 14px; font-weight: 300; display: inline-block;margin-bottom: 15px;">表示するユーザー</span>--}}
{{--                        <div>--}}
{{--                            <label class="c-checkbox">--}}
{{--                                <input type="checkbox" name="" v-model="user_use_fee" true-value="1" false-value="0" @change="initData({})">--}}
{{--                                <span class="checkmark"></span>--}}
{{--                                <span class="title">報酬発生（有料プラン契約者）</span>--}}
{{--                            </label>--}}
{{--                            <label class="c-checkbox">--}}
{{--                                <input type="checkbox" name="" v-model="user_free" true-value="1" false-value="0" @change="initData({})">--}}
{{--                                <span class="checkmark"></span>--}}
{{--                                <span class="title">フリープラン</span>--}}
{{--                            </label>--}}
{{--                            <label class="c-checkbox">--}}
{{--                                <input type="checkbox" name="" v-model="user_not_link_line" true-value="1" false-value="0" @change="initData({})">--}}
{{--                                <span class="checkmark"></span>--}}
{{--                                <span class="title">LINE公式アカウント未接続</span>--}}
{{--                            </label>--}}
{{--                            <label class="c-checkbox">--}}
{{--                                <input type="checkbox" name="" v-model="user_deleted" true-value="1" false-value="0" @change="initData({})">--}}
{{--                                <span class="checkmark"></span>--}}
{{--                                <span class="title">解約/エルメアカウント削除</span>--}}
{{--                            </label>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                    <div class="tooltipp">
                        <p>年払いでの決済の場合は</p>
                        <p>12分割で報酬が支払われます。</p>
                    </div>
                    <div class="table-responsive table-responsive-list-template">
                        <div>
                            <div class="wrap-scroll-table" style="min-width: 1100px; margin-top: 10px">
                                <table id="table_list_formanswer">
                                    <thead style="border-radius: 5px; background: unset">
                                    <tr style="border-radius: 5px;">
                                        <th @click="sortByField('users.created_at')" style="width: 250px; cursor: pointer; text-align: left">
                                            <div style="display: flex;">
                                                アカウント紹介（作成）日時
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="btnth" style="width: 300px; text-align: left; padding-left: 50px">紹介先ユーザー名</th>
                                        <th @click="sortByField('bot_created_at')" style="width: 200px; cursor: pointer; text-align: left; padding-left: 50px">
                                            <div style="display: flex;">
                                                LOA接続日時
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="btnth" style="width:340px; text-align: left; padding-left: 50px">LOA名</th>
{{--                                        <th class="siteth"--}}
{{--                                            @click="sortByField('bot_contracts.contract_type')"--}}
{{--                                            style="width: 200px; cursor: pointer; text-align: left">--}}
{{--                                            <div style="display: flex;">--}}
{{--                                                契約プラン--}}
{{--                                                <div style="position: relative; margin-left: 15px">--}}
{{--                                                    <i class="fas fa-sort"></i>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </th>--}}
{{--                                        <th class="siteth"--}}
{{--                                            @click="sortByField('payment_detail_aff.remain_day')"--}}
{{--                                            style="width: 150px; cursor: pointer; text-align: center">--}}
{{--                                            <div style="display: flex;">--}}
{{--                                                支払い--}}
{{--                                                <div style="position: relative; margin-left: 15px">--}}
{{--                                                    <i class="fas fa-sort"></i>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </th>--}}
{{--                                        <th class="btnth" style="width: 120px; text-align: center" >利用料</th>--}}
{{--                                        <th class="siteth" style="width: 320px; text-align: left">備考</th>--}}
{{--                                        <th style="">報酬額</th>--}}
{{--                                        <th style="">報酬率</th>--}}
{{--                                        <th style="">受取回数</th>--}}
{{--                                        <th>--}}
{{--                                            <div class="show-tooltip" @mousemove="showTooltip('tooltipp')" @mouseout="hideTooltip('tooltipp')" style="cursor: pointer;text-align: left">--}}
{{--                                                <i class="fas fa-question-circle" style="color: #888888;"></i>--}}
{{--                                            </div>--}}
{{--                                        </th>--}}
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item, index) in items">
                                        <td class="td-cell-payment-detail" style="text-align: left">
                                            <span >@{{ formatDate(item.created_at) }}</span>
                                        </td>
                                        <td class="td-cell-payment-detail truncate-text" style="text-align: left; padding-left: 50px"> @{{ item.username  }}</td>
                                        <td class="td-cell-payment-detail" style="text-align: left; padding-left: 50px">@{{ item.not_connect ? '未接続' : formatDate(item.first_bot.created_at) }}</td>
                                        <td class="td-cell-payment-detail truncate-text" style="text-align: left; padding-left: 50px">@{{ item.not_connect ? '-' : item.first_bot.view_name }}</td>
{{--                                        <td class="td-cell-payment-detail" style="text-align: left">--}}
{{--                                            <span v-if="item.type_bill_cus == 'free'" >フリープラン</span>--}}
{{--                                            <span v-else-if="item.status_refund == 1 && item.amount < 0">--}}
{{--                                                返金--}}
{{--                                            </span>--}}
{{--                                            <span v-else-if="item.type_bill_cus == 'year' && item.contract_type == 'standard'" >--}}
{{--                                               スタンダード（¥9,702/年）--}}
{{--                                            </span>--}}
{{--                                            <span v-else-if="item.type_bill_cus == 'month' && item.contract_type == 'standard'" >--}}
{{--                                                スタンダード（¥10,780/月）--}}
{{--                                            </span>--}}
{{--                                            <span v-else-if="item.type_bill_cus == 'year' && item.contract_type == 'enterprise'" >--}}
{{--                                                おまとめ（スタンダード）（年）--}}
{{--                                            </span>--}}

{{--                                            <span v-else-if="item.type_bill_cus == 'month' && item.contract_type == 'enterprise'" >--}}
{{--                                                おまとめ（スタンダード）（月）--}}
{{--                                            </span>--}}
{{--                                            <span v-else-if="item.type_bill_cus == 'month' && item.contract_type == 'pro'" >--}}
{{--                                                プロ（月）--}}
{{--                                            </span>--}}
{{--                                            <span v-else-if="item.type_bill_cus == 'year' && item.contract_type == 'pro'" >--}}
{{--                                                プロ（年）--}}
{{--                                            </span>--}}
{{--                                            <span v-else-if=" item.contract_type == 'enterprise_pro'" >--}}
{{--                                                おまとめ（プロ）--}}
{{--                                            </span>--}}
{{--                                            <span  v-else-if="item.type_bill == -1" >アカウント登録</span>--}}
{{--                                            <span v-else>-</span>--}}
{{--                                        </td>--}}
{{--                                        <td style="text-align: left">--}}
{{--                                            <span v-if="item.type_bill_cus == 'year'">年間一括払い</span>--}}
{{--                                            <span v-else-if="item.type_bill_cus == 'month'">毎月払い</span>--}}
{{--                                            <span v-else>-</span>--}}
{{--                                        </td>--}}
{{--                                        <td>¥@{{ formatNumber(item.amount) }}</td>--}}
{{--                                        <td style="text-align: left">--}}
{{--                                            <span v-if="item.status_contract == 3">スタンダードプラン 解約済 (@{{ item.date_cancel_contract ? formatDate(item.date_cancel_contract) : formatDate(item.contract_updated_at) }})</span>--}}
{{--                                            <span v-else-if="item.user_aff_id == null">エルメアカウント削除済(@{{ formatDate(item.updated_at) }})</span>--}}
{{--                                            <span v-else-if="item.remain_day_upgrade > 0">アップグレード 日割り (@{{ item.remain_day_upgrade }})日分</span>--}}
{{--                                            <span v-else>-</span>--}}
{{--                                        </td>--}}
{{--                                        <td class="td-cell-payment-detail" style="text-align: right">--}}
{{--                                            <span v-if="item.plan_type == 2 || item.contract_type == 'free' || item.type_bill == -1 || show_amount == 0">-</span>--}}
{{--                                            <span v-else-if="item.amount_fee <0 ">-¥@{{ formatNumber(-item.amount_fee ) }}</span>--}}
{{--                                            <span v-else>¥@{{ formatNumber(item.amount_fee ) }}</span>--}}
{{--                                        </td>--}}
{{--                                        <td style="text-align: center">@{{( item.type_bill == -1) ? '-' : item.rate + '%' }}</td>--}}
{{--                                        <td class="td-cell-payment-detail" style="text-align: center">--}}
{{--                                            <span v-if="item.type_bill_cus == 'free' || item.type_bill == -1">-</span>--}}
{{--                                            <span v-else-if="(item.type_bill_cus == 'month' && item.plan_type != 2)">1/1</span>--}}
{{--                                            <span v-else>@{{ item.number_bill ? ( item.number_bill + ( item.remain_day == 365 ? '/12' : '/24')) : '-' }}</span>--}}
{{--                                        </td>--}}
{{--                                        <td></td>--}}
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="text-center" style="margin-top: 75px; min-width: 1090px" v-if="items.length == 0">
                                <div class="flex justify-center" style="margin-bottom: 19px">
                                    <img src="/images/group_4483.svg" alt="">
                                </div>
                                <div style="color: #8C8C8C; font-weight: 400; font-size: 16px">まだデータがありません</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="tab == TAB_FILTER.COMMISSION">
                    <div class="aff-info " style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px">
                        <div class="d-flex justify-content-start align-items-center">
                            <div class="" style="display: flex; align-items: center; font-size: 15px; margin-right: 20px">
                                <div class="tab_right_top">
                                    <i class="far fa-chevron-left" style="margin-left: 0;" v-on:click="preMonth()"></i>
                                    <div style="position: relative">
                                        <input type="month" v-model="filter_month" class="form-control text-center filter-month"
                                               v-on:change="filterMonth"
                                               style="width: 200px; border: 1px solid #E8E8E8; height: 40px; font-size: 14px; font-weight: 400; color: #222222; cursor: pointer;">
                                        <div class="skin-ip-month" @click="toggleFilterMonth('.filter-month')"></div>
                                    </div>
                                    <i class="far fa-chevron-right" v-on:click="nextMonth()"></i>
                                </div>
                            </div>
                            <div class="" style="margin-right: 5px">
                                <button class="btn-search-all" style="width: 130px;" @click="downloadPdf()">支払い明細書<i class="far fa-arrow-to-bottom" style="margin-left: 10px"></i></button>
                            </div>
                            <div class="box-tooltip btn-right-top gr-search" style="align-items: center; background: #ffffff; min-width: 42px; height: 42px; border: 1px solid #DDDDDD; border-radius: 5px; display: flex; justify-content: start; cursor: pointer; max-width: 461px; position: relative">
                                <span v-if="!is_show_search" class="tooltip-search" style="width: 50px;">検索</span>
                                <i class="far fa-search"
                                   @click="is_show_search = !is_show_search"
                                   style="color: #888888 !important; font-size: 20px; width: 33px; height: 33px; display: flex;align-items: center; justify-content: center; margin-left: 5px"></i>
                                <input type="text" @keyup.enter="changePage(1)" class="form-control search_for_temp" v-model="keyword"
                                       placeholder="紹介先ユーザー名・LOA名で検索"
                                       style="width: 410px; padding-right: 35px;
                                                  height: 40px;
                                                  border: none;
                                                  box-shadow: none;
                                                  font-size: 14px;
                                                  transition: 0.4s;
                                                  font-weight: 300;
                                                  color: #222222;"
                                       :class="{ 'hide-search': is_show_search == 0 }"
                                >

                                <img @click="clearSearch" v-if="keyword && is_show_search"
                                     style="width: 15px;
                                            transform: translateY(-50%);
                                            top: 50%;
                                            right: 10px;
                                            position: absolute;
                                            cursor: pointer;
                                            width: 20px;"
                                     src="/images/icon-clear-search.png">
                            </div>
                        </div>
                        <div style="font-size: 16px; font-weight: 600; color: #222222; border-bottom: 2px solid #eeeeee; padding-bottom: 5px; margin-right: 10px">
                            報酬額合計  @{{ show_amount == 0 ? '-' : formatNumber(totalMoneyForAff) }} 円
                        </div>
                    </div>
                    <div class="tooltipp" style="z-index: 10; top: 55px;">
                        <p>年払いでの決済の場合は</p>
                        <p>12分割で報酬が支払われます。</p>
                    </div>
                    <div class="table-responsive table-responsive-list-template">
                        <div>
                            <div class="wrap-scroll-table pending-last">
                                <table id="table_list_formanswer">
                                    <thead style="border-radius: 5px; background: unset">
                                    <tr style="border-radius: 5px;">
                                        <th style="width: 170px; cursor: pointer; text-align: left">ステータス</th>
                                        <th @click="sortByField('payment_detail_aff.payment_date')" style="width: 170px; cursor: pointer; text-align: left">
                                            <div style="display: flex;">
                                                報酬発生日
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th @click="sortByField('bot_contracts.date_add_contract')" style="width: 230px; cursor: pointer; text-align: left; padding-left: 65px">
                                            <div style="display: flex;">
                                                有料プラン開始日
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="btnth" style="width: 230px; text-align: left; padding-left: 65px">紹介先ユーザー名</th>
                                        <th class="btnth" style="width: 240px; text-align: left; padding-left: 65px">LOA名</th>
                                        <th @click="sortByField('bot_contracts.contract_type')" style="width: 300px; cursor: pointer; text-align: left; padding-left: 65px">
                                            <div style="display: flex;">
                                                契約プラン
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="siteth"
                                            @click="sortByField('payment_detail_aff.remain_day')"
                                            style="width: 200px; cursor: pointer; text-align: left; padding-left: 65px">
                                            <div style="display: flex;">
                                                支払い
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="siteth" style="width: 130px; text-align: center; padding-left: 65px">利用料</th>
                                        <th class="siteth" style="width: 320px; text-align: left; padding-left: 65px">備考</th>
                                        <th class="siteth"
                                            @click="sortByField('users.created_at')"
                                            style="width: 250px; cursor: pointer; text-align: left; padding-left: 30px">
                                            <div style="display: flex;">
                                                アカウント紹介（作成）日時
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th style="">報酬額</th>
                                        <th style="">報酬率</th>
                                        <th style="">受取回数</th>
                                        <th>
                                            <div class="show-tooltip" @mousemove="showTooltip('tooltipp')" @mouseout="hideTooltip('tooltipp')" style="cursor: pointer; text-align: left">
                                                <i class="fas fa-question-circle" style="color: #888888;"></i>
                                            </div>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item, index) in items">
                                        <td style="text-align: left">報酬確定</td>
                                        <td class="td-cell-payment-detail" style="text-align: left">
                                            <span v-if="item.remain_day >= 365 && item.parent_month == 0 ">@{{ formatDate(item.payment_date) }}</span>
                                            <span v-else>@{{ formatDate(item.created_at) }}</span>
                                        </td>
                                        <td class="td-cell-payment-detail" style="padding-left: 65px; text-align: left">
                                            <span>@{{ formatDate(item.date_add_contract) }}</span>
                                        </td>
                                        <td class="td-cell-payment-detail truncate-text" style="padding-left: 65px; text-align: left;"> @{{ item.username ? item.username : 'このアカウントは削除されました' }}</td>
                                        <td class="td-cell-payment-detail truncate-text" style="padding-left: 65px; text-align: left">@{{ item.view_name ? item.view_name : '-' }}</td>
                                        <td class="td-cell-payment-detail" style="padding-left: 65px; text-align: left">
                                            <span v-if="item.type_bill_cus == 'free'" >フリープラン</span>
                                            <span v-else-if="item.status_refund == 1 && item.amount < 0">
                                                返金
                                            </span>
                                            <span v-else-if="item.type_bill_cus == 'year' && item.contract_type == 'standard'" >
                                               スタンダード（¥9,702/年）
                                            </span>
                                            <span v-else-if="item.type_bill_cus == 'month' && item.contract_type == 'standard'" >
                                                スタンダード（¥10,780/月）
                                            </span>
                                            <span v-else-if="item.type_bill_cus == 'year' && item.contract_type == 'enterprise'" >
                                                おまとめ（スタンダード）（年）
                                            </span>

                                            <span v-else-if="item.type_bill_cus == 'month' && item.contract_type == 'enterprise'" >
                                                おまとめ（スタンダード）（月）
                                            </span>
                                            <span v-else-if="item.type_bill_cus == 'month' && item.contract_type == 'pro'" >
                                                プロ（月）
                                            </span>
                                            <span v-else-if="item.type_bill_cus == 'year' && item.contract_type == 'pro'" >
                                                プロ（年）
                                            </span>
                                            <span v-else-if=" item.contract_type == 'enterprise_pro'" >
                                                おまとめ（プロ）
                                            </span>
                                            <span  v-else-if="item.type_bill == -1" >アカウント登録</span>
                                            <span v-else>-</span>
                                        </td>
                                        <td style="padding-left: 65px; text-align: left">
                                            <span v-if="item.type_bill_cus == 'year' && item.remain_day > 365">2年払い</span>
                                            <span v-else-if="item.type_bill_cus == 'year'">年間払い</span>
                                            <span v-if="item.type_bill_cus == 'month'">毎月払い</span>
                                        </td>
                                        <td style="padding-left: 65px; text-align: right">¥@{{ formatNumber(item.amount) }}</td>
                                        <td style="padding-left: 65px; text-align: left">
                                            <span class="truncate-text" style="width: 100%; display: block" v-if="item.status_contract == 3">スタンダードプラン 解約済 (@{{ item.date_cancel_contract ? formatDate(item.date_cancel_contract) : formatDate(item.contract_updated_at) }})</span>
                                            <span class="truncate-text" style="width: 100%; display: block" v-else-if="item.user_aff_id == null">エルメアカウント削除済(@{{ formatDate(item.updated_at) }})</span>
                                            <span v-else-if="item.remain_day_upgrade > 0">アップグレード 日割り (@{{ item.remain_day_upgrade }})日分</span>
                                            <span v-else>-</span>
                                        </td>
                                        <td style="padding-left: 65px; text-align: left">@{{ formatDate(item.user_created_at) }}</td>
                                        <td class="td-cell-payment-detail" style="text-align: right !important;">
                                            <span v-if="item.plan_type == 2 || item.contract_type == 'free' || item.type_bill == -1 || show_amount == 0">-</span>
                                            <span v-else-if="item.amount_fee <0 ">-¥@{{ formatNumber(-item.amount_fee ) }}</span>
                                            <span v-else>¥@{{ formatNumber(item.amount_fee ) }}</span>
                                        </td>
                                        <td style="text-align: center">@{{(item.plan_type == 2 || item.contract_type == 'free' || item.type_bill == -1) ? '-' : item.rate + '%' }}</td>
                                        <td class="td-cell-payment-detail" style="text-align: center">
                                            <span v-if="item.type_bill_cus == 'free' || item.type_bill == -1">-</span>
                                            <span v-else-if="(item.type_bill_cus == 'month' && item.plan_type != 2)">1/1</span>
                                            <span v-else>@{{ item.number_bill ? ( item.number_bill + ( item.remain_day == 365 ? '/12' : '/24')) : '-' }}</span>
                                        </td>
                                        <td></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="text-center" style="margin-top: 75px" v-if="items.length == 0">
                                <div v-if="!is_show_empty_search">
                                    <div class="flex justify-center" style="margin-bottom: 19px">
                                        <img src="/images/group_4483.svg" alt="">
                                    </div>
                                    <div style="color: #8C8C8C; font-weight: 500; font-size: 16px">まだデータがありません</div>
                                </div>
                                <div v-else>
                                    <div class="flex justify-center" style="margin-bottom: 19px">
                                        <img src="/images/empty-search.svg" alt="">
                                    </div>
                                    <div style="color: #8C8C8C; font-weight: 500; font-size: 16px">検索結果がありません</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="tab == TAB_FILTER.UNCONFIRMED">
                    <div class="aff-info " style="display: flex; align-items: center; justify-content: start;; margin-bottom: 20px">
                        <div class="d-flex justify-content-start align-items-center" style="margin-right: 20px">
                            <div class="current-month">@{{ getCurrentMonth() }}月 予定分</div>
                        </div>
                        <div class="box-tooltip btn-right-top gr-search" style="align-items: center; background: #ffffff; min-width: 42px; height: 42px; border: 1px solid #DDDDDD; border-radius: 5px; display: flex; justify-content: start; cursor: pointer; max-width: 461px; position: relative">
                            <span v-if="!is_show_search" class="tooltip-search" style="width: 50px;">検索</span>
                            <i class="far fa-search"
                               @click="is_show_search = !is_show_search"
                               style="color: #888888 !important; font-size: 20px; width: 33px; height: 33px; display: flex;align-items: center; justify-content: center; margin-left: 5px"></i>
                            <input type="text" @keyup.enter="changePage(1)" class="form-control search_for_temp" v-model="keyword"
                                   placeholder="紹介先ユーザー名・LOA名で検索"
                                   style="width: 410px; padding-right: 35px;
                                                  height: 40px;
                                                  border: none;
                                                  box-shadow: none;
                                                  font-size: 14px;
                                                  transition: 0.4s;
                                                  font-weight: 300;
                                                  color: #222222;"
                                   :class="{ 'hide-search': is_show_search == 0 }"
                            >

                            <img @click="clearSearch" v-if="keyword && is_show_search"
                                 style="width: 15px;
                                            transform: translateY(-50%);
                                            top: 50%;
                                            right: 10px;
                                            position: absolute;
                                            cursor: pointer;
                                            width: 20px;"
                                 src="/images/icon-clear-search.png">
                        </div>
                    </div>
                    <div class="tooltipp" style="z-index: 10; top: 55px;">
                        <p>年払いでの決済の場合は</p>
                        <p>12分割で報酬が支払われます。</p>
                    </div>
                    <div class="table-responsive table-responsive-list-template">
                        <div>
                            <div class="wrap-scroll-table pending-last">
                                <table id="table_list_formanswer" class="table-unconfirm">
                                    <thead style="border-radius: 5px; background: unset">
                                    <tr style="border-radius: 5px;">
                                        <th style="width: 170px; cursor: pointer; text-align: left">ステータス</th>
                                        <th @click="sortByField('payment_date')" style="width: 170px; cursor: pointer; text-align: left">
                                            <div style="display: flex;">
                                                報酬発生予定日
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th @click="sortByField('date_add_contract')" style="padding-left: 65px !important; width: 230px; cursor: pointer; text-align: left">
                                            <div style="display: flex;">
                                                有料プラン開始日
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="btnth" style="padding-left: 65px !important; width: 230px; text-align: left">紹介先ユーザー名 </th>
                                        <th class="btnth" style="padding-left: 65px !important; width:230px; text-align: left">LOA名</th>
                                        <th @click="sortByField('contract_type')" style="padding-left: 65px !important; width: 250px; cursor: pointer; text-align: left">
                                            <div style="display: flex;">
                                                契約プラン
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="siteth"
                                            @click="sortByField('contract_bill_type')"
                                            style="padding-left: 65px !important; width: 200px; cursor: pointer; text-align: left">
                                            <div style="display: flex;">
                                                支払い
                                                <div style="position: relative; margin-left: 15px">
                                                    <i class="fas fa-sort"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="siteth" style="padding-left: 65px !important; width: 130px; text-align: center">利用料</th>
                                        <th class="siteth" style="padding-left: 65px !important; width: 320px; text-align: left">備考</th>
{{--                                        <th class="siteth"--}}
{{--                                            @click="sortByField('users.created_at')"--}}
{{--                                            style="width: 250px; cursor: pointer; text-align: left">--}}
{{--                                            <div style="display: flex;">--}}
{{--                                                アカウント紹介（作成）日時--}}
{{--                                                <div style="position: relative; margin-left: 15px">--}}
{{--                                                    <i class="fas fa-sort"></i>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </th>--}}
                                        <th style="">報酬額</th>
                                        <th style="">報酬率</th>
                                        <th style="">受取回数</th>
                                        <th>
                                            <div class="show-tooltip" @mousemove="showTooltip('tooltipp')" @mouseout="hideTooltip('tooltipp')" style="cursor: pointer; text-align: left">
                                                <i class="fas fa-question-circle" style="color: #888888;"></i>
                                            </div>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item, index) in items">
                                        <td style="text-align: left">報酬発生予定</td>
                                        <td class="td-cell-payment-detail" style="text-align: left">
                                            <span>@{{ item.payment_date }}</span>
                                        </td>
                                        <td class="td-cell-payment-detail" style="text-align: left; padding-left: 65px">
                                            <span>@{{ formatDate(item.date_add_contract) }}</span>
                                        </td>
                                        <td class="td-cell-payment-detail truncate-text" style="padding-left: 65px; text-align: left;"> @{{ item.last_payment.user_bill.username ? item.last_payment.user_bill.username : 'このアカウントは削除されました' }}</td>
                                        <td class="td-cell-payment-detail truncate-text" style="padding-left: 65px; text-align: left">@{{ item.view_name ? item.view_name : '-' }}</td>
                                        <td class="td-cell-payment-detail" style="padding-left: 65px; text-align: left">
                                            <span v-if="item.type_bill_cus == 'free'" >フリープラン</span>
                                            <span v-else-if="item.last_payment.status_refund == 1 && item.last_payment.amount < 0">
                                                返金
                                            </span>
                                            <span v-else-if="item.type_bill_cus == 'year' && item.contract_type == 'standard'" >
                                               スタンダード（¥9,702/年）
                                            </span>
                                            <span v-else-if="item.type_bill_cus == 'month' && item.contract_type == 'standard'" >
                                                スタンダード（¥10,780/月）
                                            </span>
                                            <span v-else-if="item.type_bill_cus == 'year' && item.contract_type == 'enterprise'" >
                                                おまとめ（スタンダード）（年）
                                            </span>

                                            <span v-else-if="item.type_bill_cus == 'month' && item.contract_type == 'enterprise'" >
                                                おまとめ（スタンダード）（月）
                                            </span>
                                            <span v-else-if="item.type_bill_cus == 'month' && item.contract_type == 'pro'" >
                                                プロ（月）
                                            </span>
                                            <span v-else-if="item.type_bill_cus == 'year' && item.contract_type == 'pro'" >
                                                プロ（年）
                                            </span>
                                            <span v-else-if=" item.contract_type == 'enterprise_pro'" >
                                                おまとめ（プロ）
                                            </span>
                                            <span  v-else-if="item.last_payment.type_bill == -1" >アカウント登録</span>
                                            <span v-else>-</span>
                                        </td>
                                        <td style="padding-left: 65px; text-align: left">
                                            <span v-if="item.type_bill_cus == 'year' && item.last_payment.remain_day > 365">2年払い</span>
                                            <span v-else-if="item.type_bill_cus == 'year'">年間払い</span>
                                            <span v-if="item.type_bill_cus == 'month'">毎月払い</span>
                                        </td>
                                        <td style="padding-left: 65px; text-align: right">¥@{{ formatNumber(item.last_payment.amount) }}</td>
                                        <td style="padding-left: 65px; text-align: left">
                                            <span class="truncate-text" style="width: 100%; display: block" v-if="item.status == 3">スタンダードプラン 解約済 (@{{ item.date_cancel_contract ? formatDate(item.date_cancel_contract) : formatDate(item.contract_updated_at) }})</span>
                                            <span class="truncate-text" style="width: 100%; display: block" v-else-if="item.user_aff_id == null">エルメアカウント削除済(@{{ formatDate(item.last_payment.updated_at) }})</span>
                                            <span v-else-if="item.last_payment.remain_day_upgrade > 0">アップグレード 日割り (@{{ item.last_payment.remain_day_upgrade }})日分</span>
                                            <span v-else>-</span>
                                        </td>
{{--                                        <td style="text-align: left">@{{ formatDate(item.user_created_at) }}</td>--}}
                                        <td class="td-cell-payment-detail" style="text-align: right !important;">
                                            <span v-if="item.plan_type == 2 || item.contract_type == 'free' || item.type_bill == -1 || show_amount == 0">-</span>
                                            <span v-else-if="item.last_payment.amount_fee <0 ">-¥@{{ formatNumber(-item.last_payment.amount_fee ) }}</span>
                                            <span v-else>¥@{{ formatNumber(item.last_payment.amount_fee ) }}</span>
                                        </td>
                                        <td style="text-align: center">@{{(item.plan_type == 2 || item.contract_type == 'free' || item.type_bill == -1) ? '-' : item.last_payment.rate + '%' }}</td>
                                        <td class="td-cell-payment-detail" style="text-align: center">
                                            <span v-if="item.type_bill_cus == 'free' || item.type_bill == -1">-</span>
                                            <span v-else-if="(item.type_bill_cus == 'month' && item.plan_type != 2)">1/1</span>
                                            <span v-else>@{{ item.last_payment.number_bill ? ((item.last_payment.number_bill + 1) + ( item.last_payment.remain_day == 365 ? '/12' : '/24')) : '-' }}</span>
                                        </td>
                                        <td></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="text-center" style="margin-top: 75px" v-if="items.length == 0">
                                <div v-if="!is_show_empty_search">
                                    <div class="flex justify-center" style="margin-bottom: 19px">
                                        <img src="/images/group_4483.svg" alt="">
                                    </div>
                                    <div style="color: #8C8C8C; font-weight: 500; font-size: 16px">まだデータがありません</div>
                                </div>
                                <div v-else>
                                    <div class="flex justify-center" style="margin-bottom: 19px">
                                        <img src="/images/empty-search.svg" alt="">
                                    </div>
                                    <div style="color: #8C8C8C; font-weight: 500; font-size: 16px">検索結果がありません</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <nav :class="{ 'pagination-tab0': tab == 0 }" style="margin-left: auto; margin-top: 20px; margin-right: 10px" class="text-center d-flex justify-content-end align-items-center" v-if="items.length > 0">
                    <ul class="pagination" v-if="pagination.last_page > 1">
                        <li v-if="pagination.current_page > 1">
                            <a href="#" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)" style="font-size: 14px;">
                                <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-left" style="color: #DDDDDD !important;"></i></span>
                            </a>
                        </li>
                        <li v-for="page in pagesNumber()" v-bind:class="[ page == pagination.current_page ? 'active' : '']">
                            <a href="#" @click.prevent="changePage(page)" style="font-size: 14px;">@{{ page }}</a>
                        </li>
                        <li v-if="pagination.current_page < pagination.last_page">
                            <a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)" style="font-size: 14px;">
                                <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-right" style="color: #DDDDDD !important;"></i></span>
                            </a>
                        </li>
                    </ul>
                    <div class="limit ml-4 select-container">
                        <div class="dropdown ml-4">
                            <a class="btn btn-secondary dropdown-toggle d-flex align-items-center limit-default" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                @{{pagination.per_page}}件 / ページ<i class="fas fa-sort-down" style="color:#E0E0E0 ; padding-right: 4px; position: absolute; right: 5px; top: 7px;"></i>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#" @click.prevent="changeLimit(10)">10件 / ページ</a>
                                <a class="dropdown-item" href="#" @click.prevent="changeLimit(20)">20件 / ページ</a>
                                <a class="dropdown-item" href="#" @click.prevent="changeLimit(50)">50件 / ページ</a>
                                <a class="dropdown-item" href="#" @click.prevent="changeLimit(100)">100件 / ページ</a>
                            </div>
                        </div>
                    </div>
                </nav>
                <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="height: calc(-80px + 100vh)">
                        <div class="modal-content" style="top: 50%; left: 50%; transform: translate(-50%,-50%)">
                            <div class="modal-header" style="border-bottom: none; padding: 0">
                                <h2 class="text-center" style="color: #222222;font-size: 20px;margin-top: 32px; font-weight: 600">エルメ紹介制度 利用規約</h2>
                            </div>
                            <div class="modal-body">
                                <div class="box_term_aff" style="padding-bottom: 0; margin-bottom: 0">
                                   <div>
                                       本利用規約（以下「本規約」といいます。）は、株式会社ミショナ（以下「当社」といいます。）がL Message紹介制度（以下「本サービス」といいます。）を提供するにあたり、お客様と当社との間の権利義務関係を定めるものです。本サービスのご利用に際しては、本規約の全文をお読みください。
                                   </div> <br>
                                    <div class="tt_term">第１条　定義　</div>
                                    <div>本規約中に用いる用語の意義は、以下の通りとします。</div>
                                    <div>１　「L Message」　当社が提供する、LINE公式アカウントを使った拡張ツールをいい、LINE公式アカウントと併せて「LINE公式アカウント等」といいます。</div>
                                    <div>２　「LINE公式アカウント」　LINE株式会社が同名称で提供するアカウントサービスをいいます。</div>
                                    <div>３　「お客様」　本サービスを利用する既存のL Message利用者をいいます。</div>
                                    <div>４　「新規利用者」　お客様が保有する紹介リンクから、L Messageを新規に登録した方をいいます。</div>
                                    <div>５　「代理店ランク」　当社が提供する「L Message認定講座（代理店コース）」に参加頂いた全員に付与されるランクをいいます。</div>
                                    <div>６　「知的財産権」　特許権、実用新案権、意匠権、商標権（これらを受ける権利を含む。）、著作権（著作権法第２７条及び第２８条に定める権利を含む。）、ノウハウ、営業秘密、その他一切の知的財産に関する権利をいいます。</div>
                                    <br>
                                    <div  class="tt_term">第２条　本サービスの内容及び変更</div>
                                    <div>１　本サービスは、新規利用者がお客様の保有する紹介リンクからL Messageの有料プランの利用を開始した際に、当社がお客様に対し報酬を支払う、アフィリエイトシステムをいいます。</div>
                                    <div>２　当社は、理由の如何を問わず、お客様に事前の通知をすることなく、本サービスの内容の一部または全部の変更・追加・廃止をすることがあります</div>
                                    <br>
                                    <div class="tt_term">第３条　利用規約への同意</div>
                                    <div>１　お客様は、本規約の定めに従って本サービスを利用しなければなりません。お客様は、本規約に同意をしない限り、本サービスを利用できません。</div>
                                    <div>２　お客様は、本サービスを実際に利用することによって本規約に有効かつ取消不能な同意をしたものとみなされます。 </div>
                                    <br>
                                    <div class="tt_term"> 第４条　利用規約の変更</div>
                                    <div> １　当社は、お客様の一般の利益に適合する場合、又は社会情勢、経済事情若しくは本サービスに関する実情の変化若しくは法令の変更その他合理的な事由があると認められる場合には、民法の定型約款の変更に係る規定に基づき、本サービスの目的に反しない範囲で本規約の内容を変更できるものとします。</div>
                                    <div> ２　当社は、前項の定めに基づいて本規約の変更を行う場合は、変更後の利用規約の内容を、当社ウェブサイト上に表示し又は当社の定める方法によりお客様に通知することでお客様に周知するものとし、その周知の際に定める相当な期間を経過した日から、変更後の利用規約が適用されるものとします。</div>
                                    <div>３　当社は、本条第１項の定めに基づかずに本規約の変更を行う場合は、変更後の利用規約の内容についてお客様の同意を得るものとします。この場合、解約可能な期間及び手続きと併せて、当社は、変更後の利用規約の内容を前項の定めに従って周知するものとします。なお、かかる周知の後、当該変更後の利用規約が適用される日までの間に、お客様が本サービスを利用した場合又は所定の解約手続きをとらなかった場合その他当該変更に不同意の意思を相当期間に亘って表示しなかった場合には、お客様は、当該変更後の利用規約の内容に同意したものとみなします。
                                    </div>
                                    <br>
                                    <div class="tt_term">第５条　紹介権利の獲得及び紹介リンクの取得</div>
                                    <div>１　お客様は、L Message認定講座（代理店コース）に参加後、本規約および、別途当社が定め、当社ウェブサイトに表示する利用条件（以下「本サービス利用条件」といいます。）に同意のうえ、当社所定のL Messageお客様登録フォームから申し込みをすることで、紹介権利を取得できます。</div>
                                    <div>２　お客様は、紹介権利を獲得後、L Messageの管理画面より紹介リンクを１つのみ取得可能です。複数の紹介リンクの発行はできかねます。</div>
                                    <div>３　当社は、お客様の信用状態等に応じて、当該申込みを承諾しないことがあるものとします。
                                    </div>
                                    <br>
                                    <div class="tt_term">第６条　紹介報酬</div>
                                    <div>１　当社は、新規利用者がお客様の保有する紹介リンクからL Messageの有料プランの利用を開始した際に、<a target="_blank" href="https://docs.google.com/spreadsheets/d/1NN1AB04kAuF5-0RJhG9zTSl1CX-qOL1bvtwccTAa8t8/edit#gid=0">当社が別途定めるランク</a>に応じた報酬率（以下「報酬率」といいます）に基づき、次条に定める支払い方法により、紹介報酬を支払うものとします。なお、紹介報酬は、新規利用者がL Messageの有料プランのお支払いを継続する限り発生します。</div>
                                    <div>２　新規利用者が紹介リンクからL Messageの無料プランの利用を開始した段階では報酬は発生しませんが、無料プランから有料プランへと切り替えた月から紹介報酬が発生します。</div>
                                    <div>３　お客様が、紹介リンクを示した相手が、プランに関わらず既にL Messageを利用していた場合には、お客様には紹介報酬は発生しません。また、後からお客様を追加・変更することはできません。</div>
                                    <div>４　お客様自身が、新規利用者として有料プランに登録したとしても、紹介報酬発生の対象とはなりません。仮に紹介報酬をお支払いしていた際には、その金額は没収や返金請求をさせて頂く場合がございます。</div>
                                    <br>
                                    <div class="tt_term">第７条　紹介報酬の支払方法等</div>
                                    <div>１　新規利用者が有料プランの支払いを年間払いにより行う場合は、十二分割で紹介報酬をお支払いします。</div>
                                    <div>２　当社は、お客様に対し、お支払いは月末締め、翌月１５日払いとします。</div>
                                    <div>３　L Message紹介者情報登録フォームには、紹介報酬の受取のために事前に有効な銀行口座をご登録ください。口座の登録後、万が一変更の必要が発生した際には、毎月１０日までにサポート（info@missiona.co）までお問合せください</div>
                                    <div>４　紹介報酬をお支払いできない状況（振込口座情報が登録されていない、振込口座情報が有効ではないなど）が発生した場合は、紹介報酬の受取権利が消失する場合がございます。報酬を受け取れる権利は翌月の報酬支払日前日までとなります。翌月の報酬支払日以降は、前月の報酬受取権利が消失しますのでご注意ください。</div>
                                    <div>５　２０２３年１０月より、インボイス制度（登録番号）がない場合は、紹介報酬額から１０％を差し引いた金額をお支払いします。</div>
                                    <br>
                                    <div class="tt_term">第８条　権利帰属</div>
                                    <div>１　当社ウェブサイト等内に掲載されている文章、写真、イラスト、動画、音声等著作物の著作権は当社に帰属します。著作権法上認められた範囲内において使用する場合を除き、当社の許諾なく複製、公衆送信、翻案等利用することを禁じます。</div>
                                    <div>２　本サービスの過程において、当社が作成及び配信したテキストデータ、画像・動画データ等の知的財産権は当社又は当社がライセンスを受ける第三者に帰属します。ただし、当社がお客様に対し事前に利用を承諾し、お客様に配信をしたテキストデータ等については、当社が承諾した利用範囲内でのみ利用できます。</div>
                                    <br>
                                    <div class="tt_term">第９条　通知 </div>
                                    <div>１　お客様及び当社は、本規約及び個別利用規約に関する相手方への通知は、電子メール又は文書等、社会通念上適切と判断される通信手段により行うものとします。</div>
                                    <div>２　前項の規定に基づき通知を電子メールにより行う場合には、当該通知はインターネット上に配信されて相手方が閲覧可能な状態となった時に相手方に到達したものとします。</div>
                                    <div class="tt_term">第１０条　秘密保持義務</div>
                                    <div>１　お客様及び当社は、本規約及び個別利用規約に関連して相手方から開示を受け又は知り得た技術上又は営業上その他一切の業務上の情報（以下「秘密情報」という。）を厳重に保管・管理するものとします。ただし、次の各号にいずれか一つに該当する情報については秘密情報に含まれません。</div>
                                    <div style="margin-left: 15px">⑴　開示を受ける前に公知であったもの</div>
                                    <div style="margin-left: 15px">⑵　開示を受けた後に自己の責に帰すべき事由によることなく公知となったもの</div>
                                    <div style="margin-left: 15px">⑶　開示を受ける前に既に自ら保有していたもの</div>
                                    <div style="margin-left: 15px">⑷　正当な権限を有する第三者から秘密保持義務を負わずに入手したもの</div>
                                    <div style="margin-left: 15px">⑸　開示を受けた情報によることなく独自に開発したもの</div>
                                    <div>２　お客様及び当社は、相手方の事前の書面による承諾なく、秘密情報を第三者に開示又は漏洩してはなりません。ただし、法令の定めに基づき又は権限ある官公署から開示の要求があった場合は、当該法令の定めに基づく開示先に対し、必要な範囲内に限り開示することができます。</div>
                                    <div>３　お客様及び当社は、前項ただし書きに基づき秘密情報を第三者に開示する場合、事前に相手方に通知するものとします。</div>
                                    <br>
                                    <div class="tt_term">第１１条　個人情報の保護</div>
                                    <div>１　当社は、本規約及び個別利用規約に関してお客様から開示を受け又は知り得た個人情報（生存する個人に関する情報であって、当該情報に含まれる氏名、生年月日その他の記述等により特定の個人を識別することができるもの）を、当社が別途規定するプライバシーポリシーに従って適切に取り扱います。</div>
                                    <div>２　当社は、お客様の事前の書面による承諾なく、個人情報を第三者に開示、漏洩しません。ただし、法令の定めに基づき又は権限ある官公署から開示の要求があった場合は、当該法令の定めに基づく開示先に対し必要な範囲内に限り開示することができます。</div>
                                    <div>３　当社は、前項ただし書きに基づき個人情報を第三者に開示する場合、事前にお客様に通知しなければならないものとします。</div>
                                    <br>
                                    <div class="tt_term">第１２条　禁止行為</div>
                                    <div>お客様は、本サービスの利用に際して、以下に記載する行為を行ってはなりません。</div>
                                    <div>１　法令に違反する行為又は犯罪行為に関連する行為</div>
                                    <div>２　当社、他のお客様若しくは新規利用者又はその他の第三者に対する詐欺又は脅迫行為</div>
                                    <div>３　公序良俗に反する行為</div>
                                    <div>４　当社、他のお客様又はその他の第三者の知的財産権、肖像権、プライバシーの権利、名誉、その他の権利又は利益を侵害する行為</div>
                                    <div>５　当社が定める方法以外の方法で、本サービスの利用権又はデータを貸与、交換、譲渡、名義変更、売買、質入、担保提供その他の方法により第三者に利用させ又は処分する行為</div>
                                    <div>６　本サービスのネットワーク又はシステム等に過度な負担をかける行為</div>
                                    <div>７　本サービスの運営を妨害するおそれのある行為</div>
                                    <div>８　当社のネットワーク若しくはシステム等に不正にアクセスする行為、又は不正なアクセスを試みる行為</div>
                                    <div>９　第三者に成りすます行為</div>
                                    <div>１０　他のお客様のアカウントを利用する行為</div>
                                    <div>１１　当社が事前に承諾しない本サービス上での宣伝、広告、勧誘又は営業行為</div>
                                    <div>１２　本サービスの他のお客様の情報の収集行為</div>
                                    <div>１３　当社、他のお客様又はその他の第三者に不利益、損害、不快感を与える行為</div>
                                    <div>１４　反社会的勢力等への利益供与行為</div>
                                    <div>１５　新規利用者の勧誘に際し、新規利用者との間で、紹介料のキャッシュバックなど、登録の対価として金銭や財産的価値を有するものの交付を約束する行為及び金銭等を交付する行為</div>
                                    <div>１６　前各号の行為を直接又は間接に惹起し、又は容易にする行為</div>
                                    <div>１７　その他、当社が不適切と判断する行為</div>
                                    <br>
                                    <div class="tt_term">第１３条　本サービスの停止</div>
                                    <div>１　次の各号のいずれかの事態が生じたことにより、本サービスを提供できない場合、当社は予告なく本サービスの一部または全部を停止することがあります。</div>
                                    <div style="margin-left: 15px">(1)情報量の超過、または当社のサーバーの処理に負担が生じた場合</div>
                                    <div style="margin-left: 15px">(2)本サービスを提供する機器の故障、システム障害、管理する設備の停電、通信回線の異常等のトラブルが発生した場合</div>
                                    <div style="margin-left: 15px">(3)設備の管理保守およびシステム保守を必要とする場合</div>
                                    <div style="margin-left: 15px">(4)地震、火災、その他のやむを得ない事情による非常事態が発生した場合</div>
                                    <div style="margin-left: 15px">(5)法令に基づく措置が必要となった場合</div>
                                    <div style="margin-left: 15px">(6)その他、運営上および技術上の理由により、本サービスの停止が必要であると当社が判断した場合</div>
                                    <div style="margin-left: 15px">(7)その他の理由により、本サービスの提供が困難であると当社が判断した場合 </div>
                                    <div>２　前項の規定および第２条２項(サービスの変更)を実施する場合、当社は、その旨をお客様に対して当社が定める方法で、すみやかに告知するものとします。ただし、緊急の場合はこの限りではないものとします。当社は理由の如何を問わず、前項および第２条２項(サービスの変更)によって生じたお客様の損害および不利益について、一切責任を負わないものとします。</div>
                                    <div>３　当社は、第１項の理由により本サービスの一時停止を行った場合において、本サービスの継続的な提供が困難だと判断した場合、第１４条の規定に係わらずお客様に対して通知を行わず本サービスを終了することができるものとします。</div>
                                    <br>
                                    <div class="tt_term">第１４条　本サービスの終了</div>
                                    <div>当社は、お客様に対し３か月前までに通知を行うことにより本サービスを終了することができるものとします。</div>
                                    <br>
                                    <div class="tt_term">第１５条　本サービスの利用終了　</div>
                                    <div>１　お客様が希望するときは、当社ウェブサイト所定の利用終了手続きを行うことにより、本サービスの利用を終了することができます。</div>
                                    <div>２　お客様は、本サービスの利用終了手続きを行った場合、本サービスに関する一切の権利、特典を失うものとします。</div>
                                    <br>
                                    <div class="tt_term">第１６条　本サービス利用の解除</div>
                                    <div>１　お客様が次の各号の一に該当したときは、当社は、何らの通知・催告を必要とせず、即時に本サービスの利用停止、または、本サービスの全部ないし一部を解除することができるものとし、お客様は当社に対して負担する本サービス利用上の債務について期限の利益を喪失するものとします。</div>
                                    <div style="margin-left: 15px">⑴　本規約の条項に違反したとき</div>
                                    <div style="margin-left: 15px">⑵　登録利用者としての地位を喪失したとき</div>
                                    <div style="margin-left: 15px">⑶　本サービスの履行に関する、重大な過失または背任行為があったとき</div>
                                    <div style="margin-left: 15px">⑷　支払いの停止、差押、破産、会社更生手続開始、民事再生手続開始、清算開始の申立または解散の決議、他の会社からの吸収合併、会社分割、事業譲渡があったとき</div>
                                    <div style="margin-left: 15px">⑸　手形交換所の取引停止処分を受けたとき</div>
                                    <div style="margin-left: 15px">⑹　死亡、退職、業務停止処分などにより、本サービスの利用の前提となった資格を失ったとき</div>
                                    <div style="margin-left: 15px">⑺　仮差押・仮処分・差押(信用に関しないものを除く)、強制執行、競売の申立てまたは公租公課の滞納処分等を受けたとき</div>
                                    <div style="margin-left: 15px">⑻　営業の全部または重要な一部を第三者に譲渡しようとしたとき</div>
                                    <div style="margin-left: 15px">⑼　その他、当社がふさわしくないと判断した行為を行ったとき</div>
                                    <div>２　当社は、前項各号にかかわらず、本サービス利用の継続が困難と認めたときは、本規約に基づくお客様との間の契約を解除することができます。</div>
                                    <div>３　お客様が本規約の一つに違反し当社が損害を被ったときは、当社はその損害の賠償を請求することができるものとします。なお、損害賠償請求権の行使は、当社による解除権の行使を妨げないものとします。</div>
                                    <br>
                                    <div class="tt_term">第１７条　損害賠償</div>
                                    <div>１　当社は、本サービスの利用に関しお客様が被ったいかなる損害についても、当社に故意又は重大な過失がある場合を除いては、一切責任を負いません。</div>
                                    <div>２　本サービスの利用に関し当社が損害賠償責任を負う場合、当社がお客様に対して負う責任の範囲は、通常生ずべき直接の損害に限られるものとします。</div>
                                    <br>
                                    <div class="tt_term">第１８条　条項の無効</div>
                                    <div>万が一、裁判所によって本規約又は個別利用規約の各条項が無効、違法又は適用不能と判断された場合においても、当該条項を除く他の条項の有効性、合法性、及び適用可能性には、なんらの影響や支障が生じるものではありません。</div>
                                    <br>
                                    <div class="tt_term">第１９条　権利義務の譲渡禁止</div>
                                    <div>お客様は、当社の事前の書面による承諾がない限り、本規約及び個別利用規約上の地位又はこれらに基づく権利若しくは義務を第三者に譲渡し、担保に供し、又はその他の処分をしてはなりません。</div>
                                    <br>
                                    <div class="tt_term">第２０条　反社会的勢力の排除</div>
                                    <div>１　お客様及び当社は、それぞれ自己が以下各号の一に該当しないこと及び今後もこれに該当する行為を行わないことを表明及び保証し、相手方が以下各号の一に該当したとき又は該当していたことが判明したときは、直ちに本規約及び個別利用規約を解除することができます。</div>
                                    <div style="margin-left: 15px">⑴　自らが、暴力団、暴力団員、暴力団員でなくなった時から５年を経過しないもの、暴力団関係企業、総会屋若しくはこれらに準ずる者又はその構成員（以下総称して「反社会的勢力」という。）ではないこと。</div>
                                    <div style="margin-left: 15px">⑵　自らの役員（業務を執行する社員、取締役、執行役又はこれらに準ずる者）及び従業員が反社会的勢力ではないこと。</div>
                                    <div style="margin-left: 15px">⑶　自らの経営を実質的に支配する者又は主要株主が反社会的勢力ではないこと</div>
                                    <div style="margin-left: 15px">⑷　反社会的勢力に自己の名義を利用させ、本規約又は個別利用規約を締結するものでないこと。</div>
                                    <div style="margin-left: 15px">⑸　自ら又は第三者を利用して、相手方に対する脅迫的な言動又は暴力を用いる行為、若しくは偽計又は威力を用いて相手方の業務を妨害し、又は信用を毀損する行為をしないこと。</div>
                                    <div>２　お客様又は当社が前項の規定により契約を解除したときは、お客様又は当社は相手方に対して何ら賠償する責任を負いません。</div>
                                    <br>
                                    <div class="tt_term">第２１条　準拠法</div>
                                    <div>本規約及び個別利用規約に関する準拠法は、日本法とします。</div>
                                    <br>
                                    <div class="tt_term">第２２条　協議及び管轄裁判所</div>
                                    <div>１　本規約及び個別利用規約に定めのない事項に関してお客様と当社との間で問題及び疑義を生じた場合には、法令、商習慣等によるほか、お客様と当社の協議の上、信義誠実の原則に基づき円満に解決をするものとします。</div>
                                    <div>２　本規約及び個別利用規約に関する一切の紛争については、東京地方裁判所を第一審の専属合意管轄裁判所とします。</div>
                                    <div class="text-right" style="margin-top: 20px">制定:2023年4月25日</div>


                                </div>

                            </div>

                            <div class="text-center">
                                <button type="button" class="btn btn-sns-line btn-sns-line-success "
                                        v-if="datetime_apply_term_aff == null || datetime_apply_term_aff == ''"
                                        v-on:click="saveApplyTermAff"
                                        style="outline: none; width: 167px;margin: 0 20px 20px 20px; height: 38px; font-weight: 300; font-size: 16px">
                                    同意する
                                </button>
                                <button v-else class="btn btn-sns-line-lg btn-sns" data-dismiss="modal" style="width: 180px; font-weight: 300; font-size: 14px; background: #ffffff; border: 1px solid #D0D0D0; color: #888888">閉じる</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pdf_page " id="test_pdf" style="display: none;">
                    <div style="height: 1050px">
                        <h3 style="text-align: center; font-weight: 600; color: #222222; margin-bottom: 20px">支払い明細書</h3>
                        <div>
                            <div class="information row" style="margin-bottom: 50px">
                                <div class="pdf_name col-sm-8"></div>
                                <div class="pdf_date col-sm-4" style="font-weight: 400; color: #222222; text-align: right">発行日： @{{ setDatePdf(filter_month, 'YYYY/MM/01') }}</div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between" style="margin-bottom: 30px">
                            <div style="max-width: 50%">
                                <p style="font-weight: 400; color: #222222; font-size: 16px; margin-bottom: 5px">{{ $affiliateInfo->name }}御中</p>
                                <p style="font-weight: 400; color: #222222; font-size: 16px">@{{ setDate(filter_month, 'YYYY年MM月') }}ご紹介分</p>
                            </div>
                            <div>
                                <p style="font-weight: 400; color: #222222; font-size: 14px; text-align: right; margin-bottom: 5px">株式会社ミショナ</p>
                                <p style="font-weight: 400; color: #222222; font-size: 14px; text-align: right; margin-bottom: 25px">登録番号：T5011001133790</p>
                                <p style="font-weight: 400; color: #222222; font-size: 14px; text-align: right; margin-bottom: 5px">〒 150-0043</p>
                                <p style="font-weight: 400; color: #222222; font-size: 14px; text-align: right; margin-bottom: 5px">東京都渋谷区道玄坂1丁目10番8号</p>
                                <p style="font-weight: 400; color: #222222; font-size: 14px; text-align: right; margin-bottom: 5px">渋谷道玄坂東急ビル2F−C</p>
                            </div>
                        </div>
                        <div>
                            <div class="d-flex justify-content-between align-items-center" style="height: 45px; padding: 0 20px; background: #F8F8F8 0% 0% no-repeat padding-box;">
                                <span style="font-weight: 400; color: #222222; font-size: 16px">お支払い金額（税込）</span>
                                <span style="font-weight: 700; color: #222222; font-size: 16px">¥ @{{ show_amount == 0 ? '-' : formatNumber(totalMoneyForAffPdf) }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center" style="height: 45px; padding: 0 20px;">
                                <span style="font-weight: 400; color: #888888; font-size: 14px">小計（10%対象）</span>
                                <span style="font-weight: 400; color: #222222; font-size: 14px">¥ @{{ show_amount == 0 ? '-' : formatNumber(totalMoneyForAffPdf) }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center" style="height: 45px; padding: 0 20px; border-bottom: 1px solid #eeeeee">
                                <span style="font-weight: 400; color: #888888; font-size: 14px">うち消費税額合計</span>
                                <span style="font-weight: 400; color: #222222; font-size: 14px">¥ @{{ show_amount == 0 ? '-' : formatNumber(moneyTaxPdf) }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center" style="height: 45px; padding: 0 20px; border-bottom: 1px solid #eeeeee">
                                <span style="font-weight: 300; color: #222222; font-size: 14px">合計</span>
                                <span style="font-weight: 600; color: #222222; font-size: 14px">¥ @{{ show_amount == 0 ? '-' : formatNumber(totalMoneyForAffPdf) }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center" style="height: 45px; padding: 0 20px;">
                                <span style="font-weight: 400; color: #888888; font-size: 14px">税率別内訳</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center" style="height: 45px; padding: 0 20px;">
                                <span style="font-weight: 400; color: #222222; font-size: 14px">10%対象税抜額</span>
                                <span style="font-weight: 400; color: #222222; font-size: 14px">¥ @{{ show_amount == 0 ? '-' : formatNumber(moneyAfterTaxPdf) }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center" style="height: 45px; padding: 0 20px; border-bottom: 1px solid #eeeeee">
                                <span style="font-weight: 400; color: #222222; font-size: 14px">消費税</span>
                                <span style="font-weight: 400; color: #222222; font-size: 14px">¥ @{{ show_amount == 0 ? '-' : formatNumber(moneyTaxPdf) }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center" style="height: 45px; padding: 0 20px;">
                                <span style="font-weight: 400; color: #222222; font-size: 14px">内訳は別紙に記載</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 style="text-align: center; font-weight: 600; color: #222222; margin-bottom: 20px">支払い明細書 内訳</h3>
                        <div>
                            <div class="information row" style="margin-bottom: 50px">
                                <div class="pdf_name col-sm-8"></div>
                                <div class="pdf_date col-sm-4" style="font-weight: 400; color: #222222; text-align: right">発行日： @{{ setDatePdf(filter_month, 'YYYY/MM/01') }}</div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between" style="margin-bottom: 30px">
                            <div style="max-width: 50%">
                                <p style="font-weight: 400; color: #222222; font-size: 16px; margin-bottom: 5px">{{ $affiliateInfo->name }}御中</p>
                                <p style="font-weight: 400; color: #222222; font-size: 16px">@{{ setDate(filter_month, 'YYYY年MM月') }}ご紹介分</p>
                            </div>
                            <div>
                                <p style="font-weight: 400; color: #222222; font-size: 14px; text-align: right; margin-bottom: 5px">株式会社ミショナ</p>
                                <p style="font-weight: 400; color: #222222; font-size: 14px; text-align: right; margin-bottom: 25px">登録番号：T5011001133790</p>
                                <p style="font-weight: 400; color: #222222; font-size: 14px; text-align: right; margin-bottom: 5px">〒 150-0043</p>
                                <p style="font-weight: 400; color: #222222; font-size: 14px; text-align: right; margin-bottom: 5px">東京都渋谷区道玄坂1丁目10番8号</p>
                                <p style="font-weight: 400; color: #222222; font-size: 14px; text-align: right; margin-bottom: 5px">渋谷道玄坂東急ビル2F−C</p>
                            </div>
                        </div>
                    </div>
                    <table id="table_list_formanswer">
                        <thead>
                            <tr>
                                <th style="text-align: left">LINE公式アカウント名</th>
                                <th style="text-align: left">料金プラン</th>
                                <th style="text-align: left">備考</th>
                                <th style="text-align: right">報酬額（¥）</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in itemsPdf">
                                <td style="text-align: left; color: #222222">@{{ item.view_name ? item.view_name : '-' }}</td>
                                <td style="text-align: left; color: #222222">
                                    <span v-if="item.contract_type == 'standard'">スタンダード</span>
                                    <span v-else-if="item.contract_type == 'pro'">プロ</span>
                                    <span v-else-if="item.contract_type == 'enterprise'">おまとめ（スタンダード）</span>
                                    <span v-else-if="item.contract_type == 'enterprise_pro'">おまとめ（プロ）</span>
                                    <span v-else>-</span>
                                </td>
                                <td style="text-align: left; color: #222222">
                                    <span v-if="item.status_contract == 3">スタンダードプラン 解約済 (@{{ item.date_cancel_contract ? formatDate(item.date_cancel_contract) : formatDate(item.contract_updated_at) }})</span>
                                    <span v-else-if="item.user_aff_id == null">エルメアカウント削除済(@{{ formatDate(item.updated_at) }})</span>
                                    <span v-else-if="item.remain_day_upgrade > 0">アップグレード 日割り (@{{ item.remain_day_upgrade }})日分</span>
                                    <span v-else>-</span>
                                </td>
                                <td class="td-cell-payment-detail" style="text-align: right; color: #222222">
                                    <span v-if="item.plan_type == 2 || item.contract_type == 'free' || item.type_bill == -1 || show_amount == 0">-</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 style="">
                                <td style="font-weight: 600; font-size: 14px; color: #222222; text-align: left; border-bottom: transparent; background: #F5F5F5">合計</td>
                                <td style="border-bottom: transparent; background: #F5F5F5" colspan="2"></td>
                                <td style="font-weight: 600; font-size: 14px; color: #222222; text-align: right; border-bottom: transparent; background: #F5F5F5">@{{ show_amount == 0 ? '-' : formatNumber(totalMoneyForAff) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

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

        var rate_aff = null;
        var affiliateInfo = @json($affiliateInfo);
        var rateHistories = @json($rateHistories);
    </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="{{asset('js/html2pdf.min.js')}}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.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/v3/manage_aff.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));
                    }
                }
            });
        });

        // $('.show-link').click(function() {
        //     $('.link-information-on-referral-rewards').html('');
        //     var a = document.createElement('a');
        //     a.setAttribute('href', 'https://lme.jp/manual/affiliate/');
        //     a.setAttribute('target', 'blank');
        //     a.textContent = '←https://lme.jp/manual/affiliate/';
        //     $('.link-information-on-referral-rewards').append(a);
        // });
    </script>
@endpush