@extends('web.home.layout.master')

@section('content')

<div id="page-content">
  
    
    <div class="container" style="padding-top: 10%">
        <div class="row">
            <!--Main Content-->
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 main-col shop-grid-6">
                <div class="productList">
                    <div class="grid-products grid--view-items">
                        <div class="row">
                            @foreach ($products as $item)
                            <div class="col-6 col-sm-6 col-md-4 col-lg-2 item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    @php
                                    $imageArray = explode(',', $item->product_image);
                                    $firstImage = $imageArray[0];
                                    $secondImage=$imageArray[1];
                                @endphp
                                    <a href="{{ route('american.plastic.web.product.details', ['id' => $item->id, 'tags' => $item->product_tags]) }}">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload" data-src="{{ asset('admin/assets/img/product/' . $firstImage) }}" src="{{ asset('admin/assets/img/product/' . $firstImage) }}" alt="image" title="product">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload" data-src="{{ asset('admin/assets/img/product/' . $secondImage) }}" src="{{ asset('admin/assets/img/product/' . $secondImage) }}" alt="image" title="product">
                                        <!-- End hover image -->
                                    </a>
                                    <!-- end product image -->
                                    <!-- Start product button -->
                               
                                    <div class="button-set">
                                        
                                        <div class="wishlist-btn">
                                            <a class="wishlist add-to-wishlist" href="{{ route('american.plastic.web.addto.wishlist', ['id' => $item->id]) }}" title="Add to Wishlist">
                                                <i class="icon anm anm-heart-l"></i>
                                            </a>
                                        </div>
                                  
                                    </div>
                                    <!-- end product button -->
                                </div>
                                <!-- end product image -->

                                <!--start product details -->
                                <div class="product-details text-center">
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="{{ route('american.plastic.web.product.details', ['id' => $item->id, 'tags' => $item->product_tags]) }}">{{$item->product_name}}</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="price">LKR&nbsp;{{ number_format($item->product_price, 2) }}</span>
                                    </div>
                                    <!-- End product price -->
                                    
                                    <div class="product-review" hidden>
                                        <i class="font-13 fa fa-star"></i>
                                        <i class="font-13 fa fa-star"></i>
                                        <i class="font-13 fa fa-star"></i>
                                        <i class="font-13 fa fa-star-o"></i>
                                        <i class="font-13 fa fa-star-o"></i>
                                    </div>
                                </div>
                                <!-- End product details -->
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="infinitpaginOuter" hidden>
                    <div class="infinitpagin">	
                        <a href="#" class="btn loadMore">Load More</a>
                    </div>
                </div>
            </div>
            <!--End Main Content-->
        </div>
    </div>
    
</div>
@endsection