@extends('frontend.layouts.app')

@section('page_title')
IGSS Blog | Ignite School System Faisalabad Updates
@endsection
@section('description')
Read the IGSS blog for latest school news, events, educational tips, and student activities at Ignite School System Faisalabad.
@endsection
@section('keywords')
IGSS blogs,School news IGSS,Latest IGSS articles and posts
@endsection

@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>
            </div>
        </div>
    </div>

    <!-- Blog Section -->
    <section class="py-5 hero-section-about-page">
        <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