@extends('layouts.default-new')

@section('title', 'دنت آنلاین - پربازدیدترین‌ها' )
@section('bodyclass', 'left-sidebar single single-post  pace-done')

@section('meta') 
	<link rel="stylesheet" type="text/css" href="/css/category.css" />
@endsection

@section('content')

<div id="content" class="site-content">
	<div class="col-full">
		<div class="row">
				<nav class="woocommerce-breadcrumb">
					<a href="/">خانه</a>
					<span class="delimiter">
							<i class="fa fa-angle-left"></i>
					</span>
					{{ $pageTitle }}
						

				</nav>
				<!-- .woocommerce-breadcrumb -->
				<div id="primary" class="content-area">
						<main id="main" class="site-main">

			
						<div class="shop-control-bar">
							<div class="handheld-sidebar-toggle">
									<button type="button" class="btn sidebar-toggler">
											<i class="fa fa-sliders"></i>
											<span>Filters</span>
									</button>
							</div>
							<!-- .handheld-sidebar-toggle -->
							<h1 class="woocommerce-products-header__title page-title">{{ $pageTitle }}</h1>
							<ul role="tablist" class="shop-view-switcher  category-view-switcher nav nav-tabs">
									<li class="nav-item">
											<a href="#grid" data-type="grid" title="Grid View" data-toggle="tab" class="nav-link active">
													<i class="tm tm-grid-small"></i>
											</a>
									</li>
									<li class="nav-item">
											<a href="#grid-extended" data-type="grid-extended" title="Grid Extended View" data-toggle="tab" class="nav-link ">
													<i class="tm tm-grid"></i>
											</a>
									</li>
									<li class="nav-item">
											<a href="#list-view-large" data-type="list-view-large" title="List View Large" data-toggle="tab" class="nav-link ">
													<i class="tm tm-listing-large"></i>
											</a>
									</li>
									<li class="nav-item">
											<a href="#list-view" data-type="list-view" title="List View" data-toggle="tab" class="nav-link ">
													<i class="tm tm-listing"></i>
											</a>
									</li>
									<li class="nav-item">
											<a href="#list-view-small" data-type="list-view-small" title="List View Small" data-toggle="tab" class="nav-link ">
													<i class="tm tm-listing-small"></i>
											</a>
									</li>
							</ul>
							<!-- .shop-view-switcher -->
							<div class="form-techmarket-wc-ppp">
									<select class="techmarket-wc-wppp-select c-select" name="ppp" id="ppp">
											<option value="20">نمایش ۲۰</option>
											<option value="40">نمایش ۴۰</option>
											<option value="-1">نمایش همه</option>
									</select>
									<input type="hidden" value="5" name="shop_columns">
									<input type="hidden" value="15" name="shop_per_page">
									<input type="hidden" value="right-sidebar" name="shop_layout">
							</div>
							<!-- .form-techmarket-wc-ppp -->
							<div class="woocommerce-ordering">
									<select class="orderby" id="orderby" name="orderby">
											<option selected="selected" value="mostvisited">پربازدیدترین</option>
											<option value="popularity">محبوب‌ترین</option>
											<option value="rating">بیشترین امتیاز</option>
											<option  value="date">جدیدترین</option>
											<option value="price">قیمت - کمترین به بیشترین</option>
											<option value="price-desc">قیمت - بیشترین به کمترین</option>
									</select>
									<input type="hidden" value="5" name="shop_columns">
									<input type="hidden" value="15" name="shop_per_page">
									<input type="hidden" value="right-sidebar" name="shop_layout">
							</div>
							<!-- .woocommerce-ordering -->
							<nav class="techmarket-advanced-pagination">
									<form class="form-adv-pagination" method="post">
											<input type="number" value="1" class="form-control" step="1" max="5" min="1" size="2" id="goto-page">
									</form> of 5<a href="#" class="next page-numbers">→</a>
							</nav>
							<!-- .techmarket-advanced-pagination -->
					</div>
						
					<input type="hidden" id="maxAmountFilter" value="{{ $max_price }}">
					<div class="woocommerce columns-1">
						
								<div class="dvProductBox dvCategoryProducts" >  
										@if(count($product)==0)
											<div class="row">
												<div class="alert alert-info" role="alert">
													اطلاعاتی برای نمایش دادن وجود ندارد.
												</div>
											</div> 
										@endif 
										
										@can('admin-product-quickedit') 
											@if( $page_type == 5)
												<group-shopping-products :init_canqedit='1' :init_category_data='{!! json_encode(null) !!}'></group-shopping-products> 
											@else
												<category-products :init_canqedit='1' :init_category_data='{!! json_encode(null) !!}'></category-products> 
											@endif
										@else
											@if( $page_type == 5)
												<group-shopping-products :init_canqedit='0' :init_category_data='{!! json_encode(null) !!}'></group-shopping-products> 
											@else
												<category-products :init_canqedit='0' :init_category_data='{!! json_encode(null) !!}'></category-products> 
											@endif
										@endcan
								</div>

								<div>
									<category-pagination :init_category_pagination_data='{!! json_encode(null) !!}'></category-pagination>
								</div>
				
							</div>
									
									
						</main>
						<!-- #main -->
				</div>
				<!-- #primary --> 
				<div id="secondary" class="sidebar-blog widget-area mostvisited-widget-area" role="complementary">
											
					<div id="techmarket_products_filter-3" class="widget widget_products_filter">
							<span class="gamma widget-title" style="margin-bottom: 1em;">فیلتر‌ها</span>

							<div style="margin-bottom: 2em;">
									<div  class="widget woocommerce widget_layered_nav  widget_filters_check maxlist-more"> 
											<ul> 
												<li>
													<label class="container" >
													فقط محصولات موجود
															<input type="checkbox" name="availability" id="availability"  value="true">                              
															<span class="checkmark"></span>
													</label>
												</li>
												<li>
													<label class="container" >
														فقط محصولات دارای قیمت
														<input type="checkbox" name="withprice" id="withprice"  value="true">                              
													<span class="checkmark"></span>
													</label>
												</li>
											</ul>
									</div>
							</div>

							<div class="widget woocommerce widget_price_filter" id="woocommerce_price_filter-2">
									<p>
											<span class="gamma widget-title amount-filter-title">قیمت (تومان)</span>
										</p>
										
										<div id="slider-range" class="price_slider"></div>
										<div class="price_slider_amount">
												<button class="button" id="btnFilterPriceApplay">اعمال فیلتر</button>
												<input id="range_amount" type="text" placeholder="حداقل قیمت" data-min="0" value="0" name="range_amount" style="display: none;">
										
										</div>
										
							</div>

								@foreach($filter as $filter_item) 
									<div id="group-filters-{{ $filter_item->id }}" data-main="{{ $filter_item->is_main ? 'true' : 'false' }}" class="widget woocommerce widget_layered_nav  widget_filters_check maxlist-more">
										<span class="gamma widget-title selFilter{{ $filter_item->id }}_msTitle">{{ $filter_item->title }}</span>
											<ul> 
												
											</ul>
									</div>
									<!-- .woocommerce widget_layered_nav -->
								@endforeach  
					</div>
						
				</div>
				<!-- .sidebar-blog -->
		</div>
		<!-- .row -->
	</div>
	<!-- .col-full -->
</div>
 
<!-- Modal -->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">پیام سیستم</h4>
			</div>
			<div class="modal-body">
				<div id="modalAlertMessage"></div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">بستن</button>
			</div>
		</div>
	</div>
</div>

@include('particles.product_quickedit') 
@stop


@section('pre_scripts') 

<script type="text/javascript">
	var is_category = true;
	var data_html_li = '<a href="{{ $product->url($product->currentPage())  }}" >{{ $product->currentPage() }}</a>';
	var category_id  = null;
	var page_type = {{ $page_type }};
	var search_q = '{{  isset($search_q) ? $search_q : '' }}';

</script> 
@stop

@section('scripts') 
<script type="text/javascript">
 
	$( function() {
		function formatNumber(num) {
				return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
		}
 
		var stfilter_min = 0;
		var stfilter_max = {{ $max_price + 10000 }};  
 
		/*
		if( history.state!=null)
		{
			var params = history.state.split('&');
			for(var i = 0 ; i < params.length; i++)
			{
					var tempArr = params[i].split('=');
					if(tempArr.length == 2)
					{
							if(tempArr[0] == "min")
									stfilter_min = tempArr[1].replace(new RegExp(",", 'g'), "");
							else if(tempArr[0] == "max")
									stfilter_max = tempArr[1].replace(new RegExp(",", 'g'), "");
					}
				}
		}
		*/
	 
	$( "#slider-range" ).slider({
			range: true,
			min: 0,
			step: 10000,
			max: {{ $max_price + 10000 }},
			values: [ stfilter_min, stfilter_max ],
			slide: function( event, ui ) {
				$( "#range_amount" ).val( formatNumber(ui.values[ 1 ]) + " - " + formatNumber(ui.values[ 0 ]) );
			}
		});
		$( "#range_amount" ).val(  formatNumber($( "#slider-range" ).slider( "values", 1 )) +
			" - " + formatNumber($( "#slider-range" ).slider( "values", 0 )) );
	} ); 
	
</script> 
@stop