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


<style>
    .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;
    }

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

    .truncate {
        font-size: 14px;
    }

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

    /*--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;
    }

    .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">
    <div class="content__wrap">
        <div class="container">

            {{-- Filters and stuff --}}
            <div class="row">
                <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>

            {{-- 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:40px;">
                            </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:40px;">
                            </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:40px;">
                            </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:40px;">
                            </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:40px;">
                            </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:40px;">
                            </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:40px;">
                            </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:40px;">
                            </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>
                                </div>
                                <div class="self-center">
                                </div>
                            </div>
                            <div id="expirationChart" class="apex-charts"></div>
                        </div>
                    </div>
                @endif

                @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>
                                </div>
                            </div>
                            <div id="totalUnitSold"></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 Foot</p>
                                </div>
                            </div>
                            <div id="avgRentPerSF"></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">Revenue Contribution by Tenant</p>
                                </div>
                            </div>
                            <div id="revenue_by_tenant"></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">Total Revenue Breakdown by Property</p>
                                </div>
                            </div>
                            <div id="topRevenueByProperty"></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>
                            </div>
                        </div>
                        <div id="portfolioWideOccupancyTrends"></div>
                    </div>
                </div>

                @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 h-100">
                            <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>
                                </div>
                                <div class="self-center">
                                </div>
                            </div>
                            <div id="industryMixChart"></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>
                                </div>
                            </div>
                            <div id="noi_chart" class="apex-charts"></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">Top 5 Performing Properties</p>
                            </div>
                        </div>
                        <div id="topPerformingProperties"></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>
                                </div>
                            </div>
                            <div id="marketCompetitorAnalysis"></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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    @if (session('error'))
        Swal.fire({
            title: 'Access Denied',
            text: '{{ session("error") }}',
            icon: 'error',
            customClass: {
                confirmButton: 'btn btn-danger'
            },
            confirmButtonText: 'OK'
        });
    @endif

    // 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>
    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'));
        });

        $.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);

                $('#selected_property').html('<option selected value="all">All Property</option>');

                $.each(response.data, function (key, value) {
                    $('#selected_property').append('<option value="' + value.id + '">' + value.name + '</option>');
                });

            }, 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");
        }
    }

$(document).on('click', function(event) {
    // Check if the click is outside the filter dropdown, trigger button, select, and related elements
    if (!$(event.target).closest('.custom-date-filter, #main_filter, button[onclick="openFilterDropdown()"]').length) {
        // Close the dropdown if it's open
        if (!$(latest_open_filter).hasClass('d-none')) {
            $(latest_open_filter).addClass('d-none').fadeOut();
        }
    }
});


    $('.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();
        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 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 || [];
                let noi_trends = res.data?.noi_trends || [];
                let top_performing_properties = res.data?.top_performing_properties || [];
                let revenue_contribution_by_tenant = res.data?.revenue_contribution_by_tenant || [];
                let top_revenue_breakdown_by_property = res.data?.top_revenue_breakdown_by_property || [];
                let total_units_sold = res.data?.total_units_sold || [];
                let avg_rent_per_sf_by_property = res.data?.avg_rent_per_sf_by_property || [];
                let portfolio_wide_occupancy_trends = res.data?.portfolio_wide_occupancy_trends || [];
                let market_competitor_analysis = res.data?.market_competitor_analysis || [];

                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);
                updateNoiChart(noi_trends);
                // console.log(top_performing_properties)
                updateTopPerformingPropertiesChart(top_performing_properties);
                updateRevenueByTenant(revenue_contribution_by_tenant);
                updateTopRevenueByProperty(top_revenue_breakdown_by_property);
                updatetotalUnitSold(total_units_sold);
                updateavgRentPerSF(avg_rent_per_sf_by_property);
                updatePortfolioWideOccupancyTrends(portfolio_wide_occupancy_trends);
                updateMarketCompetitorAnalysisChart(market_competitor_analysis);

                $('#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);
            }
        });
    }

    // /* 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',
            '#11e0bc',
        ];
        const colors = [];

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

    var industryMixOptions = {
        series: [],
        labels: [],

        chart: {
            type: 'donut',
            height: 350,

            // fire every time a legend item is clicked
            events: {
                legendClick: function (chartCtx, seriesIndex, opts) {
                    const sliceName = opts.config.labels[seriesIndex];
                    chartCtx.toggleSeries(sliceName);          // ? hide / show slice completely
                }
            }
        },

        legend: {
            position: 'right',
            offsetY: 0,

            // stop the default  just-dim  behaviour
            onItemClick: { toggleDataSeries: false },
            onItemHover: { highlightDataSeries: false }
        },

        dataLabels: { enabled: false },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: { width: 200 },
                legend: { show: false }
            }
        }]
    };

    var expirationOptions = {
        chart: {
            type: 'bar', // The chart type is set to 'bar'
            height: 350
        },
        series: [],
        xaxis: {
            categories: [], // The labels for the x-axis
            title: { text: 'Expiry Bucket' },
        },
        yaxis: {
            title: { text: 'Expiry Count' },
            min: 0, // Set the minimum value of the y-axis
        }
    };

    var revenueByTenantOptions = {
        chart: {
            type: 'bar', // The chart type is set to 'bar'
            height: 350
        },
        series: [],
        xaxis: {
            categories: [], // The labels for the x-axis
            title: {
                text: 'Tenants' // Label for the x-axis
            }
        },
        yaxis: {
            title: {
                text: 'Annual Revenue' // Label for the y-axis
            },
            min: 0, // Set the minimum value of the y-axis
        }
    };

    var noiOptions = {
        chart: {
            type: 'line',
            height: 350,
        },
        stroke: {
            width: 2,
            curve: 'smooth',
        },
        series: [
            {
                name: 'company one',
                data: [],
            }
        ],
        xaxis: {
            categories: [],
            title: { text: 'Properties' },
        },
        yaxis: {
            title: { text: 'NOI' },
        },

    };

    var topPerformingPropertiesOptions = {
        chart: {
            type: 'bar', // The chart type is set to 'bar'
            height: 350
        },
        series: [],
        xaxis: {
            title: {
                text: 'Properties' // Label for the x-axis
            }
        },
        yaxis: {
            title: {
                text: 'Revenue' // Label for the y-axis
            },
            min: 0, // Set the minimum value of the y-axis
        }
    };

    var marketCompetitorAnalysisOptions = {
        chart: {
            type: 'bar',
            height: 350
        },
        colors: ["#e35205", "#00bcd4", "#4caf50"],  // Multiple colors for 3 series
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '50%',   // Good spacing between grouped bars
                endingShape: 'rounded'
            }
        },
        dataLabels: {
            enabled: true
        },
        stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
        },
        series: [],  // This will be filled dynamically
        xaxis: {
            categories: [],  // Will be updated dynamically
            title: {
                text: 'Properties'
            }
        },
        yaxis: {
            title: {
                text: 'Value ($/SF or %)'
            },
            min: 0
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val.toFixed(2);
                }
            }
        },
        legend: {
            position: 'top'
        },
    };


    var topRevenueByPropertyOptions = {
        chart: {
            type: 'bar', // The chart type is set to 'bar'
            height: 350
        },
        series: [],
        xaxis: {
            categories: ['Property Name'], // The labels for the x-axis
            title: { text: 'Properties' },
        },
        yaxis: {
            title: { text: 'Revenue' },
            min: 0, // Set the minimum value of the y-axis
        }
    };

    var totalUnitSoldChartOptions = {
        chart: {
            type: 'bar', // The chart type is set to 'bar'
            height: 350
        },
        series: [],
        xaxis: {
            title: { text: 'Timeline' },
        },
        yaxis: {
            title: { text: 'Unit/ Space Sold' },
            min: 0, // Set the minimum value of the y-axis
        }
    };

    var avgRentPerSFOptions = {
        chart: {
            type: 'bar', // The chart type is set to 'bar'
            height: 350
        },
        series: [],
        xaxis: {
            title: { text: 'Properties' },
        },
        yaxis: {
            title: { text: 'Rent/SF' },
            min: 0, // Set the minimum value of the y-axis
        }
    };

    var portfolioWideOccupancyTrendsOptions = {
        chart: {
            type: 'line',
            height: 350,
        },
        stroke: {
            width: 2,
            curve: 'smooth',
        },
        series: [],
        xaxis: {
            title: { text: 'Properties' },
        },
        xaxis: {
            title: { text: 'Occupancy %' },
        },

    };

    const industryMixChart = new ApexCharts(document.querySelector('#industryMixChart'), industryMixOptions);

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

    const revenueByTenantChart = new ApexCharts(document.querySelector("#revenue_by_tenant"), revenueByTenantOptions);

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

    const topPerformingPropertiesChart = new ApexCharts(document.querySelector("#topPerformingProperties"), topPerformingPropertiesOptions);

    const marketCompetitorAnalysisChart = new ApexCharts(document.querySelector("#marketCompetitorAnalysis"), marketCompetitorAnalysisOptions);

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

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

    const avgRentPerSFChart = new ApexCharts(document.querySelector("#avgRentPerSF"), avgRentPerSFOptions);

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


    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);
        });

        // console.log(newSeries)
        // console.log(newLabels)

        // 2??  Update chart in a single call

        industryMixChart.updateOptions({
            labels: newLabels,
            series: newSeries,
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return val.toFixed(1) + "%"; // Show percentage values directly on chart
                },
                style: {
                    fontSize: '12px',
                    fontWeight: 'bold',
                    colors: ['#fff'] // White text, adjust color as needed
                },
                dropShadow: {
                    enabled: true,
                    top: 1,
                    left: 1,
                    blur: 1,
                    opacity: 0.8
                }
            },
            legend: {
                show: true,
                formatter: function (seriesName, opts) {
                    let displayName = seriesName;
                    if (seriesName.length > 10) {
                        displayName = seriesName.substring(0, 10) + '...';
                    }
                    return '<span class="series-name">' + displayName + '</span>';
                }
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return val.toFixed(0) + "%"; // tooltip with %
                    }
                }
            }
        });
        setTimeout(() => {
            industryMixChart.updateSeries(newSeries)
        }, 10);


    }

    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'];


        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;
        }

        expirationChart.updateOptions({
            xaxis: {
                categories: newLabels, // The labels for the x-axis
                title: { text: 'Expiry Bucket' },
            },
            series: newSeries,
            yaxis: {
                title: { text: 'Expiry Count' },
                min: 0,
                max: roundedMax,
                tickAmount: Math.floor(roundedMax / 5), // controls number of ticks
                labels: {
                    formatter: function (val) {
                        return val;
                    }
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    // Hide 0, show others
                    return val === 0 ? "" : val;
                },
                style: {
                    colors: ['#000000'] // per series colors
                },
                offsetY: 3,
            },
        });
        setTimeout(() => {
            expirationChart.updateSeries(newSeries)
        }, 10);

    }

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

        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 ?? "-");
        });

        revenueByTenantChart.updateOptions({
            yaxis: {
                title: { text: 'Annual Revenue' },
                labels: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return '$' + val;
                    }
                }
            },
            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
            }],
            plotOptions: {
                bar: {
                    distributed: true, // This enables different colors for each bar
                }
            },
            legend: {
                show: false
            },
            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,
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return '$' + val; // add % in tooltip
                    }
                }
            }
        });
    }

    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 => {
                // if(val.noi && val.noi > 0) {
                //     temp_array.push(val.noi ?? 0);
                // }
                temp_array.push(val.noi ?? 0);
                newLabels.push(`${val.year} ${monthNames[val.month - 1]}`);
            })
            newSeries.push({
                name: property,
                data: temp_array
            });
        });

        noiChart.updateOptions({
            xaxis: {
                categories: newLabels,
                title: { text: 'Properties' },
            },
            yaxis: {
                title: { text: 'NOI' },
                labels: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return '$' + val; // add % in the label
                    }
                }
            },
            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 newSeries = [];
        const newLabels = [];

        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;
            newSeries.push(property.total);
            newLabels.push(property.name);
        });

        // newSeries = newSeries.map(score => parseFloat((score / overallTotal) * 100).toFixed(2));

        topPerformingPropertiesChart.updateOptions({
            xaxis: {
                categories: newLabels, // The labels for the x-axis
                title: {
                    text: 'Properties' // Label for the x-axis
                },
                labels: {
                    formatter: function (val) {
                        if (val.length > 15) {
                            return val.substring(0, 15) + '...'; // cut after 10 chars
                        }
                        return val;
                    }
                }
            },
            yaxis: {
                title: {
                    text: 'Revenue' // Label for the y-axis
                },
                labels: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return '$' + val;
                    }
                }
            },
            plotOptions: {
                bar: {
                    distributed: true,
                }
            },
            legend: {
                show: false
            },
            colors: generateColors(newSeries.length),
            dataLabels: {
                colors: ['#26a0fc', '#26e7a6', '#ff7f3b', '#e74c3c', '#dbb434ff'],
                enabled: true,
                formatter: function (val) {
                    // Hide 0, show others
                    if (val === 0) {
                        return "$0";
                    } else {
                        val = formatIfNumber(val);
                        return '$' + val;
                    }
                },
                style: {
                    colors: ['#000000'] // per series colors
                },
                offsetY: 3,
            },
            series: [{
                data: newSeries
            }]
        });
        // console.log('topPerformingPropertiesChart',newSeries)

        setTimeout(() => {
            topPerformingPropertiesChart.updateSeries([{
                data: newSeries
            }])
        }, 10);
    }

    function updateMarketCompetitorAnalysisChart(data) {
        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 => {
            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(vacancy);
        });

        // Update chart
        marketCompetitorAnalysisChart.updateOptions({
            colors: generateColors(5),
            chart: {
                type: 'bar',
                height: 400
            },
            xaxis: {
                categories: categories,
                title: { text: 'Properties' }
            },
            yaxis: [
                {
                    // Left Y-axis for asking rent
                    title: { text: 'Asking Rent ($/SF)' },
                    labels: {
                        formatter: function (value) {
                            return "$" + formatIfNumber(value);
                        }
                    }
                },
                {
                    // Second Y-axis for market rent (right side)
                    opposite: true,
                    title: { text: 'Market Rent ($/SF)' },
                    labels: {
                        formatter: function (value) {
                            return "$" + formatIfNumber(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' }
                }
            ],
            plotOptions: {
                bar: { horizontal: false, columnWidth: '50%' }
            },
            legend: { position: 'top' },
            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: true,
                style: { colors: ['#000000'] },
                offsetY: 10,
                formatter: function (val, opts) {
                    if (opts.seriesIndex === 2) {
                        return Math.round(val) + "%";   // no decimals
                    } else {
                        return "$" + Math.round(val);   // no decimals
                    }
                }
            }
        });

        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) {
        if (!data || Object.keys(data).length === 0) {
            topRevenueByPropertyChart.updateOptions({
                series: [100],
                labels: ['No data']
            });
            setTimeout(() => {
                topRevenueByPropertyChart.updateSeries([100]);
            }, 10);
            return;
        }

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

        Object.keys(data).forEach(property => {
            let new_prop_name = "";
            if (property.length > 15) {
                new_prop_name = property.substring(0, 15) + '...';
            } else {
                new_prop_name = property;
            }

            newSeries.push(data[property]['annual_base_rent'] ?? 0);
            newLabels.push(data[property]['occupancy_percent'] ? (new_prop_name + " (Occupied: " + data[property]['occupancy_percent'] + "%)") : "");
        })

        topRevenueByPropertyChart.updateOptions({
            xaxis: {
                categories: newLabels,
                title: { text: 'properties' },
            },
            series: [{
                name: 'Annual Rent',
                data: newSeries
            }],
            yaxis: {
                title: { text: 'Revenue' },
                labels: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return '$' + val;
                    }
                }
            },
            plotOptions: {
                bar: {
                    distributed: true, // This enables different colors for each bar
                }
            }, legend: {
                show: false
            },
            colors: generateColors(newSeries.length),
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    // Hide 0, show others
                    if (val === 0) {
                        return "$0";
                    } else {
                        val = formatIfNumber(val);
                        return '$' + val;
                    }
                },
                style: {
                    colors: ['#000000'] // per series colors
                },
                offsetY: 3,
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return '$' + val;
                    }
                }
            }
        });
    }

    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]}`);
            })
            newSeries.push({
                name: property,
                data: temp_array
            });
        });

        totalUnitSoldChart.updateOptions({
            xaxis: {
                categories: newLabels,
                title: { text: 'Timeline' },
            },
            yaxis: {
                title: { text: 'Unit/ Space Sold' },
                labels: {
                    formatter: function (val) {
                        return Number.isInteger(val) ? val : '';
                    }
                },
                tickAmount: 5  // Optional: Adjust for better spacing
            },
            series: newSeries,
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    // Hide 0, show others
                    return val === 0 ? "" : val;
                },
                style: {
                    colors: ['#000000'] // per series colors
                },
                offsetY: 3,
            }
        });
        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 = [];
        const newLabels = [];

        Object.keys(data).forEach(property => {
            newSeries.push(data[property]['avg_rent_per_sf'] ?? 0);
            newLabels.push(property);
        })

        avgRentPerSFChart.updateOptions({
            xaxis: {
                categories: newLabels,
                title: { text: 'Properties' },
            },
            yaxis: {
                title: { text: 'Rent/SF' },
                labels: {
                    formatter: function (val) {
                        return '$' + val; // add % in the label
                    }
                }
            },
            series: [{
                name: 'Avg Rent per',
                data: newSeries
            }],
            plotOptions: {
                bar: {
                    distributed: true, // This enables different colors for each bar
                }
            },
            legend: {
                show: false
            },
            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
                },
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return '$' + val; // add % in tooltip
                    }
                }
            }
        });
    }

    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(`${val.year} ${monthNames[val.month - 1]}`);
            })
            newSeries.push({
                name: property,
                data: temp_array
            });
        });
        portfolioWideOccupancyTrendsChart.updateOptions({
            xaxis: {
                categories: newLabels, // The labels for the x-axis
                title: { text: 'Properties' },
            },
            yaxis: {
                title: { text: 'Occupancy %' },
                labels: {
                    formatter: function (val) {
                        val = formatIfNumber(val);
                        return val + '%'; // add % in the label
                    }
                }
            },
            series: newSeries
        });

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

    expirationChart.render();
    industryMixChart.render();
    revenueByTenantChart.render();
    noiChart.render();
    topPerformingPropertiesChart.render();
    topRevenueByPropertyChart.render();
    totalUnitSoldChart.render();
    avgRentPerSFChart.render();
    portfolioWideOccupancyTrendsChart.render();
    marketCompetitorAnalysisChart.render();

    @if ($property_count > 0)
        setTimeout(() => {
            sendDashboardRequest();
        }, 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;
    }

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

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