@extends('layouts.admin')
@section('content')
<section class="content-header">
<h1>Create Restricted Area</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/offender_list/'.$parent_user_id)}}"><i class="fa fa-dashboard"></i> Offender List</a></li>
	<li><a href="#"><i class="fa fa-dashboard active"></i>Create Schedues</a></li>
</ol>
</section>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" type="text/css" media="all" />   
<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box box-primary">
				<!-- /.box-header -->
				<div class="box-body">		
					<form role="form" method="POST" action="{{ url('admin/officers/add_restricted_area/'.$id) }}" enctype="multipart/form-data">
					<input type="hidden" name="lat" id="lat" value="{{ old('lat') }}" >
					<input type="hidden" name="log" id="log" value="{{ old('log') }}">
					<input type="hidden" name="radius" id="reduis_id" value="{{ old('radius') }}">
					{{ csrf_field() }}
						<div class="col-sm-6">
							<div class="form-group row{{ $errors->has('areaname') ? ' has-error' : '' }}">
								<label class="col-sm-4 form-control-label">Area Name </label>
								<div class="col-sm-8">
									<input id="areaname" type="text" class="form-control" name="areaname" value="{{ old('areaname') }}" placeholder="Restricted Area Name">
									@if ($errors->has('areaname'))
										<span class="help-block">{{ $errors->first('areaname') }}</span>
									@endif
								</div>
							</div>
							
							<div class="form-group row {{ $errors->has('address') ? ' has-error' : '' }}">
								<label class="col-sm-4 form-control-label"> Address</label>
								<div class="col-sm-8">
									<input id="address" type="text" class="form-control" name="address" value="{{ old('address') }}" placeholder="Start Address">
									@if ($errors->has('address'))
										<span class="help-block">{{ $errors->first('address') }}</span>
									@endif
								</div>
							</div>
							
							<div class="form-group row {{ $errors->has('radius') ? ' has-error' : '' }}">
								<label class="col-sm-4 form-control-label">Radius Range </label>
								<div class="col-sm-8">
									<div id="slider" style="background-color:#F0F0F0;">
									  <div id="custom-handle" class="ui-slider-handle" style="background-color:#3C8DBC;"></div>
									</div>
								</div>
							</div>
														
							<div class="line"></div>
							<div class="form-group row">
								<label class="col-sm-4 form-control-label">&nbsp;</label>
								<div class="col-sm-8 offset-sm-2">
								<button type="submit" class="btn btn-primary">Save</button>
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div id="map"></div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
  
  
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var handle = $( "#custom-handle" );
    $( "#slider" ).slider({
	  max: 1000,
	  min: 100,
      create: function() {
        handle.text( $( this ).slider( "value" ) );
      },
      slide: function( event, ui ) {
        handle.text( ui.value );
		$('#reduis_id').val(ui.value);
      }
    });
  } );
  </script> 
  
  <script>
  geolocatearea();
	function geolocatearea() {
		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
			});
			
			///initializ_map(position.coords.latitude,position.coords.longitude);
			
			//autocomplete.setBounds(circle.getBounds());
		  });
		}
	}
  
  
  function initializ_area() {
	var input = document.getElementById('address');
	var autocomplete = new google.maps.places.Autocomplete(input);
	google.maps.event.addListener(autocomplete, 'place_changed', function () {
	
		var place = autocomplete.getPlace();
		document.getElementById('log').value = place.geometry.location.lng();
		document.getElementById('lat').value = place.geometry.location.lat();
		
		// initMapEnd(place.geometry.location.lat(),place.geometry.location.lng());
	});
}
  google.maps.event.addDomListener(window, 'load', initializ_area); 

	function initializ_map(lat,lng) {
		var myLatLng = {lat: lat, lng: lng};

		var map = new google.maps.Map(document.getElementById('map'), {
		  zoom: 12,
		  center: myLatLng
		});

		var marker = new google.maps.Marker({
		  position: myLatLng,
		  map: map,
		  title: 'Hello World!'
		});
	}
</script>
@endsection