@extends('layout.admin_v2.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;
        }

        td{
            color: #51595C;
        }
        #bot_management .table>tbody>tr>th{
            border: none !important;
            background-color: #7D9195 !important;

            padding-top: 12px;
        }
        .table>tbody>tr>td{
            border: none ;
            border-bottom: 1px solid #F2F2F2;

        }
        [v-cloak] {
            display: none !important;
        }
        .active_btn{
            opacity: 0.5;
        }
        .pagination >li >a:hover{
            background-color: rgb(8, 191, 90);
            color: white !important;
        }
        .fade {
            transform: unset !important;
            animation: unset !important;
        }
        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }
        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important; ;
            animation-duration: unset !important;
        }
        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            -o-transition: -unset !important;
            transition: unset !important;
            -webkit-transform:unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
            transform: unset !important;
        }
        label:after {
            display: none;

        }
        input[type='radio']{
            transform: scale(1.5);
        }
        #bot_management input[type='checkbox']{
            margin-top: 0px;
        }
        .type-job label>*{
            margin-bottom: 15px;
        }
    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="masteredit" id="bot_management" v-cloak>
            <h2 style="font-weight: bold;padding-left: 0;">LOA情報一覧123</h2>
            <div style="display: flex; align-items: center; justify-content: space-between">
                <div>
                    <span style="margin-right: 30px">表示件数</span>   @{{  items.length }}件
                    <button v-if="selected.length >0"
                            type="button" class="btn btn-primary"
                            data-toggle='modal'
                            data-target='#modalSettingTypeJob'
                            style="background: #5799DB; border: none; outline: none; margin-left: 30px"> 業種一括変更</button>
                    <button v-else
                            type="button" class="btn btn-primary"
                            disabled
                            style="background: #5799DB; border: none; outline: none; margin-left: 30px"> 業種一括変更</button>

                </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>

            <table class="table">
                <tbody>
                <tr>
                    <th class="checkth" style="width: 5%; border-radius: 4px 0 0 4px;text-align: left">
                        <input type="checkbox" name="" value="" v-model="selectAll">

                    </th>
                    <th class="text-left"  >接続日
{{--                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('created_at')">--}}
                    </th>
                    <th class="text-left"  >最終操作日
{{--                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('last_login_time')">--}}
                    </th>
                    <th class="text-left"  >LOA名称
{{--                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('username')">--}}
                    </th>
                    {{--<th>Paypal連携</th>--}}
                    <th class="text-left"  >主管理者アドレス
{{--                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('email')">--}}
                    </th>
                    <th class="text-left"  >プラン</th>
                    <th class="text-center">業種</th>
                    <th class="text-center">友だち数</th>
                    <th class="text-center">エルメ配信数</th>
                    <th style="text-align: center; border-radius: 0 4px 4px 0;">LOA配信数
{{--                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('name_introduce')">--}}
                    </th>
                </tr>

                    <tr v-if="items.length > 0" v-for="(item,index) in items">
                        <td class="text-left"  >
                            <input type="checkbox" name="check_item[]" :value="item.id" v-model="selected">
                        </td>
                        <td class="text-left"  >@{{ formatDate(item.created_at) }}</td>
                       <td class="text-left"  >@{{formatTimeStepToDate(item.last_login_time) }}</td>
                        <td class="text-left"  >
                            <a :href="'manage-payment/' +item.admin_id+'?form_p=1'">
                               @{{ item.view_name }}
                            </a>

                        </td>
                        <td class="text-left" >@{{item.email}}</td>
{{--                        Loại plan--}}
{{--                        S=　Standard--}}
{{--                        SB=Standard monthly--}}
{{--                        F =Free　--}}
                        <td class="text-left">
                            <div v-if="item.contract_type == 'free' || item.plan_type == 2">F</div>
                            <div v-else-if="item.contract_type == null && item.plan_type == 1">SB</div>
                            <div v-else-if="item.contract_type == 'standard' && item.contract_bill_type == 'month'">SB</div>
                            <div v-else-if="item.contract_type == 'standard' && item.contract_bill_type == 'year'">S</div>
                            <div v-else-if="item.contract_type == 'enterprise'">EP</div>
                            <div v-else>Pro</div>

{{--                            <span v-if="item.plan_type == 2">F</span>--}}
{{--                            <span v-else-if="item.plan_type != 2 && item.bill_bot_type == 'month'">--}}
{{--                                SB--}}
{{--                            </span>--}}
{{--                            <span v-else> S</span>--}}
{{--                            @{{ item.contract_type }}-----}}
{{--                            @{{ item.number_slot }}-----}}
{{--                            @{{ item.current_contract_id }}-----}}
{{--                            @{{ item.id }}--}}
                        </td>
                        <td class="text-center">
                          @{{ item.type_job }}
                        </td>
                        <td class="text-center">@{{ item.all_friend }}</td>
                        <td class="text-center">@{{ item.plan_type == 1 ? '-' : (item.free_send_count < 1000 ? item.free_send_count : 1000)}}
                        <td class="text-center"> @{{ item.message_sent_count }}</td>
                    </tr>

                <tr v-show="items.length == 0">
                    <td colspan="10"> データがありません。</td>
                </tr>
                </tbody>
            </table>

{{--            <div 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 class="modal fade" id="modalSettingTypeJob"
                 tabindex="-1" role="dialog"
                 aria-labelledby="modalSettingTypeJob">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header" style="border-bottom: none; margin-bottom: 0">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <i class="fas fa-times ic-close" style="color: rgba(125,145,149,1) !important;"></i></button>
                            <h2 class="text-center" style="margin-bottom: 0"> 業種変更</h2>

                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-5 type-job" >
                                    <label>
                                        <input type="radio" name="type_job"
                                               v-model="type_job" value="0">
                                        <span>未設定に戻す</span>
                                    </label> <br>
                                    <label>
                                        <input type="radio" name="type_job"
                                               v-model="type_job" value="1">
                                        <span>1 オフライン</span>
                                    </label> <br>
                                    <label>
                                        <input type="radio" name="type_job"
                                               v-model="type_job" value="2">
                                        <span>2 オンライン</span>
                                    </label> <br>
                                    <label>
                                        <input type="radio" name="type_job"
                                               v-model="type_job" value="3">
                                        <span>3 情報系</span>
                                    </label>
                                </div>
                            </div>


                        </div>

                        <div class="text-center">
                            <button type="button" class="btn btn-success "
                                    v-on:click="saveChangeTypeJob"
                                    style="background: #08BF5A; border: none; outline: none; width: 114px;margin: 20px;">更新</button>
                        </div>
                    </div>
                </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 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/bots_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