@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="/css/admin/employees/component-header.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/css/base/main.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
    .btn-dropdown-bot:focus{
        border: 1px solid #DDDDDD;
    }
</style>
@endpush
@section('content')
<div id="employees" v-cloak>
    <div v-if="showModal" class="enable-modal"  >
        <div class="modal-content">
            <div class="modal-close">
                <i class="fa fa-times" @click="closeModal" aria-hidden="true"></i>
            </div>
            <p class="heading-content">スタッフ管理</p>
            <div class="mid-content">
                <div class="mid-image">
                    <img src="{{ asset('images/employee_1.png') }}" alt="" style="margin-right: 16px">
                    <img src="{{ asset('images/employee_2.png') }}" alt="">
                </div>
                <div class="mid-description">
                    <span>エルメアカウントを複数人で運用が出来る機能です。</span>
                    <span>他のスタッフに運用をサポートしてもらうことが出来ます。</span>
                </div>
            </div>
            <div class="checkbox-modal d-flex" style="margin-top: 64px;">
                <span class="span-checkbox" :class="doNotShowAgain ? 'span-checked' : 'span-not-checked'" @click="doNotShowAgain = !doNotShowAgain"></span>
                <span class="title-checkbox">今後この画面を表示しない</span>
            </div>
            <button class="btn-confirm f14-w600" @click="updateNotShowPopup">理解しました</button>
        </div>
    </div>
    <div class="header">
        <h2 style="font-size: 24px !important; color: #222222; font-weight: 600; padding: 10px 10px 10px 0">スタッフ管理</h2>
        <button onclick="window.open('https://lme.jp/manual/staff/', '_blank')" class="btn-header">
            <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 class="content-body">
        <div class="fee-bot" v-if="feeBot" v-cloak>
            <div class="item-fee-bot"  :class="{ 'block': freeBotInvite, 'disable': current_bot.plan_type == 2 || current_bot.contract_type == 'free' }">
                <div class="label-item" :class="{ 'span-block': freeBotInvite }">
                    スタッフ追加    
                </div>
                <div class="content-item">
                    <button class="f-size-16" :class="{ 'btn-block': freeBotInvite }" @click="redirectInviteStaft" style="font-weight: 600;">スタッフを追加する</button>
                    <span class="f14-w300 color-text" :class="{ 'span-block': freeBotInvite }" style="margin-top: 8px">スタッフを追加すると、複数人でアカウントの管理ができます。</span>
                </div>
                <div class="overlay" v-if="freeBotInvite" v-cloak>
                    <span>利用するには、有料プランへのアップグレードが必要です。</span>
                </div>
            </div>
            <div class="item-fee-bot" :class="{ 'block': freeBot, 'disable': freeBot}">
                <div class="label-item" :class="{ 'span-block': freeBot }">
                    操作権限設定 
                </div>
                <div class="content-item">
                    <button class="f-size-16" :class="{ 'btn-block': freeBot }"
                            @click="redirectSettingRole(current_bot.id)"
                            style="font-weight: 600;">操作権限を変更する</button>
                    <span class="f14-w300" :class="{ 'span-block': freeBot }" style="margin-top: 8px">スタッフが操作できる機能権限を設定できます。</span>
                </div>
                <div class="overlay" v-if="freeBot" v-cloak>
                    <span>利用するには、有料プランへのアップグレードが必要です。</span>
                </div>
            </div>
        </div>

        <div class="list-bot">
            <p class="title-table">
                対象のアカウント
            </p>
            <div class="filter-table">
                <div class="custom-bot-dropdown">
                    <div v-if="showBotDropdown" class="bot-dropdown-overlay" @click="showBotDropdown = false"></div>
                    <button type="button" class="btn btn-dropdown-bot" @click="showBotDropdown = !showBotDropdown">
                        <img :src="current_bot.bot_image ? current_bot.bot_image : '/images/8.png'"
                            class="img-bot"
                            alt="" onerror="this.onerror=null; this.src='/images/8.png';">
                        <span class="f16-w600 color-text bot-dropdown-label">@{{ current_bot.view_name }}</span>
                        <i class="fas fa-chevron-down bot-dropdown-arrow"></i>
                    </button>
                    <div class="bot-dropdown-menu" v-show="showBotDropdown">
                        <a class="bot-dropdown-item f16-w600" href="#"
                            v-for="(bot, indexBot) in ownership_bots"
                            @click.prevent="changeBot(bot); showBotDropdown = false">
                            <img :src="bot.bot_image ? bot.bot_image : '/images/8.png'"
                                class="img-bot"
                                alt="" onerror="this.onerror=null; this.src='/images/8.png';">
                            <span class="font-s16 font-w-normal">@{{ bot.view_name }}</span>
                        </a>
                    </div>
                </div>

                <div class="right-filter d-flex">
                    <button class="button-custom btn-reset" style="margin-right: 16px;"
                        @click="redirectHistoryLoginBot"
                    >
                        <img src="{{ asset('images/icon_reset.png') }}" alt="" style="margin-right: 6px; font-weight: 600;">
    
                        <span class="f14-w600">ログイン履歴</span>
                    </button>
    
                    <button class="button-custom btn-move" id="toggle-sortable"
                        @click="openModalSortStaff"
                    >
                        <img src="{{ asset('images/icon_ionic-ios-move.png') }}" alt="" style="margin-right: 6px; font-weight: 600;">
    
                        <span class="f14-w600">並び替え</span>
                    </button>
                </div>

            </div>
            <p class="title-list">
                スタッフ一覧
            </p>
            <table class="table sortable-table" style="margin-top: 24px;">
                <thead>
                    <tr>

                        <th class="text-left" style="width: 180px">スタッフ名</th>
                        <th class="text-left" style="width: 200px">エルメユーザー名</th>
                        <th class="text-left" style="width: 120px">操作権限</th>
                        <th class="text-left" style="width: 200px">メールアドレス</th>
                        <th class="text-left">最終ログイン</th>
                        <th class="text-center" style="border-left: 1px solid #DDDDDD !important; width: 120px; text-align: left">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="(staff, indexStaff) in userStaffs"
                    >

                        <td class="text-left f16-w300" style="padding-left: 12px !important;">
                            @{{ staff.is_admin == 1 ? staff.username : staff.staff_name }}
                        </td>
                        <td class="text-left f16-w300">
                            <span v-if="staff.status == 1">@{{ staff.username }}</span>
                            <span style="white-space: nowrap" v-else-if="staff.status == 0">
                                <span style="color: #08BF5A;" v-if="formatDateExpired(staff.created_at)">
                                    招待中 (@{{ formatDateExpired(staff.created_at) }}まで有効)
                                </span>
                                <span style="color: #F44336" v-else>
                                    招待が拒否されました
                                </span>
                            </span>
                            <span style="color: #F44336" v-else-if="staff.status == 2">
                                招待が拒否されました
                            </span>

                        </td>
                        <td class="text-left f16-w300">
                            @{{ staff.is_admin == 1 ? '主管理者' : staff.role_name  }}
                        </td>
                        <td class="text-left f16-w300">
                            @{{ staff.email }}
                        </td>
                        <td class="text-left f16-w300">
                            @{{ staff.last_time_login ?  formatDate(staff.last_time_login) : '' }}
                        </td>
                        <td class="text-center f16-w300" style="border-left: 1px solid #DDDDDD; text-align: left">
                            <template>
                                <button v-show="staff.is_admin != 1 && staff.user_invite_id > 0" class="blue-button f-size-16 edit-button"
                                        style="font-weight: 600; margin-right: 10px"
                                        @click="redirectEditStaff(staff.staff_bot_id)"
                                >編集</button>
                                <span v-show="staff.is_admin != 1" class="delete-button"
                                      @click="deleteStaffBot(staff.staff_bot_id, staff)"
                                      style="cursor: pointer;display: block;float: right; padding: 8px 2px;">削除</span>
                            </template>

                        </td>
                    </tr>
                </tbody>
            </table>

            <nav style=""
                 class="text-right"
                 :class="{'pagination-devered': true}"
                 v-if="pagination.last_page > 1">
                <ul class="pagination">
                    <li v-if="pagination.current_page > 1">
                        <a href="#" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)" style="font-size: 14px;">
                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-left" style="color: #DDDDDD !important;"></i></span>
                        </a>
                    </li>
                    <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
                        <a href="#" @click.prevent="changePage(page)" style="font-size: 14px;">@{{ page }}</a>
                    </li>
                    <li v-if="pagination.current_page < pagination.last_page">
                        <a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)" style="font-size: 14px;">
                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-right" style="color: #DDDDDD !important;"></i></span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    @include('admin.employee.modal_sort_staff')
</div>
@endsection
@push('script')

<script src="/js/moment.min.js"></script>
<script src="/js/moment-with-locales.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
    var showModal = '{{ $showModal }}';
    var currentUserId = '{{ \Illuminate\Support\Facades\Auth::id() }}';
    console.log('showModal', showModal)
</script>
<script src="/js/my_page/Sortable.min.js"></script>
<script src="/js/my_page/vuedraggable.min.js"></script>
    <script src="/js/admin/employees/employees_management.js?v={{config('sns-line.version')}}"></script>
@endpush