@extends("frontend.layouts.app")

@section("title")
    {{ app_name() }} | Blogs
@endsection

@section("content")
<section class="bg-gray-100 py-16">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h4 class="text-red-600 uppercase tracking-wide font-semibold">Insights & Tips</h4>
            <h2 class="text-4xl font-bold text-gray-800">Latest Blogs and Updates</h2>
        </div>

        @if($blogs->total() > 0)
        <div class="grid md:grid-cols-3 sm:grid-cols-2 gap-8">
            @foreach($blogs as $blog)
            <div class="bg-white rounded-lg shadow-lg overflow-hidden flex flex-col">
                <div class="h-56 overflow-hidden">
                    <img src="{{ asset($blog->featured_image) }}" alt="{{ $blog->title ?? 'Blog image' }}" class="w-full h-full object-cover">
                </div>
                <div class="p-6 flex flex-col flex-grow">
                    <h4 class="text-xl font-bold text-gray-800 mb-2">{{ $blog->title }}</h4>
                    <p class="text-gray-600 flex-grow">
                        @php
                        $content = strip_tags($blog->content);
                        $limitedContent = strlen($content) > 120 ? substr($content, 0, 120) . '...' : $content;
                        @endphp
                        {{ $limitedContent }}
                    </p>
                    <div class="mt-4">
                        <a href="{{ route('blog.details', $blog->id) }}" class="text-blue-500 hover:text-blue-700 font-medium">Read more...</a>
                        <p class="text-sm text-gray-400 mt-1">{{ date('F d, Y', strtotime($blog->published_at)) }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="mt-12 flex justify-center">
            {{ $blogs->links() }}
        </div>
        @else
        <div class="text-center text-gray-600">No Blog Found!</div>
        @endif
    </div>
</section>
@endsection