@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;
        }
        .content {
            padding-bottom: 40px;
        }
    </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="mt-3 mb-5">
        <div class="mb-3 !font-[600]">スタッフ選択の利用</div>
        <div class="flex items-center setting-display-course mb-[10px]">
            <input type="radio" v-model="settingStaff.is_show_staff" value="1" id="is_show_staff"
                   class="w-[16px] h-[16px] !m-0 !mr-[7px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]"
                   @change="settingStaffDisplay()"
            >
            <label for="is_show_staff" :class="settingStaff.is_show_staff == 1 ? '!font-[600]' : ''"
                   class="text-[14px] font-light leading-[22px] text-[#888888]">スタッフ選択を利用する</label>
        </div>
        <div class="flex items-center setting-display-course mb-[10px]">
            <input type="radio" v-model="settingStaff.is_show_staff" value="0" id="not_is_show_staff"
                   class="w-[16px] h-[16px] !m-0 !mr-[7px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]"
                   @change="settingStaffDisplay()"
            >
            <label for="not_is_show_staff" :class="settingStaff.is_show_staff == 0 ? '!font-[600]' : ''"
                   class="text-[14px] font-light leading-[22px] text-[#888888]">スタッフ選択を利用しない（予約時にスタッフ選択ページをスキップします）</label>
        </div>
        <div class="w-[620px] py-[5px] px-[8px] bg-[#F8F8F8] rounded-[4px] mt-4">
            <span class="!font-[600]">スタッフ選択を利用しない とは？</span><br/>
            お客様にスタッフ名を表示したくない場合に利用する設定です。<br/>
            利用しない場合でも、登録されているシフトを基準に予約の受付を行います。予約はスタッフ指定なしの枠に追加されますが、受付時には「スタッフ対応可能なコース」も適用されます。
        </div>
    </div>
    <div v-show="settingStaff.is_show_staff == 1">
        <div class="text-[#222222] text-[14px] !font-semibold mt-[15px]">スタッフを「指定しない」（指名なし）の利用</div>
        <div class="flex gap-3 mt-[20px]">
            <div @click="clickRadioButton('not_use_staff')" class="setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD]
             w-[300px] h-[300px]
            bg-[#FFFFFF] rounded-[3px]
            px-[20px] py-[15px]">
                <input type="radio" ref="not_use_staff" v-model="settingStaff.use_staff" value="0" id="not_use_staff"
                       @change="settingStaffDisplay()"
                       class="w-[20px] h-[20px]
                rounded-[3px]
                bg-[#FFFFFF] border
                border-solid border-[#DDDDDD]
                hidden">
                <label for="not_use_staff" class="custom-checkbox text-[14px] font-light leading-[16px] text-[#888888]">利用しない</label>
                <img src="/images/staff_no_use.png">

            </div>
            <div @click="clickRadioButton('use_staff')" class="setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD]
            w-[300px] h-[300px]
            bg-[#FFFFFF] rounded-[3px]
            px-[20px] py-[15px]">
                <input type="radio" ref="use_staff" value="1" v-model="settingStaff.use_staff" id="use_staff"
                       @change="settingStaffDisplay()"
                       class="w-[20px] h-[20px]
                rounded-[3px]
                bg-[#FFFFFF]
                border border-solid border-[#DDDDDD] hidden">
                <label for="use_staff"
                       class="custom-checkbox text-[14px] font-light leading-[16px] text-[#888888]">利用する</label>
                <img src="/images/staff_use.png">

            </div>
        </div>
        <div class="text-[#222222] text-[14px] !font-semibold mt-[30px]">
            スタッフ料金の表示
        </div>
        <div class="flex gap-3 mt-[10px]">
            <div @click="clickRadioButton('display_staff_cost')" class="setting-booking-custom-check form-setting-booking-checkbox border border-solid border-[#DDDDDD]
            w-[300px]
            h-[210px]
            bg-[#FFFFFF] rounded-[3px]
            px-[20px] py-[15px]">
                <input type="radio" ref="display_staff_cost" id="display_staff_cost"
                       @change="settingStaffDisplay()"
                       v-model="settingStaff.display_staff_cost" value="1" class="w-[20px] h-[20px]
                rounded-[3px]
                bg-[#FFFFFF] border border-solid
                border-[#DDDDDD] hidden">
                <label for="display_staff_cost"
                       class="custom-checkbox text-[14px] font-light leading-[16px] text-[#888888]">表示する</label>
                <img src="/images/staff_fee_show.png">
            </div>
            <div @click="clickRadioButton('not_display_staff_cost')" class="setting-booking-custom-check form-setting-booking-checkbox border border-solid
            border-[#DDDDDD]
             w-[300px]
            h-[210px]
            bg-[#FFFFFF] rounded-[3px]
            px-[20px] py-[15px]">
                <input type="radio" ref="not_display_staff_cost" id="not_display_staff_cost"
                       @change="settingStaffDisplay()"
                       v-model="settingStaff.display_staff_cost" value="0" class="w-[20px] h-[20px]
                rounded-[3px]
                bg-[#FFFFFF] border
                border-solid border-[#DDDDDD] hidden">
                <label for="not_display_staff_cost"
                       class="custom-checkbox text-[14px] font-light leading-[16px] text-[#888888]">表示しない</label>
                <img src="/images/staff_fee_hide.png">
            </div>
        </div>
    </div>

    <div class="mt-[30px]">
        <p class="font-semibold">スタッフ「指定なし」が選択された時のスタッフ自動割り当て</p>
        <div class="w-[620px] h-[95px] bg-[#F8F8F8] rounded-[4px] px-[13px] py-[6px] mt-[10px] mb-[20px]">
            <p class="font-semibold">スタッフ自動割り当てとは？</p>
            <p>「スタッフ指定なし」の予約が入った場合、シフトが登録されているスタッフに自動で予約が割り当てられます。</p>
            <p>自動割り当てされた場合、スタッフ料金は請求されません。</p>
        </div>
        <div class="mb-[20px]">
            <label class="flex items-center mb-[10px]">
                <input type="radio" class="!m-0 !mr-[6px]" name="staff-instead" value="0" v-model="settingStaff.staff_assignment_type" @change="settingStaffDisplay()">
                <span class="text-[#888888]">スタッフ自動割り当てを利用しない（指定なしのまま or 手動でスタッフを割り当てる）</span>
            </label>
            <label class="flex items-center mb-[10px]">
                <input type="radio" class="!m-0 !mr-[6px]" name="staff-instead" value="1" v-model="settingStaff.staff_assignment_type" @change="settingStaffDisplay()">
                <span class="text-[#888888]">ランダムにスタッフの自動割り当てをする</span>
            </label>
            <label class="flex items-center">
                <input type="radio" class="!m-0 !mr-[6px]" name="staff-instead" value="2" v-model="settingStaff.staff_assignment_type" @change="settingStaffDisplay()">
                <span class="text-[#888888]">優先順位を設定してスタッフの自動割り当てをする</span>
            </label>
        </div>
        <div class="mb-[10px]" v-if="settingStaff.staff_assignment_type == 2">
            <p class="font-semibold">優先順位</p>
            <p class="mt-[8px]">数字が小さい順に予約が割り当てられます</p>
            <div class="mt-[15px] w-[370px] h-[300px] pl-[16px] py-[20px] border border-solid border-[#DDDDDD] rounded-[5px] overflow-y-auto">
                <template v-for="(item, key) in staffListAssignment">
                    <div class="flex items-center mb-[15px]">
                        <span class="text-[16px] font-semibold d-block w-[20px]">@{{ key + 1 }}</span>
                        <div class="flex items-center w-[300px] h-[40px] bg-[#F8F8F8] border border-solid border-[#E0E0E0] rounded-[5px] ml-[10px]">
                            <img :src="item.staff_image ? '{{ env('URL_SERVER_MEDIA') }}' + item.staff_image : '/images/avatar_default_line_user.png'"
                                 class="w-[24px] h-[24px] rounded-full mx-[10px]" alt="">
                            <span>@{{ item.staff_system_name }}</span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <a class="text-[#5799DB] font-semibold underline cursor-pointer"
           @click="showSortStaffAssignment = true"
           v-if="settingStaff.staff_assignment_type == 2"
        >設定を変更する</a>
    </div>
    @include('basic.calendar_salon.modal.modal_sort_staff_assignment')

{{--    <button @click.prevent="settingStaffDisplay()"--}}
{{--            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] mt-[35px]"--}}
{{--            type="button">保存--}}
{{--    </button>--}}
</div>