@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')

    <!-- Blog Section -->
    <section class="blogs-section overflow-hidden position-relative py-5 bg-light">
        <div class="container my-md-3">
            <div class="wrapper text-center mx-auto mb-4 mb-xl-5" style="max-width: 700px;">
                <div class="label-title text-uppercase text-theme1 fw-bold" data-aos="fade-up" data-aos-delay="50">Blogs</div>
                <h2 class="heading display-5 fw-semibold" data-aos="fade-up" data-aos-delay="100">Updates From Blog</h2>
                <div class="description text-muted" data-aos="fade-up" data-aos-delay="150">
                    Dolor lorem lorem ipsum sit et ipsum. Sadip sea amet diam sed ut vero no sit.
                    Et elitr stet sed sit sed kasd. Erat duo eos et erat sed diam duo
                </div>
            </div>

            <div class="row g-4 mb-5">
                @forelse($blogs as $index => $blog)
                    <div class="col-sm-6 col-lg-4" data-aos="zoom-in" data-aos-delay="{{ 100 + ($index * 100) }}">
                        <div class="blog-item bg-white h-100 rounded shadow-sm border hover-shadow transition-all duration-300">
                            <img src="{{ $blog->image }}" alt="{{ $blog->title }}" class="img-fluid w-100 rounded-top" style="height: 200px; object-fit: cover;">
                            
                            <div class="blog-info p-3">
                                <div class="blog-title fs-6 fw-semibold text-truncate mb-1">
                                    {{ $blog->title }}
                                </div>
                                
                                <div class="blog-desc text-muted small mb-2">
                                    {!! \Illuminate\Support\Str::limit(strip_tags($blog->description), 100) !!}
                                </div>
                                
                                <div class="text-muted d-flex flex-wrap align-items-center gap-2 mb-3 small">
                                    <span class="me-auto">
                                        <i class="bi bi-calendar4-week me-1"></i> 
                                        {{ \Carbon\Carbon::parse($blog->created_at)->format('F d, Y') }}
                                    </span>
                                </div>
                                
                                <a href="{{ route('blogs.details', $blog->id) }}" class="learn-more text-theme1 fw-medium">
                                    Read More <i class="bi bi-arrow-right ms-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center" data-aos="fade-in">
                        <p class="text-muted">No blogs available right now.</p>
                    </div>
                @endforelse
            </div>

            <div class="btn-wrapper text-center mt-4" data-aos="fade-up">
                {{ $blogs->links() }}
            </div>
        </div>
    </section>

    <!-- Blog End -->

@endsection