@extends('layouts.app_rest')

@section('content')
<div class="animate__animated p-6" :class="[$store.app.animation]">
    <!-- start main content section -->
    <div x-data="sales">
        <ul class="flex space-x-2 rtl:space-x-reverse">
            <li>
                <a href="javascript:;" class="text-primary hover:underline">Dashboard</a>
            </li>
            <li class="before:content-['/'] ltr:before:mr-1 rtl:before:ml-1">
                <span>Sales</span>
            </li>
        </ul>

        <div class="pt-5">
            <!-- summary -->
            <div class="panel h-full mb-5">
                <div class="space-y-9 grid grid-cols-4 gap-4">
                    <div class="box flex items-center mt-0">
                        <div class="h-9 w-9 ltr:mr-3 rtl:ml-3">
                            <div
                                class="grid h-9 w-9 place-content-center rounded-full bg-secondary-light text-secondary dark:bg-secondary dark:text-secondary-light">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M3.74157 18.5545C4.94119 20 7.17389 20 11.6393 20H12.3605C16.8259 20 19.0586 20 20.2582 18.5545M3.74157 18.5545C2.54194 17.1091 2.9534 14.9146 3.77633 10.5257C4.36155 7.40452 4.65416 5.84393 5.76506 4.92196M3.74157 18.5545C3.74156 18.5545 3.74157 18.5545 3.74157 18.5545ZM20.2582 18.5545C21.4578 17.1091 21.0464 14.9146 20.2235 10.5257C19.6382 7.40452 19.3456 5.84393 18.2347 4.92196M20.2582 18.5545C20.2582 18.5545 20.2582 18.5545 20.2582 18.5545ZM18.2347 4.92196C17.1238 4 15.5361 4 12.3605 4H11.6393C8.46374 4 6.87596 4 5.76506 4.92196M18.2347 4.92196C18.2347 4.92196 18.2347 4.92196 18.2347 4.92196ZM5.76506 4.92196C5.76506 4.92196 5.76506 4.92196 5.76506 4.92196Z"
                                        stroke="currentColor" stroke-width="1.5" />
                                    <path opacity="0.5"
                                        d="M9.1709 8C9.58273 9.16519 10.694 10 12.0002 10C13.3064 10 14.4177 9.16519 14.8295 8"
                                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="mb-2 flex font-semibold text-white-dark">
                                <h6>Total Sales</h6>
                                <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency" data-currency_symbol="true">{{$total_sales}}</span></p>
                            </div>
                            <div class="h-2 rounded-full bg-dark-light shadow dark:bg-[#1b2e4b]">
                                <div
                                    class="h-full w-11/12 rounded-full bg-gradient-to-r from-[#7579ff] to-[#b224ef]">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box flex items-center mt-0" style="margin-top: 0 !important;">
                        <div class="h-9 w-9 ltr:mr-3 rtl:ml-3">
                            <div
                                class="grid h-9 w-9 place-content-center rounded-full bg-success-light text-success dark:bg-success dark:text-success-light">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M4.72848 16.1369C3.18295 14.5914 2.41018 13.8186 2.12264 12.816C1.83509 11.8134 2.08083 10.7485 2.57231 8.61875L2.85574 7.39057C3.26922 5.59881 3.47597 4.70292 4.08944 4.08944C4.70292 3.47597 5.59881 3.26922 7.39057 2.85574L8.61875 2.57231C10.7485 2.08083 11.8134 1.83509 12.816 2.12264C13.8186 2.41018 14.5914 3.18295 16.1369 4.72848L17.9665 6.55812C20.6555 9.24711 22 10.5916 22 12.2623C22 13.933 20.6555 15.2775 17.9665 17.9665C15.2775 20.6555 13.933 22 12.2623 22C10.5916 22 9.24711 20.6555 6.55812 17.9665L4.72848 16.1369Z"
                                        stroke="currentColor" stroke-width="1.5" />
                                    <circle opacity="0.5" cx="8.60699" cy="8.87891" r="2"
                                        transform="rotate(-45 8.60699 8.87891)" stroke="currentColor"
                                        stroke-width="1.5" />
                                    <path opacity="0.5" d="M11.5417 18.5L18.5208 11.5208"
                                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="mb-2 flex font-semibold text-white-dark">
                                <h6>Total Purchase</h6>
                                <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency" data-currency_symbol="true">{{ $total_purchase}} </span></p>
                            </div>
                            <div class="h-2 w-full rounded-full bg-dark-light shadow dark:bg-[#1b2e4b]">
                                <div class="h-full w-full rounded-full bg-gradient-to-r from-[#3cba92] to-[#0ba360]"
                                    style="width: 65%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="box flex items-center mt-0" style="margin-top: 0 !important;">
                        <div class="h-9 w-9 ltr:mr-3 rtl:ml-3">
                            <div
                                class="grid h-9 w-9 place-content-center rounded-full bg-warning-light text-warning dark:bg-warning dark:text-warning-light">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z"
                                        stroke="currentColor" stroke-width="1.5" />
                                    <path opacity="0.5" d="M10 16H6" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M14 16H12.5" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M2 10L22 10" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="mb-2 flex font-semibold text-white-dark">
                                <h6>Total Expenses</h6>
                                <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency" data-currency_symbol="true">{{ $total_expense }} </span></p>
                            </div>
                            <div class="h-2 w-full rounded-full bg-dark-light shadow dark:bg-[#1b2e4b]">
                                <div class="h-full w-full rounded-full bg-gradient-to-r from-[#f09819] to-[#ff5858]"
                                    style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="box flex items-center mt-0" style="margin-top: 0 !important;">
                        <div class="h-9 w-9 ltr:mr-3 rtl:ml-3">
                            <div
                                class="grid h-9 w-9 place-content-center rounded-full bg-warning-light text-warning dark:bg-warning dark:text-warning-light">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z"
                                        stroke="currentColor" stroke-width="1.5" />
                                    <path opacity="0.5" d="M10 16H6" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M14 16H12.5" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M2 10L22 10" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="mb-2 flex font-semibold text-white-dark">
                                <h6>Customer Due</h6>
                                <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency" data-currency_symbol="true">{{ $due }} </span></p>
                            </div>
                            <div class="h-2 w-full rounded-full bg-dark-light shadow dark:bg-[#1b2e4b]">
                            <div class="h-full w-full rounded-full bg-gradient-to-r from-[#f09819] to-[#ff5858]" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="box flex items-center mt-0" style="margin-top: 0 !important;">
                        <div class="h-9 w-9 ltr:mr-3 rtl:ml-3">
                            <div
                                class="grid h-9 w-9 place-content-center rounded-full bg-warning-light text-warning dark:bg-warning dark:text-warning-light">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z"
                                        stroke="currentColor" stroke-width="1.5" />
                                    <path opacity="0.5" d="M10 16H6" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M14 16H12.5" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M2 10L22 10" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                </svg>
                            </div>
                        </div> -->
                        <!-- <div class="flex-1">
                            <div class="mb-2 flex font-semibold text-white-dark">
                                <h6>Restaurant Sale</h6>
                                <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency" data-currency_symbol="true">{{$restaurant_sales}}</span></p>
                            </div>
                            <div class="h-2 w-full rounded-full bg-dark-light shadow dark:bg-[#1b2e4b]">
                                <div class="h-full w-full rounded-full bg-gradient-to-r from-[#f09519] to-[#ff5858]"
                                    style="width: 80%"></div>
                            </div>
                        </div> -->
                    <!-- </div> -->
                    <!-- <div class="box flex items-center mt-0" style="margin-top: 0 !important;">
                        <div class="h-9 w-9 ltr:mr-3 rtl:ml-3">
                            <div
                                class="grid h-9 w-9 place-content-center rounded-full bg-warning-light text-warning dark:bg-warning dark:text-warning-light">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z"
                                        stroke="currentColor" stroke-width="1.5" />
                                    <path opacity="0.5" d="M10 16H6" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M14 16H12.5" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M2 10L22 10" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="mb-2 flex font-semibold text-white-dark">
                                <h6>Hotel Sales</h6>
                                <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency" data-currency_symbol="true">{{$hotel_sales}}</span></p>
                            </div>
                            <div class="h-2 w-full rounded-full bg-dark-light shadow dark:bg-[#1b2e4b]">
                                <div class="h-full w-full rounded-full bg-gradient-to-r from-[#f09819] to-[#ff5858]"
                                    style="width: 80%"></div>
                            </div>
                        </div>
                    </div> -->
                    <!-- <div class="box flex items-center mt-0" style="margin-top: 0 !important;">
                        <div class="h-9 w-9 ltr:mr-3 rtl:ml-3">
                            <div
                                class="grid h-9 w-9 place-content-center rounded-full bg-warning-light text-warning dark:bg-warning dark:text-warning-light">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z"
                                        stroke="currentColor" stroke-width="1.5" />
                                    <path opacity="0.5" d="M10 16H6" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M14 16H12.5" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M2 10L22 10" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="mb-2 flex font-semibold text-white-dark">
                                <h6>Bar Sales</h6>
                                <p class="ltr:ml-auto rtl:mr-auto">{{$bar_sales}}</p>
                            </div>
                            <div class="h-2 w-full rounded-full bg-dark-light shadow dark:bg-[#1b2e4b]">
                                <div class="h-full w-full rounded-full bg-gradient-to-r from-[#f09819] to-[#ff5858]"
                                    style="width: 80%"></div>
                            </div>
                        </div>
                    </div> -->
                    <!-- <div class="box flex items-center mt-0" style="margin-top: 0 !important;">
                        <div class="h-9 w-9 ltr:mr-3 rtl:ml-3">
                            <div
                                class="grid h-9 w-9 place-content-center rounded-full bg-warning-light text-warning dark:bg-warning dark:text-warning-light">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z"
                                        stroke="currentColor" stroke-width="1.5" />
                                    <path opacity="0.5" d="M10 16H6" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M14 16H12.5" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                    <path opacity="0.5" d="M2 10L22 10" stroke="currentColor"
                                        stroke-width="1.5" stroke-linecap="round" />
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="mb-2 flex font-semibold text-white-dark">
                                <h6>Event Sales</h6>
                                <p class="ltr:ml-auto rtl:mr-auto">0</p>
                            </div>
                            <div class="h-2 w-full rounded-full bg-dark-light shadow dark:bg-[#1b2e4b]">
                                <div class="h-full w-full rounded-full bg-gradient-to-r from-[#f09819] to-[#ff5858]"
                                    style="width: 80%"></div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>

            <!-- calender -->
            <!-- <div class="panel h-full mb-5">
                <div class="buttons" style="display: flex; justify-content: flex-end;">
                    <select class="form-select" style="width: 20%;" name="" id=""
                        x-on:change="$event.target.value === 'boocking' ? showBoockingPopup = true : showBoockingPopup = false">
                        <option selected>Select a Button</option>
                        <option value="boocking">Boocking</option>
                        <option value="reservation">Reservation</option>
                        <option value="checkout">Checkout</option>
                    </select>
                </div>
                <div class="calendar" x-data="calendarData()">
                    <div class="row">
                        <div class="calender-box"
                            style="display: flex; justify-content: center; align-items: center;">
                            <i style="font-size: 20px;" class="fa fa-calendar" aria-hidden="true"></i>
                        </div>
                        <div class="cell">
                            <i class="fa fa-chevron-left" style="margin-right: 20px; cursor: pointer;"
                                aria-hidden="true" x-on:click="prevMonth"></i>
                            <span x-text="month"></span>
                            <i class="fa fa-chevron-right" style="margin-left: 20px; cursor: pointer;"
                                aria-hidden="true" x-on:click="nextMonth"></i>
                        </div>
                    </div>
                    <div class="row day-row">
                        <div class="calender-box"
                            style="display: flex; justify-content: center; align-items: center;">
                            <p class="allSelected">All Selected (5)</p>
                        </div>
                        <template x-for="(day, index) in getDaysInMonth()" :key="index">
                            <div class="cell"
                                x-bind:class="{ 'weekend': isWeekend(index), 'today': isToday(index) }">
                                <span class="day-name" x-text="getDayName(index)"></span>
                                <br>
                                <span x-text="day"></span>
                            </div>
                        </template>

                    </div>
                    <div class="row double-room" style="padding-bottom: 2px;">
                                              <template x-for="(day, index) in getDaysInMonth()" :key="index">
                            <div class="cell" x-text="doubleRoomAvailability[index]"></div>
                        </template>
                    </div>
                  <div  style="max-height:300px;overflow:auto;" >
                    <template x-for="(room, roomIndex) in roomData.slice(0, 5)" :key="roomIndex">
                        <div class="row" style="padding: 1px 0;">
                            <div class="room-number"
                                style="display: flex; justify-content: space-between; align-items: center;">
                                <template x-if="isTodayRoom(room)">
                                    <div
                                        x-bind:style="'width: 20px; height: 20px; background-color: ' + getTodayRangeStatusColor(room) + '; border-radius: 50%;'">
                                    </div>
                                </template>
                                <p x-text="room.name"></p>
                            </div>
                            <template x-for="(day, dayIndex) in getDaysInMonth()" :key="dayIndex">
                                <div class="cell" :class="getCellClass(dayIndex, roomIndex)">
                                </div>
                            </template>
                        </div>
                    </template>
                    <template x-for="(room, roomIndex) in roomData.slice(5)" :key="roomIndex">
                        <div class="row" style="padding: 1px 0;">
                            <div class="room-number"
                                style="display: flex; justify-content: space-between; align-items: center;">
                                <template x-if="isTodayRoom(room)">
                                    <div
                                        x-bind:style="'width: 20px; height: 20px; background-color: ' + getTodayRangeStatusColor(room) + '; border-radius: 50%;'">
                                    </div>
                                </template>
                                <p x-text="room.name"></p>
                            </div>
                            <template x-for="(day, dayIndex) in getDaysInMonth()" :key="dayIndex">
                                <div class="cell" :class="getCellClass(dayIndex, roomIndex + 5)"></div>
                            </template>
                        </div>
                    </template>
                  </div>
                </div>

                <div :class=" { 'overlay-hidden' : !showBoockingPopup, 'overlay-visible' :
                                    showBoockingPopup }" class="overlay">
                </div>

                <div class="popup" x-show="showBoockingPopup"
                    :class="{ 'popup-hidden': !showBoockingPopup, 'popup-visible': showBoockingPopup }"
                    @click.away="showBoockingPopup = null">
                    Popup content goes here. You can add any HTML content for your popup.
                </div>
            </div> -->

            <!-- third row  -->
            <div class="mb-6 grid gap-4 xl:grid-cols-3">
                <!-- Transactions -->
                <div class="panel h-full" style="height: 100%;max-height: min-content;overflow: auto;">
                    <div class="mb-5 flex items-center justify-between dark:text-white-light">
                        <h5 class="text-lg font-semibold">Transactions</h5>
                        <!-- <div x-data="dropdown" @click.outside="open = false" class="dropdown">
                            <a href="javascript:;" @click="toggle">
                                <svg class="h-5 w-5 text-black/70 hover:!text-primary dark:text-white/70"
                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="5" cy="12" r="2" stroke="currentColor" stroke-width="1.5" />
                                    <circle opacity="0.5" cx="12" cy="12" r="2" stroke="currentColor"
                                        stroke-width="1.5" />
                                    <circle cx="19" cy="12" r="2" stroke="currentColor"
                                        stroke-width="1.5" />
                                </svg>
                            </a>
                            <ul x-cloak x-show="open" x-transition x-transition.duration.300ms
                                class="ltr:right-0 rtl:left-0">
                                <li><a href="javascript:;" @click="toggle">View Report</a></li>
                                <li><a href="javascript:;" @click="toggle">Edit Report</a></li>
                                <li><a href="javascript:;" @click="toggle">Mark as Done</a></li>
                            </ul>
                        </div> -->
                    </div>
                    <div>
                        <div class="space-y-6">
                            <template x-for="(item, itemIndex) in transactions" :key="itemIndex">
                                <div class="flex">
                                    <span
                                        class="grid h-9 w-9 shrink-0 place-content-center rounded-md bg-success-light text-base text-success dark:bg-success dark:text-success-light">SP</span>
                                    <div class="flex-1 px-3">
                                        <div><span x-text="item.type"></span></div>
                                        <div class="text-xs text-white-dark dark:text-gray-500">
                                            <span x-text="item.room"></span>
                                        </div>
                                        <div class="text-xs text-white-dark dark:text-gray-500">
                                            <span x-text="item.date"></span>
                                        </div>
                                    </div>
                                    <span>
                                        <template x-if="item.status === 'paid'">
                                            <span
                                                class="badge bg-success shadow-md dark:group-hover:bg-transparent"
                                                x-text="item.status"></span>
                                        </template>
                                        <template x-if="item.status === 'partial'">
                                            <span
                                                class="badge bg-success shadow-md dark:group-hover:bg-transparent"
                                                x-text="item.status"></span>
                                        </template>
                                        <template x-if="item.status === 'due'">
                                            <span
                                                class="badge bg-danger shadow-md dark:group-hover:bg-transparent"
                                                x-text="item.status"></span>
                                        </template>
                                    </span>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>

                <!-- Stock Alert -->
                <div class="panel h-full"  style="height: 100%;max-height: min-content;overflow: auto;">
                    <div class="mb-5 flex items-center justify-between dark:text-white-light">
                        <h5 class="text-lg font-semibold">Stock Alert</h5>
                        <!-- <div x-data="dropdown" @click.outside="open = false" class="dropdown">
                            <a href="javascript:;" @click="toggle">
                                <svg class="h-5 w-5 text-black/70 hover:!text-primary dark:text-white/70"
                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="5" cy="12" r="2" stroke="currentColor" stroke-width="1.5" />
                                    <circle opacity="0.5" cx="12" cy="12" r="2" stroke="currentColor"
                                        stroke-width="1.5" />
                                    <circle cx="19" cy="12" r="2" stroke="currentColor"
                                        stroke-width="1.5" />
                                </svg>
                            </a>
                            <ul x-cloak x-show="open" x-transition x-transition.duration.300ms
                                class="ltr:right-0 rtl:left-0">
                                <li><a href="javascript:;" @click="toggle">View Report</a></li>
                                <li><a href="javascript:;" @click="toggle">Edit Report</a></li>
                                <li><a href="javascript:;" @click="toggle">Mark as Done</a></li>
                            </ul>
                        </div> -->
                    </div>
                    <div>
                        <div class="space-y-6">
                            <template x-for="(item, itemIndex) in stockAlerts" :key="itemIndex">
                                <div class="flex">
                                    <span
                                        class="grid h-9 w-9 shrink-0 place-content-center rounded-md bg-success-light text-base text-success dark:bg-success dark:text-success-light">SP</span>
                                    <div class="flex-1 px-3">
                                        <div><span x-text="item.name"></span></div>
                                        <div class="text-xs text-white-dark dark:text-gray-500">
                                            <span x-text="item.sku_code"></span>
                                        </div>
                                        <div class="text-xs text-white-dark dark:text-gray-500">
                                            <span x-text="item.qty"></span>
                                        </div>
                                    </div>
                                    <!-- <span><span
                                            class="badge bg-success shadow-md dark:group-hover:bg-transparent"
                                            x-text="item.status"></span></span> -->
                                </div>
                            </template>
                        </div>
                    </div>
                </div>

                <!-- Reminders -->
                <div class="panel h-full"  style="height: 100%;max-height: min-content;overflow: auto;">
                    <div class="mb-5 flex items-center justify-between dark:text-white-light">
                        <h5 class="text-lg font-semibold">Reminders</h5>
                        <!-- <div x-data="dropdown" @click.outside="open = false" class="dropdown">
                            <a href="javascript:;" @click="toggle">
                                <svg class="h-5 w-5 text-black/70 hover:!text-primary dark:text-white/70"
                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="5" cy="12" r="2" stroke="currentColor" stroke-width="1.5" />
                                    <circle opacity="0.5" cx="12" cy="12" r="2" stroke="currentColor"
                                        stroke-width="1.5" />
                                    <circle cx="19" cy="12" r="2" stroke="currentColor"
                                        stroke-width="1.5" />
                                </svg>
                            </a>
                            <ul x-cloak x-show="open" x-transition x-transition.duration.300ms
                                class="ltr:right-0 rtl:left-0">
                                <li><a href="javascript:;" @click="toggle">View Report</a></li>
                                <li><a href="javascript:;" @click="toggle">Edit Report</a></li>
                                <li><a href="javascript:;" @click="toggle">Mark as Done</a></li>
                            </ul>
                        </div> -->
                    </div>
                    <div>
                        <div class="space-y-6">
                            <template x-for="(item, itemIndex) in reminders" :key="itemIndex">
                                <div class="flex">
                                    <span
                                        class="grid h-9 w-9 shrink-0 place-content-center rounded-md bg-success-light text-base text-success dark:bg-success dark:text-success-light">SP</span>
                                    <div class="flex-1 px-3">
                                        <div><span x-text="item.customer"></span></div>
                                        <div class="text-xs text-white-dark dark:text-gray-500">
                                            <span x-text="item.ref_no"></span>
                                        </div>
                                        <div class="text-xs text-white-dark dark:text-gray-500">
                                            <span x-text="item.date"></span>
                                        </div>
                                    </div>
                                    <span>
                                    <span
                                                class="badge bg-success shadow-md dark:group-hover:bg-transparent"
                                                x-text="item.status"></span>
                                    </span>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <!-- fourth row  -->
            <div class="mb-6 grid gap-4 xl:grid-cols-3">
                <!-- profit grapgh  -->
                <div class="panel h-full xl:col-span-2">
                    <div class="mb-5 flex items-center dark:text-white-light">
                        <h5 class="text-lg font-semibold">Profit</h5>
                        <!-- <div x-data="dropdown" @click.outside="open = false"
                            class="dropdown ltr:ml-auto rtl:mr-auto">
                            <a href="javascript:;" @click="toggle">
                                <svg class="h-5 w-5 text-black/70 hover:!text-primary dark:text-white/70"
                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="5" cy="12" r="2" stroke="currentColor" stroke-width="1.5" />
                                    <circle opacity="0.5" cx="12" cy="12" r="2" stroke="currentColor"
                                        stroke-width="1.5" />
                                    <circle cx="19" cy="12" r="2" stroke="currentColor"
                                        stroke-width="1.5" />
                                </svg>
                            </a>
                            <ul x-cloak x-show="open" x-transition x-transition.duration.300ms
                                class="ltr:right-0 rtl:left-0">
                                <li><a href="javascript:;" @click="toggle">Weekly</a></li>
                                <li><a href="javascript:;" @click="toggle">Monthly</a></li>
                                <li><a href="javascript:;" @click="toggle">Yearly</a></li>
                            </ul>
                        </div> -->
                    </div>
                    <!-- <p class="text-lg dark:text-white-light/90">Total Profit <span
                            class="ml-2 text-primary">$10,840</span></p> -->
                    <div class="relative overflow-hidden">
                        <div x-ref="revenueChart" class="rounded-lg bg-white dark:bg-black">
                            <!-- loader -->
                            <div
                                class="grid min-h-[325px] place-content-center bg-white-light/30 dark:bg-dark dark:bg-opacity-[0.08]">
                                <span
                                    class="inline-flex h-5 w-5 animate-spin rounded-full border-2 border-black !border-l-transparent dark:border-white"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- daily sales  -->
                <div class="panel h-full sm:col-span-2 xl:col-span-1">
                    <div class="mb-5 flex items-center">
                        <h5 class="text-lg font-semibold dark:text-white-light">
                            Daily Sales <span class="block text-sm font-normal text-white-dark">Go to
                                columns for details.</span>
                        </h5>
                        <div class="relative ltr:ml-auto rtl:mr-auto">
                            <div
                                class="grid h-11 w-11 place-content-center rounded-full bg-[#ffeccb] text-warning dark:bg-warning dark:text-[#ffeccb]">
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 6V18" stroke="currentColor" stroke-width="1.5"
                                        stroke-linecap="round" />
                                    <path
                                        d="M15 9.5C15 8.11929 13.6569 7 12 7C10.3431 7 9 8.11929 9 9.5C9 10.8807 10.3431 12 12 12C13.6569 12 15 13.1193 15 14.5C15 15.8807 13.6569 17 12 17C10.3431 17 9 15.8807 9 14.5"
                                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="overflow-hidden">
                        <div x-ref="dailySales" class="rounded-lg bg-white dark:bg-black">
                            <!-- loader -->
                            <div
                                class="grid min-h-[175px] place-content-center bg-white-light/30 dark:bg-dark dark:bg-opacity-[0.08]">
                                <span
                                    class="inline-flex h-5 w-5 animate-spin rounded-full border-2 border-black !border-l-transparent dark:border-white"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2" style="display: none;">
                <!-- Sales By Category -->
                <div class="panel h-full">
                    <div class="mb-5 flex items-center">
                        <h5 class="text-lg font-semibold dark:text-white-light">Sales By
                            Category</h5>
                    </div>
                    <div class="overflow-hidden">
                        <div x-ref="salesByCategory" class="rounded-lg bg-white dark:bg-black">
                            <!-- loader -->
                            <div
                                class="grid min-h-[353px] place-content-center bg-white-light/30 dark:bg-dark dark:bg-opacity-[0.08]">
                                <span
                                    class="inline-flex h-5 w-5 animate-spin rounded-full border-2 border-black !border-l-transparent dark:border-white"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end main content section -->
</div>
@endsection
@section('javascript')
<script>
document.addEventListener("alpine:init", () => {
    // content section
    Alpine.data("sales", () => ({
      init() {
        isDark =
          this.$store.app.theme === "dark" || this.$store.app.isDarkMode
            ? true
            : false;
        isRtl = this.$store.app.rtlClass === "rtl" ? true : false;
  
        const revenueChart = null;
        const salesByCategory = null;
        const dailySales = null;
        const totalOrders = null;
  
        // revenue
        setTimeout(() => {
          this.revenueChart = new ApexCharts(
            this.$refs.revenueChart,
            this.revenueChartOptions
          );
          this.$refs.revenueChart.innerHTML = "";
          this.revenueChart.render();
  
          // sales by category
          this.salesByCategory = new ApexCharts(
            this.$refs.salesByCategory,
            this.salesByCategoryOptions
          );
          this.$refs.salesByCategory.innerHTML = "";
          this.salesByCategory.render();
  
          // daily sales
          this.dailySales = new ApexCharts(
            this.$refs.dailySales,
            this.dailySalesOptions
          );
          this.$refs.dailySales.innerHTML = "";
          this.dailySales.render();
  
          // total orders
          this.totalOrders = new ApexCharts(
            this.$refs.totalOrders,
            this.totalOrdersOptions
          );
          this.$refs.totalOrders.innerHTML = "";
          this.totalOrders.render();
        }, 300);
  
        this.$watch("$store.app.theme", () => {
          isDark =
            this.$store.app.theme === "dark" || this.$store.app.isDarkMode
              ? true
              : false;
  
          this.revenueChart.updateOptions(this.revenueChartOptions);
          this.salesByCategory.updateOptions(this.salesByCategoryOptions);
          this.dailySales.updateOptions(this.dailySalesOptions);
          this.totalOrders.updateOptions(this.totalOrdersOptions);
        });
  
        this.$watch("$store.app.rtlClass", () => {
          isRtl = this.$store.app.rtlClass === "rtl" ? true : false;
          this.revenueChart.updateOptions(this.revenueChartOptions);
        });
      },
  
      showBoockingPopup: false,
  
      // revenue
      get revenueChartOptions() {
        return {
          series: [
            {
              name: "Sales",
              data: ,
            },
            {
              name: "Expenses",
              data: ,
            },
          ],
          chart: {
            height: 325,
            type: "area",
            fontFamily: "Nunito, sans-serif",
            zoom: {
              enabled: false,
            },
            toolbar: {
              show: false,
            },
          },
          dataLabels: {
            enabled: false,
          },
          stroke: {
            show: true,
            curve: "smooth",
            width: 2,
            lineCap: "square",
          },
          dropShadow: {
            enabled: true,
            opacity: 0.2,
            blur: 10,
            left: -7,
            top: 22,
          },
          colors: isDark ? ["#2196f3", "#e7515a"] : ["#1b55e2", "#e7515a"],
          markers: {
            discrete: [
              {
                seriesIndex: 0,
                dataPointIndex: 6,
                fillColor: "#1b55e2",
                strokeColor: "transparent",
                size: 7,
              },
              {
                seriesIndex: 1,
                dataPointIndex: 5,
                fillColor: "#e7515a",
                strokeColor: "transparent",
                size: 7,
              },
            ],
          },
          labels: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
          ],
          xaxis: {
            axisBorder: {
              show: false,
            },
            axisTicks: {
              show: false,
            },
            crosshairs: {
              show: true,
            },
            labels: {
              offsetX: isRtl ? 2 : 0,
              offsetY: 5,
              style: {
                fontSize: "12px",
                cssClass: "apexcharts-xaxis-title",
              },
            },
          },
          yaxis: {
            tickAmount: 7,
            
            opposite: isRtl ? true : false,
          },
          grid: {
            borderColor: isDark ? "#191e3a" : "#e0e6ed",
            strokeDashArray: 5,
            xaxis: {
              lines: {
                show: true,
              },
            },
            yaxis: {
              lines: {
                show: false,
              },
            },
            padding: {
              top: 0,
              right: 0,
              bottom: 0,
              left: 0,
            },
          },
          legend: {
            position: "top",
            horizontalAlign: "right",
            fontSize: "16px",
            markers: {
              width: 10,
              height: 10,
              offsetX: -2,
            },
            itemMargin: {
              horizontal: 10,
              vertical: 5,
            },
          },
          tooltip: {
            marker: {
              show: true,
            },
            x: {
              show: false,
            },
          },
          fill: {
            type: "gradient",
            gradient: {
              shadeIntensity: 1,
              inverseColors: !1,
              opacityFrom: isDark ? 0.19 : 0.28,
              opacityTo: 0.05,
              stops: isDark ? [100, 100] : [45, 100],
            },
          },
        };
      },
  
      // sales by category
      get salesByCategoryOptions() {
        return {
          series: [985, 737, 270],
          chart: {
            type: "donut",
            height: 460,
            fontFamily: "Nunito, sans-serif",
          },
          dataLabels: {
            enabled: false,
          },
          stroke: {
            show: true,
            width: 25,
            colors: isDark ? "#0e1726" : "#fff",
          },
          colors: isDark
            ? ["#5c1ac3", "#e2a03f", "#e7515a", "#e2a03f"]
            : ["#e2a03f", "#5c1ac3", "#e7515a"],
          legend: {
            position: "bottom",
            horizontalAlign: "center",
            fontSize: "14px",
            markers: {
              width: 10,
              height: 10,
              offsetX: -2,
            },
            height: 50,
            offsetY: 20,
          },
          plotOptions: {
            pie: {
              donut: {
                size: "65%",
                background: "transparent",
                labels: {
                  show: true,
                  name: {
                    show: true,
                    fontSize: "29px",
                    offsetY: -10,
                  },
                  value: {
                    show: true,
                    fontSize: "26px",
                    color: isDark ? "#bfc9d4" : undefined,
                    offsetY: 16,
                    formatter: (val) => {
                      return val;
                    },
                  },
                  total: {
                    show: true,
                    label: "Total",
                    color: "#888ea8",
                    fontSize: "29px",
                    formatter: (w) => {
                      return w.globals.seriesTotals.reduce(function (a, b) {
                        return a + b;
                      }, 0);
                    },
                  },
                },
              },
            },
          },
          labels: ["Apparel", "Sports", "Others"],
          states: {
            hover: {
              filter: {
                type: "none",
                value: 0.15,
              },
            },
            active: {
              filter: {
                type: "none",
                value: 0.15,
              },
            },
          },
        };
      },
  
      // daily sales
      get dailySalesOptions() {
        return {
          series: [
            {
              name: "Sales",
              data: [44, 55, 41, 67, 22, 43, 21],
            },
            {
              name: "Last Week",
              data: [13, 23, 20, 8, 13, 27, 33],
            },
          ],
          chart: {
            height: 160,
            type: "bar",
            fontFamily: "Nunito, sans-serif",
            toolbar: {
              show: false,
            },
            stacked: true,
            stackType: "100%",
          },
          dataLabels: {
            enabled: false,
          },
          stroke: {
            show: true,
            width: 1,
          },
          colors: ["#e2a03f", "#e0e6ed"],
          responsive: [
            {
              breakpoint: 480,
              options: {
                legend: {
                  position: "bottom",
                  offsetX: -10,
                  offsetY: 0,
                },
              },
            },
          ],
          xaxis: {
            labels: {
              show: false,
            },
            categories: ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
          },
          yaxis: {
            show: false,
          },
          fill: {
            opacity: 1,
          },
          plotOptions: {
            bar: {
              horizontal: false,
              columnWidth: "25%",
            },
          },
          legend: {
            show: false,
          },
          grid: {
            show: false,
            xaxis: {
              lines: {
                show: false,
              },
            },
            padding: {
              top: 10,
              right: -20,
              bottom: -20,
              left: -20,
            },
          },
        };
      },
  
      // total orders
      get totalOrdersOptions() {
        return {
          series: [
            {
              name: "Sales",
              data: [28, 40, 36, 52, 38, 60, 38, 52, 36, 40],
            },
          ],
          chart: {
            height: 290,
            type: "area",
            fontFamily: "Nunito, sans-serif",
            sparkline: {
              enabled: true,
            },
          },
          stroke: {
            curve: "smooth",
            width: 2,
          },
          colors: isDark ? ["#00ab55"] : ["#00ab55"],
          labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          yaxis: {
            min: 0,
            show: false,
          },
          grid: {
            padding: {
              top: 125,
              right: 0,
              bottom: 0,
              left: 0,
            },
          },
          fill: {
            opacity: 1,
            type: "gradient",
            gradient: {
              type: "vertical",
              shadeIntensity: 1,
              inverseColors: !1,
              opacityFrom: 0.3,
              opacityTo: 0.05,
              stops: [100, 100],
            },
          },
          tooltip: {
            x: {
              show: false,
            },
          },
        };
      },
  
      // -------------------------------------new codes----------------------
      reminders: ,
  
      transactions: ,
  
      stockAlerts: ,
    }));
  
    Alpine.data("calendarData", () => ({
      init() {
        this.updateRoomData();
      },
      year: new Date().getFullYear(),
      firstDay: new Date(
        new Date().getFullYear(),
        getMonthIndex("January"),
        1
      ).getDay(),
      dayNames: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      doubleRoomAvailability: Array(31).fill(0),
      roomData: [], // Initialize as empty
      originalRoomData: ,
  
      // Function to update room data based on the selected month
      updateRoomData() {
        const selectedMonth = this.months[this.monthIndex];
        const formattedSelectedMonth = getMonthIndex(selectedMonth) + 1; // Convert month name to index
  
        // Filter room data to include only ranges that fall within the selected month
        this.roomData = this.originalRoomData.map((room) => {
          return {
            ...room,
            ranges: room.ranges.filter((range) => {
              const rangeStartMonth = new Date(range.start).getMonth() + 1;
              return rangeStartMonth === formattedSelectedMonth;
            }),
          };
        });
      },
  
      getCellClass(dayIndex, roomIndex) {
        const room = this.roomData[roomIndex];
  
        // Loop through ranges for the current room
        for (const range of room.ranges) {
          const start = new Date(range.start);
          const end = new Date(range.end);
          const currentDate = new Date(
            `${this.year}/${this.monthIndex + 1}/${dayIndex + 1}`
          );
  
          // Check if the current date falls within the range
          if (currentDate >= start && currentDate <= end) {
            // Return the status as the class to apply
            return range.status;
          }
        }
  
        // If no matching range is found, return an empty string (no class)
        return "";
      },
  
      isTodayRoom(room) {
        const currentDate = new Date();
        for (const range of room.ranges) {
          const start = new Date(range.start);
          const end = new Date(range.end);
          if (currentDate >= start && currentDate <= end) {
            return true;
          }
        }
        return false;
      },
  
      getTodayRangeStatusColor(room) {
        const status = this.getTodayRangeStatus(room);
        switch (status) {
          case "reserved":
            return "rgb(22, 196, 22)";
          case "booked":
            return "blue";
          case "bloked":
            return "gray";
          case "rejected":
            return "red";
          default:
            return ""; // Default color if status is not recognized
        }
      },
  
      getTodayRangeStatus(room) {
        const currentDate = new Date();
        for (const range of room.ranges) {
          const start = new Date(range.start);
          const end = new Date(range.end);
          if (currentDate >= start && currentDate <= end) {
            return range.status;
          }
        }
        return "";
      },
  
      monthIndex: 1,
      // Array of month names
      months: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
      ],
  
      // Function to change the displayed month when left arrow is clicked
      prevMonth() {
        if (this.monthIndex > 0) {
          this.monthIndex--;
          this.updateRoomData();
        }
      },
      // Function to change the displayed month when right arrow is clicked
      nextMonth() {
        if (this.monthIndex < this.months.length - 1) {
          this.monthIndex++;
          this.updateRoomData();
        }
      },
      // Computed property to get the current month name based on monthIndex
      month() {
        return this.months[this.monthIndex];
      },
  
      // Function to get the number of days in the current month
      getDaysInMonth() {
        const currentDate = new Date(this.year, this.monthIndex);
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth();
        const lastDay = new Date(year, month + 1, 0).getDate();
        return Array.from({ length: lastDay }, (_, i) => i + 1);
      },
  
      // Function to get the name of the day for a given index
      getDayName(index) {
        const firstDay = new Date(this.year, this.monthIndex, 1).getDay();
        const dayIndex = (index + firstDay) % 7;
        return this.dayNames[dayIndex];
      },
  
      // Function to check if a given day index corresponds to a weekend
      isWeekend(index) {
        const dayName = this.getDayName(index);
        return dayName === "Sa" || dayName === "Su";
      },
  
      // Function to check if a given day index corresponds to today's date
      isToday(index) {
        const currentDate = new Date();
        const currentMonth = currentDate.getMonth();
        const currentYear = currentDate.getFullYear();
        const currentDay = currentDate.getDate();
  
        return (
          currentMonth === this.monthIndex &&
          currentYear === this.year &&
          currentDay === index + 1
        );
      },
    }));
  });
  
  function getMonthIndex(monthName) {
    const months = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ];
    return months.indexOf(monthName);
  }
</script>
@endsection