@extends('frontend.layouts.app')

@section('title', 'Blogs - I Am Happy Healthcare Platform')

@section('content')
    <section class="page-title" style="background-image:url({{ asset('img/PhotoRoom1.webp') }});">
        <div class="auto-container">
            <h1 class="text-dark">Blogs</h1>
            <ul class="bread-crumb clearfix">
                <li><a href="{{ route('home') }}" class="text-dark">Home</a></li>
                <li class="text-dark">Blogs</li>
            </ul>
        </div>
    </section>

    <section class="blog-wrap py-5">
        <div class="container">
            @if ($blogs->count())
                <div class="row g-4">
                    @foreach ($blogs as $blog)
                        <div class="col-lg-4 col-md-6">
                            <div class="card h-100 border-0 shadow-sm overflow-hidden">
                                @if ($blog->image)
                                    <img src="{{ asset('uploads/blogs/' . $blog->image) }}" alt="{{ $blog->title }}"
                                        class="card-img-top" style="height: 240px; object-fit: cover;">
                                @else
                                    <div class="d-flex align-items-center justify-content-center bg-light text-muted"
                                        style="height: 240px;">
                                        No Image Available
                                    </div>
                                @endif

                                <div class="card-body d-flex flex-column">
                                    <h4 class="h5 fw-semibold mb-3">
                                        <a href="{{ route('blog.blogdetails', $blog->id) }}"
                                            class="text-dark text-decoration-none">
                                            {{ $blog->title }}
                                        </a>
                                    </h4>

                                    <p class="text-muted mb-4 flex-grow-1">
                                        {{ \Illuminate\Support\Str::limit(strip_tags($blog->description), 140) }}
                                    </p>

                                    <div>
                                        <a href="{{ route('blog.blogdetails', $blog->id) }}" class="btn btn-primary btn-sm">
                                            Read More
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="alert alert-info mb-0 text-center">
                    No blogs available right now.
                </div>
            @endif
        </div>
    </section>
@endsection