@extends('layouts.app')
@section('content')
    <div class="row mainbanner"
        style="background: url('http://127.0.0.1:8000/assets/img/testimonials-bg.jpg') no-repeat center center; background-size: cover;">
        <div class="col-12 py-5 text-center text-white">
            <h1 class="text-center heading h1 p-4 text-white">
                Latest Blogs
            </h1>
        </div>
    </div>
    <div class="container mt-5">
        <div class="row">
            @foreach ($blogs as $blog)
                <div class="col-md-4 mb-4">
                    <div class="card h-100 border-0 p-3" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
                        @if ($blog->thumbnail)
                            <div class="overflow-hidden" style="border: 2px solid #ddd6d6;border-radius: 5px;">
                                <img src="{{ asset('storage/' . $blog->thumbnail) }}"
                                    class="card-img-top img-fluid hover-zoom" alt="{{ $blog->title }}"
                                    style="height: 200px; object-fit: cover;">
                            </div>
                        @endif
                        <div class="card-body d-flex flex-column">
                            <div class="text-muted mb-2">
                                Post Date: {{ $blog->created_at->format('M d, Y') }}
                                <small class="text-muted">
                                    , Category: {{ $blog->category->name ?? 'Uncategorized' }}
                                </small>
                            </div>
                            <h5 class="card-title">{{ $blog->title }}</h5>
                            {{-- <div class="card-footer bg-white border-0 p-0">
                                <small class="text-muted">
                                    Category: {{ $blog->category->name ?? 'Uncategorized' }}
                                </small>
                            </div> --}}
                            <p class="card-text text-muted">{{ Str::limit(strip_tags($blog->content), 100) }}</p>
                            <div class="mt-auto">
                                <a href="{{ url('/blog/' . $blog->slug) }}" class="btn btn-primary btn-sm">Read More
                                    →</a>
                            </div>
                        </div>

                    </div>
                </div>
            @endforeach
        </div>

        <div class="d-flex justify-content-center mt-4">
            {{ $blogs->links() }}
        </div>
    </div>

    <!-- Optional hover zoom effect -->
    <style>
        .hover-zoom {
            transition: transform 0.3s ease;
        }

        .hover-zoom:hover {
            transform: scale(1.05);
        }
    </style>
@endsection