@extends('layouts.frontend')

@section('title', 'ব্লগ - ' . \App\Models\Setting::get('site_name', config('app.name')))

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Main Content -->
            <div class="flex-1">
                <h1 class="text-3xl font-bold text-gray-900 mb-8 flex items-center gap-2">
                    <span class="text-4xl">📝</span> ব্লগ
                </h1>

                @if($posts->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($posts as $post)
                    <article class="bg-white rounded-2xl shadow-sm overflow-hidden group">
                        <a href="{{ route('blog.show', $post->slug) }}" class="block">
                            @if($post->image)
                            <img src="{{ asset('storage/' . $post->image) }}" alt="{{ $post->title }}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
                            @else
                            <div class="w-full h-48 bg-gray-100 flex items-center justify-center">
                                <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
                            </div>
                            @endif
                        </a>
                        <div class="p-5">
                            @if($post->category)
                            <a href="{{ route('blog.index', ['category' => $post->category->slug]) }}" class="text-xs font-medium text-pink-600 hover:text-pink-700 uppercase tracking-wide">{{ $post->category->name }}</a>
                            @endif
                            <a href="{{ route('blog.show', $post->slug) }}" class="block mt-2">
                                <h2 class="text-lg font-bold text-gray-900 group-hover:text-pink-600 line-clamp-2 transition">{{ $post->title }}</h2>
                            </a>
                            <p class="text-gray-600 text-sm mt-2 line-clamp-3">{{ Str::limit(strip_tags($post->content), 120) }}</p>
                            <div class="flex items-center mt-4 text-sm text-gray-500">
                                <span>{{ $post->published_at?->format('d M, Y') ?? $post->created_at->format('d M, Y') }}</span>
                            </div>
                        </div>
                    </article>
                    @endforeach
                </div>

                <div class="mt-8">
                    {{ $posts->links() }}
                </div>
                @else
                <div class="text-center py-16 bg-white rounded-2xl">
                    <div class="w-20 h-20 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-10 h-10 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
                    </div>
                    <h3 class="text-lg font-bold text-gray-900 mb-2">এখনো কোনো পোস্ট নেই</h3>
                    <p class="text-gray-500">নতুন কন্টেন্টের জন্য পরে আবার দেখুন।</p>
                </div>
                @endif
            </div>

            <!-- Sidebar -->
            <aside class="lg:w-80 flex-shrink-0">
                <!-- Search -->
                <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
                    <h3 class="font-bold text-gray-900 mb-4">সার্চ করুন</h3>
                    <form action="{{ route('blog.index') }}" method="GET">
                        <div class="relative">
                            <input type="text" name="search" value="{{ request('search') }}" placeholder="পোস্ট খুঁজুন..." class="w-full pl-4 pr-10 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-pink-500 focus:border-pink-500">
                            <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-pink-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                        </div>
                    </form>
                </div>

                <!-- Categories -->
                @if($categories->count() > 0)
                <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
                    <h3 class="font-bold text-gray-900 mb-4">ক্যাটাগরি</h3>
                    <ul class="space-y-2">
                        @foreach($categories as $category)
                        <li>
                            <a href="{{ route('blog.index', ['category' => $category->slug]) }}" class="flex items-center justify-between text-gray-600 hover:text-pink-600 py-1 {{ request('category') == $category->slug ? 'text-pink-600 font-medium' : '' }}">
                                <span>{{ $category->name }}</span>
                                <span class="text-sm bg-gray-100 px-2 py-0.5 rounded-full">{{ $category->blogs_count }}</span>
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <!-- Recent Posts -->
                @if($recentPosts->count() > 0)
                <div class="bg-white rounded-2xl shadow-sm p-6">
                    <h3 class="font-bold text-gray-900 mb-4">সাম্প্রতিক পোস্ট</h3>
                    <div class="space-y-4">
                        @foreach($recentPosts as $recent)
                        <a href="{{ route('blog.show', $recent->slug) }}" class="flex gap-3 group">
                            @if($recent->image)
                            <img src="{{ asset('storage/' . $recent->image) }}" alt="{{ $recent->title }}" class="w-16 h-16 object-cover rounded-lg flex-shrink-0">
                            @endif
                            <div>
                                <h4 class="text-sm font-medium text-gray-900 group-hover:text-pink-600 line-clamp-2 transition">{{ $recent->title }}</h4>
                                <p class="text-xs text-gray-500 mt-1">{{ $recent->published_at?->format('d M, Y') }}</p>
                            </div>
                        </a>
                        @endforeach
                    </div>
                </div>
                @endif
            </aside>
        </div>
    </div>
</div>
@endsection