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

        .center input, .center button {
            width: 50%;
            margin: 20px auto;
            font-size: 100%;
            text-align: center;
            padding: 10px;
        }

        div.btn button {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 10px 10px;
            font-size: 85%;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0;
            width: 50%;
            cursor: pointer;

        }

        .btn {
            border-radius: 4px !important;
            font-weight: bold;
        }

        .btn:hover {
            opacity: 0.7;
        }

        a {
            text-decoration: underline;
            font-weight: bold;
        }

        input {
            height: 34px;
        }

        td {
            color: #51595C;
        }

        #tbl-aff.table > tbody > tr > th {
            border: none !important;
            background-color: #7D9195 !important;
        }

        #tbl-aff.table > tbody > tr > td {
            border: none;
            border-bottom: 1px solid #F2F2F2;
        }
        [v-cloak] {
            display: none !important;
        }
        .active_btn{
            background-color: #08BF5A;
            border-color: #08BF5A;
            width: 110px;
            height: 34px;
        }
        .noactive_btn{
            background-color: #FFFFFF;
            border: 2px solid #08BF5A;
            width: 110px;
            height: 34px;
            color: #08BF5A
        }
        .btn-success:focus, .btn-success:active, .btn-success:hover{
            color: #fff;
            background-color: #08BF5A;
            border-color: #08BF5A;
        }
        .btn-success:focus{
            opacity: 1 !important;
        }
    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="masteredit" id="manage_payment_admin" v-cloak>
            <h2 style="font-weight: bold">アフィリエイター管理</h2>
            <div class="content-page">
                <div style="display: flex; align-items: center; justify-content: space-between">
                    <div>
                        <span style="margin-right: 30px">表示件数</span> @{{ items.length }}件
                        <button type="button" class="btn btn-success  "
                                v-on:click="showBillData"
                                v-bind:class="(action == 'bill') ? 'active_btn ' : 'noactive_btn '"
                                style="    margin-left: 30px;margin-right: 11px;">報酬発生のみ </button>
                        <button type="button" class="btn btn-success"
                                v-on:click="showAllData"
                                v-bind:class="(action == 'all') ? 'active_btn ' : 'noactive_btn ' "
                        >一覧 </button>
                    </div>
                    <div style="display: flex; align-items: end">
                        <button type="button" class="btn btn-primary "
                                :disabled="items.length == 0"
                                v-on:click="exportCsv"
                                style="background-color: #08BF5A; border-color: #08BF5A; ">CSVダウンロード <i
                                    class="fas fa-arrow-alt-to-bottom"></i></button>

                        <button type="button" class="btn btn-primary "
                                style="background-color: #96ADB2; border-color: #96ADB2; margin-right: 15px ; width: 68px; margin-left: 15px"
                                v-bind:class="{ active_btn: action == 'current_month' }"
                                v-on:click="showMonthCurrent">当月
                        </button>
                        <div style="position: relative;">
                            {{--                            <input type="month" name="filter_month" class="filter-month" id="filter_month"--}}
                            {{--                                   v-model="filter_month"--}}
                            {{--                                   v-on:change="filterData"--}}
                            {{--                                   style=" width: 150px;height: 34px; border: 1px solid #96ADB2;    border-radius: 4px;"/>--}}
                            <input type="text" name="filter_month" class="filter-month datepicker" id="filter_month"
                                   v-model="filter_month"
                                   v-on:click="filterData"
                                   style="width: 150px;height: 34px;  padding-left: 25px">
                            <i class="fal fa-calendar" style="position: absolute;left: 7px;top: 10px;"></i>
                            {{--                            <i class="fal fa-calendar" style="position: absolute;left: 7px;top: 10px;"></i>--}}
                        </div>


                    </div>
                </div>
                {{--        <div class="aff-info row">--}}

                {{--            <div class="filter-monthly-admin col-md-6">--}}
                {{--                <form action="{{route('managePayment')}}" method="get">--}}
                {{--                    <span>対象月</span>--}}
                {{--                    <input type="month" name="filter_month" class="filter-month" id="filter_month"--}}
                {{--                           @if(!empty($getTime))value="{{$getTime}}"@endif>--}}
                {{--                    <input type="submit" class="btn btn-warning btn-filter" id="get_data" value="検索">--}}
                {{--                </form>--}}
                {{--            </div>--}}
                {{--            <span class="total-user-intro col-md-6" style="text-align: right">--}}
                {{--                <button id="change_status" class="btn btn-primary change_status">一括支払済みに</button>--}}
                {{--                <button id="change_status" class="btn btn-primary un_change_status">一括未払に</button>--}}
                {{--            </span>--}}
                {{--        </div>--}}
                <table class="table" id="tbl-aff">
                    <tbody>
                    <tr>
                        <th style="text-align: left;border-radius: 4px 0 0 4px;">アフィリエイター名 <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('name')"></th>
                        <th  style="text-align: left">アドレス <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('email')"></th>
                        <th>報酬発生件数 <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('count_user_intro')"></th>
                        <th>銀行番号 <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('bank_number')"></th>
                        <th>支店番号 <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('branch_number')"></th>
                        <th>預金種目 <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('account_type')"></th>
                        <th>口座番号 <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('account_number')"></th>
                        <th>受取人名 <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('account_holder_name')"></th>
                        <th style="text-align: center;border-radius: 0 4px 4px 0;">報酬金額 <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('total_amount')"></th>
                    </tr>
                    {{--            @foreach($affInfo as $key => $aff)--}}
                    <tr v-if="items.length > 0" v-for="(item,index) in items">
                        <td  style="text-align: left"><a :href="'manage-payment/' +item.user_id">@{{item.name}}</a></td>
                        <td  style="text-align: left">@{{item.email}}</td>
                        <td>@{{item.count_user_intro}}</td>
                        <td>@{{item.admin_bank_number}}</td>
                        <td>@{{item.branch_number}}</td>
                        <td>@{{item.account_type}}</td>
                        <td>@{{item.account_number}}</td>
                        <td>@{{item.account_holder_name}}</td>
                        <td  style="text-align: center;">
                            <div style="display: flex;">
                                <div class="font-weight-bold text-right" style="width: 76%;">
                                    <span> @{{formatCurrency(item.total_amount)}}</span>
                                </div>
                                <div class="font-weight-bold text-left" style="width: 38%;">
                                    円
                                </div>
                            </div>
                        </td>
                        {{--                        <td>--}}
                        {{--                            --}}{{--                        <a href="{{route('managePaymentDetail', [$aff->user_id, 'filter_month' => $filter_m]) }}" class="btn btn-info">詳細</a>--}}
                        {{--                        </td>--}}
                        {{--                        <td>--}}
                        {{--                            <span v-if="item.payment_confirm == false">未払</span>--}}
                        {{--                            <span>支払済</span>--}}

                        {{--                        </td>--}}
                        {{--                        <td>--}}
                        {{--                            --}}{{--                        <input type="checkbox" class="change_status_payment" value="{{$aff->user_id}}">--}}
                        {{--                        </td>--}}
                    </tr>
                    <tr v-show="items.length == 0">
                        <td colspan="9"> データがありません。</td>
                    </tr>
                    {{--            @endforeach--}}
                    </tbody>
                </table>
            </div>
        </section>
    </article>
@endsection
@push('script')
    {{--    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>--}}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="/js/vue-paginate.js"></script>
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script type="application/javascript"
            src="/js/admin/manage-payment.js?v={{config("sns-line.version")}}"></script>
    <script>
        $(function () {
            // $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
            $('.filter-month').datepicker({
                format         : 'yyyy/mm',
                todayHighlight : true,
                autoclose      : true,
                // theme:'dark',
            });
        });
    </script>
    {{--    <script>--}}
    {{--        $(document).ready(function () {--}}
    {{--            $.datepicker.setDefaults($.datepicker.regional["ja"]);--}}
    {{--            $('.datepicker').datepicker({--}}
    {{--                format: 'yyyy-mm-dd',--}}
    {{--                todayHighlight: true,--}}
    {{--                autoclose: true,--}}
    {{--            });--}}
    {{--        });--}}

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