@extends('layout.admin.main')
@section('title', 'スタッフ管理（アクセス履歴）')
@push('css')
    <link rel="stylesheet" href="/css/admin/employees/employees.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="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/css/plugins/timepicker/bootstrap-timepicker.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <style>
        .mastereditstaff {
            width: auto;
            max-width: 80%;
        }
        .f16-w600 {
            font-size: 16px;
            font-weight: 600;
        }
        .icon-drop-account {
            width: 12px;
            height: 6px;
            color: #222222;
            top: 13px !important;
        }
        .custom-checkbox {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
        }

        .custom-checkbox input {
            display: none;
        }

        .checkmark {
            width: 20px;
            height: 20px;
            border: 1px solid #DDDDDD;
            border-radius: 4px;
            margin-right: 10px;
            position: relative;
            background-color: white;
        }

        .custom-checkbox input:checked + .checkmark {
            background-color: #08BF5A;
            border: none;
        }

        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .custom-checkbox input:checked + .checkmark:after {
            display: block;
        }

        .checkmark:after {
            left: 8px;
            top: 4px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        label:after {
            display: none;
        }

        [v-cloak] {
            display: none;
        }


        .daterangepicker th {
            background-color: white !important;
            color: #222222 !important;
            border: 1px solid transparent !important;
        }

        .daterangepicker td {
            border: none !important;
        }

        .daterangepicker td.active, .daterangepicker td.active:hover {
            background-color: #08BF5A !important;
        }

        .daterangepicker td.in-range {
            background-color: #F4FBF2 !important;
        }

        .daterangepicker td.active.end-date {
            background-color: #08BF5A !important;
        }

        .daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
            border-radius: 0px !important;
        }

        .dateranger {
            height: 100% !important;
            width: 100% !important;
            border: none!important;
            box-shadow: none !important;
            font-size: 16px !important;
            text-align: center !important;
        }

        .time-range-container {
            position: relative;
        }

        .time-range-container i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 15px;
            font-size: 18px;
        }

        .show-duration {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .btn-dropdown-bot:focus{
            border: 1px solid #DDDDDD;
        }

        .list-bots{
            display: flex;
            align-items: end;
            justify-content: space-between;
        }

        .list-bots .btn-filter{
            padding: 5px;
            background-color: #FFFFFF;
            border: 1px solid #DDDDDD;
            border-radius: 3px;
            height: 42px;
            color: #222222;
            font-size: 16px;
            padding: 0 27px;
        }
    </style>
@endpush
@section('content')
    <article class="sub" id="access-histories" v-cloak>
        <section class="mastereditstaff">
            <div class="header row">
                <h2 class="col-sm-6">スタッフ管理</h2>
                <div class="col-sm-6">
                    <button class="btn-header" onclick="window.open('https://lme.jp/manual/staff/', '_blank')">
                        <img src="{{ asset('images/icon_material-library-books.png') }}" alt="" style="margin-right: 6px; font-weight: 600;">
                        <span style="font-size: 14px; font-weight: 600;">マニュアル</span>
                    </button>
                </div>
            </div>
            <div class="mt-5">
                <div class="memo">
                    <h3 style="font-size: 20px">アクセス履歴</h3>
                </div>
                <div class="list-bots">
                    <div>
                        <h4 style="font-size: 16px; margin-bottom: 0">対象のアカウント</h4>
                        <div class="item dropdown" :class="{ open: showBotDropdown }" style="margin-top: 10px;">
                            <button type="button" class="btn dropdown-toggle btn-dropdown-bot" @click.stop="toggleBotDropdown" style="min-width: 300px; min-height: 40px; padding-right: 35px">
                                <img :src="botSelected.bot_image ? botSelected.bot_image : '/images/8.png'"
                                    class="img-bot"
                                    style="width: 30px; height: 30px;"
                                    alt="" onerror="this.onerror=null; this.src='/images/8.png';">
                                <div class="font-s16 font-w-normal f16-w600 color-text" style="display: block;
                                                padding-right: 10px;
                                                white-space: nowrap;
                                                overflow: hidden;
                                                text-overflow: ellipsis;">@{{ botSelected.view_name }}</div>
                                <i class="fas fa-chevron-down icon-drop-account" style="left: 265px;"></i>
                            </button>
                            <div class="dropdown-menu" style="min-width: 300px; max-height: 300px; overflow-y: auto">
                                <a v-for="bot in bots" class="dropdown-item d-block text-truncate f16-w600" @click="selectBot(bot)" style="cursor: pointer"
                                >
                                    <img  :src="bot.bot_image ? bot.bot_image : '/images/8.png'"
                                        style="width: 30px; height: 30px;"
                                        class="img-bot"
                                        alt="" onerror="this.onerror=null; this.src='/images/8.png';">
                                    <span class="font-s16 font-w-normal color-text">@{{ bot.view_name }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;width: 310px;">
                        <div class="">
                            <button class="btn-filter" style="margin-right: 15px;" @click="openModalFilter">絞り込み</button>
                        </div>
                        <div class="">
                            <button class="btn-filter" @click="downloadCSV">
                                <i class="fas fa-arrow-to-bottom"></i>
                                CSV
                            </button>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between group-btn">
                    <div class="d-flex justify-content-start">
                        <div class="" style="margin-right: 25px">
                            <button class="btn-now" @click="filterNow()">今月</button>
                        </div>
                        <div class="d-flex justify-content-start">
                            <div class="time-range-container" style="padding: 0px; margin-right: 10px">
                                <input type="text" id="filter-delivered-1"
                                       class="form-control dateranger" >
                                <i class="far fa-calendar"></i>
                            </div>
                            <div class="" style="margin-right: 5px">
                                <button class="btn-duration" @click="loadDuration()">表示</button>
                            </div>
                            
                        </div>
                    </div>
                    <div class="align-items-center d-flex justify-content-between">
                            <div class="" style="margin-right: 15px">
                                <div class="search-bar" style="min-width: 240px !important;">
                                    <span class="search-button">
                                        <i class="fa fa-search"></i>
                                    </span>
                                    <input v-model="query.keyword" type="text" placeholder="スタッフ名・IPアドレスを入力" style="font-size: 12px">
                                </div>
                            </div>
                            <div class="">
                                <button class="btn-search" @click="searchKeyword()">検索</button>
                            </div>
                        </div>
                </div>
                <div class="show-filter" v-if="textFormatDate || staff_filter">
                    <div class="show-duration" v-if="textFormatDate != ''">
                        <span>選択中期間: @{{ textFormatDate }}</span>
                        <a href="#" @click="clearTimeDuration()">クリア</a>
                    </div>
                    <div class="show-duration" v-if="staff_filter != ''">
                        <span>選択スタッフ： @{{ staff_filter }}</span>
                        <a href="#" @click="clearQueryStaff()">クリア</a>
                    </div>
                </div>
                <div class="list-access">
                    <table id="table-access">
                        <thead>
                            <tr>
                                <th style="width: 20%;">アクセス日時</th>
                                <th style="width: 30%;">スタッフ名</th>
                                <th>IPアドレス</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in serverItems">
                                <td style="padding: 10px 20px; color: #222222">@{{ item.time_access }}</td>
                                <td style="padding: 10px 20px; color: #222222">
                                    @{{ item.staff_name }}
                                </td>
                                <td style="padding: 10px 20px; color: #222222">@{{ item.ip }}</td>
                            </tr>
                        </tbody>
                    </table>

                    <div style="display: flex;align-items: center;justify-content: space-between; margin-top: 50px;">
                        <div>
                            <a style="text-decoration: underline; color: #666666; font-size: 14px;" href="/admin/employees-management">スタッフ管理に戻る</a>
                        </div>

                        <nav v-if="pagination.last_page > 1" aria-label="Page navigation">
                            <ul class="pagination"  style="float: right">
                                <li :class="pagination.current_page <= 1 ? 'page-item disabled' : 'page-item'">
                                    <span class="page-link" @click="clickPage(pagination.current_page - 1)">
                                        <i class="glyphicon glyphicon-menu-left" style="font-size: 10px"></i>
                                    </span>
                                </li>
                                <template v-if="pagination.last_page < 3">
                                    <li class="page-item" v-for="page in Array.from({ length: pagination.last_page }, (_, i) => i + 1)">
                                        <a @click="clickPage(page)" :class="pagination.current_page == page ? 'page-link active' : 'page-link'" href="#">@{{ page }}</a>
                                    </li>
                                </template>
                                <template v-else>
                                    <li class="page-item">
                                        <a @click="clickPage(1)" :class="pagination.current_page == 1 ? 'page-link active' : 'page-link'" href="#">1</a>
                                    </li>
                                    <li v-if="pagination.current_page != 1 && pagination.current_page != pagination.last_page" class="page-item">
                                        <a @click="clickPage(pagination.current_page)" class="page-link active" href="#">@{{ pagination.current_page }}</a>
                                    </li>
                                    <li v-if="pagination.current_page < pagination.last_page - 1" class="page-item">
                                        <a @click="clickPage(pagination.current_page + 1)" class="page-link" href="#">@{{ pagination.current_page + 1 }}</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">...</a>
                                    </li>
                                    <li class="page-item">
                                        <a @click="clickPage(pagination.last_page)" :class="pagination.current_page == pagination.last_page ? 'page-link active' : 'page-link'" href="#">@{{ pagination.last_page }}</a>
                                    </li>
                                </template>
                                <li :class="pagination.current_page >= pagination.last_page ? 'page-item disabled' : 'page-item'">
                                    <span class="page-link" @click="clickPage(pagination.current_page + 1)">
                                        <i class="glyphicon glyphicon-menu-right" style="font-size: 10px"></i>
                                    </span>
                                </li>
                            </ul>
                        </nav>
                    </div>

                </div>
            </div>
        </section>
        <div class="modal-slide" v-bind:class="{ 'modal-open': isModalVisible }" style="top: 100px">
            <div class="modal-content-filter">
                <span class="close-button" @click="closeModalFilter"><i class="fas fa-times"></i></span>
                <h2 style="padding-left: 0; color: #222222" class="f16-w600">絞り込み</h2>
                <p>表示期間</p>
                <div class="time-range-container" style="margin-top: 15px; padding: 0px">
                    <input type="text" id="filter-delivered-2"
                           class="form-control dateranger" >
                    <i class="far fa-calendar"></i>
                </div>
                <div class="">
                    <p>スタッフ</p>
                    <div class="list-staff">
                        <div v-for="staff in staffs" class="staff">
                            <label class="custom-checkbox" style="color: #222222; font-weight: 300">
                                <input type="checkbox" :value="staff.user_invite_id"
                                       v-model="query.staffs"
                                />
                                <span class="checkmark"></span>
                                @{{ staff.staff_name }}
                            </label>
                        </div>
                    </div>
                </div>
                <button @click="loadItems()" class="btn-filter">絞り込み検索</button>
            </div>
        </div>
    </article>
@endsection
@push('script')
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="/js/moment.min.js"></script>
    <script src="/js/moment-with-locales.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js" integrity="sha512-V1Dk1yqQSdX0uqRNFeRWCKg29Zb4rqHiAkYxnj+c+s7ijh8FZlOPzjwbSLzccKncFyAs5rMYuuh6xsa8kHuB6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script>
        window.bots = @json($bots);
    </script>
    <script src="/js/admin/base/base.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/admin/employees/access_histories.js?v={{config('sns-line.version')}}"></script>
@endpush