@extends('Admin.default')
@section('css')
<style>
  #map-canvas{
    height: 400px;
    width: 100%;
  }
  .upload_gallery_list li {
    margin: 0;
    padding: 0 10px !important;
    list-style: none;
    width: 25%;
    float: left;
    text-align: center;
  }
  .galery_img img{
    width: 100%;
    margin:0 auto 10px;
    height: 130px;
  }
  .cancl_btn{
    position: absolute;
      top: 6px;
      right: 6px;

  }
  .map_section {
      width: 100%;
      background: #fff;
      margin-top: 0px;
      position: relative;
      z-index: 999;
  }
  .map_section {
      width: 100%;
      background: #fff;
      margin-top: 0px;
      position: relative;
      z-index: 999;
  }
  .map_section iframe {
      width: 100%;
      min-height: 435px;
      opacity: 1;
  }
  .cancl_btn p{
        background: #FF033E;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      color: #fff;
      padding: 2;
      padding: 1px 5px;
  }
  .gallery_sec{
    border: 1px solid #00a2de;
    padding: 4px;
    margin: 15px 0px;
  }  
  .del {
    position: absolute;
    top: 0px;
    right: 15px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
  }
  .upload_gallery_list li {
    margin: 0;
    padding: 0 10px !important;
    list-style: none;
    width: 25%;
    float: left;
    text-align: center;
  }
  .modal-header{
   padding: 10px 15px !important;
  }

  .galery_img {
    position: relative;
    margin: 13px 0px 0px;
  }
  .under_img {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .locate_pop{
        position: absolute;
      top: 37px;
      right: 28px;
  }
  .locate_pop a{
        font-size: 20px;
  }
  @media (min-width: 576px){
  .modal-dialog {
      max-width: 850px !important;
      margin: 3.75rem auto !important;
  }
  }
</style>
<link href="{{asset('public/Admin')}}/plugins/jquery-steps/css/jquery.steps.css" rel="stylesheet">
@stop
@section('content')
<div class="row page-titles mx-0">
  <div class="col p-md-0">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="javascript:void(0)">Dashboard</a></li>
      <li class="breadcrumb-item active"><a href="javascript:void(0)">Home</a></li>
    </ol>
  </div>
</div>
<!-- //wrapper start -->
<div class="wrapper">
  <div class="container">
    <div class="signupform">
      <div class="tabing">
        <div class="tab active" id="uptab1">
          <p><strong>1</strong></p>
          <p>General Info</p>
        </div>
        <div class="tab" id="uptab2">
          <p><strong>2</strong></p>
          <p>Other Info</p>
        </div>
        <div class="tab" id="uptab3">
          <p><strong>3</strong></p>
          <p>Features</p>
        </div>
        <div class="tab" id="uptab4">
          <p><strong>4</strong></p>
          <p>Gallery</p>
        </div>
        <div class="tab" id="uptab5">
          <p><strong>5</strong></p>
          <p>Project Info</p>
        </div>
        <div class="tab" id="uptab6">
          <p><strong>5</strong></p>
          <p>SEO</p>
        </div>
      </div>
      <form id="AddProperty" name="AddProperty" action="{{route('AddPropertyDetails')}}" method="post" enctype="multipart/form-data">
        <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
        <div class="formarea">
          <div class="tabing area" id="tab1" style="display:block;">
            <div class="row">
              <div class="col-sm-12">
                <div class="head">
                  <h1>General Info</h1>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">                     
                <section>
                  <div class="row">                           
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label>Project Type</label>
                        <select name="project_type" id="project_type" class="form-control" onchange="HideErr('CategoryErr');">
                          <option value="">Select Project Type</option>
                          @foreach($ProjectType as $pt)
                          <option value="{{$pt->id}}">{{$pt->project}}</option>
                          @endforeach
                        </select>
                        <span id="CategoryErr"></span>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label>Project Status</label>
                        <select name="project_status" id="project_status" class="form-control" >
                          <option value="">Select Project Status</option>
                          @foreach($ProjectStatus as $pt)
                          <option value="{{$pt->id}}">{{$pt->type}}</option>
                          @endforeach
                        </select>
                        <span id="TypeErr"></span>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label>Property Title</label>
                        <input type="text" name="title" id="title" class="form-control" placeholder="Enter Property Title" oninput="syncMetaTitle()">
                        <span id="TitleErr"></span>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label>Rera No</label>
                        <input type="text" name="rera_no" id="rera_no" class="form-control" placeholder="Rera No" value="">
                      </div>
                    </div>
                    <!-- <div class="col-lg-12">
                      <div class="form-group">
                        <label>Description</label>
                        <textarea  cols="10" rows="10" name="description" id="description" class="form-control" placeholder="Enter Property Title" onkeypress="HideErr('DescriptionErr');"></textarea>
                        <span id="DescriptionErr"></span>
                      </div>
                    </div> -->
                  </div>
                </section> 
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <div class="fields">     
                  <input type="button" value="Next" class="submit next" onclick="ValidateTab1();">
                </div>
              </div>
            </div>
          </div>
          <div class="tabing area" id="tab2">
            <div class="row">
              <div class="col-sm-12">
                <div class="head"><h1>Other Info</h1></div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <section >
                  <div class="row">
                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>Posession</label>
                        <div class="input-group mb-3">
                        <input type="text" id="posession" name="posession" class="form-control integer" placeholder="Posession Year" onkeypress="HideErr('PosessionErr');">
                        <span id="PosessionErr"></span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>City</label>
                        <select name="city_id" id="city_id" class="form-control" onchange="HideErr('CityErr');">
                          <option value="">Select City</option>
                          @foreach($City as $c)
                          <option value="{{$c->id}}">{{$c->location}}</option>
                          @endforeach
                        </select>
                        <span id="CityErr"></span>
                      </div>
                    </div>
                    <div class="col-lg-6">
                    <div class="form-group">
                        <label for="address">Location</label>
                        <input type="text" name="address" id="address" class="form-control" placeholder="Location">
                        <input type="hidden" name="latitude" id="latitude" value="">
                        <input type="hidden" name="longitude" id="longitude" value="">
                        <span id="addressErr"></span>
                    </div>
                    </div>
                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>Price From</label>
                        <div class="input-group mb-3">
                          <div class="input-group-prepend"><span class="input-group-text">₹</span></div>
                          <input type="text" id="price_from" name="price_from" class="form-control integer" placeholder="Price From" onkeypress="HideErr('PriceFromErr');">
                          <div class="input-group-append"><span class="input-group-text">.00</span></div>
                          <span id="PriceFromErr"></span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>Price To</label>
                        <div class="input-group mb-3">
                          <div class="input-group-prepend"><span class="input-group-text">₹</span></div>
                          <input type="text" id="price_to" name="price_to" class="form-control integer" placeholder="Price To" onkeypress="HideErr('PriceToErr');">
                          <div class="input-group-append"><span class="input-group-text">.00</span></div>
                          <span id="PriceToErr"></span>
                        </div>
                      </div>
                    </div>
                    
                    <!-- <div class="col-lg-3">
                      <div class="form-group">
                        <label><strong>Price On Request</strong></label>                        
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" name="PriceOnRequest" value="1" 
                          id="PriceOnRequest">
                          <label class="form-check-label" for="PriceOnRequest">Yes</label>
                        </div>                         
                      </div>
                    </div> -->
                  
                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>Carpet Area From</label>
                        <div class="input-group mb-3">
                          <input type="text" id="carpet_area_from" name="carpet_area_from" class="form-control integer" placeholder="Carpet Area From" onkeypress="HideErr('PriceFromErr');">
                          <span id="CarpetFromErr"></span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>Carpet Area To</label>
                        <div class="input-group mb-3">
                          <input type="text" id="carpet_area_to" name="carpet_area_to" class="form-control integer" placeholder="Carpet Area To" onkeypress="HideErr('CarpetToErr');">
                          <span id="CarpetToErr"></span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-2">
                      <div class="form-group">
                        <label>BuildUp Area From</label>
                        <div class="input-group mb-3">
                          <input type="text" id="buildup_area_from" name="buildup_area_from" class="form-control integer" placeholder="BuildUp Area From" onkeypress="HideErr('PriceFromErr');">
                          <span id="CarpetFromErr"></span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-2">
                      <div class="form-group">
                        <label>BuildUp Area To</label>
                        <div class="input-group mb-3">
                          <input type="text" id="buildup_area_to" name="buildup_area_to" class="form-control integer" placeholder="BuildUp Area To" onkeypress="HideErr('CarpetToErr');">
                          <span id="CarpetToErr"></span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-2">
                      <div class="form-group">
                        <label>&nbsp;</label>
                        <div class="input-group mb-3">
                          <a href="javascript:void(0);" onclick="CalculateArea();" class="btn btn-success">Calculate</a>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-12">
                      <div class="form-group">
                        <label><strong>Unit Size</strong></label>
                        @foreach($UnitSize as $Unit)
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" name="unit_size[]" value="{{$Unit->value}}" id="UnitSize{{$Unit->id}}">
                          <label class="form-check-label" for="UnitSize{{$Unit->id}}">{{$Unit->unit_size}}</label>
                        </div> 
                        @endforeach
                      </div>
                    </div>
                    
                    <div class="col-lg-12">
                      For Category
                    </div>

                    <div class="col-lg-6">
                      <div class="form-group">
                        <label>Is New Launch?</label>
                        <div class="input-group mb-3">
                          <select id="new_launch" name="new_launch" class="form-control integer" >
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label>Is Hot Project?</label>
                        <div class="input-group mb-3">
                          <select id="hot_project" name="hot_project" class="form-control integer" >
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                          </select>
                        </div>
                      </div>
                    </div>


                    <div class="col-lg-12">
                      For Homepage
                    </div>

                    
                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>Is Top Project?</label>
                        <div class="input-group mb-3">
                          <select id="feature" name="feature" class="form-control integer" >
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>Is Upcomming New Launch?</label>
                        <div class="input-group mb-3">
                          <select id="upcoming" name="upcoming" class="form-control integer" >
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>Is Highlighted Project?</label>
                        <div class="input-group mb-3">
                          <select id="highlighted" name="highlighted" class="form-control integer" >
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>                  
            </div>
            <div class="row">
              <div class="col-sm-12">
                <div class="fields">     
                  <input type="button" value="Next"  class="submit next" onclick="ValidateTab2();">
                  <input type="button" value="Previous"  class="submit back pre" onclick="GoBack('tab1','uptab1');">
                </div>
              </div>
            </div>
          </div>
          <div class="tabing area" id="tab3">
            <div class="row">
              <div class="col-sm-12">
                <div class="head">
                  <h1>Amenities And Eco System</h1>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <section>
                  <div class="row">
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label><strong>Indoor Amenities</strong></label>
                        @foreach($Amenities as $key=>$a)
                          @if($a->door=='1')
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="{{$a->id}}" name="indoor_amenities[]" id="Indoor_{{$key}}">
                              <label class="form-check-label" for="Indoor_{{$key}}">{{$a->feature}}</label>
                            </div>
                          @endif
                        @endforeach
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="form-group">
                        <label><strong>Outdoor Amenities</strong></label>
                        @foreach($Amenities as $key=>$a)
                          @if($a->door=='2')
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="{{$a->id}}" name="outdoor_amenities[]" id="Outdoor_{{$key}}">
                              <label class="form-check-label" for="Outdoor_{{$key}}">{{$a->feature}}</label>
                            </div>
                          @endif
                        @endforeach
                      </div>
                    </div>
                    <div class="col-lg-4">
    <div class="form-group">
        <label><strong>Eco System</strong></label>
        @foreach($EcoSystem as $key=>$e)
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="{{$e->id}}" name="eco_system[]" id="EcoSystem_{{$key}}" data-index="{{ $key }}">
                <label class="form-check-label" for="EcoSystem_{{$key}}">{{$e->facilities}}</label>
                <input type="text" class="form-control mt-2 eco-duration" name="ecosystem_duration[]" data-index="{{ $key }}" placeholder="Duration (e.g., 4 mins)">
            </div>
        @endforeach
    </div>
</div>
                  </div> 
                </section>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <div class="fields">     
                  <input type="button" value="Next"  class="submit next" onclick="GoNext('tab4','uptab4');">
                  <input type="button" value="Previous"  class="submit back pre" onclick="GoBack('tab2','uptab2');">
                </div>
              </div>
            </div>
          </div>
          <div class="tabing area" id="tab4">
            <div class="row">
              <div class="col-sm-12">
                <div class="head"><h1>Gallery</h1></div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12">
                <section >
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="form-group">
                        <label>Gallery Images (Select Multiple Images)</label>
                        <input multiple  type="file" id="property_image" name="property_image" class="form-control" placeholder="">
                      </div>
                    </div>
                    <div class="col-lg-12">
                      <ul class="upload_gallery_list" id="image_preview"></ul>
                    </div>
                  </div>
                </section>
                <section >
                <!-- <div class="row">
                    <div class="col-lg-12">
                      <div class="form-group">
                        <label>Banner Image</label>
                        <input type="file" id="banner" name="banner" class="form-control" placeholder="">
                      </div>
                    </div>
                </div> -->
                </section>

              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <div class="fields">     
                  <input type="button" value="Next"  class="submit next" onclick="GoNext('tab5','uptab5');">
                  <input type="button" value="Previous"  class="submit back pre" onclick="GoBack('tab3','uptab3');">
                </div>
              </div>
            </div>
          </div>
          <div class="tabing area" id="tab5">
            <div class="row">
              <div class="col-sm-12">
                <div class="head"><h1>Project Info</h1></div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <section >
                  <div class="row"> 
                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>Builder / Developer</label>
                        <select name="builder_developer_id" id="builder_developer_id" class="form-control" >
                          <option value="">Select Developer</option>
                          @foreach($Developer as $d)
                            <option value="{{$d->id}}">{{$d->developer}}</option>
                          @endforeach
                          <option value="0">Other Developer</option>
                        </select>
                        <span id="DeveloperErr"></span>
                      </div>
                    </div>
                    <div class="col-lg-3">
                      <div class="form-group">
                        <label>Other Developer</label>
                        <input type="text" id="other_developer" name="other_developer" class="form-control integer" placeholder="Other Developer">
                        <span id="OtherDeveloperErr"></span>
                      </div>
                    </div>
                    <div class="col-lg-12">
                    @php
                        $defaultDescription = '(Project Name) is an unmatched Residential property located in (Location). The project offers plenty of benefits that includes prime location, comfortable and lavish lifestyle, great amenities, healthy surroundings and high return. (Project Name) is strategically located and provides direct connectivity to nearly all other major points in and around (Location). It is one of the most reputable address of the city with easy access to many famed schools, shopping areas, hospitals, recreational areas, public gardens and several other public amenities.';
                    @endphp
                        <div class="form-group">
                            <label>About Project</label>
                            <textarea id="about_project" name="about_project" class="form-control" placeholder="Enter About Project">{{ old('about_project', $defaultDescription) }}</textarea>
                        </div>
                      </div>
                      <div class="col-lg-12">
                        <div class="form-group">
                          <label>PDF Brochure</label>
                          <input type="file" name="pdf_brochure" id="pdf_brochure" class="form-control" accept=".pdf">
                        </div>
                      </div>
                      <!-- <div class="col-lg-12">
                        <div class="form-group">
                          <label>Brochure (Select Multiple Brochure)</label>
                          <input multiple type="file" id="brochure" name="brochure[]" class="form-control" placeholder="">
                        </div>
                      </div> -->
                      <div class="col-lg-12">
                        <ul class="upload_gallery_list" id="BrochurePreview"></ul>
                      </div>
                     
                    <div class="col-lg-12" style="background-color: #e0e0e0; padding: 10px; border-radius: 5px;">
                      <label for="floorPlan"><b>Upload Floorplan Main (Choose one option only)</b></label>
                      <br>
                      <div class="form-group">
                        <label for="FloorPlan"> Upload files if you have</label>
                        <input type="file" name="FloorPlan[]" id="FloorPlan" class="form-control" multiple>
                        <span id="floorPlanErr"></span>
                      </div>
                      <div class="form-group">
                        <label for="floor_plan_option"> Select for enquiry if you don't have floorplan</label>
                        <div>
                          <input type="checkbox" name="floor_plan_option[]" value="1BHK" id="floorPlanOption2BHK"> 1BHK
                          <input type="checkbox" name="floor_plan_option[]" value="2BHK" id="floorPlanOption2BHK"> 2BHK
                          <input type="checkbox" name="floor_plan_option[]" value="3BHK" id="floorPlanOption3BHK"> 3BHK
                          <input type="checkbox" name="floor_plan_option[]" value="4BHK" id="floorPlanOption4BHK"> 4BHK
                          <input type="checkbox" name="floor_plan_option[]" value="5BHK" id="floorPlanOption5BHK"> 5BHK
                          <input type="checkbox" name="floor_plan_option[]" value="5BHK+" id="floorPlanOption5BHK"> 5BHK+
                        </div>
                        <span id="floorPlanOptionErr"></span>
                      </div>
                    </div>

                      <script>
                        const fileInput = document.getElementById('FloorPlan');
                        const checkboxes = document.querySelectorAll('input[name="floor_plan_option[]"]');
                        const floorPlanErr = document.getElementById('floorPlanErr');
                        const floorPlanOptionErr = document.getElementById('floorPlanOptionErr');

                        function checkSelection() {
                          floorPlanErr.textContent = '';
                          floorPlanOptionErr.textContent = '';

                          if (anyCheckboxChecked() && fileInput.files.length > 0) {
                            // Display error message and reset file input value
                            floorPlanErr.textContent = 'Please choose either to upload floor plans or select from checkboxes, not both.';
                            fileInput.value = ''; // Reset file input value
                          } else {
                            if (anyCheckboxChecked()) {
                              // Clear file input if a checkbox is selected (even if previously uploaded)
                              fileInput.value = ''; 
                            }

                            if (fileInput.files.length > 0) {
                              // Disable checkboxes when files are uploaded
                              checkboxes.forEach(checkbox => checkbox.disabled = true);
                            } else {
                              // Enable checkboxes when no files are uploaded
                              checkboxes.forEach(checkbox => checkbox.disabled = false);
                            }
                          }
                        }

                        function anyCheckboxChecked() {
                          let anyChecked = false;
                          for (const checkbox of checkboxes) {
                            if (checkbox.checked) {
                              anyChecked = true;
                              break;
                            }
                          }
                          return anyChecked;
                        }

                        // Event listeners for both elements
                        fileInput.addEventListener('change', checkSelection);
                        checkboxes.forEach(checkbox => checkbox.addEventListener('change', checkSelection));

                        // Initial check on page load
                        checkSelection();

                      </script>
                      
                      <div class="col-lg-12">
                        <ul class="upload_gallery_list" id="FloorPlanPreview"></ul>
                      </div>
              
                      <div class="form-group">
                        <label for="video-option">Video Option</label>
                        <select class="form-control" id="video-option" name="video_option" onchange="toggleVideoInput()">
                            <option value="url">Video URL</option>
                            <option value="file">Upload Video</option>
                        </select>
                    </div>

                    <div class="form-group" id="video-url-input">
                        <label for="video-url">Video URL</label>
                        <input type="text" class="form-control" id="video-url" name="video" placeholder="Enter video URL">
                    </div>

                    <div class="form-group" id="video-file-input" style="display: none;">
                        <label for="video-file">Upload Video</label>
                        <input type="file" class="form-control" id="video-file" name="video">
                    </div>
                      <div class="col-lg-12">
                        <div class="form-group">
                          <label>Virtual Tour</label>
                          <input  type="text" id="VirtualTour" name="VirtualTour" class="form-control" placeholder="Virtual Tour">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="fields">     
                    <input type="button" value="Next"  class="submit next" onclick="GoNext('tab6','uptab6');">
                    <input type="button" value="Previous"  class="submit back pre" onclick="GoBack('tab4','uptab4');">
                  </div>
                </div>
              </div>
            </div>
            <div class="tabing area" id="tab6">
              <div class="row">
                <div class="col-sm-12">
                  <div class="head"><h1>SEO</h1></div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <section >
                    <div class="row">                           
                      <div class="col-lg-12">
                        <div class="form-group">
                          <label>Meta Title</label>
                          <input type="text" name="meta_title" id="meta_title"  class="form-control" placeholder="Enter Property Meta Title">
                        </div>
                      </div>
                      <div class="col-lg-12">
                        <div class="form-group">
                          <label>Meta Keywords</label>
                          <input type="text" name="meta_keyword" class="form-control" placeholder="Enter Property Meta Keywords">
                        </div>
                      </div>
                      <div class="col-lg-12">
                        <div class="form-group">
                          <label>Meta Description</label>
                          <textarea  cols="10" rows="10" name="meta_description" class="form-control" placeholder="Enter Meta Description"></textarea>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="fields">     
                    <input type="button" value="Save" id="SaveBtn" class="submit next" onclick="Save();">
                    <input type="button" value="Previous"  class="submit back pre" onclick="GoBack('tab5','uptab5');">
                  </div>
                </div>
              </div>
            </div>     
        </div>
      </form>
    </div>
  </div>
</div>
<div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Map : <span class="selected_address"></span></h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body custom_modal">
                        <div class="map_section contact_map">
                            <div id="map-canvas" style="height: 400px; width: 100%;"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

<span id="SelectGalleryName" style="display: none;">
  <select class='form-control' name='ImageTitle[]'>
    <option value=''>Select</option>
    @foreach($GalleryName as $gallery)
      <option value='{{$gallery}}'>{{$gallery}}</option>
    @endforeach
  </select>
</span>
@stop

@section('javascript')
<!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{env('GMapKey')}}&libraries=places"></script> -->

<script src="{{asset('public/Admin')}}/js/styleSwitcher.js"></script>
<script src="{{asset('public/Admin')}}/plugins/jquery-steps/build/jquery.steps.min.js"></script>
<script src="{{asset('public/Admin')}}/js/plugins-init/jquery-steps-init.js"></script>
<script src="{{asset('public/Admin/CustomJS')}}/AddProperty.js"></script>
//////////////////Map/////////////////////
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('app.google_maps_key') }}&libraries=places&callback=initMap" async defer></script>
    <script>
        function initMap() {
            var input = document.getElementById('address');
            var autocomplete = new google.maps.places.Autocomplete(input, {
                componentRestrictions: { country: "IND" }
            });

            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    return;
                }

                document.getElementById('latitude').value = place.geometry.location.lat();
                document.getElementById('longitude').value = place.geometry.location.lng();
                
                var map = new google.maps.Map(document.getElementById('map-canvas'), {
                    center: place.geometry.location,
                    zoom: 15
                });
                new google.maps.Marker({
                    position: place.geometry.location,
                    map: map
                });

                document.querySelector('.selected_address').textContent = place.formatted_address;
            });
        }
  

$(function() {
  var imagesPreview = function(input) {
    if (input.files) {
      var filesAmount = input.files.length;
      var j = 0;
      for (var i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        $('#image_preview').html('');
        var SelectGalleryName = $('#SelectGalleryName').html();
        reader.onload = function(event) {
          var RandomNumber = Math.floor((Math.random() * 99999) + 1);
          var Html = "<li class='GalleryBaseImage"+RandomNumber+"'><div class='gallery_sec'><div class='name_input'>"+SelectGalleryName+"</div><div class='galery_img'><img src='"+event.target.result+"'><div class='cancl_btn'><a href='javascript:void(0)' onclick='GalleryBaseImage("+RandomNumber+")'><p>X</p></a></div></div><div class='under_img'><div class='radio_gal'><input type='radio' name='default' value='"+j+"'><input type='hidden' name='BaseImage[]' value='"+event.target.result+"' ></div></div></div></li>";
          $('#image_preview').append(Html);
          //alert(j);
          j++;
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };
  $('#property_image').on('change', function() {
    imagesPreview(this);
  });
});

function  BrochureBaseImage(ID) {
  $('.BrochureBaseImage'+ID).remove();
}
function  FloorPlanImage(ID) {
  $('.FloorPlanImage'+ID).remove();
}

function  GalleryBaseImage(ID) {
  $('.GalleryBaseImage'+ID).remove();
}

$(function() {
  var imagesPreview = function(input) {
    if (input.files) {
      var filesAmount = input.files.length;
      var j = 0;
      for (var i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        $('#BrochurePreview').html('');
        reader.onload = function(event) {
          var RandomNumber = Math.floor((Math.random() * 99999) + 1);
          var Html = "<li class='BrochureBaseImage"+RandomNumber+"'><div class='gallery_sec'><div class='galery_img'><img src='"+event.target.result+"'><div class='cancl_btn'><a href='javascript:void(0)' onclick='BrochureBaseImage("+RandomNumber+")'><p>X</p></a></div></div></div><input type='hidden' name='BrochureImage[]' value='"+event.target.result+"' ></li>";
          $('#BrochurePreview').append(Html);
          j++;
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };
  $('#brochure').on('change', function() {
    imagesPreview(this);
  });
});

$(function() {
  var imagesPreview = function(input) {
    if (input.files) {
      var filesAmount = input.files.length;
      var j = 0;
      for (var i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        $('#FloorPlanPreview').html('');
        reader.onload = function(event) {
          var RandomNumber = Math.floor((Math.random() * 99999) + 1);
          var Html = "<li class='FloorPlanImage"+RandomNumber+"'><div class='gallery_sec'><div class='galery_img'><img src='"+event.target.result+"'><div class='cancl_btn'><a href='javascript:void(0)' onclick='FloorPlanImage("+RandomNumber+")'><p>X</p></a></div></div></div><input type='hidden' name='FloorPlanImage[]' value='"+event.target.result+"' ></li>";
          $('#FloorPlanPreview').append(Html);
          j++;
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };
  $('#FloorPlan').on('change', function() {
    imagesPreview(this);
  });
});

function CalculateArea()
{
  var BuildUpFrom   = $("#buildup_area_from").val();
  var BuildUpTo     = $("#buildup_area_to").val();
  if(BuildUpFrom!='' && BuildUpTo!='')
  {    
    var CarperAreaFrom  = (BuildUpFrom/100)*20;
    var CarperAreaTo    = (BuildUpTo/100)*20;

    $("#carpet_area_from").val(BuildUpFrom-CarperAreaFrom);
    $("#carpet_area_to").val(BuildUpTo-CarperAreaTo);
  }
}
</script>
<script>
function toggleVideoInput() {
    var option = document.getElementById('video-option').value;
    if (option === 'url') {
        document.getElementById('video-url-input').style.display = 'block';
        document.getElementById('video-file-input').style.display = 'none';
    } else {
        document.getElementById('video-url-input').style.display = 'none';
        document.getElementById('video-file-input').style.display = 'block';
    }
}
</script>
<script>
    // Enable/Disable duration input based on checkbox state
    document.querySelectorAll('.form-check-input').forEach((checkbox) => {
        checkbox.addEventListener('change', function() {
            const durationInput = this.closest('.form-check').nextElementSibling;
            if (this.checked) {
                durationInput.disabled = false;
            } else {
                durationInput.disabled = true;
                durationInput.value = ''; // Clear the input when checkbox is unchecked
            }
        });
    });
</script>

<script>
      ClassicEditor
          .create(document.querySelector('#about_project'))
          .catch(error => {
              console.error(error);
          });
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const projectTitle = document.getElementById('title'); 
    const metaTitle = document.getElementById('meta_title');

    // Update metaTitle field as user types in projectTitle
    projectTitle.addEventListener('input', function () {
        metaTitle.value = projectTitle.value;
    });
});
</script>
@stop