@push('css')
    <style>
        #i-qr-off input::placeholder {
            font-weight: 300 !important;
        }
        #i-qr-off input {
            transition-property: box-shadow;
        }

        #i-qr-off .tox-tinymce {
            border: 1px solid #DDDDDD !important;
            border-radius: 10px !important;
        }

        #i-qr-off #textarea_data_display_qr_off_ifr {
            font-size: 14px;
        }

        #qr-off-tab .custom-radio > label {
            color: #888888;
            font-size: 14px;
            font-weight: 600;
        }

        #qr-off-tab .custom-radio > label:before {
            border: 1px solid #DDDDDD;
        }

        #qr-off-tab .custom-radio input[type="radio"]:checked + label:before {
            border: 1px solid #5799DB;
        }

        input.date::placeholder, input.time::placeholder {
            color: #B4B4B4 !important;
            font-size: 14px !important;
            font-weight: 400 !important;
        }
    </style>
@endpush
<div id="qr-off-tab" class="title-page text-[14px] m-h-[140px] text-[--text-color] !rounded-[10px] !bg-white w-[650px]">
    <div class="h-[40px] bg-[--gray3] rounded-[5px] px-[15px] py-[8px] font-[600] text-[16px] flex items-center">稼働ON・OFFの設定</div>
    <div class="text-[--text-color] ml-[15px] mt-[12px]">一時的にQRコードアクションの利用を停止する場合、一覧ページから稼働の設定ができます。</div>
    <div class="h-[40px] bg-[--gray3] rounded-[5px] px-[15px] py-[8px] font-[600] text-[16px] flex items-center mt-[34px]">稼働OFF時にQRコードが読み込まれた場合の設定</div>

    <div class="flex mt-[17px]">
        <div class="custom-radio ml-[15px]">
            <input type="radio" id="type-display-off-3" value="0" v-model="QrOff.type_display_off">
            <label for="type-display-off-3">友だち追加ページを表示</label>
        </div>
        <div class="custom-radio ml-[39px]">
            <input type="radio" id="type-display-off-1" value="1" v-model="QrOff.type_display_off">
            <label for="type-display-off-1">テキストを表示</label>
        </div>
        <div class="custom-radio ml-[35px]">
            <input type="radio" id="type-display-off-2" value="2" v-model="QrOff.type_display_off">
            <label for="type-display-off-2">指定ページに遷移</label>
        </div>
    </div>

    <div id="i-qr-off" class="mb-[30px] mt-[18px]" v-show="QrOff.type_display_off == 1">
        <div>
            <textarea type="text" id="textarea_data_display_qr_off"
                      class="rounded-[10px] !pl-[14px] form-control !border-[--gray2]" v-model="QrOff.text_display_off"></textarea>
        </div>
        <p class="text-[#f44336] mb-[15px] text-[12px]" v-show="QrOff.text_error">@{{ QrOff.text_error }}</p>
    </div>
    <div id="i-qr-off" class="mb-[30px] mt-[32px] ml-[15px]" v-show="QrOff.type_display_off == 2">
        <div>指定ページURLの入力</div>
        <input type="text"
               class="!h-[40px] !w-[450px] rounded-[5px] !pl-[14px] mt-[13px]"
               :class="[
                    QrOff.url_error ? '!border-[#f44336]' : '!border-[--gray2]',
                ]"
               @input="validateUrlQrOff"
               v-model="QrOff.url_display_off"
               :placeholder="QrOff.type_display_off == 2 ? 'https://example.com' : null ">
        <p class="text-[#f44336] mb-[15px] text-[12px]" v-show="QrOff.url_error">@{{ QrOff.url_error }}</p>
    </div>
    <div v-show="QrOff.type_display_off == 0" class="mt-[23px]">
        <div class="font-[600] text-[14px] ml-[15px]">
            稼働OFF時に友だち追加された場合のアクション(通常友だち追加として扱われます)
        </div>
        <div class="flex mt-[15px]">
            <div class="custom-radio ml-[15px]">
                <input type="radio" id="type-action-off-1" value="0" name="use_action_limit" v-model="QrOff.use_action_limit">
                <label for="type-action-off-1">あいさつメッセージを稼働させる</label>
            </div>

            <div class="custom-radio ml-[67px]">
                <input type="radio" id="type-action-off-2" value="1" name="use_action_limit" v-model="QrOff.use_action_limit">
                <label for="type-action-off-2">個別にアクションを設定する</label>
            </div>
        </div>
    </div>

    <div class="!border !border-solid !border-[#DDDDDD] !rounded-[10px] px-[25px] py-[17px] mt-[25px]" v-show="QrOff.use_action_limit == 1 && QrOff.type_display_off == 0">
        <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-[115px] h-[95px] !rounded-[5px] !bg-[#F8F8F8] !text-[14px] !font-[300] !text-[#222222] text-center grid items-end" @click="quicklyAddItem('template','テンプレート',landing.action_limit_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-[115px] h-[95px] !rounded-[5px] !bg-[#F8F8F8] !text-[14px] !font-[300] !text-[#222222] text-center grid items-end" @click="quicklyAddItem('tag','タグ',landing.action_limit_id)">
                    <div><i class="far fa-tag !text-[30px] !text-[#888888]"></i></div>
                    タグ
                </div>
                <div class="!cursor-pointer px-[6px] py-[10px] w-[115px] h-[95px] !rounded-[5px] !bg-[#F8F8F8] !text-[14px] !font-[300] !text-[#222222] text-center grid items-end" @click="quicklyAddItem('friend_info','友だち情報',landing.action_limit_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-[115px] h-[95px] !rounded-[5px] !bg-[#F8F8F8] !text-[14px] !font-[300] !text-[#222222] text-center grid items-end" @click="quicklyAddItem('scenario','ステップ',landing.action_limit_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-[115px] h-[95px] !rounded-[5px] !bg-[#F8F8F8] !text-[14px] !font-[300] !text-[#222222] text-center grid items-end" @click="openModalSettingAction(landing.action_limit_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_limit_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_limit_id">
                    エルメアクションは登録されていません
                </div>
            </div>
        </div>
    </div>



    <div class="h-[40px] bg-[--gray3] rounded-[5px] px-[15px] py-[8px] font-[600] text-[16px] flex items-center mt-[34px]">スケジュール設定</div>
    <div class="text-[--text-color] ml-[15px] mt-[24px]">開始・終了日時が到来すると、稼働状況が自動でON・OFFされます。</div>
    <div class="flex ml-[15px] mt-[15px]">
        <div class="flex items-center justify-center border border-solid cursor-pointer rounded-l-[5px] h-[30px] w-[100px]"
             @click="QrOff.use_limit_time = 0"
             :class="!QrOff.use_limit_time ? 'font-[600] border-[--blue] bg-[--blue] text-white' : 'text-[--gray2] border-[#DDDDDD]'">利用しない</div>
        <div class="flex items-center justify-center border border-solid cursor-pointer rounded-r-[5px] h-[30px] w-[100px]"
             @click="QrOff.use_limit_time = 1"
             :class="QrOff.use_limit_time ? 'font-[600] border-[--blue] bg-[--blue] text-white' : 'text-[--gray2] border-[#DDDDDD]'">利用する</div>
    </div>

    <div class="ml-[15px] mt-[27px] mb-[46px]" id="setting_limit_datetime" v-show="QrOff.use_limit_time">
        <div class="flex items-center datetime_picker_customize">
            <div class="font-[600] text-[14px] text-[#222222]">開始日時</div>
            <div class="w-[150px] h-[40px] ml-[14px] font-[400] text-[14px]" style="position: relative">
                <input class="date" type="text" id="start_date" placeholder="日付を選択" autocomplete="off" :value="QrOff.start_date" maxlength="10">
                <label for="start_date" class="cursor-pointer absolute right-[13px] top-[10px]">
                    <i class="fal fa-calendar text-[#888888] font-[400]"></i>
                </label>
            </div>
            <div class="w-[143px] h-[40px] ml-[14px] font-[400] text-[14px]" style="position: relative">
                <input class="time" type="text" id="start_time" placeholder="時間を選択" :value="QrOff.start_time" autocomplete="off" maxlength="5">
                <label for="start_time" class="cursor-pointer absolute right-[13px] top-[10px]">
                    <i class="fal fa-clock text-[#888888] font-[400]"></i>
                </label>
            </div>
        </div>
        <div class="ml-[71px] text-[#F44336]" v-show="QrOff.start_date_error">
            @{{ QrOff.start_date_error }}
        </div>
        <div class="flex mt-[25px]">
            <div class="flex items-center w-[370px] h-[33px] px-[14px] rounded-[8px]" :class="[QrOff.use_limit_end_time == 0 ? 'bg-[#F7F7F7]' : null]">
                <input id="disable_end_data" value="0" type="radio" v-model="QrOff.use_limit_end_time"
                       style="width: 16px; height: 16px; border-radius: 50%"
                       class="cursor-pointer"
                       :style="QrOff.use_limit_end_time == 0 ? {'border': 'none'} : {}">
                <label for="disable_end_data" class="cursor-pointer font-[400] text-[16px] text-[#1F1F1F] mt-[1px] ml-[8px]">
                    <span style="letter-spacing: -1px">終了日時を設定しない</span><span style="letter-spacing: -0.2px">(ONの状態を継続する)</span>
                </label>
            </div>
            <div class="flex items-center h-[33px] w-[196px] rounded-[8px] ml-[11px] px-[14px]" :class="[QrOff.use_limit_end_time == 1 ? 'bg-[#F7F7F7]' : null]">
                <input id="enable_end_data" value="1" type="radio" v-model="QrOff.use_limit_end_time"
                       style="width: 16px; height: 16px; border-radius: 50%"
                       class="cursor-pointer"
                       :style="QrOff.use_limit_end_time == 1 ? {'border': 'none'} : {}">
                <label for="enable_end_data" class="cursor-pointer font-[400] text-[16px] text-[#1F1F1F] mt-[1px] ml-[8px]">終了日時を設定する</label>
            </div>
        </div>
        <div class="flex items-center mt-[16px] datetime_picker_customize" v-show="QrOff.use_limit_end_time == 1">
            <div class="font-[600] text-[14px] text-[#222222]">終了日時</div>
            <div class="w-[150px] h-[40px] ml-[14px] font-[400] text-[14px]" style="position: relative">
                <input class="date" type="text" id="end_date" placeholder="日付を選択" autocomplete="off" :value="QrOff.end_date">

                <label for="end_date" class="cursor-pointer absolute right-[13px] top-[10px]">
                    <i class="fal fa-calendar text-[#888888] font-[400]"></i>
                </label>
            </div>
            <div class="w-[143px] h-[40px] ml-[14px] font-[400] text-[14px]" style="position: relative">
                <input class="time" type="text" id="end_time" placeholder="時間を選択" :value="QrOff.end_time" autocomplete="off">
                <label for="end_time" class="cursor-pointer absolute right-[13px] top-[10px]">
                    <i class="fal fa-clock text-[#888888] font-[400]"></i>
                </label>
            </div>
        </div>
        <div class="ml-[71px] text-[#F44336]" v-show="QrOff.end_date_error && QrOff.use_limit_end_time == 1">
            @{{ QrOff.end_date_error }}
        </div>
    </div>
</div>

<div class="d-flex justify-content-start align-items-center mt-[27px]">
    <button
            @click="submitQrOffForm()"
            class="btn-blue-hover text-[--blue] w-[120px] h-[40px] !rounded-[5px] !bg-white !border-2 !border-solid !border-[--blue] flex items-center justify-center mr-2">
        <span class="font-[600] text-[14px]">保存</span>
    </button>
    <div class="btn-redirect-index" @click="redirectPageIndex()">一覧に戻る</div>
</div>