@extends('layout.basic.main')
@section('title', 'リマインド配信（一覧）')
@push('css')
    <link rel="stylesheet" href="/css/events/index.css?v={{config("sns-line.version")}}">
    <style>
        .mushibtn {
            overflow: auto;
        }

        #create-event {
            /*float: right;*/
        }

        .btn:focus {
            outline: unset;
            outline-offset: unset;
        }

        .btn:active:focus {
            outline: unset;
        }

        .btn-default{
            background: rgb(239, 239, 239);
            color: rgb(68, 68, 68);
        }

        table th {
            background-color: #08BF5A !important;
            font-weight: bold;
        }

        .btn {
            font-weight: bold;
        }

        #events-manager .fa-ellipsis-h {
            font-size: 25px;
        }

        .btn-sns-line:disabled {
            background-color: rgb(176, 194, 198);
        }
    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="errormessage">
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0 !important;">
                リマインド配信</h2>
            <div class="h__event-main" id="events-manager" v-cloak>
                <div class="h__friend-left">
                    <div class="row">
                        <div class="col-md-12" style="padding-right: 0px;">
                            <div class="tab_folder">
                                <span>フォルダ</span>
                                <div style="display: flex; align-items: baseline;">
                                    <div class="popup">
                                        <span class="line-icon" @click="openPopupAddGroup()">
                                            <i class="far fa-plus-circle "></i>
                                       </span>
                                        <div class="popuptext" v-show="show_popup.add_group">
                                            <span>フォルダ名</span>
                                            <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                                <input type="text" id="cat_txt" v-model="name_group" maxlength="15"
                                                       class="form-control"
                                                       style="width: 79%;height: 32px;padding-left: 3px;border: 1px solid #bbb;border-radius: 4px">
                                                <span style="font-size: 12px;margin-left: 2px;">@{{ getCountValue(name_group) }}/15</span>
                                            </div>
                                            <div class="text-center"
                                                 style="display: flex;align-items: center;justify-content: space-between;">
                                                <button class="btn btn-sns-line btn-sns-line-success btn-sns-line-sm"
                                                        style="width: 82px;" @click="addGroup()">決定
                                                </button>
                                                <button class="btn btn-sns-line btn-sns-line-dark btn-sns-line-sm"
                                                        @click="setClearPopupGroup">キャンセル
                                                </button>

                                            </div>
                                        </div>
                                    </div>
                                    <span class="line-icon" data-toggle='modal'
                                          data-target='#modalSortFolder' v-on:click="showModalSortFolder()">
                                        <i class="fas fa-sort-amount-down-alt "></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="nano-inner" id="nano-inner-group" style="margin-top: 0">
                        <div class="tag_group row" style="padding: 10px 7px"
                             @click="showGroup(0)"
                             :class="(group_open == 0)?'active':'folder-close'">
                            <div class="display_category row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol">
                                    <div>未分類 (@{{ count_default }})</div>
                                </div>

                            </div>
                        </div>
                        <div v-for="(category, index) in sortedCategories" class="tag_group row"
                             :class="(category.id == group_open)?'active':'folder-close'" style="padding: 0">
                            <div class="display_category  row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol">
                                    <div @click="showGroup(category.id)" style="width: 90%; padding: 7px">
                                        @{{ category.name }} (@{{ category.count }})
                                    </div>
                                    <div class="btn-group" style="padding: unset;"
                                         :style="(group_open == category.id)?'display:block':'display:none'">
                                        <i class="far fa-ellipsis-h ic-menu"></i>
                                        <ul class="dropdown-menu action-broadcast"
                                            style="min-width: 113px;left: -89px;top: 0px;">
                                            <li class="focus-pointer">
                                                <div style="cursor: pointer" @click="editGroup(category)">フォルダ名変更</div>
                                            </li>
                                            <li class="focus-pointer">
                                                <div style="cursor: pointer" @click="deleteGroup(category)">フォルダ削除</div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="h__friend-right">
                    <section class="errormessagelist">
                        <div class="mushibtn" style="display: flex;justify-content: space-between;">
                            <span class="">
                               <button type="button"
                                       data-toggle="modal"
                                       data-target="#modal_add_event"
                                       @click="setEventDefault"
                                       class="btn btn-sns-line btn-sns-line-primary"
                                       style="background-color:rgba(87,153,219,1)">新規作成</button>
                            </span>
                            <div class="btn-right-top" style="display: flex;">
                                <div>
                                    <button style="padding-left: 25px; padding-right: 25px" data-toggle="modal"
                                            data-target="#modalSortItem"
                                            @click="showModalSortItems()"
                                            class="btn btn-sns-line btn-sns-line-secondary">並べ替え
                                    </button>
                                </div>
                                <div>
                                    <button v-if="selected.length > 0" type="button" data-toggle="modal"
                                            data-target="#modalMoveFolder"
                                            style="padding-right: 10px; padding-left: 10px; margin: 0 15px"
                                            class="btn btn-sns-line btn-sns-line-primary btn-move-folder">一括フォルダ変更
                                    </button>
                                    <button v-else class="btn btn-sns-line btn-sns-line-primary btn-move-folder"
                                            style="padding-right: 10px; padding-left: 10px; margin: 0 15px"
                                            disabled>一括フォルダ変更
                                    </button>
                                </div>
                                <div>
                                    <button v-if="selected.length > 0" class="btn btn-sns-line btn-sns-line-danger"
                                            style="padding-right: 15px; padding-left: 15px;" @click="deleteEvents()">
                                        一括削除
                                    </button>
                                    <button v-else class="btn btn-sns-line btn-sns-line-danger"
                                            style="padding-right: 15px; padding-left: 15px;"
                                            disabled>一括削除
                                    </button>
                                </div>
                            </div>
                        </div>
                        <table class="table">
                            <tr style="height: 40px">
                                <th class="checkth" style="width: 55px; border-radius: 4px 0px 0px 4px;">
                                    <input type="checkbox" style="width: 16.9px; height: 16.9px" v-model="selectAll">
                                </th>
                                {{--                                <th class="text-left hh_v11" style="width: 10%">作成日</th>--}}
                                <th class="text-left hh_v12" style="">作成日/管理名</th>
                                <th class="text-left hh_v13" style="width: 70px">配信中</th>
                                <th class="text-center hh_v17" style="width: 8%;border-radius: 0px 4px 4px 0px;"></th>
                            </tr>
                            <tbody style="border-top: none">
                            <tr v-for="(item, index) in items">
                                <td>
                                    <input type="checkbox" name="check_item[]" :value="item.id" v-model="selected"
                                           style="width: 16.9px; height: 16.9px">
                                </td>
                                <td class="text-left">
                                    <div><span style="font-size: 13px">@{{formatDate(item.created_at)}}</span></div>
                                    <div class="ch__text_inline ch__text_inline_v2">
                                        <span>
                                            <a style="text-decoration: underline;"
                                               :href="`/basic/events/${item.category_id}/create-or-update?edit=${item.id}`">@{{item.event_name}}</a>
                                        </span>
                                    </div>
                                </td>
                                <td>
{{--                                    <a :href="`/basic/events/list-user/${item.id}`">@{{ countUserEventTimes(item.event_times) }}</a>--}}
                                    <a :href="`/basic/events/list-user/${item.id}`">@{{ (item.total_user) }}</a>
                                </td>
                                <td class="text-center">
                                    <div class="btn-group" style="padding: unset;">
                                        <i class="far fa-ellipsis-h ic-menu"></i>
                                        <ul class="dropdown-menu action-broadcast"
                                            style="min-width: 70px;left: -5px;top: 15px;">
                                            <li class="focus-pointer">
                                                <div class="text-center h__item_dropdown"
                                                     style="cursor: pointer;padding: 3px;" @click="copyEvent(item.id)">
                                                    コピー
                                                </div>
                                            </li>
                                            <li class="focus-pointer">
                                                <div class="text-center h__item_dropdown text-danger"
                                                     style="cursor: pointer; padding: 3px;"
                                                     @click="deleteEvent(item.id)">削除
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="items.length == 0">
                                <td colspan="12">データがありません。</td>
                            </tr>
                            </tbody>
                        </table>
                    </section>
                </div>
                <div class="modal fade" id="modalSortFolder" tabindex="-1" role="dialog" data-backdrop="static"
                     data-keyboard="false" aria-labelledby="chatSettingStatus">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                        style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close">
                                    <i class="fas fa-times"></i>
                                </span>
                                </button>
                                <h2 class="text-center"> 【 フォルダ並べ替え 】</h2>
                            </div>
                            <div class="modal-body scroll-modal">
                                <div class="row mt-item-fol" v-for="(item,index) in arrGroupSort" :data-id="item.id">
                                    <div class="col-sm-9 col-sm-offset-1  ">
                                        <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">
                                            @{{item.name}}
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                        <div class="box-ic-sort">
                                            <i class="far fa-chevron-up"
                                               v-on:click="onUpdateDefaultGroup(undefined, index, 'up')"></i>
                                            <i class="far fa-chevron-down "
                                               v-on:click="onUpdateDefaultGroup(undefined, index, 'down')"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center gr__btn_bottom">
                                <button type="button" class="btn btn-sns-line btn-sns-line-success"
                                        @click="sortedFolder">保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="modalSortItem" tabindex="-1" role="dialog" data-backdrop="static"
                     data-keyboard="false" aria-labelledby="modalSortItem">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                        style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close">
                                    <i class="fas fa-times"></i>
                                </span>
                                </button>
                                <h2 class="text-center"> 【 並べ替え 】</h2>

                            </div>
                            <div class="modal-body scroll-modal">
                                <div class="row mt-item-fol" v-for="(item,index) in arrItemsSort">
                                    <div class="col-sm-9 col-sm-offset-1  ">
                                        <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">
                                            @{{item.event_name}}
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                        <div class="box-ic-sort">
                                            <i class="far fa-chevron-up "
                                               @click="onUpdateDefaultPopup(undefined, index, 'up')"></i>
                                            <i class="far fa-chevron-down "
                                               @click="onUpdateDefaultPopup(undefined, index, 'down')"></i>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" id="array_sort" value="">
                                <input type="hidden" id="current_position" value="">
                            </div>
                            <div class="text-center gr__btn_bottom">
                                <button type="button" class="btn btn-sns-line btn-sns-line-success" @click="sortItem">
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="modalMoveFolder"
                     tabindex="-1" role="dialog"
                     aria-labelledby="chatSettingStatus">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                        style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close">
                                    <i class="fas fa-times"></i>
                                </span>
                                </button>
                                <h2 class="text-center"> 【 一括フォルダ変更 】</h2>

                            </div>
                            <div class="modal-body">
                                <div class="row ">
                                    <div class="col-sm-2 col-sm-offset-1 title-left">
                                        移行先選択
                                    </div>
                                    <div class="col-sm-8">
                                        <div class="b-select">
                                            <select class="form-control" v-model="folder_move_id">
                                                <option value="0">未分類</option>
                                                <option v-for="(category, index) in sortedCategories"
                                                        :value="category.id">@{{ category.name }}
                                                </option>
                                            </select>
                                        </div>

                                    </div>

                                </div>

                            </div>
                            <div class="text-center gr__btn_bottom">
                                <button type="button" class="btn  btn-sns-line btn-sns-line-success"
                                        @click="moveItems()">登録
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="modal_add_event" tabindex="-1" role="dialog" data-backdrop="static"
                     data-keyboard="false" aria-labelledby="chatSettingStatus">
                    <div class="modal-dialog"
                         style="min-height: calc(100% - (1.75rem * 2));display: flex;align-items: center;"
                         role="document">
                        <div class="modal-content" style="width: 100%">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                        style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close">
                                    <i class="fas fa-times"></i>
                                </span>
                                </button>
                                <h2 class="text-center"> リマインド新規作成</h2>
                            </div>
                            <div class="modal-body scroll-modal">
                                <div class="mt-item-fol h9_add_event">
                                    <div>管理名</div>
                                    <div style="display: flex;align-items: end;flex-wrap: wrap">
                                        <input maxlength="10" v-model="event.name" type="text" class="form-control"
                                               style="float: left;">
                                        <span style="font-size: 12px;margin-left: 5px;"> @{{ event.name.length }}/10文字</span>
                                    </div>
                                </div>
                                <div class="h9_add_event">
                                    <div></div>
                                    <div>
                                        <span class="text-danger" style="width: 300px">@{{ error.name }}</span>
                                    </div>
                                </div>
                                <div class="mt-item-fol h9_add_event">
                                    <div>フォルダ</div>
                                    <div>
                                        <select v-model="event.category_id" class="form-control"
                                                style="width: 70%;height: 40px;">
                                            <option value="0">未分類</option>
                                            <option :value="category.id" v-for="(category,index) in sortedCategories">
                                                @{{ category.name }}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center gr__btn_bottom">
                                <button type="button" class="btn btn-sns-line btn-sns-line-success"
                                        style="width: 100px;height: 40px"
                                        @click="createEvent">保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>
@endsection
@push('js')
    <script src="/js/booking_manager/message.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/axios.min.js"></script>

    <script>
        const MSG_DELETE = '削除しますが、宜しいですか？';
        const bot_id = '{{ $bot_id }}';
        const api = {
            init: '{{ route('init_data_events') }}',
            add_folder: '{{ route('event.folder.create') }}',
            sort_folder: '{{ route('event.folder.sort') }}',
            move_folder: '{{ route('event.item.move_folder') }}',
            delete_folder: '{{ route('event.folder.delete') }}',
            sort_event: '{{ route('event.item.sort') }}',
            mass_delete_event: '{{ route('event.item.mass_delete') }}',
            copy_event: '{{ route('event.item.copy_event') }}',
            delete_event: '{{ route('event.item.delete') }}',
            save_event: '{{ route('event.item.save') }}',

        };
    </script>
    <script src="/js/events/index.js?v={{config("sns-line.version")}}"></script>
@endpush