@extends('layout.basic.main')
@section('title', empty($landingRecord) ? '流入アクション（作成）': (!empty($actionLanding) && $actionLanding == 'copy' ? '流入アクション（コピー）':'流入アクション（編集）'))

@push('css')
    <link rel="stylesheet" href="{{asset('css/qr_code/qr_code.css')}}?v={{config("sns-line.version")}}">
    <style>
        .text-danger{
            color: red;
        }
        #settingActionUrlModal #close_modal_action{
            line-height: 40px !important;
        }

        #settingActionUrlModal .ic-close{
            line-height: 15px !important;
            top: 5px !important;
        }

        .btn-success:hover{
            opacity: 0.7;
        }
        th span{
            color: white !important;
        }

        #tabs-detail-landing li {
            border-left: 0 !important;
            border-right: 0 !important;;
            border-top: 0 !important;;
            border-bottom: 1px solid #ccc;
            border-radius: 0;
            background-color: white;
        }

        #tabs-detail-landing li a {
            color: #51595C;
            font-weight: bold;
            padding: 0;
            margin: 0 25px 7px 0;
            padding: 0 2px;
            font-size: 15px;
        }

        #tabs-detail-landing li a:hover {
            background: #FFFFFF !important;
            opacity: 0.7;
        }

        #tabs-detail-landing li.active {
            background-color: unset !important;
            border-bottom: unset !important;
        }

        #tabs-detail-landing li.active a {
            border-top: 0;
            color: #08BF5A !important;
            border-bottom: 3px solid #08BF5A !important;
        }

        .tox-toolbar__primary {
            background: #F6F6F6 !important;
        }
    </style>
@endpush
@section('content')
    <h2 class="title-qr" style="font-size: 20px; color: #51595C; font-weight: bold; padding: 10px 10px 10px 0">流入アクション登録</h2>
    <form key="unique" action="{{(!empty(request()->id) && empty($actionLanding)) ? route('saveEditLanding', request()->id) : route('saveLanding')}}" method="post" id="app_qrcode" v-cloak>
        {{ csrf_field() }}
        <div class="show-name-qr row">
            <input type="hidden" name="actionLanding" @if(!empty($actionLanding)) value="{{ $actionLanding }}" @endif>
            <input type="hidden" name="codeLanding" @if(!empty($codeLanding)) value="{{ $codeLanding }}" @endif>
            <div class="col-sm-5">
                <div class="form-group">
                    <label class="style-text">流入アクション名（管理用）</label>
                    <div style="display: flex;">
                        <input style="background-color: #FFFFFF" class="form-control" type="text" v-validate="{required: true}"
                               data-vv-as="流入アクション名（管理用）" name="name"
                               value="{{!empty($landingRecord) ? $landingRecord->name : null}}" id="name-qr">
                            <div id="count_text_name" style="text-align: right;width: 90px;margin-top: 5px;font-weight: bold">0/20文字</div>
                    </div>
                    <div class="errors" id="name_qrcode_error"></div>
                    <span class="text-danger" v-show="errors.has('name')">@{{ errors.first('name') }}</span>
                </div>
            </div>
            <div class="col-sm-5" style="padding-right: 10px">
                <div class="form-group">
                    <label class="style-text">フォルダ</label>
                    <select name="category_id" id="folder-list" class="form-control my_class">
                        <option value="" {{ (empty($landingRecord) ||(!empty($landingRecord) && $landingRecord->category_id == null)) ? 'selected="selected"' : ''}}>未分類
                        </option>
                        @foreach($getFolder as $folder)
                            <option value="{{$folder->id}}"
                                    {{ $folderCookie == $folder->id ? 'selected="selected"' : '' }}
                            >{{$folder->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs col-sm-10" role="tablist" id="tabs-detail-landing" style="border-bottom: 3px solid #E8E8E8;">
            <li role="presentation" class="active" style="border-bottom: unset;text-align: center;margin-bottom: 0">
                <a @click="switchTabLanding('tab1')" id="show_tab1" href="#tab_1" aria-controls="home" role="tab" data-toggle="tab" style="border: unset;">基本設定</a>
            </li>
            <li role="presentation" class="" style="border-bottom: unset;text-align: center;margin-bottom: 0">
                <a @click="switchTabLanding('tab2')" id="show_tab2" href="#tab_2" aria-controls="profile" role="tab" data-toggle="tab" style="border: unset;">紹介時アクション</a>
            </li>
            <li role="presentation" class="" style="border-bottom: unset;text-align: center;margin-bottom: 0">
                <a @click="switchTabLanding('tab3')" id="show_tab3" href="#tab_3" aria-controls="profile" role="tab" data-toggle="tab" style="border: unset;">外部連携機能</a>
            </li>
        </ul>
        <div class="col-sm-12" style="padding: 0;background: #FFFFFF" id="tab1" v-show="tab == 'tab1'">
            <div class="action-for-qr row">
                <div class="area-group row col-sm-10">
                    <div class="form-group col-sm-12">
                        <div class="row" style="display: flex; align-items: center">
                            <div class="col-sm-6 style-text">
                                追加時アクション
                            </div>
                        </div>
                        <div class="row" style="display: flex; align-items: center;margin-top: 10px">
                            <div class="col-sm-2" style="padding-left: 0">
                                稼働回数
                            </div>
                            <div class="col-sm-10" style="margin-left: 20px">
                            <span style="display: inline-block">
                                <input type="radio" class="radio_action_type" id="action_1" name="action_type" value="1"
                                       @if((!empty($landingRecord) && $landingRecord->action_type == 1) || empty($landingRecord)) checked @endif>
                                <label for="action_1" class="font-weight-bold">1度のみアクション稼働</label>
                            </span>
                                <span style="display: inline-block; margin-left: 30px">
                                <input type="radio" class="radio_action_type" id="action_2" name="action_type" value="2" @if(!empty($landingRecord) && $landingRecord->action_type == 2) checked @endif>
                                <label for="action_2" class="font-weight-bold">何度でもアクション稼働</label>
                            </span>
                            </div>
                        </div>
                        <div class="row" style="display: flex;align-items: center; margin-top: 15px;padding: 0">
                            <div class="col-sm-2 title-left">
                                エルメアクション
                            </div>
                            <div class="col-sm-3">
                                <div style="overflow: auto">
                                    <input type="hidden" name="action_id" id="action_id" v-model="action_id">
                                    <a class="open-modal-action" style="float: right;cursor: pointer" v-if="list_action.length > 0">
                                        <span v-if="list_action.length <= 3" style="color: rgb(87, 153, 219);text-decoration: underline">編集</span>
                                        <span v-else style="color: rgb(87, 153, 219);text-decoration: underline">その他@{{ list_action.length - 3 }}件編集</span>
                                    </a>
                                    <button v-else class="btn btn-action open-modal-action" style="float: left" type="button">設定</button>
                                </div>

                            </div>
                        </div>
                        <div class="row" style="display: flex;align-items: center; margin-top: 15px">
                            <div class="col-sm-5" style="margin-left: 5px">
                                <div id="list-action">
                                    <p v-for="item in list_action" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                        @include('layout.modal_setting.label_action')
                                        {{-- <span v-if="item.type == 'tag'">【タグ】
                                                                        <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ', ' }}@{{ itemTag.name }}</span>を<span
                                                    v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                    </span>
                                        <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                        <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                    </span>
                                        <span v-else-if="item.type == 'template'">【テンプレート】
                                                                        <span>@{{ item.data.template_name }}</span>
                                                                    </span>
                                        <span v-else-if="item.type == 'text'">【テキスト】
                                                                        <span>@{{ item.data.content | shortContent }}</span>
                                                                    </span>
                                        <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                        <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                    </span>
                                        <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                        <span v-else-if="item.type == 'bookmark'">
                                                    <span class="action-title">【ブックマーク】</span>
                                                    <span v-if="item.data.action == 1">ブックマークする</span>
                                                    <span v-else>ブックマークを外す</span>
                                                </span>
                                                <span v-else-if="item.type == 'block'">
                                                    <span class="action-title">【ブロック・非表示】</span>
                                                    <span v-if="item.data.action == 1">ブロックする</span>
                                                    <span v-if="item.data.action == 2">ブロック解除</span>
                                                    <span v-if="item.data.action == 3">表示</span>
                                                    <span v-if="item.data.action == 4">非表示</span>
                                                </span>
                                                <span v-else-if="item.type == 'compliant_status'">
                                                    <span class="action-title">【対応ステータス】</span>
                                                    <span v-if="item.data.action == 1">@{{ item.data.content }}をつける</span>
                                                    <span v-else> ステータスを外す</span>
                                                </span>

                                        <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                    <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                    <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                    <span v-show="item.data.action == 2">
                                                                        <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                        <span v-show="item.data.type == 6">
                                                                            <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                            <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                            <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                        </span>
                                                                    </span>
                                                                </span> --}}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="hr-clear-group">
                    <div class="col-sm-12" style="margin-bottom: 25px">
                        <div class="row">
                            <div class="col-sm-12 style-text">アクション実行範囲</div>
                            <div class="col-sm-12" style="padding-left: 0">
                                <div class="" style="margin-bottom: 10px">
                                    <input type="radio" class="radio_action_type" id="action_friend_1" name="action_friend" value="1"
                                           @if((!empty($landingRecord) && $landingRecord->action_with_friend == 1) || empty($landingRecord)) checked @endif>
                                    <label for="action_friend_1" style="font-weight: bold">新規友だちのみ</label>
                                </div>
                                <div class="">
                                    <input type="radio" class="radio_action_type" id="action_friend_2" name="action_friend" value="2"
                                           @if(!empty($landingRecord) && $landingRecord->action_with_friend == 2) checked @endif>
                                    <label for="action_friend_2" style="font-weight: bold">新規友だち・既存友だち・友だちリストに表示されている全員</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="hr-clear-group">
                    <div class="col-sm-12" style="margin-bottom: 25px">
                        <div class="row">
                            <div class="col-sm-12 style-text">連続アクション制限</div>
                            <div class="col-sm-12"  style="padding-left: 0">
                                <div class="" style="margin-bottom: 15px">
                                    <input type="radio" class="radio_action_type" id="interval_action_1" name="interval_action" value="0"
                                           @if((!empty($landingRecord) && $landingRecord->interval_action == 0) || empty($landingRecord)) checked @endif>
                                    <label for="interval_action_1" >
                                        <span style="display: block; width: 150px; font-weight: bold">設定しない</span>
                                    </label>
                                </div>
                                <div class="" style="margin-bottom: 15px">
                                    <input type="radio" class="radio_action_type" id="interval_action_2" name="interval_action" value="1"
                                           @if((!empty($landingRecord) && $landingRecord->interval_action == 1)) checked @endif>
                                    <label for="interval_action_2" >
                                        <span style="display: block;  font-weight: bold">アクション稼働当日中は再稼働しない（0:00にリセット）</span>
                                    </label>
                                </div>
                                <div class="" style="    display: flex;    align-items: end;">
                                    <input type="radio" class="radio_action_type" id="interval_action_3" name="interval_action" value="2"
                                           @if(!empty($landingRecord) && $landingRecord->interval_action == 2) checked @endif>
                                    <label for="interval_action_3">
                                        <span style="display: block; width: 150px;font-weight: bold">アクション稼働後</span>
                                    </label>
                                    <input type="number" class="form-control"
                                           v-validate="{min_value: 0}"
                                           name="time_interval_action"
                                           id="time_interval_action"
                                           value="{{ !empty($landingRecord) ? $landingRecord->time_interval_action : null }}" style="width: 70px; margin-right: 15px">
                                    <span>時間経過で再度稼働可能</span>
                                </div>
                                <div class="errors" id="time_interval_action_error"></div>
                                <span class="text-danger" v-show="errors.has('time_interval_action')">半角数字で0以上入力してください</span>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="area-group row col-sm-10">
                    <div class="col-sm-12" style="margin-bottom: 25px">
                    <div class="row">
                        <div class="col-sm-12 style-text">友だち追加時設定の実行</div>
                        <div class="col-sm-12"  style="padding-left: 0">
                            <div class="" style="margin-bottom: 15px">
                                <input type="radio" class="radio_action_type" id="action_qrcode_normal_2" name="action_qrcode_normal" value="1"
                                       @if((!empty($landingRecord) && $landingRecord->action_with_qrcode_normal == 1) || empty($landingRecord)) checked @endif>
                                <label for="action_qrcode_normal_2">
                                    <span style="display: block; width: 150px;font-weight: bold">実行する</span>
                                    <span disabled="display: block"><span style="font-weight: normal">友だち追加時設定のアクション実行後に、流入アクションが実行されます。</span><br/>
                                        <span style="font-weight: normal">ただし、流入アクションでステップ配信を実行する場合、友だち追加時設定のステップ配信は実行されません。</span>
                                    </span>
                                </label>
                            </div>
                            <div class="" >
                                <input type="radio" class="radio_action_type" id="action_qrcode_normal_1" name="action_qrcode_normal" value="0"
                                       @if((!empty($landingRecord) && $landingRecord->action_with_qrcode_normal == 0) ) checked @endif>
                                <label for="action_qrcode_normal_1" >
                                    <span style="display: block; width: 150px; font-weight: bold">実行しない</span>
                                </label>
                            </div>

                        </div>
                    </div>
                </div>
                </div>
                <div class="area-group row col-sm-10">
                    <div class="col-sm-12" style="margin-bottom: 25px">
                    <div class="row">
                        <div class="col-sm-12 style-text">アフィリエイト連携</div>
                        <div class="col-sm-12" style="padding-left: 0">
                            <div class="" style="margin-bottom: 10px">
                                <input type="radio" class="radio_action_type" id="connect_aff_1" name="connect_aff" value="1"
                                       @if(!empty($landingRecord) && $landingRecord->connect_aff == 1) checked @endif>
                                <label for="connect_aff_1" style="font-weight: bold">連携する</label>
                            </div>
                            <div class="">
                                <input type="radio" class="radio_action_type" id="connect_aff_2" name="connect_aff" value="0"
                                       @if((!empty($landingRecord) && $landingRecord->connect_aff == 0) || empty($landingRecord)) checked @endif>
                                <label for="connect_aff_2" style="font-weight: bold">連携しない</label>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12" style="padding: 0;background: #FFFFFF" id="tab2" v-show="tab == 'tab2'">
            <div class="action-for-qr row">
                <div class="form-group col-sm-10" style="padding: 0">
                    <div id="area_info_introduction">
                        <div style="font-size: 15px">エルメ上の友だち（A）の紹介用呼び出しコードから、新規友だち（B）の追加があった時</div>
                        <hr style="color: #B0C2C6; margin-top: 7px; margin-bottom: 7px;border-top: 2px solid #B0C2C6;">
                        <div>紹介時アクションを利用して、紹介報酬としてクーポンなどの自動配信ができます。</div>
                        <div class="box-info-intro">
                            <i class="fa fa-user icon-intro"></i>
                            <div class="text-person-introduce">紹介した友だち　（A）</div>
                            <div class="text-introduced-person">紹介時アクションが稼働します</div>
                        </div>
                        <div class="box-info-intro">
                            <i class="far fa-user icon-intro" style=""></i>
                            <div class="text-person-introduce">紹介された友だち（B）</div>
                            <div class="text-introduced-person">流入時アクションが稼働します</div>
                        </div>
                    </div>
                </div>
                <div class="area-group row col-sm-10">
                    <div class="form-group col-sm-12" style="padding: 0;">
                    <div class="row" style="display: flex; align-items: center">
                        <div class="col-sm-2 style-text" style="width: 165px;margin-left: 15px">
                            紹介時アクション
                        </div>
                        <div class="col-sm-3" style="text-align: left">
                            <div class="form-group title-add-friend" style="display: flex;margin-bottom: 0">
                                <div class="note-action-intro" id="note_action_intro"><span style="font-size: 12px">エルメ上の友だちが紹介用呼び出しコードからLINE公式アカウントを紹介した時に簡易的に紹介報酬を渡すことのできる機能です。紹介時アクションは新規友だちの友だち追加時のみ稼働します。</span>
                                    <div class="triangle-new"></div>
                                </div>

                                <span style="font-size: 22px;margin-left: 5px;display: flex;vertical-align: middle;align-items: center;"><i id="toggle_note_action_intro" style="color: #6C6C6C;background-color: #FFFFFF;cursor: pointer" class="fa fa-question-circle"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="display: flex;align-items: center; margin-top: 15px">
                        <div class="col-sm-2 title-left">
                            エルメアクション
                        </div>
                        <div class="col-sm-3">
                            <div style="overflow: auto">
                                <input type="hidden" name="intro_action_id" id="intro_action_id" v-model="intro_action_id">
                                <a class="open-modal-action-intro" style="float: right;cursor: pointer" v-if="list_action_intro.length > 0">
                                    <span v-if="list_action_intro.length <= 3" style="color: rgb(87, 153, 219);text-decoration: underline">編集</span>
                                    <span v-else style="color: rgb(87, 153, 219);text-decoration: underline">その他@{{ list_action_intro.length - 3 }}件編集</span>
                                </a>
                                <button v-else class="btn btn-action open-modal-action-intro" style="float: left" type="button">設定</button>
                            </div>

                        </div>
                    </div>
                    <div class="row" style="display: flex;align-items: center; margin-top: 15px">
                        <div class="col-sm-5" style="margin-left: 20px">
                            <div id="list-action">
                                <p v-for="item in list_action_intro" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                    @include('layout.modal_setting.label_action')
                                    {{-- <span v-if="item.type == 'tag'">【タグ】
                                                                    <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ', ' }}@{{ itemTag.name }}</span>を<span
                                                v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                </span>
                                    <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                    <span v-else-if="item.type == 'template'">【テンプレート】
                                                                    <span>@{{ item.data.template_name }}</span>
                                                                </span>
                                    <span v-else-if="item.type == 'text'">【テキスト】
                                                                    <span>@{{ item.data.content | shortContent }}</span>
                                                                </span>
                                    <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                </span>
                                    <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                    <span v-else-if="item.type == 'bookmark'">
                                        <span class="action-title">【ブックマーク】</span>
                                        <span v-if="item.data.action == 1">ブックマークする</span>
                                        <span v-else>ブックマークを外す</span>
                                    </span>
                                    <span v-else-if="item.type == 'block'">
                                        <span class="action-title">【ブロック・非表示】</span>
                                        <span v-if="item.data.action == 1">ブロックする</span>
                                        <span v-if="item.data.action == 2">ブロック解除</span>
                                        <span v-if="item.data.action == 3">表示</span>
                                        <span v-if="item.data.action == 4">非表示</span>
                                    </span>
                                    <span v-else-if="item.type == 'compliant_status'">
                                        <span class="action-title">【対応ステータス】</span>
                                        <span v-if="item.data.action == 1">@{{ item.data.content }}をつける</span>
                                        <span v-else> ステータスを外す</span>
                                    </span>

                                    <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                <span v-show="item.data.action == 2">
                                                                    <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                    <span v-show="item.data.type == 6">
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                    </span>
                                                                </span>
                                                            </span> --}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="area-group row col-sm-10">
                    <div class="form-group col-sm-12" style="padding: 0">
                    <div class="col-sm-12 style-text" style="width: 165px">
                        友だち（A）案内文
                    </div>
                    <div class="col-sm-12" style="padding: 0;margin: 15px 0">
                        <div class="title-style">ページタイトル</div>
                        <div style="display: flex">
                            <input style="background-color: #FFFFFF;height: 35px" class="form-control" type="text"
                                   name="title_page_intro" placeholder="友だち紹介キャンペーン" id="title_page_intro" @if(!empty($landingRecord)) value="{{ $landingRecord->intro_page_title }}" @endif>
                            <div id="count_text_title_page" style="text-align: right;width: 95px;margin-top: 5px;font-weight: bold">0/30文字</div>
                        </div>
                        <div class="errors" id="title_page_intro_error"></div>
                    </div>
                    <div class="col-sm-12" style="padding: 0;margin: 15px 0">
                        <div class="title-style">案内文</div>
                        <textarea style="margin: 15px 0 30px 0" id="content_page_intro" name="content_page_intro" placeholder="このLINE公式アカウントを友だちに紹介して、登録されたら〇〇をプレゼント！" >@if(!empty($landingRecord)) {{ $landingRecord->intro_page_content }} @endif</textarea>
                    </div>
                    <div class="col-sm-12" style="padding: 0;margin: 15px 0">
                        <button type="button" class="btn btn-sns-line btn-sns-line-primary btn-preview-intro" @click="previewPageIntro()">保存・プレビュー</button>
                    </div>
                </div>
                </div>
                <div class="area-group row col-sm-10">
                    <div class="form-group col-sm-12" style="padding: 0">
                    <div class="col-sm-12 style-text" style="width: 165px">
                        友だち（B）紹介文
                    </div>
                    <div class="col-sm-12" style="padding: 0;margin: 15px 0">
                        <div class="title-style">友だち（B）紹介文</div>
                        <div style="display: flex">
                            <textarea rows="3" style="background-color: #FFFFFF;resize: vertical" class="form-control" type="text"
                                      name="message_intro" placeholder="株式会社ミショナが運営するL Messageの公式LINE公式アカウントです！" id="message_intro">@if(!empty($landingRecord)){{ $landingRecord->intro_message }}@endif</textarea>
                            <div id="count_text_message_intro" style="text-align: right;width: 95px;margin-top: 23px;font-weight: bold">0/200文字</div>
                        </div>
                        <div class="errors" id="message_intro_error"></div>
                    </div>
                    <div class="col-sm-12" style="padding: 0;margin: 15px 0">
                        <button type="button" class="btn btn-sns-line btn-sns-line-primary btn-preview-intro" @click="previewMessageIntro()">保存・プレビュー</button>
                    </div>
                    </div>
                </div>
                <div class="col-sm-10" style="margin: 20px 0;background: #F6F6F6;padding: 20px 25px;border-radius: 5px">
                        <div class="title-style">紹介用呼び出しコード（以下のコードをエルメ上の友だちに送信してください）</div>
                        <div style="display: flex; background: #F6F6F6">
                            <input style="background-color: #FFFFFF;height: 35px;width: 200px" class="form-control" type="text"
                                   name="code_page_intro"  id="code_page_intro" @if(!empty($landingRecord)) value="[LANDING_INTRO_{{ $landingRecord->code }}]" @elseif(!empty($codeLanding)) value="[LANDING_INTRO_{{ $codeLanding }}]" @endif  readonly>
                            <button type="button" class="btn btn-sns-line btn-sns-line-success" id="btn_copy_code" onclick="copyCodePage()">コピー</button>
                        </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12" style="padding: 0;background: #FFFFFF" id="tab3" v-show="tab == 'tab3'">
            <div class="action-for-qr row">
                <div class="area-group row col-sm-10">
                    <div class="col-sm-12" style="padding: 0;margin-bottom: 25px">
                    <div class="row" style="margin: 0">
                        <div class="col-sm-12 style-text">HTMLタグ挿入（外部サービス連携用）</div>
                        <div style="margin-bottom: 15px; padding: 15px; border-radius: 5px;background-color: #f2f2f2; font-weight: bold;clear: both">
                            外部サービスの計測タグを設定できます。
                        </div>
                        <div class="col-sm-12">
                            <div class="row">
                                <div class="col-sm-6" style="padding-left: 0">
                                    <lable style="font-weight: bold; font-size: 16px; display: block; margin-bottom: 5px">
                                        &lt;head&gt;タグ                                    </lable>
                                    <textarea name="head_content" class="form-control" rows="8">{{ (!empty($landingRecord) && $landingRecord->head_content) ? $landingRecord->head_content : null }}</textarea>
                                </div>
                                <div class="col-sm-6" style="padding-right: 0">
                                    <lable style="font-weight: bold; font-size: 16px; display: block; margin-bottom: 5px">
                                        &lt;body&gt;タグ                                    </lable>
                                    <textarea name="body_content" class="form-control" rows="8">{{ (!empty($landingRecord) && $landingRecord->body_content) ? $landingRecord->body_content : null }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="area-group row col-sm-10">
                    <div class="col-sm-12" style="padding: 0;margin-bottom: 25px" id="url_connect_qrcode_outside">
                    <div class="row" style="margin: 0">
                        <div class="col-sm-12 style-text">外部通知</div>
                        <div style="margin-bottom: 15px; padding: 15px; border-radius: 5px;background-color: #f2f2f2; font-weight: bold;clear: both">
                            <label style="width: 140px">{line_id}</label>友だちのLINE ID<br/>
                            <label style="width: 140px">{friend_type}</label>友だち追加情報　old：既存友だち・new：新規友だち<br/>
                            <label style="width: 140px">{friend_name}</label>友だちのLINE登録名<br/>
                            <label style="width: 140px">{forward_param}</label>外部システム連携情報を共有します。
                            <br/>
                            <br/>
                            注意点<br/>
                            ・利用しないパラメーターは省略可能です。<br/>
                            ・HTMLタグ使用時は流入アクションが正常に稼働しなくなる可能性があります。必ず動作をご確認ください。<br/>
                        </div>
                        <div class="col-sm-12" style="padding: 0">
                            <label class="font-weight-bold" style="margin-bottom: 15px">入力欄</label>
                            <textarea style="resize: none" name="url_connect_qrcode_outside" class="form-control">{{ (!empty($landingRecord) && !empty($landingRecord->url_connect_qrcode_outside)) ? $landingRecord->url_connect_qrcode_outside : '' }}</textarea>
                            <p class="errors" id="name_qrcode_error"></p>
                        </div>
                    </div>
                </div>
                </div>

            </div>
        </div>
        <div class="col-sm-12 row">
            <p>
                <button class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg"  type="button" @click="submitForm($event)"
                        style="width: 200px; margin-bottom: 20px">保存</button>
            </p>
            <p>
                <a href="{!! route('landingIndex') !!}" class="btn btn-sns-line  btn-sns-line-lg btn-sns-line-dark"  style="width: 140px" >戻る</a>
            </p>
        </div>
    </form>
    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
@endsection
@push('js')

    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="/tinymce/langs/ja.js"></script>
    <!-- <script src="https://cdn.tiny.cloud/1/g3zs72us63f0hhxg73jreycj5mblfo0jqrg6udujttaqokrz/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> -->
    <script>
        tinymce.init({
            selector: '#content_page_intro',
            sandbox_iframes: false,
            mode : "exact",
            menubar: false,
            plugins: [
                "advlist", "anchor", "autolink", "charmap", "code", "fullscreen", 
                "help", "image", "insertdatetime", "link", "lists", "media", 
                "preview", "searchreplace", "table", "visualblocks", "advtemplate", "emoticons"
            ],
            toolbar: 'undo redo | blocks | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link | code | emoticons',
            content_style: "body {font-size: 13px}",
            setup: function(editor) {
                editor.on('keyup', function (e) {
                    $('#content_page_intro').val(editor.getContent());
                });
                editor.on('change', function (e) {
                    $('#content_page_intro').val(editor.getContent());
                });
            },
            language: 'ja' ,
            link_default_protocol: 'https',
            autoresize_max_height: 400,
        });
        var action_id = ``;
        var landing_id = ``;
        var intro_action_id = ``;
        var postback_type = `0`;
        var type_open_url = `0`;
        var postback_content = ``;
        var bill_type = `1`;
    </script>
    <script src="{{asset('js/qr_code/add_qr_code.js')}}?v={{config("sns-line.version")}}"></script>
    <script>
        var params = [];
        var basic_home_new = [];
    </script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
@endpush