@extends('frontend.layouts.app')
@section('content')
    <div class="site-section p-0" data-aos="fade">
        <div class="container-fluid">
            @include('frontend.layouts.banner')
            <div class="row mt-5">
                <div class="col-md-12 text-center">
                    <h1 class="text-danger">Video Books</h1>
                </div>
            </div>
            
            <div class="row">
                 @if($query_params != '')
                <div class="container tending-container mt-5">
                  <div class="row">
                    <div class="col-md-12">
                      <h2 class="text-danger">{{ strtoupper($query_params) }}  <b>BOOKS</b></h2>
                      <div id="" class="carousel slide" data-ride="carousel" data-interval="0">
                        <div class="carousel-inner">
                          <div class="item carousel-item active">
                            <div class="row">
                               
                              @forelse($category_books as $book)
                              <div class="col-sm-3 p-3">
                                <a href="{{ route('video-book-detail', $book->slug) }}" class="text-white">
                                <div class="thumb-wrapper">
                                  <span class="wish-icon"><i class="fa fa-heart-o"></i></span>
                                  <div class="img-box">
                                    <img  class="image" src="{{ asset('storage/'.$book->book_image) }}" class="img-fluid" alt="">									
                                    <div class="overlay">
                                      <div class="text">
                                        <h5>{{ $book->book_name }}</h4>
                                        <p><p>By</p>{{ $book->author_name }}</p>
                                        <p class="item-price"><b>{{ $book->bookPrice[0]->currency->symbol.' '.$book->bookPrice[0]->book_price }}</b></p>
                                        <form action="{{ route('cart', $book->slug) }}" method="post">
                                            @csrf
                                            @method('patch')
                                            <button type="submit" class="btn btn-danger btn-sm">Buy Now</button>
                                        </form>
                                      </div>
                                    </div>
                                  </div>				
                                </div>
                                </a>
                              </div>
                              @empty
                               <div class="col-sm-3 p-3">
                                
                                <div class="thumb-wrapper">
                                  <span class="wish-icon"><i class="fa fa-heart-o"></i></span>
                                  <div class="img-box">
                                    <p>No Result Found</p>
                                  </div>				
                                </div>
                                
                              </div>
                            @endforelse
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                @endif
                <div class="container tending-container mt-5">
                  <div class="row">
                    <div class="col-md-12">
                      <h2 class="text-danger">FEATURED  <b>BOOKS</b></h2>
                      <div id="" class="carousel slide" data-ride="carousel" data-interval="0">
                        <div class="carousel-inner">
                          <div class="item carousel-item active">
                            <div class="row">
                              @foreach ($featured_books as $book)
                              <div class="col-sm-3 p-3">
                                <a href="{{ route('video-book-detail', $book->slug) }}" class="text-white">
                                <div class="thumb-wrapper">
                                  <span class="wish-icon"><i class="fa fa-heart-o"></i></span>
                                  <div class="img-box">
                                    <img  class="image" src="{{ asset('storage/'.$book->book_image) }}" class="img-fluid" alt="">									
                                    <div class="overlay">
                                      <div class="text">
                                        <h5>{{ $book->book_name }}</h4>
                                        <p><p>By</p>{{ $book->author_name }}</p>
                                        <p class="item-price"><b>{{ $book->bookPrice[0]->currency->symbol.' '.$book->bookPrice[0]->book_price }}</b></p>
                                        <form action="{{ route('cart', $book->slug) }}" method="post">
                                            @csrf
                                            @method('patch')
                                            <button type="submit" class="btn btn-danger btn-sm">Buy Now</button>
                                        </form>
                                      </div>
                                    </div>
                                  </div>				
                                </div>
                                </a>
                              </div>
                            @endforeach
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="container tending-container mt-5">
                  <div class="row">
                    <div class="col-md-12">
                      <h2 class="text-danger">TRENDING  <b>BOOKS</b></h2>
                      <div id="" class="carousel slide" data-ride="carousel" data-interval="0">
                        <div class="carousel-inner">
                          <div class="item carousel-item active">
                            <div class="row">
                              @foreach ($trending_books as $book)
                              <div class="col-sm-3 p-3">
                                <a href="{{ route('video-book-detail', $book->slug) }}" class="text-white">
                                <div class="thumb-wrapper">
                                  <span class="wish-icon"><i class="fa fa-heart-o"></i></span>
                                  <div class="img-box">
                                    <img  class="image" src="{{ asset('storage/'.$book->book_image) }}" class="img-fluid" alt="">									
                                    <div class="overlay">
                                      <div class="text">
                                        <h5>{{ $book->book_name }}</h4>
                                        <p><p>By</p>{{ $book->author_name }}</p>
                                        <p class="item-price"><b>{{ $book->bookPrice[0]->currency->symbol.' '.$book->bookPrice[0]->book_price }}</b></p>
                                        <form action="{{ route('cart', $book->slug) }}" method="post">
                                            @csrf
                                            @method('patch')
                                            <button type="submit" class="btn btn-danger btn-sm">Buy Now</button>
                                        </form>
                                      </div>
                                    </div>
                                  </div>				
                                </div>
                                </a>
                              </div>
                            @endforeach
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="container tending-container mt-5">
                  <div class="row">
                    <div class="col-md-12">
                      <h2 class="text-danger">POPULAR  <b>CLASSICS</b></h2>
                      <div id="" class="carousel slide" data-ride="carousel" data-interval="0">
                        <div class="carousel-inner">
                          <div class="item carousel-item active">
                            <div class="row">
                              @foreach ($popular_books as $book)
                              <div class="col-sm-3 p-3">
                                <a href="{{ route('video-book-detail', $book->slug) }}" class="text-white">
                                <div class="thumb-wrapper">
                                  <span class="wish-icon"><i class="fa fa-heart-o"></i></span>
                                  <div class="img-box">
                                    <img  class="image" src="{{ asset('storage/'.$book->book_image) }}" class="img-fluid" alt="">									
                                    <div class="overlay">
                                      <div class="text">
                                        <h5>{{ $book->book_name }}</h4>
                                        <p><p>By</p>{{ $book->author_name }}</p>
                                        <p class="item-price"><b>{{ $book->bookPrice[0]->currency->symbol.' '.$book->bookPrice[0]->book_price }}</b></p>
                                        <form action="{{ route('cart', $book->slug) }}" method="post">
                                            @csrf
                                            @method('patch')
                                            <button type="submit" class="btn btn-danger btn-sm">Buy Now</button>
                                        </form>
                                      </div>
                                    </div>
                                  </div>				
                                </div>
                                </a>
                              </div>
                            @endforeach
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
            </div>
        </div>
    </div>
@endsection