@extends('layouts.app')

@section('content')
<main class="bg-white">
    <div class="container mx-auto px-4 py-8">

        <!-- Category Header -->
        <div class="border-r-4 border-primary pr-4 mb-8">
            <div class="text-xs text-gray-400 mb-1 font-semibold flex items-center gap-1">
                <a href="/" class="hover:text-primary transition">الرئيسية</a>
                <i class="fa-solid fa-chevron-left text-[10px]"></i>
                <span>{{ $category->name }}</span>
            </div>
            <h1 class="text-3xl font-black text-gray-900">{{ $category->name }}</h1>
            <p class="text-sm text-gray-400 mt-1">{{ $posts->total() }} مقال في هذا القسم</p>
        </div>

        <div class="flex flex-col lg:flex-row gap-8">

            <!-- Posts Grid -->
            <div class="w-full lg:w-8/12">
                @if($posts->count() > 0)
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
                    @foreach($posts as $post)
                    <article class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 group">
                        <a href="{{ route('post.show', $post->slug) }}" class="block relative overflow-hidden h-48">
                            @if($post->featured_image)
                                <img src="{{ $post->featured_image }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="{{ $post->title }}">
                            @else
                                <div class="w-full h-full bg-gray-100 flex items-center justify-center"><i class="fa-solid fa-image text-gray-300 text-3xl"></i></div>
                            @endif
                            <span class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded">{{ $post->category->name ?? '' }}</span>
                        </a>
                        <div class="p-4">
                            <h2 class="font-bold text-gray-800 mb-2 line-clamp-2 hover:text-primary transition leading-snug">
                                <a href="{{ route('post.show', $post->slug) }}">{{ $post->title }}</a>
                            </h2>
                            <div class="flex items-center justify-between text-xs text-gray-400 font-semibold mt-3">
                                <span><i class="fa-regular fa-calendar ml-1"></i>{{ \Carbon\Carbon::parse($post->created_at)->locale('ar')->diffForHumans() }}</span>
                                <span class="text-primary"><i class="fa-solid fa-eye ml-1"></i>{{ number_format($post->views_count) }}</span>
                            </div>
                        </div>
                    </article>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="flex justify-center">
                    {{ $posts->links() }}
                </div>
                @else
                <div class="text-center py-20 text-gray-400 bg-gray-50 rounded-xl border border-dashed border-gray-200">
                    <i class="fa-regular fa-folder-open text-5xl mb-4 text-gray-300"></i>
                    <p class="font-bold text-lg">لا توجد مقالات في هذا القسم حالياً</p>
                </div>
                @endif
            </div>

            <!-- Sidebar -->
            <aside class="w-full lg:w-4/12 flex flex-col gap-6">
                @include('partials.sidebar', ['settings' => app(\App\Settings\SiteSettings::class), 'topPosts' => $topPosts, 'categories' => $categories])
            </aside>

        </div>
    </div>
</main>
@endsection