@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/step_message/index.css?v={{config("sns-line.version")}}">

    <style>
        .action-add-step button {
            border: 2px solid rgba(8, 191, 90, 1) !important;
        }

        .action-add-step button:hover {
            border-color: #8c8c8c !important;
            color: #51595c !important;
        }

        .action-add-step button:focus {
            border-color: #8c8c8c !important;
            color: #51595c !important;
        }

        .list-step .btn{
            border: unset;
        }

        .list-step .btn:focus{
            outline: unset;
        }

        .fade {
            transform: unset !important;
            animation: unset !important;
        }

        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }

        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important;;
            animation-duration: unset !important;
        }

        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            transition: unset !important;
            /*-webkit-transform: unset !important;*/
            -ms-transform: unset !important;
            -o-transform: unset !important;
            /*transform: unset !important;*/
        }

        #list-choose-test-modal .modal-dialog{
            margin-top: 0 !important;
        }

        .modal-backdrop.in {
            display: none !important;
        }

        #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: 360px;
            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;
        }
        .temp_name {
            font-size: 14px !important;
            font-weight: 700;
            margin: 0 10px;
        }
        .modal-body{
            max-height: 460px;
            overflow: auto;
        }

        #item_vuelist .message .container-btn-quick-reply {
            display: flex;
            flex-flow: row wrap;
            align-content: space-between;
            justify-content: space-between;
            padding: 0 10px;
        }

        #item_vuelist .message .container-btn-quick-reply .btn-quick-reply {
            margin-top: 8px !important;
            width: 110px;
            height: auto;
            background-color: #9A9FB2;
            border-radius: 10px;
            color: #FFFFFF;
        }

        #item_vuelist .message .container-btn-quick-reply .btn-quick-reply:nth-child(2n) {
            page-break-after: always;
            break-after: always;
        }

        #item_vuelist .message .question_wap .answer_button_2{
            display: flex;
            flex-flow: row wrap;
            align-content: space-between;
            justify-content: space-between;
            width: 95%;
            margin: 10px auto;
            padding-bottom: 10px;
        }

        #item_vuelist .message .question_wap .answer_button_2 p{
            width: 47%;
            margin-bottom: 10px;
            height: auto;
            word-wrap: break-word;
        }

        #item_vuelist .message .question_wap .answer_button_2 p:nth-child(1n) {
            page-break-after: always;
            break-after: always;
        }

        #item_vuelist .message .question_wap .button_type_image{
            position: relative;
        }

        #item_vuelist .message .question_wap .button_type_image p.buttons_title{
            top: 10px;
            left: 10px;
            padding: 3px 10px;
            border-radius: 10px;
        }

        #item_vuelist .message .question_wap .button_type_image p.buttons_content{
            bottom: 15px;
            transform: translate(-50%, 0);
            left: 50%;
            padding: 7px;
            width: 85%;
            text-align: center;
            border-radius: 10px;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <input type="hidden" id="scenario_id" value="{{ $scenario->id }}">
        <section class="messagestep" id="item_vuelist" v-cloak>
            <h2 style="font-size: 23px; color: #222222; font-weight: normal; padding: 10px 10px 10px 0">
                【{{ $scenario->name }}】ステップ配信メッセージ</h2>
            <div class="list-step">
                <div class="step" style="clear: both; margin-bottom: 30px" v-for="(step, indexStep) in list_step">
                    <div class="header-step">
                        <div class="left col-auto">
                            <div style="height: 100%; display: flex; align-items: center">
                                <div class="step_stt">@{{ indexStep + 1 }}通目 </div>
                                <div v-if="step.delay_type == 1">ステップ開始時</div>
                                <div v-else-if="step.delay_type == 2">ステップ開始から@{{ step.start_time_format_jp }}後</div>
                                <div v-else-if="step.delay_type == 0">ステップ開始から@{{ step.start_day }}日後@{{ step.start_time_format }}</div>
                            </div>
                            <div class="btn_action_step">
                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-three-dots" viewBox="0 -2 16 16">
                                    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
                                </svg>
                                <div class="action_step">
                                    <div>
                                        <a style="cursor: pointer" @click="editScenarioStep(step)">編集</a>
                                    </div>
                                    <div>
                                        <a style="cursor: pointer" v-on:click="showModalPreview(step.step_message)">プレビュー</a>
                                    </div>
                                    <div>
                                        <a style="cursor: pointer" v-on:click="sendStepMessageTemplate(step.id)">テスト配信</a>
                                    </div>
                                    <div>
                                        <a style="color: rgba(244,67,54,1);cursor: pointer" @click="deleteScenarioStep(step.id)">削除</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <button style="font-size: 16px; padding: 4px 15px; background-color: rgba(125,145,149,1); color: white;font-size: 16px"
                                    class="btn btn-secondary" :id="'btn-setting-scenario-'+indexStep"
                                    @click="showSettingScenarion(indexStep)">詳細設定 <span
                                        class="glyphicon glyphicon-chevron-down"></span>
                            </button>

                            <a class="btn btn-primary"
{{--                               :href="'/basic/step-message/create/'+step.scenario_id+'/'+step.id"--}}
                                :href="'/basic/template-v2/add-template?template_group_id='+ step.id + '&action_type=scenario&scenario_id=' + step.scenario_id + '&is_new=1'"
                            >
                                メッセージ追加
                            </a>

                            <a style="cursor: pointer" @click="confirmAddTemplateToStepMessage(step.id)"  class="btn btn-primary">
                                テンプレートから追加
                            </a>
                            <span style="display: inline-block; margin-left: 1%;font-size: 16px">配信済 <a :href="'/scenario-users?scenarioId='+step.scenario_id+'&stepId='+step.id">@{{ step.send_count }}人</a></span>
                        </div>
                    </div>
                    <div class="setting-scenario-step" :id="'setting-scenario-step-'+indexStep">
                        <div class="item-option" style="width: 270px">
                            <label>送信名変更</label>
                            <div class="chat-info" @click="showModalProfile(step.profile_id, step.id, indexStep)">
                                <span class="bot_info"><img
                                            :src="step.profile_bot.avt_path ? step.profile_bot.avt_path : '/images/8.png'"
                                            width="25px"
                                            style="margin-right: 5px">@{{ step.profile_bot.nick_name }}</span>
                                <i class="glyphicon glyphicon-chevron-right"></i>
                            </div>
                        </div>
                        <div class="item-option" style="width: 230px; margin-left: 20px">
                            <label>絞り込み</label>
                            <div class="filter-tag">
                                <button class="btn btn-primary" style="width: 100%; font-weight:bold" v-on:click="showModalFilter(step.id, indexStep)">
                                    <span v-if="step.has_filter">設定済み</span>
                                    <span v-else>未設定（全員）</span>
                                </button>
                            </div>
                        </div>
                        <div class="item-option" style="margin-left: 20px">
                            <label>リッチメニュー変更</label>
                            <div class="richmenu">
                                <select name="rich_menu_id" @change="saveSettingRichmenu($event, step.id, indexStep)"
                                        style="border: 1px solid #80808045;border-radius: 4px;background-color: white;padding: 6px 10px;width: 100%">
                                    <option value="">指定しない</option>
                                    @foreach($richMenus as $rich)
                                        <option value="{{$rich->id}}"
                                                :selected="step.rich_menu_id == '{{$rich->id}}'">{{$rich->name}}</option>
                                    @endforeach
                                    <option value="-1" :selected="step.rich_menu_id == -1">取り消し</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="content-step" v-if="step.step_message.length > 0">
                        <div class="row-item" v-for="(item, indexStepMessage) in step.step_message">
                            <div class="left-item">
                                <div class="icon-stt">
                                    <span>メッセージ@{{ indexStepMessage + 1 }}</span>
                                </div>
                                <span style="padding: 5px 15px !important;width: 95px" class="taiou_gry" v-if="item.category_id >= 0">自動編集</span>
                                <div class="content-template" v-if="item.type == 'text'">
                                    @{{item.content|shortContent}}
                                    <div style="margin-top: 10px;text-align: left">
                                        <span v-if="item.rich_menu_id" class="flag-rich">
                                            <span v-if="item.rich_menu_id != -1">
                                            @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                            </span>
                                            <span v-if="item.rich_menu_id == -1">
                                                リッチメニュー解除
                                            </span>
                                        </span>
                                    </div>
                                </div>
                                <div class="content-template" v-else-if="item.type == 'image'">
                                    <div class="media">
                                        <div class="media-body vertical-align-middle" style="width: 50%">
                                            <p><span class="taiou_gry">【画像】</span></p>
                                            <div style="margin-top: 10px">
                                    <span v-if="item.rich_menu_id" class="flag-rich">
                                        <span v-if="item.rich_menu_id != -1">
                                            @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                        </span>
                                        <span v-if="item.rich_menu_id == -1">
                                            リッチメニュー解除
                                        </span>
                                    </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="content-template" v-else-if="item.type == 'stamp'">
                                    <div class="media">
                                        <div class="media-body vertical-align-middle" style="width: 50%">
                                            <p><span class="taiou_gry">【スタンプ】</span></p>
                                            <div style="margin-top: 10px">
                                     <span v-if="item.rich_menu_id" class="flag-rich">
                                        <span v-if="item.rich_menu_id != -1">
                                            @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                        </span>
                                        <span v-if="item.rich_menu_id == -1">
                                            リッチメニュー解除
                                        </span>
                                    </span>
                                            </div>
                                        </div>
                                        <div class="media-right">
                                            <img :src="'https://stickershop.line-scdn.net/stickershop/v1/sticker/'+item.content.split('_')[1]+'/ANDROID/sticker.png'"
                                                 alt="template-img" style="max-width: 100px;">
                                        </div>
                                    </div>
                                </div>
                                <div class="content-template" v-else-if="item.type == 'question'">
                                    <span class="taiou_gry">【質問】</span>
                                    @{{item.content|shortContent}}
                                    <div style="margin-top: 10px;text-align: left">
                                     <span v-if="item.rich_menu_id" class="flag-rich">
                                         <span v-if="item.rich_menu_id != -1">
                                             @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                         </span>
                                         <span v-if="item.rich_menu_id == -1">
                                             リッチメニュー解除
                                         </span>
                                     </span>
                                    </div>
                                </div>
                                <div class="content-template" v-else-if="item.type == 'form'">
                                    <span class="taiou_gry">カルーセル </span>
                                    <span v-if="item.type_button == 4">
                                        <span v-if="item.flag_type_content_quick_reply == 1">@{{item.content|shortContent}}</span>
{{--                                        <span v-if="item.flag_type_content_quick_reply == 2">--}}
{{--                                            --}}
{{--                                        </span>--}}
                                    </span>
                                    <span v-else>@{{item.btn_template.text|shortContent}}</span>
                                    <div style="margin-top: 10px;text-align: left">
                                     <span v-if="item.rich_menu_id" class="flag-rich">
                                         <span v-if="item.rich_menu_id != -1">
                                             @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                         </span>
                                         <span v-if="item.rich_menu_id == -1">
                                             リッチメニュー解除
                                         </span>
                                     </span>
                                    </div>
                                </div>
                                <div class="content-template" v-else-if="item.type == 'location'">
                                    <span class="taiou_gry">【位置情報】</span>
                                    @{{item.content|shortContent}}
                                    <div style="margin-top: 10px;text-align: left">
                                     <span v-if="item.rich_menu_id" class="flag-rich">
                                         <span v-if="item.rich_menu_id != -1">
                                             @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                         </span>
                                         <span v-if="item.rich_menu_id == -1">
                                             リッチメニュー解除
                                         </span>
                                     </span>
                                    </div>
                                </div>
                                <div class="content-template" v-else-if="item.type == 'introduction'">
                                    <span class="taiou_gry">【紹介】</span>
                                    (@{{item.introduction.friend_name|covertLineId}})
                                    @{{item.content|shortContent}}
                                    <div style="margin-top: 10px;text-align: left">
                                    <span v-if="item.rich_menu_id" class="flag-rich">
                                        <span v-if="item.rich_menu_id != -1">
                                            @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                        </span>
                                        <span v-if="item.rich_menu_id == -1">
                                            リッチメニュー解除
                                        </span>
                                    </span>
                                    </div>
                                </div>
                                <div class="content-template" v-else-if="item.type == 'video'">
                                    <span class="taiou_gry">動画</span>
                                    <div style="margin-top: 10px;text-align: left">
                                     <span v-if="item.rich_menu_id" class="flag-rich">
                                         <span v-if="item.rich_menu_id != -1">
                                             @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                         </span>
                                         <span v-if="item.rich_menu_id == -1">
                                             リッチメニュー解除
                                         </span>
                                     </span>
                                    </div>
                                </div>
                                <div class="content-template" v-else-if="item.type == 'voice'">
                                    <p class="text-left taiou_gry">【音声】</p>
                                    <div style="margin-top: 10px;text-align: left">
                                     <span v-if="item.rich_menu_id" class="flag-rich">
                                         <span v-if="item.rich_menu_id != -1">
                                             @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                         </span>
                                         <span v-if="item.rich_menu_id == -1">
                                             リッチメニュー解除
                                         </span>
                                     </span>
                                    </div>
                                </div>
                                <div class="content-template" v-else-if="item.type == 'group'">
                                    <div>
                                        <span class="taiou_gry">メッセージパック</span>
                                        @{{item.name|shortContent}}
                                    </div>
                                </div>
                            </div>
                            <div class="right-item btn_action_step">
                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-three-dots" viewBox="0 -2 16 16">
                                    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
                                </svg>
                                <div class="action_step">
                                    <div>
                                        <!-- <a v-if="item.type != 'group'"
                                           :href="'/basic/step-message/edit/'+step.id+'/'+item.id"
{{--                                            :href="'/basic/template-v2/add-template?template_group_id='+ step.id + '&action_type=scenario&scenario_id=' + step.scenario_id + '&template_child_id=' + item.id"--}}
                                        >
                                            編集
                                        </a> -->
                                        <a v-if="item.type != 'group'"
                                        :href="'/basic/template-v2/add-template?template_group_id='+ step.id + '&action_type=scenario&scenario_id=' + step.scenario_id + '&template_child_id=' + item.id">
                                            編集
                                        </a>

                                        <a v-else
                                               :href="'/basic/scenario/pack-template/show/'+step.scenario_id+'/'+item.id+'?step_id='+step.id"
                                        >
                                            編集
                                        </a>
                                    </div>
                                    <div>
                                        <a style="cursor: pointer"
                                           v-on:click="showModalSortStep(step.step_message, step.id, indexStep)">並べ替え</a>
                                    </div>
                                    <div>
                                        <a style="color: rgba(244,67,54,1);cursor: pointer" v-on:click="deleteItem(step.id, item.id)">削除</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-step" style="background-color: #fff;" v-else>
                        <div class="row-item text-center"
                             style="margin: 0 -15px; font-size: 18px; background-color: #F2F2F2; justify-content: center; border-radius: 10px; color: #51595C; line-height: 40px">
                            メッセージが登録されていません
                        </div>

                    </div>
                    <div class="col-xs-12" style="margin-top: 40px" v-if="(indexStep + 1) == (list_step.length)">
                        <div class="action-add-step" style="text-align: center; margin-top: 20px">
                            <button class="btn btn-default" @click="editScenarioStep()">
                                配信タイミング追加
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade bd-example-modal-lg modal-edit-step" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content" style="padding: 50px 100px; overflow: auto; position: relative">
                        <span @click="closeModalScenarioStep()" class="close-modal-scenario-step"
                              style="font-size: 30px; position: absolute; top: 0; right: 15px; cursor: pointer"><i
                                    class="fas fa-times"></i></span>
                        <h2 class="text-center" style="font-weight: bold;">配信タイミング</h2>
                        <form style="margin-top: 40px" id="frm_step">
                            <div class="row">
                                <div class="col-xs-12" id="option-step">
                                    <button class="btn" type="button" style="font-weight: bold;"
                                            v-bind:class="{ active: data_step.delay_type == 1 }"
                                            @click="chooseDelayType(1)" data-type="1">ステップ開始直後
                                    </button>
                                    <button class="btn" type="button" style="font-weight: bold;"
                                            v-bind:class="{ active: data_step.delay_type == 0 }"
                                            @click="chooseDelayType(0)" data-type="0">日時で指定
                                    </button>
                                    <button class="btn" type="button" style="font-weight: bold;"
                                            v-bind:class="{ active: data_step.delay_type == 2 }"
                                            @click="chooseDelayType(2)" data-type="2">経過時間で指定
                                    </button>
                                    <input type="hidden" name="delay_type" v-model="data_step.delay_type">
                                    <input type="hidden" name="scenario_id" value="{{ $scenario->id }}">
                                    <input type="hidden" name="bot_id" value="{{ $scenario->bot_id }}">
                                    <input type="hidden" name="id" v-model="data_step.id">
                                </div>
                            </div>
                            <div class="content-option-2"
                                 style="background-color: rgba(242,242,242,1); padding: 15px 50px; margin-top: 30px"
                                 v-if="data_step.delay_type == 0 || data_step.delay_type == 2">
                                <p style="margin-bottom: 4px">ステップ開始時からの経過日数と時間で配信タイミングを指定します</p>
                                <p style="margin-bottom: 10px">（0日後はステップ開始当日を指します）</p>
                                <div style="display: inline-block;" v-if="data_step.delay_type == 0">
                                    <label style="display:flex; align-items: center">
                                        <input style="width: 70px" type="text" v-model="data_step.start_day"
                                               name="start_day" class="form-control">日後
                                    </label>
                                </div>
                                <div style="display: inline-block; margin-left: 5px" v-if="data_step.delay_type == 0">
                                    <label style="display:flex; align-items: center">
                                        の<input class="form-control" name="start_time" type="time"
                                                v-model="data_step.start_time"  style="width: 135px;">に配信
                                    </label>
                                </div>
                                <div style="display: inline-block; margin-left: 5px" v-if="data_step.delay_type == 2">
                                    <label style="display:flex; align-items: center">
                                        ステップ開始から<input name="start_time" style="width: 135px;" class="form-control" type="time" :value="data_step.start_time"
                                                       v-model="data_step.start_time">分後に配信
                                    </label>
                                </div>
                            </div>
                            <div class="col-xs-12 text-center" style="margin-top: 30px">
                                <button @click="saveStepMessage()" type="button" class="btn"
                                        style="background-color: rgba(68,203,128,1); padding: 10px 35px; font-size: 18px; font-weight: bold">
                                    決定
                                </button>
                            </div>
                        </form>
                    </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;top: 30px !important;">
                            <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.length > 0" >
                                                    <li v-for="(template,key) in templates_item"
                                                        class="list-group-item visual-list-item">
                                                        <div class="checkbox" v-bind:style="(selected_template == key) ? 'background: #F4FBF2' : ''">
                                                            <label :for="'template_'+template.id">
                                                                <input type="radio" name="single_template_id"
                                                                       :id="'template_'+template.id"
                                                                       v-model="selected_template"
                                                                       :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="(selected_template==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="(selected_template==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">

                            <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">
                                            <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" style="margin-bottom: 20px;" v-for="(carousel,k) in item.buttons">

                                            <div class="question_wap">
                                                <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.startsWith('http') ? carousel.img_path  :  (( carousel.image_server ? carousel.image_server : '