@push('css')
    <link rel="stylesheet" href="{{asset('css/qr_code/preview_message_scan_qr.css')}}?v={{config("sns-line.version")}}">
@endpush

<div class="w-[650px] !rounded-[10px] !bg-[#FFFFFF] text-[#222222]">
    <div>
        <div class="!bg-[#FFFFFF] !rounded-[10px] ">
            <p class="text-[16px] font-semibold rounded-[5px] bg-[#F8F8F8] px-[15px] py-[10px] text-[#222222] mb-[15px]">QRコード読み込み時のメッセージ・アクション</p>

            <div class="text-[#F44336] font-[600] text-[14px] ml-[15px]" v-if="landing.action_with_friend == 1">
                新規友だちに対するアクションは初めての友だち追加時のみ、1度だけ稼働します。
            </div>

            <div v-if="landing.action_with_friend == 1" class="font-[300] text-[14px] ml-[15px]">
                友だち追加後の稼働テスト方法は<span class="text-[#5799DB] underline cursor-pointer hover:opacity-70" @click="redirectGuide('https://youtu.be/gHh6nULNByw')">こちら</span>
            </div>

            <div class="text-[#222222] font-[300] text-[14px] ml-[15px] mb-[19px]" v-if="landing.action_with_friend == 2">
                アクションQRコード（URL）を読み込んだ時に稼働させるアクションを設定します。
            </div>

            <div class="!border !border-solid !border-[#DDDDDD] !rounded-[10px] px-[24px] py-[18px]" v-if="landing.action_with_friend == 2">
                <div class="text-[14px] font-[600] text-[#222222] mb-[10px]">アクションの稼働回数</div>
                <div class="d-flex justify-content-start">
                    <div class="custom-radio mr-[20px]">
                        <input type="radio" id="action-reply-1" name="action-type" :value="2" v-model="landing.action_type">
                        <label for="action-reply-1">何度でもアクション稼働</label>
                    </div>
                    <div class="custom-radio">
                        <input type="radio" id="action-reply-2" name="action-type" :value="1" v-model="landing.action_type">
                        <label for="action-reply-2">1度のみアクション稼働</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="!bg-[#FFFFFF] !rounded-[10px] pb-[25px] mt-[15px]">
            <div  class="!border !border-solid !border-[#DDDDDD] !rounded-[10px] px-[25px] py-[17px]">
                <p class="text-[14px] font-semibold  text-[#222222] mb-[15px]">送信するメッセージを登録</p>
                <div class="h-[50px] !rounded-[5px] !bg-[#F8F8F8] !border !border-solid !border-[#DDDDDD] py-[10px] pl-[16px] pr-[29px] d-flex align-items-center !text-[14px] !font-[400] !text-[#222222]">
                    <button
                        :disabled="settingActionScanQr.notUse == 1"
                        @click="appendTextInformation('{name}')"
                        class="hover:opacity-70 !font-[400] !text-[#222222] !text-[14px] bg-white flex justify-center items-center border border-solid !border-[#DDDDDD] rounded-[3px] w-[100px] h-[30px] hover:opacity-70">
                        ＋ LINE名
                    </button>
                    <button
                        :disabled="settingActionScanQr.notUse == 1"
                        @click="showFriendInformation"
                        class="hover:opacity-70 !font-[400] !text-[#222222] !text-[14px] bg-white flex justify-center align-items-center border border-solid border-[#DDDDDD] rounded-[3px] w-[110px] h-[30px] ml-[10px]">
                        友だち情報
                    </button>
                    {{--                              <div class="link mr-[15px] ml-auto">--}}
                    {{--                                <a--}}
                    {{--                                        href="javascript:void(0)"--}}
                    {{--                                        @click="insertExampleSentenceAfterSubmit()"--}}
                    {{--                                        class="cursor-pointer text-[#5799DB] !text-[14px] underline !font-[400]">例文を挿入する</a>--}}
                    {{--                              </div>--}}
                    {{--                              <div class="checkbox flex align-items-center font-light">--}}
                    {{--                                <label class="custom-checkbox"><input v-model="settingActionScanQr.notUse"--}}
                    {{--                                                                      type="checkbox" hidden="hidden"> <span></span></label>--}}
                    {{--                                <span class="!font-[400] !text-[14px] !text-[#222222]" :class="settingActionScanQr.notUse == 1 ? '!text-[#08BF5A]' :''">利用しない</span>--}}
                    {{--                              </div>--}}
                </div>
                <div class="mt-[13px]">
                    <textarea
                         class="text-focus inp-remind h-[400px] p-[15px] !rounded-[5px] !border !border-solid border-[#DDDDDD] bg-[#FFFFFF] !text-[14px]"
                         :class="settingActionScanQr.notUse == 1 ? '!bg-[#DDDDDD]' : '!bg-[#ffffff]'"
                         :disabled="settingActionScanQr.notUse == 1"
                         v-model="landing.general_message"
                         @focus="saveCursorPosition"
                         @click="saveCursorPosition"
                         @keyup="saveCursorPosition"
                    ></textarea>
                    <div class="text-right pr-[10px] !font-[300] !text-[14px] !text-[#888888]">@{{landing.general_message ? landing.general_message.length.toLocaleString() : 0}}/5,000</div>
                </div>
            </div>
        </div>
        <div class="!rounded-[10px] !bg-[#FFFFFF] pb-[20px]  ">
            <div  class="!border !border-solid !border-[#DDDDDD] !rounded-[10px] px-[25px] py-[17px]">
                <p class="text-[14px] font-semibold text-[#222222] mb-[11px]">上記メッセージ送信以外のアクション登録</p>
                <div class="text-[14px] font-w-normal text-[#222222] mb-[20px]">よく使われる項目</div>

                <div class="mt-[14px]">
                    <div class="pb-[17px] border-b border-solid border-[#DDDDDD] grid grid-cols-5 gap-[5px]">
                        <div class="!cursor-pointer px-[6px] py-[10px] w-[95px] h-[95px] !rounded-[5px] !bg-[#F8F8F8] !text-[13px] !font-[300] !text-[#222222] text-center grid items-end" @click="quicklyAddItem('template','テンプレート',landing.action_id)">
                            <div><img src="/images/setting_action_template.png" class="inline-block" width="30px" /></div>
                            テンプレート
                        </div>
                        <div class="!cursor-pointer px-[6px] py-[10px] w-[95px] h-[95px] !rounded-[5px] !bg-[#F8F8F8] !text-[13px] !font-[300] !text-[#222222] text-center grid items-end" @click="quicklyAddItem('tag','タグ',landing.action_id)">
                            <div><i class="far fa-tag !text-[30px] !text-[#888888]"></i></div>
                            タグ
                        </div>
                        <div class="!cursor-pointer px-[6px] py-[10px] w-[95px] h-[95px] !rounded-[5px] !bg-[#F8F8F8] !text-[13px] !font-[300] !text-[#222222] text-center grid items-end" @click="quicklyAddItem('friend_info','友だち情報',landing.action_id)">
                            <div><img src="/images/setting_action_friend_info.png" class="inline-block" width="30px" /></div>
                            友だち情報
                        </div>
                        <div class="!cursor-pointer px-[6px] py-[10px] w-[95px] h-[95px] !rounded-[5px] !bg-[#F8F8F8] !text-[13px] !font-[300] !text-[#222222] text-center grid items-end" @click="quicklyAddItem('scenario','ステップ',landing.action_id)">
                            <div><img src="/images/setting_action_step.png" class="inline-block" width="30px" /></div>
                            ステップ配信
                        </div>
                        <div class="!cursor-pointer px-[6px] py-[10px] w-[95px] h-[95px] !rounded-[5px] !bg-[#F8F8F8] !text-[13px] !font-[300] !text-[#222222] text-center grid items-end" @click="openModalSettingAction(landing.action_id)">
                            <div><i class="fas fa-ellipsis-h !text-[30px] !text-[#888888]"></i></div>
                            その他
                        </div>
                    </div>
                    <div class="setting-action-herme mt-[17px]">
                        <div style="padding: var(--padding-setting-action);">
                            <button class="btn btn-sns-line-primary btn-add-panel btn-5799DB"
                                    @click="openModalSettingAction(landing.action_id)"
                                    style="width: 180px; height: 40px; margin-bottom: 15px;font-weight: 600 !important; border-radius: 5px; outline: none">
                                アクション追加・編集
                            </button>
                        </div>
                        @include('basic.qr_code.v2.components.preview-action-herme')
                        <div class="action-not-register"
                             style="margin: var(--padding-setting-action);font-weight: 300"
                             v-show="!landing.action_id">
                            エルメアクションは登録されていません
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="!rounded-[10px] !bg-[#FFFFFF] pb-[20px]">
            <p class="text-[16px] font-semibold rounded-[5px] bg-[#F8F8F8] px-[15px] py-[10px] text-[#222222] mb-[15px]">あいさつメッセージの併用</p>
            <div class="ml-[15px]">
                <div class="text-[14px] font-weight-light text-[#222222]">QRコードを読み込んでエルメ上に友だちが反映された時に <br>上記で設定したメッセージ・アクションとあいさつメッセージを併用する場合の設定です。</div>
                <div class="mt-[20px]" v-if="landing.action_with_friend == 2">
                    <label class="custom-checkbox ">
                        <input type="checkbox" true-value="1" false-value="0" v-model="landing.use_msg_new_friend">
                        <span class="checkbox-box"></span>
                        <span class="checkbox-label">新規友だち用あいさつメッセージを併用</span>
                    </label>
                    <label class="custom-checkbox">
                        <input type="checkbox" true-value="1" false-value="0" v-model="landing.use_msg_old_friend">
                        <span class="checkbox-box"></span>
                        <span class="checkbox-label">既存友だち用あいさつメッセージを併用</span>
                    </label>
                    <label class="custom-checkbox">
                        <input type="checkbox" true-value="1" false-value="0" v-model="landing.use_msg_unblock">
                        <span class="checkbox-box" ></span>
                        <span class="checkbox-label">ブロックを解除した友だち用あいさつメッセージを併用</span>
                    </label>
                </div>
                <div class="mt-[20px] mb-[15px]" v-else>
                    <p class="font-w-bold text-[14px] color-text mb-2">新規友だちの追加時に新規友だち用のあいさつメッセージ・アクションを</p>
                    <div class="custom-radio">
                        <input type="radio" id="use-action" name="use-setting-action" :value="1" v-model="landing.use_msg_new_friend">
                        <label class="color-gray1" for="use-action">併用する</label>
                    </div>
                    <div class="custom-radio">
                        <input type="radio" id="not-use-action" name="use-setting-action" :value="0" v-model="landing.use_msg_new_friend">
                        <label class="color-gray1" for="not-use-action">併用しない</label>
                    </div>
                </div>
                <div  class="text-[14px] font-weight-light text-[#222222]">
                    ※QRコードアクションでステップ配信を設定している場合 <br>あいさつメッセージで設定しているステップ配信は実行されません。
                </div>
            </div>
            <p v-if="landing.action_with_friend != 1" class="text-[16px] font-semibold rounded-[5px] bg-[#F8F8F8] px-[15px] py-[10px] text-[#222222] mb-[15px] mt-[20px]">連続アクション制限</p>
            <div class="ml-[15px]" v-if="landing.action_with_friend != 1">
                <div class="text-[14px] font-weight-light text-[#222222]">QRコード（URL）を連続で読み込んだ場合の、再稼働条件を設定します。</div>
                <div class="custom-radio mr-[20px] mt-[13px]">
                    <input type="radio" id="interval_action-1" name="interval_action" :value="0" v-model="landing.interval_action">
                    <label class="color-gray1" for="interval_action-1">設定しない</label>
                </div>
                <div class="custom-radio mr-[20px] mt-[13px]">
                    <input type="radio" id="interval_action-2" name="interval_action" :value="1" v-model="landing.interval_action">
                    <label class="color-gray1" for="interval_action-2">アクション稼働当日中は稼働しない（翌0:00にリセット）</label>
                </div>
                <div class="d-flex align-items-center mt-1">
                    <div class="custom-radio mr-[20px] mt-[8px] flex">
                        <input type="radio" id="interval_action-3" name="interval_action" :value="2" v-model="landing.interval_action">
                        <label class="color-gray1" for="interval_action-3">アクション稼働後</label>
                    </div>
                    <div class="d-flex align-items-center mt-[8px]">
                        <input type="number" class="text-focus number form-control rounded-[5px] border !border-solid border-[#DDDDDD] mr-[7px] ml-[24px] w-[60px] h-[30px]"
                               v-model="landing.time_interval_action"
                               v-if="landing.interval_action == 2"
                               @change="landing.time_interval_action = replaceNumberInput($event)"
                        >
                        <input v-else type="number" class="number form-control rounded-[5px] border !border-solid border-[#DDDDDD] mr-[7px] ml-[24px] w-[60px] h-[30px]" disabled>
                        <span class="leading-[1] font-s14" :class="landing.interval_action == 2 ? 'color-blue font-w-bold' : 'color-gray1 font-w-normal'">時間経過で再度稼働可能</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="gr-btn-save mt-4 w-[650px] d-flex justify-content-between align-items-center">
    <div class="flex">
        <div class="btn btn-save btn-blue-hover mr-2 font-[600]" @click="saveSettingDetail()">保存</div>
        <div class="btn-redirect-index font-[600] !text-[#888888] !border-[#DDDDDD]" @click="preview()">稼働プレビュー</div>
    </div>
    <div class="btn-redirect-index" @click="redirectPageIndex()">一覧に戻る</div>
</div>


<div id="modal-preview-message" class="text-[#222222] fixed top-0 right-[-573px] w-[473px] h-screen transition-all duration-1000 shadow-[0px_0px_10px_#0000001A]" :class="detail.toggleModalPreviewMessage ? 'right-0' : ''">
    <div id="preview-message" class="!w-[473px]">
        <div class="relative !bg-[#F8F8F8]">
            <div class="h-[54px] flex items-center">
                <div class="text-center w-full text-[13px]">
                    <p v-if="landing.action_with_friend == 1">初めての友だち追加時に稼働する</p>
                    <p v-if="landing.action_with_friend == 2">QRコードを読み込んだ時に稼働する</p>
                    <p>メッセージ・アクションのプレビュー</p>
                </div>
            </div>

            <div class="absolute top-[12px] right-[22px] text-[23px] font-[600]" v-on:click="detail.toggleModalPreviewMessage = false">
                <i class="fal fa-times"></i>
            </div>
        </div>
        <div class="w-full bg-[#FFFFFF] flex justify-around">
            <button class="w-[172px] font-[600] text-[15px] py-[14px] text-center"
                    :class="preview_tab==1 ? 'border-b-[3px] border-[#5799DB] text-[#5799DB]' : 'text-[#888888]'"
                    v-on:click="setPreviewTab(1)">
                メッセージ
            </button>
            <button class="w-[172px] font-[600] text-[15px] py-[14px] text-center"
                    :class="preview_tab==2 ? 'border-b-[3px] border-[#5799DB] text-[#5799DB]' : 'text-[#888888]'"
                    v-on:click="setPreviewTab(2)">
                アクション
            </button>
        </div>
        @include('basic.qr_code.v2.components.preview_detail.tab1')
        @include('basic.qr_code.v2.components.preview_detail.tab2')
        <div class="mx-auto mb-[36px] text-[#222222]" v-if="landing.action_with_friend == 2">
            <p class="text-center mt-[21px] mb-[29px] text-[13px]">設定により友だちの種類別に稼働内容が変わります。</p>
            <div class="grid grid-cols-2 gap-[13px] text-[13px] gap-x-[13px] w-[419px]">
                <button class="w-[203px] h-[41px] flex items-center justify-center border border-solid rounded-[10px]"
                        :class="mode==1 ? 'border-[#5799DB] bg-[#EDF4FB] font-[600] text-[#5799DB] border-[2px]' : 'border-[#E0E0E0] text-[#888888]'"
                        v-on:click="mode=1">
                    <i v-if="mode==1" class="mr-[9px] fal fa-check-circle"></i>
                    新規友だち
                </button>
                <button class="w-[203px] h-[41px] flex items-center justify-center border border-solid rounded-[10px]"
                        :class="mode==2 ? 'border-[#5799DB] bg-[#EDF4FB] font-[600] text-[#5799DB] border-[2px]' : 'border-[#E0E0E0] text-[#888888]'"
                        v-on:click="mode=2">
                    <i v-if="mode==2" class="mr-[9px] fal fa-check-circle"></i>
                    既存友だち
                </button>
                <button class="w-[203px] h-[41px] flex items-center justify-center border border-solid rounded-[10px]"
                        :class="mode==3 ? 'border-[#5799DB] bg-[#EDF4FB] font-[600] text-[#5799DB] border-[2px]' : 'border-[#E0E0E0] text-[#888888]'"
                        v-on:click="mode=3">
                    <i v-if="mode==3" class="fal fa-check-circle"></i>
                    ブロックを解除した友だち
                </button>
                <button class="w-[203px] h-[41px] flex items-center justify-center border border-solid rounded-[10px]"
                        :class="mode==4 ? 'border-[#5799DB] bg-[#EDF4FB] font-[600] text-[#5799DB] border-[2px]' : 'border-[#E0E0E0] text-[#888888]'"
                        v-on:click="mode=4">
                    <i v-if="mode==4" class="mr-[9px] fal fa-check-circle"></i>
                    エルメ上の友だち
                </button>
            </div>


{{--            <div class="d-flex align-items-center">--}}
{{--                <div class="custom-radio mr-2">--}}
{{--                    <input type="radio" id="action_new_friend" name="mode" :value="1" v-model="mode">--}}
{{--                    <label class="color-gray1" for="action_new_friend">新規友だち</label>--}}
{{--                </div>--}}
{{--                <div class="custom-radio">--}}
{{--                    <input type="radio" id="action_old_friend" name="mode" :value="2" v-model="mode">--}}
{{--                    <label class="color-gray1" for="action_old_friend">既存友だち</label>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="custom-radio mt-3">--}}
{{--                <input type="radio" id="action_un_block" name="mode" :value="3" v-model="mode">--}}
{{--                <label class="color-gray1" for="action_un_block">ブロックを解除した友だち</label>--}}
{{--            </div>--}}
{{--            <p class="mt-3 font-s12 font-w-bold color-text">がQRコードを読み込んでエルメに反映された時に</p>--}}
{{--            <div class="custom-radio mt-3">--}}
{{--                <input type="radio" id="action_add_friend" name="mode" :value="4" v-model="mode">--}}
{{--                <label class="color-gray1" for="action_add_friend">エルメ上の友だち</label>--}}
{{--            </div>--}}
{{--            <p class="mt-2 font-w-bold font-s12 color-text">がQRコードを読み込んだ時に</p>--}}
        </div>
        <div v-if="landing.action_with_friend == 1" class="mx-auto my-[30px]">
            <div class="w-[408px] h-[120px] bg-[#F8F8F8] rounded-[5px] px-[30px] py-[15px]">
                <div class="font-[600] text-[16px] text-[#F44336]">
                    <i class="far fa-exclamation-triangle"></i>
                    <span>以下の友だちにはアクションは稼働しません</span>
                </div>
                <div class="font-[300] text-[14px] text-[#222222]">
                    <p>・既存友だち</p>
                    <p>・ブロックを解除した友だち</p>
                    <p>・エルメ上の友だち</p>
                </div>
            </div>
        </div>
        <div class="mx-auto mb-[25px] cursor-pointer color-gray1 font-w-normal font-s14 underline hover:opacity-70" @click="detail.toggleModalPreviewMessage = false">
            閉じる
        </div>
    </div>
</div>