@extends('layouts.superadmin')

@section('title','غرفة الصقر — سجل عمليات الإدارة')
@section('page-title','📝 غرفة الصقر — سجل عمليات الإدارة')

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

  {{-- هيرو --}}
  <section class="relative overflow-hidden rounded-3xl border border-white/40 dark:border-gray-800
                  bg-gradient-to-br from-sky-50 via-emerald-50 to-amber-50
                  dark:from-sky-900/30 dark:via-emerald-900/20 dark:to-amber-900/20 p-6 md:p-8 shadow">
    <div class="absolute -top-24 -start-24 w-72 h-72 rounded-full bg-sky-400/20 blur-3xl"></div>
    <div class="absolute -bottom-24 -end-24 w-72 h-72 rounded-full bg-emerald-400/20 blur-3xl"></div>

    <div class="relative z-10 space-y-3">
      <h1 class="text-2xl md:text-3xl font-black text-gray-900 dark:text-white">
        سجل عمليات الإدارة — Admin Audit
      </h1>
      <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">
        هنا يتم تسجيل كل عملية إدارية يقوم بها المدراء والمشرفون تلقائيًا:
        إضافة/تعديل/حذف أعضاء، تأكيد تقييمات، إدارة مخالفات، وغير ذلك.
        الهدف هو <span class="font-semibold">شفافية كاملة</span> ومعرفة "مين عمل شو ومتى".
      </p>
    </div>
  </section>

  {{-- فلاتر --}}
  <section class="bg-white/80 dark:bg-gray-800/80 border border-gray-200/70 dark:border-gray-700 rounded-2xl p-4 md:p-5 shadow-sm">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-3">
      <div class="md:col-span-2">
        <input type="text" name="search" value="{{ request('search') }}"
               placeholder="بحث في الوصف / اسم المدير / نوع العملية..."
               class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-white text-sm px-3 py-2.5">
      </div>
      <div>
        <select name="admin_id" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-white text-sm px-3 py-2.5">
          <option value="">كل المدراء</option>
          @foreach($admins as $admin)
            <option value="{{ $admin->id }}" @selected(request('admin_id') == $admin->id)>{{ $admin->name }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <button class="w-full rounded-lg bg-primary-600 hover:bg-primary-700 text-white text-sm font-semibold py-2.5">
          تصفية
        </button>
      </div>
    </form>
  </section>

  {{-- جدول السجل --}}
  <section class="bg-white/80 dark:bg-gray-800/80 border border-gray-200/70 dark:border-gray-700 rounded-2xl shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
      <table class="min-w-full text-xs md:text-sm">
        <thead class="bg-gray-50 dark:bg-gray-900/60 text-gray-700 dark:text-gray-300">
          <tr>
            <th class="px-3 py-2 text-right">الوقت</th>
            <th class="px-3 py-2 text-right">المدير</th>
            <th class="px-3 py-2 text-right">الوصف</th>
            <th class="px-3 py-2 text-right hidden md:table-cell">المسار</th>
            <th class="px-3 py-2 text-right hidden md:table-cell">IP</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
          @forelse($logs as $log)
            <tr class="hover:bg-gray-50/80 dark:hover:bg-gray-900/40">
              <td class="px-3 py-2 whitespace-nowrap text-gray-600 dark:text-gray-300">
                {{ $log->created_at?->format('Y-m-d H:i') }}
              </td>
              <td class="px-3 py-2 whitespace-nowrap text-gray-800 dark:text-gray-100">
                {{ $log->admin->name ?? 'مجهول' }}
              </td>
              <td class="px-3 py-2 text-gray-800 dark:text-gray-100">
                {{ $log->description }}
              </td>
              <td class="px-3 py-2 hidden md:table-cell text-[11px] text-gray-500 dark:text-gray-400">
                {{ $log->route_name ?? $log->method }}
              </td>
              <td class="px-3 py-2 hidden md:table-cell text-[11px] text-gray-500 dark:text-gray-400">
                {{ $log->ip_address }}
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="5" class="px-3 py-6 text-center text-gray-500 dark:text-gray-400">
                لا توجد سجلات حتى الآن. أول ما المدراء يبدؤوا يتحركوا، النظام راح يسجل كل شيء تلقائيًا. 🔍
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    @if($logs->hasPages())
      <div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">
        {{ $logs->links('pagination::tailwind') }}
      </div>
    @endif
  </section>

</div>
@endsection