@extends('layout.basic.main')
@section('title', 'サロン予約（コース詳細）')
@push('js')
    <script src="/js/tailwindcss.js"></script>
@endpush
@push('css')
    <style>
        .btn-sns-line-success {
            background-color: #08BF5A !important;
            color: white !important;
        }

        .content-preview-action>div,
        .content-preview-action>div * {
            font-weight: 400;
        }

        .wrap-item-action-herme .type div:last-child {
            font-weight: 400;
        }

        .wrap-action-broadcast-new {
            display: flex;
            border: 1px solid #DDDDDD;
            border-radius: 4px;
            padding: 9px 15px;
            margin-bottom: 10px;
        }

        .wrap-item-action-herme {
            flex-grow: 1;
        }

        .wrap-item-action-herme>div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 400;
        }

        .wrap-item-action-herme .type {
            margin-bottom: 5px;
        }
        .content-preview-action>div:first-child{
            width: 350px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .wrap-action-broadcast-new .remove i {
            font-size: 18px;
            cursor: pointer;
            color: #E0E0E0;
        }

        .wrap-action-broadcast-new .remove {
            flex: 0 0 50px;
            padding-left: 15px;
            justify-content: center;
            display: flex;
            align-items: center;
        }

        #course-edit .tab-header .active {
            background: #fff !important;
            border-bottom: 3px solid #08bf5a;
        }

        #course-edit .tab-header .active button {
            color: #08bf5a;
        }

        #course-edit li.active {
            background: #fff !important;
            border-bottom: 3px solid #08bf5a;
        }

        #course-edit li.active button {
            color: #08BF5A;
            font-weight: 600 !important;
        }

        #course-edit li.message.active {
            border-bottom: none;
        }

        #course-edit li.message.active button {
            background: #F4FBF2;
            color: #08BF5A;
            border-radius: 4px;
            border: 1px solid #08BF5A !important;
        }
        #calendar-salon-course-edit .tab-header .menu_top .active {
            background: #fff !important;
            border-bottom: 3px solid #08bf5a;
        }

        #calendar-salon-course-edit .tab-header .menu_top .active button {
            color: #fff;
            background: #08BF5A ;
            font-weight: 600;
        }

        #calendar-salon-course-edit li.message.active button {
            background: #F4FBF2;
            color: #08BF5A;
            border-radius: 4px;
            border: 1px solid #08BF5A !important;
            font-weight: 600;
        }

        .my_class {
            color: #000000 !important;
        }

        .my_class option {
            font-weight: 300 !important;
            color: #2B2F36 !important;
        }

        #course-edit input,
        textarea {
            color: #2B2F36 !important;
        }

        #course-edit input {
            border-radius: 3px !important;
            border: 1px solid #dddddd;
        }

        #course-edit .modal-calendar .relative {
            background-color: #FFFFFF !important;
        }

        #course-edit .box_description {
            padding-bottom: 30px;
        }

        #course-edit .norwrap_description {
            line-height: 25px;
            word-break: break-all;
        }

        textarea:disabled {
            background-color: #F8F8F8;
        }

        .custom-checkbox {
            position: relative;
            cursor: pointer;
            display: inline-block;
            line-height: 20px;
            width: 25px;
            height: 25px;
            margin-right: 9px;
        }

        .custom-checkbox input:checked+span {
            background-color: #08BF5A;
        }

        .custom-checkbox span {
            position: absolute;
            left: 0;
            top: 0;
            width: 25px;
            height: 25px;
            background-color: #FFFFFF;
            border-radius: 5px;
            transition: background-color 0.3s;
            border: 1px solid #E0E0E0;
        }

        .has-filter-calendar {
            color: #5799DB;
            text-decoration: underline;
            cursor: pointer;
        }

        .my_class {
            cursor: pointer;
            background: url(/images/expand_more.svg) 100% no-repeat #fff;
        }
        .hidden {
            display: none !important;
        }
        [hidden] {
            display: none !important;
        }
        #calendar-salon-course-edit .relative {
            background-color: #FFFFFF !important;
        }
        .inp-system::placeholder{
            color: #E0E0E0;
        }
        input[type="radio"]:checked {
            color: #08BF5A !important;
            accent-color: green;
        }

        input[type='radio']:checked {
            background-image: none;
            appearance: auto;
            -webkit-appearance: auto;
        }

        .custom-checkbox input:checked + span {
            background-color: #08BF5A;
        }


        #calendar-salon-course-edit #setting-message input[type="radio"]:checked + label
        {
            color: #08BF5A;
            font-weight: 600;
        }


        #calendar-salon-course-edit #setting-message input[type="radio"]:checked + span {
            color: #08BF5A;
            font-weight: 600;
        }


        #calendar-salon-course-edit #reservation-information-modal input[type="radio"]:checked + span
        {
            color: #08BF5A;
            font-weight: 600;
        }


        #calendar-salon-course-edit #friend-information-modal input[type="radio"]:checked + span
        {
            color: #08BF5A;
            font-weight: 600;
        }

        .setting-calendar-wrapper #setting-form textarea::placeholder {
            color: #E0E0E0;
        }


        #calendar-salon-course-edit #setting-form input[type="radio"]:checked + span
        {
            color: #08BF5A;
            font-weight: 600;
        }

        #calendar-salon-course-edit #setting-form input[type="radio"]:checked + label
        {
            color: #08BF5A;
            font-weight: 600;
        }
        #calendar-salon-course-edit [type='checkbox']:focus,
        #calendar-salon-course-edit [type='radio']:focus{
            outline: unset !important;
            --tw-ring-offset-width: 0 !important;
            --tw-ring-shadow: unset
        }

    </style>
@endpush
@section('content')
    <h3 class="text-[20px] leading-[27px] font-semibold mb-[30px] mt-5 ml-[15px] text-[#222222]">コース詳細</h3>
    <div id="calendar-salon-course-edit" class="text-[#2B2F36]" v-cloak>
        <div class="text-[#2B2F36] border border-solid border-[#DDDDDD]" :class="tabCourse == 2 ? 'w-[668px]' : 'w-[500px]'">
            <div class="tab-header mt-[10px] border-solid border-b border-[#DDDDDD] pb-[15px]">
                <ul class="flex flex-wrap -mb-[17px] font-light pl-[10px] menu_top">
                    <li class="mr-[15px]" :class="tabCourse == 1 ? 'active' : ''">
                        <button type="button" class="font-light inline-block hover:opacity-70 text-[16px]
                    !rounded-[3px] !border !border-solid !border-[#08BF5A] p-[7px] mb-[7px]" :class="tabCourse == 1 ? '!text-[#FFFFFF] !bg-[#08BF5A]' : '!text-[#08BF5A] !bg-[#FFFFFF]'" data-toggle="tab" @click="tabCourse = 1">
                            <i class="fal fa-list-alt text-[20px] mr-[5px]"></i>基本情報
                        </button>
                    </li>
                    <li  :class="tabCourse == 2 ? 'active' : ''">
                        <button @click="loadDataAction" type="button" class="font-light inline-block hover:opacity-70 text-[16px]
                    !rounded-[3px] !border !border-solid !border-[#08BF5A] p-[7px] mb-[7px] pl-[15px] flex min-w-[358px]" :class="tabCourse == 2 ? '!text-[#FFFFFF] !bg-[#08BF5A]' : '!text-[#08BF5A] !bg-[#FFFFFF]'" data-toggle="tab">
                            <img v-if="tabCourse == 2" src="/images/arrow-down-from-arc-regular-white.png" class="w-[20px] h-[20px] mr-[5px]" alt="">
                            <img v-else src="/images/arrow-down-from-arc-regular-green.png" class="w-[20px] h-[20px] mr-[5px]" alt="">
                            予約完了・リクエスト承認時アクション
                        </button>
                    </li>
                </ul>

            </div>
            <div class="tab-content">
                <div class="tab-pane fade in px-[25px] !bg-white pb-[13px]" :class="tabCourse == 1 ? 'active' : ''" v-if="tabCourse == 1">
                    <div class="w-full">
                        <div>
                            <div class="max-w-[500px] mt-[1px] mx-[-25px] relative">
                                <img id="course_image_change" :src="formEditCourse.courseImage ? (formEditCourse.courseImage.indexOf('ext-media') >= 0 ? '{{ env('URL_SERVER_MEDIA') }}' + formEditCourse.courseImage : formEditCourse.courseImage)  : '/images/Group3022.png'" class="w-full" alt="">
                                <input accept="image/*" ref="fileInput" type="file" id="inputFile" @change="previewFiles($event)" class="hidden mt-[40px]">
                                <div class="text-[16px] text-[#5799DB] flex font-light absolute right-[10px] top-[10px]">
                                    <div @click.prevent="showModalUpload()" class="w-[40px] h-[40px] border border-solid border-[#DDDDDD] bg-[#FFFFFF] cursor-pointer flex justify-center items-center rounded-[5px]">
                                        <i class="far fa-edit text-[20px] text-[#222222]"></i>
                                    </div>
                                    <div @click.prevent="deleteImage()" class="w-[40px] h-[40px] border border-solid border-[#DDDDDD] bg-[#FFFFFF] ml-[10px] cursor-pointer flex justify-center items-center rounded-[5px]">
                                        <i class="fal fa-trash-alt text-[20px] text-[#222222]"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-[10px] mb-[10px] text-[#888888] text-right txt-note-img">
                                <span class="font-light text-[14px] mr-[-8px]">推奨 1,000 × 500（px）</span>
                            </div>
                            <div class="max-w-[450px] w-full">
                                <div class="flex text-[14px] leading-[21px] justify-between">
                                    <div class="font-semibold text-[14px]"><span class="font-semibold text-[#F44336]">＊</span> コース名<span class="text-[#F44336]">（お客様に表示されます）</span></div>
                                    <div class="font-light text-[#888888]">
                                        @{{ formEditCourse.courseName ? formEditCourse.courseName.length : 0 }}/50
                                    </div>
                                </div>
                                <input id="myField" v-model="formEditCourse.courseName" class="form-control mt-[8px] mb-[6px] !h-[40px]
                            !px-[10px]
                            text-[14px] !pl-[10px]
                            placeholder:text-[#D3D3D3] font-light rounded-[3px]" type="text" placeholder="フォルダ名を入力">
                                <div class="text-[#dc3545] text-[14px] mt-[5px] font-light">
                                    <span>@{{ errorsMessage.course_name }}</span>
                                </div>
                            </div>
                            <div class="max-w-[450px] w-full">
                                <div class="flex text-[14px] leading-[21px] justify-between mt-[25px]">
                                    <div class="font-semibold text-[#222222]">
                                        <span class="font-semibold text-[#F44336]">＊</span> システム管理名<span class="text-[#F44336]">（お客様には表示されません）</span>
                                    </div>
                                    <div class="font-light text-[#888888]">@{{ formEditCourse.systemName ?
                                        formEditCourse.systemName.length : 0 }}/10
                                    </div>
                                </div>
                                <input v-model="formEditCourse.systemName"
                                       class="inp-system form-control border-solid border-1 border-[#DDDDDD] rounded-[3px] mt-[8px] mb-[6px] !h-[40px] !px-[10px] text-[14px] !pl-[10px] placeholder:text-[#D3D3D3] font-light"
                                       type="text" placeholder="システム管理名を入力">
                                <div class="text-[#dc3545] text-[14px] mt-[5px] font-light">
                                    <span>@{{ errorsMessage.system_name }}</span>
                                </div>
                            </div>

                            <div class="text-[#222222] mt-[50px] text-[14px] font-semibold"><span class="font-semibold text-[#F44336]">＊</span> 所要時間</div>
                            <div class="flex justify-start align-item-center mt-[10px] text-[#2B2F36] text-[16px] !font-light">
                                <select class="font-light my_class text-[#2B2F36] p-0 pl-[8px] text-[16px] !w-[80px] !h-[32px] border-solid border !border-[#DDDDDD] bg-white rounded-[4px]"
                                        v-model="formEditCourse.hourDone">
                                    @for($i = 0; $i < 24; $i++) <option class="font-light" value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                    @endfor
                                </select>
                                <span class="ml-[7px] mr-[7px] !font-light">時間</span>
                                <select class="font-light my_class text-[#2B2F36] p-0 pl-[8px] text-[16px] !w-[80px] !h-[32px] px-[10px] border-solid border !border-[#DDDDDD] bg-white rounded-[4px]"
                                        v-model="formEditCourse.minuteDone">
                                    @for($i = 0; $i < 60; $i+=5)
                                        <option class="font-light" value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                    @endfor
                                </select>
                                <span class="ml-[7px] mr-[7px] font-light">分</span>
                            </div>
                            <div class="text-[#222222] text-[14px] font-semibold mt-[50px] mb-[10px]">コース料金</div>
                            <input v-model="formEditCourse.amount" type="text"
                                   class="focus:outline-none font-light border-solid border-1 !border-[#DDDDDD] bg-white rounded-[4px] text-[16px] placeholder:text-[#D3D3D3] !w-[120px] !h-[32px] !px-[10px]"
                                   placeholder="5,000" />
                            <span class="text-[16px] text-[#2B2F36] font-light ml-[10px]">円（税込）</span>
                            <div v-if="botPlanType == 2" class="pt-[5px] text-[14px] text-[#222222] font-light">
                                <span class="font-light">決済機能の利用は、有料プランに</span><span><a href="{{route('botAdd',['upgrade_bot_id'=>Hashids::encode($botId)])}}" target="_blank" class="text-[#5799DB] text-[14px] underline font-light" href="javascript:void(0)">アップグレード</a></span><span class="font-light">する必要があります。</span>
                            </div>

                            <div class="max-w-[450px] flex justify-between mt-[50px] mb-[5px]">
                                <div class="text-[14px] text-[#222222]">コース説明</div>
                                <div class="text-[#888888] text-[16px] font-light">@{{ formEditCourse.courseDescription ?
                                    formEditCourse.courseDescription.length : 0 }}/1,000
                                </div>
                            </div>
                            <textarea v-model="formEditCourse.courseDescription"
                                      class="overflow-y-auto focus:outline-none font-light w-[450px] min-h-[150px] border-1 border-solid !border-[#DDDDDD] rounded-[3px] px-[10px] py-[10px]">
                            </textarea>
                            <div class="text-[#dc3545] text-[14px] mt-[5px] font-light">
                                <span>@{{ errorsMessage.course_description }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade in pl-[35px] pr-[33px] pt-[27px] pb-[26px] !bg-white" :class="tabCourse == 2 ? 'active' : ''" v-if="tabCourse == 2">
                    <div>
                        <div class="bg-[#FDEBE9] w-full h-[60px] rounded-[4px] py-[7px] px-[15px] flex items-center">
                            <div class="mr-[8px] w-[25px] h-[20px] bg-[#F44336] rounded-[20px] leading-[17px] text-center">
                                <i class="text-[#FFFFFF] text-[10px] fal fa-info"></i>
                            </div>
                            <div class="text-[#F44336] text-[14px] font-light">
                                このアクションが設定されている場合は、全体設定の予約（リクエスト承認）時アクションは稼働しません。
                            </div>
                        </div>
                        <div class="tab-header mt-[22px] mb-[35px]">
                            <ul class="flex flex-wrap font-light">
                                <li :class="{'message mr-[5px]': 'true', 'active': true}">
                                    <button href="#message-send-after-booking" @click="calendarCourseSetting.tab_current = 'status-send-after-booking'" data-toggle="tab"
                                            class=" text-[16px] border border-solid !border-[#DDDDDD] rounded-[4px] w-[150px] font-light hover:opacity-70 h-[40px]">予約完了時</button>
                                </li>
                                <li :class="{'message': 'true', 'active': false}">
                                    <button @click="calendarCourseSetting.tab_current = 'status-send-approve-booking'" href="#message-send-approve-booking" data-toggle="tab" class="text-[#888888] font-light
                                text-[16px]
                                border border-solid
                                !border-[#DDDDDD] rounded-[4px]
                                bg-white w-[190px]
                                hover:opacity-70
                        h-[40px] ml-[8px]">予約リクエスト承認時
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane fade in active !bg-white" id="message-send-after-booking">
                                <div class="bg-[#F8F8F8] w-full h-[50px] flex justify-between align-items-center border border-solid border-[#DDDDDD] px-[15px] text-[14px]
                    text-[#222222]
                    font-light">
                                    <button :disabled="calendarCourseSettingNotify.use_message_notify_send_after_booking == 1" @click="appendTextInformation('{name}', 2)" class="hover:opacity-70 font-normal 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="calendarCourseSettingNotify.use_message_notify_send_after_booking == 1" @click="showReservationInformationModal = true" class="hover:opacity-70 font-normal bg-white flex justify-center
                                items-center border border-solid !border-[#DDDDDD] rounded-[3px] w-[100px]
                        h-[30px]">予約情報
                                    </button>
                                    <button :disabled="calendarCourseSettingNotify.use_message_notify_send_after_booking == 1" @click="showFriendInformationModal = true; getDataFriendInfo()" class="hover:opacity-70 font-normal bg-white flex
                                justify-center align-items-center border border-solid border-[#DDDDDD] rounded-[3px]
                                w-[100px]
                        h-[30px]">友だち情報
                                    </button>
                                    <div class="link mr-[15px]">
                                        <a @click="insertExampleSentence" class="cursor-pointer text-[#5799DB] text-[14px] underline font-normal">例文を挿入する</a>
                                    </div>
                                    <div class="checkbox flex align-items-center font-light">
                                        <label class="custom-checkbox">
                                            <input v-model="calendarCourseSettingNotify.use_message_notify_send_after_booking" type="checkbox" hidden="hidden"> <span></span>
                                        </label>
                                        <span class="font-normal" :class="calendarCourseSettingNotify.use_message_notify_send_after_booking ? 'text-[#08BF5A]' : ''">利用しない</span>
                                    </div>
                                </div>
                                <textarea id="message_notify_send_after_booking" :disabled="calendarCourseSettingNotify.use_message_notify_send_after_booking == 1" @select="saveCursorPosition" @click="saveCursorPosition" @keyup="saveCursorPosition" v-model="calendarCourseSettingNotify.message_notify_send_after_booking" class="focus:outline-none font-light w-full
                            h-[400px] border border-solid
                            border-[#DDDDDD]
                            overflow-y-auto
                            border-t-0 bg-white p-[15px]"></textarea>
                                <div class="text-[#dc3545] text-[14px] mt-[5px] font-light">
                                    <span>@{{ errorsMessage.message_send_after_booking }}</span>
                                </div>
                                <div class="text-right text-[#888888] text-[14px] font-light mt-[8px]">
                                    @{{ calendarCourseSettingNotify.message_notify_send_after_booking ?
                                    calendarCourseSettingNotify.message_notify_send_after_booking.length : 0 }}/5,000
                                </div>
                                <div class="mt-[25px] text-[#222222] text-[16px] mb-[10px] font-light">
                                    上記メッセージ送信以外に、タグ付け等のアクションを設定する場合はこちら↓
                                </div>
                                <div class="flex justify-between items-center w-full h-[70px] border border-solid border-[#E0E0E0] px-[15px] rounded-[3px]">
                                    <div class="h-full flex items-end border-b-2 border-solid border-b-[#08BF5A] text-[14px] text-[#08BF5A] font-semibold">
                                        エルメアクション
                                    </div>
                                    <button class="hover:opacity-70 font-light border border-solid border-[#08BF5A] bg-white rounded-[4px] w-[180px] h-[40px] text-[#08BF5A]
                        text-[14px] mr-[10px]" @click="openSettingActionSendAfterBooking('calendar-salon-status-send-after-booking', calendarCourseSettingAction.action_id_send_after_booking)
                        ">アクション登録・編集
                                    </button>
                                </div>
                                <div class="w-full max-h-[400px] overflow-y-auto border border-solid border-[#E0E0E0] px-[15px]">
                                    @include('basic.calendar_salon.tabs.course.preview_action_send_after_booking')
                                </div>
                                <div class="text-[#2B2F36] text-[18px] font-light mt-[55px] mb-[20px] font-semibold">
                                    コースの絞り込み表示
                                </div>
                                <div class="font-light border border-solid border-[#F8F8F8] rounded-[4px] w-full h-[64px]
                        bg-[#F8F8F8] px-[20px] py-[10px] text-[14px] text-[#222222]">
                                    以下で設定した条件を満たす友だちにだけこのコースを表示する設定です。<br>
                                    例）「新規顧客」タグが付いている友だちにだけ、新規顧客専用コースを表示する
                                    など
                                </div>
                                <div class="flex justify-between items-center w-full h-[70px] border border-solid border-[#E0E0E0] px-[15px] mt-[20px]">
                                    <div class="font-semibold text-[16px] text-[#222222]">対象人数</div>
                                    <div class="link">
                                        <a v-if="calendarCourseSettingFilter.list_preview_filter_send_after_booking.length == 0"
                                           @click="showNumberFilterSendAfterBooking" href="javascript:void(0)"
                                           class="font-semibold text-[16px] text-[#5799DB] mr-[110px] underline">@{{
                                            calendarCourseSettingFilter.filter_number }}人（友だち全員)
                                        </a>
                                        <a v-else @click="showNumberFilterSendAfterBooking" href="javascript:void(0)" class="font-semibold text-[16px] text-[#5799DB] underline ml-[-115px]">@{{
                                            calendarCourseSettingFilter.filter_number }}人
                                        </a>
                                    </div>
                                    <button @click="showModalFilterV2SendAfterBooking(formEditCourse.courseId, 'status-send-after-booking')" class="font-light
                                border
                                border-solid
                                border-[#5799DB]
                                bg-white
                                rounded-[4px] w-[180px] h-[40px] text-[#5799DB]
                                hover:opacity-70
                        text-[14px] mr-[10px]">絞り込み条件 登録・編集
                                    </button>
                                </div>
                                <div class="w-full max-h-[250px] overflow-y-auto border border-solid border-[#E0E0E0]">
                                    <div class="setting_destination_area rounded-[4px] p-[10px] bg-[#F5F6F7] min-h-[115px] scroll-auto" v-if="calendarCourseSettingFilter.list_preview_filter_send_after_booking.length > 0">
                                        <div v-for="(preview, index) in calendarCourseSettingFilter.list_preview_filter_send_after_booking" v-html="preview" style="font-weight: 600">
                                        </div>
                                    </div>
                                    <div v-if="calendarCourseSettingFilter.list_preview_filter_send_after_booking == 0" class="mx-[15px] my-[15px] font-light border border-solid border-[#F8F8F8] rounded-[3px] flex justify-center items-center h-[40px]
                        bg-[#F8F8F8]">絞り込み条件が登録されていません
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade in !bg-white" id="message-send-approve-booking">
                                <div class="bg-[#F8F8F8] w-full h-[50px] flex justify-between align-items-center border border-solid border-[#DDDDDD] px-[15px] text-[14px]
                    text-[#222222]
                    font-light">
                                    <button :disabled="calendarCourseSettingNotify.use_message_notify_send_approve_booking == 1" @click="appendTextInformation('{name}', 2)" class="font-normal 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="calendarCourseSettingNotify.use_message_notify_send_approve_booking == 1" @click="showReservationInformationModal = true" class="hover:opacity-70 font-normal bg-white flex justify-center
                                items-center border border-solid !border-[#DDDDDD] rounded-[3px] w-[100px]
                        h-[30px]">予約情報</button>
                                    <button :disabled="calendarCourseSettingNotify.use_message_notify_send_approve_booking == 1" @click="showFriendInformationModal = true; getDataFriendInfo()" class="hover:opacity-70 font-normal bg-white flex
                                justify-center align-items-center border border-solid border-[#DDDDDD] rounded-[3px]
                                w-[100px] h-[30px]">友だち情報</button>
                                    <div class="link mr-[15px]">
                                        <a @click="insertExampleSentenceRequest" class="cursor-pointer text-[#5799DB] text-[14px] underline font-normal">例文を挿入する</a>
                                    </div>
                                    <div class="checkbox flex align-items-center font-light">
                                        <label class="custom-checkbox"><input v-model="calendarCourseSettingNotify.use_message_notify_send_approve_booking" type="checkbox" hidden="hidden"> <span></span></label>
                                        <span :class="calendarCourseSettingNotify.use_message_notify_send_approve_booking ? 'text-[#08BF5A]' : ''" class="font-normal">利用しない</span>
                                    </div>
                                </div>
                                <textarea id="message_notify_send_approve_booking" :disabled="calendarCourseSettingNotify.use_message_notify_send_approve_booking == 1" @select="saveCursorPosition" @click="saveCursorPosition" @keyup="saveCursorPosition" v-model="calendarCourseSettingNotify.message_notify_send_approve_booking" class="focus:outline-none font-light w-full
                                h-[400px] border border-solid
                                border-[#DDDDDD]
                                overflow-y-auto
                            border-t-0 bg-white p-[15px]"></textarea>
                                <div class="text-[#dc3545] text-[14px] mt-[5px] font-light">
                                    <span>@{{ errorsMessage.message_send_approve_booking }}</span>
                                </div>
                                <div class="text-right text-[#888888] text-[14px] font-light mt-[8px]">
                                    @{{ calendarCourseSettingNotify
                                    .message_notify_send_approve_booking ?
                                    calendarCourseSettingNotify
                                    .message_notify_send_approve_booking.length : 0 }}/5,000
                                </div>
                                <div class="mt-[25px] text-[#222222] text-[16px] mb-[10px] font-light">
                                    上記メッセージ送信以外に、タグ付け等のアクションを設定する場合はこちら↓
                                </div>
                                <div class="flex justify-between items-center w-full h-[70px] border border-solid border-[#E0E0E0] px-[15px] rounded-[3px]">
                                    <div class="h-full flex items-end border-b-2 border-solid border-b-[#08BF5A] text-[14px] text-[#08BF5A] !font-semibold">
                                        エルメアクション
                                    </div>
                                    <button class="hover:opacity-70 font-light border border-solid border-[#08BF5A] bg-white rounded-[4px] w-[180px] h-[40px] text-[#08BF5A]
                        text-[14px] mr-[10px]" @click="openSettingActionSendApproveBooking('calendar-salon-status-send-approve-booking', calendarCourseSettingAction.action_id_send_approve_booking)
                        ">アクション登録・編集
                                    </button>
                                </div>
                                <div class="w-full max-h-[400px] overflow-y-auto border border-solid border-[#E0E0E0] px-[15px]">
                                    @include('basic.calendar_salon.tabs.course.preview_action_send_approve_booking')
                                </div>
                                <div class="text-[#2B2F36] text-[18px] font-light mt-[55px] mb-[20px] font-semibold">
                                    コースの絞り込み表示
                                </div>
                                <div class="font-light border border-solid border-[#F8F8F8] rounded-[4px] w-full h-[64px]
                        bg-[#F8F8F8] px-[20px] py-[10px] text-[14px] text-[#222222]">
                                    以下で設定した条件を満たす友だちにだけこのコースを表示する設定です。<br>
                                    例）「新規顧客」タグが付いている友だちにだけ、新規顧客専用コースを表示する
                                    など
                                </div>
                                <div class="flex justify-between items-center w-full h-[70px] border border-solid border-[#E0E0E0] px-[15px] mt-[20px]">
                                    <div class="font-semibold text-[16px] text-[#222222]">対象人数</div>
                                    <div class="link">
                                        <a v-if="calendarCourseSettingFilter.list_preview_filter_send_after_booking.length == 0"
                                           @click="showNumberFilterSendAfterBooking" href="javascript:void(0)"
                                           class="font-semibold text-[16px] text-[#5799DB] mr-[110px] underline">@{{
                                            calendarCourseSettingFilter.filter_number }}人（友だち全員)
                                        </a>
                                        <a v-else @click="showNumberFilterSendAfterBooking" href="javascript:void(0)"
                                           class="font-semibold text-[16px] text-[#5799DB] underline ml-[-115px]">@{{
                                            calendarCourseSettingFilter.filter_number }}人
                                        </a>
                                    </div>
                                    <button @click="showModalFilterV2SendAfterBooking(formEditCourse.courseId, 'status-send-after-booking')" class="font-light
                                border
                                border-solid
                                border-[#5799DB]
                                bg-white
                                rounded-[4px] w-[180px] h-[40px] text-[#5799DB]
                                hover:opacity-70
                        text-[14px] mr-[10px]">絞り込み条件 登録・編集
                                    </button>
                                </div>
                                <div class="w-full max-h-[250px] overflow-y-auto border border-solid border-[#E0E0E0]">
                                    <div class="setting_destination_area rounded-[4px] p-[10px] bg-[#F5F6F7] min-h-[115px] scroll-auto"
                                         v-if="calendarCourseSettingFilter.list_preview_filter_send_after_booking.length > 0">
                                        <div v-for="(preview, index) in calendarCourseSettingFilter.list_preview_filter_send_after_booking" v-html="preview"
                                             style="font-weight: 600">
                                        </div>
                                    </div>
                                    <div v-if="calendarCourseSettingFilter.list_preview_filter_send_after_booking == 0" class="mx-[15px] my-[15px] font-light border border-solid border-[#F8F8F8] rounded-[3px] flex justify-center items-center h-[40px]
                        bg-[#F8F8F8]">絞り込み条件が登録されていません
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('basic.calendar_salon.modal.reservation_information')
            @include('basic.calendar_salon.modal.friend_information')
            @include('basic.calendar_salon.modal.delete_course')
        </div>
        <div class="mt-[17px]" :class="tabCourse == 2 ? 'w-[668px] pl-[35px] pr-[33px]' : 'w-[500px] px-[25px]'">
            <a class="text-[#5799DB] underline !text-[14px] cursor-pointer" @click="hyperlinkChangeTab()">
                @{{ tabCourse == 1 ? '予約完了・リクエスト承認時アクションを設定する' : '基本情報を設定する' }}
            </a>
            <div id="button-trans-preview" class="text-[16px] font-light mb-[8px] mt-[25px]">
                <button @click.prevent="updateCourse()" class="hover:opacity-70 font-light cursor-pointer !bg-[#FFFFFF] border border-solid border-[#08BF5A]
                    !rounded-[3px] text-[#08BF5A] w-[150px]
                    h-[35px] text-[16px]">保存
                </button>
            </div>
            <div id="button-trans-preview" class="flex text-[16px] font-light mb-[8px] mt-[25px]">
                <button @click.prevent="backToList()" class="hover:opacity-70 cursor-pointer !bg-[#FFFFFF] rounded-[3px] border border-solid border-[#DDDDDD]
                    text-[#535657] text-[14px] w-[100px] h-[35px] font-light">戻る
                </button>
                <a @click="handleDeleteCourse(courseId)" class="hover:opacity-70 font-light cursor-pointer text-[#F44336] text-[16px] ml-auto underline mt-[5px]">このコースを削除する</a>
            </div>
        </div>
    </div>
    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
@endsection
@push('js')
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>

    <script>
        var urlMedia = '