@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;
        color: #51595C;
        text-align: left;
        padding-top: 12px;
        height: 40px;
    }

    .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_user>li>a:hover {
        background-color: rgb(8, 191, 90);
        color: white !important;
    }

    /* .pagination_user {
        display: inline-block;
    } */

    .pagination_active>li>a:hover {
        background-color: rgb(8, 191, 90);
        color: white !important;
    }

    .pagination_inactive>li>a:hover {
        background-color: rgb(8, 191, 90);
        color: white !important;
    }

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

    #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="month"]::-webkit-calendar-picker-indicator {
        background: none;
        width: 100%;
        position: absolute;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        background: none;
        width: 100%;
        position: absolute;
    }

    input[type="datetime"]::-webkit-calendar-picker-indicator {
        background: none;
        width: 100%;
        position: absolute;
    }

    .box-content {
        padding: 30px 0 40px 20px;
        background-color: #F6F6F6;
        border-radius: 5px;
        /* margin: 10px; */
    }

    .form-search-friend {
        display: flex;
    }

    .form-search-friend input[type=text] {
        padding: 20px;
        font-size: 15px;
        border: 2px solid #E8E8E8;
        float: left;
        height: 35px;
        width: 600px;
        border-radius: 5px;
    }

    .form-search-friend input[type=text]:focus-visible {
        outline: none;
    }

    .btn-search {
        float: right;
        width: 80px;
        text-align: center;
        background: #96ADB2;
        font-size: 17px;
        color: #FFFFFF;
        margin-left: 30px;
        margin-right: 20px;
        border: 1px solid #FFFFFF;
        cursor: pointer;
        height: 43px;
        border-radius: 5px;
    }

    .btn-search:hover {
        opacity: 0.7;
    }

    .box_summary {
        display: flex;
        overflow: auto;
    }

    .item_row {
        display: flex;
        font-size: 11px;
        align-items: baseline;
    }

    .item_row .text {
        background-color: #F2F2F2;
        border: 1px solid #D3D3D3;
        color: #51595C;
        padding: 6px 8px;
        min-width: 190px;
    }

    .item_row .value {
        border: 1px solid #D3D3D3;
        padding: 6px 8px;
        min-width: 190px;
        text-align: right;
    }

    .item_row .name {
        background-color: #7D9195;
        border: 1px solid #D3D3D3;
        color: #FFFFFF;
        padding: 6px 8px;
        min-width: 380px;
        text-align: center;
    }

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

    .tab_data_right_top {
        background-color: #F6F6F6;
        display: flex;
        align-items: center;
        height: 47px;
        border-radius: 5px;
        padding-left: 15px;
        padding-right: 15px;
        width: fit-content;
        margin-top: 20px;
    }

    .tab_data_right_top>* {
        width: 186px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        color: #7D9195;
    }

    .tab_data_right_top .activeTab {
        background-color: #7D9195;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 3px;
        color: #FFFFFF;
        padding: 8px;
    }

    /* input.check_user {
        margin-top: 10px;
        margin-left: 5px;
        height: 20px;
        width: 20px;
        text-align: center;
        vertical-align: bottom;
        border: 1px solid #08BF5A !important;
        border-radius: 3px; */

        /* -moz-appearance:none;
        -webkit-appearance:none;
        -o-appearance:none; */
    /* } */


    INPUT[type=checkbox]
    {
        background-color: #fff;
        border-radius: 3px;
        border-width: 19px;
        /* outline: 2px solid rgba(211,211,211); */
        border: 2px solid rgba(211,211,211);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 22px;
        height: 22px;
        cursor: pointer;
        position: relative;
        top: 5px;
    }

    INPUT[type=checkbox]:focus
    {
        outline: 2px solid rgba(211,211,211);
        /* border-radius: 3px;
        border-width: 22px;
        width:  22px;
        height: 22px; */
    }

    INPUT[type=checkbox]:checked
    {
        background-color: #409fd6;
        background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 4px 4px no-repeat;
    }

</style>
@endpush
@section('content')
<article class="sub">
    <section class="masteredit" id="account_management" v-cloak>
        <h2 style="font-weight: bold;padding-left: 0;">ユーザーリスト</h2>
        <div class="row">
            <div class="col-sm-6">
                <div class="box-content">
                    <div class="title" style="font-size: 20px; margin-bottom: 5px;"> ユーザー検索</div>
                    <div class="form-search-friend">
                        <input type="text" name="keyword" v-model="keyword">
                        <button type="button" class="btn-search" v-on:click="searchUser">検索</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 box_summary" v-if="type_display == 0">
                <div class="col_cus_1">
                    <div class="item_row">
                        <div class="name">アカウント情報</div>
                    </div>
                    <div class="item_row">
                        <div class="text">総エルメアカウント数</div>
                        <div class="value">@{{allUsers}}件</div>
                    </div>
                    <div class="item_row">
                        <div class="text">当月新規エルメアカウント数</div>
                        <div class="value">@{{newUser}}件</div>
                    </div>
                    <div class="item_row">
                        <div class="text">当月新規LOA接続数</div>
                        <div class="value">@{{newBot}}件</div>
                    </div>
                    <div class="item_row">
                        <div class="text">当月解約数</div>
                        <div class="value">@{{botBillFail}}件</div>
                    </div>
                </div>
                <div class="col_cus_1">
                    <div class="item_row">
                        <div class="name">収益情報（当月）</div>
                    </div>
                    <div class="item_row">
                        <div class="text">全体売上</div>
                        <div class="value">¥@{{formatPrice(sumDaily)}}</div>
                    </div>
                    <div class="item_row">
                        <div class="text">当月新規売上</div>
                        <div class="value">¥@{{formatPrice(newAmountMonth)}}</div>
                    </div>
                    <div class="item_row">
                        <div class="text">1日あたり売上</div>
                        <div class="value" v-if="filter_date != start_month">¥@{{(sumDay)}}</div>
                        <div class="value" v-else>¥ -</div>
                    </div>
                    <div class="item_row">
                        <div class="text">LTV</div>
                        <div class="value">¥</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 10px;  ">
            <div class="col-sm-12">
                <div style="display: flex; align-items: center">
                    <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); showDataMonth(0)">月次</div>
                    </div>
                </div>
            </div>
        </div>

        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 30px;  " v-if="type_display == 0">
            <div class="row">
                <div class="col-sm-6">
                    <div class="tab_right_top">
                        <i class="fas fa-chevron-left" style="margin-left: 0;" v-on:click="preDate()"></i>
                        <input type="date" v-model="filter_date" id="datePick" class=" form-control text-center filter-date" v-on:change="filterDate" style="width: 300px; border: 1px solid #E8E8E8; height: 40px">
                        <i class="fas fa-chevron-right" v-on:click="nextDate()"></i>
                    </div>
                </div>
                <div class="col-sm-6">
                    <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: 15px; margin-top: 2px;height: 40px; ">CSV
                        <i style="margin-left: 5px" class="fas fa-arrow-alt-to-bottom"></i></button>
                </div>
            </div>
            <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; border: 1px solid rgb(232, 232, 232); height: 40px;font-size: 15px" v-model="per_page" v-on:change="changePerPage(per_page)">
                        <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; margin-top: 30px; " v-if="type_display == 1">
            <div class="row" style="width: 700px;">
                <div class="col-sm-5">
                    <div class="tab_right_top">
                        <i class="fas fa-chevron-left" style="margin-left: 0;" v-on:click="preMonth()" v-bind:disabled="dis_month == 1"></i>
                        <input type="month" v-model="filter_month"  class="form-control text-center filter-month" v-on:change="filterMonth(1)" style="width: 170px; border: 1px solid #E8E8E8; height: 40px">
                        <i class="fas fa-chevron-right" v-on:click="nextMonth()" v-bind:disabled="dis_month == 1"></i>
                    </div>
                </div>
                <div class="col-sm-2" style="padding-left: 0;">
                    <button type="button" class="btn btn-sns-line btn-sns-line-dark " style="height:40px ;" v-bind:class="dis_month == 1" v-on:click="showAllData(1)">全期間</button>
                </div>
                <div class="col-sm-5" style="padding: 0;">
                    <input class="check_user" type="checkbox" value="1" v-bind:class="type_enterprise_year == 1" v-on:click="showDataMonth(1)" onclick="check(0)">アクティブ
                    <input class="check_user" type="checkbox" value="2" v-bind:class="type_enterprise_year == 2" style="margin-left: 25px;" v-on:click="showDataMonth(2)" onclick="check(1)">非アクティブ
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div v-if="type_enterprise_year == 0">
                        <button type="button" class="btn btn-sns-line btn-sns-line-success" :disabled="user_items.length == 0" v-on:click="exportCsvUser" style="background-color: #F4FBF2; border: 2px solid #08BF5A; color: #08BF5A !important; margin-left: 15px; margin-top: 2px;height: 40px; ">CSV
                            <i style="margin-left: 5px" class="fas fa-arrow-alt-to-bottom"></i></button>
                    </div>
                    <div v-if="type_enterprise_year == 1">
                        <button type="button" class="btn btn-sns-line btn-sns-line-success" :disabled="active_list.length == 0" v-on:click="exportCsvActive" style="background-color: #F4FBF2; border: 2px solid #08BF5A; color: #08BF5A !important; margin-left: 15px; margin-top: 2px;height: 40px; ">CSV
                            <i style="margin-left: 5px" class="fas fa-arrow-alt-to-bottom"></i></button>
                    </div>
                    <div v-if="type_enterprise_year == 2">
                        <button type="button" class="btn btn-sns-line btn-sns-line-success" :disabled="inative_list.length == 0" v-on:click="exportCsvInactive" style="background-color: #F4FBF2; border: 2px solid #08BF5A; color: #08BF5A !important; margin-left: 15px; margin-top: 2px;height: 40px; ">CSV
                            <i style="margin-left: 5px" class="fas fa-arrow-alt-to-bottom"></i></button>
                    </div>
                </div>
                <div style="display: flex;  align-items: flex-end; font-size: 15px; " class="col-sm-8">
                    <span style="margin-right: 16px;word-break: keep-all;">表示件数</span>
                    <span v-if="type_display == 1">
                        <span style="word-break: keep-all; margin-right: 10px; font-size: 18px;" v-if="type_enterprise_year == 0">@{{ pagination_user.user_total }}件</span>
                        <span style="word-break: keep-all; margin-right: 10px; font-size: 18px;" v-if="type_enterprise_year == 1">@{{ pagination_active.active_total }}件</span>
                        <span style="word-break: keep-all; margin-right: 10px; font-size: 18px;" v-if="type_enterprise_year == 2">@{{ pagination_inactive.inactive_total }}件</span>
                    </span>

                    <select class="form-control my_class input_border" style="width: 91px; border: 1px solid rgb(232, 232, 232); height: 40px;font-size: 15px" v-model="per_page" v-on:change="changePerPage(per_page)">
                        <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>

        <table class="table" style="background-color: #FFFFFF; width: 100%;" v-if="type_display == 0">
            <tbody>
                <tr>

                    <th style=" border-radius: 5px 0 0 5px; width: 10%;">登録日</th>
                    <th style="width: 11%;">最終操作日
                    </th>
                    <th style="width: 20%;">ユーザー名
                    </th>
                    <th style="width: 20%;">アドレス
                    </th>
                    <th style="width: 300px">登録URL</th>
                    <th style=" border-radius: 0 5px 5px 0; width: 20%;">紹介者
                    </th>
                    <th style="width: 10%"></th>
                </tr>
                <tr v-if="items.length > 0" v-for="(item,index) in items">
                    <td>@{{ formatDate(item.created_at) }}</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 style="display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 300px;" href="item.path_intro">@{{ item.path_intro }}</a>
                    </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>
                        <a style="text-decoration: none;"  target="_blank" :href="url_login+'admin/login-user-by-id/'+item.hasdId" class="btn btn-sns-line btn-sns-line-success">
                            ログイン
                        </a>
                    </td>
                </tr>
                <tr v-show="items.length == 0">
                    <td colspan="7"> データがありません。</td>
                </tr>
            </tbody>
        </table>

        <div>
            <table class="table" style="background-color: #FFFFFF; width: 100%;" v-if="type_display == 1">
                <tbody v-if=" type_enterprise_year == 0">
                    <tr>
                        <th style=" border-radius: 5px 0 0 5px; width: 10%;">登録日
                        </th>
                        <th style="width: 11%;">最終操作日
                        </th>
                        <th style="width: 20%;">ユーザー名
                        </th>
                        <th style="width: 20%;">アドレス
                        </th>
                        <th style="width: 300px">登録URL</th>
                        <th style=" border-radius: 0 5px 5px 0; width: 20%;">紹介者
                        </th>
                        <th style="width: 10%"></th>
                    </tr>
                    <tr v-if="user_items.length > 0" v-for="(item,index) in user_items">
                        <td>@{{ formatDate(item.created_at) }} </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 style="display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 300px;" :href="item.path_intro">@{{ item.path_intro }}</a>
                        </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>
                            <a style="text-decoration: none;"  target="_blank" :href="url_login+'admin/login-user-by-id/'+item.hasdId" class="btn btn-sns-line btn-sns-line-success">
                                ログイン
                            </a>
                        </td>
                    </tr>
                    <tr v-show="user_items.length == 0">
                        <td colspan="7"> データがありません。</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div>
            <table class="table" style="background-color: #FFFFFF; width: 100%; margin-top: -20px;" v-if="type_display == 1">
                <tbody v-if=" type_enterprise_year == 1">
                    <tr>
                        <th style=" border-radius: 5px 0 0 5px; width: 10%;">登録日
                        </th>
                        <th style="width: 11%;">最終操作日
                        </th>
                        <th style="width: 20%;">ユーザー名
                        </th>
                        <th style="width: 25%;">アドレス
                        </th>
                        <th style="width: 300px">登録URL</th>
                        <th style=" border-radius: 0 5px 5px 0; width: 20%;">紹介者
                        </th>
                    </tr>
                    <tr v-if="active_list.length > 0" v-for="(item,index) in active_list">
                        <td>@{{ formatDate(item.created_at) }} </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 style="width: 300px;">
                            <a style="display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 300px;" :href="item.path_intro">@{{ item.path_intro }}</a>
                        </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>
                    </tr>
                    <tr v-show="active_list.length == 0">
                        <td colspan="5"> データがありません。</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div>
            <table class="table" style="background-color: #FFFFFF; width: 100%;  margin-top: -20px;" v-if="type_display == 1">
                <tbody v-if=" type_enterprise_year == 2">
                    <tr>
                        <th style=" border-radius: 5px 0 0 5px; width: 10%;">登録日
                        </th>
                        <th style="width: 11%;">最終操作日
                        </th>
                        <th style="width: 20%;">ユーザー名
                        </th>
                        <th style="width: 25%;">アドレス
                        </th>
                        <th style="width: 300px">登録URL</th>
                        <th style=" border-radius: 0 5px 5px 0; width: 20%;">紹介者
                        </th>
                    </tr>
                    <tr v-if="inative_list.length > 0" v-for="(item,index) in inative_list">
                        <td>@{{ formatDate(item.created_at) }} </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 style="display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 300px;" :href="item.path_intro">@{{ item.path_intro }}</a>
                        </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>
                    </tr>
                    <tr v-show="inative_list.length == 0">
                        <td colspan="5"> データがありません。</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div v-if="type_display == 0" v-show="pagination.last_page >1">
            <paginate :page-count="pagination.last_page" :click-handler="getData" :active-class="'disabled'" :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>

        <div v-if="type_display == 1">
            <div v-if=" type_enterprise_year == 0" v-show="pagination_user.last_page >1">
                <paginate :page-count="pagination_user.last_page" :click-handler="getData" :active-class="'disabled'" :prev-text="'prev'" :next-text="'next'" :container-class="'pagination'" style="display: inline-block;">
                    <span slot="prevContent">
                        <i class="glyphicon glyphicon-menu-left"></i>
                    </span>
                    <span slot="nextContent">
                        <i class="glyphicon glyphicon-menu-right"></i>
                    </span>
                </paginate>
            </div>
            <div v-if=" type_enterprise_year == 1" v-show="pagination_active.last_page >1">
                <paginate :page-count="pagination_active.last_page" :click-handler="getData" :active-class="'disabled'" :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>
            <div v-if="type_enterprise_year == 2" v-show="pagination_inactive.last_page >1">
                <paginate :page-count="pagination_inactive.last_page" :click-handler="getData" :active-class="'disabled'" :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>
        </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 !!}";
    var domainCurrent = window.location.origin+'/';
    if(domainCurrent == "{{ env('DOMAIN_WEB_ADMIN') }}"){
        var urlLogin = "{{ env('URL_OUTSIDE_STEP') }}";
    }else{
        var urlLogin = "{{ env('DOMAIN_WEB_ADMIN') }}";
    }
</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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>


<script>
    var position_befor = null;
    $(document).ready(function() {
        $.datepicker.setDefaults($.datepicker.regional["ja"]);
        $('.datepicker').datepicker({
            dateFormat: 'yyyy-mm-dd',
            // format         : 'yyyy-mm-dd',
            todayHighlight: true,
            autoclose: true,
        });
    });

    function check(position) {
        var checkboxes = document.getElementsByClassName("check_user");

        const valuecheck = checkboxes[position].value;
        for (var item of checkboxes) {
            if (item.value != valuecheck) {
                item.checked = false;
            }
        }

    }

    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