@extends('frontend.layouts.master')

@section('title', $category->name)

@section('scripts')

	<script>
		$('#search').keyup(function (){
			$('.card').removeClass('d-none');
			var filter = $(this).val(); // get the value of the input, which we filter on
			$('.card-columns').find('.card .card-body h4:not(:contains("'+filter+'"))').parent().parent().addClass('d-none');
		})
	</script>

@endsection

@section('content')

				@php $header_image = \App\Models\Site\Header\Image::inRandomOrder()->first(); @endphp

				<section class="module-header parallax {{ $header_image->css }}" data-background="{{ $header_image->imageURL }}">
					<div class="container">
						<div class="row">
							<div class="col-md-12 text-left">
								<h1 class="h1">{{ $category->name }}</h1>
								<p>{{ $category->description }}</p>
							</div>
						</div>
					</div>
				</section>
				<section class="module">
					<div class="container">
						<div class="row">
							<div class="col-lg-8">
								<div class="special-heading">
									<h1>{{ $category->name }}</h1>
								</div>

								<div class="row m-b-20">
									<div class="col-md-12">
										<input type="search" id="search" placeholder="Start typing to search..." class="form-control form-control-lg" aria-label="Search">
									</div>
								</div>

								<div class="card-columns">

									@foreach($products->sortBy('name') as $product)

										<div class="card">
											<a href="{{ route('frontend.product.show', $product->slug ) }}"><img class="card-img-top" src="{{ $product->images->first()->image_square_medium_url or '/uploads/product/image/default_square_medium.jpg' }}" alt="{{ $product->name }}"></a>
											<div class="card-body">
												<h4 class="card-title"><a href="{{ route('frontend.product.show', $product->slug ) }}">{{ $product->name }}</a></h4>
												<p class="card-subtitle">{{ $product->rating }}</p>
											</div>
										</div>

									@endforeach

								</div>
							</div>
							<div class="col-lg-4">

								@include('frontend.product.partials.sidebar')

							</div>
						</div>
					</div>
				</section>

@endsection