@extends('layouts.superadmin')

@section('title','غرفة الصقر — تعديل سريع للأعضاء')
@section('page-title','غرفة الصقر — تعديل سريع للأعضاء')

@section('content')
@php
  use Illuminate\Contracts\Pagination\Paginator as PaginatorContract;
  $p = ($users instanceof PaginatorContract) ? $users : null;
  $collection = $p ? $p->getCollection() : collect($users);
  $groups = $collection->groupBy(fn($u)=>$u->membership_status ?? '');
  $labels = [
    'moderator'=>['t'=>'المشرفون','badge'=>'bg-blue-100 text-blue-700'],
    'official'=>['t'=>'الأعضاء الرسميون','badge'=>'bg-emerald-100 text-emerald-700'],
    'beta'=>['t'=>'أعضاء بيتا','badge'=>'bg-amber-100 text-amber-700'],
    'advisor'=>['t'=>'المستشارون','badge'=>'bg-violet-100 text-violet-700'],
    'super-admin'=>['t'=>'الإدارة العليا','badge'=>'bg-rose-100 text-rose-700'],
    ''=>['t'=>'غير مُصنّف','badge'=>'bg-gray-100 text-gray-700'],
  ];
@endphp

<div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-5 shadow-sm">
  <form method="get" class="grid grid-cols-1 md:grid-cols-6 gap-3">
    <div class="md:col-span-2">
      <input name="search" value="{{ request('search') }}" placeholder="بحث (اسم/يوزر/إيميل)"
             class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
    </div>
    <div>
      <select name="membership_status" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
        <option value="">العضوية</option>
        @foreach(['official','beta','moderator','advisor','super-admin'] as $m)
          <option value="{{ $m }}" @selected(request('membership_status')===$m)>{{ $m }}</option>
        @endforeach
      </select>
    </div>
    <div>
      <select name="account_status" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
        <option value="">الحالة</option>
        @foreach(['active','suspended','banned'] as $s)
          <option value="{{ $s }}" @selected(request('account_status')===$s)>{{ $s }}</option>
        @endforeach
      </select>
    </div>
    <div>
      <select name="team_status" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
        <option value="">التواجد</option>
        <option value="present" @selected(request('team_status')==='present')>داخل الفريق</option>
        <option value="left" @selected(request('team_status')==='left')>مغادر</option>
      </select>
    </div>
    <button class="bg-primary-600 hover:bg-primary-700 text-white rounded-lg px-4">تصفية</button>
  </form>
</div>

<div class="mt-6 space-y-10">
@forelse($groups as $k=>$members)
  @php $lab=$labels[$k] ?? $labels['']; @endphp
  <div class="flex items-center gap-3">
    <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $lab['badge'] }}">{{ $lab['t'] }}</span>
    <span class="text-sm text-gray-500 dark:text-gray-400">{{ $members->count() }} عضو</span>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
  @foreach($members as $u)
    @php
      $avatar = $u->avatar_url ?? (!empty($u->avatar) ? asset('storage/avatars/'.$u->avatar) : null);
    @endphp
    <div class="group bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden shadow-sm">
      <div class="flex items-center gap-3 p-4 border-b border-gray-200 dark:border-gray-700">
        @if($avatar)
          <img src="{{ $avatar }}" class="w-12 h-12 rounded-xl object-cover">
        @else
          <div class="w-12 h-12 grid place-items-center rounded-xl bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 font-bold">
            {{ mb_substr($u->name,0,1) }}
          </div>
        @endif
        <div class="min-w-0">
          <div class="font-bold text-gray-900 dark:text-white truncate">{{ $u->name }}</div>
          <div class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $u->username }} • {{ $u->email }}</div>
        </div>
        @if(($u->account_status ?? 'active')!=='active')
          <span class="ml-auto text-xs px-2 py-0.5 rounded-full {{ $u->account_status==='suspended'?'bg-amber-100 text-amber-700':'bg-rose-100 text-rose-700' }}">
            {{ $u->account_status==='suspended'?'معلّق':'محظور' }}
          </span>
        @endif
      </div>

      <div class="p-4 space-y-3">
        {{-- الدور --}}
        <div class="grid grid-cols-3 gap-2 items-center">
          <label class="text-xs text-gray-500 dark:text-gray-400">الدور</label>
          <select class="col-span-2 field" data-field="role" data-id="{{ $u->id }}">
            @foreach($roles as $r)
              <option value="{{ $r }}" @selected($u->roles->pluck('name')->contains($r))>{{ $r }}</option>
            @endforeach
          </select>
        </div>

        {{-- العضوية --}}
        <div class="grid grid-cols-3 gap-2 items-center">
          <label class="text-xs text-gray-500 dark:text-gray-400">العضوية</label>
          <select class="col-span-2 field" data-field="membership_status" data-id="{{ $u->id }}">
            @foreach(['beta','official','moderator','advisor','super-admin'] as $opt)
              <option value="{{ $opt }}" @selected(($u->membership_status??'')===$opt)>{{ $opt }}</option>
            @endforeach
          </select>
        </div>

        {{-- حالة الحساب --}}
        <div class="grid grid-cols-3 gap-2 items-center">
          <label class="text-xs text-gray-500 dark:text-gray-400">الحالة</label>
          <select class="col-span-2 field" data-field="account_status" data-id="{{ $u->id }}">
            @foreach(['active','suspended','banned'] as $opt)
              <option value="{{ $opt }}" @selected(($u->account_status??'active')===$opt)>{{ $opt }}</option>
            @endforeach
          </select>
        </div>

        {{-- مغادر/إرجاع --}}
        <div class="grid grid-cols-3 gap-2 items-center">
          <label class="text-xs text-gray-500 dark:text-gray-400">التواجد</label>
          <div class="col-span-2 flex items-center gap-2">
            <label class="inline-flex items-center gap-2 text-sm">
              <input type="checkbox" class="toggle-left field" data-field="isLeft" data-id="{{ $u->id }}" @checked($u->isLeft)>
              <span>{{ $u->isLeft?'مغادر':'داخل الفريق' }}</span>
            </label>
          </div>
        </div>

        {{-- سبب المغادرة --}}
        <textarea class="w-full field text-sm rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                  placeholder="سبب المغادرة (اختياري)" data-field="left_reason" data-id="{{ $u->id }}">{{ $u->left_reason }}</textarea>

        {{-- ملاحظات إدارية --}}
        <textarea class="w-full field text-sm rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                  placeholder="ملاحظات إدارية" data-field="admin_notes" data-id="{{ $u->id }}">{{ $u->admin_notes }}</textarea>

        @if(!empty($u->password_changed_at))
          <div class="text-[11px] text-gray-500 dark:text-gray-400">
            آخر تعديل على حسابه: {{ \Illuminate\Support\Carbon::parse($u->updated_at)->diffForHumans() }}
          </div>
        @endif
      </div>
    </div>
  @endforeach
  </div>
@empty
  <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6 text-center">
    <p class="text-gray-600 dark:text-gray-300">لا توجد نتائج.</p>
  </div>
@endforelse
</div>

@if($p && $p->hasPages())
  <div class="mt-6">
    {{ $p->withQueryString()->links('pagination::tailwind') }}
  </div>
@endif

{{-- سكربت AJAX صغير --}}
<script>
(function(){
  const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

  function toast(msg, ok=true){
    const el = document.createElement('div');
    el.className = 'fixed bottom-4 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-lg text-white ' + (ok?'bg-emerald-600':'bg-rose-600');
    el.textContent = msg;
    document.body.appendChild(el);
    setTimeout(()=> el.remove(), 2000);
  }

  async function sendField(id, field, value){
    const res = await fetch(`{{ url('superadmin/falcon-room/members') }}/${id}/update-field`, {
      method: 'POST',
      headers: {'X-Requested-With':'XMLHttpRequest','X-CSRF-TOKEN': csrf, 'Accept':'application/json'},
      body: new URLSearchParams({field, value})
    });
    const data = await res.json().catch(()=> ({}));
    if(!res.ok || !data.ok){ toast(data.message||'فشل التحديث', false); return false; }
    toast(data.message||'تم!');
    return true;
  }

  document.querySelectorAll('.field').forEach(function(el){
    const id = el.dataset.id;
    const field = el.dataset.field;

    if(el.tagName === 'SELECT'){
      el.addEventListener('change', ()=> sendField(id, field, el.value));
    } else if (el.type === 'checkbox'){
      el.addEventListener('change', ()=> sendField(id, field, el.checked ? '1':'0'));
    } else {
      let t;
      el.addEventListener('input', ()=>{
        clearTimeout(t);
        t = setTimeout(()=> sendField(id, field, el.value), 600);
      });
    }
  });
})();
</script>
@endsection