@extends('frontend.layout.master')
@section('content')
<!-- Breadcrumb -->
<div class="breadcrumb bg-bgPrimary py-4">
    <nav class="container text-xs flex justify-between items-center">
        <ol class="flex items-center">
            <li class="px-1 md:px-2"><a href="{{ url('/') }}" class="">Home</a></li>
            
              <li>
                  <i class="bi bi-chevron-right"></i>
              </li>
              <li class="px-1 md:px-2">
                      Products
              </li>
            
        </ol>
        <ol class="flex items-center">
            <li>
              <i class="bi bi-chevron-left"></i>
            </li>
            <li class="px-1 md:px-2"><a href="{{ url('/') }}" class="">Back to Home</a></li>
        </ol>
    </nav>
  </div> 
  <!-- // Breadcrumb -->
  
  <!-- PRODUCT GRID -->
  <section class="wh-product-grid container py-12 md:py-16 lg:py-20">
    <!-- Another Page Sub Heading -->
    <div class="wh-sub-heading text-center mb-8 md:mb-16">
        <!-- sorting by price -->
        <div class="flex flex-wrap justify-between items-center">
          <h2 class="uppercase lg:text-5xl md:text-3xl text-xl font-bold text-black md:mb-0 mb-5"><span class="border-double border-4 border-black px-4">{{ $category }}</span> Products</h2>
        </div>
    </div>
    <!-- Another Page Sub Heading -->
  
    <!-- #Start Main Body  -->
    
  
  <div class="container md:mt-20 mt-10 md:mb-20 mb-16">
    
    
      <div class="flex justify-between items-center mb-4 md:mb-7">
        <h4 class="uppercase text-lg md:text-2xl md:tracking-widest font-bold">Latest Products</h4>
        
          {{-- <a href="products/index.html" class="btn btn-sm btn-primary">See All</a> --}}
        
      </div>
    
    
  
    <div class="grid xl:grid-cols-6 md:grid-cols-3 grid-cols-2 gap-5">

          @forelse ($products as $item )
          <div class="product-grid h-full flex flex-col justify-between border border-opacity-1 border-gray-200 hover:border-primary ">
            <div class="content-wrap relative h-full flex flex-col justify-between">
              <div class="relative">
                <div class="img-wrap relative">
                  <img src="{{ asset($item->image) }}" class="primary-img min-h-[100px]" loading="lazy" alt="{{ $item->title }}">

                </div>
              </div>
              <div class="p-3">
                <a href="{{ route('product',$item->slug) }}" class="uppercase stretched-link"></a>
                <h4 class="product__title md:text-lg text-md font-normal md:mb-2 mb-1">{{ $item->title }}</h4>
                @if(1==get_setting('ecom_status'))
                  <p class="md:text-lg text-md">
                      <ins class="mr-1">Tk {{ $item->price }}</ins>
                  </p>
                @endif
              </div>
            </div>
          
            <!-- add to cart & buy now buttons -->
            @if(1==get_setting('ecom_status'))
                <div class="form-cart-wrap grid sm:grid-cols-1 grid-cols-1 sm:gap-2 gap-1 px-2 mb-3">
                      <a href="{{ route('product',$item->slug) }}" class="btn border-0 btn-success btn-sm " style="background-color: ;">Buy Now</a>
                </div>
            @endif
            
          </div>
          @empty
            <div class="text-center">
                <h1>No Product Found!!</h1>
            </div>
          @endforelse
          
          
    </div>
  </div>
   
    <!-- #End Main Body  -->
  </section>
  

@endsection