@push('css')
    <style>
        #setting-remind-message textarea::-webkit-scrollbar {
            width: 4px;
        }

        #setting-remind-message textarea::-webkit-scrollbar-button {
            display: none;
        }

        #setting-remind-message textarea::-webkit-scrollbar-track {
            background-color: transparent;
        }

        #setting-remind-message textarea::-webkit-scrollbar-thumb {
            background: #d2d2d2; 
        }

    </style>
@endpush

<div class="modal-remind-message fixed right-[0px] top-[75px] !bg-[#FAFAFA] modal-content rounded-[3px] px-[25px] pt-[27px] duration-1000 h-[calc(100vh-77px)]"
     v-bind:class="showSettingRemindMessageModal ? 'right-[0px]' : 'right-[-650px]'">
    <div class="flex justify-between">
        <div class="text-[#2B2F36] text-[20px] !font-semibold">
            @{{ stepDetail.is_after_day == 1 ? '予約終了後のメッセージ・アクション' : '予約開始前のメッセージ・アクション' }}
        </div>
        <button type="button"
                class="flex justify-center items-center w-[38px] h-[38px] rounded-[5px] close ic-close text-[27px] absolute right-[16px] top-[23px] opacity-100 z-10 hover:bg-[#96ADB2] hover:!text-white"
                @click="closeModalRemindSettingMessage()"
        >
            <i class="far fa-times text-[32px]"></i>
        </button>
    </div>
    <div class="mt-[15px] flex items-center justify-between">

        <div class="flex items-center">
            <i class="far fa-clock mr-[10px] text-[20px] text-[#222222]"></i>
            <span class="text-[#222222] !font-semibold text-[14px]" v-if="stepDetail.type_remind == 1">
                @{{ stepDetail.is_after_day == 1 ? '予約終了' : '予約開始' }} @{{ stepDetail.before_day }}@{{ stepDetail.is_after_day == 0 ? '日前の' : '日後の' }} @{{ stepDetail.time_send_format.split(':')[0] }}時@{{ stepDetail.time_send_format.split(':')[1] }}分
            </span>
            <span class="text-[#222222] !font-semibold text-[14px]" v-if="stepDetail.type_remind == 2">
                @{{ stepDetail.is_after_day == 1 ? '予約終了' : '予約開始' }} @{{ stepDetail.time_send_format.split(':')[0] }} 時間 @{{ stepDetail.time_send_format.split(':')[1] }} 分@{{ stepDetail.is_after_day == 1 ? ' 後' : ' 前' }}
            </span>
        </div>
    </div>
    <div class="flex items-center mt-[25px] gap-2">
        <div v-if="stepDetail.is_use_filter == 0">
            <div class="mr-[10px]">
                <i class="far fa-filter text-[20px] text-[#222222] mr-[10px]"></i><span class="text-[#222222] text-[14px]
                        font-light">絞り込みは設定されていません</span>
            </div>
        </div>
        <div v-else>
            <div class="link mr-[10px]" @click="showPreviewCourseAndStaff">
                <i class="far fa-filter text-[20px] text-[#222222] mr-[10px]"></i>
                <a href="javascript:void(0)" class="text-[#5799DB] text-[14px] underline font-normal">絞り込みが設定されています</a>
            </div>
        </div>
        <!-- <div class="flex items-center w-full" v-else>

            <template >
                <div class="mr-[10px] mb-[10px]">
                    <i class="fas fa-filter text-[20px] text-[#222222]"></i>
                </div>
                <div class="modal-setting-scroll w-full max-w-[445px] h-[40px] overflow-x-auto whitespace-nowrap">
                    <div
                            v-for="(course, indexCourse) in stepDetail.course_of_step"
                            class="text-center whitespace-nowrap text-ellipsis overflow-hidden leading-[25px] inline-block bg-[#E0E0E0] rounded-[13px] w-[150px] px-[10px] h-[25px] text-[12px] text-[#222222]
                    font-light mr-[5px]">
                        @{{ course }}
                    </div>

                </div>
            </template>
        </div> -->
    </div>
    <div class="mt-[10px] !bg-[#FAFAFA]">
        <div class="tab-header border-solid border-b border-[#DDDDDD] pb-[15px] !bg-[#FAFAFA] mx-[-25px] px-[25px]">
            <ul class="flex flex-wrap -mb-[17px] font-light">
                <li class="active mr-[30px]">
                    <button @click="changeTabRemindSettingMessage()" type="button" class="font-light inline-block rounded-t-lg hover:opacity-70
                            text-[16px]
            text-[#888888]" data-toggle="tab" href="#setting-remind-message">メッセージ
                    </button>
                </li>
                <li class="mr-[30px]">
                    <button @click="changeTabRemindSettingMessage()" type="button" class="font-light inline-block
            rounded-t-lg hover:opacity-70 text-[16px] text-[#888888]" data-toggle="tab" href="#setting-remind-action">アクション
                    </button>
                </li>
            </ul>
        </div>
        <div class="tab-content-scroll tab-content flex flex-column !bg-[#FAFAFA] -mx-[25px] overflow-y-auto">
            <div class="px-[25px] !bg-[#FAFAFA] tab-pane fade in active" id="setting-remind-message">
                <textarea disabled="disabled" v-if="stepDetail.send_message_course && stepDetail.is_use_message" class="form-control p-[15px] text-[#222222] text-[16px] !font-light w-[450px]
                         border border-solid !bg-white
                        border-[#DDDDDD] rounded-[5px] bg-white
                        mt-[18px] overflow-y-auto" style="height: calc(90vh - 280px);"
                    v-html="stepDetail.send_message_course"
                >

                </textarea>
                <div v-if="!stepDetail.send_message_course || !stepDetail.is_use_message" class="text-[#222222] text-[16px] !font-semibold flex items-center justify-center w-[450px]
                         border border-solid
                        border-[#DDDDDD] rounded-[5px] bg-white
                        mt-[8px]" style="height: calc(90vh - 280px);">
                    メッセージが登録されていません
                </div>
            </div>
            <div class="w-[95%] !bg-[#FAFAFA] tab-pane fade in" id="setting-remind-action">
                <div v-if="stepDetail.detail_action.length > 0" class="overflow-auto mt-[15px] w-[450px] mx-[25px] customer-scroll" style="height: calc(90vh - 300px);">
                    <div class="frame-preview-action">
                        <template v-for="(item, indexAction) in stepDetail.detail_action">
                            @include('basic.calendar_salon.tabs.setting_calendar_tab.preview-action-setting-remind')
                        </template>
                    </div>
                </div>
                <div  v-if="stepDetail.detail_action.length == 0" class="mx-[25px] text-[#222222] text-[16px] !font-semibold flex items-center justify-center
                        w-[450px]
                         h-[550px] border border-solid
                        border-[#DDDDDD] rounded-[5px] bg-white
                        mt-[8px] overflow-y-auto">
                    アクションが登録されていません
                </div>
            </div>
        </div>
        <div class="mt-[20px] -mx-[25px] absolute bottom-0 w-full">
            <button type="button"
                    @click="showEditSettingMessageStep"
                    class="w-full bg-[#F4FBF2] h-[50px] border-t border-solid border-[#08BF5A] flex items-center justify-center text-[#08BF5A] text-[16px]
                        !font-semibold">編集する
            </button>
        </div>
    </div>
</div>