{{-- resources/views/superadmin/falcon/admin-audit/index.blade.php --}}
@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/20 dark:border-gray-800
                  bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white shadow-lg">
    <div class="absolute -top-32 -end-24 w-80 h-80 rounded-full bg-emerald-400/20 blur-3xl"></div>
    <div class="absolute -bottom-40 -start-24 w-96 h-96 rounded-full bg-cyan-400/10 blur-3xl"></div>

    <div class="relative z-10 px-6 md:px-10 py-8 md:py-10 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
      <div class="flex items-start gap-4">
        <div class="h-14 w-14 rounded-2xl bg-emerald-500/80 grid place-items-center shadow-lg">
          <i class="fa-solid fa-shield-halved text-xl"></i>
        </div>
        <div>
          <h1 class="text-2xl md:text-3xl font-black tracking-tight">
            غرفة الصقر — سجلات عمليات الإدارة
          </h1>
          <p class="mt-2 text-sm md:text-[15px] text-slate-200/80 leading-relaxed">
            هنا تتجمع كل حركة للأدمن: إضافة عضو، تعديل لايف، حذف مخالفة، تغيير رتبة… 
            كل عملية تُسجَّل باسم منفّذها، نوع العملية، والبيانات المرتبطة بها.
          </p>
          <p class="mt-1 text-[11px] text-slate-300/70">
            الهدف: <span class="font-semibold text-emerald-300">شفافية</span> + 
            <span class="font-semibold text-emerald-300">مسؤولية</span> + 
            <span class="font-semibold text-emerald-300">أمان أعلى</span> في إدارة التيم.
          </p>
        </div>
      </div>

      <div class="md:text-right space-y-2">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-200 text-xs border border-emerald-400/40">
          <span class="h-2 w-2 rounded-full bg-emerald-300 animate-pulse"></span>
          التتبع مفعل الآن لكل عمليات الإدارة
        </div>
        <div class="text-xs text-slate-300/80">
          آخر 25 عملية تظهر في الأسفل، مع إمكانية تصفح باقي الصفحات.
        </div>
      </div>
    </div>
  </section>

  {{-- جدول السجلات --}}
  <section class="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-2xl shadow-sm overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between gap-3">
      <div>
        <h2 class="font-semibold text-gray-900 dark:text-white text-sm">
          أحدث العمليات المسجلة
        </h2>
        <p class="text-xs text-gray-500 dark:text-gray-400">
          كل سطر = عملية واحدة نفّذها إداري من غرفة الصقر أو باقي الوحدات.
        </p>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full text-xs md:text-sm border-separate border-spacing-y-1 px-2">
        <thead>
          <tr class="text-left text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400">
            <th class="px-4 py-2">الوقت</th>
            <th class="px-4 py-2">الإداري</th>
            <th class="px-4 py-2">الموديول</th>
            <th class="px-4 py-2">العملية</th>
            <th class="px-4 py-2">الطريقة</th>
            <th class="px-4 py-2">وصف مختصر</th>
            <th class="px-4 py-2">تفاصيل</th>
          </tr>
        </thead>
        <tbody>
          @forelse($logs as $log)
            <tr class="bg-gray-50/80 dark:bg-gray-800/80 hover:bg-emerald-50/80 dark:hover:bg-emerald-900/30 transition">
              <td class="px-4 py-2 align-top text-[11px] text-gray-600 dark:text-gray-300 whitespace-nowrap">
                <div>{{ $log->created_at?->format('Y-m-d H:i') }}</div>
                <div class="text-[10px] text-gray-400 dark:text-gray-500">
                  {{ $log->created_at?->diffForHumans() }}
                </div>
              </td>

              <td class="px-4 py-2 align-top whitespace-nowrap">
                <div class="font-semibold text-gray-900 dark:text-white">
                  {{ $log->admin?->name ?? 'مستخدم غير معروف' }}
                </div>
                <div class="text-[11px] text-gray-500 dark:text-gray-400">
                  ID: {{ $log->admin_id }}
                </div>
              </td>

              <td class="px-4 py-2 align-top whitespace-nowrap">
                @if($log->module)
                  <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold
                               bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200">
                    {{ $log->module }}
                  </span>
                @else
                  <span class="text-[11px] text-gray-400 dark:text-gray-500">غير محدد</span>
                @endif
                @if($log->route_name)
                  <div class="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">
                    {{ $log->route_name }}
                  </div>
                @endif
              </td>

              <td class="px-4 py-2 align-top max-w-[220px]">
                <div class="text-[11px] font-semibold text-gray-900 dark:text-white truncate">
                  {{ $log->action }}
                </div>
                <div class="text-[10px] text-gray-500 dark:text-gray-400 truncate">
                  {{ $log->url }}
                </div>
              </td>

              <td class="px-4 py-2 align-top whitespace-nowrap">
                @php
                  $method = strtoupper($log->method ?? 'GET');
                  $methodColor = match($method) {
                      'POST'   => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
                      'PUT', 
                      'PATCH'  => 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200',
                      'DELETE' => 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200',
                      default  => 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
                  };
                @endphp
                <span class="inline-flex px-2 py-0.5 rounded-full text-[10px] font-semibold {{ $methodColor }}">
                  {{ $method }}
                </span>
                @if($log->ip_address)
                  <div class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5">
                    IP: {{ $log->ip_address }}
                  </div>
                @endif
              </td>

              <td class="px-4 py-2 align-top">
                <div class="text-[11px] text-gray-800 dark:text-gray-200 line-clamp-3">
                  {{ $log->description ?? '—' }}
                </div>
              </td>

              <td class="px-4 py-2 align-top">
                <details class="text-[11px] text-gray-700 dark:text-gray-200 bg-white/70 dark:bg-gray-900/70 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2 max-w-xs">
                  <summary class="cursor-pointer select-none text-emerald-700 dark:text-emerald-300 font-semibold">
                    عرض التفاصيل
                  </summary>
                  <div class="mt-2 space-y-2 max-h-52 overflow-y-auto">
                    @if($log->old_values)
                      <div>
                        <div class="font-semibold text-[10px] text-gray-500 dark:text-gray-400 mb-0.5">البيانات القديمة:</div>
                        <pre class="text-[10px] whitespace-pre-wrap break-words bg-gray-50 dark:bg-gray-900/80 rounded p-2">{{ json_encode($log->old_values, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT) }}</pre>
                      </div>
                    @endif

                    @if($log->new_values)
                      <div>
                        <div class="font-semibold text-[10px] text-gray-500 dark:text-gray-400 mb-0.5">البيانات الجديدة / المدخلة:</div>
                        <pre class="text-[10px] whitespace-pre-wrap break-words bg-gray-50 dark:bg-gray-900/80 rounded p-2">{{ json_encode($log->new_values, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT) }}</pre>
                      </div>
                    @else
                      <div class="text-[10px] text-gray-400 dark:text-gray-500">
                        لا توجد تفاصيل إضافية محفوظة لهذه العملية.
                      </div>
                    @endif

                    @if($log->user_agent)
                      <div class="text-[9px] text-gray-400 dark:text-gray-500 mt-1">
                        UA: {{ mb_substr($log->user_agent,0,200) }}{{ strlen($log->user_agent) > 200 ? '…' : '' }}
                      </div>
                    @endif
                  </div>
                </details>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="7" class="px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-300">
                لا توجد سجلات بعد. أول عملية إداري ستظهر هنا تلقائيًا.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

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

</div>
@endsection