@extends('layouts.app')

@section('content')
<div class="content-page">
	<div class="content">

		<!-- Start Content-->
		<div class="container-fluid">

			<!-- start page title -->
			<div class="row mt-3 mb-3">
				<div class="col-8 col-sm-8 col-md-8 col-lg-8">
					<div class="page-title-box">
						<!--<h4>Edit Admin User</h4>-->
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item">
								<a href="{{ route('dashboard') }}">Dashboard</a>
							</li>
							<li class="breadcrumb-item">
								<a href="{{ route('sellersList') }}">Sellers</a>
							</li>
							<li class="breadcrumb-item">
								<a href="{{ route('sellerProfile',$user->id) }}">Seller Profile</a>
							</li>
							
							<li class="breadcrumb-item active">
								Edit Seller Address
							</li>
						</ol>
					</div>
				</div>
				
			</div>
			<div class="row">
				<div class="col-12">

					<form class="form-horizontal" action="{{ route('saveEditSellerAddress',$user->id) }}" method="post" enctype="multipart/form-data" id="adminUserForm">
						@csrf
						<div class="card">
							<div class="card-header bg-dark ">
								<div class="row">
									<div class="col-6 col-sm-8 col-md-8 col-lg-8">
										<h4 class="text-white "><i class=" mdi mdi-pencil-outline"></i>Edit Seller Address</h4>
									</div>
									<div class="col-6 col-sm-4 col-md-4 col-lg-4 text-right">
										<button type="submit" class="btn btn-success waves-effect waves-light">
											<i class="mdi mdi-content-save"></i> Save
										</button>
										<a href="{{ route('sellersList') }}">
											<button type="button" class="btn btn-danger waves-effect waves-light">
												<i class="fa fa-user-friends"></i> View All
											</button>
										</a>
									</div>
								</div>
							</div>
							<div class="card-body">
								<div class="row">
									<div class="col-6 offset-2">
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right"><span class="text-danger">*</span>Address One</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="text" class="form-control @error('name') is-invalid @enderror" value="{{$address->address1 ?? ''}}" name="address1" id="" placeholder="Address One">
												@if ($errors->has('address1'))
                                                      <span class="text-danger">{{ $errors->first('address1') }}</span>
                                                @endif
											</div>
										</div>
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right">Address Two</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="text" class="form-control @error('name') is-invalid @enderror" value="{{$address->address2 ?? ''}}" name="address2" id="" placeholder="Address Two">
												@if ($errors->has('address2'))
                                                      <span class="text-danger">{{ $errors->first('address2') }}</span>
                                                @endif
											</div>
										</div>
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right">Landmark</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="text" class="form-control @error('landmark') is-invalid @enderror" value="{{$address->landmark ?? ''}}" name="landmark" id="" placeholder="Landmark">
												@if ($errors->has('landmark'))
                                                      <span class="text-danger">{{ $errors->first('landmark') }}</span>
                                                @endif
											</div>
										</div>
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right">City</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="text" class="form-control @error('city') is-invalid @enderror" value="{{$address->city ?? ''}}" name="city" id="" placeholder="City">
												@if ($errors->has('city'))
                                                      <span class="text-danger">{{ $errors->first('city') }}</span>
                                                @endif
											</div>
										</div>
										<hr>
										
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right"><span class="text-danger">*</span>State</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="text" class="form-control @error('state') is-invalid @enderror" value="{{$address->state ?? ''}}" name="state" id="" placeholder="State">
												@if ($errors->has('state'))
                                                      <span class="text-danger">{{ $errors->first('state') }}</span>
                                                @endif
											</div>
										</div>
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right">Country</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="text" class="form-control @error('country') is-invalid @enderror" value="{{ $address->country ?? ''}}" name="country" id="" placeholder="Country">
												@if ($errors->has('country'))
                                                      <span class="text-danger">{{ $errors->first('country') }}</span>
                                                @endif
											</div>
										</div>
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right"><span class="text-danger">*</span>Postcode</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="text" id="addressGeoLocation" class="form-control geoLocation" value="{{ $address->zip ?? ''}}" placeholder="Select Postcode" aria-label="Recipient's username" aria-describedby="basic-addon2">
                                                @if ($errors->has('zip'))
                                                      <span class="text-danger">{{ $errors->first('zip') }}</span>
                                                @endif
											</div>
												<input type="hidden" id="lat" name="lat" value="{{ $address->lat ?? ''}}">
                                                <input type="hidden" id="lng" name="long" value="{{ $address->long ?? ''}}">
                                                <input type="hidden" id="code" name="postcode" value="{{ $address->zip ?? ''}}">
        		                                <div class="geoResponse" style="max-height:250px;overflow-y: scroll;">
        		                                </div>
        		                                <div class="col-sm-12">
        		                                    <div class="form-group">
        		                                        <br>
        		                                        <div id='map' style="border:0px solid #999;width:0%;height:0px;position:static"></div>
        											</div>
        		                                </div>
										</div>
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right"><span class="text-danger">*</span>Opening Time</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="time" id="preloading-timepicker" name="open_time"  value="{{$address->open_time ?? ''}}" name="open_time" class="form-control" required placeholder="Opening Time">
<!-- 												<input type="text" class="form-control @error('open_time') is-invalid @enderror" value="{{$address->open_time ?? ""}}" name="open_time" id="" required placeholder="Opening Time"> -->
												@if ($errors->has('open_time'))
                                                      <span class="text-danger">{{ $errors->first('open_time') }}</span>
                                                @endif
											</div>
										</div>
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right"><span class="text-danger">*</span>Closing Time</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												 <input type="time" id="preloading-timepicker-out" name="close_time" class="form-control" value="{{$address->close_time ?? ''}}" name="close_time" id="" required placeholder="Closing Time">
<!-- 												<input type="text" class="form-control @error('close_time') is-invalid @enderror" value="{{$address->close_time ?? ""}}" name="close_time" id="" required placeholder="Closing Time"> -->
												@if ($errors->has('close_time'))
                                                      <span class="text-danger">{{ $errors->first('close_time') }}</span>
                                                @endif
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
						<!-- end card-->

					</form>
				</div>
				<!-- end col -->
			</div>
			<!-- end row -->

		</div>
		<!-- container -->

	</div>
	<!-- content -->

	

</div>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCrFNQkMum3LWksMvKihlccxBtZxqv1AiE&libraries=places"></script>
	  <script>
		function initialize() {
		    var myLatlng = new google.maps.LatLng(46.8182,8.2275);
		    var myOptions = {
		      zoom: 100,
		      center: myLatlng,
		      mapTypeId: google.maps.MapTypeId.ROADMAP
		    }
		    var map = new google.maps.Map(document.getElementById("map"), myOptions);
		    
		    var input = document.getElementById('addressGeoLocation');
		    var searchBox = new google.maps.places.SearchBox(input);
		    
		    map.addListener('bounds_changed', function() {
	          searchBox.setBounds(map.getBounds());
	        });
		    var markers = [];
		    var mark;
		    searchBox.addListener('places_changed', function() {
		          var places = searchBox.getPlaces();
				  var mark;
		          if (places.length == 0) {
		            return;
		          }
		
		          // Clear out the old markers.
		          markers.forEach(function(marker) {
		            marker.setMap(null);
		          });
		          markers = [];
		          if(typeof(mark)=="Object"){
		          	mark.setMap(null);
		          }
				  
		          // For each place, get the icon, name and location.
		          var bounds = new google.maps.LatLngBounds();
		          places.forEach(function(place) {
		          	//console.log(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)
		            };
					var iconImage = "{{asset('images/outlet50.png')}}";
		            mark = new google.maps.Marker({
		              map: map,
		              icon: iconImage,
		              title: place.name,
		              position: place.geometry.location,
		              draggable:true
		            });
		            //set initial coordinates on selection of the place
		            //console.log(mark.title);
		        	document.getElementById('code').value = mark.title;
		            document.getElementById('lat').value = (mark.position.lat()).toFixed(8);
		            document.getElementById('lng').value = (mark.position.lng()).toFixed(8);
		            
		            //handeling map marker dragging for location coordinates
		            mark.addListener(
				        'drag',
				        function() {
				        	console.log(mark.title);
				        	document.getElementById('code').value = mark.title;
				            document.getElementById('lat').value = (mark.position.lat()).toFixed(8);
				            document.getElementById('lng').value = (mark.position.lng()).toFixed(8);
				        }
				    );
		            
		            if (place.geometry.viewport) {
		              // Only geocodes have viewport.
		              bounds.union(place.geometry.viewport);
		            } else {
		              bounds.extend(place.geometry.location);
		            }
		          });
		          map.fitBounds(bounds);
		    });
		  }
		  initialize();
		  

		  
	  </script>
	  
<script>
	$(function() {
		buildValidation();
	});

	function buildValidation() {
		var bootstrapValidat = $('#adminUserForm').data('bootstrapValidator');

		if (bootstrapValidat != undefined) {
			bootstrapValidat.destroy();
		}

		$('#adminUserForm').bootstrapValidator({
			// Only disabled elements are excluded
			// The invisible elements belonging to inactive tabs must be validated
			excluded : [':disabled'],
			//container: '#valMessages',
			feedbackIcons : {
				valid : 'fa fa-check',
				invalid : 'fa fa-times',
				validating : 'fa fa-refresh'
			},
			fields : {
				name : {
					validators : {
						notEmpty : {
							message : 'User Display name is required'
						}
					}
				},
				role : {
					validators : {
						notEmpty : {
							message : 'User Role is required'
						}
					}
				},
				
				enabled : {
					validators : {
						notEmpty : {
							message : 'Enabled Status is required'
						}
					}
				},
				country_code : {
					validators : {
						integer : {
							message : 'Only numeric country codes are allowed'
						}
					}
				},
				phone : {
					validators : {
						numeric : {
							message : 'Only Numbers are allowed'
						}
					}
				},
				email : {
					validators : {
						notEmpty : {
							message : 'Email is required'
						},
						emailAddress: {
	                        message : 'Invalid Email Address'
	                    }
					}
				},
				password : {
					validators : {
						regexp: {
	                        regexp: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})',
	                        message: 'Password must contain 1 Small, 1 Upper case letter, 1 number and 1 special character with minimum length of 8'
	                    }
					}
				},
				photo : {
					validators : {
						file : {
							extension : 'jpeg,png,svg,jpg,gif',
							//type: 'image/jpeg,image/png',
							//maxSize: 2048 * 1024,
							message : 'Only JPEG, PNG, SVG, GIF or JPG are allowed for Featured Image'
						}
					}
				},
			}
		});
		
	}

	 		        
		        $("#preloading-timepicker").flatpickr({
		        	enableTime: !0,
		            noCalendar: !0,
		            dateFormat: "H:i",
		            defaultDate: "12:00"
		        });
		        $("#preloading-timepicker-out").flatpickr({
		        	enableTime: !0,
		            noCalendar: !0,
		            dateFormat: "H:i",
		            defaultDate: "11:00"
		        });
</script>
@endsection