@extends('frontend.master')
@section('home')


<!-- ================================
    START BREADCRUMB AREA
================================= -->
<section class="breadcrumb-area section-padding img-bg-2">
   <div class="overlay"></div>

   <div class="container">

       <div class="breadcrumb-content d-flex flex-wrap align-items-center justify-content-between">
          
           <div class="section-heading">
               <h2 class="section__title text-white"> <a href="/"> <i class="la la-chevron-left icon text-white"> </i> </a>    Category Products   </h2>
           </div>

           <ul class="generic-list-item generic-list-item-white generic-list-item-arrow d-flex flex-wrap align-items-center"> 
               
                  <li> <a href="/" class="text-white"> Home </a> </li>
                  <li class="text-white">  {{ $category->category_name }} </li>

    
           </ul>

       </div><!-- end breadcrumb-content -->

   </div><!-- end container -->
</section><!-- end breadcrumb-area -->
<!-- ================================
   END BREADCRUMB AREA
================================= -->







<section class="course-area pb-120px pt-5">


    <div class="container my-5">
        <div class="row">
            
            <!-- Loop through the products and display them -->
            @forelse($category->products as $product)

               
                <div class="col-lg-3 responsive-column-half">
                    <div class="card card-item card-preview shadow-lg">
                        
                        <div class="card-image">
                            <a href="{{ route('frontend.show.product', $product->product_slug) }}" class="d-block">
                                 <img class="card-img-top lazy rounded-lg border border-dark" style="border-width: 15px;" src="{{ asset($product->product_thumbnail) }}" class="img-fluid"  alt="Card image cap"> 
                                
                                {{-- <h6 class="text-center py-2" > <a href="{{ route('frontend.show.product', $product->product_slug) }}"> {{ $product->product_name }} </a> </h6> --}}
                            </a>

                        </div><!-- end card-image -->


                    </div> <!-- end card -->
                </div><!-- end col-lg-4 -->

            @empty

                <div class="col-12">
                    <p>No products available under this category.</p>
                </div>

            @endforelse

        </div>
    </div>
   
  



     

</section>





<div class = "container">

    <div class="section-block"></div>

</div>






@endsection