@extends('layouts.app')

@section('content')
<main class="bg-white">
    <div class="container mx-auto px-4 py-8">
        <div class="border-r-4 border-primary pr-4 mb-8">
            <h1 class="text-2xl font-black text-gray-900">نتائج البحث عن: <span class="text-primary">"{{ $q }}"</span></h1>
            <p class="text-sm text-gray-400 mt-1">{{ $posts->total() }} نتيجة</p>
        </div>

        <div class="flex flex-col lg:flex-row gap-8">
            <div class="w-full lg:w-8/12">
                @if($posts->count() > 0)
                <div class="space-y-4 mb-8">
                    @foreach($posts as $post)
                    <a href="{{ route('post.show', $post->slug) }}" class="flex gap-4 bg-white rounded-xl border border-gray-100 hover:shadow-md transition p-4 group">
                        @if($post->featured_image)
                        <img src="{{ $post->featured_image }}" class="w-28 h-20 object-cover rounded-lg flex-shrink-0" alt="{{ $post->title }}">
                        @else
                        <div class="w-28 h-20 bg-gray-100 rounded-lg flex-shrink-0 flex items-center justify-center"><i class="fa-solid fa-image text-gray-300"></i></div>
                        @endif
                        <div class="flex-1 min-w-0">
                            @if($post->category)
                            <span class="text-xs bg-primary text-white px-2 py-0.5 rounded font-bold mb-1 inline-block">{{ $post->category->name }}</span>
                            @endif
                            <h2 class="font-bold text-gray-800 line-clamp-2 group-hover:text-primary transition mb-1">{{ $post->title }}</h2>
                            <p class="text-sm text-gray-400 line-clamp-1">{{ $post->subtitle }}</p>
                            <span class="text-xs text-gray-300 mt-1 block font-semibold">{{ \Carbon\Carbon::parse($post->created_at)->locale('ar')->diffForHumans() }}</span>
                        </div>
                    </a>
                    @endforeach
                </div>
                {{ $posts->appends(['q' => $q])->links() }}
                @else
                <div class="text-center py-20 text-gray-400 bg-gray-50 rounded-xl border border-dashed border-gray-200">
                    <i class="fa-solid fa-search text-5xl mb-4 text-gray-300"></i>
                    <p class="font-bold text-lg">لم نجد نتائج لـ "{{ $q }}"</p>
                    <p class="text-sm mt-2">جرّب كلمات مختلفة</p>
                </div>
                @endif
            </div>
            <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