@extends('layouts.front')

@section('content')

<div class="breadcumb_area bg-img" style="background-color: #f5f7f9;">
	<div class="container h-100">
		<div class="row h-100 align-items-center">
			<div class="col-12">
				<div class="page-title text-center">
					<h2>สินค้า</h2>
				</div>
			</div>
		</div>
	</div>
</div>

<section class="shop_grid_area section-padding-80">
	<div class="container">
		<div class="row">
			<div class="col-12 col-md-4 col-lg-3">
				<div class="shop_sidebar_area">

					<!-- ##### Single Widget ##### -->
					<div class="widget catagory mb-50">
						<!-- Widget Title -->
						<h6 class="widget-title mb-30">Catagories</h6>
						<!--  Catagories  -->
						<div class="catagories-menu">
							<ul id="menu-content2" class="menu-content collapse show">
								@foreach($categories as $cate)
								<li data-toggle="collapse" data-target="#term_id_16" class="" aria-expanded="true">
									<a href="{{ route('shop', ['cate' => $cate->id]) }}" >
										{{ $cate->name }}
									</a>
								</li>
								@endforeach
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div class="col-12 col-md-8 col-lg-9">
				<div class="shop_grid_product_area">
					<div class="row">
						<div class="col-12">
							<div class="product-topbar d-flex align-items-center justify-content-between">
								<!-- Total Products -->
								<div class="total-products">
									<p><span>{{ sizeof($products) }}</span> products found</p>
								</div>
								<!-- Sorting -->
								<!-- <div class="product-sorting d-flex">
									<p>Sort by:</p>
									<form action="#" method="get">
										<select name="select" id="sortByselect">
											<option value="value">Highest Rated</option>
											<option value="value">Newest</option>
											<option value="value">Price: $$ - $</option>
											<option value="value">Price: $ - $$</option>
										</select>
										<input type="submit" class="d-none" value="">
									</form>
								</div> -->
							</div>
						</div>
					</div>

					<div class="row">
						@foreach($products as $p)
						<div class="col-12 col-sm-6 col-lg-4">
							{!! view('front.partials.product', ['p' => $p])->render() !!}
						</div>
						@endforeach
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
@endsection