@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>{{ $period[0] }}</b> → <b>{{ $period[1] }}</b>.
  </div>

  {{-- ملخص --}}
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
    <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($cards['summary']['girls'] ?? 0) }}</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($cards['summary']['severe'] ?? 0) }}</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($cards['summary']['weak'] ?? 0) }}</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($cards['summary']['follow'] ?? 0) }}</div>
    </div>
  </div>

  @php
    $sections = [
      ['key'=>'severe','title'=>'🚨 انقطاع شديد (الأعلى أولوية)','color'=>'from-rose-50 to-rose-100'],
      ['key'=>'weak','title'=>'⚠️ ضعف واضح','color'=>'from-amber-50 to-amber-100'],
      ['key'=>'follow','title'=>'👀 بحاجة متابعة قريبة','color'=>'from-cyan-50 to-cyan-100'],
    ];
  @endphp

  @foreach($sections as $sec)
    @php $items = $cards[$sec['key']] ?? collect(); @endphp
    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 p-4 space-y-3">
      <div class="flex items-center justify-between">
        <h3 class="font-bold">{{ $sec['title'] }}</h3>
        <div class="text-xs text-gray-500">فحص آخر {{ $back }} يوم</div>
      </div>

      @if($items->isEmpty())
        <div class="text-sm text-gray-500">لا يوجد مرشّحات ضمن هذه الفئة.</div>
      @else
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
          @foreach($items as $i)
            <div class="rounded-xl p-4 bg-gradient-to-br {{ $sec['color'] }} border-r-4 border-gray-300">
              <div class="flex items-center justify-between">
                <div class="min-w-0">
                  <div class="font-bold truncate">{{ $i->name }}</div>
                  <div class="text-xs text-gray-600 dark:text-gray-300 truncate">{{ $i->user ?? '—' }}</div>
                </div>
                <span class="px-2 py-1 rounded text-xs bg-black/5 dark:bg-white/10">خطر: {{ $i->risk }}</span>
              </div>

              <div class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                {{ $i->hint }}
              </div>

              <div class="mt-2 grid grid-cols-2 gap-2 text-xs text-gray-600 dark:text-gray-400">
                <div>انقطاع: <b>{{ $i->inactive }}</b> يوم</div>
                <div>دقائق:  <b>{{ number_format($i->mins,1) }}</b></div>
                <div>نقاط:   <b>{{ $i->pts }}</b></div>
                <div>غياب:   <b>{{ $i->abs }}</b></div>
                <div>أيام نشطة: <b>{{ $i->days }}</b></div>
              </div>

              @if(Route::has('superadmin.admin-messages.index'))
                <div class="mt-3">
                  <a href="{{ route('superadmin.admin-messages.index', ['to'=>$i->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>
          @endforeach
        </div>
      @endif
    </div>
  @endforeach
</div>
@endsection