@extends('frontend.layouts')
@section('content')

<!-- billboard -->
    <section id="billboard" class="py-5">

        <div class="container">
            <div class="row">
                <div class="col-12 position-relative">

                    <!-- Slider -->
                    <div class="main-slider">
                        @foreach ($sliders as $slider)

                              <!-- Slide 1 -->
                            <div class="slider-item d-flex align-items-center flex-wrap gx-0">
                                <div class="banner-content col-md-6  justify-content-center">
                                    <h2 class="banner-title">{{ $slider->title }}</h2>

                                     <h4 class="fw-bold" style="color:#4da3ff;">{{ $slider->author }}</h4>
                                    <p class="slider-desc">{{ $slider->description }}</p>

                                </div>
                                <div class="col-md-6 text-center hero-wrapper">
                                    <a href="{{$slider->amazon_link }}" target="_blank">
                                        <img src="{{ asset($slider->image ) }}"
                                        class="{{ $slider->alt_text }}">
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Arrows -->
                    <button class="prev btn btn-light position-absolute"
                            style="left:10px; top:20%; transform:translateY(-50%); z-index:10;">
                        <i class="fas fa-arrow-left"></i>
                    </button>

                    <button class="next btn btn-light position-absolute"
                            style="right:10px; top:20%; transform:translateY(-50%); z-index:10;">
                        <i class="fas fa-arrow-right"></i>
                    </button>

                </div>
            </div>
        </div>
    </section>
    <!-- client-holder -->
	<section id="client-holder" data-aos="fade-up">
        <div class="container">
            <div class="row">
                <div class="inner-content text-center">
                    <div class="logo-wrap">

                        <div class="grid text-center">
                            <a href="{{route('public-author')}}"
                            style="text-decoration:none; color:#333; display:flex; align-items:center; justify-content:center; gap:15px;">

                                <div style="text-align:right;">
                                    <h2 style="margin:0;">Author</h2>
                                    <h4 style="margin:0;">Md. Atique Ullah Siddique</h4>
                                </div>

                                <img src="{{ asset('frontend/assets/images/atique3.png') }}"
                                    alt="Author"
                                    style="width:80px; height:80px; object-fit:cover; border-radius:50%;">

                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
        <!-- Children’s Emotional Bedtime Stories popular -->
	<section id="popular-books" class="bookshelf py-5 my-5">
		<div class="container">
			<div class="row">
				<div class="col-md-12">

					<div class="section-header align-center">
						<div class="title">

						</div>
						<h2 class="section-title">All Books</h2>
					</div>

				<ul class="tabs">
                    <li data-tab-target="#all-genre" class="active tab">All Books</li>

                    {{-- All Categories --}}
                    @foreach($catagories as $catagory)
                        <li data-tab-target="#category-{{ $catagory->id }}" class="tab">
                            {{ $catagory->title }}
                        </li>
                    @endforeach
                </ul>

                <div class="tab-content">

                    {{-- ALL BOOKS TAB (Index page limit 3) --}}
                    <div id="all-genre" data-tab-content class="active">
                        <div class="row">
                            @foreach ($populars->take(6) as $popular) {{-- take(3) শুধু All Books tab --}}
                                <div class="col-md-4">
                                    <a href="{{ $popular->amazon_link }}" class="text-decoration-none text-dark">
                                        <div class="product-item">
                                            <figure class="product-style">
                                                <img src="{{ asset($popular->image) }}" alt="{{ $popular->alt_text }}" class="product-item">
                                            </figure>
                                            <figcaption>
                                                <h3>{{ $popular->title }}</h3>
                                                <span>{{ $popular->author }}</span>
                                            </figcaption>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- CATEGORY WISE (All books in category) --}}
                    @foreach($catagories as $catagory) {{-- take(3) বাদ দিলাম --}}
                        <div id="category-{{ $catagory->id }}" data-tab-content>
                            <div class="row">
                                @forelse($populars->where('category_id', $catagory->id) as $popular)
                                    <div class="col-md-4">
                                        <a href="{{ $popular->amazon_link }}" class="text-decoration-none text-dark">
                                            <div class="product-item">
                                                <figure class="product-style">
                                                    <img src="{{ asset($popular->image) }}" alt="{{ $popular->alt_text }}" class="product-item">
                                                </figure>
                                                <figcaption>
                                                    <h3>{{ $popular->title }}</h3>
                                                    <span>{{ $popular->author }}</span>
                                                </figcaption>
                                            </div>
                                        </a>
                                    </div>
                                @empty
                                    <div class="col-md-12 text-center">
                                        <p>No books found in this category</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    @endforeach

                </div>

                 <div class="row">
                    <div class="col-md-12 ">

                        <div class="btn-wrap align-right">
                            <a href="{{ route('public-popular') }}" class="btn-accent-arrow">View all books <i
                                    class="icon icon-ns-arrow-right"></i></a>
                        </div>

                    </div>
                </div>

			</div>
		</div>

	</section>
    <!-- category -->
	<section id="category-section" class="py-5 ">
        <div class="container">

            <!-- Section Header -->
            <div class="row">
                <div class="col-md-12 text-center mb-5">
                    <div class="title">

                    </div>
                    <h2 class="section-title">Buy Books </h2>
                </div>
            </div>

            <!-- Category Items -->
            <div class="row">

                <!-- Single Category -->
                @foreach ($catagories as $catagory)

                <div class="col-md-3">
                    <div class="catagory-item">

                     <a href="{{ $catagory->amazon_link }}" target="_blank" style="text-decoration: none; color: inherit;">

                            <figure class="catagory-style">
                                <img src="{{ asset($catagory->image) }}"
                                    alt="{{ $catagory->alt_text }}">

                                <div class="catagory-overlay"></div>
                            </figure>

                            <figcaption class="text-center mt-3">
                                <h3>{{ $catagory->title }}</h3>
                            </figcaption>

                        </a>

                    </div>
                </div>

                @endforeach

            </div>

                <div class="row">
                    <div class="col-md-12 p-5">

                        <div class="btn-wrap align-right">
                            <a href="{{ route('public-catagory') }}" class="btn-accent-arrow">View all books <i
                                    class="icon icon-ns-arrow-right"></i></a>
                        </div>

                    </div>
                </div>

        </div>
    </section>

    <!-- "best-selling -->
	<section id="best-selling" class="leaf-pattern-overlay">
		<div class="corner-pattern-overlay"></div>
		<div class="container">
			<div class="row justify-content-center">

				<div class="col-md-8">

				<div class="row">

                    <div class="col-md-6 hero-wrapper">
                        <a href="{{ $bestsellers->amazon_link }}" target="_blank">
                            <img src="{{ asset($bestsellers->image) }}"
                                class="hero-img"
                                alt="{{ $bestsellers->alt_text }}">
                        </a>
                    </div>

                    <div class="col-md-6">
                        <div class="product-entry">
                            <h2 class="section-title divider">Best Selling Book</h2>

                            <div class="books-content">
                                 <h3 class="fw-bold" style="color:#4da3ff;">{{ $bestsellers->author }}</h3>
                                <h2 class="item-title">{{ $bestsellers->title }}</h2>
                                <p class="slider-desc">{{ $bestsellers->description }}</p>

                                <div class="btn-wrap">
                                    <a href="{{ $bestsellers->amazon_link }}"
                                    target="_blank"
                                    class="btn-accent-arrow">
                                        shop it now
                                        <i class="icon icon-ns-arrow-right"></i>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
					<!-- / row -->

				</div>

			</div>
		</div>
	</section>

    <!-- quotation -->
	<section id="quotation" class="align-center p-5 mb-5">
		<div class="inner-content">
			<h2 class="section-title divider">{{ $bestsellers->quta_title}}</h2>
			<blockquote data-aos="fade-up">
				<q class="slider-desc">{{ $bestsellers->quta_description}}</q>
				{{-- <div class="author-name">{{ $bestsellers->quta_author}}</div> --}}
                <h3 class="fw-bold" style="color:#4da3ff;">{{ $bestsellers->quta_author }}</h3>
			</blockquote>
		</div>
	</section>
     <!-- featured Children’s Science & Nature -->
	<section id="featured-books" >
		<div class="container">
			<div class="row">
				<div class="col-md-12">

					<div class="section-header align-center">
						<div class="title">

						</div>
						<h2 class="section-title">Children’s Science & Nature</h2>
					</div>

					<div class="product-list" data-aos="fade-up">
						<div class="row">

							@foreach ($features as $featured)

                            <div class="col-md-4">
								<a href="{{ $featured->amazon_link }}" target="_blank" class="text-decoration-none text-dark">
                                    <div class="product-item">
									<figure class="product-style">
										<img src="{{ asset($featured->image) }}" alt="{{ $featured->alt_text }}" class="product-item">

									</figure>
									<figcaption>
										<h3>{{ $featured->title }}</h3>
										<p>{{ $featured->author ?? 'No Author Found' }}</p>
										{{-- <div class="item-price">$ {{ number_format($featured->price, 2) }}</div> --}}
									</figcaption>
								</div>
                                </a>
							</div>

                            @endforeach


						</div><!--ft-books-slider-->
					</div><!--grid-->


				</div><!--inner-content-->
			</div>

			<div class="row">
				<div class="col-md-12">

					<div class="btn-wrap align-right">
						<a href="{{ route('public-features') }}" class="btn-accent-arrow">View all books <i
								class="icon icon-ns-arrow-right"></i></a>
					</div>

				</div>
			</div>
		</div>
	</section>
    <!-- book offers Children’s Early Learning-->


    <section id="latest-blog" class=" my-5">
		<div class="container">
			<div class="row">
				<div class="col-md-12">

					<div class="section-header align-center pt-5">

						<h2 class="section-title">Children's Early Learning</h2>
					</div>

					<div class="row">
				@foreach ($bookOffers as $bookOffer)

                        <div class="col-md-4">
                            <article class="column" data-aos="fade-up">

                                <figure>
                                    <a href="{{ $bookOffer->amazon_link ?? '' }}" class="image-hvr-effect">
                                        <img src="{{ asset($bookOffer->image) }}"
                                        alt="{{ $bookOffer->alt_text ?? '' }}"
                                        class="blog-img img-fluid">
                                    </a>
                                </figure>

                                <div class="post-item text-center">
                                    <h3 class="book-title">
                                        {{ $bookOffer->title }}
                                    </h3>
                                    <h5 class="text-muted">
                                        {{ $bookOffer->author }}
                                    </h5>
                                </div>
                            </article>
                        </div>

                        @endforeach


					</div>


            <div class="row">
				<div class="col-md-12">

					<div class="btn-wrap align-right">
						<a href="{{ route('public-book-offers') }}" class="btn-accent-arrow">View all books <i
								class="icon icon-ns-arrow-right"></i></a>
					</div>

				</div>
			</div>

				</div>
			</div>
		</div>
	</section>

 <!-- Memoirs & Personal Stories -->
    <section id="featured-books" class=" my-5">
		<div class="container">
			<div class="row">
				<div class="col-md-12">

					<div class="section-header align-center">
						<div class="title">

						</div>
						<h2 class="section-title">Memoirs & Personal Stories</h2>
					</div>

					<div class="product-list" data-aos="fade-up">
						<div class="row">

							@foreach ($memoirsPersonals as $memoirsPersonal)

                            <div class="col-md-4">
								<a href="{{ $memoirsPersonal->amazon_link }}" target="_blank" class="text-decoration-none text-dark">
                                    <div class="product-item">
									<figure class="product-style">
										<img src="{{ asset($memoirsPersonal->image) }}" alt="{{ $memoirsPersonal->alt_text }}" class="product-item">

									</figure>
									<figcaption>
										<h3>{{ $memoirsPersonal->title }}</h3>
										<p>{{ $memoirsPersonal->author ?? 'No Author Found' }}</p>

									</figcaption>
								</div>
                                </a>
							</div>

                            @endforeach


						</div><!--ft-books-slider-->
					</div><!--grid-->


				</div><!--inner-content-->
			</div>

			<div class="row">
				<div class="col-md-12">

					<div class="btn-wrap align-right">
						<a href="{{ route('public-memoirs-personals') }}" class="btn-accent-arrow">View all books <i
								class="icon icon-ns-arrow-right"></i></a>
					</div>

				</div>
			</div>
		</div>
	</section>


    <!-- latest Articles articles  Inspirational Fiction-->
    <section id="featured-books" class=" my-5">
		<div class="container">
			<div class="row">
				<div class="col-md-12">

					<div class="section-header align-center">
						<div class="title">

						</div>
						<h2 class="section-title">Inspirational Fiction</h2>
					</div>

					<div class="product-list" data-aos="fade-up">
						<div class="row">

							@foreach ($latestArticles as $latestArticle)

                            <div class="col-md-4">
								<a href="{{ $latestArticle->amazon_link }}" target="_blank" class="text-decoration-none text-dark">
                                    <div class="product-item">
									<figure class="product-style">
										<img src="{{ asset($latestArticle->image) }}" alt="{{ $latestArticle->alt_text }}" class="product-item">

									</figure>
									<figcaption>
										<h3>{{ $latestArticle->title }}</h3>
										{{-- <p>{{ $latestArticle->author ?? 'No Author Found' }}</p> --}}

									</figcaption>
								</div>
                                </a>
							</div>

                            @endforeach


						</div><!--ft-books-slider-->
					</div><!--grid-->


				</div><!--inner-content-->
			</div>

				<div class="row">

                    <div class="btn-wrap align-center">
                        <a href="{{ route('public-latest-articles')}}" class="btn btn-outline-accent btn-accent-arrow" tabindex="0">Read All Articles<i
                                class="icon icon-ns-arrow-right"></i></a>
                    </div>
                </div>
		</div>
	</section>


@endsection