@extends('layouts.main')

@section('container')



<!-- Add Map for Get Address of the Project 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlb7LAwfgFqLBPxwr4hlVjdaZTbsaX40w&libraries=places&callback=initAutocomplete" async defer></script>
--><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBW_Ni8v0zhoTjlvMNghL9xvXZe5wTCr_s&libraries=places&callback=initAutocomplete" async defer></script>
<style>
div#gmap
{
	width: 50%;
	height: 500px;
	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>
  Edit 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('AdminListingEdit')}}" method="post" class="form-horizontal" enctype="multipart/form-data" >
        		{!! 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">
			            	
			            	@foreach($fetch as $data)
			            	
			            	 <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 markers = [];
                        var main_lat=;
                        var main_lng=;
                        var location_string = jQuery.parseJSON('{"lat": '+main_lat+', "lng": '+main_lng+'}');

                        var map = new google.maps.Map(document.getElementById('gmap'), {
                            center: location_string,
                            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());
                        });


                        // 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);
                        });
                        //var im="http://i.giphy.com/iRZ4vTYl0g5Dq.gif";
                       var im=document.location.origin+'/pin.png';

                        var markers= [];
                        markers.push(new google.maps.Marker({
                            position: location_string,
                            map: map,
                            icon: im
                        }));
                    }

                </script>
			            	
			            	
			            				            	 <input class="form-control" placeholder="Header" name="listing_header" value="{{$data->listing_header}}"   type="text">
			            </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">
	            			<p style="display: none">	{{$property=$data->property}}</p>
	            				  <option value="">---</option>
	            				<option value="Buy">BUY</option> <option value="Sell">SELL</option><option value="Rent">RENT</option><option value="Let">LET</option>	
	            			</select>
	           			 </div>
	            		<div class="col-md-4">
		            	  @if ($errors->has('property'))
		            			<div class="alert alert-warning flash">
		                     		 <button class="close" data-dismiss="alert" type="button">×</button>
		                      			{{ $errors->first('property') }} 
		                    	</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="">
            </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="">
            </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-10">
              {{--<textarea class="form-control" rows="5" placeholder="Descripition" name="description" type="text" >{{$data->description}}</textarea>--}}
              <textarea  name="description" id="summernote">{{$data->description}}</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">Edit Photo</label>
                        <!-- Gallery with filtering and actions -->
                        <div class="col-lg-9">
                            <div class="widget-container fluid-height">
                                <!--  <div class="heading">
                                   <i class="fa fa-th-large"></i>Filtering and Actions
                                <div class="gallery-filters list-inline btn-group pull-right">
                                  <a class="btn btn-sm btn-primary-outline selected" data-filter="*" href="#">All</a><a class="btn btn-sm btn-primary-outline" data-filter=".filter1" href="#">Filter 1</a><a class="btn btn-sm btn-primary-outline" data-filter=".filter2" href="#">Filter 2</a>
                                </div>
                              </div>-->
                                <div class="widget-content">
                                    <div class="gallery-container">
                                        <div class="dropme grid" style="width:auto">


	                					


                                        </div>
                                        <!-- getting value from jquery for image drag and drop  -->

                                      	<input type="hidden" name="image_old" value="">
	                 					<input type="hidden" id="imagejson" name="image_json">
	                 					<input type="hidden" name="id" value="{{$data->id}}">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Gallery with filtering and actions --><!-- Gallery carousel -->
                        <!-- End Gallery carousel -->
                    </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-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 class="col-lg-5 fileupload-progress fade">
                    
                      <div class="progress-extended">
                         
                      </div>
                    </div>
                  </div>
                  <table class="table table-striped" role="presentation">
                    <tbody class="files"></tbody>
                  </table>
            </div>
          </div>
           
          
          
        
           <div class="form-group">
            <label class="control-label col-md-2"  id="a">Choose Address</label>
            <input type="hidden" id="lat" name="address_lat" required/>
			<input type="hidden" id="lon" name="address_long" required/>
			<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>
          @endforeach
           
          <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>
                                                        function alertDeleteListing(index,id){
                                                            var APP_URL = {!! json_encode(url('/')) !!}
                                                            var token=$('input[name="_token"]').val();
                                                            swal({
                                                                    title: "Are you sure?",
                                                                    text: "You will not be able to recover this imaginary Record!",
                                                                    type: "warning",
                                                                    showCancelButton: true,
                                                                    closeOnConfirm: false,
                                                                    confirmButtonText: "Yes, delete it!",
                                                                    showLoaderOnConfirm: true,
                                                                },
                                                                function(){
                                                                    $.ajax(
                                                                        {
                                                                            type: "post",
                                                                            url: APP_URL+"/panel/listing_image_edit",
                                                                            data: "id="+id+'&index='+index+'&_token='+token,
                                                                            success: function(data){
                                                                                $("#share-records-image"+index).hide();
                                                                            }
                                                                        }
                                                                    )
                                                                        .done(function(data) {
                                                                            swal("success!", "Share has been Deleted successfully !", "success");
                                                                            $('#orders-history').load(document.URL +  ' #orders-history');
                                                                        })
                                                                        .error(function(data) {
                                                                            swal("Oops", "We couldn't connect to the server!", "error");
                                                                        });
                                                                });
                                                        };
                                                    </script>
<script>
$('.dropme').dropme('enable');
$('.exclude').dropme({
				items: ':not(.disabled)'
			});
			$('.connected').dropme({
				linkTo: '.connected'
			});
			var imgs =document.getElementsByClassName("imgValue");
				    var imgSrcs = [];
					for (var i = 0; i < imgs.length; i++) 
					{
				        imgSrcs.push(imgs[i].name);
				    }
				    
					
			    			
</script>
@stop