@extends('layout.basic.main')
@section('title','リッチメニュー（編集）')
@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/menu_rich/new.css?v={{config("sns-line.version")}}" type="text/css">
    <style>

        .action-item .btn{
            padding: 4px 8px 6px;
            color: #51595C;
            font-size: 18px;
        }
        .style-text {
            font-weight: bold;
            font-size: 18px;
            padding: 7px 0 7px 15px;
            border-left: 7px solid #08BF5A;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .bor-title {
            /*border-left: 7px solid #08BF5A;*/
            /*padding: 7px 7px 7px 15px;*/
            font-size: 18px;
            /*margin-bottom: 12px;*/
            /*margin-top: 12px;*/
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        .bor-title .border-tt{
            width: 11px;
            height: 38px;
            background-color: #08BF5A;
            border-radius: 3px;
            margin-right: 15px;
        }

        .note-add-friend {
            font-weight: bold;
            border-radius: 5px;
            position: absolute;
            padding: 10px 15px;
            box-shadow: rgb(0 0 0 / 0.16) 0 3px 6px;
            display: none;
        }

        .triangle-new {
            display: inline-block;
            position: relative;
        }

        .triangle-new:before {
            left: -138px;
        }

        .triangle-new:before {
            display: block;
            position: absolute;
            top: 9px;
            width: 20px;
            height: 13px;
            font-size: 10px;
            /*content: "";*/
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-top: 15px solid #FFFFFF;
        }
        #note_new {
            top: -53px;
            left: 27px;
            min-width: 265px;
            font-size: 13px;
            background: #FFFFFF;
        }
        .triangle-note-1 {
            display: inline-block;
            position: relative;
        }

        .triangle-note-1:before {
            left: -109px;
        }

        .triangle-note-1:before {
            display: block;
            position: absolute;
            top: 9px;
            width: 20px;
            height: 13px;
            font-size: 10px;
            /*content: "";*/
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-top: 15px solid #FFFFFF;
        }
        #note_1 {
            top: -81px;
            left: 27px;
            min-width: 215px;
            font-size: 13px;
            background: #FFFFFF;
        }

        input[type='text']{
            height: 36px !important;
        }
        #menu-rich-form .custom-radio:checked + label:after{
            background-color: #08BF5A !important;
        }
        .input-cal{
            padding-left: 30px !important;
            border-radius: 5px;
            height: 34px;
            width: 242px !important;
        }
        .ic-cal-ip{
            position: absolute;
            left: 8px;
            top: 6px;
            color: rgba(190,190,190,1);
        }
        .box-preview{
            padding: 20px 30px 30px 30px;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;
            opacity: 1;
            margin-top: 15px;
        }
        #menu-rich-form .btn-sns-line-new{
            box-shadow: 0px 3px 0px #00000080;
        }
        .txt-number{
            border: 1px solid #51595C;
            border-radius: 50%;
            padding: 0px 7px 4px 7px;
        }
        h2{
            font-weight: bold;
        }
        input[type=radio][disabled] +label {
            cursor: no-drop;
        }
        .btn-action-richitem{
            border: none !important;
        }
        .bottomright {
            position: fixed;
            right: 0px;
            bottom: 15px;
            width: 28%;

        }
        .box_item_r{
            border: 2px solid #F4F6F7;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .box_item_r .btn-sns-line:hover{
            opacity: 1;
        }
        #menu_preview {
            max-width: 450px;
            /* justify-content: center; */
            align-items: center;
        }
        #menu_preview input[type="file"] {
            position: absolute;
            height: 100%;
            width: 100%;
            opacity: 0;
            top: 0;
            left: 0;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                @if(session('errors'))
                    <div class="alert alert-danger alert-dismissable fade in">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        <ul>
                            @foreach(session('errors') as $error)
                                <li>{!! $error !!}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if(session('success'))
                    @push('js')
                        <script type="application/javascript">
                            setTimeout(function () {
                                location.href = '/basic/qr_url'
                            }, 1000);
                        </script>
                    @endpush
                    <div class="alert alert-success alert-dismissable fade in">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        <ul>
                            <li>{!! session('success') !!}</li>
                        </ul>
                    </div>
                @endif
            </div>
            <div class="" id="menu-rich-form" v-cloak>
                <input type="hidden" value="" id="id">
                <div class="row">
                    <div class="col-sm-12">
                        <h2 style="font-size: 22px; font-weight: bold; padding: 10px 10px 18px 0">リッチメニュー編集</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-md-6">
                                <div>
                                    <label  style="margin-bottom: 5px; font-size: 16px">リッチメニュー名（管理用）</label>
                                    <span class="text-right" style="float: right">@{{settings.richMenuName.length}}/30文字</span>
                                </div>
                                <input type="text" name="richMenuName" id="richMenuName" placeholder=""
                                       data-vv-as="管理名"
                                       v-model="settings.richMenuName"
                                       v-validate="{required: true, max: 30}"
                                       class="form-control" aria-required="true" aria-invalid="false">
                                <small class="help-block text-danger" v-show="errors.has('richMenuName')">
                                    @{{ errors.first('richMenuName') }}
                                </small>
                            </div>
                            <div class="col-md-6">
                                <label style="font-size: 16px; margin-bottom: 5px" >フォルダ</label>
                                <select  class="form-control text-center my_class" v-model="settings.group_id"
                                         name="group_id" style="height: 36px;margin-bottom: 13px;border-color: #bbbbbb">
                                    <option value="0">未分類</option>
                                    <option  v-for="(item,index) in groups" :value="item.id">@{{ item.name }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="box_item_r">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group title-add-friend" style="display: flex; margin-bottom: 7px;">
                                                <div class="bor-title"><div class="border-tt"></div>初期表示</div>
                                                <div class="note-add-friend" id="note_new">
                                                    友だちがトーク画面を開いたときの <br>
                                                    リッチメニュー表示状態を設定します
                                                    <div class="triangle-new"></div>
                                                </div>
                                                <span style="font-size: 17px;margin-left: 25px;display: flex;vertical-align: middle;align-items: center;"><i id="toggle_note_new" style="color: #6C6C6C;background-color: #FFFFFF;cursor: pointer" class="fa fa-question-circle"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-bottom: 10px">
                                        <div class="col-md-2 d-flex" style="position: relative;padding-right: 0">
                                            <input type="radio" class="request_reservation custom-radio"
                                                   id="is_use_terms" name="status" value="1" v-model="settings.status">
                                            <label for="is_use_terms" class="font-weight-bold"
                                                   style="font-size: 15px">表示する</label>
                                        </div>
                                        <div class="col-md-3 d-flex" style="position: relative;padding-right: 0">
                                            <input type="radio" class="request_reservation custom-radio"
                                                   id="is_use_terms1" name="status" value="0" v-model="settings.status">
                                            <label for="is_use_terms1" class="font-weight-bold"
                                                   style="font-size: 15px">表示しない</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="bor-title" style="margin-top: 15px;margin-bottom: 15px"><div class="border-tt"></div>表示期間設定</div>

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-10">
                                            <div class=" d-flex" style="position: relative;padding-right: 0">
                                                <input type="radio" class="request_reservation custom-radio"
                                                       id="setting" name="setting" value="0"
                                                       v-model="settings.time_display"
                                                >
                                                <label for="setting" class="font-weight-bold"
                                                       style="font-size: 15px">利用しない（無期限）</label>
                                            </div>
                                            <div class="d-flex" style="position: relative;padding-right: 0; margin-top: 15px; margin-bottom: 15px">
                                                <input type="radio" class="request_reservation custom-radio"
                                                       v-model="settings.time_display"
                                                       :disabled="settings.status_line == 1"
                                                       id="setting1" name="setting" value="1">
                                                <label for="setting1" class="font-weight-bold"
                                                       style="font-size: 15px">利用する</label>
                                            </div>
                                            <div v-show="settings.time_display == 1">
                                                <div class="d-flex" style="align-items: center; margin-left: 25px" >
                                                    <span>開始 </span>
                                                    <div class="input-group box-date"  style="position: relative; margin: 0 10px ">
                                                        <input class="input-cal datepicker start_date"
                                                               type="text"
                                                               {{--                                           readonly="readonly"--}}
                                                               v-model="settings.start_date"
                                                               placeholder="">
                                                        <span class="ic-cal-ip"><i class="far fa-calendar"></i></span>
                                                    </div>
                                                    <div class="input-group box-date"  style="position: relative; margin: 0 10px ">
                                                        <input class="timepicker form-control input-cal start_time" name="step_to_time" style="width: 100px !important; border-radius: 4px; background-color: white"
                                                               readonly="readonly"
                                                               type="text"
                                                               v-model="settings.start_time"
                                                               value="00:00">
                                                        <span class="ic-cal-ip" style="z-index: 100"><i class="fal fa-clock"></i></span>
                                                    </div>
                                                </div>
                                                <div class="d-flex" style="align-items: center; margin-left: 25px; margin-top: 10px">
                                                    <span>終了 </span>
                                                    <div class="input-group box-date"  style="position: relative; margin: 0 10px ">
                                                        <input class="input-cal datepicker end_date"
                                                               type="text"
                                                               {{--                                           readonly="readonly"--}}
                                                               v-model="settings.end_date"
                                                               placeholder="">
                                                        <span class="ic-cal-ip"><i class="far fa-calendar"></i></span>
                                                    </div>
                                                    <div class="input-group box-date"  style="position: relative; margin: 0 10px ">
                                                        <input class="timepicker form-control input-cal end_time" name="step_to_time" style="width: 100px !important; border-radius: 4px; background-color: white"
                                                               readonly="readonly"
                                                               type="text"
                                                               v-model="settings.end_time"
                                                               value="23:59">
                                                        <span class="ic-cal-ip" style="z-index: 100"><i class="fal fa-clock"></i></span>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="row" >
                            <div class="col-md-12">
                                <div class="box_item_r">
                                    <div class="row">
                                        <div class="col-md-12" >
                                            <div class="bor-title" style=""><div class="border-tt"></div>画像選択</div>
                                            <div style="margin-bottom: 7px; margin-top: 23px ; display: flex;align-items: flex-start;">
                                                <label for="media_client_dropinput">
                                                    <span class="btn btn-sns-line btn-sns-line-new btn-sns-line-primary" style="background-color: #5799DB;width: 128px; "> @{{ settings.imageUrl ? '画像変更' : 'アップロード' }}
                                                   </span>
                                                    <input accept="image/jpeg|image/png" class="mdBtnUploadInput hidden"
                                                           name="file" type="file" id="media_client_dropinput"
                                                           ondragover="drag()" ondrop="drop()"
                                                           v-on:change="openUploadFile(event)">
                                                </label>
                                                <a href="https://rakko.tools/tools/67/" target="_blank"
                                                   class="btn btn-sns-line btn-sns-line-warning btn-sns-line-new"
                                                   style="padding: 6px 10px;width: 128px; margin-left: 5px">サイズ調整</a>

                                            </div>
                                            <div style="background: #f2f2f2;border-radius: 5px; padding: 15px; margin-top: 15px; max-width: 435px">
                                                <p style="font-size: 13px; ">アップロード可能な画像サイズ</p>
                                                <p style="font-size: 13px">大　横) 2,500px　縦)1,686px</p>
                                                <p style="font-size: 13px">小　横) 2,500px　縦)843px</p>
                                                <p style="font-size: 13px">上記サイズ以外は「サイズ調整」より調整してください。</p>
                                            </div>
                                            <div v-show="settings.imageUrl">
                                                <div class="bor-title" style="margin-top: 20px;"><div class="border-tt"></div>レイアウト選択</div>
                                                <div class="" style="font-size: 14px; margin-bottom: 10px;margin-top: 10px;">
                                                    ※保存後に変更した場合、設定されているアクション・タップ回数詳細がリセットされます
                                                </div> <button  v-if="settings.imageUrl" class="btn btn-sns-line btn-sns-line-new btn-sns-line-success" type="button"
                                                         data-toggle='modal'  data-target='#modalChooseLayout'

                                                         style="width: 128px">選択</button>
                                                <button  v-else class="btn btn-sns-line btn-sns-line-new btn-sns-line-success" type="button"
                                                         disabled
                                                         style="width: 128px">選択</button>
                                            </div>

                                            <div class="bor-title" style="margin-top: 20px;"><div class="border-tt"></div>メニューバーのテキスト</div>

                                            <div style="width: 50%">
                                                <div class="text-right">@{{settings.titleMenu.length}}/14文字</div>
                                                <input type="text" name="titleMenu" placeholder="メニュー"
                                                       data-vv-as="メニューバーのテキスト" class="form-control"
                                                       v-model="settings.titleMenu"
                                                       v-validate="{required: true, max: 14}"
                                                       aria-required="true" aria-invalid="false">
                                                <small class="help-block text-danger" v-show="errors.has('titleMenu')">
                                                    @{{ errors.first('titleMenu') }}
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row"  v-show="settings.imageUrl">
                            <div class="col-md-12">
                                <div class="box_item_r">
                                    <div class="row" >
                                        <div class="col-md-12">
                                            <div class="bor-title" style=""><div class="border-tt"></div>アクション設定</div>
                                            <div  style="font-size: 14px; margin-bottom: 10px;margin-top: 10px;">
                                                ※保存後に変更した場合、タップ回数詳細がリセットされます <br>
                                                ※友だちアクションのタップ回数は対象外となります。
                                            </div>
                                            <div style="margin-bottom: 15px ">
                                                <button v-if="settings.richMenuItems.length < 20" class="btn btn-sns-line btn-sns-line-new btn-sns-line-success"
                                                        @click="addNewItem(-1, 1)" style="width: 128px">
                                                    エリア追加
                                                </button>
                                                <button v-else class="btn btn-sns-line btn-sns-line-new btn-sns-line-success"
                                                        disabled style="width: 128px">
                                                    エリア追加
                                                </button>
                                            </div>

                                            <div class="panel panel-default"
                                                 v-for="(item, key) in settings.richMenuItems">
                                                <div class="panel-heading">
                                                    <div class="title-item" style="margin-left: 6px">
                                                        <b style="color: #51595c;">エリア@{{ key + 1 }}</b>
                                                    </div>
                                                    <div class="action-item">
                                                        <button data-toggle="modal" data-target="#pop-up-area"
                                                                class="btn btn-default btn-action-richitem"
                                                                style="padding:5px 9px 6px; font-size: 18px"
                                                                @click="openPopup(key)">
                                                            <i class="fas fa-pencil"></i>
                                                        </button>
                                                        <button class="btn btn-default btn-action-richitem"
                                                                @click="movePosition(key, 'down')">
                                                            <i class="far fa-chevron-circle-down"></i>
                                                        </button>
                                                        <button class="btn btn-default btn-action-richitem"
                                                                @click="movePosition(key, 'up')">
                                                            <i class="far fa-chevron-circle-up"></i>
                                                        </button>
                                                        <button class="btn btn-default btn-action-richitem" style="padding: 4px 9px 6px;"
                                                                v-on:click="addNewItem(key, 2)">
                                                            <i class="fal fa-copy"></i>
                                                        </button>
                                                        <button class="btn btn-default btn-action-richitem" style="padding: 4px 9px 6px;"
                                                                @click="settings.richMenuItems.splice(key, 1)">
                                                            <i class="far fa-trash-alt"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="panel-body">
                                                    <div class="d-flex align-items-center mb-4">
                                                        <div class="label-item-richmenu">
                                                            エルメアクション
                                                        </div>
                                                        <div :class="item.list_action.length > 0 ? 'text-right' : 'text-left'" style="">
                                                            <button v-if="item.list_action.length == 0" @click="openSettingAction(item.action_id, key)" type="button" class="btn btn-sns-line btn-sns-line-warning">設定</button>
                                                            <a @click="openSettingAction(item.action_id, key)" style="font-weight: bold; color: rgba(87,153,219,1); text-decoration: underline; cursor: pointer" v-else>
                                                                <span v-if="item.list_action.length <= 3">編集</span>
                                                                <span v-else>その他@{{ item.list_action.length - 3 }}件編集</span>
                                                            </a>
                                                            <input type="hidden" name="action_id" :id="'action_id_'+key" v-model="item.action_id">
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3" v-if="item.list_action.length > 0" style="max-height: 125px; overflow: hidden;">
                                                        <div class="item-action"
                                                             v-for="(item, indexAction) in item.list_action">
                                                             @include('layout.modal_setting.label_action')
                                                                {{-- <span v-if="itemAction.type == 'tag'">【タグ】
                                                                    <span v-for="(itemTag, indexTag) in itemAction.list_tags">@{{  indexTag == 0 ? '' : ', ' }}@{{ itemTag.name }}</span>を<span
                                                                            v-if="itemAction.data.action == 1">つける</span><span
                                                                            v-else>はずす</span>
                                                                </span>
                                                            <span v-else-if="itemAction.type == 'scenario'">【ステップ】
                                                                    <span v-if="itemAction.data.action != 1">@{{ itemAction.data.scenario_name }}</span><span
                                                                        v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                                            <span v-else-if="itemAction.type == 'template'">【テンプレート】
                                                                    <span>@{{ itemAction.data.template_name }}</span>
                                                                </span>
                                                            <span v-else-if="itemAction.type == 'text'">【テキスト】
                                                                    <span>@{{ itemAction.data.content | shortContent }}</span>
                                                                </span>
                                                            <span v-else-if="itemAction.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="itemAction.data.action != 1">@{{ itemAction.data.richmenu_name }}表示</span><span
                                                                        v-else>表示を停止</span>
                                                                </span>
                                                            <span v-else-if="itemAction.type == 'remind'">【リマインド】<span>@{{ itemAction.data.remind_name }}</span></span>

                                                            <span v-else-if="itemAction.type == 'bookmark'">
                                                                <span class="action-title">【ブックマーク】</span>
                                                                <span v-if="itemAction.data.action == 1">ブックマークする</span>
                                                                <span v-else>ブックマークを外す</span>
                                                            </span>
                                                            <span v-else-if="itemAction.type == 'block'">
                                                                <span class="action-title">【ブロック・非表示】</span>
                                                                <span v-if="itemAction.data.action == 1">ブロックする</span>
                                                                <span v-if="itemAction.data.action == 2">ブロック解除</span>
                                                                <span v-if="itemAction.data.action == 3">表示</span>
                                                                <span v-if="itemAction.data.action == 4">非表示</span>
                                                            </span>
                                                            <span v-else-if="itemAction.type == 'compliant_status'">
                                                                <span class="action-title">【対応ステータス】</span>
                                                                <span v-if="itemAction.data.action == 1">@{{ itemAction.data.content }}をつける</span>
                                                                <span v-else> ステータスを外す</span>
                                                            </span>

                                                            <span v-else-if="itemAction.type == 'friend_info'">【友だち情報】
                                                                    <span v-show="itemAction.data.action == 1">登録情報を削除</span>
                                                                    <span v-show="itemAction.data.action == 2">
                                                                        <span v-show="itemAction.data.type == 1"><span
                                                                                    style="margin-right: 5px">@{{itemAction.data.name}}</span>(選択肢): @{{ itemAction.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="itemAction.data.type == 2"><span
                                                                                    style="margin-right: 5px">@{{itemAction.data.name}}</span>(記述): @{{ itemAction.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="itemAction.data.type == 3"><span
                                                                                    style="margin-right: 5px">@{{itemAction.data.name}}</span>(年月日): @{{ itemAction.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="itemAction.data.type == 6"><span
                                                                                    style="margin-right: 5px">@{{itemAction.data.name}}</span>(ポイント): @{{ itemAction.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                            <span v-show="itemAction.data.type == 6">
                                                                                <span v-show="itemAction.data.type == 6 && itemAction.data.action_content == 1">（上書き）</span>
                                                                                <span v-show="itemAction.data.type == 6 && itemAction.data.action_content == 2">（プラス）</span>
                                                                                <span v-show="itemAction.data.type == 6 && itemAction.data.action_content == 3">（マイナス）</span>
                                                                            </span>
                                                                        </span>
                                                                    </span> --}}
                                                        </div>
                                                    </div>
                                                    <div class="d-flex align-items-center mb-3">
                                                        <div class="label-item-richmenu">
                                                            友だちアクション
                                                        </div>
                                                        <div class="slt_option_item_richmenu">
                                                            <select class="form-control my_class"  @change="changeTypeOpenUrl($event, key)"  v-model="item.actionType">
                                                                <option value="">選択する</option>
                                                                <option value="RICH">リッチメニュー表示</option>
                                                                <option value="DELETE_RICH">リッチメニュー表示停止</option>
                                                                <option value="URL">ページを開く</option>
                                                                <option value="PHONE">電話をかけさせる</option>
                                                                <option value="TEXT">テキストを送らせる</option>
                                                                <option value="EMAIL">メールを送らせる</option>
                                                                <option value="ACCOUNT_LINE">LINE公式アカウント紹介</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex align-items-center mb-3" v-if="item.actionType == 'PHONE'">
                                                        <div class="label-item-richmenu">

                                                        </div>
                                                        <div class="slt_option_item_richmenu">
                                                            <input type="text" name="phone" v-model="item.content_open_url" class="form-control" placeholder="電話番号">
                                                        </div>
                                                    </div>
                                                    <div class="d-flex align-items-center mb-3" v-if="item.actionType == 'TEXT'">
                                                        <div class="label-item-richmenu">

                                                        </div>
                                                        <div class="slt_option_item_richmenu">
                                                            <input type="text" name="text" v-model="item.content_open_url" class="form-control" placeholder="テキスト入力">
                                                        </div>
                                                    </div>

                                                    <div class="d-flex align-items-center mb-3" v-if="item.actionType == 'RICH'">
                                                        <div class="label-item-richmenu">

                                                        </div>
                                                        <div class="slt_option_item_richmenu">
                                                            <select v-model="item.content_open_url" class="form-control my_class">
                                                                <option value="" disabled hidden  :selected="item.content_open_url == ''">選択</option>
                                                                <option v-for="richmenu in item.data_open_url" :value="richmenu.id" :selected="richmenu.id == item.content_open_url">@{{ richmenu.name }}</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="d-flex align-items-center mb-3" v-if="item.actionType == 'EMAIL'">
                                                        <div class="label-item-richmenu">

                                                        </div>
                                                        <div class="slt_option_item_richmenu">
                                                            <input type="email" name="email" v-model="item.content_open_url" class="form-control" placeholder="メールアドレス">
                                                        </div>
                                                    </div>

                                                    <div class="d-flex align-items-center mb-3" v-if="item.actionType == 'ACCOUNT_LINE'">
                                                        <div class="label-item-richmenu">

                                                        </div>
                                                        <div class="slt_option_item_richmenu">
                                                            <input type="text" placeholder="LINE ID" name="account_line" v-model="item.content_open_url" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="d-flex align-items-center mb-3" v-if="item.actionType == 'URL'">
                                                        <div class="label-item-richmenu">

                                                        </div>
                                                        <div class="slt_option_item_richmenu">
                                                            <select name="type_open_url" v-model="item.type_open_url" class="form-control my_class" @change="changeOpenUrl($event, key)">
                                                                <option value="" disabled hidden>選択</option>
                                                                <option value="0">URLを開く</option>
                                                                <option value="1">フォーム作成</option>
                                                                <option value="2">商品リンク</option>
                                                                <option value="3">イベント予約</option>
                                                                {{--                                                                <option value="4">サイトスクリプト</option>--}}
                                                                <option value="5">コンバージョン</option>
                                                                <!-- <option value="6">カレンダー予約</option> -->
                                                                <option value="8">サロン・面談予約</option>
                                                                <option value="9">レッスン予約</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex align-items-center mb-3" v-if="item.actionType == 'URL'">
                                                        <div class="label-item-richmenu"></div>
                                                        <div class="slt_option_item_richmenu">
                                                            <input type="text" name="url" placeholder="https://example.com"
                                                                   v-model="item.content_open_url"
                                                                   v-if="item.type_open_url === '0' || item.type_open_url === 0" class="form-control">
                                                            <select v-else-if="item.type_open_url == 1" v-model="item.content_open_url" class="form-control my_class">
                                                                <option v-for="form in item.data_open_url" :value="form.id" :selected="form.id == item.content_open_url">@{{ form.name }}</option>
                                                            </select>

                                                            <div v-else-if="item.type_open_url == 2">
                                                                <select @change="chooseBill($event, key)" v-model="item.content_open_url" class="form-control my_class">
                                                                    <option v-for="form in item.data_open_url"
                                                                            v-show="form.is_product_new == 1 || (form.id == item.content_open_url)"
                                                                            :value="form.id" :selected="form.id == item.content_open_url">@{{ form.name }}</option>
                                                                </select>

                                                                <select v-model="item.type_bill_product" class="form-control my_class" style="margin-top: 15px">
                                                                    <option v-for="(type_bill, index_bill) in item.list_type_bill" :value="index_bill" :selected="index_bill == item.type_bill_product">@{{ type_bill }}</option>
                                                                </select>
                                                            </div>
                                                            <select v-else-if="item.type_open_url == 3" v-model="item.content_open_url" class="form-control my_class">
                                                                <option v-for="form in item.data_open_url" :value="form.id" :selected="form.id == item.content_open_url">@{{ form.title }}</option>
                                                            </select>
                                                            {{--                                                            <select v-else-if="item.type_open_url == 4" v-model="item.content_open_url" class="form-control my_class">--}}
                                                            {{--                                                                <optgroup v-for="form in item.data_open_url" :label="form.name">--}}
                                                            {{--                                                                    <option v-for="option in form.site_script_u_r_l" :value="option.id" :selected="option.id == item.content_open_url">--}}
                                                            {{--                                                                        @{{ option.url }}--}}
                                                            {{--                                                                    </option>--}}
                                                            {{--                                                                </optgroup>--}}
                                                            {{--                                                            </select>--}}
                                                            <select v-else-if="item.type_open_url == 5" v-model="item.content_open_url" class="form-control my_class">
                                                                <option v-for="form in item.data_open_url" :value="form.id" :selected="form.id == item.content_open_url">@{{ form.name }}</option>
                                                            </select>

                                                            <select v-else-if="item.type_open_url == 6" v-model="item.content_open_url" class="form-control my_class">
                                                                <option v-for="calendar in item.data_open_url" :value="calendar.id" :selected="calendar.id == item.content_open_url">@{{ calendar.manager_name }}</option>
                                                            </select>

                                                            <select v-else-if="item.type_open_url == 8" v-model="item.content_open_url" class="form-control my_class">
                                                                <option v-for="calendar in item.data_open_url" :value="calendar.id" :selected="calendar.id == item.content_open_url">@{{ calendar.manager_name }}</option>
                                                            </select>

                                                            <select v-else-if="item.type_open_url == 9" v-model="item.content_open_url" class="form-control my_class">
                                                                <option v-for="calendar in item.data_open_url" :value="calendar.id" :selected="calendar.id == item.content_open_url">@{{ calendar.calendar_name }}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex align-items-center mb-3">
                                                        <div class="label-item-richmenu"></div>
                                                        <div class="text-danger" :id="'error_richitem_'+key"></div>
                                                    </div>
                                                </div>
                                                <div class="modal fade" role="dialog" :id="'keywordModal' + key">
                                                    <div class="modal-dialog modal-lg">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close"
                                                                        data-dismiss="modal">&times;
                                                                </button>
                                                                <h4 class="modal-title diff">キーワード</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                <table class="" border="1">
                                                                    <thead class="mdCMN03TblHead">
                                                                    <tr>
                                                                        <th></th>
                                                                        <th style="width: 20%;">代表キーワード</th>
                                                                        <th>内容</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody class="mdCMN03TblBody">
                                                                    <tr v-for="(itemReply, index) in settings.itemReply">
                                                                        <td>
                                                                            <div class="MdBtn03 mdBtn03S">
                                                                                <input class="mdBtn03Txt" type="button"
                                                                                       value="選択する"
                                                                                       v-on:click="setKeyword(itemReply.id, itemReply.keyword[0].keyword, key)">
                                                                            </div>
                                                                        </td>
                                                                        <td>@{{ itemReply.keyword[0] ?
                                                                            itemReply.keyword[0].keyword : '' }}
                                                                        </td>
                                                                        <td>@{{ itemReply.content }}</td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default"
                                                                        data-dismiss="modal">閉じる
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="row" v-show="settings.imageUrl">
                            <div class="col-md-12 ">
                                <p>
                                    <button class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg"  v-on:click="save()"
                                            style="width: 160px; margin-bottom: 20px">保存</button>
                                </p>
                                <p>
                                    <a href="/basic/rich-menu" class="btn btn-sns-line  btn-sns-line-lg btn-sns-line-dark"  style="width: 120px" >戻る</a>
                                </p>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-4 bottomright" v-show="settings.imageUrl">
                        <div class="box-preview">
                            <div id="menu_preview">
                                <input accept="image/jpeg|image/png" class="mdBtnUploadInput "
                                       name="file" type="file" id="media_client_dropinput_1"
                                       ondragover="drag()"
                                       v-on:change="openUploadFile(event)">

                                <div class="text-center" style="margin-bottom: 10px"><b>プレビュー</b></div>
                                <div class="menu_preview_menu">
                                    <div class="canvas-wrapper">
                                        <canvas width="492" height="332" id="SrcCanvasPreview"></canvas>
                                        <img id="imageUpload">
                                    </div>
                                </div>
                                <label for="media_client_dropinput_1" class="menu_preview_bar">
                                    <div class="menu_preview_bar_sub">
                                        <img src="https://d1nhtjid4lgi9y.cloudfront.net/img/fa_keyboard.png">
                                    </div>
                                    <div class="menu_preview_bar_main">
                                        <span style="margin-top: 14px">@{{(settings.titleMenu.length >0) ? settings.titleMenu : 'メニュー'}}</span>
                                    </div>
                                </label>
                            </div>
                        </div>

                    </div>

                </div>


                <div class="modal fade" id="modalChooseLayout"
                     tabindex="-1" role="dialog"
                     aria-labelledby="chatSettingStatus">
                    <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" 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>
                                <h2 class="text-center">レイアウト選択</h2>

                            </div>
                            <div class="modal-body"  style="max-height: 65vh;overflow-y: auto;overflow-x: hidden;">
                                <div class="row "  style="width: 900px; margin-left: 28px" v-show="settings.layoutType == 'large'">
                                    <div class="">
                                        <div class="template-btn-wrapper" >
                                                <span class="template-btn" v-for="(item, key) in settings.layouts.large"
                                                      @click="changeLayout(item.numberBoxs, item.type, settings.layoutType)"
                                                >
                                                    <span class="btn btn-default"
                                                          v-bind:style="((key+1) ==  typeChoose)  ? 'background-color: #e6e6e6;border-color: #adadad;' : ''"
                                                    >
                                                        <img :id="'type_image_map_large_'+(key+1)" :src="'