@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: 15px;
}

.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;
    border-radius: 5px;
    position: relative;
    top: -10px;
    right: 40px;
    width: 104%;
    background: var(--nf-mainnav-bg);
    color: var(--bs-heading-color) !important;

}

.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: var(--nf-mainnav-bg);
    color: var(--bs-heading-color) !important;
    border-radius: 10px;
    width: 70%;
    align-items: center;
}

.quick-content {
    position: relative;
    top: 0px;
    padding: 20px;
    background: var(--nf-mainnav-bg);
    color: var(--bs-heading-color) !important;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.quick-box {
    position: relative;
}


.quick-box::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 10px;
    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;

}

.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----*/

.ri-fullscreen-fill:before {
    background: var(--nf-mainnav-bg);
    color: var(--bs-heading-color) !important;
}

.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: #ABBCD6;
    width: 100%;
}

#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: 55px;
    z-index: 1000;
    /* background: #f9f9fcbe !important; */
    margin: 0px 1px;
    border-radius: 5px;

}

div#f-top-btn {
    position: sticky;
    top: 120px;
    z-index: 999;
    background: var(--nf-mainnav-bg);
    color: var(--bs-heading-color) !important;
    margin: 0px 1px;
}

.Select-box {
    position: relative;
    top: 5px;
}

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

.dim {
    filter: blur(2px);
    opacity: 0.7;
}

.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);
     opacity: 1;
    filter: blur(0px);

}


/*----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;
    background: var(--nf-mainnav-bg);
    color: var(--bs-heading-color) !important;
    font-size: 15px;
}

.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">
                            <div class="col-lg-3 py-4">
                                <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 py-4">
                                <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 py-4">
                                <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 py-4">
                                <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 py-4">
                                <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 py-4">
                                <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 py-4">
                                <div class="quick-box">
                                    <div class="left-icon-cont">
                                        <p class="mb-1 text-muted">Renewal</p>
                                        <h3 class="mb-0" id="su_renewal"></h3>
                                    </div>
                                </div>
                            </div> <!-- end col -->
                            <div class="col-lg-3 py-4 su_renewal_period">
                                <div class="quick-box">
                                    <div class="left-icon-cont">
                                        <p class="mb-1 text-muted">Renewal Date</p>
                                        <h3 class="mb-0" id="su_renewal_period"></h3>
                                    </div>
                                </div>
                            </div> <!-- end col -->

                            <div class="col-lg-3 py-4 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 py-4">
                                <div class="quick-box">
                                    <div class="left-icon-cont">
                                        <p class="mb-1 text-muted">Space Status</p>
                                        <h3 class="mb-0" id="su_lease_status">-</h3>
                                    </div>
                                </div>
                            </div> <!-- end col -->

                            <div class="col-lg-3 py-4 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 py-4 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 py-4">
                                <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 class="col-lg-3 py-4">
                                <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 class="col-lg-12 py-4">
                                <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) {
    $(".floor").addClass('dim');
    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) {
    $(".floor").removeClass('dim');
    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.city}, ${prop.state}`);
    $('#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 = prop.no_of_basement; i > 0; 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) {
                    if (suite.rate_per_sf) {
                        console.log('avg_rent', suite.rate_per_sf)
                        total_rate_per_sf += parseFloat(suite.rate_per_sf) || 0;
                        console.log('avg_rent_total', total_rate_per_sf)
                        rate_per_sf_count++;
                        console.log('avg_rent_count', rate_per_sf_count)
                        console.log('')
                        console.log('=============')
                        console.log('')
                    }
                    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 available = false;
                    let status = 'vacant';
                    if (suite.lease_status === 'Expiring Soon') {
                        status = 'occupied';
                    } else if (suite.lease_status == 'Available') {
                        status = 'vacant';
                        available = true;
                    } else if (suite.lease_status == 'Booked/Lease Signed') {
                        status = 'common';
                    } else if (suite.lease_status == 'Booked') {
                        status = 'common';
                    } else if (suite.lease_status == '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_status != 'Available' && suite.lease_status != 'Booked') {

                        if (suite.lease_exp_date) {
                            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) {
                            // if (leaseDate <= today) {
                                status = 'available';
                                exp_after_12months++;
                            }

                            expirationDate = leaseDate.toLocaleDateString();
                            expirationDate = formatDateString(expirationDate);
                        }
                    }


                    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>
                                            ${formatIfNumber(suite.total_rentable_sf ?? "0")} sf 
                                            ${expirationDate != "" ? ("| Ex on: " + formatDateString(expirationDate)) : ""}
                                        </span>
                                        </div>`;
                    }
                    if (suite.total_rentable_sf !== null) {
                        total_sqft += parseFloat(suite.total_rentable_sf);
                    }

                    if(available && suite.total_rentable_sf != null) {
                    // 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">${formatIfNumber(total_sqft)} sf</p>
                                        <h3 class="mb-0">${formatIfNumber(vacent_sqft)} Vacant sf</h3>
                                    </div>
                                </div>
                            </div>`);
    });
    if (year === null) {
        $('#exp_after_12months').html(exp_after_12months);
    }
    $('#total_sf').html(formatIfNumber(total_sf ?? "0"));
    $('#total_occupancy_sf').html(formatIfNumber(total_occupancy_sf ?? "0"));
    $('#total_vacent_sf').html(formatIfNumber(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";
        console.log(average_rent_per_sf_percent);
        console.log(Math.round(average_rent_per_sf_percent));
        $('#average_rent_per_sf').html(Math.round(average_rent_per_sf_percent));
    }

    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(formatIfNumber(response.data.total_rentable_sf ?? "-"));
                $('#total_vacent_rentable_sf').html(formatIfNumber(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(formatDateString(response.data.lease_start_date ?? "-"));
                $('#su_lease_end_date').html(formatDateString(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(formatDateString(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.space_condition ? capitalizeFirstLetter(response.data.space_condition) : "-");

                function capitalizeFirstLetter(string) {
                    return string.charAt(0).toUpperCase() + string.slice(1);
                }

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

@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