{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:layout name="Default" />
	
	<f:section name="main">
		<div class="dealersearch">
			<div class="row">
				<div class="col-md-4 ml-auto mr-auto">
					<f:form id="dealersearchform" action="result" pageUid="{settings.resultPid}" method="post" class="dealer-searchform mb-2">
							<input type="hidden" name="tx_ncndealersearch_dealersearch[lat]" data-geo="lat" />
							<input type="hidden" name="tx_ncndealersearch_dealersearch[lng]" data-geo="lng" />
							<input type="hidden" name="tx_ncndealersearch_dealersearch[zip]" data-geo="postal_code" />
							<input type="hidden" name="tx_ncndealersearch_dealersearch[location]" data-geo="location" />
							<input type="hidden" name="tx_ncndealersearch_dealersearch[route]" data-geo="route" />
							<input type="hidden" name="tx_ncndealersearch_dealersearch[street_number]" data-geo="street_number" />
							<input type="hidden" name="tx_ncndealersearch_dealersearch[country]" data-geo="country_short" />
							<input type="hidden" name="tx_ncndealersearch_dealersearch[city]" data-geo="locality" />
							<input type="hidden" name="tx_ncndealersearch_dealersearch[type]" data-geo="location_type" />

							<div class="input-group md-form form-sm form-2 pl-0">
								<f:form.textfield id="location" value="{location}" class="location form-control form-control-lg" required="true" name="location" placeholder="PLZ, Ort" />
								
								<div class="input-group-append">
									<button type="submit" class="btn btn-primary btn-lg"><i class="fas fa-search"></i> {f:translate(key: 'dealersearch.finddealer', extensionName: 'ncn_rivierapool_template')}</button>
								</div>
							</div>

							
						</f:form>
				</div>
			</div>
		</div>

		<v:asset.script path="typo3conf/ext/ncn_dealersearch/Resources/Public/Js/jquery.geocomplete.min.js" />
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVb_um4v67e7aPfHvw9-D9N5M470pg9Z0&amp;libraries=places"></script>
    <script type="text/javascript">
			document.addEventListener('DOMContentLoaded', function(){ 
        $(".location").geocomplete({

		  details: "#dealersearchform",
		  detailsAttribute: "data-geo",
		  /* country: ['de', 'ch', 'nl', 'fr', 'at'] */
		  /*types: ['(cities)'],*/
		  /*types: ['geocode', 'address', '(cities)']*/
        })
          .bind("geocode:result", function(event, result){

			if($('#dealersearchform input[data-geo="postal_code"]').val().length == 0){
				  // PLZ per Reverse Geocode
				  console.log('Reverse Geocode');

		 		  var geocoder = new google.maps.Geocoder;
	          	  var latlng = {lat: parseFloat($('#dealersearchform input[data-geo="lat"]').val()), lng: parseFloat($('#dealersearchform input[data-geo="lng"]').val())};
				  geocoder.geocode({'location': latlng}, function(results, status) {
				  	console.log(results);
				    if (status === google.maps.GeocoderStatus.OK) {

				      if (results.length > 0) {
				      	result_loop: 
				      	for(x in results){
					      	var components = results[x].address_components;
					        for(i in components){
					        	if(components[i].types[0] == 'postal_code'){

           							// Submit Form
					        		$('#dealersearchform input[data-geo="postal_code"]').val(components[i].short_name);
           							$('#dealersearchform').submit();
					        		break result_loop;
					        	}
					        }
				        }
				      } else {
				        console.log('No results found');
				      }
				    } else {
				      console.log('Geocoder failed due to: ' + status);
				    }

				  });
				
			} else{
            	// Submit Form
           		$('#dealersearchform').submit();
			}
          })
          .bind("geocode:error", function(event, status){
            console.log("ERROR: " + status);
          });
        
        
			}, false);
    </script>


</f:section>