@extends('layout.admin.main')
@push('css')
    <style>

        .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;
        }
    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="masteredit" id="bot_management" v-cloak>
            <h2>BOT更新履歴</h2>
            <div class="row">

                <div class="col-md-5" style="display: flex;align-items: baseline">
                    <div style="word-break:keep-all;margin-right: 10px">
                        BOT名
                    </div>
                     <input class="form-control" name='keyword' v-model="keyword" type="text" style="height: 34px">
                </div>
                <div> <button class="btn-primary btn" v-on:click="searchKeyWord()">検索</button></div>

            </div>
            <p style="margin-top: 13px;font-size: 14px;">
                合計アカウント数 @{{  items.length }}
            </p>
            <table class="table table-bordered">
                <tbody>
{{--                sửa lại để hiển thị  --}}
{{--                ログインID (login ID) 、--}}
{{--                BOT名 (botname ) 、--}}
{{--                追加日 (ngày add ) 、--}}
{{--                現在のプラン (plan hiện tại ) 、--}}
{{--                友だち数 (số friend) 、--}}
{{--                配信数(số message đã gửi theo data của line)--}}
                <tr>
                    <th>ログインID
                        <i class="fa fa-sort ml-3" v-on:click="sortHeader('id')"></i>
                    </th>
                    <th>BOT名  <i class="fa fa-sort ml-3" v-on:click="sortHeader('view_name')"></i></th>
                    <th>追加日  <i class="fa fa-sort ml-3" v-on:click="sortHeader('created_at')"></i></th>
                    <th>更新日  <i class="fa fa-sort ml-3" v-on:click="sortHeader('expired_date_bill')"></i></th>
                    <th>現在のプラン  <i class="fa fa-sort ml-3" v-on:click="sortHeader('plan_type')"></i></th>
                    <th>友だち数  <i class="fa fa-sort ml-3" v-on:click="sortHeader('number_friend')"></i></th>
                    <th>配信数  <i class="fa fa-sort ml-3" v-on:click="sortHeader('mess_sent_count')"></i></th>
                    <th>ツール配信数 <i class="fa fa-sort ml-3" v-on:click="sortHeader('free_send_count')"></i></th>
                </tr>
                    <tr v-if="items.length > 0 " v-for="(item, index) in items">

                        <td>@{{ item.key + 1}}</td>
                        <td>
                            @{{ item.view_name }}
                        </td>
                        <td>@{{item.created_at}}</td>
                        <td>@{{item.expired_date_bill}}</td>
                        <td>
                            <span v-if="item.plan_type == 2">フリー</span>
                            <span v-else-if="item.plan_type != 2 && item.bill_bot_type == 'month'">
                                スタンダード（月額）
                            </span>
                            <span v-else> スタンダード（年間）</span>
                        </td>
                        <td>@{{ item.all_friend }}</td>
                        <td>@{{ item.message_sent_count }}</td>
                        <td>@{{ item.plan_type == 1 ? '-' : item.free_send_count}}
                        </td>

                    </tr>

                </tbody>
            </table>
{{--            <nav v-if="pagination.last_page >1">--}}
{{--                <ul class="pagination">--}}
{{--                    <li class="page-item">--}}
{{--                        <button type="button" class="page-link" :disabled="pagination.current_page == 1"--}}
{{--                                v-on:click="prevData()" style="width: 30px; height: 30px"--}}
{{--                        > <i class="fa fa-angle-left" style="font-size: 25px;--}}
{{--    color: #337ab7;"></i> </button>--}}
{{--                    </li>--}}

{{--                    <li class="page-item">--}}
{{--                        <button type="button"  :disabled="pagination.current_page == pagination.last_page"--}}
{{--                                v-on:click="nextData()" style="width: 30px; height: 30px"--}}
{{--                                class="page-link"> <i class="fa fa-angle-right" style="font-size: 25px;--}}
{{--    color: #337ab7;"></i> </button>--}}
{{--                    </li>--}}
{{--                </ul>--}}
{{--            </nav>--}}
{{--            <p class="hyouji">--}}
{{--                    <span class="total">--}}
{{--                        @{{ pagination.total }}</span>人中 @{{ pagination.from }}--}}
{{--                - @{{ (pagination.to) }}人目を表示中--}}
{{--            </p>--}}
        </section>
    </article>
@endsection
@push('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>
        $(document).ready(function()
        {
            var datePickerObj = {
                format         : 'yyyy-mm-dd',
                todayHighlight : true,
                autoclose      : true
            };

            $('.datepicker').datepicker(datePickerObj);
        });
       </script>
    <script type="application/javascript" src="/js/admin/bots_management.js?v={{config("sns-line.version")}}"></script>
@endpush