@extends('layouts.superadmin')

@section('title','تقرير الغياب — واتساب')
@section('page-title','📱 تقرير الغياب — إرسال للواتساب')

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

  {{-- شرح بسيط --}}
  <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
    هذا التقرير يجمع <b>الغياب مع عذر وبدون عذر</b> من جدول التقييمات خلال الفترة المحددة،
    ويعطيك قائمة مرتبة بالأعضاء حسب الأكثر غيابًا، مع إمكانية
    <b>إرسال تقرير مبسّط أو متقدم</b> إلى جروب واتساب الإدارة.
    <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
      الفترة الحالية: <b>{{ $from }}</b> → <b>{{ $to }}</b> ({{ $days }} يومًا).
    </div>
  </div>

  {{-- فلاتر الفترة --}}
  <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-3 items-end">
      <div>
        <label class="block text-xs text-gray-500 mb-1">من تاريخ</label>
        <input type="date" name="from" value="{{ $from }}"
               class="w-full rounded-xl border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">إلى تاريخ</label>
        <input type="date" name="to" value="{{ $to }}"
               class="w-full rounded-xl border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">عدد الأعضاء (Top)</label>
        <input type="number" name="limit" value="{{ $limit }}" min="3" max="50"
               class="w-full rounded-xl border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>
      <div class="md:col-span-2 flex gap-2">
        <button type="submit"
                class="inline-flex items-center justify-center px-4 py-2.5 rounded-xl
                       bg-primary-600 text-white text-sm hover:bg-primary-700 flex-1 md:flex-none">
          <i class="fa-solid fa-rotate-right ml-2 text-xs"></i>
          تحديث النتائج
        </button>
      </div>
    </form>
  </div>

  {{-- كروت ملخص --}}
  <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
    <div class="rounded-2xl p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900/40 dark:to-slate-800/60">
      <div class="text-xs text-gray-500">أعضاء لديهم غياب في الفترة</div>
      <div class="text-2xl font-extrabold mt-1 text-gray-900 dark:text-white">{{ $summary['members'] }}</div>
    </div>
    <div class="rounded-2xl p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900/40 dark:to-emerald-800/60">
      <div class="text-xs text-emerald-700 dark:text-emerald-200">إجمالي الغياب مع عذر</div>
      <div class="text-2xl font-extrabold mt-1 text-emerald-800 dark:text-emerald-100">{{ $summary['excused_total'] }}</div>
    </div>
    <div class="rounded-2xl p-4 bg-gradient-to-br from-rose-50 to-rose-100 dark:from-rose-900/40 dark:to-rose-800/60">
      <div class="text-xs text-rose-700 dark:text-rose-200">إجمالي الغياب بدون عذر</div>
      <div class="text-2xl font-extrabold mt-1 text-rose-800 dark:text-rose-100">{{ $summary['unexcused_total'] }}</div>
    </div>
    <div class="rounded-2xl p-4 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/40 dark:to-amber-800/60">
      <div class="text-xs text-amber-700 dark:text-amber-200">متوسط الغياب بدون عذر / عضو</div>
      <div class="text-2xl font-extrabold mt-1 text-amber-800 dark:text-amber-100">{{ $summary['avg_unexcused'] }}</div>
    </div>
  </div>

  {{-- أزرار الإرسال للواتساب --}}
  <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow flex flex-col md:flex-row md:items-center md:justify-between gap-3">
    <div class="text-xs text-gray-600 dark:text-gray-300 leading-relaxed">
      <div class="font-semibold mb-1">وضعيات الإرسال للواتساب:</div>
      <p>• <b>عرض مبسّط:</b> سطر واحد لكل عضو (مع عذر / بدون عذر).</p>
      <p>• <b>عرض متقدم:</b> تفاصيل كاملة (حضور، نسبة غياب، تصنيف الخطر).</p>
    </div>

    <div class="flex flex-col md:flex-row gap-2">
      {{-- مبسّط --}}
      <form method="POST" action="{{ route('superadmin.whatsapp.absences.send') }}">
        @csrf
        <input type="hidden" name="mode" value="simple">
        <input type="hidden" name="from" value="{{ $from }}">
        <input type="hidden" name="to" value="{{ $to }}">
        <input type="hidden" name="limit" value="{{ $limit }}">
        <button type="submit"
                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl
                       bg-emerald-600 text-white text-sm hover:bg-emerald-700 shadow">
          <i class="fa-brands fa-whatsapp text-lg"></i>
          <span>إرسال مبسّط</span>
        </button>
      </form>

      {{-- متقدم --}}
      <form method="POST" action="{{ route('superadmin.whatsapp.absences.send') }}">
        @csrf
        <input type="hidden" name="mode" value="advanced">
        <input type="hidden" name="from" value="{{ $from }}">
        <input type="hidden" name="to" value="{{ $to }}">
        <input type="hidden" name="limit" value="{{ $limit }}">
        <button type="submit"
                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl
                       bg-sky-600 text-white text-sm hover:bg-sky-700 shadow">
          <i class="fa-brands fa-whatsapp text-lg"></i>
          <span>إرسال متقدم</span>
        </button>
      </form>
    </div>
  </div>

  {{-- جدول الأعضاء --}}
  <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow">
    <div class="flex items-center justify-between mb-3">
      <h3 class="font-bold text-sm md:text-base text-gray-800 dark:text-gray-100">
        قائمة الغياب حسب الأكثر بدون عذر
      </h3>
      <span class="text-[11px] text-gray-500 dark:text-gray-400">
        يظهر حتى {{ $limit }} عضوًا
      </span>
    </div>

    <div class="space-y-3">
      @forelse($rows as $index => $r)
        <div class="rounded-xl p-3 border
            @if($r['risk_level']==='high') border-rose-300 bg-rose-50 dark:bg-rose-900/20 @endif
            @if($r['risk_level']==='mid')  border-amber-300 bg-amber-50 dark:bg-amber-900/20 @endif
            @if($r['risk_level']==='low')  border-emerald-300 bg-emerald-50 dark:bg-emerald-900/20 @endif
        ">
          <div class="flex items-center gap-3">
            <div class="h-8 w-8 rounded-full bg-slate-900/80 text-white text-xs flex items-center justify-center font-bold">
              #{{ $index + 1 }}
            </div>
            <div class="flex-1 min-w-0">
              <div class="flex items-center justify-between gap-2">
                <div class="min-w-0">
                  <div class="font-semibold text-sm text-gray-900 dark:text-white truncate">
                    {{ $r['name'] }}
                    @if($r['username'])
                      <span class="text-xs text-gray-400">({{ $r['username'] }})</span>
                    @endif
                  </div>
                  <div class="text-[11px] text-gray-500 dark:text-gray-400 mt-0.5">
                    {{ $r['risk_icon'] }} {{ $r['risk_text'] }}
                  </div>
                </div>
                <div class="text-right text-xs text-gray-600 dark:text-gray-300">
                  <div>مع عذر: <span class="font-bold text-emerald-700 dark:text-emerald-300">{{ $r['excused'] }}</span></div>
                  <div>بدون عذر: <span class="font-bold text-rose-700 dark:text-rose-300">{{ $r['unexcused'] }}</span></div>
                </div>
              </div>

              <div class="mt-2 grid grid-cols-3 gap-2 text-[11px] text-gray-600 dark:text-gray-300">
                <div class="bg-white/70 dark:bg-gray-900/40 rounded-lg px-2 py-1 flex items-center justify-between">
                  <span>الحضور</span>
                  <span class="font-semibold">{{ $r['present'] }}</span>
                </div>
                <div class="bg-white/70 dark:bg-gray-900/40 rounded-lg px-2 py-1 flex items-center justify-between">
                  <span>مجموع الغياب</span>
                  <span class="font-semibold">{{ $r['total_absences'] }}</span>
                </div>
                <div class="bg-white/70 dark:bg-gray-900/40 rounded-lg px-2 py-1 flex items-center justify-between">
                  <span>نسبة الغياب</span>
                  <span class="font-semibold">{{ $r['absence_rate'] }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      @empty
        <div class="text-sm text-gray-500 dark:text-gray-400 py-6 text-center">
          لا توجد سجلات غياب في هذه الفترة.
        </div>
      @endforelse
    </div>
  </div>

</div>
@endsection