@extends('layout.admin.main')
@push('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" 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;
        }
        #account_management .table>tbody>tr>th{
            border: none !important;
            background-color: #F2F2F2 !important;
            text-align: left;
            padding: 10px;
            color: #51595C;
        }
        .table>tbody>tr>td{
            border: none ;
            border-bottom: 1px solid #F2F2F2;
            text-align: left;
        }
        [v-cloak] {
            display: none !important;
        }
        .active_btn{
            opacity: 0.5;
        }
        .pagination >li >a:hover{
            background-color: rgb(8, 191, 90);
            color: white !important;
        }
        .pagination .active a{
            background-color: #08BF5A;
            color: white;
        }
        .title_tbl{
            background-color: #7D9195;
            color: #ffffff;
        }

        .box-content{
            padding: 38px 33px;
            background-color:#F6F6F6 ;
            border-radius: 5px;
            /*margin: 10px;*/
        }
        .title{
            font-size: 18px;
            margin-bottom: 10px;
        }
        .form-search-friend{
            display: flex;
        }
        .form-search-friend input[type=text] {
            padding: 10px;
            font-size: 15px;
            border: 1px solid #96ADB2;
            float: left;
            height: 35px;
            margin-right: 0px;
            border-right: none;
            border-radius: 4px 0 0 4px;
        }
        .form-search-friend input[type=text]:focus-visible {
            outline: none;
        }
        .form-search-friend .btn-search {
            float: left;
            width: 7%;
            padding: 0;
            background: #ffffff;
            font-size: 17px;
            border: 1px solid #96ADB2;
            border-left: none;
            cursor: pointer;
            border-left: none;
            height: 35px;
            border-radius: 0 4px 4px 0;
        }
        .input_border{
            border: 2px solid #E8E8E8 !important;
            height: 39px !important;
        }
        .tblSumary, th, td {
            border: 1px solid #D3D3D3;
            border-collapse: collapse;
            padding: 6px 7px;
            font-size: 12px;
            margin-top: 0;
            margin-bottom: 0;
        }
        .tblSumary tbody>tr>th{
            background-color: #7D9195 !important;
            border-color: #D3D3D3;
            padding: 6px;

        }
        .tblSumary tbody>tr>td{
            border-color: #D3D3D3;
        }
        .tt_td{
            background-color: #F2F2F2;
            font-size: 11px;
        }
        .tab_data_right_top{
            background-color: #F6F6F6;
            display: flex;
            align-items: center;
            height: 44px;
            border-radius: 5px;
            padding-left: 15px;
            padding-right: 15px;
            width: fit-content;
            margin-top: 20px;
        }
        .tab_data_right_top > *{
            width: 152px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            color: #7D9195;
        }
        .tab_data_right_top .activeTab{
            background-color: #7D9195;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;
            color: #FFFFFF;
            padding: 5px;

        }
        .tab_right_top{
            display: flex;
            align-items: center;
            color: #51595C;
        }
        .tab_right_top i{
            background-color: #F2F2F2;
            border-radius: 5px;
            color: white;
            padding: 12px 8px;
            cursor: pointer;
        }
        .tab_right_top > *{
            margin-left: 9px;
        }
        #account_management .filter-date {
            background: url(/images/ic-calendar_new.png) left 9px center no-repeat;
            appearance: none;
            -webkit-appearance: none; /* Support for Google Chrome và Safari. */
            -moz-appearance: none; /* Support for firefox. */
            -ms-appearance: none; /* Support for Internet Explorer. */
            -o-appearance: none; /* Support for Opera. */
            position: relative;
        }
        #account_management .filter-date:hover{
            background-color: #F8F8F8;
        }
        input[type="date"]::-webkit-inner-spin-button,
        input[type="date"]::-webkit-calendar-picker-indicator,
        input[type="month"]::-webkit-inner-spin-button,
        input[type="month"]::-webkit-calendar-picker-indicator {
            /*display: none;*/
            /*visibility: hidden;*/
            /*min-width: 0;*/
            /*max-width: 0;*/
            /*padding: 0;*/
            /*border: 0;*/
            background: none;
            width: 100%;
            position: absolute;
            /*-webkit-appearance: none;*/
        }
        label:after{
            content: unset;
        }
        .cus_box_date {
            position: relative;  border: 1.5px solid #E8E8E8; margin-left: 15px; height: 38px;  border-radius: 4px;
        }
        .cus_box_date label{
            position: absolute;
            left: 20px;
            top: 9px;
            opacity: 1;
        }
        .cus_box_date input{
            opacity: -0.9;
            width: 136px;
            color: white;
            margin-right: 15px;
        }
        #account_management .filter-month {
            /*background: url(/images/ic-calendar_new.png) left 9px center no-repeat;*/
            appearance: none;
            -webkit-appearance: none; /* Support for Google Chrome và Safari. */
            -moz-appearance: none; /* Support for firefox. */
            -ms-appearance: none; /* Support for Internet Explorer. */
            -o-appearance: none; /* Support for Opera. */
            position: relative;
        }
        #account_management .filter-month:hover{
            background-color: #F8F8F8;
        }
        /*checkbox*/
        #account_management input[type=checkbox] {
            display:none;
        }
        #account_management .form-check {
            display: block;
            margin-bottom: 2px;
        }

        #account_management .form-check input {
            padding: 0;
            height: initial;
            width: initial;
            margin-bottom: 0;
            display: none;
            cursor: pointer;
        }

        #account_management .form-check label {
            position: relative;
            cursor: pointer;
        }

        #account_management .form-check label:before {
            content:'';
            -webkit-appearance: none;
            border: 1.5px solid #D3D3D3;
            border-radius: 4px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            margin-right: 5px;
            margin-bottom: 4px;
            padding: 10px;
        }

        #account_management .form-check input:checked + label:after {
            content: '';
            display: block;
            position: absolute;
            top: 4px;
            left: 8px;
            width: 7px;
            height: 12px;
            border: solid #51595C;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="masteredit" id="account_management" v-cloak>
            <h2 style="font-weight: bold;padding-left: 0; font-size: 22px">ユーザー一覧</h2>
            <div class="row">
                <div class="col-sm-6">
                    <div class="box-content">
                        <div class="title"> ユーザー検索</div>
                        <div style="display: flex; align-items: center;">
                            <input type="text" class="form-control input_border" name="keyword" v-model="keyword">
                            <button type="button" class="btn btn-sns-line btn-sns-line-dark" style="margin-left: 15px"
                                    v-on:click="searchUser">検索</button>
                        </div>
{{--                        <div class="form-search-friend">--}}
{{--                            <input type="text" name="keyword" v-model="keyword">--}}
{{--                            <button type="button" class="btn-search " v-on:click="searchUser"--}}
{{--                            ><i class="fa fa-search" style="color:#96ADB2 "></i></button>--}}
{{--                        </div>--}}
                    </div>

                </div>
                <div class="col-sm-6">
                    <table v-if="type_display == 0" class="tblSumary" style="width:100%">
                        <tr>
                            <th colspan="2" style="width: 50%;">アカウント情報</th>
                            <th colspan="2">収益情報（当月）</th>
                        </tr>
                        <tr>
                            <td  class="tt_td text-left" style="">総エルメアカウント数</td>
                            <td class="text-right">15,0000 件</td>
                            <td class="tt_td text-left">全体売上</td>
                            <td class="text-right" >¥ 10,000,000</td>
                        </tr>
                        <tr>
                            <td  class="tt_td text-left" style="">当月新規エルメアカウント数</td>
                            <td class="text-right">150 件</td>
                            <td class="tt_td text-left">当月新規売上</td>
                            <td class="text-right" >¥ 1,000,000</td>
                        </tr>
                        <tr>
                            <td  class="tt_td text-left" style="">当月新規LOA接続数</td>
                            <td class="text-right">100 件</td>
                            <td class="tt_td text-left">1日あたり売上</td>
                            <td class="text-right" >¥ 600,000</td>
                        </tr>
                        <tr>
                            <td  class="tt_td text-left" style="">当月解約数</td>
                            <td class="text-right">50 件</td>
                            <td class="tt_td text-left">LTV</td>
                            <td class="text-right" >¥ 5,000</td>
                        </tr>


                    </table>

                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="tab_data_right_top">
                        <div v-bind:class="(type_display == 0) ? 'activeTab' : ''" v-on:click="openTabContent(0)">日次</div>
                        <div v-bind:class="(type_display == 1) ? 'activeTab' : ''" v-on:click="openTabContent(1)">月次</div>
                    </div>
                </div>

            </div>
            <div class="row" style="margin-top: 20px" v-if="type_display == 0">
                <div class="col-md-12" style="display: flex;
                                    align-items: center;
                                    justify-content: space-between;">
                    <div style="display: flex">
                        <div class="tab_right_top">
                            <i class="fas fa-chevron-left" style="margin-left: 0;" v-on:click="preDate()"></i>
                            <div class="cus_box_date" style="">
                                <label style="">@{{formatDateJP(filter_date)}}</label>
                                {{--                            <label class="input-group-addon icon-calendar" for="date_start"--}}
                                {{--                                   style="position: absolute;position: absolute;    top: 1px;">--}}
                                {{--                                <i class="fal fa-calendar" style="color: #7D9195; font-size: 18px"></i>--}}
                                {{--                            </label>--}}
                                <input  type="date" v-model="filter_date"
                                        v-on:change="filterDate"
                                        class="form-control  input-border "
                                        name="filter_date"
                                        id="filter_date"
                                        style=" ">
                            </div>
                            <i class="fas fa-chevron-right" v-on:click="nextDate()"></i>
                        </div>
                        <button type="button" class="btn btn-sns-line btn-sns-line-success"
                                :disabled="items.length == 0"
                                v-on:click="exportCsv"
                                style="background-color: #F4FBF2; border:2px solid #08BF5A; color: #08BF5A !important; margin-left: 20px">CSV <i class="fas fa-arrow-alt-to-bottom"></i></button>

                    </div>
                    <div style="display: flex;  align-items: flex-end;    font-size: 15px;">
                        <span style="margin-right: 16px;word-break: keep-all;">表示件数</span>
                        <span  style="word-break: keep-all; margin-right: 10px;    font-size: 18px;">@{{  pagination.total }}件</span>
                        <select class="form-control my_class input_border" style="width: 91px;" v-model="per_page" v-on:change="changePerPage(per_page)">
                            <option value="10">10</option>
                            <option value="100">100</option>
                            <option value="200">200</option>
                            <option value="500">500</option>
                        </select>
                        <div style="margin-left: 3px;word-break: keep-all;">件表示</div>
                    </div>

                </div>
            </div>
            <div class="row" style="margin-top: 20px" v-if="type_display == 1">
                <div class="col-md-12" style="display: flex;
                                    align-items: center;
                                    justify-content: space-between;">
                    <div style="display: flex;     align-items: baseline;">
                        <div class="tab_right_top">
                            <i class="fas fa-chevron-left" style="margin-left: 0;" v-on:click="preMonth()"></i>
                            <input type="month" v-model="filter_month" class="form-control text-center filter-month"
                                   v-on:change="filterMonth"
                                   style="width: 145px; border: 1px solid #E8E8E8; height: 40px">
                            <i class="fas fa-chevron-right" v-on:click="nextMonth()"></i>

                        </div>
                        <button type="button" class="btn btn-primary "  v-bind:class="{ active_btn: action == 'all' }"
                                style="background-color: #7D9195; border-color: #96ADB2;    margin-left: 20px;
                                                height: 39px;
                                                margin-right: 15px;
                                                width: 80px;"
                                v-on:click="showAllData">全期間</button>
                        <div class="form-check">
                            <input type="checkbox" name="is_show_active" id="is_show_active"
                                   v-on:change="changeStatus"
                                   v-model="is_show_active" value="1">
                            <label class="font-weight-bold form-check-label" for="is_show_active" style="font-size: 15px; margin-left: 20px">アクティブ
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" name="is_show_inactive" id="is_show_inactive"
                                   v-on:change="changeStatus"
                                   v-model="is_show_inactive" value="1">
                            <label class="font-weight-bold form-check-label" for="is_show_inactive" style="font-size: 15px; margin-left: 20px">非アクティブ
                            </label>
                        </div>


                    </div>
                    <div style="display: flex;  align-items: flex-end;    font-size: 15px;">
                        <button type="button" class="btn btn-sns-line btn-sns-line-success"
                                :disabled="items.length == 0"
                                v-on:click="exportCsv"
                                style="background-color: #F4FBF2; height: 40px; border: 2px solid #08BF5A; color: #08BF5A !important; margin-right: 20px">CSV <i class="fas fa-arrow-alt-to-bottom"></i>
                        </button>
                        <span style="margin-right: 16px;word-break: keep-all;">表示件数</span>
                        <span  style="word-break: keep-all; margin-right: 10px;    font-size: 18px;">@{{  pagination.total }}件</span>
                        <select class="form-control my_class input_border" style="width: 91px;" v-model="per_page" v-on:change="changePerPage(per_page)">
                            <option value="10">10</option>
                            <option value="100">100</option>
                            <option value="200">200</option>
                            <option value="500">500</option>
                        </select>
                        <div style="margin-left: 3px;word-break: keep-all;">件表示</div>
                    </div>

                </div>
            </div>

{{--            <div style="display: flex; align-items: center; justify-content: space-between">--}}
{{--                <div>--}}
{{--                    <span style="margin-right: 30px">表示件数</span>   @{{  pagination.total }}件--}}
{{--                </div>--}}
{{--                <div style="display: flex; align-items: end">--}}

{{--                    <button type="button" class="btn btn-primary "--}}
{{--                            v-bind:class="{ active_btn: action == 'all' }"--}}
{{--                            style="background-color: #96ADB2; border-color: #96ADB2; margin-left: 15px; margin-right: 15px " v-on:click="showAllData">全期間</button>--}}
{{--                    <button type="button" class="btn btn-primary "--}}
{{--                            v-bind:class="{ active_btn: action == 'before_month' }"--}}
{{--                            style="background-color: #96ADB2; border-color: #96ADB2; margin-right: 15px ; width: 68px"  v-on:click="showBeforeMonth" >前月</button>--}}
{{--                    <div style="position: relative;">--}}
{{--                        <input type="text" name="fromDay" class="datepicker datetimepicker_from" v-model="fromDay"--}}
{{--                               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>--}}
{{--                    </div>--}}
{{--                    <div>から</div>--}}
{{--                    <div style="position: relative;">--}}
{{--                        <input type="text" name="toDay" class="datepicker datetimepicker_to"  v-model="toDay"--}}
{{--                               v-on:click="filterData"--}}
{{--                               style="width: 150px; height: 34px; margin-left: 15px; padding-left: 25px"/>--}}
{{--                        <i class="fal fa-calendar" style="position: absolute;left: 22px;top: 10px;"></i>--}}
{{--                    </div>--}}


{{--                </div>--}}
{{--            </div>--}}
{{--            <a href="{{route('addAccountForm')}}" style="float: right"><button class="btn btn-primary btn-sm">管理者登録</button></a>--}}


{{--                <div style="margin-top: 5px;">--}}
{{--                    <button type="submit" class="btn btn-primary btn-sm left">登録日</button>--}}
{{--                </div>--}}

            <table class="table">
                <tbody>
                <tr>

                    <th  style=" border-radius: 4px 0 0 4px;">接続日
{{--                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('created_at')">--}}
                    </th>
                    <th>最終操作日
{{--                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('last_login_time')">--}}
                    </th>
                    <th>ユーザー名
{{--                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('username')">--}}
                    </th>
                    {{--<th>Paypal連携</th>--}}
                    <th>アドレス
{{--                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('email')">--}}
                    </th>
                    <th style=" border-radius: 0 4px 4px 0;">紹介者
{{--                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('name_introduce')">--}}
                    </th>
                </tr>
{{--                @foreach($listUser as $k => $v)--}}
                    <tr v-if="items.length > 0" v-for="(item,index) in items">
                        <td>@{{ formatDate(item.created_at) }}</td>
{{--                        <td>{{$v->last_login_time ? \Carbon\Carbon::createFromTimestamp($v->last_login_time)->format('Y-m-d H:i:s') : ''}}</td>--}}
                        <td>@{{formatTimeStepToDate(item.last_login_time) }}</td>
                        <td><a :href="'manage-payment/' +item.id+'?form_p=1'">
                                @{{item.last_name}} @{{item.username}}
                            </a> <br>
                            <span>@{{item.company_name}}</span>
                        </td>
                        <td>@{{item.email}}</td>
                        <td>
                            <a v-if="item.name_introduce" :href="'manage-payment/' +item.id_introduce +'?form_p=1'">
                                @{{item.name_introduce  }}
                            </a>
                            <span v-else>-</span>
                        </td>
{{--                        <td>{{$v->max_bot}}</td>--}}
                        {{--<td>{{$v->require_paypal ? 'あり' : 'なし'}}</td>--}}


{{--                        <td>{{ $v->allow_accept_aff == 1 ? 'ON' : 'OFF' }}</td>--}}
{{--                        <td>--}}
{{--                            <div>--}}
{{--                                <a href="{{route('editAccountForm',['id' => $v->id])}}">--}}
{{--                                    <button class="btn btn-primary btn-sm" style="width: 95px;">更新</button>--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                            <div style="margin-top: 5px;">--}}
{{--                                <a href="{{route('botManagement', ['userId' => $v->id])}}">--}}
{{--                                    <button class="btn btn-info btn-sm" style="width: 95px;">BOT管理</button>--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                            <div style="margin-top: 5px;">--}}
{{--                                <a href="javascript:void(0)" onclick="deleteUser({{$v->id}})">--}}
{{--                                    <button class="btn btn-danger btn-sm" style="width: 95px;">削除</button>--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </td>--}}
                    </tr>
{{--                @endforeach--}}
                <tr v-show="items.length == 0">
                    <td colspan="5"> データがありません。</td>
                </tr>
                </tbody>
            </table>
{{--            <button type="button" class="btn btn-sns-line btn-sns-line-success"  :disabled="next_page == 1" v-on:click="nextPage(next_page)">次の100件へ--}}
{{--            </button>--}}
            <ul class="pagination"  style="margin-bottom: 10px;    margin-top: 0;" v-if="pagination.total > pagination.per_page">
                <li v-if="pagination.current_page > 1" class="btn_prev">
                    <a href="#" aria-label="Previous"
                       style="    padding: 4px 9px;"
                       @click.prevent="changePage(pagination.current_page - 1)">
                        <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-left"></i></span>
                    </a>
                </li>
                <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
                    <a href="#" @click.prevent="changePage(page)" style="border: unset">@{{ page }}</a>
                </li>
                <li v-if="pagination.current_page < pagination.last_page" class="btn_next">
                    <a href="#" aria-label="Next" style="    padding: 4px 9px;" @click.prevent="changePage(pagination.current_page + 1)">
                        <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-right"></i></span>
                    </a>
                </li>
                </li>
            </ul>
{{--            <div v-show="pagination.last_page>1">--}}
{{--                <paginate--}}
{{--                        :page-count="pagination.last_page"--}}
{{--                        :click-handler="getData"--}}
{{--                        :active-class="'disabled'"--}}
{{--                        :active-class="'active'"--}}
{{--                        :prev-text="'prev'"--}}
{{--                        :next-text="'next'"--}}
{{--                        :container-class="'pagination'">--}}
{{--                        <span slot="prevContent">--}}
{{--                            <i class="glyphicon glyphicon-menu-left"></i>--}}
{{--                        </span>--}}
{{--                    <span slot="nextContent">--}}
{{--                            <i class="glyphicon glyphicon-menu-right"></i>--}}
{{--                        </span>--}}
{{--                </paginate>--}}
{{--            </div>--}}

        </section>
    </article>
@endsection
@push('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>
        var keyword = "{!! $keyword !!}";
    </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/account_management.js?v={{config("sns-line.version")}}"></script>

    <script>
        $(document).ready(function()
        {
            // $.datepicker.setDefaults($.datepicker.regional["ja"]);
            $('.datepicker').datepicker({
                format         : 'yyyy/mm/dd',
                todayHighlight : true,
                autoclose      : true,
            });
        });
        function deleteUser(user_id) {
            message = '削除しますが、宜しいですか？';
            bootbox.confirm(message, function (result) {
                if (result) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: `/admin/delete-account/${user_id}`,
                        method: 'post',
                        beforeSend: function () {
                            $.LoadingOverlay('show');
                        },
                        success: function (response) {
                            $.LoadingOverlay('hide');
                            if (response.success) {
                                window.location.reload();
                            }
                        },
                        error: function () {
                            $.LoadingOverlay('hide');
                        }
                    });
                }
            })
        }
    </script>
@endpush