@push('css')
    <style>
        input.date::placeholder, input.time::placeholder {
            color: #B4B4B4 !important;
            font-size: 14px !important;
            font-weight: 400 !important;
        }
    </style>
@endpush
<div class="w-[650px] !rounded-[10px] !bg-[#FFFFFF] mb-[20px]" :class="landing.use_limit_time != 1 ? 'min-h-[339px]' : ''">
    <div class="!bg-[#FFFFFF] !rounded-[10px]">
        <p class="text-[14px] font-semibold rounded-[5px] bg-[#F8F8F8] px-[15px] py-[10px] text-[#222222] mb-[15px]">有効期間の設定</p>
        <p class="font-s14 font-w-normal color-text pl-[15px]">QRコードアクションの有効期間の設定ができます。</p>
        <p class="font-s14 font-w-normal color-text pl-[15px]">開始・終了日時が到来すると、稼働状況が自動でON・OFFされます。</p>
        <div class="flex mt-2 ml-[15px]">
            <div class="flex items-center justify-center border border-solid cursor-pointer rounded-l-[5px] h-[30px] w-[100px] !border-r-0 text-[14px]"
                 @click="landing.use_limit_time = 0"
                 :class="landing.use_limit_time == 0 ? '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] !border-l-0 text-[14px]"
                 @click="landing.use_limit_time = 1"
                 :class="landing.use_limit_time == 1 ? 'font-[600] border-[--blue] bg-[--blue] text-white' : 'text-[--gray2] border-[#DDDDDD]'">利用する</div>
        </div>
{{--        <div class="time-range-container mt-2 ml-[15px]" style="padding: 0px; margin-right: 10px; width: 240px;" v-show="landing.use_limit_time == 1" >--}}
{{--            <div class="font-[300] text-[14px] text-[#222222] mt-[21px] mb-[10px]">--}}
{{--                有効期間の設定--}}
{{--            </div>--}}
{{--            <div class="relative !bg-[#FFFFFF]">--}}
{{--                <input type="text" id="filter-range" style="border-radius: 5px !important;"--}}
{{--                       class="form-control text-focus dateranger" readonly>--}}
{{--                <i class="far fa-calendar" style="color: #E0E0E0"></i>--}}
{{--            </div>--}}
{{--        </div>--}}
        <div class="ml-[15px] mt-[27px] mb-[46px]" id="setting_limit_datetime" v-show="landing.use_limit_time == 1">
            <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="limit_start_date" placeholder="日付を選択" autocomplete="off">
                    <i class="fal fa-calendar absolute right-[13px] top-[13px] text-[#888888] font-[400]"></i>
                </div>
                <div class="w-[143px] h-[40px] ml-[14px] font-[400] text-[14px]" style="position: relative">
                    <input class="time" type="text" id="limit_start_time" placeholder="時間を選択" :disabled="!landing.limit_start_time" autocomplete="off">
                    <i class="fal fa-clock absolute right-[13px] top-[13px] text-[#888888] font-[400]"></i>
                </div>
            </div>
            <div class="ml-[71px] text-[#F44336]" v-show="limit.error_time_start == true">
                開始日時を入力してください。
            </div>
            <div class="flex mt-[25px]">
                <div class="flex items-center w-[368px] h-[33px] px-[14px] rounded-[8px]" :class="landing.use_limit_end_time == 0 ? 'bg-[#F7F7F7]' : null">
                    <input id="disable_end_data" value="0" type="radio" v-model="landing.use_limit_end_time"
                           class="cursor-pointer"
                           :class="[landing.use_limit_end_time == 0 ? 'border-0' : null]">
                    <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">(有効状態を継続する)</span>
                    </label>
                </div>
                <div class="flex items-center h-[33px] w-[196px] rounded-[8px] ml-[11px] px-[14px]" :class="landing.use_limit_end_time == 1 ? 'bg-[#F7F7F7]' : null">
                    <input id="enable_end_data" value="1" type="radio" v-model="landing.use_limit_end_time"
                           class="cursor-pointer"
                           :class="[landing.use_limit_end_time == 1 ? 'border-0' : null]">
                    <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="landing.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="limit_end_date" placeholder="日付を選択" autocomplete="off">
                    <i class="fal fa-calendar absolute right-[13px] top-[13px] text-[#888888] font-[400]"></i>
                </div>
                <div class="w-[143px] h-[40px] ml-[14px] font-[400] text-[14px]" style="position: relative">
                    <input class="time" type="text" id="limit_end_time" placeholder="時間を選択" :disabled="!landing.limit_end_time" autocomplete="off">
                    <i class="fal fa-clock absolute right-[13px] top-[13px] text-[#888888] font-[400]"></i>
                </div>
            </div>
            <div class="ml-[71px] text-[#F44336]" v-show="landing.use_limit_end_time == 1 && limit.error_time_end == true">
                @{{ !landing.limit_start_time ? '終了日時を入力してください。' : '開始日時が終了日時より短い' }}
            </div>
        </div>
    </div>
</div>
<div class="w-[650px] !rounded-[10px] !bg-[#FFFFFF] content" v-if="landing.use_limit_time == 1">
    <div class="pb-[16px] !rounded-[10px] !bg-[#FFFFFF]">
        <p class="text-[16px] font-semibold rounded-[5px] bg-[#F8F8F8] px-[15px] py-[10px] text-[#222222] mb-[15px]">有効期間外に読み込んだ場合の友だち追加ページ</p>
        <div class="text-[#222222] text-[14px] font-[300] ml-[15px]">
            有効期間外に友だち追加された場合、流入経路は「通常友だち追加」として記録されます。
        </div>
        <div class="text-[14px] text-[#222222] font-[300] ml-[9px] mt-[13px]">
            「表示しない」を選択した場合、稼働OFF時の表示設定が適用されます。
        </div>
        <div class="flex my-[15px] ml-[15px]">
            <div class="flex items-center justify-center border border-solid cursor-pointer rounded-l-[5px] h-[30px] w-[100px] !border-r-0 text-[14px]"
                 @click="landing.use_qr_page_over_time = 1"
                 :class="landing.use_qr_page_over_time == 1 ? '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] !border-l-0 text-[14px]"
                 @click="landing.use_qr_page_over_time = 0"
                 :class="landing.use_qr_page_over_time == 0 ? 'font-[600] border-[--blue] bg-[--blue] text-white' : 'text-[--gray2] border-[#DDDDDD]'">利用しない</div>
        </div>
        <div v-if="landing.use_qr_page_over_time == 1">
            <p class="text-[16px] font-semibold rounded-[5px] bg-[#F8F8F8] px-[15px] py-[10px] text-[#222222] mb-[15px]">有効期間外に友だち追加した場合のアクション</p>
            <div class="mb-[15px] ml-[15px]">
                <div class="custom-radio mr-[20px]">
                    <input type="radio" id="not-use-action-limit" name="action-type" :value="0" v-model="landing.use_action_limit">
                    <label for="not-use-action-limit" style="font-weight: 600">アクションは何も稼働させない</label>
                </div>
                <div class="custom-radio mt-[15px] mb-[20px]">
                    <input type="radio" id="use-action-limit-2" name="action-type" :value="1" v-model="landing.use_action_limit">
                    <label for="use-action-limit-2" style="font-weight: 600">個別にアクションを設定する</label>
                </div>
            </div>
            <div class="!border !border-solid !border-[#DDDDDD] !rounded-[10px] px-[25px] py-[17px]" v-if="landing.use_action_limit == 1">
                <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>
    </div>
</div>
<div class="gr-btn-save mt-4 w-[700px] d-flex align-items-center">
    <div class="btn btn-save btn-blue-hover mr-2" @click="saveSettingLimit()">保存</div>
    <div class="btn-redirect-index" @click="redirectPageIndex()">一覧に戻る</div>
</div>