@push('css')
    <style>
        .setting-booking-custom-check:has(input:checked) {
            border: 2px solid #08BF5A;
        }

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

        .setting-booking-custom-check .custom-checkbox::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 0;
            width: 16px;
            height: 16px;
            border-radius: 16px;
            border: 1px solid #DDDDDD;
            background-color: #FFFFFF;
        }

        .setting-booking-custom-check input:checked + .custom-checkbox::before {
            background-color: #08BF5A;
            outline: 1px solid #08BF5A;
        }

        .setting-booking-custom-check input:checked + label {
            color: #08BF5A;
            font-weight: 600;
        }

        .setting-booking-custom-check {
            cursor: pointer;
        }

        .setting-display-course input:checked + label {
            color: #08BF5A;
            font-weight: 600;
        }

        .setting-display-course {
            cursor: pointer;
        }

        .setting-display-course input:checked + .custom-checkbox::before {
            background-color: #08BF5A;
            outline: 1px solid #08BF5A;
            width: 14px;
            height: 14px;
            left: 2px;
        }

        .setting-display-course .custom-checkbox::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 0;
            width: 16px;
            height: 16px;
            border-radius: 16px;
            border: 1px solid #DDDDDD;
            background-color: #FFFFFF;
        }

        .setting-display-course .custom-checkbox {
            padding-left: 30px;
            position: relative;
            display: block;
            width: 100%;
            border: none;
        }

        .box_setting_tooltip {
            visibility: hidden;
        }

        .wrap-tooltip:hover .box_setting_tooltip {
            visibility: visible;
        }

        .my_class {
            cursor: pointer;
            background: url(/images/expand_more.svg) 100% no-repeat #fff;
        }
    </style>
@endpush
<div class="content">
    <h2 class="mt-[10px] text-[#222222] text-[18px] !font-semibold">コースの表示設定</h2>
    <div class="text-[#222222] text-[14px] font-light mt-[10px]">
        このページでは、お客様に表示される予約ページの表示設定ができます。
    </div>
    <div class="text-[#222222] text-[14px] !font-semibold mt-[15px] mb-[15px]">コース選択の利用</div>
    <div class="relative max-w-[550px]">
        <div class="flex items-center setting-display-course mb-[10px]">
            <input type="radio" value="1" v-model="booking_setting_display.use_course" id="use_course"
                   class="w-[16px] h-[16px] !m-0 !mr-[7px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]"
                   @change="settingBookingDisplay()"
            >
            <label for="use_course"
                   class="text-[14px] font-light leading-[22px] text-[#888888]">コース選択を利用する</label>
        </div>
        <div class="flex items-center setting-display-course">
            <input type="radio" value="0" v-model="booking_setting_display.use_course" id="not_use_course"
                   class="w-[16px] h-[16px] !m-0 !mr-[7px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]"
                   @change="settingBookingDisplay()"
            >
            <label for="not_use_course"
                   class="text-[14px] font-light leading-[22px] text-[#888888]">コース選択を利用しない（予約時にコース選択ページをスキップします）</label>
            <div class="wrap-tooltip" style="cursor: default">
                <i class="setting_booking_tooltip text-[20px] text-[#888888] fas fa-question-circle"></i>
                <div class="box_setting_tooltip absolute left-[68%] bottom-[25px] w-[320px] p-[10px] bg-white rounded-[3px] shadow-[0_3px_6px_#00000029] text-[14px] text-[#222222] font-light">
                    <span class="block">オンライン面談など、お客様へのサービス内容と所要時間が1種類のみの場合に利用します。</span>
                </div>
            </div>
        </div>
    </div>
    <div v-if="booking_setting_display.use_course == 0" class="mt-[20px] mb-[25px] font">
        <div class="text-[#222222] text-[14px] !font-semibold">
            コースを利用しない場合のサービスの所要時間を入力してください <span class="text-[#F44336] ml-[30px] font-semibold">＊</span>
        </div>
        <div class="flex justify-start align-item-center mt-[10px] text-[#2B2F36] text-[16px] !font-light">
            <select v-model="booking_setting_display.time_make_course_hourDone"
                    @change="settingBookingDisplay()"
                    class="font-light my_class text-[#2B2F36] text-[16px] !w-[80px] !h-[40px] px-[10px] border-solid border-1 !border-[#DDDDDD] bg-white rounded-[4px]">
                @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 v-model="booking_setting_display.time_make_course_minuteDone"
                    @change="settingBookingDisplay()"
                    class="font-light my_class text-[#2B2F36] text-[16px] !w-[80px] !h-[40px] px-[10px] border-solid border-1 !border-[#DDDDDD] bg-white rounded-[4px]">
                @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>
    <div class="text-[14px] text-[#222222] !font-semibold mt-[15px] mb-[10px]">コース料金の表示</div>
    <div class="flex gap-3">
        <div @click="clickRadioButton('display_cost')"
             class=" setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD] w-[300px] h-[320px] bg-[#FFFFFF] rounded-[3px] px-[20px] py-[15px]">
           <div class="flex items-start mb-[5px]">
               <input type="radio" ref="display_cost" v-model="booking_setting_display.display_course_cost" value="1"
                      @change="settingBookingDisplay()"
                      id="display_cost"
                      class="w-[16px] h-[16px] !m-0 !mr-[7px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]">
               <label for="display_cost"
                      class="text-[14px] font-light leading-[16px] text-[#888888]">表示する</label>
           </div>

            <img src="/images/setting_course_1.png">
        </div>
        <div @click="clickRadioButton('not_display_cost')"
             class="setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD] w-[300px] h-[320px] bg-[#FFFFFF] rounded-[3px] px-[20px] py-[15px]">
            <div class="flex items-start mb-[5px]">
                <input type="radio" ref="not_display_cost" value="0" v-model="booking_setting_display.display_course_cost"
                       @change="settingBookingDisplay()"
                       id="not_display_cost"
                       class="w-[16px] h-[16px] !m-0 !mr-[7px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]">
                <label for="not_display_cost"
                       class="text-[14px] font-light leading-[16px] text-[#888888]">表示しない</label>
            </div>
            <img src="/images/setting_course_2.png">
        </div>
    </div>
    <div class="text-[#222222] text-[14px] font-light mt-[10px]">
        ※ 決済機能を利用している場合は、自動的にコース料金が表示されます。
    </div>
    <div class="text-[#222222] text-[14px] !font-semibold mt-[30px] mb-[10px]">
        コースの所要時間の表示
    </div>
    <div class="flex gap-3">
        <div @click="clickRadioButton('display_time_make_course')"
             class=" setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD] w-[300px] h-[320px] bg-[#FFFFFF] rounded-[3px] px-[20px] py-[15px]">
            <div class="flex items-start mb-[5px]">
                <input type="radio" ref="display_time_make_course" id="display_time_make_course"
                       @change="settingBookingDisplay()"
                       v-model="booking_setting_display.display_time_make_course" value="1"
                       class="w-[16px] h-[16px] !m-0 !mr-[7px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]">
                <label for="display_time_make_course"
                       class="text-[14px] font-light leading-[16px] text-[#888888]">表示する</label>
            </div>
            <img src="/images/setting_time_1.png">

        </div>
        <div @click="clickRadioButton('not_display_time_make_course')"
             class=" setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD] w-[300px] h-[320px] bg-[#FFFFFF] rounded-[3px] px-[20px] py-[15px]">
            <div class="flex items-start mb-[5px]">
                <input type="radio" ref="not_display_time_make_course" id="not_display_time_make_course"
                       @change="settingBookingDisplay()"
                       v-model="booking_setting_display.display_time_make_course" value="0"
                       class="w-[16px] h-[16px] !m-0 !mr-[7px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]">
                <label for="not_display_time_make_course"
                       class="text-[14px] font-light leading-[16px] text-[#888888]">表示しない</label>
            </div>
            <img src="/images/setting_time_2.png">
        </div>
    </div>
{{--    <button type="button" @click.prevent="settingBookingDisplay()"--}}
{{--            class="hover:opacity-70 text-[#08BF5A] text-[16px] font-light bg-[#FFFFFF] rounded-[3px] border border-solid border-[#08BF5A] w-[200px] h-[40px] text-center leading-[40px] my-[30px]">--}}
{{--        保存--}}
{{--    </button>--}}
</div>