@extends('layouts.app_rest')

@section('content')
    <!-- Business modal -->

    <div x-data="businessData" class="hidden">
        <div x-show="openModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
            class="fixed inset-0 z-[999] overflow-y-auto bg-[black]/60">
            <div class="flex min-h-screen items-center justify-center" x:data="businessData">
                <div class="bg-white rounded-lg shadow-lg w-full max-w-4xl p-6"> <!-- Increased width -->
                    <div class="flex justify-between items-center">
                        <h3 class="text-lg font-semibold">Create Business Profile</h3>
                    </div>
                    {!! Form::open([
                        'url' => route('business.create'),
                        'method' => 'POST',
                        'files' => true,
                        'class' => 'space-y-4',
                        // 'id' => 'business-form',
                        // 'x-on:submit.prevent="submitForm"',
                    ]) !!}
                    {!! Form::hidden('registration_type', 'business') !!}

                    <div class="flex items-center py-3">
                        <div class="flex items-center justify-center w-1/4">
                            <label for="logo"
                                class="flex flex-col items-center justify-center w-full h-full border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                                <div class="flex flex-col items-center justify-center pt-5 pb-6 mb-4 mt-4">
                                    <svg id="default-icon" class="w-5 h-5 text-gray-500 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                        viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                    </svg>
                                    <img id="selected-image" src="" alt="Selected Image"
                                        class="hidden w-full h-full object-cover rounded-lg" />
                                    <p id="default-text" class="mb-3 py-1 text-sm text-gray-500 dark:text-gray-400">
                                        <span class="font-semibold">Logo Image</span>
                                    </p>
                                </div>
                                {!! Form::file('logo', ['id' => 'logo', 'class' => 'hidden']) !!}
                            </label>
                        </div>

                        <div class="ml-4">
                            <label for="logo"
                                class="btn btn-primary inline-flex items-center px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer ltr:ml-4 rtl:mr-4">
                                Add Logo
                            </label>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="mb-3">
                            {!! Form::label('business_code', 'Business Code', ['class' => 'block text-gray-700']) !!}
                            {!! Form::text('business_code', null, ['class' => 'form-input mt-1 block w-full', 'required']) !!}
                        </div>
                        <div class="mb-3">
                            {!! Form::label('name', 'Business Name', ['class' => 'block text-gray-700']) !!}
                            {!! Form::text('name', null, ['class' => 'form-input mt-1 block w-full', 'required']) !!}
                        </div>
                        <div class="mb-3">
                            {!! Form::label('industry', 'Industry', ['class' => 'block text-gray-700']) !!}
                            {!! Form::select('industry', $industries, null, [
                                'class' => 'form-select mt-1 block w-full',
                                'placeholder' => 'Select Industry',
                            ]) !!}
                        </div>

                        <div class="mb-3">
                            {!! Form::label('mobile', 'Mobile', ['class' => 'block text-gray-700']) !!}
                            {!! Form::text('mobile', null, ['class' => 'form-input mt-1 block w-full']) !!}
                        </div>
                        <div class="mb-3">
                            {!! Form::label('address', 'Address', ['class' => 'block text-gray-700']) !!}
                            {!! Form::text('address', null, ['class' => 'form-input mt-1 block w-full']) !!}
                        </div>
                        <div class="mb-3">
                            {!! Form::label('country', 'Country', ['class' => 'block text-gray-700']) !!}
                            {!! Form::text('country', null, ['class' => 'form-input mt-1 block w-full']) !!}
                        </div>
                        <div class="mb-3">
                            {!! Form::label('city', 'City', ['class' => 'block text-gray-700']) !!}
                            {!! Form::text('city', null, ['class' => 'form-input mt-1 block w-full']) !!}
                        </div>
                        <div class="mb-3">
                            {!! Form::label('email', 'Email', ['class' => 'block text-gray-700']) !!}
                            {!! Form::email('email', null, ['class' => 'form-input mt-1 block w-full']) !!}
                        </div>
                        <div class="mb-3">
                            {!! Form::label('website', 'Website', ['class' => 'block text-gray-700']) !!}
                            {!! Form::text('website', null, ['class' => 'form-input mt-1 block w-full']) !!}
                        </div>

                        <div class="mb-3">
                            {!! Form::label('phone', 'Phone', ['class' => 'block text-gray-700']) !!}
                            {!! Form::text('phone', null, ['class' => 'form-input mt-1 block w-full']) !!}
                        </div>
                        <div class="mb-3">
                            {!! Form::label('reg_doc_no', 'Registration Number', ['class' => 'block text-gray-700']) !!}
                            {!! Form::text('reg_doc_no', null, ['class' => 'form-input mt-1 block w-full']) !!}
                        </div>
                        <div class="mb-3">
                            {!! Form::label('package', 'Package', ['class' => 'block text-gray-700']) !!}
                            {!! Form::select('package', $packages, null, [
                                'class' => 'form-select mt-1 block w-full',
                                'placeholder' => 'Select Package',
                            ]) !!}
                        </div>
                    </div>
                    <div class="flex justify-end">
                        <button type="submit" class="btn btn-primary">Create</button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

    <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-1 md: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>{{ translate('total_sales') }}</h6>
                                    <p class="ltr:ml-auto rtl:mr-auto"><span
                                            class="font-bold">{{ session('currency_symbol', 'Rs') }}</span>
                                        <span class="display_currency">
                                            {{ $total_sales * session('currency_value', 1) }}
                                        </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>{{ translate('total_purchase') }}</h6>
                                    {{-- <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency"
                                            data-currency_symbol="true">{{ $total_purchase }} </span></p> --}}
                                    <p class="ltr:ml-auto rtl:mr-auto"><span
                                            class="font-bold">{{ session('currency_symbol', 'Rs') }}</span>
                                        <span class="display_currency">
                                            {{ $total_purchase * session('currency_value', 1) }}
                                        </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>{{ translate('total_expenses') }}</h6>
                                    {{-- <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency"
                                            data-currency_symbol="true">{{ $total_expense }} </span></p> --}}
                                    <p class="ltr:ml-auto rtl:mr-auto"><span
                                            class="font-bold">{{ session('currency_symbol', 'Rs') }}</span>
                                        <span class="display_currency">
                                            {{ $total_expense * session('currency_value', 1) }}
                                        </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>{{ translate('customer_due') }}</h6>
                                    {{-- <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency"
                                            data-currency_symbol="true">{{ $due }} </span></p> --}}
                                    <p class="ltr:ml-auto rtl:mr-auto"><span
                                            class="font-bold">{{ session('currency_symbol', 'Rs') }}</span>
                                        <span class="display_currency">
                                            {{ $due * session('currency_value', 1) }}
                                        </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>{{ translate('restaurant_sale') }}</h6>
                                    {{-- <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency"
                                            data-currency_symbol="true">{{ $restaurant_sales }}</span></p> --}}
                                    <p class="ltr:ml-auto rtl:mr-auto"><span
                                            class="font-bold">{{ session('currency_symbol', 'Rs') }}</span>
                                        <span class="display_currency">
                                            {{ $restaurant_sales * session('currency_value', 1) }}
                                        </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>{{ translate('hotel_sales') }}</h6>
                                    {{-- <p class="ltr:ml-auto rtl:mr-auto"><span class="display_currency"
                                            data-currency_symbol="true">{{ $hotel_sales }}</span></p> --}}
                                    <p class="ltr:ml-auto rtl:mr-auto"><span
                                            class="font-bold">{{ session('currency_symbol', 'Rs') }}</span>
                                        <span class="display_currency">
                                            {{ $hotel_sales * session('currency_value', 1) }}
                                        </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>{{ translate('bar_sales') }}</h6>
                                    {{-- <p class="ltr:ml-auto rtl:mr-auto">{{ $bar_sales }}</p> --}}
                                    <p class="ltr:ml-auto rtl:mr-auto"><span
                                            class="font-bold">{{ session('currency_symbol', 'Rs') }}</span>
                                        <span class="display_currency">
                                            {{ $bar_sales * session('currency_value', 1) }}
                                        </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>{{ translate('event_sales') }}</h6>
                                    {{-- <p class="ltr:ml-auto rtl:mr-auto">0</p> --}}
                                    <p class="ltr:ml-auto rtl:mr-auto"><span
                                            class="font-bold">{{ session('currency_symbol', 'Rs') }}</span>
                                        <span class="display_currency">
                                            0
                                        </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>
                </div>

                <!-- calender -->
                <div class="panel h-full mb-5">
                    <div class="buttons buttons flex justify-end mb-4 sm:mb-6"
                        style="display: flex; justify-content: flex-end;">
                        <select class="form-select w-full sm:w-1/4" style="width: 20%;" name="" id=""
                            x-on:change="$event.target.value === 'boocking' ? showBoockingPopup = true : showBoockingPopup = false">
                            <option selected>{{ translate('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 flex flex-col sm:flex-row">
                            <div class="calender-box flex justify-center items-center mb-2 sm:mb-0"
                                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 flex items-center justify-center sm:justify-start">
                                <!-- Bind click events to call prevMonth and nextMonth functions -->
                                <i class="fa fa-chevron-left" style="margin-right: 20px; cursor: pointer;"
                                    aria-hidden="true" x-on:click="prevMonth"></i>
                                <!-- Display current month -->
                                <span x-text="month"></span>
                                <!-- Bind click events to call prevMonth and nextMonth functions -->
                                <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 flex flex-wrap">
                            <div class="calender-box flex justify-center items-center mb-2 sm:mb-0 w-full sm:w-auto"
                                style="display: flex; justify-content: center; align-items: center;">
                                <p class="allSelected">All Selected (5)</p>
                            </div>
                            <!-- Loop through each day of the month -->
                            <template x-for="(day, index) in getDaysInMonth()" :key="index">
                                <div class="cell w-1/7 p-1 sm:p-2"
                                    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 flex flex-wrap pb-1 sm:pb-2" style="padding-bottom: 2px;">
                            <!-- <div class="room-number"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            style="display: flex; justify-content: flex-end; align-items: center;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <p class="double-room" style="font-weight: bold;">Double Room</p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </div> -->
                            <!-- Loop through days in the month -->
                            <template x-for="(day, index) in getDaysInMonth()" :key="index">
                                <div class="cell w-1/7 p-1 sm:p-2" x-text="doubleRoomAvailability[index]"></div>
                            </template>
                        </div>
                        <!-- Room Entries -->
                        <div style="max-height:300px;overflow:auto;">
                            <template x-for="(room, roomIndex) in roomData.slice(0, 5)" :key="roomIndex">
                                <div class="row flex flex-wrap p-1 sm:py-1 sm:px-0" style="padding: 1px 0;">
                                    <div class="room-number flex justify-between items-center w-full sm:w-auto">
                                        <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>
                                    <!-- Loop through days in the month -->
                                    <template x-for="(day, dayIndex) in getDaysInMonth()" :key="dayIndex">
                                        <!-- Check if the day falls within the specified ranges for each room -->
                                        <div class="cell w-1/7 p-1 sm:p-2" :class="getCellClass(dayIndex, roomIndex)">
                                        </div>
                                    </template>
                                </div>
                            </template>
                            <!-- Display the "Double Room" -->
                            <!-- <div class="row double-room" style="padding-bottom: 2px;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <div class="room-number"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            style="display: flex; justify-content: flex-end; align-items: center;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <p class="double-room" style="font-weight: bold;">Double Room</p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </div> -->
                            <!-- Loop through days in the month -->
                            <!-- <template x-for="(day, index) in getDaysInMonth()" :key="index">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div class="cell" x-text="doubleRoomAvailability[index]"></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </template>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </div> -->

                            <!-- Display the remaining rooms -->
                            <template x-for="(room, roomIndex) in roomData.slice(5)" :key="roomIndex">
                                <div class="row flex flex-wrap p-1 sm:py-1 sm:px-0" style="padding: 1px 0;">
                                    <div class="room-number flex justify-between items-center w-full sm:w-auto">
                                        <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>
                                    <!-- Loop through days in the month -->
                                    <template x-for="(day, dayIndex) in getDaysInMonth()" :key="dayIndex">
                                        <!-- Check if the day falls within the specified ranges for each room -->
                                        <div class="cell w-1/7 p-1 sm:p-2" :class="getCellClass(dayIndex, roomIndex + 5)">
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>

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

                    <!-- Popup -->
                    <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">{{ translate('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">{{ translate('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">{{ translate('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 lg:grid-cols-2 xl:grid-cols-3">
                    <!-- profit graph -->
                    <div class="panel h-full lg:col-span-2 xl:col-span-2">
                        <div class="mb-5 flex items-center dark:text-white-light">
                            <h5 class="text-lg font-semibold">{{ translate('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 lg:col-span-1 xl:col-span-1">
                        <div class="mb-5 flex items-center">
                            <h5 class="text-lg font-semibold dark:text-white-light">
                                {{ translate('daily_sales') }} <span
                                    class="block text-sm font-normal text-white-dark">{{ translate('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>
            <!-- 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
                        );
                    },
                }));


                Alpine.data('businessData', () => ({
                    openModal: @json(auth()->user()->registration_type === 'business' && auth()->user()->businesses_id === null),

                    init() {
                        if (this.openModal) {
                            this.$el.classList.remove('hidden');
                        }
                    },



                    submitForm(event) {
                        event.preventDefault();

                        const form = document.getElementById('business-form');
                        const formData = new FormData(form);

                        fetch(form.action, {
                                method: form.method,
                                body: formData,
                                headers: {
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    this.openModal = false;
                                    alert(data.msg || 'Business Created Successfully');
                                } else {
                                    alert(data.msg || 'Something went wrong. Please try again.');
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                alert('An unexpected error occurred.');
                            });
                    }
                }));


                document.getElementById('logo').addEventListener('change', function(event) {
                    const file = event.target.files[0];
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        const selectedImage = document.getElementById('selected-image');
                        selectedImage.src = e.target.result;
                        selectedImage.classList.remove('hidden');
                        document.getElementById('default-icon').classList.add('hidden');
                        document.getElementById('default-text').classList.add('hidden');
                    };

                    reader.readAsDataURL(file);
                });

                document.querySelector('.btn-primary').addEventListener('click', function() {
                    document.getElementById('logo').click();
                });
            });

            function getMonthIndex(monthName) {
                const months = [
                    "January",
                    "February",
                    "March",
                    "April",
                    "May",
                    "June",
                    "July",
                    "August",
                    "September",
                    "October",
                    "November",
                    "December",
                ];
                return months.indexOf(monthName);
            }
        </script>
    @endsection