<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>

<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 if($isEdit){ echo 'Edit Location';} else { echo 'Add Location'; }?></div>
                            </div>
                            <ol class="breadcrumb page-breadcrumb pull-right">
                                <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="index.html">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                                </li>
                                <li><a class="parent-item" href="">Location</a>&nbsp;<i class="fa fa-angle-right"></i></li><li class="active">Add Location</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><?php if($isEdit){ echo 'Edit Location';} else { echo 'Add 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_staff_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">City Name<span class="required"> * </span></label>
                                                <div class="col-md-4">                                                    
                                                    <input name="place" type="text" id="place" data-required="1" class="placepicker form-control" value="<?php if(isset($_POST['place'])) { echo htmlentities(($_POST['place']), ENT_QUOTES); } else if(isset($resEdit['name']) && $resEdit['name']!=''){ echo $resEdit['name'];} ?>"/>
                                                    <input type="hidden" name="latitude" id="latitude" value="<?php if(isset($_POST['latitude'])) { echo $_POST['latitude']; } else if(isset($resEdit['latitude']) && $resEdit['latitude']!=''){ echo $resEdit['latitude'];} ?>">
                                                    <input type="hidden" name="longitude" id="longitude" value="<?php if(isset($_POST['longitude'])) { echo $_POST['longitude']; } else if(isset($resEdit['longitude']) && $resEdit['longitude']!=''){ echo $resEdit['longitude'];} ?>">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="control-label col-md-3">Radius<span class="required"> * </span></label>
                                                <div class="col-md-4">                                                                                                                                                                   
                                                        <input name="radius" onblur="codeAddress()" type="text" id="radius" class="form-control" value="<?php if(isset($_POST['radius'])) { echo htmlentities(($_POST['radius']), ENT_QUOTES); } else if(isset($resEdit['radius']) && $resEdit['radius']!=''){ echo $resEdit['radius'];} ?>" placeholder="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">
                                            	<?php if($isEdit){ ?>
                                            		<button type="submit" name="update" class="btn btn-info">Update</button>
                                            	<?php } else { ?>
                                            		<button type="submit" name="add" class="btn btn-info">Submit</button>
                                            	<?php } ?> 
                                            </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 && $resEdit['latitude']!='' && $resEdit['longitude']!=''){ ?>
				var valLat = <?php echo $resEdit['latitude'];?>;
				var valLong = <?php echo $resEdit['longitude'];?>;
				var myLatLng = {lat: <?php echo $resEdit['latitude'];?>, lng: <?php echo $resEdit['longitude'];?>};
			<?php } else { ?>
				//var valLat = document.getElementById('latitude').value;
				//var valLong = document.getElementById('longitude').value;
				//var myLatLng = {lat: valLat, lng: valLong};
				valLat = 8.5241391;
				valLong = 76.9366376;
				var myLatLng = {lat: valLat, lng: valLong};
			<?php } ?>				
			//if(valLat!='' && valLong!=''){ /*ok*/ } else {
				
			//}		
			//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() {
			 //alert('Radius');
		    //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);		    
			if(address!=''){
			    geocoder.geocode( { 'address' : address }, function( results, status ) {
			        if( status == google.maps.GeocoderStatus.OK ) {
			        	var radius = document.getElementById("radius").value;	
			        	var zoomVal = 12;			        	            
			            if(radius=='undefined'){
			            	radius = 5000;			            	
			            } else {
			            	radius = radius*1000;
			            	//alert(radius);
			            	if(radius>=10000){
			            		var zoomVal = 10;			            				
			            	} else if(radius>=50000){
			            		var zoomVal = 8;			            				
			            	} 			            	
			            }
			            
			        	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,						    				        
					        zoom: zoomVal,
					        minZoom: 6,
					        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
			            } );
			            
			            // 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 );
			        }
			    } );
			}
		}   
		
		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($resEdit['id']) && $resEdit['id']!=''){ ?>
<script>
	showEditMap();
</script>
<?php } else { ?>
<script>
	google.maps.event.addDomListener(window, 'load', init); 
</script>
<?php } ?>

