<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<?php 
include "head.php";
require_once('pdf_demo/fpdf.php');
include "dbconfig.php";
include 'phpmailer/PHPMailerAutoload.php';
error_reporting(E_ERROR);

?>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	
  
<!-- Select 2 Ref Files-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <!--script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script-->
 <script  src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyC8ry-omhjpAGV2yzE5njEqEz7q3A8QGwg"
  type="text/javascript"></script> 
 
</head>
<body background="professional-chauffeur-services-o.jpg">
<style>
.body{background:url(professional-chauffeur-services-o.jpg);
background-size:cover;
z-index:1000;

}
.left-inner-addon {
    position: relative;
}
.left-inner-addon input {
    padding-left: 30px;    
}
.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
}

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}
</style>
<div style="width:100%; background:url(professional-chauffeur-services-o.jpg); background-size:cover;">
<div class="container">
 
<div style="margin-top:10%; margin-left:10%; width:80%;">
  <form class="form-inline" action="">
  <div style="box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);  background-color: rgba(255,255,255,0.8); padding:40px;">
    <div class="form-group">
      <label for="email">Pick Up Address</label>
<div class="left-inner-addon">
   <i class="glyphicon glyphicon-map-marker" style="font-size:20px;"></i>
      <input type="text" class="form-control"  id="source" style="height:50px; width:400px;" value="" placeholder=" Please enter full UK address" >
	  </div>
    </div>
    <div class="form-group" style=" float:right;">
      <label for="pwd">Destination </label>
	  <div class="left-inner-addon ">
   <i class="glyphicon glyphicon-map-marker" style="font-size:20px;"></i>
      <input type="text" class="form-control" id="destination" style="height:50px; width:400px;" value=" Heathrow Airport, Longford, United Kingdom" >
	  </div>
    </div>
	<br><br>
	<div class="col-md-6">
    <div class="form-group">
      <label for="pwd">Date </label>
	  <div class="left-inner-addon ">
   <i class="glyphicon glyphicon-calendar"></i>
      <input type="date" class="form-control" name="pickup_date" id="pickup_date" value="<?php echo date("Y-m-d"); ?>" >
	  </div>
    </div>
	 <div class="form-group">
      <label for="pwd">Time </label>
	    <div class="left-inner-addon ">
   <i class="glyphicon glyphicon-time"></i>
      <input type="time" class="form-control" id="times" value="<?php echo date("h:i"); ?>" >
	  </div>
    </div>
	</div>
	
	<div class="form-group" >
      <label for="pwd">Distance in km </label>
      <div class="left-inner-addon ">
  
	  <input type="text" class="form-control distance" style="width:200px;">
	  </div>
	</div>
	<div class="form-group" style="float:right;">  
	  <label for="pwd">Duration </label>
	   <div class="left-inner-addon ">
  
	  <input type="text" class="form-control duration" style="width:200px;"  >
	  </div>
    </div>
	
	
	<br>
	<br>
    <button type="button" class="form-control btn-info pull-right"  value="Get Route" onClick="get_rout()" >Get a Quote</button>
	
	
</div>

  </form>
  </div>
  <div class="row" >
  <br /><br />
  <div class='col-md-6' id='maplocation' style="height: 350px; width:100%;" ></div>
  <!--div class='col-md-6' id='panallocation' style="width: 500px; height: 500px" ></div-->
  <div id="cars" style="display:none;">
  
  <div class="col-md-12" style="margin-top:100px; background-color: rgba(255,255,255,0.5); padding:20px;">
 
  <div class="col-md-12">
  <div class="col-md-5" style="box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2); background:#FFFFFF; border-radius: 15px;">
   <h4 align="center">Executive Saloon (Mercedes E Class)</h4>
   <div class="col-md-6">
  <img src="executive-saloon-mercedes-e-class-quote-e.jpg" style="width:250px; height:170px;">
  </div>
  <div class="col-md-6" align="right">
  <br>
  <label style="font-size:20px;">Price &pound;</label><label id="car1" style="font-size:20px;"></label><small>( inc 20% VAT )</small>
  <br>
  <label>3 Passengers<br>2 Luggage</label>
  </div>
  </div>
   <div class="col-md-5" style="box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2); background:#FFFFFF; border-radius: 15px; float:right;">
  <h4 align="center">Luxury Saloon (S Class - Audi A8L - Jag XJ)</h4>
  <div class="col-md-6"> 
  <img src="luxury-saloon-s-class-online-quote.jpg" style="width:250px; height:170px;">
  </div>
  <div class="col-md-6" align="right">
  <br>
  <label style="font-size:20px;">Price &pound;</label><label id="car2" style="font-size:20px;"></label><small>( inc 20% VAT )</small>
  <br>
  <label>3 Passengers<br>2 Luggage</label>
  </div>
  </div>
  </div>
  <div class="col-md-12" style="margin-top:50px;">
   <div class="col-md-5" style="box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2); background:#FFFFFF; border-radius: 15px;">
   <h4 align="center">Rolls Royce Phantom</h4>
   <div class="col-md-6"> 
  <img src="rolls-royce-phantom1.jpg" style="width:250px; height:170px;">
   </div>
  <div class="col-md-6" align="right">
  <br>
  <label style="font-size:20px;">Price &pound;</label><label id="car3" style="font-size:20px;"></label><small>( inc 20% VAT )</small>
  <br>
  <label>3 Passengers<br>2 Luggage</label>
  </div>
  </div>
   <div class="col-md-5" style="box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2); background:#FFFFFF; border-radius: 15px; float:right;">
  <h4 align="center">Luxury MPV (Mercedes Viano or V-Class)</h4>
  <div class="col-md-6"> 
  <!--img src="luxury-mpv-mercedes-viano-or-v-class.jpg" style="width:250px; height:170px;"-->
  <img src="Mercedes-V-Class-Viano-MPV-Chauffeur-Car-Silver-Essex.png" style="width:250px; height:170px;">
   </div>
  <div class="col-md-6" align="right">
  <br>
  <label style="font-size:20px;">Price &pound;</label><label id="car4" style="font-size:20px;"></label><small>( inc 20% VAT )</small>
  <br>
  <label>7 Passengers<br>7 Luggage</label>
  </div>
  </div>
  </div>
  <div class="col-md-12" style="margin-top:50px;">
   <div class="col-md-5" style="box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2); background:#FFFFFF; border-radius: 15px;">
  <h4 align="center">Range Rover Vogue</h4>
   <div class="col-md-6">  
  <img src="range-rover-vogue.jpg" style="width:250px; height:170px;">
   </div>
  <div class="col-md-6" align="right">
  <br>
  <label style="font-size:20px;">Price &pound;</label><label id="car5" style="font-size:20px;"></label><small>( inc 20% VAT )</small>
  <br>
  <label>3 Passengers<br>2 Luggage</label>
  </div>
  </div>
   <div class="col-md-5" style="box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2); background:#FFFFFF; border-radius: 15px; float:right;">
  <h4 align="center">Volvo</h4> 
   <div class="col-md-6"> 
  <img src="xCars-XC90-780x444-itemdisplay.jpg.pagespeed.ic._lY3C88DwF.jpg" style="width:250px; height:170px;">
   </div>
  <div class="col-md-6" align="right">
  <br>
  <label style="font-size:20px;">Price &pound;</label><label id="car6" style="font-size:20px;"></label><small>( inc 20% VAT )</small>
  <br>
  <label>3 Passengers<br>2 Luggage</label>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  
</div>


</div>

<script type="text/javascript">

	
        var source, destination;
        var darection = new google.maps.DirectionsRenderer;
        var directionsService = new google.maps.DirectionsService;
        google.maps.event.addDomListener(window, 'load', function () {
            new google.maps.places.SearchBox(document.getElementById('source'));
            new google.maps.places.SearchBox(document.getElementById('destination'));
            
        });

        function get_rout() {

           
            var mapOptions = {
                mapTypeControl: true,
                center: {lat: -33.8688, lng: 151.2195},
                zoom: 13
            };
			
            map = new google.maps.Map(document.getElementById('maplocation'), mapOptions);
            darection.setMap(map);
            darection.setPanel(document.getElementById('panallocation'));


            source = document.getElementById("source").value;
            destination = document.getElementById("destination").value;

            var request = {
                origin: source,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    darection.setDirections(response);
                }
            });


			
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [source],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                    var distance = response.rows[0].elements[0].distance.text;
                    var duration = response.rows[0].elements[0].duration.text;
                    
                    distancefinel = distance.split(" ");
					$('.distance').val(distancefinel[0]);
					
					 durationfinel = duration.split(" ");
					$('.duration').val(durationfinel[0]);
					
					 $("#cars").show();
					var car1=parseInt(10 * distancefinel[0]);
			$("#car1").html(car1);
			
			 var car2=parseInt(15 * distancefinel[0]);
			$("#car2").html(car2);
			
			 var car3=parseInt(20 * distancefinel[0]);
			$("#car3").html(car3);
			
			 var car4=parseInt(25 * distancefinel[0]);
			$("#car4").html(car4);
			
			 var car5=parseInt(30 * distancefinel[0]);
			$("#car5").html(car5);
			
			 var car6=parseInt(32 * distancefinel[0]);
			$("#car6").html(car6);
					
                } else {
                    alert("Unable to find the distance via road.");
                }
            });
        }
		
		
		
		
    </script>

<script type="text/javascript" src="bootstrap-datetimepicker-master/sample in bootstrap v3/jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap-datetimepicker-master/sample in bootstrap v3/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

<script type="text/javascript">


$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii',
autoclose: true,
        todayBtn: true,
        pickerPosition: "bottom-left"
});
    $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1
    });
	$('.form_date').datetimepicker({
       // language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
    });
	$('.form_time').datetimepicker({
       // language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 1,
		minView: 0,
		maxView: 1,
		forceParse: 0
    });


 
</script>

</body>
</html>
