@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto bg-white p-8 rounded-xl shadow-lg my-10 border border-brand-light-gray" dir="rtl">
    <h1 class="text-2xl font-bold text-blue-900 mb-6 text-center">البحث الأساسي</h1>

    <form action="{{ route('search.index') }}" method="GET" class="space-y-4">
        {{-- ✅ إزالة @csrf لأنه غير ضروري في طلبات GET --}}

        <!-- الجنس -->
        <div>
            <label for="gender" class="block text-sm font-medium">الجنس</label>
            <select name="gender" id="gender"
                class="form-select w-full border-brand-light-gray rounded-md p-2">
                <option value="">اختر الجنس</option>
                <option value="male" {{ request('gender') == 'male' ? 'selected' : '' }}>ذكر</option>
                <option value="female" {{ request('gender') == 'female' ? 'selected' : '' }}>أنثى</option>
            </select>
        </div>

        <!-- الدولة -->
        <div>
            <label for="country_id" class="block text-sm font-medium">الدولة</label>
            <select id="country_id" name="country_id"
                class="form-select w-full border-brand-light-gray rounded-md p-2">
                <option value="">اختر الدولة</option>
                @foreach($countries as $country)
                    <option value="{{ $country->id }}"
                        {{ request('country_id') == $country->id ? 'selected' : '' }}>
                        {{ $country->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- المدينة -->
        <div>
            <label for="city_id" class="block text-sm font-medium">المدينة</label>
            <select id="city_id" name="city_id"
                class="form-select w-full border-brand-light-gray rounded-md p-2"
                {{ request('country_id') ? '' : 'disabled' }}>
                <option value="">اختر المدينة</option>
                @if(!empty($cities))
                    @foreach($cities as $city)
                        <option value="{{ $city->id }}"
                            {{ request('city_id') == $city->id ? 'selected' : '' }}>
                            {{ $city->name }}
                        </option>
                    @endforeach
                @endif
            </select>
        </div>

        <div class="flex justify-center">
            <button type="submit"
                class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition duration-300">
                بحث
            </button>
        </div>
    </form>
</div>
{{-- ✅ تم نقل كود JavaScript إلى ملف app.js ليكون مركزيًا --}}
@endsection