@extends('layouts.superadmin')
@section('title','ساعات التواجد اليومية — غرفة رولا')
@section('page-title','ساعات التواجد اليومية')

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

  @if(!empty($error))
    <div class="bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-200 rounded-lg p-3">
      ⚠️ {{ $error }}
    </div>
  @endif

  {{-- الفلاتر --}}
  <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 p-4">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-3">
      <div>
        <label class="text-sm block mb-1">تاريخ اليوم</label>
        <input type="date" class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-white"
               name="date" value="{{ $date }}">
      </div>
      <div class="md:col-span-2">
        <label class="text-sm block mb-1">بحث بالاسم/اليوزر</label>
        <input type="text" name="q" value="{{ $q }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-white" placeholder="مثال: سارة / sara">
      </div>
      <div class="flex items-end">
        <button class="px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700">بحث</button>
      </div>
    </form>
  </div>

  {{-- ملخص اليوم --}}
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    <div class="rounded-xl p-4 bg-emerald-50 border-r-4 border-emerald-400">
      <div class="text-emerald-700 text-sm">إجمالي الدقائق</div>
      <div class="text-3xl font-bold">{{ number_format($totalMinutes,1) }}</div>
      <div class="text-xs text-gray-500">مجموع دقائق التواجد لهذا اليوم</div>
    </div>
  </div>

  {{-- الجدول --}}
  <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 p-0 overflow-x-auto">
    <table class="w-full text-sm">
      <thead class="bg-gray-50 dark:bg-gray-800/40">
        <tr class="text-right">
          <th class="p-3">#</th>
          <th class="p-3">الاسم</th>
          <th class="p-3">اليوزر</th>
          <th class="p-3">دقائق اليوم</th>
          <th class="p-3">آخر تواجد</th>
        </tr>
      </thead>
      <tbody>
        @forelse($rows as $i => $r)
          <tr class="border-t dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/30">
            <td class="p-3">{{ $i+1 }}</td>
            <td class="p-3 font-semibold">{{ $r->name }}</td>
            <td class="p-3 text-xs text-gray-500">{{ $r->username ?? '-' }}</td>
            <td class="p-3 text-emerald-600 font-bold">{{ number_format($r->minutes,1) }} د</td>
            <td class="p-3 text-xs text-gray-500">{{ \Carbon\Carbon::parse($r->last_seen_at)->timezone(config('app.timezone','Asia/Jerusalem'))->format('Y-m-d H:i') }}</td>
          </tr>
        @empty
          <tr><td colspan="5" class="p-6 text-center text-gray-500">لا توجد بيانات لهذا اليوم.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection