@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%;
    }

    .setting-booking-custom-check .custom-checkbox::before {
        content: '';
        position: absolute;
        top: 0;
        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_show_calendar input[type="radio"]:checked + span {
        color: #08BF5A;
        font-weight: 600;
    }
</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]">コース料金</div>
    <div class="flex gap-3 mt-[20px]">
        <div @click="clickRadioButton('radio1')" class="setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD]
         w-[200px]
{{--         h-[150px]--}}
        bg-[#FFFFFF] rounded-[3px]
        px-[20px] py-[15px]">
            <input type="radio" ref="radio1" v-model="booking_setting_display.is_display_course_cost" value="1" id="check1" class="w-[20px] h-[20px]
            rounded-[3px]
            bg-[#FFFFFF] border
            border-solid border-[#DDDDDD]
            hidden">
            <label for="check1" class="custom-checkbox text-[14px] font-light leading-[16px] text-[#888888]">表示する</label>
            <div class="w-[150px] rounded-[5px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] px-[10px] py-[10px]">
                <div class="!font-semibold text-[#2B2F36] text-[8px]">
                    初心者向けコース
                </div>
                <hr class="border border-solid border-[#DDDDDD]">
                <div class="flex justify-between items-start gap-2 mt-[4px] h-[60px]">
                    <div class="w-[76px] h-[60px] rounded-[5px]">
                        <img class="w-full h-full rounded-[5px] overflow-hidden" src="/images/item_booking.png" alt="">
                    </div>
                    <div>
                        <div class="text-[#747474] text-[6px] !font-semibold">所要時間</div>
                        <div class="text-[7px] !font-semibold text-[#222222] mt-[3px]">0時間45分</div>
                        <div class="text-[#747474] text-[6px] !font-semibold mt-[7px]">料金（税込）</div>
                        <div class="text-[#2B2F36] text-[7px] !font-semibold mt-3px">￥5,000-</div>
                        <div class="mt-[-3px]">
                            <a class="text-[#5799DB] text-[6px] !font-semibold" href="javascript:void(0)">詳細を見る</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div @click="clickRadioButton('radio2')" class="setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD]
        w-[200px]
{{--        h-[150px]--}}
        bg-[#FFFFFF] rounded-[3px]
        px-[20px] py-[15px]">
            <input type="radio" ref="radio2" value="0" v-model="booking_setting_display.is_display_course_cost" id="check2" class="w-[20px] h-[20px]
            rounded-[3px]
            bg-[#FFFFFF]
            border border-solid border-[#DDDDDD] hidden">
            <label for="check2" class="custom-checkbox text-[14px] font-light leading-[16px] text-[#888888]">表示しない</label>
            <div class="w-[150px] rounded-[5px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] px-[10px] py-[10px]">
                <div class="!font-semibold text-[#2B2F36] text-[8px]">
                    初心者向けコース
                </div>
                <hr class="border border-solid border-[#DDDDDD]">
                <div class="flex justify-between items-start gap-2 mt-[4px] h-[60px]">
                    <div class="w-[76px] h-[60px] rounded-[5px]">
                        <img class="w-full h-full rounded-[5px] overflow-hidden" src="/images/item_booking.png" alt="">
                    </div>
                    <div class="flex flex-col h-[65px] justify-between">
                        <div>
                            <div class="text-[#747474] text-[6px] !font-semibold">所要時間</div>
                            <div class="text-[7px] !font-semibold text-[#222222] mt-[3px]">0時間45分</div>
                        </div>
                        <div>
                            <a class="text-[#5799DB] text-[6px] !font-semibold" href="javascript:void(0)">詳細を見る</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-[#222222] text-[14px] font-light mt-[10px]">
        ※ 決済機能を利用している場合は、自動的にコース料金が表示されます。
    </div>
    <div class="text-[#222222] text-[14px] !font-semibold mt-[30px]">
        残りの定員（残席）数の表示
    </div>
    <div class="flex gap-3 mt-[10px]">
        <div @click="clickRadioButton('radio3')" class="setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD]
        w-[200px]
        h-[150px]
        bg-[#FFFFFF] rounded-[3px]
        px-[20px] py-[15px]">
            <input type="radio" ref="radio3" id="check3" v-model="booking_setting_display.is_display_capacity" value="1" class="w-[20px] h-[20px]
            rounded-[3px]
            bg-[#FFFFFF] border border-solid
            border-[#DDDDDD] hidden">
            <label for="check3" class="custom-checkbox text-[14px] font-light leading-[16px] text-[#888888]">表示する</label>
            <div class="border border-solid border-[#DDDDDD] rounded-[5px] mt-[8px] py-[8px] text-center">
                <div class="text-[#2B2F36] text-[14px] !font-semibold">
                    12:00 - 13:00
                </div>
                <div class="flex justify-center items-center mt-[5px]">
                    <div class="w-[20px] h-[20px] border-2 border-solid border-[#38BF5A] rounded-[20px] bg-[#FFFFFF]"></div>
                </div>
                <div class="text-[#2B2F36] text-[12px] !font-semibold mt-[7px]">
                    残り 3
                </div>
            </div>
        </div>
        <div @click="clickRadioButton('radio4')" class="setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD]
        w-[200px]
        h-[150px]
        bg-[#FFFFFF] rounded-[3px]
        px-[20px] py-[15px]">
            <input type="radio" ref="radio4" id="check4" v-model="booking_setting_display.is_display_capacity" value="0" class="w-[20px] h-[20px]
            rounded-[3px]
            bg-[#FFFFFF] border
            border-solid border-[#DDDDDD] hidden">
            <label for="check4" class="custom-checkbox text-[14px] font-light leading-[16px] text-[#888888]">表示しない</label>
            <div class="border border-solid border-[#DDDDDD] rounded-[5px] mt-[8px] py-[8px] text-center">
                <div class="text-[#2B2F36] text-[14px] !font-semibold">
                    12:00 - 13:00
                </div>
                <div class="flex justify-center items-center mt-[5px]">
                    <div class="w-[20px] h-[20px] border-2 border-solid border-[#38BF5A] rounded-[20px] bg-[#FFFFFF]"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-[#222222] text-[14px] !font-semibold mt-[25px]">満席（予約上限に達している）のコース</div>
    <div class="flex gap-3 mt-[10px]">
        <div @click="clickRadioButton('radio5')" class="setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD]
        w-[200px]
        h-[150px]
        bg-[#FFFFFF] rounded-[3px]
        px-[20px] py-[15px]">
            <input type="radio" ref="radio5" id="check5" v-model="booking_setting_display.is_display_course_full" value="1" class="w-[20px] h-[20px]
            rounded-[3px]
            bg-[#FFFFFF] border border-solid
            border-[#DDDDDD] hidden">
            <label for="check5" class="custom-checkbox text-[14px] font-light leading-[16px] text-[#888888]">表示する</label>
            <div class="border border-solid border-[#DDDDDD] bg-[#F8F8F8] rounded-[5px] mt-[8px] py-[8px] text-center">
                <div class="text-[#2B2F36] text-[14px] !font-semibold">
                    12:00 - 13:00
                </div>
                <div class="flex justify-center items-center mt-[10px]">
                    <div class="w-[15px] h-[3px] bg-[#888888]"></div>
                </div>
                <div class="text-[#2B2F36] text-[12px] !font-semibold mt-[12px]">
                    残り 0
                </div>
            </div>
        </div>
        <div @click="clickRadioButton('radio6')" class="setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD]
        w-[200px]
        h-[50px]
        bg-[#FFFFFF] rounded-[3px]
        px-[20px] py-[15px]">
            <input type="radio" ref="radio6" id="check6" v-model="booking_setting_display.is_display_course_full" value="0" class="w-[20px] h-[20px]
            rounded-[3px]
            bg-[#FFFFFF] border
            border-solid border-[#DDDDDD] hidden">
            <label for="check6" class="custom-checkbox text-[14px] font-light leading-[16px] text-[#888888]">表示しない</label>
        </div>
    </div>
    <div class="text-[#222222] text-[14px] font-light mt-[10px]">※ キャンセル待ちを利用している場合は、自動的にキャンセル待ち予約が表示されます。</div>
    <div class="mt-[40px] setting_show_calendar">
        <p class="font-semibold">週・月 表示設定</p>
        <p>お客様に表示される予約ページで週・月のどちらを先に表示するかの設定ができます。</p>
        <div class="mt-[15px]">
            <label class="flex items-center">
                <input type="radio" class="!m-0 !mr-[5px]" v-model="booking_setting_display.setting_show_calendar" name="setting_show_calendar" value="week">
                <span class="text-[#888888]">週を先に表示</span>
            </label>
            <label class="flex items-center mt-[10px]">
                <input type="radio" class="!m-0 !mr-[5px]" v-model="booking_setting_display.setting_show_calendar" name="setting_show_calendar" value="month">
                <span class="text-[#888888]">月を先に表示</span>
            </label>
        </div>
    </div>
    <div class="text-[#222222] text-[14px] !font-semibold mt-[30px]">システムワード変更</div>
    <div class="flex items-center gap-5 mt-[10px]">
        <div class="text-center">
            <div class="flex gap-5 items-center">
                <div>
                    <div class="text-[#222222] text-[14px] font-light mb-[10px]">現在</div>
                <div class="text-[14px] text-[#222222] font-light w-[150px] h-[40px] bg-[#F8F8F8] border border-solid border-[#DDDDDD] rounded-[3px]
            leading-[40px]">コース
                </div>
                </div>
                <span class="relative top-[16px] text-[#222222] text-[14px] font-light">→</span>
            </div>
        </div>
        <div class="text-center">
            <div class="flex items-end text-center">
                <div>
                    <div class="text-[#222222] text-[14px] font-light mb-[10px]">変更後</div>
                    <input placeholder="例）レッスン" type="text" v-model="booking_setting_display.booking_setting_name" class="form-control placeholder-[#E0E0E0] text-center text-[14px] text-[#222222]
                           font-light !w-[200px]
                    !h-[40px]
                    bg-[#FFFFFF]
                    border
                border-solid border-[#DDDDDD]
                rounded-[3px]
                leading-[40px]">
                </div>
                <span class="ml-[8px] text-[14px] font-light text-[#888888]">@{{ booking_setting_display.booking_setting_name ? booking_setting_display.booking_setting_name.length : 0 }}/10</span>
            </div>
        </div>
    </div>
    <button @click.prevent="settingBookingDisplay()" class="text-[#08BF5A] text-[16px] font-light bg-[#FFFFFF] rounded-[3px] border border-solid
    border-[#08BF5A]
    w-[200px]
    h-[40px] text-center
    leading-[40px] mt-[35px]" type="button">保存</button>
</div>