@extends('frontend.layouts.app')

@section('page_title', 'Blog')

@section('content')

    <!-- Hero Section -->
    <div class="container-fluid p-0 hero-section-about-page">
        <div class="position-relative w-100" style="height: 380px;" data-aos="fade-down" data-aos-delay="200">
            <img src="{{ asset('assets/img/g_img-2.jpg') }}"  alt="Breadcrumb" class="w-100 h-100 object-fit-cover">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center text-center"
                 style="background: rgba(0, 47, 108, 0.85);">
                <p class="display-4 fw-bold text-white mb-3 h1" style="font-family: 'Poppins', sans-serif; letter-spacing: 1px;" data-aos="fade-up" data-aos-delay="400">
                    Blogs
                </p>
                                <!-- Breadcrumb Bar -->
{{--                                <div class="container my-3">--}}
{{--                                    <nav aria-label="breadcrumb">--}}
{{--                                        <ol class="breadcrumb bg-primary rounded-pill px-4 py-2 mb-0 d-flex justify-content-center justify-content-md-start">--}}
{{--                                            <li class="breadcrumb-item">--}}
{{--                                                <a href="{{ route('index') }}" class="text-white fw-semibold text-decoration-none">Home</a>--}}
{{--                                            </li>--}}
{{--                                            <li class="breadcrumb-item active text-white fw-bold" aria-current="page">Blog</li>--}}
{{--                                        </ol>--}}
{{--                                    </nav>--}}
{{--                                </div>--}}

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

    <!-- Blog Section -->
    <section class="py-5">
        <div class="container-xl container-fluid">
            <div class="row g-4">

                @forelse($blogs as $blog)
                    <div class="col-md-4 col-sm-6">
                        <div class="card h-100 shadow-sm">
                            <img src="{{ $blog['image'] }}" class="card-img-top" alt="Blog 1">
                            <div class="card-body">
                                <h1 class="card-title h5">{{ $blog['title'] }}</h1>
                                <p class="card-text">{{ \Illuminate\Support\Str::limit(strip_tags($blog['description']), 120) }}</p>
                                <a href="{{ route('blog.show', $blog['slug']) }}" class="btn btn-primary">Read More</a>
                            </div>
                            <div class="card-footer text-muted">Posted on {{ \Carbon\Carbon::parse($blog['blog_date'] ?? now())->format('M d, Y') }}</div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-5">
                        <i class="cui-ban text-secondary" style="font-size: 80px;"></i>
                        <p class="text-muted mt-3 h4">No blog posts found.</p>
                        <p class="text-secondary">Please check back later for upcoming Stories</p>
                    </div>

                @endforelse

            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-center mt-4">
                {{ $blogs->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </section>

@endsection