<div class="page-margin">
	<div class="page-margin mt-0">
		<div class="wow_content popular_posts_hdr flex find_frnds">
			<h2>&nbsp;<?php echo $wo['lang']['find_friends']; ?></h2>
			<div class="search-blog">
				<form action="#">
					<input type="text" placeholder="<?php echo $wo['lang']['search_for_users']; ?>" id="nearby-username" onkeydown="Wo_LoadNearByUsers(this);">
					<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="8" stroke="currentColor" stroke-width="2"></circle><path d="M14.5 15.5L18.5 19.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
				</form>
			</div>
		</div>
	</div>
	
	<?php if (Wo_IsAdmin() && strpos($wo['config']['site_url'], 'https') === false): ?>
		<div class="text-center">
			<div class="alert alert-warning">SSL is required to able to use this feature. (Just admin can see this warning)</div>
		</div>
	<?php endif; ?>
	
	<div class="wow_content">
		<div id="map" class="wow_frnd_map"></div>

		<div class="row">
			<div class="col-md-5 wow_frnd_field">
				<h4><?php echo $wo['lang']['gender'];?></h4>
				<div class="nearby-users-gender-cont">
					<ul class="friends_nearby_status_ul">
						<li class="active" data-gender="all"><?php echo $wo['lang']['all'];?></li>
						<?php foreach ($wo['genders'] as $key => $gender) { ?>
							<?php if ($key == 'male') { ?>
								<li data-gender="<?php echo($key) ?>"><?php echo $gender;?></li>
							<?php }elseif ($key == 'female') { ?>
								<li data-gender="<?php echo($key) ?>"><?php echo $gender;?></li>
							<?php }else{ ?>
								<li data-gender="<?php echo($key) ?>"><?php echo $gender;?></li>
							<?php } ?>
						<?php } ?>
					</ul>
				</div>
			</div>
			<div class="col-md-7 wow_frnd_field">
				<h4><?php echo $wo['lang']['status']; ?></h4>
				<div class="nearby-users-gender-collapse nearby-users-status-collapse">
					<ul class="friends_nearby_status_ul">
						<li class="active" data-nearby-user-status="2"><?php echo $wo['lang']['all'];?></li>
						<li data-nearby-user-status="1"><?php echo $wo['lang']['online'];?></li>
						<li data-nearby-user-status="0"><?php echo $wo['lang']['offline'];?></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-4 wow_frnd_field">
				<h4><?php echo $wo['lang']['location_dist'];?></h4>
				<div class="select-nearby-users-distance">
					<form>
						<input type="range" class="cusrange" id="nearby-users-distance" name="amountRange" onchange="Wo_LoadNearByUsers();" value="0" min="1" max="1000" oninput="this.form.amountInput.value=this.value">
						<input type="number" name="amountInput" min="1" max="1000" value="1" oninput="this.form.amountRange.value=this.value" readonly id="cusrange-reader"/>
					</form>
				</div>
			</div>
			<div class="col-lg-1"></div>
			<div class="col-lg-7 wow_frnd_field">
				<div id="search-nearby-users">
					<h4><?php echo $wo['lang']['relationship']; ?></h4>
					<div class="nearby-users-gender-collapse nearby-users-relationship-collapse">
						<ul>
							<li class="active" data-relation-ship="5"><?php echo $wo['lang']['all'];?></li>
							<?php foreach ($wo['relationship'] as $relationship_ids => $relationship): ?>
								<li class="" data-relation-ship="<?php echo $relationship_ids; ?>"><?php echo $relationship;?></li>
							<?php endforeach; ?>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="page-margin">
		<div class="row cool-style-album-row wow_frnd_usr" id="nearby_users_list">
			<?php
				$nearby_users = Wo_GetNearbyUsers(array('country' => $wo['user']['country_id']));
				if (count($nearby_users) > 0) {
					foreach ($nearby_users as $wo['UsersList']) {
						echo Wo_LoadPage('friends_nearby/includes/user-list');
					}
				}
				else{
					echo '<div class="col-md-12"><div class="wow_content"><div class="empty_state"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.4993 9.00004H13.166M14.8327 10.6667L14.8327 7.33337" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
<path d="M1.5 14.9262C1.5 12.9153 2.91444 11.2024 4.8367 10.8855L5.00985 10.857C6.5491 10.6032 8.11757 10.6032 9.65682 10.857L9.82996 10.8855C11.7522 11.2024 13.1667 12.9153 13.1667 14.9262C13.1667 15.7954 12.4846 16.5 11.6432 16.5H3.02344C2.18207 16.5 1.5 15.7954 1.5 14.9262Z" class="icon_main" stroke-width="1.5"></path>
<path d="M10.7352 4.78125C10.7352 6.59343 9.21177 8.0625 7.33247 8.0625C5.45316 8.0625 3.92969 6.59343 3.92969 4.78125C3.92969 2.96907 5.45316 1.5 7.33247 1.5C9.21177 1.5 10.7352 2.96907 10.7352 4.78125Z" stroke="currentColor" stroke-width="1.5"></path>
</svg>' . $wo['lang']['no_users_found'] . '</div></div></div>';
				}
			?>
		</div>
		<div class="clear"></div>
	</div>
	<div class="posts_load">
		<?php if (count($nearby_users) >= 1): ?>
			<div class="load-more">
				<div class="btn btn-default text-center pointer" id="load_more_nearby_users" onclick="Wo_LoadMoreNearByUsers();"><?php echo $wo['lang']['load_more'] ?></div>
			</div>
		<?php endif ?>
	</div>
	<?php //echo Wo_LoadPage('footer/content'); ?>
</div>
<div class="modal fade" id="show_user_location_map" role="dialog">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-body">
         	<?php if ($wo['config']['google_map'] == 1) { ?>
            <iframe src="" frameborder="0" width="100%" style="height: calc(100vh - 300px);"></iframe>
            <?php } ?>
				<?php if ($wo['config']['yandex_map'] == 1) { ?>
					<div id="show_user_location__map" <?php echo($wo['config']['yandex_map'] == 1 ? 'style="width: 100%; height: 300px; padding: 0; margin: 0;"' : '') ?>></div>
				<?php } ?>
         </div>
         <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal" onclick="javascript:$('#show_user_location_map').modal('hide');">
         <?php echo $wo['lang']['close']; ?>
         </button>
         </div>
      </div>
   </div>
</div>
<script>
	jQuery(document).ready(function($) {
		/*Map*/
		var planes = [];
		var markersArray = [];
		<?php foreach ($nearby_users as $user) : ?>
		planes.push(['<?php echo $user['user_data']['name']?>',<?php echo $user['user_data']['lat']?>, <?php echo $user['user_data']['lng']?>]);
		<?php endforeach; ?>
		var map = L.map('map').setView([<?php echo $wo['user']['lat']?>, <?php echo $wo['user']['lng']?>], 7);

		L.tileLayer(
			'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				attribution: '',
				maxZoom: 18,
			}).addTo(map);

		for (var i = 0; i < planes.length; i++) {
			marker = new L.marker([planes[i][1],planes[i][2]])
			.bindPopup(planes[i][0])
			.addTo(map);
			markersArray.push(marker);
		};
	});

	function Wo_ShowUserLocationMap(user_geoData = false) {
		if (!user_geoData) {return false;}
		<?php if ($wo['config']['google_map'] == 1) { ?>
		var google_map_api = 'https://www.google.com/maps/embed/v1/place?key=<?php echo $wo['config']['google_map_api']; ?>&q=' + user_geoData;
		$("#show_user_location_map").modal().find('iframe').attr('src', google_map_api);
		<?php } ?>
		<?php if ($wo['config']['yandex_map'] == 1) { ?>
			$('#show_user_location__map').html('');
			$("#show_user_location_map").modal();
			let geo = user_geoData.split(",");
			var userMap = new ymaps.Map('show_user_location__map', {
		        center: [geo[0],geo[1]],
		        zoom: 9
		    });
		    userMap.geoObjects.add(new ymaps.Placemark([geo[0],geo[1]], {
	            balloonContent: ''
	        }));
	    <?php } ?>

	}
	function Wo_LoadNearByUsers(self = false){
		var relship  = $(".nearby-users-relationship-collapse").find('.active').attr('data-relation-ship');
		var status   = $(".nearby-users-status-collapse").find('.active').attr('data-nearby-user-status');
		var gender   = $(".nearby-users-gender-cont").find('.active').attr('data-gender');
		var name     = $("#nearby-username").val();
		var distance = $("#nearby-users-distance").val();
		if (!gender && !name && !distance && !relship && !status) { return false;}
		if (self) {
			Wo_progressIconLoader($(self));
		}
		else{
			Wo_StartBar();
		}
		
		$.ajax({
			url: Wo_Ajax_Requests_File(),
			type: 'GET',
			dataType: 'json',
			data: {
				f:'nearby_users',
				s:'load',
				gender:gender,
				name:name,
				distance:distance,
				status:status,
				relship:relship
			},
		})
		.done(function(data) {

	        if (data['status'] == 200){
	        	$("#nearby_users_list").html(data.html);
	        	$("[data-toggle]").tooltip();
	        	$("#load_more_nearby_users").html('<i class="fa fa-arrow-down progress-icon" data-icon="arrow-down"></i> <?php echo $wo['lang']['load_more']; ?>');
	        } 

	        else{
	        	scrollToTop();
	        	$("#nearby_users_list").html('<h5 class="search-filter-center-text"> <?php echo $wo['lang']['no_users_found']; ?></h5>');
	        } 
	        if (self) {
				Wo_progressIconLoader($(self));
			}
			else{
				Wo_FinishBar();
			}
		})
		.fail(function() {
			console.log("error");
		})
		
		
		
	}
	function Wo_LoadMoreNearByUsers(){
		var relship  = $(".nearby-users-relationship-collapse").find('.active').attr('data-relation-ship');
		var status   = $(".nearby-users-status-collapse").find('.active').attr('data-nearby-user-status');
		var after_id = ($(".nearby_user_wrapper_prnt").length > 0) ? $(".nearby_user_wrapper_prnt").last().attr('id') : 0;
		var gender   = $(".nearby-users-gender-cont").find('.active').attr('data-gender');
		var name     = $("#nearby-username").val();
		var distance = $("#nearby-users-distance").val();
		if (!after_id && !gender && !name && !distance && !status && !relship) { return false;}
		Wo_progressIconLoader($('#load_more_nearby_users'));
		$.ajax({
			url: Wo_Ajax_Requests_File(),
			type: 'GET',
			dataType: 'json',
			data: {
				f:'nearby_users',
				s:'load',
				offset:after_id,
				gender:gender,
				name:name,
				distance:distance,
				relship:relship,
				status:status

			},
		})
		.done(function(data) {

	        if (data['status'] == 200){
	        	$("#nearby_users_list").append(data.html);
	        	$("[data-toggle]").tooltip();
	        	$("#load_more_nearby_users").html('<?php echo $wo['lang']['load_more']; ?>');
	        } 

	        else{
	        	$("#load_more_nearby_users").html('<?php echo $wo['lang']['no_result']; ?>');
	        } 
		})
		.fail(function() {
			console.log("error");
		})
		
	}

	jQuery(document).ready(function($) {
		$("[data-gender]").click(function(event) {
			$(".nearby-users-gender-cont").find('.active').removeClass('active');
			$(this).addClass('active');
			Wo_LoadNearByUsers();
		});
		$("[data-relation-ship]").click(function(event) {
			$(".nearby-users-relationship-collapse").find('.active').removeClass('active');
			$(this).addClass('active');
			Wo_LoadNearByUsers();
			
		});
		$("[data-nearby-user-status]").click(function(event) {
			$(".nearby-users-status-collapse").find('.active').removeClass('active');
			$(this).addClass('active');
			Wo_LoadNearByUsers();
		});
	});
</script>