@extends('layouts.main')

@section('container')



<!-- Add Map for Get Address of the Project -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBW_Ni8v0zhoTjlvMNghL9xvXZe5wTCr_s&libraries=places&callback=initAutocomplete" async defer></script>

<script>
  // This example adds a search box to a map, using the Google Place Autocomplete
  // feature. People can enter geographical searches. The search box will return a
  // pick list containing a mix of places and predicted search terms.

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

  function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('gmap'), {
  center: {lat: 4.2105, lng: 101.9758},
  zoom: 7,
  mapTypeId: 'roadmap'
});

// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

google.maps.event.addListener(map, "click", function(event) {
	// get lat/lon of click
	var clickLat = event.latLng.lat();
	var clickLon = event.latLng.lng();
	document.getElementById('lat').value = clickLat;
	document.getElementById('lon').value = clickLon;
	for(i=0; i<markers.length; i++){
	    markers[i].setMap(null);
	}
	markers = [];
	markers.push(new google.maps.Marker({
		map: map,
		position: new google.maps.LatLng(clickLat,clickLon)
		
	}));
});

// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
  searchBox.setBounds(map.getBounds());
});

var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
  return;
}
var icon = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

// Create a marker for each place.
markers.push(new google.maps.Marker({
  map: map,
  icon: icon,
  title: place.name,
  position: place.geometry.location
}));

if (place.geometry.viewport) {
  // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
  }

</script>
<style>
div#gmap
{
	width: 100%;
	height: 400px;
	border:double;
}
#c
{
	text-align:left;
}
.controls 
{
   margin-top: 10px;
   border: 1px solid transparent;
   border-radius: 2px 0 0 2px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   height: 32px;
   outline: none;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input 
{
	background-color: #fff;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	margin-left: 12px;
	padding: 0 11px 0 13px;
	text-overflow: ellipsis;
	width: 300px;
}
#pac-input:focus {
	border-color: #4d90fe;
}
.pac-container {
	font-family: Roboto;
}
#type-selector 
{
	color: #fff;
	background-color: #4d90fe;
	padding: 5px 11px 0px 11px;
}
#type-selector label 
{
	font-family: Roboto;
	font-size: 13px;
	font-weight: 300;
}
#target 
{
	width: 345px;
}

</style>
<!-- Add Map for Get Address of the Project -->
<div class="page-title">
  <h1>
   Add  Listing
  </h1>
</div>
<div class="row">
<div class="col-lg-1"></div>	
  <div class="col-lg-10">
    <div class="widget-container fluid-height clearfix" style="border: 1px solid #000;">
 		<div class="widget-content padded">
        <!--<form action="action" method="post" class="form-horizontal" enctype="multipart/form-data" id="fileupload">-->
        	<form action="{{route('AdminListingAction')}}" method="post" class="form-horizontal" enctype="multipart/form-data" autocomplete="off" >
        		{!! csrf_field() !!}
		          <div class="form-group">
			           <input type="hidden" name="_token" value="{{ csrf_token() }}">
			            <label class="control-label col-md-2"  id="a">Header</label>
			            <div class="col-md-4">
			              <input class="form-control" placeholder="Header" name="listing_header" value="{{old('listing_header')}}"   type="text" maxlength="37" required="">
			            </div>
			            <div class="col-md-4">
		            	  @if ($errors->has('listing_header'))
		            			<div class="alert alert-warning flash">
		                     		 <button class="close" data-dismiss="alert" type="button">×</button>
		                      			{{ $errors->first('listing_header') }} 
		                    	</div>
		            	@endif
	           			</div> 
         		 </div>
				<div class="form-group">
	            	<label class="control-label col-md-2"  id="a">Property</label>
	            		<div class="col-md-4">
	            		<select class="form-control" name="property" value="{{old('property_type')}}" required><option value="Sell">SELL</option><option value="Buy">BUY</option><option value="Rent">RENT</option><option value="Let">LET</option></select>
	           			</div>
	            		<div class="col-md-4">
		            	  	@if ($errors->has('property_type'))
		            			<div class="alert alert-warning flash">
		                     		 <button class="close" data-dismiss="alert" type="button">×</button>
		                      			{{ $errors->first('property_type') }} 
		                    	</div>
		            		@endif
            			</div>
         		 </div>
         		 <div class="form-group">
	            	<label class="control-label col-md-2"  id="a">Property Type</label>
	            		<div class="col-md-4">
	            			<!--code for property type -->
	            				
						</select>
	           			 </div>
	            		<div class="col-md-4">
		            	  @if ($errors->has('property_type'))
		            			<div class="alert alert-warning flash">
		                     		 <button class="close" data-dismiss="alert" type="button">×</button>
		                      			{{ $errors->first('property_type') }} 
		                    	</div>
		            	@endif
            			</div>
         		 </div>
         		 
          <!--multi image file upload-->
           <div class="form-group">
            <label class="control-label col-md-2"  id="a" >Price</label>
            <div class="col-md-4">
              <input class="form-control numeric" placeholder="Price" name="price" type="text" value="{{old('price')}}">
            </div>
            <div class="col-md-4">
            	  @if ($errors->has('price'))
            			<div class="alert alert-warning flash">
                     		 <button class="close" data-dismiss="alert" type="button">×</button>
                      			{{ $errors->first('price') }} 
                    	</div>
            	@endif
            </div> 
          </div>
           <div class="form-group">
            <label class="control-label col-md-2"  id="a">Built-Up</label>
            <div class="col-md-4">
              <input class="form-control numeric" placeholder="Built-Up" name="built_up" type="text" value="{{old('built_up')}}">
            </div>
            <div class="col-md-4">
            	  @if ($errors->has('built_up'))
            			<div class="alert alert-warning flash">
                     		 <button class="close" data-dismiss="alert" type="button">×</button>
                      			{{ $errors->first('built_up') }} 
                    	</div>
            	@endif
            </div> 
          </div>
          <div class="form-group">
            <label class="control-label col-md-2"  id="a">Description</label>
            <div class="col-md-8">
            	<textarea  name="description" id="summernote"></textarea>
            
            </div>
            <div class="col-md-4">
            	  @if ($errors->has('description'))
            			<div class="alert alert-warning flash">
                     		 <button class="close" data-dismiss="alert" type="button">×</button>
                      			{{ $errors->first('description') }} 
                    	</div>
            	@endif
            </div> 
          </div>
           <div class="form-group">
            <label class="control-label col-md-2">Upload Photo</label>
            <div class="col-md-8">
               <div class="row fileupload-buttonbar">
                    <div class="col-lg-12  col-sm-7 col-xs-7">
                    	
                    <!--  <span class="btn btn-success fileinput-button"><i class="fa fa-plus"></i><span>Add files...</span><input id="upload_file" multiple="" name="upload[]" type="file"></span><!--<button class="btn btn-warning cancel" type="reset"><i class="fa fa-ban"></i><span>Cancel upload</span></button>-->
                      <!--<div class="fileupload-loading"></div>-->
                       <input type="file" name="upload[]" id="filer_input" multiple="multiple">
		   
                    </div>
                  
                  </div>
                  <table class="table table-striped" role="presentation">
                    <tbody class="files"></tbody>
                  </table>
            </div>
          </div>
           
           <div class="form-group">
            <label class="control-label"  id="a">Choose Address</label>
             <div class="col-md-12">
               <div class="row fileupload-buttonbar">
                    <div class="col-lg-12">
			            <input type="hidden" id="lat" name="address_lat"/>
						<input type="hidden" id="lon" name="address_long"/>
						<input id="pac-input" class="controls" type="text" placeholder="Search Box">
						<div id="gmap"></div>
							@if ($errors->has('address_lat'))
            					<div class="alert alert-warning flash">
                     		 		<button class="close" data-dismiss="alert" type="button">×</button>
                      				<p>Address Location Required*</p> 
                    			</div>
            				@endif
           				</div>
           			</div>
           		</div>
           </div>				
          
           
          <div class="form-group">
           <br><br> 
            <div class="col-md-12" align="right">
              <p>*Note: ALl Field Required</p>
              <button class="btn btn-primary" type="submit">Submit</button>
            </div>
          </div>
      </form>
      </div>
    </div>
  </div>
<div class="col-lg-1"></div>  
</div>
<script>
$('.dropme').dropme('enable');
$('.exclude').dropme({
				items: ':not(.disabled)'
			});
			$('.connected').dropme({
				linkTo: '.connected'
			});
</script>
@stop