@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-rose-50 to-fuchsia-50 dark:from-rose-900/10 dark:to-fuchsia-900/10 py-8">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-8">
            <h1 class="text-3xl sm:text-4xl font-extrabold text-rose-600 dark:text-rose-400">الأشخاص الذين لديهم انجذاب إليّ</h1>
            <p class="text-slate-600 dark:text-slate-300 mt-2">اكتشف من بدأ انجذابًا تجاهك</p>
        </div>

        <form method="GET" class="mb-6 bg-white dark:bg-slate-800 rounded-2xl shadow p-4 flex flex-wrap gap-3 items-end">
            <div>
                <label class="block text-sm mb-1">الترتيب</label>
                <select name="sort" class="form-select">
                    <option value="latest" {{ ($sort ?? 'latest')==='latest' ? 'selected' : '' }}>الأحدث</option>
                    <option value="oldest" {{ ($sort ?? '')==='oldest' ? 'selected' : '' }}>الأقدم</option>
                    <option value="name" {{ ($sort ?? '')==='name' ? 'selected' : '' }}>الاسم</option>
                    <option value="country" {{ ($sort ?? '')==='country' ? 'selected' : '' }}>الدولة</option>
                </select>
            </div>
            <label class="inline-flex items-center gap-2">
                <input type="checkbox" name="with_photo" value="1" {{ !empty($withPhoto) ? 'checked' : '' }}>
                <span>بصورة</span>
            </label>
            <label class="inline-flex items-center gap-2">
                <input type="checkbox" name="verified" value="1" {{ !empty($verified) ? 'checked' : '' }}>
                <span>موثّق</span>
            </label>
            <div>
                <label class="block text-sm mb-1">الدولة</label>
                <select name="country_id" class="form-select">
                    <option value="">الكل</option>
                    @foreach(($countries ?? collect()) as $c)
                        <option value="{{ $c->id }}" {{ (int)($countryId ?? 0) === (int)$c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>
            <button class="btn btn-primary ms-auto">تطبيق</button>
        </form>

        @if(($users ?? collect())->isEmpty())
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow p-8 text-center">
                <p class="text-slate-600 dark:text-slate-300">لا يوجد انجذاب بعد. ابدأ بالتفاعل لزيادة فرصك ✨</p>
            </div>
        @else
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($users as $user)
                    @include('frontend.components.member-card', ['user' => $user])
                @endforeach
            </div>
            @if(method_exists($users, 'links'))
                <div class="mt-6">{{ $users->links() }}</div>
            @endif
        @endif
    </div>
</div>
@endsection