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

@section('title', 'سجلات التكريمات والمكافآت')
@section('page-title', '🏅 سجلات التكريمات والمكافآت — Honors & Rewards')

@section('content')
@php
    $total    = $stats['total']    ?? 0;
    $positive = $stats['positive'] ?? 0;
    $negative = $stats['negative'] ?? 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 dark:border-slate-700 shadow-lg">
            <div class="absolute -top-20 -left-10 w-40 h-40 bg-emerald-300/20 blur-3xl rounded-full"></div>
            <div class="absolute -bottom-24 -right-8 w-48 h-48 bg-amber-300/20 blur-3xl rounded-full"></div>

            <div class="relative p-5 sm:p-6 lg:p-7 flex flex-col gap-3">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-50 text-amber-700 text-[11px] font-medium dark:bg-amber-500/15 dark:text-amber-100">
                    <i class="fa-solid fa-award text-[11px]"></i>
                    <span>قسم المتابعة — التكريمات والمكافآت</span>
                </div>

                <h1 class="text-xl sm:text-2xl lg:text-3xl font-extrabold 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>

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

                    {{-- من تاريخ --}}
                    <div class="flex flex-col gap-1">
                        <label class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">من تاريخ</label>
                        <input type="date" name="from" value="{{ $dateFrom }}"
                               class="h-9 sm:h-10 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-xs px-2.5">
                    </div>

                    {{-- إلى تاريخ --}}
                    <div class="flex flex-col gap-1">
                        <label class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">إلى تاريخ</label>
                        <input type="date" name="to" value="{{ $dateTo }}"
                               class="h-9 sm:h-10 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-xs px-2.5">
                    </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 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-xs px-2.5">
                    </div>
                </div>

                <div class="flex flex-wrap items-center justify-between gap-2 pt-1">
                    <div class="flex gap-2">
                        <button type="submit"
                                class="px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl bg-sky-500 hover:bg-sky-600 text-white text-xs sm:text-sm shadow-sm shadow-sky-400/60">
                            <i class="fa-solid fa-magnifying-glass text-[10px] sm:text-xs ml-1"></i>
                            بحث
                        </button>

                        <a href="{{ route('advisor.monitor.honors-rewards') }}"
                           class="text-[11px] sm:text-xs px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700">
                            إعادة ضبط
                        </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-3 gap-3 sm:gap-4">

            {{-- إجمالي السجلات --}}
            <div class="rounded-2xl bg-slate-900 text-slate-50 border border-slate-700 p-3 sm:p-4 shadow-sm">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs">إجمالي العمليات</span>
                    <i class="fa-solid fa-layer-group 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-emerald-50 dark:bg-emerald-900/25 border border-emerald-200 dark:border-emerald-500 p-3 sm:p-4">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs text-emerald-900 dark:text-emerald-100">تكريمات ومكافآت</span>
                    <i class="fa-solid fa-circle-check 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">
                    {{ $positive }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-emerald-900/80 dark:text-emerald-100/80">
                    العمليات التي فيها نقاط موجبة (زيادة، تكريم، مكافأة).
                </p>
            </div>

            {{-- خصومات سلبية --}}
            <div class="rounded-2xl bg-rose-50 dark:bg-rose-900/25 border border-rose-200 dark:border-rose-500 p-3 sm:p-4">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <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">
                    {{ $negative }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-rose-900/80 dark:text-rose-100/80">
                    العمليات التي فيها نقاط سالبة (خصم، إنذار، عقوبة).
                </p>
            </div>

        </div>

        {{-- الجدول الرئيسي --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm p-4 space-y-3">
            <div class="flex items-center justify-between gap-2 mb-2">
                <h2 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-white flex items-center gap-1.5">
                    🧾 <span>سجلات النقاط للأعضاء</span>
                </h2>
                <span class="text-[10px] sm:text-xs text-slate-500 dark:text-slate-300">
                    مرتبة من الأحدث إلى الأقدم
                </span>
            </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-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">التاريخ / الوقت</th>
                            <th class="px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">العضو</th>
                            <th class="px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">النقاط</th>
                            <th class="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 dark:divide-slate-700 bg-white/95 dark:bg-slate-950/40">
                        @forelse($rewards as $r)
                            @php
                                $createdAt = $r->created_at
                                    ? \Carbon\Carbon::parse($r->created_at)->timezone(config('app.timezone'))->locale('ar')
                                    : null;

                                $dateStr = $createdAt
                                    ? $createdAt->isoFormat('D MMM YYYY')
                                    : 'غير محدد';

                                $timeStr = $createdAt
                                    ? $createdAt->format('H:i')
                                    : '--:--';

                                $points = (int)($r->points ?? 0);
                                $isPositive = $points > 0;
                                $isNegative = $points < 0;
                                $badgeClass = $isPositive
                                    ? 'bg-emerald-50 text-emerald-700 border-emerald-300 dark:bg-emerald-900/40 dark:text-emerald-100 dark:border-emerald-500/70'
                                    : ($isNegative
                                        ? 'bg-rose-50 text-rose-700 border-rose-300 dark:bg-rose-900/40 dark:text-rose-100 dark:border-rose-500/70'
                                        : 'bg-slate-50 text-slate-700 border-slate-300 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600');

                                $label = $isPositive
                                    ? 'تكريم / مكافأة'
                                    : ($isNegative ? 'خصم / إنذار' : 'تعديل نقاط');
                            @endphp

                            <tr class="hover:bg-slate-50/80 dark:hover:bg-slate-900/80">
                                {{-- التاريخ / الوقت --}}
                                <td class="px-3 py-2.5 align-top whitespace-nowrap">
                                    <div class="font-semibold text-slate-900 dark:text-slate-50">
                                        {{ $dateStr }}
                                    </div>
                                    <div class="text-[10px] text-slate-500 dark:text-slate-400">
                                        {{ $timeStr }}
                                    </div>
                                </td>

                                {{-- العضو --}}
{{-- العضو --}}
<td class="px-3 py-2.5 align-top">
    <div class="font-semibold text-slate-900 dark:text-slate-50">
        {{ $r->user_name ?? 'غير معروف' }}
    </div>

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

                                {{-- النقاط --}}
                                <td class="px-3 py-2.5 align-top">
                                    <span class="inline-flex items-center justify-between gap-2 px-3 py-1 rounded-full border text-[10px] sm:text-[11px] {{ $badgeClass }}">
                                        <span class="font-semibold">
                                            {{ $points > 0 ? '+' . $points : $points }}
                                        </span>
                                        <span class="text-[10px] opacity-80">
                                            {{ $label }}
                                        </span>
                                    </span>
                                </td>

                                {{-- السبب --}}
                                <td class="px-3 py-2.5 align-top">
                                    <div class="text-slate-700 dark:text-slate-200 line-clamp-2">
                                        {{ $r->reason ?? 'لم يتم تحديد سبب' }}
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" 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">
                {{ $rewards->links() }}
            </div>
        </div>

    </div>
</div>
@endsection