@extends('user.layouts.template')

@section('style')

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


    #submitBtn {
        position: relative;
        /* right: 300px; */
    }

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

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

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

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

    .form-control {

        font-size: 14px !important;

    }

    .form-select {

        font-size: 14px !important;

    }

    .form-label {
        font-size: 15px !important;
    }



    table.dataTable tbody th,
    table.dataTable tbody td {
        padding: 5px 5px !important;
    }

    div#prevBtn {
        cursor: pointer !important;
    }

    .btn-success {
        box-shadow: none !important;
    }

    .btn-success:hover {
        box-shadow: none !important;
    }



    .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::placeholder {
        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: 20px !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;
    }


    div#prevBtn {
        cursor: pointer !important;
    }


    div#prevBtn {
        background: var(--bs-primary);
        color: white;
        border-radius: 10px;
    }
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

    .Select-box {
        background: none;
        border-radius: 5px;
        margin: 0px;
        padding: 0px !important;
    }

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

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

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



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

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

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

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

    .floor-arrow {
        position: absolute;
        top: -40px;
        right: 20px;
        gap: 16px;
        /* 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;
    }


    .select-property {
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
        padding: 20px;
        background: white;
        border-radius: 5px;
        position: relative;

    }

    .select-property::before {
        content: "";
        position: absolute;
        top: 20px;
        left: 0px;
        width: 5px;
        height: 40%;
        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: 340px !important;
    }


    /*--Quick Glance---*/

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

    }

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

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

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


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

    }

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

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

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

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

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

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

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


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


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

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

    .floor {
        width: 100%;
        height: 70px;
        color: white;
        font-size: 14px;
        line-height: 1;
        text-align: center;
        border: 2px solid #fff;
        padding-top: 10px;
        cursor: pointer;
        display: grid;
        align-items: center;

    }


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



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

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

    div#property-sticky-one {
        position: sticky;
        top: 80px;
        z-index: 1000;
        background: #f9f9fc !important;

    }

    div#f-top-btn {
        position: sticky;
        top: 155px;
        z-index: 1000;
        background: white !important;
    }

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

    .building-header {
        padding: 10px;
    }

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

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


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

    }

    /* Fullscreen container */

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

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

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

    }

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


    /*----Floorplan zoom---*/

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

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

    .modal-content {
        display: block;
        margin: auto;
        max-width: 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;
    }


    /*---Table Alignment---*/

    table.dataTable {

        text-align: center;
        overflow-x: auto;
    }

    table.dataTable>thead>tr>th,
    table.dataTable>thead>tr>td {
        padding: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        text-align: center;
    }

    .dataTables_wrapper {
        position: relative;
        clear: both;
        overflow: auto;
    }

    .ri-add-circle-line,
    .ri-indeterminate-circle-line {
        font-size: 18px;
    }
</style>

{{-- gokul's custom style --}}
<style>
    .utils_text {
        font-size: 16px;
    }

    .utils_icon {
        width: 20px;
    }

    .object-cover {
        object-fit: cover;
        height: auto;
        width: 100%;
    }

    .suite_images {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        width: 100%;
        height: 200px;
    }

    .image_container {
        overflow: hidden;
        border-radius: 8px;
        /* height: 250px; */
    }

    .suite_img_button {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
    }

    /* this class is to prevent the hit on path inside the button */
    .suite_img_button::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        z-index: 100;
    }

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

    .important {
        transition: all ease 0.5s !important;
        border-color: #1a1d211a !important;
        box-shadow: 0 0 0px 0 #ffc0c0;
    }

    .validation_failled {
        transition: all ease 0.5s !important;
        border-color: #ff0000 !important;
        box-shadow: 0 0 10px 0 #ffc0c0;
        background-color: #fffbfb;
    }
</style>

@endSection

@section('content')
@php
    $permission = session()->get('permissions');
@endphp

<div class="content__boxed">
    <div class="content__wrap">

        <div id="page-tit">
        </div>

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

                <div class="Select-box p-3 mb-3">
                    <div class="select-property">
                        <form class="d-flex w-100 justify-content-between align-items-center">
                            <label for="p-type" class="form-label">Select Property
                            </label>
                            <select class="form-select w-40" aria-label="Default select example" id="property_select"
                                onchange="getProperty(event)">
                                <option {{ !empty($suite->property_id) ? "" : 'selected'  }}>Select a Property</option>
                                @if (!empty($properties))
                                    @foreach ($properties as $prop)
                                        <option value="{{ $prop['id'] }}" {{ !empty($suite->property_id) ? ($suite->property_id == $prop['id'] ? 'selected' : '') : ''  }}>{{ $prop['name'] }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>

                            <label for="p-type" class="form-label">Select Floor</label>
                            <select class="form-select w-40" id="floor_selector" aria-label="Default select example" {{ !empty($suite->floor_id) ? "" : 'disabled' }}>
                                <option {{ !empty($suite->floor_id) ? "" : 'selected'  }}>Select a Floor</option>
                                @if (!empty($suite->floor_id) && !empty($floors))
                                    @foreach ($floors as $flr)
                                        <option value="{{ $flr->id }}" {{ !empty($suite->floor_id) ? ($suite->floor_id == $flr->id ? 'selected' : '') : ''  }}>{{ $flr->floor_no }}</option>
                                    @endforeach
                                @endif
                            </select>

                            <a href="#" class="btn btn-success" onclick="loadSuites()">Select</a>

                        </form>

                    </div>
                </div>

            </div>
        </div>

        <div class="card">

            <!-- Custom style form wizard -->
            <div class="align-content-stretch">

                <div class="d-flex justify-content-end mx-3">
                    <button class="btn btn-primary mt-3" onclick="addNewSuite()">Add Suite</button>
                </div>

                <div class="card-body">

                    <div class="row">
                        <div class="col-12">
                            <table id="example" class="display" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Suite No.</th>
                                        <th>Tenant Name</th>
                                        <th>Total Rentable SF</th>
                                        <th>Use Type</th>
                                        <th>Lease Expiration Date (LXD)</th>
                                        <th>Rent Type</th>
                                        <th>Rent per SF</th>
                                        <th>Available Date</th>
                                        <th>Monthly Rent</th>
                                        <th>Annual Rent</th>
                                        <th>Leasing Contact</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
            <!-- END : Custom style form wizard -->

        </div>

    </div>
</div>

@if($permission === 'Admin' || !empty($permission['Property Management']['creat']) || !empty($permission['Property Management']['edit']))
    <!--------Add Suite data - Off Canvas----->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="add-data" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Suite Details - <span id="suite-no-heading"></span></h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form id="suiteForm" class="form-wizard" enctype="multipart/form-data" method="POST">
                <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="#space-info" id="subscription-plan-tab" data-bs-toggle="tab" data-toggle="tab"
                                    class="nav-link rounded-0 py-2 active" aria-selected="true" role="tab">
                                    Space Details
                                </a>
                            </li>

                            <li class="nav-item" role="presentation">
                                <a href="#access-info" id="controllable-parameters-tab" data-bs-toggle="tab"
                                    data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab"
                                    tabindex="-1">
                                    Accessibility & Security
                                </a>
                            </li>

                            <li class="nav-item" role="presentation">
                                <a href="#parking-info" id="controllable-parameters-tab" data-bs-toggle="tab"
                                    data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab"
                                    tabindex="-1">
                                    Parking & Logistics
                                </a>
                            </li>

                            <li class="nav-item" role="presentation">
                                <a href="#lease-info" id="controllable-parameters-tab" data-bs-toggle="tab"
                                    data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab"
                                    tabindex="-1">
                                    Lease Details
                                </a>
                            </li>

                            <li class="nav-item" role="presentation">
                                <a href="#marketing-info" id="controllable-parameters-tab" data-bs-toggle="tab"
                                    data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab"
                                    tabindex="-1">
                                    Marketing Metrics
                                </a>
                            </li>

                            <li class="nav-item" role="presentation">
                                <a href="#images-info" id="controllable-parameters-tab" data-bs-toggle="tab"
                                    data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab"
                                    tabindex="-1">
                                    Images
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="col-lg-9">
                        <div class="tab-content mb-0">
                            <div class="tab-pane active show" id="space-info" role="tabpanel">
                                <h4 class="fs-16 fw-semibold mb-1">Space Details</h4>

                                <div class="row py-2">

                                    <div class="col-lg-4">
                                        <div class="mb-3">
                                            <label for="suite_no" class="form-label">Suite # <span
                                                    style="color: red;">*</span></label>
                                            <input id="suite_no" type="text" class="form-control important" name="suite_no"
                                                placeholder="Enter suite number">
                                        </div>
                                    </div> <!-- end col -->

                                    <div class="col-lg-4">
                                        <div class="mb-3">
                                            <label for="total_area_in_sf" class="form-label">Total Area (SF)<span
                                                    style="color: red;">*</span></label>
                                            <input id="total_area_in_sf" name="total_area_in_sf" type="text"
                                                class="form-control important" placeholder="Enter total area in SF">
                                        </div>
                                    </div> <!-- end col -->

                                    <div class="col-lg-4">
                                        <div class="mb-3">
                                            <label for="Description" class="form-label">Space Type<span
                                                    style="color: red;">*</span></label>

                                            <select class="form-select important" id="space_type" name="space_type"
                                                aria-label="Default select example">
                                                <option selected disabled>Select space type</option>
                                                <option value="office">Office</option>
                                                <option value="retail">Retail</option>
                                                <option value="storage">Storage</option>
                                                <option value="industrial">Industrial</option>
                                            </select>
                                        </div>
                                    </div> <!-- end col -->

                                    <div class="col-lg-4">
                                        <div class="mb-3">
                                            <label for="Description" class="form-label">Space Status<span
                                                    style="color: red;">*</span></label>
                                            <select class="form-select important" id="space_condition"
                                                name="space_condition" aria-label="Default select example">
                                                <option disabled selected>Select space condition</option>
                                                <option value="good">Good</option>
                                                <option value="under_renovation">Under Renovation</option>
                                                <option value="shell">Shell</option>
                                                <option value="build_out">Build-out</option>
                                            </select>
                                        </div>
                                    </div> <!-- end col -->

                                    <div class="col-lg-4">
                                        <div class="mb-3">
                                            <label for="propertyname" class="form-label">Rentable SF<span
                                                    style="color: red;">*</span></label>
                                            <input id="total_rentable_sf" name="total_rentable_sf" type="text"
                                                class="form-control important" placeholder="Enter rentable SF">
                                        </div>
                                    </div> <!-- end col -->

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

                            <div class="tab-pane" id="access-info" role="tabpanel">
                                <div class="d-flex align-items-center">
                                    <h4 class="fs-16 fw-semibold mb-1">Accessibility & Security</h4>
                                </div>

                                <div class="row py-2">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="f-label">Smart Features</label>
                                            <div class="d-flex">
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" value="yes"
                                                        id="smart_features_yes" name="smart_features" value="yes">
                                                    <label class="form-check-label" for="smart_features">Yes</label>
                                                </div>
                                                <div class="form-check form-check-inline mx-3">
                                                    <input class="form-check-input" type="radio" value="no"
                                                        id="smart_features_no" name="smart_features" value="no">
                                                    <label class="form-check-label" for="smart_features">No</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div><!-- end col -->
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="f-label">Utilities</label>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="dropdown w-100">
                                                    <button class="form-select dropdown-toggle text-start" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="true">
                                                        Enter utilities provided
                                                    </button>
                                                    <ul class="dropdown-menu w-100 utilities_providedList"
                                                        style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 39.2px, 0px);"
                                                        data-popper-placement="bottom-start">
                                                        <li>
                                                            <label class="dropdown-item d-flex">
                                                                <input type="checkbox" name="utilities_provided[]"
                                                                    value="Electricity"
                                                                    style="margin-right: 5px;">Electricity
                                                            </label>
                                                            <label class="dropdown-item d-flex">
                                                                <input type="checkbox" name="utilities_provided[]"
                                                                    value="Water" style="margin-right: 5px;">Water
                                                            </label>
                                                            <label class="dropdown-item d-flex">
                                                                <input type="checkbox" name="utilities_provided[]"
                                                                    value="Internet" style="margin-right: 5px;">Internet
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <div class="text-red-600 text-sm diverror utilities_provided"></div>

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

                            <div class="tab-pane" id="parking-info" role="tabpanel">
                                <h4 class="fs-16 fw-semibold mb-1">Parking & Logistics</h4>

                                <div class="row py-2">
                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="f-label">Parking Availability</label>

                                                    <div class="d-flex">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" value="yes"
                                                                id="parking_yes" name="parking_availability" value="yes">
                                                            <label class="form-check-label" for="parking_yes">Yes</label>
                                                        </div>
                                                        <div class="form-check form-check-inline mx-3">
                                                            <input class="form-check-input" type="radio" value="no"
                                                                id="parking_no" name="parking_availability" value="no">
                                                            <label class="form-check-label" for="parking_no">No</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div><!-- end col -->
                                            <div class="col-md-6 parking_count">
                                                <div class="mb-3">
                                                    <label class="form-label" for="f-label">Tenant Parking Spaces</label>
                                                    <input type="text" id="parking_space_count" class="form-control"
                                                        name="parking_space_count"
                                                        placeholder="Enter tenant parking spaces">
                                                </div>
                                            </div><!-- end col -->
                                        </div><!-- end row -->
                                    </div> <!-- end col -->
                                </div> <!-- end row -->
                            </div><!-- end tab-pane -->

                            <div class="tab-pane" id="lease-info" role="tabpanel">
                                <h4 class="fs-16 fw-semibold mb-1">Lease Details</h4>


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

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="f-label">Space Available From</label>
                                                    <input type="date" id="available_date" class="form-control"
                                                        name="available_date" placeholder="Enter space availability date">
                                                </div>
                                            </div><!-- end col -->

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="Description" class="form-label">Lease Status<span
                                                            style="color: red;">*</span></label>

                                                    <select class="form-select important" id="lease_status"
                                                        name="lease_status" aria-label="Default select example">
                                                        <option selected disabled>Select lease status</option>
                                                        <option value="Occupied">Occupied</option>
                                                        <option value="Available">Available</option>
                                                        <option value="Expiring Soon">Expiring Soon</option>
                                                        <option value="Booked/Lease Signed">Booked/Lease Signed</option>
                                                    </select>
                                                </div>
                                            </div> <!-- end col -->

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="f-label">Signed Leases</label>
                                                    <input type="number" id="leases_signed" name="leases_signed"
                                                        class="form-control" placeholder="Enter number of signed leases">
                                                </div>
                                            </div><!-- end col -->

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="f-label">Lease Expiration Date <span
                                                            style="color: red;">*</span></label>
                                                    <input type="date" id="lease_exp_date" name="lease_exp_date"
                                                        class="form-control important"
                                                        placeholder="Enter lease expiration date">
                                                </div>
                                            </div><!-- end col -->


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

                            <div class="tab-pane" id="marketing-info" role="tabpanel">
                                <h4 class="fs-16 fw-semibold mb-1">Marketing Metrics</h4>

                                <div class="row py-2">
                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label class="form-label" for="basicLname2">Marketing Links</label>
                                                    <input type="text" id="marketing_url" name="marketing_url"
                                                        class="form-control"
                                                        placeholder="Enter marketing URLs to property listings, virtual tours, etc">
                                                </div>
                                            </div><!-- end col -->

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="basicLname2">Tours Held</label>
                                                    <input type="number" id="no_of_tours" name="no_of_tours"
                                                        class="form-control" placeholder="Enter number of tours held">
                                                </div>
                                            </div><!-- end col -->

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="basicLname2">Tour-to-Lease %</label>
                                                    <input type="number" id="tour_to_lease" name="tour_to_lease" readonly
                                                        class="form-control"
                                                        placeholder="Tour-to-Lease Conversion Rate (%)">

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

                            <div class="tab-pane" id="images-info" role="tabpanel">
                                <h4 class="fs-16 fw-semibold mb-1">Images</h4>

                                <div class="row py-2">
                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label class="form-label" for="f-label">Upload images
                                                        here</label>
                                                    <div class="d-flex align-items-center">
                                                        <input type="file" name="images[]" id="images" class="form-control"
                                                            multiple accept="image/jpeg, image/jpg, image/png"
                                                            placeholder="Upload images here" onchange="uploadImages()">
                                                    </div>
                                                    <div id="image_inputs">

                                                    </div>
                                                </div>
                                            </div><!-- end col -->
                                        </div><!-- end row -->
                                        <div class="row" id="image_list">

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

                            <div class="wizard-buttons d-flex justify-content-center">
                                <input type="hidden" name="suite_id" id="suite_id">
                                <button type="button" class="btn btn-secondary prevBtn d-none mx-2"><i
                                        class="ri-arrow-left-line me-2"></i> Back To Previous</button>
                                <button type="button" class="btn btn-primary nextBtn mx-2">Next Step <i
                                        class="ri-arrow-right-line ms-2"></i></button>
                                <button type="submit" class="btn btn-success submitBtn mx-2">Submit <i
                                        class="ri-check-line ms-2"></i></button>
                            </div>

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

<!----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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function () {
        $('#subscribe-list-table').DataTable({
            "paging": true,             // Enable pagination
            "searching": true,          // Enable search box
            "ordering": true,           // Enable sorting
            "info": true,               // Show table info
            "lengthMenu": [8, 10, 25],  // Page size options
            "pageLength": 8,            // Default page size

            "columnDefs": [
                { "type": "date-dd-mmm-yyyy", "targets": 5 } // Apply date sorting on column index 2
            ]
        });
    });

    $(document).ready(function () {
        var table = $('#example').DataTable();

        $('#example tbody').on('click', '.toggle-btn', function () {
            var $btn = $(this);
            var $icon = $btn.find('i');
            var $tr = $btn.closest('tr');
            var row = table.row($tr);
            var detailsContent = $tr.data('details'); // Get the HTML content stored in the data-details attribute

            if (row.child.isShown()) {
                row.child.hide();
                $icon.removeClass('ri-arrow-down-s-line').addClass('ri-arrow-right-s-line');
            } else {
                row.child(detailsContent).show(); // Inject the HTML content into the child row
                $icon.removeClass('ri-arrow-right-s-line').addClass('ri-arrow-down-s-line');
            }
        });
    });

    document.addEventListener("DOMContentLoaded", function () {
        const wizards = document.querySelectorAll(".form-wizard");

        wizards.forEach(wizard => {
            const nextBtn = wizard.querySelector(".nextBtn");
            const prevBtn = wizard.querySelector(".prevBtn");
            const submitBtn = wizard.querySelector(".submitBtn");

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

            tabs.forEach(tab => {
                tab.addEventListener('click', function (e) {
                    e.preventDefault(); // prevent actual anchor navigation
                    tabs.forEach(t => t.classList.remove('active'));
                    document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active', 'show'));


                    const targetId = this.getAttribute('href');
                    this.classList.add('active');
                    wizard.querySelector(targetId).classList.add('active', 'show');
                });
            });

            function handleTabChange(activeTabId) {
                const tabsArr = Array.from(tabs);
                const activeTab = tabsArr.find(tab => tab.getAttribute('href') === activeTabId);
                const currentIndex = tabsArr.indexOf(activeTab);

                console.log('activeTabId', activeTab)

                // Toggle Next/Submit buttons
                if (activeTab === 'images-info' || currentIndex === totalTabs - 1) {
                    nextBtn.classList.add('d-none');
                    // submitBtn.classList.remove('d-none');
                } else if (activeTab === 'access-info') {
                    prevBtn.classList.add('d-none');
                } else {
                    nextBtn.classList.remove('d-none');
                    // submitBtn.classList.add('d-none');
                }

                // Toggle Previous button
                if (currentIndex === 0) {
                    prevBtn.classList.add('d-none');
                } else {
                    prevBtn.classList.remove('d-none');
                }
            }

            nextBtn.addEventListener('click', function () {
                const currentTab = wizard.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();
                }
            });

            prevBtn.addEventListener('click', function () {
                const currentTab = wizard.querySelector('.nav-link.active');
                const tabsArr = Array.from(tabs);
                const currentIndex = tabsArr.indexOf(currentTab);

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

            // Initialize current tab
            const initialTab = wizard.querySelector('.nav-link.active');
            if (initialTab) {
                handleTabChange(initialTab.getAttribute('href'));
            }
        });
    });

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

    function imageZoom(imgID, resultID) {
        var img, lens, result, cx, cy;
        img = document.getElementById(imgID);
        result = document.getElementById(resultID);
        /*create lens:*/
        lens = document.createElement("DIV");
        lens.setAttribute("class", "img-zoom-lens");
        /*insert lens:*/
        img.parentElement.insertBefore(lens, img);
        /*calculate the ratio between result DIV and lens:*/
        cx = result.offsetWidth / lens.offsetWidth;
        cy = result.offsetHeight / lens.offsetHeight;
        /*set background properties for the result DIV:*/
        result.style.backgroundImage = "url('" + img.src + "')";
        result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
        /*execute a function when someone moves the cursor over the image, or the lens:*/
        lens.addEventListener("mousemove", moveLens);
        img.addEventListener("mousemove", moveLens);
        /*and also for touch screens:*/
        lens.addEventListener("touchmove", moveLens);
        img.addEventListener("touchmove", moveLens);
        function moveLens(e) {
            var pos, x, y;
            /*prevent any other actions that may occur when moving over the image:*/
            e.preventDefault();
            /*get the cursor's x and y positions:*/
            pos = getCursorPos(e);
            /*calculate the position of the lens:*/
            x = pos.x - (lens.offsetWidth / 2);
            y = pos.y - (lens.offsetHeight / 2);
            /*prevent the lens from being positioned outside the image:*/
            if (x > img.width - lens.offsetWidth) { x = img.width - lens.offsetWidth; }
            if (x < 0) { x = 0; }
            if (y > img.height - lens.offsetHeight) { y = img.height - lens.offsetHeight; }
            if (y < 0) { y = 0; }
            /*set the position of the lens:*/
            lens.style.left = x + "px";
            lens.style.top = y + "px";
            /*display what the lens "sees":*/
            result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
        }
        function getCursorPos(e) {
            var a, x = 0, y = 0;
            e = e || window.event;
            /*get the x and y positions of the image:*/
            a = img.getBoundingClientRect();
            /*calculate the cursor's x and y coordinates, relative to the image:*/
            x = e.pageX - a.left;
            y = e.pageY - a.top;
            /*consider any page scrolling:*/
            x = x - window.pageXOffset;
            y = y - window.pageYOffset;
            return { x: x, y: y };
        }
    }

    $(document).ready(function () {
        $(document).on('click', '.thumbnail, .close, #imageModal', function () {
            console.log($(this))
            if ($(this).attr('id') === 'imageModal' || $(this).hasClass('close')) {
                $('#imageModal').fadeOut();
            } else {
                $('#modalImage').attr('src', $(this).attr('src'));
                $('#imageModal').fadeIn();
            }
        });

        // $(document).on('', function (e) {
        //     console.log($(this))
        //     console.log(e)
        //     if (e.target.id === 'imageModal' || e.target.className === 'close') {
        //         $('#imageModal').fadeOut();
        //     }
        // });
    });

</script>

<!-- my custom script -->
<script>
    var data_table = $('#example').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        info: true,
        columns: [
            { title: "Suite No." },
            { title: "Tenant Name" },
            { title: "Total Rentable SF" },
            { title: "Use Type" },
            { title: "Lease Expiration Date (LXD)" },
            { title: "Rent Type" },
            { title: "Rent per SF" },
            { title: "Available Date" },
            { title: "Monthly Rent" },
            { title: "Annual Rent" },
            { title: "Leasing Contact" },
            { title: "Action" }
        ]
    });

    // $('#property_select').on('change', (e) => {
    // console.log(e.target.value)
    function getProperty(e) {

        $.get({
            url: "{{ route('listProperties') }}",
            method: 'POST',
            data: {
                property_id: e.target.value,
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json',
            },
            success: function (response) {
                // console.log(response)
                if (response.data.length === 0) {
                    Swal.fire("No Floors Found !");
                    $('#floor_selector').html('<option value="">No Floors Available</option>');
                    return;
                }
                $('#floor_selector').attr('disabled', false);

                $('#floor_selector').html(''); // Clear previous options
                $('#floor_selector').append('<option value="">Select Floor</option>'); // Add default option

                response.data.forEach(floor => {
                    $('#floor_selector').append(`<option value="${floor.id}">${floor.name}</option>`);
                });
            },
            error: function (xhr) {
                Swal.fire("Can't get Floors !");
                $('#floor_selector').attr('disabled', true);
                $('#floor_selector').html('');
                Swal.fire('Api Call error');
            }
        });
    }
    // });

    function loadSuites(c_property_id = null, c_floor_id = null) {
        const metaDescription = document.querySelector('meta[name="csrf-token"]');
        const content = metaDescription ? metaDescription.getAttribute('content') : null;

        let property_id = c_property_id ?? $('#property_select').val();
        let floor_id = c_floor_id ?? $('#floor_selector').val();
        if (!property_id || !floor_id) {
            Swal.fire("Please select a property and floor first.");
            return;
        }

        $.ajax({
            url: "{{ route('listSuites') }}",
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': content,
                'Authorization': 'Bearer {{ session("authentication_token") }}',
                'Accept': 'application/json',
            },
            data: {
                property_id: property_id,
                floor_id: floor_id,
            },
            success: function (response) {
                if (response.data && Array.isArray(response.data)) {
                    // Map the API data into DataTable row format
                    // console.log(response)
                    const tableData = response.data.map(item => ([
                        item.suite_no || '-',              // Suite No.
                        item.tenant_name || '-',           // Tenant Name
                        item.total_rentable_sf || '-',     // Total Rentable SF
                        item.space_type || '-',            // Use Type
                        (item.lease_exp_date === '1970-01-01' || !item.lease_exp_date) ? '-' : item.lease_exp_date,        // Lease Expiration Date (LXD)
                        item.rent_type || '-',             // Rent Type
                        item.rate_per_sf || '-',           // Rent per SF
                        (item.available_date === '1970-01-01' || !item.available_date) ? '-' : item.available_date,         // Available Date
                        item.monthly_base_rent || '-',          // Monthly Rent
                        item.annual_base_rent || '-',           // Annual Rent
                        item.leasing_contact || '-',       // Leasing Contact
                        `<div class="Plan-btn align-items-center justify-content-end d-flex p-0">
                            @if($permission === 'Admin' || !empty($permission['Property Management']['creat']))
                                ${!item.total_area_in_sf || (item.suite_no == '') ? `
                                  <a class="btn btn-success" onclick="getSuiteData(${item.id})" role="button" type="button">Add Data</a>` : ``}
                              @endif
                              ${item.total_area_in_sf || (item.suite_no == '') ? `
                              <a class="btn btn-success me-2" onclick="viewData(${item.id})" role="button" type="button">View</a>
                              @if($permission === 'Admin' || !empty($permission['Property Management']['edit']))
                                  <a class="btn btn-success" onclick="getSuiteData(${item.id})" role="button" type="button">Edit</a>
                              @endif
                              <a href="{{route('addTenant')}}?suite_id=${item.id}" class="btn btn-success ms-2"  type="button">Tenant</a>
                              ` : ``}
                        </div>`]));

                    // Add Data
                    data_table.clear();
                    data_table.rows.add(tableData);
                    data_table.draw();
                } else {
                    Swal.fire("No Data Found !");
                    console.error('Invalid data format:', response);
                }
            },
            error: function (xhr) {
                Swal.fire('Failed to load suite data.');
                console.error(xhr.responseText);
            }
        });
    }

    @if($permission === 'Admin' || !empty($permission['Property Management']['creat']) || !empty($permission['Property Management']['edit']))
        function getSuiteData(id) {
            // console.log(id);
            $.ajax({
                url: "{{ route('getSuiteData') }}",
                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
                        $('#suite-no-heading').html(response.data.suite_no || '');
                        $('#suite_no').val(response.data.suite_no || '');
                        $('#total_area_in_sf').val(response.data.total_area_in_sf || '');
                        response.data.space_type && $('#space_type').val(response.data.space_type);
                        response.data.space_condition && $('#space_condition').val(response.data.space_condition);
                        $('#total_rentable_sf').val(response.data.total_rentable_sf || '');

                        // $('#tenant_name').val(response.data.tenant_name || '');
                        $('.parking_count').show();
                        if (response.data.parking_availability == "yes") {
                            $('#parking_yes').attr('checked', true)
                            $('#parking_no').attr('checked', false)
                        } else if (response.data.parking_availability == "no") {
                            $('#parking_yes').attr('checked', false);
                            $('#parking_no').attr('checked', true)
                            $('.parking_count').hide();
                        } else {
                            $('#parking_yes').attr('checked', false)
                            $('#parking_no').attr('checked', false)
                        }

                        $('#parking_space_count').val(response.data.parking_space_count || '');

                        if (response.data.smart_features == "yes") {
                            $('#smart_features_yes').attr('checked', true)
                            $('#smart_features_no').attr('checked', false)
                        } else if (response.data.smart_features == "no") {
                            $('#smart_features_yes').attr('checked', false);
                            $('#smart_features_no').attr('checked', true)
                        } else {
                            $('#smart_features_yes').attr('checked', false)
                            $('#smart_features_no').attr('checked', false)
                        }

                        $('#available_date').val((response.data.available_date === '1970-01-01' || !response.data.available_date) ? '' : response.data.available_date);
                        response.data.lease_status && $('#lease_status').val(response.data.lease_status);
                        $('#leases_signed').val(response.data.leases_signed || '');
                        $('#lease_exp_date').val((response.data.lease_exp_date === '1970-01-01' || !response.data.lease_exp_date) ? '-' : response.data.lease_exp_date);

                        $('#marketing_url').val(response.data.marketing_url || '');
                        $('#no_of_tours').val(response.data.no_of_tours || '');
                        $('#tour_to_lease').val(response.data.tour_to_lease || '');

                        if (response.data.utilities_provided && response.data.utilities_provided != null && response.data.utilities_provided !== "") {
                            let utilities = JSON.parse(response.data.utilities_provided);
                            if (utilities && utilities.length > 0) {
                                utilities.forEach(function (utility) {
                                    $('input[type="checkbox"][name="utilities_provided[]"][value="' + utility + '"]').prop('checked', true);
                                });
                            } else {
                                $('input[type="checkbox"][name="utilities_provided[]"]').prop('checked', false);
                            }
                        } else {
                            $('input[type="checkbox"][name="utilities_provided[]"]').prop('checked', false);
                        }

                        $('#image_list').html('');
                        if (response.data.images) {
                            let images = JSON.parse(response.data.images);
                            images.map(img => {
                                let template = `
                                                                                                        <div class="col-md-6">
                                                                                                            <div class="suite_images overflow-hidden mt-5 mb-2">
                                                                                                                <button class="btn btn-danger suite_img_button" type="button" onclick="deleteImage('${img.id}',event)"><i class="ri-delete-bin-line"></i></button>
                                                                                                                <img src="${img.path}" alt="${img.path}" class="object-cover uploaded_image_preview" />
                                                                                                            </div>
                                                                                                        </div>`;

                                $('#image_list').append(template);
                            })

                        }
                        // Show the offcanvas
                        var offcanvas = new bootstrap.Offcanvas(document.getElementById('add-data'));
                        offcanvas.show();
                        isReactivating = true;
                        $('#suiteForm a[href="#space-info"]').tab('show');

                        document.querySelector(".nextBtn").classList.remove('d-none');
                        document.querySelector(".prevBtn").classList.remove('d-none');
                        // document.querySelector(".submitBtn").classList.add('d-none');
                    } 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);
                }
            });
        }
    @endif

    let utilityIndex = 0;

    function addUtility(utility = { name: '', smart: '' }) {
        let key = utilityIndex++;

        let template = `
        <div class="row utility-row mb-3" data-key="${key}">
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">${utilityIndex == 1 ? "Utilities Provided (Electricity, Water, Internet, etc.)" : ""}</label>
                    <select class="form-select" name="utilities[${key}][name]" onchange="validateDuplicateUtility(this)">
                        <option disabled ${utility.name === '' ? 'selected' : ''}>Select a Utility</option>
                        <option value="Electricity" ${utility.name === 'Electricity' ? 'selected' : ''}>Electricity</option>
                        <option value="Water" ${utility.name === 'Water' ? 'selected' : ''}>Water</option>
                        <option value="Internet" ${utility.name === 'Internet' ? 'selected' : ''}>Internet</option>
                    </select>
                </div>
            </div>

            <div class="col-md-3 col-6">
            <label class="form-label" for="f-label">Smart Features (Yes/No)</label>
            <div class="d-flex align-items-center">
            <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="utilities[${key}][smart]" value="yes" ${utility.smart === 'yes' ? 'checked' : ''}>
            <label class="form-check-label">Yes</label>
            </div>
            <div class="form-check form-check-inline mx-3">
            <input class="form-check-input" type="radio" name="utilities[${key}][smart]" value="no" ${utility.smart === 'no' ? 'checked' : ''}>
            <label class="form-check-label">No</label>
            </div>
            </div>
            </div>
            <div class="col-md-3 col-6">
            <button class="btn btn-sm btn-danger ms-4"  onclick="removeUtilityRow(this)">Remove</button>
            </div>
        </div>`;

        $('#utility_list').append(template);
    }

    $(document).on('change', 'select[name^="utilities"]', function () {
        checkDuplicateUtilitiesRealtime();
    });

    function checkDuplicateUtilitiesRealtime() {
        const selectedValues = [];
        let hasDuplicate = false;

        $('select[name^="utilities"]').each(function () {
            const val = $(this).val();
            if (!val) return;

            if (selectedValues.includes(val)) {
                $(this).addClass('is-invalid');
                hasDuplicate = true;
            } else {
                $(this).removeClass('is-invalid');
                selectedValues.push(val);
            }
        });

        // console.log('hasDuplicate', hasDuplicate)

        if (hasDuplicate) {
            $('#utility-error').text('Duplicate utilities are not allowed.').show();
        } else {

            $('#utility-error').text('').hide();
        }
    }

    function removeUtilityRow(btn) {
        $(btn).closest('.utility-row').remove();
        checkDuplicateUtilitiesRealtime();
    }

    function uploadImages() {
        let files = document.getElementById('images').files;
        let suiteId = document.getElementById('suite_id').value;
        const metaDescription = document.querySelector('meta[name="csrf-token"]');
        const content = metaDescription ? metaDescription.getAttribute('content') : null;

        if (!suiteId) {
            Swal.fire("Suite ID is required");
            return;
        }

        if (files.length === 0) {
            Swal.fire("Please select at least one image.");
            return;
        }

        let formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            formData.append("images[]", files[i]);
        }

        formData.append("suite_id", suiteId);

        $.ajax({
            url: "{{ route('uploadSuiteImages') }}",
            type: "POST",
            headers: {
                'X-CSRF-TOKEN': content,
                'Authorization': 'Bearer {{ session("authentication_token") }}',
            },
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                if (response.success) {
                    response.paths.forEach(img => {
                        let template = `
                    <div class="col-md-6">
                        <div class="suite_images overflow-hidden mt-5 mb-2">
                            <button class="btn btn-danger suite_img_button" type="button" onclick="deleteImage('${img.id}',event)"><i class="ri-delete-bin-line"></i></button>
                            <img src="${img.path}" alt="${img.path}" class="object-cover uploaded_image_preview" />
                        </div>
                    </div>`;
                        $('#image_list').append(template);
                    });
                    document.getElementById('images').value = "";
                } else {
                    Swal.fire("Upload failed.");
                }
            },
            error: function (err) {
                if (err.responseJSON && err.responseJSON.message) {
                    Swal.fire(err.responseJSON.message);
                }
                console.error(err);
            }
        });
    }

    function validatePageFilled(tab) {
        // return true;
        let issue_found = false;
        let validation_types = ['address', 'phone', 'zipcode', 'email', 'domainEmail', 'form-check-input'];
        const phoneRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
        const domainEmailRegex = /^[a-zA-Z0-9._%+-]+@(?!gmail\.com$)(?!yahoo\.com$)(?!hotmail\.com$)(?!outlook\.com$)[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        // const zipCodeRegex = /^[0-9]{6}$/;

        // checking important input validation
        $('#' + tab + ' .important').each(function (e) {
            let found = $(this).attr('class').split(' ').find(word => validation_types.includes(word));

            $('#' + tab + ' .important').on('change input', (e) => {
                e.target.classList.remove('validation_failled');
            });

            if (!$(this).val() || $(this).val() === '') {
                issue_found = true;
                $(this).addClass('validation_failled');
            }

            if (found) {
                if (found === 'phone') {
                    if (!phoneRegex.test($(this).val())) {
                        issue_found = true;
                        $(this).addClass('validation_failled');
                    }
                } else if (found === 'email') {
                    if (!emailRegex.test($(this).val())) {
                        issue_found = true;
                        $(this).addClass('validation_failled');
                    }
                } else if (found === 'domainEmail') {
                    if (!domainEmailRegex.test($(this).val())) {
                        issue_found = true;
                        $(this).addClass('validation_failled');
                    }
                }
                //  else if (found === 'zipcode') {
                //     if (!zipCodeRegex.test($(this).val())) {
                //         issue_found = true;
                //         $(this).addClass('validation_failled');
                //     }
                // }
                else if (found === 'address') {
                    if ($(this).val().length < 10) {
                        issue_found = true;
                        $(this).addClass('validation_failled');
                    }
                } else if (found === 'form-check-input') {
                    let is_checked = false;
                    $('#' + tab + ' .form-check-input').each(function (e) {
                        if ($(this).is(':checked')) {
                            is_checked = true;
                            $('#' + tab + ' .form-check-input').removeClass('validation_failled');
                        }
                    });
                    if (!is_checked) {
                        $('#' + tab + ' .form-check-input').addClass('validation_failled');
                    }
                }
            }
        });

        // checking optional input validation
        $('#' + tab + ' .optional').each(function (e) {
            if ($(this).val() !== '' || $(this).val().length !== 0) {
                $('#' + tab + ' .optional').on('change input', (e) => {
                    e.target.classList.remove('validation_failled');
                });
                let second_found = $(this).attr('class').split(' ').find(word => validation_types.includes(word));
                if (second_found === 'phone') {
                    if (!phoneRegex.test($(this).val())) {
                        issue_found = true;
                        $(this).addClass('validation_failled');
                    }
                } else if (second_found === 'email') {
                    if (!emailRegex.test($(this).val())) {
                        issue_found = true;
                        $(this).addClass('validation_failled');
                    }
                }
                // else if (second_found === 'zipcode') {
                //     if (!zipCodeRegex.test($(this).val())) {
                //         issue_found = true;
                //         $(this).addClass('validation_failled');
                //     }
                // }
                else if (second_found === 'address') {
                    if ($(this).val().length < 10) {
                        issue_found = true;
                        $(this).addClass('validation_failled');
                    }
                }
            }
        });
        return !issue_found;
    }

    @if($permission === 'Admin' || !empty($permission['Property Management']['creat']) || !empty($permission['Property Management']['edit']))
        $('#suiteForm').on('submit', function (e) {

            if (!validateAllPages()) {
                return false;
            }

            e.preventDefault();
            const metaDescription = document.querySelector('meta[name="csrf-token"]');
            const content = metaDescription ? metaDescription.getAttribute('content') : null;
            let error_found = false;
            if (!($('.uploaded_image_preview').length > 0)) {
                if (!($('input[name="images[]"]').val().length > 0)) {
                    error_found = true;
                }
            }
            if (error_found) {
                Swal.fire('Select image to upload !');
                isReactivating = true;
                $('#suiteForm a[href="#images-info"]').tab('show');
                isReactivating = false;
                document.querySelector(".nextBtn").classList.remove('d-none');
                document.querySelector(".prevBtn").classList.add('d-none');
                return "";
            }

            let form = $(this)[0]; // raw DOM element
            let formData = new FormData(form);

            $.ajax({
                url: "{{ route('updateSuite')}}", // Change to your Laravel POST route
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': content,
                    'Authorization': 'Bearer {{ session("authentication_token") }}',
                },
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    // Close the canvas
                    $('#add-data').removeClass('show');
                    $('.offcanvas-backdrop').removeClass('show');
                    Swal.fire("Suite updated successfully!!");
                    $('.form-control').val('')
                    console.log(response);
                    loadSuites();
                },
                error: function (xhr) {
                    console.log(xhr.responseJSON.message);
                    if (xhr.responseJSON.message) {
                        Swal.fire(xhr.responseJSON.message);
                    } else {
                        Swal.fire("Upload failed!");
                    }
                }
            });
        });
        let isReactivating = false; // flag to track forced re-show
        var currentTab = '';

        $('#suiteForm a[data-bs-toggle="tab"]').on('show.bs.tab', function (e) {
            if (isReactivating) {
                // Skip validation during programmatic tab reactivation
                isReactivating = false;
                return;
            }

            const metaDescription = document.querySelector('meta[name="csrf-token"]');
            const content = metaDescription ? metaDescription.getAttribute('content') : null;
            const nextTab = e.target.href.split('#')[1];
            const currentTab = e.relatedTarget.href.split('#')[1];

            console.log('Going from', currentTab, 'to', nextTab);

            if (!validatePageFilled(currentTab)) {
                Swal.fire('Please complete the current form section.');
                // ? trigger tab switch back, but mark as internal
                isReactivating = true;
                setTimeout(() => {
                    $('#suiteForm a[href="#' + currentTab + '"]').tab('show');
                    if (nextTab === 'images-info') {
                        document.querySelector(".nextBtn").classList.add('d-none');
                        document.querySelector(".prevBtn").classList.add('d-none');
                        // document.querySelector(".submitBtn").classList.remove('d-none');
                    } else {
                        document.querySelector(".nextBtn").classList.remove('d-none');
                        document.querySelector(".prevBtn").classList.remove('d-none');
                        // document.querySelector(".submitBtn").classList.add('d-none');
                    }
                }, 0);
            } else {
                // Gather section-specific data
                const formData = new FormData(document.getElementById('suiteForm'));
                formData.append('section', currentTab); // ?? Pass current section being validated
                if (nextTab === 'images-info') {
                    document.querySelector(".nextBtn").classList.add('d-none');
                    document.querySelector(".prevBtn").classList.remove('d-none');
                    // document.querySelector(".submitBtn").classList.remove('d-none');
                } else {
                    document.querySelector(".nextBtn").classList.remove('d-none');
                    document.querySelector(".prevBtn").classList.remove('d-none');
                    // document.querySelector(".submitBtn").classList.add('d-none');
                }

                // Call the API to save this section
                $.ajax({
                    url: "{{ route('updateSuite')}}", // Change to your Laravel POST route
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': content,
                        'Authorization': 'Bearer {{ session("authentication_token") }}',
                    },
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        // Swal.fire("Uploaded successfully!");
                        console.log(currentTab, 'Uploaded successfully!')
                        console.log(response);
                    },
                    error: function (xhr, status, error) {

                        errMsg = '';
                        if (xhr.responseJSON.errors || xhr.responseJSON.error) {
                            errors = xhr.responseJSON.errors || xhr.responseJSON.error;
                            if (typeof errors === 'string') {
                                errMsg = errors;
                            } else {
                                Object.keys(errors).forEach(key => {
                                    errMsg += errors[key] + '\n';
                                });
                            }
                            Swal.fire(errMsg);
                        } else {
                            Swal.fire("Please complete the current form section ");
                        }

                        showTab = "";
                        if (xhr.responseJSON.section_id) {
                            isReactivating = true;
                            $('#suiteForm a[href="#' + xhr.responseJSON.section_id + '"]').tab('show');
                            // console.log(xhr.responseJSON.section_id, 'Upload failed!');
                            showTab = xhr.responseJSON.section_id;
                        } else {
                            isReactivating = true;
                            $('#suiteForm a[href="#' + currentTab + '"]').tab('show');
                            // console.log(currentTab, 'Upload failed!');
                            showTab = currentTab;
                        }

                        console.log(showTab, 'Upload failed!');

                        if (showTab === 'images-info') {
                            document.querySelector(".nextBtn").classList.add('d-none');
                            document.querySelector(".prevBtn").classList.remove('d-none');
                            // document.querySelector(".submitBtn").classList.remove('d-none');
                        } else {
                            document.querySelector(".nextBtn").classList.remove('d-none');
                            document.querySelector(".prevBtn").classList.remove('d-none');
                            // document.querySelector(".submitBtn").classList.add('d-none');
                        }
                    }
                });
            }

        });

    @endif
    document.querySelectorAll('input[name="parking_availability"]').forEach((elem) => {
        elem.addEventListener("change", function () {
            // Optional: Use it however you want
            if (this.value === "yes") {
                $('.parking_count').show();
                $('#parking_space_count').val('');
                console.log('hit yes bro !');
            } else {
                $('.parking_count').hide();
                $('#parking_space_count').val('');
                console.log('hit no bro !');
            }
        });
    });

    @if($permission === 'Admin' || !empty($permission['Property Management']['delet']))
        // Assuming you have a delete button with an ID of "delete-image"
        function deleteImage(imageId, event) {

            var suiteId = $('#suite_id').val();
            const metaDescription = document.querySelector('meta[name="csrf-token"]');
            const content = metaDescription ? metaDescription.getAttribute('content') : null;

            $.ajax({
                type: 'DELETE',
                url: "{{ route('suiteImageDelete') }}",
                headers: {
                    'X-CSRF-TOKEN': content,
                    'Authorization': 'Bearer {{ session("authentication_token") }}',
                },
                data: {
                    suite_id: suiteId,
                    image_id: imageId
                },
                success: function (response) {
                    console.log(response);
                    event.target.parentElement.parentElement.remove();
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        }
    @endif

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

    $("#no_of_tours,#leases_signed").on('change', () => {
        let leases = parseInt(document.querySelector('input[name="leases_signed"]').value) || 0;
        let tours = parseInt(document.querySelector('input[name="no_of_tours"]').value) || 0;
        let tourToLease = leases ? (leases / tours) * 100 : 0;
        document.querySelector('input[name="tour_to_lease"]').value = tourToLease.toFixed(2);
    });

    function addDuplicateImage() {
        let template = `
            <div class="d-flex align-items-center duplicate-item">
                <input type="file" name="images[]" id="images" class="form-control" accept="image/*" placeholder="Upload images here">
                <button class="btn" type="button" onclick="removeDuplicate(event)">
                <i class="ri-indeterminate-circle-line"></i>
                </button>
            </div>
        `;
        $('#image_inputs').append(template);
    }

    function removeDuplicate(e) {
        console.log($(e.target).closest('.duplicate-item').remove());
    }

    @if (!empty($suite_id))
        getSuiteData({{ $suite_id }});
        loadSuites();
    @endif

        function validateAllPages() {
            let isValid = true;
            $('#add-data a[data-bs-toggle="tab"]').each(function () {
                let tab_name = $(this).attr('href').replace('#', '');
                if (!validatePageFilled(tab_name)) {
                    setTimeout(() => {
                        $('#add-data a[href="#' + tab_name + '"]').tab('show');
                        if (tab_name === 'finished') {
                            document.querySelector(".nextBtn").classList.add('d-none');
                            document.querySelector(".prevBtn").classList.add('d-none');
                            // document.querySelector("#submitBtn").classList.remove('d-none');
                        } else {
                            document.querySelector(".nextBtn").classList.remove('d-none');
                            document.querySelector(".prevBtn").classList.remove('d-none');
                            // document.querySelector("#submitBtn").classList.add('d-none');
                        }
                    }, 0);
                    isValid = false;
                    return false;
                }
            });

            return isValid;
        }

    function addNewSuite() {
        let prop_id = $('#property_select').val();
        let floor_id = $('#floor_selector').val();
        if (!prop_id || !floor_id) {
            Swal.fire("Please select a property and floor first");
            return false;
        }

        $.ajax({
            url: '{{ route("addNewSuite") }}',
            type: 'POST',
            data: {
                prop_id: prop_id,
                floor_id: floor_id,
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Bearer {{ session("authentication_token") }}',
            },
            success: function (response) {
                console.log(response);
                loadSuites();
            },
            error: function (xhr) {
                const errors = xhr.responseJSON.errors;
                console.log(errors);
                Swal.fire(xhr.responseJSON.errors);
                $.each(errors, function (index, value) {
                    $('div.' + index + '').text(value);
                });
            }
        });
    }

    function reformatDatesByClass(className = 'date_format') {
        const elements = document.querySelectorAll(`.${className}`);

        elements.forEach(el => {
            if (!el || !el.innerText) return;

            const text = el.innerText.trim();
            const parsedDate = new Date(text);

            if (!isNaN(parsedDate)) {
                const mm = String(parsedDate.getMonth() + 1).padStart(2, '0');
                const dd = String(parsedDate.getDate()).padStart(2, '0');
                const yyyy = parsedDate.getFullYear();

                el.innerText = `${mm}-${dd}-${yyyy}`;
            }
        });
    }

</script>
<style>
    .custom_notification {
        display: none;
    }
</style>
@endSection