@extends('layout.admin_v2.main')
@push('css')
    <link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="{{asset('css/affiliate_info/v3/affiliate_info.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/_assets/modules/supper_admin/css/user/detail.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="{{asset('css/qr_code/qr_code_v2_new.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/_assets/modules/supper_admin/css/affiliater.css?v={{config("sns-line.version")}}" type="text/css">
@endpush
@section('content')
    <div class="detail" id="affiliater" v-cloak>
        <nav class="breadcrumb breadcrumb01">
            <ul>
                {{--                <li><a href="/basic/rich-menu">ユーザーリスト</a></li>--}}
                {{--                <li>ユーザー詳細 編集</li>--}}
            </ul>
        </nav>
        <div class="page-title">
            @{{ type == 'monthly' ? '代理店報酬' : '単発報酬' }}
        </div>
        <div class="content mt-4" style="position: relative; margin-right: 15px;">
            <div class="btn-right-top gr-search"
                 style="position: absolute;align-items: center; background: #ffffff; right: 35px; top: 10px; z-index: 10">
                <input type="text" class="form-control search_for_temp"
                       v-model="keyword"
                       placeholder="検索"
                       @keyup.enter="remoteLoadItems()"
                       style="padding: 0 0 2px 10px;
                          height: 38px;
                          border: none;
                          box-shadow: none;
                          width: 200px;
                          font-size: 14px;
                          transition: 0.4s;
                          color: #222222"
                >
                <i class="far fa-search" style="color: #888888 !important; font-size: 20px; width: 40px; height: 40px; display: flex;align-items: center; justify-content: center" @click="remoteLoadItems()"></i>
                <img v-if="keyword"
                     style="transform: translateY(-50%);
                                            top: 50%;
                                            right: 35px;
                                            position: absolute;
                                            cursor: pointer;
                                            width: 20px;"
                     @click="clearSearch()"
                     src="/images/icon-clear-search.png">
            </div>
            <div class="tabs tab01">
                <div class="tab-btns">
                    <div class="group" style="position: relative" @click="setTab(1)">
                        <div class=""></div>
                        <button class="tab-btn active" data-tab="receive">支払い報酬</button>
                    </div>
                    <div class="group" style="position: relative" @click="setTab(2)">
                        <div class=""></div>
                        <button class="tab-btn" data-tab="aff-transfer">支払いリスト</button>
                    </div>
                    <div class="group" style="position: relative" @click="setTab(3)">
                        <div class=""></div>
                        <button class="tab-btn" data-tab="aff-hidden">非表示リスト</button>
                    </div>
                    <div class="tab-underline"></div>
                </div>
                <div class="tab-contents">
                    <div class="tab-content" data-tab="receive" :class="{ 'active': tab == 1 }" style="height: 100%">
                        <div class="d-flex justify-content-between align-items-center">
                            <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 filter-month1"
                                                   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-month1')"></div>
                                        </div>
                                        <i class="far fa-chevron-right" v-on:click="nextMonth()"></i>
                                    </div>
                                </div>
                                <button class="button-ripple button08 mr-3" @click="exportCsvOld()" style="height: 40px; width: 120px; padding: 0">
                                    <svg class="mr-2" id="download-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                        <rect id="download-outlined_Frame_Background_" data-name="download-outlined [Frame Background]" width="16" height="16" fill="none"/>
                                        <path id="形状" d="M11.188,11H.5a.5.5,0,0,1-.5-.5V7.406a.125.125,0,0,1,.125-.125h.938a.125.125,0,0,1,.124.125V9.813H10.5V7.406a.125.125,0,0,1,.125-.125h.937a.125.125,0,0,1,.125.125V10.5a.5.5,0,0,1-.5.5ZM5.844,7.876a.123.123,0,0,1-.1-.048L4,5.612a.123.123,0,0,1-.014-.131A.125.125,0,0,1,4.1,5.41h1.15V.125A.125.125,0,0,1,5.373,0h.938a.125.125,0,0,1,.125.125V5.413H7.593a.125.125,0,0,1,.113.071.123.123,0,0,1-.014.131L5.942,7.828a.123.123,0,0,1-.1.048Z" transform="translate(2.156 2.5)" fill=""/>
                                    </svg>
                                    振込用CSV
                                </button>
                                <button class="button-ripple button03" @click="exportCsvNew()" style="height: 40px; width: 120px; font-weight: 300; padding: 0">
                                    <svg class="mr-2" id="download-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                        <rect id="download-outlined_Frame_Background_" data-name="download-outlined [Frame Background]" width="16" height="16" fill="none"/>
                                        <path id="形状" d="M11.188,11H.5a.5.5,0,0,1-.5-.5V7.406a.125.125,0,0,1,.125-.125h.938a.125.125,0,0,1,.124.125V9.813H10.5V7.406a.125.125,0,0,1,.125-.125h.937a.125.125,0,0,1,.125.125V10.5a.5.5,0,0,1-.5.5ZM5.844,7.876a.123.123,0,0,1-.1-.048L4,5.612a.123.123,0,0,1-.014-.131A.125.125,0,0,1,4.1,5.41h1.15V.125A.125.125,0,0,1,5.373,0h.938a.125.125,0,0,1,.125.125V5.413H7.593a.125.125,0,0,1,.113.071.123.123,0,0,1-.014.131L5.942,7.828a.123.123,0,0,1-.1.048Z" transform="translate(2.156 2.5)" fill=""/>
                                    </svg>
                                    会計用CSV
                                </button>
                            </div>
                            <div class="tbl-transfer">
                                <div class="t-head">
                                    <div class="col">振込件数</div>
                                    <div class="col">振込金額</div>
                                </div>
                                <div class="t-body">
                                    <div class="col">@{{ formatNumber(totalAff) }}</div>
                                    <div class="col">¥ @{{ formatNumber(totalAmount) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="wrap-scroll-table" style="margin-top: 10px">
                            <table id="table_list_formanswer">
                                <thead style="border-radius: 5px; background: unset">
                                <tr style="border-radius: 5px;">
                                    <th @click="sortByField('invoice_number')"
                                        style="width: 100px; 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: 100px; text-align: center;">管理番号</th>
                                    <th class="btnth" style="width: 300px; text-align: left;">代理店登録名</th>
                                    <th class="btnth" style="width: 300px; text-align: left;">エルメユーザー名</th>
                                    <th class="btnth" style="width: 300px; text-align: left;">会社名</th>
                                    <th class="btnth" style="width: 300px; text-align: left;">メールアドレス</th>
                                    <th class="btnth" style="width: 150px; text-align: center;">銀行番号</th>
                                    <th class="btnth" style="width: 150px; text-align: center;">支店番号</th>
                                    <th class="btnth" style="width: 150px; text-align: left;">口座番号</th>
                                    <th class="btnth" style="width: 250px; text-align: left;">口座名義</th>
                                    <th class="btnth" style="width: 250px; text-align: left;">銀行名</th>
                                    <th class="btnth" style="width: 250px; text-align: left;">支店名</th>
                                    <th @click="sortByField('count_pm')"
                                        style="width: 150px; cursor: pointer; text-align: right">
                                        <div style="display: flex; justify-content: end">
                                            報酬発生件数
                                            <div style="position: relative; margin-left: 15px">
                                                <i class="fas fa-sort"></i>
                                            </div>
                                        </div>
                                    </th>
                                    <th class="btnth" style="width: 150px; text-align: center;">インボイス登録</th>
                                    <th class="btnth pending-last-column" style="width:250px; text-align: center; cursor: pointer;">
                                        <div style="display: flex; justify-content: center" @click="sortAmount()">
                                            報酬額
                                            <div style="position: relative; margin-left: 15px">
                                                <i class="fas fa-sort"></i>
                                            </div>
                                        </div>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in items">
                                        <td style="text-align: center">@{{ index + 1 }}</td>
                                        <td style="text-align: center"></td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.name }}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <a :href="'/admin/user/' + item.user_id" class="text-truncate underline">@{{ item.username }}</a>
                                        </td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.company_name ? item.company_name : '-' }}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.email }}</span>
                                        </td>
                                        <td style="text-align: center">@{{ item.admin_bank_number }}</td>
                                        <td style="text-align: center">@{{ item.branch_number }}</td>
                                        <td style="text-align: left">@{{ item.account_number }}</td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.account_holder_name }}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.bank_name }}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.branch_name }}</span>
                                        </td>
                                        <td style="text-align: right">@{{ formatNumber(item.count_pm) }}</td>
                                        <td style="text-align: center">@{{ item.invoice_number ? '〇︎' : '-' }}</td>
                                        <td class="pending-last-column d-flex" style="text-align: right">
                                            <div style="flex: 1 1 auto; align-content: center">@{{ '¥ ' + formatNumber(amountBillMonth(item)) }}</div>
                                            <div class="" style="width: 100px; flex: 0 0 auto; display: flex; justify-content: center">
                                                <div class="dropDown dropDown01">
                                                    <i class="fal fa-ellipsis-h" style="font-size: 16px; color: rgb(224, 224, 224);"></i>
                                                    <ul>
                                                        <li class="">
                                                            <button @click="openModalChangeMoney(index, item)">報酬額の変更</button>
                                                        </li>
                                                        <li class="">
                                                            <button @click="openModalChangeTransferInfo(index, item)">振込情報編集</button>
                                                        </li>
                                                        <li class="delete">
                                                            <button @click="flagDisplay(item, 0)">非表示にする</button>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-content" data-tab="aff-transfer" :class="{ 'active': tab == 2 }" style="height: 100%">
                        <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 filter-month2"
                                               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-month2')"></div>
                                    </div>
                                    <i class="far fa-chevron-right" v-on:click="nextMonth()"></i>
                                </div>
                            </div>
                            <label class="custom-checkbox">
                                <input type="checkbox" true-value="1" false-value="0" v-model="is_warning" @change="loadDetailAffs()">
                                <span class="checkbox-box"></span>
                                <span class="checkbox-label">アラート対象のみ表示</span>
                            </label>
                        </div>
                        <div class="wrap-scroll-table" style="margin-top: 10px">
                            <table id="table_list_formanswer">
                                <thead style="border-radius: 5px; background: unset">
                                <tr style="border-radius: 5px;">
                                    <th @click="sortByField('payment_detail_aff.payment_date')"
                                        style="width: 120px; 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;">代理店登録名</th>
                                    <th class="btnth" style="width: 250px; text-align: left;">エルメユーザー名</th>
                                    <th class="btnth" style="width: 250px; text-align: left; padding-left: 25px">会社名</th>
                                    <th class="btnth" style="width: 300px; text-align: left; padding-left: 25px">メールアドレス</th>
                                    <th class="btnth" style="width: 300px; text-align: left; padding-left: 25px">紹介LOA名称</th>
                                    <th class="btnth" style="width: 250px; text-align: left; padding-left: 25px">主管理者名</th>
                                    <th class="btnth" style="width: 300px; text-align: left; padding-left: 25px">メールアドレス</th>
                                    <th class="btnth" style="width: 100px; text-align: left;">プラン</th>
                                    <th class="btnth" style="width: 150px; text-align: right;">報酬金額</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in items" :class="{ 'warning': isWarningIp(item) }">
                                        <td style="text-align: left">@{{ formatDate(item.payment_date ? item.payment_date : item.created_at, 'YYYY/MM/DD') }}</td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.aff_info?.name }}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <a :href="'/admin/user/' + item.u1_intro_id" class="text-truncate underline">@{{ item.u1_username }}</a>
                                        </td>
                                        <td style="text-align: left; padding-left: 25px">
                                            <span class="text-truncate">@{{ item.u1_company_name }}</span>
                                        </td>
                                        <td style="text-align: left; padding-left: 25px">
                                            <span class="text-truncate">@{{ item.aff_info?.email }}</span>
                                        </td>
                                        <td style="text-align: left; padding-left: 25px">
                                            <span class="text-truncate">@{{ item.bot_name ? item.bot_name : item.first_bot?.view_name }}</span>
                                        </td>
                                        <td style="text-align: left; padding-left: 25px">
                                            <span class="text-truncate">@{{ item.u2_username }}</span>
                                        </td>
                                        <td style="text-align: left; padding-left: 25px">
                                            <span class="text-truncate">@{{ item.u2_email }}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <span v-if="item.remain_day < 365">月払い</span>
                                            <span v-else-if="item.remain_day < 730">年払い(@{{ item.number_bill }}/12)</span>
                                            <span v-else>年払い(@{{ item.number_bill }}/24)</span>
                                        </td>
                                        <td style="text-align: right">@{{ '¥ ' + formatNumber(amountByRate(item)) }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="box-pagination mt-4">
                            <pagination :pagination="pagination" @change_page="changePage" @change_limit="changeLimit" :arr_limit="arr_limit"></pagination>
                        </div>
                    </div>
                    <div class="tab-content" data-tab="aff-hidden" :class="{ 'active': tab == 3 }">
{{--                        <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 filter-month3"--}}
{{--                                               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-month3')"></div>--}}
{{--                                    </div>--}}
{{--                                    <i class="far fa-chevron-right" v-on:click="nextMonth()"></i>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="wrap-scroll-table" style="margin-top: 10px">
                            <table id="table_list_formanswer">
                                <thead style="border-radius: 5px; background: unset">
                                <tr style="border-radius: 5px;">
                                    <th class="btnth" style="width: 100px; text-align: center;">管理番号</th>
                                    <th class="btnth" style="width: 300px; text-align: left;">代理店登録名</th>
                                    <th class="btnth" style="width: 300px; text-align: left;">エルメユーザー名</th>
                                    <th class="btnth" style="width: 300px; text-align: left;">会社名</th>
                                    <th class="btnth" style="width: 300px; text-align: left;">メールアドレス</th>
                                    <th class="btnth" style="width: 150px; text-align: center;">銀行番号</th>
                                    <th class="btnth" style="width: 150px; text-align: center;">支店番号</th>
                                    <th class="btnth" style="width: 150px; text-align: left;">口座番号</th>
                                    <th class="btnth" style="width: 250px; text-align: left;">口座名義</th>
                                    <th class="btnth" style="width: 250px; text-align: left;">銀行名</th>
                                    <th class="btnth" style="width: 250px; text-align: left;">支店名</th>
                                    <th class="btnth" style="width: 150px; text-align: center;">インボイス登録</th>
                                    <th class="btnth pending-last-column" style="width:100px;"></th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in items">
                                        <td style="text-align: center">@{{ item.admin_account_number }}</td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.name }}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <a :href="'/admin/user/' + item.user_id" class="text-truncate underline">@{{ item.username }}</a>
                                        </td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.company_name ? item.company_name : '-' }}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.email }}</span>
                                        </td>
                                        <td style="text-align: center">@{{ item.admin_bank_number }}</td>
                                        <td style="text-align: center">@{{ item.branch_number }}</td>
                                        <td style="text-align: left">@{{ item.account_number }}</td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.account_holder_name }}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.bank_name }}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <span class="text-truncate">@{{ item.branch_name }}</span>
                                        </td>
                                        <td style="text-align: center">@{{ item.invoice_number ? '〇︎' : '-' }}</td>
                                        <td class="pending-last-column" style="text-align: center;">
                                            <button class="button-ripple button08" style="width: 80px; height: 32px; font-weight: 600" @click="flagDisplay(item, 1)">再表示</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('supper_admin.modals.change_money')
        @include('supper_admin.modals.change_transfer_info')
    </div>
@endsection
@push('script')
    <script>
        var type = '{{ $type }}';
    </script>
    <script src="/js/media/vue.min.js"></script>
    <script src="/js/moment.min.js"></script>
    <script src="/_assets/commons/js/datetime.js?v={{config("sns-line.version")}}"></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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="/_assets/commons/js/lme.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/pagination.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/modules/supper_admin/js/affiliater.js?v={{config("sns-line.version")}}"></script>
@endpush