@extends('layouts.rider')
 
@section('title', 'Rider Dashboard')
<style>

    #output{
        display:none;
    }
.result {
    position: relative;
}

.result {
    width: 100%;
    background: #fff;
    color: #34394A;
    overflow: hidden;
    -webkit-box-shadow: inset 0 0 0 1px #DFDFD0;
    -moz-box-shadow: inset 0 0 0 1px #DFDFD0;
    box-shadow: inset 0 0 0 1px #DFDFD0;
    margin: 0 0 30px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 15px;
    height:150px;
}
.result .one-fourth {
    width: 50%;
    position: absolute;
    top: 10px;
    left: 50%;
    height: auto !important;
}

</style>
 
@section('content')
<div class="page-content">
                    <div class="container-fluid">
                        
                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h4 class="mb-sm-0">Ride Now</h4>

                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="javascript: void(0);">ShieldRide-Rider</a></li>
                                            <li class="breadcrumb-item active">Ride Now</li>
                                        </ol>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end page title -->
                  
                        <div class="row">
                           
                        <div class="col-3">
                                <div class="card border border-danger">
                                    <div class="card-header bg-transparent border-danger">
                                        <h4 class="my-0 text-danger">Get a ride</h4>
                                    </div>
                                    <div class="card-body">
                                 
                                <div class="card">
                                    <div class="card-body">
    
                                        <form action="#" class="custom-validation">
        
                                            <div class="mb-3">
                                               
                                                <div>
                                                    <input type="text" class="form-control" id="from" name="from"
                                                            data-parsley-minlength="6" placeholder="Pickup Location"/>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                
                                                <div>
                                                    <input type="text" class="form-control" id="to" name="to"
                                                            data-parsley-maxlength="6" placeholder="Dropoff Location"/>
                                                </div>
                                            </div>
                                           
                                          
        
                                            <div class="mb-0">
                                                <div>
                                                    <button type="submit" id="serachroute" class="btn btn-primary waves-effect waves-light me-1 mb-3">
                                                        Search
                                                    </button>
                                                  
                                                </div>
                                            </div>
                                        </form>
        
                                 
                                </div>
                            </div> <!-- end col -->
                        </div> <!-- end row -->
                                    </div>
                                </div>
                          

                        
                        <div class="col-lg-9">
                            <div class="row">
                                    <div id="output" >
                                    <form action="{{ route('priderRidenow') }}" method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <input class="form-control" type="hidden" id="pickupLoc"  name="pickupLoc" >
                                            <input class="form-control" type="hidden" id="dropoffLoc"  name="dropoffLoc" >
                                            <input class="form-control" type="hidden" id="distance"  name="distance" >
                                            <input class="form-control" type="hidden" id="estFare"  name="estFare" >
                                            <input class="form-control" type="hidden" id="duration"  name="duration" >
                                      
                                            <article class="result">
                                            <div class="one-fourth heightfix"><img src="uploads/vehiclePicture/1700171436.images (1).jpeg" alt="" /></div>
                                            <div class="one-half heightfix">
                                                <h5>ShieldRideX </h5>
                                                <span class="ico luggage" id="duratn">13 mins away</span>
                                                <p>Toyota Camry 2010.  <strong>4 seats</strong></p>
                                                <h5><small>NGN</small><span id="sprice">8,500 </span> 
                                                <button type="submit" class="btn btn-danger waves-effect waves-light me-1">
                                                book now 
                                                       </button>
                                                
                                            </h5>       
                                            </div>                          
                                            </article>
                                    </form>
                                    </div>                                        
                
                                    <div id="shieldrideMap" class="col-12"></div>
                                        
                                    </div> <!-- end col -->

                            </div>
                           
                        </div><!-- end row -->

  
    
                       
                        <!-- end row -->
                    </div>
                   
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXUbqDVWXvLfG-vdoNzwswXryu7MmI6TU&libraries=places"></script>

        <script type="text/javascript" >

            let map, directionsService, directionsRenderer, sourceAutocomplete, desAutocomplete;

            var myLatLng = { lat: 6.6131, lng: 3.2659 };
            var mapOptions = {
                center: myLatLng,
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            function initMap() {
                map = new google.maps.Map(document.getElementById('shieldrideMap'), mapOptions);
                directionsService = new google.maps.DirectionsService();
                directionsRenderer = new google.maps.DirectionsRenderer();
                directionsRenderer.setMap(map);
                sourceAutocomplete = new google.maps.places.Autocomplete( document.getElementById('from'))
                desAutocomplete = new google.maps.places.Autocomplete( document.getElementById('to'))

            }

           
            
            function calcRoute(){

                var source = document.getElementById('from').value;
                var dest = document.getElementById('to').value;

                let request = {
                    origin: source,
                    destination: dest,
                    travelMode: 'DRIVING',
                }

                directionsService.route(request, function(result,status){
                    if(status == "OK"){
                        directionsRenderer.setDirections(result);
                        document.getElementById("output").style.display = 'block';
                        document.getElementById("output").className = "col-6";
                        document.getElementById("shieldrideMap").className = "col-6";
                        
                        document.getElementById("duratn").innerHTML = result.routes[0].legs[0].distance.text + ' & ' + result.routes[0].legs[0].duration.text + ' away';
                        
                        const tstr = result.routes[0].legs[0].duration.text;
                        const ttime = tstr.slice(0, -4);
                        const str = result.routes[0].legs[0].distance.text;
                        const tprice = str.slice(0, -2);
                        const finalprice = tprice * 300;
                        document.getElementById("sprice").innerHTML = finalprice.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

                        document.getElementById("pickupLoc").value = source;
                        document.getElementById("dropoffLoc").value = dest;
                        document.getElementById("distance").value = tprice.trim();
                        document.getElementById("estFare").value = tprice * 300;
                        document.getElementById("duration").value = ttime.trim();
                      
                    }
                })
               
            }
              
    

            document.getElementById("serachroute").addEventListener("click", (e) => {
                e.preventDefault();
                calcRoute();
            });
        </script>        

@endsection