@extends('layouts.default1400-page', ['title' => 'دسته‌بندی', 'subtitle' => $paths])

@section('content')

<div class="lg:flex">
	<!--advanced option -->

	<div class="lg:w-1/4">

		<div x-data="{ open: true }">
			<div class="flex mt-1 lg:hidden w-full justify-end">

				<button type="button" class="rounded-lg focus:outline-none focus:shadow-outline"
					x-on:click="open = !open">
					<span x-bind:class="{'hidden': open}">
						<div class="flex bg-gray-200 m-2 px-2 py-1 rounded-md text-sm">فیلتر‌
							<img class="h-4 w-12 items-center" src="/svgs-new1400/sliders.svg">
						</div>
					</span>

					<span x-bind:class="{'hidden': !open}">
						<div class="flex bg-gray-200 m-2  py-1 rounded-md">
							<img x-show="open" class="h-6 w-12 px-1" src="/svgs-new1400/xmark.svg">
						</div>
					</span>



				</button>

			</div>



			<nav x-bind:class="{'flex': open, 'hidden': !open}" class="hidden lg:flex mt-4 font-medium">
				<div class="items-center w-full">


					<div class="grid m-2 rounded-lg border bg-gray-50">
						<div class="w-full text-sm">
							<div
								class="bg-white rounded-t-lg border-gray-100 border-b-2 text-sm items-center px-4 py-2 mb-4">
								فیلتر‌ها
							</div>

							<div class="p-4">

								<div class="flex">
									<input type="checkbox" name="availability" id="availability" value="true"
										class="checkbox checkbox-primary mx-3">
									<label for="availability">فقط محصولات موجود</label>
								</div>

								<div class="flex">
									<input type="checkbox" name="withprice" id="withprice" value="true"
										class="checkbox checkbox-primary mx-3">
									<label for="withprice">فقط محصولات دارای قیمت</label>
								</div>

							</div>

						</div>
					</div>



					<div class="price-filter grid m-2 rounded-lg border bg-gray-50">
						<div class="w-full text-sm">
							<div
								class="bg-white rounded-t-lg border-gray-100 border-b-2 text-sm items-center px-4 py-2 mb-4">
								محدوده قیمت
							</div>

							<div class="p-2">


								<div class="flex flex-col items-center mx-2 widget_price_filter">

									<span class="flex items-center"> قیمت (تومان)


										<input id="range_amount" type="text" data-min="0" value="0" name="range_amount"
											class="input input-bordered bg-gray-50 text-center m-2">
									</span>

									<div id="slider-range" class="price_slider"></div>

									<div class="w-full border-blue-100 border-b-2 border-dotted"></div>

									<button type="button" id="btnFilterPriceApplay"
										class="btn btn-primary mr-2 mt-2 w-48"> اعمال فیلتر</button>

									<input type="hidden" id="maxAmountFilter" value="{{ $max_price }}">
								</div>

							</div>

						</div>
					</div>


					@foreach($filter as $filter_item)


					<div class="grid m-2 rounded-lg border bg-gray-50">
						<div class="w-full text-sm widget_filters_check maxlist-more"
							id="group-filters-{{ $filter_item->id }}"
							data-main="{{ $filter_item->is_main ? 'true' : 'false' }}">
							<div
								class="bg-white rounded-t-lg border-gray-100 border-b-2 text-sm items-center px-4 py-2 mb-4">

								<span class="gamma widget-title selFilter{{ $filter_item->id }}_msTitle">
									{{ $filter_item->title }}</span>

							</div>

							<ul class="p-4">

							</ul>

						</div>
					</div>

					@endforeach



				</div>
			</nav>
		</div>




	</div>

	<!-- search result Content Section-->
	<section class="w-full lg:w-3/4">

		<div class="md:flex items-center m-4 ">



			<div class="flex items-center w-full justify-between">
				<span> {{ $pageTitle }}
				</span>

				<div class="flex w-40">
					{{-- <a href=""><img src="/svgs-new1400/list.svg" class="w-4 mx-1"></a>
					<a href=""><img src="/svgs-new1400/bars.svg" class="w-4 mx-1"></a>
					<a href=""><img src="/svgs-new1400/grid.svg" class="w-4 mx-1"></a> --}}
				</div>
			</div>

			<div class="flex justify-between mr-4">
				<select class="select select-bordered select-primary" name="ppp" id="ppp">
					<option value="20">نمایش ۲۰</option>
					<option value="40">نمایش ۴۰</option>
					<option value="-1">نمایش همه</option>
				</select>

				<span class="w-4"></span>
				<select class="select select-bordered select-primary" 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>

			</div>

		</div>



		<div class="flex mx-4 mt-2 font-medium text-sm items-center">
			<div class="ml-4 text-gray-400">

			</div>
			<div class="flex-grow bg-gray-300 h-1"></div>
		</div>

		<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>



	</section>

</div>


@include('components.newlayout.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" src="/js/newstyle/jquery-ui.min.js"></script>
<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