@extends('cabMeWebsite.master')
<title>Trip Details</title>
<style>
    #map {
        width: 100%;
        height: 350px;
        background: grey;
        frameborder:0;
        border:0;
        margin-bottom: -6px;
        allowfullscreen:"";
    }
</style>
@section('content')

    <section class="search-cab">
        <form  id="formdata" >
        <div id="map"></div>
        <div class="container">
            <div class="col-12">
                <div class="current-trip ml-auto mr-auto my-2 my-sm-3 my-md-4">
                    <input class="form-control" type="hidden" name="user_id" id="user_id" value="{{$_SESSION['userid']}}"  />
                    <input class="form-control" type="hidden" name="ride_id" id="ride_id" value="" />
                    <div class="row py-2 py-md-3">
                        <div class="col-2 col-md-2" id="driver_image">

                        </div>
                        <div class="col-7 col-md-7 p-0">
                            <p class="m-0"><strong><lable id="driver_name"></lable></strong> <label id="stars"></label> <i class="fas fa-star text-warning"></i>
                            </p>
                            <small class="text-gray d-block"><label id="vehicle_make"> </label></small>
                                <small class="text-gray d-block"><label id="vehicle_model"> </label></small>

                            <input type="hidden" name="origin_place_lat" id="origin_place_lat" value="">
                            <input type="hidden" name="origin_place_lng" id="origin_place_lng" value="">
                            <input type="hidden" name="destination_place_lat" id="destination_place_lat" value="">
                            <input type="hidden" name="destination_place_lng" id="destination_place_lng" value="">

                            <input type="hidden" name="pickup_location" id="pickup_location" value="">
                            <input type="hidden" name="dropoff_location" id="dropoff_location" value="">
                        </div>
                        <div class="col-3 col-md-3">
                            <strong class="border-bottom mt-2 mt-md-4 d-block"
                                    style="border-color:rgb(236, 167, 167)!important"><label id="license_plate"></label>
                            </strong>
                        </div>
                    </div>
                    <!--//Row-->
                    <div class="row text-center">

                        <div class="col-12">
{{--                            <time>2:00pm</time>--}}
                            <strong ><div id="rideStatus"></div></strong>
                            <div class="clearfix"></div>
                            <a href="#" id="cancel_trip" class="theme-btn-small d-inline-block mt-3">Cancel Trip</a>
                        </div>
                    </div>
                    <!--//Row-->
                </div>
            </div>
        </div>
        </form>


    <script type="text/javascript">

        var here_app_id = '';
        var here_app_code = '';
        var here_api_key = '';

        var rideDetails = '';

        var jsonRideDetails = JSON.parse(rideDetails);
        
        var base_url = '