@extends('layouts.frontend')
@section('main-content')
    <section class="bg-gray-100 min-h-screen">
        <div class="py-12 sm:py-16 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 class="bg-white p-6 rounded-lg shadow-md">
                                <h3 class="text-xl font-bold text-teks-utama mb-4">Berita Lainnya</h3>
                                <ul class="space-y-4">
                                    @foreach ($post_list as $v)
                                    <li class="flex items-start space-x-4 group">
                                        <img src="{{ asset('storage/uploads/blog_thumbnail/'.$v->thumbnail) }}" alt="{{$v->image_title}}" class="w-20 h-20 rounded-md object-cover flex-shrink-0">
                                        <div>
                                            <a href="{{url('/blog')}}/{{$v->slug}}" class="font-bold text-gray-800 group-hover:text-aksen-gelap leading-snug">{{$v->title}}</a>
                                            <p class="text-sm text-gray-500 mt-1">{{ \Carbon\Carbon::parse($v->date_post)->locale('id')->translatedFormat('d M Y') }}</p>
                                        </div>
                                    </li>
                                    @endforeach

                                </ul>
                            </div>
                        </div>
                    </aside>
                    <div class="lg:col-span-2 bg-white p-8 rounded-lg shadow-lg">
                        <div class="text-left mb-8">
                            <a href="#" class="text-sm font-semibold text-aksen-gelap hover:text-aksen-gelap uppercase tracking-widest">{{$post->name_category}}</a>
                            <h1 class="mt-2 text-3xl md:text-5xl font-extrabold text-teks-utama tracking-tight">
                                {{$post->title}}
                            </h1>
                            <div class="mt-6 flex items-center space-x-4 text-gray-500">
                                <div class="flex items-center">
                                    <img class="w-10 h-10 rounded-full mr-3" src="https://placehold.co/100x100/166534/FFFFFF?text=A" alt="Avatar Penulis">
                                    <span class="font-semibold">{{$post->fullname}}</span>
                                </div>
                                <span>&bull;</span>
                                <span>{{ \Carbon\Carbon::parse($post->date_post)->locale('id')->translatedFormat('l, d F Y') }} | {{date("H:i", strtotime($post->time_post))}}</span>
                            </div>
                        </div>

                        <div class="mb-8 rounded-lg shadow-xl overflow-hidden">
                            <img src="{{ asset('storage/uploads/blog_cover/'.$post->cover) }}" alt="{{$post->image_title}}" loading="lazy" class="w-full h-auto object-cover">
                        </div>

                        <article class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                             {!! $post->fill_content !!}
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection