{{-- resources/views/superadmin/falcon-room/online-members.blade.php --}}
@extends('layouts.superadmin')

@section('title','غرفة الصقر — الأعضاء المتواجدون الآن')
@section('page-title','🟢 الأعضاء المتواجدون الآن — مركز الحضور المباشر')

@section('content')
@php
    use Carbon\Carbon;
    $tz = config('app.timezone','Asia/Jerusalem');

    function presenceStateLocal($dt) {
        if (!$dt) return ['label' => 'غير معروف', 'class' => 'bg-slate-100 text-slate-700 border border-slate-200'];
        $mins = Carbon::parse($dt)->diffInMinutes();

        if ($mins <= 5)   return ['label'=>'متصل الآن','class'=>'bg-emerald-50 text-emerald-700 border border-emerald-200'];
        if ($mins <= 10)  return ['label'=>'مشغول','class'=>'bg-yellow-50 text-yellow-700 border border-yellow-200'];
        if ($mins <= 30)  return ['label'=>'على وشك الانقطاع','class'=>'bg-amber-50 text-amber-700 border border-amber-200'];
        return ['label'=>'غير متصل','class'=>'bg-slate-100 text-slate-600 border border-slate-200'];
    }
@endphp

@push('styles')
<style>
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    .online-badge-pulse { animation: onlinePulse 1.8s ease-out infinite; }
    @keyframes onlinePulse {
        0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
        70%  { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
        100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    .sc-scrollbar::-webkit-scrollbar{ width:10px; }
    .sc-scrollbar::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
    .sc-scrollbar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
    .sc-scrollbar::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }
</style>
@endpush

<div class="min-h-screen rtl" dir="rtl"
     style="background:
       radial-gradient(45vmax 45vmax at 115% -10%, rgba(59,130,246,.18) 0, transparent 60%),
       radial-gradient(38vmax 38vmax at -10% 120%, rgba(34,211,238,.14) 0, transparent 60%),
       linear-gradient(180deg, #020617 0%, #0b1224 45%, #020617 100%);">

<div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-5 sm:py-6 space-y-6">

    {{-- HERO (Black + Blue mix) --}}
    <section class="relative overflow-hidden rounded-3xl shadow-2xl
                    bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                    border border-sky-500/25 text-white">
        <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-sky-500/16 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-32 -left-16 w-80 h-80 rounded-full bg-indigo-500/14 blur-3xl"></div>

        <div class="relative px-4 sm:px-6 py-4 sm:py-6 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
            <div class="space-y-2 min-w-0">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full
                            bg-slate-950/60 border border-sky-400/30 text-[11px]">
                    <i class="fa-solid fa-feather-pointed text-[10px] text-sky-300"></i>
                    <span>غرفة الصقر — مركز الحضور المباشر</span>
                </div>

                <h1 class="text-lg sm:text-2xl font-extrabold tracking-tight flex items-center gap-2">
                    🟢 الأعضاء المتواجدون الآن
                </h1>

                <p class="text-[11px] sm:text-[13px] text-white/75 leading-relaxed max-w-2xl">
                    لوحة ميدانية لعرض الحركة داخل النظام لحظيًا: المتواجدون، أماكنهم، وحالة الحساب.
                    الهدف تنظيم ومتابعة عادلة — مش ضغط.
                </p>

                <div class="flex flex-wrap gap-2 pt-1">
                    <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                        <span class="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
                        مصدر البيانات: زمن الفوزي
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                        بدون ريفرش
                    </span>
                </div>
            </div>

            <div class="flex flex-col items-start lg:items-end gap-2 flex-shrink-0">
                <div class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl
                            bg-black/35 border border-sky-400/25 shadow-lg shadow-sky-500/20">
                    <span class="w-2 h-2 rounded-full bg-emerald-400 online-badge-pulse"></span>
                    <span class="text-[11px] sm:text-xs">تحديث تلقائي كل 15 ثانية</span>
                </div>
                <div class="text-[10px] text-white/60">
                    التوقيت: {{ now($tz)->format('Y-m-d H:i') }} ({{ $tz }})
                </div>
            </div>
        </div>
    </section>

    {{-- FILTERS (re-ordered, cleaner) --}}
    <section class="relative overflow-hidden rounded-3xl border border-white/10
                    bg-white/5 backdrop-blur-xl shadow-xl p-4 sm:p-6 space-y-4">
        <div class="pointer-events-none absolute -top-16 -left-16 w-64 h-64 rounded-full bg-sky-500/10 blur-3xl"></div>

        <div class="flex items-start justify-between gap-3">
            <div>
                <h2 class="text-sm sm:text-base font-extrabold text-white">
                    🎛️ فلاتر العرض
                </h2>
                <p class="text-[11px] sm:text-xs text-white/60">
                    ابحث بالاسم/اليوزر وحدد نوع العضو وحالة الحساب.
                </p>
            </div>

            <button type="button"
                    onclick="document.getElementById('filters-form').reset(); document.getElementById('filters-form').submit();"
                    class="hidden sm:inline-flex items-center gap-2 px-3 py-2 rounded-2xl
                           bg-white/10 hover:bg-white/15 border border-white/15
                           text-white/85 text-[12px] font-extrabold transition">
                <i class="fa-solid fa-rotate-left text-[12px]"></i>
                إعادة التعيين
            </button>
        </div>

        <form method="get" id="filters-form" class="space-y-3">
            {{-- Search --}}
            <div>
                <label class="text-[11px] text-white/60 mb-1 block">بحث بالاسم أو اليوزر</label>
                <div class="relative">
                    <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-white/35 text-xs"></i>
                    <input name="search" value="{{ $search }}"
                           class="w-full rounded-2xl border border-white/15 bg-black/35 text-white text-sm
                                  ps-10 pe-3 py-2.5 placeholder:text-white/25
                                  focus:outline-none focus:ring-2 focus:ring-sky-500/45 focus:border-sky-400/40">
                </div>
            </div>

            {{-- Selects --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                    <label class="text-[11px] text-white/60 mb-1 block">نوع العضو</label>
                    <select name="type"
                            class="w-full rounded-2xl border border-white/15 bg-black/35 text-white text-sm py-2.5 px-3
                                   focus:outline-none focus:ring-2 focus:ring-sky-500/45 focus:border-sky-400/40">
                        <option value="">الكل</option>
                        <option value="official" @selected($type==='official')>رسمي</option>
                        <option value="beta"     @selected($type==='beta')>بيتا</option>
                        <option value="moderator"@selected($type==='moderator')>مشرف</option>
                        <option value="advisor"  @selected($type==='advisor')>مستشار</option>
                        <option value="super-admin" @selected($type==='super-admin')>الإدارة العليا</option>
                        <option value="member" @selected($type==='member')>عضو</option>
                    </select>
                </div>

                <div>
                    <label class="text-[11px] text-white/60 mb-1 block">حالة الحساب</label>
                    <select name="status"
                            class="w-full rounded-2xl border border-white/15 bg-black/35 text-white text-sm py-2.5 px-3
                                   focus:outline-none focus:ring-2 focus:ring-sky-500/45 focus:border-sky-400/40">
                        <option value="">الكل</option>
                        <option value="active" @selected($status==='active')>مفعل</option>
                        <option value="suspended" @selected($status==='suspended')>معلّق</option>
                    </select>
                </div>
            </div>

            <button class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5
                           rounded-2xl bg-gradient-to-r from-sky-500 via-cyan-500 to-indigo-500
                           text-white text-sm font-extrabold shadow-lg shadow-sky-500/25 transition
                           hover:scale-[1.01] active:scale-100">
                <i class="fa-solid fa-filter text-xs"></i>
                <span>تطبيق الفلاتر</span>
            </button>
        </form>
    </section>

    {{-- STATS --}}
    <section class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="rounded-3xl bg-white/5 border border-white/10 backdrop-blur-xl shadow p-4">
            <div class="flex items-center justify-between mb-1">
                <span class="text-[11px] text-white/60">إجمالي المتواجدين</span>
                <span class="w-8 h-8 rounded-2xl bg-emerald-500/12 border border-emerald-400/20 grid place-items-center">
                    <i class="fa-solid fa-signal text-[12px] text-emerald-200"></i>
                </span>
            </div>
            <div class="text-2xl font-extrabold text-emerald-300" id="stat-total">{{ $totalOnline }}</div>
            <p class="text-[11px] text-white/50 mt-1">نشاط خلال آخر دقائق.</p>
        </div>

        <div class="rounded-3xl bg-white/5 border border-white/10 backdrop-blur-xl shadow p-4">
            <div class="flex items-center justify-between mb-1">
                <span class="text-[11px] text-white/60">مفعلين</span>
                <span class="w-8 h-8 rounded-2xl bg-sky-500/12 border border-sky-400/20 grid place-items-center">
                    <i class="fa-solid fa-user-check text-[12px] text-sky-200"></i>
                </span>
            </div>
            <div class="text-xl font-extrabold text-sky-200">{{ $onlineActive }}</div>
            <p class="text-[11px] text-white/50 mt-1">حسابات مسموح لها العمل.</p>
        </div>

        <div class="rounded-3xl bg-white/5 border border-white/10 backdrop-blur-xl shadow p-4">
            <div class="flex items-center justify-between mb-1">
                <span class="text-[11px] text-white/60">معلّقين</span>
                <span class="w-8 h-8 rounded-2xl bg-amber-500/12 border border-amber-400/20 grid place-items-center">
                    <i class="fa-solid fa-user-lock text-[12px] text-amber-200"></i>
                </span>
            </div>
            <div class="text-xl font-extrabold text-amber-200">{{ $onlineSusp }}</div>
            <p class="text-[11px] text-white/50 mt-1">تحت المراجعة/إيقاف.</p>
        </div>
    </section>

    {{-- MOBILE LIST --}}
    <div class="md:hidden space-y-3" id="online-mobile"></div>

    {{-- DESKTOP TABLE --}}
    <section class="hidden md:block rounded-3xl bg-white/5 border border-white/10 backdrop-blur-xl shadow p-4">
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-sm font-extrabold text-white">💻 عرض تفصيلي — المتواجدون الآن</h2>
            <span class="text-[11px] text-white/55">تحديث تلقائي بدون إعادة تحميل</span>
        </div>

        <div class="overflow-x-auto sc-scrollbar">
            <table class="w-full text-sm" id="online-table">
                <thead class="text-[11px] uppercase tracking-wide text-white/60">
                    <tr class="text-right border-b border-white/10">
                        <th class="p-2.5">العضو</th>
                        <th class="p-2.5">النوع</th>
                        <th class="p-2.5">اليوزر</th>
                        <th class="p-2.5">المكان الحالي</th>
                        <th class="p-2.5">الحالة</th>
                        <th class="p-2.5">آخر نشاط</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/10"></tbody>
            </table>
        </div>
    </section>

    {{-- EXPLAIN (cleaner blocks) --}}
    <section class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="rounded-3xl bg-white/5 border border-white/10 backdrop-blur-xl shadow p-5">
            <h2 class="text-base font-extrabold text-white mb-2">🧭 ما هي هذه الصفحة؟</h2>
            <p class="text-sm text-white/70 leading-relaxed">
                مركز حضور مباشر لمراقبة الحركة داخل النظام: من يتنقل بين الأقسام، وأين يوجد الآن.
                الهدف تنظيم العمل وتحسين التوزيع، وليس الضغط.
            </p>
        </div>

        <div class="rounded-3xl bg-white/5 border border-white/10 backdrop-blur-xl shadow p-5">
            <h3 class="text-base font-extrabold text-white mb-2">⚠️ استخدام مسؤول</h3>
            <ul class="list-disc ps-5 space-y-1.5 text-sm text-white/70">
                <li>التواجد لا يعني نشاط أمام الشاشة دائمًا.</li>
                <li>استخدمها للتحسين والتحفيز وليس الإحراج.</li>
                <li>اشرح للأعضاء فلسفة النظام للحفاظ على الثقة.</li>
            </ul>
        </div>
    </section>

    <div class="mt-6 pt-4 border-t border-white/10 text-[11px] text-center text-white/45">
        مركز الحضور المباشر — جزء من منظومة <span class="font-extrabold text-white/70">فريق الوفاء الذهبي</span>
    </div>

</div>
@endsection

@push('scripts')
<script>
(function () {

    const dataUrl = "{{ route('superadmin.falcon-room.online-members.data') }}";
    const filtersForm = document.getElementById('filters-form');

    function buildQuery() {
        return dataUrl + "?" + new URLSearchParams(new FormData(filtersForm)).toString();
    }

    function minutesState(mins) {
        if (mins <= 5)  return {label:'متصل الآن', class:'bg-emerald-50 text-emerald-700 border border-emerald-200'};
        if (mins <= 10) return {label:'مشغول', class:'bg-yellow-50 text-yellow-700 border border-yellow-200'};
        if (mins <= 30) return {label:'على وشك الانقطاع', class:'bg-amber-50 text-amber-700 border border-amber-200'};
        return {label:'غير متصل', class:'bg-slate-100 text-slate-600 border border-slate-200'};
    }

    function humanTime(d) {
        let diff = Math.floor((Date.now() - d.getTime()) / 60000);
        if (diff < 1) return 'قبل لحظات';
        if (diff < 60) return 'منذ ' + diff + ' دقيقة';
        let h = Math.floor(diff / 60);
        if (h === 1) return 'منذ ساعة';
        if (h < 5) return 'منذ ' + h + ' ساعات';
        return 'منذ أكثر من ' + h + ' ساعة';
    }

    function membershipLabel(t) {
        return {
            official:'رسمي',
            beta:'بيتا',
            moderator:'مشرف',
            advisor:'مستشار',
            'super-admin':'الإدارة العليا',
            member:'عضو'
        }[t] ?? 'عضو';
    }

    // ✅ Dark+Blue pills
    function membershipClass(t) {
        return {
            official:'bg-emerald-500/12 border border-emerald-400/20 text-emerald-200',
            beta:'bg-amber-500/12 border border-amber-400/20 text-amber-200',
            moderator:'bg-sky-500/12 border border-sky-400/20 text-sky-200',
            advisor:'bg-violet-500/12 border border-violet-400/20 text-violet-200',
            'super-admin':'bg-rose-500/12 border border-rose-400/20 text-rose-200',
            member:'bg-white/5 border border-white/10 text-white/75'
        }[t] ?? 'bg-white/5 border border-white/10 text-white/75';
    }

    function renderMobile(u) {
        const d  = u.last_visit_iso ? new Date(u.last_visit_iso) : null;
        const m  = d ? Math.floor((Date.now() - d.getTime()) / 60000) : 9999;
        const st = minutesState(m);
        const ht = d ? humanTime(d) : '—';

        const tLabel = membershipLabel(u.membership_status);
        const tClass = membershipClass(u.membership_status);

        const avatar = u.avatar_url
            ? u.avatar_url
            : 'https://ui-avatars.com/api/?name=' + encodeURIComponent(u.name || 'User');

        return `
        <div class="rounded-3xl bg-white/5 border border-white/10 backdrop-blur-xl shadow p-4 space-y-3" data-user-id="${u.id}">
            <div class="flex items-center justify-between gap-2">
                <div class="flex items-center gap-3 min-w-0">
                    <img class="w-11 h-11 rounded-2xl object-cover border border-white/10" src="${avatar}">
                    <div class="min-w-0">
                        <div class="text-sm font-extrabold text-white truncate">${u.name}</div>
                        <div class="text-[11px] text-white/55 truncate">@${u.username} • #${u.id}</div>
                    </div>
                </div>
                <span class="px-3 py-1 rounded-full text-[11px] font-extrabold ${tClass}">
                    ${tLabel}
                </span>
            </div>

            <div class="flex flex-wrap items-center gap-2 text-[11px]">
                <span class="presence-badge px-2.5 py-1 rounded-full ${st.class}">${st.label}</span>
                <span class="last-seen text-white/55">آخر نشاط: ${ht}</span>
            </div>

            <div class="text-[11px] text-white/70">
                <span class="font-extrabold text-white/80">المكان الحالي:</span>
                <span class="current-place">${u.current_place ?? 'غير محدد'}</span>
            </div>
        </div>`;
    }

    function renderRow(u) {
        const d  = u.last_visit_iso ? new Date(u.last_visit_iso) : null;
        const m  = d ? Math.floor((Date.now() - d.getTime()) / 60000) : 9999;
        const st = minutesState(m);
        const ht = d ? humanTime(d) : '—';

        const tLabel = membershipLabel(u.membership_status);
        const tClass = membershipClass(u.membership_status);

        const avatar = u.avatar_url
            ? u.avatar_url
            : 'https://ui-avatars.com/api/?name=' + encodeURIComponent(u.name || 'User');

        return `
        <tr class="border-t border-white/10" data-user-id="${u.id}">
            <td class="p-2.5">
                <div class="flex items-center gap-3">
                    <img class="w-9 h-9 rounded-2xl object-cover border border-white/10" src="${avatar}">
                    <div class="min-w-0">
                        <div class="font-extrabold text-white truncate">${u.name}</div>
                        <div class="text-[11px] text-white/55">#${u.id}</div>
                    </div>
                </div>
            </td>
            <td class="p-2.5">
                <span class="px-3 py-1 text-[11px] rounded-full font-extrabold ${tClass}">${tLabel}</span>
            </td>
            <td class="p-2.5 text-xs text-white/80">@${u.username}</td>
            <td class="p-2.5 text-xs text-white/70 current-place">${u.current_place ?? 'غير محدد'}</td>
            <td class="p-2.5">
                <span class="presence-badge px-2.5 py-1 text-[11px] rounded-full ${st.class}">${st.label}</span>
            </td>
            <td class="p-2.5 last-seen text-xs text-white/60">${ht}</td>
        </tr>`;
    }

    function updateUI(list) {
        const mobile = document.getElementById('online-mobile');
        const tbody  = document.querySelector('#online-table tbody');

        mobile.innerHTML = list.map(renderMobile).join('');
        tbody.innerHTML  = list.map(renderRow).join('');

        const totalEl = document.getElementById('stat-total');
        if (totalEl) totalEl.textContent = list.length;
    }

    function fetchData() {
        fetch(buildQuery(), { headers: {'Accept':'application/json'} })
            .then(r => r.json())
            .then(d => {
                if (!d || !d.users) return;
                updateUI(d.users);
            })
            .catch(() => {});
    }

    fetchData();
    setInterval(fetchData, 15000);

})();
</script>
@endpush