@extends('layouts.superadmin')

@section('title','إشارات القيادة — Falcon Signals')
@section('page-title','إشارات القيادة — Falcon Signals')

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

  {{-- ملخص سريع --}}
  <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
    <div class="rounded-xl p-4 bg-gradient-to-br from-slate-50 to-white dark:from-slate-900 dark:to-slate-800 border">
      <div class="text-xs text-slate-500 dark:text-slate-300">إجمالي</div>
      <div class="text-2xl font-extrabold">{{ number_format($stats['total']) }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-emerald-50 to-white dark:from-emerald-900/30 dark:to-slate-900 border">
      <div class="text-xs text-emerald-600 dark:text-emerald-300">جديدة</div>
      <div class="text-2xl font-extrabold text-emerald-700 dark:text-emerald-200">{{ $stats['new'] }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-amber-50 to-white dark:from-amber-900/30 dark:to-slate-900 border">
      <div class="text-xs text-amber-600 dark:text-amber-300">تحذيرات</div>
      <div class="text-2xl font-extrabold text-amber-700 dark:text-amber-200">{{ $stats['warning'] }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-red-50 to-white dark:from-red-900/30 dark:to-slate-900 border">
      <div class="text-xs text-red-600 dark:text-red-300">خطِر</div>
      <div class="text-2xl font-extrabold text-red-700 dark:text-red-200">{{ $stats['danger'] }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-cyan-50 to-white dark:from-cyan-900/30 dark:to-slate-900 border">
      <div class="text-xs text-cyan-600 dark:text-cyan-300">معلوماتي</div>
      <div class="text-2xl font-extrabold text-cyan-700 dark:text-cyan-200">{{ $stats['info'] }}</div>
    </div>
  </div>

  {{-- فلاتر --}}
  <form method="get" class="bg-white dark:bg-slate-800 border rounded-xl p-4 grid grid-cols-2 md:grid-cols-6 gap-3">
    <select name="level" class="rounded border-gray-300 dark:bg-slate-700 dark:text-white">
      <option value="">كل المستويات</option>
      <option value="danger"  @selected(request('level')==='danger')>خطر</option>
      <option value="warning" @selected(request('level')==='warning')>تحذير</option>
      <option value="info"    @selected(request('level')==='info')>معلومة</option>
    </select>

    <select name="type" class="rounded border-gray-300 dark:bg-slate-700 dark:text-white">
      <option value="">كل الأنواع</option>
      <option value="morale" @selected(request('type')==='morale')>المعنويات</option>
      <option value="absence"@selected(request('type')==='absence')>الغياب</option>
      <option value="burst"  @selected(request('type')==='burst')>نشاط استثنائي</option>
      <option value="loyalty"@selected(request('type')==='loyalty')>الولاء</option>
    </select>

    <label class="inline-flex items-center gap-2 text-sm">
      <input type="checkbox" name="new" value="1" @checked(request('new')) class="rounded border-gray-300 dark:bg-slate-700">
      الجديدة فقط
    </label>

    <div class="md:col-span-3 flex gap-2 justify-end">
      <button class="px-4 py-2 rounded bg-primary-600 text-white hover:bg-primary-700">تحديث</button>
      <button form="read-all-form" class="px-4 py-2 rounded bg-emerald-600 text-white hover:bg-emerald-700">تعليم الكل كمقروء</button>
    </div>
  </form>
  <form id="read-all-form" class="hidden" method="post" action="{{ route('superadmin.falcon-room.signals.read-all') }}">@csrf</form>

  {{-- الإشارات --}}
  <div class="space-y-3">
    @forelse($signals as $sig)
      <div class="rounded-xl p-4 border bg-white dark:bg-slate-800 flex items-start gap-3">
        <div class="w-2 h-10 rounded {{ $sig->level==='danger'?'bg-red-500':($sig->level==='warning'?'bg-amber-500':'bg-cyan-500') }}"></div>
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-2 flex-wrap">
            <span class="text-xs px-2 py-0.5 rounded-full {{ $sig->level==='danger'?'bg-red-100 text-red-700':($sig->level==='warning'?'bg-amber-100 text-amber-700':'bg-cyan-100 text-cyan-700') }}">
              {{ strtoupper($sig->level) }}
            </span>
            <span class="text-xs px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-200">{{ $sig->signal_type }}</span>
            <span class="text-xs text-slate-400">{{ $sig->created_at->diffForHumans() }}</span>
            @if(!$sig->is_read)
              <span class="text-[10px] px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700">جديد</span>
            @endif
          </div>
          <div class="font-bold text-slate-900 dark:text-white mt-1">{{ $sig->title }}</div>
          @if($sig->recommendation)
            <div class="text-sm text-slate-600 dark:text-slate-300 mt-1">💡 توصية: {{ $sig->recommendation }}</div>
          @endif
          @if(is_array($sig->payload) && count($sig->payload))
            <pre class="mt-2 text-[11px] bg-slate-50 dark:bg-slate-900/50 text-slate-600 dark:text-slate-300 p-2 rounded overflow-x-auto">{{ json_encode($sig->payload, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT) }}</pre>
          @endif
        </div>
        @if(!$sig->is_read)
          <button class="text-xs px-3 py-1 rounded bg-slate-800 text-white hover:bg-slate-700"
                  onclick="markSigRead({{ $sig->id }}, this)">تم</button>
        @endif
      </div>
    @empty
      <div class="text-center text-slate-500 dark:text-slate-300 py-10">لا توجد إشارات.</div>
    @endforelse
  </div>

  <div class="mt-3">{{ $signals->links() }}</div>
</div>

@push('scripts')
<script>
async function markSigRead(id, btn){
  try{
    const res = await fetch("{{ url('/superadmin/falcon-room/signals') }}/"+id+"/read",{
      method:'POST',
      headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}
    });
    if(res.ok){ btn.closest('.rounded-xl').querySelector('.bg-emerald-100')?.remove(); btn.remove(); }
  }catch(e){}
}
</script>
@endpush
@endsection