<?php

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

session_start();

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


$U_ID = $_SESSION['U_Log'];


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








$sql3 = mysqli_query($dbConn,"select * from users where ID='$U_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'];




if ($location==''){
	
	
	
$geocode=file_get_contents('https://maps.googleapis.com/maps/api/geocode/json?latlng='.$lat.','.$lon.'&sensor=false&key=AIzaSyDemEmJPVUC9PoCzTLZLZdhwJLt5fu5XUc');
$output= json_decode($geocode);
$formattedAddress = @$output->results[0]->formatted_address;


$location = $formattedAddress;
	
	
}

	



if(isset($_POST['Submit']))
{


$U_ID = $_POST['U_ID'];
	$lng2 = $_POST['lng2'];
	$lat2 = $_POST['lat2'];
	
	
	
	
	$To_Location = $_POST['To_Location'];
	

	


echo '<script language="JavaScript">
 document.location="private-mix-gender-1.php?To_Location='.$To_Location.'&lng2='.$lng2.'&lat2='.$lat2.'&U_ID='.$U_ID.'";
</script>';


}



?>

<!doctype html>
<html lang="ar" dir="rtl">
<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>رحلة خاصة بين الجنسين</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"/>


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





	<style>
@font-face {
   font-family: myFirstFont;
   src: url(../../../fonts/GE-SS-Two-Bold.otf);
   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>






<style type="text/css">
    .input-controls1 {
      margin-top: 10px;
      border: 1px solid transparent;
      border-radius: 2px 0 0 2px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      height: 32px;
      outline: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    #searchInput1 {
      background-color: #fff;
      font-family: Roboto;
      font-size: 15px;
      font-weight: 300;
      margin-left: 12px;
      padding: 0 11px 0 13px;
      text-overflow: ellipsis;
      width: 50%;
    }
    #searchInput1:focus {
      border-color: #4d90fe;
    }
	
	
	
	
	
	
	  .input-controls2 {
      margin-top: 10px;
      border: 1px solid transparent;
      border-radius: 2px 0 0 2px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      height: 32px;
      outline: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    #searchInput2 {
      background-color: #fff;
      font-family: Roboto;
      font-size: 15px;
      font-weight: 300;
      margin-left: 12px;
      padding: 0 11px 0 13px;
      text-overflow: ellipsis;
      width: 50%;
    }
    #searchInput2:focus {
      border-color: #4d90fe;
    }
	
	
	
	
	
	
	

	
	
	
</style>











<script>
function showPosition() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showMap, showError);
    } else {
        alert("Sorry, your browser does not support HTML5 geolocation.");
    }
}
 
// Define callback function for successful attempt
function showMap(position) {
    // Get location data
    lat = position.coords.latitude;
    long = position.coords.longitude;
    var latlong = new google.maps.LatLng(lat, long);
    
    var myOptions = {
       center: latlong,
        zoom: 16,
	  zoomControl: true,
  mapTypeControl: false,
  scaleControl: true,
  streetViewControl: false,
  rotateControl: true,
  fullscreenControl: true,

	   
        navigationControlOptions: {
            style:google.maps.NavigationControlStyle.SMALL
        }
    }
    
    var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);
    var marker = new google.maps.Marker({ position:latlong, map:map, title:"You are here!" });
}
 
// Define callback function for failed attempt
function showError(error) {
    if(error.code == 1) {
        result.innerHTML = "You've decided not to share your position, but it's OK. We won't ask you again.";
    } else if(error.code == 2) {
        result.innerHTML = "The network is down or the positioning service can't be reached.";
    } else if(error.code == 3) {
        result.innerHTML = "The attempt timed out before it could get the location data.";
    } else {
        result.innerHTML = "Geolocation failed due to unknown error.";
    }
}
</script>











</head>
<body onload="getLocation()" style="height:auto !important" >
<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;

                    // ارسال 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?U_ID=<?php echo $U_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>



<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }







}



var inputVal;
function showPosition(position) {
  
	
			document.getElementById('long123').value = position.coords.longitude;
         document.getElementById('lat123').value = position.coords.latitude
		 
		 
		 

  inputVal = position.coords.longitude;
		 
}





</script>



</script>
	<INPUT TYPE="hidden" id="long123">
     <INPUT TYPE="hidden" id="lat123">
		
	



<!--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>رحلة خاصة بين الجنسين</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><br><br>
       
  
     
				
		<form  method="post" action="private-mix-gender.php" enctype="multipart/form-data">
		<input type="hidden" name="U_ID" value="<?php echo $U_ID; ?>"/>
        <div >
            <div class="margin-top-10 height-auto" id="origin-input-container">
               




				
	
                <div class="w-100 map-input-container map-input-container-bottom">
				&nbsp;&nbsp;الإنزال &nbsp;&nbsp;location
                    <span class="map-input-icon"><img src="../../../icons/circle.svg"  alt="Current Location Icon"></span>
                    <div class="map-input display-flex">
                        <input name="To_Location" id="location2" readonly class="controls flex-1" type="text"
                               placeholder="حدد موقع الوجهة" value="<?php echo $location; ?>" required>
                    </div>
                </div>
				
				
				
				
				
	 <input id="searchInput2" class="input-controls1" type="text" value="" placeholder="أدخل الموقع">
 <div class="map" id="map2" style="width: 100%; height: 609px;"></div>
 <div class="form_area">
     <input type="hidden" name="lat2" value="<?php echo $lat; ?>" id="lat2">
     <input type="hidden" name="lng2" value="<?php echo $lon; ?>" id="lng2">
 </div>
<script>
/* script */
function initialize2() {
   var latlng2 = new google.maps.LatLng(<?php echo $lat; ?>,<?php echo $lon; ?>);
    var map2 = new google.maps.Map(document.getElementById('map2'), {
      center: latlng2,
      zoom: 19,
	  zoomControl: true,
  mapTypeControl: false,
  scaleControl: true,
  streetViewControl: false,
  rotateControl: true,
  fullscreenControl: true
    });
	const trafficLayer = new google.maps.TrafficLayer();
			trafficLayer.setMap(map2);
    var marker2 = new google.maps.Marker({
      map: map2,
      position: latlng2,
      draggable: true,
      anchorPoint: new google.maps.Point(0, -29)
   });
    var input2 = document.getElementById('searchInput2');
    map2.controls[google.maps.ControlPosition.TOP_LEFT].push(input2);
    var geocoder2 = new google.maps.Geocoder();
    var autocomplete2 = new google.maps.places.Autocomplete(input2);
    autocomplete2.bindTo('bounds', map2);
    var infowindow2 = new google.maps.InfoWindow();   
    autocomplete2.addListener('place_changed', function() {
        infowindow2.close();
        marker2.setVisible(false);
        var place2 = autocomplete2.getPlace();
        if (!place2.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }
  
        // If the place has a geometry, then present it on a map.
        if (place2.geometry.viewport) {
            map2.fitBounds(place2.geometry.viewport);
        } else {
            map2.setCenter(place2.geometry.location);
            map2.setZoom(17);
        }
       
        marker2.setPosition(place2.geometry.location);
        marker2.setVisible(true);          
    
        bindDataToForm2(place2.formatted_address,place2.geometry.location.lat(),place2.geometry.location.lng());
        infowindow2.setContent(place2.formatted_address);
        infowindow2.open(map1, marker2);
       
    });
    // this function will work on marker move event into map 
    google.maps.event.addListener(marker2, 'dragend', function() {
        geocoder2.geocode({'latLng': marker2.getPosition()}, function(results2, status2) {
        if (status2 == google.maps.GeocoderStatus.OK) {
          if (results2[0]) {        
              bindDataToForm2(results2[0].formatted_address,marker2.getPosition().lat(),marker2.getPosition().lng());
              infowindow2.setContent(results2[0].formatted_address);
              infowindow2.open(map2, marker2);
          }
        }
        });
    });
}
function bindDataToForm2(address2,lat2,lng2){
   document.getElementById('location2').value = address2;
   document.getElementById('lat2').value = lat2;
   document.getElementById('lng2').value = lng2;
}
google.maps.event.addDomListener(window, 'load', initialize2);
</script>
		 
					
				
				
				
				
				
				
				

                        <div class="trip-fare-container font-weight-light">
                            <div class="trip-fare-item">



<!--Choose a Car Container Start-->
            <div class="ride-options-bottom" style="position: fixed;">
                
               
              

                <div class="confirm-ride-btn" >
                    <button  type="submit" name="Submit" style="font-size: 16px; border-style: dashed; color:#011F39; border-color:#B3E207; background-color:#ebebeb" class="btn btn-primary"/>تأكيد النزول</button>
                </div>
            </div>
            <!--Choose a Car Container End-->




</div>
</div>








</form>































        
    </div>

   <?php
   include 'menu.php';
   ?>
</body>
</html>