@extends('layouts.superadmin')

@section('title','تواجد الأعضاء على البوابة (واتساب)')
@section('page-title','🛰 تواجد الأعضاء على بوابة الفريق — تكامل واتساب')

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

    {{-- شرح وتعريف النظام --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm">
        <h2 class="font-extrabold text-lg mb-2 text-gray-900 dark:text-gray-50">
            ما هو تقرير تواجد الأعضاء؟
        </h2>
        <p class="text-gray-600 dark:text-gray-300 text-sm leading-6">
            هذه الصفحة مخصّصة لمتابعة <b>تواجد الأعضاء داخل بوابة الفريق</b> وإرسال تقارير جاهزة إلى
            جروبات الواتساب.
        </p>
        <p class="mt-3 text-xs text-gray-500 dark:text-gray-400 leading-5">
            ⏱ <b>ساعات التواجد</b> = مجموع الوقت الذي يقضيه العضو داخل صفحات البوابة
            (لوحة التحكم، التقارير، المتابعات، ...).<br>
            🚪 <b>مرّات الدخول</b> = عدد المرّات التي فتح فيها العضو البوابة وسجّل نشاطاً داخلها خلال الفترة.
        </p>
    </div>

    {{-- فلاتر الفترة --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-3">
            <div>
                <label class="block text-xs text-gray-500 mb-1">من تاريخ</label>
                <input type="date" name="from" value="{{ $from }}"
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 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-lg border-gray-300 dark:border-gray-600 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="5" max="200"
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">نافذة المتواجدين الآن (دقيقة)</label>
                <input type="number" name="online_window" value="{{ $onlineWindow }}" min="1" max="60"
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
            </div>
            <div class="flex items-end">
                <button type="submit"
                        class="w-full inline-flex items-center justify-center px-4 py-2.5 rounded-lg
                               bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold shadow-sm">
                    تحديث النتائج ⟳
                </button>
            </div>
        </form>
        <p class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
            الفترة الحالية: <b>{{ $from }}</b> → <b>{{ $to }}</b> ({{ $rangeDays }} يومًا) — Top {{ $limit }}
        </p>
    </div>

    {{-- ملخص سريع --}}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
        <div class="rounded-xl p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900/20 dark:to-emerald-800/20 border-r-4 border-emerald-500">
            <div class="text-xs text-emerald-700 dark:text-emerald-200">إجمالي ساعات التواجد في الفترة</div>
            <div class="text-2xl font-extrabold mt-1 text-emerald-900 dark:text-emerald-50">
                {{ number_format($summary['total_hours_all'] ?? 0, 1) }} س
            </div>
        </div>
        <div class="rounded-xl p-4 bg-gradient-to-br from-sky-50 to-sky-100 dark:from-sky-900/20 dark:to-sky-800/20 border-r-4 border-sky-500">
            <div class="text-xs text-sky-700 dark:text-sky-200">المتواجدون الآن داخل البوابة</div>
            <div class="text-2xl font-extrabold mt-1 text-sky-900 dark:text-sky-50">
                {{ $summary['online_count'] ?? 0 }} عضو
            </div>
        </div>
        <div class="rounded-xl p-4 bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 border-r-4 border-indigo-500">
            <div class="text-xs text-indigo-700 dark:text-indigo-200">أعضاء الفريق (بيتا + رسمي)</div>
            <div class="text-2xl font-extrabold mt-1 text-indigo-900 dark:text-indigo-50">
                {{ $summary['members_count'] ?? 0 }}
            </div>
        </div>
        <div class="rounded-xl p-4 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-800/20 border-r-4 border-amber-500">
            <div class="text-xs text-amber-700 dark:text-amber-200">عدد حسابات الإدارة / المشرفين / المستشارين</div>
            <div class="text-2xl font-extrabold mt-1 text-amber-900 dark:text-amber-50">
                {{ $summary['staff_count'] ?? 0 }}
            </div>
        </div>
    </div>

    {{-- كارت: المتواجدون الآن --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h3 class="font-bold text-gray-900 dark:text-gray-50">
                    🟢 المتواجدون الآن داخل البوابة
                </h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    آخر {{ $onlineWindow }} دقيقة — حسب جدول <code>sessions</code> (آخر نشاط حقيقي داخل النظام).
                </p>
            </div>
            <form method="POST" action="{{ route('superadmin.whatsapp.presence.send') }}">
                @csrf
                <input type="hidden" name="type" value="online">
                <input type="hidden" name="from" value="{{ $from }}">
                <input type="hidden" name="to" value="{{ $to }}">
                <input type="hidden" name="limit" value="{{ $limit }}">
                <input type="hidden" name="online_window" value="{{ $onlineWindow }}">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white text-xs font-semibold shadow">
                    📩 إرسال تقرير المتواجدين الآن للواتساب
                </button>
            </form>
        </div>

        <div class="space-y-2 text-sm">
            @forelse($onlineUsers as $i => $u)
                <div class="flex items-center justify-between">
                    <div class="truncate">
                        <span class="text-gray-400 text-xs">#{{ $i+1 }}</span>
                        <span class="font-semibold text-gray-800 dark:text-gray-100">{{ $u->name }}</span>
                        <span class="text-gray-500">({{ $u->username }})</span>
                    </div>
                    <div class="text-[11px] text-gray-500 dark:text-gray-400">
                        آخر نشاط:
                        @if($u->last_activity)
                            {{ $u->last_activity->diffForHumans(null, true) }} مضت
                        @else
                            غير محدد
                        @endif
                        @if($u->ip_address)
                            • IP: {{ $u->ip_address }}
                        @endif
                    </div>
                </div>
            @empty
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    لا يوجد أي عضو متواجد حالياً داخل البوابة في نافذة {{ $onlineWindow }} دقيقة.
                </div>
            @endforelse
        </div>
    </div>

    {{-- كارت: أكثر الأعضاء تواجداً (أعضاء فقط) --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h3 class="font-bold text-gray-900 dark:text-gray-50">
                    ⏱ أكثر الأعضاء تواجداً (أعضاء فقط)
                </h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    Top {{ $limit }} عضو من حيث <b>ساعات التواجد</b> داخل البوابة خلال الفترة.
                </p>
            </div>
            <form method="POST" action="{{ route('superadmin.whatsapp.presence.send') }}">
                @csrf
                <input type="hidden" name="type" value="members">
                <input type="hidden" name="from" value="{{ $from }}">
                <input type="hidden" name="to" value="{{ $to }}">
                <input type="hidden" name="limit" value="{{ $limit }}">
                <input type="hidden" name="online_window" value="{{ $onlineWindow }}">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold shadow">
                    📩 إرسال تقرير الأعضاء للواتساب
                </button>
            </form>
        </div>

        <div class="space-y-2 text-sm">
            @forelse($topMembers->take(10) as $i => $row)
                <div class="flex items-center justify-between">
                    <div class="truncate">
                        <span class="text-gray-400 text-xs">#{{ $i+1 }}</span>
                        <span class="font-semibold text-gray-800 dark:text-gray-100">{{ $row->name }}</span>
                        <span class="text-gray-500">({{ $row->username }})</span>
                    </div>
                    <div class="text-[11px] text-gray-500 dark:text-gray-400">
                        {{ number_format($row->total_hours,2) }} س • {{ $row->visits }} دخول
                    </div>
                </div>
            @empty
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    لا توجد بيانات تواجد لأعضاء الفريق في هذه الفترة.
                </div>
            @endforelse
        </div>
    </div>

    {{-- كارت: تواجد الإدارة / المشرفين / المستشارين --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h3 class="font-bold text-gray-900 dark:text-gray-50">
                    🛡 تواجد الإدارة / المشرفين / المستشارين
                </h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    Top {{ $limit }} حساب إداري من حيث ساعات التواجد داخل النظام.
                </p>
            </div>
            <form method="POST" action="{{ route('superadmin.whatsapp.presence.send') }}">
                @csrf
                <input type="hidden" name="type" value="staff">
                <input type="hidden" name="from" value="{{ $from }}">
                <input type="hidden" name="to" value="{{ $to }}">
                <input type="hidden" name="limit" value="{{ $limit }}">
                <input type="hidden" name="online_window" value="{{ $onlineWindow }}">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold shadow">
                    📩 إرسال تقرير الإدارة للواتساب
                </button>
            </form>
        </div>

        <div class="space-y-2 text-sm">
            @forelse($staffPresence->take(10) as $i => $row)
                <div class="flex items-center justify-between">
                    <div class="truncate">
                        <span class="text-gray-400 text-xs">#{{ $i+1 }}</span>
                        <span class="font-semibold text-gray-800 dark:text-gray-100">{{ $row->name }}</span>
                        <span class="text-gray-500">({{ $row->username }})</span>
                    </div>
                    <div class="text-[11px] text-gray-500 dark:text-gray-400">
                        {{ number_format($row->total_hours,2) }} س • {{ $row->visits }} دخول
                    </div>
                </div>
            @empty
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    لا توجد بيانات تواجد للإدارة أو المشرفين أو المستشارين في هذه الفترة.
                </div>
            @endforelse
        </div>
    </div>

    {{-- كارت: أعضاء بخطر من ناحية التواجد --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h3 class="font-bold text-gray-900 dark:text-gray-50">
                    ⚠️ أعضاء بخطر من ناحية التواجد
                </h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 leading-5">
                    يظهر هنا الأعضاء الذين:
                    <br>• لم يسجلوا أي تواجد في الفترة، أو
                    <br>• آخر دخول لهم منذ 7 أيام فأكثر، أو
                    <br>• مجموع تواجدهم أقل من ساعة واحدة في الفترة المحددة.
                </p>
            </div>
            <form method="POST" action="{{ route('superadmin.whatsapp.presence.send') }}">
                @csrf
                <input type="hidden" name="type" value="risk">
                <input type="hidden" name="from" value="{{ $from }}">
                <input type="hidden" name="to" value="{{ $to }}">
                <input type="hidden" name="limit" value="{{ $limit }}">
                <input type="hidden" name="online_window" value="{{ $onlineWindow }}">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-xs font-semibold shadow">
                    📩 إرسال قائمة الخطر للواتساب
                </button>
            </form>
        </div>

        <div class="space-y-2 text-sm">
            @forelse($riskMembers->take(10) as $i => $row)
                @php
                    $lastSeen = $row->last_seen ? \Carbon\Carbon::parse($row->last_seen) : null;
                    $daysAgo  = $lastSeen ? $lastSeen->diffInDays(\Carbon\Carbon::now()) : null;
                @endphp
                <div class="flex items-center justify-between">
                    <div class="truncate">
                        <span class="text-gray-400 text-xs">#{{ $i+1 }}</span>
                        <span class="font-semibold text-gray-800 dark:text-gray-100">{{ $row->name }}</span>
                        <span class="text-gray-500">({{ $row->username }})</span>
                    </div>
                    <div class="text-[11px] text-gray-500 dark:text-gray-400">
                        {{ number_format($row->total_hours,2) }} س • {{ $row->visits }} دخول •
                        آخر دخول:
                        @if($daysAgo !== null)
                            قبل {{ $daysAgo }} يوم
                        @else
                            لا يوجد دخول في الفترة
                        @endif
                    </div>
                </div>
            @empty
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    لا يوجد أعضاء تنطبق عليهم شروط الخطر في هذه الفترة.
                </div>
            @endforelse
        </div>
    </div>

    {{-- كارت: جميع الأعضاء حسب ساعات التواجد --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h3 class="font-bold text-gray-900 dark:text-gray-50">
                    📊 جميع الأعضاء حسب ساعات التواجد
                </h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    Top {{ $limit }} عضو من حيث ساعات التواجد داخل البوابة، بغض النظر عن الرتبة.
                </p>
            </div>
            <form method="POST" action="{{ route('superadmin.whatsapp.presence.send') }}">
                @csrf
                <input type="hidden" name="type" value="hours">
                <input type="hidden" name="from" value="{{ $from }}">
                <input type="hidden" name="to" value="{{ $to }}">
                <input type="hidden" name="limit" value="{{ $limit }}">
                <input type="hidden" name="online_window" value="{{ $onlineWindow }}">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-800 text-white text-xs font-semibold shadow">
                    📩 إرسال التقرير الكامل للواتساب
                </button>
            </form>
        </div>

        <div class="space-y-2 text-sm">
            @forelse($allByHours->take(10) as $i => $row)
                <div class="flex items-center justify-between">
                    <div class="truncate">
                        <span class="text-gray-400 text-xs">#{{ $i+1 }}</span>
                        <span class="font-semibold text-gray-800 dark:text-gray-100">{{ $row->name }}</span>
                        <span class="text-gray-500">({{ $row->username }})</span>
                    </div>
                    <div class="text-[11px] text-gray-500 dark:text-gray-400">
                        {{ number_format($row->total_hours,2) }} س • {{ $row->visits }} دخول
                    </div>
                </div>
            @empty
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    لا توجد أي بيانات تواجد في هذه الفترة.
                </div>
            @endforelse
        </div>
    </div>

</div>
@endsection