@push('css')
    <style>
        .item-time, .item-time2 {
            cursor: pointer;
        }

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

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

        .show-dayOfMonth-outside-reason{
            position: absolute;
            left: 3px;
            right: 3px;
            bottom: 2px;
            top: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #00000099;
            border-radius: 5px;
            color: white;
            font-size: 14px;
        }
        .show-dayOfMonth-outside-reason i{
            margin-right: 5px;
        }
    </style>
@endpush
<div>
    <table class="">
        <thead>
        <tr>
            <th class="">月曜日</th>
            <th class="">火曜日</th>
            <th class="">水曜日</th>
            <th class="">木曜日</th>
            <th class="">金曜日</th>
            <th class="!text-[#5799DB]">土曜日</th>
            <th class="!text-[#F44336]">日曜日</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="week in listDayOfMonth">
            <td v-for="dayInWeek in week">
                <div class="relative flex items-center justify-end text-right h-[30px] !bg-[#EFEFEF] border-b border-solid border-[#DDDDDD] text-[12px] font-semibold pr-[10px]">
                    <span :class="checkIsToday(dayInWeek)">@{{ dayInWeek }}</span>
                    <span class="show-dayOfMonth-outside-reason" v-if="bookingListDataMonth[dayInWeek] && bookingListDataMonth[dayInWeek].showOutsideReason"><i class="far fa-calendar-times"></i> 営業期間外</span>
                </div>
                <div v-if="dayInWeek">
                    <div class="w-[100%] p-[8px] relative min-h-[136px]"
                         v-if="bookingListDataMonth[dayInWeek] && (bookingListDataMonth[dayInWeek].totalApprove > 0 || bookingListDataMonth[dayInWeek].totalRequest > 0 || bookingListDataMonth[dayInWeek].totalCancel > 0 || bookingListDataMonth[dayInWeek].totalRequestBookingWaitCancel > 0 || bookingListDataMonth[dayInWeek].totalRequestCancel > 0) && filterShow.includes('1')">
                        <template v-if="bookingListDataMonth[dayInWeek].totalApprove > 0">
                            <div class="flex items-center w-[143px] h-[25px] border border-solid border-[#08BF5A] rounded-[19px] cursor-default mb-[5px]">
                                <div class="flex items-center justify-center w-[25px] h-[25px] bg-[#08BF5A] rounded-full mr-[3px]">
                                    <div class="w-[13px] h-[13px] border-[2px] border-solid border-[#FFFFFF] rounded-full"></div>
                                </div>
                                <div class="flex justify-between w-[100px]">
                                    <span class="text-[14px] text-[#08BF5A]">予約確定</span>
                                    <span class="text-[14px] text-[#08BF5A] !font-semibold">@{{ bookingListDataMonth[dayInWeek].totalApprove }}</span>
                                </div>
                            </div>
                        </template>
                        <template
                                v-if="bookingListDataMonth[dayInWeek].totalRequest > 0 || bookingListDataMonth[dayInWeek].totalRequestCancel > 0">
                            <div class="flex items-center w-[143px] h-[25px] border border-solid border-[#FFA600] rounded-[19px] cursor-default mb-[5px]">
                                <div class="flex items-center justify-center w-[25px] h-[25px] bg-[#FFA600] rounded-full mr-[3px]">
                                    <i class="fal fa-triangle text-[14px] text-[#FFFFFF]"></i>
                                </div>
                                <div class="flex justify-between w-[100px]">
                                    <span class="text-[14px] text-[#FEA600]">リクエスト</span>
                                    <span class="text-[14px] text-[#FEA600] !font-semibold">@{{ parseInt(bookingListDataMonth[dayInWeek].totalRequest) + parseInt(bookingListDataMonth[dayInWeek].totalRequestCancel) }}</span>
                                </div>
                            </div>
                        </template>
                        <template v-if="bookingListDataMonth[dayInWeek].totalCancel > 0">
                            <div class="flex items-center w-[143px] h-[25px] border border-solid border-[#F44336] rounded-[19px] cursor-default mb-[5px]">
                                <div class="flex items-center justify-center w-[25px] h-[25px] bg-[#F44336] rounded-full mr-[3px]">
                                    <i class="fal fa-times text-[18px] text-[#FFFFFF]"></i>
                                </div>
                                <div class="flex justify-between w-[100px]">
                                    <span class="text-[14px] text-[#F44336]">キャンセル</span>
                                    <span class="text-[14px] text-[#F44336] !font-semibold">@{{ bookingListDataMonth[dayInWeek].totalCancel }}</span>
                                </div>
                            </div>
                        </template>
                        <template v-if="bookingListDataMonth[dayInWeek].totalRequestBookingWaitCancel > 0">
                            <div class="flex items-center w-[143px] h-[25px] border border-solid border-[#7B56E0] rounded-[19px] cursor-default mb-[5px]">
                                <div class="flex items-center justify-center w-[25px] h-[25px] bg-[#7B56E0] rounded-full mr-[3px]">
                                    <i class="fal fa-bell text-[14px] text-[#FFFFFF]"></i>
                                </div>
                                <div class="flex justify-between w-[100px]">
                                    <span class="text-[14px] text-[#7B56E0]">通知希望</span>
                                    <span class="text-[14px] text-[#7B56E0] !font-semibold">@{{ bookingListDataMonth[dayInWeek].totalRequestBookingWaitCancel }}</span>
                                </div>
                            </div>
                        </template>
                        <div class="absolute items-center justify-center text-[14px] hover-detail cursor-pointer z-[2] bg-[#5799DBCC] w-[100%] h-[100%] px-[15px] py-[7px] top-0 left-0 border-solid border border-[#5799DB] rounded-[5px]"
                             @click="showBookingListWeek(bookingListDataMonth[dayInWeek].date, bookingListDataMonth[dayInWeek].bookingList)"
                        >
                            <i class="fas fa-eye mr-[6px] text-[#FFFFFF]"></i>
                            <span class="text-[#FFFFFF] text-[16px] !font-semibold">詳細を見る</span>
                        </div>
                    </div>
                    <template
                            v-else-if="bookingListDataMonth[dayInWeek] && bookingListDataMonth[dayInWeek].canBook && filterShow.includes('4')">
                        <div class="flex items-center justify-center bg-[#EDF4FB] h-[136px] cursor-pointer item-time"
                             @click="showAddNewBookingMonth(dayInWeek)"
                        >
                            <i class="far fa-circle text-[20px] text-[#5799DB]"></i>
                        </div>
                    </template>
                    <template v-else-if="bookingListDataMonth[dayInWeek] && !bookingListDataMonth[dayInWeek].canBook && filterShow.includes('4')">
                        <div class="flex items-center justify-center bg-[#F8F8F8] h-[136px] cursor-pointer item-time"
                             @click="showReasonCannotBookMonth(bookingListDataMonth[dayInWeek].reasonCannotBooking, bookingListDataMonth[dayInWeek].date)"
                        >
                            <i class="far fa-ban text-[20px] text-[#E0E0E0]"></i>
                        </div>
                    </template>
                    <template v-else>
                        <div class="flex items-center justify-center h-[136px] item-time"></div>
                    </template>
                </div>
                <div class="w-[160px]" v-else></div>
            </td>
        </tr>
        </tbody>
    </table>
</div>