@extends('user.layouts.template')

@section('style')
    <style>
        /*----Floorplan zoom---*/
        /* 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: 0;
            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;
            left: 10px;
            width: 5px;
            height: 100%;
            background-color: var(--nf-header-bg);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;

        }

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

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

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

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

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

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

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


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

        .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 {
            position: relative;
            cursor: pointer;
        }


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

        }

        /* Fullscreen container */

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

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

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

        }

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


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

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

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

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

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

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

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


        .zoomed {
            transform: scale(1.01);
        }


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

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

        .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: 60px 10%;
            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;
        }

        #property_select[multiple] {
            height: 120px !important;
            overflow-y: auto;
        }

        #property_select[multiple] option {
            padding: 8px 12px;
            margin: 2px 0;
        }

        #property_select[multiple] option:checked {
            background-color: #e35205 !important;
            color: white !important;
        }

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

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

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

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

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

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

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


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

        .modal-content {
            display: block;
            margin: auto;
            max-width: 100%;
            max-height: 100%;
            animation: zoom 0.3s;
            object-fit: cover;
        }

        .blur_section {
            filter: blur(2px);
            opacity: 70%;
        }

        .gallery {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc((100% / 3) - 10px);
            height: 200px;
            position: relative;
            background: #80808036;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 18px;
        }

        #suite_details_images,
        #images_media_container,
        #images_container {
            gap: 10px !important;
        }

        #property-sticky-one.out_floating::before {
            content: "";
            height: 10px;
            width: 100%;
            /* background: #e3520536; */
            position: absolute;
            bottom: 99%;
            left: 0;
            z-index: -50;
            backdrop-filter: blur(3px);
        }

        @media only screen and (max-width: 765px) {
            .pro-details {
                width: 100%;
            }

            .expand {
                width: 0 !important;
            }
        }
    </style>
@endsection

@section('content')
    <div class="content__boxed" id="pdf_content">
        <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;"></h1>
                </div>

                <div class="col-lg-8 col-md-8 col-8 hide-from-pdf">
                    <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 Properties
                                </label>

                                <div class="col-md-8 text-end">
                                    <div class="building-selector">
                                        <div class="multi-select-container">
                                            <div class="multi-select-dropdown" id="buildingMultiSelect">
                                                <div class="multi-select-trigger">
                                                    <span class="selected-text">Choose buildings...</span>
                                                    <i class="fas fa-chevron-down"></i>
                                                </div>
                                                <div class="multi-select-options" id="buildingOptions">
                                                    @foreach ($properties as $property)
                                                        {{-- <div class="multi-select-option">
                                                            <input type="checkbox" id="willow-creek-estate" value="willow-creek-estate">
                                                            <label for="willow-creek-estate">Willow Creek Estate</label>
                                                        </div> --}}
                                                        <div class="multi-select-option">
                                                            <input type="checkbox" id="property-{{ $property->id }}" value="{{ $property->id }}">
                                                            <label for="property-{{ $property->id }}">{{ $property->name }}</label>
                                                        </div>
                                                    @endforeach
                                                    

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

                                {{-- <select class="form-select select-form" id="property_select" multiple
                                    aria-label="Multiple select properties">
                                   
                                </select> --}}

                                <button class="btn btn-success" id="showPlanButton">Show Plan</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--=============property header==========-->
            <div class="row hide-from-pdf" 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">
                            <div class="breadcrumb mb-0 d-flex align-items-center gap-2">
                                <a href="{{ route('stackingPlan') }}" class="btn btn-success  border-white">
                                    Template A</a>
                                <a href="#!" class="btn btn-success  border-white">Template B</a>
                                <a href="#!" class="btn btn-success border-white">Template C</a>
                            </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-lg-flex d-block w-100 ms-auto remove-flex">
                                                    <div
                                                        class="filter-option d-flex align-items-center gap-2 hide-from-pdf">
                                                        <button type="button" class="first_exp_year btn btn-success  "
                                                            onclick="renderCustomExpYear(2025,event)">2025</button>
                                                        <button type="button" class="btn btn-success "
                                                            onclick="renderCustomExpYear(2026,event)">2026</button>
                                                        <button type="button" class="btn btn-success "
                                                            onclick="renderCustomExpYear(2027,event)">2027</button>
                                                        <button type="button" class="btn btn-success "
                                                            onclick="renderCustomExpYear(2028,event)">2028</button>
                                                        <button type="button" class="btn btn-success d-none"
                                                            onclick="downloadPDF()">Export
                                                            PDF</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}

                                <div class="row py-2">
                                    <div class="col-lg-12 col-md-12 ms-1"  style="min-height: 500px">
                                        <div id="fullscreenDiv">
                                            <!-- Content wrapper (we zoom this) -->
                                            <div id="buildingChart" class="building-chart" style="min-height: 300px">
                                            </div>
                                            <div id="buildingDetailsTable" class="mb-4" style="display: none;">
                                            <div class="card">
                                                <div class="card-header text-white" style="background-color: var(--nf-header-bg);">
                                                    <h5 class="mb-0 text-white">
                                                        <i class="fas fa-table me-2"></i>
                                                        Building Details
                                                    </h5>
                                                </div>
                                                <div class="card-body p-0">
                                                    <div class="table-responsive">
                                                        <table class="building-details-table">
                                                            <thead>
                                                                <tr id="buildingDetailsHeader">
                                                                    <!-- Building names will be populated here -->
                                                                </tr>
                                                            </thead>
                                                            <tbody id="buildingDetailsBody">
                                                                <!-- Building details will be populated here -->
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div> <!-- end card body -->
                    </div> <!-- end card -->
                </div>
                <!-- End Container Fluid -->

            </div>

        </div>
    </div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></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";
        }

        if (window.scrollY > 70) {
            header.classList.add("out_floating");
        } else {
            header.classList.remove("out_floating");
        }
    });
</script>



<style>
    .custom_notification {
        display: none;
    }
    body,html,#root{
        scroll-behavior: unset;
    }

    @media print {
        .custom_notification {
            display: block;
        }

        .pro-details {
            width: 100%;
        }

        .expand,
        .hide-from-pdf {
            display: none !important;
        }
    }
</style>
<script>
function loadPropertyDetails() {
    const propertySelect = $('#property_select');
    const selectedValues = propertySelect.val(); // jQuery returns array for multiple select
    
    if (!selectedValues || selectedValues.length === 0) {
        Swal.fire({
            icon: 'warning',
            title: 'No Selection',
            text: 'Please select at least one property.',
            showConfirmButton: true,
            timer: 3000
        });
        return;
    }
    
    // Clear previous property details
    $('#property-details-container').html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</div>');
    
    // Handle both single and multiple selections
    const propertyIds = Array.isArray(selectedValues) ? selectedValues : [selectedValues];
    
    // Load details for each selected property
    propertyIds.forEach((propertyId, index) => {
        $.ajax({
            url: `/get-property-details/${propertyId}`,
            method: 'GET',
            success: function(response) {
                if (response.success) {
                    // Append property details (for multiple properties)
                    const propertyHtml = `
                        <div class="property-item mb-3 p-3 border rounded" data-property-id="${propertyId}">
                            <h5 class="text-primary">Property ${propertyId}</h5>
                            <div class="property-details">
                                ${response.html || ''}
                            </div>
                        </div>
                    `;
                    
                    if (index === 0) {
                        $('#property-details-container').html(propertyHtml);
                    } else {
                        $('#property-details-container').append(propertyHtml);
                    }
                } else {
                    console.error(`Failed to load property ${propertyId}:`, response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error(`Error loading property ${propertyId}:`, error);
                if (index === 0) {
                    $('#property-details-container').html(`
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle"></i>
                            Failed to load property details. Please try again.
                        </div>
                    `);
                }
            }
        });
    });
}



</script>
<script src="{{ asset('user/assets/js/stackingplanner/templateb.js') }}"></script>
<link rel="stylesheet" href="{{ asset('user/assets/css/stackingplanner/templateb.css') }}">
@endsection