@extends('layouts.superadmin')
@section('title','غرفة رولا — ملاحظات القائدة')
@section('page-title','🗒️ ملاحظات القائدة رولا')

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

  {{-- شرح سريع --}}
  <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 p-4 text-sm text-gray-700 dark:text-gray-300">
    تجمع هذه الصفحة ملاحظات (التقييمات، الملاحظات الإدارية، نصائح المستشارين، وبعض ملاحظات المخالفات إن وُجدت).
    تُصنّف تلقائيًا حسب كلمات مفتاحية إلى: <b>عاجلة</b>، <b>متوسطة</b>، <b>إيجابية</b>، <b>عادية</b>. الهدف تسهيل المتابعة الإنسانية اللطيفة — بدون تعديل أي جدول.
  </div>

  {{-- ملخص --}}
  <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
    <div class="rounded-xl p-4 bg-gradient-to-br from-amber-50 to-amber-100 border-r-4 border-amber-400">
      <div class="text-sm">إجمالي الملاحظات</div>
      <div class="text-3xl font-bold">{{ number_format($summary['count']) }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-rose-50 to-rose-100 border-r-4 border-rose-400">
      <div class="text-sm">عاجلة</div>
      <div class="text-3xl font-bold">{{ number_format($summary['high']) }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-amber-50 to-amber-100 border-r-4 border-amber-400">
      <div class="text-sm">متوسطة</div>
      <div class="text-3xl font-bold">{{ number_format($summary['medium']) }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 border-r-4 border-emerald-400">
      <div class="text-sm">إيجابية</div>
      <div class="text-3xl font-bold">{{ number_format($summary['positive']) }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-slate-50 to-slate-100 border-r-4 border-slate-400">
      <div class="text-sm">عادية</div>
      <div class="text-3xl font-bold">{{ number_format($summary['low']) }}</div>
    </div>
  </div>

  {{-- فلاتر --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700 p-4">
    <form method="GET" class="flex flex-wrap items-center gap-2 text-sm">
      <input type="text" name="q" value="{{ $q }}" placeholder="بحث بالنص/الاسم/اليوزر"
             class="rounded border-gray-300 px-3 py-2">
      <select name="source" class="rounded border-gray-300 px-3 py-2">
        <option value="">جميع المصادر</option>
        @foreach(['تقييم','ملاحظة إدارية','نصيحة مستشار','مخالفة'] as $s)
          <option value="{{ $s }}" @selected($src===$s)>{{ $s }}</option>
        @endforeach
      </select>
      <select name="severity" class="rounded border-gray-300 px-3 py-2">
        <option value="">كل الشدّات</option>
        <option value="high"     @selected($sev==='high')>عاجلة</option>
        <option value="medium"   @selected($sev==='medium')>متوسطة</option>
        <option value="positive" @selected($sev==='positive')>إيجابية</option>
        <option value="low"      @selected($sev==='low')>عادية</option>
      </select>
      <select name="days" class="rounded border-gray-300 px-3 py-2">
        @foreach([7,14,30,60,90] as $d)
          <option value="{{ $d }}" @selected($days==$d)>{{ $d }} يوم</option>
        @endforeach
      </select>
      <button class="px-3 py-2 rounded bg-primary-600 text-white">بحث</button>
    </form>
  </div>

  {{-- البطاقات --}}
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
    @forelse($items as $it)
      @php
        $clr = match($it->severity){
          'high'     => 'from-rose-50 to-rose-100 border-rose-400',
          'medium'   => 'from-amber-50 to-amber-100 border-amber-400',
          'positive' => 'from-emerald-50 to-emerald-100 border-emerald-400',
          default    => 'from-slate-50 to-slate-100 border-slate-400',
        };
      @endphp
      <div class="rounded-xl p-4 bg-gradient-to-br {{ $clr }} border-r-4">
        <div class="flex items-center justify-between">
          <div class="min-w-0">
            <div class="font-bold truncate">{{ $it->name }}</div>
            <div class="text-xs text-gray-600 dark:text-gray-300 truncate">{{ $it->username ?? '—' }}</div>
          </div>
          <span class="px-2 py-1 rounded text-xs bg-black/5 dark:bg-white/10">{{ $it->source }}</span>
        </div>

        <p class="mt-3 text-sm text-gray-800 dark:text-gray-200">
          {{ Str::limit($it->text, 240) }}
        </p>

        <div class="mt-2 text-xs text-gray-600 dark:text-gray-400 flex items-center justify-between">
          <span>
            شدّة: 
            <b>
              {{ $it->severity === 'high' ? 'عاجلة' :
                 ($it->severity === 'medium' ? 'متوسطة' :
                 ($it->severity === 'positive' ? 'إيجابية' : 'عادية')) }}
            </b>
          </span>
          <span>{{ \Carbon\Carbon::parse($it->date)->timezone(config('app.timezone','Asia/Jerusalem'))->format('Y-m-d H:i') }}</span>
        </div>

        @if(!empty($it->tags))
          <div class="mt-2 flex flex-wrap gap-1">
            @foreach($it->tags as $tg)
              <span class="px-2 py-0.5 rounded bg-black/5 dark:bg-white/10 text-xs">{{ $tg }}</span>
            @endforeach
          </div>
        @endif

        @if(Route::has('superadmin.admin-messages.index') && !empty($it->user_id))
          <div class="mt-3">
            <a href="{{ route('superadmin.admin-messages.index', ['to'=>$it->user_id]) }}"
               class="inline-flex items-center gap-2 px-3 py-1.5 rounded bg-primary-600 text-white text-xs hover:bg-primary-700">
              ✉️ إرسال تشجيع
            </a>
          </div>
        @endif
      </div>
    @empty
      <div class="col-span-full text-center text-gray-500 py-6">لا توجد ملاحظات ضمن الفلاتر الحالية.</div>
    @endforelse
  </div>

</div>
@endsection