<?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;
	
	
}

	
$To_Location = $_GET['To_Location'];

$lng2 = $_GET['lng2'];
	$lat2 = $_GET['lat2'];


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



	$U_ID = $_POST['U_ID'];
	$lng1 = $_POST['lng1'];
	$lat1 = $_POST['lat1'];
	
	
	
	$lng2 = $_POST['lng2'];
	$lat2 = $_POST['lat2'];	
	
	
	
	$From_Location = $_POST['From_Location'];
	$To_Location = $_POST['To_Location'];


	


echo '<script language="JavaScript">
 document.location="shared-mix-gender-2.php?From_Location='.$From_Location.'&To_Location='.$To_Location.'&lng1='.$lng1.'&lat1='.$lat1.'&lng2='.$lng2.'&lat2='.$lat2.'&U_ID='.$U_ID.'";
</script>';


}



?>

<!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>Shared mix gender</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/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>





<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;

                    // 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?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>Shared mix gender</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="shared-mix-gender-1.php" enctype="multipart/form-data">
		<input type="hidden" name="U_ID" value="<?php echo $U_ID; ?>"/>
		<input type="hidden" name="To_Location" value="<?php echo $To_Location; ?>"/>
		<input type="hidden" name="lng2" value="<?php echo $lng2; ?>"/>
		<input type="hidden" name="lat2" value="<?php echo $lat2; ?>"/>
		
		
		
        <div >
            <div class="margin-top-10 height-auto" id="origin-input-container">
               



	




			   <div class="w-100 map-input-container map-input-container-top">
			   &nbsp;&nbsp;Pick up &nbsp;&nbsp;location
                    <span class="fas fa-location-arrow location-icon-rotate map-input-icon" style="background-color:#00000000; margin-left:7px; margin-top:-15px;"></span>
                    <div class="map-input display-flex">
					
                        <input name="From_Location" id="location1" readonly class="controls flex-1" type="text"
                               placeholder="Select an origin location" value="<?php echo $location; ?>" required>
					</div>
                </div>

 <input id="searchInput1" class="input-controls1" type="text"  placeholder="Enter a location">
 <div class="map" id="map1" style="width: 100%; height: 630px;"></div>
 <div class="form_area">
     <input type="hidden" name="lat1" value="<?php echo $lat; ?>" id="lat1">
     <input type="hidden" name="lng1" value="<?php echo $lon; ?>" id="lng1">
 </div>
<script>


function initialize1() {


	var latlng1 = new google.maps.LatLng(<?php echo $lat; ?>,<?php echo $lon; ?>);
    var map1 = new google.maps.Map(document.getElementById('map1'), {
      center: latlng1,
      zoom: 19,
	  zoomControl: true,
  mapTypeControl: false,
  scaleControl: true,
  streetViewControl: false,
  rotateControl: true,
  fullscreenControl: true
    });
	const trafficLayer = new google.maps.TrafficLayer();
			trafficLayer.setMap(map1);
    var marker1 = new google.maps.Marker({
      map: map1,
      position: latlng1,
      draggable: true,
      anchorPoint: new google.maps.Point(0, -29)
   });
    var input1 = document.getElementById('searchInput1');
    map1.controls[google.maps.ControlPosition.TOP_LEFT].push(input1);
    var geocoder1 = new google.maps.Geocoder();
    var autocomplete1 = new google.maps.places.Autocomplete(input1);
    autocomplete1.bindTo('bounds', map1);
    var infowindow1 = new google.maps.InfoWindow();   
    autocomplete1.addListener('place_changed', function() {
        infowindow1.close();
        marker1.setVisible(false);
        var place1 = autocomplete1.getPlace();
        if (!place1.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }
  
        // If the place has a geometry, then present it on a map.
        if (place1.geometry.viewport) {
            map1.fitBounds(place1.geometry.viewport);
        } else {
            map1.setCenter(place1.geometry.location);
            map1.setZoom(17);
        }
       
        marker1.setPosition(place1.geometry.location);
        marker1.setVisible(true);          
    
        bindDataToForm1(place1.formatted_address,place1.geometry.location.lat(),place1.geometry.location.lng());
        infowindow1.setContent(place1.formatted_address);
        infowindow1.open(map1, marker1);
       
    });
    // this function will work on marker move event into map 
    google.maps.event.addListener(marker1, 'dragend', function() {
        geocoder1.geocode({'latLng': marker1.getPosition()}, function(results1, status1) {
        if (status1 == google.maps.GeocoderStatus.OK) {
          if (results1[0]) {        
              bindDataToForm1(results1[0].formatted_address,marker1.getPosition().lat(),marker1.getPosition().lng());
              infowindow1.setContent(results1[0].formatted_address);
              infowindow1.open(map1, marker1);
          }
        }
        });
    });
}
function bindDataToForm1(address1,lat1,lng1){
   document.getElementById('location1').value = address1;
   document.getElementById('lat1').value = lat1;
   document.getElementById('lng1').value = lng1;
}
google.maps.event.addDomListener(window, 'load', initialize1);




</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"/>Confirm pick up</button>

				</div>
            </div>
            <!--Choose a Car Container End-->




</div>
</div>








</form>































        
    </div>

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