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

<section class="listing_sections top-space">
    <div class="listing_wrap listing-block">
        @include('frontend.products.sidebar')
        <div class="right_area">
          	<div class="right_inner_box">
                <div class="search_box">
                    <div class="form-group">
                        <input type="text" class="form-control listing-search" name="search" placeholder="What are you looking for?" value="{{ request()->get('search') ? request()->get('search') : '' }}" />
                        <button type="button" class="btn btn-default">
                            <i class="far fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="top_heading d-md-none d-block">
                    <a href="javascript:;" class="open_filter">
                        <h5>Filters<i class="fas fa-filter ps-2"></i></h5>
                    </a>
                </div>
                <div class="listing_area">
                    <div class="tab_area">
                        <div class="left_in">
                            <ul class="nav nav-pills">
                                <li class="nav-item">
                                    <a href="{{ route('products.listing' ,['type'=>isset($type) && $type ? $type : 'all'] ) }}" class="nav-link slug_type {{ $slug_type == '' ? 'active' : '' }}" data-url="{{ route('products.listing', ['type' => 'all','slug' => '']) }}">All</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('products.listing', ['type'=>isset($type) && $type ? $type : 'all','slug' => 'pedigree']) }}" class="nav-link slug_type {{ isset($slug_type) && $slug_type == 'pedigree' ? 'active' : '' }}" data-url="{{ route('products.listing', ['type'=>'all','slug' => 'pedigree']) }}">Pedigree</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('products.listing', ['type'=>isset($type) && $type ? $type : 'all','slug' => 'other']) }}" class="nav-link slug_type {{ isset($slug_type) && $slug_type == 'other' ? 'active' : '' }}" data-url="{{ route('products.listing', ['type'=>'all','slug' => 'other']) }}">Other</a>
                                </li>
                            </ul>
                        </div>
                        <div class="right_in">
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                    Sort by
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                    <li>
                                        <a href="javascript:;" class="dropdown-item sort_by_list" data-value="title_asc">Title: A to Z</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="dropdown-item sort_by_list" data-value="title_desc">Title: Z to A</a>
                                    </li>
                                    @if(isset($type) && $type == 'all')
                                    <li>
                                        <a href="javascript:;" class="dropdown-item sort_by_list" data-value="price_asc">Price: Low to High</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="dropdown-item sort_by_list" data-value="price_desc">Price: High to Low</a>
                                    </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- <div class=""> -->
                    <div class="tab-content">
                        <div class="tab-pane fade show active">
                            @if(isset($highlightsListing) && $highlightsListing->toArray())
                            <div class="highlights_section listing_highlights" id="page2">
                                <div class="row">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                        <div class="heading">
                                            <h2>
                                                Highlights
                                            </h2>
                                        </div>
                                        <div class="highlights_wrap highlight_listing">
                                            <div class="owl-carousel highlight_slickss" id="highlight_slide2">
                                        		@include('frontend.products.highlightListingLoop')
                                        	</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            <div class="listing_section breeders_listing_section  search_result">
                                <div class="row">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                        <div class="heading">
                                            <h2>
                                                Search results
                                            </h2>
                                        </div>
                                        <div class="highlights_wrap pet_listing">
                                            <div class="list_divide_main">
                                                <div class="list_divide">
                                                    <div class="breeders_slick clearfix">
                                                        @if(isset($listing) && count($listing) > 0 )
                                                            @include('frontend.products.listingLoop')
                                                        @else
                                                            <div class="no_record">
                                                                <p>No Records Found</p>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    @include('frontend.partials.pagination', ["pagination" => $listing])
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection