@extends('layouts.admin')

@section('title', 'المستخدمون')
@section('heading', 'المستخدمون')
@section('subheading', 'عرض، بحث، وفلترة حسب الحالة')

@section('content')
    <form method="get" action="{{ route('admin.users.index') }}" class="mb-6 grid gap-4 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm sm:grid-cols-2 lg:grid-cols-4">
        <div class="sm:col-span-2">
            <label for="q" class="mb-1 block text-sm font-medium text-zinc-700">بحث</label>
            <input id="q" name="q" type="search" value="{{ $q }}"
                   placeholder="الاسم، البريد، الهاتف، اسم المستخدم…"
                   class="w-full rounded-xl border border-zinc-300 bg-zinc-50 px-4 py-2.5 text-sm focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20">
        </div>
        <div>
            <label for="status" class="mb-1 block text-sm font-medium text-zinc-700">الحالة</label>
            <select id="status" name="status"
                    class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-2.5 text-sm focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20">
                <option value="">الكل</option>
                <option value="active" @selected($status === 'active')>نشط</option>
                <option value="blocked" @selected($status === 'blocked')>موقوف</option>
            </select>
        </div>
        <div class="flex items-end gap-2">
            <button type="submit" class="w-full rounded-xl bg-madar-950 px-4 py-2.5 text-sm font-bold text-white hover:bg-madar-900">تطبيق</button>
            <a href="{{ route('admin.users.index') }}" class="rounded-xl border border-zinc-300 px-4 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50">مسح</a>
        </div>
    </form>

    <div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-zinc-200 text-sm">
                <thead class="bg-zinc-50 text-right text-xs font-semibold uppercase tracking-wide text-zinc-500">
                    <tr>
                        <th class="px-4 py-3">#</th>
                        <th class="px-4 py-3">الاسم الكامل</th>
                        <th class="px-4 py-3">اسم المستخدم</th>
                        <th class="px-4 py-3">البريد</th>
                        <th class="px-4 py-3">الهاتف</th>
                        <th class="px-4 py-3">الرصيد</th>
                        <th class="px-4 py-3">النقاط</th>
                        <th class="px-4 py-3">الحالة</th>
                        <th class="px-4 py-3">التسجيل</th>
                        <th class="px-4 py-3 text-center">إجراءات</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-100">
                    @forelse ($users as $user)
                        <tr class="hover:bg-zinc-50/80">
                            <td class="whitespace-nowrap px-4 py-3 text-zinc-500">{{ $user->id }}</td>
                            <td class="max-w-[10rem] truncate px-4 py-3 font-medium text-zinc-900">{{ $user->full_name }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-zinc-700">{{ $user->username }}</td>
                            <td class="max-w-[9rem] truncate px-4 py-3 text-zinc-600">{{ $user->email ?? '—' }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-zinc-600">{{ $user->phone ?? '—' }}</td>
                            <td class="whitespace-nowrap px-4 py-3 font-mono text-zinc-800">{{ number_format((float) $user->wallet_balance, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3">{{ number_format($user->reward_points) }}</td>
                            <td class="px-4 py-3">
                                <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $user->status === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800' }}">
                                    {{ $user->status === 'active' ? 'نشط' : 'موقوف' }}
                                </span>
                            </td>
                            <td class="whitespace-nowrap px-4 py-3 text-zinc-500">{{ $user->created_at?->format('Y-m-d H:i') }}</td>
                            <td class="px-4 py-3">
                                <div class="flex flex-wrap items-center justify-center gap-2">
                                    <a href="{{ route('admin.users.show', $user) }}" class="inline-flex rounded-lg bg-teal-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-teal-700">تفاصيل</a>
                                    @if ($user->status === 'active' && $user->id !== auth()->id())
                                        <form method="post" action="{{ route('admin.users.status', $user) }}" class="inline" onsubmit="return confirm('تأكيد حظر هذا المستخدم؟');">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="status" value="blocked">
                                            <button type="submit" class="inline-flex rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-bold text-red-800 hover:bg-red-100">حظر</button>
                                        </form>
                                    @elseif ($user->status === 'active' && $user->id === auth()->id())
                                        <span class="text-xs text-zinc-400">—</span>
                                    @else
                                        <form method="post" action="{{ route('admin.users.status', $user) }}" class="inline" onsubmit="return confirm('تأكيد تفعيل هذا المستخدم؟');">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="status" value="active">
                                            <button type="submit" class="inline-flex rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-1.5 text-xs font-bold text-emerald-800 hover:bg-emerald-100">تفعيل</button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="px-4 py-12 text-center text-zinc-500">لا توجد نتائج.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-zinc-100 px-4 py-3">
            {{ $users->links() }}
        </div>
    </div>
@endsection