@extends('frontend.layouts.app')

@section('content')
    <div class="products-box-bar p-3 bg-white product_listing">
        <div class="row sm-no-gutters gutters-5">
            @foreach ($products as $key => $product)
                <div class="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-4">
                    <div class="product-box-2 bg-white alt-box my-md-2">
                        <div class="position-relative overflow-hidden">
                            <a href="{{ route('product', $product->slug) }}" class="d-block product-image h-100 text-center" tabindex="0">
                                @if(!empty($product->discount))
                                    <span class="discount">{{$product->discount}}% off</span>
                                @endif
                                @if(($product->thumbnail_img!='') && (Storage::disk('s3')->url($product->thumbnail_img)))
                                    <img class="img-fit lazyload mx-auto" src="{{Storage::disk('s3')->url('frontend/images/placeholder.jpg')}}" data-src="{{Storage::disk('s3')->url($product->thumbnail_img)}}" alt="{{ __($product->name) }}">
                                @else
                                    <img class="img-fit lazyload" src="{{ asset('frontend/images/placeholder.jpg') }}"  alt="{{  __($product->name) }}">
                                @endif


                            </a>
                            <div class="product-btns clearfix">
                                <button class="btn add-wishlist" title="Add to Wishlist" onclick="addToWishList({{ $product->id }})" type="button">
                                    <i class="la la-heart-o"></i>
                                </button>
                                <button class="btn add-compare" title="Add to Compare" onclick="addToCompare({{ $product->id }})" type="button">
                                    <i class="la la-refresh"></i>
                                </button>
                                <button class="btn quick-view" title="Quick view" onclick="showAddToCartModal({{ $product->id }})" type="button">
                                    <i class="la la-eye"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-md-3 p-2">
                            <div class="price-box">
                                @if(home_base_price_new($product->unit_price) != home_discounted_base_price_new($product))
                                    <del class="old-product-price strong-400">{{ home_base_price_new($product->unit_price) }}</del>
                                @endif
                                <span class="product-price strong-600">{{ home_discounted_base_price_new($product) }}</span>
                            </div>
                            <div class="star-rating star-rating-sm mt-1">
                                {{ renderStarRating($product->rating) }}
                            </div>
                            <h2 class="product-title p-0">
                                <a href="{{ route('product', $product->slug) }}" class=" text-truncate">{{  __($product->name) }}</a>
                            </h2>
                            @if ($addons->where('unique_identifier', 'club_point')->first() != null && $addons->where('unique_identifier', 'club_point')->first()->activated)
                                <div class="club-point mt-2 bg-soft-base-1 border-light-base-1 border">
                                    {{  translate('Club Point') }}:
                                    <span class="strong-700 float-right">{{ $product->earn_point }}</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="products-pagination bg-white p-3">
        <nav aria-label="Center aligned pagination">
            <ul class="pagination justify-content-center">
                {{ $products->links() }}
            </ul>
        </nav>
    </div>
@endsection
@push('css')
    <style type="text/css">
        .product-box-2 .discount {background: #50250d; width: 35px; height: 35px;   font-size: 11px; font-weight: 600; border-radius: 100%; position: absolute; right: 5px; top: 5px; color: #fff; line-height: 11px; padding:7px 5px; text-align: center;}
    </style>
@endpush