@extends('layouts.admin')
@section('content')
<section class="content-header">
  <h1>
	@if ($user->image != "")
		<img src="{{URL::asset('offender_photos/'.$user->id.'/'.$user->image)}}" alt="profile Pic" height="60" width="60" style="border-radius:50%">
	@else
		<img src="{{URL::asset('img/placeholder.png')}}" alt="profile Pic" height="60" width="60" style="border-radius:50%">
	@endif
    <b>
		Live Location `{{ucfirst($user->fname)}} {{ucfirst($user->mname)}} {{ucfirst($user->lname)}}`
	</b>
  </h1>
  <ol class="breadcrumb">
    <li><a href="{{url('admin/dashboard')}}"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="{{url('admin/officers/lists')}}"><i class="fa fa-dashboard"></i> Officer List </a></li>
	<li><a href="{{url('admin/officers/offender_list/'.$parent_user_id)}}"><i class="fa fa-dashboard"></i> Officer </a></li>
	<li><a href="{{url('admin/users/view/'.$offender_id)}}"><i class="fa fa-dashboard"></i> Offender Detail </a></li>
    <li class="active">Live Location</li>
  </ol>
</section>
<section class="content">
	<div class="row">
	<div class="col-xs-12">
		<div class="box box-primary">
			<div class="box-body " style='padding:0px;!important;'>
				<div class="card wizard-card" data-color="azzure" id="wizard">
				   
				   
				   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyC622bH2aI1Sg50W764JlCDPbMLW0YGYYA"></script>
	   
					<div id="map" style="width: 100%; height: 600px"></div>
					
					
					
					
	   
	   
	   
	   
	   
	   
				   
				   
				   
				   
					
				</div>
			</div>
		</div>
	</div>
</div>	
</section>


<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/css/gsdk-bootstrap-wizard.css') }}" rel="stylesheet" />

	<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="{{ asset('assets/css/demo.css') }}" rel="stylesheet" />
<script src="{{ asset('assets/js/jquery.bootstrap.wizard.js') }}" type="text/javascript"></script>
<!--  Plugin for the Wizard -->
<script src="{{asset('assets/js/gsdk-bootstrap-wizard.js')}}"></script>

<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>

<input type="text" value="{{url('admin/users/offender_get_live_lag_log/')}}" id="location_current">
<input type="text" value="{{$offender_id}}" id="offender_current">

<script>



$(document).ready(function(){

	
	if (navigator.geolocation) 
	{
		navigator.geolocation.getCurrentPosition(function(position) {
		var geolocation = {
		  lat: position.coords.latitude,
		  lng: position.coords.longitude
		};
		var circle = new google.maps.Circle({
		  center: geolocation,
		  radius: position.coords.accuracy
		});
		
		codeLatLng(position.coords.latitude,position.coords.longitude);
		
		$('#current_lat').val(position.coords.latitude);
		$('#current_log').val(position.coords.longitude);
	  });
	}
				
	function codeLatLng(lat, lng) 
	{
		var latlng = new google.maps.LatLng(lat, lng);
		var geocoder= new google.maps.Geocoder();
		
		geocoder.geocode({'latLng': latlng}, function(results, status) {
		  if(status == google.maps.GeocoderStatus.OK) {
			  console.log(results)
			  if(results[1]) {
				  
				  var address = results[0].formatted_address;
				  $('#current_location').val(address);
				  
				  //var cars = [{"title":'asdasds',"lat":lat, "lng":lng,"description":address}];
				  
				  get_current_data(address,lat,lng);
			  } else {
				  alert("No results found");
			  }
		  } else {
			  alert("Geocoder failed due to: " + status);
		  }
		});
	}

	function get_current_data(address ,lat ,log)
	{
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		})
		
		$.ajax({
			type: 'POST',
			data : 'address='+address+'&lat='+lat+'&log='+log+'&offender_current='+$('#offender_current').val(),
			url: $('#location_current').val()
		}).done(function (data){
			
			init_map(data);
			
		});
	}
	
	
	
	function init_map(data){
			console.log('ddddddddddddddddddddddddddd');
			console.log(data);
			var markers = data;
				/* var markers = 
					[
						{
						   "title": 'kanhaiya ',
						   "lat": '26.8758231',
						   "lng": '75.7326123',
						   "description": 'asdasdsdasd'
					   },
						{
						   "title": 'Pune',
						   "lat": '26.8852582',
						   "lng": '75.7899012',
						   "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.'
					   }

					]; */
							   
							   
						var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
						var labelIndex = 0;
						// window.onload = function () {
						   var mapOptions = {
							   center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
							   zoom: 14,
							   mapTypeId: google.maps.MapTypeId.ROADMAP
						   };
						   var path = new google.maps.MVCArray();
						   var service = new google.maps.DirectionsService();

						   var infoWindow = new google.maps.InfoWindow();
						   var map = new google.maps.Map(document.getElementById("map"), mapOptions);
						   var poly = new google.maps.Polyline({ map: map, strokeColor: '#FF8200' });
						   var lat_lng = new Array();
						   for (i = 0; i < markers.length; i++) {
							   var data = markers[i]
							   var myLatlng = new google.maps.LatLng(data.lat, data.lng);
							   lat_lng.push(myLatlng);
								
							   var marker = new google.maps.Marker({
								   position: myLatlng,
								   label: labels[labelIndex++ % labels.length],
								   map: map,
								   title: data.title,
								});
							   (function (marker, data) {
								   google.maps.event.addListener(marker, "click", function (e) {
									   infoWindow.setContent(data.description);
									   infoWindow.open(map, marker);
									   
								   });
							   })(marker, data);
						   }
						   for (var i = 0; i < lat_lng.length; i++) {
							   if ((i + 1) < lat_lng.length) {
								   var src = lat_lng[i];
								   var des = lat_lng[i + 1];
								   path.push(src);
								   poly.setPath(path);
								   service.route({
									   origin: src,
									   destination: des,
									  
									   travelMode: google.maps.DirectionsTravelMode.DRIVING
								   }, function (result, status) {
									   if (status == google.maps.DirectionsStatus.OK) {
										   for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
											   path.push(result.routes[0].overview_path[i]);
										   }
									   }
								   });
							   }
						   }
						   
						   var latlngbounds = new google.maps.LatLngBounds();
							for (var i = 0; i < lat_lng.length; i++) {
							  latlngbounds.extend(lat_lng[i]);
							}
							map.fitBounds(latlngbounds);
						   
						   
						//}
	
	
	
	}
	
	
	function initMapd(lat, long) {

			var location= new google.maps.LatLng(lat, long);
			var mapEl= document.getElementById('map');
			var mapOpt= {
				center: location,
				zoom: 15,
				panControl: false,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			}
			var map = new google.maps.Map(mapEl, mapOpt);

			// Add marker
			var imgMarker= {
				//url: 'img/marker.png',
				scaledSize: new google.maps.Size(50, 50)
			}
			var marker= new google.maps.Marker({
				position: location,
				map: map,
				icon: imgMarker
			});

			var contentString= '<div class="info-window">'+
								  '<h3>Info</h3>'+
								  '<div class="info-content">'+
								  '<p>Text</p>'+
								  '</div>'+
								  '</div>';

			var infoWindow = new google.maps.InfoWindow({
				content: contentString,
				maxWidth: 400
			});

			mark.addListener('click', function() {
				infoWindow.open(map, marker);
			});
	}
	
	
	
	
	
	
	

});


</script>


@endsection