@push('css')
    <style lang="css">
        .today-booking .display-custom .table .row:first-child {
            background: #F5F5F5;
        }

        .today-booking .table > tbody > tr > td {
            border-top: none !important;
        }

        .today-booking .table > thead > tr > td {
            background: #F5F5F5;
            font-size: 16px !important;
        }

        .today-booking .pagination > .active > a {
            color: #5799DB !important;
            background: #FFFFFF !important;
            border: 1px solid #5799DB;
        }

        .today-booking .booking_list li.active button {
            background-color: #08BF5A;
            color: #FFFFFF;
            font-weight: 600;
        }

        .today-booking .my_class {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: url("/images/expand_more.svg") 100% no-repeat #fff;
            background-size: 25px 25px;
            cursor: pointer;
        }

        .today-booking .my_class option {
            cursor: pointer;
            color: #2B2F36 !important;
            font-size: 14px;
        }

        .today-booking .disable {
            color: #DDDDDD !important;
            pointer-events: none;
        }

        .calendar-wrapper .display-custom .table .row .cell {
            cursor: unset !important;
        }

        .booking_status a {
            cursor: unset;
        }
    </style>
@endpush
<div class="calendar-wrapper today-booking">
    <div class="flex justify-between items-center">
        <div class="flex items-center !font-semibold text-[#2B2F36] text-[24px]">
            <div class="!font-semibold text-[#2B2F36] text-[20px] mr-[52px]">
                <span class="text-[20px] !font-semibold">@{{ currentDate.getFullYear() }}</span><span
                        class="text-[16px] !font-semibold">年</span><span class="text-[20px] !font-semibold">@{{ currentDate.getMonth() + 1 }}</span><span
                        class="text-[16px] !font-semibold">月</span><span class="text-[20px] !font-semibold">@{{ currentDate.getDate() }}</span><span
                        class="text-[16px] !font-semibold">日</span><span class="text-[16px] !font-semibold">(@{{ dayInWeek[currentDate.getDay()] }})</span>
            </div>
            <div>
                <div class="booking_list tab-header">
                    <ul class="flex justify-center items-center border border-solid border-[#DDDDDD] rounded-[3px] h-[40px] px-[10px]">
                        <li class="active">
                            <button type="button" @click="changeTabBookingList('tab1')"
                                    class="flex justify-center items-center w-[110px] h-[30px] text-[#888888] text-[14px] rounded-[4px]"
                                    data-toggle="tab" href="#booking-tab-1">
                                <i class="fas fa-sparkles mr-[5px]"></i>
                                新着の予約
                            </button>
                        </li>
                        <li>
                            <button type="button" @click="changeTabBookingList('tab2')"
                                    class="flex justify-center items-center w-[110px] h-[30px] text-[#888888] text-[14px] rounded-[4px]"
                                    data-toggle="tab" href="#booking-tab-2">
                                <i class="far fa-calendar mr-[5px]"></i>
                                本日の予約
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="flex items-center gap-[2.5rem]">
            <div class="flex items-center text-[14px] text-[#2B2F36] font-light">
                <span class="text-[#2B2F36] text-[14px]">表示件数：</span>
                <span>
                    <select @change="changePerPageBookingList($event)" v-model="booking_lists.pagination.perPage"
                            class="flex px-[10px] justify-center items-center border border-solid border-[#DDDDDD] w-[99px] h-[42px] rounded-[4px] text-[14px] text-[#2B2F36] my_class">
                        <template v-for="(option, index) in optionsPage" :key="index">
                            <option class="text-[14px] text-[#2B2F36]"
                                    :value="option">@{{option}}件</option>
                        </template>
                    </select>
                </span>
            </div>
            <div class="flex items-center text-[14px] text-[#2B2F36]">
                <span v-if="booking_lists.items.length > 0" class="mr-[50px]">@{{ (booking_lists.pagination.perPage * booking_lists.pagination.currentPage)
                - booking_lists.pagination.perPage + 1 }} - @{{ (booking_lists.pagination.perPage * (booking_lists.pagination.currentPage - 1)) +
                booking_lists.items.length }} / @{{ booking_lists.pagination.totalPage }}行</span>
                <span v-if="booking_lists.items.length == 0" class="mr-[50px]">0 - 0 / 0行</span>
                <span :class="{'mr-[10px] text-[#2B2F36]': true, 'disable': booking_lists.pagination.currentPage == 1}"
                      @click.prevent="changePageBookingList(booking_lists.pagination.currentPage - 1)">
                    <i :class="{'fas fa-chevron-left mr-[3px] text-[14px] text-[#2B2F36] cursor-pointer': true, 'disable': booking_lists.pagination.currentPage == 1}"></i>
                </span>
                <span :class="{'disable': booking_lists.pagination.currentPage == booking_lists.pagination.lastPage}"
                      @click.prevent="changePageBookingList(booking_lists.pagination.currentPage + 1)">
                    <i class="fas fa-chevron-right cursor-pointer"></i>
                </span>
            </div>
        </div>
    </div>
    <div class="display-custom mt-5">
        <div class="tab-content">
            <div class="tab-pane active fade in mt-[21px]" id="booking-tab-1">
                <table class="mb-[9px]">
                    <thead>
                    <tr class="h-[48px]">
                        <td class="bg-[#F5F5F5] min-w-[200px] w-[200px] 2xl:w-[200px] text-left font-semibold !text-[16px] text-[#2B2F36]">操作が行われた日時</td>
                        <td class="bg-[#F5F5F5] min-w-[250px] w-[250px] 2xl:w-[300px] text-left font-semibold !text-[16px] text-[#2B2F36]">来店予定日時</td>
                        <td class="bg-[#F5F5F5] min-w-[150px] w-[150px] 2xl:w-[200px] text-left font-semibold !text-[16px] text-[#2B2F36]">
                            ステータス
                        </td>
                        <td class="bg-[#F5F5F5] w-[250px] 2xl:w-[300px] text-left font-semibold !text-[16px] text-[#2B2F36]">お名前
                        </td>
                        <td class="bg-[#F5F5F5] w-[250px] 2xl:w-[300px] text-left font-semibold !text-[16px] text-[#2B2F36]">コース
                        </td>
                        <td class="bg-[#F5F5F5] w-[200px] text-left font-semibold !text-[16px] text-[#2B2F36]">決済金額
                        </td>
                        <td class="bg-[#F5F5F5] min-w-[70px] text-center !font-semibold !text-[16px] text-[#2B2F36]"></td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-if="booking_lists.items.length > 0" v-for="(item, index) in booking_lists.items" :key="index"
                        class="border-b border-b-solid border-b-[#DDDDDD] h-[59px] bg-white" style="border-bottom: 1px solid #ddd;">
                        <td class="cell !text-left text-[#222222] text-[14px] font-light">
                            @{{ item.userUpdateTime }}
                        </td>
                        <td class="cell !text-left text-[#222222] text-[14px] font-light">
                            @{{ item.received_booking_date }}(@{{ item.dayOfWeek }}) @{{ item.start_time }}~@{{
                            getEndTimeFormated(item.end_time) }}
                        </td>
                        <td class="cell text-left">
                            <template v-if="item.booking_status == SB_REQUEST_BOOKING || item.booking_status == SB_REQUEST_BOOKING_CANCEL">
                                <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#FFA600] rounded-[19px] cursor-default">
                                    <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>
                                    <span class="text-[14px] text-[#FEA600] mt-[2px]">リクエスト</span>
                                </div>
                            </template>
                            <template v-if="item.booking_status == SB_BOOKING_APPROVE">
                                <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#08BF5A] rounded-[19px] cursor-default">
                                    <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>
                                    <span class="text-[14px] text-[#08BF5A] mt-[2px]">予約確定</span>
                                </div>
                            </template>
                            <template v-if="item.booking_status == SB_BOOKING_ADMIN_BOOK">
                                <div class="tooltip-container cursor-default">
                                    <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#08BF5A] rounded-[19px]">
                                        <div class="flex items-center justify-center w-[25px] h-[25px] bg-[#08BF5A] rounded-full mr-[3px]">
                                            <i class="fal fa-wrench text-[15px] text-[#FFFFFF]"></i>
                                        </div>
                                        <span class="text-[14px] text-[#08BF5A] mt-[2px]">予約確定</span>
                                    </div>
                                    <span class="tooltip-text" v-if="item.lineUserId">手動で追加された予約です</span>
                                    <span class="tooltip-text w-[270px]" v-else>エルメ上に表示されていない友だちです</span>
                                </div>
                            </template>
                            <template v-if="item.booking_status == SB_REQUEST_BOOKING_WAIT_CANCEL">
                                <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#7B56E0] rounded-[19px] cursor-default">
                                    <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>
                                    <span class="text-[14px] text-[#7B56E0] mt-[2px]">通知希望</span>
                                </div>
                            </template>
                            <template v-if="item.booking_status == SB_BOOKING_CANCEL || item.booking_status == SB_BOOKING_ADMIN_CANCEL">
                                <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#F44336] rounded-[19px] cursor-default">
                                    <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>
                                    <span class="text-[14px] text-[#F44336] mt-[2px]">キャンセル</span>
                                </div>
                            </template>
                            <template v-if="item.booking_status == SB_BOOKING_DENY">
                                <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#F44336] rounded-[19px] cursor-default">
                                    <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>
                                    <span class="text-[14px] text-[#F44336] mt-[2px]">否認済</span>
                                </div>
                            </template>
                        </td>
                        <td class="cell h-[59px] !flex items-center text-left text-[#222222] text-[14px] font-light">
                            <div class="flex items-center" v-if="item.lineUserId && item.lineUserId > 0">
                                <div class="flex items-center w-[30px] h-[30px] border border-solid border-[#DDDDDD] mr-[10px] rounded-[50%]">
                                    <img class="rounded-[50%] w-full h-full"
                                         onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                         :src="item.line_avatar ? item.line_avatar : '/images/blank_avatar.png'" alt="">
                                </div>
                                <div class="text-[14px] font-light text-[#222222] !whitespace-nowrap !overflow-ellipsis !block !overflow-hidden">
                                    @{{ item.lineBookingName }}
                                </div>
                            </div>
                            <div class="flex items-center justify-start" v-else>
                                <img src="/images/blank_avatar.png" class="mr-[9px] rounded-full w-[30px]"/>
                                <span class="text-[16px] !whitespace-nowrap !overflow-ellipsis !block !overflow-hidden">@{{ item.lineBookingName }}</span>
                            </div>
                        </td>
                        <td class="cell !text-left text-[#222222] text-[14px] font-light border-b border-b-solid border-b-[#DDDDDD]">
                            @{{ item.course_name }}
                        </td>
                        <td class="cell text-left">
                            <div class="booking_status flex justify-between">
                                <div class="w-1/2 text-[#222222] text-[14px] font-light">¥ @{{ item.payment_amount }}
                                </div>
                                <template v-if="item.environment == 1">
                                    <div v-if="item.payment_status == 1" class="w-1/2">
                                        <a class="text-[#5799DB] text-[14px] underline"
                                           href="javascript:void(0)">@{{ item.payment_status_text }}</a>
                                    </div>
                                    <div v-if="item.payment_status == 3" class="w-1/2">
                                        <a class="!text-[#888888] text-[14px] underline"
                                           href="javascript:void(0)">@{{ item.payment_status_text }}</a>
                                    </div>
                                    <div v-if="item.payment_status == 2" class="w-1/2">
                                        <a class="text-[#888888] text-[14px]"
                                           href="javascript:void(0)">@{{ item.payment_status_text }}</a>
                                    </div>
                                    <div v-if="item.payment_status == 0" class="w-1/2">
                                        <a class="text-[#888888] text-[14px]"
                                           href="javascript:void(0)">@{{ item.payment_status_text }}</a>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="w-1/2"
                                         v-if="item.payment_status != 2"
                                    >
                                        <a class="text-[#888888] text-[14px]"
                                           href="javascript:void(0)">テスト決済</a>
                                    </div>
                                    <div class="w-1/2"
                                         v-if="item.payment_status == 2"
                                    >
                                        <a class="text-[#888888] text-[14px]"
                                           href="javascript:void(0)">決済なし</a>
                                    </div>
                                </template>
                            </div>
                        </td>
                        <td class="cell text-center">
                            <button type="button" @click="showDetailTodayBooking(item)"
                                    class="hover:opacity-70 w-[60px] h-[30px] border border-solid border-[#888888] rounded-[3px] text-[#222222] text-[14px]
                                    font-light">詳細
                            </button>
                        </td>
                    </tr>
                    <tr v-if="booking_lists.items.length == 0" class="h-[59px]">
                        <td class="cell !text-[16px] text-[#222222] font-light border-b border-solid border-[#DDDDDD]"
                            colspan="8">
                            7日間以内の新着予約はありません
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade in mt-[21px]" id="booking-tab-2">
                <table class="table mb-[9px]">
                    <thead>
                    <tr class="row h-[48px] bg-light-gray row-header custom-header-color">
                        <td class="cell max-w-[230px] !pl-[35px] !text-left !font-semibold !text-[16px] text-[#2B2F36]">開催時間</td>
                        <td class="cell w-[190px] text-left !font-semibold !text-[16px] text-[#2B2F36]">ステータス</td>
                        <td class="cell max-w-[300px] text-left !font-semibold !text-[16px] text-[#2B2F36]">お名前</td>
                        <td class="cell max-w-[200px] !text-left !font-semibold !text-[16px] text-[#2B2F36]">コース</td>
                        <td class="cell w-[200px] text-left !font-semibold !text-[16px] text-[#2B2F36]">決済金額</td>
                        <td class="cell max-w-[70px] text-center !font-semibold !text-[16px] text-[#2B2F36]"></td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-if="booking_lists.items.length > 0" v-for="(item, index) in booking_lists.items" :key="index"
                        class="row border-b border-b-solid border-b-[#DDDDDD] h-[59px] bg-white">
                        <td class="cell !pl-[35px] !text-left text-[#222222] text-[14px] font-light">
                            @{{ item.start_time }}~@{{ getEndTimeFormated(item.end_time) }}
                        </td>
                        <td class="cell text-left text-[#222222] text-[14px] font-light">
                            <template v-if="item.booking_status == SB_REQUEST_BOOKING || item.booking_status == SB_REQUEST_BOOKING_CANCEL">
                                <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#FFA600] rounded-[19px] cursor-default">
                                    <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>
                                    <span class="text-[14px] text-[#FEA600] mt-[2px]">リクエスト</span>
                                </div>
                            </template>
                            <template v-if="item.booking_status == SB_BOOKING_APPROVE">
                                <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#08BF5A] rounded-[19px] cursor-default">
                                    <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>
                                    <span class="text-[14px] text-[#08BF5A] mt-[2px]">予約確定</span>
                                </div>
                            </template>
                            <template v-if="item.booking_status == SB_BOOKING_ADMIN_BOOK">
                                <div class="tooltip-container cursor-default">
                                    <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#08BF5A] rounded-[19px]">
                                        <div class="flex items-center justify-center w-[25px] h-[25px] bg-[#08BF5A] rounded-full mr-[3px]">
                                            <i class="fal fa-wrench text-[15px] text-[#FFFFFF]"></i>
                                        </div>
                                        <span class="text-[14px] text-[#08BF5A] mt-[2px]">予約確定</span>
                                    </div>
                                    <span class="tooltip-text" v-if="item.lineUserId">手動で追加された予約です</span>
                                    <span class="tooltip-text w-[270px]" v-else>エルメ上に表示されていない友だちです</span>
                                </div>
                            </template>
                            <template v-if="item.booking_status == SB_REQUEST_BOOKING_WAIT_CANCEL">
                                <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#7B56E0] rounded-[19px] cursor-default">
                                    <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>
                                    <span class="text-[14px] text-[#7B56E0] mt-[2px]">通知希望</span>
                                </div>
                            </template>
                            <template v-if="item.booking_status == SB_BOOKING_CANCEL || item.booking_status == SB_BOOKING_ADMIN_CANCEL">
                                <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#F44336] rounded-[19px] cursor-default">
                                    <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>
                                    <span class="text-[14px] text-[#F44336] mt-[2px]">キャンセル</span>
                                </div>
                            </template>
                            <template v-if="item.booking_status == SB_BOOKING_DENY">
                                <div class="flex items-center w-[110px] h-[25px] border border-solid border-[#F44336] rounded-[19px] cursor-default">
                                    <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>
                                    <span class="text-[14px] text-[#F44336] mt-[2px]">否認済</span>
                                </div>
                            </template>
                        </td>
                        <td class="cell h-[59px] !flex items-center text-left text-[#222222] text-[14px] font-light">
                            <div class="flex items-center" v-if="item.lineUserId && item.lineUserId > 0">
                                <div class="flex items-center  w-[30px] h-[30px] border border-solid border-[#DDDDDD] mr-[10px] rounded-[50%]">
                                    <img class="rounded-[50%] w-full h-full"
                                         onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                         :src="item.line_avatar ? item.line_avatar : '/images/blank_avatar.png'" alt="">
                                </div>
                                <div class="text-[14px] font-light text-[#222222]">
                                    @{{ item.lineBookingName }}
                                </div>
                            </div>
                            <div class="flex items-center justify-start" v-else>
                                <img src="/images/blank_avatar.png" class="mr-[9px] rounded-full w-[30px]"/>
                                <span class="text-[16px]">@{{ item.lineBookingName }}</span>
                            </div>
                        </td>
                        <td class="cell !text-left text-[#222222] text-[14px] font-light border-b border-b-solid border-b-[#DDDDDD]">
                            @{{ item.course_name }}
                        </td>
                        <td class="cell text-left">
                            <div class="booking_status flex justify-between">
                                <div class="w-1/2 text-[#222222] text-[14px] font-light">¥ @{{ item.payment_amount }}
                                </div>
                                <template v-if="item.environment == 1">
                                    <div v-if="item.payment_status == 1" class="w-1/2">
                                        <a class="text-[#5799DB] text-[14px] underline"
                                           href="javascript:void(0)">@{{ item.payment_status_text }}</a>
                                    </div>
                                    <div v-if="item.payment_status == 3" class="w-1/2">
                                        <a class="!text-[#888888] text-[14px] underline"
                                           href="javascript:void(0)">@{{ item.payment_status_text }}</a>
                                    </div>
                                    <div v-if="item.payment_status == 2" class="w-1/2">
                                        <a class="text-[#888888] text-[14px]"
                                           href="javascript:void(0)">@{{ item.payment_status_text }}</a>
                                    </div>
                                    <div v-if="item.payment_status == 0" class="w-1/2">
                                        <a class="text-[#888888] text-[14px]"
                                           href="javascript:void(0)">@{{ item.payment_status_text }}</a>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="w-1/2"
                                         v-if="item.payment_status != 2"
                                    >
                                        <a class="text-[#888888] text-[14px]"
                                           href="javascript:void(0)">テスト決済</a>
                                    </div>
                                    <div class="w-1/2"
                                         v-if="item.payment_status == 2"
                                    >
                                        <a class="text-[#888888] text-[14px]"
                                           href="javascript:void(0)">決済なし</a>
                                    </div>
                                </template>
                            </div>
                        </td>
                        <td class="cell text-center">
                            <button type="button" @click="showDetailTodayBooking(item)"
                                    class="hover:opacity-70 w-[60px] h-[30px] border border-solid border-[#888888] rounded-[3px] text-[#222222] text-[14px]
                                    font-light">詳細
                            </button>
                        </td>
                    </tr>
                    <tr v-if="booking_lists.items.length == 0" class="h-[59px]">
                        <td class="cell mt-[20px] text-[16px] text-[#222222] font-light border-b border-solid border-[#DDDDDD]"
                            colspan="7">
                            本日の予約はありません
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="flex items-center justify-end mt-[5px]">
                <nav class="text-center mt-[8px]"
                     :class="{'pagination-devered': true}">
                    <ul class="pagination">
                        <li :class="{'mr-[10px] text-[#2B2F36]': true, 'disable': booking_lists.pagination.currentPage == 1}"
                            @click.prevent="changePageBookingList(booking_lists.pagination.currentPage - 1)">
                            <a href="#" aria-label="Previous" @click.prevent="changePageBookingList(booking_lists.pagination.currentPage - 1, 'tab2')"
                               class="font-light"
                               style="font-size:
                                14px;margin-right: 10px">
                                <span aria-hidden="true" style="color:#08BF5A">
                                    <i class="fas fa-chevron-left" style="color: #DDDDDD !important;"></i>
                                </span>
                            </a>
                        </li>
                        <li v-for="page in pagesNumberBookingList"
                            :class="[ page == bookingPageActive ? 'active' : '']">
                            <a href="#" @click.prevent="changePageBookingList(page, 'tab2')"
                               class="font-light !text-[14px] !text-[#888888] border border-solid border-[#DDDDDD] rounded-[4px] mr-[10px]">
                                @{{ page }}</a>
                        </li>
                        <li :class="{'disable': booking_lists.pagination.currentPage == booking_lists.pagination.lastPage}">
                            <a class="font-light" href="#" aria-label="Next"
                               @click.prevent="changePageBookingList(booking_lists.pagination.currentPage + 1, 'tab2')"
                               style="font-size: 14px;
                                margin-left: 0px">
                                <span aria-hidden="true" style="color:#08BF5A">
                                    <i class="fas fa-chevron-right" style="color: #DDDDDD !important;"></i>
                                </span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    @include('basic.calendar_management.tabs.booking.modal.detail_today_booking')
    @include('basic.calendar_management.tabs.booking.modal.cancel_booking_approve')
    @include('basic.calendar_management.tabs.booking.modal.delete_booking_cancel')
    @include('basic.calendar_management.tabs.booking.modal.history_booking_status')
    @include('basic.calendar_management.tabs.booking.modal.detail_booking_deleted')
    @include('basic.calendar_management.tabs.booking.modal.history_deleted_booking_status')
    @include('basic.calendar_management.tabs.booking.modal.history_booking_status_custom')
    @include('basic.calendar_management.tabs.booking.modal.refund_booking')
</div>