@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/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>
        .tab_folder{
            padding-bottom: 10px;
            margin-top: 7px;
            font-size: 18px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

        .popup {
            position: relative;
            display: inline-block;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* The actual popup */
        .popup .popuptext {
            visibility: hidden;
            width: 233px;
            background-color: white;
            color: black;
            border-radius: 6px;
            border: 1px solid #ddd;
            padding: 10px;
            position: absolute;
            z-index: 9999;
            font-size: 14px;
            top: 125%;
            right: -159%;
            margin-left: -80px;
            box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
        }
        .popup .show {
            visibility: visible;
        }
        .btn-cus-a{
            padding: 9px 27px;
            border: 0;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .btn-new-group{
            background-color: #0ebeeb !important;
        }
        .btn-cus-a:hover{
            color: #FFFFFF;
        }
        .col-btn-primary{
            background-color: rgb(87, 153, 219);
        ;
        }
        .box-btn-center{
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }
        #item_scenario .tag_group.active{
            background-color: #f6f6f6 !important;
        }
        .list-i-fol{
            padding: unset;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        #nano-inner-group .tag_group {
            padding: 7px;
            border: 1px solid #F2F2F2;
            border-radius: 4px;
            margin-bottom: 7px;
        }
        #nano-inner-group .tag_group:hover {
            background-color: #f6f6f6;
        }
        .btn-info {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 5px 10px;
            font-size: 85%;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0
        }



        #nano-inner-group {
            background-color: #fff
        }

        #nano-inner-group .tag_group {
            /*padding: 5px;*/
            /*border-bottom: solid 1px #dedddd;*/
            margin-left: 2px;
        }
        .btn-group:hover .action-broadcast{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block !important;
        }
        .ic-menu{
            font-size: 25px;
            cursor: pointer
        }
        .focus-pointer {
            cursor: pointer;
            padding: 5px;
        }

        .focus-pointer:hover{
            background-color: #f6f6f6  !important; ;
        }
        .fade {
            transform: unset !important;
            animation: unset !important;
        }
        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }
        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important; ;
            animation-duration: unset !important;
        }
        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            transition: unset !important;
            -webkit-transform:unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
            transform: unset !important;
        }
        .modal-header{
            border-bottom: unset !important;
        }
        .group-ic-pro i {
            color: rgba(137,143,144,1) !important;
            cursor: pointer;
        }
        #item_scenario .box-ic-sort i{
            line-height: 12px;
            color: rgba(137,143,144,1);
        }
        .box-ic-sort i{
            line-height: 15px;
            color: rgba(137,143,144,1);
            font-size: 24px;
        }
        .mt-item-fol{
            margin-top: 10px;
        }
        #item_scenario .btn-choise-folder {
            background: rgba(8,191,90,1);
            width: 140px;
            font-size: 18px !important;
            font-weight: bold;
            border-radius: 50px !important;
            margin-bottom: 25px;
            margin-top: 10px;
        }
        #item_scenario .group-ic-pro ul li{
            padding: 4px 10px;
            font-size: 13px;
            border: unset;
        }
        #tbl-scen th{
            padding: 9px;
            font-weight: bold;
            background-color: #08BF5A !important;
            /*border: none!important;*/
        }
        #item_scenario .tag_right .btngroup{
            margin-bottom: 5px;
        }
    </style>
    <style>
        .modal-content {
            display: block;
            padding: 0;
            position: inherit;
        }

        .taiou_gry {
            background-color: #00BFFF !important;
        }

        #item_vuelist {
            background-color: inherit;
        }

        .messagelist .btngroup {
            margin-top: 20px;
        }
        .btngroup .btn a {
            background-color: #337ab7;;
            border-radius: 20px;
        }
        .btngroup .btn {
            padding: 0;
        }

        .btn{
            border-radius: 20px;
            padding: 5px 10px;
        }

        #button_sort_scen {
            padding-left: 25px;
            padding-right: 25px;
            height: 31px;
            margin-top: 5px;
            background-color: #6c757d;
            color: white;
        }
        .table-striped td,th {
            border-bottom: 1px solid #ddd;
            border-top: 1px solid #ddd;
            border-left: unset;
            border-right: unset;
        }
        .table {
            border-spacing: 0;
            border-collapse: unset;
        }

        .left_bar {
            border-left: solid 6px #00a65a;
            text-indent: 1em;
            font-size: 1.1em;
            padding-left: 1em;
            line-height: 1.8;
            padding-bottom: 5px;
            padding-top: 4px;
            font-weight: 600 !important;
        }
        .btn-create,#btn_edit:hover {
            background-color: #12b827 !important;
        }
        #btn_copy:hover {
            background-color: #1543cb !important;
        }
        #btn_delete:hover {
            background-color: #ec093f !important;
        }
        .bootbox-confirm {
           margin-top: 150px;
        }

        .table-striped th {
            background: rgba(8,191,90,1) !important;
        }


        .form-create-folder{
            position: absolute;
            z-index: 100;
            top: 35px;
            background-color: #fff;
            left: 15px;
            right: 0;
            padding: 15px 15px 10px;
            box-shadow: 0 0 5px;
            opacity: 0;
            visibility: hidden;
            transition: 0.5s;
        }

        .show-create-folder{
            opacity: 1;
            visibility: visible;
        }

        .list-folder > li > a.active {
            background-color: #828282 !important;
            color: white;
        }
        .list-folder > li > a {
            display: block;
            color: #828282;
            font-weight: bold;
            border-radius: 5px;
            border: 1px solid #828282;
        }
        .active {
            background: #ddd !important;
        }

        .select-icon {
            background: url(/images/down.png) right 12px center no-repeat;
        }

        .list-edit-folder {
            display: block;
            padding: 15px 15px;
            clear: both;
            font-weight: 400;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
            cursor: pointer;
        }

        .btn-folder {
            padding: 5px 6px;
        }
        .btn{
            font-weight: bold;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <section class="messagelist" id="item_scenario" v-cloak>
            <div class="row">
                <div class="col-sm-12">
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">ステップ配信</h2>
            <p style="font-size: 15px; color: #222222">登録しておいたメッセージを順番に自動で配信することができます。<br>
                条件によって配信対象を絞り込んだり、友だちの行動に合わせた配信などを設定することもできます。<br>
            <div class="row">
                 <div class="col-md-3 col-lg-2 group-ic-pro" style="margin-top: 25px">
{{--                     <button class="btn btn-success" @click="showHidePopupCreateFolder()"><i--}}
{{--                                 class="fas fa-plus-circle"></i> 追加--}}
{{--                     </button>--}}
                     <div>
                         <div class="tab_folder  " >
                             <span style="font-weight: bold">フォルダ</span>
                             <div>
                                 <div class="popup">

                                     <svg v-on:click="showHidePopupCreateFolder" xmlns="http://www.w3.org/2000/svg"
                                          viewBox="0 0 512 512" style="width: 20px; fill: rgba(137,143,144,1) !important;position: absolute;right: 7px;top: -18px;"><path d="M232 344V280H168C154.7 280 144 269.3 144 256C144 242.7 154.7 232 168 232H232V168C232 154.7 242.7 144 256 144C269.3 144 280 154.7 280 168V232H344C357.3 232 368 242.7 368 256C368 269.3 357.3 280 344 280H280V344C280 357.3 269.3 368 256 368C242.7 368 232 357.3 232 344zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>

                                 </div>
                                 <i class="fas fa-sort-amount-down-alt"  data-toggle='modal'
                                    data-target='#modalSortFolder' v-on:click="showModalSortFolder()"></i>
                             </div>

                         </div>

                     </div>
                     <div class="form-create-folder" :class="show_create_folder ? 'show-create-folder' : ''">
                         <div class="form-group" >
{{--                             <label for="folder_name" id="title_folder">@{{ title_folder }}</label>--}}
                             <label for="folder_name" id="title_folder">フォルダ名</label>
                             <div style="padding: 7px 0; display: flex; align-items: flex-end">
                             <input type="text" name="folder_name" id="folder_name" v-model="folder_name"/>
                             <span style="font-size: 12px;margin-left: 2px;">@{{ countTex(folder_name) }}/15</span>
                             </div>
                             <span class="text-danger" v-html="error_folder"></span>
                         </div>
                         <div class="form-group" style="display: flex;justify-content: space-between;">
                             <button type="button" class="btn btn-primary" style="background-color: rgb(8, 191, 90);border: none; border-radius: 4px" @click="createFolder()"
                                     v-model="folder_name">決定
                             </button>
                             <button type="button" class="btn btn-secondary" style="background-color: rgb(125, 145, 149); color: #FFFFFF; border-radius: 4px"
                                     @click="showHidePopupCreateFolder()">キャンセル
                             </button>
                         </div>
                     </div>
                 </div>
                <div class="btngroup col-md-9 col-lg-10">
                    <div class="btn" style="padding: 0;border-radius: 20px; margin-right: 5px" id="openModal"  v-on:click="openModalAdd()">
                        <a><span class="fas fa-plus-circle"></span> 新規登録</a></div>
    {{--                <div class="btn" style="padding: 0; margin-right: 5px"><a href="{{route('scenario.settingAddFriend')}}"><span class="glyphicon glyphicon-cog"></span> ステップ配信設定</a></div>--}}
                    <div class="btn" style="padding: 0; margin-right: 5px"><button type="button" data-toggle="modal" data-target="#sorter_modal_v1" data-type="reaction" data-callback="item_sorted" class="btn btn-sm btn-default" id="button_sort_scen">並び替え</button></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-lg-2 group-ic-pro" style="position: relative;margin-top: 10px;text-align: center">
                    <div class="nano-inner" id="nano-inner-group" style="margin-top: 0">
                        <div class="tag_group row"
                             id="group_0"
                             data-id="0"
                             style="padding: 10px 7px"
                             v-bind:class="(folder_active == 0)?'active':'folder-close'">
                            <div  @click="selectedFolder(0, $event)" class="display_category row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>未分類 (@{{ count_default }})</div>
                                    <div class="btn-group"  style="padding: unset;">
                                        {{--                                        <i class="far fa-ellipsis-h ic-menu" ></i>--}}
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div v-for="(category, index) in sortedCategories" class="tag_group row"
                             :id="'group_'+category.id"
                             :data-id="category.id"
                             v-bind:class="(category.id == group_active)?'active':'folder-close'">
                            <div @click="selectedFolder(category.id, $event)" class="display_category  row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>
                                        @{{ category.name }} (@{{ category.count }})
                                    </div>
                                    <div class="btn-group" style="padding: unset;" :style="(category.id == folder_active)?'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: 16px;">
                                            <li class="focus-pointer" @click="showHidePopupEditFolder(category.id, category.name)">
                                                <div style="cursor: pointer">
                                                    フォルダ名変更
                                                </div>
                                            </li>
                                            <li class="focus-pointer" @click="deleteFolder(category.id)">
                                                <div style="cursor: pointer">
                                                    フォルダ削除
                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                            </div>


                        </div>
                    </div>

                    {{--                    <ul class="list-folder">--}}
{{--                        <li v-for="(folder, indexFolder) in list_folder" style="margin-bottom: 10px">--}}
{{--                            <a :href="indexFolder" @click="selectedFolder(indexFolder, $event)"--}}
{{--                               class="btn-folder" style="border-radius: 5px;text-align: left;margin: 0" :class="indexFolder == folder_active ? 'active' : ''">--}}
{{--                                <div style="width: 80%;word-break: break-word;"> @{{ folder }} </div>--}}
{{--                            </a>--}}
{{--                            <div v-if="indexFolder != 0 && indexFolder == folder_active" class="dropdown" style="float: right; display: inline-block; top: -30px; right: 2px">--}}
{{--                                <button type="button" data-toggle="dropdown" aria-haspopup="true"--}}
{{--                                        aria-expanded="false"--}}
{{--                                        class="btn btn-default btn-xs tag_group_opener dropdown-toggle display_category" style="padding: 1px 5px">編集<span class="caret"></span></button>--}}
{{--                                <ul class="dropdown-menu dropdown-menu-right" style="margin-top: 0;">--}}
{{--                                    <li style="padding: 0;"><div class="list-edit-folder" @click="showHidePopupEditFolder(indexFolder, folder)">名前を変える</div></li>--}}
{{--                                    <li style="padding: 0;"><div class="list-edit-folder" @click="deleteFolder(indexFolder)">フォルダを削除</div></li>--}}
{{--                                </ul>--}}
{{--                            </div>--}}
{{--                        </li>--}}
{{--                    </ul>--}}
                </div>
                <div class="col-md-9 col-lg-10">
            <table class="table-striped table-hover" id="tbl-scen">
                <tbody><tr>
                    <th style="width: 35%">ステップ名</th>
                    <th style="width: 18%">購読中の友だち</th>
                    <th style="width: 18%">読了済の友だち</th>
                    <th style="width: 18%">継続ステップ</th>
                    <th style="width: 12%">詳細設定</th>
                </tr>
                <tr v-for="item in items">
                    <td style="text-align: left !important;padding-left: 30px !important;">
                        <a :href="'/basic/step-message/list-message/'+item.id" class="grn" style="text-decoration: underline"> @{{ item.name }}</a>
{{--                        <span class="taiou_gry" v-if="item.id == newScenarioId">【新規友だち】</span>--}}
{{--                        <span class="taiou_gry" v-else-if="item.id == oldScenarioId">【既存友だち】</span>--}}
                    </td>
                    <td>
                        <a :href="'/scenario-users?scenarioId='+item.id+'&userCount=start'" style="text-decoration: underline">
                            @{{ item.scenario_lineusers_reading_count }}人</a>
                    </td>
                    <td>
                        <a :href="'/scenario-users?scenarioId='+item.id+'&userCount=stop'" style="text-decoration: underline">
                            @{{ item.scenario_lineusers_ended_count }}人</a>
                    </td>
{{--                    <td>--}}
{{--                        <span v-if="item.status == 0">配信中</span>--}}
{{--                        <span v-else>停止中</span>--}}
{{--                    </td>--}}
                    <td>
                        <span v-if="item.next_scenario1 != null">@{{ item.next_scenario1.name }}</span>
                    </td>
                    <td><a  class="yel" v-on:click="openModalEdit(item)"><i class="fa fa-edit" style="color: #898080;font-size: 20px"></i></a></td>
                </tr>
                </tbody>
            </table>
                </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" style="color: rgba(125,145,149,1) !important;"></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="sorter_modal_v1" role="dialog">

                <div class="modal-dialog">
                    <div class="modal-content">
                        <div id="" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true" style="opacity: 1;font-size: 27px"
                                    v-on:click="cancelSorted"
                            >
                                <i class="fas fa-times" style="color: rgba(125,145,149,1) !important;"></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 items" :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="sortedTemplate">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="addScenarioModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content" style="padding:0px !important">
                        <form class="form-horizontal" id="addScenarioForm">
                            {{ csrf_field() }}
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" style="color:#000;text-align: center">【 新規ステップ登録 】</h4>
                            </div>

                            <div class="modal-body" style="margin: 10px 35px 10px 35px">
                                <h6 style="background-color: rgba(240,240,240,1);"> <strong class="left_bar"> ステップ名</strong><span class="label label-danger small-required" style="margin-left: 10px">必須</span> </h6>
                                <br>
                                <div class="form-group">
                                    <div class="col-xs-7">
                                        <input type="text" class="form-control input-sm" name="name" id="name_input"/>
                                        <span class="errors" id="name" style="min-width: 280px"></span>
                                    </div>
                                </div>
                                <br>
                                <h6 style="background-color: rgba(240,240,240,1);"> <strong class="left_bar"> フォルダ</strong><span class="label label-danger small-required" style="margin-left: 10px">必須</span> </h6>
                                <br>
                                <div class="form-group">
                                    <div class="col-xs-7">
                                        <select class="form-control select-icon" name="select_folder_create" id="folder_create" v-model="folder_active">
                                            <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>
                                    </div>
                                </div>
                                <br>
                                <h6 style="background-color: rgba(240,240,240,1);"> <strong class="left_bar">ステップ終了後に継続されるステップ</strong><span class="label small-required" style="margin-left: 10px;background-color: #4178d0">任意</span> </h6>
                                <br>
                                <div class="form-group">
                                    <div class="col-xs-7">
                                        <select class="form-control select-icon" name="next_scenario" id="next_scenario">
                                            <option value="" selected >設定しない</option>
                                            <optgroup label="別ステップへ移動">
                                                  <option v-for="item in item_all" :value="item.id"> @{{ item.name }}</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                </div>
{{--                                <div style="color: rgba(244,67,54,1);">※2つ以上のステップを利用した無限ループ（スパム）配信を防ぐため<br>--}}
{{--                                    　1つのステップは友だち1人につき1回しか配信されません。</div>--}}
                            </div>

                            <div class="modal-footer" style="text-align: center">
                                <button type="submit" class="btn btn-primary btn-create" style="background-color: #13ca4e;width: 120px" >登録</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="editScenarioModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content" style="padding:0px !important">
                        <form class="form-horizontal" id="editScenarioForm">
                            {{ csrf_field() }}
                            <div class="modal-header">
                                <button type="button" v-on:click="closeModalEdit" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title font-weight-bold" style="color:#000;text-align: center">【 ステップ編集 】</h4>
                            </div>

                            <div class="modal-body" style="margin: 10px 35px 10px 35px">
                                <h6 style="background-color: rgba(240,240,240,1);"> <strong class="left_bar"> ステップ名</strong><span class="label label-danger small-required" style="margin-left: 10px">必須</span> </h6>
                                <br>
                                <input type="hidden" id="scenario_id" name="scenario_id">
                                <div class="form-group">
                                    <div class="col-xs-7">
                                        <input type="text" class="form-control input-sm" id="name_edit_input" name="name_edit" style="font-weight: bold;"/>
                                        <span class="errors" id="name_edit" style="min-width: 280px"></span>
                                    </div>
                                </div>
                                <br>
                                <h6 style="background-color: rgba(240,240,240,1);"> <strong class="left_bar"> フォルダ</strong><span class="label label-danger small-required" style="margin-left: 10px">必須</span> </h6>
                                <br>
                                <div class="form-group">
                                    <div class="col-xs-7">
                                        <select class="form-control select-icon" name="select_folder_edit" id="folder_edit" v-model="selectFolderEdit" style="font-weight: bold;">
                                            <option value="0" >未分類 </option>
                                            <option v-for="(folder, indexFolder) in list_folder" :value="folder.id">
                                                @{{ folder.name }}</option>
                                        </select>
                                    </div>
                                </div>
                                <h6 style="background-color: rgba(240,240,240,1);"> <strong class="left_bar">ステップ終了後に継続されるステップ</strong><span class="label small-required" style="margin-left: 10px;background-color: #4178d0">任意</span> </h6>
                                <br>
                                <div class="form-group">
                                    <div class="col-xs-7">
                                        <select class="form-control select-icon" name="next_scenario_edit" id="next_scenario_edit" v-model="selectScenEdit" style="font-weight: bold;">
                                            <option value="">設定しない</option>
                                            <optgroup label="別ステップへ移動">
                                                <option v-for="item in item_all" :value="item.id" :id="'edit_scenario_'+item.id"> @{{ item.name }}</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                </div>
{{--                                <div style="color: rgba(244,67,54,1);">※2つ以上のステップを利用した無限ループ（スパム）配信を防ぐため<br>--}}
{{--                                    　1つのステップは友だち1人につき1回しか配信されません。</div>--}}
                            </div>

                            <div class="modal-footer" style="text-align: center">
                                <button type="submit" class="btn btn-primary" id="btn_edit" style="background-color: rgba(8,191,90,1);width: 120px" >登録</button>
                                <button type="button" class="btn btn-primary" id="btn_copy"  style="background-color: rgba(87,153,219,1);width: 120px" >コピー</button>
                                <button type="button" class="btn btn-primary"  id="btn_delete" onclick="deleteScenario()" style="background-color: rgba(244,67,54,1);width: 120px" >削除</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <input type="hidden" id="folder_select" @if(!empty($folderId)) value="{{ $folderId }}" @endif>
        </section>
    </article>

@endsection

@push('js')
    <script src="/js/scenario/index.js?v={{config('sns-line.version')}}"></script>
    <script>
        @if($errors->any())
            alert('{{$errors->first()}}');
        @endif
    </script>
@endpush