@extends('layouts.superadmin')

@section('title','غرفة الصقر — كلمات مرور المشرفين')
@section('page-title','غرفة الصقر — كلمات مرور المشرفين')

@section('content')
<div class="space-y-6">

  {{-- HERO --}}
  <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 md:p-8">
    <div class="flex items-start justify-between gap-6">
      <div class="min-w-0">
        <div class="flex items-center gap-3 mb-2">
          <div class="grid h-12 w-12 place-items-center rounded-xl bg-primary-600/10 text-primary-700 dark:text-primary-300">
            <svg class="w-6 h-6" 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>
          <h1 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white">غرفة الصقر — إدارة كلمات مرور المشرفين</h1>
        </div>
        <p class="text-gray-700 dark:text-gray-300">
          شاشة مركزية لإدارة كلمات مرور <b>المشرفين</b> بصلاحيات مشدّدة وتوثيق كامل لكل إجراء.
        </p>
      </div>
      <span class="shrink-0 inline-flex items-center gap-2 px-3 py-1.5 text-xs font-semibold rounded-full
                   bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200 border border-amber-200 dark:border-amber-800">
        <span class="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></span> قريبًا
      </span>
    </div>

    {{-- ملاحظة أمنية --}}
    <div class="mt-6 bg-gray-50 dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700">
      <div class="flex items-center gap-2 font-semibold text-gray-800 dark:text-gray-100">
        <svg class="w-5 h-5 text-cyan-600 dark:text-cyan-300" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zM11 7h2v6h-2V7zm0 8h2v2h-2v-2z"/></svg>
        ملاحظة أمنية
      </div>
      <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">
        لن تُعرض كلمات المرور نصًا. تتوفّر: إعادة تعيين، إرسال رابط تغيير، ومصادقة متعددة الخطوات قبل أي إجراء.
      </p>
    </div>
  </div>

  {{-- كروت إحصائية (Placeholder) --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div class="rounded-xl p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm">
      <p class="text-sm text-gray-600 dark:text-gray-400">طلبات تغيير مشرفين هذا الأسبوع</p>
      <p class="text-3xl font-extrabold text-gray-900 dark:text-white mt-1">—</p>
    </div>
    <div class="rounded-xl p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm">
      <p class="text-sm text-gray-600 dark:text-gray-400">بانتظار التحقق</p>
      <p class="text-3xl font-extrabold text-gray-900 dark:text-white mt-1">—</p>
    </div>
    <div class="rounded-xl p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm">
      <p class="text-sm text-gray-600 dark:text-gray-400">إنجازات اليوم</p>
      <p class="text-3xl font-extrabold text-gray-900 dark:text-white mt-1">—</p>
    </div>
  </div>

  {{-- ميزات قادمة --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    @php
      $features = [
        ['t'=>'تحكم دور-مستند','d'=>'تطبيق السياسات الخاصة بالمشرفين فقط.','cls'=>'border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200'],
        ['t'=>'تحقق إضافي','d'=>'جلسة + جهاز + سؤال أمني قبل تغيير كلمة المرور.','cls'=>'border-fuchsia-600 bg-fuchsia-50 dark:bg-fuchsia-900/20 text-fuchsia-800 dark:text-fuchsia-200'],
        ['t'=>'تتبّع وتدقيق','d'=>'Log لكل إجراء مع وقت/منفّذ/أثر.','cls'=>'border-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-800 dark:text-emerald-200'],
      ];
    @endphp
    @foreach($features as $f)
      <div class="rounded-xl border {{ $f['cls'] }} p-4">
        <div class="font-semibold">{{ $f['t'] }}</div>
        <div class="text-sm mt-1 opacity-90">{{ $f['d'] }}</div>
        <span class="mt-3 inline-flex items-center gap-2 px-2 py-0.5 text-xs font-semibold rounded-full bg-white/60 dark:bg-white/10 border border-white/70 dark:border-white/20">
          <span class="h-1.5 w-1.5 rounded-full bg-gray-500 dark:bg-gray-300 animate-pulse"></span> قريبًا
        </span>
      </div>
    @endforeach
  </div>

  {{-- شريط بحث شكلي + جدول Skeleton --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-100 dark:border-gray-700">
    <form class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <input disabled type="text" placeholder="ابحث باسم المشرف…" class="rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-white disabled:opacity-60 px-3 py-2.5 md:col-span-2">
      <select disabled class="rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-white disabled:opacity-60"><option>الحالة</option></select>
      <select disabled class="rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-white disabled:opacity-60"><option>المجموعة</option></select>
    </form>
  </div>

  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 font-semibold">قائمة المشرفين (عرض للمعاينة)</div>
    <div class="divide-y divide-gray-100 dark:divide-gray-700">
      @for($i=0;$i<6;$i++)
        <div class="grid grid-cols-4 md:grid-cols-6 gap-3 px-4 py-3">
          <div class="h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
          <div class="h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
          <div class="h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse hidden md:block"></div>
          <div class="h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse hidden md:block"></div>
          <div class="h-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse col-span-2"></div>
        </div>
      @endfor
    </div>
  </div>

</div>
@endsection