@extends('front')
@section('content')
<!-- Breadcrumb -->
<div class="breadcrumb-bar text-center">
	<div class="container">
		<div class="row">
			<div class="col-md-12 col-12">
				<h2 class="breadcrumb-title mb-2">{{ __('Services') }}</h2>
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb justify-content-center mb-0">
						<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="ti ti-home-2"></i></a></li>
						<li class="breadcrumb-item active" aria-current="page">{{ __('Services') }}</li>
					</ol>
				</nav>
			</div>
		</div>
		<div class="breadcrumb-bg">
			<img src="{{ asset('front/img/bg/breadcrumb-bg-01.png') }}" class="breadcrumb-bg-1" alt="Img">
			<img src="{{ asset('front/img/bg/breadcrumb-bg-02.png') }}" class="breadcrumb-bg-2" alt="Img">
		</div>
	</div>
</div>
<!-- /Breadcrumb -->

<!-- Page Wrapper -->
<div class="page-wrapper">
	<div class="content">
		<div class="container">
			<div class="row">
				<div class="col-xl-3 col-lg-4 theiaStickySidebar">
					<div class="card mb-4 mb-lg-0">
						<div class="card-body">
							<form action="{{ route('productlists') }}" method="GET" id="filterForm">
								<div class="d-flex align-items-center justify-content-between mb-3 pb-3 border-bottom">
									<h5><i class="ti ti-filter-check me-2"></i>{{ __('Filters') }}</h5>
									<a href="{{ route('productlists') }}">{{ __('Reset Filter') }}</a>
								</div>
								<div class="mb-3 pb-3 border-bottom">
									<label class="form-label">{{ __('Search By Keyword') }}</label>
									<input type="text" name="keywords" id="keywords" class="form-control" maxlength="50" placeholder="{{ __('what are you looking for') }}">
								</div>
								<div class="accordion border-bottom mb-3">
									<div class="accordion-item mb-3">
										<div class="accordion-header" id="accordion-headingThree">
											<div class="accordion-button p-0 mb-3" data-bs-toggle="collapse" data-bs-target="#accordion-collapseThree" aria-expanded="true" aria-controls="accordion-collapseThree" role="button">
												{{ __('Categories') }}
											</div>
										</div>
										<div id="accordion-collapseThree" class="accordion-collapse collapse show" aria-labelledby="accordion-headingThree">
											<div class="content-list mb-3" id="fill-more">
												<div class="form-check mb-2">
													<label class="form-check-label">
														<input class="form-check-input" id="all_categories" type="checkbox">
														{{ __('All Category') }}
													</label>
												</div>
												
											</div>
											@if (count($productscategory) > 4)
											<a href="javascript:void(0);" id="more" class="more-view text-primary fs-14">{{ __('View more') }} <i class="ti ti-chevron-down ms-1"></i></a>
											@endif
										</div>
									</div>
								</div>
								<div class="accordion border-bottom mb-3">
									<div class="accordion-header" id="accordion-headingFour">
										<div class="accordion-button p-0 mb-3" data-bs-toggle="collapse" data-bs-target="#accordion-collapseFour" aria-expanded="true" aria-controls="accordion-collapseFour" role="button">
											{{ __('Sub Category') }}
										</div>
									</div>
									<div id="accordion-collapseFour" class="accordion-collapse collapse show" aria-labelledby="accordion-headingFour">
										<div class="mb-3">
											<select class="select" name="subcategory" id="subcategory">
												<option selected disabled> {{ __('select_sub_category') }}</option>
											</select>
										</div>
									</div>
								</div>
								<div class="accordion border-bottom mb-3">
									<div class="accordion-header" id="accordion-headingFive">
										<div class="accordion-button p-0 mb-3" data-bs-toggle="collapse" data-bs-target="#accordion-collapseFive" aria-expanded="true" aria-controls="accordion-collapseFive" role="button">
											{{ __('Location') }}
										</div>
									</div>
									<div id="accordion-collapseFive" class="accordion-collapse collapse show" aria-labelledby="accordion-headingFive">
										<div class="mb-3">
											<div class="position-relative">
												<select class="select" name="location" id="location">
													<option value="" selected>{{ __('Select') }} {{ __('Location') }}</option>
													@if ($cities)
													@foreach ($cities as $city)
													<option value="{{ $city->city }}">{{ $city->showcities() }}</option>
													@endforeach
													@endif
												</select>
											</div>
										</div>
									</div>
								</div>
								<div class="accordion border-bottom mb-3">
									<div class="accordion-header" id="accordion-headingSix">
										<div class="accordion-button p-0 mb-3" data-bs-toggle="collapse" data-bs-target="#accordion-collapseSix" aria-expanded="true" aria-controls="accordion-collapseSix" role="button">
											{{ __('Price Range') }}
										</div>
									</div>
									<div id="accordion-collapseSix" class="accordion-collapse collapse show" aria-labelledby="accordion-headingSix">
										<div class="filter-range">
											<input type="text" id="range" class="range" name="range_price">
										</div>
										<div class="filter-range-amount mb-3">
											<p class="fs-14" id="price_display">{{ __('Price') }} <span></span></p>
										</div>
									</div>
								</div>
								<div class="accordion">
									<div class="accordion-item mb-3">
										<div class="accordion-header" id="accordion-headingTwo">
											<div class="accordion-button fs-18 p-0 mb-3" data-bs-toggle="collapse" data-bs-target="#accordion-collapseTwo" aria-expanded="true" aria-controls="accordion-collapseTwo" role="button">
												{{ __('Ratings') }}
											</div>
										</div>
										<div id="accordion-collapseTwo" class="accordion-collapse collapse show" aria-labelledby="accordion-headingTwo">
											<div class="mb-3">
												<div class="form-check mb-2">
													<label class="form-check-label d-block">
														<input class="form-check-input rating_filter" name="rating[]" value="5" type="checkbox">
														<span class="rating">
															<i class="fas fa-star filled"></i>
															<i class="fas fa-star filled"></i>
															<i class="fas fa-star filled"></i>
															<i class="fas fa-star filled"></i>
															<i class="fas fa-star filled"></i><span class="float-end"></span>
														</span>
													</label>
												</div>
												<div class="form-check mb-2">
													<label class="form-check-label d-block">
														<input class="form-check-input rating_filter" name="rating[]" value="4" type="checkbox">
														<span class="rating">
															<i class="fas fa-star filled"></i>
															<i class="fas fa-star filled"></i>
															<i class="fas fa-star filled"></i>
															<i class="fas fa-star filled"></i>
															<i class="fa-regular fa-star filled"></i><span class="float-end"></span>
														</span>
													</label>
												</div>
												<div class="form-check mb-2">
													<label class="form-check-label d-block">
														<input class="form-check-input rating_filter" name="rating[]" value="3" type="checkbox">
														<span class="rating">
															<i class="fas fa-star filled"></i>
															<i class="fas fa-star filled"></i>
															<i class="fas fa-star filled"></i>
															<i class="fa-regular fa-star filled"></i>
															<i class="fa-regular fa-star filled"></i><span class="float-end"></span>
														</span>
													</label>
												</div>
												<div class="form-check mb-2">
													<label class="form-check-label d-block">
														<input class="form-check-input rating_filter" name="rating[]" value="2" type="checkbox">
														<span class="rating">
															<i class="fas fa-star filled"></i>
															<i class="fas fa-star filled"></i>
															<i class="fa-regular fa-star filled"></i>
															<i class="fa-regular fa-star filled"></i>
															<i class="fa-regular fa-star filled"></i><span class="float-end"></span>
														</span>
													</label>
												</div>
												<div class="form-check mb-2">
													<label class="form-check-label d-block">
														<input class="form-check-input rating_filter" name="rating[]" value="1" type="checkbox">
														<span class="rating">
															<i class="fas fa-star filled"></i>
															<i class="fa-regular fa-star filled"></i>
															<i class="fa-regular fa-star filled"></i>
															<i class="fa-regular fa-star filled"></i>
															<i class="fa-regular fa-star filled"></i><span class="float-end"></span>
														</span>
													</label>
												</div>
											</div>
										</div>
									</div>
								</div>
								<button type="submit" class="btn btn-dark w-100" id="searchServiceBtn">{{ __('Search') }}</button>
							</form>
						</div>
					</div>
				</div>
				<div class="col-xl-9 col-lg-8">
					<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
						@if (!$products->isEmpty())
						<h4>{{ __('Found') }} <span class="text-primary">