<div id="current_ride_button" class="current_ride_button current_ride_button_off"><?php echo $prevodYourTrip;?></div>
<div id="current_ride" class="current_ride" >

	<!-- <div class="podnaslov"><?php echo $prevodYourTrip;?></div> -->

	<?php if($povratak != "" ){?>
	<div id="map" style="height: 200px; border-radius: 0px; "></div>
	<?php }  ?>

	<div class="prikaz_all">
		<div class="prikaz_lijevo colspan50_no_wrap">
			<div style=" <?php echo $trajanje == 0 ? "display:none;" : ""; ?> " class="ride_element ride_trajanje"><span class="boldirano"><?php echo $prevodTrajanje.': ';?></span><?php echo $trajanje_display;?></div>
		</div>
		<div class="prikaz_desno colspan50_no_wrap">
			<div style=" <?php echo $distanca == 0 ? "display:none;" : ""; ?>" class="ride_element  ride_distanca"><span class="boldirano"><?php echo $prevodRastojanje.': ';?></span><?php echo $distanca.' km';?></div>
		</div>
	</div>

	<div class="current_ride_inner">

		

		<div class="ride_element ride_start"><?php echo $pocetak;?></div>

		<div style=" <?php echo $kraj == '' ? "display:none;" : ""; ?>" class="ride_element ride_kraj"><?php echo $kraj;?></div>

		<div class="ride_element <?php echo $povratak_class; ?>"><?php echo $povratak_display;?></div>

		<div  style=" <?php echo $sati == '' ? "display:none;" : ""; ?>" class="ride_element ride_sati"><?php echo $sati_display;?></div>

		<div class="ride_element ride_vrijemepolazak"><?php echo $vrijemepolazak;?></div>

		<?php if($povratak == "roundtrip") { ?>
			<div class="ride_element  ride_vrijemepovratak"><?php echo $vrijemepovratak;?></div>
		<?php }?>

	

	

	<?php if($klasa != "") {?>
		<div class="clr_line"></div>
		<div class="clr">
			<div class="ride_klasa"><?php echo $klasa_display;?></div>
			
			<div class="ride_klasa_img"><img  src="<?php echo $slika_auto;?>" alt="Limousine service Zurich" /></div>
			
			
		</div>
 
		<?php include 'tabela_ukupno.php'; ?>
 
	<?php }  ?>


	<?php if($ime != "") {?>
		<div class="clr_line"></div>
		<div class="clr">
			<div class="ride_element ride_putnici"><?php echo $prevodNoPassengers.': '.$putnici; ?></div>
			<div style="display: <?php echo ($prtljag == 0 ? 'none' : '' ); ?>" class="ride_element ride_prtljag"><?php echo $prevodNoBaggage.': '.$prtljag; ?></div>
			<div style="display: <?php echo ($childseat_select == 0 ? 'none' : '' ); ?>" class="ride_element ride_childseat_select"><?php echo $prevodChildSeat.': '.$childseat_select; ?></div>
			<div style="display: <?php echo ($childseat_select == 0 ? 'none' : '' ); ?>" class="ride_element ride_childseat"><?php echo $childseat; ?></div>
		</div>

		<div class="clr_line"></div>
		<div class="clr">
	 		<div class="ride_element ride_ime"><?php echo $ime.' '.$prezime;?></div>
	 		<div style="display: <?php echo ($firma == '' ? 'none' : '' ); ?>" class="ride_element ride_firma"><?php echo $firma;?></div>
	 		<div class="ride_element ride_email"><?php echo $email;?></div>
	 		<div class="ride_element ride_telefon"><?php echo $telefon;?></div>
	 		<div style="display: <?php echo ($let == '' ? 'none' : '' ); ?>" class="ride_element ride_let"><?php echo $let;?></div>
	 		<div style="display: <?php echo ($letboard == '' ? 'none' : '' ); ?>" class="ride_element ride_letboard"><?php echo $letboard;?></div>
 			<div style="display: <?php echo ($buking == '' ? 'none' : '' ); ?>" class="ride_element ride_buking"><?php echo $buking;?></div>
			

			
		</div>

 

	<?php }  ?>

	</div>

</div>

<input type="" id="pocetakApp" style="display: none;"  value="<?php echo $pocetak; ?>">
<input type="" id="krajApp"  style="display: none;" value="<?php echo $kraj; ?>">

 


<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_Ud8eExfJvyreFv89IGAXiUVSREvxOrA&libraries=places&callback=initMap&language=en"></script>


<script type="text/javascript">

function initMap() {
	  	       
	var directionsDisplay = new google.maps.DirectionsRenderer();       
	var directionsService = new google.maps.DirectionsService;
	
	var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {lat: 48.776465, lng: 2.245381},
	  scrollwheel: false,
	  mapTypeControl: false,
	  streetViewControl: false 
    });
    
	directionsDisplay.setMap(map);

   
    calculateAndDisplayRoute(directionsService, directionsDisplay);

  	}
	
	//<<>> Iscrtava rutu izmjedju dvije tacne na google mapi i racuna rastojanje u km <<>>//
  	function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  	
	    var start = document.getElementById('pocetakApp').value;
	    var end = document.getElementById('krajApp').value;

	    directionsService.route({
	      origin: start,
	      destination: end,
	      travelMode: 'DRIVING'
	    }, function(response, status) {
	      if (status == google.maps.DirectionsStatus.OK) { 
	        directionsDisplay.setDirections(response);
	      } else {
	         
	    }
    });
}



 
$( "#current_ride_button" ).click(function() {
  	$( "#current_ride" ).toggle();
  	$( this ).toggleClass( "current_ride_button_on" );
});



</script>