<!DOCTYPE html>
<?php
$dbhost = "localhost";
	    		$dbuser = "perthdes_inquiri";
	    		$dbpass = "@G&{)0*&Ts^V";
	    		$dbname = "perthdes_new_pro_api";
	    		$conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname) or die($conn->connect_error);	    		
	    		$result = mysqli_query($conn, "SELECT array FROM homekey_lat_lng WHERE id='1'");
			$row = mysqli_fetch_assoc($result);
        			$homekeyCoords = $row['array'];
        		$result = mysqli_query($conn, "SELECT array FROM homekey_lat_lng WHERE id='2'");
			$row = mysqli_fetch_assoc($result);
        			$zone1Coords = $row['array'];
        		$result = mysqli_query($conn, "SELECT array FROM homekey_lat_lng WHERE id='3'");
			$row = mysqli_fetch_assoc($result);
        			$zone2Coords = $row['array'];
        			?>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>HomeKey</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="assets/picker/default.css"  crossorigin="anonymous">
    <link rel="stylesheet" href="assets/picker/date.theme.css"  crossorigin="anonymous">

    <link rel="stylesheet" href="assets/picker/default.time.css"  crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #map {
            height:200px;
        }
        body{
            background-image: url('mapimage.png');
            
        }
        
        .tagline{
        font-family: "Arial";
        font-size: 120%;
        font-weight: bold;
        display: inline-block;
    vertical-align: middle;
    float: none;
        }
        td {
        padding: 10px;
        text-align: left;
        font-weight: bold;
        }
        table {
        width: 100%;
        margin: auto;
        
        }
        .logo_area {
        
        height:100px;
        font-family: "Arial";
        font-size: 250%;
        font-weight: bold;
        margin: auto;
        display: inline-block;
    vertical-align: middle;
    float: none;
        
        }
        .header {
        font-family: "Arial";
        font-size: 250%;
        font-weight: bold;
        }
        ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	background-color: #333;
    	text-align: center;
    	
	}
	li {
    	float:left;
	}
	li a {
	color: white;
	font-family: "Arial";
	font-weight: bold;
	font-size: 150%;
    	display: inline-block;
   	padding: 8px;
   	padding-left: 20px;
   	padding-right: 20px;
   	
    	text-decoration: none;
	}
	li a:hover {
	font-family: "Arial";
	font-weight: bold;
    	background-color: #111;
    	text-decoration: none;
    	color: white;
	}
	.menu {
	display: table; 
	margin: 0 auto;
	
	}
	.menu_bg {
	background-color: #333;
	}
	

    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12 ">
            <h3></h3>
        </div>
    </div>
</div>
<div class="container" style="text-align:center; margin: auto;">
<div class="row bg_img">
	<div class="logo_area col-xs-12 col-md-6">
		<img src="logo.png" style="height: 100px; width: 100px;">
		HOMEKEY	
	</div><!--
	--><div class="tagline col-xs-12 col-md-6">
		<br>You give us your keys,<br> we drive you home.	
	</div>
</div>
<br>
<div class="menu_bg">
<div class="menu">
<ul>
  <li><a href="index.php">HOME</a></li>
  <li><a href="faq.php">FAQ</a></li>
  <li><a href="contact.php">CONTACT</a></li>
</ul>
</div>
</div>
<div class="row" style="margin-top: 10px;">

<div class="col-xs-12 col-md-6" style="text-align: left;margin-bottom: 10px;background-color: #d9d9d9; padding: 8px; border: 10px solid transparent; background-clip: padding-box;">
<div class="header" style="text-align: center; ">GET THE APP</div><p>Use HomeKey to book a designated driver - a professional driver that will drive you home in your own car. </p>

<p>Save money on a two way taxi fare. Standard service has drivers that are insured to drive your car.</p>

<p>If within the HomeKey driver zone, cost is the same as a two way rideshare fee.</p>

<p>Book in advance or at short notice and get live tracking of your driver so you know when to call last drinks.</p>

<p>Currently available only in Perth Western Australia</p>
<div style="text-align:center; margin: auto;"><a href="https://play.google.com/store/apps/details?id=com.homekey.android&rdid=com.homekey.android"><img style="height:50px; max-width:50%; padding: 1px;" src="google-play-badge.png"></a><a href="https://itunes.apple.com/us/app/homekey/id1289132742?ls=1&mt=8"><img style="padding: 1px; height:50px; max-width: 50%" src="Download_on_the_App_Store_Badge_US-UK_135x40.svg"></a></div>
</div>

<div class="col-xs-12 col-md-6" style="text-align:center; background-color: #d9d9d9; padding: 8px; border: 10px solid transparent; background-clip: padding-box;">
<div class="header " >GET A QUOTE</div>
    <form class="" role="search">
            <div class="row">
                <div class="col-xs-24 col-md-12">
                    <input type="text" id="pickup" autocomplete="off" required class="form-control" placeholder="Pickup Address">
                </div>
            </div>
            <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
                <div class="col-xs-24 col-md-12">
                    <input type="text" id="dropoff"  autocomplete="off"  required class="form-control" placeholder="Drop Off Address">
                </div>
            </div>

            <div class="row" style="margin-top: 10px col-md-6">
                <div class="col-xs-24 col-md-12">
                    <div id="map"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-24 col-md-12">
                    <p>
                    HomeKey service available within the blue line border
                    <table>
                    <tr>
                        <td>Standard Insured</h3></td><td width="100px"><span id="totalPrice"><strong>0</strong></span></td></tr>
                        <td>HomeKey Driver</h3></td><td><span id="totalPrice2"><strong>0</strong></span></td></tr>
                        </table>
                    </p>
                </div>
            </div>
    </form>
    </div>
    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<script src="assets/picker/picker.js"></script>
<script src="assets/picker/picker.date.js"></script>
<script src="assets/picker/picker.time.js"></script>

<script type="text/javascript">





     map = null ;
     pickUp = null ;
     dropOff = null;
     directionsDisplay = null ;
     directionsService = null ;
homekey = null;
homekeyPoly = null;
pickup_homekey = null;
dropoff_homekey = null;

    $('#dropoff').on('blur',function(){
      //  initMap();
    });

     $('#pickup').on('click',function(){
      //   initMap();
     });
	
	
        
        
        
     function initMap() {





        if(map == null)
        {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: {lat: -31.9535959, lng: 115.8570118}
            });
        }
        var geocoder = new google.maps.Geocoder();

        if($('#pickup').val() != "")
            geocodeAddress(geocoder, map);

        if($('dropoff').val() != "")
            geocodeAddress2(geocoder, map);

        if(directionsDisplay != null)
            directionsDisplay.setDirections({routes: []});

        directionsService = new google.maps.DirectionsService;
        directionsDisplay = new google.maps.DirectionsRenderer;
        directionsDisplay.setMap(map);

        calculateAndDisplayRoute(directionsService, directionsDisplay);
        distance();
        
//        $homekeyCoords = [          
//        {lat: -31.855442, lng: 115.744506},
//	{lat: -31.860540, lng: 115.917884},
//	{lat: -31.919324, lng: 115.927814},
//	{lat: -31.929517, lng: 115.991890},
//	{lat: -31.987697, lng: 115.987427},
//	{lat: -32.034053, lng: 115.967858},
//	{lat: -32.096166, lng: 115.850785},
//	{lat: -32.091726, lng: 115.732167}
   //     ];
   
      var homekeyCoords = unpackLatlng(<?=$homekeyCoords ?>);
        
        homekeyPoly = new google.maps.Polygon({
          paths: homekeyCoords,
          strokeColor: '#0000FF',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: '#0000FF',
          fillOpacity: 0.1
        });
        
        console.log(<?=$zone1Coords ?>);
        
        var zone1Coords = unpackLatlng(<?=$zone1Coords ?>);
        		
        zone1Poly = new google.maps.Polygon({
          paths: zone1Coords,
          strokeColor: '#00FF00',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: '#00FF00',
          fillOpacity: 0.1
        });
        
        
        var zone2Coords = unpackLatlng(<?=$zone2Coords ?>);
        
        var paths = [];
        
	zone2Poly = new google.maps.Polygon({
          paths: zone2Coords,
          strokeColor: '#0000FF',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: '#0000FF',
          fillOpacity: 0.1
        });
	
      
        homekeyPoly.setMap(map);
        //zone1Poly.setMap(map);
        //zone2Poly.setMap(map);
        
       
 
	
        

    }
    
    function unpackLatlng(latlngarray) {
    	var paths = [];
      for (var i = 0; i < latlngarray.length; i++) {
      		paths.push(new google.maps.LatLng(latlngarray[i][0], latlngarray[i][1]));
      		}
      		console.dir(paths);
    return paths
    }
   

    function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('pickup').value;
        geocoder.geocode({'address': address}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {resultsMap.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({map: resultsMap,position: results[0].geometry.location});
                
                if(google.maps.geometry.poly.containsLocation(results[0].geometry.location, homekeyPoly) == true) {
                homekey_pickup = true;
                }
            }
        });
    }

    function geocodeAddress2(geocoder, resultsMap) {
        var address = document.getElementById('dropoff').value;
        geocoder.geocode({'address': address}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {resultsMap.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({map: resultsMap,position: results[0].geometry.location});
                if(google.maps.geometry.poly.containsLocation(results[0].geometry.location, homekeyPoly) == true) {
                homekey_dropoff = true;
                
            } else {
            homekey_dropoff = false;
            }
            }
        });
    }



     function calculateAndDisplayRoute(directionsService, directionsDisplay) {
         directionsService.route({
             origin: document.getElementById('pickup').value,
             destination: document.getElementById('dropoff').value,
             travelMode: google.maps.TravelMode.DRIVING
         }, function(response, status) {
             if (status === google.maps.DirectionsStatus.OK) {
                 directionsDisplay.setDirections(response);
             } else {
                 // window.alert('Directions request failed due to ' + status);
             }
         });
     }

     // This example displays an address form, using the autocomplete feature
     // of the Google Places API to help users fill in the information.

     var placeSearch, dropoff , pickup ;

     function initAutocomplete() {
     
     var perthBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-32.787777, 115.556739), new google.maps.LatLng(-31.159266, 116.545509));
     
         pickup = new google.maps.places.Autocomplete((document.getElementById('pickup')),{types: ['geocode','establishment'],
             componentRestrictions:{country:"au"}, bounds: perthBounds, strictBounds: true,});
         pickup.addListener();
         pickup.addListener('place_changed', function() {
             homekeyPoly.setMap(null);
             initMap();
         });
         dropoff = new google.maps.places.Autocomplete((document.getElementById('dropoff')),{types: ['geocode','establishment'],
             componentRestrictions:{country:"au"}, bounds: perthBounds, strictBounds: true,});
         dropoff.addListener();
         dropoff.addListener('place_changed', function() {
          homekeyPoly.setMap(null);
          initMap();   
         });
     
     initMap();
     }
     
     

     function distance() {
         var pickup = $('#pickup').val();
         var dropoff = $('#dropoff').val();

         var dataString = 'point1=' + pickup + "&point2=" + dropoff;

         $.ajax({
         	type: "POST",
         	url: "11.php",
               	data: {pickup: pickup, dropoff: dropoff},
               	dataType: 'json',
                success: function (data) {
         	console.log(data.distance);
         	console.log(data.time);
         	var distance = data.distance;
         	var journey_time = data.time;
         	
         	$('#totalPrice').text( '$' + parseFloat(Math.ceil(( ( distance.split(" ")[0].replace("," , "") ) * 2.5) + 39 )).toFixed(2) );
         	$('#totalPrice2').text("Out of area");
         	if(homekey_pickup == true && homekey_dropoff == true) {
         	
         	var homekeyquote = Math.ceil(( ( distance.split(" ")[0].replace("," , "") ) * 2) + 5.10 + ( journey_time.split(" ")[0].replace("mins" , "") ) * 0.66 );
         	
         	$('#totalPrice2').text('$' + parseFloat(homekeyquote).toFixed(2)) ;
         	} else {
         	
         	}
         	}
         	
            
               
                 
             
         });
     }

     function isNumber(obj) { return !isNaN(parseFloat(obj)) }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCq_JZBDbrE5qma5SgF06M2dVAqbiZBZ-o&libraries=places,geometry&callback=initAutocomplete"   async defer></script>
</body>
</html>