@push('css')
    <style>
        .bgnone {
            background: none;
        }

        .item-time, .item-time2 {
            cursor: pointer;
        }

        .item-time:hover {
            border: 2px solid #5799DB;
        }

        .item-time2:hover {
            border: 2px solid #5799DB;
            border-radius: 5px;
        }

        #list-course-day{
            position: relative;
        }

        #show-outside-reason{
            position: absolute;
            left: 3px;
            top: 47px;
            z-index: 10;
            bottom: 104px;
            width: 193px;
            display: flex;
            justify-content: center;
            align-content: center;
            background-color: #00000099;
            color: white;
            flex-wrap: wrap;
            border-radius: 5px;
        }
        
        #show-outside-reason p{
            width: 100%;
            text-align: center;
        }
        #show-outside-reason p:first-child{
            font-size: 45px;
        }
        #show-outside-reason p:last-child{
            font-size: 16px;
        }

        #show-outside-reason.show-outside-reason-private{
            bottom: 20px;
        }

        #show-outside-reason.show-outside-reason-private p:first-child{
            font-size: 35px;
        }
        #show-outside-reason.show-outside-reason-private p:last-child{
            font-size: 14px;
        }
    </style>
@endpush
<div>
    <div class="overflow-x-scroll display-course-day" id="display-course-day" ref="scrollDiv">
        <div v-if="showOutSideReason" id="show-outside-reason" :class="detailCalendar.calendar_staff_type == CALENDAR_STAFF_TYPE_MULTIPLE_STAFF ? '' : 'show-outside-reason-private'">
            <p><i class="far fa-calendar-times"></i></p>
            <p>営業期間外</p>
        </div>
        <div class="inline-flex items-center" style=" position: sticky; top: 0; z-index: 5;">
            <div class="sticky left-0 z-[4] w-[200px] border-t border-b border-l border-r border-solid border-[#DDDDDD] h-[40px] !font-semibold bg-[#FFFFFF] text-[#FFFFFF]">

            </div>
            <template v-for="(time, key) in calendarTimesHalf">
                <div class="w-[150px] border-t border-b border-solid border-[#DDDDDD] pl-[8px] h-[40px] flex items-center !font-light bg-[#FFFFFF]"
                     :style="key % 2 == 0 ? 'border-right: 1px dashed #DDDDDD' : 'border-right: 1px solid #DDDDDD'"
                >@{{ time }}
                </div>
            </template>
        </div>
        <div class=" max-h-[calc(100vh-300px)]" style=" top: -5px; position: relative;">
            <template v-for="(staff, key) in bookingStaff">
                <div class="inline-flex items-center"
                     :class="key == bookingStaff.length - 1 ? 'border-b border-solid border-[#DDDDDD]' : ''"
                     v-if="staff.hasBooking && !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-[14px] 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>
                        <a class="text-[#5799DB] underline cursor-pointer" v-if="checkShowDetailStaff(staff)"
                           @click="showDetailStaff(staff)">シフト編集</a>
                    </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]'"
                        >
                            <template v-if="!booking.hasBooking && filterShow.includes('4')">
                                <template v-if="booking.isStartWorking && booking.canBook && !booking.isEndWorking">
                                    <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                         v-if="booking.startSpaceWorking > 0"
                                         :class="'w-[' + (booking.startSpaceWorking * 150) + 'px]'"
                                    >
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                    <div @click="showAddNewBookingDay(key, staff.staffId)"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                         :class="'w-[' + ((1 - booking.startSpaceWorking) * 150) + 'px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                </template>
                                <template v-else-if="booking.isEndWorking && booking.canBook && !booking.isStartWorking">
                                    <div @click="showAddNewBookingDay(key, staff.staffId)"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                         :class="'w-[' + (booking.endSpaceWorking * 150) + 'px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                    <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                         v-if="(1 - booking.endSpaceWorking) > 0"
                                         :class="'w-[' + ((1 - booking.endSpaceWorking) * 150) + 'px]'"
                                    >
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                </template>
                                <template v-else-if="booking.canBook && !booking.isEndWorking && !booking.isStartWorking">
                                    <div @click="showAddNewBookingDay(key, staff.staffId)"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                         v-if="booking.canBook"
                                         :class="'w-[150px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                </template>
                                <template v-else-if="!booking.canBook">
                                    <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                         :class="'w-[150px]'"
                                    >
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                </template>
                                <template
                                        v-else-if="booking.isEndWorking && booking.isStartWorking && !booking.startEndBookingSameTime && key != '23:30' && filterShow.includes('4')">
                                    <div @click="showAddNewBookingDay(key, staff.staffId)"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                         v-if="booking.endSpaceWorking > 0"
                                         :class="'w-[' + (booking.endSpaceWorking * 150) + 'px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                    <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                         v-if="booking.startSpaceWorking > 0"
                                         :class="'w-[' + ((booking.startSpaceWorking - booking.endSpaceWorking) * 150) + 'px]'"
                                    >
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                    <div @click="showAddNewBookingDay(key, staff.staffId)"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                         v-if="booking.startSpaceWorking > 0"
                                         :class="'w-[' + ((1 - booking.startSpaceWorking) * 150) + 'px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                </template>
                                <template
                                        v-else-if="booking.isEndWorking && booking.isStartWorking && booking.startEndBookingSameTime">
                                    <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                         :class="'w-[' + (booking.startSpaceWorking * 150) + 'px]'"
                                    >
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                    <div @click="showAddNewBookingDay(key, staff.staffId)"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                         :class="'w-[' + ((booking.endSpaceWorking - booking.startSpaceWorking) * 150) + 'px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                    <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                         :class="'w-[' + ((1 - booking.endSpaceWorking) * 150) + 'px]'"
                                    >
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                </template>
                                <template
                                        v-else-if="booking.isEndWorking && booking.isStartWorking && !booking.startEndBookingSameTime && key == '23:30' && filterShow.includes('4')">
                                    <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                         class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                         :class="'w-[' + (booking.startSpaceWorking * 150) + 'px]'"
                                         v-if="booking.startSpaceWorking > 0"
                                    >
                                        <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                    </div>
                                    <div @click="showAddNewBookingDay(key, staff.staffId)"
                                         class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                         :class="'w-[' + ((1-booking.startSpaceWorking) * 150) + 'px]'"
                                    >
                                        <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                    </div>
                                </template>
                            </template>
                            <template v-if="booking.hasBooking">
                                <template v-if="booking.isStartBooking">
                                    <template v-if="!booking.canBook">
                                        <template v-if="booking.isEndBooking">
                                            <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                                 class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                                 v-if="booking.endSpaceBooking > 0"
                                                 :class="'w-[' + (booking.endSpaceBooking * 150) + 'px] ml-[' + (booking.endSpaceBooking * 150) + 'px]'"
                                            >
                                                <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                                 class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                                 v-if="booking.startSpaceBooking > 0 && !booking.isMiddleBooking && booking.isFirstBooking && filterShow.includes('4')"
                                                 :class="'w-[' + (booking.startSpaceBooking * 150) + 'px]'"
                                            >
                                                <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                            </div>
                                        </template>
                                    </template>
                                    <template v-else>
                                        <template v-if="!booking.isEndBooking">
                                            <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                                 class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                                 v-if="booking.isFirstBooking && booking.startSpaceBooking > 0 && booking.startSpaceWorking > 0 && filterShow.includes('4')"
                                                 :class="'w-[' + ((booking.startSpaceWorking) * 150) + 'px]'"
                                            >
                                                <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                            </div>
                                            <div @click="showAddNewBookingDay(key, staff.staffId)"
                                                 class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                                 v-if="booking.isFirstBooking && booking.startSpaceBooking > booking.startSpaceWorking && filterShow.includes('4')"
                                                 :class="'w-[' + ((booking.endSpaceWorking == 0 ? (booking.startSpaceBooking - booking.startSpaceWorking) : booking.endSpaceWorking) * 150) + 'px]'"
                                            >
                                                <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                            </div>
                                            <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                                 class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                                 v-if="booking.isFirstBooking && booking.startSpaceBooking > booking.endSpaceWorking && booking.isEndWorking && booking.startSpaceWorking == 0 && filterShow.includes('4')"
                                                 :class="'w-[' + ((booking.startSpaceBooking - booking.endSpaceWorking) * 150) + 'px]'"
                                            >
                                                <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                            </div>
                                        </template>
                                        <template v-else>
                                            {{--                                        <div @click="showDetailStaff(staff)"--}}
                                            {{--                                             class="flex items-center justify-center bg-[#EDF4FB] h-full"--}}
                                            {{--                                             v-if="booking.isFirstBooking && booking.startSpaceBooking > 0 && filterShow.includes('4')"--}}
                                            {{--                                             :class="'w-[' + ((booking.startSpaceBooking - booking.startSpaceWorking) * 150) + 'px] ml-[' + (booking.startSpaceWorking * 150) + 'px]'"--}}
                                            {{--                                        >--}}
                                            {{--                                            <i class="far fa-circle text-[20px] text-[#5799DB]"></i>--}}
                                            {{--                                        </div>--}}
                                        </template>
                                    </template>
                                    <template v-for="(bookingInTime, key2) in booking.listCalendarInTime">
                                        <template v-if="bookingInTime.isStartBooking">
                                            <div class="absolute flex z-[2] h-[73px] pt-[3px] bg-[#FFFFFF]"
                                                 :class="'top-['+ (bookingInTime.line == 0 ? 0 : (bookingInTime.line * 74)) +'px] left-[' + (bookingInTime.startSpaceBooking * 150) + 'px]'"
                                            >
                                                <template v-if="!bookingInTime.google">
                                                    <div v-if="staff.breakTimeBefore && bookingInTime.breakTimeBeforeInBooking > 0"
                                                         class="h-[66px] cursor-pointer item-time2"
                                                         @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>
                                                <template v-else>
                                                    <div v-if="staff.breakTimeBeforeGoogle && bookingInTime.breakTimeBeforeGoogleInBooking > 0"
                                                         class="h-[66px] cursor-pointer item-time2"
                                                         @click="showModalBreakTimeBeforeAfterBookingGoogle('before', staff.breakTimeBeforeGoogle, bookingInTime)"
                                                         :class="bookingInTime.widthBreakTimeBeforeGoogle >= 0 ? 'w-[' + (bookingInTime.widthBreakTimeBeforeGoogle * 150) + 'px]' : 'w-[' + (-bookingInTime.widthBreakTimeBeforeGoogle * 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.breakTimeBeforeGoogle > 15">前空き時間</span>
                                                            <p class="text-[12px]">@{{
                                                                getDescriptionBreakTimeFromValue(staff.breakTimeBeforeGoogle)
                                                                }}</p>
                                                        </div>
                                                    </div>
                                                </template>
                                                <template v-if="!bookingInTime.google && filterShow.includes('1')">
                                                    <div @click="showDetailBooking(bookingInTime.booking_id, 'day')"
                                                         class="h-[66px] rounded-[5px] relative z-[2] mx-[2px] cursor-pointer item-time2"
                                                         :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-light">
                                                                <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.nextDay ? '翌' : ''
                                                                }}@{{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-if="bookingInTime.google && filterShow.includes('2')">
                                                    <div @click="showDetailBookingGoogle(bookingInTime.booking_id)"
                                                         class="h-[66px] rounded-[5px] relative z-[2] mx-[2px] cursor-pointer !bg-[#2222221A] item-time2"
                                                         :class="'w-[' + ((bookingInTime.widthBooking * 150) - 5) + 'px]'">
                                                        <div class="pl-[5px] h-[56px]">
                                                            <div class="flex items-center mt-[6px]">
                                                                <img src="/images/google.png" class="w-[15px] mr-[5px]">
                                                                <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                                                   class="font-semibold">スケジュール連携</p>
                                                            </div>
                                                            <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                                               class="text-[12px] block">@{{ bookingInTime.title }}</p>
                                                        </div>
                                                    </div>
                                                </template>
                                                <template v-else>
                                                    <div class="h-[66px] rounded-[5px] relative z-[2] mx-[2px] cursor-pointer item-time"
                                                         :class="'w-[' + ((bookingInTime.widthBooking * 150) - 5) + 'px]'">
                                                    </div>
                                                </template>
                                                <template v-if="!bookingInTime.google">
                                                    <div v-if="staff.breakTimeAfter && bookingInTime.breakTimeAfterInBooking > 0"
                                                         class="h-[66px] cursor-pointer item-time2"
                                                         @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>
                                                </template>
                                                <template v-else>
                                                    <div v-if="staff.breakTimeAfterGoogle > 0 && bookingInTime.breakTimeAfterGoogleInBooking > 0"
                                                         class="h-[66px] cursor-pointer item-time2"
                                                         @click="showModalBreakTimeBeforeAfterBookingGoogle('after', staff.breakTimeAfterGoogle, bookingInTime)"
                                                         :class="'w-[' + (bookingInTime.spaceBreakTimeAfterGoogle * 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.breakTimeAfterGoogle > 15"> 後空き時間</span>
                                                            <p class="text-[12px]">@{{
                                                                getDescriptionBreakTimeFromValue(staff.breakTimeAfterGoogle)
                                                                }}</p>
                                                        </div>
                                                    </div>
                                                </template>
                                            </div>
                                        </template>
                                    </template>
                                </template>
                                <template v-if="booking.isEndBooking && filterShow.includes('4')">
                                    <template v-if="booking.canBook">
                                        <template v-if="!booking.isStartBooking">
                                            <template v-if="booking.isEndWorking">
                                                <div @click="showAddNewBookingDay(key, staff.staffId)"
                                                     class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                                     v-if="booking.widthCanBooking && booking.isLastBooking && booking.endSpaceWorking > booking.startSpaceEndBooking && booking.widthCanBooking > 0"
                                                     :class="'w-[' + (booking.widthCanBooking * 150) + 'px] ml-[' + (booking.startSpaceEndBooking * 150) + 'px]'"
                                                >
                                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                                </div>
                                                <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                                     class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                                     v-if="booking.widthCannotBooking > 0 && booking.endSpaceWorking > 0 && booking.isLastBooking"
                                                     :class="'w-[' + booking.widthCannotBooking + 'px] ml-[' + (booking.endSpaceWorking <= booking.startSpaceEndBooking ? (booking.startSpaceEndBooking * 150) : 0) + 'px]'"
                                                >
                                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <div @click="showAddNewBookingDay(key, staff.staffId)"
                                                     class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                                     v-if="booking.widthCanBooking && booking.isLastBooking"
                                                     :class="'w-[' + (booking.widthCanBooking) + 'px] ml-[' + (booking.startSpaceEndBooking * 150) + 'px]'"
                                                >
                                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                                </div>
                                            </template>
                                        </template>
                                        <template v-else>
                                            <div @click="showAddNewBookingDay(key, staff.staffId)"
                                                 class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                                 v-if="booking.endSpaceBooking > 0 && booking.startSpaceEndBooking == 0"
                                                 :class="'w-[' + ((1 - booking.endSpaceBooking) * 150) + 'px] ml-[' + (booking.endSpaceBooking * 150) + 'px]'"
                                            >
                                                <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                            </div>
                                            <div @click="showAddNewBookingDay(key, staff.staffId)"
                                                 class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                                 v-if="booking.endSpaceBooking > 0 && booking.startSpaceEndBooking > 0"
                                                 :class="'w-[' + ((booking.startSpaceEndBooking - booking.endSpaceBooking) * 150) + 'px] ml-[' + (booking.endSpaceBooking * 150) + 'px]'"
                                            >
                                                <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                            </div>
                                        </template>
                                    </template>
                                    <template v-else>
                                        <template v-if="booking.isStartBooking">
                                            {{--                                        <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"--}}
                                            {{--                                             class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"--}}
                                            {{--                                             v-if="booking.endSpaceBooking > 0 && booking.startSpaceEndBooking == 0"--}}
                                            {{--                                             :class="'w-[' + ((1 - booking.endSpaceBooking) * 150) + 'px] ml-[' + (booking.endSpaceBooking * 150) + 'px]'"--}}
                                            {{--                                        >--}}
                                            {{--                                            <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>--}}
                                            {{--                                        </div>--}}
                                            {{--                                        <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"--}}
                                            {{--                                             class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"--}}
                                            {{--                                             v-if="booking.endSpaceBooking > 0 && booking.startSpaceEndBooking > 0"--}}
                                            {{--                                             :class="'w-[' + ((booking.startSpaceEndBooking - booking.endSpaceBooking) * 150) + 'px] ml-[' + (booking.endSpaceBooking * 150) + 'px]'"--}}
                                            {{--                                        >--}}
                                            {{--                                            <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>--}}
                                            {{--                                        </div>--}}
                                        </template>
                                        <template v-else>
                                            <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                                 class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                                 v-if="booking.startSpaceEndBooking > 0 && booking.isLastBooking"
                                                 :class="'w-[' + ((1 - booking.startSpaceEndBooking) * 150) + 'px] ml-[' + (booking.startSpaceEndBooking * 150) + 'px]'">
                                                <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                            </div>
                                        </template>
                                    </template>
                                </template>
                            </template>
                        </div>
                    </template>
                </div>
                <div class="inline-flex items-center"
                     :class="key == bookingStaff.length - 1 ? 'border-b border-solid border-[#DDDDDD]' : ''"
                     v-else-if="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-[14px] 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>
                        <a class="text-[#5799DB] underline cursor-pointer" v-if="checkShowDetailStaff(staff)"
                           @click="showDetailStaff(staff, true)">シフト編集</a>
                    </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-[202px] z-[1] rounded-[5px]">
                        <div>
                            <label class="text-[14px] text-[#222222] font-semibold">休日</label>
                        </div>
                    </div>
                </div>
                <div class="inline-flex items-center"
                     :class="key == bookingStaff.length - 1 ? 'border-b border-solid border-[#DDDDDD]' : ''"
                     v-else-if="!staff.hasBooking && !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-[14px] 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>
                        <a class="text-[#5799DB] underline cursor-pointer" v-if="checkShowDetailStaff(staff)"
                           @click="showDetailStaff(staff)">シフト編集</a>
                    </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 h-[74px]">
                            <template
                                    v-if="booking.isStartWorking && booking.canBook && !booking.isEndWorking && filterShow.includes('4')">
                                <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                     v-if="booking.startSpaceWorking > 0"
                                     :class="'w-[' + (booking.startSpaceWorking * 150) + 'px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                                <div @click="showAddNewBookingDay(key, staff.staffId)"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                     :class="'w-[' + ((1 - booking.startSpaceWorking) * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                            </template>
                            <template
                                    v-else-if="booking.isEndWorking && booking.canBook && !booking.isStartWorking && filterShow.includes('4')">
                                <div @click="showAddNewBookingDay(key, staff.staffId)"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                     :class="'w-[' + (booking.endSpaceWorking * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                                <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                     v-if="(1 - booking.endSpaceWorking) > 0"
                                     :class="'w-[' + ((1 - booking.endSpaceWorking) * 150) + 'px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                            </template>
                            <template
                                    v-else-if="booking.canBook && !booking.isEndWorking && !booking.isStartWorking && filterShow.includes('4')">
                                <div @click="showAddNewBookingDay(key, staff.staffId)"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                     v-if="booking.canBook"
                                     :class="'w-[150px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                            </template>
                            <template v-else-if="!booking.canBook && filterShow.includes('4')">
                                <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                     v-if="!booking.canBook"
                                     :class="'w-[150px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                            </template>
                            <template
                                    v-else-if="booking.isEndWorking && booking.isStartWorking && !booking.startEndBookingSameTime && key != '23:30' && filterShow.includes('4')">
                                <div @click="showAddNewBookingDay(key, staff.staffId)"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                     v-if="booking.endSpaceWorking > 0"
                                     :class="'w-[' + (booking.endSpaceWorking * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                                <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                     v-if="booking.startSpaceWorking > 0"
                                     :class="'w-[' + ((booking.startSpaceWorking - booking.endSpaceWorking) * 150) + 'px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                                <div @click="showAddNewBookingDay(key, staff.staffId)"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                     v-if="booking.startSpaceWorking > 0"
                                     :class="'w-[' + ((1 - booking.startSpaceWorking) * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                            </template>
                            <template
                                    v-else-if="booking.isEndWorking && booking.isStartWorking && booking.startEndBookingSameTime && filterShow.includes('4')">
                                <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                     :class="'w-[' + (booking.startSpaceWorking * 150) + 'px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                                <div @click="showAddNewBookingDay(key, staff.staffId)"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                     :class="'w-[' + ((booking.endSpaceWorking - booking.startSpaceWorking) * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                                <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                     :class="'w-[' + ((1 - booking.endSpaceWorking) * 150) + 'px]'"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                            </template>
                            <template
                                    v-else-if="booking.isEndWorking && booking.isStartWorking && !booking.startEndBookingSameTime && key == '23:30' && filterShow.includes('4')">
                                <div @click="showReasonCannotBook(booking.reasonCannotBooking, booking.date, booking.timeStartSlot, booking.timeEndSlot)"
                                     class="flex items-center justify-center bg-[#F8F8F8] h-full item-time"
                                     :class="'w-[' + (booking.startSpaceWorking * 150) + 'px]'"
                                     v-if="booking.startSpaceWorking > 0"
                                >
                                    <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                                </div>
                                <div @click="showAddNewBookingDay(key, staff.staffId)"
                                     class="flex items-center justify-center bg-[#EDF4FB] h-full item-time"
                                     :class="'w-[' + ((1-booking.startSpaceWorking) * 150) + 'px]'"
                                >
                                    <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </template>
        </div>

    </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" style="border: 1px solid #DDDDDD;">
            <button class=" ml-[16px] 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>