<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

        <title><?php echo $__env->yieldContent('title'); ?></title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
        <!-- Styles -->
        <link rel="stylesheet" href="<?php echo e(asset('css/custom.css')); ?>">
        <link rel="stylesheet" href="<?php echo e(asset('css/app.css')); ?>">
        <link rel="stylesheet" href="<?php echo e(asset('css/app.min.css')); ?>">
        <link rel="stylesheet" href="<?php echo e(asset('css/bootstrap.min.css')); ?>">
        <!-- Scripts -->
        <script src="<?php echo e(asset('js/app.js')); ?>" defer></script>
        <script src="<?php echo e(asset('js/pages/dashboard.init.js')); ?>" defer></script>
        <script src="<?php echo e(asset('js/app1.js')); ?>" defer></script>

        
        <!-- Libs -->
        <script src="<?php echo e(asset('libs/jquery/jquery.min.js')); ?>" defer></script>
        <script src="<?php echo e(asset('libs/bootstrap/js/bootstrap.bundle.min.js')); ?>" defer></script>  

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js">
        </script>
        <script src="<?php echo e(asset('js/custom.js')); ?>"></script>
        


       
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            <?php echo $__env->make('layouts.navigation', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>           

            <!-- Page Content -->
            <div class="container-fluid" style="background:#454545 !important;">
               <?php echo $__env->yieldContent('content'); ?>

              
            </div>
        </div>
        
        <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDoaKFTxDtwt5P24Y6eB0XFsJppuQS6ICQ&callback=initMap" async defer></script>
        <script>
        function initMap() {

     // add input listeners
       /*google.maps.event.addDomListener(window, 'load', function () {
            var from_places = new google.maps.places.Autocomplete(document.getElementById('pickup'));
            var to_places = new google.maps.places.Autocomplete(document.getElementById('dropoff'));
            var via_place = new google.maps.places.Autocomplete(document.getElementById('via'));

         

        });*/
        //setDestination();
/* Show map */    
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat:51.509865, lng:-0.118092},
      zoom: 13
    });

}         
    $(function () {
        var origin, destination, map;

        // add input listeners
        google.maps.event.addDomListener(window, 'load', function (listener) {
            setDestination();
            initMap();
        });

        
        function setDestination() {
             var options = {
             
             };

             /* auto complete address for booking */
            var from_places = new google.maps.places.Autocomplete(document.getElementById('from_places'),options);
            var to_places = new google.maps.places.Autocomplete(document.getElementById('to_places'),options);

            google.maps.event.addListener(from_places, 'place_changed', function () {
                var from_place = from_places.getPlace();
                var from_address = from_place.formatted_address;
                $('#origin').val(from_address);
            });

            google.maps.event.addListener(to_places, 'place_changed', function () {
                var to_place = to_places.getPlace();
                var to_address = to_place.formatted_address;
                $('#destination').val(to_address);
            });


        }

        function displayRoute(travel_mode, origin, destination, directionsService, directionsDisplay) {
           var option ={
            zoom : 2,
            center : origin 
        }; 
           var map = new google.maps.Map(document.getElementById('map'),option); 
           var display = new google.maps.DirectionsRenderer();
           var services = new google.maps.DirectionsService();
           display.setMap(map);
            var request ={
                origin : origin,
                destination:destination,
                travelMode: 'DRIVING'
            };
            services.route(request,function(result,status){
                if(status =='OK'){
                    display.setDirections(result);
                }
            });
            
        }

        // calculate distance , after finish send result to callback function
        function calculateDistance(travel_mode, origin, destination) {
           
            var DistanceMatrixService = new google.maps.DistanceMatrixService();
            DistanceMatrixService.getDistanceMatrix(
                {
                    origins: [origin],
                    destinations: [destination],
                    travelMode: google.maps.TravelMode[travel_mode],
                    unitSystem: google.maps.UnitSystem.IMPERIAL, // miles and feet.
                    // unitSystem: google.maps.UnitSystem.metric, // kilometers and meters.
                    avoidHighways: false,
                    avoidTolls: false
                }, save_results);
        }

        // save distance results
        function save_results(response, status) {

            if (status != google.maps.DistanceMatrixStatus.OK) {
                alert(err);
            } else {
                var origin = response.originAddresses[0];
                var destination = response.destinationAddresses[0];
                if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
                    alert("Sorry , not available to use this travel mode between " + origin + " and " + destination);
                } else {

                    if(origin==destination){
                        alert('Distance can not be lower than 1 mile');
                    }
                    else{
                    var distance = response.rows[0].elements[0].distance;
                    var duration = response.rows[0].elements[0].duration;
                    var distance_in_kilo = distance.value / 1000; // the kilo meter
                    var distance_in_mile = distance.value / 1609.34; // the mile
                    var duration_text = duration.text;
                    var total_fare= 2*distance_in_mile;
                    appendResults(origin,distance_in_kilo, distance_in_mile, duration_text,total_fare);
                    sendAjaxRequest(origin, destination, distance_in_kilo, distance_in_mile, duration_text);
                  }
                }
            }
        }

        // append html results
        function appendResults(origin,distance_in_kilo, distance_in_mile, duration_text,total_fare) {
            $('#pickup_loc').val(origin);
            $("#result1").removeClass("hide");
            $('#miles').val(distance_in_mile.toFixed(2)+'m');
            $('#tot_hours').val(duration_text);
            $('#fare').val(total_fare.toFixed(2));
        }

       

        // on submit  display route ,append results and send calculateDistance to ajax request
        $('#to_places').on('focus',function (e) {
            
            e.preventDefault();
            var origin = $('#origin').val();
            var destination = $('#destination').val();
            var travel_mode = $('#travel_mode').val();
            /*$latitude = $output->results[0]->geometry->location->lat;
            $longitude = $output->results[0]->geometry->location->lng;*/ 
            var directionsDisplay = new google.maps.DirectionsRenderer({'draggable': false});
            var directionsService = new google.maps.DirectionsService();
           displayRoute(travel_mode, origin, destination, directionsService, directionsDisplay);
            calculateDistance(travel_mode, origin, destination);


        });
/*
        $('#from_places').on('change',function (e) { 
            e.preventDefault();
            var auto= $(this).val();
            var geocoder = new google.maps.Geocoder();
            var address = "Bourne End";
            geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                alert(latitude);
                }
            } 
        });
*/
        

    });

    // get current Position
    function getCurrentPosition() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(setCurrentPosition);
        } else {
            alert("Geolocation is not supported by this browser.")
        }
    }

    // get formatted address based on current position and set it to input
    function setCurrentPosition(pos) {
        var geocoder = new google.maps.Geocoder();
        var latlng = {lat: parseFloat(pos.coords.latitude), lng: parseFloat(pos.coords.longitude)};
        geocoder.geocode({ 'location' :latlng  }, function (responses) {
            console.log(responses);
            if (responses && responses.length > 0) {
                $("#origin").val(responses[1].formatted_address);
                $("#from_places").val(responses[1].formatted_address);
                //    console.log(responses[1].formatted_address);
            } else {
                alert("Cannot determine address at this location.")
            }
        });

        

    }
    
     
        </script>
    </body>
</html>
<?php /**PATH C:\xampp\htdocs\taxiapp\resources\views////layouts/app.blade.php ENDPATH**/ ?>