@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>
				@foreach($paths as $item_cat)
				<a href="/category/{{  $item_cat[" id"] }}/{{ $item_cat["link"] }}">{{ $item_cat["title"] }}</a>
				<span class="delimiter"><i class="fa fa-angle-left"></i></span>
				@endforeach
				{{ $category->title }}


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


					@if($category->description!="")

					<div class="shop-archive-header">
						<div class="jumbotron">
							@if($category->description_image !="")
							<div class="jumbotron-img">
								<img width="416" height="283" alt=""
									src="/img/category/{{ $category->description_image }}"
									class="jumbo-image alignright">
							</div>
							@endif
							<div class="jumbotron-caption">
								{!! $category->description !!}
							</div>
							<!-- .jumbotron-caption -->
						</div>
						<!-- .jumbotron -->
					</div>
					<!-- .shop-archive-header -->

					@endif

					<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">{{ $category->title }}</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')
							<category-products :init_canqedit='1' :init_category_data='{!! json_encode(null) !!}'>
							</category-products>
							@else
							<category-products :init_canqedit='0' :init_category_data='{!! json_encode(null) !!}'>
							</category-products>
							@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" role="complementary"
				style="{{ ($category::where('parent',$category->id)->count()  == 0) ?  'padding-top: 18px;' : ''}}">

				@if($category::where('parent',$category->id)->count() != 0)
				<div class="widget woocommerce widget_product_categories techmarket_widget_product_categories"
					id="techmarket_product_categories_widget-2">
					<ul class="product-categories ">
						<li class="product_cat">
							<span>دسته بندی ها</span>
							<ul>

								@foreach($category::where('parent',$category->id)->orderBy('sort','asc')->get() as
								$category_item)
								<li class="cat-item">
									<a href="/category/{{ $category_item->id }}/{{ $category_item->link }}">
										<span class="no-child"></span>{{ $category_item->title }}
									</a>
								</li>
								@endforeach

							</ul>
						</li>
					</ul>
				</div>
				@endif

				<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  = {{ $category_id }};
</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 }}; 
 
		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