@extends('layouts.frontend')
@section('main-content')
    <section id="blog_category" class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <div class="mb-8 text-center">
                <h2 class="text-3xl font-bold text-utama-gelap mb-2">Blog Kategori {{$category->name_category}}</h2>
                <p class="text-gray-600">Temukan artikel terbaru dan informasi menarik di blog kami.</p>
            </div>
            <div class="py-12 sm:py-10 px-4 sm:px-6 lg:px-8">
                <div class="max-w-7xl mx-auto">
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
                        <aside class="lg:col-span-1">
                            <div class="sticky top-28 space-y-8">
                                
                                <div class="bg-white p-6 rounded-lg shadow-md">
                                    <h3 class="text-xl font-bold text-teks-utama mb-4">Cari Berita</h3>
                                    <div class="relative">
                                        <form  action="{{ route('seacrh_blog') }}" method="get">
                                            <input type="search" name="search" id="search" placeholder="Masukkan kata kunci..." class="w-full pl-4 pr-10 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-utama">
                                            <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-aksen">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                                            </button>
                                        </form>
                                    </div>
                                </div>

                                <div class="bg-white p-6 rounded-lg shadow-md">
                                    <h3 class="text-xl font-bold text-teks-utama mb-4">Kategori</h3>
                                    <ul class="space-y-3">
                                        @foreach ($category_list as $v) 
                                        <li><a href="{{url('/blog_category')}}/{{$v->slug}}" class="flex justify-between items-center text-gray-600 hover:text-aksen-gelap font-medium transition-colors"><span>{{$v->name_category}}</span></a></li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </aside>
                        <div class="lg:col-span-2">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                @foreach ($post_data as $vidx)
                                    <div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
                                        <div class="overflow-hidden">
                                            <img src="{{ asset('storage/uploads/blog_thumbnail/' . $vidx->thumbnail) }}" alt="{{ $vidx->image_title }}" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300">
                                        </div>
                                        <div class="p-6 flex flex-col flex-grow">
                                            <span class="text-sm text-gray-500">{{ \Carbon\Carbon::parse($vidx->date_post)->locale('id')->translatedFormat('d M Y') }}</span>
                                            <h3 class="mt-2 text-xl font-bold text-aksen-gelap">{{ $vidx->title }}</h3>
                                            <p class="mt-2 text-gray-600 flex-grow">{{ $vidx->meta_description }}</p>
                                            <a href="{{ url('/blog') }}/{{ $vidx->slug }}" class="mt-4 inline-block text-utama-gelap font-semibold hover:text-aksen-gelap">Baca Selengkapnya &rarr;</a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-8 flex justify-center">
                {{ $post_data->onEachSide(0)->links() }}
            </div>
        </div>
    </section>
@endsection