@push('css')
    <style>
        .bgnone {
            background: none;
        }
    </style>
@endpush
<div>
    <div class="overflow-x-scroll display-course-day">
        
        <div class="inline-flex items-center">
            <div class="sticky left-0 z-[4] w-[200px] border-t border-l border-r border-solid border-[#DDDDDD] h-[40px] !font-semibold bg-[#FFFFFF] text-[#FFFFFF]">
                asd
            </div>
            <template v-for="(time, key) in calendarTimesHalf">
                <div class="w-[150px] border-t border-solid border-[#DDDDDD] pl-[8px] h-[40px] flex items-center !font-semibold bg-[#FFFFFF]"
                     :style="key % 2 == 0 ? 'border-right: 1px dashed #DDDDDD' : 'border-right: 1px solid #DDDDDD'"
                >@{{ time }}
                </div>
            </template>
        </div>
        <template v-for="staff in bookingStaff">
            <div class="inline-flex items-center group" v-show="!staff.isDayOf">
                <div class="sticky left-0 z-[4] w-[200px] border-t border-l border-r border-solid border-[#DDDDDD] p-[8px] bg-[#FFFFFF]"
                     :class="'h-['+ (74 * staff.maxLine) +'px]'">
                    <p class="text-[16px] font-semibold">@{{ staff.staffName }}</p>
                    <p class="text-[12px]">同時に対応できる数：<a class="text-[#5799DB] underline cursor-pointer"
                                                                 @click="redirectTab('#setting-calendar-tab', 'setting-limit-booking')">@{{
                            staff.isUnspecified ? '説明を見る' : staff.limitedQuantity }}</a></p>
                </div>

                <template v-for="(booking, key) in staff.bookingList">
                    <div class="w-[150px] border-t border-solid border-[#DDDDDD] bg-[#F8F8F8] flex items-center relative item-booking-staff"
                         :class="'h-['+ (74 * staff.maxLine) +'px]'"
{{--                         :style="key % 2 == 0 ? 'border-right: 1px dashed #DDDDDD' : 'border-right: 1px solid #DDDDDD'"--}}
                    >
                        <template v-if="!booking.hasBooking && filterShow.includes('4')">
                            <template v-if="booking.isStart && booking.canBook">
                                <template v-if="booking.timeStartSlotReal > booking.timeStartSlot">
                                    <div @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full"
                                         v-if="booking.spaceStartCanBook < 1 && booking.showCannotBooking"
                                         :class="'w-[' + ((1 - booking.spaceStartCanBook) * 150) + 'px]'"
                                    >
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                    <div @click="showDetailStaff(staff)"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full"
                                         v-if="booking.showCanBooking"
                                         :class="'w-[' + (booking.spaceStartCanBook * 150) + 'px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                </template>
                                <template v-else>
                                    <div @click="showDetailStaff(staff)"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full"
                                         v-if="booking.showCanBooking"
                                         :class="'w-[' + (booking.spaceStartCanBook * 150) + 'px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                    <div @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full"
                                         v-if="booking.spaceStartCanBook < 1 && booking.showCannotBooking"
                                         :class="'w-[' + ((1 - booking.spaceStartCanBook) * 150) + 'px]'"
                                    >
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                </template>
                            </template>
                            <template v-else-if="booking.isEnd && booking.canBook">
                                <div @click="showDetailStaff(staff)"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full"
                                     v-if="booking.showCanBooking"
                                     :class="'w-[' + (booking.spaceEndCanBook * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                                <div @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full"
                                     v-if="booking.spaceEndCanBook < 1 && booking.showCannotBooking"
                                     :class="'w-[' + ((1 - booking.spaceEndCanBook) * 150) + 'px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                            </template>
                            <template v-else-if="booking.canBook">
                                <div @click="showDetailStaff(staff)"
                                     class="w-[150px] flex items-center justify-center bg-[#EDF4FB] h-full"
                                     v-if="booking.showCanBooking">
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                            </template>
                            <template v-else>
                                <div @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="w-[150px] flex items-center justify-center bg-[#F8F8F8] h-full"
                                     v-if="booking.showCannotBooking">
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                            </template>
                        </template>
                        <template v-else>
                            <template
                                    v-if="booking.isStart && !booking.isEnd && booking.canBook && !booking.hasBooking && filterShow.includes('4')">
                                <div @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full"
                                     v-if="booking.spaceStartCanBook < 1 && booking.showCannotBooking"
                                     :class="'w-[' + ((1 - booking.spaceStartCanBook) * 150) + 'px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                                <div @click="showDetailStaff(staff)"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full"
                                     v-if="booking.showCanBooking"
                                     :class="'w-[' + (booking.spaceStartCanBook * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                            </template>
                            <template v-if="booking.hasBooking && booking.isStartBooking">
                                <div @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full"
                                     v-if="!booking.canBook && booking.showCannotBooking && booking.spaceBreakTimeBefore > 0 && filterShow.includes('4')"
                                     :class="'w-[' + ((1 - booking.spaceStartCanBook - booking.spaceBreakTimeBefore) * 150) + 'px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                                <div @click="showDetailStaff(staff)"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full"
                                     v-else-if="booking.canBook && booking.showCanBooking && filterShow.includes('4')"
                                     :class="'w-[' + (booking.spaceEndCanBook * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                                <div class="absolute flex z-[2] h-[73px] pt-[3px] bg-[#FFFFFF]"
                                     v-for="(bookingInTime, key2) in booking.listCalendarInTime"
                                     :class="'left-[' + ((staff.breakTimeBefore ? bookingInTime.spaceBreakTimeBefore : bookingInTime.spaceBooking) * 150) + 'px] top-['+ (bookingInTime.line == 0 ? 0 : (bookingInTime.line * 74)) +'px]'"
                                >
                                    <div v-if="staff.breakTimeBefore" class="h-[66px] cursor-pointer"
                                         @click="showModalBreakTimeBeforeAfterBooking('before', staff.breakTimeBefore, bookingInTime)"
                                         :class="bookingInTime.widthBreakTimeBefore >= 0 ? 'w-[' + (bookingInTime.widthBreakTimeBefore * 150) + 'px]' : 'w-[' + (-bookingInTime.widthBreakTimeBefore * 150) + 'px]'"
                                    >
                                        <div class="bg-[#E7E7E7] rounded-[5px] h-full p-[6px]">
                                            <i class="far fa-arrow-from-right text-[20px]"></i>
                                            <span v-if="staff.breakTimeBefore > 15">前空き時間</span>
                                            <p class="text-[12px]">@{{ getDescriptionBreakTimeFromValue(staff.breakTimeBefore) }}</p>
                                        </div>
                                    </div>
                                    <template v-if="filterShow.includes('1')">
                                        <div @click="showDetailBooking(bookingInTime.booking_id, 'day')"
                                             class="h-[66px] rounded-[5px] relative z-[2] mx-[2px] cursor-pointer"
                                             :class="'w-[' + ((bookingInTime.widthBooking * 150) - 5) + 'px] !bg-['+bgContentBooking(bookingInTime.status)+']'">
                                            <div class="w-full h-[10px] rounded-tl-[5px] rounded-tr-[5px]"
                                                 :class="'bg-['+bgHeaderBooking(bookingInTime.status)+']'"></div>
                                            <div class="pl-[5px] h-[56px]">
                                                <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                                   class="font-semibold">
                                                    <i v-if="classIconBooking(bookingInTime.status) == 'circle'"
                                                       class="far fa-circle text-[14px]"
                                                       :class="'text-['+bgHeaderBooking(bookingInTime.status)+']'"></i>
                                                    <i v-else-if="classIconBooking(bookingInTime.status) == 'triangle'"
                                                       class="far fa-triangle text-[14px]"
                                                       :class="'text-['+bgHeaderBooking(bookingInTime.status)+']'"></i>
                                                    <i v-else class="far fa-times text-[14px]"
                                                       :class="'text-['+bgHeaderBooking(bookingInTime.status)+']'"></i>
                                                    @{{ bookingInTime.startTimeBooking }} -
                                                    @{{bookingInTime.endTimeBooking }}
                                                </p>
                                                <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                                   class="text-[12px] block">@{{ bookingInTime.lineBookingName }}</p>
                                                <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                                   class="text-[12px] block">@{{ bookingInTime.courseName }}</p>
                                            </div>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div class="h-[66px] rounded-[5px] relative z-[2] mx-[2px] cursor-pointer"
                                             :class="'w-[' + ((bookingInTime.widthBooking * 150) - 5) + 'px]'">
                                        </div>
                                    </template>
                                    <div v-if="staff.breakTimeAfter > 0" class="h-[66px] cursor-pointer"
                                         @click="showModalBreakTimeBeforeAfterBooking('after', staff.breakTimeAfter, bookingInTime)"
                                         :class="'w-[' + (bookingInTime.spaceBreakTimeAfter * 150) + 'px]'"
                                    >
                                        <div class="bg-[#E7E7E7] rounded-[5px] h-full p-[6px]">
                                            <i class="far fa-arrow-from-left text-[20px]"></i>
                                            <span v-if="staff.breakTimeAfter > 15"> 後空き時間</span>
                                            <p class="text-[12px]">@{{ getDescriptionBreakTimeFromValue(staff.breakTimeAfter) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <template
                                    v-if="booking.hasBooking && !booking.isStartBooking && !booking.isLastBooking && filterShow.includes('4')">
                                <div @click="showDetailStaff(staff)" v-if="booking.canBook"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full"
                                     v-if="booking.showCanBooking"
                                     :class="'w-[' + (booking.spaceEndCanBook * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                                <div v-else-if="!booking.canBook && booking.showCannotBooking"
                                     @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full"
                                     :class="'w-[' + (booking.spaceEndCanBook * 150) + 'px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                            </template>
                            <template v-if="booking.hasBooking && booking.isLastBooking && filterShow.includes('4')">
                                <template v-if="booking.isEnd && booking.canBook">
                                    <div @click="showDetailStaff(staff)"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full"
                                         v-if="booking.showCanBooking"
                                         :class="'w-[' + (booking.spaceEndCanBook * 150) + 'px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                    <div @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full"
                                         v-if="booking.spaceEndCanBook < 1 && booking.showCannotBooking"
                                         :class="'w-[' + ((1 - booking.spaceEndCanBook) * 150) + 'px]'"
                                    >
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                </template>
                                <template v-else>
                                    <div @click="showDetailStaff(staff)"
                                         v-if="booking.spaceStartCanBook > 0 && booking.showCanBooking && booking.canBook"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full"
                                         :class="'w-[' + (booking.spaceStartCanBook * 150) + 'px] ml-[' + ((1 - booking.spaceStartCanBook) * 150) + 'px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                    <div @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         v-else-if="booking.showCannotBooking && booking.spaceStartCanBook > 0"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full"
                                         :class="'w-[' + (booking.spaceStartCanBook * 150) + 'px] ml-[' + ((1 - booking.spaceStartCanBook) * 150) + 'px]'">
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                </template>
                            </template>
                            <template
                                    v-else-if="booking.isEnd && booking.canBook && !booking.hasBooking && filterShow.includes('4')">
                                <div @click="showDetailStaff(staff)"
                                     v-if="booking.spaceEndCanBook > 0 && booking.showCanBooking"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full"
                                     :class="'w-[' + (booking.spaceEndCanBook * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                                <div @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     v-if="booking.spaceEndCanBook < 1 && booking.showCannotBooking"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full"
                                     :class="'w-[' + ((1 - booking.spaceEndCanBook) * 150) + 'px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                            </template>
                            <template
                                    v-else-if="!booking.isStart && booking.canBook && !booking.hasBooking && filterShow.includes('4')">
                                <div @click="showDetailStaff(staff)" v-if="booking.showCanBooking"
                                     :class="'w-[' + (booking.spaceEndCanBook * 150) + 'px]'"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full">
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                            </template>
                            <template
                                    v-else-if="!booking.canBook && !booking.hasBooking && booking.spaceEndCanBook > 0 && filterShow.includes('4')">
                                <div @click="showReasonCannotBook(booking.reasonCannotBook, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full"
                                     :class="'w-[' + (booking.spaceEndCanBook * 150) + 'px]'"
                                     v-if="booking.showCannotBooking">
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                            </template>
                        </template>
                    </div>
                </template>
            </div>
            <div class="inline-flex items-center" v-show="staff.isDayOf && !filterShow.includes('5')">
                <div class="sticky left-0 z-[4] w-[200px] border-t border-l border-r border-solid border-[#DDDDDD] p-[8px] bg-[#FFFFFF]"
                     :class="'h-['+ (74 * staff.maxLine) +'px]'">
                    <p class="text-[16px] font-semibold">@{{ staff.staffName }}</p>
                    <p class="text-[12px]">同時に対応できる数：<a class="text-[#5799DB] underline cursor-pointer"
                                                                 @click="redirectTab('#setting-calendar-tab', 'setting-limit-booking')">@{{
                            staff.isUnspecified ? '説明を見る' : staff.limitedQuantity }}</a></p>
                </div>
                <template v-for="(time, key) in calendarTimesHalf">
                    <div class="w-[150px] border-t border-solid border-[#DDDDDD] relative h-[74px]"></div>
                </template>
                <div class="absolute flex pl-[10px] items-center bg-[#E0E0E0] h-[70px] dynamicDiv left-[232px] z-[1] rounded-[5px]"
                     @click="showDetailStaff(staff, true)"
                >
                    <div>
                        <label class="text-[14px] text-[#222222] font-semibold">休日</label>
                    </div>
                </div>
            </div>
        </template>
    </div>
    <div v-if="detailCalendar.calendar_staff_type == CALENDAR_STAFF_TYPE_MULTIPLE_STAFF">
        <div class="h-[84px] bg-[#F5F5F5] flex items-center sticky left-0">
            <button class="w-[132px] h-[36px] text-[#FFFFFF] text-[12px] font-semibold mr-[16px] rounded-[4px] ml-[17px] bg-[#5799DB]"
                    @click="showStaffCreateModal = true"
            >
                <i class="fal fa-plus mr-[5px]"></i> スタッフ追加
            </button>
            <button class="w-[120px] h-[36px] bg-[#FFFFFF] text-[12px] font-semibold mr-[32px] rounded-[4px] border border-solid border-[#DDDDDD]"
                    @click="redirectTab('#calendar-setting-course-staff', 'create-edit-staff')"
            >
                スタッフ管理
            </button>
            <label style="cursor: pointer">
                <input type="checkbox" v-model="filterShow" value="5"
                       class="w-[16px] h-[16px] rounded-[4px] border border-solid border-[#666666] !m-0">
                <span> 休日スタッフを表示しない</span>
            </label>
        </div>
    </div>
</div>