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



<!-- Page Header -->
<section class="page-header d-flex align-items-center text-white"
         style="background: url('{{ asset('frontend/assets/images/he-1.png') }}') no-repeat center center; background-size: cover;">
    <div class="container text-center mt-5">
        <h1 class="fw-bold">Children’s Early Learning</h1>

        <nav aria-label="breadcrumb" class="mt-1">
            <ol class="breadcrumb justify-content-center bg-transparent mb-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('index') }}" class="text-white text-decoration-none">
                        Home
                    </a>
                </li>
                <li class="breadcrumb-item active text-white" aria-current="page">
                    Early Learning
                </li>
            </ol>
        </nav>
    </div>
</section>



       <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>
                       <form method="GET" action="{{ route('public-book-offers') }}" class="mb-5 search-bar p-5">
                        <div class="input-group">
                            <input type="text" name="search" class="form-control"
                                placeholder="Search by title..."
                                value="{{ request('search') }}">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-search me-1"></i> Search
                            </button>
                        </div>
                    </form>

					<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>
			</div>
		</div>
	</section>
    <div class="mt-3 p-5">
        {{ $bookOffers->appends(request()->query())->links() }}
    </div>



@endsection