@extends('layouts.front')
@section('title', 'نتائج البحث')

@section('breadcrumbs')
<nav class="text-sm text-slate-500 dark:text-slate-400 mb-6 flex flex-wrap items-center gap-1">
  <a href="/" class="hover:text-primary">الرئيسية</a>
  <span>/</span>
  <span class="text-slate-700 dark:text-slate-200">بحث</span>
</nav>
@endsection

@section('content')
<section class="max-w-6xl mx-auto">
  {{-- 🔍 عنوان الصفحة --}}
  <h1 class="text-2xl font-extrabold text-slate-800 dark:text-white mb-8">
    نتائج البحث عن: <span class="text-primary">"{{ $q }}"</span>
  </h1>

  {{-- ✅ في حال وجود نتائج --}}
  @if($posts->count())
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
      @foreach($posts as $p)
        @include('front.partials.post-card', ['post' => $p])
      @endforeach
    </div>

    {{-- 🔁 ترقيم الصفحات --}}
    <div class="mt-10">
      {{ $posts->links() }}
    </div>

  {{-- ⚠️ في حال عدم وجود نتائج --}}
  @else
    <div class="bg-yellow-50 dark:bg-slate-800/50 border border-yellow-200 dark:border-slate-700 text-yellow-800 dark:text-yellow-300 rounded-2xl p-6 text-center shadow-sm">
      <i class="fas fa-search text-3xl mb-3 text-yellow-500"></i>
      <p class="font-semibold text-lg">لا توجد نتائج مطابقة لعبارة البحث.</p>
      <p class="text-sm text-gray-500 mt-2">جرّب كلمات مفتاحية مختلفة أو تأكد من صحة الإملاء.</p>
    </div>
  @endif
</section>
@endsection