<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDgFNMkZRmDv6tkxbKut5eIqaQbcM8zS8&sensor=true&libraries=places"></script>
<script src="js/jquery.placepicker.js"></script>
<script>
      $(document).ready(function() {
        // Basic usage
        $(".placepicker").placepicker();
      }); // END document.ready
</script>
<style>
      .placepicker-map {
        width: 100%;
        height: 300px;
      }
      .another-map-class {
        width: 100%;
        height: 300px;
      }
      .pac-container {
        border-radius: 5px;
      }
</style>

<div class="page-content-wrapper">
                <div class="page-content">
                    <div class="page-bar">
                        <div class="page-title-breadcrumb">
                            <div class=" pull-left">
                                <div class="page-title"><?php echo 'Available Location - <span style="color:black;">'.getTechnicianName($technicianId).'</span>'; ?></div>
                            </div>
                            <ol class="breadcrumb page-breadcrumb pull-right">
                                <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="index.php?page=home">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                                </li>
                                <li><a class="parent-item" href="index.php?page=view_technician&id=<?php echo $technicianId; ?>">Technician</a>&nbsp;<i class="fa fa-angle-right"></i></li><li class="active">Add Technician</li>
                            </ol>
                        </div>
                    </div>
<div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="card card-box">
                                <div class="card-head">
                                    <header>Available Location</header>                                    
                                </div>
                                <div class="card-body" id="bar-parent1">
                                	
                                	<?php if(isset($error) && $error!='') { ?> 
                                	<div class="alert alert-danger"><?php echo $error; ?></div>
                                	<?php } else if(isset($success) && $success!=''){ ?>                                		
                                		<div class="alert alert-success"><?php echo $success; ?></div>
                                	<?php } else if(isset($_REQUEST['success'])){ ?>                                		
                                		<div class="alert alert-success"><?php echo $_REQUEST['success']; ?></div>
                                	<?php } ?>
                                	                                	
                                    <form action="" id="form_user_add" class="form-horizontal" method="post" enctype="multipart/form-data">
                                        <div class="form-body"> 
                                        	
                                            <div class="form-group row">
                                                <label class="control-label col-md-3">Location<span class="required"> * </span></label>
                                                <div class="col-md-4">         
                                                	<input id="place" name="place" class="placepicker form-control" onblur="codeAddress()" placeholder="Enter a location" data-required="1" value="<?php if(isset($_POST['place'])) { echo htmlentities(($_POST['place']), ENT_QUOTES); } else if(isset($techLocation['location']) && $techLocation['location']!=''){ echo $techLocation['location'];} ?>"/>                                           
                                                    <input type="hidden" name="latitude" id="latitude" value="<?php if(isset($_POST['latitude'])) { echo $_POST['latitude']; } else if(isset($techLocation['latitude']) && $techLocation['latitude']!=''){ echo $techLocation['latitude'];} ?>">
                                                    <input type="hidden" name="longitude" id="longitude" value="<?php if(isset($_POST['longitude'])) { echo $_POST['longitude']; } else if(isset($techLocation['longitude']) && $techLocation['longitude']!=''){ echo $techLocation['longitude'];} ?>">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="control-label col-md-3">Available Radius<span class="required"> * </span></label>
                                                <div class="col-md-4">                                                    
                                                    <input name="radius" onblur="codeAddress()" type="text" id="radius" data-required="1" class="form-control" value="<?php if(isset($_POST['radius'])) { echo htmlentities(($_POST['radius']), ENT_QUOTES); } else if(isset($techLocation['radius']) && $techLocation['radius']!=''){ echo $techLocation['radius'];} ?>"/>
                                                </div>
                                            </div> 
                                            
                                           
                                            <div class="form-group row">
                                            	<div id="map-canvas" class="col-12" style="height: 400px;"></div>
                                            	<input type="hidden" id="map_place" name="map_place" value="">
                                            </div>
                                           
                                                                                                       
                                            
                                        </div>                                        
                                      	<div class="form-group">
                                            <div class="offset-md-3 col-md-9">                                            	
                                            		<button type="submit" name="add" class="btn btn-info">Submit</button>
                                            	
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
	</div>
</div>


<script>
      $(document).ready(function() {        
        $(".placepicker").placepicker();
        $location_input = $("#place");
        autocomplete = new google.maps.places.Autocomplete($location_input.get(0));    
	    google.maps.event.addListener(autocomplete, 'place_changed', function() {
	        var data = $("#form_staff_add").serialize();
	        var place = jQuery('input[name="place"]').val();
	        //console.log('blah')
	        show_submit_data(place);
	        return false;
	    });
      }); 
      
      function show_submit_data(data) {
	    $("#map_place").val(data);
	    codeAddress();
	  }
      
      var geo;
		function init() {
			<?php /*if($isEdit && $techLocRec['latitude']!='' && $techLocRec['longitude']!=''){ ?>
				var valLat = <?php echo $techLocRec['latitude'];?>;
				var valLong = <?php echo $techLocRec['longitude'];?>;
				var myLatLng = {lat: <?php echo $techLocRec['latitude'];?>, lng: <?php echo $techLocRec['longitude'];?>};
			<?php } else { ?>
				var valLat = document.getElementById('latitude').value;
				var valLong = document.getElementById('longitude').value;
				var myLatLng = {lat: valLat, lng: valLong};
			<?php }*/ ?>				
			//if(valLat!='' && valLong!=''){ /*ok*/ } else {
				valLat = 8.5241391;
				valLong = 76.9366376;
				var myLatLng = {lat: valLat, lng: valLong};
			//}		
			//alert(valLat+','+valLong);	
		    var map_elem = document.getElementById('map-canvas');
		    var map = new google.maps.Map(map_elem, {
		        center: new google.maps.LatLng(valLat, valLong),
		        /*mapTypeControlOptions: {
					style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
					mapTypeIds: ['roadmap', 'terrain']
				}*/		        
		        zoom: 12,
		        minZoom: 10,
		        maxZoom: 22,
		        /*mapTypeId: google.maps.MapTypeId.HYBRID*/
		        mapTypeId: 'roadmap'
		    });
		    //alert(valLat+','+valLong);		   
		   	var marker = new google.maps.Marker({
	          position: myLatLng,
	          map: map,
	          title: '<?php echo $technicianId; ?>'
	        });		 
		  	
		}
		//google.maps.event.addDomListener(window, 'load', init);   
		
		geocoder = new google.maps.Geocoder();
		function codeAddress() {
		
		    //In this case it gets the address from an element on the page, but obviously you  could just pass it to the method instead
		    var address = document.getElementById('place').value;
		    //alert(address);
		    //var address = 'Kollam,Kerala,India';
			if(address!=''){
			    geocoder.geocode( { 'address' : address }, function( results, status ) {
			        if( status == google.maps.GeocoderStatus.OK ) {
			        	var map_elem = document.getElementById('map-canvas');
						var map = new google.maps.Map(map_elem, {
					        center: new google.maps.LatLng(8.5241391, 76.9366376),
					        mapTypeControl: true,
						    /*mapTypeControlOptions: {
						      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
						      mapTypeIds: ['roadmap', 'terrain']
						    }*/					        
					        zoom: 12,
					        minZoom: 10,
					        maxZoom: 22,
					        mapTypeId: 'roadmap'
					    });
			            //In this case it creates a marker, but you can get the lat and lng from the location.LatLng
			            map.setCenter( results[0].geometry.location );			           
			            var marker = new google.maps.Marker( {
			                map     : map,
			                position: results[0].geometry.location
			            } );
			            //change lat long values in text fields
			            document.getElementById('latitude').value = results[0].geometry.location.lat();
						document.getElementById('longitude').value = results[0].geometry.location.lng();
						//change location if pick a point
			            google.maps.event.addListener(map, 'click', function(event) {
						   //alert( 'Your location is at - ' + event.latLng.lat() + ', ' + event.latLng.lng() );
						   if (marker) { marker.setMap(null) }
				    		marker = new google.maps.Marker({position: event.latLng, map: map});
						   document.getElementById('latitude').value = event.latLng.lat();
						   document.getElementById('longitude').value = event.latLng.lng();
						});
						
			        } else {
			            alert( 'Geocode was not successful for the following reason: ' + status );
			        }
			    } );
			    
			}
		}  
		
		function showEditMap() {		
		    //In this case it gets the address from an element on the page, but obviously you  could just pass it to the method instead
		    var address = document.getElementById('place').value;
		    var latitude = document.getElementById('latitude').value;
		    var longitude = document.getElementById('longitude').value;
		    //alert(address);		    
			if(address!=''){
			    geocoder.geocode( { 'address' : address }, function( results, status ) {
			        if( status == google.maps.GeocoderStatus.OK ) {
			        	var map_elem = document.getElementById('map-canvas');
						var map = new google.maps.Map(map_elem, {
					        center: new google.maps.LatLng(latitude, longitude),
					        mapTypeControl: true,						    				        
					        zoom: 12,
					        minZoom: 10,
					        maxZoom: 22,
					        mapTypeId: 'roadmap'
					    });
			            //In this case it creates a marker, but you can get the lat and lng from the location.LatLng
			            map.setCenter( results[0].geometry.location );
			            var marker = new google.maps.Marker( {
			                map     : map,
			                position: results[0].geometry.location
			            } );
			            var radius = document.getElementById("radius").value;			            
			            if(radius=='undefined'){
			            	radius = 5000;
			            } else {
			            	radius = radius*1000;
			            }
			            // Add circle overlay and bind to marker
						var circle = new google.maps.Circle({
						  map: map,
						  radius: radius,    //in metres
						  fillColor: '#AA0000'
						});
						circle.bindTo('center', marker, 'position');
			            google.maps.event.addListener(map, 'click', function(event) {
						   alert( 'Your location is at - ' + event.latLng.lat() + ', ' + event.latLng.lng() );
						   document.getElementById('latitude').value = event.latLng.lat();
						   document.getElementById('longitude').value = event.latLng.lng();
						});
			        } else {
			            alert( 'Geocode was not successful for the following reason: ' + status );
			        }
			    } );
			}
		}
</script>
<?php if(isset($techLocation['id']) && $techLocation['id']!=''){ ?>
<script>
	showEditMap();
</script>
<?php } else { ?>
<script>
	google.maps.event.addDomListener(window, 'load', init); 
</script>
<?php } ?>
