@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>
			
			{{ $categoryGroup->title }}
			 

		  </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">{{ $categoryGroup->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="{{ ($categoryGroupChilds->count()  == 0) ?  'padding-top: 18px;' : ''}}">
							
		  
			<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> 
					  @if(count($categoryGroupChilds) != 0)
						@foreach($categoryGroupChilds as $category_item)
						  <li class="cat-item">
							<a href="/categorygroups/{{ $category_item->id }}/{{ $category_item->link }}">
							  <span class="no-child"></span>{{ $category_item->title }}
							</a>
						  </li> 
						@endforeach
					  @else 
						@foreach($currentCategories as $category_item)
						<li class="cat-item">
						  <a href="/category/{{ $category_item->Category->id }}/{{ $category_item->Category->link }}">
							<span class="no-child"></span>{{ $category_item->Category->title }}
						  </a>
						</li> 
					  @endforeach
					@endif
					
				  </ul>
				</li>
			  </ul>
			</div>
			
			
			<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>
@stop

@section('pre_scripts')  
<script type="text/javascript">
  var is_category = false;
  var is_categories = true;
  @if(count($product) != 0)
	var data_html_li =  '<a href="{{ $product->url($product->currentPage())  }}" >{{ $product->currentPage() }}</a>';
  @else
  var data_html_li =  '';
  @endif
  @php
  $firstId = true;
  @endphp

	var category_ids  = '@foreach($subGroupsIds as $subGroupsIds_item){{ ($firstId) ? '' : ',' }}{{ $subGroupsIds_item }}@php $firstId = false; @endphp@endforeach';
 
</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