@extends('user.layouts.template')
@section('style')


<style>
    .sticky-top {
        top: 50px !important;
        background-color: var(--nf-header-bg) !important;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
        transition: box-shadow 0.2s;
    }
    .sidebar-icons {
        width: 40px;
    }

    .apexcharts-menu-item.exportCSV {
        display: none;
    }

    .mainnav__inner .mainnav__menu .nav-link {
        padding: 10px 0px !important;
    }

    .mn--max .header__brand {
        padding-inline-start: calc(.625rem + var(--nf-mainnav-link-padding-x));
        max-width: var(--nf-mainnav-max-width);
        width: var(--nf-mainnav-max-width);
        will-change: max-width;
        background-color: var(--nf-mainnav-bg);
    }

    .mn--min .header__brand {
        justify-content: center;
        max-width: var(--nf-mainnav-min-width);
        padding-inline-start: 0;
        transition: max-width var(--nf-mainnav-min-transition-duration) var(--nf-mainnav-min-transition-timing);
        width: 100%;
        background: white;
    }

    button#openModalBtn {
        background: #e35205;
    }

    i.demo-psi-gear.fs-1 {
        font-size: 20px !important;
    }

    /*----Form Wizard-----*/



    .flex-fill {
        display: flex;
        align-items: top;
        gap: 20px;
    }

    .form-content-wizard {
        width: 100%;
        position: relative;
        top: -20px;
    }

    .nav-underline .nav-link {
        text-align: left;
    }

    a.nav-link.menu-btn img {
        margin: 0 36%;
    }

    a.nav-link.menu-btn span {
        font-size: 11px;
    }


    .form-select {
        color: #b3bcc1 !important;
    }

    .form-control {
        color: #b3bcc1 !important;
    }

    .header {

        position: sticky !important;
        top: 0 !important;
        z-index: 99999 !important;
    }

    .dropdown-toggle::after {
        display: none;
        margin-left: .255em;
        vertical-align: .255em;
        content: "";
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
    }

    .mainnav__inner .mainnav__menu .nav-link {
        padding: 3px 0px !important;
    }

    .root:not(.mn--min) .mainnav__menu>.nav-item.has-sub>.mininav-content {
        border-inline-start: 1px dashed var(--nf-mainnav-submenu-dashed-color);
        margin-inline-start: var(--nf-mainnav-submenu-dashed-margin) !important;
        padding: 10px 25px !important;
        margin: 0px 20px !important;
    }

    .tm--expanded-hd .content__header,
    .tm--tall-hd .content__header {
        background-size: cover;
        height: auto !important;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        background-image: linear-gradient(var(--nf-header-bg), transparent),
            url('{!! asset("user/assets/img/Vector-bg.png") !!}') !important;

    }

    .menu-content {
        display: none;
    }

    .menu-content.active {
        display: block;
    }

    .nav-underline .nav-link.active,
    .nav-underline .show>.nav-link {
        font-weight: 700;
        color: var(--bs-nav-underline-link-active-color);
        border-bottom-color: var(--nf-header-bg) !important;
    }

    .row-div {
        display: flex;
        display: -webkit-box;
    }

    .stepform-header {
        position: sticky;
        top: 50px;
        z-index: 999;
        background: rgb(247, 247, 247) !important;
        width: 100%;
        padding: 0px;
        margin: 0px;
        border-radius: 5px;
    }

    #page-tit {
        position: sticky;
        top: 50px;
        z-index: 99999 !important;
        overflow: auto;

    }

    .page-title {
        color: white !important;
        font-size: 26px;
    }

    .row-div input {
        width: 80%;
    }

    .row-div select {
        width: 80%;
    }

    .row-div textarea {
        width: 80%;
    }

    .form-content-wizard {
        width: 100%;
        padding: 0px 0px 0px 0px;
    }

    div#spark3 {
        position: relative;
        bottom: 20px;
    }

    /*-----Dashboard----*/
    .dash-card {
        background: var(--nf-mainnav-bg);
        padding: 0px;
        border-radius: 5px;
        height: 90px;
    }

    .card-hea {
        font-size: 14px;
        font-weight: 600;
        color: black;
    }

    .card-para {
        font-size: 13px;
    }

    .card-tex {
        font-size: 20px !important;
        font-weight: 500;
    }

    .truncate {
        font-size: 14px;
    }

    .dash-card-two {
        background: var(--nf-mainnav-bg);
        border-radius: 5px;
    }

    .apex-charts {
        padding: 0px 20px 20px 20px;
        min-height: 270px;
    }
    /*--filter--*/

    /* .regi-filter-btn {
        color: #000;
        padding: 0px 8px;
        position: relative;
        bottom: 0px;
        font-size: 14px;
    } */

    .regi-filter-btn {
        color: #000;
        position: relative;
        bottom: 0px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 36px;
    }

    .ri-arrow-down-s-line {
        top: 2px;
        left: 8px;
        font-size: 16px;
        font-weight: 600;
    }

    .filter-hea {
        color: white;
        font-size: 18px;
        margin: 0px;
        padding: 0px;
        position: relative;
        top: 0px;

    }

    .filter-submit-btn {
        padding: 7px 40px !important;
        font-size: 14px;
    }

    select {
        font-size: 14px;
    }

    .custom_notification {
        display: none;
    }


    /* Sticky Button */
    .sticky-button {
        position: fixed;
        bottom: 100px;
        right: 20px;
        z-index: 1060;
    }

    /* Popup Info Box */
    .info-popup {
        position: fixed;
        bottom: 170px;
        right: 20px;
        width: 400px;
        background-color: white;
        color: white;
        padding: 0px;

        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        z-index: 1050;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    .info-popup.hidden {
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
    }

    .info-popup .close-btn {
        color: white;
        float: right;
        font-size: 25px;
        cursor: pointer;
    }

    .info-popup .close-btn:hover {
        color: #ffc107;
    }

    .sti-head {
        background: #E35205;
        padding: 10px;
        border-radius: 10px 10px 0px 0px;
    }

    .head-bottom {
        color: white;
        margin: 0px;

    }

    .sti-list {
        text-decoration: none;
        padding: 0px;
        margin: 0px;
    }

    .sti-list li {
        text-decoration: none;
        padding: 15px;
        border-bottom: 1px solid #00000030;
    }

    .sti-list li:hover {
        text-decoration: none;
        padding: 15px;
        border-bottom: 1px solid #00000030;
        background: #4fa36c3b;
    }

    .sti-list li:hover .sti-div img {
        filter: invert(1) brightness(0.9);
    }



    .sti-div {
        justify-content: space-between;
    }

    .center-head {
        font-size: 15px;
        text-decoration: none !important;
        color: #252525;
    }

    #main_filter {
        background: var(--nf-mainnav-bg) !important;
    }

    .regi-filter-btn {
        background: var(--nf-mainnav-bg) !important;
        color: var(--bs-heading-color) !important;
    }
</style>

{{-- my styles --}}
<style>
    .self-center.icon {
        height: fit-content;
        width: 45px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #cd642c57;
        padding: 8px;
        border-radius: 10px;
    }

    .custom_inputs_container {
        position: absolute;
        top: 39px;
        left: 0;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 0 5px 0 #8181813b;
        padding: 8px;
        width: 100%;
        z-index: 1;
    }

    .tick_symbol {
        background: #d2d2d2;
        color: white;
        width: 22px;
        height: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        border-radius: 50%;
    }

    .ri-check-line.custom {
        margin-top: 2px;
    }

    .tick_symbol.completed {
        background: #09af00;
    }

    .f-head {
        padding-top: 3px;
    }

    select#selected_property {
        padding: 8px !important;
    }
</style>
@endSection

@php
    $permission = session('permissions');
@endphp


@section('content')
<div class="content__boxed">
    {{-- Filters and stuff --}}
    <div class="sticky-top">
        <div class="col-lg-12 col-md-12 col-sm-12 colxs-12 col-12">
            <div class="filters d-flex justify-content-center gap-3">
                <div class="f-head">
                    <p class="filter-hea">Filter</p>
                </div>
                <div class="position-relative">
                    <div class="custom-date-filter d-none">

                        <div class="custom_inputs_container custom_year_filter d-none">
                            <label for="start_date_year">Select Year</label>
                            <select name="start_date_year" id="start_date_year" class="form-control mb-3">
                                <option selected value="2025">2025</option>
                            </select>
                        </div>

                        <div class="custom_inputs_container custom_quarter_filter d-none">
                            <label for="quarter_year">Year</label>
                            <select name="quarter_year" id="quarter_year" class="form-control mb-3">
                                <option selected value="2025">2025</option>
                            </select>

                            <label for="starting_quarter">Select Quarter</label>
                            <select name="starting_quarter" id="starting_quarter" class="form-control mb-3">
                                <option value="Q1" selected>Q1</option>
                                <option value="Q2">Q2</option>
                                <option value="Q3">Q3</option>
                                <option value="Q4">Q4</option>
                            </select>
                        </div>

                        <div class="custom_inputs_container custom_month_filter d-none">
                            <label for="start_date">Start Month</label>
                            <input type="month" name="start_date" id="start_month" class="form-control mb-3">
                            <label for="end_month">End Month</label>
                            <input type="month" name="end_month" id="end_month" class="form-control mb-3">
                        </div>
                    </div>



                    <select id="main_filter" class="mb-4 p-2 border rounded">
                        <option value="year_to_year">Year-to-Year</option>
                        <option value="quarter_to_quarter">Quarter-to-Quarter</option>
                        <option value="month_to_month">Month-to-Month</option>
                    </select>
                    <button onclick="openFilterDropdown()" class="btn btn mb-1 ms-1 me-2 text-black px-2" style="padding:11px; background: var(--nf-mainnav-bg); color: var(--bs-heading-color)!important;
">
                        <i class="ri-dropdown-list ri-xl"></i>
                    </button>
                </div>

                <div class="region-filter">
                    <div class="dropdown">
                        <button class="btn regi-filter-btn border rounded dropdown-toggle" type="button"
                            data-bs-toggle="dropdown" id="region_selection_button">
                            Select Region <i class="ri-arrow-down-s-line"></i>
                        </button>
                        <ul class="dropdown-menu p-3" id="checkboxDropdown">
                            @if (!empty($states))
                                @php
                                    $count = 0;
                                @endphp
                                @foreach ($states as $state)
                                    <li>
                                        <div class="form-check">
                                            <input class="form-check-input state_selection" name="state{{ $count++ }}"
                                                type="checkbox" checked data-state="{{ $state->state }}">
                                            <label class="form-check-label"
                                                for="state{{ $count++ }}">{{ $state->state }}</label>
                                        </div>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>

                <div class="property-date-filter">
                    <div class="dropdown">
                        <button class="btn regi-filter-btn border rounded dropdown-toggle" type="button"
                            data-bs-toggle="dropdown" id="property_selection_button">
                            Select Property <i class="ri-arrow-down-s-line"></i>
                        </button>
                        <ul class="dropdown-menu p-3" id="propertyDropdown">
                            @if (!empty($properties))
                                @php
                                    $count = 0;
                                @endphp
                                @foreach ($properties as $pro)
                                    <li>
                                        <div class="form-check">
                                            <input class="form-check-input property_selection"
                                                name="property{{ $count++ }}" type="checkbox" checked
                                                data-id="{{ $pro->id }}" data-property="{{ $pro->name }}">
                                            <label class="form-check-label"
                                                for="property{{ $count++ }}">{{ $pro->name }}</label>
                                        </div>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>

                <div class="sub-btn">
                    <button class="btn btn-primary border-white filter-submit-btn"
                        id="getDashboardData">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <div class="content__wrap">
        <div class="containers">

            

            {{-- Basic stuff --}}
            <div class="row">
                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12">
                    <div class="dash-card">
                        <div class="px-4 py-3 d-flex justify-content-between align-items-center">
                            <div class="self-center">
                                <p class="card-hea mb-2">
                                    Total # of Properties</p>
                                <h3 class="card-tex" id="property_count">
                                    {{ !empty($property_count) ? $property_count : 0 }}
                                </h3>
                            </div>
                            <div class="self-center icon flex-shrink-0">
                                <img src="{!! asset('user/assets/img/town.png') !!}" class="img-fluid"
                                    style="max-width:30px;">
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12">

                    <div class="dash-card">
                        <div class="px-4 py-3 d-flex justify-content-between align-items-center">
                            <div class="self-center">
                                <p class="card-hea mb-2">
                                    Gross Rental Income</p>
                                <h3 class="card-tex">$<span id="total_gross_rental_income">0</span></h3>
                            </div>
                            <div class="self-center icon flex-shrink-0">
                                <img src="{!! asset('user/assets/img/dollor.png') !!}" class="img-fluid"
                                    style="max-width:30px;">
                            </div>
                        </div>
                    </div>


                </div>

                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12">

                    <div class="dash-card">
                        <div class="px-4 py-3 d-flex justify-content-between align-items-center">
                            <div class="self-center">
                                <p class="card-hea mb-2">
                                    Total Rentable SF</p>
                                <h3 class="card-tex" id="total_rentable_sf">0</h3>
                            </div>
                            <div class="self-center icon flex-shrink-0">
                                <img src="{!! asset('user/assets/img/dollor (1).png') !!}" class="img-fluid"
                                    style="max-width:30px;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12">
                    <div class="dash-card">
                        <div class="px-4 py-3 d-flex justify-content-between align-items-center">
                            <div class="self-center">
                                <p class="card-hea mb-2">
                                    Total Vacant SF</p>
                                <h3 class="card-tex" id="total_vacent_sf">0</h3>
                            </div>
                            <div class="self-center icon flex-shrink-0">
                                <img src="{!! asset('user/assets/img/vacant.png') !!}" class="img-fluid"
                                    style="max-width:30px;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card">
                        <div class="px-4 py-3 d-flex justify-content-between align-items-center">
                            <div class="self-center">
                                <p class="card-hea mb-2">
                                    Occupancy Rate (%)</p>
                                <h3 class="card-tex"><span id="total_occupication_rate">0</span>%</h3>
                            </div>
                            <div class="self-center icon flex-shrink-0">
                                <img src="{!! asset('user/assets/img/vacant.png') !!}" class="img-fluid"
                                    style="max-width:30px;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card">
                        <div class="px-4 py-3 d-flex justify-content-between align-items-center">
                            <div class="self-center">
                                <p class="card-hea mb-2">
                                    Total NOI</p>
                                <h3 class="card-tex">$<span id="total_noi">0</span></h3>
                            </div>
                            <div class="self-center icon flex-shrink-0">
                                <img src="{!! asset('user/assets/img/vacant.png') !!}" class="img-fluid"
                                    style="max-width:30px;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card">
                        <div class="px-4 py-3 d-flex justify-content-between align-items-center">
                            <div class="self-center">
                                <p class="card-hea mb-2">
                                    Expiration within a Year</p>
                                <h3 class="card-tex" id="expiration_within_year">0</h3>
                            </div>
                            <div class="self-center icon flex-shrink-0">
                                <img src="{!! asset('user/assets/img/vacant.png') !!}" class="img-fluid"
                                    style="max-width:30px;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card">
                        <div class="px-4 py-3 d-flex justify-content-between align-items-center">
                            <div class="self-center">
                                <p class="card-hea mb-2">Vacancy Loss</p>
                                <h3 class="card-tex">$<span id="vacency_loss_rate">0</span></h3>
                            </div>
                            <div class="self-center icon flex-shrink-0">
                                <img src="{!! asset('user/assets/img/vacant.png') !!}" class="img-fluid"
                                    style="max-width:30px;">
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            {{-- Charts Ahead ! --}}

            <div class="row">

                @if($permission == "Admin" ||$role_id == 2 || $role_id == 3)
                <div class="col-lg-6 col-md-6 col-lg-6 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card-two">
                        <div class="px-4 py-3 d-flex justify-content-between items-center">
                            <div class="self-center">
                                <p class="card-hea">Lease Expiry Schedule</p>
                                <p class="card-para">Lease expirations by property over time buckets</p>
                            </div>
                            <div class="self-center">
                            </div>
                        </div>
                        <div id="expirationChart" class="apex-charts d-flex justify-content-center align-items-center" style="height:250px;">
                            <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                        </div>
                    </div>
                </div>
                @endif
                <div class="col-lg-6 col-md-6 col-lg-6 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card-two">
                        <div class="px-4 py-3 d-flex justify-content-between items-center">
                            <div class="self-center">
                                <p class="card-hea">Portfolio Wide Occupancy Trends</p>
                                <p class="card-para">Occupancy rates by property
                            </div>
                        </div>
                        <div id="portfolioWideOccupancyTrends"  class="apex-charts d-flex justify-content-center align-items-center" style="height:250px;">
                            <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                        </div>
                    </div>
                </div>

                @if($permission == "Admin" || $role_id == 1 || $role_id == 3)
                <div class="col-lg-6 col-md-6 col-lg-6 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card-two">
                        <div class="px-4 py-3 d-flex justify-content-between items-center">
                            <div class="self-center">
                                <p class="card-hea">Total Unit/ Space Sold</p>
                                <p class="card-para">Monthly units sold with property breakdown on hover</p>
                            </div>
                        </div>
                        <div id="totalUnitSold"  class="apex-charts d-flex justify-content-center align-items-center" style="height:250px;">
                            <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                        </div>
                    </div>
                </div>
                @endif

                @if($permission == "Admin" || $role_id == 1 || $role_id == 2)
                <div class="col-lg-6 col-md-6 col-lg-6 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card-two">
                        <div class="px-4 py-3 d-flex justify-content-between items-center">
                            <div class="self-center">
                                <p class="card-hea">Portfolio Industry Mix</p>
                                <p class="card-para">Property distribution by type</p>
                            </div>
                            <div class="self-center">
                            </div>
                        </div>
                        <div id="industryMixChart"  class="apex-charts d-flex justify-content-center align-items-center" style="height:250px;">
                            <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                        </div>
                    </div>
                </div>
                @endif

                @if( $permission == "Admin" || $role_id == 2 || $role_id == 3)
                <div class="col-lg-6 col-md-6 col-lg-6 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card-two">
                        <div class="px-4 py-3 d-flex justify-content-between items-center">
                            <div class="self-center">
                                <p class="card-hea">Rent Per Square Feet</p>
                                <p class="card-para">Property distribution by type</p>
                            </div>
                        </div>
                        <div id="avgRentPerSF"  class="apex-charts d-flex justify-content-center align-items-center" style="height:250px;">
                            <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                        </div>
                    </div>
                </div>
                @endif
                @if($permission == "Admin" || $role_id == 1 || $role_id == 2)
                <div class="col-lg-6 col-md-6 col-lg-6 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card-two">
                        <div class="px-4 py-3 d-flex justify-content-between items-center">
                            <div class="self-center">
                                <p class="card-hea">Net Operating Income (NOI)($)</p>
                                <p class="card-para">Combined monthly NOI with property breakdown on hover</p>
                            </div>
                        </div>
                        <div id="noi_chart"  class="apex-charts d-flex justify-content-center align-items-center" style="height:250px;">
                            <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                        </div>
                    </div>
                </div>
                @endif


                @if($permission == "Admin" || $role_id == 1)
                <div class="col-lg-6 col-md-6 col-lg-6 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card-two">
                        <div class="px-4 py-3 d-flex justify-content-between items-center">
                            <div class="self-center">
                                <p class="card-hea">Rent Trend Growth Rate</p>
                                <p class="card-para">Combined monthly rent growth with property breakdown on hover</p>
                            </div>
                        </div>
                        <div id="topRevenueByProperty"  class="apex-charts d-flex justify-content-center align-items-center" style="height:250px;">
                            <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                        </div>
                    </div>
                </div>
                @endif

                @if($permission == "Admin" || $role_id == 1)
                <div class="col-lg-6 col-md-6 col-lg-6 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card-two">
                        <div class="px-4 py-3 d-flex justify-content-between items-center">
                            <div class="self-center">
                                <p class="card-hea">Top Revenue Contribution by Tenant</p>
                                <p class="card-para">80% contributors vs 20% (Others) based on selected timeframe</p>
                            </div>
                        </div>
                        <div id="revenue_by_tenant"  class="apex-charts d-flex justify-content-center align-items-center" style="height:250px;">
                            <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                        </div>
                    </div>
                </div>
                @endif

                

                <div class="col-lg-12 col-md-6 col-lg-6 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card-two">
                        <div class="px-4 py-3 d-flex justify-content-between items-center">
                            <div class="self-center">
                                <p class="card-hea">Top 5 Performing Properties</p>
                            </div>
                        </div>
                        <div id="topPerformingProperties"  class="apex-charts d-flex justify-content-center align-items-center" style="height:250px;">
                            <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                        </div>
                    </div>
                </div>

                @if($permission == "Admin" || $role_id == 1 || $role_id == 2)
                <div class="col-lg-12 col-md-6 col-lg-6 col-sm-12 col-xs-12 mt-4">
                    <div class="dash-card-two">
                        <div class="px-4 py-3 d-flex justify-content-between items-center">
                            <div class="self-center">
                                <p class="card-hea">Market & Competitor Analysis</p>
                                <p class="card-para market-competitor-property-selected">Complete competitor comparison</p>
                                <select class="form-control" id="market-competitor-property">
                                    @if (!empty($properties))
                                        @foreach ($properties as $pro)
                                            <option value="{{ $pro->id }}">{{ $pro->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div id="marketCompetitorAnalysis" class="d-flex"  style="height:250px;">
                             <div class="col-md-4">
                                <div id="marketRateChart" class="apex-charts d-flex justify-content-center align-items-center">
                                    <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div id="askingRateChart" class="apex-charts d-flex justify-content-center align-items-center">
                                    <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div id="occupancyRateChart" class="apex-charts d-flex justify-content-center align-items-center">
                                    <img width="100" src="{!! asset('user/assets/img/fade-stagger-circles.svg') !!}" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

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

@if ($permission === 'Admin' || !empty($permission['Property Management']['creat']))
    @if (empty($property_count) || empty($floors_count) || empty($suites_count) || empty($tenants_count))

        <button class="btn btn-primary sticky-button" onclick="showPopup()">
            Let's Get Started
        </button>
        <div id="infoPopup" class="info-popup">
            <span class="close-btn mx-3" onclick="hidePopup()">x</span>
            <div class="sti-head">
                <h5 class="text-center head-bottom">Please complete these steps</h5>
            </div>
            <div class="sti-body">
                <ul class="sti-list">
                    <li>
                        <a href="{{ route('propertyCreate') }}" style="text-decoration: none;">
                            <div class="sti-div d-flex align-items-center gap-3">
                                <div class="left-prop d-flex align-items-center">
                                    <div
                                        class="tick_symbol {{ isset($property_count) && !empty($property_count) ? 'completed' : '' }}">
                                        <i class="ri-check-line custom"></i>
                                    </div>
                                    <h5 class="center-head mx-3 pt-2">Add Property</h5>
                                </div>
                                <img src="/user/assets/img/add-property.png" class="img-fluid"
                                    style="width:30px;{{ isset($property_count) && !empty($property_count) ? 'filter: hue-rotate(100deg);' : '' }}">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('floor') }}" style="text-decoration: none;">
                            <div class="sti-div d-flex align-items-center gap-3">
                                <div class="left-prop d-flex align-items-center">
                                    <div
                                        class="tick_symbol {{ isset($floors_count) && !empty($floors_count) ? 'completed' : '' }}">
                                        <i class="ri-check-line custom"></i>
                                    </div>
                                    <h5 class="center-head mx-3 pt-2">Add Floor</h5>
                                </div>
                                <img src="/user/assets/img/addfloor.png" class="img-fluid"
                                    style="width:30px;{{ isset($floors_count) && !empty($floors_count) ? 'filter: hue-rotate(100deg);' : '' }}">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('suite') }}" style="text-decoration: none;">
                            <div class="sti-div d-flex align-items-center gap-3">
                                <div class="left-prop d-flex align-items-center">
                                    <div
                                        class="tick_symbol {{ isset($suites_count) && !empty($suites_count) ? 'completed' : '' }}">
                                        <i class="ri-check-line custom"></i>
                                    </div>
                                    <h5 class="center-head mx-3 pt-2">Add Suite</h5>
                                </div>
                                <img src="/user/assets/img/addsuite.png" class="img-fluid"
                                    style="width:30px;{{ isset($suites_count) && !empty($suites_count) ? 'filter: hue-rotate(100deg);' : '' }}">
                            </div>
                        </a>
                    </li>
                    <li style="border-bottom:none;">
                        <a href="{{ route('tenant') }}" style="text-decoration: none;">
                            <div class="sti-div d-flex align-items-center gap-3">
                                <div class="left-prop d-flex align-items-center">
                                    <div
                                        class="tick_symbol {{ isset($tenants_count) && !empty($tenants_count) ? 'completed' : '' }}">
                                        <i class="ri-check-line custom"></i>
                                    </div>
                                    <h5 class="center-head mx-3 pt-2">Add Tenant</h5>
                                </div>
                                <img src="/user/assets/img/addtenant.png" class="img-fluid"
                                    style="width:30px;{{ isset($tenants_count) && !empty($tenants_count) ? 'filter: hue-rotate(100deg);' : '' }}">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    @endif
@endif
@endSection

@section('script')
<!----Apex Chart------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.7.0/apexcharts.min.js"></script>

<script>
    let loading = true;
    // I connented this because i can't go to any modules
    // Handle tab click event
    // $(".nav-link").on("click", function (e) {
    //     e.preventDefault(); // Prevent default link behavior

    //     let step = $(this).attr("data-step"); // Get step name from data attribute
    //     showStep(step); // Call function to display the corresponding step
    // });

    // Function to show the selected step
    function showStep(step) {
        $(".step-content").removeClass("active").hide(); // Hide all steps
        $(".nav-link").removeClass("active"); // Remove active class from all tabs

        $(".step-content[data-step='" + step + "']").addClass("active").show(); // Show selected step
        $(".nav-link[data-step='" + step + "']").addClass("active"); // Highlight active tab
    }


    const openModalBtn = document.getElementById("openModalBtn");

    openModalBtn.addEventListener("click", () => {
        modalWindow.style.display = "block";
        modalBackdrop.style.display = "block";
        isMaximized = true;
        modalWindow.classList.add("fullscreen");
        modalWindow.style.left = "0px";
        modalWindow.style.top = "0px";
        modalBody.classList.remove("minimized");
    });

    closeBtn.addEventListener("click", () => {
        modalWindow.style.display = "none";
        modalBackdrop.style.display = "none";
    });

    $('#chromeWindowModal').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();  // Remove the backdrop
    });

</script>

{{-- my own script --}}
<script>
   
   // Hide custom-date-filter when clicking outside
    $(document).on('mousedown touchstart', function (event) {
        // If the filter is visible
        if (!$('.custom-date-filter').hasClass('d-none')) {
            // If the click is NOT inside the filter or the filter button
            if (
                $(event.target).closest('.custom-date-filter').length === 0 &&
                $(event.target).closest('#main_filter').length === 0 &&
                $(event.target).closest('button[onclick="openFilterDropdown()"]').length === 0
            ) {
                $('.custom-date-filter').addClass('d-none');
                $('.custom_inputs_container').addClass('d-none');
            }
        }
    });

    function showPopup() {
        document.getElementById('infoPopup').classList.remove('hidden');
    }

    function hidePopup() {
        document.getElementById('infoPopup').classList.add('hidden');
    }

    function set_properties_name() {
        var values = [];
        $('#propertyDropdown .property_selection:checked').each(function () {
            values.push($(this).attr('data-property'));
        });
        if (values.length === 0) {
            $('#property_selection_button').text('Select Property');
        } else {
            let regionString = values.join(', ');
            if (regionString.length > 15) {
                regionString = regionString.substring(0, 15) + '...';
            }
            $('#property_selection_button').text(regionString);
        }
    }
    function set_state_name() {
        var values = [];
        $('#checkboxDropdown .form-check-input:checked').each(function () {
            values.push($(this).attr('data-state'));
        });
        if (values.length === 0) {
            $('#region_selection_button').text('Select Region');
        } else {
            let regionString = values.join(', ');
            if (regionString.length > 15) {
                regionString = regionString.substring(0, 15) + '...';
            }
            $('#region_selection_button').text(regionString);
        }
    }
    $('#checkboxDropdown .form-check-input').on('change', set_state_name);

    $('#propertyDropdown .property_selection').on('change', set_properties_name);

    $(document).on('click', '.state_selection', function () {
        // console.log($(this).attr('data-state'));
        var value = [];
        $('.state_selection:checked').each(function () {
            value.push($(this).attr('data-state'));
        });

         $('#propertyDropdown').html('');
         $('#market-competitor-property').html('');
                              
        $.post({
            url: "{{ route('getDashboardProperties') }}",
            data: {
                states: value
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json',
            },
            success: function (response) {
                // console.log(response.data);
                $('#market-competitor-property').html('');
                $('#selected_property').html('<option selected value="all">All Property</option>');
                $('#propertyDropdown').html('');
                $.each(response.data, function (key, value) {
                    $('#selected_property').append('<option value="' + value.id + '">' + value.name + '</option>');
                    $('#market-competitor-property').append('<option value="' + value.id + '">' + value.name + '</option>');

                    $('#propertyDropdown').append('<li><div class="form-check">'+
                        '<input class="form-check-input property_selection"  name="property'+key+'" type="checkbox" checked  data-id="' + value.id + '" data-property="' + value.name + '">'+
                        '<label class="form-check-label"  for="property'+key+'">' + value.name + '</label></div></li>');

                });

            }, error(xhr, status, error) {
                alert(xhr.responseJSON.message ? xhr.responseJSON.message : "Error while fetching properties");
                console.log(error);
                console.log(xhr.responseJSON.message);
            }
        })
    });

    var latest_open_filter = ".custom_year_filter";

    $('#main_filter').on('change', function (e) {
        let value = $(this).val();
        $('.custom_inputs_container').addClass('d-none');
        $('.custom-date-filter').addClass('d-none');

        if (value === "year_to_year") {
            $('.custom_year_filter').toggleClass('d-none').fadeIn();
            latest_open_filter = ".custom_year_filter"
        } else if (value === "quarter_to_quarter") {
            $('.custom_quarter_filter').toggleClass('d-none').fadeIn();
            latest_open_filter = ".custom_quarter_filter"
        } else if (value === "month_to_month") {
            $('.custom_month_filter').toggleClass('d-none').fadeIn();
            latest_open_filter = ".custom_month_filter"
        }

        $('.custom-date-filter').removeClass('d-none');
    });

    function openFilterDropdown() {
        // console.log(latest_open_filter);
        $('.custom-date-filter').removeClass('d-none');
        $(".custom_inputs_container:not(" + latest_open_filter + "").addClass('d-none');
        // console.log(`$(latest_open_filter).hasClass('d-none') => ${$(latest_open_filter).hasClass('d-none')}`);

        $(latest_open_filter).hasClass('d-none')

        if ($(latest_open_filter).hasClass('d-none')) {
            $(latest_open_filter).removeClass('d-none').fadeIn();
            // console.log("yes");
        } else {
            $(latest_open_filter).addClass('d-none').fadeOut();
            // console.log("no");
        }
    }


    $('.close_all_filters').on('click', function () {
        $('.custom_inputs_container').addClass('d-none');
        $('.custom-date-filter').addClass('d-none');
    });

    $('.dropdown-toggle,#selected_property').on('click', function (event) {
        $('.custom-date-filter').addClass('d-none');
    });

    // $('#getDashboardData').on('click', () => { getDataAndRender(false) });
    /* --- wire it up --- */
    $('#getDashboardData').on('click', function (e) {
        e.preventDefault();
        sendDashboardRequest();
        getTopPerformingPropertiesChartData();
        getExpirationChartData();
        getAvgRentPerSFChartData();
        getRevenueBreakdownChartData();
        getNOIChartData();
        getRevenueByTenantChartData();
        getMarketCompetitorAnalysisChartData();
        set_state_name();
        set_properties_name();
        $('.custom_inputs_container').fadeOut();
        $('.custom-date-filter').addClass('d-none');
    });

    /* --- one function to collect the UI values --- */
    function buildDashboardPayload() {
        // 1?? core values that are always present
        const payload = {
            main_filter: $('#main_filter').val(),              // year_to_year | quarter_to_quarter | month_to_month
            states: $('.state_selection:checked')
                .map(function () { return $(this).data('state'); })
                .get(),                              // ["NY","TX", ...]
            property: $('.property_selection:checked')
                .map(function () { return $(this).data('id'); })
                .get(),          // id or "all"
        };
        let issue_found = false;

        // 2?? collect the date-range inputs that belong to that main filter
        switch (payload.main_filter) {
            case 'year_to_year':           // ? two simple years
                payload.start_year = $('#start_date_year').val();   // ? give the <select> an id
                if (!payload.start_year) {
                    issue_found = true;
                    alert("Please select years");
                }
                break;

            case 'quarter_to_quarter':     // ? 1 year, 2 quarters
                payload.year = $('#quarter_year').val();
                payload.start_quarter = $('#starting_quarter').val();   // "Q1"-"Q4"
                if (!payload.year || !payload.start_quarter) {
                    issue_found = true;
                    alert("Please fill in both Year and quarters");
                }
                break;

            case 'month_to_month':        // ? two YYYY-MM strings
                payload.start_month = $('#start_month').val();     // give the <input type="month"> an id
                payload.end_month = $('#end_month').val();
                if (!payload.start_month || !payload.end_month) {
                    issue_found = true;
                    alert("Please fill in both start and end months");
                }
                break;
        }

        if (issue_found) {
            return false;
        }
        return payload;
    }

    /* --- one function to shoot the AJAX request and (later) draw the chart --- */
    function getTopPerformingPropertiesChartData() {
        set_state_name();
        set_properties_name();
        const data = buildDashboardPayload();
        if (!data) {
            return false;
        }

        // basic front-end validation
        if (!data.states.length) { return alert('Select at least one state'); }
        if (!data.property) { return alert('Select a property'); }

        $.ajax({
            type: 'POST',
            url: "{{ route('getTopPerformingPropertiesData') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json'
            },
            success(res) {
                let top_performing_properties = res.data?.top_performing_properties || []; //TODO
                updateTopPerformingPropertiesChart(top_performing_properties); //TODO
                
            },
            error(xhr) {
                alert(xhr.responseJSON?.message || 'Error while fetching dashboard data');
                console.error(xhr.responseJSON || xhr);
            }
        });
    }

    function getExpirationChartData() {
        set_state_name();
        set_properties_name();
        const data = buildDashboardPayload();
        if (!data) {
            return false;
        }

        // basic front-end validation
        if (!data.states.length) { return alert('Select at least one state'); }
        if (!data.property) { return alert('Select a property'); }

        $.ajax({
            type: 'POST',
            url: "{{ route('getExpirationChartData') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json'
            },
            success(res) {
                let expiring_suites = res.data?.expiring_suites || [];  //TODO  
                updateExpirationChart(expiring_suites); //TODO                
            },
            error(xhr) {
                alert(xhr.responseJSON?.message || 'Error while fetching dashboard data');
                console.error(xhr.responseJSON || xhr);
            }
        });
    }

    

    function getAvgRentPerSFChartData() {

        set_state_name();
        set_properties_name();
        const data = buildDashboardPayload();
        if (!data) {
            return false;
        }

        // basic front-end validation
        if (!data.states.length) { return alert('Select at least one state'); }
        if (!data.property) { return alert('Select a property'); }

        $.ajax({
            type: 'POST',
            url: "{{ route('getAvgRentPerSFChartData') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json'
            },
            success(res) {
                
                let avg_rent_per_sf_by_property = res.data?.avg_rent_per_sf_by_property || [];
                updateavgRentPerSF(avg_rent_per_sf_by_property);    
            },
            error(xhr) {
                alert(xhr.responseJSON?.message || 'Error while fetching dashboard data');
                console.error(xhr.responseJSON || xhr);
            }
        });
    }


    function getRevenueBreakdownChartData() {

        set_state_name();
        set_properties_name();
        const data = buildDashboardPayload();
        if (!data) {
            return false;
        }

        // basic front-end validation
        if (!data.states.length) { return alert('Select at least one state'); }
        if (!data.property) { return alert('Select a property'); }

        $.ajax({
            type: 'POST',
            url: "{{ route('getRevenueBreakdownChartData') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json'
            },
            success(res) {
                
                let top_revenue_breakdown_by_property = res.data?.top_revenue_breakdown_by_property || [];
                updateTopRevenueByProperty(top_revenue_breakdown_by_property);  
            },
            error(xhr) {
                alert(xhr.responseJSON?.message || 'Error while fetching dashboard data');
                console.error(xhr.responseJSON || xhr);
            }
        });
    }


    function getNOIChartData() {
        set_state_name();
        set_properties_name();
        const data = buildDashboardPayload();
        if (!data) {
            return false;
        }

        // basic front-end validation
        if (!data.states.length) { return alert('Select at least one state'); }
        if (!data.property) { return alert('Select a property'); }

        $.ajax({
            type: 'POST',
            url: "{{ route('getNOIChartData') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json'
            },
            success(res) {
                let noi_trends = res.data?.noi_trends || []; //TODO
                updateNoiChart(noi_trends); //TODO
            },
            error(xhr) {
                alert(xhr.responseJSON?.message || 'Error while fetching dashboard data');
                console.error(xhr.responseJSON || xhr);
            }
        });

        
    }

    function getRevenueByTenantChartData() {
        set_state_name();
        set_properties_name();
        const data = buildDashboardPayload();
        if (!data) {
            return false;
        }

        // basic front-end validation
        if (!data.states.length) { return alert('Select at least one state'); }
        if (!data.property) { return alert('Select a property'); }
        
        $.ajax({
            type: 'POST',
            url: "{{ route('getRevenueByTenantChartData') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json'
            },
            success(res) {
                let revenue_contribution_by_tenant = res.data?.revenue_contribution_by_tenant || []; //TODO
                updateRevenueByTenant(revenue_contribution_by_tenant); //TODO
            },
            error(xhr) {
                alert(xhr.responseJSON?.message || 'Error while fetching dashboard data');
                console.error(xhr.responseJSON || xhr);
            }
        });
    }

    function getMarketCompetitorAnalysisChartData() {
        set_state_name();
        set_properties_name();
        const data = buildDashboardPayload();
        if (!data) {
            return false;
        }

        // basic front-end validation
        if (!data.states.length) { return alert('Select at least one state'); }
        if (!data.property) { return alert('Select a property'); }
        data.singleProperty = $("#market-competitor-property").val();


        $.ajax({
            type: 'POST',
            url: "{{ route('getMarketCompetitorAnalysisChartData') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json'
            },
            success(res) {
                let market_competitor_analysis = res.data?.market_competitor_analysis || []; //TODO
                updateMarketCompetitorAnalysisChart(market_competitor_analysis); //TODO
            },
            error(xhr) {
                alert(xhr.responseJSON?.message || 'Error while fetching dashboard data');
                console.error(xhr.responseJSON || xhr);
            }
        });

        
    }

    
    function sendDashboardRequest() {
        set_state_name();
        set_properties_name();
        const data = buildDashboardPayload();
        if (!data) {
            return false;
        }

        set_state_name();
        set_properties_name();
        // basic front-end validation
        if (!data.states.length) { return alert('Select at least one state'); }
        if (!data.property) { return alert('Select a property'); }

        $.ajax({
            type: 'POST',
            url: "{{ route('getDashboardData') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json'
            },
            success(res) {
                // console.log('? dashboard data:', res);
                let base_rents_data = res.data?.base_rents || [];

                let portfolio_industry_mix = res.data?.portfolio_industry_mix || [];
                // let expiring_suites = res.data?.expiring_suites || [];  //TODO
                // let noi_trends = res.data?.noi_trends || []; //TODO
                // let top_performing_properties = res.data?.top_performing_properties || []; //TODO
                // let revenue_contribution_by_tenant = res.data?.revenue_contribution_by_tenant || []; //TODO
                // let top_revenue_breakdown_by_property = res.data?.top_revenue_breakdown_by_property || []; //TODO
                let total_units_sold = res.data?.total_units_sold || [];
                // let avg_rent_per_sf_by_property = res.data?.avg_rent_per_sf_by_property || []; //TODO
                let portfolio_wide_occupancy_trends = res.data?.portfolio_wide_occupancy_trends || [];
                // let market_competitor_analysis = res.data?.market_competitor_analysis || []; // TODO

                let total_gross_income = formatIfNumber(res.data.total_gross_rental_income);
                let total_noi = formatIfNumber(res.data.total_noi);
                let vacency_loss_rate = formatIfNumber(res.data.vacency_loss_rate);
                let total_vacent_sf = formatIfNumber(res.data.total_vacent_sf);
                let total_rentable_sf = formatIfNumber(res.data.total_rentable_sf);

                updateIndustryMix(portfolio_industry_mix);
                // updateExpirationChart(expiring_suites); //TODO
                // updateNoiChart(noi_trends); //TODO
                // console.log(top_performing_properties)
                // updateTopPerformingPropertiesChart(top_performing_properties); //TODO
                // updateRevenueByTenant(revenue_contribution_by_tenant); //TODO
                // updateTopRevenueByProperty(top_revenue_breakdown_by_property); //TODO
                updatetotalUnitSold(total_units_sold);
                // updateavgRentPerSF(avg_rent_per_sf_by_property); //TODO
                updatePortfolioWideOccupancyTrends(portfolio_wide_occupancy_trends);
                // updateMarketCompetitorAnalysisChart(market_competitor_analysis); // TODO

                $('#total_rentable_sf').html(total_rentable_sf);
                $('#total_vacent_sf').html(total_vacent_sf);
                $('#property_count').html(res.data.total_property ?? "0");
                $('#total_occupication_rate').html((res.data.total_occupication_rate ?? 0));
                $('#expiration_within_year').html(res.data.expiration_within_year ?? "0");
                $('#total_gross_rental_income').html(total_gross_income);
                $('#total_noi').html(total_noi);
                $('#PGI_potential_gross_income').html(res.data.PGI_potential_gross_income ?? "0");
                $('#vacency_loss_rate').html(vacency_loss_rate);

                // $('#total_annual_base_rent').html(Math.round(total_annual_base_rent_temp));

            },
            error(xhr) {
                alert(xhr.responseJSON?.message || 'Error while fetching dashboard data');
                console.error(xhr.responseJSON || xhr);
            }
        });

         setTimeout(() => {
            // loading = false; //TODO remove all update logic
        }, 5000);
    }


    $("#market-competitor-property").on('change', function() {
        getMarketCompetitorAnalysisChartData();
    });
    // /* 0??  Month helper */
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    // Generate colors array - first 3 static, rest random
    const generateColors = (dataLength) => {
        // const staticColors = ['#26a0fc',
        //     '#26e7a6',
        //     '#ff7f3b',
        //     '#e74c3c',
        //     '#9b59b6',
        //     '#f39c12',
        //     '#f3e812ff',
        // ];


        const staticColors = [
            "#4E79A7","#F28E2B","#E15759","#76B7B2","#59A14F",
            "#EDC948","#B07AA1","#FF9DA7","#9C755F","#BAB0AC",
            "#1F77B4","#AEC7E8","#FF7F0E","#FFBB78","#2CA02C",
            "#98DF8A","#D62728","#FF9896","#9467BD","#C5B0D5",
            "#8C564B","#C49C94","#E377C2","#F7B6D2","#7F7F7F",
            "#C7C7C7","#BCBD22","#DBDB8D","#17BECF","#9EDAE5",
            "#393B79","#5254A3","#6B6ECF","#9C9EDE","#637939",
            "#8CA252","#B5CF6B","#CEDB9C","#8C6D31","#BD9E39",
            "#E7BA52","#E7CB94","#843C39","#AD494A","#D6616B",
            "#E7969C","#7B4173","#A55194","#CE6DBD","#DE9ED6"
        ];

        // const staticColors = [
        //     '#E85C3A','#F59E5B','#F9C58B','#CED3DB','#A9B2BA','#E24A4A'
        // ];

    //    const staticColors =  [
    //         "#F1948A", "#F5B7B1", "#D98880", "#C39BD3", "#BB8FCE",
    //         "#7FB3D5", "#85C1E9", "#76D7C4", "#73C6B6", "#82E0AA",
    //         "#7DCEA0", "#F7DC6F", "#F8C471", "#F0B27A", "#E59866",
    //         "#DC7633", "#D35400", "#CA6F1E", "#AF601A", "#A04000",
    //         "#85929E", "#5D6D7E", "#34495E", "#2E4053", "#212F3D",
    //         "#45B39D", "#16A085", "#138D75", "#117A65", "#0E6251",
    //         "#52BE80", "#27AE60", "#229954", "#1E8449", "#196F3D",
    //         "#F5B041", "#EB984E", "#DC7633", "#D35400", "#BA4A00",
    //         "#AF7AC5", "#9B59B6", "#884EA0", "#76448A", "#633974",
    //         "#5DADE2", "#3498DB", "#2E86C1", "#2874A6", "#21618C"
    //     ];
        const colors = [];

        for (let i = 0; i < dataLength; i++) {
            if (i < 15) {
                colors.push(staticColors[i]);
            } else {
                colors.push('#' + Math.floor(Math.random() * 16777215).toString(16));
            }
        }
        return colors;
    };



    function initiateIndustryMix(series,labels) {
        $("#industryMixChart").html('');
        var industryMixOptions = {
            series: series,
            labels: labels,
            chart: {
                type: 'donut',
                height: 250,
                events: {
                    legendClick: function (chartCtx, seriesIndex, opts) {
                        const sliceName = opts.config.labels[seriesIndex];
                        chartCtx.toggleSeries(sliceName);          // ? hide / show slice completely
                    }
                },
                dropShadow: {
                    enabled: false,
                    color: '#000',
                    top: 10,
                    left: 5,
                    blur: 5,
                    opacity: 0.2
                },
                zoom: { enabled: false },
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 2000,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 1000
                    }
                }
            },
            tooltip: {
                enabled: true,
                theme: 'light', // makes base white
                fillSeriesColor: false, // prevent auto coloring
                style: {
                    fontSize: '13px',
                    color: '#000' // black text
                },
                y: {
                    formatter: function (val) {
                        return val.toFixed(0) + "%"; // tooltip with %
                    }
                }
            }, 
            plotOptions: {
                pie: {
                    donut: {
                        size: '65%',
                        labels: {
                            show: true,
                            total: {
                                show: true,
                                label: '',
                                fontSize: '28px',
                                fontWeight: 900,
                                color: '#000',
                                formatter: function () { return 100; }
                            }
                        }
                    },
                    dataLabels: {
                        offset: 40,   // ensures labels appear outside slices
                    }
                }
            },
            legend: {
                show: true,
                position: 'right',
                formatter: function (seriesName, opts) {
                    var idx = opts.w.globals.labels.indexOf(seriesName);
                    var value = opts.w.globals.series[idx];
                    var percent = (
                        (value / opts.w.globals.series.reduce((a, b) => a + b, 0)) * 100
                    ).toFixed(1);
                    return `<div style="display:flex; flex-direction:column;">
                    <span style="color:#000; font-weight:500;">${seriesName}</span>
                    <span style="color:#888;">${value} (${percent}%)</span>
                    </div>`;
                },
                fontSize: '14px',
                fontWeight: 400,
                labels: {
                colors: '#000'
                },
                onItemClick: { toggleDataSeries: false },
                onItemHover: { highlightDataSeries: false }
            },
            dataLabels: {
                enabled: true,
                minAngleToShowLabel: 0,
                formatter: function (val) {
                    return val.toFixed(0) + "%";
                },
                style: {
                    fontSize: '12px',
                    fontWeight: '500',
                    colors: ['#000']
                },
                dropShadow: { enabled: false },
                offset: 40,             // push labels outside
                textAnchor: 'middle'    // keep them centered relative to slice
            },
            colors: generateColors(series.length),
        };
        const industryMixChart = new ApexCharts(document.querySelector('#industryMixChart'), industryMixOptions);
        industryMixChart.render();
    }
    
    function  initiateExpirationChart(series,labels) {

        $("#expirationChart").html('');
        var expirationOptions = {
            chart: {
                type: 'bar',
                height: 250,
                stacked: true,
                toolbar: {
                    show: true
                },
                dropShadow: {
                    enabled: false,
                    color: '#000',
                    top: 10,
                    left: 5,
                    blur: 5,
                    opacity: 0.2
                },
                zoom: { enabled: false },
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 1200,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 500
                    }
                }
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom',
                        offsetX: -10,
                        offsetY: 0
                    }
                }
            }],
            plotOptions: {
                bar: {
                    horizontal: false,
                    borderRadius: 0,
                    borderRadiusApplication: 'end', // 'around', 'end'
                    borderRadiusWhenStacked: 'last', // 'all', 'last'
                    dataLabels: {
                        total: {
                            enabled: false,
                            style: {
                                fontSize: '13px',
                                fontWeight: 900
                            }
                        }
                    }
                },
            },
            legend: {
                show: false,
                position: 'right',
                offsetY: 40
            },
            fill: {
                    opacity: 1
                },
            series: series,
            grid: {
                    show: false,
            },
            xaxis: {
                categories: labels, // The labels for the x-axis
                title: {
                    text: '' // Label for the x-axis
                }
            },
            yaxis: {
                min: 0, // Set the minimum value of the y-axis
                title: {
                    text: 'Expiry Count', // Label for the x-axis
                },
            },
            tooltip: {
                enabled: true,
                theme: 'light',
                shared: true,
                followCursor: true,
                intersect: false,
                // Optional: Custom formatter for the values
                y: {
                    formatter: function(val, { series, seriesIndex, dataPointIndex, w }) {
                        return val;
                    }
                }
            },
            dataLabels: {
                enabled: false,
            },
            colors: generateColors(series.length),
            
        };

        const expirationChart = new ApexCharts(document.querySelector("#expirationChart"), expirationOptions);
        expirationChart.render();
    }

    function initiateRevenueByTenant(series,labels) {
        $("#revenue_by_tenant").html('');
        var revenueByTenantOptions = {
            chart: {
                type: 'bar', // The chart type is set to 'bar'
                height: 250,
                dropShadow: {
                    enabled: false,
                    color: '#000',
                    top: 10,
                    left: 5,
                    blur: 5,
                    opacity: 0.2
                },
                zoom: { enabled: false },
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 1200,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 500
                    }
                }
            },
           series: [{
                // name: 'Annual Rent',
                data: series
            }],
            grid: {
                show: false,
            },
            xaxis: {
                categories: labels,
                // title: { text: 'Tenants' },
                labels: {
                    formatter: function (val) {
                        if (val.length > 10) {
                            return val.substring(0, 10) + '...'; // cut after 10 chars
                        }
                        return val;
                    }
                },
            },
            yaxis: {
                    labels: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return '$' + val;
                    }
                },
                // title: { text: 'Annual Revenue' },   
            },
            plotOptions: {
                bar: {
                    distributed: true, // This enables different colors for each bar
                }
            },
            legend: {
                show: false
            },
            colors: generateColors(series.length),
            dataLabels: {
                enabled: false,
            },
            tooltip: {
                shared: true,
                intersect: false,
                y: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return '$' + val; // add % in tooltip
                    }
                },
                x: {
                    formatter: function (val) {
                        
                        return  val; 
                    }
                }
            }
        };
        const revenueByTenantChart = new ApexCharts(document.querySelector("#revenue_by_tenant"), revenueByTenantOptions);
        revenueByTenantChart.render();
    }

    function initiateNoiChart(series,labels) {
        $("#noi_chart").html('');
        series = [
                {
                name: "Riverstone Residences",
                data: [21600, 18000, 20000, 24000, 25000, 19000, 28000, 30000, 21600, 20000, 21000, 22000]
                },
                {
                name: "Skyline Business Center",
                data: [17600, 15000, 16000, 18000, 19000, 17000, 20000, 22000, 17600, 18000, 19000, 20000]
                },
                {
                name: "Crystal Unit Point",
                data: [25400, 20000, 21000, 25000, 26000, 23000, 27000, 29000, 25400, 25000, 26000, 27000]
                },
                {
                name: "Hello World",
                data: [9900, 8000, 9000, 9500, 9700, 9100, 10000, 10500, 9900, 9700, 9800, 10000]
                },
                {
                name: "Crescent Heights",
                data: [14400, 13000, 14000, 15000, 16000, 14500, 15500, 16500, 14400, 15000, 15500, 16000]
                }
            ];

            labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        var noiOptions = {
            chart: {
                // type: 'line',
                type: 'bar',
                stacked: true,    
                height: 250,
                dropShadow: {
                    enabled: false,
                    color: '#000',
                    top: 10,
                    left: 5,
                    blur: 5,
                    opacity: 0.2
                },
                zoom: { enabled: false },
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 1200,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 500
                    }
                }
            },
            colors : generateColors(series.length),
            grid: {
                show: false,
            },
            series: series,
            xaxis: {
                categories:labels,
            },
            dataLabels : {
                enabled :false
            },
            legend : {
                show:false
            },
            plotOptions: {
                bar: {
                    columnWidth: '70%'
                }
            },
            tooltip: {
                custom: function({ series, seriesIndex, dataPointIndex, w }) {
                // compute total for that month
                let total = 0;
                w.config.series.forEach(s => total += s.data[dataPointIndex]);
                // let colors = generateColors(series.length);
                // build breakdown
                let breakdown = w.config.series.map((s, i) => {
                    return `
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span style="color:${w.globals.colors[i]};font-size:12px;margin-right:5px;">●</span>
                        <span style="flex:1;">${s.name}</span>
                        <b>$${s.data[dataPointIndex].toLocaleString()}</b>
                    </div>
                    `;
                }).join('');

                return `
                    <div style="padding:10px;min-width:200px;">
                    <div style="font-weight:600;margin-bottom:5px;">
                        ${w.config.xaxis.categories[dataPointIndex]}
                    </div>
                    <div style="font-size:14px;margin-bottom:8px;">
                        Total: <b>$${total.toLocaleString()}</b>
                    </div>
                    <div style="border-top:1px solid #eee;padding-top:5px;font-size:13px;">
                        ${breakdown}
                    </div>
                    </div>
                `;
                }
            },

        };
        const noiChart = new ApexCharts(document.querySelector("#noi_chart"), noiOptions);
        noiChart.render();
    }

    function initiateTopPerformingPropertiesChart(categories,incomeData,noiData,occupancyData) {
        $("#topPerformingProperties").html('');

        var options = {
            chart: {
                type: 'bar',
                height: 350,
                stacked: false,
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 2000,
                }
            },
             colors: ["#ff7f0e", "#fdae6b", "#1f77b4"], // Income, NOI, Occupancy
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: "35%",
                    endingShape: "rounded",
                    dataLabels: {
                        position: 'top'
                    }
                }
            },
            series: [
                {
                    name: "Total Income ($)",
                    type: "column",
                    data: incomeData
                },
                {
                    name: "NOI ($)",
                    type: "column",
                    data: noiData
                },
                {
                    name: "Occupancy (%)",
                    type: "column",
                    data: occupancyData
                }
            ],
            xaxis: {
                categories: categories,
                labels: {
                    formatter: function (val) {
                        return val.length > 15 ? val.substring(0, 12) + "..." : val;
                    }
                }
            },
            yaxis: [
                {
                    title: { text: "Revenue ($)" },
                    labels: {
                        formatter: function (val) {
                            return "$" + formatIfNumber(val);
                        }
                    }
                },
                {
                    opposite: true,
                    title: { text: "Occupancy (%)" },
                    labels: {
                        formatter: function (val) {
                            return val + "%";
                        }
                    },
                    max: 100,
                    min: 0
                }
            ],
            tooltip: {
                shared: true,
                intersect: false,
                custom: function({ series, dataPointIndex, w }) {
                    const property = w.config.xaxis.categories[dataPointIndex];
                    const income = series[0][dataPointIndex];
                    const noi = series[1][dataPointIndex];
                    const occ = series[2][dataPointIndex];

                    return `
                        <div style="padding:10px;">
                            <b>${property}</b><br/>
                            Total Income ($): <b>${income.toLocaleString()}</b><br/>
                            NOI ($): <b>${noi.toLocaleString()}</b><br/>
                            Occupancy: <b>${occ}%</b>
                        </div>
                    `;
                }
            },
            legend: { position: "top",show:false },
            dataLabels: { enabled: false }
        };

        const chart = new ApexCharts(document.querySelector("#topPerformingProperties"), options);
        chart.render();
    }


    function initiateMarketCompetitorAnalysisChart(categories, askingRentData, marketRentData, occupancyData) {
        
        $("#marketRateChart").html('');
        //  categories = ["Jan","Feb","Mar","Apr","May","Jun"];

         marketRentData = [
            { name: "data", data: marketRentData },
            // { name: "Competitor A", data: [4.0, 4.1, 4.0, 4.0, 4.2, 4.3] },
            // { name: "Competitor B", data: [4.2, 4.3, 4.1, 4.1, 4.3, 4.4] }
        ];


        askingRentData = [
            { name: "data",  data: askingRentData },
            // { name: "Competitor A", data: [4.2, 4.1, 4.1, 4.3, 4.3, 4.5] }
        ];

        occupancyData = [
            { name: "data", data: occupancyData },
            // { name: "Competitor A", data: [92, 93, 91, 94, 95, 96] }
        ];

    // Chart 1: Market Rate
        new ApexCharts(document.querySelector("#marketRateChart"), {
            chart: { 
                type: 'line', 
                height: 250,
                zoom: { enabled: false },
                toolbar: { show: false }, 
            },
            series: marketRentData,   // e.g. [{ name: "MyProperty", data: [...]}, {name:"Competitor A", data:[...]}]
            xaxis: { categories },
            yaxis: {
                min: 0,
                // title: { text: "Market Rate ($/sqft)" },
                labels: { formatter: val => "$" + val.toFixed(1) },
            },
            title: {
                text: "Market Rate",
                align: "left",
                style: { fontSize: "14px", fontWeight: 600 }
            },
            stroke: {
                curve: 'smooth',
                // curve: ['straight', 'smooth', 'monotoneCubic', 'stepline']
                // width: 2
            },
            colors : ['#26547c'],
            markers: {
                size: 5,
                colors: '#ffffff',
                // strokeColors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
                strokeColors: generateColors(marketRentData.length),
                strokeWidth: 2,
                shape: 'circle',
                fillOpacity: 1,
                strokeOpacity: 1
            },
             grid: {
                show: false,
            },
            legend: {
                show: false
            },
            tooltip: {
                shared: true,
                intersect: false,
                y: { formatter: val => "$" + val.toFixed(1) }
            },
            dataLabels: {
                enabled: true
            },
        }).render();

        // Chart 2: Asking Rate
        $("#askingRateChart").html('');
        new ApexCharts(document.querySelector("#askingRateChart"), {
            chart: { 
                type: 'line', 
                height: 250,
                zoom: { enabled: false },
                toolbar: { show: false }, 
            },
            title: {
                text: "Asking Rate",
                align: "left",
                style: { fontSize: "14px", fontWeight: 600 }
            },
            stroke: {
                curve: 'smooth',
                // curve: ['straight', 'smooth', 'monotoneCubic', 'stepline']
                // width: 2
            },
            colors : ['#ef476f'],
            markers: {
                size: 5,
                colors: '#ffffff',
                // strokeColors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
                strokeColors: generateColors(askingRentData.length),
                strokeWidth: 2,
                shape: 'circle',
                fillOpacity: 1,
                strokeOpacity: 1
            },
            series: askingRentData,
            xaxis: { categories },
            yaxis: {
                min: 0,
                // title: { text: "Asking Rate ($/sqft)" },
                labels: { formatter: val => "$" + val.toFixed(1) }
            },
             grid: {
                show: false,
            },
            legend: {
                show: false
            },
            tooltip: {
                shared: true,
                intersect: false,
                y: { formatter: val => "$" + val.toFixed(1) }
            },
            dataLabels: {
                enabled: true
            },
        }).render();

        // Chart 3: Occupancy Rate
        $("#occupancyRateChart").html('');
        new ApexCharts(document.querySelector("#occupancyRateChart"), {
            chart: { 
                type: 'line', 
                height: 250,
                zoom: { enabled: false },
                toolbar: { show: false }, 
            },
            title: {
                text: "Occupancy Rate",
                align: "left",
                style: { fontSize: "14px", fontWeight: 600 }
            },
            stroke: {
                curve: 'smooth',
                // curve: ['straight', 'smooth', 'monotoneCubic', 'stepline']
                // width: 2
            },
            colors : ['#3a0ca3'],
            markers: {
                size: 5,
                colors: '#ffffff',
                // strokeColors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
                strokeColors: generateColors(occupancyData.length),
                strokeWidth: 2,
                shape: 'circle',
                fillOpacity: 1,
                strokeOpacity: 1
            },
            series: occupancyData,   // % values
            xaxis: { categories },
            yaxis: {
                // title: { text: "Occupancy Rate (%)" },
                min: 0,
                max: 100,
                labels: { formatter: val => val.toFixed(0) + "%" }
            },
             grid: {
                show: false,
            },
            legend: {
                show: false
            },
            tooltip: {
                shared: true,
                intersect: false,
                y: { formatter: val => parseFloat(val).toFixed(2) + "%" }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    // Hide 0, show others
                    return val === 0 ? "0%" : parseFloat(val).toFixed(2)  + "%";
                },
            },
        }).render();
    }


    function initiateMarketCompetitorAnalysisChartold(categories,askingRentData,marketRentData,vacancyData) {
        $("#marketCompetitorAnalysis").html('');

        let series = [
                {
                    name: 'Asking Rent ($/SF)',
                    data: askingRentData,
                    yAxisIndex: 0 // Uses left axis
                },
                {
                    name: 'Market Rent ($/SF)',
                    data: marketRentData,
                    yAxisIndex: 1 // Uses middle right axis
                },
                {
                    name: 'Occupancy (%)',
                    data: vacancyData,
                    yAxisIndex: 2 // Uses far right axis
                }
            ]

        var marketCompetitorAnalysisOptions = {
            colors: generateColors(5),
            chart: {
                type: 'bar',
                height: 400,
                dropShadow: {
                    enabled: false,
                    color: '#000',
                    top: 10,
                    left: 5,
                    blur: 5,
                    opacity: 0.2
                },
                zoom: { enabled: false },
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 1200,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 500
                    }
                }
            },
            plotOptions: {
                bar: { horizontal: false, columnWidth: '50%' }
            },
            grid: {
                show: false,
            },
            dataLabels: {
                enabled: true
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            legend: { position: 'top' },
            series: series,  // This will be filled dynamically
            xaxis: {
                categories: categories,
                    // title: { text: 'Properties' }
            },
            yaxis: [
                    {
                    // Left Y-axis for asking rent
                    title: { text: 'Asking Rent ($/SF)' },
                    labels: {
                        formatter: function (value) {
                            return "$" + Math.round(value);
                        }
                    }
                },
                {
                    // Second Y-axis for market rent (right side)
                    opposite: true,
                    title: { text: 'Market Rent ($/SF)' },
                    labels: {
                        formatter: function (value) {
                            return "$" + Math.round(value);
                        }
                    }
                },
                {
                    // Third Y-axis for vacancy percentage (far right)
                    opposite: true,
                    title: { text: 'Occupancy (%)' },
                    labels: {
                        formatter: function (value) {
                            return Math.round(value) + "%";
                        }
                    },
                    max: 100,
                    axisTicks: { show: true },
                    axisBorder: { show: true, color: '#e74c3c' }
                }
            ],
            tooltip: {
                y: {
                    formatter: function (value, { seriesIndex }) {
                        if (seriesIndex === 2) {
                            return Math.round(value) + "%";   // no decimals for vacancy
                        } else {
                            return "$" + Math.round(value);   // no decimals for rents
                        }
                    }
                }
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                position: 'top'
            },
        };
        const marketCompetitorAnalysisChart = new ApexCharts(document.querySelector("#marketCompetitorAnalysis"), marketCompetitorAnalysisOptions);    
        marketCompetitorAnalysisChart.render();
    }

    function initiateTopRevenueByProperty(series,labels) {

        $("#topRevenueByProperty").html('');

        
        var topRevenueByPropertyOptions = {
            chart: {
                type: 'bar', // The chart type is set to 'bar'
                height: 250,
                dropShadow: {
                    enabled: false,
                    color: '#000',
                    top: 10,
                    left: 5,
                    blur: 5,
                    opacity: 0.2
                },
                zoom: { enabled: false },
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 1200,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 500
                    }
                }
            },
            plotOptions: {
                bar: {
                columnWidth: '80%',
                endingShape: 'rounded'
                }
            },
            series: series,
            grid: {
                show: false,
            },
            legend: {
                show: false
            },
            colors: generateColors(series.length),
            xaxis: {
                categories: labels,
                // title: { text: 'Properites' },
            },
            yaxis: {
                labels: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return '$' + val;
                    }
                },
                title: { text: 'Revenue' },
            },
            dataLabels: {
                enabled: false,
            },
            tooltip: {
                shared: true,
                intersect: false,
                custom: function({ series, dataPointIndex, w }) {
                const month = w.config.xaxis.categories[dataPointIndex];
                const breakdown = w.config.series.map((s, i) => {
                    return `
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span style="color:${w.globals.colors[i]};margin-right:6px;">●</span>
                        <span style="flex:1;">${s.name}:</span>
                        <b>${s.data[dataPointIndex].toLocaleString()}</b>
                    </div>
                    `;
                }).join('');

                return `
                    <div style="padding:10px;min-width:220px;">
                    <div style="font-weight:600;margin-bottom:5px;">${month}</div>
                    ${breakdown}
                    </div>
                `;
                }
            }
        };

        const topRevenueByPropertyChart = new ApexCharts(document.querySelector("#topRevenueByProperty"), topRevenueByPropertyOptions);
        topRevenueByPropertyChart.render();
    }

    function initiatetotalUnitSold(series,labels) {
        $("#totalUnitSold").html('');
    
        var totalUnitSoldChartOptions = {
            chart: {
                    type: 'bar',
                    height: 250,
                    stacked: true,
                    toolbar: {
                        show: true
                    },
                    dropShadow: {
                    enabled: false,
                    color: '#000',
                    top: 10,
                    left: 5,
                    blur: 5,
                    opacity: 0.2
                },
                zoom: { enabled: false },
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 1200,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 500
                    }
                }
            },
            responsive: [{
                    breakpoint: 480,
                    options: {
                        legend: {
                        position: 'bottom',
                            offsetX: -10,
                            offsetY: 0
                        }
                    }
            }],
            plotOptions: {
                bar: {
                    horizontal: false,
                    borderRadius: 2,
                    borderRadiusApplication: 'end', // 'around', 'end'
                    borderRadiusWhenStacked: 'last', // 'all', 'last'
                    dataLabels: {
                        total: {
                            enabled: false,
                            formatter: function (val) {
                                // Hide 0, show others
                                return val === 0 ? "" : val;
                            },
                            style: {
                                fontSize: '13px',
                                fontWeight: 900
                            }
                        }
                    },
                    
                },
            },   
            series: series,
            legend: {
                show: false,
                position: 'right',
                offsetY: 40
            },
            grid: {
                show: false,
            },
            dataLabels: {
                enabled: false,
            
            },
            xaxis: {
                categories: labels, // The labels for the x-axis
            },
            yaxis: {
                title: {
                    text: '' // Label for the y-axis
                },
                min: 0, // Set the minimum value of the y-axis
                tickAmount: 5,
            },
            tooltip: {
                enabled: true,
                theme: 'light',
                shared: true,
                followCursor: true,
                intersect: false
            },
            colors: generateColors(series.length),
        };

        const totalUnitSoldChart = new ApexCharts(document.querySelector("#totalUnitSold"), totalUnitSoldChartOptions);

        totalUnitSoldChart.render();
    }

    function initiateavgRentPerSF(series,labels) {
        $("#avgRentPerSF").html('');

        var avgRentPerSFOptions = {
            chart: {
                type: 'line',
                height: 250,
                dropShadow: {
                    enabled: false,
                    color: '#000',
                    top: 10,
                    left: 5,
                    blur: 5,
                    opacity: 0.2
                },
                zoom: { enabled: false },
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 1200,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 500
                    }
                }
            },
            stroke: {
                curve: 'smooth',
                // curve: ['straight', 'smooth', 'monotoneCubic', 'stepline']
                width: 2
            },
            series: series,
            grid: { show: false },
            
            legend: {
                show: false,
                position: 'top',
                horizontalAlign: 'right',
                floating: true,
                offsetY: -25,
                offsetX: -5
            },
            xaxis: {
                categories: labels,
                axisBorder: { show: false },
                axisTicks: { show: false }
            },
            dataLabels: { enabled: false },
            tooltip: {
                enabled: true,
                theme: 'light',
                shared: true,
                followCursor: true,
                intersect: false
            },
            // colors: generateColors(series.length),
            colors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
            markers: {
                size: 5,
                colors: '#ffffff',
                strokeColors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
                // strokeColors: generateColors(series.length),
                strokeWidth: 2,
                shape: 'circle',
                fillOpacity: 1,
                strokeOpacity: 1
            },
        }
   
        const avgRentPerSFChart = new ApexCharts(document.querySelector("#avgRentPerSF"), avgRentPerSFOptions);
        avgRentPerSFChart.render();
    }


    function initiatePortfolioWideOccupancyTrends(series,labels) {
        $("#portfolioWideOccupancyTrends").html('');
        var portfolioWideOccupancyTrendsOptions = {
            chart: {
                type: 'line',
                height: 250,
                dropShadow: {
                    enabled: false,
                    color: '#000',
                    top: 10,
                    left: 5,
                    blur: 5,
                    opacity: 0.2
                },
                zoom: { enabled: false },
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 1200,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 500
                    }
                }
            },
            stroke: {
                curve: 'smooth',
                width: 2
            },
            series: series,
            grid: { show: false },
            
            legend: {
                show: false,
                position: 'top',
                horizontalAlign: 'right',
                floating: true,
                offsetY: -25,
                offsetX: -5
            },
            xaxis: {
                categories: labels,
                axisBorder: { show: false },
                axisTicks: { show: false }
            },
            dataLabels: { enabled: false },
            tooltip: {
                enabled: true,
                theme: 'light',
                shared: true,
                followCursor: true,
                intersect: false
            },
            // colors: generateColors(series.length),
            colors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
            markers: {
                size: 5,
                colors: '#ffffff',
                strokeColors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
                // strokeColors: generateColors(series.length),
                strokeWidth: 2,
                shape: 'circle',
                fillOpacity: 1,
                strokeOpacity: 1
            },

        };

        const portfolioWideOccupancyTrendsChart = new ApexCharts(document.querySelector("#portfolioWideOccupancyTrends"), portfolioWideOccupancyTrendsOptions);
        portfolioWideOccupancyTrendsChart.render();
    }
    
    

    

    

        


    function updateIndustryMix(data) {
        // 0??  Empty data   better kill the whole chart than send []
        if (!data || Object.keys(data).length === 0) {
            industryMixChart.updateOptions({   // pass at least one 0 or the donut disappears
                series: [100],
                labels: ['No data', 'and No data']
            });
            setTimeout(() => {
                industryMixChart.updateSeries([100])
            }, 10);
            return;
        }

        // 1??  Convert the object you get from server ? [values] and [labels]
        const newSeries = [];
        const newLabels = [];
        Object.values(data).forEach(item => {
            // newSeries.push(item.count);
            newSeries.push(Math.round(item.percentage));
            newLabels.push(item.industry_name);
        });

        // 2??  Update chart in a single call
        if(loading) {
            initiateIndustryMix(newSeries,newLabels);
        } else {

            industryMixChart.updateOptions({
                labels: newLabels,
                series: newSeries,
                
            });
        // setTimeout(() => {
            industryMixChart.updateSeries(newSeries)
        // }, 200);
        }

    }

    function updateExpirationChart(data) {
        // 0??  Empty data   better kill the whole chart than send []
        if (!data || Object.keys(data).length === 0) {
            expirationChart.updateOptions({   // pass at least one 0 or the donut disappears
                series: [0],
                labels: ['No data']
            });
            setTimeout(() => {
                expirationChart.updateSeries([100])
            }, 10);
            return;
        }

        // 1??  Convert the object you get from server ? [values] and [labels]
        const newSeries = [];
        const newLabels = ['0-3 months', '4-6 months', '7-12 months', '13-24 months'];
        // const newLabels = ['Q1', 'Q2', 'Q3', 'Q4'];


        Object.keys(data).forEach(property => {
            let new_prop_name = property;
            if (new_prop_name.length > 15) {
                // new_prop_name = new_prop_name.substring(0, 15) + '...';
            }
            let temp_array = [];
            Object.keys(data[property]).forEach(key => {
                temp_array.push(data[property][key].length);
            })
            newSeries.push({
                name: new_prop_name,
                data: temp_array
            });
        });

        // Find max value from your series
        let allValues = newSeries.flatMap(s => s.data); // combine all series data
        let maxValue = Math.max(...allValues);

        // Round up to nearest multiple of 15
        let roundedMax = Math.ceil(maxValue / 15) * 15;

        // Ensure a minimum max (like 25 if very small values)
        if (roundedMax < 15) {
            roundedMax = 15;
        }

        if(loading) {
            initiateExpirationChart(newSeries,newLabels);
        } else {

            expirationChart.updateOptions({
                
                xaxis: {
                    categories: newLabels, // The labels for the x-axis
                    title: {
                        text: '' // Label for the x-axis
                    },
                },
                
                series: newSeries,
                yaxis: {
                    min: 0,
                    max: roundedMax,
                    tickAmount: Math.floor(roundedMax / 5), // controls number of ticks
                    labels: {
                        formatter: function (val) {
                            return val;
                        }
                    },
                    title: {
                        text: 'Expiry Count', // Label for the x-axis
                    },
                },
                
            
                
            });
            
            expirationChart.updateSeries(newSeries);

        }

    }

    function updateRevenueByTenant(data) {
        const newSeries = [];
        const newLabels = [];

        data.forEach(tenant => {
            newSeries.push(tenant.annual_base_rent ? parseFloat(tenant.annual_base_rent).toFixed(2) : 0);
            newLabels.push(tenant.tenant_name ?? "-");
        });

        if(loading) {
            initiateRevenueByTenant(newSeries,newLabels);
        } else {
            revenueByTenantChart.updateOptions({
                yaxis: {
                    labels: {
                        formatter: function (val) {
                            val = formatIfNumber(val);
                            return '$' + val;
                        }
                    },
                    // title: { text: 'Annual Revenue' },   
                },
                xaxis: {
                    categories: newLabels,
                    // title: { text: 'Tenants' },
                    labels: {
                        formatter: function (val) {
                            if (val.length > 15) {
                                return val.substring(0, 15) + '...'; // cut after 10 chars
                            }
                            return val;
                        }
                    },
                },
                series: [{
                    // name: 'Annual Rent',
                    data: newSeries
                }],
                
                colors: generateColors(newSeries.length),
                dataLabels: {
                    enabled: true,
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return '$' + val; // add % in the label
                    },
                    style: {
                        colors: ['#000000'] // per series colors
                    },
                    offsetY: 10,
                }
            });
        }
    }

    function updateNoiChart(data) {
        // 0??  Empty data   better kill the whole chart than send []
        if (!data || Object.keys(data).length === 0) {
            noiChart.updateOptions({   // pass at least one 0 or the donut disappears
                series: [100],
                labels: ['No data']
            });
            setTimeout(() => {
                noiChart.updateSeries([100])
            }, 10);
            return;
        }

        // 1??  Convert the object you get from server ? [values] and [labels]
        const newSeries = [];
        var newLabels = [];

        // {
        //   name: 'Company name',
        //   data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
        // }


        Object.keys(data).forEach(property => {
            newLabels = [];
            let temp_array = [];
            data[property].forEach(val => {
                temp_array.push(val.noi ?? 0);
                newLabels.push(`${monthNames[val.month - 1]}`);
            })
            newSeries.push({
                name: property,
                data: temp_array
            });
        });

        if(loading) {
            initiateNoiChart(newSeries,newLabels);
        } else {

        
            noiChart.updateOptions({
                xaxis: {
                    categories: newLabels, // The labels for the x-axis
                    // title: {
                    //     text: 'Properties' // Label for the x-axis
                    // }
                },
                yaxis: {
                    labels: {
                        formatter: function (val) {
                            val = formatIfNumber(val);
                            return '$' + val; // add % in the label
                        }
                    },
                    title: {
                        text: 'NOI' // Label for the y-axis
                    }
                },
                series: newSeries
            });

            // setTimeout(() => {
            noiChart.updateSeries(newSeries);
            // }, 10);
        }

    }

    function updateTopPerformingPropertiesChart(data) {
        // 0??  Empty data   better kill the whole chart than send []
        if (!data || Object.keys(data).length === 0) {
            topPerformingPropertiesChart.updateOptions({   // pass at least one 0 or the donut disappears
                series: [0],
                labels: ['No data']
            });
            setTimeout(() => {
                topPerformingPropertiesChart.updateSeries([0])
            }, 10);
            return;
        }

        // 1??  Convert the object you get from server ? [values] and [labels]
        var categories = [];
        const incomeData = [];
        const noiData = [];
        const occupancyData = [];

        let overallTotal = 0;
        data.forEach(property => {
            // console.log('property',property)
            // let total = (property.noi ? parseFloat(property.noi) : 0) + (property.annual_income ? parseFloat(property.annual_income) : 0) + (property.occupancy_rate ? parseFloat(property.occupancy_rate) : 0)
            // overallTotal += 0;
            categories.push(property.name);
            incomeData.push(property.totalIncome);
            noiData.push(property.noi);
            occupancyData.push(property.occupancy);
        });


        if(loading) {
            initiateTopPerformingPropertiesChart(categories,incomeData,noiData,occupancyData);
        } else {
        }
    }

    function updateMarketCompetitorAnalysisChart(data) {
        $("#market-competitor-property").val();
        var selectedProperty = $("#market-competitor-property option:selected").text();
        $(".market-competitor-property-selected").text("Complete competitor comparison.");
        if(selectedProperty) {
            $(".market-competitor-property-selected").text("Complete competitor comparison for "+selectedProperty);
        }
        
        if (!data || Object.keys(data).length === 0) {
            marketCompetitorAnalysisChart.updateOptions({
                series: [100],
                labels: ['No data']
            });
            setTimeout(() => {
                marketCompetitorAnalysisChart.updateSeries([100]);
            }, 10);
            return;
        }

        const categories = [];  // X-axis labels
        const askingRentData = [];
        const marketRentData = [];
        const vacancyData = [];

        // Loop through each property's data
        
        Object.values(data).flat().forEach(property => {
            if(property.name) {
                const name = property.name || "Unknown";
                const rent = parseFloat(property.rent_per_sf) || 0;
                const market = parseFloat(property.market_rate_per_sqft) || 0;
                const occupancy = parseFloat(property.occupied_percent) || 0;
                const vacancy = 100 - occupancy;

                categories.push(name);
                askingRentData.push(rent);
                marketRentData.push(market);
                vacancyData.push(occupancy);
            }
            
        });
        if(loading) {
            initiateMarketCompetitorAnalysisChart(categories,askingRentData,marketRentData,vacancyData)
        } else {
        
            // Update chart
            marketCompetitorAnalysisChart.updateOptions({
                colors: generateColors(5),
                xaxis: {
                    categories: categories,
                    // title: { text: 'Properties' }
                },
                yaxis: [
                    {
                        // Left Y-axis for asking rent
                        title: { text: 'Asking Rent ($/SF)' },
                        labels: {
                            formatter: function (value) {
                                return "$" + Math.round(value);
                            }
                        }
                    },
                    {
                        // Second Y-axis for market rent (right side)
                        opposite: true,
                        title: { text: 'Market Rent ($/SF)' },
                        labels: {
                            formatter: function (value) {
                                return "$" + Math.round(value);
                            }
                        }
                    },
                    {
                        // Third Y-axis for vacancy percentage (far right)
                        opposite: true,
                        title: { text: 'Occupancy (%)' },
                        labels: {
                            formatter: function (value) {
                                return Math.round(value) + "%";
                            }
                        },
                        max: 100,
                        axisTicks: { show: true },
                        axisBorder: { show: true, color: '#e74c3c' }
                    }
                ],
                
            });

            marketCompetitorAnalysisChart.updateSeries([
                {
                    name: 'Asking Rent ($/SF)',
                    data: askingRentData,
                    yAxisIndex: 0 // Uses left axis
                },
                {
                    name: 'Market Rent ($/SF)',
                    data: marketRentData,
                    yAxisIndex: 1 // Uses middle right axis
                },
                {
                    name: 'Occupancy (%)',
                    data: vacancyData,
                    yAxisIndex: 2 // Uses far right axis
                }
            ]);

        }
    }

    function updateTopRevenueByProperty(data) { 
        const newSeries = data.series ?? [];
        const newLabels = data.labels ?? [];
       
        if(loading) {
            initiateTopRevenueByProperty(newSeries,newLabels);
        } else {
 
            topRevenueByPropertyChart.updateOptions({
                xaxis: {
                    categories: newLabels,
                    // title: { text: 'Properites' },
                },
                series: [{
                    // name: 'Annual Rent',
                    data: newSeries
                }],
                yaxis: {
                    labels: {
                        formatter: function (val) {
                            val = formatIfNumber(val);
                            return '$' + val;
                        }
                    },
                    title: { text: 'Revenue' },
                },
                colors: generateColors(newSeries.length),

            });
        }
    }

    function updatetotalUnitSold(data) {
        if (!data || Object.keys(data).length === 0) {
            totalUnitSoldChart.updateOptions({
                series: [100],
                labels: ['No data']
            });
            setTimeout(() => {
                totalUnitSoldChart.updateSeries([100]);
            }, 10);
            return;
        }

        var newSeries = [];
        var newLabels = [];

        Object.keys(data).forEach(property => {
            newLabels = [];
            let temp_array = [];
            Object.values(data[property]).forEach(val => {
                temp_array.push(val['spaces_sold'] ? parseFloat(val['spaces_sold']).toFixed(2) : 0);
                // newLabels.push(`${val.year} ${monthNames[val.month - 1]}`);
                newLabels.push(`${monthNames[val.month - 1]}`);
            })
            newSeries.push({
                name: property,
                data: temp_array
            });
        });

        if(loading) {
            initiatetotalUnitSold(newSeries,newLabels);
        } else {
            totalUnitSoldChart.updateOptions({
                series: newSeries,
                tooltip: {
                    shared: true,
                    intersect: false,
                    // Optional: Custom formatter for the values
                    y: {
                        formatter: function(val, { series, seriesIndex, dataPointIndex, w }) {
                            return val;
                        }
                    }
                },   
                xaxis: {
                    categories: newLabels,
                    // title: { text: '' } 
                },
                yaxis: {
                    labels: {
                        formatter: function (val) {
                            return Number.isInteger(val) ? val : '';
                        }
                    },
                    tickAmount: 5,  // Optional: Adjust for better spacing
                    // title: { text: 'Unit/Space Sold' }
                }, 
                
            });
            // setTimeout(() => {
            totalUnitSoldChart.updateSeries(newSeries);
            // }, 10);
        }
    }

    function updateavgRentPerSF(data) {

        if (!data || Object.keys(data).length === 0) {
            avgRentPerSFChart.updateOptions({
                series: [100],
                labels: ['No data']
            });
            setTimeout(() => {
                avgRentPerSFChart.updateSeries([100]);
            }, 10);
            return;
        }

        const newSeries = [];
        var newLabels = [];
      
        Object.keys(data).forEach(property => {
            newLabels = [];
            let temp_array = [];
            data[property].forEach(val => {
                temp_array.push(val.avg_rent_per_sf ?? 0);
                newLabels.push(`${monthNames[val.month - 1]}`);
            })
            newSeries.push({
                name: property,
                data: temp_array
            });
        });




        if(loading) {
            initiateavgRentPerSF(newSeries,newLabels);
        } else {

        
            avgRentPerSFChart.updateOptions({
                xaxis: {
                    categories: newLabels,
                    axisBorder: { show: false },
                    axisTicks: { show: false }
                },
                yaxis: {
                    labels: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return val + '%';
                    },
                    style: {
                        colors: '#888',
                        fontSize: '12px'
                    }
                    },
                    min: 0,
                    max: 100
                },
                colors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
                markers: {
                    size: 5,
                    colors: '#ffffff',
                    strokeColors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
                    strokeWidth: 2,
                    shape: 'circle',
                    fillOpacity: 1,
                    strokeOpacity: 1
                },
                series: series,
            });
        }
    }

    function updatePortfolioWideOccupancyTrends(data) {
        if (!data || data.length === 0) {
            portfolioWideOccupancyTrendsChart.updateOptions({
                series: [100],
                labels: ['No data']
            });
            setTimeout(() => {
                portfolioWideOccupancyTrendsChart.updateSeries([]);
            }, 10);
            return;
        }

        const newSeries = [];
        var newLabels = [];

        Object.keys(data).forEach(property => {
            newLabels = [];
            let temp_array = [];
            data[property].forEach(val => {
                temp_array.push(val.occupancy_percentage ?? 0);
                newLabels.push(`${monthNames[val.month - 1]}`);
            })
            newSeries.push({
                name: property,
                data: temp_array
            });
        });

        let discreteArray = [];

            newSeries.forEach((seriesObj, seriesIndex) => {
            seriesObj.data.forEach((value, dataPointIndex) => {
                if (value === 0) {
                discreteArray.push({
                    seriesIndex: seriesIndex,
                    dataPointIndex: dataPointIndex,
                    size: 0   // hide marker
                    // optionally you can set fillColor/strokeColor but irrelevant since size=0
                });
                }
            });
        });

        if(loading) {
            initiatePortfolioWideOccupancyTrends(newSeries,newLabels);
        }   else {

        

            portfolioWideOccupancyTrendsChart.updateOptions({
                
                xaxis: {
                    categories: newLabels,
                    axisBorder: { show: false },
                    axisTicks: { show: false }
                },
                yaxis: {
                    labels: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return val + '%';
                    },
                    style: {
                        colors: '#888',
                        fontSize: '12px'
                    }
                    },
                    min: 0,
                    max: 100
                },
                colors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
                markers: {
                    size: 5,
                    colors: '#ffffff',
                    strokeColors: ['#FFA726', '#FFCC80', '#BDBDBD', '#FF7043'],
                    strokeWidth: 2,
                    shape: 'circle',
                    fillOpacity: 1,
                    strokeOpacity: 1
                },
                series: series,
            });

            // setTimeout(() => {
            portfolioWideOccupancyTrendsChart.updateSeries(newSeries);
            // }, 100);
        }
    }



    @if ($property_count > 0)
        setTimeout(() => {
            sendDashboardRequest();
            getTopPerformingPropertiesChartData();
            getExpirationChartData();
            getAvgRentPerSFChartData();
            getRevenueBreakdownChartData();
            getNOIChartData();
            getRevenueByTenantChartData();
            getMarketCompetitorAnalysisChartData();
        }, 1000);
    @endif

</script>
<style>
    #industryMixChart .apexcharts-legend-series.apexcharts-no-click {
        max-width: 120px !important;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* overflow: hidden; */
    }

    #industryMixChart .apexcharts-legend-text {
        /* max-width: 110px !important;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px !important; */
        white-space: pre-wrap;
         text-overflow:clip;
    }

    #industryMixChart .series-names {
        margin-bottom: 10px;
    }

    .apexcharts-legend-marker {
        left: -4px
    }

    .apexcharts-legend-marker svg {
        width: 4px;
        height: 14px;
    }
</style>
@endsection