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

<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">Catagory Books</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">
                    Catagory
                </li>
            </ol>
        </nav>
    </div>
</section>





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

        <!-- Section Header -->
        <div class="row">
            <div class="col-md-12 text-center mb-2">
                <div class="title">
                    {{-- <span>Browse By Category</span> --}}
                </div>
                <h2 class="section-title">Category Books</h2>
            </div>
        </div>
            <form method="GET" action="{{ route('public-catagory') }}" class="mb-5 search-bar">
                        <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>

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

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



@endsection