@extends('layouts.main')
@push('title')
    <title>Blogs</title>
    @foreach ($blogs as $item)
        <meta property="og:title" content="{{ $item->meta_title }}">
        <meta property="og:site_name" content="webeasty">
        <meta property="og:description" content="{{ $item->og_desc }}">
        <meta property="og:image" content="{{ $item->og_image }}">
    @endforeach
@endpush

@section('main-section')

<style>
    .imgblogcover img {
    max-width: 100%;
    margin: auto;
    max-height: 100%;
    width:auto;
}
</style>

<!-- Page Header -->
<div class="w-full bg-gradient-to-r from-blue-600 to-indigo-700 py-12">
    <h1 class="text-center text-white text-3xl md:text-4xl font-bold">Blogs</h1>
    <ol class="flex justify-center mt-2 space-x-2 text-sm text-white">
        <li><a href="/" class="hover:text-yellow-300">Home</a></li>
        <li>/</li>
        <li class="font-semibold">Blogs</li>
    </ol>
</div>

<!-- Blog Index -->
<section class="py-12">
    <div class="container mx-auto px-4 flex flex-col lg:flex-row gap-8">

        <!-- Blog List -->
        <div class="w-full lg:w-3/4">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($blogs as $item)
                    <div class="bg-white rounded-2xl shadow-md border border-slate-200 overflow-hidden hover:shadow-lg transition">
                        <!-- Thumbnail -->
                        <div class="h-52 overflow-hidden flex items-center justify-center bg-gray-100 imgblogcover">
                            <img src="{{ $item->blog_thumbnail }}" 
                                 alt="{{ $item->banner_title }}"
                                 class="">
                        </div>

                        <!-- Content -->
                        <div class="p-4">
                            <a href="{{ url('/blog/'.$item->blog_url) }}">
                                <h3 class="text-lg font-semibold text-slate-800 hover:text-yellow-500 transition">
                                    {{ $item->blog_title }}
                                </h3>
                            </a>
                            <p class="text-sm text-slate-600 mt-2">
                                {{ Str::limit($item->blog_description, 150, '...') }}
                            </p>

                            <div class="mt-4 flex justify-between items-center text-sm text-slate-500">
                                <a href="{{ url('/blog/'.$item->blog_url) }}" 
                                   class="text-blue-600 font-medium hover:text-yellow-500 transition">
                                   Read More
                                </a>
                                <span class="flex items-center gap-1">
                                    <i class="fa fa-calendar text-yellow-500"></i>
                                    {{ Carbon\Carbon::parse($item->created_at)->format('M d, Y') }}
                                </span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="mt-8">
                {{ $blogs->links('pagination::tailwind') }}
            </div>
        </div>

        <!-- Sidebar -->
        <aside class="w-full lg:w-1/4 space-y-6">
            <!-- Recent Posts -->
            <div class="bg-white rounded-2xl shadow-md border border-slate-200">
                <div class="p-4 border-b border-slate-100">
                    <h4 class="font-semibold text-lg text-slate-800">Recent Posts</h4>
                </div>
                <div class="p-4">
                    <ul class="space-y-3">
                        @foreach($blogsLatest as $latest)
                            <li>
                                <a href="{{ url('/blog/'.$latest['blog_url']) }}" 
                                   class="text-slate-700 hover:text-yellow-500 transition">
                                    {{ $latest['blog_title'] }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <!-- Categories -->
            <div class="bg-white rounded-2xl shadow-md border border-slate-200">
                <div class="p-4 border-b border-slate-100">
                    <h4 class="font-semibold text-lg text-slate-800">Popular Categories</h4>
                </div>
                <div class="p-4">
                    <ul class="space-y-3">
                        <li><a href="{{ url('/blog') }}" class="text-slate-700 hover:text-yellow-500 transition">All</a></li>
                        @foreach($blog_categories as $cat)
                            <li>
                                <a href="{{ url('/blog/category/'.$cat->category_slug) }}" 
                                   class="text-slate-700 hover:text-yellow-500 transition">
                                    {{ $cat->category_title }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </aside>

    </div>
</section>
@endsection