{{-- resources/views/advisor/monitor/risk-members.blade.php --}}
@extends('layouts.advisor')

@section('title', 'مؤشرات الخطر والإنذارات')
@section('page-title', '🚨 مؤشرات الخطر والإنذارات — Risk Members')

@section('content')
@php
    $typeLabels = [
        'warning'   => 'إنذار',
        'violation' => 'مخالفة',
    ];

    $typeColors = [
        'warning'   => 'bg-amber-50 text-amber-800 border-amber-200 dark:bg-amber-900/40 dark:text-amber-100 dark:border-amber-500/60',
        'violation' => 'bg-rose-50 text-rose-800 border-rose-200 dark:bg-rose-900/40 dark:text-rose-100 dark:border-rose-500/60',
    ];

    $statusLabels = [
        'pending'  => 'قيد المتابعة',
        'active'   => 'فعّال',
        'resolved' => 'مغلق / محلول',
    ];

    $statusColors = [
        'pending'  => 'bg-sky-50 text-sky-800 border-sky-200 dark:bg-sky-900/40 dark:text-sky-100 dark:border-sky-500/60',
        'active'   => 'bg-emerald-50 text-emerald-800 border-emerald-200 dark:bg-emerald-900/40 dark:text-emerald-100 dark:border-emerald-500/60',
        'resolved' => 'bg-slate-50 text-slate-800 border-slate-200 dark:bg-slate-900/60 dark:text-slate-100 dark:border-slate-600',
    ];

    $total        = $stats['total']          ?? 0;
    $totalWarn    = $stats['warnings']       ?? 0;
    $totalViol    = $stats['violations']     ?? 0;
    $ackCount     = $stats['acknowledged']   ?? 0;
    $unAckCount   = $stats['unacknowledged'] ?? 0;
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-100 via-slate-50 to-slate-100 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
    <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-6 sm:py-8 space-y-6">

        {{-- هيدر رئيسي --}}
        <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-24 -left-10 w-40 h-40 rounded-full bg-rose-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -right-14 w-52 h-52 rounded-full bg-amber-300/20 blur-3xl"></div>

            <div class="relative p-5 sm:p-6 lg:p-7 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="space-y-2">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-rose-50 text-rose-700 text-[11px] font-medium dark:bg-rose-500/15 dark:text-rose-100">
                        <i class="fa-solid fa-user-shield text-[11px]"></i>
                        <span>قسم مؤشرات الخطر والإنذارات على الأعضاء</span>
                    </div>

                    <h1 class="text-lg sm:text-2xl lg:text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
                        متابعة الأعضاء تحت المراقبة (إنذارات ومخالفات)
                    </h1>

                    <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300 max-w-xl">
                        هذه الصفحة تظهر كل الإنذارات والمخالفات الموجهة للأعضاء، لمساعدة المستشار في اكتشاف
                        الحالات الحساسة مبكراً، والتواصل التربوي قبل الوصول لقرارات قاسية. 💛
                    </p>
                </div>

                <div class="self-stretch sm:self-auto flex sm:block justify-end">
                    <div class="rounded-2xl bg-slate-900 text-slate-100 px-4 py-3 text-xs sm:text-sm shadow-md dark:bg-black/70">
                        <div class="text-[11px] text-slate-300 mb-1">المستشار</div>
                        <div class="font-semibold text-sm sm:text-base">
                            {{ $advisor->name }}
                        </div>
                        <div class="text-[10px] text-slate-400 mt-1">
                            {{ now()->locale('ar')->timezone(config('app.timezone'))->isoFormat('dddd D MMM YYYY, h:mm a') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- فلاتر البحث --}}
        <div class="rounded-3xl bg-white/95 border border-slate-200 shadow-sm p-4 sm:p-5 space-y-3 dark:bg-slate-900/90 dark:border-slate-700">
            <form method="GET" class="space-y-3">
                <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-2.5 sm:gap-3">

                    {{-- نوع الحدث --}}
                    <div class="flex flex-col gap-1">
                        <label class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">نوع الحدث</label>
                        <select name="reason"
                                class="h-9 sm:h-10 rounded-xl bg-slate-50 border border-slate-200 text-[11px] sm:text-xs px-2.5
                                       focus:outline-none focus:ring-1 focus:ring-rose-400/70
                                       dark:bg-slate-900 dark:border-slate-700 dark:text-slate-50">
                            <option value="">كل الأنواع</option>
                            <option value="warning" {{ $reason === 'warning' ? 'selected' : '' }}>إنذارات</option>
                            <option value="violation" {{ $reason === 'violation' ? 'selected' : '' }}>مخالفات</option>
                        </select>
                    </div>

                    {{-- بحث عام --}}
                    <div class="flex flex-col gap-1 col-span-2 sm:col-span-2 lg:col-span-3">
                        <label class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">
                            بحث بالعضو / العنوان / الوصف
                        </label>
                        <input type="text" name="search" value="{{ $search }}"
                               placeholder="مثال: اسم العضو، عنوان الإنذار، ملاحظة خاصة..."
                               class="h-9 sm:h-10 rounded-xl bg-slate-50 border border-slate-200 text-xs sm:text-sm px-2.5
                                      focus:outline-none focus:ring-1 focus:ring-sky-400/70
                                      dark:bg-slate-900 dark:border-slate-700 dark:text-slate-50">
                    </div>
                </div>

                <div class="flex flex-wrap items-center justify-between gap-2 pt-1">
                    <div class="flex gap-2">
                        <button type="submit"
                                class="inline-flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl
                                       bg-sky-500/90 hover:bg-sky-500 text-xs sm:text-sm font-medium text-white
                                       shadow-md shadow-sky-400/40">
                            <i class="fa-solid fa-magnifying-glass text-[10px] sm:text-xs"></i>
                            <span>تطبيق الفلاتر</span>
                        </button>

                        <a href="{{ route('advisor.monitor.risk-members') }}"
                           class="inline-flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl
                                  bg-slate-100 hover:bg-slate-200 text-[11px] sm:text-xs text-slate-700 border border-slate-200
                                  dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-100 dark:border-slate-600">
                            <i class="fa-solid fa-rotate-left text-[10px] sm:text-xs"></i>
                            <span>إعادة ضبط</span>
                        </a>
                    </div>

                    <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                        عدد السجلات المطابقة للفلاتر:
                        <span class="font-semibold text-slate-900 dark:text-white">{{ $total }}</span>
                    </div>
                </div>
            </form>
        </div>

        {{-- كروت إحصائية --}}
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">

            {{-- إجمالي السجلات --}}
            <div class="rounded-2xl bg-gradient-to-br from-slate-900 via-slate-900 to-slate-950 border border-slate-700 shadow-sm p-3 sm:p-4 text-slate-100">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs">إجمالي السجلات</span>
                    <i class="fa-solid fa-list-check text-[12px] text-emerald-300"></i>
                </div>
                <div class="text-2xl sm:text-3xl font-extrabold text-emerald-300">
                    {{ $total }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-slate-300">
                    كل الإنذارات والمخالفات المسجّلة للأعضاء ضمن الفلاتر الحالية.
                </p>
            </div>

            {{-- إنذارات --}}
            <div class="rounded-2xl bg-amber-50 dark:bg-amber-900/25 border border-amber-200/80 dark:border-amber-500/60 p-3 sm:p-4">
                <div class="flex items-center justify-between mb-1 gap-2">
                    <span class="text-[11px] sm:text-xs text-amber-900 dark:text-amber-100">إنذارات</span>
                    <i class="fa-solid fa-bell text-[12px] text-amber-500 dark:text-amber-300"></i>
                </div>
                <div class="text-2xl sm:text-3xl font-extrabold text-amber-700 dark:text-amber-200">
                    {{ $totalWarn }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-amber-900/70 dark:text-amber-100/80">
                    لفت نظر وتنبيه قبل الوصول لمخالفة.
                </p>
            </div>

            {{-- مخالفات --}}
            <div class="rounded-2xl bg-rose-50 dark:bg-rose-900/25 border border-rose-200/80 dark:border-rose-500/60 p-3 sm:p-4">
                <div class="flex items-center justify-between mb-1 gap-2">
                    <span class="text-[11px] sm:text-xs text-rose-900 dark:text-rose-100">مخالفات</span>
                    <i class="fa-solid fa-triangle-exclamation text-[12px] text-rose-500 dark:text-rose-300"></i>
                </div>
                <div class="text-2xl sm:text-3xl font-extrabold text-rose-700 dark:text-rose-200">
                    {{ $totalViol }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-rose-900/70 dark:text-rose-100/80">
                    حالات تحتاج متابعة جدية وقرارات.
                </p>
            </div>

            {{-- تم الاطلاع --}}
            <div class="rounded-2xl bg-emerald-50 dark:bg-emerald-900/25 border border-emerald-200/80 dark:border-emerald-500/60 p-3 sm:p-4">
                <div class="flex items-center justify-between mb-1 gap-2">
                    <span class="text-[11px] sm:text-xs text-emerald-900 dark:text-emerald-100">اطّلع على الإنذار</span>
                    <i class="fa-solid fa-envelope-open-text text-[12px] text-emerald-500 dark:text-emerald-300"></i>
                </div>
                <div class="text-2xl sm:text-3xl font-extrabold text-emerald-700 dark:text-emerald-200">
                    {{ $ackCount }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-emerald-900/70 dark:text-emerald-100/80">
                    أعضاء فتحوا الإشعار واطّلعوا عليه.
                </p>
            </div>

            {{-- لم يطّلع بعد --}}
            <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 border border-slate-200/80 dark:border-slate-600 p-3 sm:p-4">
                <div class="flex items-center justify-between mb-1 gap-2">
                    <span class="text-[11px] sm:text-xs text-slate-900 dark:text-slate-100">لم يطّلع بعد</span>
                    <i class="fa-solid fa-envelope text-[12px] text-slate-500 dark:text-slate-300"></i>
                </div>
                <div class="text-2xl sm:text-3xl font-extrabold text-slate-800 dark:text-slate-100">
                    {{ $unAckCount }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-slate-700 dark:text-slate-300">
                    يفضّل متابعة هؤلاء والتواصل معهم مباشرة.
                </p>
            </div>
        </div>

        {{-- جدول المخاطر --}}
        <div class="rounded-3xl bg-white/95 border border-slate-200 shadow-sm p-4 sm:p-5 space-y-3 dark:bg-slate-900/95 dark:border-slate-700">
            <div class="flex items-center justify-between gap-2 mb-2 sm:mb-3">
                <h2 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-white">
                    📑 سجل الإنذارات والمخالفات على الأعضاء
                </h2>
                <div class="text-[10px] sm:text-xs text-slate-500 dark:text-slate-300">
                    مرتبة من الأحدث إلى الأقدم
                </div>
            </div>

            <div class="overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-700">
                <table class="min-w-full text-right text-[11px] sm:text-xs">
                    <thead class="bg-slate-50 dark:bg-slate-900/95">
                        <tr>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">التاريخ / الوقت</th>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">العضو</th>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">نوع / عنوان</th>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">حالة الإشعار</th>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">تفاصيل مختصرة</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 bg-white/90 dark:divide-slate-700 dark:bg-slate-950/40">
                        @forelse($risks as $r)
                            @php
                                $createdAt = $r->created_at
                                    ? \Carbon\Carbon::parse($r->created_at)->locale('ar')->isoFormat('D MMM YYYY')
                                    : 'غير متوفر';

                                $timeStr = $r->created_at
                                    ? \Carbon\Carbon::parse($r->created_at)->format('H:i')
                                    : '--:--';

                                $tKey   = $r->violation_type ?? 'warning';
                                $tLbl   = $typeLabels[$tKey]  ?? $tKey;
                                $tColor = $typeColors[$tKey]  ?? $typeColors['warning'];

                                $stKey   = $r->violation_status ?? 'active';
                                $stLbl   = $statusLabels[$stKey] ?? $stKey;
                                $stColor = $statusColors[$stKey] ?? $statusColors['active'];
                            @endphp
                            <tr class="hover:bg-slate-50/70 dark:hover:bg-slate-900/70">

                                {{-- التاريخ / الوقت --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top whitespace-nowrap">
                                    <div class="flex flex-col gap-0.5">
                                        <span class="font-semibold text-[11px] sm:text-xs text-slate-900 dark:text-white">
                                            {{ $createdAt }}
                                        </span>
                                        <span class="text-[10px] text-slate-500 dark:text-slate-300">
                                            الساعة {{ $timeStr }}
                                        </span>
                                    </div>
                                </td>

                                {{-- العضو --}}
<td class="px-2 sm:px-3 py-2.5 align-top">
    <div class="flex flex-col gap-0.5 text-[10px] sm:text-[11px]">
        <span class="font-semibold text-slate-800 dark:text-slate-100">
            {{ $r->user_name ?? 'غير معروف' }}
        </span>

        @if(!empty($r->user_username))
            <span class="text-slate-500 dark:text-slate-300">
                <span class="text-slate-400">المعرّف:</span>
                <span class="font-mono">{{ '@' . $r->user_username }}</span>
            </span>
        @endif
    </div>
</td>

                                {{-- نوع / عنوان --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top">
                                    <div class="flex flex-col gap-1">
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full border text-[10px] sm:text-[11px] {{ $tColor }}">
                                            @if($tKey === 'violation')
                                                <i class="fa-solid fa-circle-xmark text-[10px]"></i>
                                            @else
                                                <i class="fa-solid fa-bell text-[10px]"></i>
                                            @endif
                                            <span>{{ $tLbl }}</span>
                                        </span>
                                        <span class="text-[10px] sm:text-[11px] font-semibold text-slate-800 dark:text-slate-100 line-clamp-2">
                                            {{ $r->violation_title }}
                                        </span>
                                    </div>
                                </td>

                                {{-- حالة الإشعار --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top">
                                    <div class="flex flex-col gap-1 text-[10px] sm:text-[11px]">
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full border {{ $stColor }}">
                                            @if($stKey === 'resolved')
                                                <i class="fa-solid fa-circle-check text-[10px]"></i>
                                            @elseif($stKey === 'pending')
                                                <i class="fa-solid fa-hourglass-half text-[10px]"></i>
                                            @else
                                                <i class="fa-solid fa-circle-exclamation text-[10px]"></i>
                                            @endif
                                            <span>{{ $stLbl }}</span>
                                        </span>

                                        <span class="inline-flex items-center gap-1 mt-0.5">
                                            @if($r->acknowledged)
                                                <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
                                                <span class="text-emerald-700 dark:text-emerald-300">
                                                    العضو اطّلع على الإشعار
                                                </span>
                                            @else
                                                <span class="h-2 w-2 rounded-full bg-rose-500"></span>
                                                <span class="text-rose-700 dark:text-rose-300">
                                                    لم يفتح الإشعار بعد
                                                </span>
                                            @endif
                                        </span>
                                    </div>
                                </td>

                                {{-- تفاصيل مختصرة --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top">
                                    <div class="space-y-1 text-[10px] sm:text-[11px] text-slate-600 dark:text-slate-300">
                                        <div class="line-clamp-2">
                                            <span class="font-semibold text-slate-700 dark:text-slate-100">وصف النظام:</span>
                                            <span class="ms-1">{{ $r->violation_description }}</span>
                                        </div>

                                        @if($r->member_response)
                                            <div class="line-clamp-2">
                                                <span class="font-semibold text-slate-700 dark:text-slate-100">رد العضو:</span>
                                                <span class="ms-1">{{ $r->member_response }}</span>
                                            </div>
                                        @endif

                                        @if(!empty($r->points_deducted) && $r->points_deducted > 0)
                                            <div class="text-rose-700 dark:text-rose-300 font-semibold">
                                                خصم نقاط: -{{ $r->points_deducted }}
                                            </div>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-3 py-4 text-center text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                                    لا توجد سجلات مطابقة للفلاتر الحالية.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- ترقيم الصفحات --}}
            <div class="pt-2">
                {{ $risks->links() }}
            </div>
        </div>
    </div>
</div>
@endsection