@extends('layouts.public')
@section('title', $query !== '' ? 'نتائج البحث عن: '.$query : 'البحث')

@section('content')
<h1 class="text-2xl font-bold mb-6">
    @if ($query !== '')
        نتائج البحث عن: "{{ $query }}"
    @else
        البحث
    @endif
</h1>

<form method="get" class="bg-white p-5 rounded-lg shadow mb-6 space-y-3">
    <div class="flex gap-3">
        <input type="text" name="q" value="{{ $query }}" placeholder="ابحث بالموقع..." class="flex-1 border rounded p-2">
        <button type="submit" class="bg-blue-600 text-white px-5 py-2 rounded">بحث</button>
    </div>

    <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="deep" value="1" onchange="this.form.submit()" @checked($isDeep)>
        بحث عميق (يشمل نص المقال والوصف والكلمة المفتاحية، مع فلاتر إضافية)
    </label>

    @if ($isDeep)
    <div class="grid grid-cols-3 gap-3 pt-3 border-t">
        <div>
            <label class="block text-xs text-gray-500 mb-1">القسم</label>
            <select name="category_id" onchange="this.form.submit()" class="w-full border rounded p-2 text-sm">
                <option value="">كل الأقسام</option>
                @foreach ($categories as $cat)
                    <option value="{{ $cat->id }}" @selected(request('category_id') == $cat->id)>{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs text-gray-500 mb-1">من تاريخ</label>
            <input type="date" name="from" value="{{ request('from') }}" onchange="this.form.submit()" class="w-full border rounded p-2 text-sm">
        </div>
        <div>
            <label class="block text-xs text-gray-500 mb-1">إلى تاريخ</label>
            <input type="date" name="to" value="{{ request('to') }}" onchange="this.form.submit()" class="w-full border rounded p-2 text-sm">
        </div>
    </div>
    @endif
</form>

@if ($query === '' && !request()->hasAny(['category_id', 'from', 'to']))
    <p class="text-gray-500">اكتب كلمة بالأعلى للبحث بمقالات الموقع.</p>
@else
    <div class="grid grid-cols-3 gap-6">
        @forelse ($results as $article)
        <a href="/article/{{ $article->slug }}" class="block group">
            @if ($article->featured_image)
                <img src="{{ $article->thumb_url }}" alt="{{ $article->title }}" class="w-full h-40 object-cover rounded mb-2">
            @endif
            <h3 class="font-semibold group-hover:text-blue-600">{{ $article->title }}</h3>
            <p class="text-xs text-gray-500 mt-1">{{ $article->category->name ?? '' }} — {{ $article->published_at?->diffForHumans() }}</p>
        </a>
        @empty
        <p class="text-gray-500 col-span-3">ما لقينا أي نتيجة تطابق بحثك.</p>
        @endforelse
    </div>

    <div class="mt-8">{{ $results->links() }}</div>
@endif
@endsection