@extends('layouts.frontlayout')
@section('content')

<!-- ==== Listing Section Start === -->
<section class="listing_sections top-space">
    <div class="container">
        <div class="row">
            <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="listing_wrap listing_section">
                    <div class="left_area ">
                        <div class="side_bar sticky-top ">
                            <div class="sidebar_rows_area">
                                <div class="sidebar_filters_area">
                                    <div class="top_heading met d-md-none d-block">
                                        <a href="javascript:;" class="open_filter">
                                            <h5>Filters</h5>
                                            <i class="fas fa-filter"></i>
                                        </a>
                                    </div>
                                    @include('frontend.products.filters')
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right_area product_listing_with_sort">
                        <div class="right_inner_box">
                            <div class="top_heading met d-md-none d-block">
                                <div class="left">
                                    <a href="javascript:;" class="open_filter">
                                        <h5>Filters<i class="fas fa-filter ps-2"></i></h5>
                                    </a>
                                </div>
                                <div class="right">
                                    <div class="right_in">
                                            <p>Sort by</p>
                                        <div class="dropdown">
                                            <a class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                Newest
                                            </a>
                                            <ul class="dropdown-menu sorting" aria-labelledby="dropdownMenuLink">
                                                {{-- <li><a class="dropdown-item sort_by_list" data-field="products.title" data-sort="asc" href="#">Popular</a></li> --}}
                                                <li><a class="dropdown-item sort_by_list" data-field="products.title" data-sort="asc" href="#">Product A - Z</a></li>
                                                <li><a class="dropdown-item sort_by_list" data-field="products.title" data-sort="desc" href="#">Product Z - A</a></li>
                                                <li><a class="dropdown-item sort_by_list" data-field="products.price" data-sort="asc" href="#">Price Low to High</a></li>
                                                <li><a class="dropdown-item sort_by_list" data-field="products.price" data-sort="desc" href="#">Price High to Low</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="listing_area product_listing_with_sort">
                                <div class="tab_area">
                                    <div class="right_in">
                                        <p>Sort by</p>
                                        <div class="dropdown">
                                            <a class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                Newest
                                            </a>
                                            <ul class="dropdown-menu sorting" aria-labelledby="dropdownMenuLink">
                                                {{-- <li><a class="dropdown-item sort_by_list" data-field="products.title" data-sort="asc" href="#">Popular</a></li> --}}
                                                <li><a class="dropdown-item sort_by_list" data-field="products.title" data-sort="asc" href="#">Product A - Z</a></li>
                                                <li><a class="dropdown-item sort_by_list" data-field="products.title" data-sort="desc" href="#">Product Z - A</a></li>
                                                <li><a class="dropdown-item sort_by_list" data-field="products.price" data-sort="asc" href="#">Price Low to High</a></li>
                                                <li><a class="dropdown-item sort_by_list" data-field="products.price" data-sort="desc" href="#">Price High to Low</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="latest_collection_section listing">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                        <div class="listing_ad_detail">
                                            <div class="image_area">
                                                @if(isset($bannerListingPageImage['image']) && $bannerListingPageImage['image'] && file_exists(public_path($bannerListingPageImage['image'])))
                                                <div class="image">
                                                    @include('frontend.partials.fileRender', ['file' => $bannerListingPageImage['image'], 'size' => "large"])
                                                </div>
                                                @endif
                                                {{-- <img src="{{url('frontend/images/listing_banner.png')}}" /> --}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="showing_result_area">
                                        <div class="left_in">
                                            @include('frontend.products.showingOf')
                                        </div>
                                    </div>
                                    <div class="product_listing">
                                        <div class="row">
                                            @include('frontend.products.listingLoop')
                                        </div>
                                        @include('frontend.partials.pagination',['pagination' => $listing,'url' => route('products.listing')])
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==== Listing Section End === -->


@endsection