@extends('layout.basic.main')
@section('title','リッチメニュー（表示・停止予約履歴）')
@push('css')
    <link rel="stylesheet" href="{{asset('css/form_answer/common-v3.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css">
    <link rel="stylesheet" href="/_assets/commons/css/breadcrumbs.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/pagination.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/lme_custom.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/calendar_control.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/modules/rich_menu/css/setting_display_history.css?v={{config("sns-line.version")}}" type="text/css">
@endpush
@section('content')
    <div class="" id="setting-display-history" v-cloak>
        <div id="delete-note" class="i-tooltip tooltip-info" style="position: fixed; width: fit-content;transform: translate(-50%, -50%);">
            <div class="title">
                予約日時5分前から予約変更はできません。
            </div>
        </div>
        <div class="head mb-4">
            <nav class="breadcrumb breadcrumb01">
                <ul>
                    <li><a href="/basic/rich-menu">TOP</a></li>
                    <li>リッチメニュー表示・停止予約履歴</li>
                </ul>
            </nav>
            <div class="page-title">
                リッチメニュー表示・停止予約履歴
            </div>
        </div>
        <div class="content">
            <div class="filters d-flex justify-content-between align-items-center">
                <div class="filter-left d-flex justify-content-start align-items-center">
                    <div class="range-date d-flex justify-content-start align-items-center mr-2">
                        <span class="font-s14 font-w-bold color-text mr-2">表示期間</span>
                        <div class="date date04 mr-2">
                            <div class="date-box" style="padding: 0">
                                <input type="text" name="datepicker" id="js-datepicker04" placeholder="開始日 → 終了日" autocomplete="off" style="width: 355px; cursor: pointer">
                                <button class="clear-btn" >
                                    <i class="far fa-times-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="btn-get-all hover" @click="getAll()">全期間</div>
                </div>
                <div class="filter-right d-flex justify-content-start align-items-center">
                    <div class="filter-action d-flex justify-content-start align-items-center mr-4">
                        <span class="font-s14 font-w-bold color-text mr-2">対象の操作</span>
                        <div class="custom-dropdown filter">
                            <div class="selected">
                                <span class="name">@{{ textFilterAction() }}</span>
                                <i class="fas fa-caret-down icon"></i>
                            </div>
                            <ul class="options" id="filter-item">
                                <li class="text-[#222222]">表示する項目</li>
                                <li class="text-[#222222]" @click="filterAction([1, 2])">全て選択</li>
                                <li class="text-[#222222]" @click="filterAction([1])">表示</li>
                                <li class="text-[#222222]" @click="filterAction([2])">停止</li>
                            </ul>
                        </div>
                    </div>
                    <div class="filter-status d-flex justify-content-start align-items-center">
                        <span class="font-s14 font-w-bold color-text mr-2">ステータス</span>
                        <div class="custom-dropdown filter">
                            <div class="selected">
                                <span class="name">@{{ textFilterStatus() }}</span>
                                <i class="fas fa-caret-down icon"></i>
                            </div>
                            <ul class="options" id="filter-item">
                                <li class="text-[#222222]">表示する項目</li>
                                <li class="text-[#222222]" @click="filterStatus([])">全て選択</li>
                                <li class="text-[#222222]" @click="filterStatus([1])">予約中</li>
                                <li class="text-[#222222]" @click="filterStatus([3])">処理済み</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive scrollable" style="max-height: calc(100% - 55px); margin-top: 20px" :style="items.length === 0 ? 'overflow-y: hidden' : ''">
                <table id="table_list" style="margin-top: 0; table-layout: fixed">
                    <thead>
                    <tr>
                        <th style="width: 190px">
                            <div style="display: flex; align-items: center">
                                予約操作日時
                                <div class="hover" style="display: grid; position: relative; margin-left: 10px;" @click="sort('created_at')">
                                    <i class="fal fa-angle-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                    <i class="fal fa-angle-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                </div>
                            </div>
                        </th>
                        <th style="width: 190px">
                            <div style="display: flex; align-items: center">
                                実行日時
                                <div class="hover" style="display: grid; position: relative; margin-left: 10px;" @click="sort('date_setting')">
                                    <i class="fal fa-angle-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                    <i class="fal fa-angle-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                </div>
                            </div>
                        </th>
                        <th style="text-align: center; width: 100px;">操作</th>
                        <th style="text-align: center; width: 150px;">実行タイミング</th>
                        <th style="text-align: center; width: 220px">ステータス</th>
                        <th style="width: 300px;">管理名</th>
                        <th style="text-align: center; width: 150px;">実行対象</th>
                        <th style="text-align: center; width: 150px;">実行人数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in items">
                        <td style="padding-left: 10px">@{{ formatDate(item.created_at) }}</td>
                        <td style="padding-left: 10px">@{{ formatDate(item.date_setting) }}</td>
                        <td style="text-align: center">@{{ item.action == 1 ? '表示' : '停止' }}</td>
                        <td style="text-align: center">@{{ item.type == 1 ? '即時' : '予約' }}</td>
                        <td style="text-align: center">
                            <span v-if="item.status == 2">処理中</span>
                            <span v-if="item.status == 3">処理済み</span>
                            <span v-if="item.status == 5">処理エラー</span>
                            <span v-if="item.status == 8">解約済みのため、処理しない</span>
                            <span style="color: var(--main)" v-if="item.status == 1">予約中</span>
                        </td>
                        <td style="padding-left: 10px">
                            <div class="group rich-menu-name">
                                <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block;">@{{ item.rich_menu.name }}</span>
                                <span class="i-tooltip">@{{ item.rich_menu.name }}</span>
                            </div>
                        </td>
                        <td class="pending" style="text-align: center">
                            <span v-if="item.action == 2">-</span>
                            <span v-if="item.action == 1 && !item.filter_id">友だち全員</span>
                            <span v-if="item.action == 1 && item.filter_id" @click="openModalFilter(item.id)" class="hover" style="color: var(--blue); font-size: 14px; font-weight: var(--font-w-normal); text-decoration: underline; cursor: pointer">絞り込みあり</span>
                        </td>
                        <td style="text-align: center">
                            <div style="width: 100%; display: flex" :class="[2,3,5,8].includes(Number(item.status)) ? 'justify-content-end pr-4' : 'justify-content-center'">
                                <div v-if="[2,3,5,8].includes(Number(item.status))" class="hover" style="color: var(--blue); font-size: 14px; font-weight: var(--font-w-normal); text-decoration: underline; cursor: pointer" @click="redirectFriendList(item.id)">@{{ formatNumber(item.status == 3 ? item.count_friend : 0) }}人</div>
                                <div class="btn-delete" @click="confirmDeleteSetting(item)" v-else>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="10.887" height="11.549" viewBox="0 0 10.887 11.549">
                                        <path id="形状" d="M8.662,11.549H2.226a.914.914,0,0,1-.906-.881l-.35-7.55H.113A.115.115,0,0,1,0,3V2.541a.459.459,0,0,1,.454-.462H2.268V.924A.917.917,0,0,1,3.175,0H7.711a.917.917,0,0,1,.908.924V2.078h1.814a.458.458,0,0,1,.453.462V3a.115.115,0,0,1-.113.116H9.917l-.35,7.55A.913.913,0,0,1,8.662,11.549ZM1.991,3.118l.343,7.391H8.552L8.9,3.118Zm1.3-1.039H7.6V1.04h.113A.115.115,0,0,1,7.6.924v.116H3.289Z"/>
                                    </svg>
                                    予約取消
                                </div>
                                <div v-show="![2,3,5,8].includes(Number(item.status))" style="margin: 10px; color: #F44336">
                                    <div @mouseover="showTooltipsInfoDelete($event)" @mouseleave="hideTooltipsInfoDelete()">
                                        @include('icons.info-circle')
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="text-center centered-box" style="margin: 29px auto; height: calc(-100px + 100%); display: flex; flex-direction: column; justify-content: center;" v-if="items.length <= 0">
                    <div style="margin-bottom: 19px">
                        <img src="/images/group_4483.svg" alt="...">
                    </div>
                    <div style="color: #8C8C8C; font-weight: 400; font-size: 16px">まだデータがありません</div>
                </div>
            </div>
        </div>
        <div class="foot">
            <div class="btn-back hover" @click="window.location.href = '/basic/rich-menu'">戻る</div>
            <pagination :pagination="pagination" @change_page="changePage" @change_limit="changeLimit"></pagination>
        </div>
        @include('basic.rich_menu.v2.modals.confirm_delete_setting_display_history')
        @include('basic.rich_menu.v2.modals.before_5minute')
    </div>
    @include('layout.modal_filter_v2')
@endsection

@push('js')
    <script>
        var params = [];
        var basic_home_new = [];
    </script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/form_answer/vee-validate_ja.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/index.js"></script>`
    <script src="/_assets/commons/js/datetime.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/lme.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/pagination.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/modules/rich_menu/js/setting_display_history.js?v={{config("sns-line.version")}}"></script>
@endpush