@extends('admin.layouts.app')

@section('title','تعديل المستخدم')

@section('content')
<div class="max-w-6xl mx-auto p-6" dir="rtl">
  <div class="mb-6 flex items-center justify-between">
    <h1 class="text-2xl font-bold">تعديل المستخدم: <span class="text-gradient">{{ $user->name }}</span></h1>
    <a href="{{ route('admin.users.index') }}" class="px-4 py-2 rounded-xl bg-gray-200 hover:bg-gray-300 text-gray-800">العودة</a>
  </div>

  <form action="{{ route('admin.users.update',$user) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
    @csrf
    @method('PUT')

    <!-- القسم: معلومات أساسية -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6 grid md:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium mb-1">الاسم الكامل</label>
        <input type="text" name="name" value="{{ old('name',$user->name) }}" required class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        @error('name')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">البريد الإلكتروني</label>
        <input type="email" name="email" value="{{ old('email',$user->email) }}" required class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        @error('email')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">كلمة المرور الجديدة</label>
        <input type="password" name="password" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="اتركها فارغة لعدم التغيير">
        @error('password')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">تأكيد كلمة المرور</label>
        <input type="password" name="password_confirmation" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">الجنس</label>
        <select name="gender" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
          <option value="">اختر الجنس</option>
          <option value="male" @selected(old('gender',$user->gender)==='male')>ذكر</option>
          <option value="female" @selected(old('gender',$user->gender)==='female')>أنثى</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">تاريخ الميلاد</label>
        <input type="date" name="birth_date" value="{{ old('birth_date', optional($user->birth_date)->format('Y-m-d')) }}" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">الدولة</label>
        <select name="country_id" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
          <option value="">اختر الدولة</option>
          @foreach($countries as $country)
            <option value="{{ $country->id }}" @selected(old('country_id',$user->country_id)==$country->id)>{{ $country->name }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">المدينة</label>
        <input type="text" name="city_name" value="{{ old('city_name',$user->city_name) }}" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
      </div>
    </div>

    <!-- القسم: الصلاحيات والعضوية -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6 grid md:grid-cols-3 gap-4">
      <label class="inline-flex items-center gap-2">
        <input type="checkbox" name="is_admin" value="1" @checked(old('is_admin',$user->is_admin)) class="w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
        <span>صلاحيات مشرف</span>
      </label>
      <label class="inline-flex items-center gap-2">
        <input type="checkbox" name="is_paid" value="1" @checked(old('is_paid',$user->is_paid)) class="w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
        <span>عضوية مدفوعة</span>
      </label>
      <label class="inline-flex items-center gap-2">
        <input type="checkbox" name="email_verified" value="1" @checked(old('email_verified', (bool)$user->email_verified_at)) class="w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
        <span>البريد الإلكتروني موثق</span>
      </label>
      <div>
        <label class="block text-sm font-medium mb-1">مستوى العضوية</label>
        <select name="membership_level" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
          @php($level = old('membership_level',$user->membership_level))
          <option value="free" @selected($level==='free')>مجاني</option>
          <option value="basic" @selected($level==='basic')>Basic</option>
          <option value="gold" @selected($level==='gold')>Gold</option>
          <option value="premium" @selected($level==='premium')>Premium</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">انتهاء العضوية</label>
        <input type="date" name="membership_expires_at" value="{{ old('membership_expires_at', optional($user->membership_expires_at)->format('Y-m-d')) }}" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
      </div>
    </div>

    <!-- القسم: الصورة والنبذتين -->
    <div class="grid md:grid-cols-2 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6">
        <label class="block text-sm font-medium mb-2">الصورة الشخصية</label>
        <div class="flex items-center gap-4">
          <img class="w-20 h-20 rounded-full object-cover border" src="{{ $user->avatar ? asset('storage/'.$user->avatar) : asset('images/default-avatar.png') }}" alt="avatar">
          <input type="file" name="avatar" accept="image/*" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        </div>
        @error('avatar')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6">
        <label class="block text-sm font-medium mb-2">نبذة شخصية</label>
        <textarea name="about_me" rows="5" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-2xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">{{ old('about_me',$user->about_me) }}</textarea>
      </div>
      <div class="md:col-span-2 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6">
        <label class="block text-sm font-medium mb-2">نبذة عن الشريك المطلوب</label>
        <textarea name="about_partner" rows="4" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-2xl px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">{{ old('about_partner',$user->about_partner) }}</textarea>
      </div>
    </div>

    <!-- معلومات النظام -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6">
      <div class="grid md:grid-cols-3 gap-4 text-sm text-gray-600 dark:text-gray-300">
        <div><span class="font-semibold">تاريخ الإنشاء:</span> {{ optional($user->created_at)->format('Y-m-d H:i') }}</div>
        <div><span class="font-semibold">آخر تحديث:</span> {{ optional($user->updated_at)->format('Y-m-d H:i') }}</div>
        <div><span class="font-semibold">آخر دخول:</span> {{ $user->last_login_at ? $user->last_login_at->format('Y-m-d H:i') : '—' }}</div>
      </div>
    </div>

    <div class="flex items-center gap-3">
      <button type="submit" class="px-5 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold">حفظ التغييرات</button>
      <a href="{{ route('admin.users.show',$user) }}" class="px-5 py-2.5 rounded-xl bg-gray-200 hover:bg-gray-300 text-gray-800">عرض</a>
      <a href="{{ route('admin.users.index') }}" class="px-5 py-2.5 rounded-xl bg-gray-100 hover:bg-gray-200 text-gray-700">إلغاء</a>
    </div>
  </form>
</div>
@endsection