<!doctype html>
<html lang="en" data-bs-theme="light">


<!-- Mirrored from codervent.com/matoxi/demo/vertical-menu/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jan 2024 16:36:45 GMT -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Domun</title>
    <!--favicon-->


    <!--plugins-->
    <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="assets/plugins/metismenu/metisMenu.min.css">
    <link rel="stylesheet" type="text/css" href="assets/plugins/metismenu/mm-vertical.css">
    <link rel="stylesheet" type="text/css" href="assets/plugins/simplebar/css/simplebar.css">
    <!--bootstrap css-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&amp;display=swap"
        rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">
    <!--main css-->
    <link href="assets/css/bootstrap-extended.css" rel="stylesheet">
    <link href="sass/main.css" rel="stylesheet">
    <link href="sass/dark-theme.css" rel="stylesheet">
    <link href="sass/semi-dark.css" rel="stylesheet">
    <link href="sass/bordered-theme.css" rel="stylesheet">
    <link href="sass/responsive.css" rel="stylesheet">
    <!-- date range picker -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

</head>

<body>

    <!--start header-->
    <header class="top-header">
        <nav class="navbar navbar-expand align-items-center gap-4 justify-content-between">
            <div class="btn-toggle">
                <a href="javascript:;"><i class="material-icons-outlined">menu</i></a>
            </div>
            <div class="search-bar flex-grow-1">
                <div class="position-relative">


                    <span
                        class="material-icons-outlined position-absolute me-3 translate-middle-y end-0 top-50 search-close">close</span>
                    <div class="search-popup p-3">
                        <div class="card rounded-4 overflow-hidden">
                            <div class="card-header d-lg-none">
                                <div class="position-relative">





                                    <span
                                        class="material-icons-outlined position-absolute ms-3 translate-middle-y start-0 top-50">search</span>
                                    <span
                                        class="material-icons-outlined position-absolute me-3 translate-middle-y end-0 top-50 mobile-search-close">close</span>
                                </div>
                            </div>
                            <div class="card-body search-content">
                                <p class="search-title">Recent Searches</p>
                                <div class="d-flex align-items-start flex-wrap gap-2 kewords-wrapper">
                                    <a href="javascript:;" class="kewords"><span>Angular Template</span><i
                                            class="material-icons-outlined fs-6">search</i></a>
                                    <a href="javascript:;" class="kewords"><span>Dashboard</span><i
                                            class="material-icons-outlined fs-6">search</i></a>
                                    <a href="javascript:;" class="kewords"><span>Admin Template</span><i
                                            class="material-icons-outlined fs-6">search</i></a>
                                    <a href="javascript:;" class="kewords"><span>Bootstrap 5 Admin</span><i
                                            class="material-icons-outlined fs-6">search</i></a>
                                    <a href="javascript:;" class="kewords"><span>Html eCommerce</span><i
                                            class="material-icons-outlined fs-6">search</i></a>
                                    <a href="javascript:;" class="kewords"><span>Sass</span><i
                                            class="material-icons-outlined fs-6">search</i></a>
                                    <a href="javascript:;" class="kewords"><span>laravel 9</span><i
                                            class="material-icons-outlined fs-6">search</i></a>
                                </div>
                                <hr>
                                <p class="search-title">Tutorials</p>
                                <div class="search-list d-flex flex-column gap-2">
                                    <div class="search-list-item d-flex align-items-center gap-3">
                                        <div class="list-icon">
                                            <i class="material-icons-outlined fs-5">play_circle</i>
                                        </div>
                                        <div class="">
                                            <h5 class="mb-0 search-list-title ">Wordpress Tutorials</h5>
                                        </div>
                                    </div>
                                    <div class="search-list-item d-flex align-items-center gap-3">
                                        <div class="list-icon">
                                            <i class="material-icons-outlined fs-5">shopping_basket</i>
                                        </div>
                                        <div class="">
                                            <h5 class="mb-0 search-list-title">eCommerce Website Tutorials</h5>
                                        </div>
                                    </div>

                                    <div class="search-list-item d-flex align-items-center gap-3">
                                        <div class="list-icon">
                                            <i class="material-icons-outlined fs-5">laptop</i>
                                        </div>
                                        <div class="">
                                            <h5 class="mb-0 search-list-title">Responsive Design</h5>
                                        </div>
                                    </div>
                                </div>

                                <hr>
                                <p class="search-title">Members</p>

                                <div class="search-list d-flex flex-column gap-2">
                                    <div class="search-list-item d-flex align-items-center gap-3">
                                        <div class="memmber-img">
                                            <img src="assets/images/avatars/01.png" width="32" height="32"
                                                class="rounded-circle" alt="">
                                        </div>
                                        <div class="">
                                            <h5 class="mb-0 search-list-title ">Andrew Stark</h5>
                                        </div>
                                    </div>

                                    <div class="search-list-item d-flex align-items-center gap-3">
                                        <div class="memmber-img">
                                            <img src="assets/images/avatars/02.png" width="32" height="32"
                                                class="rounded-circle" alt="">
                                        </div>
                                        <div class="">
                                            <h5 class="mb-0 search-list-title ">Snetro Jhonia</h5>
                                        </div>
                                    </div>

                                    <div class="search-list-item d-flex align-items-center gap-3">
                                        <div class="memmber-img">
                                            <img src="assets/images/avatars/03.png" width="32" height="32"
                                                class="rounded-circle" alt="">
                                        </div>
                                        <div class="">
                                            <h5 class="mb-0 search-list-title">Michle Clark</h5>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="card-footer text-center bg-transparent">
                                <a href="javascript:;" class="btn w-100">See All Search Results</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="navbar-nav gap-1 nav-right-links align-items-center">
                <li class="nav-item dropdown d-none">

                    </a>
                    <div class="dropdown-menu dropdown-notify dropdown-menu-end shadow">
                        <div class="notify-list">

                        </div>
                    </div>
                </li>

                <li class="nav-item dropdown">
                    <a href="javascrpt:;" class="dropdown-toggle dropdown-toggle-nocaret" data-bs-toggle="dropdown">
                        <div class="d-flex align-items-center">
                            <div class="me-1">
                                <p class="mb-0 fs2">Eleanor Pena</p>
                                <p class=" mt-0 fmon text-end mb-0 fpop text-white "> Admin</p>
                            </div>
                            <img src="assets/images/avatars/01.png" class="p-1 borderCustom" width="45" height="45"
                                style="border-radius: 50%;" />


                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-user dropdown-menu-end shadow">
                        <a class="dropdown-item gap-2 py-2" href="javascript:;">
                            <div class="text-center">
                                <img src="assets/images/avatars/01.png" class="p-1 shadow mb-3" width="90" height="90"
                                    alt="" />
                                <h5 class="user-name mb-0 fw-bold">Eleanor Pena</h5>
                                <small class="text-muted mt-0 fmon"> Pharmacy:25dsaf84</small>
                            </div>
                        </a>
                        <hr class="dropdown-divider" />
                        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="./profile.html"><i
                                class="material-icons-outlined">person_outline</i>Profile</a>

                        <hr class="dropdown-divider" />
                        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="javascript:;"><i
                                class="material-icons-outlined">power_settings_new</i>Logout</a>
                    </div>
                </li>
            </ul>


        </nav>
    </header>

    <!--end top header-->


    <!--start sidebar-->
    <aside class="sidebar-wrapper">
        <div class="sidebar-header">
            <div class="logo-icon">
                <img src="assets/images/dpro.png" class="" width="150px" alt="">
            </div>
            <div class="logo-name flex-grow-1">

            </div>
            <div class="sidebar-close">
                <span class="material-icons-outlined">close</span>
            </div>
        </div>
        <div class="sidebar-nav" data-simplebar="true">

            <!--navigation-->
            <ul class="metismenu" id="sidenav">
                <li>
                    <a href="./dashboard.html" class="">
                        <div class="icnonDiv">

                            <img class="img2" src="./assets/images/Dashboard.png" alt="">
                        </div>
                        <div class="menu-title">Dashboard</div>
                    </a>

                </li>
                <li>

                    <a class="btn " data-bs-toggle="collapse" href="#collapseExample" role="button"
                        aria-expanded="false" aria-controls="collapseExample">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <div class="d-flex">
                                <div class="icnonDiv">

                                    <img class="img2" src="./assets/images/men.png" alt="">
                                </div>
                                <div class="menu-title">Units</div>
                            </div>
                            <img src="./assets/images/iconchev.png" alt="">
                        </div>
                    </a>
                    <div class="collapse" id="collapseExample">
                        <div class="card card-body menuCard">
                            <div>
                                <div>
                                    <a href="./units.html" class="">
                                        <div class="">


                                        </div>
                                        <div class="menu-title">units</div>
                                    </a>

                                </div>
                                <div>
                                    <a href="./warnings.html" class="">
                                        <div class="">


                                        </div>
                                        <div class="menu-title">Warnings</div>
                                    </a>

                                </div>
                            </div>
                        </div>
                    </div>

                </li>
                <li>
                    <a href="./issue.html" class="">
                        <div class="icnonDiv">

                            <img class="img2" src="./assets/images/issue.png" alt="">
                        </div>
                        <div class="menu-title">Issues </div>
                    </a>

                </li>
                <li>

                    <a class="btn " data-bs-toggle="collapse" href="#collapseExample1" role="button"
                        aria-expanded="false" aria-controls="collapseExample1">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <div class="d-flex">
                                <div class="icnonDiv">

                                    <img class="img2" src="./assets/images/social.png" alt="">
                                </div>
                                <div class="menu-title">Socials</div>
                            </div>
                            <img src="./assets/images/iconchev.png" alt="">
                        </div>
                    </a>
                    <div class="collapse" id="collapseExample1">
                        <div class="card card-body menuCard">
                            <div>

                                <div>
                                    <a href="./reservations.html" class="">
                                        <div class="">


                                        </div>
                                        <div class="menu-title">Reservations</div>
                                    </a>

                                </div>
                            </div>
                        </div>
                    </div>

                </li>
                <li>
                    <a href="./messagecenter.html" class="">
                        <div class="icnonDiv">

                            <img class="img2" src="./assets/images/messages.png" alt="">
                        </div>
                        <div class="menu-title">Message Center</div>
                    </a>

                </li>
                <li>

                    <a class="btn " data-bs-toggle="collapse" href="#collapseExample2" role="button"
                        aria-expanded="false" aria-controls="collapseExample2">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <div class="d-flex">
                                <div class="icnonDiv">

                                    <img class="img2" src="./assets/images/finance.png" alt="">
                                </div>
                                <div class="menu-title">Finance</div>
                            </div>
                            <img src="./assets/images/iconchev.png" alt="">
                        </div>
                    </a>
                    <div class="collapse" id="collapseExample2">
                        <div class="card card-body menuCard">
                            <div>

                                <div>
                                    <a href="./configuration.html" class="">

                                        <div class="menu-title">Configuration & Settings</div>
                                    </a>

                                </div>

                                <div>
                                    <a href="./vendors.html" class="">

                                        <div class="menu-title">Vendors</div>
                                    </a>

                                </div>

                                <div>
                                    <a href="./accountsreceivables.html" class="">

                                        <div class="menu-title">Accounts Receivabless</div>
                                    </a>

                                </div>

                                <div>
                                    <a href="./accountspayables.html" class="">

                                        <div class="menu-title">Accounts Payables</div>
                                    </a>

                                </div>
                                <div>
                                    <a href="./bankaccounts.html" class="">

                                        <div class="menu-title">Bank Accounts</div>
                                    </a>

                                </div>
                            </div>
                        </div>
                    </div>

                </li>
                <li>

                    <a class="btn " data-bs-toggle="collapse" href="#collapseExample3" role="button"
                        aria-expanded="false" aria-controls="collapseExample3">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <div class="d-flex">
                                <div class="icnonDiv">

                                    <img class="img2" src="./assets/images/social.png" alt="">
                                </div>
                                <div class="menu-title">Security</div>
                            </div>
                            <img src="./assets/images/iconchev.png" alt="">
                        </div>
                    </a>
                    <div class="collapse" id="collapseExample3">
                        <div class="card card-body menuCard">
                            <div>

                                <div>
                                    <a href="./entandext.html" class="">

                                        <div class="menu-title">Entrances & Exists</div>
                                    </a>

                                </div>

                                <div>
                                    <a href="./eventjournal.html" class="">

                                        <div class="menu-title">Event Journal</div>
                                    </a>

                                </div>

                                <div>
                                    <a href="./checklists.html" class="">

                                        <div class="menu-title">Check-lists</div>
                                    </a>

                                </div>

                                <div>
                                    <a href="./bannedpeople.html" class="">

                                        <div class="menu-title">Banned People</div>
                                    </a>

                                </div>
                                <div>
                                    <a href="./securityofficer.html" class="">

                                        <div class="menu-title">Security officers</div>
                                    </a>

                                </div>
                            </div>
                        </div>
                    </div>

                </li>
                <li>
                    <a href="./dcuments.html" class="">
                        <div class="icnonDiv">

                            <img class="img2" src="./assets/images/document.png" alt="">
                        </div>
                        <div class="menu-title">Documents</div>
                    </a>

                </li>





                <li>

                    <a class="btn " data-bs-toggle="collapse" href="#collapseExample4" role="button"
                        aria-expanded="false" aria-controls="collapseExample4">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <div class="d-flex">
                                <div class="icnonDiv">

                                    <img class="img2" src="./assets/images/sett.png" alt="">
                                </div>
                                <div class="menu-title">Settings</div>
                            </div>
                            <img src="./assets/images/iconchev.png" alt="">
                        </div>
                    </a>
                    <div class="collapse" id="collapseExample4">
                        <div class="card card-body menuCard">
                            <div>

                                <div>
                                    <a href="./waterrates.html" class="">

                                        <div class="menu-title">Water Rates</div>
                                    </a>

                                </div>



                                <div>
                                    <a href="./amenities.html" class="">

                                        <div class="menu-title">Amenities</div>
                                    </a>

                                </div>

                                <div>
                                    <a href="./authorization.html" class="">

                                        <div class="menu-title">Authorizations</div>
                                    </a>

                                </div>
                                <div>
                                    <a href="./admininfo.html" class="">

                                        <div class="menu-title">Admin & condo info</div>
                                    </a>

                                </div>
                                <div>
                                    <a href="./setupmeetings.html" class="">

                                        <div class="menu-title">Setup Meetings</div>
                                    </a>

                                </div>
                                <div>
                                    <a href="./securitycompanies.html" class="">

                                        <div class="menu-title">Security Companies</div>
                                    </a>

                                </div>
                            </div>
                        </div>
                    </div>

                </li>
                <li>
                    <a href="./reports.html" class="">
                        <div class="icnonDiv">

                            <img class="img2" src="./assets/images/rports.png" alt="">
                        </div>
                        <div class="menu-title">Reports
                        </div>
                    </a>

                </li>
                <li>
                    <a href="#" class="d-flex align-items-center text-white gap-2">
                        <div class="icnonDiv">

                            <span class="img2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-box-arrow-left" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0z" />
                                    <path fill-rule="evenodd"
                                        d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708z" />
                                </svg>
                            </span>
                        </div>
                        <div class="menu-title m-0">Logout</div>
                    </a>
                </li>




            </ul>

            <!--end navigation-->
        </div>




    </aside>
    <!--end sidebar-->


    <!--start main wrapper-->
    <main class="main-wrapper">
        <div class="main-content">
            <button class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn"><img
                    src="./assets/images/arowleft.svg" alt="" width="15px"> Back</button>

            <div class="row">
                <div class="col-md-4 col-lg-4  col-xxl-3 my-2">
                    <div class="card custCard p-3 ">
                        <div class="d-flex align-items-center gap-2">
                            <img src="./assets/images/pool.png" alt="">
                            <div class="my-1">
                                <p class="fos1 m-0 fw-bolder">Review of common areas</p>

                            </div>
                        </div>
                        <div>
                            <p class="mb-1 fos2">Frequency: <span>Everyday
                                </span></p>
                            <p class="mb-1 fos2">Status: <span>In process
                                </span></p>
                            <div>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75"
                                        aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <p class="mb-1 fos2">Start Date <span>June 6,2024,12:11pm
                                </span></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card custCard2">
                        <div class="card-body  my-2">
                            <p class="fos3 fw-bolder">Security</p>
                            <div class=" mt-2 ">
                                <div class="d-flex gap-2 align-items-center my-3">

                                    <img src="./assets/images/tick.png" alt="" width="20px">
                                    <p class="foss3 mb-0">Is the alarm armed?</p>
                                </div>
                                <div class="d-flex gap-2 align-items-center my-3">

                                    <img src="./assets/images/tick.png" alt="" width="20px">
                                    <p class="foss3 mb-0">Does the alarm sound when a Zora is activated?</p>
                                </div>
                                <div class="d-flex gap-2 align-items-center my-3">

                                    <img src="./assets/images/tick.png" alt="" width="20px">
                                    <p class="foss3 mb-0">Is there any vegetation obstruction that could activate the
                                        alarm?</p>
                                </div>
                            </div>
                            <!-- common areas -->
                            <p class="fos3 fw-bolder">Common areas</p>
                            <div class=" mt-2 ">
                                <div class="d-flex gap-2 align-items-center my-3 justify-content-between">

                                    <div class="d-flex gap-2 align-items-center">
                                        <img src="./assets/images/cross.png" alt="" width="20px">
                                        <p class="foss3 mb-0">Is the gym clean?</p>
                                    </div>
                                    <!-- <button class="btn" data-bs-toggle="modal" data-bs-target="#exampleModal"><small class="m-0">report</small> <img src="./assets/images/rpo.png" alt="" width="15px"></button> -->

                                </div>
                                <div class="d-flex gap-2 align-items-center my-3">

                                    <img src="./assets/images/cross.png" alt="" width="20px">
                                    <p class="foss3 mb-0">Does the pool water have a good color?</p>
                                </div>
                                <div class="d-flex gap-2 align-items-center my-3">

                                    <img src="./assets/images/cross.png" alt="" width="20px">
                                    <p class="foss3 mb-0">Are the playground equipment in the parks in good condition?
                                    </p>
                                </div>
                                <!-- <button class="btn autBtn px-5 py-2 ">Add More</button> -->
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="p-2 d-flex justify-content-between"
                            style="background: linear-gradient(135deg, #22c783 0.00%, #1aa98f 100.00%);">
                            <h1 class="modal-title fs-4 fw-bold text-white" id="exampleModalLabel">Checklist Report</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body p-3">
                            <div class="row">
                                <!-- Report title section -->
                                <div class="col-md-12 my-2">
                                    <p class="foss5 m-0">Report title</p>
                                    <input type="text" class="form-control" placeholder="Design a task manager app">
                                </div>

                                <!-- Report details section -->
                                <div class="col-md-12 my-2">
                                    <p class="foss5 m-0">Report Details</p>
                                    <textarea name="" id="note" class="form-control textarea"
                                        placeholder="Description about issue" rows="6"
                                        oninput="countWords()"></textarea>
                                    <div class="d-flex justify-content-end">
                                        <small class="fw-bolder" id="wordCount">0/2000</small>
                                    </div>
                                </div>

                                <!-- Attach files section -->
                                <div class="col-md-12 my-2 d-flex align-items-center">
                                    <i class="fas fa-paperclip me-2"></i><span class="text-success">Attach
                                        files</span><span>(10MB max each)</span>
                                </div>
                                <!-- File upload section -->
                                <div class="col-md-12">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="card bgSe">
                                            <div class="card-body">
                                                <img src="./assets/images/attachp.png" alt="" width="20px">
                                                <label for="doc" class="btn btnClose">Click To Replace</label>
                                                <input type="file" name="" id="doc" class="d-none">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit button section -->
                            <div class="row d-flex justify-content-end pe-3">
                                <div class="modal-footer col-md-12 my-2 d-flex justify-content-center">
                                    <button class="btn autBtn py-2 px-3">Submit To Admin</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </main>
    <!--end main wrapper-->


    <!--start overlay-->
    <div class="overlay btn-toggle"></div>
    <!--end overlay-->









    <!--bootstrap js-->
    <script src="assets/js/bootstrap.bundle.min.js"></script>

    <!--plugins-->
    <script src="assets/js/jquery.min.js"></script>
    <!--plugins-->
    <script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
    <script src="assets/plugins/metismenu/metisMenu.min.js"></script>

    <script src="assets/js/index2.js"></script>
    <script src="assets/js/main.js"></script>
    <!-- appax chart -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <!-- moment js -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <!-- data rane picker -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <!-- <script>
    
    var options = {
          series: [{
          name: 'series1',
          data: [31, 40, 28, 51, 42, 109, 100]
        }, {
          name: 'series2',
          data: [11, 32, 45, 32, 34, 52, 41]
        }],
        colors: ['#39D6FF', '#7A8192'],
          chart: {
          height: 350,
          type: 'area'  ,
          
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth'
        },
        xaxis: {
          type: 'datetime',
          categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
        },
        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm'
          },
        },
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
  </script> -->
    <!-- <script>
    var options = {
      series: [{
        name: 'Completed Bookings',
        data: [31, 40, 28, 51, 42, 109, 100] // Example data
      }, {
        name: 'Product Sales',
        data: [11, 32, 45, 32, 34, 52, 41] // Example data
      }, {
        name: 'Base Revenue',
        data: [20, 30, 40, 50, 60, 70, 80] // Example data
      }, {
        name: 'Retail Revenue',
        data: [15, 25, 35, 45, 55, 65, 75] // Example data
      }],
      colors: ['#39D6FF', '#7A8192', '#FF5733', '#33FF57'], // Different colors for each series
      chart: {
        height: 350,
        type: 'area',
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'smooth'
      },
      xaxis: {
        type: 'datetime',
        categories: [
          "2018-09-19T00:00:00.000Z", 
          "2018-09-19T01:30:00.000Z", 
          "2018-09-19T02:30:00.000Z", 
          "2018-09-19T03:30:00.000Z", 
          "2018-09-19T04:30:00.000Z", 
          "2018-09-19T05:30:00.000Z", 
          "2018-09-19T06:30:00.000Z"
        ]
      },
      tooltip: {
        x: {
          format: 'dd/MM/yy HH:mm'
        },
      },
    };
  
    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
  </script> -->
    <script>
        function countWords() {
            const textarea = document.getElementById('note');
            const wordCount = document.getElementById('wordCount');
            const maxWords = 2000;

            // Get the value of the textarea, including spaces
            let text = textarea.value;

            // Count the number of "words" (characters including spaces)
            let currentWordCount = text.length;

            // Update the word count display
            wordCount.textContent = `${currentWordCount}/${maxWords}`;

            // Limit the number of characters (including spaces) in the textarea
            if (currentWordCount <= 2) {

                wordCount.classList.remove("text-success")
                wordCount.classList.remove("text-danger")
            }

            else if (currentWordCount >= maxWords) {
                textarea.value = text.slice(0, maxWords);
                wordCount.textContent = `${maxWords}/${maxWords}`;
                wordCount.classList.add("text-danger")
            }
            else if (currentWordCount < maxWords) {
                console.log('in less than if')
                wordCount.classList.add("text-success")
                wordCount.classList.remove("text-danger")
            }

            else {
                wordCount.classList.add("text-success")
            }
        }

    </script>
</body>


<!-- Mirrored from codervent.com/matoxi/demo/vertical-menu/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jan 2024 16:36:47 GMT -->

</html>