@extends('user.layouts.template')

@section('style')
    <style>
        /*----Floorplan zoom---*/

        /* Thumbnail image */
        .thumbnail {
            width: 300px;
            cursor: pointer;
            transition: 0.3s;
        }

        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 10000000 !important;
            padding-top: 60px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
        }

        .modal-content {
            display: block;
            margin: auto;
            max-width: 90%;
            max-height: 80%;
            animation: zoom 0.3s;
        }

        @keyframes zoom {
            from {
                transform: scale(0.7);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .close {
            position: absolute;
            top: 30px;
            right: 40px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }



        i#openFullscreen {
            font-size: 26px;
            color: #353535;
            text-decoration: none !important;
        }

        a.fullscreen-build.mx-2 {
            text-decoration: none;
        }

        .offcanvas.offcanvas-end {
            width: 700px !important;
        }

        .form-label {
            margin-bottom: 0px;
            color: var(--bs-emphasis-color);
            font-size: 14px;
        }

        .sidebar-icons {
            width: 40px;
        }

        .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: none;
        }

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

        #_dm-customWizardSteps {
            width: 100%;
        }

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

        #_dm-customWizardSteps a {
            display: grid;
            align-items: center;
            padding: 5px;
            text-align: center;

        }

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

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


        #_dm-customWizardSteps {
            width: 100%;
            background: #dadce13a;
            padding: 10px;
            height: fit-content;
            justify-content: center !important;
        }

        #_dm-customWizardSteps a span {
            padding: 5px;
        }

        #_dm-customWizardSteps {
            width: 100%;
            background: #dadce13a;
            padding: 10px;

        }

        .add-item {
            display: flex;
            align-items: center;
        }


        .big-icon {
            font-size: 30px;
            /* Change this to your desired size */
            margin-left: 5px;
        }

        .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('user/assets/img/Vector-bg.png') !important;

        }

        /* .tm--expanded-hd .content__header,
                                                                                      .tm--tall-hd .content__header::before {

                                                                                        background-color: var(--nf-header-bg); 
                                                                                      } */

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

        .card-body {
            padding: 30px !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;
        }

        /* .form-content-wizard {
                                                                                    width: 100%;
                                                                                    z-index: -1!important;
                                                                                } */

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

    <style>
        #modalWindow {
            position: absolute;
            width: 400px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            resize: both;
            min-width: 200px;
            min-height: 150px;
            overflow: hidden;
            cursor: default;
        }

        #modalWindow.fullscreen {
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            margin: 0;
            border-radius: 0;
        }

        .headerone {
            background-color: var(--nf-header-bg);
            color: white;
            padding: 10px;
            display: flex;
            justify-content: end;
            align-items: center;
            cursor: move;
        }

        .controlBtn {
            background: transparent;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
        }

        #modalBody {
            padding: 20px;
            font-size: 14px;
            height: calc(100% - 40px);
            /* Subtract header height */
            overflow: auto;
        }

        /* Minimized style */
        .minimized {
            display: none;
        }

        .modal-content {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            color: #1a1d21b7 !important;
            pointer-events: auto;
            background-color: var(--bs-modal-bg);
            background-clip: padding-box;
            border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
            border-radius: var(--bs-modal-border-radius);
            box-shadow: var(--bs-modal-box-shadow);
            outline: 0;
        }

        .backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            /* black semi-transparent */
            display: none;
            /* hidden by default */
            z-index: 999;
            /* make sure it's behind modal */
        }

        #modalWindow {
            position: fixed;
            z-index: 1000;
            /* above backdrop */
        }

        .mn--min header .header__inner .brand-wrap .logo-sm {
            display: block;
        }

        .mn--max header .header__inner .brand-wrap .logo-sm {
            display: none;
        }

        .mn--max .header__brand {
            padding: 5px;
        }

        .modal-backdrop.fade.show {
            background: transparent !important;
            display: none !important;
        }


        /*---Stacking Plan----*/



        .select-property {
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
            padding: 6px 20px;
            background: white;
            border-radius: 5px;
            position: relative;
            top: -10px;
            right: 40px;
            width: 104%;

        }

        .select-property::before {
            content: "";
            position: absolute;
            top: 10px;
            left: 0px;
            width: 5px;
            height: 50%;
            background-color: var(--nf-header-bg);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;

        }

        .select-property form select {
            width: 400px !important;
        }


        /*--Quick Glance---*/

        .quick {
            border-radius: 15px 15px 0px 0px;
            padding: 5px 80px;
            cursor: none;

        }

        .pro-details {
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            background: white;
            border-radius: 10px;
            width: 70%;
            align-items: center;
        }

        .quick-content {
            position: relative;
            top: 0px;
            padding: 20px;
            background: white;
            margin-bottom: 10px;
            border-radius: 10px;
            overflow: hidden;
            width: 100%;
        }

        .quick-box {
            position: relative;
        }


        .quick-box::before {
            content: "";
            position: absolute;
            top: 0;
            left: 10px;
            width: 5px;
            height: 100%;
            background-color: var(--nf-header-bg);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;

        }

        .left-icon-cont {
            padding-right: 0px !important;
            padding-left: 30px !important;
        }

        .left-icon-cont p {
            font-size: 12px;
            font-weight: 400;
            margin-bottom: 5px !important;
        }

        .left-icon-cont h3 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 0px !important;
        }

        .property-img {
            width: 300px !important;
        }

        .filter-select {
            width: 300px;
            position: relative;
            left: 10px;
        }

        .pro-temp-btn {
            color: white;
        }

        .pro-temp-btn:hover {
            color: white;
        }


        /*-----Stacking plan----*/


        .building {
            display: flex;
            flex-direction: column-reverse;
            /* Stack from bottom to top */
            align-items: center;
            width: 100%;
            margin: 20px auto;
        }

        .floor-arrow {
            display: flex;
            flex-direction: column-reverse;
            /* Stack from bottom to top */
            padding-bottom: 60px;
        }

        .floor {
            width: 100%;
            height: 70px;
            color: black;
            font-size: 15px;
            font-weight: 500;
            line-height: 1;
            text-align: center;
            border: 2px solid #fff;
            padding-top: 10px;
            cursor: pointer;
            display: grid;
            align-items: center;
            padding-bottom: 3px !important;
            border-radius: 8px;

        }

        #basement {
            background-color: #555;
            width: 100%;
            color: #dddddd;
        }

        #top-floor {
            background-color: #bbb;
        }

        /* Middle floors side-by-side */
        .middle-floors {
            display: flex;
            width: 100%;
            gap: 0px;
            /* Space between the two middle floors */
        }

        .middle-floors-one {
            display: flex;
            width: 80%;
            gap: 0px;
            /* Space between the two middle floors */
        }


        .middle-floors-two {
            display: flex;
            width: 70%;
            gap: 0px;
            /* Space between the two middle floors */
        }

        .middle-floors-three {
            display: flex;
            width: 50%;
            gap: 0px;
            /* Space between the two middle floors */
        }

        .middle-floors-four {
            display: flex;
            width: 40%;
            gap: 0px;
        }

        #middle-floor-1,
        #middle-floor-2 {
            flex: 1;
            height: 80px;
        }


        .floor-sub {
            font-size: 10px;
            margin-top: -15px;
        }



        /*-----Suit button details offcanvas----*/

        .offcanvas.offcanvas-end {
            width: 700px;

        }

        .user-img {
            font-size: 14px;
            padding: 5px;
            color: black;
            text-align: center;
            width: 40px;
            height: 30px;
            background-color: lightgray;
            clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
            margin-bottom: 0px;
        }

        .floor-arrow {
            position: absolute;
            top: 118px;
            right: 20px;
            /* Adjust as needed */
        }

        .left-icon .left-icon-cont h3 {
            font-size: 12px !important;
        }

        .floor-sub-text {
            font-size: 14px !important;
        }

        .parameter-head {
            font-size: 36px !important;
            padding-top: 20px;
        }

        /*----Image Zoom---*/
        .img-zoom-container {
            position: relative;
        }

        .img-zoom-lens {
            position: absolute;
            border: 1px solid #d4d4d4;
            /*set the size of the lens:*/
            width: 40px;
            height: 40px;
        }

        .img-zoom-result {
            border: 1px solid #d4d4d4;
            /*set the size of the result div:*/
            width: 300px;
            height: 200px;
            position: absolute;
            top: 0px;
            left: 50%
        }


        #myresult {
            opacity: 0;
        }



        .img-zoom-container:hover #myresult {
            opacity: 1;
            position: absolute;
            top: 0px;
            left: 50%
        }

        #planf6-myresult {
            opacity: 0;
        }

        .img-zoom-container:hover #planf6-myresult {
            opacity: 1;
            position: absolute;
            top: 0px;
            left: 50%
        }

        .f-btns {
            cursor: pointer;
            height: 70px;
        }

        .container-sticky {
            overflow-y: scroll;
        }

        div#property-sticky-one {
            position: sticky;
            top: 50px;
            z-index: 1000;
            /* background: #f9f9fcbe !important; */
            margin: 0px 1px;
            border-radius: 5px;

        }

        div#f-top-btn {
            position: sticky;
            top: 115px;
            z-index: 999;
            background: white !important;
            margin: 0px 1px;
        }

        /*---Zoomin -zoomout---*/

        .building-header {
            padding: 10px;
        }

        .building-header-right {
            position: relative;
            right: 190px;
        }

        .fullscreen-build {
            padding-top: 5px;
            position: relative;
            top: 5px;
            cursor: pointer;
        }


        /* Zoom buttons (hidden by default) */
        .zoom-controls {
            display: none;
            /* Initially hidden */
            position: sticky;
            top: 30px;
            left: 60px;

        }

        /* Fullscreen container */

        #fullscreenDiv:fullscreen {
            width: 100vw;
            height: 100vh;
            overflow: auto;
            /* Allow scrolling in fullscreen */
            background: white;
        }

        .tenant-box {
            display: flex;
            justify-content: space-between;
            border: 1px solid rgba(128, 128, 128, 0.429);
            border-radius: 10px;
            padding: 10px 10px;
            margin-bottom: 10px;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        }

        .tenant-icon-cont img {
            width: 26px;

        }

        .car-bod {
            padding: 0px !important;
        }


        .parking_and_basement {
            background: #CDB3D5;
            transition: all 0.3s ease;
        }

        .parking_and_basement#PENTHOUSE {
            background: #A888B5;
            transition: all 0.3s ease;
        }

        .common {
            background: #A6C7EA;
            transition: all 0.3s ease;
        }

        .common.zoomed {
            transform: scale(1.05);
        }

        .available {
            background: #FEBD7D;
            transition: all 0.3s ease;
        }

        .occupied {
            background: #BBDCAD;
            transition: all 0.3s ease;
        }

        .vacant {
            background: #F59598;
            transition: all 0.3s ease;
        }


        .zoomed {
            transform: scale(1.01);
        }


        /*----Expand Thumbnail---*/

        .thumbnail {
            width: 100% !important;
            height: 100%;
            cursor: pointer;
            transition: 0.3s;
        }

        .floor-thumb {
            width: 300px;
            cursor: pointer;
            transition: 0.3s;
            position: relative !important;
            top: 0px !important;
        }

        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            padding-top: 60px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
        }

        .modal-content {
            display: block;
            margin: auto;
            max-width: 60%;
            max-height: 80%;
            animation: zoom 0.3s;
        }

        @keyframes zoom {
            from {
                transform: scale(0.7);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .close {
            position: absolute;
            top: 40px;
            right: 40px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }

        .select-form {
            width: 100px !important;
        }

        .dropdown-menu {
            width: 100%;
            max-width: 900px;
            padding: 20px;
        }

        .range-filter {
            width: 300px;
            text-align: left;
            color: #353535;
            background: white;
        }

        .range-filter:hover {
            width: 300px;
            text-align: left;
            color: #353535;
            background: white;
        }
    </style>

    {{-- my own styles --}}
    <style>
        .user-img {
            padding: 5px 8px 5px 15px;
            max-width: fit-content;
            min-width: 40px;
            width: unset;
        }

        .select-property form select,
        #property_select {
            width: 400px !important;
        }

        .swal2-container.swal2-center.swal2-backdrop-show {
            z-index: 9999999;
        }

        .filter-option .btn.selected {
            box-shadow: 0 0 0px 4px #ff8d51 !important;
        }

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

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

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

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

        .expand {
            height: 165px;
            width: 330px;
        }


        .expand .thumbnail {
            width: 100% !important;
            height: 120%;
            cursor: pointer;
            transition: 0.3s;
            object-fit: cover;
            position: relative;
            top: -30px;
        }

        .modal-content {
            display: block;
            margin: 5% auto 0px;
            max-width: 60%;
            max-height: 80%;
            animation: zoom 0.3s;
            object-fit: cover;
        }
    </style>
@endsection

@section('content')
    <div class="content__boxed">
        <div class="content__wrap">

            <!--===========Select Property============-->
            <div class="row">

                <div class="col-lg-4 col-md-4 col-4">
                    <h1 class="page-title mb-0 mt-0 py-0 pb-0 property_name" style="font-size:28px;width: 370px;">Property
                        ABC</h1>
                </div>

                <div class="col-lg-8 col-md-8 col-8">
                    <div class="Select-box py-0">
                        <div class="select-property">
                            <div class="d-flex w-100 justify-content-between align-items-center">

                                <label for="p-type" class="form-label">Select Property
                                </label>

                                <select class="form-select select-form" id="property_select"
                                    aria-label="Default select example">
                                    <option selected disabled>Select Property</option>
                                    @foreach ($properties as $property)
                                        <option value="{{ $property->id }}" {{ !empty($property_id) && $property->id == $property_id ? 'selected' : '' }}>{{ $property->name }}</option>
                                    @endforeach
                                </select>

                                <button class="btn btn-success" onclick="loadPropertyDetails()">Show Plan</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--=============property header==========-->
            <div class="row" id="property-sticky-one">
                <div class="col-12">
                    <div class="page-title-box d-flex py-3 stic justify-content-end">

                        <div class="sticky-one" id="sticky">
                            <ol class="breadcrumb mb-0">
                                <a href="#!" class="btn btn-success mx-2 border-white">
                                    Template A</a>
                                <a href="#!" class="btn btn-success mx-2 border-white">Template B</a>
                                <a href="#!" class="btn btn-success border-white">Template C</a>
                            </ol>
                        </div>

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

            <!--=============property header==========-->
            <div class="row">
                <div class="col-12 col-lg-12 col-md-12 ">
                    <div class="property-plan-details p-0 d-flex justify-content-between">

                        <div class="expand">
                            <img src="" class="rounded-2 property-img text-left img-fluid thumbnail" style="display: none;"
                                id="property_image" />
                        </div>

                        <!-- Modal Popup -->
                        <div id="imageModal" class="modal">
                            <span class="close">&times;</span>
                            <img class="modal-content" id="modalImage">
                        </div>


                        <div class="pro-details">

                            <div class="ico-box mb-0">
                                <div class="card-one img-bo p-0">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="quick-content mb-0">
                                            <div class="tab-pane active show" id="basictab1" role="tabpanel">
                                                <div class="row">
                                                    <div class="col-lg-3">
                                                        <div class="quick-box">
                                                            <div class="left-icon-cont">
                                                                <p class="mb-1 text-muted">Location</p>
                                                                <h3 class="mb-0" id="location">-</h3>
                                                            </div>
                                                        </div>
                                                    </div> <!-- end col -->

                                                    <div class="col-lg-3">
                                                        <div class="quick-box">
                                                            <div class="left-icon-cont">
                                                                <p class="mb-1 text-muted">Total sf</p>
                                                                <h3 class="mb-0"><span id="total_sf">0</span> sf</h3>
                                                            </div>
                                                        </div>
                                                    </div> <!-- end col -->
                                                    <div class="col-lg-3">
                                                        <div class="quick-box">
                                                            <div class="left-icon-cont">
                                                                <p class="mb-1 text-muted">Vacant sf</p>
                                                                <h3 class="mb-0"><span id="vacant_sf_percentage">0</span>% |
                                                                    <span id="total_vacent_sf">0</span> sf
                                                                </h3>
                                                            </div>
                                                        </div>
                                                    </div> <!-- end col -->
                                                    <div class="col-lg-3">
                                                        <div class="quick-box">
                                                            <div class="left-icon-cont">
                                                                <p class="mb-1 text-muted">Occupancy</p>
                                                                <h3 class="mb-0"><span id="leased_sf_percentage">0</span>% |
                                                                    <span id="total_occupancy_sf">0</span> sf
                                                                </h3>
                                                            </div>
                                                        </div>
                                                    </div> <!-- end col -->
                                                </div> <!-- end row -->
                                            </div><!-- end tab-pane -->
                                        </div> <!-- tab-content -->
                                    </div>
                                </div>
                            </div>
                            <div class="ico-box mb-0">
                                <div class="card-one img-bo p-0">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="quick-content mb-0">
                                            <div class="tab-pane active show" id="basictab1" role="tabpanel">
                                                <div class="row">

                                                    <div class="col-lg-3">
                                                        <div class="quick-box">
                                                            <div class="left-icon-cont">
                                                                <p class="mb-1 text-muted">Floors </p>
                                                                <h3 class="mb-0" id="no_of_floors">0</h3>
                                                            </div>
                                                        </div>
                                                    </div> <!-- end col -->

                                                    <div class="col-lg-3">
                                                        <div class="quick-box">
                                                            <div class="left-icon-cont">
                                                                <p class="mb-1 text-muted">Total Income</p>
                                                                <h3 class="mb-0">$ <span id="total_income">0</span></h3>
                                                            </div>
                                                        </div>
                                                    </div> <!-- end col -->

                                                    <div class="col-lg-3">
                                                        <div class="quick-box">
                                                            <div class="left-icon-cont">
                                                                <p class="mb-1 text-muted">Average Rent per sf</p>
                                                                <h3 class="mb-0">$ <span id="average_rent_per_sf">0</span>
                                                                </h3>
                                                            </div>
                                                        </div>
                                                    </div> <!-- end col -->

                                                    <div class="col-lg-3">
                                                        <div class="quick-box">
                                                            <div class="left-icon-cont">
                                                                <p class="mb-1 text-muted">Expirations < 12 Months</p>
                                                                        <h3 class="mb-0" id="exp_after_12months">0</h3>
                                                            </div>
                                                        </div>
                                                    </div> <!-- end col -->
                                                </div> <!-- end row -->
                                            </div><!-- end tab-pane -->
                                        </div> <!-- tab-content -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ========== Page Title End ========== -->
            <div class="row py-3">
                <div class="col-12">
                    <div class="card" class="propertywizard">
                        <div class="card-body p-0 car-bod">
                            <div class="mb-0">

                                <div class="row" id="f-top-btn">
                                    <div class="col-12">
                                        <div class="Select-box py-3">
                                            <div class="filter-property">
                                                <form class="d-flex w-100 ms-auto">
                                                    <div class="filter-option d-flex align-items-center">
                                                        <button type="button" class="first_exp_year btn btn-success  mx-1"
                                                            onclick="renderCustomExpYear(2025,event)">2025</button>
                                                        <button type="button" class="btn btn-success mx-1"
                                                            onclick="renderCustomExpYear(2026,event)">2026</button>
                                                        <button type="button" class="btn btn-success mx-1"
                                                            onclick="renderCustomExpYear(2027,event)">2027</button>
                                                        <button type="button" class="btn btn-success mx-1"
                                                            onclick="renderCustomExpYear(2028,event)">2028</button>
                                                        <button type="button" class="btn btn-success mx-1">Export
                                                            PDF</button>
                                                    </div>
                                                    <div class="select-pro-btn ms-auto">
                                                        <a onclick="openFullscreen();" class="fullscreen-build mx-2">

                                                            <i class="ri-fullscreen-fill fs-28 fullscreen"
                                                                id="openFullscreen"></i>
                                                            <a href="#" class="btn pro-temp-btn"
                                                                style="background: #BBDCAD;color:black;font-weight: 600;"
                                                                onmouseover="changeColor(['occupied'],'#5cc184','white')"
                                                                onmouseout="resetColor(['occupied'])">Occupied</a>
                                                            <a href="#" class="btn pro-temp-btn"
                                                                style="background: #F59598;color:black;font-weight: 600;"
                                                                onmouseover="changeColor(['vacant'],'#5cc184','white')"
                                                                onmouseout="resetColor(['vacant'])">Vacant</a>
                                                            <a href="#" class="btn pro-temp-btn"
                                                                style="background: #FEBD7D;color:black;font-weight: 600;"
                                                                onmouseover="changeColor(['available'],'#5cc184','white')"
                                                                onmouseout="resetColor(['available'])">Expirations</a>
                                                            <a href="#" class="btn pro-temp-btn"
                                                                style="background:#A6C7EA;color:black;font-weight: 600;"
                                                                onmouseover="changeColor(['common'],'#5cc184','white')"
                                                                onmouseout="resetColor(['common'])">Booked/Lease Signed </a>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row py-2">
                                    <div class="col-lg-10 col-md-8 ms-1">
                                        <div id="fullscreenDiv">
                                            <!-- Zoom Controls (Initially hidden) -->
                                            <div class="zoom-controls">
                                                <a class="btn btn-success mx-2" id="zoomIn-full"><i
                                                        class="ri-zoom-in-line"></i></a>
                                                <a class="btn btn-success" id="zoomOut-full"><i
                                                        class="ri-zoom-out-line"></i></a>
                                                <!-- <button class="btn" id="resetZoom">?? Reset</button> -->
                                            </div>



                                            <!-- Content wrapper (we zoom this) -->
                                            <div class="building" id="building-suite">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-0">
                                        <div class="floor-arrow" id="floor-arrow">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end card body -->
                    </div> <!-- end card -->
                </div>
                <!-- End Container Fluid -->

                <!----Floor Details---->
                <div class="floor-btn-details">

                    <div class="offcanvas offcanvas-end" tabindex="-1" id="floor-details">
                        <div class="offcanvas-header">

                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                        </div>
                        <div class="offcanvas-body">
                            <div class="suite-602-content d-flex justify-content-between">

                                <h4 class="mb-0 fw-semibold property_name">Property ABC</h4>

                            </div>



                            <div class="row py-3">

                                <div class="col-lg-4">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Floor Number</p>
                                            <h3 class="mb-0" id="floor_no">0</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                                <div class="col-lg-4">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Total Rentable SF per Floor</p>
                                            <h3 class="mb-0"><span id="total_rentable_sf">0</span> sf</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                                <div class="col-lg-4">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Total Vacant Rentable SF per Floor</p>
                                            <h3 class="mb-0"><span id="total_vacent_rentable_sf">0</span> sf</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->

                            </div> <!-- end row -->

                            <div class="row py-2">

                            </div> <!-- end row -->

                            <div class="row py-3">

                            </div> <!-- end row -->

                            <div class="row py-2">

                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <h3 class="mb-0">Floor Plan</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                            </div> <!-- end row -->


                            <div class="row py-0" id="images_container">
                            </div>

                        </div>


                    </div>

                </div>

                <!---Suite Details-->
                <div class="suit-btn-details">

                    <div class="offcanvas offcanvas-end" tabindex="-1" id="suit-details">
                        <div class="offcanvas-header">

                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                        </div>
                        <div class="offcanvas-body">
                            <div class="suite-602-content d-flex justify-content-between">

                                <h4 class="mb-0 fw-semibold property_name">Property ABC</h4>

                            </div>

                            <div class="row py-4">
                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Floor No.</p>
                                            <h3 class="mb-0" id="su_floor_no">N/A</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->

                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Lease Start Date</p>
                                            <h3 class="mb-0" id="su_lease_start_date">16/05/2025</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Lease End Date</p>
                                            <h3 class="mb-0" id="su_lease_end_date">16/05/2035</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Renewal (Yes/No):</p>
                                            <h3 class="mb-0" id="su_renewal"></h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                            </div>

                            <div class="row py-4 su_renewal_period">
                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Renewal period</p>
                                            <h3 class="mb-0" id="su_renewal_period"></h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                            </div>
                            <div class="row py-4">

                                <div class="col-lg-3 rent_per_sf">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Rent per SF</p>
                                            <h3 class="mb-0" id="su_rena_per_sf">$30000</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Suite Status</p>
                                            <h3 class="mb-0" id="su_lease_status">Available</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->

                                <div class="col-lg-3 no_of_tours_conducted">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Number of Tours Conducted</p>
                                            <h3 class="mb-0" id="su_no_of_tour_conducted">- / -</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                                <div class="col-lg-3 asking_rent_in_sf">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Asking Rent per SF</p>
                                            <h3 class="mb-0">$ <span id="su_asking_rent_per_sf">0</span></h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Total Annual Rent</p>
                                            <h3 class="mb-0">$ <span id="su_total_annual_rent">0</span></h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                            </div>

                            <div class="row py-4">

                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Tenant Name</p>
                                            <h3 class="mb-0" id="ten_name">John</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->

                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Suite No</p>
                                            <h3 class="mb-0" id="su_no">602</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Current Lease Status</p>
                                            <h3 class="mb-0" id="ten_lease_status">Available</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                                <div class="col-lg-3">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <p class="mb-1 text-muted">Lease Signed</p>
                                            <h3 class="mb-0" id="ten_lease_signed">Yes</h3>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                            </div>

                            <div class="row py-4">
                                <div class="col-lg-12">
                                    <div class="quick-box">
                                        <div class="left-icon-cont">
                                            <h3 class="mb-0">Suite Images</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="suite_details_images" class="position-relative row"></div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

    const header = document.getElementById("property-sticky-one");

    window.addEventListener("scroll", () => {
        if (window.scrollY > 50) {
            header.style.backgroundColor = "var(--nf-header-bg)";
            //    header.style.backgroundColor = "var(--nf-header-bg)";
            header.style.padding = "0px 10px";
        } else {
            header.style.backgroundColor = "transparent";
            header.style.padding = "0px 10px";
        }
    });


</script>

<script>
    function changeColor(classNames, bgColor, borderColor) {
        classNames.forEach(function (className) {
            document.querySelectorAll(`.${className}`).forEach(function (el) {
                el.style.backgroundColor = bgColor;
                el.style.borderColor = borderColor;
                el.classList.add('zoomed');
            });
        });
    }

    function resetColor(classNames) {
        classNames.forEach(function (className) {
            document.querySelectorAll(`.${className}`).forEach(function (el) {
                el.style.backgroundColor = '';
                el.style.borderColor = '';
                el.classList.remove('zoomed');
            });
        });
    }
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        let scaleLevel = 1; // Normal size
        const box = document.getElementById("building-suite");

        if (document.getElementById("zoomIn")) {
            document.getElementById("zoomIn").addEventListener("click", function () {
                if (scaleLevel < 1) { // Max zoom in (2x)
                    scaleLevel += 0.1;
                    box.style.transform = "scale(" + scaleLevel + ")";
                }
            });
        }

        if (document.getElementById("zoomOut")) {
            document.getElementById("zoomOut").addEventListener("click", function () {
                if (scaleLevel > 0.5) { // Prevent shrinking smaller than normal
                    scaleLevel -= 0.1;
                    box.style.transform = "scale(" + scaleLevel + ")";
                }
            });
        }
    });
</script>

<script>
    $(document).ready(function () {
        $("#toggle-floors").click(function () {
            $(".floor").slideToggle(); // Toggle visibility of floors
        });
    });

</script>

<script>
    var fullscreenDiv = $("#fullscreenDiv");
    var contentWrapper = $("#building-suite"); // Apply zoom here
    var zoomControls = $(".zoom-controls");
    var scale = 1;

    // Open div in fullscreen
    $("#openFullscreen").click(function () {
        if (fullscreenDiv[0].requestFullscreen) {
            fullscreenDiv[0].requestFullscreen();
        } else if (fullscreenDiv[0].webkitRequestFullscreen) { /* Safari */
            fullscreenDiv[0].webkitRequestFullscreen();
        } else if (fullscreenDiv[0].msRequestFullscreen) { /* IE11 */
            fullscreenDiv[0].msRequestFullscreen();
        }
    });

    // Zoom In
    $("#zoomIn-full").click(function () {
        if (scale < 1) {
            scale += 0.1;
            contentWrapper.css("transform", "scale(" + scale + ")");
        }
    });

    // Zoom Out
    $("#zoomOut-full").click(function () {
        if (scale > 0.5) {
            scale -= 0.1;
            contentWrapper.css("transform", "scale(" + scale + ")");
        }
    });

    // Reset Zoom
    $("#resetZoom").click(function () {
        scale = 1;
        contentWrapper.css("transform", "scale(1)");
    });

    // Show/hide zoom buttons in fullscreen
    function toggleZoomButtons() {
        if (document.fullscreenElement || document.webkitFullscreenElement) {
            zoomControls.show(); // Show in fullscreen
        } else {
            zoomControls.hide(); // Hide when exiting
            scale = 1; // Reset zoom
            contentWrapper.css("transform", "scale(1)");
        }
    }

    // Listen for fullscreen change event
    $(document).on("fullscreenchange webkitfullscreenchange", toggleZoomButtons);
</script>

<script>
    $(document).ready(function () {
        $('.pro-temp-btn').click(function (e) {
            e.preventDefault();

            // Get the target class from data-target
            const targetClass = $(this).data('target');

            if (targetClass) {
                $('.suite').removeClass('highlight dim');
                $('.suite').each(function () {
                    if ($(this).hasClass(targetClass)) {
                        $(this).addClass('highlight');
                    } else {
                        $(this).addClass('dim');
                    }
                });
            }
        });

        $('#clearFilter').click(function () {
            $('.suite').removeClass('highlight dim');
        });
    });
</script>

<!----Expand thumbnail-->
<script>
    $(document).on("click", ".thumbnail, .close, #imageModal", function () {
        if ($(this).attr('id') === 'imageModal' || $(this).hasClass('close')) {
            if (e.target.id === 'imageModal' || e.target.className === 'close') {
                $('#imageModal').fadeOut();
            }
        } else {
            $('#modalImage').attr('src', $(this).attr('src'));
            $('#imageModal').fadeIn();
        }
    });

</script>


<!---Floor Plan Zoom----->
<script>
    $(document).ready(function () {
        $('.thumbnail').click(function () {
            $('#modalImage').attr('src', $(this).attr('src'));
            $('#imageModal').fadeIn();
        });

        $('.close, #imageModal').click(function (e) {
            if (e.target.id === 'imageModal' || e.target.className === 'close') {
                $('#imageModal').fadeOut();
            }
        });
    });

</script>

{{-- my own code --}}
<script>
    var latest_data = null;

    function loadPropertyDetails() {
        let value = $('#property_select').val();
        if (value == '' || value == null || value == undefined) {
            Swal.fire("Please select a property first!");
            return;
        }

        $.post({
            url: "{{ route('StackingPlanPropDetails') }}",
            data: {
                property_id: 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);
                if (response.success && response.data.id) {
                    renderSuite(response.data);
                    latest_data = response.data;
                } else {
                    Swal.fire("Can't find property !");
                }
            }, error(xhr, status, error) {
                Swal.fire("Error while fetching property details");
                console.log(error);
            }
        })
    }

    function renderSuite(prop, year = null) {
        $('.property_name').html(prop.name);
        $('#location').html(`${prop.state}, ${prop.city}`);
        $('#no_of_floors').html(prop.no_of_floors);
        if (prop.image && prop.image != 'null' && prop.image != 'undefined') {
            $('.property-img').attr('src', 'storage/' + prop.image);
            $('#property_image').show();
        } else {
            $('#property_image').hide();
        }

        $('#building-suite').html('');
        $('#floor-arrow').html('');

        const today = new Date();
        if (year !== null) {
            today.setFullYear(year);
        } else {
            $('.filter-option .btn').removeClass('selected');
            $('.first_exp_year').addClass('selected');
        }

        let exp_after_12months = 0;
        let totalPropertyRentableSpace = 0;
        let total_income = 0;
        let total_sf = 0;
        let total_vacent_sf = 0;
        let total_vacent_count = 0;
        let total_occupancy_sf = 0;
        let total_occupancy_count = 0;
        let total_rate_per_sf = 0;
        let rate_per_sf_count = 0;
        let total_suite_counts = 0;

        if (prop.no_of_parking > 0 && prop.no_of_parking != null) {
            for (let i = prop.no_of_parking; i > 0; i--) {
                $('#building-suite').append(`<div class="floor parking_and_basement h6 mb-0" id="PARKING">P${i}</div>`);
            }
        }

        if (prop.no_of_basement > 0 && prop.no_of_basement != null) {
            for (let i = 1; i <= prop.no_of_basement; i++) {
                $('#building-suite').append(`<div class="floor parking_and_basement h6 mb-0" id="BASEMENT">B${i}</div>`);
            }
        }

        prop.floors.map((content, index) => {

            let suite_template = ``;
            let total_sqft = 0;
            let vacent_sqft = 0;

            if (content.floor_type == 'Parking') {
                suite_template = `<div class="floor parking_and_basement h6 mb-0" id="PARKING">PARKING</div>`;
            } else {
                prop.suites.map(suite => {
                    if (suite.floor_id == content.id) {
                        total_rate_per_sf += parseFloat(suite.rate_per_sf) || 0;
                        rate_per_sf_count++;
                        totalPropertyRentableSpace += parseFloat(suite.total_rentable_sf);
                        total_income += parseFloat(suite.annual_base_rent) || 0;
                        total_sf += parseFloat(suite.total_rentable_sf) || 0;


                        total_suite_counts++;
                        if (suite.lease_status === 'Expiring Soon' || suite.lease_status === 'Occupied' || suite.lease_status === 'Booked/Lease Signed') {
                            total_occupancy_sf += parseFloat(suite.total_rentable_sf) || 0;
                            total_occupancy_count++;
                        } else {
                            total_vacent_sf += parseFloat(suite.total_rentable_sf) || 0;
                            total_vacent_count++;
                        }

                        let status = 'vacant';
                        if (suite.lease_status === 'Expiring Soon') {
                            status = 'occupied';
                        } else if (suite.lease_status == 'Available') {
                            status = 'vacant';
                        } else if (suite.lease_status == 'Booked/Lease Signed') {
                            status = 'common';
                        } else if (suite.lease_status == 'Occupied') {
                            status = 'occupied';
                        }

                        // checking for expiration in date and showing that in status
                        let expirationDate = "";
                        if (suite.lease_exp_date && suite.lease_exp_date !== null) {
                            const leaseDate = new Date(suite.lease_exp_date);

                            // Create a date exactly 1 year from today
                            const oneYearFromToday = new Date();
                            oneYearFromToday.setFullYear(today.getFullYear() + 1);

                            // Check if lease date is in the past or within 1 year from today
                            if (leaseDate <= today || leaseDate <= oneYearFromToday) {
                                status = 'available';
                                exp_after_12months++;
                            }

                            expirationDate = leaseDate.toLocaleDateString();
                        }


                        if (content.floor_type !== 'Penthouse') {
                        suite_template += `<div class="floor ${status}" onclick="showSuiteDetails(${suite.id}, '${content.floor_no}')" id="suit-${suite.suite_no}">
                                        <span class="mb-1 suite_no_styles">Suite ${suite.suite_no}</span>
                                        <span class="floor-sub">${suite.tenant_name ?? "-"}
                                            <br>
                                            ${suite.total_rentable_sf ?? "0"} sf 
                                            ${expirationDate !== "" ? "| Ex on: " + expirationDate : ""}
                                        </span>
                                        </div>`;
                        }
                        if (suite.total_rentable_sf !== null) {
                            total_sqft += parseFloat(suite.total_rentable_sf);
                        }
                        if (status === 'available' || status === 'vacant' && suite.total_rentable_sf !== null) {
                            // console.log(suite.lease_status)
                            vacent_sqft += parseFloat(suite.total_rentable_sf);
                        }
                    }
                });

                if(content.floor_type == 'Penthouse'){
                   suite_template = `<div class="floor parking_and_basement h6 mb-0" id="PENTHOUSE">PENTHOUSE</div>`; 
                }
            }

            if (suite_template == ``) {
                suite_template = `<div class="floor text-dark light">No Suite Found in Floor ${content.floor_no}</div>`;
            }

            $('#building-suite')
                .append(`<div class="middle-floors">${suite_template}</div>`);



            $('#floor-arrow').append(`
                            <div class="d-flex justify-content-between align-items-center text-start f-btns" onclick="showFloorDetails(${content.id})" >
                                <div class="left-icon d-flex p-1" data-bs-toggle="offcanvas" data-bs-target="#floor-right-602">
                                    <p class="user-img">${content.floor_no}</p>
                                    <div class="left-icon-cont px-3">
                                        <p class="mb-1 text-muted">${total_sqft} sf</p>
                                        <h3 class="mb-0">${vacent_sqft} Vacant sf</h3>
                                    </div>
                                </div>
                            </div>`);
        });
        if (year === null) {
            $('#exp_after_12months').html(exp_after_12months);
        }
        $('#total_sf').html(total_sf ?? "0");
        $('#total_occupancy_sf').html(total_occupancy_sf ?? "0");
        $('#total_vacent_sf').html(total_vacent_sf ?? "0");
        total_income = formatIfNumber(total_income);
        $('#total_income').html(total_income ?? "0");
        if (rate_per_sf_count !== 0 && total_rate_per_sf !== 0) {
            const average_rent_per_sf_percent = total_rate_per_sf / rate_per_sf_count ?? "0";
            $('#average_rent_per_sf').html(average_rent_per_sf_percent.toFixed(0));
        }

        if (total_suite_counts > 0 && total_occupancy_count > 0) {
            const leasedPercentage = (total_occupancy_count / total_suite_counts) * 100;
            $('#leased_sf_percentage').html(leasedPercentage.toFixed(0));
        }
        if (total_suite_counts > 0 && total_vacent_count > 0) {
            const vacantPercentage = (total_vacent_count / total_suite_counts) * 100;
            $('#vacant_sf_percentage').html(vacantPercentage.toFixed(0));
        }
        // } else {
        //     console.log("Rentable square footage must be greater than zero for calculations.");
        // }
    }

    function showFloorDetails(floorId) {
        // console.log(floorId)
        $.post({
            url: "{{ route('StackingfloorDetails') }}",
            data: {
                floor_id: floorId
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
            },
            success: function (response) {
                if (response.success) {
                    $('#floor_no').html(response.data.floor_no ?? "-");
                    $('#total_rentable_sf').html(response.data.total_rentable_sf ?? "-");
                    $('#total_vacent_rentable_sf').html(response.data.total_vacent_rentable_sf ?? "-");
                    $('#images_container').html("");
                    console.log(response.data.images)
                    if (response.data.images && response.data.images.length !== 0) {
                        response.data.images.map(img => {
                            $('#images_container').append(`<div class="gallery col-lg-6 col-md-12">
                                <img src="storage/${img.floor_plan}" alt="Zoom" class="thumbnail">
                            </div>`)
                        })
                    } else {
                        console.log('no images found')
                    }
                    var myOffcanvas = new bootstrap.Offcanvas(document.getElementById('floor-details'));
                    myOffcanvas.show();
                }
            }, error(xhr, status, error) {
                console.log(error);
            }
        });
    }

    function renderCustomExpYear(year, event) {
        console.log('custom year ', year);
        if (latest_data === null) {
            Swal.fire("Please Select and fetch a Property First");
        } else {
            $('.filter-option .btn').removeClass('selected');
            event.target.classList.add('selected');
            renderSuite(latest_data, year);
        }
    }

    function showSuiteDetails(suiteId, floor_no) {
        // console.log(floorId)
        $.post({
            url: "{{ route('StackingSuiteDetails') }}",
            data: {
                suite_id: suiteId
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
            },
            success: function (response) {
                console.log(response);
                console.log('floor_no', floor_no);
                if (response.success) {
                    $('#su_floor_no').html(floor_no);
                    $('#su_lease_start_date').html(response.data.lease_start_date ?? "-");
                    $('#su_lease_end_date').html(response.data.lease_exp_date ?? "-");

                    $('#su_renewal').html(response.data.renewal_option ?? "-");

                    if (response.data.renewal_option === 'Yes') {
                        $('.su_renewal_period').show();
                        $('#su_renewal_period').html(response.data.renewal_date ?? "-");
                    } else {
                        $('.su_renewal_period').hide();
                    }



                    $('#su_rena_per_sf').html(response.data.rate_per_sf ? response.data.rate_per_sf : "-");

                    $('#su_lease_status').html(response.data.lease_status ? response.data.lease_status : "-");

                    if (response.data.lease_status === 'Available') {
                        // $('.no_of_tours_conducted').show();
                        $('.rent_per_sf').hide();
                        $('.asking_rent_in_sf').show();
                    } else {
                        // $('.no_of_tours_conducted').hide();
                        $('.rent_per_sf').show();
                        $('.asking_rent_in_sf').hide();
                    }

                    let annual_base_rent = formatIfNumber(response.data.annual_base_rent)
                    $('#su_total_annual_rent').html(annual_base_rent);

                    $('#su_no_of_tour_conducted').html(response.data.no_of_tours ?? "-");

                    $('#su_asking_rent_per_sf').html(response.data.asking_rent_in_sf ? response.data.asking_rent_in_sf : "0");

                    $('#ten_name').html(response.data.tenant_name ?? "-");

                    $('#su_no').html(response.data.suite_no ?? "-");

                    $('#ten_lease_status').html(response.data.lease_status ?? "-");

                    $('#ten_lease_signed').html(response.data.leases_signed ?? "-");

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

                    if (response.data.images && response.data.images.length !== 0) {
                        let images = JSON.parse(response.data.images);
                        images.forEach(img => {
                            $('#suite_details_images').append(`<div class="gallery col-lg-6 col-md-12">
                                <img src="${img.path}" alt="Zoom" class="thumbnail">
                            </div>`);
                        });
                    } else {
                        console.log('no images found')
                    }
                    var myOffcanvas = new bootstrap.Offcanvas(document.getElementById('suit-details'));
                    myOffcanvas.show();
                } else {
                    Swal.fire("Can't find suite data !");
                }
            }, error(xhr, status, error) {
                Swal.fire("Can't find suite data !");
            }
        });
    }

    function formatIfNumber(value) {
        // Check for null, undefined, or empty string
        if (value === null || value === undefined || value === '') {
            return '0'; // Return '0' for null, undefined, or empty string
        }

        // Convert to number
        const number = Number(value);

        // Check if it's a valid number
        if (!isNaN(number)) {
            // Format with commas, no decimals
            return Math.round(number).toLocaleString('en-US', {
                maximumFractionDigits: 0
            });
        }

        // If not a number, return original
        return value;
    }

    @php
    if (isset($property_id) && !empty($property_id)) {
        echo "loadPropertyDetails();";
    }
    if (session() -> has("success")) {
        echo "alert('this is test')";
    }
    @endphp
</script>
<style>
    .custom_notification {
        display: none;
    }
</style>

@endsection