@extends('layouts.frontend')

@section('title', 'ব্লগ ও সংবাদ - ' . ($settings['site_name'] ?? 'সাংসদ পোর্টাল'))

@section('content')
    <!-- Hero Section -->
    <section class="bg-bd-green-500 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-3xl md:text-4xl font-bold mb-4">ব্লগ ও সংবাদ</h1>
                <p class="text-bd-green-100 text-lg">সর্বশেষ খবর ও আপডেট</p>
            </div>
        </div>
    </section>

    <!-- Filter Section -->
    <section class="py-6 bg-gray-50 border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-wrap gap-3 justify-center">
                <a href="{{ route('blog') }}"
                    class="px-4 py-2 rounded-full text-sm font-medium transition
                        {{ !request('category') ? 'bg-bd-green-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100 border' }}">
                    সব
                </a>
                @foreach (\App\Models\Post::CATEGORIES as $key => $label)
                    <a href="{{ route('blog', ['category' => $key]) }}"
                        class="px-4 py-2 rounded-full text-sm font-medium transition
                            {{ request('category') === $key ? 'bg-bd-green-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100 border' }}">
                        {{ $label }}
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Featured Posts -->
    @if ($featuredPosts->count() > 0 && !request('category'))
        <section class="py-12 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-8">
                    <i class="fas fa-star text-yellow-500 mr-2"></i>নির্বাচিত পোস্ট
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach ($featuredPosts as $post)
                        <article class="group bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition">
                            <a href="{{ route('blog.show', $post->slug) }}">
                                @if ($post->featured_image)
                                    <div class="aspect-video overflow-hidden">
                                        <img src="{{ Storage::url($post->featured_image) }}" alt="{{ $post->title }}"
                                            class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                                    </div>
                                @else
                                    <div
                                        class="aspect-video bg-gradient-to-br from-bd-green-100 to-bd-green-50 flex items-center justify-center">
                                        <i class="fas fa-newspaper text-5xl text-bd-green-300"></i>
                                    </div>
                                @endif
                            </a>
                            <div class="p-6">
                                <div class="flex items-center gap-2 mb-3">
                                    <span
                                        class="px-3 py-1 text-xs font-medium rounded-full bg-bd-green-100 text-bd-green-700">
                                        {{ $post->category_label }}
                                    </span>
                                    <span class="text-xs text-gray-500">
                                        {{ $post->published_at->format('d M, Y') }}
                                    </span>
                                </div>
                                <h3 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-bd-green-600 transition">
                                    <a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a>
                                </h3>
                                @if ($post->excerpt)
                                    <p class="text-gray-600 text-sm line-clamp-2">{{ $post->excerpt }}</p>
                                @endif
                                <div class="flex items-center gap-3 mt-4 pt-4 border-t">
                                    @if ($post->author->photo)
                                        <img src="{{ Storage::url($post->author->photo) }}"
                                            alt="{{ $post->author->name }}" class="w-8 h-8 rounded-full object-cover">
                                    @else
                                        <div class="w-8 h-8 rounded-full bg-bd-green-100 flex items-center justify-center">
                                            <i class="fas fa-user text-bd-green-600 text-sm"></i>
                                        </div>
                                    @endif
                                    <span class="text-sm text-gray-600">{{ $post->author->name }}</span>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- All Posts -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-8">
                @if (request('category'))
                    {{ \App\Models\Post::CATEGORIES[request('category')] ?? 'সব পোস্ট' }}
                @else
                    সর্বশেষ পোস্ট
                @endif
            </h2>

            @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="group bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
                            <a href="{{ route('blog.show', $post->slug) }}">
                                @if ($post->featured_image)
                                    <div class="aspect-video overflow-hidden">
                                        <img src="{{ Storage::url($post->featured_image) }}" alt="{{ $post->title }}"
                                            class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                                    </div>
                                @else
                                    <div
                                        class="aspect-video bg-gradient-to-br from-gray-100 to-gray-50 flex items-center justify-center">
                                        <i class="fas fa-newspaper text-4xl text-gray-300"></i>
                                    </div>
                                @endif
                            </a>
                            <div class="p-5">
                                <div class="flex items-center gap-2 mb-2">
                                    <span
                                        class="px-2 py-1 text-xs font-medium rounded-full bg-bd-green-100 text-bd-green-700">
                                        {{ $post->category_label }}
                                    </span>
                                    <span class="text-xs text-gray-500">
                                        {{ $post->published_at->diffForHumans() }}
                                    </span>
                                </div>
                                <h3
                                    class="text-lg font-bold text-gray-900 mb-2 line-clamp-2 group-hover:text-bd-green-600 transition">
                                    <a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a>
                                </h3>
                                @if ($post->excerpt)
                                    <p class="text-gray-600 text-sm line-clamp-2">{{ $post->excerpt }}</p>
                                @endif
                                <div class="flex items-center justify-between mt-4 pt-3 border-t">
                                    <div class="flex items-center gap-2">
                                        @if ($post->author->photo)
                                            <img src="{{ Storage::url($post->author->photo) }}"
                                                alt="{{ $post->author->name }}" class="w-6 h-6 rounded-full object-cover">
                                        @endif
                                        <span class="text-xs text-gray-600">{{ $post->author->name }}</span>
                                    </div>
                                    <div class="flex items-center gap-3 text-xs text-gray-500">
                                        <span><i class="fas fa-eye mr-1"></i>{{ $post->views_count }}</span>
                                        <span><i class="fas fa-book-reader mr-1"></i>{{ $post->reading_time }} মিনিট</span>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="mt-10">
                    {{ $posts->links() }}
                </div>
            @else
                <div class="text-center py-16">
                    <div class="w-24 h-24 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
                        <i class="fas fa-newspaper text-4xl text-gray-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">কোনো পোস্ট পাওয়া যায়নি</h3>
                    <p class="text-gray-600">এই বিভাগে এখনো কোনো পোস্ট প্রকাশিত হয়নি।</p>
                </div>
            @endif
        </div>
    </section>

    @push('styles')
        <style>
            .line-clamp-2 {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        </style>
    @endpush
@endsection