{{-- resources/views/superadmin/falcon/member-care/index.blade.php --}}
@extends('layouts.superadmin')

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

@section('content')

{{-- تنبيهات سريعة --}}
@if(session('success'))
  <div class="mb-4 rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-emerald-800 text-sm">
    {{ session('success') }}
  </div>
@endif
@if(session('error'))
  <div class="mb-4 rounded-xl border border-rose-300 bg-rose-50 px-4 py-3 text-rose-800 text-sm">
    {{ session('error') }}
  </div>
@endif

{{-- هيرو ملحمي + شرح --}}
<section class="relative overflow-hidden rounded-3xl border border-white/30 dark:border-gray-800 
                bg-gradient-to-br from-cyan-50 via-emerald-50 to-amber-50 
                dark:from-cyan-900/20 dark:via-emerald-900/20 dark:to-amber-900/20 
                shadow-lg backdrop-blur mb-6">

  <div class="absolute -top-32 -start-32 w-[600px] h-[600px] rounded-full blur-3xl 
              bg-gradient-to-tr from-cyan-400/25 via-emerald-400/20 to-amber-400/25"></div>
  <div class="absolute -bottom-36 -end-36 w-[480px] h-[480px] rounded-full blur-3xl 
              bg-gradient-to-tr from-fuchsia-400/18 via-indigo-400/18 to-sky-400/18 
              animate-[spin_30s_linear_infinite]"></div>

  <div class="relative z-10 px-6 md:px-10 py-8 md:py-12">
    <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">

      <div class="min-w-0">
        <div class="flex items-center gap-3">
          <div class="grid h-12 w-12 place-items-center rounded-xl 
                      bg-gradient-to-br from-cyan-100 to-emerald-100 
                      dark:from-cyan-900/40 dark:to-emerald-900/40 
                      border border-cyan-200/50 dark:border-cyan-800/40 shadow-sm">
            <svg class="w-6 h-6 text-cyan-700 dark:text-cyan-200" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2l3 4h4l-3 4 3 4h-4l-3 4-3-4H5l3-4-3-4h4l3-4z"/>
            </svg>
          </div>
          <div>
            <h1 class="text-2xl md:text-3xl font-black tracking-tight text-gray-900 dark:text-white">
              ملفات متابعة الأعضاء — غرفة الصقر
            </h1>
            <p class="mt-1 text-sm md:text-[15px] leading-6 text-gray-600 dark:text-gray-300">
              هنا تتابع وضع الأعضاء إداريًا: من تحت المراقبة، إلى من يحتاج اهتمام خاص، إلى الأعضاء النجوم.
              كل عضو يمكن أن يكون له <span class="font-semibold">ملف متابعة</span> فيه ملاحظات، إنذارات، إشادات وخطة عمل واضحة.
            </p>
          </div>
        </div>
        <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
          • هذا النظام إداري داخلي، لا يظهر للأعضاء. مصمم للصقر والإدارة لمتابعة الأعضاء بشكل إنساني ومنظّم، وليس فقط أرقام حضور وغياب.
        </p>
      </div>

      <div class="md:w-72">
        <div class="rounded-2xl p-4 bg-white/75 dark:bg-gray-800/75 border border-emerald-200/70 dark:border-emerald-700/70 shadow-sm">
          <p class="text-xs font-semibold text-emerald-700 dark:text-emerald-200 mb-1">كيف تستخدم الصفحة؟</p>
          <ul class="text-xs text-gray-700 dark:text-gray-300 space-y-1">
            <li>1. من صندوق <span class="font-semibold">"بدء متابعة لعضو"</span> اختر عضو لفتح ملفه.</li>
            <li>2. من صفحة العضو تضيف ملاحظات وخطة عمل (إشادة، إنذار، جلسة، مشكلة...).</li>
            <li>3. من قائمة الملفات هنا تقدر ترجع لأي ملف وتفلتر حسب الحالة والمستوى.</li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</section>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

  {{-- 🗂 عمود ملفات المتابعة الموجودة --}}
  <div class="lg:col-span-2 space-y-4">

    {{-- فلاتر الملفات --}}
    <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-5 shadow-sm">
      <div class="flex items-center justify-between mb-3">
        <h2 class="font-semibold text-gray-900 dark:text-white text-sm md:text-base">
          ملفات متابعة موجودة
        </h2>
        <span class="text-xs text-gray-500 dark:text-gray-400">
          {{ $cases->total() }} ملف
        </span>
      </div>

      <form method="get" class="grid grid-cols-1 md:grid-cols-5 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 text-sm">
        </div>
        <div>
          <select name="status" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
            <option value="">الحالة</option>
            <option value="open"   @selected(request('status')=='open')>ملفات مفتوحة</option>
            <option value="closed" @selected(request('status')=='closed')>ملفات مغلقة</option>
          </select>
        </div>
        <div>
          <select name="level" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
            <option value="">المستوى</option>
            <option value="normal"          @selected(request('level')=='normal')>عادي</option>
            <option value="watch"           @selected(request('level')=='watch')>تحت المراقبة</option>
            <option value="needs_attention" @selected(request('level')=='needs_attention')>يحتاج اهتمام</option>
            <option value="star"            @selected(request('level')=='star')>عضو نجم</option>
          </select>
        </div>
        <div class="flex md:justify-end">
          <button class="w-full md:w-auto px-5 py-2 rounded-lg bg-primary-600 hover:bg-primary-700 text-white text-sm font-semibold">
            بحث داخل الملفات
          </button>
        </div>
      </form>
    </div>

    {{-- قائمة الملفات --}}
    <div class="space-y-4">
      @forelse($cases as $case)
        <a href="{{ route('superadmin.falcon.member_care.show', $case->user_id) }}"
           class="block bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 
                  p-4 hover:border-primary-400/60 hover:shadow-md transition-all">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-gray-200 to-gray-100 
                        dark:from-gray-700 dark:to-gray-600 grid place-items-center 
                        text-gray-700 dark:text-gray-100 font-bold">
              {{ mb_substr($case->user->name ?? '؟',0,1) }}
            </div>
            <div class="min-w-0">
              <div class="font-semibold text-gray-900 dark:text-white truncate">
                {{ $case->user->name }}
              </div>
              <div class="text-xs text-gray-500 dark:text-gray-400 truncate">
                {{ $case->user->username }} • {{ $case->user->email }}
              </div>
              <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
                آخر تحديث: {{ $case->last_note_at ? $case->last_note_at->diffForHumans() : 'لا يوجد ملاحظات بعد' }}
              </div>
            </div>

            <div class="ml-auto flex flex-col items-end gap-1">
              <span class="px-2 py-0.5 text-[11px] rounded-full
                {{ $case->status==='open' 
                    ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200'
                    : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200' }}">
                {{ $case->status==='open' ? 'ملف مفتوح' : 'ملف مغلق' }}
              </span>
              <span class="px-2 py-0.5 text-[11px] rounded-full
                @if($case->level==='normal') bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-200
                @elseif($case->level==='watch') bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-200
                @elseif($case->level==='needs_attention') bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-200
                @else bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200 @endif">
                @switch($case->level)
                  @case('normal') عادي @break
                  @case('watch') تحت المراقبة @break
                  @case('needs_attention') يحتاج اهتمام @break
                  @case('star') عضو نجم @break
                @endswitch
              </span>
            </div>
          </div>

          @if($case->focus_reason)
            <div class="mt-2 text-xs text-gray-600 dark:text-gray-300 line-clamp-1">
              <span class="font-semibold">سبب التركيز:</span> {{ $case->focus_reason }}
            </div>
          @endif
        </a>
      @empty
        <div class="rounded-xl border border-dashed border-gray-300 dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 p-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            لا توجد ملفات متابعة حتى الآن.
          </p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
            ابدأ من الصندوق الجانبي <span class="font-semibold">"بدء متابعة لعضو"</span>.
          </p>
        </div>
      @endforelse
    </div>

    @if($cases->hasPages())
      <div class="mt-4">
        {{ $cases->links('pagination::tailwind') }}
      </div>
    @endif

  </div>

  {{-- 🎯 عمود: بدء متابعة لعضو باختيار من قائمة --}}
  <div class="space-y-4">
    <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-5 shadow-sm">
      <h2 class="font-semibold text-gray-900 dark:text:white text-sm md:text-base mb-2">
        بدء متابعة لعضو
      </h2>
      <p class="text-xs text-gray-600 dark:text-gray-300 mb-3">
        اختر عضو من القائمة أدناه لفتح ملف المتابعة الخاص به مباشرة، بدون كتابة أي شيء.
      </p>

      <form onsubmit="event.preventDefault(); openMemberCase();">
        <label class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1 block">اختر عضو</label>
        <select id="member-select"
                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
          <option value="">— اختر عضوًا من القائمة —</option>
          @foreach($members as $m)
            <option value="{{ $m->id }}">
              {{ $m->name }} — {{ $m->username }} ({{ $m->email }})
            </option>
          @endforeach
        </select>

        <button type="submit"
                class="mt-3 w-full px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold">
          فتح ملف المتابعة
        </button>
      </form>

      <p class="mt-3 text-[11px] text-gray-500 dark:text-gray-400">
        * تعرض القائمة أول 200 عضو داخل الفريق (غير مغادرين). يمكنك فتح ملف أي عضو ثم من هناك تضيف الملاحظات والخطة.
      </p>
    </div>
  </div>

</div>

{{-- سكربت بسيط لفتح ملف العضو --}}
<script>
  function openMemberCase() {
    const sel = document.getElementById('member-select');
    if (!sel || !sel.value) return;

    // نستخدم نفس مسار show: /superadmin/falcon-room/member-care/{user}
    const base = "{{ url('superadmin/falcon-room/member-care') }}";
    window.location.href = base.replace(/\/$/, '') + '/' + sel.value;
  }
</script>

@endsection