{{--

@php


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


@endphp


<section class="course-area pb-5">

    <div class="container">

        <div class="section-heading text-center">
            
            <h5 class="ribbon ribbon-lg mt-5 mb-3">A vast collection of titles for your spiritual growth and development </h5>
            
            <h2 class="section__title"> LIBRARY </h2>
            
            <span class="section-divider">   </span>

        </div><!-- end section-heading -->


        <ul class="nav nav-tabs generic-tab justify-content-center pb-4" id="myTab" role="tablist">

        
          

           
            @foreach ($categories as $key => $category) 
           
            <li class="nav-item">
                <a class="nav-link border border-dark rounded text-center @if($key == 0) active @endif" id="business-tab" data-toggle="tab" href="#business{{ $category->id }}" role="tab" aria-controls="business" aria-selected="false">{{ $category->category_name }}</a>
            </li>
            @endforeach

            

        </ul>

    </div><!-- end container -->



   
     <div class="card-content-wrapper jumbotron pt-50px pb-120px">
       <div class="container"> 
            <div class="tab-content" id="myTabContent">



                
            


                <!-- CATEGORIES -->
                @foreach ($categories as $key => $category)

                <div class="tab-pane fade @if($key == 0) show active @endif" id="business{{ $category->id }}" role="tabpanel" aria-labelledby="business-tab">
                    <div class="row">

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


                       
                        <div class="col-lg-3 responsive-column-half">
                            <div class="card card-item card-preview shadow-lg" data-tooltip-content="#tooltip_content_1">
                                
                                <div class="card-image">
                                    <a href="{{ route('user.show.product', $product->product_slug) }}" class="d-block">
                                        <img class="card-img-top lazy" src="{{ asset($product->product_thumbnail) }}" class="img-fluid" alt="Card image cap">

                                        <h6 class="text-center py-2"><a href="{{ route('user.show.product', $product->product_slug) }}"> {{ $product->product_name }} </a></h6>
                                    </a>

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


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



                        @empty

                        <h5 class="text-danger"> Products Coming Soon   </h5>
                              
                        @endforelse


                    </div><!-- end row -->
                </div><!-- end tab-pane -->

                @endforeach  <!-- CATEGORIES END -->



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




            <div class="more-btn-box mt-4 text-center">
                <a href="{{ route('user.all.products') }}" class="btn theme-btn"> Explore Library - View All Products  <i class="la la-arrow-right icon ml-1"></i></a>
            </div><!-- end more-btn-box -->


       </div> <!-- end container -->
    </div>  <!-- end card-content-wrapper -->

</section><!-- end courses-area -->


--}}




@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('user.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

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


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




       
      @endforeach

   


</section>