@php($profileOptions = $profileOptions ?? config('profile_options'))
<select name="gender" class="border-2 border-gray-200 dark:border-gray-600 rounded-xl p-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
    <option value="">الجنس</option>
    @foreach(($profileOptions['genders'] ?? []) as $k=>$v)
        <option value="{{ $k }}" @selected(request('gender')===$k)>{{ $v }}</option>
    @endforeach
</select>

<div class="col-span-2 flex flex-col gap-2">
    <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">العمر</label>
    <div class="flex items-center gap-2 range-wrapper" data-colors="emerald,purple">
        <input type="range" min="18" max="80" step="1" id="age_min_range" class="w-full dual-range">
        <input type="range" min="18" max="80" step="1" id="age_max_range" class="w-full dual-range">
    </div>
    <div class="text-sm text-purple-600 dark:text-purple-400 font-semibold"><span id="age_range_display"></span></div>
    <input type="hidden" name="min_age" id="min_age_hidden" value="{{ request('min_age') }}">
    <input type="hidden" name="max_age" id="max_age_hidden" value="{{ request('max_age') }}">
</div>

<div class="col-span-2 flex flex-col gap-2">
    <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">الطول (سم)</label>
    <div class="flex items-center gap-2 range-wrapper" data-colors="amber,purple">
        <input type="range" min="120" max="220" step="1" id="height_min_range" class="w-full dual-range">
        <input type="range" min="120" max="220" step="1" id="height_max_range" class="w-full dual-range">
    </div>
    <div class="text-sm text-purple-600 dark:text-purple-400 font-semibold"><span id="height_range_display"></span></div>
    <input type="hidden" name="min_height" id="min_height_hidden" value="{{ request('min_height') }}">
    <input type="hidden" name="max_height" id="max_height_hidden" value="{{ request('max_height') }}">
</div>

<div class="col-span-2 flex flex-col gap-2">
    <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">الوزن (كغ)</label>
    <div class="flex items-center gap-2 range-wrapper" data-colors="rose,purple">
        <input type="range" min="35" max="160" step="1" id="weight_min_range" class="w-full dual-range">
        <input type="range" min="35" max="160" step="1" id="weight_max_range" class="w-full dual-range">
    </div>
    <div class="text-sm text-purple-600 dark:text-purple-400 font-semibold"><span id="weight_range_display"></span></div>
    <input type="hidden" name="min_weight" id="min_weight_hidden" value="{{ request('min_weight') }}">
    <input type="hidden" name="max_weight" id="max_weight_hidden" value="{{ request('max_weight') }}">
</div>

<select name="education_level" class="border-2 border-gray-200 dark:border-gray-600 rounded-xl p-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
    <option value="">التعليم</option>
    @foreach(($profileOptions['education_levels'] ?? []) as $k=>$v)
        <option value="{{ $k }}" @selected(request('education_level')===$k)>{{ $v }}</option>
    @endforeach
</select>

<select name="marriage_type" class="border-2 border-gray-200 dark:border-gray-600 rounded-xl p-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
    <option value="">نوع الزواج</option>
    @foreach(($profileOptions['marriage_types'] ?? []) as $k=>$v)
        <option value="{{ $k }}" @selected(request('marriage_type')===$k)>{{ $v }}</option>
    @endforeach
</select>

<select name="religion" class="border-2 border-gray-200 dark:border-gray-600 rounded-xl p-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
    <option value="">الديانة</option>
    @foreach(($profileOptions['religions'] ?? []) as $k=>$v)
        <option value="{{ $k }}" @selected(request('religion')===$k)>{{ $v }}</option>
    @endforeach
</select>

<select name="country_id" id="country" class="border-2 border-gray-200 dark:border-gray-600 rounded-xl p-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
    <option value="">الدولة</option>
    @foreach($countries as $c)
        <option value="{{ $c->id }}" @selected(request('country_id')==$c->id)>{{ $c->name }}</option>
    @endforeach
</select>

<select name="city_id" id="city" class="border-2 border-gray-200 dark:border-gray-600 rounded-xl p-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
    <option value="">المدينة</option>
    @if(request('country_id') && isset($cities))
        @foreach($cities as $city)
            <option value="{{ $city->id }}" @selected(request('city_id')==$city->id)>{{ $city->name }}</option>
        @endforeach
    @endif
</select>

<div class="flex items-center gap-4 col-span-12 pt-2">
    <label class="inline-flex items-center gap-2 text-xs font-semibold"><input type="checkbox" name="with_photo" value="1" @checked(request('with_photo'))> مع صورة</label>
    <label class="inline-flex items-center gap-2 text-xs font-semibold"><input type="checkbox" name="online_recent" value="1" @checked(request('online_recent'))> متصل حديثاً</label>
    <label class="inline-flex items-center gap-2 text-xs font-semibold"><input type="checkbox" name="verified" value="1" @checked(request('verified'))> موثق</label>
    <label class="inline-flex items-center gap-2 text-xs font-semibold"><input type="checkbox" name="paid_only" value="1" @checked(request('paid_only'))> عضوية مدفوعة</label>
</div>

<div class="col-span-12 text-center pt-4">
    <button type="submit" class="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-2xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
        🔍 ابدأ البحث
    </button>
</div>