@extends('frontend.layouts.app')

@push('content')
    <div class="rts-brad-crumb-area breadcrumb-image bg_image">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-inner ptb--130 pt_sm--80 pb_sm--80">
                        <h1 class="title sal-animate" data-sal-delay="300" data-sal-duration="800" data-sal="slide-up">Latest
                            Products</h1>
                        <div class="breadcrumb-list">
                            <a href="{{ route('home') }}" data-sal-delay="300" data-sal-duration="800" data-sal="slide-up"
                                class="sal-animate">Home</a>
                            <span>/</span>
                            <a class="deactive sal-animate" href="#" data-sal-delay="400" data-sal-duration="800"
                                data-sal="slide-up">Pages</a>
                            <span>/</span>
                            <a class="active sal-animate" href="#" data-sal-delay="500" data-sal-duration="800"
                                data-sal="slide-up">Latest Product</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="rts-blog-area-main rts-section-gap">
        <div class="container">
            <div class="row g-5" id="ajax_content">
                <!-- start single blog area -->
                @foreach ($dataset as $data)
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
                        {{-- <div class="rts-blog-single-wrapper sal-animate" data-sal-delay="300" data-sal-duration="800"
                        data-sal="slide-up">
                        <div class="image-thumbnail">
                            <a href="blog-single.html"><img src="assets/images/blog/blog-01.jpg" alt="Nft_blog"></a>
                            <div class="blog-badge">
                                <span>Etherium</span>
                            </div>
                        </div>
                        <div class="blog-content-wrapper">
                            <div class="blog-head">
                                <div class="blog-quote">
                                    <a href="blog-single.html"><i class="fa fa-user-plus"></i> Admin</a>
                                </div>
                                <div class="blog-time">
                                    <i class="fa fa-user-clock"></i>
                                    <p>21 Jan 2023</p>
                                </div>
                            </div>
                            <div class="blog-body">
                                <a href="blog-single.html">
                                    <h5 class="title">Showen stay safe on Discord and Social Media</h5>
                                </a>
                            </div>
                            <div class="blog-footer">
                                <a class="rts-btn btn-secondary radious-5" href="blog-single.html">Read Story</a>
                            </div>
                        </div>
                    </div> --}}
                        <div class="" style="width: 341.667px; margin-right: 50px;">
                            <!-- single slider -->
                            <div class="trending-items_wrapper">
                                <div class="thumbnail">
                                    <a href="{{ route('product.show', $data->permalink) }}"><img
                                            src="{{ $data->getFirstMediaUrl('image') }}" alt="{{ $data->name }}"></a>
                                </div>
                                <h5 class="title">
                                    {{ $data->name }}
                                </h5>
                                <div class="product-discription">
                                    <div class="product-left">
                                        <span class="deg">
                                            @ {{ $data->author->name ?? '' }}
                                        </span>
                                        <h5 class="price">${{ $data->selling_price }}</h5>
                                    </div>
                                    <div class="product-right">
                                        <a href="{{ route('product.show', $data->permalink) }}"
                                            class="rts-btn btn-sm btn-secondary radious-5">Order Now</a>
                                    </div>
                                </div>
                            </div>
                            <!-- single slider End-->
                        </div>
                    </div>
                @endforeach
                <div class="col-lg-12">
                    <!-- pagination start -->
                    <div class="start-pagination-area" id="ajaxPaginate">
                        {{ $dataset->links() }}
                        {{-- <button data-sal-delay="300" data-sal-duration="800" data-sal="slide-up" class="sal-animate">Prev</button>
                        <button data-sal-delay="400" data-sal-duration="800" data-sal="slide-up" class="active sal-animate">1</button>
                        <button data-sal-delay="500" data-sal-duration="800" data-sal="slide-up" class="sal-animate">2</button>
                        <button data-sal-delay="600" data-sal-duration="800" data-sal="slide-up" class="sal-animate">3</button>
                        <button data-sal-delay="700" data-sal-duration="800" data-sal="slide-up" class="sal-animate">Next</button> --}}
                    </div>
                    <!-- pagination End -->
                </div>
                <!-- start single blog area -->
            </div>
        </div>
    </div>
@endpush