@extends('front.layouts.app', ['class' => 'bg-default', 'title' => 'Shop'])

@section('content')
@include('front.layouts.app-header')

    <!-- <section class="product_banner_sec" style="background: #000 url(images/product_banner.png) center / cover no-repeat; ">
        <div class="container">
            <div class="row">
                <div class="col col-12">
                    <div class="home_slider_inner_content">
                        <label>GRAILEYS FINE WINES</label>
                        <h2>Cehck out <br/>Latest Products</h2>
                        <div class="c_btn c_btn_red">
                            <a href="#" tabindex="0">Shop Now <img src="images/right-arrow.png"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> -->



    <section class="main_product_listing">
        <div class="container">
            <div class="row">
                <div class="col col-3">
                    @include('front.product.product-sidebar')
                </div>
                <div class="col col-9">
                    <div class="product_list_sorting">
                        <div class="product_display_cate">
                            <ul>
                                <li class="list_view"><a href="javascript:;" class="active"><i class="fas fa-th"></i></a></li>
                                <li class="row_view"><a href="javascript:;"><i class="fas fa-th-list"></i></a></li>
                            </ul>
                        </div>
                        <div class="pouduct_pagination pagination">
                            {{ $products->links() }}
                            <!-- <ul>
                                <li class="active"><a href="#!">1</a></li>
                                <li><a href="#!">2</a></li>
                                <li><a href="#!">3</a></li>
                                <li><a href="#!">4</a></li>
                                <li><a href="#!">5</a></li>
                                <li><a href="#!">6</a></li>
                                <li><a href="#!">7</a></li>
                            </ul> -->
                        </div>
                       
                        <div class="product_sorting_option">
                            <select name="filter_sorting" id="filter_sorting">
                                <option @if(isset($seletedFilters['selectedSorting']) && $seletedFilters['selectedSorting'] == '') selected @endif value="">Default Sorting</option>
                                <option @if(isset($seletedFilters['selectedSorting']) && $seletedFilters['selectedSorting'] == 'price_ltoh') selected @endif value="price_ltoh">Price: Low to High </option>
                                <option @if(isset($seletedFilters['selectedSorting']) && $seletedFilters['selectedSorting'] == 'price_htol') selected @endif value="price_htol">Price: High to Low</option>
                                <option @if(isset($seletedFilters['selectedSorting']) && $seletedFilters['selectedSorting'] == 'a-z') selected @endif value="a-z">Alphabetical: A-Z</option>
                                <option @if(isset($seletedFilters['selectedSorting']) && $seletedFilters['selectedSorting'] == 'z-a') selected @endif value="z-a">Alphabetical: Z-A</option>
                                <option @if(isset($seletedFilters['selectedSorting']) && $seletedFilters['selectedSorting'] == 'first_added') selected @endif value="first_added">Date Added: Most Recent First</option>
                                <option @if(isset($seletedFilters['selectedSorting']) && $seletedFilters['selectedSorting'] == 'last_added') selected @endif value="last_added">Date Added: Most Recent Last</option>
                            </select>
                        </div>
                    </div>
                    @include('front.product.product-list')
                    
                </div>
            </div>
        </div>
        <div class="d-none mobile_filter_button">
            <a href="javascript:;" class="filter_btn"><i class="fas fa-filter"></i> Filter</a>
            <a href="javascript:;" class="filter_cancel_btn d-none"><i class="fas fa-times"></i> Close</a>
        </div>
    </section>

    
        @include('front.layouts.app-footer')
@endsection
@section('custom-js')
<script>

</script>
@endsection