@php

/*
$categories = App\Models\Category::with(['products' => function ($query) {
    $query->where('status', 1)->where('language_id', 1)->orderBy('id', 'DESC');
}])->get();
*/


$categories = App\Models\Category::where('status', 1)
             ->with(['products' => function ($query) {
       $query->where('status', 1)->orderBy('language_id', 'ASC')->orderBy('id', 'ASC')->limit(12);
       }])->get();

@endphp




<section class="course-area position-relative overflow-hidden">
    <div class="container">

       


          @foreach ($categories as $category)

         
          <div>
            <h5 class="mt-5 ribbon ribbon-lg mt-3 mb-2 text-white">  {{ $category->category_name}}  </h5>
          </div><!-- end section-heading -->

        

          
          <div class="category-carousel owl-action-styled owl--action-styled">


        
          @forelse ($category->products as $book)

          {{--
              <div class="card card-item card-preview shadow" data-tooltip-content="#tooltip_content_3">

              <div class="card-image">
                 <a href="{{ route('frontend.show.product', $book->product_slug) }}" class="d-block">
                    <img class="card-img-top" src="{{ asset($book->product_thumbnail) }}" class="img-fluid" alt="Card image cap">

                    <h6 class="text-center py-3"><a href="{{ route('frontend.show.product', $book->product_slug) }}"> {{ $book->product_name }} </a></h6>
                 </a>                    
              </div><!-- end card-image -->

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

            <a href="{{ route('frontend.show.product', $book->product_slug) }}" >

               {{-- <img class="card-img-top lazy rounded-lg" src="{{ asset($book->product_thumbnail) }}" class="img-fluid"  alt="Card image cap"> --}}
                <img class="card-img-top lazy rounded-lg border border-dark img-fluid" style="border-width: 15px;" src="{{ asset($book->product_thumbnail) }}" alt="Card image cap">


             </a>

            @empty

            <p class="text-white" style="height:75px;"> <small> Products Coming Soon </small>  </p>
                  
            @endforelse


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




       
      @endforeach

   


</section>