@extends('layouts.app')
@section('seo')
<title>Top Sellers</title>
@stop
@section('content')
    <!-- breadcrumb-area start -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row breadcrumb_box  align-items-center">
                        <div class="col-lg-6 col-md-6 col-sm-12 text-center text-md-start">
                            <h1 class="breadcrumb-title">Top Sellers</h1>
                        </div>
                        <div class="col-lg-6  col-md-6 col-sm-12">
                            <!-- breadcrumb-list start -->
                            <ul class="breadcrumb-list text-center text-md-end">
                                <li class="breadcrumb-item"><a href="{{ route('/') }}">Home</a></li>
                                <li class="breadcrumb-item active">Top Sellers</li>
                            </ul>
                            <!-- breadcrumb-list end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- breadcrumb-area end -->

    <!-- Shop Category pages -->
    <div class="shop-category-area pb-100px pt-70px">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 order-lg-last col-md-12 order-md-first">
                    <!-- Shop Top Area Start -->
                    <div class="shop-top-bar d-flex">
                        <!-- Left Side start -->
                        <p>Top Sellers</p>
                        <!-- Left Side End -->
                        <!-- Right Side Start -->
                        <!-- Right Side End -->
                    </div>
                    <!-- Shop Top Area End -->

                    <!-- Shop Bottom Area Start -->
                    <div class="shop-bottom-area">

                        <div class="row">
                            <!-- 循环此div -->
                            @foreach($products as $val)
                            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6" data-aos="fade-up" data-aos-delay="200">
                                <!-- Single Prodect -->
                                <div class="product mb-25px">
                                    <div class="thumb">
                                        <a href="{{ $val->url }}" class="image">
                                            <img src="{{ $val->okpcode }}" alt="{{ $val->jianjie2 }}">
                                        </a>
                                    </div>
                                    <div class="content">
                                        <h5 class="title"><a href="{{ $val->url }}">
                                            @if($val->product->category==='battery')
                                            {{ $val->product->jianjie1 }} Battery For {{ $val->product->cs }}, {{ $val->product->dy }},{{ $val->product->dl }}
                                            @else
                                            {{ $val->product->jianjie1 }} Adapter For {{ $val->product->cs }}, {{ $val->product->bzq }}
                                            @endif
                                        </a></h5>
                                        <span class="price">
                                            <span class="new">{{ currency($val->price) }}</span>
                                            <span class="old">{{ currency($val->price,true) }}</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                                <!-- 循环此div -->
                        </div>
                        <!--  Pagination Area Start -->
                        <div class="pro-pagination-style text-center mb-md-30px mb-lm-30px mt-30px" data-aos="fade-up">
                            {{ $products->links() }}
                        </div>
                        <!--  Pagination Area End -->
                    </div>
                    <!-- Shop Bottom Area End -->
                </div>
                <!-- Sidebar Area Start -->
                @include('categories.__left')
            </div>
        </div>
    </div>
@stop