@extends('front.layouts.app')
@section('css')

@endsection
@section('content')
    <!-- Page Introduction Wrapper -->
    <div class="page-style-a">
        <div class="container">
            <div class="page-intro">
                <h2>{{$title}}</h2>
                <ul class="bread-crumb">
                    <li class="has-separator">
                        <i class="ion ion-md-home"></i>
                        <a href="/">Home</a>
                    </li>
                    <li class="is-marked">
                        <a href="#">{{$title}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Page Introduction Wrapper /- -->

    <!-- Shop-Page -->
    <div class="page-shop u-s-p-t-80">
        <div class="container">
            <!-- Shop-Intro -->
            <div class="shop-intro">
                <ul class="bread-crumb">
                    <li class="has-separator">
                        <a href="/">Home</a>
                    </li>
                    <li class="is-marked">
                        <a href="">{{$title}}</a>
                    </li>
                    <!-- <li class="is-marked">
                        <a href="shop-v3-sub-sub-category.html">Tops</a>
                    </li> -->
                </ul>
            </div>
            <div class="page-bar clearfix">
                <div class="shop-settings">
                    <a id="list-anchor">
                        <i class="fas fa-th-list"></i>
                    </a>
                    <a id="grid-anchor" class="active">
                        <i class="fas fa-th"></i>
                    </a>
                </div>

            </div>
            <!-- Shop-Intro /- -->
            <section class="section-maker mt-5" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500">
                <div class="container">
                    <div class="sec-maker-header text-center">
                        <h3 class="sec-maker-h3">{{$title}}</h3>
                        <ul class="nav tab-nav-style-1-a justify-content-center">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#men-latest-products">Latest Products</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#men-best-selling-products">Best Selling</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#men-top-rating-products">Top Rating</a>
                            </li>
                        </ul>
                    </div>
                    <div class="wrapper-content">
                        <div class="outer-area-tab">
                            <div class="tab-content">
                                <div class="tab-pane active show fade" id="men-latest-products">
                                    <div class="row product-container grid-style">
                                        @foreach ($latest as $product)
                                        <div class="product-item col-lg-3 col-md-6 col-sm-6">
                                            @include('front.pages.blocks.product', ['description' => true])
                                        </div>

                                        @endforeach

                                    </div>
                                </div>
                                <div class="tab-pane fade" id="men-best-selling-products">
                                    <div class="row product-container grid-style">
                                        @foreach ($best as $product)
                                        <div class="product-item col-lg-3 col-md-6 col-sm-6">
                                            @include('front.pages.blocks.product', ['description' => true])
                                        </div>

                                        @endforeach
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="men-top-rating-products">
                                    <div class="row product-container grid-style">
                                        @foreach ($top as $product)
                                        <div class="product-item col-lg-3 col-md-6 col-sm-6">
                                            @include('front.pages.blocks.product', ['description' => true])
                                        </div>

                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            {!! $latest->links() !!}



        </div>
    </div>
    <!-- Shop-Page /- -->

@endsection
@section('js')

@endsection