@extends('front.layout')
@section('title')
{{$category->name}}
@endsection
@section('css')
    <!-- SPECIFIC CSS -->
    <link href="{{url('assets/front/css/listing.css')}}" rel="stylesheet">
    <!-- YOUR CUSTOM CSS -->
    <link href="{{url('assets/front/css/custom.css')}}" rel="stylesheet">
@endsection
@section('content')
<main>
	    <div class="top_banner">
	        <div class="opacity-mask d-flex align-items-center" data-opacity-mask="rgba(0, 0, 0, 0.3)">
	            <div class="container">
	                <div class="breadcrumbs">
	                    <ul>
	                        <li><a href="{{url('/')}}">{{__('Home')}}</a></li>
	                        <li><a href="#">{{$category->name}}</a></li>
	                    </ul>
	                </div>
	                <h1>{{$category->name}}</h1>
	            </div>
	        </div>
	        <img src="{{category_cover($category)}}" class="img-fluid" alt="">
		</div>
		<div class="row">
			<div class="col-lg-12">
				<div class="top_panel">
					<div class="container header_panel">
						<small>{{__('What are you looking for?')}}</small>
					</div>
					<!-- /header_panel -->

					<div class="container">
						<div class="search-input">
                            <form action="{{route('search')}}">
                                <div class="row">
                                    <div class="col-md-1">
                                        <button style="background: #ffdc5d;color: #fff;top: 0;width: 100%;height: 100%" type="submit"><i class="ti-search"></i></button>
                                    </div>
                                    <div class="col-md-11" style="padding: 0;">
                                        <input type="text" placeholder="{{__('Search here')}}" class="search_products" name="term"
                                               value="@if(request()->has('term')) {{request()->term}} @endif">
                                    </div>

                                </div>
                            </form>
						</div>
					</div>
					<!-- /related -->
				</div>
			</div>
		</div>
	    <!-- /top_banner -->
	    <div id="stick_here"></div>
	    <div class="toolbox elemento_stick">
	        <div class="container">
	            <ul class="clearfix">
	                <li>
	                    {{-- <div class="sort_select">
							<form action="{{url('sorting')}}" >
								<select name="sort" id="sort">
									<option value="popularity" selected="selected">Sort by popularity</option>
									<option value="rating">Sort by average rating</option>
									<option value="date">{{__('Sort by newnest')}}</option>
									<option value="price">{{__('Sort by price: low to high')}}</option>
									<option value="price-desc">{{__('Sort by price: high to')}}
								</select>
							</form>
	                    </div> --}}
	                </li>
	                <li>

						<a href="{{url('setView/row')}}"><i class="ti-view-list"></i></a>
	                    <a href="{{url('setView/vertical')}}"><i class="ti-view-grid"></i></a>
	                </li>
	                <li>
	                    <a href="#0" class="open_filters">
	                        <i class="ti-filter"></i><span>Filters</span>
	                    </a>
	                </li>
	            </ul>
	        </div>
	    </div>
	    <!-- /toolbox -->
	    <div class="container margin_30 rtl">
	        <div class="row">
	            @include('front.partials.filters',['category'=>$category,'filter_brands'=>$category->brands])
				<!-- /col -->

	            <div class="col-lg-9">
					@if(count($category_products))
						@if(session()->get('view')=="row")
							@include('front.partials.row_view',['products'=>$category_products])
						@else
							@include('front.partials.vertical_view',['products'=>$category_products])
						@endif

						<!-- /row_item -->
						<div class="pagination__wrapper">
							<ul class="pagination">
								{!! $category_products->appends(['categories'=>request()['categories'],'brands'=>request()['brands'],'prices'=>request()['prices']])->links() !!}
							</ul>
						</div>
					@else
					  <h4 class="text-center">{{__('No products found , please filter again')}}</h4>
					@endif
	            </div>
	            <!-- /col -->
	        </div>
	        <!-- /row -->
	    </div>
		<!-- /container -->
</main>
@endsection
@section('scripts')
	<script src="{{url('assets/front/js/sticky_sidebar.min.js')}}"></script>
	<script src="{{url('assets/front/js/specific_listing.js')}}"></script>
@endsection