@extends('layouts.master')

@section('title', 'Add Charging Station')

@section('links')
<style>          
          #map { 
            height: 500px;    
            width: 100%;            
          }        
        </style> 
@endsection



@section('content')

<div class="br-mainpanel">
<div class="br-pageheader pd-y-15 pd-l-20">
      <nav class="breadcrumb pd-0 mg-0 tx-12">
        <a class="breadcrumb-item" href="">PlugNgo</a>
        <!--          <a class="breadcrumb-item" href="#">Admins</a>-->
        <span class="breadcrumb-item active">Stations's</span>
      </nav>
      <!-- <button class="btn btn-success success">Toast</button> -->
    </div><!-- br-pageheader -->
    <div class="pd-x-20 pd-sm-x-30 pd-t-20 pd-sm-t-30">
	<h2><strong>{!! trans('messages.list_all') !!}</strong> {!! trans('messages.stations') !!}
				
					</h2>
    </div>
    <div class="br-pagebody">
      <div class="br-section-wrapper">
        

			<div class="col-sm-12" >
							
					<div class="table-wrapper">

					<div class="container">
				<div class="row">
					<div class="col-md-12">
					
                       
            <span class="metadata-marker" style="display: none;" data-region_tag="css"></span> 
      <span class="metadata-marker" style="display: none;" data-region_tag="html-body"></span>    <div id="map"></div>
         
      
						</div>
						</div >
					

				 
							
						</div>
					</div>
				</div>


        

      </div><!-- br-section-wrapper -->
    </div><!-- br-pagebody -->
    
  
@endsection
 

@section('scripts')

<script>
	// Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map, infoWindow;
      initMap();
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        infoWindow = new google.maps.InfoWindow;

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };


            var GEOCODING = '{{ url('points') }}?lat=' + position.coords.latitude + '&lng=' + position.coords.longitude + '&range=1500';

            $.getJSON(GEOCODING).done(function(location) {

              var infowindow = new google.maps.InfoWindow();

                var marker, i;

                for (i = 0; i < location.length; i++) {  
                  // console.log(location[i])
                    marker = new google.maps.Marker({
                    position: new google.maps.LatLng(location[i]['latitude'], location[i]['longitude']),
                    map: map
                  });

                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                      infowindow.setContent('<div id="content"><b><h7>'+location[i]['station_name']+'</b></h7>'+
			'<br></br><h7>Distance From Your Point  <b>'+location[i]['distance'].toFixed(0)+'KM<b></h7>'+
			'</div>');
                      infowindow.open(map, marker);
                    }
                  })(marker, i));
                }
                  
      
                  });
			map.setCenter(pos);
      var im = 'http://www.robotwoods.com/dev/misc/bluecircle.png';
      
			var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
				var marker = new google.maps.Marker({
								position: myLatlng,
								//animation: google.maps.Animation.DROP,
                icon: im
					});
					marker.setMap(map);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }


    </script>


@endsection