@extends('layout.basic.main')
@section('title','アクションスケジュール実行（一覧）')
@push('css')
    <link rel="stylesheet" href="/css/reply/style.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">

    <style>
        #item_vuelist .group_list .group_list_head {
            background: white !important;
            padding: 10px 0 !important;
        }
        #item_vuelist .primary_list_head {
            background: white !important;
        }

        #item_vuelist .group_list .schedule_group .glyphicon {
            margin: 0!important;
        }

        .search-inputs {
            background: white !important;
        }

        table {
            margin: 0 !important;
        }

        .btn-group>.btn+.dropdown-toggle {
            padding: 0 10px !important;
        }

        .space-col {
            padding: 0 2px 0 8px;
        }

        .btn-group:hover .action-reply{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block !important;
        }

        #list-auto-reply, #list-auto-reply table td, #list-auto-reply span {
            color: #51595C;
            font-weight: 600;
        }
        #list-auto-reply .box-ic-sort i {
            line-height: 2px;
            font-size: 24px;
            padding: 9px 3px !important;
        }
        #list-auto-reply .box-ic-sort i:hover {
            background-color: #96ADB2 !important;
            color: #FFFFFF !important;
            padding: 9px 3px !important;
            border-radius: 4px;
        }

        .focus-pointer:hover {
            background-color: #f6f6f6 !important;
        }

        .hover-icon-action:hover {
            background-color: #96ADB2 !important;
        }

        .hover-icon-action:hover i{
            color: #FFFFFF !important;
        }

        .hover-icon-action {
            /*width: 38px;*/
            display: inline-block;
            /*font-size: 27px;*/
            width: 39px;
            padding: 2px 6px 0;
            border-radius: 4px;
        }

        .table>tbody>tr:first-child>td{
            border-top: 0px !important;
        }

        input[type=checkbox]:checked:before {
            color: rgb(81, 89, 92) !important;
        }

        input[type=checkbox]:before {
            font-family: "FontAwesome";
            content: "\f00c";
            font-size: 15px;
            color: transparent !important;
            background: #fff;
            display: block;
            width: 18px;
            height: 18px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 7px;
        }
        input[type=checkbox] {
            -moz-appearance: none;
            -webkit-appearance: none;
            -o-appearance: none;
            outline: none !important;
            content: none;
        }

        .table>tbody>tr>td{
            border-top: 2px solid #F4F6F7;
        }

        .tag_left{
            width: 230px;
        }

        .tag_right{
            width: calc(100% - 230px);
        }

        .table>tbody>tr:last-child>td{
            border-bottom: 2px solid #F4F6F7;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid">
        <div class="row" id="list-auto-reply">
            <div class="col-xs-12 col-sm-12 col-md-12" style="padding-right: 0">
                <div class="row" style="margin: 0">
                    <h2 style="font-size: 20px; font-weight: bold; padding: 10px 10px 10px 0;margin-left: -15px">アクションスケジュール実行</h2>
                    <div class="clearfix"></div>
                    <div class="tag_separate" id="item_vuelist" v-cloak>
                        <div class="tag_left">
                            <div class="row">
                                <div class="col-md-12" style="padding:0">
                                    <div class="tab_folder  " >
                                        <span style="font-weight: bold">フォルダ</span>
                                        <div>
                                            <div class="popup" style="margin-right: 5px">
                                                <span class="hover-icon-action" style="font-weight: 400;font-size: 25px;font-weight: normal;" v-on:click="showAddGroupPopup">
                                                    <i class="far fa-plus-circle" style="background-color: unset;" ></i>
                                                </span>
                                                <div class="popuptext" id="myPopup">
                                                    <span style="font-weight: 600">フォルダ</span>
                                                    <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                                        <input type="text" id="cat_txt" v-model="name_group"
                                                               style="width: 79%;height: 32px;padding-left: 3px;border: 1px solid #bbb;border-radius: 4px">
                                                        <span style="font-size: 12px;margin-left: 2px;font-weight: 600">@{{ countTex(name_group) }}/15</span>
                                                    </div>
                                                    <div class="text-center" style="display: flex;align-items: center;justify-content: space-between;">
                                                        <button class="btn btn-success btn-sm"
                                                                style="width: 82px;background: #08BF5A;font-weight: 600"
                                                                v-on:click="addGroup()">決定</button>
                                                        <button class="btn btn-secondary btn-sm" style="background-color: rgb(125, 145, 149);color: white;font-weight: 600"
                                                                v-on:click="closeAddPopup">キャンセル</button>
                                                    </div>

                                                </div>
                                            </div>
                                            <i class="fas fa-sort-amount-down-alt hover-icon-action"  data-toggle='modal'
                                               data-target='#modalSortFolder' v-on:click="showModalSortFolder()" style="font-size: 25px;padding: 5px;"></i>
                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="nano-inner" id="nano-inner-group" style="margin-top: 0">
                                <div class="schedule_group tag_group row"
                                     id="group_0"
                                     data-id="0"
                                     style="padding: 10px 7px"
                                     v-bind:class="(group_open == 0)?'active':'folder-close'">
                                    <div v-on:click="showGroup(0)" class="display_category row" style="margin-left: 1px;">
                                        <div class="col-md-11 list-i-fol" >
                                            <div style="font-weight: 600">未分類 (@{{ count_default }})</div>
                                            <div class="btn-group"  style="padding: unset;">
                                                {{--                                                <i class="far fa-ellipsis-h ic-menu" style="background-color: #F6F6F6"></i>--}}
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div v-for="(category, index) in sortedCategories" class="tag_group schedule_group row"
                                     :id="'group_'+category.id"
                                     :data-id="category.id"
                                     v-bind:class="(category.id == group_open)?'active':'folder-close'">
                                    <div v-on:click="showGroup(category.id)" class="display_category  row" style="margin-left: 1px;">
                                        <div class="col-md-11 list-i-fol" >
                                            <div style="font-weight: 600">
                                                @{{ category.name }} (@{{ category.count }})
                                            </div>
                                            <div class="btn-group" style="padding: unset;" :style="(category.id == group_open)?'display:block':'display:none'">
                                                <i class="far fa-ellipsis-h ic-menu" style="background: unset"></i>
                                                <ul class="dropdown-menu action-reply"
                                                    style="min-width: 113px;left: -89px;top: 15px;">
                                                    <li class="focus-pointer" v-on:click="editGroup(category)">
                                                        <div style="cursor: pointer;font-weight: 600">
                                                            フォルダ名変更
                                                        </div>
                                                    </li>
                                                    <li class="focus-pointer" v-on:click="deleteGroup(category.id)">
                                                        <div style="cursor: pointer; font-weight: 600">
                                                            フォルダ削除
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>

                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="tag_right" style="margin-top: 20px">
                            <div class="box-btn-center">
                                <div class="">
                                    <a v-on:click="addNewItem()"  class="w-btn btn-cus-a col-btn-primary"  style="background-color:rgba(87,153,219,1); color: white !important;" target="_self"> 新規作成</a>
                                </div>
                                <div class="btn-right-top">
                                    <div  >
                                        <a v-if="group_open == -1"
                                           style="background-color: rgba(125,145,149,1); color: white; cursor: no-drop"
                                           class="w-btn btn-cus-a btn-sort">並べ替え</a>
                                        <a v-else href="" style="background-color: rgba(125,145,149,1); color: white;"
                                           data-toggle="modal" data-target="#modalSortItem"
                                           v-on:click="showModalSortItems()"
                                           data-type="tag" data-id="" data-callback="tag_sorted"
                                           class="w-btn btn-cus-a btn-sort">並べ替え</a>
                                    </div>
                                    <div>
                                        <a v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                                           class="w-btn btn-cus-a btn-sort"
                                           style="background-color: rgb(176, 194, 198);color: white;
                                    cursor: no-drop;
                                     margin-top: 1px;margin-left: 15px;margin-right: 15px; padding: 9px"
                                        > 一括フォルダ変更
                                        </a>
                                        <a v-else  class="w-btn btn-cus-a btn-sort"
                                           style="background-color: #5799DB;color: white; margin-top: 1px;margin-left: 15px;margin-right: 15px; padding: 9px"
                                           data-toggle='modal'
                                           data-target='#modalMoveFolder'
                                        > 一括フォルダ変更
                                        </a>
                                    </div>
                                    <div>
                                        <a v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                                           class="w-btn btn-cus-a btn-sort"
                                           style="background-color: rgb(176, 194, 198);color: white;
                                    cursor: no-drop;"
                                        > 一括削除
                                        </a>
                                        <a v-else  class="w-btn btn-cus-a btn-sort"
                                           style="background-color: #F44336;color: white; "
                                           v-on:click="deleteItemsActionSchedule()"
                                        > 一括削除
                                        </a>
                                    </div>

                                </div>
                            </div>
                            <table id="table_list_reply" class="table vuelist-nanowrapper">
                                <thead>
                                <tr>
                                    <th style="width: 25%;min-width: 100px; border-radius: 5px 0px 0px 5px" class="text-left">
                                        <label for="itemcheck_all" style="padding-left: 10px">
                                            <input v-if="group_open==0" type="checkbox" name="dammy"
                                                   v-model="selectAllDefault"> &nbsp;トリガー
                                            <input v-else type="checkbox" name="dammy" v-model="selectAll">
                                            <span style="font-weight: 600;color: #FFFFFF; padding-left: 10px">作成日 / 管理名</span>
                                        </label>
                                    </th>
                                    <th style="width: 23%;text-align: left !important;">繰り返しスケジュール</th>
                                    <th style="width: 17%;text-align: left !important;">終了予定日</th>
                                    <th style="width: 26%; text-align: left">アクション</th>
                                    <th style="width: 18%;min-width: 120px;" class="text-left" colspan="2">実行予定・履歴</th>

                                </tr>
                                </thead>
                                <tbody v-show="group_open == 0">
                                <tr class="item_tr"

                                    v-for="item in items_default"
                                >
                                    <td class="text-left" style="">
                                        <label :for="'itemcheck-default' + item.id"
                                               style="display: flex; padding-left: 10px; align-items: center"
                                        >
                                            <input :id="'itemcheck-default' + item.id" type="checkbox"
                                                   v-model="selected" :value="item.id">
                                            <div style="display: inline-block; margin-left: 15px">
                                                <span style="color: #51595C;font-size: 13px;">@{{ item.created_at }}</span>
                                                <a :href="'/basic/action-schedules/' + item.id + '/edit?group_id=' + item.category_id"
                                                   style="display: block; text-decoration: underline; font-weight: bold;
                                                   font-size: 16px; padding-top: 5px;  display: -webkit-box;  -webkit-line-clamp: 1;
                                                   -webkit-box-orient: vertical;
                                                   overflow: hidden;"
                                                >
                                                    @{{ item.name }}</a>
                                            </div>
                                        </label>
                                    </td>
                                    <td style="text-align: left !important; color: #51595C; font-weight: normal;">
                                        <span style="display: -webkit-box;  -webkit-line-clamp: 1; overflow: hidden;
                                                   -webkit-box-orient: vertical">
                                                <p v-if="item.repeat_type == 'day'"><span>@{{ item.day_add }}日ごと</span></p>
                                                <p v-else-if="item.repeat_type == 'week'">
                                                    <span>@{{ item.number_week_to_repeat }}週ごと</span>
                                                    <span style="padding-left: 10px;">@{{ getDayInWeekOfItem(item.day_of_week_repeat) }}</span>
                                                </p>
                                                <p v-else>
                                                    <span>
                                                       @{{ item.number_month_to_repeat }} ヶ月ごと @{{ getMonthlyRepeatData(item.date_repeat_after_number_of_month) }}
                                                    </span>
                                                </p>
                                        </span>
                                    </td>
                                    <td style="text-align: left !important; color: #51595C; font-weight: normal;">
                                        <span> @{{
                                            item.end_date_type == 'unlimited' ? 'なし（無期限）' : item.end_date
                                        }}
                                        </span>
                                    </td>
                                    <td style="text-align: left;
                                         color: #FF00F5;
                                       ">
                                       <div class="d-flex justify-content-between">
                                            <span class="over-text" v-if="item.setting_actions.length > 0"
                                                style=" display: -webkit-box;
                                                        -webkit-line-clamp: 1;
                                                        -webkit-box-orient: vertical;
                                                        overflow: hidden;"
                                            >
                                                                            <span v-if="item.setting_actions[0].type == 'tag'">【タグ】
                                                                            <span v-for="(itemTag, indexTag) in item.setting_actions[0].list_tags">@{{ indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span v-if="item.setting_actions[0].data.action == 1">つける</span><span v-else>はずす</span>
                                                                            </span>

                                                <span v-else-if="item.setting_actions[0].type == 'scenario'">【ステップ】<span v-if="item.setting_actions[0].data.action != 1">@{{ item.setting_actions[0].data.scenario_name }}</span>
                                                                            <span v-else>購読停止・予約キャンセル</span>
                                                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'template'">【テンプレート】
                                                                            <span>@{{ item.setting_actions[0].data.template_name }}</span>
                                                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'text'" >【テキスト】
                                                                            <span>@{{ item.setting_actions[0].data.content }}</span>
                                                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'richmenu'">【リッチメニュー】
                                                                            <span v-if="item.setting_actions[0].data.action != 1">@{{ item.setting_actions[0].data.richmenu_name }} 表示</span>
                                                                            <span v-else>表示を停止</span>
                                                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'remind'">【リマインド】
                                                                            <span>@{{ item.setting_actions[0].data.remind_name }}</span>
                                                                            </span>
                                                 <span v-else-if="item.setting_actions[0].type == 'bookmark'">
                                              <span class="action-title">【ブックマーク】</span>
                                              <span v-if="item.setting_actions[0].data.action == 1">ブックマークする</span>
                                              <span v-else>ブックマークを外す</span>
                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'block'">
                                                  <span class="action-title">【ブロック・非表示】</span>
                                                  <span v-if="item.setting_actions[0].data.action == 1">ブロックする</span>
                                                  <span v-if="item.setting_actions[0].data.action == 2">ブロック解除</span>
                                                   <span v-if="item.setting_actions[0].data.action == 3">表示</span>
                                                  <span  v-if="item.setting_actions[0].data.action == 4">非表示</span>
                                                </span>
                                                <span v-else-if="item.setting_actions[0].type == 'compliant_status'">
                                             <span class="action-title">【対応ステータス】</span>
                                              <span v-if="item.setting_actions[0].data.action == 1">@{{ item.setting_actions[0].data.content }}をつける</span>
                                              <span v-else> ステータスを外す</span>
                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'friend_info'">【友だち情報】
                                                    <span>@{{ item.setting_actions[0].data.name }}</span>
                                                    <span v-if="item.setting_actions[0].data.type != 6">
                                                        <span v-if="item.setting_actions[0].data.action == 1"> 登録情報を削除</span>
                                                        <span v-else> @{{ item.setting_actions[0].data.content }}</span>
                                                    </span>
                                                    <span v-else>
                                                        <span v-if="item.setting_actions[0].data.action == 0"> 登録情報を削除</span>
                                                        <span v-else> @{{ item.setting_actions[0].data.content }}</span>
                                                    </span>
                                                </span>
                                            </span>

                                            <span v-if="item.setting_actions.length > 1" style="display: inline-block;width: 90px;text-align: right;">他@{{ item.setting_actions.length - 1 }}件</span>
                                        </div>
                                    </td>
                                    <td class="text-left" >
                                        <a :href="'/basic/action-schedules/' + item.id" class="btn btn-sns-line btn-sns-line-primary" style="width: 105px;">詳細</a>
                                    </td>
                                    <td style="">
                                        <div class="btn-group" style="padding: unset;">
                                            <i class="far fa-ellipsis-h ic-menu" style="font-size: 30px"></i>
                                            <ul class="dropdown-menu action-reply"
                                                style="min-width: 74px; left: -24px; top: 20px; text-align: center;">
                                                <li class="focus-pointer" @click="copyItem(item.id)">
                                                    <div style="cursor: pointer;font-weight: 600" >
                                                        コピー
                                                    </div>
                                                </li>
                                                <li class="focus-pointer" style="padding-top: 2px" @click="deleteSchedule(item.id)">
                                                    <div style="cursor: pointer;color: #F44336;font-weight: 600">
                                                        削除
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>

                                    </td>
                                </tr>
                            </tbody>
                                <tbody v-show="group_open != 0">
                                <tr class="item_tr"
                                    v-for="item in items"
                                >
                                    <td class="text-left" style="border-radius: 5px 0px 0px 5px;">
                                        <label :for="'itemcheck' + item.id"
                                               style="display: flex; padding-left: 10px; align-items: center"
                                        >
                                            <input :id="'itemcheck' + item.id" type="checkbox" :value="item.id"
                                                   v-model="selected">
                                            <div style="display: inline-block; margin-left: 15px">
                                                <span style="color: #51595C;font-size: 13px;">@{{ item.created_at }}</span>
                                                <a style="display: block;
                                                    text-decoration: underline; font-weight: bold;
                                                    font-size: 16px;
                                                    padding-top: 5px;
                                                    display: -webkit-box;
                                                    -webkit-line-clamp: 1;
                                                    -webkit-box-orient: vertical;
                                                    overflow: hidden;"
                                                   :href="'/basic/action-schedules/' + item.id + '/edit?group_id=' + item.category_id">@{{ item.name }}</a>
                                            </div>
                                        </label>
                                    </td>
                                    <td style="text-align: left !important; color: #51595C; font-weight: normal;">
                                        <span style="display: -webkit-box;  -webkit-line-clamp: 1; overflow: hidden;
                                                   -webkit-box-orient: vertical">
                                                <p v-if="item.repeat_type == 'day'"><span>@{{ item.day_add }}日ごと</span></p>
                                                <p v-else-if="item.repeat_type == 'week'">
                                                    <span>@{{ item.number_week_to_repeat }}週ごと</span>
                                                    <span style="padding-left: 10px;">@{{ getDayInWeekOfItem(item.day_of_week_repeat) }}</span>
                                                </p>
                                                <p v-else>
                                                    <span>
                                                       @{{ item.number_month_to_repeat }} ヶ月ごと @{{ getMonthlyRepeatData(item.date_repeat_after_number_of_month) }}
                                                    </span>
                                                </p>
                                        </span>
                                    </td>
                                    <td style="text-align: left !important; color: #51595C; font-weight: normal;">
                                        <span>@{{
                                            item.end_date_type == 'unlimited' ? 'なし（無期限）' : item.end_date
                                        }}
                                        </span>
                                    </td>
                                    <td style="text-align: left; color: #FF00F5;">
                                        <div class="d-flex justify-content-between">
                                            <span class="over-text" v-if="item.setting_actions.length > 0"
                                                style="display: -webkit-box;
                                                        -webkit-line-clamp: 1;
                                                        -webkit-box-orient: vertical;
                                                        overflow: hidden;">
                                                                            <span v-if="item.setting_actions[0].type == 'tag'">【タグ】
                                                                            <span v-for="(itemTag, indexTag) in item.setting_actions[0].list_tags">@{{ indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span v-if="item.setting_actions[0].data.action == 1">つける</span><span v-else>はずす</span>
                                                                            </span>

                                                <span v-else-if="item.setting_actions[0].type == 'scenario'">【ステップ】<span v-if="item.setting_actions[0].data.action != 1">@{{ item.setting_actions[0].data.scenario_name }}</span>
                                                                            <span v-else>購読停止・予約キャンセル</span>
                                                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'template'">【テンプレート】
                                                                            <span>@{{ item.setting_actions[0].data.template_name }}</span>
                                                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'text'" >【テキスト】
                                                                            <span>@{{ item.setting_actions[0].data.content }}</span>
                                                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'richmenu'">【リッチメニュー】
                                                                            <span v-if="item.setting_actions[0].data.action != 1">@{{ item.setting_actions[0].data.richmenu_name }} 表示</span>
                                                                            <span v-else>表示を停止</span>
                                                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'remind'">【リマインド】
                                                                            <span>@{{ item.setting_actions[0].data.remind_name }}</span>
                                                                            </span>
                                                <span v-else-if="item.setting_actions[0].type == 'bookmark'">
                                                    <span class="action-title">【ブックマーク】</span>
                                                    <span v-if="item.setting_actions[0].data.action == 1">ブックマークする</span>
                                                    <span v-else>ブックマークを外す</span>
                                                </span>
                                                <span v-else-if="item.setting_actions[0].type == 'block'">
                                                    <span class="action-title">【ブロック・非表示】</span>
                                                    <span v-if="item.setting_actions[0].data.action == 1">ブロックする</span>
                                                    <span v-if="item.setting_actions[0].data.action == 2">ブロック解除</span>
                                                    <span v-if="item.setting_actions[0].data.action == 3">表示</span>
                                                    <span  v-if="item.setting_actions[0].data.action == 4">非表示</span>
                                                </span>
                                                <span v-else-if="item.setting_actions[0].type == 'compliant_status'">
                                                    <span class="action-title">【対応ステータス】</span>
                                                    <span v-if="item.setting_actions[0].data.action == 1">@{{ item.setting_actions[0].data.content }}をつける</span>
                                                    <span v-else> ステータスを外す</span>
                                                </span>
                                                <span v-else-if="item.setting_actions[0].type == 'friend_info'">【友だち情報】
                                                    <span>@{{ item.setting_actions[0].data.name }}</span>
                                                    <span v-if="item.setting_actions[0].data.type != 6">
                                                        <span v-if="item.setting_actions[0].data.action == 1"> 登録情報を削除</span>
                                                        <span v-else> @{{ item.setting_actions[0].data.content }}</span>
                                                    </span>
                                                    <span v-else>
                                                        <span v-if="item.setting_actions[0].data.action == 0"> 登録情報を削除</span>
                                                        <span v-else> @{{ item.setting_actions[0].data.content }}</span>
                                                    </span>
                                                </span>
                                            </span>

                                            <span v-if="item.setting_actions.length > 1" style="display: inline-block;width: 90px;text-align: right;">他@{{ item.setting_actions.length - 1}}件</span>
                                        </div>
                                    </td>
                                    <td class="text-left" >
                                        <a :href="'/basic/action-schedules/' + item.id" class="btn btn-sns-line btn-sns-line-primary" style="width: 105px;">詳細</a>
                                    </td>
                                    <td style="">
                                        <div class="btn-group" style="padding: unset;">
                                            <i class="far fa-ellipsis-h ic-menu" style="font-size: 30px"></i>
                                            <ul class="dropdown-menu action-reply"
                                                style="min-width: 74px; left: -24px; top: 20px; text-align: center;">
                                                <li class="focus-pointer" @click="copyItem(item.id)">
                                                    <div style="cursor: pointer;font-weight: 600" >
                                                        コピー
                                                    </div>
                                                </li>
                                                <li class="focus-pointer" style="padding-top: 2px" @click="deleteSchedule(item.id)">
                                                    <div style="cursor: pointer;color: #F44336;font-weight: 600">
                                                        削除
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>

                                </tbody>

                            </table>
                        </div>
                        <span id="modalCaller" data-type="egg" type="button" data-toggle="modal"
                              data-target="#messageModal" style="display: none;"></span>
                        <div class="modal fade" id="modalSortItem"
                             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"
                                                v-on:click="closeModalSortItems()"
                                        >
                                            <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></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" :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="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-success btn-choise-folder" v-on:click="sortedItemInfor">保存</button>
                                    </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">
                                        <button type="button" class="close" data-dismiss="modal"
                                                v-on:click="closeModalSortFolder()" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                            <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></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>
                                        <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-success btn-choise-folder" v-on:click="sortedFolder">保存</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">
                                            <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px"></i></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" style="font-weight: 600">
                                                移行先選択
                                            </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>
                                                    <i class="fal fa-angle-down"></i>
                                                </div>

                                            </div>

                                        </div>

                                    </div>
                                    <div class="text-center">
                                        <button type="button" class="btn btn-success btn-choise-folder"
                                                v-on:click="moveItems()"
                                                v-bind:class="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)?'disabled':''"
                                        >登録</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="folder_cookie"   value="{{$folderCookie}}" >
    <input type="hidden" id="contractType"   value="{{$contractType}}" >
    <input type="hidden" id="flag_contract_new"   value="{{$flag_contract_new}}" >
@endsection
@push('js')
    <script>
        route_add_item = "{!! route('addItemReply') !!}";
    </script>
    <script src="/js/schedules/index.js?v={{config("sns-line.version")}}"></script>
@endpush