@push('css')
    <link rel="stylesheet" href="/css/action_common.css?v={{config("sns-line.version")}}">
    <style>
        #settingActionUrlModal .ic-close ,#settingActionUrlModal .fa-plus{
            top: 8px !important;
        }

    </style>
@endpush
<div class="modal fade" id="settingActionUrlModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" v-cloak>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="modal-title" id="exampleModalLabel"
                     style="font-size: 23px; color: #222222; text-align: center">アクション編集
                </div>
                <section class="allsousa sub" style="overflow: auto">
                    <div class="title-setting">設定されたアクション</div>
                    <div id="menu-other-1" class="tab-pane type-other"
                         v-if="action_only && action_only.type=='form_answer'">
                        <div class="box-action">
                            <div class="title-child">
                                <span>
                                    フォーム作成
                                </span>
                                <i class="fas fa-times ic-close" @click="removeActionOther()"></i>
                            </div>
                            <div class="px-3  ">
                                <div class="row mb-2" style="display: flex; align-items: center">
                                    <div class="col-xs-1 pt-title">選択</div>
                                    <div class="col-xs-9 ">
                                        <select class="form-control" name="form_answer" style=" display: initial; "
                                                v-model="action_only.data.id" v-validate="{required: true}"
                                                data-vv-as="フォーム作成">
                                            <option v-for="itemFormanswer in form_answers" :value="itemFormanswer.id"
                                                    :selected="itemFormanswer.id == action_only.data.id">
                                                @{{ itemFormanswer.name }}
                                            </option>
                                        </select>
                                        <p class="text-danger" v-show="errors.has('form_answer')">@{{
                                            errors.first('form_answer') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="menu-other-2" class="tab-pane type-other"
                         v-if="action_only && action_only.type=='booking'">
                        <div class=" box-action">
                            <div class="title-child">
                                <span>
                                    イベント予約
                                </span>
                                <i class="fas fa-times ic-close" @click="removeActionOther()"></i>
                            </div>
                            <div class="px-3">
                                <div class="row mb-2" style="display: flex; align-items: center">
                                    <div class="col-xs-1 pt-title">選択</div>
                                    <div class="col-xs-9 ">
                                        <select class="form-control" name="booking" style=" display: initial; "
                                                v-model="action_only.data.id" v-validate="{required: true}"
                                                data-vv-as="イベント予約">
                                            <option v-for="itemBooking in bookings" :value="itemBooking.id"
                                                    :selected="itemBooking.id == action_only.data.id">
                                                @{{ itemBooking.title }}
                                            </option>
                                        </select>
                                        <p class="text-danger" v-show="errors.has('booking')">@{{
                                            errors.first('booking') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="menu-other-3" class="tab-pane type-other"
                         v-if="action_only && action_only.type=='product_page'">
                        <div class=" box-action">
                            <div class="title-child">
                                <span>
                                    商品ページ
                                </span>
                                <i class="fas fa-times ic-close" style="top:8px" @click="removeActionOther()"></i>
                            </div>
                            <div class="px-3  ">
                                <div class="row mb-2" style="display: flex; align-items: center">
                                    <div class="col-xs-1 pt-title">選択</div>
                                    <div class="col-xs-9 ">
                                        <select class="form-control" name="product_page" style=" display: initial; "
                                                v-model="action_only.data.id" v-validate="{required: true}"
                                                data-vv-as="商品ページ">
                                            <option v-for="itemProduct in products" :value="itemProduct.id"
                                                    :selected="itemProduct.id == action_only.data.id">
                                                @{{ itemProduct.name }}
                                            </option>
                                        </select>
                                        <p class="text-danger" v-show="errors.has('product_page')">@{{
                                            errors.first('product_page') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="menu-other-4" class="tab-pane type-other"
                         v-if="action_only && action_only.type=='conversion'">
                        <div class=" box-action">
                            <div class="title-child">
                                <span>
                                    CV登録ページ
                                </span>
                                <i class="fas fa-times ic-close" @click="removeActionOther()"></i>
                            </div>
                            <div class="px-3">
                                <div class="row mb-2" style="display: flex; align-items: center">
                                    <div class="col-xs-1 pt-title">選択</div>
                                    <div class="col-xs-9 ">
                                        <select class="form-control" style=" display: initial; " name="conversion"
                                                v-model="action_only.data.id" v-validate="{required: true}"
                                                data-vv-as="CV登録ページ">
                                            <option v-for="itemConversion in conversions" :value="itemConversion.id"
                                                    :selected="itemConversion.id == action_only.data.id">
                                                @{{ itemConversion.name }}
                                            </option>
                                        </select>
                                        <p class="text-danger" v-show="errors.has('conversion')">@{{
                                            errors.first('conversion') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="menu-other-5" class="tab-pane type-other"
                         v-if="action_only && action_only.type=='text_other'">
                        <div class=" box-action">
                            <div class="title-child">
                                <span>
                                    テキストを送信させる
                                </span>
                                <i class="fas fa-times ic-close" @click="removeActionOther()"></i>
                            </div>
                            <div class="px-3">
                                <div class="row mb-2" style="display: flex; align-items: center">
                                    <div class="col-xs-12">
                                        <input class="form-control" type="text" name="text_other" placeholder=""
                                               v-model="action_only.data.content" v-validate="{required: true}"
                                               data-vv-as="テキストを送信させる">
                                        <small style="float: right">60字以内</small>
                                        <p class="text-danger" v-show="errors.has('text_other')">@{{
                                            errors.first('text_other') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="menu-other-6" class="tab-pane type-other"
                         v-if="action_only && action_only.type=='keywords'">
                        <div class="box-action">
                            <div class="title-child">
                                <span>
                                    キーワードを送信させる
                                </span>
                                <i class="fas fa-times ic-close" @click="removeActionOther()"></i>
                            </div>
                            <div class="px-3  ">
                                <div class="row mb-2" style="display: flex; align-items: center">
                                    <div class="col-xs-12 pt-title">
                                        <select class="form-control" name="keywords" v-model="action_only.data.id"
                                                v-validate="{required: true}" data-vv-as="キーワードを送信させる"
                                                style=" display: initial;">
                                            <option v-for="itemKeyword in keywords" :value="itemKeyword.id"
                                                    :selected="action_only.data.id == itemKeyword.id">@{{
                                                itemKeyword.keyword }}
                                            </option>
                                        </select>
                                        <p class="text-danger" v-show="errors.has('keywords')">@{{
                                            errors.first('keywords') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="menu-other-7" class="tab-pane type-other" v-if="action_only && action_only.type=='phone'">
                        <div class=" box-action" id="scenario_slot">
                            <div class="title-child">
                                <span>
                                    電話をかけさせる
                                </span>
                                <i class="fas fa-times ic-close" @click="removeActionOther()"></i>
                            </div>
                            <div class="px-3 ">
                                <div class="row mb-2" style="display: flex; align-items: center">
                                    <div class="col-xs-2 pt-title"> 電話番号入力</div>
                                    <div class="col-xs-9 pt-title">
                                        <input class="form-control" name="phone" type="number" :data-vv-as="'電話番号'"
                                               v-validate="{required:true, phone_number:true}"
                                               v-model="action_only.data.content">
                                        <p class="text-danger" v-show="errors.has('phone')">@{{ errors.first('phone')
                                            }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="menu-other-7" class="tab-pane type-other" v-if="action_only && action_only.type=='email'">
                        <div class=" box-action" id="scenario_slot">
                            <div class="title-child">
                                <span>
                                    メールを送る
                                </span>
                                <i class="fas fa-times ic-close" @click="removeActionOther()"></i>
                            </div>
                            <div class="px-3 ">
                                <div class="row mb-2" style="display: flex; align-items: center">
                                    <div class="col-xs-2 pt-title"> 電話番号入力</div>
                                    <div class="col-xs-9 pt-title">
                                        <input class="form-control" name="email" type="email"
                                               v-model="action_only.data.content" :data-vv-as="'メールアドレス'"
                                               v-validate="{required:true, email:true}">
                                        <p class="text-danger" v-show="errors.has('email')">@{{ errors.first('email')
                                            }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="menu-other-9" class="tab-pane type-other"
                         v-if="action_only && action_only.type=='add_friend'">
                        <div class=" box-action" id="scenario_slot">
                            <div class="title-child">
                                <span>
                                    紹介したいLINE公式アカウントの友だち追加ページが開く
                                </span>
                                <i class="fas fa-times ic-close" @click="removeActionOther()"></i>
                            </div>
                            <div class="px-3">
                                <div class="row mb-2" style="display: flex; align-items: center">
                                    <div class="col-xs-6 pt-title"> 紹介したいLINE公式アカウントのLINE ID</div>
                                    <div class="col-xs-6">
                                        <input class="form-control" name="line_id" type="text"
                                               :data-vv-as="'LINEアカウントID'" v-validate="{required:true}"
                                               placeholder="@abc123" v-model="action_only.data.id">
                                        <p class="text-danger" v-show="errors.has('line_id')">@{{
                                            errors.first('line_id') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="list_action_common" style="float: right;width: calc(100% - 200px);height: 80vh; overflow: auto">
                        <div v-for="(item,indexAction) in actions" :id="'action_stt_'+indexAction">
                            <div v-if="item.type == 'scenario' && item.active == true">
                                <div id="menu-step" class="tab-pane add step">
                                    <div class="tagdetail_right box-action" id="scenario_slot">
                                        <div class="title-child">
                                        <span>
                                            ステップ配信
                                        </span>
                                            <i class="fas fa-times ic-close" @click="removeItemAction(indexAction)"></i>
                                        </div>
                                        <div class="px-3">
                                            <div class="row mb-2" style="display: flex; align-items: center">
                                                <div class="col-xs-3 pt-title">配信設定</div>
                                                <div class="col-xs-7">
                                                    <select class="form-control"
                                                            style="display: initial; text-align: center"
                                                            v-model="item.data.action">
                                                        <option value="1" :selected="item.data.action == 1"> 停止</option>
                                                        <option value="2" :selected="item.data.action == 2"> 開始/再開
                                                        </option>
                                                        <option value="3" :selected="item.data.action == 3"> 途中から再開
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row mb-2 align-items-center" v-if="item.data.action != 1">
                                                <div class="col-xs-3 pt-title"> ステップ選択</div>
                                                <div class="col-xs-7">
                                                    <select class="form-control"
                                                            @change="chooseAction($event, indexAction, 'scenario')"
                                                            :name="'scenario_'+indexAction" :data-vv-as="'配信設定'"
                                                            v-validate="{required:true}"
                                                            style="display: initial; text-align: center"
                                                            v-model="item.data.id">
                                                        @foreach($scenario as $scen)
                                                            <option value="{{$scen['id']}}"
                                                                    :selected="item.data.id == '{{ $scen['id'] }}'">{{$scen['name']}}</option>
                                                        @endforeach
                                                    </select>
                                                    <p class="text-danger" v-show="errors.has('scenario_'+indexAction)">
                                                        @{{ errors.first('scenario_'+indexAction) }}</p>
                                                </div>
                                            </div>

                                            <div class="row" v-if="item.data.action == 3">
                                                <div class="col-xs-3 pt-title"> メッセージ選択</div>
                                                <div class="col-xs-7">
                                                    <input type="number" name="day" id="start_day" style=""
                                                           class="form-control"
                                                           placeholder="0" v-model="item.data.start_day"
                                                           min="0"> 日目のメッセージから配信
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="menu-template" class="tab-pane"
                                 v-if="item.type == 'template' && item.active == true">
                                <div class="tagdetail_right box-action" id="stemplate_slot">
                                    <div class="title-child">
                                    <span>
                                        テンプレート送信
                                    </span>
                                        <i class="fas fa-times ic-close" @click="removeItemAction(indexAction)"></i>
                                    </div>
                                    <div class="px-3">
                                        <div class="row mb-2" style="display: flex; align-items: center">
                                            <div class="col-xs-3 pt-title"> テンプレート選択</div>
                                            <div class="col-xs-8">
                                                <div class="dropdown" style="display: block">
                                                    <button class="btn  btn-default dropdown-toggle btn_show_temp "
                                                            type="button" onclick="showUITemp(this)"
                                                            style="width: 100%;text-align: center; height: 35px">@{{
                                                        item.data.template_name }}
                                                        <span class="caret"
                                                              style="float: right;"> </span></button>
                                                    <ul class="dropdown-menu tmpContent" style="width: 100%;top: 94%;">
                                                        <div class="">
                                                            <div class="tem_choice" style="border: 1px solid #ccc;">
                                                                <ul style="height: 254px;background: rgb(240, 255, 247);">
                                                                    <li class="template_group folder-close"
                                                                        role="button"
                                                                        data-toggle="collapse" aria-expanded="false"
                                                                        id="group_0"
                                                                        v-bind:class="(!group_open_template)?' active':'folder-close'"
                                                                        data-id="0" v-on:click="showGroupTemplate(0)">
                                                                        <span class="glyphicon glyphicon-folder-collapse"></span>
                                                                        未分類
                                                                    </li>
                                                                    <li v-for="(category,index) in groups_tempate"
                                                                        class="template_group"
                                                                        role="button"
                                                                        v-bind:class="(category.id == group_open_template)?' active':'folder-close'"
                                                                        data-toggle="collapse" aria-expanded="false"
                                                                        :id="'group_'+category.id"
                                                                        :data-id="category.id"
                                                                        :data-name="category.name"
                                                                        v-bind:class="(category.id == group_open_template)?'category_active':'folder-close'"
                                                                        v-on:click="showGroupTemplate(category.id, 'first')">
                                                                        <span class="glyphicon glyphicon-folder-collapse"></span>
                                                                        @{{ category.name }}
                                                                    </li>
                                                                </ul>
                                                                <div class="choice_detail">
                                                                    <ul v-if="group_open_template == 0"
                                                                        style="height: 254px;overflow: scroll">
                                                                        <li v-for="(itemTemplate,index) in items_default_template">
                                                                            <input type="radio" name="select_template"
                                                                                   :data-name="itemTemplate.name"
                                                                                   v-on:click="showTemplate(indexAction)"
                                                                                   :value="itemTemplate.id"
                                                                                   v-model="item.data.id">@{{
                                                                            itemTemplate.name }}
                                                                        </li>
                                                                    </ul>
                                                                    <ul v-if="items_template['templates'] != undefined && items_template['templates'].length>0 && group_open_template != 0"
                                                                        style="height: 234px;overflow: scroll">
                                                                        <li style="list-style: none"
                                                                            v-for="(itemTemplate,index) in items_template['templates']"
                                                                            :id="'template_1_'+itemTemplate.id"
                                                                            :data-id="itemTemplate.id">
                                                                            <input type="radio" name="select_template"
                                                                                   :data-name="itemTemplate.name"
                                                                                   v-on:click="showTemplate(indexAction)"
                                                                                   :value="itemTemplate.id"
                                                                                   v-model="item.data.id">@{{
                                                                            itemTemplate.name }}
                                                                        </li>
                                                                    </ul>
                                                                    <ul v-if="items_template['templates'] != undefined && items_template['templates'].length == 0 && items_default_template.length == 0">
                                                                        分類を選択して下さい
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <p class="choice_submit">選択中：<span
                                                                        class="template_name">選択しない</span></p>

                                                        </div>
                                                    </ul>
                                                </div>
                                                <input type="hidden" :name="'template_id_'+indexAction"
                                                       v-model="item.data.id" v-validate="{required: true}"
                                                       data-vv-as="テンプレート選択">
                                                <p class="text-danger" v-show="errors.has('template_id_'+indexAction)">
                                                    @{{ errors.first('template_id_'+indexAction) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="menu-text" class="tab-pane" v-if="item.type == 'text' && item.active == true">
                                <div class="tagdetail_right box-action" id="scenario_slot">
                                    <div class="title-child">
                                    <span>
                                        テキスト送信
                                    </span>
                                        <i class="fas fa-times ic-close" @click="removeItemAction(indexAction)"></i>
                                    </div>
                                    <div class="px-3">
                                        <div class="row mb-2" style="align-items: center">
                                            <div class="btn-add-name replace-name-modal"
                                                 v-on:click="addName(indexAction)">
                                                友だち名挿入
                                            </div>
                                            <div class="col-xs-12 pt-title" style="position: relative">
                                                <div class="" style="position: absolute;right: 35px;top:0px">
                                                <span class="dropdown" style="margin-left: 8px;">
                                                    <span class="form-date-toggle emoji-sticker-1"
                                                          data-emoji-placeholder=":smiley:" id="emoji-sticker-1"
                                                          type="button"
                                                          style="border: none;background: white; font-size: 20px; cursor: pointer">
                                                        <i class="fa fa-smile-o" data-type="10" style="font-weight: 400"
                                                           :data-index="indexAction"></i>
                                                    </span>
                                                </span>
                                                </div>
                                                <textarea v-validate="{required: true}" data-vv-as="テキスト送信" rows="5"
                                                          :name="'text_content_add_'+indexAction"
                                                          :data-index="indexAction"
                                                          :id="'text_content_add'+indexAction"
                                                          v-model="item.data.content"
                                                          class="form-control"></textarea>
                                                <small style="float: right"><span
                                                            id="count_text_content">5000</span>字以内</small>
                                                <p class="text-danger"
                                                   v-show="errors.has('text_content_add_'+indexAction)">
                                                    @{{ errors.first('text_content_add_'+indexAction) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" v-if="item.type == 'remind' && item.active == true">
                                <div class=" box-action" id="scenario_slot">
                                    <div class="title-child">
                                <span>
                                    リマインド送信
                                </span>
                                        <i class="fas fa-times ic-close" @click="removeItemAction(indexAction)"></i>
                                    </div>
                                    <div class="px-3">
                                        <div class="row mb-2" style="display: flex; align-items: center">
                                            <div class="col-xs-3 pt-title">リマインド選択</div>
                                            <div class="col-xs-8 ">
                                                <select class="form-control" v-validate="{required: true}"
                                                        data-vv-as="リマインド選択" :name="'remind_'+indexAction"
                                                        v-model="item.data.id"
                                                        @change="chooseAction($event, indexAction, 'remind')">
                                                    <option v-for="itemRemind in list_remind" :value="itemRemind.id"
                                                            :selected="itemRemind.id == item.data.id">
                                                        @{{ itemRemind.event_name}} (@{{ itemRemind.event_date }} @{{ itemRemind.event_start_time}})
                                                    </option>
                                                </select>
                                                <p class="text-danger" v-show="errors.has('remind_'+indexAction)">@{{
                                                    errors.first('remind_'+indexAction) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane mt-3" v-if="item.type == 'tag' && item.active == true">
                                <div id="item_vuelist_tag_3">
                                    <div class="title-child">
                                        <span> タグ </span>
                                        <i class="fas fa-times ic-close" @click="removeItemAction(indexAction)"></i>
                                    </div>
                                    <div class="tem_choice">
                                        <ul style="height: 300px;overflow: scroll; background:rgba(240,255,247,1)">
                                            <li>
                                                <a class="collapsed collapse-opener" role="button"
                                                   style="margin: 0;padding: 10px"
                                                   data-toggle="collapse"
                                                   href="" aria-expanded="false" id="group_0"
                                                   v-bind:class="(!group_open_tag)?'category_active':'folder-close'"
                                                   data-id="0">
                                                    <div v-on:click="showGroupTag(0)" class="display_category"
                                                         style="display: flex;align-items: baseline;">
                                                        <div class="ic-fol"></div>
                                                        未分類(@{{ count_default_tag }}
                                                        )
                                                    </div>
                                                </a>
                                                <a v-for="(category,index) in groups_tag"
                                                   style="margin: 0;padding: 10px"
                                                   class="collapsed collapse-opener"
                                                   data-toggle="collapse" href=""
                                                   aria-expanded="false"
                                                   :id="'third_group_'+category.id"
                                                   :data-id="'third_'+category.id"
                                                   :data-name="category.name"
                                                   v-bind:class="(category.id == group_open_tag)?'category_active':'folder-close'"
                                                   v-on:click="showGroupTag(category.id)">
                                                    <div style="display: flex;align-items: baseline;">
                                                        <div class="ic-fol"></div>
                                                        @{{ category.name }}
                                                    </div>
                                                </a>
                                            </li>
                                            <li>

                                            </li>
                                        </ul>
                                        <div class="choice_detail"
                                             style="height: 300px;overflow: scroll">
                                            <ul v-if="group_open_tag == 0">
                                                <li v-for="(itemTagDefault,index) in items_default_tag">
                                                    <input type="checkbox"
                                                           :data-name="itemTagDefault.name"
                                                           v-on:click="showTag()"
                                                           v-on:change="selectItemChange($event,itemTagDefault, indexAction)"
                                                           :value="itemTagDefault.id"
                                                           name="select_tag[]" v-model="item.data.ids">@{{
                                                    itemTagDefault.name }}
                                                </li>
                                            </ul>
                                            <ul v-if="tag_items != undefined && tag_items.length > 0 && group_open_tag != 0">
                                                <li v-for="(itemTag,index) in tag_items"
                                                    :id="'tag_'+itemTag.id"
                                                    :data-id="itemTag.id">
                                                    <input type="checkbox"
                                                           :value="itemTag.id"
                                                           :data-name="itemTag.name"
                                                           id="tag_choose_name"
                                                           name="select_tag[]"
                                                           @change="selectItemChange($event,itemTag, indexAction)"
                                                           v-on:click="showTag()" v-model="item.data.ids">@{{
                                                    itemTag.name
                                                    }}
                                                </li>
                                            </ul>
                                            <ul v-if="tag_items != undefined && tag_items.length == 0 && items_default_tag != undefined && items_default_tag.length == 0">
                                                <li>
                                                    分類を選択して下さい
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <input type="hidden" :name="'tag_ids_'+indexAction" v-model="item.data.ids"
                                           v-validate="{required: true}" data-vv-as="タグ">
                                    <p class="text-danger" v-show="errors.has('tag_ids_'+indexAction)">@{{
                                        errors.first('tag_ids_'+indexAction) }}</p>
                                    <div class="item-tag-choice">
                                        <div style="margin-bottom: 10px;overflow: auto">
                                            <div style="width: 150px; float: left">
                                                選択したタグ
                                            </div>
                                            <div class="content-tag-select">
                                                <label v-if="item.list_tags.length >0"
                                                       v-for="(tag,keyTagList) in item.list_tags"
                                                       class="tag-item">@{{ tag.name }}
                                                    <span v-on:click="removeTag(tag.id, indexAction)">x</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div style="width: 150px; float: left">
                                                タグ操作
                                            </div>
                                            <select class="form-control" style="width: 150px; display: initial"
                                                    v-model="item.data.action">
                                                <option value="1" :selected="item.data.action == 1"> つける</option>
                                                <option value="2" :selected="item.data.action == 2"> はずす</option>
                                            </select>
                                        </div>

                                    </div>

                                </div>
                            </div>

                            <div class="tab-pane" v-if="item.type == 'richmenu' && item.active == true">
                                <div class="tagdetail_right box-action" id="scenario_slot">
                                    <div class="title-child">
                                <span>
                                    リッチメニュー
                                </span>
                                        <i class="fas fa-times ic-close" @click="removeItemAction(indexAction)"></i>
                                    </div>
                                    <div class="px-3">
                                        <div class="row mb-2" style="display: flex; align-items: center">
                                            <div class="col-xs-3 pt-title"> 表示設定</div>
                                            <div class="col-xs-7">
                                                <select class="form-control"
                                                        style="display: initial; text-align: center"
                                                        v-model="item.data.action"
                                                        @change="chooseAction($event, indexAction, 'richmenu')">
                                                    <option value="1" :selected="item.data.action == 1"> 表示を停止</option>
                                                    <option value="2" :selected="item.data.action == 2"> 表示</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mb-2 align-items-center" v-if="item.data.action == 2">
                                            <div class="col-xs-3 pt-title"> リッチメニュー選択</div>
                                            <div class="col-xs-7">
                                                <select class="form-control"
                                                        style="display: initial; text-align: center"
                                                        :name="'richmenu_id_'+indexAction" v-model="item.data.id"
                                                        v-validate="{required: true}" data-vv-as="リッチメニュー選択">
                                                    @foreach($richMenus as $rich)
                                                        <option value="{{$rich->id}}"
                                                                :selected="item.data.id == '{{ $rich->id }}'">{{$rich->name}}</option>
                                                    @endforeach
                                                </select>
                                                <p class="text-danger" v-show="errors.has('richmenu_id_'+indexAction)">
                                                    @{{
                                                    errors.first('richmenu_id_'+indexAction) }}</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="btn-add-action" style="float: left;width: 200px">
                        <div class="data-selected" style="max-height: 130px; overflow-y: auto; overflow-x: hidden">
                            <div class="item-acrion" style="text-overflow: ellipsis; white-space: nowrap;width: 190px; overflow: hidden" v-for="(item, indexAction) in actions" v-if="item.active == false"
                                 @click="activeAction(indexAction)">
                            <span v-if="item.type == 'tag'">【タグ】
                                <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span
                                        v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                            </span>
                                <span v-else-if="item.type == 'scenario'">【ステップ】
                                <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                            </span>
                                <span v-else-if="item.type == 'template'">【テンプレート】
                                <span>@{{ item.data.template_name }}</span>
                            </span>
                                <span v-else-if="item.type == 'text'">【テキスト】
                                <span>@{{ item.data.content | shortContent }}</span>
                            </span>
                                <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                            </span>
                                <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                            </div>
                        </div>
                        <div class="row-select" style="display: flex; flex-direction: column">
                            <div class="title-select" style="margin-bottom: 20px">
                                <div style="padding: 10px 15px">基本アクション</div>
                            </div>
                            <div class="row" style="display: flex; flex-direction: column">
                                <div class="col-xs-12" style="margin-bottom: 15px">
                                    <button class="btn-add-action" :class="{active:type_ignore.includes('scenario')}"
                                            id="add_step" @click="addItem('scenario')">
                                        <i class="fas fa-plus"></i> ステップ
                                    </button>
                                </div>
                                <div class="col-xs-12" style="margin-bottom: 15px">
                                    <button class="btn-add-action"
                                            id="add_template" @click="addItem('template')">
                                        <i class="fas fa-plus"></i> テンプレート
                                    </button>
                                </div>
                                <div class="col-xs-12" style="margin-bottom: 15px">
                                    <button class="btn-add-action"
                                            id="add_text" @click="addItem('text')">
                                        <i class="fas fa-plus"></i>テキスト
                                    </button>
                                </div>
                                <div class="col-xs-12" style="margin-bottom: 15px">
                                    <button class="btn-add-action" :class="{active:type_ignore.includes('remind')}"
                                            id="add_remind" @click="addItem('remind')">
                                        <i class="fas fa-plus"></i>リマインド
                                    </button>
                                </div>
                                <div class="col-xs-12" style="margin-bottom: 15px">
                                    <button class="btn-add-action"
                                            id="add_tag" @click="addItem('tag')">
                                        <i class="fas fa-plus"></i>タグ
                                    </button>
                                </div>
                                <div class="col-xs-12" style="margin-bottom: 15px">
                                    <button class="btn-add-action" :class="{active:type_ignore.includes('richmenu')}"
                                            id="add_richmenu" @click="addItem('richmenu')">
                                        <i class="fas fa-plus"></i>リッチメニュー
                                    </button>
                                </div>
                            </div>

                            <div style="display: flex;text-align: center; margin-top: 40px; justify-content: space-between">
                                <button class=" btn btn-danger" type="button" data-dismiss="modal" style="padding: 5px; font-size: 14px"
                                        onclick="cancelSettingAction()">
                                    閉じる
                                </button>
                                <button type="button" class="btn btn-success" :disabled="actions.length == 0" style="padding: 5px; font-size: 14px"
                                        v-show="type_action != 'button' && type_action != 'image_map' && type_action != 'video'" onclick="saveSettingAction()">この条件で決定する
                                </button>
                                <button type="button" class="btn btn-success" :disabled="actions.length == 0" style="padding: 5px; font-size: 14px"
                                        v-show="type_action == 'button'" onclick="saveSettingActionButton()">この条件で決定する
                                </button>
                                <button type="button" class="btn btn-success" :disabled="actions.length == 0" style="padding: 5px; font-size: 14px"
                                        v-show="type_action == 'image_map'" onclick="saveSettingActionImageMap()">この条件で決定する
                                </button>
                                <button type="button" class="btn btn-success" :disabled="actions.length == 0" style="padding: 5px; font-size: 14px"
                                        v-show="type_action == 'video'" onclick="saveSettingActionImageMap()">この条件で決定する
                                </button>

                            </div>
                        </div>

                        {{--                        <div class="row-select">--}}
                        {{--                            <div class="col-xs-3 title-select-danger">--}}
                        {{--                                <div style="padding: 5px;">--}}
                        {{--                                    その他 <br>--}}
                        {{--                                    <small class="">（1つだけ設定できます）</small></div>--}}
                        {{--                            </div>--}}
                        {{--                            <div class="col-xs-9 ">--}}
                        {{--                                <div class="row" style="margin-top: 6px">--}}
                        {{--                                    <div class="col-xs-7 ">--}}
                        {{--                                        <select class="form-control" id="select-add-other" name="action-other" v-model="select_action_other">--}}
                        {{--                                            <optgroup label="◯ ページ表示">--}}
                        {{--                                                <option value="form_answer" :selected="action_only && action_only.type=='form_answer'">フォーム作成を開く</option>--}}
                        {{--                                                <option value="booking" :selected="action_only && action_only.type=='booking'">イベント予約を開く</option>--}}
                        {{--                                                <option value="product_page" :selected="action_only && action_only.type=='product_page'">商品ページを開く</option>--}}
                        {{--                                                <option value="conversion" :selected="action_only && action_only.type=='conversion'">コンバージョン登録済みページを開く</option>--}}
                        {{--                                            </optgroup>--}}
                        {{--                                            <optgroup label="◯ 友だちアクション">--}}
                        {{--                                                <option value="text_other" :selected="action_only && action_only.type=='text_other'">テキストを送信させる</option>--}}
                        {{--                                                <option value="keywords" :selected="action_only && action_only.type=='keywords'">キーワードを送信させる</option>--}}
                        {{--                                                <option value="phone" :selected="action_only && action_only.type=='phone'">電話をかけさせる</option>--}}
                        {{--                                                <option value="email" :selected="action_only && action_only.type=='email'">メールを送らせる</option>--}}
                        {{--                                                <option value="add_friend" :selected="action_only && action_only.type=='add_friend'">紹介したいLINE公式アカウントの友だち追加ページが開く</option>--}}
                        {{--                                            </optgroup>--}}
                        {{--                                        </select>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="col-xs-3 ">--}}
                        {{--                                        <button type="button" class="btn btn-primary btn-sm" @click="addSelectOther()">--}}
                        {{--                                            追加--}}
                        {{--                                        </button>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}
                    </div>

                    <input type="hidden" id="action_idx">
                    <input type="hidden" id="plan_key">
                    <input type="hidden" id="plan_key_slot">
                    <input type="hidden" id="button_tab_id">
                    <input type="hidden" id="button_index">
                    <input type="hidden" id="tmp_number">
                    <input type="hidden" id="type_image_map">
                </section>
            </div>

        </div>
    </div>
</div>
<script src="/js/form_answer/vee-validate.rc7.min.js"></script>
<script src="/js/form_answer/vee-validate_ja.min.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<script type="application/javascript" src="/js/select_action.js?v={{config("sns-line.version")}}"></script>
<script type="text/javascript">
    var scenarioList = null;
</script>