@extends('user.layouts.template')

@section('style')

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

    div#prevBtn {
    cursor: pointer !important;
    }

    #submitBtn {
    position: relative;
    }

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

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

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

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

    .card-body {
    padding: 20px !important;
    }
  </style>

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

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

    table.dataTable {
    position: relative;
    top: 10px;
    margin-bottom: 30px;
    font-size: 14px;
    text-align: center;
    }

    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 {
    overflow: auto;
    }


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

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

    }

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

    .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: 700px !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;
    position: absolute;
    top: -40px;
    right: 20px;
    gap: 16px;
    /* Adjust as needed */
    }

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


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

    /*----Floor Plan 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-weight: bold;
    cursor: pointer;
    }

    .img-wrap {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    font-size: 0;
    }

    .img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
    background-color: red;
    padding: 1px 2px 2px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    opacity: .2;
    text-align: center;
    font-size: 22px;
    line-height: 15px;
    border-radius: 50%;
    }

    .img-wrap:hover .close {
    opacity: 1;
    }

    .asterisk {
    color: red;
    }
  </style>

  {{-- Gokul's style --}}
  <style>
    .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;
    }

    .toggle-btn {
    position: relative;
    }

    .toggle-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

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

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

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

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

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

    .swal2-container.swal2-center.swal2-backdrop-show {
    z-index: 9999999;
    }
  </style>
@endsection

@section('content')
  @php
    $permission = session('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">
        <div class="d-flex w-100 justify-content-between align-items-center">
          <label for="p-type" class="form-label">Select Property
          </label>
          <select class="form-select w-50" aria-label="Default select example" style="width: 30%!important;"
          name="property" id="selected_property">
          <option disabled selected>Select Property</option>
          @foreach($properties as $propert)
        <option value="{{$propert->id}}">{{$propert->name}}</option>
      @endforeach
          </select>

          <button type="button" class="btn btn-success" id="load_property_floors">Submit</button>

        </div>
        </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="addNewFloor()">Add Floor</button>
      </div>

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

          <table id="example" class="display" style="width:100%">
          <thead>
            <tr>
            <th></th> <!-- Toggle column -->
            <th>Floor No.</th>
            <th>No. of Suites</th>
            <th>Occupaid %</th>
            <th>Vacant SF</th>
            <th>Level</th>
            <th>Subdivision Potential</th>
            <th>Absorption % per Floor</th>
            <th>Action</th>
            </tr>
          </thead>
          <tbody id='floor_list'>

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

  <!--------Add floor data - Off Canvas----->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Floor Details - Floor <span id="top_side_floor_no">1<span></h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">

    <form id="verticalwizard" action="{{ route('floors_store1') }}" class="form-wizard" method="POST"
      enctype="multipart/form-data">
      @csrf
      <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="#physical-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">
          Structural 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="#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="#finished" 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">
          Media</a>
        </li>
        <!-- <li class="nav-item" role="presentation">
       <a href="#finished" id="finished-tab" data-bs-toggle="tab" data-toggle="tab"
       class="nav-link rounded-0 py-2" aria-selected="false" tabindex="-1" role="tab">
       Finished
       </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="propertyname" class="form-label">Floor # <span class="asterisk">*</span></label>
            <input id="floor_no" type="text" class="form-control important" placeholder="Enter floor number"
              name="floor_no" value="{{ old('floor_no') }}">
            <input type="hidden" id="floor_id" name="floor_id" value="">

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

            </div>
          </div> <!-- end col -->

          <div class="col-lg-4">
            <div class="mb-3">
            <label for="Description" class="form-label">Number of Suites<span class="asterisk">*</span></label>
            <input id="no_of_suites " type="number" class="form-control important max_no" data-max="10"
              placeholder="Enter number of suites" name="no_of_suites" value="{{ old('no_of_suites') }}">

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

            </div>
          </div> <!-- end col -->

          <div class="col-lg-4">
            <div class="mb-3">
            <label for="propertyname" class="form-label">Total Area (SF) <span class="asterisk">*</span></label>
            <input id="total_area" type="number" class="form-control important"
              placeholder="Enter total area in SF" name="total_area" value="{{ old('total_area') }}">

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

            </div>
          </div> <!-- end col -->

          <div class="col-lg-4">
            <div class="mb-3">
            <label for="propertyname" class="form-label">Min Divisible </label>
            <select class="form-select" aria-label="Default select example" id="min_divisible"
              name="min_divisible">
              <option selected disabled>Enter minimum divisible SF</option>
              <option value="1">Yes</option>
              <option value="0">No</option>
            </select>

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

            </div>
          </div> <!-- end col -->

          <div class="col-lg-4">
            <div class="mb-3">
            <label for="Description" class="form-label">Contiguous space </label>
            <input id="contiguous_space" type="text" class="form-control"
              placeholder="Enter contiguous space SF" name="contiguous_space"
              value="{{ old('contiguous_space') }}">

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

            </div>
          </div> <!-- end col -->


          <div class="col-lg-4">
            <div class="mb-3">
            <label for="Description" class="form-label">Subdiv Potential</label>

            <select class="form-select" aria-label="Default select example" id="subdiv_potential"
              name="subdiv_potential" value="{{ old('subdiv_potential') }}">
              <option disabled selected>Select subdivision potential</option>
              <option value="1">Yes</option>
              <option value="0">No</option>
            </select>

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

            </div>
          </div> <!-- end col -->



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




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


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

            <div class="row">

            <div class="col-md-4">
              <div class="mb-3">
              <label class="form-label" for="floor_type">Level</label>
              <select name="floor_type" id="floor_type" class="form-control">
                <option disabled selected>Select floor type</option>
                <option value="Floor">Floor</option>
                <option value="Parking">Parking</option>
                <option value="Penthouse">Penthouse</option>
              </select>
              <input type="hidden" id="structure_id" name="structure_id" value="">

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

              </div>
            </div><!-- end col -->

            <div class="col-md-4">
              <div class="mb-3">
              <label class="form-label" for="Suite / UNIT / Floor Number">Ceiling Type</label>
              <input type="text" id="ceiling_type" class="form-control" placeholder="Enter ceiling type"
                name="ceiling_type" value="{{ old('ceiling_type') }}">

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

              </div>
            </div><!-- end col -->

            <div class="col-md-4">
              <div class="mb-3">
              <label class="form-label" for="Ceiling height">Ceiling Height</label>
              <input type="number" id="ceiling_height" class="form-control" placeholder="Enter ceiling height"
                name="ceiling_height" value="{{ old('ceiling_height') }}">
              <div class="text-red-600 text-sm diverror ceiling_height"></div>

              </div>
            </div><!-- end col -->

            <div class="col-lg-4">
              <div class="mb-3">
              <label for="Description" class="form-label">HVAC</label>

              <select class="form-select" aria-label="Default select example" id="hvac" name="hvac"
                value="{{ old('hvac') }}">
                <option disabled selected>Select HVAC type</option>
                <option value="1">Yes</option>
                <option value="0">No</option>
              </select>

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

              </div>
            </div> <!-- end col -->

            <div class="col-md-4">
              <div class="mb-3">
              <label class="form-label" for="Ceiling height">Window Exposure</label>
              <select class="form-select" aria-label="Default select example" id="window_exposure"
                name="window_exposure" value="{{ old('window_exposure') }}">
                <option selected disabled>Select window exposure</option>
                <option value="1">Yes</option>
                <option value="0">No</option>
              </select>
              <div class="text-red-600 text-sm diverror window_exposure"></div>
              </div>
            </div><!-- end col -->

            <div class="col-lg-4">
              <div class="mb-3">
              <label for="Description" class="form-label">Dock Doors</label>

              <select class="form-select" aria-label="Default select example" id="dock_doors"
                name="dock_doors" value="{{ old('dock_doors') }}">
                <option Selected disabled>Select dock doors</option>
                <option value="1">Yes</option>
                <option value="0">No</option>
              </select>
              <div class="text-red-600 text-sm diverror dock_doors"></div>
              </div>
            </div> <!-- end col -->

            <div class="col-lg-6">
              <div class="mb-3">
              <label for="Description" class="form-label">Truck Access</label>

              <select class="form-select" aria-label="Default select example" id="truck_access"
                name="truck_access" value="{{ old('truck_access') }}">
                <option selected disabled>Select truck access</option>
                <option value="1">Yes</option>
                <option value="0">No</option>
              </select>
              <div class="text-red-600 text-sm diverror truck_access"></div>
              </div>
            </div> <!-- end col -->

            <div class="col-lg-6">
              <div class="mb-3">
              <label for="Description" class="form-label">Elevator Access</label>

              <select class="form-select" aria-label="Default select example" id="elevator_access"
                name="elevator_access" value="{{ old('elevator_access') }}">
                <option selected disabled>Select elevator access</option>
                <option value="1">Yes</option>
                <option value="0">No</option>
              </select>

              <div class="text-red-600 text-sm diverror elevator_access"></div>
              </div>
            </div> <!-- end col -->
            </div><!-- end row -->
          </div> <!-- end col -->
          </div> <!-- end row -->
        </div><!-- end tab-pane -->


        <div class="tab-pane" id="access-info" role="tabpanel">
          <h4 class="fs-16 fw-semibold mb-1">Accessibility & Security</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">Access Type</label>
              <input type="text" id="access_type" class="form-control" placeholder="Enter access type"
                name="access_type" value="{{ old('access_type') }}">
              <input type="hidden" id="accessibility_id" name="accessibility_id" value="">

              <div class="text-red-600 text-sm diverror access_type"></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 utilitiesList"
                  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[]" value="Electricity"
                    style="margin-right: 5px;">Electricity
                  </label>
                  <label class="dropdown-item d-flex">
                    <input type="checkbox" name="utilities[]" value="Water"
                    style="margin-right: 5px;">Water
                  </label>
                  <label class="dropdown-item d-flex">
                    <input type="checkbox" name="utilities[]" value="Internet"
                    style="margin-right: 5px;">Internet
                  </label>
                  </li>
                </ul>
                </div>
              </div>

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

              </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" class="form-control"
                placeholder="Enter marketing URLs to property listings, virtual tours, etc"
                name="marketing_url" value="{{ old('marketing_url') }}">
              <input type="hidden" id="marketing_id" name="marketing_id" value="">

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


              </div>
            </div><!-- end col -->

            <div class="col-md-12">
              <div class="mb-3">
              <div class="floorFiles">
                <label class="form-label" for="basicLname2">Floor Plan <span class="asterisk">*</span></label>
                <div class="d-flex align-items-center mb-2 floorFile">
                <input type="file" class="form-control important" placeholder="Upload images here"
                  name="floor_plan[]" accept="image/jpeg, image/jpg, image/png"
                  data-prev_img="flor_preview">
                <i class="ri-add-circle-line big-icon addFile"></i>
                </div>
              </div>

              <div class="text-red-600 text-sm diverror floor_prev_container"></div>
              </div>
            </div><!-- end col -->
            </div><!-- end row -->
          </div> <!-- end col -->
          </div> <!-- end row -->
        </div><!-- end tab-pane -->



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


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

            <div class="row">



            <div class="col-md-12">
              <div class="mb-3">

              <div class="floorFiles">
                <label class="form-label" for="media_file[]">Upload images or tours <span
                  class="asterisk">*</span></label>
                <div class="d-flex align-items-center mb-2 floorFile">
                <input type="file" id="" class="form-control important" placeholder="Upload images here"
                  name="media_file[]" accept="image/jpeg, image/jpg, image/png"
                  data-prev_img="media_preview">

                <i class="ri-add-circle-line big-icon addFile"></i>
                </div>

              </div>


              <input type="hidden" id="media_id" name="media_id" value="">

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



              </div>
            </div><!-- end col -->


            <div class="col-md-12 mb-3 appendFiles">

            </div><!-- end col -->


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




        <div class="tab-pane" id="finished" role="tabpanel">
          <div class="row">
          <div class="col-12">
            <div class="text-center">
            <div class="avatar-md mx-auto mb-3">
              <div class="avatar-title bg-primary bg-opacity-10 text-primary rounded-circle">
              <iconify-icon icon="iconamoon:like-duotone" class="fs-36"></iconify-icon>
              </div>
            </div>
            <h3 class="mt-0">Finished !</h3>

            <p class="w-75 mb-2 mx-auto">Floor data Added
              Successfully.</p>


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

        <div class="wizard-buttons d-flex justify-content-center">
          <input type="hidden" id="floor_number" name="floor_number">
          <input type="hidden" id="property_id" name="property_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" id="uploadForm" 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>

  <!----View Floor Details----->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="floor-details">
    <div class="offcanvas-header">

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

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

    </div>



    <div class="row py-3">

      <div class="col-lg-4">
      <div class="quick-box">
        <div class="left-icon-cont">
        <p class="mb-1 text-muted">Floor Number</p>
        <h3 class="mb-0" id="view_floor_no">6</h3>
        </div>
      </div>
      </div> <!-- end col -->

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




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

    <div class="row py-2">


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

    <div class="row py-3">


      <div class="row py-2">

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


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


      <div class="row py-0" id="view_image_list">

      </div>

    </div>

    </div>
  @endsection

  <!-- JAVASCRIPTS -->
  @section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
    var myTable = "";
    $(document).ready(function () {
      myTable = $('#example').DataTable({
      "paging": true,             // Enable pagination
      "searching": true,          // Enable search box
      "info": true,               // Show table info
      order: [[1, 'asc']]
      });
    });

    $(document).ready(function () {
      $('.tab-button').click(function () {
      var tabID = $(this).data('tab');

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

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

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

    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 () {
      $('.thumbnail').click(function () {
      $('#modalImage').attr('src', $(this).attr('src'));
      $('#imageModal').fadeIn();
      });

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

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

        handleTabChange(targetId);
        });
      });

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

        // Toggle Next/Submit buttons
        if (activeTabId === '#finished' || currentIndex === totalTabs - 1) {
        nextBtn.classList.add('d-none');
        // submitBtn.classList.remove('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 () {

      $('.addFile').on('click', function () {
      var clone = $(this).closest('.floorFile').first().clone();
      clone.find('input').val('');
      clone.find('.addFile').remove();
      clone.append('<i class="ri-subtract-line big-icon removeFile" style="font-size: 30px;"></i>');
      clone.show();
      $(this).closest('.floorFiles').append(clone);
      });

      $('.floorFiles').on('click', '.removeFile', function () {
      $(this).closest('.floorFile').remove();
      });

      $('.appendFiles,.floor_prev_container').on('click', '.close', function () {
      let id = $(this).data('id');
      let ele = $(this);
      $('#offcanvasExample').attr('style', 'z-index: -1 !important');

      Swal.fire({
        title: 'Warning',
        text: 'Are you sure to delete?',
        icon: 'warning',
        showCancelButton: true,
        customClass: {
        confirmButton: 'btn btn-danger',
        cancelButton: 'btn btn-secondary'
        },
        confirmButtonText: 'Yes'
      }).then((result) => {
        if (result.isConfirmed) {
        var id = $(this).data('id');
        // if ($(this).hasClass('this_is_floor')) {

        // }


        $.ajax({
          url: "{{ route('deleteFloorFile') }}",
          type: 'DELETE',
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
          'Authorization': 'Bearer {{ session("authentication_token") }}',
          'Accept': 'application/json',
          },
          data: {
            id:id,
            is_floor_plan: ($(this).hasClass('this_is_floor') ? true : false),
          },
          success: function (response) {
          const message = response.message;
          ele.closest('.whole_img_wraper').remove();
          //location.reload();
          },
          error: function (xhr) {
          const errors = xhr.responseJSON.errors;
          }
        });
        }
        $('#offcanvasExample').removeAttr('style');
      });
      });
    });
    </script>

    {{-- Gokul's script --}}
    {{-- @if($permission !== 'Admin' && empty($permission['Property Management']['creat']) && empty($permission['Property
    Management']['edit'])) --}}
    <script>
    var form_api_on_going = false;

    $('#verticalwizard').on('submit', function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      if (!validateAllPages()) {
      return false;
      }
      if (form_api_on_going === false) {
      form_api_on_going = true;

      var formData = new FormData(e.target);
      let currentTab = $('#offcanvasExample a[data-bs-toggle="tab"].active').attr('href');
      formData.append('section', currentTab); // ?? Pass current section being validated
      toggleLoader();

      $.ajax({
        url: '{{ route("floors_store1") }}',
        type: 'POST',
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Authorization': 'Bearer {{ session("authentication_token") }}',
        },
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
        form_api_on_going = false;
        toggleLoader();
        const message = response.message;
        const insertId = response.insertId;
        console.log(message);
        $('input.floor_id').val(insertId);
        $(':file').val('');
        var offcanvas = document.getElementById('offcanvasExample');
        offcanvas.classList.remove('show');
        listFloordata();
        $('.offcanvas-backdrop').removeClass('show');
        setTimeout(() => {
          Swal.fire('Floor updated successfully');
        }, 1000);
        // showNotification('success', "Floor updated successfully");
        },
        error: function (xhr, status, error) {
        toggleLoader();
        form_api_on_going = false;
        let errMsg = '';
        // console.log(xhr)
        // if (xhr.responseJSON.errors) {
        //   if (typeof xhr.responseJSON.errors === 'string') {
        //   errMsg = xhr.responseJSON.errors;
        //   } else {
        //   Object.keys(xhr.responseJSON.errors).forEach(key => {
        //     errMsg += xhr.responseJSON.errors[key] + '\n';
        //   });
        //   }
        //   Swal.fire(errMsg);
        // } else {
        //   Swal.fire("Can't update tenant !")
        // }
        const errors = xhr.responseJSON.errors;
        console.log('errors', errors);
        $.each(errors, function (index, value) {
          $('div.' + index + '').text(value);
          errMsg += value + '\n';
        });
        if (errMsg && errMsg.length > 0) {
          Swal.fire(errMsg);
        }else if(error){
          Swal.fire(error);
        }
        }
      });
      }
    });

    function validatePageFilled(tab) {
      // return true;
      let issue_found = false;
      let validation_types = ['address', 'phone', 'zipcode', 'email', 'domainEmail', 'form-check-input', 'max_no'];
      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, #' + tab + ' .optional').each(function (e) {
      let found = $(this).attr('class').split(' ').find(word => validation_types.includes(word));
      console.log('found',found);
      $('#' + tab + ' .important, #' + tab + ' .optional').on('change input', (e) => {
        e.target.classList.remove('validation_failled');
      });

      // if image input don't have value and preview image is alrady exist skip this input (or) issue found
      console.log('going to check', $(this).attr("type"));
      if ($(this).attr("type") && $(this).attr("type").toLowerCase() === 'file') {
        let image_class = $(this).data("prev_img");
        console.log(`val is ${$(this).val()} and the prev is ${$('.' + image_class).length}`);
        if ($(this).val() !== '' || $('.' + image_class).length !== 0) {
        return true;
        }
        issue_found = true;
        $(this).addClass('validation_failled');
      }

      if ($(this).hasClass('optional') && $(this).val() === '') {
        return true;
      } else 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 === 'max_no') {
          console.log('$(this).val()',$(this).val());
          console.log('$(this).data(max)',$(this).data('max'));
          console.log('$(this).val() < $(this).data(max)',$(this).val() > $(this).data('max'));
        if ($(this).val() > $(this).data('max')) {
          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');
        }
        }
      }
      });

      return !issue_found;
    }

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

      const nextTab = e.target.href.split('#')[1];
      const currentTab = e.relatedTarget.href.split('#')[1];
      // console.log('currentTab', currentTab);
      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(() => {
        $('#offcanvasExample a[href="#' + currentTab + '"]').tab('show');
        if (currentTab === '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);
      }
    });

    function validateAllPages() {
      let isValid = true;
      $('#offcanvasExample a[data-bs-toggle="tab"]').each(function () {
      let tab_name = $(this).attr('href').replace('#', '');
      console.log('checked', tab_name)
      if (!validatePageFilled(tab_name)) {
        setTimeout(() => {
        $('#offcanvasExample 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 viewFloorData(floorId) {
      if (!floorId) {
      Swal.fire('Add Data to view Floor');
      return "";
      }
      $.ajax({
      url: '{{ route("viewFloorData") }}',
      type: 'GET',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Authorization': 'Bearer {{ session("authentication_token") }}',
      },
      data: {
        floor_id: floorId,
      },
      success: function (response) {
        console.log(response);
        if (response.data && response.data.length !== 0) {
        $('#view_floor_no').html(response.data.floor_no ?? "-");
        $('#view_total_area_in_sf').html(response.data.total_rentable_sf ?? "0");
        $('#view_vacant_area_in_sf').html(response.data.total_vacent_rentable_sf ?? "0");
        $('#property_name').html(response.data.property_name ?? "");
        if (response.data.images && response.data.images.length !== 0) {
          let images = response.data.images;
          $('#view_image_list').html('');
          images.map(img => {
          let template = `
      <div class="col-md-5 gallery">
      <img src="/storage/${img.floor_plan}" alt="${img.floor_plan}" class="thumbnail mt-3 rounded-lg overflow-hidden">
      </div>`;
          $('#view_image_list').append(template);
          });
        }
        $('#floor-details').offcanvas('show');
        } else {
        Swal.fire('No Data Found !');
        }
      },
      error: function (xhr) {
        $('#floor-details').offcanvas('hide');
        const errors = xhr.responseJSON.errors;
        console.log(errors);
        Swal.fire(xhr.responseJSON.errors);
        $.each(errors, function (index, value) {
        $('div.' + index + '').text(value);
        });
      }
      });
    }

    function deleteFloorData(floorId) {
      $('#offcanvasExample').attr('style', 'z-index: -1 !important');

      Swal.fire({
      title: 'Warning',
      text: 'Are you sure to delete?',
      icon: 'warning',
      showCancelButton: true,
      customClass: {
        confirmButton: 'btn btn-danger',
        cancelButton: 'btn btn-secondary'
      },
      confirmButtonText: 'Yes'
      }).then((result) => {
      console.log(result)

      let deleteUrl1 = '{{ route("deleteFloorData", "__id__") }}';
      let deleteUrl = deleteUrl1.replace("__id__", floorId);
      $.ajax({
        url: deleteUrl,
        type: 'DELETE',
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Authorization': 'Bearer {{ session("authentication_token") }}',
        'Accept': 'application/json',
        },
        data: {},
        success: function (response) {
        console.log(response);
        const message = response.message;
        },
        error: function (xhr, status, error) {
        console.log(error);
        const errors = xhr.responseJSON.errors;
        }
      });
      listFloordata();
      });
    }

    $("#load_property_floors").on('click', function () {
      console.log("hi iam hit !")
      listFloordata();
    })

    var test_rows = "";
    function listFloordata() {
      let prop_id = $('#selected_property').val();
      if (!prop_id) {
      Swal.fire("Please select a property first");
      return false;
      }

      $.ajax({
      url: '{{ route("listFloorData") }}',
      type: 'GET',
      data: {
        property: prop_id,
      },
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Authorization': 'Bearer {{ session("authentication_token") }}',
      },
      success: function (response) {
        // myTable
        test_rows = response.data;
        // myTable.destroy(); // Destroy the existing DataTable instance
        myTable.clear();
        myTable.draw();

        document.getElementById("floor_list").innerHTML = "";
        if (response.data && response.data.length !== 0) {
        if ($.fn.DataTable.isDataTable('#example')) {
          $('#example').DataTable().destroy(); // destroy old instance
        }
        document.getElementById("floor_list").innerHTML = response.data;

        $('#example').DataTable({
      "paging": true,             // Enable pagination
      "searching": true,          // Enable search box
      "info": true,               // Show table info
      order: [[1, 'asc']]
      }); // reinitialize
        $('.details_panel').hide();
        } else {
        Swal.fire('No Data Found !');
        }
      },
      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 toggle_arrow_and_content(event) {
      const tr = $(event.target).closest('tr'); // Get the row <tr>
      const row = $('#example').DataTable().row(tr); // DataTables row object

      const icon = $(event.target).closest('button').find('i');

      if (row.child.isShown()) {
      // Hide child row
      row.child.hide();
      tr.removeClass('shown');
      icon.removeClass('ri-arrow-down-s-line').addClass('ri-arrow-right-s-line');
      } else {
      // Get your suites HTML — fetch or hardcode for now
      const suitesHtml = event.target.dataset.suites; // <- you define this

      row.child(suitesHtml).show();
      tr.addClass('shown');
      icon.removeClass('ri-arrow-right-s-line').addClass('ri-arrow-down-s-line');
      }
    }

    function addData(event) {
      const floor_number = event.target.dataset.floor_number;
      const property_id = event.target.dataset.property_id;

      console.log("floor_number", floor_number)

      $('#verticalwizard').find('input[type="text"]:visible').val('');
      $('#verticalwizard').find('input[type="number"]').val('');
      $('#verticalwizard').find('select').val('');
      $('.form-control').val('');
      $('.appendFiles').empty();
      $('#floor_number').val(floor_number);
      $('#property_id').val(property_id);
      $('#floor_no').val(floor_number);
      $('#top_side_floor_no').html(floor_number);
      $('input[type="checkbox"][name="utilities[]"]').prop('checked', false);
      document.querySelector(".nextBtn").classList.remove('d-none');
      document.querySelector(".prevBtn").classList.remove('d-none');
      // document.querySelector(".submitBtn").classList.add('d-none');
      isReactivating = true;
      $('#offcanvasExample a[href="#space-info"]').tab('show');
      $('#offcanvasExample').offcanvas('show');
    }

    function editFloorData(FLOOR_ID) {
      let editUrl1 = '{{ route("floors.show", "__id__") }}';
      let floor_id = FLOOR_ID;
      let editUrl = editUrl1.replace("__id__", floor_id);
      // $('#property_id').val($(this));

      $('#verticalwizard').find('input[type="text"]').val('');
      $('#verticalwizard').find('input[type="hidden"]').val('');
      $('#verticalwizard').find('input[type="number"]').val();
      $('#verticalwizard').find('select').val('');
      $('.appendFiles').empty();
      $('.floor_prev_container').empty();
      $(':file').val('');

      $.ajax({
      url: editUrl,
      type: 'GET',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Authorization': 'Bearer {{ session("authentication_token") }}',
      },
      contentType: false,
      processData: false,
      data: {},
      success: function (response) {
        $('#offcanvasExample').offcanvas('show');
        const message = response.message;
        const data = response.data;
        console.log(data);
        $('#top_side_floor_no').html(response.data.floor_no ?? "1");
        if (data && data.length !== 0) {
        Object.keys(data).forEach(key => {
          const value = data[key];
          console.log(key, value);
          if (key !== 'utilities') {
          $('input[type="text"][name="' + key + '"]').val(value);
          $('input[type="hidden"][name="' + key + '"]').val(value);
          $('input[type="number"][name="' + key + '"]').val(value);
          $('input[type="radio"][name="' + key + '"][value="' + value + '"]').prop('checked', true);
          $('select[name="' + key + '"]').val(value);
          }
        });

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


        if (response.data.floor_plan != null) {
          $.each(response.data.floor_plan, function (index1, value1) {
          let file = value1.floor_plan;
          let file_id = value1.id;
          if (file != null) {
            let src1 = `{{ asset("storage/" . "__id__") }}`;
            let src = src1.replace("__id__", file);
            let temp = `
      <div class="col-md-6 whole_img_wraper">
      <div class="suite_images flor_preview overflow-hidden mt-5 mb-2">
      <button class="btn btn-danger suite_img_button close this_is_floor" type="button" data-id=${file_id}><i class="ri-delete-bin-line"></i></button>
      <img src="${src}" alt="${src}" class="object-cover uploaded_image_preview" />
      </div>
      </div>`;
            $('.floor_prev_container').append(temp);
            // $('.floor_prev_container').append(`<div class="whole_img_wraper flor_preview">
            //   <span class="close this_is_floor" data-id=${file_id}>&times;</span>
            //   <img src=${src} style="width:70px;height:70px;">
            //   </div>`);
          }
          });
        }
        if (response.data.media_img != null) {
          $.each(response.data.media_img, function (index1, value1) {
          let file = value1.media_file;
          let file_id = value1.id;
          if (file != null) {
            let src1 = `{{ asset("storage/" . "__id__") }}`;
            let src = src1.replace("__id__", file);
            let temp = `
      <div class="col-md-6 whole_img_wraper">
      <div class="suite_images overflow-hidden mt-5 mb-2 media_preview">
      <button class="btn btn-danger suite_img_button close" type="button" data-id=${file_id}><i class="ri-delete-bin-line"></i></button>
      <img src="${src}" alt="${src}" class="object-cover uploaded_image_preview" />
      </div>
      </div>`;
            $('.appendFiles').append(temp);
          }
          });
        }

        }

        document.querySelector(".nextBtn").classList.remove('d-none');
        document.querySelector(".prevBtn").classList.remove('d-none');
        // document.querySelector(".submitBtn").classList.add('d-none');
        isReactivating = true;
        $('#offcanvasExample a[href="#space-info"]').tab('show');
      },
      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 addNewFloor() {
      let prop_id = $('#selected_property').val();
      if (!prop_id) {
      Swal.fire("Please select a property first");
      return false;
      }

      $.ajax({
      url: '{{ route("addNewFloor") }}',
      type: 'POST',
      data: {
        property: prop_id,
      },
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Authorization': 'Bearer {{ session("authentication_token") }}',
      },
      success: function (response) {
        console.log(response);
        listFloordata();
      },
      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);
        });
      }
      });
    }

    </script>
    {{-- @endif --}}
    <style>
    .custom_notification {
      display: none;
    }
    </style>
  @endsection