@extends('layouts.app')
@section('head')
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css">

@endsection
@section('content')
	<div class="container">
	    <div class="row">
	        <div class="panel panel-default">
	            <div class="panel-heading">{{$title}}</div>
	            <div class="panel-body">
					@yield('container')
				</div>
	        </div>
	    </div>
	</div>
	@yield('scripts')
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWK2NJxKlLXK8tQ5ZVgTy7n0VFhIhMOxw&libraries=places&callback=initAutocomplete" defer>
	</script>
	<script>
    	var marker;
		var map;
		var markers = [];
		var geocoder;
		var infowindow;
		function initAutocomplete() 
		{
			map = new google.maps.Map(document.getElementById('map'), 
			{
				center: 
				{
					lat: 19.4325933, 
					lng: -99.1332306
				},
				zoom: 13,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			});
            geocoder = new google.maps.Geocoder;
            infowindow = new google.maps.InfoWindow;
            // 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);
            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function() 
            {
				searchBox.setBounds(map.getBounds());
            });
			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) 
				{
					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 = [];
					marker = new google.maps.Marker(
					{
						map: map,
						icon: icon,
						title: place.name,
						position: place.geometry.location
					});
					markers.push(marker);
					if (place.geometry.viewport) 
					{
						// Only geocodes have viewport.
						bounds.union(place.geometry.viewport);
					} 
					else 
					{
						bounds.extend(place.geometry.location);
					}
				});
				geocodeMar();
				map.fitBounds(bounds);
			});
            map.addListener('click', function(event) 
            {
            	console.log(event.latLng)
				addMarker(event.latLng);
            });
                	  addMarker(prevLatLng)

		}
		function geocodeMar()
		{
			document.getElementById('latitud').value = marker.position.lat();
			document.getElementById('longitud').value = marker.position.lng();
			var latlng = 
			{
				lat: parseFloat(document.getElementById('latitud').value), 
				lng: parseFloat(document.getElementById('longitud').value)
			};
			geocoder.geocode({'location': latlng}, function(results, status) 
			{
				if (status === google.maps.GeocoderStatus.OK) 
				{
					$('#zipCode').val('');

					if (results[1]) 
					{
						var addressComps = results[1].address_components
						for (var i = addressComps.length - 1; i >= 0; i--) 
						{
							if (addressComps[i].types[0] == 'postal_code') 
							{
								$('#zipCode').val(addressComps[i].short_name);
							}
						}
						document.getElementById('direccion').value = results[1].formatted_address;
						infowindow.setContent(results[1].formatted_address);
						infowindow.open(map, markers[0]);
					} 
					else 
					{
						window.alert('No results found');
					}
				} 
				else 
				{
					window.alert('Geocoder failed due to: ' + status);
				}
			});
		}
		function addMarker(location) 
		{
			markers.forEach(function(marker) 
			{
				marker.setMap(null);
			});
			markers = []
			marker = new google.maps.Marker(
			{
				position: location,
				map: map
			});
			markers.push(marker);
			geocodeMar();
		}
	</script>
	
@endsection