@push('css')
    <link rel="stylesheet" href="/css/base/main.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/sales/v2/add-single-item.css?v={{config("sns-line.version")}}">
    <style>
        @media (min-width: 768px) {
            #modalFakeCard .modal-dialog {
                width: 700px;
            }
        }

        .title-term{
            background-color: #F8F8F8;
            border-radius: 4px;
            padding: 10px;
            height: 41px;
            color: #51595C;
            position: relative;
        }

        #addInfoSettingModal .title_col_3_cus{
            width: 253px;
        }
        #addInfoSettingModal .mt-2 {
            margin-top: 29px;
        }
        .custom-radio {
            display: block;
        }
        .custom-radio input[type="radio"] {
            display: none;
        }
        .custom-radio label {
            display: table;
            align-items: center;
            font-size: 14px;
            color: #888888 !important;
            cursor: pointer;
            transition: color 0.2s ease;
            font-weight: 300;
        }
        .custom-radio label::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 8px;
            border: 1px solid #ccc;
            border-radius: 50%;
            background-color: white;
            transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
            position: relative;
            top: 3px;
        }
        .custom-radio input[type="radio"]:checked + label::before {
            border-color: #08BF5A;
            box-shadow: inset 0 0 0 2px white;
            background-color: #08BF5A;
        }
        .custom-radio input[type="radio"]:checked + label {
            color: #08BF5A !important;
            font-weight: 600;
        }
        .custom-radio input[type="radio"]:not(:checked) + label
        {
            padding-left: 0;
        }
        .bor-title-c {
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 35px;
        }
        .bor-title-c span:first-child {
            margin-right: 15px;
        }
        .bor-title-c::before {
            content: "";
            position: absolute;
            width: 15px;
            height: 50px;
            background: #08BF5A 0% 0% no-repeat padding-box;
            border-radius: 3px;
            opacity: 1;
            left: 0;
        }
        .more:hover > .tooltip {
            display: block;
        }
    </style>
@endpush
<div id="add-single-item" style="margin-left: -15px" v-cloak>
    <div class="mt-3">
        <div class="row" >
            <div class="col-md-8">
                <h2 style="font-size: 20px !important;" class="f-weight-bold d-inline-block">@{{ product.type_payment == 0 ? '単品商品' : '継続商品' }}</h2>
                <div class="mt-4 row justify-content-between">
                    <div class="col-sm-6">
                        <div class="form-group ">
                            <div class="mb-6px">
                                <label for="name" class="f-size-15">商品名（管理用）</label>
                                <small class="f-weight-bold" style="float: right; font-size: 13px; margin-top: 5px; font-weight: normal">@{{ product.name.length }}/20文字</small>
                            </div>
                            <input type="text" id="name" v-model="product.name" class="form-control">
                            <div class="text-danger pt-1" v-show="errors.name">@{{ errors.name }}</div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group ml-auto ">
                            <label for="name" class="mb-6px f-size-15 f-weight-bold">フォルダ</label>
                            <select id="s_category_id" v-model="product.s_category_id" class="my_class form-control">
                                <option value="0">未分類</option>
                                @foreach($categories as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                            <div class="text-danger pt-1" v-show="errors.s_category_id">@{{ errors.s_category_id }}</div>
                        </div>
                    </div>

                </div>

                <div class="mt-3 flag-environment">
                    <h3 style="font-size: 15px !important">販売環境設定</h3>
                    <div class="mt-3">
                        <div class="environment-item" :class="{active: product.flag_environment == 1}">
                            <label class="c-radio">本番環境
                                <input type="radio" value="1" v-model="product.flag_environment" name="flag_environment">
                                <span class="checkmark"></span>
                            </label>
                            <span class="content-right">実際に決済が行われます</span>
                        </div>
                        <div class="d-flex align-item-center">
                            <div class="environment-item" :class="{active: product.flag_environment == 0}">
                                <label class="c-radio">テスト環境
                                    <input type="radio" value="0" v-model="product.flag_environment" name="flag_environment">
                                    <span class="checkmark"></span>
                                </label>
                                <span class="content-right" style="font-size: 12px">
                                    決済は行われません <br>
                                     アクションの確認に利用します
                                </span>
                            </div>
                            <span class="pl-3 show-notify" style="margin-bottom: 20px">
                                <i class="fas fa-question-circle f-size-25" style="color: #7D9195 "></i>
                                <div class="w-notify">
                                      <div class="notify" style="top: -75px; width: 280px;">
                                        <span class="f-size-12">※テスト決済をする場合は<a href="#modalFakeCard" data-toggle="modal" style="padding: 0px 15px" class="text-underline f-weight-bold">こちら</a> の</span>
                                         <div class="f-size-12 d-block">ダミーカード番号をご利用ください</div>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <ul class="" id="tabs-c-items" style="border-bottom: 3px solid #E8E8E8;">
                        <li :class="{active: tableActive == 'basic'}" class="tab-item">
                            <a @click="showTab('basic')" href="#">
                                <span style="font-weight: bold">基本設定</span>
                            </a>
                        </li>
                        <li :class="{active: tableActive == 'info-item'}" class="tab-item">
                            <a @click="showTab('info-item')" href="#">
                                <span style="font-weight: bold">各種ページ</span>
                            </a>
                        </li>
                        <li :class="{active: tableActive == 'action'}" class="tab-item">
                            <a @click="showTab('action')" href="#">
                                <span style="font-weight: bold">アクション設定</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row" >
            <div class="col-md-8">
                @include('basic.sales.v2.tabs.basic')
                @include('basic.sales.v2.tabs.action')
            </div>
        </div>
        <div class="row" >
            <div id="info-item" v-show="tableActive == 'info-item'"  class="mt-4">
                <div class="col-md-10">
                    <div>
                        <div class="f-weight-bold">ページリスト（クリックで編集）</div>
                        <div class="step d-flex mt-3">
                            <div class="step-item btn-shadown-dropdown" @click="stepChange(1)" :class="{active: step == 1}">
                                <span>1.商品ページ</span>
                                <i class="fas fa-chevron-right arrow-right"></i>
                            </div>
                            <div class="step-item btn-shadown-dropdown" @click="stepChange(2)" :class="{active: step == 2}">
                                <span>2.友だち情報入力</span>
                                <i class="fas fa-chevron-right arrow-right"></i>
                            </div>
                            <div class="step-item btn-shadown-dropdown" @click="stepChange(3)" :class="{active: step == 3}">
                                <span>3.最終確認ページ</span>
                                <i class="fas fa-chevron-right arrow-right"></i>
                            </div>
                            <div class="step-item btn-shadown-dropdown" @click="stepChange(4)" :class="{active: step == 4}">
                                <span>4.申込完了後ページ</span>
                                <i class="fas fa-chevron-right arrow-right" v-show="typePayment != 0"></i>
                            </div>
                            <div class="step-item btn-shadown-dropdown" :style="{opacity: typePayment != 0 ? 1 : 0}" @click="stepChange(5)" :class="{active: step == 5}">
                                <span>5.解約用ページ</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    @include('basic.sales.v2.tabs.info-item')
                </div>
            </div>

        </div>

    </div>
    <div class="modal fade" id="addInfoSettingModal" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header" style="border: none">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true" style="opacity: 1;font-size: 27px"
                    >
                        <span class="line-icon line-icon-close"><i class="fas fa-times"></i></span>
                    </button>
                    <h2 class="text-center font-weight-bold" style="font-size: 26px !important; margin-bottom:0">予約時入力項目</h2>
                </div>
                <div class="modal-body">
                    <div>
                        <div class="row d-flex " style="align-items: baseline">
                            <div class="col-md-1 "></div>
                            <div class="col-md-3 text-center title_col_3_cus">
                                <div class="title-term">
                                    <span>表示項目名</span>
                                    <i class="fas fa-asterisk" style="color:#F44336; position: absolute; right: 15px;top: 14px; "></i>
                                </div>
                            </div>
                            <div class="col-md-6" >
                                <div style="">
                                    <span style="float:right;">@{{ setting_info_user.title ? setting_info_user.title.length : 0 }}/30</span>
                                    <input type="text" class="form-control input-border" v-model="setting_info_user.title" style="width: 100%;">
                                </div>
                                {{--                                        <p class="text-danger err_title_info" v-if="setting_info_user.title.length > 10">入力項目名 は10文字以内で入力してください。 </p>--}}
                            </div>
                        </div>

                        <div class="row d-flex mt-2 " style="align-items: baseline">
                            <div class="col-md-1 "></div>
                            <div class="col-md-3 text-center title_col_3_cus">
                                <div class="title-term">必須 / 任意設定
                                    <i class="fas fa-asterisk" style="color:#F44336; position: absolute; right: 15px;top: 14px; "></i>
                                </div>
                            </div>
                            <div class="col-md-6" >
                                <div class="form-group d-flex " style="align-items: baseline">
                                    <div class=" d-flex" style="position: relative !important;padding-right: 20px !important;">
                                        <input type="radio" id="test1" class="request_reservation custom-radio" value="1"
                                               :disabled="setting_info_user.is_default == 1"
                                               v-model="setting_info_user.is_require"
                                               :checked="setting_info_user.is_require == 1">
                                        <label for="test1" class="font-weight-bold"
                                               style="font-size: 15px; color: #F44336; line-height: normal; padding-left: 25px !important">必須</label>
                                    </div>
                                    <div class=" d-flex" style="position: relative !important;padding-right: 20px !important;">
                                        <input type="radio" class="request_reservation custom-radio"  id="test2"
                                               value="0" v-model="setting_info_user.is_require"
                                               :disabled="setting_info_user.is_default == 1"
                                               :checked="setting_info_user.is_require == 0">
                                        <label for="test2" class="font-weight-bold"
                                               style="font-size: 15px; color: #5799DB; line-height: normal; padding-left: 25px !important ">任意</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row d-flex mt-2 " style="align-items: center">
                            <div class="col-md-1 "></div>
                            <div class="col-md-3 text-center title_col_3_cus">
                                <div class="title-term">回答タイプ
                                    <i class="fas fa-asterisk" style="color:#F44336; position: absolute; right: 15px;top: 14px; "></i>
                                </div>
                            </div>
                            <div class="col-md-6" >
                                <select class="form-control input-border my_class text-center"
                                        style="width: 100%; "
                                        v-model="setting_info_user.type"
                                        :disabled="setting_info_user.id"
                                        @change="onchangeTypeFriendInfo(setting_info_user.type)">
                                    {{--                                            dài--}}
                                    <option value="0">長文回答</option>
                                    {{--                                            ngắn--}}
                                    <option value="1">短文回答</option>
                                    {{--                                            lựa chọn--}}
                                    <option value="2">選択肢回答</option>
                                </select>
                            </div>
                        </div>
                        <div class="row d-flex mt-2 " v-show="setting_info_user.type == 1"  style="align-items: center">
                            <div class="col-md-1 "></div>
                            <div class="col-md-3 text-center title_col_3_cus">
                                <div class="title-term">入力フォーマット
                                    <i class="fas fa-asterisk" style="color:#F44336; position: absolute; right: 15px;top: 14px; "></i>
                                </div>
                            </div>
                            <div class="col-md-6" >
                                <select class="form-control input-border my_class text-center"
                                        style="width: 100%;"
                                        v-model="setting_info_user.type_info" :disabled="setting_info_user.id">
                                    <option v-for="type in default_value.type_info_user" v-html="type.desc"
                                            :value="type.type"></option>
                                </select>
                            </div>
                        </div>

                        <div class="row d-flex mt-2 " >
                            <div class="col-md-1 "></div>
                            <div class="col-md-3 text-center title_col_3_cus">
                                <div class="title-term">紐付け友だち情報</div>
                                <p class="text-danger" style=" font-size: 11px; color: #F44336">すでに情報が登録されている場合は <br> 情報が上書きされますのでご注意下さい。</p>
                            </div>
                            <div class="col-md-6" >
                                <div>
                                    <div style="display: flex; align-items: center">
                                        <select class="form-control input-border my_class text-center" style="width: 100%;"
                                                :disabled="setting_info_user.is_default == 1"
                                                v-model="setting_info_user.friend_info_id">
                                            <option value="0" :selected="setting_info_user.friend_info_id == 0">利用しない</option>
                                            <option value="-1" v-if="setting_info_user.type != 2" :selected="setting_info_user.friend_info_id == -1">システム表示名</option>
                                            <option value="-2" v-if="setting_info_user.type != 2" :selected="setting_info_user.friend_info_id == -2">携帯電話</option>
                                            <option value="-3" v-if="setting_info_user.type != 2" :selected="setting_info_user.friend_info_id == -3">メールアドレス</option>
                                            <option value="-6" v-if="setting_info_user.type == 2" :selected="setting_info_user.friend_info_id == -6">都道府県</option>
                                            <option v-for="info in list_friend_info" v-html="info.title" :value="info.id" :selected="setting_info_user.friend_info_id ==info.id"></option>
                                        </select>

                                        {{--                                                    <span style="display: inline-block; margin-left: 10px; color: #5799DB; word-break: keep-all;" v-if="setting_info_user.type != 2">任意</span>--}}
                                        {{--                                                    <span style="display: inline-block; margin-left: 10px; color: #F44336; word-break: keep-all;" v-if="setting_info_user.type == 2">必須</span>--}}
                                    </div>
                                    <p class="text-danger require-selection" style="width: 300px; font-size: 13px"></p>

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

                    </div>

                </div>
                <div class="modal-footer " style="border: none">
                    <div class="text-center">
                        <button type="button" class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg" style="width: 200px"
                                @click="submitSaveSettingInfoUser">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{--    <div class="modal fade" id="modal_setting_info_user" tabindex="-1" role="dialog">--}}
{{--        <div class="modal-dialog c_h_mdfixed" role="document">--}}
{{--            <div class="modal-content">--}}
{{--                <div class="modal-header c_h_mdheader">--}}
{{--                    <button type="button" data-dismiss="modal" aria-hidden="true" class="close" style="opacity: 1; font-size: 27px;">--}}
{{--                        <i class="fas fa-times hover-icon-action" style="color: rgb(125, 145, 149); padding: 5px 10px; border-radius: 4px;"></i>--}}
{{--                    </button>--}}
{{--                    <h2 class="modal-title text-center" > 購入時入力項目</h2>--}}
{{--                </div>--}}
{{--                <div class="modal-body">--}}
{{--                    <div class="form-group">--}}
{{--                        <label class="s__info-lbfix">入力項目名</label>--}}
{{--                        <input type="text" class="form-control input__text__setting_info" v-model="setting_info_user.title" style="height: 34px">--}}
{{--                        <span style="margin-inline-start: 14px;margin-top: 8px;">@{{ setting_info_user.title ? setting_info_user.title.length : 0 }}/10</span>--}}
{{--                    </div>--}}
{{--                    <p class="text-danger error-s-info-user" v-html="error.message_title_setting_info" v-if="error.message_title_setting_info"></p>--}}
{{--                    <div class="form-group">--}}
{{--                        <label class="s__info-lbfix">入力タイプ</label>--}}
{{--                        <select class="form-control type__input__setting_info my_class" v-model="setting_info_user.type" :disabled="setting_info_user.id" @change="onchangeTypeFriendInfo(setting_info_user.type)">--}}
{{--                            <option value="0">記述式 (テキストボックス)</option>--}}
{{--                            <option value="1">段落 (テキストエリア)</option>--}}
{{--                            <option value="2">選択肢</option>--}}
{{--                        </select>--}}
{{--                    </div>--}}
{{--                    <div class="form-group" v-show="setting_info_user.type == 0">--}}
{{--                        <label class="s__info-lbfix" style="background-color: unset;"></label>--}}
{{--                        <select class="form-control type__input__setting_info my_class" v-model="setting_info_user.type_info" :disabled="setting_info_user.id != null">--}}
{{--                            <option v-for="type in default_value.type_info_user" v-html="type.desc" :value="type.type"></option>--}}
{{--                        </select>--}}
{{--                    </div>--}}
{{--                    --}}{{--                <span class="text-danger noti__info__user">※取得情報入力タイプは登録後の変更ができません。</span>--}}
{{--                    --}}{{--                <h3 class="s_t_info_user">オプション</h3>--}}
{{--                    <div class="form-group">--}}
{{--                        <label class="s__info-lbfix">必須 / 任意設定</label>--}}
{{--                        <span class="radio_multiple_display">--}}
{{--                        <input type="radio" id="test_friend_info_1" value="1" :disabled="setting_info_user.is_default == 1" v-model="setting_info_user.is_require" :checked="setting_info_user.is_require == 1">--}}
{{--                        <label for="test_friend_info_1">必須</label>--}}
{{--                    </span>--}}
{{--                        <span class="radio_multiple_display">--}}
{{--                        <input type="radio" id="test_friend_info_2" value="0" :disabled="setting_info_user.is_default == 1" v-model="setting_info_user.is_require" :checked="setting_info_user.is_require == 0">--}}
{{--                        <label for="test_friend_info_2">任意</label>--}}
{{--                    </span>--}}
{{--                    </div>--}}

{{--                    <div class="form-group" style="display: flex; align-items: flex-start">--}}
{{--                        <label class="s__info-lbfix">紐つけ友だち情報（任意）</label>--}}
{{--                        <div>--}}
{{--                            <div style="display: flex; align-items: center">--}}
{{--                                <select class="form-control type__input__setting_info my_class" :disabled="setting_info_user.is_default == 1" v-model="setting_info_user.friend_info_id">--}}
{{--                                    <option value="0" :selected="setting_info_user.friend_info_id == 0">利用しない</option>--}}
{{--                                    <option value="-1" v-if="setting_info_user.type != 2" :selected="setting_info_user.friend_info_id == -1">システム表示名</option>--}}
{{--                                    <option value="-2" v-if="setting_info_user.type != 2" :selected="setting_info_user.friend_info_id == -2">携帯電話</option>--}}
{{--                                    <option value="-3" v-if="setting_info_user.type != 2" :selected="setting_info_user.friend_info_id == -3">メールアドレス</option>--}}
{{--                                    <option value="-6" v-if="setting_info_user.type == 2" :selected="setting_info_user.friend_info_id == -6">都道府県</option>--}}
{{--                                    <option v-for="info in list_friend_info" v-html="info.title" :value="info.id" :selected="setting_info_user.friend_info_id ==info.id"></option>--}}
{{--                                </select>--}}
{{--                                <span style="display: inline-block; margin-left: 10px; color: #5799DB" v-if="setting_info_user.type != 2">任意</span>--}}
{{--                                <span style="display: inline-block; margin-left: 10px; color: #F44336" v-if="setting_info_user.type == 2">必須</span>--}}
{{--                            </div>--}}
{{--                            <p class="text-danger require-selection" style="width: 300px; font-size: 13px"></p>--}}
{{--                            <p class="text-danger" style="width: 300px; font-size: 13px">すでに情報が登録されている場合は、情報が上書きされますのでご注意下さい。</p>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="modal-footer c_h_mdfooter">--}}
{{--                    <div class="c_h_grbtn-center">--}}
{{--                        <button type="button" class="btn btn-success c_h_btn-center c_h_btn-submit"--}}
{{--                                @click="submitSaveSettingInfoUser"><span style="font-weight: bold">保存</span></button>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
    <div class="modal fade" id="modalFakeCard"
         tabindex="-1" role="dialog"
         data-backdrop="static"
         data-keyboard="false"
         aria-labelledby="chatSettingStatus">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true" style="opacity: 1;font-size: 27px"
                    >
                        <i class="fas fa-times c-hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></button>
                    <h3 class="text-center" style="font-weight: bold">ダミーカード番号</h3>

                </div>
                <div class="modal-body scroll-modal">
                    <div class="wrap">
                        <h4 style="font-weight: bold">UnivaPayの場合</h4>
                        <table>
                            <tr>
                                <td>カード番号</td>
                                <td>4000-0200-0000-0000</td>
                            </tr>
                            <tr>
                                <td>カード名義人</td>
                                <td>Test User</td>
                            </tr>
                            <tr>
                                <td>有効期限/td>
                                <td>06/99</td>
                            </tr>
                            <tr>
                                <td>セキュリティコード（CVV）</td>
                                <td>123</td>
                            </tr>
                            <tr>
                                <td>メールアドレス</td>
                                <td>dummy-email@univapay.com</td>
                            </tr>
                        </table>

                        <h4 style="margin-top: 43px; font-weight: bold">Stripeの場合</h4>
                        <table>
                            <tr>
                                <td>カード番号</td>
                                <td>4242-4242-4242-4242</td>
                            </tr>
                            <tr>
                                <td>有効期限</td>
                                <td>来月以降の未来の年月を入力</td>
                            </tr>
                            <tr>
                                <td>セキュリティコード（CVV）</td>
                                <td>任意の3桁の数字</td>
                            </tr>
                        </table>
                        <div class="text-center">
                            <button @click="closeModalFakeCard" class="w-btn btn-cus-a btn-sns-line-secondary btn-close-modal">閉じる</button>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@include('layout.modal_setting.modal_select_action')
@include('layout.modal_filter_v2')

@push('js')
    <script src="/js/my_page/Sortable.min.js"></script>
    <script src="/js/my_page/vuedraggable.min.js"></script>
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <!-- <script src="https://cdn.tiny.cloud/1/g3zs72us63f0hhxg73jreycj5mblfo0jqrg6udujttaqokrz/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> -->
    <script src="/tinymce/langs/ja.js"></script>
    <script src="/js/validate/validate.js?v={{config('sns-line.version')}}"></script>
    <script>

    var basic_home_new = [];
    var list_status = null;
    list_status.forEach(function (item) {
        basic_home_new.push({
            k: item.id,
            text: item.name_status,
            bg: item.color,
            'class': 'default',
            show: !1,
            stt: 1,
            value: item.id
        });
    });
    var params = [];

        let typePaymentJs = `{{ $typePayment }}`;
        let flagEnvironment = '{{ $flagEnvironment }}';
        console.log('fff', flagEnvironment)
        let itemCode = '{{ $itemCode }}';
        let botIdCurrent = `{{ $botId }}`;
        let itemId = '{{ $itemId }}';
        let itemDB = @json($itemDB);
        let s_category_id = `{{ $s_category_id }}`;

        console.log('abc', itemDB)
        $(document).ready(function () {
            tinymce.init({
                selector: 'textarea#page_start_simple',
                sandbox_iframes: false,
                menubar: false,
                mode: "exact",
                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",
                language: "ja",
                link_default_protocol: "https",
                autoresize_max_height: 400,
                setup: function (editor) {
                    editor.on("keyup", function(){
                        $('#page_start_simple_hide').val(tinymce.get("page_start_simple").getContent());
                        productV2.product.page_start_simple = tinymce.get("page_start_simple").getContent();
                    });
                    editor.on('init', function () {
                        if (itemDB && itemDB.page_start_simple) {
                            editor.setContent(itemDB.page_start_simple);
                            $('#page_start_simple_hide').val(itemDB.page_start_simple);
                        } else {
                            var content = '<p>商品案内を入力する。</p><p style="">この項目は各種ページ>1.商品ページ>商品案内 から編集できます。</p>';
                            editor.setContent(content);
                            $('#page_start_simple_hide').val(content);
                        }
                    });
                    editor.on('change', function(){
                        $('#page_start_simple_hide').val(tinymce.get("page_start_simple").getContent());
                        productV2.product.page_start_simple = tinymce.get("page_start_simple").getContent();
                    });
                },
            });

            tinymce.init({
                selector: 'textarea#final_confirm_page',
                sandbox_iframes: false,
                menubar: false,
                mode: "exact",
                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",
                language: "ja",
                link_default_protocol: "https",
                autoresize_max_height: 400,
                height: 300,
                setup: function (editor) {
                    editor.on("keyup", function(){
                        $('#final_confirm_page_hide').val(tinymce.get("final_confirm_page").getContent());
                        productV2.product.final_confirm_page = tinymce.get("final_confirm_page").getContent();
                    });
                    editor.on('init', function () {
                        if (itemDB !== null && itemDB.final_confirm_page) {
                            editor.setContent(itemDB.final_confirm_page);
                            $('#final_confirm_page_hide').val(itemDB.final_confirm_page);
                        } else {
                            let content = '<p>◯支払の時期・方法</p><p>◯引渡・提供時期</p><p>◯申込みの撤回、解除に関すること</p><p>◯申込期間（期限のある場合）</p>';
                            editor.setContent(content);
                            $('#final_confirm_page_hide').val(content);
                        }
                    });
                    editor.on('change', function(){
                        $('#final_confirm_page_hide').val(tinymce.get("final_confirm_page").getContent());
                        productV2.product.final_confirm_page = tinymce.get("final_confirm_page").getContent();
                    });
                },
            })

            tinymce.init({
                selector: 'textarea#page_end_simple',
                sandbox_iframes: false,
                menubar: false,
                mode: "exact",
                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",
                language: "ja",
                link_default_protocol: "https",
                setup: function (editor) {
                    editor.on('init', function () {
                        if (itemId !== '') {
                            editor.setContent(itemDB.page_end_simple);
                            $('#page_end_simple_hide').val(itemDB.page_end_simple);
                        } else {
                            var content = '<p>ご購入ありがとうございました。</p>' +
                                '<p>ページを閉じてください。</p>';
                            editor.setContent(content);
                            $('#page_end_simple_hide').val(content);
                        }

                    });
                    editor.on("keyup", function(){
                        $('#page_end_simple_hide').val(tinymce.get("page_end_simple").getContent());
                        productV2.product.page_end_simple = tinymce.get("page_end_simple").getContent();
                    });
                    editor.on('change', function(){
                        $('#page_end_simple_hide').val(tinymce.get("page_end_simple").getContent());
                        productV2.product.page_end_simple = tinymce.get("page_end_simple").getContent();
                    });
                },
                autoresize_max_height: 400,
                height: 230
            })

            tinymce.init({

                selector: 'textarea#page_cancel',
                sandbox_iframes: false,
                menubar: false,
                mode: "exact",
                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",
                language: "ja",
                link_default_protocol: "https",
                autoresize_max_height: 400,
                height: 230,
                setup: function (editor) {
                    editor.on('init', function () {
                        if (itemId !== '' && itemDB.page_cancel) {
                            editor.setContent(itemDB.page_cancel);
                            $('#page_cancel_hide').val(itemDB.page_cancel);
                        } else {
                            var content = '<p>このページから解約ができます。</p>';
                            editor.setContent(content);
                            $('#page_cancel_hide').val(tinymce.get("page_cancel").getContent());
                        }

                    });
                    editor.on("keyup", function(){
                        $('#page_cancel_hide').val(tinymce.get("page_cancel").getContent());
                        productV2.product.page_cancel = tinymce.get("page_cancel").getContent();
                    });
                    editor.on('change', function(){
                        $('#page_cancel_hide').val(tinymce.get("page_cancel").getContent());
                        productV2.product.page_cancel = tinymce.get("page_cancel").getContent();
                    });
                },
            })
        })
    </script>

    <script src="/js/sales/v2/add-single-item.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
@endpush