@push('css')
    <style>
        .modal-remind-message .tab-header .active {
            background: #FAFAFA !important;
            border-bottom: 3px solid #08bf5a;
        }

        .modal-remind-message .tab-header .active button {
            color: #08bf5a;
            font-weight: 600;
        }

        .modal-remind-message .tab-content .active {
            background: #FAFAFA !important;
        }

        .modal-remind-message li.active {
            background: #FAFAFA !important;
            border-bottom: 3px solid #08bf5a;
        }

        .modal-setting-scroll::-webkit-scrollbar {
            height: 6px;
            background-color: #FAFAFA;
        }

        .modal-setting-scroll::-webkit-scrollbar-thumb {
            background-color: #DDDDDD;
            border-radius: 8px;
        }

        .tab-content-scroll::-webkit-scrollbar {
            width: 6px;
            height: 40px;
            background-color: #FAFAFA;
        }

        .tab-content-scroll::-webkit-scrollbar-thumb {
            background-color: #DDDDDD;
            border-radius: 8px;
        }

        .form-checkbox::-webkit-scrollbar {
            width: 6px;
            height: 40px;
            background-color: #FAFAFA;
        }

        .form-checkbox::-webkit-scrollbar-thumb {
            background-color: #DDDDDD;
            border-radius: 8px;
        }

        .wrap-custom-check:has(input:checked) {
            border: 1px solid #08BF5A;
            background-color: #F4FBF2 !important;
        }

        .wrap-custom-check .custom-checkbox {
            padding-left: 30px;
            position: relative;
            display: block;
            width: 100%;
        }

        .wrap-custom-check .custom-checkbox::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            border-radius: 3px;
            border: 1px solid #DDDDDD;
        }

        .wrap-custom-check input:checked + .custom-checkbox::before {
            background-color: #08BF5A;
            border-color: #08BF5A;
        }

        .wrap-custom-check input:checked + label {
            color: #08BF5A;
        }

        /* The slider */
        .setting-message-step .c-switch {
            position: relative;
            display: inline-block;
            width: 32px;
            height: 10px;
            margin: 0px 5px;
        }

        .setting-message-step .c-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .setting-message-step .c-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #d5d5d7;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .setting-message-step .c-slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 0px;
            bottom: -3px;
            background-color: #999999;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .setting-message-step .c-slider:after {
            position: absolute;
            content: "";
            right: 11px;
            bottom: -2px;
            font-size: 13px;
            color: white;
        }

        .setting-message-step input:checked + .c-slider {
            background-color: #cef2de;
        }

        .setting-message-step input:checked + .c-slider:before {
            -webkit-transform: translateX(40px);
            -ms-transform: translateX(22px);
            transform: translateX(22px);
            background-color: #08BF5A;
        }

        .setting-message-step input:checked + .c-slider:after {
            content: "";
            left: 13px;
            bottom: 6px;
        }

        /* Rounded sliders */
        .setting-message-step .c-slider.round {
            border-radius: 34px;
        }

        .setting-message-step .c-slider.round:before {
            border-radius: 50%;
        }

        .wrap-event-before-after {
            position: relative;
        }

        .wrap-event-before-after:before {
            content: '';
            position: absolute;
            width: 1px;
            height: calc(100% + 13px);
            right: 0px;
            top: -13px;
            background-color: #DDDDDD;
        }
    </style>
@endpush
<div class="content h-full inline-flex flex-col inline-block wrap-event-before-after" v-if="!isEditRemind">
    <h2 class="mb-[8px] text-[20px] !font-semibold block">予約前後に送るリマインドメッセージ</h2>
    <h3 class="mb-[13px] block">このページでは予約前後に送るメッセージ・アクションを設定します。</h3>
    <h3 class="text-[#F44336] block">
        このリマインドメッセージ・アクションは、予約が変更・キャンセルされた場合、自動的に変更・停止します。</h3>
{{--    <hr class="mt-[20px] ml-[-19px] border-t-0 border-b border-solid border-[#DDDDDD]">--}}
    <div class="flex h-full mt-[20px]">
        <div class="w-[400px] pb-[20px] border-r border-solid border-[#DDDDDD] pt-[10px] pr-[20px]">
            <div class="mb-[10px] mt-[-10px] ml-[-19px] mr-[-20px] bg-[#5799DB] text-[#FFFFFF] h-[40px] flex justify-center items-center">
                <i class="far fa-arrow-from-right mr-[8px] text-[20px]"></i>
                <span class="text-[16px] !font-semibold">コース開始前のメッセージ・アクション</span>
            </div>
            <button class="mb-[16px] w-[250px] h-[40px] border border-solid border-[#5799DB] rounded-[3px] text-[#5799DB] hover:!bg-[#5799DB] hover:border-[#5799DB] hover:!text-white"
                    @click="showSettingRemind(0)">
                <i class="fal fa-plus mr-[6px]"></i>送信タイミングを追加する
            </button>
            <div>
                <div v-show="listStepBefore.length == 0">
                    <div class="flex items-center justify-center min-h-[50px] w-full border border-solid border-[#DDDDDD] rounded-[5px]">
                        <span>メッセージ・アクションが登録されていません</span>
                    </div>
                    <hr class="border-l border-solid border-[#DDDDDD] w-[29px] rotate-90 origin-top-left ml-[180px]">
                </div>
                <div v-for="(step, indexStep) in listStepBefore">
                    <div class="relative h-[80px] px-[13px] pt-[16px] w-full border border-solid border-[#DDDDDD] rounded-[5px] remind-action"
                         :class="{'mt-[29px]': indexStep > 0}"
                    >
                        <div class="flex items-center mb-[13px]">
                            <i class="far fa-clock mr-[7px] text-[20px]"></i>
                            <span v-if="step.type_remind == 1" class="!font-semibold">コース開始 @{{ step.before_day }}日前の @{{ step.time_send_format.split(':')[0] }}時@{{ step.time_send_format.split(':')[1] }}分</span>
                            <span v-if="step.type_remind == 2" class="!font-semibold">コース開始 @{{ step.time_send_format.split(':')[0] }} 時間 @{{ step.time_send_format.split(':')[1] }} 分 前</span>
                        </div>
                        <div class="flex items-center">
                            <i v-show="step.is_use_filter_course == 1 && step.course_ids"
                               class="fas fa-filter mr-[7px] text-[20px]"
                               :class="{'text-[#08BF5A]': step.is_use_filter_course == 1 && step.course_ids, 'text-[#222222]': step.is_use_filter_course == 0 || !step.course_ids}"
                            ></i>
                            <i v-show="step.is_use_filter_course == 0 || !step.course_ids"
                               class="far fa-filter mr-[7px] text-[20px]"
                               :class="{'text-[#08BF5A]': step.is_use_filter_course == 1 && step.course_ids, 'text-[#222222]': step.is_use_filter_course == 0 || !step.course_ids}"
                            ></i>
                            <span class="font-[300]"
                                  :class="{'text-[#08BF5A] !font-[600]': step.is_use_filter_course == 1 && step.course_ids,'text-[#222222]': step.is_use_filter_course == 0 || !step.course_ids}"
                            >@{{ (step.is_use_filter_course == 1 && step.course_ids) ? 'コースごとの絞り込みが設定されています' : 'コースごとの絞り込みは設定されていません' }}</span>
                        </div>

                        <div @click="showModalRemindSettingMessage(step.id)"
                             class="items-center justify-center bg-[#5799DBCC] hover-remind-action absolute h-[80px] w-full top-0 left-0 rounded-[5px] cursor-pointer">
                            <i class="fas fa-eye mr-[7px] text-[20px] text-white"></i>
                            <span class="!font-semibold text-white">プレビュー・編集</span>
                        </div>
                    </div>
                    <hr class="border-l border-solid border-[#DDDDDD] w-[29px] rotate-90 origin-top-left ml-[180px]">
                </div>

                <div class="flex items-center justify-center mt-[29px] w-full h-[50px] bg-[#F8F8F8] border border-solid border-[#DDDDDD] rounded-[5px]">
                    <i class="fas fa-play-circle text-[20px] text-[#5799DB] mr-[7px]"></i>
                    <span>コース開始</span>
                </div>
            </div>
        </div>
        <div class="ml-[20px] pb-[20px] pt-[10px] w-[400px] pr-[20px]">
            <div class="mb-[10px] mt-[-10px] ml-[-19px] mr-[-20px] bg-[#F44336] text-[#FFFFFF] h-[40px] flex justify-center items-center">
                <span class="text-[16px] !font-semibold">コース終了後のメッセージ・アクション</span>
                <i class="far fa-arrow-from-left text-[20px] ml-[30px]"></i>
            </div>
            <button class="mb-[16px] w-[250px] h-[40px] border border-solid border-[#5799DB] rounded-[3px] text-[#5799DB] hover:!bg-[#5799DB] hover:border-[#5799DB] hover:!text-white"
                    @click="showSettingRemind(1)">
                <i class="fal fa-plus mr-[6px]"></i>送信タイミングを追加する
            </button>
            <div>
                <div class="flex items-center justify-center w-full h-[50px] bg-[#F8F8F8] border border-solid border-[#DDDDDD] rounded-[5px]">
                    <i class="fas fa-stop-circle text-[20px] text-[#F44336] mr-[7px]"></i>
                    <span>コース終了</span>
                </div>
                <div v-if="listStepAfter.length == 0">
                    <hr class="border-l border-solid border-[#DDDDDD] w-[29px] rotate-90 origin-top-left ml-[180px]">
                    <div class="flex items-center justify-center mt-[29px] min-h-[50px] w-[380px] border border-solid border-[#DDDDDD] rounded-[5px]">
                        <span>メッセージ・アクションが登録されていません</span>
                    </div>
                </div>

                <div v-for="(step, indexStep) in listStepAfter">
                    <hr class="border-r border-solid border-[#DDDDDD] w-[29px] rotate-90 origin-top-left ml-[180px]">
                    <div class="relative mt-[29px] h-[80px] px-[13px] pt-[16px] w-full border border-solid border-[#DDDDDD] rounded-[5px] remind-action">
                        <div class="flex items-center mb-[13px]">
                            <i class="far fa-clock mr-[7px] text-[20px]"></i>
                            <span v-if="step.type_remind == 1" class="!font-semibold">コース終了 @{{ step.before_day }}日後の @{{ step.time_send_format.split(':')[0] }}時@{{ step.time_send_format.split(':')[1] }}分</span>
                            <span v-if="step.type_remind == 2" class="!font-semibold">コース終了 @{{ step.time_send_format.split(':')[0] }} 時間 @{{ step.time_send_format.split(':')[1] }} 分 後</span>
                        </div>
                        <div class="flex items-center">
                            <i v-show="step.is_use_filter_course == 1 && step.course_ids"
                               class="fas fa-filter mr-[7px] text-[20px]"
                               :class="{'text-[#08BF5A]': step.is_use_filter_course == 1 && step.course_ids, 'text-[#222222]': step.is_use_filter_course == 0 || !step.course_ids}"
                            ></i>
                            <i v-show="step.is_use_filter_course == 0 || !step.course_ids"
                               class="far fa-filter mr-[7px] text-[20px]"
                               :class="{'text-[#08BF5A]': step.is_use_filter_course == 1 && step.course_ids, 'text-[#222222]': step.is_use_filter_course == 0 || !step.course_ids}"
                            ></i>
                            <span class="font-[300]"
                                  :class="{'text-[#08BF5A] !font-[600]': step.is_use_filter_course == 1 && step.course_ids, 'text-[#222222]': step.is_use_filter_course == 0 || !step.course_ids}"
                            >@{{ (step.is_use_filter_course == 1 && step.course_ids) ? 'コースごとの絞り込みが設定されています' : 'コースごとの絞り込みは設定されていません' }}</span>
                        </div>

                        <div @click="showModalRemindSettingMessage(step.id)"
                             class="items-center justify-center bg-[#5799DBCC] hover-remind-action absolute h-[80px] w-full top-0 left-0 rounded-[5px] cursor-pointer">
                            <i class="fas fa-eye mr-[7px] text-[20px] text-white"></i>
                            <span class="!font-semibold text-white">プレビュー・編集</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="content setting-message-step pb-[30px]" v-else>
    <div>
        <a class="inline-block text-[14px] underline text-[#888888] mr-2 cursor-pointer" @click="closeEditRemind">送信タイミング設定</a>
        > <a class="text-[14px] inline-block text-[#888888] ml-2">@{{ stepDetail.is_after_day == 1 ?
            'コース終了後のメッセージ・アクション' : 'コース開始前のメッセージ・アクション' }}</a>
        <div class="!font-semibold text-[#222222] text-[18px] mt-[15px]">
            @{{ stepDetail.is_after_day == 1 ? 'コース終了後のメッセージ・アクション' : 'コース開始前のメッセージ・アクション'
            }}
        </div>
        <div class="mt-[25px] flex items-center">
            <div class="!font-semibold text-[#222222] !text-[14px]">
                送信するタイミング
            </div>
            <div class="text-[#222222] text-[14px] font-light ml-[30px]">
                @{{ stepDetail.is_after_day == 1 ? '※コース終了当日に送信する場合は「0日後」を選択してください' :
                '※コース開始当日に送信する場合は「0日後」を選択してください' }}
            </div>
        </div>
        <div class="flex items-center mt-[25px] w-[600px] bg-[#F8F8F8] p-[10px]">
            <div class="!font-semibold text-[#222222] text-[14px] mr-[20px]">
                @{{ stepDetail.is_after_day == 1 ? 'コース終了から' : 'コース開始日時の' }}
            </div>
            <div class="flex items-center" v-if="stepDetail.type_remind == 1">
                <input type="text" class="form-control !w-[80px] text-[16px] text-[#222222] !h-[38px] !rounded-[3px] border border-solid
                !border-[#E6E6E6]" v-model="startDay"/>
                <div class="text-[14px] text-[#222222] !font-semibold mr-[10px]">@{{ stepDetail.is_after_day == 1 ? '日後の'
                    : '日前' }}
                </div>
{{--                <input type="time" class="form-control !w-[150px] text-[16px] text-[#222222] !h-[38px] !rounded-[3px] border border-solid--}}
{{--                !border-[#E6E6E6]" v-model="startTime"/>--}}

                <div class="relative ">
                    <input readonly v-model="startTime" type="text" id="edit-timepicker-remind" class="time-picker-remind !w-[120px] !h-[40px] !pl-[48px] text-[#8F9293] border border-solid !border-[#E6E6E6] rounded-[3px]">
                    <i class="far fa-clock absolute text-[#8F9293] text-[22px] top-[8px] left-[14px]"></i>
                </div>
                <div class="!font-semibold text-[14px] text-[#222222] ml-2">
                    に配信する
                </div>
            </div>
            <div class="flex items-center" v-else>
                <input type="text" class="form-control !w-[80px] text-[16px] text-[#222222] !h-[38px] !rounded-[3px] border border-solid
                !border-[#E6E6E6]" v-model="startHourse"/>
                <div class="text-[14px] text-[#222222] !font-semibold mr-[10px]">時間</div>
                <input type="text" class="form-control !w-[80px] text-[16px] text-[#222222] !h-[38px] !rounded-[3px] border border-solid
                !border-[#E6E6E6]" v-model="startMinute"/>
                <div class="!font-semibold text-[14px] text-[#222222] ml-2">
                    <span v-if="stepDetail.is_after_day == 1">分後に配信する</span>
                    <span v-else>分前に配信する</span>
                </div>
            </div>
        </div>

        <div class="mt-[30px] flex items-center">
            <div class="!font-[600] text-[14px]">コースの絞り込み設定</div>
            <div class="font-[300] text-[12px] text-[#333333] pl-[20px]">OFF</div>
            <label class="c-switch">
                <input type="checkbox"
                       v-model="is_use_filter_course">
                <span class="c-slider round"></span>
            </label>

            <div class="font-[300] text-[12px] pl-[5px]"
                 :style="[is_use_filter_course == false ? {color: '#333333'} : {color: '#08BF5A', fontWeight: '600'}] ">
                ON
            </div>
        </div>

        <div class="mt-[10px] w-[600px] bg-[#F8F8F8] px-[20px] pt-[10px] pb-[15px]">
            <div class="text-[#222222] text-[14px] font-light">
                下記で選択したコースを予約したお客様だけに、メッセージ・アクションを稼働します。
            </div>
            <div class="text-[#222222] text-[14px] font-light">
                絞り込み設定がOFFの場合は、予約者全員にメッセージ・アクションが稼働します。
            </div>
        </div>

        <div class="form-checkbox w-[600px] h-[200px] bg-[#F8F8F8] px-[10px] py-[10px] mt-[15px] overflow-y-auto cursor-pointer"
             v-show="is_use_filter_course"
        >
            <div
                    v-for="(course, indexCourse) in step_courses"
                    class="wrap-custom-check form-checkbox h-[40px] w-full !bg-[#FFFFFF] rounded-[3px] flex items-center px-[10px] mb-[8px]">
                <input type="checkbox"
                       :id="'check-course' + indexCourse"
                       name="course"
                       :value="course.id"
                       v-model="course_ids"
                       class="checkboxField w-[20px] h-[20px] rounded-[3px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]
                hidden">
                <label :for="'check-course' + indexCourse"
                       class="whitespace-nowrap text-ellipsis overflow-hidden custom-checkbox text-[14px] font-light text-[#222222] mt-[5px]">@{{ course.system_name ?? course.course_name }}</label>
            </div>
        </div>

        <div class="mt-[30px] !font-semibold text-[#222222] !text-[14px]">
            コース開始前のメッセージ・アクション
        </div>
        <div class="mt-[20px] w-[600px]">
            <div class="bg-[#F8F8F8] h-[50px] flex justify-between align-items-center border border-solid border-[#DDDDDD] px-[15px] text-[14px]
                text-[#222222]
                 font-light">
                <button class="font-normal bg-white flex justify-center items-center border border-solid !border-[#DDDDDD] rounded-[3px] w-[100px] h-[30px]"
                        @click="appendTextInformation('{name}')"
                        :disabled="is_use_message"
                >＋ LINE名
                </button>
                <button class="font-normal bg-white flex justify-center items-center border border-solid !border-[#DDDDDD] rounded-[3px] w-[100px] h-[30px]"
                        @click="showReservationInformationModal = true"
                        :disabled="is_use_message"
                >予約情報
                </button>
                <button class="font-normal bg-white flex justify-center align-items-center border border-solid border-[#DDDDDD] rounded-[3px] w-[100px] h-[30px]"
                        @click="showFriendInformationModal = true; getDataFriendInfo()"
                        :disabled="is_use_message"
                >友だち情報
                </button>
                <div class="link mr-[15px]"
                     @click="insertExampleSentenceRemind"
                >
                    <a href="javascript:void(0)"
                       class="text-[#5799DB] text-[14px] underline font-normal">例文を挿入する</a>
                </div>
                <div class="flex items-center">
                    <label class="custom-checkbox">
                        <input type="checkbox" hidden v-model="is_use_message"/>
                        <span></span>
                    </label>
                    <span class="font-normal !text-[#222222] !text-[14px] font-[400]">利用しない</span>
                </div>
            </div>
            <textarea class="font-light w-[600px] h-[400px] border border-solid border-[#DDDDDD] border-t-0 p-[15px]"
                      :class="is_use_message ? '!bg-[#DDDDDD]' : '!bg-[#ffffff]'"
                      v-model="send_message_course"
                      @focus="saveCursorPosition($event)"
                      @keyup="saveCursorPosition($event)"
                      @focusout="saveCursorPosition($event)"
                      :disabled="is_use_message"
            ></textarea>
            <div class="text-right text-[#888888] text-[14px] font-light mt-[5px]">
                @{{ send_message_course ? send_message_course.length : 0 }}/5,000
            </div>
        </div>
        <div class="mt-[40px] !text-[16px]">
            上記メッセージ送信以外に、タグ付け等のアクションを設定する場合はこちら↓
        </div>
        <div class="flex justify-between items-center w-[600px] h-[70px] border border-solid border-[#E0E0E0] px-[15px] rounded-[3px] mt-[20px]">
            <div class="h-full flex items-end border-b-2 border-solid border-b-[#08BF5A] text-[14px] text-[#08BF5A] !font-semibold">
                エルメアクション
            </div>
            <button class="font-light border border-solid border-[#08BF5A] bg-white rounded-[4px] w-[180px] h-[40px] text-[#08BF5A]
                !text-[14px] mr-[10px]"
                    @click="openModalSettingActionStep"
            >
                アクション登録・編集
            </button>
        </div>
        <div class="py-[15px] border border-solid border-[#E0E0E0] px-[15px] rounded-[3px] w-[600px] wrap-preview-action">
            <div v-if="stepDetail.detail_action.length == 0" class="font-light border border-solid border-[#F8F8F8] rounded-[3px] flex justify-center items-center h-[40px]
                    bg-[#F8F8F8]">エルメアクションが登録されていません
            </div>
            <div v-else class="frame-preview-action">
                <template v-for="(item, indexAction) in stepDetail.detail_action">
                    @include('basic.calendar_management.tabs.setting_calendar_tab.preview-action-setting-remind')
                </template>
            </div>
        </div>
        <div class="flex justify-between w-[600px] text-[16px] font-light mb-[16px] mt-[25px]">
            <button
                    @click="saveSettingSendMessageEventStep"
                    class="font-light cursor-pointer border border-solid !border-[#08BF5A]
                        rounded-[3px] text-[#08BF5A] w-[150px]
                        h-[35px] !bg-[#FFFFFF] min-w-[200px]">保存
            </button>
            <a class="font-light cursor-pointer text-[#F44336] !text-[14px] underline"
               @click="deleteEventStep(stepDetail.is_after_day, stepDetail.id)"

            >このメッセージ・アクションを削除する</a>
        </div>
        <button class="cursor-pointer !bg-[#FFFFFF] border border-solid border-[#DDDDDD] rounded-[3px]
                    text-[#888888] w-[100px] h-[35px] font-light !text-[16px]"
                @click="isEditRemind = false; getListStepRemind()"
        >戻る
        </button>
    </div>
</div>
@include('basic.calendar_management.modal.setting_remind')
@include('basic.calendar_management.modal.setting_remind_message')