@extends('layouts.superadmin')
@section('title','متابعة صقر للشباب — ساعات التواجد')
@section('page-title','⏱️ ساعات التواجد اليومية — الشباب')

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

  {{-- تنبيه لو ما في جدول --}}
  @if(!$stats['has_data'])
    <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-300 dark:border-amber-700 rounded-xl p-4 text-sm text-amber-800 dark:text-amber-200">
      ⚠️ جدول <b>user_live_sessions</b> غير متاح أو الأعمدة المطلوبة غير موجودة.
      ستظهر البيانات هنا تلقائيًا عند توفر السجلّات.
    </div>
  @endif

  {{-- فلاتر --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700 p-4">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
      <div class="md:col-span-2">
        <label class="text-sm">المدى (أيام)</label>
        <select name="days" class="w-full rounded border-gray-300">
          @foreach([7,14,30] as $d)
            <option value="{{ $d }}" @selected($days==$d)>{{ $d }}</option>
          @endforeach
        </select>
      </div>
      <div class="md:col-span-3">
        <label class="text-sm">من</label>
        <input type="date" name="from" value="{{ $stats['from'] }}" class="w-full rounded border-gray-300">
      </div>
      <div class="md:col-span-3">
        <label class="text-sm">إلى</label>
        <input type="date" name="to" value="{{ $stats['to'] }}" class="w-full rounded border-gray-300">
      </div>
      <div class="md:col-span-2">
        <label class="text-sm">حد أدنى للمجموع (د)</label>
        <input type="number" min="0" name="min" value="{{ $stats['min'] }}" class="w-full rounded border-gray-300">
      </div>
      <div class="md:col-span-2">
        <label class="text-sm">ترتيب</label>
        <select name="sort" class="w-full rounded border-gray-300">
          <option value="total_desc" @selected($stats['sort']=='total_desc')>حسب المجموع ▼</option>
          <option value="name"       @selected($stats['sort']=='name')>حسب الاسم</option>
          <option value="last"       @selected($stats['sort']=='last')>آخر نشاط</option>
        </select>
      </div>
      <div class="md:col-span-4">
        <label class="text-sm">بحث (اسم/يوزر)</label>
        <input type="text" name="q" value="{{ $q }}" class="w-full rounded border-gray-300" placeholder="ابحث باسم/يوزر...">
      </div>
      <div class="md:col-span-4 flex gap-2">
        <button class="px-3 py-2 rounded bg-primary-600 text-white">تطبيق</button>
        <a href="{{ request()->fullUrlWithQuery(['export'=>1]) }}"
           class="px-3 py-2 rounded bg-emerald-600 text-white">⬇️ تصدير CSV</a>
      </div>
    </form>
  </div>

  {{-- جدول التواجد --}}
  <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 overflow-x-auto">
    <table class="min-w-full text-sm">
      <thead class="bg-gray-50 dark:bg-gray-800">
        <tr>
          <th class="px-3 py-2 text-right">#</th>
          <th class="px-3 py-2 text-right">الاسم</th>
          <th class="px-3 py-2 text-right">المعرف</th>
          <th class="px-3 py-2 text-right">الإجمالي (د)</th>
          @foreach($dates as $d)
            <th class="px-2 py-2 text-center text-xs whitespace-nowrap">{{ $d }}</th>
          @endforeach
          <th class="px-3 py-2 text-right">آخر نشاط</th>
        </tr>
      </thead>
      <tbody>
        @php
          $cellClass = function($m){
            $m = (int)$m;
            if ($m >= 60) return 'bg-emerald-600 text-white';
            if ($m >= 30) return 'bg-emerald-400 text-white';
            if ($m >= 15) return 'bg-amber-300';
            if ($m > 0)   return 'bg-amber-100';
            return 'bg-gray-100 text-gray-400';
          };
        @endphp

        @forelse($users as $idx => $u)
          <tr class="border-t border-gray-100 dark:border-gray-800">
            <td class="px-3 py-2">{{ $idx+1 }}</td>
            <td class="px-3 py-2 whitespace-nowrap font-medium">{{ $u['name'] }}</td>
            <td class="px-3 py-2 text-xs text-gray-500">{{ $u['username'] }}</td>
            <td class="px-3 py-2 font-bold">{{ $u['total'] }}</td>

            @foreach($dates as $d)
              @php $m = $u['days'][$d] ?? 0; @endphp
              <td class="px-1 py-1 text-center">
                <div class="rounded {{ $cellClass($m) }} px-1.5 py-1">{{ $m }}</div>
              </td>
            @endforeach

            <td class="px-3 py-2 text-xs text-gray-500">
              {{ $u['last_at'] ? \Carbon\Carbon::parse($u['last_at'])->diffForHumans() : '—' }}
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="{{ 5 + $dates->count() }}" class="px-3 py-6 text-center text-gray-500">
              لا توجد بيانات ضمن المدى المحدد.
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- دليل الألوان --}}
  <div class="flex items-center gap-3 text-xs text-gray-600 dark:text-gray-300">
    <span class="inline-block w-4 h-3 rounded bg-gray-100 border"></span> 0 د
    <span class="inline-block w-4 h-3 rounded bg-amber-100 border"></span> 1–14 د
    <span class="inline-block w-4 h-3 rounded bg-amber-300 border"></span> 15–59 د
    <span class="inline-block w-4 h-3 rounded bg-emerald-400 border"></span> 60–119 د
    <span class="inline-block w-4 h-3 rounded bg-emerald-600 border"></span> 120+ د
  </div>

</div>
@endsection