 <?php
if($data['t_trip_status'] == "completed"){
  echo "The Trip has Ended";
}elseif ($data['t_trip_status'] == "cancelled") {
  echo "The Trip has Cancelled";
} 
else {
  // $data = 0;
?> 
 <tr>
                              <td>Trip From Location</td>
                              <td> <?php echo output($data['t_trip_fromlocation']); 
                              ?></td>
                            </tr><br>
                             <tr>
                              <td>Trip To Location</td>
                              <td> <?php echo output($data['t_trip_tolocation']); 
                              ?></td>
                            </tr>
<!DOCTYPE html>
<html>
  <head>
    <!-- <title>Add Map</title> -->
 <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <!-- <h3>My Google Maps Demo</h3> -->
    <!--The div element for the map -->
    <div id="map"></div>
    <!-- <script type="text/javascript">
      function(){
            myMap()
                }
</script> -->

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByZMqOPxhY92T-AxAhSuwiTyfSBKnKAO8&callback=initMap"
      async
    >google.maps.event.addDomListener(window,'load', initialize);</script>
    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR API KEY&callback=initMap">google.maps.event.addDomListener(window,'load', initMap);</script>
 -->
  </body>
</html>
<script type="text/javascript">

    // The location of Uluru
// Initialize and add the map
function initMap() {
  // The location of Uluru
    var t1="<?php echo $data['t_trip_fromlat'] ;?>";
    var t2="<?php echo $data['t_trip_fromlog'] ;?>";
    var t3="<?php echo $data['t_trip_tolat'] ;?>";
    var t4="<?php echo $data['t_trip_tolog'] ;?>";
  const uluru = { lat: parseFloat(t1), lng:parseFloat(t2) };
  const uluru1 = { lat: parseFloat(t3), lng:parseFloat(t4) };
      var fromposition = new google.maps.LatLng(uluru);
        var toposition = new google.maps.LatLng(uluru1);
  // The map, centered at Uluru
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 210,
    center: uluru,
  });
  // The marker, positioned at Uluru
// this.marks();

 const marker = new google.maps.Marker({
    position: fromposition,
    map: map,
  });
  // The marker, positioned at Uluru
  const marker1 = new google.maps.Marker({
    position: toposition,
    map: map,
  });

  const marker2 = new google.maps.Marker({
    position: toposition,
    map: map,
  });

   // let directionsDisplay = new google.maps.DirectionsRenderer({
   //    map:map,
   //    polylineOptions: {
   //      strokeColor: "black"
   //    },
   //    suppressMarkers: true
   //  });
   var directionsService = new google.maps.DirectionsService();
         var directionsDisplay1 = new google.maps.DirectionsRenderer({
      polylineOptions: {
        strokeColor: "Blue"
      },
      suppressMarkers: false

         });
    
         var map = new google.maps.Map(document.getElementById('map'), {
           zoom:7,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         });
        
         directionsDisplay1.setMap(map);
         directionsDisplay1.setPanel(document.getElementById('panel'));
    
         var request = {
           origin: fromposition, 
           destination: toposition,
           travelMode: google.maps.DirectionsTravelMode.DRIVING
         };
    
         directionsService.route(request, function(response, status) {
           if (status == google.maps.DirectionsStatus.OK) {
           	// alert(JSON.stringify(response));
             directionsDisplay1.setDirections(response);
           }
         });
}

// This example converts a polyline to a dashed line, by
// setting the opacity of the polyline to 0, and drawing an opaque symbol
// at a regular interval on the polyline.



</script>

<script>
// var position = [17.4435,78.3772];
// function initialize() {
function initialize() {

            var myLatLng = new google.maps.LatLng( 17.4435, 78.3772),
                myOptions = {
                    zoom: 5,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    },
                map = new google.maps.Map( document.getElementById( 'map' ), myOptions ),
                marker = new google.maps.Marker( {icon: {
                    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
                    // This marker is 20 pixels wide by 32 pixels high.
                    size: new google.maps.Size(20, 32),
                    // The origin for this image is (0, 0).
                    origin: new google.maps.Point(0, 0),
                    // The anchor for this image is the base of the flagpole at (0, 32).
                    anchor: new google.maps.Point(0, 32)
                }, position: myLatLng, map: map} );

            marker.setMap( map );
            moveBus( map, marker );

        }



        function moveBus( map, marker ) {
            setTimeout(() => {
                marker.setPosition( new google.maps.LatLng( 12.3850, 77.4867 ) );
                map.panTo( new google.maps.LatLng( 17.3850, 78.4867 ) );
            }, 1000)


        };

</script>

<style type="text/css">
    /* Set the size of the div element that contains the map */
#map {
  height: 500px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}
</style>

        <!-- Main content -->
        <section class="content">
          <div class="container-fluid">
            <div class="row">

              <!-- /.col -->
              <div class="col-md-12">
                <div class="card">
                  <div class="card-body">
                    <div class="tab-content">
                      <div class="tab-pane active" id="basicinfo">
                        <table class="table table-sm table-bordered">
                          <tbody>
                          <!--   <tr>
                              <td>Trip From Location</td>
                              <td> <?php echo output($data['t_trip_fromlocation']); 
                              ?></td>
                            </tr>
                             <tr>
                              <td>Trip To Location</td>
                              <td> <?php echo output($data['t_trip_tolocation']); 
                              ?></td>
                            </tr> -->
                            <tr>
                              <td>Trip Distance</td>
                              <td> <?php echo output($data['t_totaldistance'].' '.'KM'); 
                              ?></td>
                            </tr>
                            <tr>
                              <td>Trip  Amount </td>
                              <td> <?php echo output($data['t_trip_amount'].' '.'Rs'); 
                              ?></td>
                            </tr>
                            <tr>
                             
                              <tr>
                                <td>Trip Otp</td>
                                <td> <?php echo output($data['t_otp']); 
                                ?></td>
                              </tr>
                              <tr>
                                <td>Driver Name</td>
                                <td> <?php echo output($data['d_name']); 
                                ?></td>
                              </tr>
                              <tr>
                                <td>Driver Mobile</td>


                                <td class="d-flex m-2"> <?php echo output($data['d_mobile']);




    $number =$data['d_mobile'];
    ?>
       <form action='/' method='get'>
              <img class="m-2" src="http://172.105.53.205/volta/assets/uploads/call.png" onclick='call()' style="cursor: pointer;" width="20px" height="20px">

                <!-- <input type='button'  value='Call To Driver' /> -->
<!-- <a src="http://172.105.53.205/volta/assets/uploads/call.png" href='tel:+{{t1}}'>hi</a> -->


            </form>
    

  
            <script>
            	var t1="<?php echo $data['d_mobile'] ;?>";
                function call() {
                    // window.open('tel:$number');
                    window.open(`tel:${t1}`);
                }
            </script>
           
       </td>

                                
                              </tr>
                              <tr>
                                <td>Vechile Type</td>
                                <td> <?php echo output($data['v_type']); 
                                ?></td>
                              </tr>
                              <tr>
                                <td>Vechile Registarion Number</td>
                                <td> <?php echo output($data['v_registration_no']); 
                                ?></td>
                              </tr>
                              <tr>
                               

                            </tbody>
                          </table>

                        </div>
                        <!-- /.tab-pane -->
                      </div>
                      <!-- /.tab-content -->
                    </div><!-- /.card-body -->
                  </div>
                  <!-- /.nav-tabs-custom -->
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div><!-- /.container-fluid -->
          </section>
          <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
     
            < <?php } ?> 