@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: var(--nf-mainnav-bg);
      color: var(--bs-heading-color) !important;
      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: 10px;
      left: 10px;
      width: 5px;
      height: 50%;
      background-color: var(--nf-header-bg);
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;

    }

    .left-icon-cont {
      padding-right: 0px !important;
      padding-left: 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: contain;
      height: fit-content;
    }

    /* 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;
      width: 100%;
      height: fit-content;
    }

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

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

    .form-label {
      font-size: 15px !important;
      margin-bottom: 0px !important;
    }
  </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">
                <div class="col-2 align-items-center">
                  <label for="selected_property" class="form-label">Select Property
                  </label>
                </div>
                <div class="col-9 align-items-center">
                  <select class="form-select" aria-label="Default select example" style="width: 98%!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>
                </div>
                 <div class="col-1 align-items-center">
                  <button type="button" class="btn btn-success" id="load_property_floors">Submit</button>
                 </div>
                {{-- <div class="d-flex w-100 align-items-center gap-3"> 

                </div> --}}

              </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 Rentable 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">
                  Images</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-md-4">
                    <div class="mb-3">
                      <label class="form-label" for="floor_type">Level <span class="asterisk">*</span></label>
                      <select name="floor_type" id="floor_type" class="form-control important">
                        <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-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>Select minimum divisible option</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 min_div_amt_container" style="display:none;">
                    <div class="mb-3">
                      <label for="propertyname" class="form-label">Min Divisible SF </label>
                      <input id="min_divisible_amount" type="number" class="form-control"
                        placeholder="Enter minimum divisible SF" name="min_divisible_amount"
                        value="{{ old('min_divisible_amount') }}">

                      <div class="text-red-600 text-sm diverror min_divisible_amount"></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="Suite / UNIT / Floor Number">Ceiling Type</label>
                          <select name="ceiling_type" id="ceiling_type" class="form-control"
                            value="{{ old('ceiling_type') }}">
                            <option disabled selected>Enter ceiling type</option>
                            <option value="Drop">Drop</option>
                            <option value="Drop Down">Drop Down</option>
                            <option value="Open Ceiling">Open Ceiling</option>
                          </select>

                          <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"
                                id="utilities_text_here" 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" style="margin-right: 5px;" id="select_all_utilities">Select
                                    All</label>
                                  <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>
                                  <label class="dropdown-item d-flex">
                                    <input type="checkbox" name="utilities[]" value="Telephone"
                                      style="margin-right: 5px;">Telephone
                                  </label>
                                  <label class="dropdown-item d-flex">
                                    <input type="checkbox" name="utilities[]" value="Gas" style="margin-right: 5px;">Gas
                                  </label>
                                  <label class="dropdown-item d-flex">
                                    <input type="checkbox" name="utilities[]" value="Sewer"
                                      style="margin-right: 5px;">Sewer
                                  </label>
                                  <label class="dropdown-item d-flex">
                                    <input type="checkbox" name="utilities[]" value="others"
                                      style="margin-right: 5px;">Others
                                  </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</label>
                            <div class="d-flex align-items-center mb-2 floorFile">
                              <input type="file" class="form-control" 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">Images</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</label>
                            <div class="d-flex align-items-center mb-2 floorFile">
                              <input type="file" id="" class="form-control" 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">Save <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>

    <style>
      .custom-tooltip {
        position: absolute;
        bottom: 116%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #000000ff;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        white-space: nowrap;
      }

      .custom-tooltip::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0%;
        background-color: #000000ff;
        height: 6px;
        width: 6px;
        left: 50%;
        transform: rotate(45deg)translateX(-50%);
      }
    </style>
    {{-- Gokul's script --}}
    {{-- @if($permission !== 'Admin' && empty($permission['Property Management']['creat']) && empty($permission['Property
    Management']['edit'])) --}}
    <script>
      $('#min_divisible').on("change", function () {
        if (this.value === "1") {
          $('.min_div_amt_container').show();
          $('.min_div_amt_container .form-control').addClass('important');
        } else if (this.value === "0") {
          $('.min_div_amt_container').hide()
          $('.min_div_amt_container .form-control.important').removeClass('important');
        }
      });
      var form_api_on_going = false;

      function setToolTip() {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));

        tooltipTriggerList.forEach(function (el) {
          el.addEventListener('mouseenter', function () {
            // console.log('git hit')
            const message = el.getAttribute('title');
            if (!message) return;

            // Remove default browser tooltip
            el.setAttribute('data-original-title', message);
            el.removeAttribute('title');

            // Create tooltip
            const tooltip = document.createElement('div');
            tooltip.className = 'custom-tooltip';
            tooltip.innerText = message;

            el.appendChild(tooltip);
            el.classList.add('position-relative');
          });

          el.addEventListener('mouseleave', function () {
            const tooltip = document.querySelector('.custom-tooltip');
            if (tooltip) tooltip.remove();

            // Restore title attribute
            const originalTitle = el.getAttribute('data-original-title');
            if (originalTitle) {
              el.setAttribute('title', originalTitle);
              el.removeAttribute('data-original-title');
            }
          });
        });
      }
      $('#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 ?? "");
              $('#view_image_list').html('');
              if (response.data.images && response.data.images.length !== 0) {
                let images = response.data.images;
                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)
          if (result.isConfirmed) {
            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();
              setToolTip();
            } 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);
        $('#floor_id').val("");
        $('#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_number ?? "1");
            $('#floor_number').val(response.data.floor_number);
            if (data && data.length !== 0) {
              Object.keys(data).forEach(key => {
                const value = data[key];
                // console.log(key, value);
                $('input[type="checkbox"][name="utilities[]"]').prop('checked', false);
                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 (data.min_divisible == '1' || data.min_divisible == '0') {
                if (data.min_divisible == '1') {
                  $('.min_div_amt_container').show();
                  $('.min_div_amt_container .form-control').addClass('important');
                } else {
                  $('.min_div_amt_container').hide();
                  $('.min_div_amt_container .form-control').removeClass('important');
                }
              } else {
                $('.min_div_amt_container').hide()
                $('.min_div_amt_container .form-control').removeClass('important');
              }

              if (response.data.utilities != null) {
                let utilities = [];
                try {
                  utilities = JSON.parse(response.data.utilities);
                } catch (error) {
                  console.log(error);
                }
                if (utilities.length > 0) {
                  let utilities_text = [];
                  $('#select_all_utilities').prop("checked", false);
                  utilities.forEach(function (utility) {
                    utilities_text.push(utility);
                    $('input[type="checkbox"][name="utilities[]"][value="' + utility + '"]').prop('checked', true);
                  });
                  $('#utilities_text_here').text(utilities_text.join(', '));
                  if (utilities_text.length === 7) {
                    $('#select_all_utilities').prop("checked", true);
                  } else {
                    $('#select_all_utilities').prop("checked", false);
                  }
                } else {
                  $('#utilities_text_here').text("None");
                  $('input[type="checkbox"][name="utilities[]"]').prop('checked', false);
                }
              } else {
                $('#utilities_text_here').text("None");
                $('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>

    <script>
      $('input[type="checkbox"][name="utilities[]"]').each(function () {
        $(this).on('change', function () {
          refresh_utilities_text();
        });
      });
      $('#select_all_utilities').on('change', function () {
        if ($('#select_all_utilities').is(":checked")) {
          $('input[type="checkbox"][name="utilities[]"]').prop('checked', true);
          refresh_utilities_text();
        } else {
          $('input[type="checkbox"][name="utilities[]"]').prop('checked', false);
          refresh_utilities_text();
        }
      });
      function refresh_utilities_text() {
        let utilities_text = [];
        $('input[type="checkbox"][name="utilities[]"]').each(function () {
          if ($(this).is(":checked")) {
            utilities_text.push($(this).val());
          }
        });
        console.log(utilities_text);
        if (utilities_text.length == 0) {
          $('#select_all_utilities').prop("checked", false);
          $('#utilities_text_here').text("None");
        } else {
          if (utilities_text.length === 7) {
            $('#select_all_utilities').prop("checked", true);
          } else {
            $('#select_all_utilities').prop("checked", false);
          }
          $('#utilities_text_here').text(utilities_text.join(', '));
        }
      }
    </script>

    <script>
      $(document).on('keydown', 'input[type=number]', function (e) {
        if (e.key === 'e' || e.key === 'E' || e.key === '.' || e.key === '-' || e.key === '+') {
          e.preventDefault(); // Prevent 'e' key input
        }
      });
    </script>

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