<div class="page-margin products wo_market">
	<div class="row">
		<div class="col-md-3">
			<?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="22" height="22" 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>
			</div>
			<div class="market_widget">
				<div class="m_widget_head"><?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?>" data_prodect_cat_id="<?php echo($key) ?>"><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"><?php echo $wo['lang']['location_dist'];?> (km)</div>
				<div class="select-nearby-users-distance">
					<form>
						<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="300" value="0" oninput="this.form.amountRange.value=this.value" readonly id="cusrange-reader"/>
					</form>
				</div>
			</div>
			<?php if ($wo['loggedin'] == true) { ?>
			<a href="#" class="btn btn-main btn-block side_mkt_btn" data-toggle="modal" data-target="#create-product-modal" data-backdrop="static" data-keyboard="false"><?php echo $wo['lang']['new_product'] ?></a>
			<?php } ?>
		</div>
		
		<div class="col-md-9">
			<div class="latest-products">
				<div class="market_bottom">
					<div class="market_bottom_header">
						<h3><?php echo $wo['lang']['all'] ?></h3>
						<div class="dropdown">
							<div class="dropdown-toggle" type="button" data-toggle="dropdown"><span class="order-text" id="PriceSortValue" data_PriceSortType="latest"><?php echo $wo['lang']['latest'] ?></span> <span class="caret"></span></div>
							<ul class="dropdown-menu dropdown-menu-right" role="menu">
								<li><a href="javascript:void(0)" onclick="changePriceSortValue('latest')"><?php echo $wo['lang']['latest'] ?></a></li>
								<li><a href="javascript:void(0)" onclick="changePriceSortValue('price_low')"><?php echo $wo['lang']['price_low'] ?></a></li>
								<li><a href="javascript:void(0)" onclick="changePriceSortValue('price_high')"><?php echo $wo['lang']['price_high'] ?></a></li>
							</ul>
						</div>
					</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 wo_load_more" onclick="Wo_LoadProducts();">
						<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg></span> <?php echo $wo['lang']['load_more_products'] ?>
					</button>
                </div>
                <?php endif ?>
			</div>
		<div class="clear"></div>
	</div>
</div>
<?php echo Wo_LoadPage('products/create'); ?>
<script>

function changePriceSortValue(price_sort) {
	array = [];
	array['latest'] = "<?php echo $wo['lang']['latest'] ?>";
	array['price_low'] = "<?php echo $wo['lang']['price_low'] ?>";
	array['price_high'] = "<?php echo $wo['lang']['price_high'] ?>";
	cat_id = $('.product-category-slider').find('.active').attr('data_prodect_cat_id');
	distance = $('#distance_val').text();
	$('#PriceSortValue').html(array[price_sort]);
	$('#PriceSortValue').attr('data_PriceSortType',price_sort);
	
	$.post(Wo_Ajax_Requests_File() + '?f=get_prodects_by_filter', {price_sort: price_sort, cat_id:cat_id, distance: distance}, 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_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 text = $('#product-text').val();
	var $last_id = $('.product:last').attr('data-id');
	var price = $('.product:last').attr('data_price');
	var length = $('#distance_val').text();
	var price_sort = $('#PriceSortValue').attr('data_PriceSortType');
	$.post(Wo_Ajax_Requests_File() + '?f=load_more_products', {last_id: $last_id, c_id:$c_id, length: length,price_sort:price_sort,price:price,text:text}, 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 = $('#distance_val').text();
	var price_sort = $('#PriceSortValue').attr('data_PriceSortType');
	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,price_sort:price_sort}, 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>