@extends('layout.basic.main')
@section('title',(isset( $_GET['type']) && $_GET['type'] == 'copy') ? 'ステップ配信（コピー）':'ステップ配信（作成・編集）')

@push('css')
<link rel="stylesheet" href="/css/friendlist/scenario.css?v={{config("sns-line.version")}}">
<link rel="stylesheet" href="/css/plugins/timepicker/bootstrap-timepicker.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<link rel="stylesheet" href="/css/scenario/list-message.css?v={{config("sns-line.version")}}">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.5.2/css/all.css"
      integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
<style>
    .main {
        padding-bottom: 0;
    }

    #single_template_idSelector .listItemInFolder .checkbox{
        margin: 0;
    }
    #single_template_idSelector .listItemInFolder .checkbox label{
        font-weight: bold;
        padding: 10px;
        width: 100%;
    }
    #single_template_idSelector .listItemInFolder .checkbox input{
        top: 12px;
    }

    .list-group-item {
        position: relative;
        display: block;
        padding: 10px 15px;
        margin-bottom: -1px;
        background-color: #fff;
        border: 1px solid #ddd;
    }

    .active-folder {
        background: #08BF5A !important;
        color: #fff !important;
    }

    .non-active-folder {
        background: #F4FBF2 !important;
        color: #707070;
        border: 1px solid #707070;
    }

    #tagEditModaltagSelector .listFolder >*, #single_template_idSelector .listFolder >* {
        margin-bottom: 5px;
        border: none;
        border-radius: 4px;
        font-weight: bold;
        font-size: 15px;
        color: #51595C;
    }

    #single_template_idSelector .listItemInFolder .checkbox {
        margin: 0;
    }

    #single_template_idSelector .listItemInFolder .checkbox label {
        font-weight: bold;
        padding: 10px;
        width: 100%;
    }

    #tagEditModaltagSelector .listItemInFolder >*, #single_template_idSelector .listItemInFolder >* {
        margin-bottom: 5px;
        border: 1px solid #F6F6F6;
        border-radius: 4px;
        font-weight: bold;
        font-size: 15px;
        padding: 0;
        color: #51595C;
    }

    #templateDetail .message{
        text-align: center;
        background: #F2F2F2;
        padding: 25px;
        margin: 10px;
    }

    #templateDetail .bg_preview_wap {
        width: 100%;
        margin: auto;
        background: #fff;
        word-break: break-word;
    }

    #templateDetail .text_preview {
        padding: 16px !important
    }

    #templateDetail .preview_video_wap {
        border-radius: 5px;
        width: 60%;
        margin-left: 20%;
        background: #fff;
        min-height: 250px;
        overflow-y: scroll;
        padding-bottom: 10px
    }

    #templateDetail .video_wap_preview {
        width: 100%
    }

    #templateDetail .preview_thumb img {
        width: 150px;
        max-height: 200px;
        float: left;
        padding-left: 10px
    }

    #templateDetail .message .question_wap {
        border-radius: 5px;
        width: 370px;
        margin-left: 25%;
        background: #fff
    }

    #templateDetail .question_title {
        border-bottom: 1px solid #ccc;
        padding: 10px !important;
        overflow: hidden;
        word-break: break-all
    }

    #templateDetail .answer_question {
        min-height: 40px;
        overflow: auto;
    }
    #modalAddTimingStep .notify {
        position: absolute;
        box-shadow: 0px 0px 10px #0000001A;
        border-radius: 5px;
        opacity: 0;
        background-color: white;
        transition: opacity 0.3s ease;
    }

    #modalAddTimingStep .fa-question-circle:hover  + .w-notify .notify {
        opacity: 1;
        visibility: visible;
    }
    #modalAddTimingStep .w-notify {
        padding-bottom: 30px;
        top: -71px;
        position: absolute;
        opacity: 0;
        visibility: hidden;
    }
    #modalAddTimingStep .fa-question-circle:hover {
        cursor: pointer;
    }

    #modalAddTimingStep .show-notify {
        position: relative;
        z-index: 1000;
    }

    #modalAddTimingStep .w-notify {
        padding-bottom: 30px;
        top: -71px;
        position: absolute;
        opacity: 0;
        visibility: hidden;
    }

    #modalAddTimingStep .fa-question-circle:hover + .w-notify {
        opacity: 1;
        visibility: visible;
    }

    #modalAddTimingStep .w-notify:hover {
        opacity: 1;
        visibility: visible;
    }
    a{
        cursor: pointer;
    }
    .btn-standard .question_wap .head_buttons .buttons_title,
    .btn-standard .question_wap .head_buttons .buttons_content
    {
        padding: 5px 10px;
        font-weight: 300 !important;
    }
    .btn-standard .question_wap .head_buttons {
        border-bottom: 1px solid #DDDDDD;
        font-weight: 300 !important;
    }
    .btn-standard .question_wap .answer_button .btn_modal_preview {
        font-weight: 300 !important;
        padding: 5px;
        color: #3771BE
    }
</style>
@endpush
@section('content')
<article class="">
<input type="hidden" id="scenario_id" value="{{ $scenario->id }}">
<section class="scenarioList" id="scenario_message" v-cloak>

    <div class="create_step" v-if="type_scen == 1">

        <div style="    z-index: 15;
    background-color: white;
    top: 75px;
    position: sticky;
    border-bottom: 1px solid #E0E0E0;
        padding-bottom: 20px;
    "

        >
            <div class="frame-content">
                <div class="create_step_top w-90">
                    <div style="margin-right: 30px;">
                        <div style="display: flex; margin-bottom: 10px;">
                            <p style="font-weight: 300; font-size: 14px; color: #222222">管理名</p>
                            <p class="count_title">@{{ countText(scenario.name) }}/20</p>
                        </div>
                        <input class="form-control"
                               id="name-scenario-v2"
                               v-model="scenario.name"
                               @focusout="saveDataScenario($event)"
                               @keyup.enter="saveDataScenario($event)"
                               style="width: 265px; font-weight: 500; font-size: 14px; color: #2B2F36;">
                    </div>
                    <div class="step_folder">
                        <p style="font-weight: 300; font-size: 14px; color: #222222">フォルダ</p>
                        <select class="form-control"
                                @change="saveDataScenario"
                                v-model="scenario.group_id"
                                name="select_folder_create"
                                id="folder_create"
                                style="cursor: pointer; width: 265px; font-weight: 500; font-size: 14px; color: #2B2F36;"
                        >
                            <option value="0">未分類</option>
                            <option v-for="(folder, indexFolder) in scenario_categories" :value="folder.id">@{{ folder.name }}</option>
                        </select>
                        <i class="fa fa-angle-down incon_down" style="left: 245px; bottom: 26px; font-size: 20px; position: relative; color: #888888 !important; cursor: pointer; pointer-events: none"></i>
                    </div>
                    <p class="btn_back_scen" v-on:click="returnListScen">ステップ配信一覧へ戻る</p>
                </div>

                @include('basic.step_message.v2.section-filter')


                @include('basic.step_message.v2.top-action-common')
            </div>
        </div>


        {{--        --}}
        <div class="frame-content">

            <div class="w-90" style="margin-top: 15px; color: #222222; font-weight: 600; font-size: 14px; background-color: #F8F8F8; height: 50px; display: flex; align-items: center; justify-content: center"
                 v-show="list_step.length == 0 && filter_select !== '' && list_filter[filter_select].id"
            >
                配信タイミングが登録されていません
            </div>

            <div id="list-step">
                @include('basic.step_message.v2.item-step')
            </div>
            <div style="position: relative">
                <button class="btn btn-sns-line btn_add_timing btn-add-step-bottom" style="width: auto;margin-left: 5px;border-left: 1px solid #5799DB !important;margin-top: 20px;"
                        :class="{'not-allowed': filter_select !== '' && !list_filter[filter_select].id}"
                        :disabled="countAllStep >=100"
                        v-on:click="viewModalAddTimingStep">
                    <i class="fal fa-plus" style="color: #5799DB; padding-right: 5px;"></i>次の配信タイミングを追加
                </button>
                <div class="preview-btn-add-bottom" v-show="countAllStep >=100">
                    1つの配信対象に登録できる配信タイミングは100までです。
                </div>
            </div>


            <br>

            <div class="w-90" v-show="filter_select === '' && show_frame_next_scen">
                <div class="w-85" style="margin-top: 20px; max-width: 780px">
                    <div style="font-size: 14px; font-weight: bold; color: #222222">ステップ配信の自動継続（上級者向け）</div>

                    <div class="btn btn-sns-line btn-open-or-close"
                         style="margin-top: 10px"
                        @click="show_next_scen = !show_next_scen"
                    >
                        自動継続を設定する

                        <i class="fas fa-caret-down" style="padding-left: 7px" v-show="!show_next_scen"></i>
                        <i class="fas fa-caret-up" style="padding-left: 7px"  v-show="show_next_scen"></i>
                    </div>

                    <div v-show="show_next_scen" v-show="show_next_scen">
                        <div style="background-color: #f8f8f8; padding: 10px; border-radius: 3px; margin-top: 10px">
                            <div class="note-start-scen">
                                このステップ配信の最後のメッセージ・アクションが配信された後、自動的に次のステップ配信をスタートさせる設定です。なお、次に開始するステップに同じステップ配信を選択することでステップ配信のループ継続が可能になりますが、<span style="color:#F44336 ;font-weight: 600;font-size: 14px">意図しないループ継続は配信数を大量に消費する恐れがあります</span>ので設定には、十分ご注意ください。
{{--                                このステップ配信 (@{{ scenario.name }}) の最後のメッセージ (アクション) が配信された後、自動的に次のステップ配信をスタートさせる設定です。なお、次に開始するステップに同じステップ配信(@{{ scenario.name }})を選択することでステップ配信のループ継続が可能になりますが、<span style="color: #f48375;">意図しないループ継続は配 信数を大量に消費する恐れがあります</span>ので設定には、十分ご注意ください。--}}

{{--                                このステップ配信 (@{{ scenario.name }}) の最後のメッセージ・アクションが配信された後、自動的に次の ステップ配信をスタートさせる設定です。なお、次に開始するステップに同じステップ配信(@{{ scenario.name }})を選択することでステップ配信のループ継続が可能になりますが、<span style="color: #F44336;">意図しないループ継続 は配信数を大量に消費する恐れがあります</span>ので設定には、十分ご注意ください。--}}
                            </div>
                        </div>
                        <div style="font-size: 14px; font-weight: bold; color: #222222; margin: 20px 0px">このステップ配信の終了後、自動的に開始するステップ配信</div>

                        <div style="position: relative; width: 600px">
                            <div class="btn-choose-next-sen" @click="$('.wrap-select-scen, .parent-wrap-select-scen').removeClass('hide')">
                                @{{ scenario.next_scen_name ? scenario.next_scen_name : '利用しない' }}
                            </div>
                            <div style="    width: 100%;
    position: absolute;
    height: 250px;
    padding-bottom: 20px;" class="parent-wrap-select-scen hide">
                                <div class="wrap-select-scen hide">
                                    <div class="frame-content folder">
                                        <div class="item-folder"
                                             @click="getListScenarioByCategory(0)"
                                             :class="{'active-folder': 0 == category_id}"
                                        >
                                            未分類
                                        </div>
                                        <div class="item-folder"
                                             v-for="(category, indexCategory) in scenario_categories"
                                             @click="getListScenarioByCategory(category.id)"
                                             :class="{'active-folder': category.id == category_id}"
                                        >
                                            @{{ category.name }}
                                        </div>
                                    </div>
                                    <div class="frame-content scen">
{{--                                        <div v-show="scenarios.length == 0">分類を選択して下さい</div>--}}
                                        <label class="item-scen"
                                               :for="'after_scenario_id_default'"
                                        >
                                            <input type="radio"
                                                   @change="changeNextScen(-1)"
                                                   v-model="scenario.after_scenario_id_1"
                                                   id="after_scenario_id_default"
                                                   name="after_scenario_id_1">
                                            <label for="after_scenario_id_default">
                                                利用しない
                                            </label>

                                        </label>
                                        <label class="item-scen"
                                               v-for="(itemScen, indexScen) in scenarios"
                                               :for="'after_scenario_id_1' + itemScen.id"
                                        >
                                            <input type="radio" :value="itemScen.id"
                                                   @change="changeNextScen(indexScen)"
                                                   v-model="scenario.after_scenario_id_1"
                                                   :id="'after_scenario_id_1' + itemScen.id"
                                                   name="after_scenario_id_1">
                                            <label :for="'after_scenario_id_1' + itemScen.id">
                                                @{{ itemScen.name }}
                                            </label>

                                        </label>
                                    </div>
                                </div>
                            </div>
                            {{--                        <select class="form-control select-next-scen"--}}
                            {{--                                @change="saveDataScenario($event)"--}}
                            {{--                                v-model="scenario.after_scenario_id_1"--}}
                            {{--                                :class="{'unselect': !scenario.after_scenario_id_1}"--}}
                            {{--                        >--}}
                            {{--                            <option value="null">選択してください</option>--}}
                            {{--                            <option :value="itemScen.id"--}}
                            {{--                                    v-for="(itemScen, indexScen) in scenarios"--}}
                            {{--                            >@{{ itemScen.name }}</option>--}}
                            {{--                        </select>--}}
                            <i class="fa fa-angle-down" style="color: #8F9293 !important; position: absolute; right: 10px; top: 50%; transform: translateY(-50%)"></i>
                        </div>
                    </div>
                </div>
            </div>

            <button class="btn btn-sns-line btn-sns-line-lg btn_back_create"
                    @click="backToList"
                    style="width: 90px; background-color: white; margin-top: 30px; border: 1px solid rgb(221, 221, 221); margin-right: 10px; color: #888888 !important; font-size: 16px; font-weight: 300"
            >戻る</button>
        </div>

    </div>

    @include('basic.step_message.v2.menu-right-action-bulk')

    <modal-send-test-all ref="modal-send-test-all"></modal-send-test-all>

    <modal-preview-all-step ref="modal-preview-all-step"></modal-preview-all-step>

    <modal-preview-send-test ref="modal-preview-send-test"></modal-preview-send-test>

    <modal-preview-template-child ref="modal-preview-template-child"></modal-preview-template-child>

    <div class="modal fade" id="modalEditNameStep"
         tabindex="-1" role="dialog"
         data-backdrop="static"
         data-keyboard="false"
         aria-labelledby="chatSettingStatus">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="border: none;">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true" style="opacity: 1;font-size: 27px">
                        <i class="fas fa-times"></i></button>
                    <h2 class="text-center " style="font-size: 20px; color: rgb(34, 34, 34); font-weight: bold">メッセージ管理名 編集</h2>
                </div>
                <div class="modal-body" style="padding: 15px 80px;">
                    <div style="display: flex; align-items: end; justify-content: space-between; margin-bottom: 5px">
                        <span style="color: #222222; font-size: 14px; font-weight: 300">メッセージ管理名（友だちには表示されません）</span>
                        <span style="color: #888888; font-size: 12px; font-weight: 300">@{{ name_step ? name_step.length : 0 }}/15</span>
                    </div>
                    <input type="text"
                           id="input-edit-step-name"
                           style="height: 35px"
                           v-model="name_step"
                           class="form-control"
                    >
                </div>
                <div class="text-center">
                    <button type="button" class="btn btn-sns-line btn-save-step-name"
                            v-on:click="editStep(list_step[index_step], index_step, $event)">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalAddTimingStep">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="padding: 25px; width: 700px;">
                <div class="modal_head" style="height: 65px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                        <i class="fas fa-times"></i>
					</button>
                    <p class="text-center">配信タイミング選択</p>
                    <div class="text-center explain_timing_send" style="margin-top: 4px " v-on:click="closeTimingStep">配信タイミングの違いがよく分からない方はこちら</div>

                </div>
                <div class="modal_body" style="margin-top: 10px">
                    <div class="start_step_disable wrap-setting-data-type"
                         v-if="checkExistsTimeSendNow">

                        <div class="input-radio">
                            <input type="radio"
                                   class="custom-radio"
                                   v-model="data_step.delay_type"
                                   value="1"
                                   id="pick_step_disable"
                                   name="pick_timing_step" disabled>
                            <label></label>
                        </div>

                        <label for="pick_step_disable" class="wrap-setting-time-send" >
                            <p class="setting_note">ステップ開始直後</p>
                            <p class="setting_intruct" style="margin-top: 5px;    margin-bottom: 5px;">
                                <a href="https://lme.jp/manual/lmeaction_friendaction/#toc7" target="_blank" style="color: #5799DB; text-decoration: underline">ステップ開始時のトリガー</a>が稼働したらすぐに送信します</p>
                            <p class="setting_intruct" >※友だち追加時ではありません。友だち追加時にステップを開始する方法は
                                <a href="https://lme.jp/manual/step_delivery/#stepdelivery_addfriend" target="_blank" style="color: #5799DB; text-decoration: underline">こちら</a></p>
                        </label>
                    </div>
                    <div class="start_step wrap-setting-data-type"
                         v-if="!checkExistsTimeSendNow"
                         v-bind:class="(data_step.delay_type == 1) ? 'activeTab' : ''">

                        <div class="input-radio">
                           <input type="radio" class="custom-radio"
                                  v-model="data_step.delay_type"
                                  value="1"
                                  id="pick_timing_start"
                                  name="pick_timing_step"
                           >
                            <label for="pick_timing_start"></label>
                        </div>

                        <label for="pick_timing_start" class="wrap-setting-time-send">
                            <p class="setting_note">ステップ開始直後</p>
                            <p class="setting_intruct" style="margin: 5px 0;">
                                <a href="https://lme.jp/manual/lmeaction_friendaction/#toc7" style="color: #5799DB; font-weight: 300; text-decoration: underline" target="_blank">
                                    ステップ開始時のトリガー</a>が稼働したらすぐに送信します
                            </p>
                            <p class="setting_intruct">
                                ※友だち追加時ではありません。友だち追加時にステップを開始する方法は
                                <a href="https://lme.jp/manual/step_delivery/#stepdelivery_addfriend" style="color: #5799DB; font-weight: 300; text-decoration: underline" target="_blank">こちら</a>
                            </p>
                        </label>
                    </div>
                    <div class="set_date_time wrap-setting-data-type" v-bind:class="(data_step.delay_type == 0) ? 'activeTab' : ''">

                        <div class="input-radio">
                            <input type="radio"
                                   class="custom-radio"
                                   v-model="data_step.delay_type"
                                   value="0"
                                   id="pick_timing_date_time"
                                   name="pick_timing_step"
                            >
                            <label for="pick_timing_date_time"></label>
                        </div>

                        <label for="pick_timing_date_time" class="wrap-setting-time-send" >
                            <p class="setting_note" style="margin-bottom: 5px;">日時で指定</p>
                            <p class="setting_intruct">ステップ開始時からの経過日数と時間で配信タイミングを指定します</p>

                            <div class="set_time_background" v-bind:class="(data_step.delay_type == 0) ? 'active_bg' : ''">
                                <div class="input_date_time">
                                    <p class="setting_intruct" style="font-weight: 600">ステップ開始から</p>
                                    <input class="form-control"
                                           type="number"
                                           min="0"
                                           v-model="data_step.start_day"
                                           :disabled="data_step.delay_type == 1 || data_step.delay_type == 2"
                                    >
                                    <p class="setting_intruct" style="font-weight: 600">日後の</p>

                                    <div style="position: relative; margin-left: 10px">
                                        <input class="form-control timepicker"
                                               type="text"
                                               v-model="data_step.start_time"
                                               style="width: 110px; margin-left: 0px"
                                               :disabled="data_step.delay_type == 1 || data_step.delay_type == 2">
                                        <i class="fal fa-clock icon-datetime"
                                           style="font-size: 20px; color: #8F9293; position: absolute; top: 50%; transform: translateY(-50%); left: 10px"></i>
                                    </div>
                                    <p class="setting_intruct" style="font-weight: 600">に配信する</p>
                                </div>
                                <p class="setting_intruct">※ステップ開始当日に送信する場合は「0日後」を選択してください</p>
                            </div>
                        </label>
                    </div>
                    <div class="set_duration wrap-setting-data-type" v-bind:class="(data_step.delay_type == 2) ? 'activeTab' : ''">

                        <div class="input-radio">
                            <input type="radio"
                                   class="custom-radio"
                                   value="2"
                                   id="pick_timing_duration"
                                   name="pick_timing_step"
                                   v-model="data_step.delay_type"
                            >
                            <label for="pick_timing_duration"></label>
                        </div>

                        <label for="pick_timing_duration" class="wrap-setting-time-send">
                            <p class="setting_note" style="margin-bottom: 5px;">経過時間で指定</p>
                            <p class="setting_intruct">ステップ開始時からの72時間以内の経過時間を指定します</p>
                            <div class="set_time_background" v-bind:class="(data_step.delay_type == 2) ? 'active_bg' : ''">
                                <div class="input_duration">
                                    <p class="setting_intruct" style="font-weight: 600">ステップ開始から</p>
                                    <input class="form-control"
                                           type="number"
                                           min="0"
                                           v-model="data_step.start_minute"
                                           :disabled="data_step.delay_type == 0 || data_step.delay_type == 1">
                                    <p class="setting_intruct" style="font-weight: 600">時間</p>
                                    <input class="form-control"
                                           type="number"
                                           min="0"
                                           v-model="data_step.start_second"
                                           :disabled="data_step.delay_type == 0 || data_step.delay_type == 1">
                                    <p class="setting_intruct" style="font-weight: 600">分後に配信する</p>
                                </div>
                                <p class="setting_intruct">※設定できるのは72時間00分以内です</p>
                            </div>
                        </label>
                    </div>
                    <div class="title_border text-center" style="margin-top: 20px">
                        <label class="text" style="font-size: 14px; font-weight: 300; color: #222222">登録できる配信タイミング</label>
                        <span class="pl-3 show-notify" style="margin-left: 30px">
                          <i class="fas fa-question-circle f-size-25" style="color: #222222 ;font-size: 14px; cursor: pointer"></i>
                                                        <div class="w-notify">
                                                              <div class="notify" style="    top: -6px;
                                                                                            width: 515px;
                                                                                            left: 119px;
                                                                                            padding: 15px;">
                                                                <span style="font-weight: 300; font-size: 14px;color: #222222">1つの配信対象に登録できる配信タイミングは100までです。100以上登<br>録したい場合、ステップを分けてステップの自動継続をご利用ください。</span>
                                                            </div>
                                                        </div>
                                                    </span>
                    </div>

                    <div class="text-center" style="font-weight: 300; margin: 11px; color: #222222;font-size: 14px">残り <span style="font-size: 20px; font-weight: 600; color: #222222">@{{ countAllStep }}</span>/100</div>
                </div>
                <div class="modal_foot text-center">
                    <button class="btn btn-sns-line btn-sns-line-lg btn_timing_step text-center"
                            style="background: #FFFFFF;
                            font-size: 16px;font-weight:300;
                                border: 1px solid #08BF5A;
                                border-radius: 4px;"
                        @click="saveStepConfirm"
                    >決定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalWarningTimeStep">
        <div class="modal-dialog" role="document" style="top: 26%;">
            <div class="modal-content" style="padding: 31px; width: 700px;">
                <div class="modal_head" style="height: 55px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                        <i class="fal fa-times"></i>
                    </button>
                    <p class="text-left" style="font-weight: 600; font-size: 20px; color:#222222 "><i class="far fa-exclamation-circle" style="color:#F44336 ; margin-right: 5px; transform: rotate(180deg)"></i>送信タイミングの変更に関するご注意</p>

                </div>
                <div class="modal_body" style="margin-top: 10px">
                    <div style="font-weight: 600; font-size: 16px; color: #222222">すでにステップが開始している友だちで、今変更した送信タイミングがすでに過去の場合、メッセージ送信・アクション稼働はスキップされます。</div>
                    <div style="font-size: 16px; margin-top: 25px; color:#222222">例）【配信タイミングを6日後→3日後に変更】 <br>
                        〇︎ 本日がステップ開始から5日目の友だちの場合  <br>
                        この友だちはすでにステップ開始から5日経過しており、配信タイミングがステップ開始から3日後に変更されたため、このメッセージの配信はスキップされます。</div>
                </div>
                <div class="modal_foot text-center" style="display: flex; justify-content: space-between;  margin-top: 40px;">
                    <button class="btn btn-sns-line btn-sns-line-lg text-center btn-cancel" data-dismiss="modal"
                    >閉じる</button>
                    <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-success text-center"
                            style="font-size: 16px;font-weight:600; width: 200px; height: 50px;border-radius: 4px;"
                            @click="saveStep"
                    >変更する</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalExplainTimeSend">
        <div class="modal-dialog" role="document" style="width: 1100px;">
            <div class="modal-content" style="padding: 20px;">
                <div class="modal_head">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<span class="line-icon line-icon-close">
							<i class="fas fa-times"></i>
						</span>
					</button>
                    <p class="text-center" style="font-weight: 600; font-size: 20px; color: #222222; padding-top: 10px;">配信タイミングの違い</p>
                </div>
                <div class="modal_body" style="display: flex; width: 100%; max-height: 71vh; overflow-y: auto">
{{--                    <div class="specify_by_time">--}}
{{--                        <img src="/images/explain_send_time1.png" style="height: 500px; width: 550px;">--}}
{{--                    </div>--}}
{{--                    <div class="specify_by_elapsed">--}}
{{--                        <img src="/images/explain_send_time2.png" style="height: 498px; width: 550px;">--}}
{{--                    </div>--}}
                    <div style="padding: 20px 0px">
                        <img src="/images/img-explain-time-send_v2.png">
                    </div>
                </div>
                <div class="text-center" style="margin-top: 10px;">
                    <button class="btn btn-sns-line btn-sns-line-lg btn_return_timing" v-on:click="closeExplainTime">戻る</button>
                </div>
            </div>
        </div>
    </div>

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

    <div class="modal fade" id="modalChooseTemplate">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="padding: 25px;">
                <div class="modal_head">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<span class="line-icon line-icon-close">
							<i class="fas fa-times"></i>
						</span>
					</button>
                    <p class="text-center">テンプレート利用選択</p>
                </div>
                <div class="modal_body" style="padding: 25px;">
                    <div style="display: flex;">
                        <input type="radio" class="custom-radio"
                                value="1"
                               v-model="option_add_template"
                               id="use_template"
                               name="pick_template">
                        <label for="use_template">
                            <p class="change_color_p" style="font-weight: 600; font-size: 16px; color: #535657;">テンプレートをそのまま利用する</p>
                            <p style="font-weight: 300; font-size: 14px; color: #8F9293;">※元のテンプレートが編集されたら、自動的に編集が適用されます</p>
                        </label>
                    </div>
                    <div style="display: flex; margin: 20px 0;">
                        <input type="radio"
                               value="0"
                               v-model="option_add_template"
                               class="custom-radio" id="use_copy" name="pick_template">
                        <label for="use_copy">
                            <p class="change_color_p" style="font-weight: 600; font-size: 16px; color: #535657;">テンプレートを引用して編集する</p>
                            <p style="font-weight: 300; font-size: 14px; color: #8F9293;">※元のテンプレートが編集されても、編集は適用されません</p>
                        </label>
                    </div>
                    <div class="text-center" style="margin-top: 15px">
                        <button class="btn btn-sns-line btn-sns-line-lg btn_choose_template"
                            @click="showModalTemplate"
                        >決定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalActionSource">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="padding: 25px;">
                <div class="modal_head" style="height: 55px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<span class="line-icon line-icon-close">
							<i class="fas fa-times"></i>
						</span>
					</button>
                    <p class="text-center">
                        @{{ type_copy == 'single' ? 'メッセージ・アクションの引用元を選択' : '一括引用登録' }}

                    </p>
                </div>
                <div class="modal_body">
                    <p style="font-weight: 300; font-size: 14px; color: #535657;margin-bottom: 10px;">引用元の配信対象（絞込み先）を選択</p>
                    <div style="position: relative">
                        <select class="form-control" style="font-weight: 500; font-size: 14px; color: #2B2F36; text-align: center;"
                                v-model="filter_manager_selected"
                                @change="getListStepCopy(scenario_id, $event.target.value)"
                        >
                            <option value="">選択してください</option>
                            <option value="-1">ステップ購読者全員</option>
                            <option v-for="(filter, indexFilter) in list_filter"
                                    :value="filter.id"
                            >@{{ filter.name }}</option>
                        </select>
                        <i class="fa fa-angle-down incon_down" style="right: 10px; top: 50%; transform: translateY(-50%); font-size: 20px; position: absolute; color: #888888 !important;"></i>
                    </div>
                    <div class="list_action_source">
                        <table id="table_action_source" style="margin: 0;">
                            <tr>
                                <th style="width: 172px;">配信タイミング</th>
                                <th>メッセージ管理名</th>
                                <th style="text-align: right">プレビュー</th>
                            </tr>
                        </table>
                        <div class="wrap-table-list-step-copy">
                            <table id="table_action_source" style="margin: 0px">
                                <tr
                                        v-for="(step, indexStep) in list_all_step"
                                        :class="{'row-active': list_step_copy_selected.includes(step.id)}"
                                >
                                    <td style="padding-left: 20px; width: 172px;">
                                        <div class="info-time-send" v-html="getTimeSendStep(step, indexStep)"></div>
                                    </td>
                                    <td style="text-align: left">
                                        <div class="name-step">@{{ step.name ? step.name : '-' }}</div>
                                    </td>
                                    <td>
                                        <div style="display: flex; justify-content: end">
                                            <button class="btn btn-sns-line btn_source_preview"
                                                @click="previewStepModalCopy(step.id, indexStep)"
                                            >
                                                <i class="far fa-caret-circle-right" style="color: #8F9293; font-size: 21px;"></i>
                                            </button>

                                            <label :for="'step-copy' + indexStep"
                                                   v-show="type_copy == 'single'"
                                                   class="btn btn-sns-line btn_source_choice"

                                            >選択</label>

                                            <input type="checkbox"
                                                   style="display: none"
                                                   :id="'step-copy' + indexStep"
                                                   :value="step.id"
                                                   v-model="list_step_copy_selected"
                                            >
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="text-center">
                        <p style="font-weight: 300; font-size: 16px; color: #F44336;">※引用元の登録内容が上書きされますのでご注意ください</p>

                        <button v-show="type_copy == 'single'"
                                :class="{'not-allowed': list_step_copy_selected.length == 0}"
                                class="btn btn-sns-line btn-sns-line-lg btn_selected_source"
                            @click="copyMessageAndAction"
                        >選択した内容を引用登録する</button>

                        <button v-show="type_copy == 'multiple'" class="btn btn-sns-line btn-sns-line-lg btn_selected_source"
                            @click="copyAndRegisterAllStep"
                        >一括引用登録する</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalBulkDeletion">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="padding: 25px; width: 525px;">
                <div class="modal_head" style="height: 40px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<span class="line-icon line-icon-close">
							<i class="fas fa-times"></i>
						</span>
                    </button>
                    <p class="text-center">一括削除</p>
                </div>
                <div class="modal_body text-center" style="width: 350px; margin: auto;">
                    <p style="font-weight: 300; font-size: 14px; color: #535657; margin-bottom: 10px;">選択中の配信対象</p>
                    <p style="font-weight: 600; font-size: 14px; color: #535657; margin-bottom: 10px; height: 40px; background-color: #DDDDDD; line-height: 40px; border-radius: 3px;">@{{ filter_select !== '' ? list_filter[filter_select].name : 'ステップ購読者全員' }}</p>
                    <p style="font-weight: 300; font-size: 12px; color: #535657;">
                        上記の配信対象に登録されている</p>
                    <p style="font-weight: 300; font-size: 12px; color: #535657; margin-bottom: 10px;">
                        メッセージ・アクションを全て消去しますが、宜しいですか？</p>
                    <p style="font-weight: 600; font-size: 14px; color: #F44336; margin-bottom: 10px;">※1度消去すると、元には戻せません</p>
                </div>
                <div class="text-center">
                    <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-danger btn_delete_all" v-on:click="deleteMultipleStepByFilter">全て削除</button>
                </div>
                <div class="text-center">
                    <button class="btn btn-sns-line btn-sns-line-lg btn_cancel_delete" data-dismiss="modal">キャンセル</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalSettingSender">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="padding: 25px; width: 700px;">
                <div class="modal_head" style="height: 45px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<span class="line-icon line-icon-close">
							<i class="fas fa-times"></i>
						</span>
					</button>
                    <p class="text-center">送信者名設定</p>
                </div>
                <div class="set_sender_note">
                    <p>不正利用を防ぐため、LINE社サービスと誤認されるようなワードの利用はできません。</p>
                    <p>友だちトーク画面には「送信者名 from “LINE公式アカウント名”」という形で表示されます。</p>
                </div>
                <div class="set_sender_mid">
                    <p>追加済みスタッフ一覧</p>
                    <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-primary btn_add_sender"
                            v-on:click="addProfile">
                        <i class="fal fa-plus" style="margin-right: 5px;"></i>送信者追加</button>
                </div>
                <div class="list_set_sender">
                    <table id="table_setting_sender" style="margin: 0;">
                        <thead>
                            <tr>
                                <th class="sender_table_head" style="min-width: 65px; text-align: center; border-left: 1px solid #FCFCFC;">選択</th>
                                <th class="sender_table_head" style="width: 72px;">イメージ</th>
                                <th class="sender_table_head" style="width: 380px;">送信者名</th>
                                <th class="sender_table_head" style="width: 70px;"></th>
                                <th class="sender_table_head" style="width: 77px;"></th>
                            </tr>
                        </thead>
                        <tbody >
                        <template v-for="(item, index) in bots_profile">
                            <tr v-if="!item.is_new && index == 0">
                                <td class="sender_table_body_input" style="min-width: 65px; border-left: 1px solid #FFFFFF;">
                                    <div class="input-radio">
                                        <input type="radio"
                                               :value="item.id"
                                               name="sender_picked"
                                               v-model="selectedUser"
                                               :id="'item-profile' + item.id"
                                        class="custom-radio">
                                        <label :for="'item-profile' + item.id"></label>
                                    </div>
                                </td>
                                <td class="sender_table_body td-bg" style="min-width: 72px;">
                                    <label for="input-update-file" class="wrap-img-profile">
                                        <img v-show="!item.avt_path" @error="setAltImg"
                                             src="/images/no-image-icon-23485.png"
                                             @click="showModalChooseFile(index)"
                                             class="img-fluid img-profile-default" >
                                        <img v-show="item.avt_path" @error="setAltImg"
                                             @click="showModalChooseFile(index)"
                                             :src="(item.avt_path && item.avt_path.startsWith('http')) ? item.avt_path : '{{ env('URL_SERVER_MEDIA') }}' + item.avt_path"
                                             class="img-fluid img-profile"  >
                                    </label>
                                </td>
                                <td colspan="1" class="sender_table_body td-bg" style="padding: 5px;">
                                    <div style="display: flex;">
                                        <input v-model="item.nick_name"
                                               :disabled="item.disable"
                                               class="form-control sender_name" type="text">
                                    </div>
                                </td>
                                <td colspan="2" class="sender_table_body">
                                    <template >初期設定</template>
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>

                    <table id="table_setting_sender" style="margin: 0;">
                        <tbody >
                        <draggable v-model="bots_profile"
                                   @start="dragging = true"
                                   @end="dragging = false"
                                   @change="sortItemProfile" tag="tbody" id="body-profile-sort">

                            <template v-for="(item, index) in bots_profile" >
                                <tr v-if="!item.is_new && index > 0" >
                                    <td class="sender_table_body_input" style="min-width: 65px; border-left: 1px solid #FFFFFF;">
                                        <div class="input-radio">
                                            <input type="radio"
                                                   :value="item.id"
                                                   name="sender_picked"
                                                   v-model="selectedUser"
                                                   class="custom-radio"
                                                   :id="'item-profile' + item.id"
                                            >
                                            <label :for="'item-profile' + item.id"></label>
                                        </div>
                                    </td>
                                    <td class="sender_table_body td-bg" style="width: 72px;">
                                        <label for="input-update-file" class="wrap-img-profile">
                                            <img v-show="!item.avt_path" @error="setAltImg"
                                                 src="/images/no-image-icon-23485.png"
                                                 @click="showModalChooseFile(index)"
                                                 class="img-fluid img-profile-default">
                                            <img v-show="item.avt_path" @error="setAltImg"
                                                 @click="showModalChooseFile(index)"
                                                 :src="(item.avt_path && item.avt_path.startsWith('http')) ? item.avt_path : '{{ env('URL_SERVER_MEDIA') }}' + item.avt_path"
                                                 class="img-fluid img-profile">
                                        </label>
                                    </td>
                                    <td colspan="2" class="sender_table_body td-bg" style="padding: 5px;">
                                        <div style="display: flex;">
                                            <input class="form-control sender_name"
                                                   :disabled="item.disable"
                                                   :ref="'input-name-' + index"
                                                   :value="item.id"
                                                   v-model="item.nick_name"
                                                   @focusout="focusOutInput(index)"
                                                   type="text">

                                            <div class="btn-group-sender" style="margin: auto;">

                                            <span class="focus-pointer">
                                                <i class="far fa-ellipsis-h" style="font-size: 17px; color: #8F9293;"></i>
                                            </span>
                                                <ul class="dropdown-menu action-broadcast-sender">
                                                    <li class="focus-pointer">
                                                        <div style="font-weight: 300; font-size: 13px; color: #535657;"
                                                             @click="focusInput(index)"
                                                        >
                                                            編集
                                                        </div>
                                                    </li>
                                                    <li class="focus-pointer"  @click="deleteProfileBots(item)">
                                                        <div style="font-weight: 300; font-size: 13px; color: #F44336;">
                                                            削除
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </td>
                                    <td colspan="1" class="sender_table_body" style="width: 60px; background-color: #FFFFFF;">
                                        <template >
                                            <i class="fal fa-bars item_icon" style="font-size: 20px; color: #DDDDDD;"></i>
                                        </template>
                                    </td>
                                </tr>
                            </template>
                        </draggable>


                        </tbody>
                    </table>

                    <table id="table-profile-default" style="margin: 0;">
                        <template v-for="(item, index) in bots_profileNew">
                            <tr class="row-default">
                                <td class="sender_table_body_input" style="min-width: 65px"></td>
                                <td class="sender_table_body" style="width: 72px;">
                                    <label for="input-update-file" class="wrap-img-profile">
                                        <img v-show="!item.avt_path" @error="setAltImg"
                                             src="/images/no-image-icon-23485.png"
                                             @click="showModalChooseFile(index, 'new')"
                                             class="img-fluid img-profile-default">
                                        <img v-show="item.avt_path" @error="setAltImg"
                                             @click="showModalChooseFile(index, 'new')"
                                             :src="(item.avt_path && item.avt_path.startsWith('http')) ? item.avt_path : '{{ env('URL_SERVER_MEDIA') }}' + item.avt_path"
                                             class="img-fluid img-profile">
                                    </label>
                                </td>
                                <td colspan="2" class="sender_table_body">
                                    <div style="display: flex;">
                                        <input class="form-control sender_name input-change-name"
                                               v-model="item.nick_name"
                                               placeholder="送信者名を入力してください">

                                        <button class="btn btn-sns-line btn-sns-line-success btn_get_sender"
                                                @click="saveBotProfileV2(index, 'new')"
                                        >登録</button>
                                    </div>
                                </td>
                                <td colspan="1" style="width: 60px; background-color: #FFFFFF; ">

                                </td>
                            </tr>
                        </template>

                    </table>

                    <input type="file" accept="image/png" @change="uploadFile(event)"
                           id="input-update-file" style="opacity: 0;position: absolute;z-index: -1;">
                </div>
                <div class="text-center" style="margin-top: 15px;">
                    <button class="btn btn-sns-line btn-sns-line-lg btn_save_sender"  @click="saveUserProfile">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal_preview_test_scen" style="margin-left: 15%; margin-top: 5%">
        <div class="modal-dialog" role="document" style="width: 1200px;">
            <div class="modal-content">
                <div class="modal-header" style="display: flex;">
                    <div style="font-size: 24px;">プレビュー・テスト送信</div>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px; margin-left: auto;">
                        <span class="line-icon line-icon-close">
                            <i class="fas fa-times" style="color:#7D9195; background-color: unset; position: relative;"></i>
                        </span>
                    </button>
                </div>
                <div class="wrap-modal-body">
                    <div class="wrap_content" style="display: flex;">
                        <div class="wrap_preview" style="height: 100%; width: 50%; padding: 30px;" >
                            <div class="preview_option_unreg"> 
                                <button class="btn btn-sns-line btn-sns-line-lg btn_preview_option">メッセージ</button>
                                <button class="btn btn-sns-line btn-sns-line-lg btn_preview_option">アクション</button>
                            </div>
                        </div>

                        <div class="wrap_send" style="height: 100%; width: 50%; padding: 30px; border-left: 1px solid #DDDDDD;">
                            <span>テストアカウント登録</span>
                            <span class="text_for_manual" style="font-weight: 500; font-size: 12px;">
                                検索してもアカウントが表示されない場合は <a href="" style="font-weight: 500; font-size: 12px; color: #5799DB;" target="_blank">こちら</a>
                            </span>
                            <div class="wrap_search" style="display: flex; margin: 20px 0;">
                                <input type="text" placeholder="LINE名/システム表示名で検索" style="font-weight: 300; height: 45px; border-radius: 5px;">
                                <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-default" 
                                style="background-color: #fff; border: 1px solid #DDDDDD; margin-left: 20px;">検索</button>
                            </div>
                            <div class="wrap-btn-send" style="display: flex; margin-bottom: 20px;">
                                <div style="margin-top: auto; margin-bottom: auto;">テストアカウント</div>
                                <button class="btn btn-sns-line btn-sns-line-md btn-sns-line-success" style="margin: auto;">一括テスト送信</button>
                            </div>
                            <div class="wrap-table">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th style="background-color: #FFF !important;">
                                                <input type="checkbox">
                                            </th>
                                            <th style="background-color: #FFF !important; color: #000 !important; text-align: left;">
                                                テストアカウント名
                                            </th>
                                            <th style="background-color: #FFF !important; color: #000 !important; text-align: left;">
                                                操作
                                            </th>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalPreviewImg">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="padding: 25px;">
                <div class="modal_head" style="height: 40px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<span class="line-icon line-icon-close">
							<i class="fas fa-times"></i>
						</span>
					</button>
                    <p class="text-center">画像プレビュー</p>
                </div>
                <div class="modal_body">
                    <img src="/images/blank_avatar.png">
                    <div class="text-center">
                        <button class="btn btn-sns-line btn-sns-line-lg btn_back_media" data-dismiss="modal">閉じる</button>
                    </div>
                </div>
            </div> 
        </div>
    </div>

    <div class="modal fade" id="modalPreviewVideo">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="padding: 25px;">
                <div class="modal_head">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<span class="line-icon line-icon-close">
							<i class="fas fa-times"></i>
						</span>
					</button>
                    <p class="text-center">動画プレビュー</p>
                </div>
                <div class="modal_body">
                    <p class="text-center">ファイル名ファイル名ファイル名</p>
                    <video></video>
                    <button class="btn btn-sns-line btn-sns-line-lg btn_back_media" data-dismiss="modal">閉じる</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalPreviewVoice">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal_head">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<span class="line-icon line-icon-close">
							<i class="fas fa-times"></i>
						</span>
					</button>
                    <p class="text-center">音声プレビュー</p>
                </div>
                <div class="modal_body">
                    <p class="text-center">ファイル名ファイル名ファイル名</p>
                    <audio></audio>
                    <button class="btn btn-sns-line btn-sns-line-lg btn_back_media" data-dismiss="modal">閉じる</button>
                </div>
            </div>
        </div>
    </div>

    <div id="templateModal_chat">
        <div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModal">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" style="border: none;  box-shadow: 0px 3px 6px #ccc; display: block;">
                    <div class="modal-header" style="border-bottom: none">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fas fa-times ic-close"></i></button>
                        <h2 class="text-center" style="font-weight: bold"> テンプレート選択</h2>

                    </div>
                    <div class="modal-body modal-body-tag-selector " style="box-shadow: 0px 3px 10px #ccc;margin: 20px 50px;">
                        <div class="tag-selector" style="border: none">
                            <div class="row" id="single_template_idSelector">
                                <div class="col-sm-6 box_folder_tag " style="border-right: 3px solid #F6F6F6; height:50vh ;max-height: 50vh;overflow: auto; ">
                                    <div class="tag-group-list"  >
                                        <ul class="list-group listFolder" >

                                            <li
                                                    :id="'template_0'"
                                                    v-on:click="template(0)"
                                                    :data-id="0"
                                                    :class="(0 != folder_id) ? ' non-active-folder' : 'active-folder'"
                                                    class="list-group-item visual-list-item">
                                                未分類
                                            </li>
                                            <li v-for="(category,key) in categories"

                                                :id="'template_'+category.id"
                                                v-on:click="template(category.id)"
                                                :data-id="category.id"
                                                :class="(category.id != folder_id) ? ' non-active-folder' : 'active-folder'"
                                                class="list-group-item visual-list-item">
                                                @{{ category.name }}

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-sm-6 box_item_of_folder" style="max-height: 50vh;overflow: auto;">
                                    <div class="tag-list">
                                        <div class="text-center" v-show="templates_item!=null && templates_item.length == 0" style="margin: 5px; font-weight: bold">分類を選択して下さい</div>
                                        <ul class="list-group listItemInFolder" v-show="templates_item!=null" >
                                            <li v-for="(template,key) in templates_item"
                                                class="list-group-item visual-list-item">
                                                <div class="checkbox" v-bind:style="(template_id == key) ? 'background: #F4FBF2' : ''">
                                                    <label :for="'template_'+template.id">
                                                        <input type="radio" name="single_template_id"
                                                               :id="'template_'+template.id"
                                                               v-model="template_id"
                                                               :value="template.id"
                                                               data-tagname="template.name">@{{
                                                        template.name }}
                                                    </label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="padding: 15px 50px 30px;">
                        <div class="col-xs-4">

                        </div>
                        <div class="col-xs-4">
                            <button type="button"  v-on:click="acceptTemplateToStep()" :disabled="(template_id==null)"
                                    class="btn btn-block btn-primary" style=" width: 200px;text-align: center;
                                             font-size: 18px; outline: none;
                                             margin: 0 auto;background-color: #08BF5A; border-color: #08BF5A;
                                              font-weight: bold">決定
                            </button>
                        </div>
                        <div class="col-xs-1">

                        </div>
                        <div class="col-xs-3 text-right">
                            <button type="button" class="btn btn-block btn-danger"  :disabled="(template_id==null)"
                                    v-on:click="viewTemplateDetail()" style="width:110px;float: right; border-color: #96ADB2; background-color: #96ADB2; font-weight: bold;font-size: 18px; outline: none"
                            >
                                プレビュー
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="modal fade"  id="templateDetail" v-show="item != null"  tabindex="-1" role="dialog"
             aria-labelledby="templateModal1">
            <div class="modal-dialog modal-lg" role="document">
                <div  class="modal-content" style="display: block;">

                    <div class="modal-header" style="border-bottom: none">
                        <button type="button" class="close"  @click="hideTemplateDetail()"
                                aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fas fa-times ic-close" style="padding: 2px 6px 3px 6px;"> </i></button>
                        <p style="font-size: 17px;font-weight: bold;">[@{{item.name}}] プレビュー</p>
                    </div>
                    <div class="modal_message" style="overflow: auto;max-height: 500px">
                        <div class="inner">
                            <div class="message" v-if="item.type == 'text'">
                                <div class="bg_preview_wap" style="margin: 0 auto !important; overflow: auto">
                                    <p class="text-left text_preview" style="white-space: pre-line; height: 200px;">@{{item.content}}</p>
                                </div>
                            </div>
                            <div class="message" v-if="item.type == 'image'">
                                <div class="preview_stamp bg_preview_wap">
                                    <img :src="item.content" alt="template-img" class="img_responsive" style="max-width: 300px">
                                </div>
                            </div>
                            <div class="message" v-if="item.type == 'stamp'">
                                <div class="preview_stamp bg_preview_wap">
                                    <img :src="'https://stickershop.line-scdn.net/stickershop/v1/sticker/'+item.content.split('_')[1]+'/ANDROID/sticker.png'" alt="template-img" style="width: 30%">
                                </div>
                            </div>

                            <div class="message" v-if="item.type == 'question'">
                                <div class="question_wap" style="width: 370px;">
                                    <p class="question_title">@{{ item.content }}</p>
                                    <div class="answer_question">
                                        <span class="aws_1">@{{ item.question.answer_one }}</span>
                                        <span class="aws_2">@{{ item.question.answer_two }}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="message" v-if="item.type == 'form'">
                                <div v-if="item.type_button == 1" class="carousel btn-standard" style="margin-bottom: 20px;" v-for="(carousel,k) in item.buttons">
                                    <div class="question_wap" style="width: 350px;">
                                        <div class="head_buttons">
                                            <p v-if="carousel.img_path" style="width: 350px; overflow: hidden;" :style="item.rate_image_button ? (item.rate_image_button == 'square' ? 'height:350px' : 'height:233px') : 'height:auto'">
                                                <img style="width: 100%; object-fit: cover;" :style="item.rate_image_button ? (item.rate_image_button == 'square' ? 'height:350px' : 'height:233px') : 'height:auto'" :src="carousel.img_path && carousel.img_path.startsWith('http') ? carousel.img_path  :  (( carousel.image_server ? carousel.image_server : '