@extends('user.layouts.template')
@section('style')
    <style>
        /*------New Css for User Dashboard-----*/

        /* nav#_dm-customWizardSteps {
            overflow-x: scroll;
            width: 100%;
        } */

        /*---Floor Table----*/

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }

        .expand-icon {
            cursor: pointer;
            font-weight: bold;
            color: #007BFF;
        }

        .details-row {
            display: none;
            background-color: #f9f9f9;
        }

        .details-content {
            padding: 10px;
            color: #555;
        }


        /*---End Floor table---*/

        .emailc {
            font-size: 14px;
            color: black;
            text-decoration: none;
        }

        button#openModalBtn {
            background: none;
        }

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

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

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

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

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

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

        .stepform-header {
            position: sticky;
            top: 130px;
            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;
        }

        /* .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 30px 0px;
        }

        /*--Tenant List----*/


        .modal {
            --bs-modal-margin: 1.75rem;
            --bs-modal-box-shadow: var(--bs-box-shadow);
            z-index: 9999999 !important;
        }

        .tm--expanded-hd .content__header,
        .tm--tall-hd .content__header {
            /* background-image: url(assets/img/Vector-bg.png) !important; */

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

        .sidebar-icons {
            width: 40px;
        }

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

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



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

        .form-content-wizard {
            width: 100%
        }

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

        .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: 5px !important;
        }

        .menu-content {
            display: none;
        }

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

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

        .card-body {
            padding: 10px !important;
        }

        /*-----Subscription List-----*/


        .sea-bar {
            position: relative;
            right: 20px;

        }

        .sea-bar:hover {
            color: black;
        }

        .input-group-text {
            background: white;
        }

        .ri-search-line {
            color: black;
        }

        .price-table th {
            font-weight: 700;
        }

        span.nav-text {
            font-size: 14px !important;
        }

        #startDate {
            width: 200px;
            margin-right: 10px;
        }

        .form-check {
            display: block;
            min-height: 1.3125rem;
            padding-left: 1.612em;
            margin-bottom: 0;
            margin: 0 0%;
        }

        /*---Data Tables----*/

        table.dataTable {
            position: relative;
            top: 10px;
            margin-bottom: 30px;
        }

        table.dataTable tbody th,
        table.dataTable tbody td {
            padding: 15px 10px;
        }


        /*---End Subscription List-----*/


        .page-title-box {
            padding-bottom: 1.25rem;
            background-color: transparent;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 0.625rem;
        }


        /*----Toggle btn----*/

        button.toggle-btn {
            background: transparent;
            border: none;
        }

        button.toggle-btn i {
            font-size: 18px;
        }

        /*----Off canvas----*/

        .offcanvas.hiding,
        .offcanvas.show,
        .offcanvas.showing {
            visibility: visible;
            z-index: 9999999 !important;
        }

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

        #submitBtn {
            position: relative;
            right: 320px;
        }

        .nav-fill .nav-item .nav-link,
        .nav-justified .nav-item .nav-link {
            width: 100%;
            text-align: justify !important;
        }


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

        /*----End New Css for User DASHBOARD---*/

        /*----View Property-----*/


        /*----View List---*/

        .view-ul li {
            padding: 10px 0px;
            color: white;
            font-size: 13px;
            font-weight: 400;
            gap: 0px !important;
            position: relative;
            right: 30px;
        }

        .view-para p {
            color: #3e3e3e;
            font-size: 14px;
            font-weight: 400;
            padding-top: 20px;
        }

        .user-img {
            font-size: 30px;
            background: rgb(128, 128, 128);
            padding: 10px 5px;
            border-radius: 5px;
        }

        .ico-box {
            width: 700px;

        }

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

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

        .img-bo {
            display: flex !important;
            justify-content: space-between;
            margin-bottom: 0px;
        }

        .bro-img-bo {
            display: flex !important;
            justify-content: space-between;
            background: #eef2f7;
            box-shadow: none;
        }

        .property-view-slider {
            display: block !important;
        }

        .owl-carousel img {
            width: 100%;
        }

        .owl-theme .owl-controls {
            margin-top: 10px;
            text-align: center;
            display: block !important;
        }

        .owl-carousel .owl-item {
            margin: 5px;
        }

        .owner-detail .ico-box {
            margin: 5px;
        }

        /*--Quick Glance---*/

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

        }

        .quick-content {
            position: relative;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            padding: 20px;
            background: white;
            margin-bottom: 10px;
            border-radius: 10px;
            overflow: hidden;
            width: 690px;
        }

 .quick-box {
        position: relative;
        padding-left: 24px;
    }


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

    }

        /*---Vertical Tab----*/
        .tab-para {
            color: #3e3e3e;
            font-size: 14px;
            font-weight: 400;
            padding-top: 20px;
            text-align: justify;
            margin-bottom: 0px;
        }

        .high-list li {
            padding-top: 10px;
        }

        .suites-table {
            box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
            padding: 15px;
            border-radius: 5px;
        }

        .suites-table thead th {
            font-weight: 700;
        }

        /*---Glide Slides---*/


        .glide__slides img {
            width: 100%;
    height: 350px;
    object-fit: cover;
        }

        .glide__arrow {
            position: absolute;
            display: block;
            top: 50%;
            z-index: 2;
            color: #fff;
            text-transform: uppercase;
            padding: 9px 12px;
            background-color: #e35205 !important;
            border: 2px solid rgba(255, 255, 255, .5);
            border-radius: 4px;
            box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, .1);
            text-shadow: 0 .25em .5em rgba(0, 0, 0, .1);
            opacity: 1;
            cursor: pointer;
            transition: opacity 150ms ease, border 300ms ease-in-out;
            transform: translateY(-50%);
            line-height: 1;
        }

        .modal-dialog {
            max-width: 800px;
            margin-right: auto;
            margin-left: auto;
        }

        .img-mod {
            width: 800px;
        }

        .modal-header .btn-close {
            cursor: pointer;
        }

        modal-body {
            position: relative;
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0px;
            height: auto;
        }

        .tab-img {
            width: 30px;
            padding: 4px;
        }

        .nav-pills .nav-link.active img {
            filter: brightness(0) invert(1);

        }


        /*---End View Property--*/
    </style>


 {{-- my code --}}
    <style>
    /* Thumbnail image */
    .thumbnail {
    width: 100%;
    cursor: pointer;
    transition: 0.3s;
    object-fit: cover;
    height: 300px;
    border-radius: 8px;
    }
    </style>
@endsection

@section('content')
    <div class="content__boxed">
        <div class="content__wrap">
            <div id="page-titl">
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0 fw-semibold">

                        </h4>
                        <ol class="breadcrumb mb-0">
                            <a target="_blank"
                                href="https://earth.google.com/web/search/seagram+building/@40.75870228,-73.97175464,16.27255068a,0d,60y,239.5h,99.62644056t,0r/data=Cn8aURJLCiUweDg5YzI1OGZiNWY1MTFmY2Y6MHgyMTM3NTYwZmNkZWM1ZDNjGfgobbsaYURAIYdl2M0xflLAKhBzZWFncmFtIGJ1aWxkaW5nGAEgASImCiQJSH5-24JhREAR52s_X39eREAZ89r5sY59UsAhTgfLEvh-UsBCAggBIhoKFlpEajZSdEN4VU9YVVVEZF9CZ0MwS2cQAjoDCgEwQgIIAEoNCP_"
                                class="btn btn-success mx-2"><i class="ri-image-fill"></i> Virtual
                                Tour
                            </a>
                            <a href="#!" class="btn btn-success mx-2" data-bs-toggle="modal"
                                data-bs-target="#exampleModal"><i class="ri-gallery-fill"></i> {{ empty($property->images) ? 0 : count($property->images) }} Photos</a>


                            @if (isset($property->brocheres) && count($property->brocheres) > 0)
                                <a target="_blank" download="" href="{{ asset('storage/' . $property->brocheres[0]->brochure) }}" class="btn btn-success"><i class="ri-download-2-line"></i> Brochure</a>
                            @endif

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

            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex">
                        <h4 class="mb-0 fw-semibold" style="color:white;font-size:28px;">{{ $property->name ?? "" }}
                            <div class="view-para">
                                <p style="color:white;font-size:20px;">{{ $property->street_address ?? "" }}</p>
                            </div>
                        </h4>
                        <div class="ico-box mb-0">
                            <div class="card-one img-bo p-2">
                                <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">
                                            @php
                                            function formatIfNumber($value) {
                                            if ($value === null || $value === '' || !isset($value)) {
                                            return '0';
                                            }
                                            if (is_numeric($value)) {
                                            return number_format(floor($value), 0, '.', ',');
                                            }
                                            return $value;
                                            }
                                            @endphp
                                            <div class="row">
                                                <div class="col-lg-3">
                                                    <div class="quick-box">
                                                        <div class="left-icon-cont px-3">
                                                            <p class="mb-1 text-muted">Occupancy</p>
                                                            <h3 class="mb-0">{{ round($property->vacancy_percentage) }}% | {{ $property->vacant_sf }} sf</h3>
                                                        </div>
                                                    </div>
                                                </div> <!-- end col -->

                                                <div class="col-lg-3">
                                                    <div class="quick-box">
                                                        <div class="left-icon-cont px-3">
                                                            <p class="mb-1 text-muted">Vacant</p>                                                            
                                                            <h3 class="mb-0">{{  round($property->occupancy_percentage) }}% | {{ $property->occupancy_sf }} sf</h3>
                                                        </div>
                                                    </div>
                                                </div> <!-- end col -->
                                                <div class="col-lg-3">
                                                    <div class="quick-box">
                                                        <div class="left-icon-cont px-3">
                                                            <p class="mb-1 text-muted">Total Income</p>
                                                            <h3 class="mb-0">$ {{ formatIfNumber($property->total_annual_base_rent) ?? "0" }}</h3>
                                                        </div>
                                                    </div>
                                                </div> <!-- end col -->
                                                <div class="col-lg-3">
                                                    <div class="quick-box">
                                                        <div class="left-icon-cont px-3">
                                                            <p class="mb-1 text-muted">Average Rent per sf</p>
                                                            <h3 class="mb-0">$ {{ formatIfNumber($property->total_average_rent_per_sf) ?? "0" }}</h3>
                                                        </div>
                                                    </div>
                                                </div> <!-- end col -->
                                            </div> <!-- end row -->
                                        </div><!-- end tab-pane -->
                                    </div> <!-- tab-content -->
                                </div>
                            </div>
                        </div>

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

            <!---- ========= Image Slider =========== -->
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12 col-sm-12">

                    <!-- Slider main container -->
                    @if (isset($property->images) && !empty($property->images))
                        <div class="glide">
                            <div class="glide__track" data-glide-el="track">
                                <ul class="glide__slides">
                                    @foreach ($property->images as $img)
                                        {{-- <li class="glide__slide"><img src="{!! asset('user/assets/img/p-1.png') !!}"
                                                alt="Slide 1"></li> --}}
                                        <li class="glide__slide"><img src="{{ asset('storage/' . $img->image) }}" alt="Slide 1">
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <!-- Navigation Arrows -->
                            <div class="glide__arrows" data-glide-el="controls">
                                <button class="glide__arrow glide__arrow--left" data-glide-dir="<">&#9664;</button>
                                <button class="glide__arrow glide__arrow--right" data-glide-dir=">">&#9654;</button>
                            </div>

                            <!-- Pagination Dots -->
                            <div class="glide__bullets" data-glide-el="controls[nav]">
                                @for ($i = 0; $i < count($property->images); $i++)
                                    <button class="glide__bullet" data-glide-dir="={{ $i }}"></button>
                                @endfor
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-----=========Owner Details============-->
            <div class="row py-3">
                <div class="col-12 col-md-12 col-lg-12 col-sm-12">
                    <div class="owner-detail d-flex justify-content-between align-items-center">
                        @if (count($property->owners) > 0 && !empty($property->owners[0]))
                        <div class="ico-box mb-0">
                            <div class="card img-bo p-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="left-icon d-flex align-items-center p-1">
                                        <i class="ri-user-fill user-img fs-3 text-white p-2"></i>
                                        <div class="left-icon-cont px-3"><p class="mb-1 text-muted">Ownership Signer</p><h3 class="mb-0">{{ !empty($property->owners[0]['ownership_company']) ? $property->owners[0]['ownership_company'] : "-" }}</h3></div>
                                    </div>                                   
                                </div>
                            </div>
                        </div>
                        @endif
                        <div class="ico-box mb-0">
                            <div class="card img-bo p-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    
                                    <div class="left-icon d-flex align-items-center p-1">
                                        <i class="ri-user-fill user-img fs-3 text-white p-2"></i>
                                        <div class="left-icon-cont px-3">
                                            <p class="mb-1 text-muted">Management</p>
                                            @if (count($property->management) > 0 && !empty($property->management[0]))
                                             <h3 class="mb-0">{{ $property->management[0]->management_company ?? "" }}</h3>
                                             @else
                                             <h3 class="mb-0">-</h3>
                                             @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ico-box mb-0">
                            <div class="card img-bo p-2">
                                <div class="d-flex justify-content-between align-items-center">


                                    <div class="left-icon d-flex align-items-center p-1">
                                        <i class="ri-user-fill user-img fs-3 text-white p-2"></i>
                                        <div class="left-icon-cont px-3">
                                            <p class="mb-1 text-muted">Broker</p>
                                              @if (count($property->brokers) > 0 && !empty($property->brokers[0]))
                                             <h3 class="mb-0">{{ $property->brokers[0]->br_company ?? "" }}</h3>
                                             @else
                                             <h3 class="mb-0">-</h3>
                                             @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



            </div>

            <div class="row py-0">
                <div class="col-12">

                    <div class="card" class="propertywizard">

                        <div class="card-body">
                            <div class="mb-0">
                                <form id="verticalwizard">
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <ul class="nav nav-pills nav-justified flex-column icon-wizard form-wizard-header bg-light p-1"
                                                role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <a href="#description" id="description-tab" data-bs-toggle="tab"
                                                        data-toggle="tab" class="nav-link rounded-0 py-2 active"
                                                        aria-selected="true" role="tab"><img
                                                            src="{!! asset('user/assets/img/01.png') !!}" class="tab-img">
                                                        Description
                                                    </a>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <a href="#hightlights" id="propertydetails2-tab" data-bs-toggle="tab"
                                                        data-toggle="tab" class="nav-link rounded-0 py-2"
                                                        aria-selected="false" role="tab" tabindex="-1"><img
                                                            src="{!! asset('user/assets/img/02.png') !!}" class="tab-img">
                                                        Highlights
                                                    </a>
                                                </li>

                                                <li class="nav-item" role="presentation">
                                                    <a href="#floorsuite" id="propertydetails2-tab" data-bs-toggle="tab"
                                                        data-toggle="tab" class="nav-link rounded-0 py-2"
                                                        aria-selected="false" role="tab" tabindex="-1"><img
                                                            src="{!! asset('user/assets/img/03.png') !!}" class="tab-img">
                                                        Floor and Suite
                                                    </a>
                                                </li>


                                                <li class="nav-item" role="presentation">
                                                    <a href="#utilities" id="utilities-tab" data-bs-toggle="tab"
                                                        data-toggle="tab" class="nav-link rounded-0 py-2"
                                                        aria-selected="false" tabindex="-1" role="tab"><img
                                                            src="{!! asset('user/assets/img/08.png') !!}" class="tab-img">
                                                        Available Suites
                                                    </a>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <a href="#location" id="location-tab" data-bs-toggle="tab"
                                                        data-toggle="tab" class="nav-link rounded-0 py-2"
                                                        aria-selected="false" tabindex="-1" role="tab"><img
                                                            src="{!! asset('user/assets/img/05.png') !!}" class="tab-img">
                                                        Brochures
                                                    </a>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <a href="#market" id="market-tab" data-bs-toggle="tab" data-toggle="tab"
                                                        class="nav-link rounded-0 py-2" aria-selected="false" tabindex="-1"
                                                        role="tab"><img src="{!! asset('user/assets/img/06.png') !!}"
                                                            class="tab-img">
                                                        Contact
                                                    </a>
                                                </li>

                                                <li class="nav-item" role="presentation">
                                                    <a href="#financialdata3" id="financialdata3-tab" data-bs-toggle="tab"
                                                        data-toggle="tab" class="nav-link rounded-0 py-2"
                                                        aria-selected="false" tabindex="-1" role="tab"><img
                                                            src="{!! asset('user/assets/img/07.png') !!}" class="tab-img">
                                                        Location
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="col-lg-9">
                                            <div class="tab-content mb-0">

                                                <div class="tab-pane active show" id="description" role="tabpanel">
                                                    <h4 class="fs-16 fw-semibold mb-1">{{ $property->name ?? "" }}</h4>
                                                    <div class="row py-2">
                                                        <div class="col-lg-12">
                                                            <p class="tab-para">
                                                                {{ $property->description}}
                                                            </p>
                                                        </div> <!-- end col -->
                                                    </div> <!-- end row -->
                                                </div><!-- end tab-pane -->

                                                <div class="tab-pane" id="hightlights" role="tabpanel">
                                                    <h4 class="fs-16 fw-semibold mb-1">Highlights</h4>
                                                    <div class="mt-3">
                                                        <ul class="high-list list-unstyled">
                                                            @if (isset($property->highlights) && !empty($property->highlights))
                                                            {!! $property->highlights !!}
                                                             
                                                            @else
                                                                <p class="h5 text-center mb-0">No Highlights Found !</p>
                                                            @endif
                                                        </ul>
                                                    </div> <!-- end row -->
                                                </div><!-- end tab-pane -->

                                                <div class="tab-pane" id="floorsuite" role="tabpanel">
                                                    <h4 class="fs-16 fw-semibold mb-1">Floor and Suite</h4>


                                                    <div class="row py-2">
                                                        <div class="col-12">

                                                            @if(!empty($property->floors))
                                                                <table id="floor-table" class="table display">
                                                                    <thead>
                                                                        <tr>
                                                                            <th></th>
                                                                            <th>Floor</th>
                                                                            <th>No.of suites</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @if (!empty($property->floors) && count($property->floors) > 0)              
                                                                        @foreach($property->floors as $floor)
                                                                            <tr class="main-row">
                                                                                <td class="expand-icon"><i
                                                                                        class="ri-arrow-right-s-line"></i>
                                                                                </td>
                                                                                <td>{{ $floor->floor_no}}</td>
                                                                                <td>{{ $floor->suite_count}}</td>
                                                                            </tr>

                                                                            <tr class="details-row">
                                                                                <td colspan="3">
                                                                                    <div class="details-content">
                                                                                        <table class="table">
                                                                                            <tbody>
                                                                                                <tr>
                                                                                                    @if(isset($property->suites) && !empty($property->suites))
                                                                                                    @php $suite_found = false; @endphp
                                                                                                        @foreach($property->suites as $suite)
                                                                                                            @if($suite->floor_id == $floor->id && $suite->suite_no != null)
                                                                                                                                                                                                                        <td><button type="button" class="btn btn-success mx-2" onclick="viewData({{ $suite->id }})"><i class="ri-eye-fill"></i> Suite {{ $suite->suite_no }}</button></td>
                                                                                                            @endif
                                                                                                        @endforeach
                                                                                                        @if(!$suite_found)
                                                                                                        <td colspan="3">
                                                                                                            <p class="h5 text-center mb-0">No Suites Found !</p>
                                                                                                        </td>
                                                                                                        @endif
                                                                                                        @else
                                                                                                        <td colspan="3">
                                                                                                            <p class="h5 text-center mb-0">No Suites Found !</p>
                                                                                                        </td>
                                                                                                    @endif
                                                                                                </tr>
                                                                                            </tbody>
                                                                                        </table>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                        @elseif (!empty($property->no_of_floors) && $property->no_of_floors > 0)
                                                                        @for ($i = 1; $i <= $property->no_of_floors; $i++)
                                                                            <tr class="main-row">
                                                                                <td class="expand-icon"><i class="ri-arrow-right-s-line"></i></td>
                                                                                <td>{{ $i }}</td>
                                                                                <td>0</td>
                                                                            </tr>
                                                                            
                                                                            <tr class="details-row">
                                                                                <td colspan="3">
                                                                                    <div class="details-content">
                                                                                        <table class="table">
                                                                                            <tbody>
                                                                                                <tr>
                                                                                                    <td colspan="3">
                                                                                                        <p class="h5 text-center mb-0">No Suites Found !</p>
                                                                                                    </td>
                                                                                                </tr>
                                                                                            </tbody>
                                                                                        </table>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                        @endfor
                                                                        @endif
                                                                    </tbody>
                                                                </table>
                                                            @else
                                                                <div class="text-center my-5">
                                                                    <p class="h5 mb-0">No Floors Found !</p>
                                                                </div>
                                                            @endif
                                                        </div> <!-- end col -->
                                                    </div> <!-- end row -->
                                                </div><!-- end tab-pane -->

                                                <div class="tab-pane" id="financialdata3" role="tabpanel">
                                                    <h4 class="fs-16 fw-semibold mb-1">Location</h4>
                                                    <div class="row py-2">
                                                        <div class="col-12">

                                                            <div class="row">
                                                                <div class="col-md-12">

                                                                    <iframe
                                                                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52952736.27407169!2d-161.97242213690666!3d35.898541446585334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!2sin!4v1741947863630!5m2!1sen!2sin"
                                                                        width="750" height="250"
                                                                        style="border:0; border-radius:10px;"
                                                                        allowfullscreen="" loading="lazy"
                                                                        referrerpolicy="no-referrer-when-downgrade"></iframe>


                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>


                                                </div><!-- end tab-pane -->

                                                <div class="tab-pane" id="utilities" role="tabpanel">
                                                    <h4 class="fs-16 fw-semibold mb-1">Available Suites</h4>
                                                    <div class="row py-2">
                                                        <div class="col-12">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <table class="table suites-table">
                                                                        <thead>
                                                                            <th>Suite name</th>
                                                                            <th>Floor No.</th>
                                                                            <th>Size</th>
                                                                            <th>Space Use</th>
                                                                        </thead>
                                                                        <tbody>
                                                                            @php
                                                                                $available_suites = 0;
                                                                            @endphp
                                                                            @if(isset($property->suites) && !empty($property->suites))
                                                                            @foreach ($property->suites as $suite)
                                                                            @if(empty($suite->lease_status) || $suite->lease_status === 'Available')
                                                                            @php $available_suites++; @endphp
                                                                            <tr>
                                                                                <td>Suite {{ $suite->suite_no }}</td>
                                                                                <td>{{ $suite->floor_no }}</td>
                                                                                <td>{{ empty($suite->total_rentable_sf) ? '-' : $suite->total_rentable_sf.' sf' }}</td>
                                                                                <td>{{ empty($suite->space_type) ? '-' : $suite->space_type }}</td>
                                                                            </tr>
                                                                            @endif
                                                                            @endforeach
                                                                            @endif

                                                                            @if($available_suites === 0)
                                                                            <tr>
                                                                                <td colspan="4">No Suites Found</td>
                                                                            </tr>
                                                                            @endif
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div><!-- end tab-pane -->

                                                <div class="tab-pane" id="location" role="tabpanel">
                                                    <h4 class="fs-16 fw-semibold mb-1">Brochures</h4>
                                                    <div class="row py-2">
                                                        <div class="col-12">
                                                            <div class="row">
                                                                @if (isset($property->brocheres) && count($property->brocheres) > 0)
                                                                @foreach($property->brocheres as $brochure)
                                                                <div class="col-md-3">
                                                                    <a class="text-center d-block text-decoration-none" target="_blank" href="{{ asset('storage/' . $brochure->brochure) }}">
                                                                        <img src="user/assets/img/pdf.png" alt="" />
                                                                    </a>
                                                                </div>
                                                                @endforeach
                                                                @else
                                                                    <div class="col-12 text-center my-5">
                                                                        <p class="h5">No Brouchers Found !</p>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div><!-- end tab-pane -->

                                                <div class="tab-pane" id="market" role="tabpanel">
                                                    <h4 class="fs-16 fw-semibold mb-3">Company Details</h4>
                                                    <div class="row mb-3">
                                                        <div class="col-12">

                                                            <div class="row">
                                                                <div class="col-12">
                                                                    <h4 class="h5 fw-semibold mb-2">Owner Details</h4>
                                                                </div>

                                                                @if (isset($property->owners) && count($property->owners) > 0)
                                                                @foreach ($property->owners as $owner)  
                                                                <div class="col-md-6 mt-2">

                                                                    <div class="broker-box mb-0">
                                                                        <div class="card bro-img-bo p-2">
                                                                            <div class="d-flex justify-content-between align-items-center">
                                                                                <div class="left-icon d-flex align-items-center p-1">
                                                                                    <i class="ri-user-fill user-img fs-3 text-white p-2"></i>
                                                                                    <div class="left-icon-cont px-3">
                                                                                        <p class="mb-1 text-muted">Owner Company</p>
                                                                                        <h3 class="mb-0">{{ $owner['ownership_company'] }}</h3>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="right-icon">
                                                                                    <a href="mailto:{{ $owner['own_email'] }}"
                                                                                        class="emailc">{{ $owner['own_email'] }}</a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                                @endforeach
                                                                @endif

                                                                <div class="col-12 mt-3">
                                                                    <h4 class="h5 fw-semibold mb-2">Management Details</h4>
                                                                </div>

                                                                @if (isset($property->management) && count($property->management) > 0)
                                                                @foreach ($property->management as $mng)   
                                                                <div class="col-md-6 mt-2">
                                                                    <div class="broker-box mb-0">
                                                                        <div class="card bro-img-bo p-2">
                                                                            <div class="d-flex justify-content-between align-items-center">
                                                                                <div class="left-icon d-flex align-items-center p-1">
                                                                                    <i
                                                                                        class="ri-user-fill user-img fs-3 text-white p-2"></i>
                                                                                    <div class="left-icon-cont px-3">
                                                                                        <p class="mb-1 text-muted">
                                                                                            Broker Name</p>
                                                                                        <h3 class="mb-0">{{ $mng->management_company }}</h3>
                                                                                    </div>
                                                                                </div>


                                                                                <div class="right-icon">
                                                                                    <a href="mailto:{{ $mng->mgnt_email }}"
                                                                                        class="emailc">{{ $mng->mgnt_email }}</a>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                @endforeach
                                                                @endif

                                                                <div class="col-12 mt-3">
                                                                    <h4 class="h5 fw-semibold mb-2">Broker Details</h4>
                                                                </div>

                                                                @if (isset($property->brokers) && count($property->brokers) > 0)
                                                                @foreach ($property->brokers as $brok)    
                                                                <div class="col-md-6 mt-2">
                                                                    <div class="broker-box mb-0">
                                                                        <div class="card bro-img-bo p-2">
                                                                            <div
                                                                                class="d-flex justify-content-between align-items-center">


                                                                                <div
                                                                                    class="left-icon d-flex align-items-center p-1">
                                                                                    <i
                                                                                        class="ri-user-fill user-img fs-3 text-white p-2"></i>
                                                                                    <div class="left-icon-cont px-3">
                                                                                        <p class="mb-1 text-muted">
                                                                                            Broker Name</p>
                                                                                        <h3 class="mb-0">{{ $brok->br_company }}</h3>
                                                                                    </div>
                                                                                </div>


                                                                                <div class="right-icon">
                                                                                    <a href="mailto:{{ $brok->br_email }}"
                                                                                        class="emailc">{{ $brok->br_email }}</a>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                @endforeach
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Modal -->
                                                    <div class="modal fade" id="exampleModal" tabindex="-1"
                                                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h1 class="modal-title fs-5" id="exampleModalLabel">
                                                                        Contact Details
                                                                    </h1>
                                                                    <button type="button" class="btn-close"
                                                                        data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>
                                                                <div class="modal-body">

                                                                    <table class="table suites-table">
                                                                        <thead>

                                                                            <th>Suite No</th>
                                                                            <th>Tenant</th>
                                                                            <th>Lease Term</th>
                                                                            <th>Rate per SF</th>
                                                                            <th>Expiration Date</th>
                                                                            <th>Broker Email ID</th>


                                                                        </thead>
                                                                        <tbody>

                                                                            <tr>
                                                                                <td>Suit 101</td>
                                                                                <td>1</td>
                                                                                <td>4 Months</td>
                                                                                <td>$4000</td>
                                                                                <td>15/5/25</td>
                                                                                <td>broker@gmail.com</td>
                                                                            </tr>





                                                                        </tbody>
                                                                    </table>


                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary"
                                                                        data-bs-dismiss="modal">Close</button>

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



                                                </div><!-- end tab-pane -->

                                                <!-- <div
                                                                    class="d-flex flex-wrap align-items-center wizard justify-content-between gap-3 mt-3">
                                                                    <div class="first">

                                                                    </div>
                                                                    <div class="d-flex gap-2">
                                                                        <div class="previous" id="prevBtn">
                                                                            <a href="javascript:void(0);"
                                                                                class="btn btn-primary disabled">
                                                                                <i class="bx bx-left-arrow-alt me-2"></i>Back To
                                                                                Previous
                                                                            </a>
                                                                        </div>
                                                                        <div class="next" id="nextBtn">
                                                                            <a href="javascript:void(0);" class="btn btn-primary">
                                                                                Next Step<i class="ri-arrow-right-line ms-2"></i>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="last">

                                                                    </div>
                                                                </div> -->
                                            </div> <!-- tab-content -->
                                        </div>
                                    </div> <!-- end #horizontalwizard-->
                                </form>
                            </div>

                        </div> <!-- end card body -->
                    </div> <!-- end card -->
                </div><!-- end col -->
            </div> <!-- end row -->

        </div>
    </div>


<!----View Suite Details----->
<div class="offcanvas offcanvas-end" tabindex="-1" id="view-data">
    <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">Suite <span class="view_suite_no"></span></h4>

        </div>
        <div class="row py-3">

            <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 view_suite_no"></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">Floor No.</p>
                        <h3 class="mb-0 view_floor_no"></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 view_total_area_in_sf">5800 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">Tenant Name</p>
                        <h3 class="mb-0 tenant_name">-</h3>
                    </div>
                </div>
            </div>



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

        <div class="row py-3">

            <div class="col-lg-3">
                <div class="quick-box">
                    <div class="left-icon-cont">
                        <p class="mb-1 text-muted">Ownership Signer</p>
                        <h3 class="mb-0 owner_name ">-</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">Occupied Date</p>
                        <h3 class="mb-0 lease_start_date">-</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">Vacating Date</p>
                        <h3 class="mb-0 lease_exp_date">24/12/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">Agreement Period</p>
                        <h3 class="mb-0 aggrement_period">-</h3>
                    </div>
                </div>
            </div>


        </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">Images</h3>
                    </div>
                </div>
            </div> <!-- end col -->
        </div> <!-- end row -->


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

            <div class="row" id="view_image_list">
            </div>
        </div>

    </div>


</div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('.tab-button').click(function () {
                var tabID = $(this).data('tab');

                $('.tab-content').hide(); // Hide all tab contents
                $('#' + tabID).show();    // Show selected tab content

                $('.tab-button').removeClass('active');
                $(this).addClass('active');
            });
        });

    </script>

    <!----Form Wizard-->
    <script>
        // document.addEventListener("DOMContentLoaded", function () {
        //     const nextBtn = document.getElementById("nextBtn");
        //     const prevBtn = document.getElementById("prevBtn");
        //     const submitBtn = document.getElementById("submitBtn");

            // const tabs = document.querySelectorAll('.nav-link');
            // const totalTabs = tabs.length;

            // tabs.forEach(tab => {
            //     tab.addEventListener('click', function () {
            //         handleTabChange(this.getAttribute('href'));
            //     });
            // });

            // function handleTabChange(activeTabId) {
            //     if (activeTabId === '#finished') {
            //         nextBtn.classList.add('d-none');
            //         submitBtn.classList.remove('d-none');
            //     } else {
            //         nextBtn.classList.remove('d-none');
            //         submitBtn.classList.add('d-none');
            //     }
            // }

            // Optional: Click event for "Next" button to go to the next tab
            // nextBtn.addEventListener('click', function () {
            //     const currentTab = document.querySelector('.nav-link.active');
            //     const tabsArr = Array.from(tabs);
            //     const currentIndex = tabsArr.indexOf(currentTab);

            //     if (currentIndex < totalTabs - 1) {
            //         const nextTab = tabsArr[currentIndex + 1];
            //         nextTab.click();
            //     }
            // });

            // nextBtn.addEventListener('click', function () {
            //     const currentTab = document.querySelector('.nav-link.active');
            //     const tabsArr = Array.from(document.querySelectorAll('.nav-link'));
            //     const currentIndex = tabsArr.indexOf(currentTab);

            //     if (currentIndex >= 0 && currentIndex < tabsArr.length - 1) {
            //         const nextTab = tabsArr[currentIndex + 1];
            //         // If using Bootstrap 5, trigger tab switch using Bootstrap's Tab API
            //         const tab = new bootstrap.Tab(nextTab);
            //         tab.show();
            //     }
            // });

            // Optional: Click event for "Previous" button
            // prevBtn.addEventListener('click', function () {
            //     const currentTab = document.querySelector('.nav-link.active');
            //     const tabsArr = Array.from(tabs);
            //     const currentIndex = tabsArr.indexOf(currentTab);

            //     if (currentIndex > 0) {
            //         const prevTab = tabsArr[currentIndex - 1];
            //         prevTab.click();
            //     }
            // });
        // });
    </script>

    <script>
        $(document).ready(function () {
            // Identify the last tab dynamically
            $('.propertwizard').each(function () {
                if ($(this).hasClass('last')) {
                    $('.next').remove(); // Removes the 'Next Step' button only in the last tab
                }
            });
        });

    </script>

    <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.theme.min.css">
@if (isset($property->images) && !empty($property->images))
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new Glide('.glide', {
                type: 'carousel',     // Carousel or slider mode
                startAt: 0,           // Start at the first slide
                perView: 3,           // Number of slides visible at once
                focusAt: 'center',    // Focus on the active slide
                autoplay: 3000,       // Auto-play delay in ms
                hoverpause: true,     // Pause on hover
                gap: 10,              // Spacing between slides
                breakpoints: {        // Responsive settings
                    1024: { perView: 2 },
                    600: { perView: 1 }
                }
            }).mount();
        });
        </script>
        @endif

    <script>
        document.querySelectorAll('.card img').forEach(img => {
            img.addEventListener('click', function () {
                document.getElementById('modalImage').src = this.src;
                new bootstrap.Modal(document.getElementById('imageModal')).show();
            });
        });
    </script>

    <!----New script---->
    <script>
        $(document).ready(function () {
            $('.expand-icon').click(function () {
                var $iconWrapper = $(this);
                var $icon = $iconWrapper.find('i');
                var $detailsRow = $iconWrapper.closest('tr').next('.details-row');

                // Toggle the details row
                $detailsRow.slideToggle(200);

                // Toggle the icon class
                if ($icon.hasClass('ri-arrow-right-s-line')) {
                    $icon.removeClass('ri-arrow-right-s-line').addClass('ri-arrow-down-s-line');
                } else {
                    $icon.removeClass('ri-arrow-down-s-line').addClass('ri-arrow-right-s-line');
                }
            });
        });

   function viewData(id) {
        $.ajax({
            url: "{{ route('viewData') }}",
            method: 'POST',
            data: {
                suite_id: id,
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json',
            },
            success: function (response) {
                $('#suite_id').val(response.data.id);
                // console.log(response.data);
                if (response.data) {
                    // Populate the form fields with the suite data
                    $('.view_suite_no').html(response.data.suite_no || '-');
                    $('.view_floor_no').html(response.data.floor_no || '-');
                    $('.view_total_area_in_sf').html(response.data.total_area_in_sf || '-');
                    // $('.view_available_date').html((response.data.available_date === '1970-01-01' || !response.data.available_date) ? '-' : response.data.available_date);
                    $('.tenant_name').html(response.data.tenant_name || '-');
                    $('.owner_name').html(response.data.owner_name || '-');
                    $('.lease_start_date').html(response.data.lease_start_date || '-');
                    $('.lease_exp_date').html(response.data.lease_exp_date || '-');
                    $('.aggrement_period').html((response.data.lease_years ?? "-")+ " years " + (response.data.lease_months ?? "-") + " Month");

                    $('#view_image_list').html('');
                    if (response.data.images) {
                        let images = JSON.parse(response.data.images);
                        images.map(img => {
                            let template = `
                            <div class="col-md-5 image_container">
                                <img src="${img.path}" alt="${img.path}" class="thumbnail mt-3 rounded-lg overflow-hidden">
                            </div>`;
                            $('#view_image_list').append(template);
                        });
                    }

                    // Show the offcanvas
                    var offcanvas = new bootstrap.Offcanvas(document.getElementById('view-data'));
                    offcanvas.show();
                } else {
                    console.error('No data found for the given suite ID.');
                    Swal.fire("No data found for the given suite ID");
                }
            },
            error: function (xhr) {
                console.error('Error fetching suite data:', xhr.responseText);
            }
        });
    }
    </script>
    <style>
        .modal-backdrop.show{
            display: none !important;
        }
        .custom_notification {
            display: none;
        }

    </style>
@endsection