<?php






ini_set('session.gc_maxlifetime', 30*60);

session_start();

include '../../includes/config.php';



$D_ID = $_SESSION['D_Log'];




if (!$_SESSION['D_Log'])
echo '<script language="JavaScript">
 document.location="../Drivers-Sign-In.php";
</script>';







$sql3 = mysqli_query($dbConn,"select * from drivers where ID='$D_ID'");
					$row3 = mysqli_fetch_array($sql3);
$Name=$row3['Name'];
$Phone_Number=$row3['Phone_Number'];
$Gender=$row3['Gender'];
$Photo=$row3['Photo'];
$lon=$row3['Longitude'];
$lat=$row3['Latitude'];
$Total_Rates=$row3['Total_Rates'];
$Car_Type=$row3['Car_Type'];
$Car_Color=$row3['Car_Color'];
$Penalty_Balance=$row3['Penalty_Balance'];
$Credit_Balance=$row3['Credit_Balance'];
$Total_Need_Balance=$row3['Total_Need_Balance'];
$Avalability_Status=$row3['Avalability_Status'];




$TP_ID = $_GET['TP_ID'];



		
$sql2 = mysqli_query($dbConn,"select * from trips_privates where ID='$TP_ID'");
$row2 = mysqli_fetch_array($sql2);
	
$TP_ID = $row2['ID'];
	$Gender = $row2['Gender'];
	$Date = $row2['Date'];
	$From_Longitude = $row2['From_Longitude'];
	$From_Latitude = $row2['From_Latitude'];
	$To_Longitude = $row2['To_Longitude'];
	$To_Latitude = $row2['To_Latitude'];
	$From_Location = $row2['From_Location'];
	$To_Location = $row2['To_Location'];
	$Total_KM_Distance = $row2['Total_KM_Distance'];
	$Total_Riders = $row2['Total_Riders'];
	$Total_Price = $row2['Total_Price'];
	$From_Time = $row2['From_Time'];
	$To_Time = $row2['To_Time'];
	$Status = $row2['Status'];
	$Estimation_Time = $row2['Estimation_Time'];

	
	
	


?>

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="../../css/fontawesome.css">
    <!-- Main Style -->
    <link rel="stylesheet" href="../../css/styles.css">
    <title>Trip details</title>
	
	    <link rel="shortcut icon" href="../../images/icon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>


	<style>
@font-face {
   font-family: myFirstFont;
   src: url(../../fonts/Arial-Rounded-MT-Bold-Regular.ttf);
   font-size:8px;
}

body {
   font-family: myFirstFont !important;
}


@font-face {
   font-family: myFirstFont2;
   src: url(../../fonts/GE-SS-Two-Bold.otf);
   font-size:8px;
}



</style>












</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latitude = position.coords.latitude;
                    var longitude = position.coords.longitude;

                    // Send this to your PHP script via AJAX or other means
                    sendDataToServer(latitude, longitude);
                });
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }

        function sendDataToServer(latitude, longitude) {
            // Using fetch API to send data to PHP
            fetch('update-my-location-1.php?D_ID=<?php echo $D_ID; ?>	', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    latitude: latitude,
                    longitude: longitude
                })
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }

        // Keep updating every 5 seconds
        setInterval(getLocation, 5000);
    </script>



<!--Loading Container Start-->
<div id="load" class="loading-overlay display-flex flex-column justify-content-center align-items-center">
    <div class="primary-color font-28 fas fa-spinner fa-spin"></div>
</div>
<!--Loading Container End-->


<div class="row h-100">
    <div class="col-xs-12 col-sm-12 remaining-height">

        <!--Page Title & Icons Start-->
        <div class="header-icons-container text-center">
           
                <span class="float-left menu-open closed">
                    <img src="../../icons/menu.svg" alt="Menu Hamburger Icon">
            </span>
            <span class="title"><br>Trip details</span>
            <a href="#">
<span class="float-right" style="margin-top:-27px !important">
                    <img src="../../images/icon.png" alt="Logo" width="14px" height="20px">
                </span>
            </a>
        </div>
        <!--Page Title & Icons End-->
       
  
     
	
<br>



 <div class="rest-container" style="margin-top:-50px">
            <div class="all-history-items remaining-height">
                <div class="history-items-container trip-history">
                    <div class="history-item">
                        <!--Google Map Start-->
                        <div id="map1"></div>
                        <!--Google Map End-->

                        <!--Date & Time Container Start-->
                        <div class="border-bottom-primary thin">
                            <div class="status-container">
                                <div class="date float-left" style="color:#011f39">
                                    <img src="../../icons/calendar.svg"  alt="Calendar Icon" class="calendar-icon"> <?php echo $Date; ?>
                                </div>
                              
							  
							   <div class="date float-right" style="color:#011f39">
                                    <img src="../../icons/clock.svg"  alt="" class="calendar-icon"> <?php echo $From_Time; ?> - <?php echo $To_Time; ?>
                                </div>
								
								
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <!--Date & Time Container End-->

                          <!--Address Container Start-->
                        <div class="addresses-container position-relative">
                            <div class="height-auto">
                                <div class="w-100 map-input-container map-input-container-top" style="border-color:#00000000 ">
                                    <span class="fas fa-location-arrow location-icon-rotate  map-input-icon" style="background-color:#00000000 "></span>
                                    <div class="map-input display-flex">
                                        <input class="controls flex-1 font-weight-light" type="text"
                                               placeholder="Enter an origin location" value="<?php echo $From_Location; ?>" disabled>
											   
                                    </div>
                                </div>
                                <div class="w-100 map-input-container map-input-container-bottom">
                                        <span class="map-input-icon"><img src="../../icons/circle.svg"  alt="Current Location Icon"></span>
                                        <div class="map-input display-flex controls flex-1 align-items-center">
                                            <?php echo $To_Location; ?>
                                        </div>
                                        <span class="dotted-line"></span>
                                    </div>
                            </div>
                        </div>
                        <!--Address Container End-->
						<br>

                        <!--Trip Costs Container Start-->
                        <div class="border-bottom-primary thin width-48 border-bottom-light-grey" style="color:#011f39">
                            <div class=" trip-fare">Trip information</div>
                        </div>

                        <div class="trip-fare-container font-weight-light" style="color:#011f39">
						
						
						
	
							<div class="trip-fare-item">
                                <span class="float-left">Trip price</span>
                                <span class="float-right blue-price" style="color:#011f39"><?php echo $Total_Price; ?> JOD</span>
                                <span class="clearfix"></span>
                            </div>
							
							
							<div class="trip-fare-item">
                                <span class="float-left">Total riders</span>
                                <span class="float-right blue-price" style="color:#011f39"><?php echo $Total_Riders; ?></span>
                                <span class="clearfix"></span>
                            </div>
							
                            <div class="trip-fare-item">
                                <span class="float-left">Total km distance</span>
                                <span class="float-right blue-price" style="color:#011f39"><?php echo $Total_KM_Distance; ?> KM</span>
                                <span class="clearfix"></span>
                            </div>
                           
							   <div class="trip-fare-item">
                                <span class="float-left">Estimation time</span>
                                <span class="float-right blue-price" style="color:#011f39"><?php echo $Estimation_Time; ?> MINUTES</span>
                                <span class="clearfix"></span>
                            </div>
							
							
							
							
                            <div class="trip-fare-item">
                                <span class="float-left">Status</span>
                                <span class="float-right blue-price" style="color:#011f39"><?php echo $Status; ?></span>
                                <span class="clearfix"></span>
                            </div>
							
							
							
						
							
							
							
							
							
							
                        </div>
                        <!--Trip Costs Container End-->

                        

                    </div>
                </div>
            </div>
        </div>
		
		
		

        
    </div>

<?php
include 'menu.php'
?>




<script>
$(document).ready(function(){
    "use strict";
});
var map1;
var markerArray = [];
function initMap1() {
    var myOptions = {
        zoom: 14,
        disableDefaultUI: true
    };
    var oneMoreMapExists = true;
    var i =1;
    var originDestinationObj = [
        {
            origin: "<?php echo $From_Location; ?>",
            destination: "<?php echo $To_Location; ?>"
        },
       
    ];
    while(oneMoreMapExists){
        if($('#map'+i).length>0){
            var directionsDisplay1 = new google.maps.DirectionsRenderer;
            var directionsService1 = new google.maps.DirectionsService;
            var map1 = new google.maps.Map(document.getElementById('map'+i), myOptions);
            directionsDisplay1.setMap(map1);
            calculateAndDisplayRoute(originDestinationObj[i-1].origin,
                originDestinationObj[i-1].destination,
                directionsService1,
                directionsDisplay1,
                markerArray);
            i++;
        }
        else{
            oneMoreMapExists = false;
        }
    }
}

function calculateAndDisplayRoute(origin,destination, directionsService, directionsDisplay, markerArray) {
    for (var i = 0; i < markerArray.length; i++) {
         markerArray[i].setMap(null);
    }
    var icons = {
        start: new google.maps.MarkerImage(
            // URL
            '../icons/circle.svg',
            // (width,height)
            new google.maps.Size( 16, 16 ),
            // The origin point (x,y)
            new google.maps.Point( 0, 0 ),
            // The anchor point (x,y)
            new google.maps.Point( 0, 8 )
        ),
        end: new google.maps.MarkerImage(
            // URL
            '../images/end.png',
            // (width,height)
            new google.maps.Size( 58, 53 ),
            // The origin point (x,y)
            new google.maps.Point( 0, 0 ),
            // The anchor point (x,y)
            new google.maps.Point( 22, 32 )
        )
    };
    directionsService.route({
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode['DRIVING'],
        provideRouteAlternatives: true
    }, function (response, status) {
        if (status == 'OK') {
            directionsDisplay.setDirections(response);
            var leg = response.routes[0].legs[0];
            console.log(response);
            makeMarker1(leg.start_location, icons.start, "Route Start");
            makeMarker1(leg.end_location, icons.end, 'Route End');
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
	
	
	
	
  
  
  
}
// }
function makeMarker1( position, icon, title, listener=true) {
    console.log(position);
    console.log(icon);
    var marker = new google.maps.Marker({
        position: position,
        map: map1,
        icon: icon,
        title: title,
        animation: google.maps.Animation.DROP,
    });
    markerArray.push(marker);
}






  
  
</script>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDemEmJPVUC9PoCzTLZLZdhwJLt5fu5XUc&libraries=places&callback=initMap1"></script>

</body>
</html>