@extends('layout.basic.main')
@section('title','ステップ配信（一覧）')
@push('css')
<link rel="stylesheet" href="/css/friendlist/scenario.css?v={{config("sns-line.version")}}">
<link rel="stylesheet" href="/css/scenario/index.css?v={{config("sns-line.version")}}">
<style>
    .main {
        padding-bottom: 0;
    }
</style>
@endpush
@section('content')
<article class="">
<section class="scenarioList" id="scenario_items" v-cloak>
    <div class="row">
        <div class="col-sm-12">
            <div class="scenario_header">
                <h2 style="font-weight: 600; font-size: 18px; color: #222222; border-bottom: 1px solid #DDDDDD; padding-bottom: 5px">ステップ配信</h2>
                <p style="font-weight: 300; font-size: 14px; color: #222222; padding-top: 5px">ステップ配信とは、友だちに対し事前に準備したメッセージを、設定した順番と間隔で自動的に配信する機能です。</p>
            </div>
            <div class="scenario_body" style="padding: 0; margin-top: 20px;">
                <div class="body_separate">
                    <div class="scenario_body_list " style="padding: 0; display: flex;">
                        <div class="scenario_folder_list " v-show="toggle_folder == 0">
                            <div class="scen_folder_list_top">
{{--                                <p>フォルダ</p>--}}
{{--                                <button class="btn btn-sns-line btn-sns-line-lg btn_add_folder" v-on:click="showHidePopupCreateFolder">--}}
{{--                                    <i class="fal fa-plus"></i> 追加</button>--}}

                                <button class="btn btn-add-folder"
                                        style="width: 100%; font-weight: 300"
                                        v-on:click="showHidePopupCreateFolder"
                                >
                                    <i class="far fa-plus" style="color: #222222 !important; padding-right: 5px;"></i>フォルダ追加
                                </button>

                                <button class="btn btn-sort-folder"
                                        v-on:click="showModalSortFolder">
                                    <i class="fa fa-arrows"></i>
                                    並べ替え
                                </button>

                                <div class="form_create_folder" :class="show_create_folder ? 'show-create-folder' : ''">
                                    <div>
                                        <label id="title_folder">フォルダ名</label>
                                        <div style="padding: 7px 0; display: flex; align-items: flex-end;">
                                        <input class="form-control" type="text" v-model="folder_name">
                                        <span style="font-size: 12px; margin-left: 2px;">@{{ countTex(folder_name) }}/15</span>
                                        </div>
                                    </div>
                                    <div class="form-group" style="display: flex; justify-content: space-between;">
                                        <button class="btn btn-sns-line" v-on:click="createFolder()"
                                                style="background-color: #08BF5A; color: #FFFFFF !important;">決定</button>
                                        <button class="btn btn-sns-line" v-on:click="showHidePopupCreateFolder"
                                                style="background-color: #7D9195; color: #FFFFFF !important;">キャンセル</button>
                                    </div>
                                </div>
                            </div>
{{--                            <div class="scen_folder_list_search" style="margin-bottom: 20px;">--}}
{{--                                <i class="far fa-search"></i>--}}
{{--                                <input class="form-control search_folder" placeholder="フォルダ名を入力">--}}
{{--                            </div>--}}
                            <div class="scen_folder_list_mid">
                                <div class="pick_folder" id="group_0" data-id="0"
                                     v-bind:class="(folder_active == 0)?'active':' '">
                                    <div @click="selectedFolder(0, $event)" class="col-md-11 list-i-fol" >
                                        <div>未分類 (@{{ count_default }})</div>
                                    </div>
                                </div>
                                <div v-for="(category, index) in sortedCategories" class="pick_folder"
                                    :id="'group_'+category.id" :data-id="category.id"
                                    v-bind:class="(category.id == folder_active)?'active':' '">
                                    <div class="col-md-11 list-i-fol" @click="selectedFolder(category.id, $event)">
                                        @{{ category.name }} (@{{ category.count }})
                                    </div>
                                    <div class="btn-group" style="padding: unset;">
                                        <i v-show="category.id == folder_active" class="fas fa-ellipsis-v"></i>
                                        <ul class="dropdown-menu action-broadcast" style="">
                                            <li class="focus-pointer" @click="showHidePopupEditFolder(category.id, category.name)">
                                                <div style="display: flex; align-items: center; cursor: pointer">
                                                    <img src="/images/icon-edit.png" alt="">
                                                    <span class="action-name">名称変更</span>
                                                </div>
                                            </li>
                                            <li class="focus-pointer" @click="showModalConfirmDeleteFolder(category.id)">
                                                <div style="display: flex; align-items: center; cursor: pointer">
                                                    <img src="/images/icon-trash.png" alt="">
                                                    <span class="action-name">フォルダ削除</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="scenario_item_list ">
                            <div class="scen_item_list_top d-flex justify-content-between" style="display: flex; align-items: center">
                                <div class="d-flex justify-content-start align-items-center">
                                    <div>
                                        <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-primary btn_add_items" id="openModal" v-on:click="viewModalCreateScen">
                                            <i class="fal fa-plus"></i>新規作成</button>
                                        <button class="btn btn-sns-line btn-sns-line-lg btn_sort_items" v-on:click="viewModalSorter()">
                                            <i class="fa fa-arrows"></i>並べ替え</button>
                                    </div>
                                    <div style="color: rgb(34, 34, 34); font-size: 14px; padding-left: 10px"
                                         v-show="selected.length > 0"

                                    >このフォルダ内の @{{ selected.length }} 件が選択されています</div>
                                </div>
                                <div class="btn-right-top gr-search" style="position: absolute;align-items: center; background: #ffffff">
                                    <i class="far fa-search"
                                       @click="is_show_search = !is_show_search"
                                       style="color: #DDDDDD !important; font-size: 15px; width: 40px; height: 40px; display: flex;align-items: center; justify-content: center"></i>
                                    <input type="text" @keyup.enter="searchByKeyword()" class="form-control search_for_temp" v-model="search_template"
                                           placeholder="管理名を入力"
                                           style="padding: 0 35px 2px 0px;
                                                  height: 38px;
                                                  border: none;
                                                  box-shadow: none;
                                                  width: 250px;
                                                  font-size: 13px;
                                                  transition: 0.4s;"
                                           :class="{ 'hide-search': is_show_search == 0 }"
                                    >

                                    <img @click="clearSearch" v-if="search_template"
                                         style="width: 15px;
                                            transform: translateY(-50%);
                                            top: 50%;
                                            right: 10px;
                                            position: absolute;
                                            cursor: pointer;
                                            width: 20px;"
                                         src="/images/icon-clear-search.png">
                                </div>
                            </div>
                            <div class="scen_items_all">
                                <table class="table_scen_items">
                                    <thead>
                                    <tr>
                                        <th class="text-left" style="width: 55px; padding: 5px 5px 0 15px;">
                                            <label class="c-checkbox">
                                                <input type="checkbox" name="" value="" v-model="selectAllDefault">
                                                <span class="checkmark"></span>
                                            </label>
                                        </th>
                                        <th class="text-left" style="">管理名</th>
                                        <th class="text-right" style="width: 100px; padding-left: 50px">購読中の友だち</th>
                                        <th class="text-right" style="width: 140px; padding-left: 50px">途中で終了した友だち</th>
                                        <th class="text-right" style="width: 100px; padding-left: 50px">読了済の友だち</th>
                                        <th class="text-left" style="width: 100px;">
                                            {{--                                                操作--}}
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="item in items"
                                            class="row-data"
                                        >
                                            <td class="text-left" style="padding-left: 15px">
                                                <label class="c-checkbox">
                                                    <input type="checkbox" :value="item.id" v-model="selected">
                                                    <span class="checkmark"></span>
                                                </label>
                                            </td>
                                            <td class="text-left"
                                                @click="redirectPageEdit(item.id)"
                                                style="position: relative"
                                            >
                                                <div class="text">
                                                    <p class="full-text" v-if="item.name.length > 15">@{{ item.name }}</p>
                                                    <p class="trunc-text" style="font-weight: 600; font-size: 14px; color: #222222; cursor: pointer">@{{ truncText(item.name) }}</p>
                                                </div>
                                            </td>
                                            <td class="text-left" style="text-align: right"
                                                @click.self="redirectPageEdit(item.id)"
                                            >
                                                <div class="d-flex align-items-center justify-content-end">
                                                    <span class="" @click.self.stop="showFriendFollow(item)" style="color: #222222; font-size: 14px; font-weight: 300">@{{ item.scenario_lineusers_reading_count }}<span style="font-size: 10px">人</span></span>
                                                    <span class="btn-redirect-friendlist" @click.self.stop="showFriendFollow(item)">表示</span>
                                                </div>
                                            </td>
                                            <td class="text-left" style="text-align: right;"
                                                @click.self="redirectPageEdit(item.id)"
                                            >
                                                <div class="d-flex align-items-center justify-content-end">
                                                    <span class="" @click.self.stop="showFriendUnfinish(item)" style="color: #222222; font-size: 14px; font-weight: 300">@{{ item.count_unfinish }}<span style="font-size: 10px">人</span></span>
                                                    <span class="btn-redirect-friendlist" @click.self.stop="showFriendUnfinish(item)">表示</span>
                                                </div>
                                            </td>
                                            <td class="text-left" style="text-align: right;"
                                                @click.self="redirectPageEdit(item.id)"
                                            >
                                                <div class="d-flex align-items-center justify-content-end">
                                                    <span class="" @click.self.stop="showFriendComplete(item)" style="color: #222222; font-size: 14px; font-weight: 300">@{{ item.scenario_lineusers_ended_count }}<span style="font-size: 10px">人</span></span>
                                                    <span class="btn-redirect-friendlist" @click.self.stop="showFriendComplete(item)">表示</span>
                                                </div>
                                            </td>
                                            <td class="text-right" style="padding-right: 10px">
                                                <div style="display: flex; align-items: center;">
{{--                                                    <a :href="'#'" @click="redirectPageEdit(item.id)"--}}
{{--                                                       class="btn btn-sns-line btn_edit_items">--}}
{{--                                                        編集<i class="fa fa-pen"></i>--}}
{{--                                                    </a>--}}
                                                    <div class="btn-group show-popup-action"
                                                         @click="showPopupAction($event)"
                                                         style="padding: unset; margin-left: auto">
                                                        <i class="fas fa-ellipsis-h" style="color: #E0E0E0;"></i>

                                                        <div class="explain-action">
                                                            コピー・削除
                                                        </div>

                                                        <ul class="dropdown-menu action-broadcast" style=" min-width: 74px; left: -27px; top: 15px; text-align: center;">
                                                            <li class="focus-pointer-item">
                                                                <div style="display: flex; align-items: center; cursor: pointer"
                                                                    v-on:click="copyScenario(item)">
                                                                    <img src="/images/copy-light.png" alt="">
                                                                    <span class="action-name">コピー</span>
                                                                </div>
                                                            </li>
                                                            <li class="focus-pointer-item">
                                                                <div style="display: flex; align-items: center; cursor: pointer"
                                                                    v-on:click="deleteScenario(item.id)">
                                                                    <img src="/images/icon-trash.png" alt="">
                                                                    <span class="action-name">削除</span>
                                                                </div>
                                                            </li>
                                                        </ul> 
                                                    </div>
                                                </div> 
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="scenario_body_action " >
                        <div class="scem_action_left " v-show="toggle_folder == 0">
                            <p v-on:click ="showScenarioFolder(1)">
                                <i class="far fa-caret-square-left"></i>フォルダを非表示
                            </p>
                        </div>
                        <div class="scem_action_left_sm" v-show="toggle_folder == 1">
                            <p style="cursor: pointer;" v-on:click ="showScenarioFolder(0)">
                                <i class="far fa-caret-square-right"></i>
                            </p>
                        </div>
                        <div class="scen_action_right ">
                            <button class="btn btn-sns-line btn-sns-line-lg btn_change_folder"
                                    :class="{active: selected.length > 0}"
                                    v-on:click="viewModalMoveFolder()"
                                    :disabled="(selected.length == 0) ? true : false">
                                    <i class="fa fa-folder"></i>一括フォルダ変更</button>
                            <button class="btn btn-sns-line btn-sns-line-lg btn_bulk_delete"
                                    :class="{active: selected.length > 0}"
                                    v-on:click="deleteTemplates"
                                    :disabled="(selected.length == 0) ? true : false">
                                    <i class="fal fa-trash-alt"></i>一括削除</button>

                            <nav style="margin: 0px; margin-left: auto; display: flex; align-items: center"
                                 class="text-center"
                                 :class="{'pagination-devered': true}"
                                >
                                <ul class="pagination"
                                    style="margin: 0px"
                                    v-if="pagination.last_page > 1"
                                >
                                    <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>
                                <div class="limit ml-4 select-container">
                                    <div class="dropdown ml-4">
                                        <a class="btn btn-secondary dropdown-toggle d-flex align-items-center" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            @{{pagination.per_page}}/page<i class="fal fa-chevron-down" style="color:#E0E0E0 ; padding-right: 4px; position: absolute; right: 5px"></i>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" href="#" @click.prevent="changeLimit(10)">10/page</a>
                                            <a class="dropdown-item" href="#" @click.prevent="changeLimit(20)">20/page</a>
                                            <a class="dropdown-item" href="#" @click.prevent="changeLimit(50)">50/page</a>
                                            <a class="dropdown-item" href="#" @click.prevent="changeLimit(100)">100/page</a>
                                        </div>
                                    </div>
                                </div>
                            </nav>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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" style="border: none;">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true" style="opacity: 1;font-size: 27px">
                        <i class="fas fa-times"></i></button>
                    <h2 class="text-center " style="font-size: 20px; color: rgb(34, 34, 34); font-weight: bold">【 フォルダ並べ替え 】</h2>
                </div>
                <div class="modal-body scroll-modal sort-folder">

                    <div class="item-sort"
                         v-for="(item,index) in arrGroupSort"
                         :key="item.id"
                         :data-id="item.id"
                         v-if="show_sort"
                    >
                        <i class="fa fa-bars item_icon"></i>
                        <div class="sort-name">@{{item.name}}</div>
                        <i class="far fa-ellipsis-h ic-menu" ></i>
                        <div class="popup-move-item-sort">
                            <div  class="action-move"
                                  v-on:click="onUpdateDefaultGroup(undefined, index, 'top')"
                                  :class="{'not-allowed': index == 0 }"
                            >
                                <i class="fa fa-sort-numeric-up" style="padding-right: 15px;"></i>一番上に移動
                            </div>
                            <div class="action-move"
                                 v-on:click="onUpdateDefaultGroup(undefined, index, 'bottom')"
                                 :class="{'not-allowed': index == arrGroupSort.length - 1}"
                            >
                                <i class="fa fa-sort-numeric-down" style="padding-right: 15px;"></i>一番下に移動
                            </div>
                        </div>
                    </div>

                    <input type="hidden" id="array_sort_fol" value="">
                    <input type="hidden" id="current_position_fol" value="">
                </div>
                <div class="text-center">
                    <button type="button" class="btn btn-sns-line btn_choose_sort" v-on:click="sortedFolder">変更を保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalCreateOrUpdateFolder"
         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" style="border: none;">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true" style="opacity: 1;font-size: 27px">
                        <i class="fas fa-times"></i></button>
                    <h2 class="text-center " style="font-size: 20px; color: rgb(34, 34, 34); font-weight: bold">フォルダ作成・編集</h2>
                </div>
                <div class="modal-body" style="    padding: 15px 80px;">
                    <div style="display: flex; align-items: end; justify-content: space-between; margin-bottom: 5px">
                        <span style="color: #222222; font-size: 14px; font-weight: 300">フォルダ名</span>
                        <span style="color: #888888; font-size: 12px; font-weight: 300">@{{ folder_name ? folder_name.length : 0 }}/15</span>
                    </div>
                    <input type="text"
                        v-model="folder_name"
                           style="height: 35px"
                           class="form-control"
                    >
                </div>
                <div class="text-center">
                    <button type="button" class="btn btn-sns-line btn_choose_sort" v-on:click="createFolder">変更を保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalConfirmDeleteFolder" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="chatSettingStatus">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="">

                <div class="modal-header text-center font-weight-bold"
                     style="font-size: 20px; color: #222222; border: none">
                    フォルダ削除

                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                            style="opacity: 1;font-size: 27px; border-radius: 5px;">
                        <i class="fas fa-times" style="position: relative; bottom: 2px;"></i>
                    </button>
                </div>


                <div class="modal-body" style="padding: 25px 80px">
                    <div style="text-align: center; color: #222222; font-size: 14px">
                        <div>フォルダを削除した場合、フォルダ内のコンテンツも </div>
                        <div>すべて削除されますがよろしいですか？</div>
                    </div>
                    <input type="hidden" id="input-hidden-id-folder-delete">
                    <div class="text-center">
                        <button class="btn btn-sns-line btn-sns-line-success btn_confirm-delete-folder" @click="deleteFolder">
                            フォルダを削除
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="sorter_modal_v1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="border: none;">

                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true" >
                        <i class="fas fa-times"></i>
                    </button>
                    <h2 class="text-center" style="font-weight: 600; color: rgb(43, 47, 54); font-size: 20px"> 並べ替え</h2>
                </div>
                <div class="modal-body scroll-modal sort-list">
                    <div class="item-sort"
                         v-for="(item,index) in item_all"
                         :key="item.id"
                         :data-id="item.id"
                         v-if="show_sort"
                    >
                        <i class="fa fa-bars item_icon"></i>
                        <div class="sort-name">@{{item.name}}</div>
                        <i class="far fa-ellipsis-h ic-menu" ></i>
                        <div class="popup-move-item-sort">
                            <div  class="action-move"
                                  :class="{'not-allowed': index == 0 }"
                                  v-on:click="onUpdate(undefined, index, 'top')">
                                <i class="fa fa-sort-numeric-up" style="padding-right: 15px;"></i>一番上に移動
                            </div>
                            <div class="action-move"
                                 :class="{'not-allowed': index == item_all.length - 1}"
                                 v-on:click="onUpdate(undefined, index, 'bottom')"
                            >
                                <i class="fa fa-sort-numeric-down" style="padding-right: 15px;"></i>一番下に移動
                            </div>
                        </div>

{{--                        <div class="col-sm-1">--}}
{{--                            <div class="box-ic-sort">--}}
{{--                                <i class="far fa-chevron-up"   v-on:click="onUpdate(undefined, index, 'up')"></i>--}}
{{--                                <i class="far fa-chevron-down" v-on:click="onUpdate(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">
                    <button type="button" class="btn btn-sns-line btn_choose_sort"
                            v-on:click="sortedTemplate">変更を保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalCreateScen" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="padding: 20px 20px 35px 20px">
                <form class="form-horizontal" id="addScenarioForm">
                    {{ csrf_field() }}
                    <div class="modal_head" style="height: 40px;">
                       <div style="">
                           <p class="create_scen_title text-center">ステップ配信 新規作成</p>
                           <button type="button" class="close" data-dismiss="modal" aria-hidden="true"  >
                               <i class="fas fa-times"></i>
                           </button>
                       </div>
                    </div>

                    <div class="modal_body" style="padding: 25px 100px;">
                        <div class="create_scen_name form-group">
                            <div style="margin-bottom: 10px; display: flex;">
                                <p class="scen_title">管理名</p>
                                <p class="count_title">@{{ countText(text_length) }}/20</p>
                            </div>
                            <input type="text" class="form-control" name="name" id="name_input" v-model="text_length" style="height: 35px; width: 100%;"/>
                        </div>
                        <div class="add_scen_folder form-group">
                            <p class="scen_title">フォルダ</p>
                           <div style="position: relative">
                               <select class="form-control select-icon" name="select_folder_create" id="folder_create" v-model="folder_add_scenario_id" style="height: 35px; width: 100%;">
                                   <option value="0">未分類 </option>
                                   <option v-for="(folder, indexFolder) in list_folder"
                                           :value="folder.id" :selected="folder.id == folder_active ? 'selected' : ''"> @{{ folder.name }}</option>
                               </select>
                               <i class="fa fa-angle-down incon_down"
                                  style="font-size: 20px; right: 10px; transform: translateY(-50%); top: 50%; position: absolute; color: #2B2F36 !important;"></i>
                           </div>
                        </div>

                        <div style="width: 80%; margin: 30px auto 0px auto; ">
                            <label class="c-checkbox" style="color: #222222; font-size: 14px; font-weight: 300">
                                <input type="checkbox"
                                       v-model="flag_position"
                                       name="flag_position" value="1">
                                <span class="checkmark"></span>
                                フォルダ内の一番上に追加する
                            </label>
                            <div style="color: #222222; font-size: 12px; font-weight: 300; margin-top: 5px">
                                ※ 未選択の場合、フォルダの一番下に追加されます
                            </div>
                        </div>

                    </div>
                    <div class="text-center" >
                        <button type="submit" class="btn btn-sns-line btn-sns-line-lg btn_create_scen"
{{--                                v-on:click="createScenario()"--}}
                        >メッセージの登録に進む</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalMoveFolder" 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; border-radius: 5px;">
                        <i class="fas fa-times" style="position: relative;"></i></button>
                    <h2 class="text-center font-weight-bold" style="font-size: 20px"> 【 一括フォルダ変更 】</h2>
                </div>
                <div class="modal-body" >
                    <div class="row ">
                        <div class="col-sm-2 col-sm-offset-1 title-left font-weight-bold">
                            移行先選択
                        </div>
                        <div class="col-sm-8">
                            <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>
                            <i class="fa fa-angle-down incon_down" style="left: 345px; bottom: 26px; font-size: 20px; position: relative; color: #888888 !important;"></i>
                        </div>
                    </div>
                    <div class="text-center" style="padding-top: 20px;">
                        <button v-on:click="moveItems()" class="btn btn-sns-line btn-sns-line-lg btn-sns-line-success">登録</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalBulkCitation">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="padding: 25px;">
                <div class="modal_head" style="height: 55px;">
                    <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>
                    <p class="text-center">一括引用登録</p>
                </div>
                <div class="modal_body">
                    <p style="font-weight: 300; font-size: 14px; color: #535657;margin-bottom: 10px;">引用元の配信対象（絞込み先）を選択</p>
                    <select class="form-control" style="font-weight: 500; font-size: 14px; color: #2B2F36; text-align: left;">
                        <option>友だち全員(絞り込みなし)</option>
                    </select>
                    <div class="list_action_citation">
                        <table id="table_action_citation" style="margin: 0;">
                            <tr>
                                <th>配信タイミング</th>
                                <th>メッセージ管理名</th>
                                <th>プレビュー</th>
                            </tr>
                            <tr>
                                <td>1 ステップ開始時</td>
                                <td>メッセージ管理名メッセージ…</td>
                                <td>
                                    <button class="btn btn-sns-line btn_preview_citation">
                                        <i class="far fa-caret-circle-right"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>2 0時間30分後</td>
                                <td>-</td>
                                <td>
                                    <button class="btn btn-sns-line btn_preview_citation">
                                        <i class="far fa-caret-circle-right"></i>
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="text-center">
                        <p style="font-weight: 300; font-size: 16px; color: #F44336;">※引用元の登録内容が上書きされますのでご注意ください</p>
                        <button class="btn btn-sns-line btn-sns-line-lg btn_selected_source">選択した内容を引用登録する</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalBulkDeletion">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="padding: 25px; width: 525px;">
                <div class="modal_head" style="height: 40px;">
                    <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>
                    <p class="text-center">一括削除</p>
                </div>
                <div class="modal_body text-center" style="width: 350px; margin: auto;">
                    <p style="font-weight: 300; font-size: 14px; color: #535657; margin-bottom: 10px;">選択中の配信対象</p>
                    <p style="font-weight: 600; font-size: 14px; color: #535657; margin-bottom: 10px; height: 40px; background-color: #DDDDDD; line-height: 40px; border-radius: 3px;">友だち全員(絞り込みなし)</p>
                    <p style="font-weight: 300; font-size: 12px; color: #535657;">
                    上記の配信対象に登録されている</p>
                    <p style="font-weight: 300; font-size: 12px; color: #535657; margin-bottom: 10px;">
                    メッセージ・アクションを全て消去しますが、宜しいですか？</p>
                    <p style="font-weight: 600; font-size: 14px; color: #F44336; margin-bottom: 10px;">※1度消去すると、元には戻せません</p>
                </div>
                <div class="text-center">
                    <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-danger btn_delete_all" v-on:click="deleteTemplates">全て削除</button>
                </div>
                <div class="text-center">
                    <button class="btn btn-sns-line btn-sns-line-lg btn_cancel_delete" data-dismiss="modal">キャンセル</button>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" value="{{ $folderId }}" id="folder_select">
</section>
</article>

@endsection
@push('js')
<script src="/js/scenario/index_v2.js?v={{config('sns-line.version')}}"></script>

@endpush