@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" onkeypress="HideErr('TitleErr');">
                        <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>
                    <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}}">
                            <label class="form-check-label" for="EcoSystem_{{$key}}">{{$e->facilities}}</label>
                          </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>Gallary 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">
                        <div class="form-group">
                          <label>About Project</label>
                          <textarea  cols="10" rows="10" id="about_project" name="about_project" class="form-control" placeholder="Enter About Project"></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">
                        </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">
                        <div class="form-group">
                          <label>Floor Plan </label>
                          <input multiple type="file" id="FloorPlan" name="FloorPlan[]" class="form-control" placeholder="">
                        </div>
                      </div> -->

                      <div class="col-lg-6">
    <div class="form-group">
        <label for="floor_plan">Upload Floor Plans</label>
        <input type="file" name="FloorPlan[]" id="FloorPlan" class="form-control" multiple>
        <span id="floorPlanErr"></span>
    </div>
</div>

<div class="col-lg-6">
    <div class="form-group">
        <label for="floor_plan_option">Select Floor Plan</label>
        <select name="floor_plan_option[]" id="floor_plan_option" class="form-control" multiple>
            <option value="2BHK">2BHK</option>
            <option value="3BHK">3BHK</option>
            <option value="4BHK">4BHK</option>
            <option value="5BHK">5BHK</option>
        </select>
        <span id="floorPlanOptionErr"></span>
    </div>
</div>

<script>
    document.getElementById('FloorPlan').addEventListener('change', function() {
        if (this.files.length > 0) {
            document.getElementById('floor_plan_option').style.display = 'none';
            document.querySelector('label[for="floor_plan_option"]').style.display = 'none';
        } else {
            document.getElementById('floor_plan_option').style.display = 'block';
            document.querySelector('label[for="floor_plan_option"]').style.display = 'block';
        }
    });

    document.getElementById('floor_plan_option').addEventListener('change', function() {
        if (this.selectedOptions.length > 0) {
            document.getElementById('FloorPlan').style.display = 'none';
            document.querySelector('label[for="FloorPlan"]').style.display = 'none';
        } else {
            document.getElementById('FloorPlan').style.display = 'block';
            document.querySelector('label[for="FloorPlan"]').style.display = 'block';
        }
    });
</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" 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={{ env('GMapKey') }}&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>

@stop