@extends('frontend.master')

@section('content')
    <main class="main-wrapper" style="margin-bottom: 100px;">
        <!-- Start Breadcrumb Area  -->
        <div class="axil-breadcrumb-area">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-8">
                        <div class="inner">
                            <ul class="axil-breadcrumb">
                                <li class="axil-breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                                <li class="separator"></li>
                                <li class="axil-breadcrumb-item active" aria-current="page">Category Product</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-4">
                        <div class="inner">
                            <div class="bradcrumb-thumb">
                                <img src="{{ asset('/frontend_assets/images/product/product-45.png') }}" alt="Image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Breadcrumb Area  -->

        <!-- Start Expolre Product Area  -->
        <div class="axil-product-area bg-color-white axil-section-gap">
            <div class="container">
                @if (count($products) > 0)
                    <div class="section-title-wrapper">
                        <span class="title-highlighter highlighter-primary"> <i class="fal fa-store"></i> Our
                            Products</span>
                        <h2 class="title">Explore Category Products</h2>
                    </div>
                @endif

                <div
                    class="explore-product-activation slick-layout-wrapper slick-layout-wrapper--15 axil-slick-arrow arrow-top-slide">

                    <!-- End .slick-single-layout -->
                    <div class="slick-single-layout">
                        <div class="row row--15">
                            @forelse ($products as $product)
                                <div class="col-xl-3 col-lg-4 col-sm-6 col-12 mb--30">
                                    <div class="axil-product product-style-one">
                                        <div class="thumbnail">
                                            <a href="{{ route('product.details', $product->slug) }}">
                                                <img data-sal="zoom-out" data-sal-delay="200" data-sal-duration="800"
                                                    class="main-img"
                                                    src="{{ asset('/uploads/product') }}/{{ $product->image }}"
                                                    alt="Product Images" style="height: 200px;">
                                                <img class="hover-img"
                                                    src="{{ asset('/uploads/product') }}/{{ $product->image }}"
                                                    alt="Product Images" style="height: 200px;">
                                            </a>

                                            @if ($product->offer_price)
                                                <div class="label-block label-right">
                                                    <div class="product-badget">20% Off</div>
                                                </div>
                                            @endif

                                            <div class="product-hover-action">
                                                <ul class="cart-action">
                                                    <li class="quickview"><a href="#" data-bs-toggle="modal"
                                                            data-bs-target="#quick-view-modal"><i
                                                                class="far fa-eye"></i></a>
                                                    </li>
                                                    <li class="select-option">
                                                        <a href="{{ route('product.details', $product->slug) }}">
                                                            Add to Cart
                                                        </a>
                                                    </li>
                                                    <li class="wishlist"><a
                                                            href="{{ route('wishlist.store', $product->id) }}"><i
                                                                class="far fa-heart"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="product-content">
                                            <div class="inner">

                                                @if ($product->product_ratings_avg_rating != '')
                                                    <div class="product-rating d-flex justify-content-between">
                                                        <div class="star-rating">
                                                            @for ($i = 1; $i <= $product->product_ratings_avg_rating; $i++)
                                                                <i class="fas fa-star"></i>
                                                            @endfor
                                                        </div>

                                                        <div class="review-link">
                                                            <a href="#">(<span>{{ $product->product_ratings_count }}</span>
                                                                customer reviews)</a>
                                                        </div>
                                                    </div>
                                                @endif

                                                <h5 class="title"><a
                                                        href="{{ route('product.details', $product->slug) }}">{{ $product->name }}</a>
                                                </h5>
                                                <div class="product-price-variant">
                                                    <span class="price current-price">
                                                        @if ($product->offer_price)
                                                            {{ $product->offer_price }} TK
                                                            <del>{{ $product->price }} TK</del>
                                                        @else
                                                            {{ $product->price }} TK
                                                        @endif
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            @empty
                                <h3 class="text-center m-auto text-danger my-5">No Products Found</h3>
                            @endforelse
                            <!-- End Single Product  -->
                        </div>
                    </div>
                    <!-- End .slick-single-layout -->
                </div>
                @if (count($products) > 0)
                    <div class="row">
                        <div class="m-auto text-center mt--20 mt_sm--0">
                            {{-- <a href="shop.html" class="axil-btn btn-bg-lighter btn-load-more"></a> --}}
                            <span class="text-center m-auto">
                                {{ $products->links() }}
                            </span>
                        </div>
                    </div>
                @endif


            </div>
        </div>
        <!-- End Expolre Product Area  -->
    </main>
@endsection