<div class="page-margin products wo_market">
	<div class="market_header"></div>
	<div class="row">
		<div class="col-md-3">
			<div class="market_widget">
				<div class="m_widget_head">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#4caf50" d="M17.63,5.84C17.27,5.33 16.67,5 16,5H5A2,2 0 0,0 3,7V17A2,2 0 0,0 5,19H16C16.67,19 17.27,18.66 17.63,18.15L22,12L17.63,5.84Z" /></svg> <?php echo $wo['lang']['categories'];?>
				</div>
				<div class="market_categories">
					<ul class="product-category-slider">
						<?php 
							$category_id = (!empty($_GET['c_id'])) ? (int) $_GET['c_id'] : 0;
							foreach ($wo['products_categories'] as $key => $category) {
								$active = ($category_id == $key) ? 'active' : '';
						?>
							<li class="<?php echo $active?>"><a href="<?php echo Wo_SeoLink('index.php?link1=products&c_id=' . $key);?>"><?php echo $category;?></a></li>
						<?php } ?>
					</ul>
				</div>
			</div>
			<div class="market_widget">
				<div class="m_widget_head">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fe7e97" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" /></svg> <?php echo $wo['lang']['location_dist'];?>
				</div>
				<div class="select-nearby-users-distance">
					<form style="display: table;width:100%">
						<input type="range" class="cusrange" id="nearby-users-distance" name="amountRange" onchange="Wo_SearchProductsNearBy();" value="0" min="0" max="300" oninput="this.form.amountInput.value=this.value">
						<input type="number" name="amountInput" min="0" max="4000" value="0" oninput="this.form.amountRange.value=this.value" readonly id="cusrange-reader"/> km
					</form>
				</div>
			</div>
		</div>
		
		<div class="col-md-9">
			<div class="latest-products">
				<?php
					$category_name = '';
					$data = array();
					if (!empty($_GET['c_id'])) {
						if (is_numeric($_GET['c_id'])) {
							if (array_key_exists($_GET['c_id'], $wo['products_categories'])) {
								?>
								<input type="hidden" value="<?php echo Wo_Secure($_GET['c_id']); ?>" id="c_id" />
								<?php
								$category_name = $wo['products_categories'][$_GET['c_id']];
								$data['c_id'] = Wo_Secure($_GET['c_id']);
							}
						}
					} else {
						echo '<input type="hidden" value="0" id="c_id" />';
					}
				?>
				<div class="market_search_header">
					<form action="">
						<div class="form-group">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5" /></svg>
							<?php
				    	         $placeholder = $wo['lang']['search_for_products_main'];
				    	         if (!empty($category_name)) {
				    	         	$placeholder = str_replace('{category_name}', $category_name, $wo['lang']['search_for_products']);
				    	         }
							?>
							<input type="text" class="form-control" onkeyup="Wo_SearchProducts(this.value)" placeholder="<?php echo $placeholder; ?>" id="product-text">
						</div>
					</form>
					<?php if ($wo['loggedin'] == true) { ?>
					<span>
						<a href="#" class="btn" data-toggle="modal" data-target="#create-product-modal" data-backdrop="static" data-keyboard="false">
							<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg> <?php echo $wo['lang']['new'] ?>
						</a>
					</span>
					<?php } ?>
				</div> 
					
					<div class="market_bottom">
						<div class="market_bottom_header">
							<h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#3F51B5" d="M12,13A5,5 0 0,1 7,8H9A3,3 0 0,0 12,11A3,3 0 0,0 15,8H17A5,5 0 0,1 12,13M12,3A3,3 0 0,1 15,6H9A3,3 0 0,1 12,3M19,6H17A5,5 0 0,0 12,1A5,5 0 0,0 7,6H5C3.89,6 3,6.89 3,8V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V8C21,6.89 20.1,6 19,6ZZ" /></svg> <?php echo $wo['lang']['latest_products'] ?></h3>
						</div>
						<?php
							$data['limit'] = 10;
							$products = Wo_GetProducts($data);
							if (count($products) > 0) {
						?>
						<div id="products" class="row">
						<?php
						foreach ($products as $key => $wo['product']) {
							echo Wo_LoadPage('products/products-list'); 
						}
						} else {
							echo '<h5 class="search-filter-center-text empty_state"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg> ' . $wo['lang']['no_available_products'] . '</h5>';
						}
						?>
						</div>
					</div>
				</div> 	
			<div class="posts_load load-produts">
			    <?php if (count($products) > 0): ?>
				<div class="load-more">
                    <button class="btn btn-default text-center pointer" onclick="Wo_LoadProducts();">
                    <i class="fa fa-arrow-down progress-icon" data-icon="arrow-down"></i> <?php echo $wo['lang']['load_more_products'] ?></button>
                </div>
                <?php endif ?>
			</div>
		<div class="clear"></div>
	</div>
</div>
<script>
function Wo_SearchProductsNearBy() {
	length = $('#cusrange-reader').val();
	text_value = $('#product-text').val();
	var c_id = 0;
	if ($('#c_id').length > 0) {
		c_id = $('#c_id').val();
	}
	$.post(Wo_Ajax_Requests_File() + '?f=search_products', {value: text_value, c_id:c_id, length: length}, function (data) {
		if (data.status == 200) {
			if (data.html.length > 0) {
				$('#products').html(data.html);
			} else {
				$('#products').html('<?php echo $wo['lang']['no_available_products'] ?>');
			}
		}
	});
}
function Wo_LoadProducts() {
	$('.load-produts').html('<div class="white-loading list-group"><div class="cs-loader"><div class="cs-loader-inner"><label> ●</label><label> ●</label><label> ●</label><label> ●</label><label> ●</label><label> ●</label></div></div></div>');
	var $c_id = $('#c_id').val();
	var $last_id = $('.product:last').attr('data-id');
	var length = $('#cusrange-reader').val();
	$.post(Wo_Ajax_Requests_File() + '?f=load_more_products', {last_id: $last_id, c_id:$c_id, length: length}, function (data) {
		if (data.status == 200) {
			if (data.html.length > 0) {
				$('.load-produts').html('<div class="load-more"><button class="btn btn-default text-center pointer" onclick="Wo_LoadProducts();"><i class="fa fa-arrow-down progress-icon" data-icon="arrow-down"></i> <?php echo $wo['lang']['load_more_products'] ?></button></div>');
				$('#products').append(data.html);
			} else {
				$('.load-produts').html('<div class="load-more"><button class="btn btn-default text-center pointer" onclick="Wo_LoadProducts();"><?php echo $wo['lang']['no_available_products'] ?></button></div>');
			}
		}
	});
}
function Wo_SearchProducts(value) {
	length = $('#cusrange-reader').val();
	var c_id = 0;
	if ($('#c_id').length > 0) {
		c_id = $('#c_id').val();
	}
	$.post(Wo_Ajax_Requests_File() + '?f=search_products', {value: value, c_id:c_id, length: length}, function (data) {
		if (data.status == 200) {
			if (data.html.length > 0) {
				$('#products').html(data.html);
			} else {
				$('#products').html('<?php echo $wo['lang']['no_available_products'] ?>');
			}
		}
	});
}
</script>