@extends($layout)

@section('title', 'سجل العلامات')

@push('styles')
<style>
    /* Socrates micro animations */
    @keyframes pulseGlow { 0%,100%{opacity:.55} 50%{opacity:1} }
    .pulse-glow { animation: pulseGlow 2.2s ease-in-out infinite; }

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

@section('content')

@php
    $totalPositive = $records->where('points', '>', 0)->sum('points');
    $totalNegative = abs($records->where('points', '<', 0)->sum('points'));

    // ✅ FIX: احسب الساعات فقط للأنشطة التي status = confirmed
    // واستبعد الغياب بعذر وبدون عذر
    $totalHours = $records->filter(function($record) {
        // فقط الأنشطة المباشرة والقيست
        if (!in_array($record->source_type, ['live_activity', 'guest'])) {
            return false;
        }

        // للأنشطة المباشرة: تحقق من أن status = confirmed وليس غياب
        if ($record->source_type === 'live_activity') {
            $status = $record->details['status'] ?? null;
            // استبعد الغياب بعذر وبدون عذر
            if (in_array($status, ['absent_with_excuse', 'absent_without_excuse'])) {
                return false;
            }
            return $status === 'confirmed';
        }

        // القيست دائمًا تُحسب ساعاتها إذا كانت معتمدة
        return true;
    })->sum('hours');
@endphp

<div class="min-h-screen rtl" dir="rtl"
     style="background:
       radial-gradient(45vmax 45vmax at 115% -10%, rgba(56,189,248,.18) 0, transparent 60%),
       radial-gradient(40vmax 40vmax at -10% 120%, rgba(168,85,247,.14) 0, transparent 60%),
       linear-gradient(180deg, #020617 0%, #0b1224 45%, #020617 100%);">

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

        {{-- HERO --}}
        <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">
            <div class="pointer-events-none absolute -top-24 -right-12 w-80 h-80 rounded-full bg-sky-500/16 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -left-16 w-96 h-96 rounded-full bg-fuchsia-500/12 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 space-y-4">
                <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                    <div class="space-y-2 max-w-3xl">
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full
                                    bg-black/40 border border-sky-400/20 text-[11px] text-white/85">
                            <span class="inline-flex w-6 h-6 rounded-full bg-gradient-to-br from-sky-500 to-indigo-500 text-white items-center justify-center">
                                <i class="fa-solid fa-chart-line text-[11px]"></i>
                            </span>
                            <span>سجل العلامات — تتبّع النقاط والساعات</span>
                        </div>

                        <h1 class="text-xl sm:text-2xl lg:text-3xl font-extrabold tracking-tight">
                            سجل العلامات
                        </h1>

                        <p class="text-[12px] sm:text-[14px] text-white/70 leading-relaxed">
                            عرض وتتبع جميع النقاط والساعات المسجّلة مع فلترة ذكية.
                            <span class="text-white/85 font-semibold">الساعات محسوبة فقط للحضور الفعلي.</span>
                        </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-emerald-400 pulse-glow"></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-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-fuchsia-400"></span>
                                كروت مرتبة
                            </span>
                        </div>
                    </div>

                    {{-- Side mini card --}}
                    <div class="w-full lg:w-[420px]">
                        <div class="rounded-3xl bg-black/35 border border-white/15 p-4 space-y-2">
                            <div class="text-[11px] text-white/60 font-extrabold">ملخص سريع</div>

                            <div class="grid grid-cols-2 gap-2 text-[12px]">
                                <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                                    <div class="text-white/60 text-[11px]">إجمالي السجلات</div>
                                    <div class="text-lg font-extrabold text-white">{{ $records->total() }}</div>
                                </div>
                                <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                                    <div class="text-white/60 text-[11px]">إجمالي الساعات</div>
                                    <div class="text-lg font-extrabold text-emerald-200">{{ number_format($totalHours, 1) }}h</div>
                                </div>
                                <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                                    <div class="text-white/60 text-[11px]">نقاط +</div>
                                    <div class="text-lg font-extrabold text-emerald-300">+{{ number_format($totalPositive) }}</div>
                                </div>
                                <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                                    <div class="text-white/60 text-[11px]">نقاط -</div>
                                    <div class="text-lg font-extrabold text-rose-300">-{{ number_format($totalNegative) }}</div>
                                </div>
                            </div>

                            <div class="text-[11px] text-white/45">
                                ملاحظة: الساعات هنا = حضور فعلي فقط (Confirmed).
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- STATS (نفس partials) --}}
        <section class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-xl p-4 sm:p-6">
            <div class="pointer-events-none absolute -top-24 -left-20 w-80 h-80 rounded-full bg-sky-500/10 blur-3xl"></div>

            <div class="flex items-center justify-between gap-3 mb-4">
                <div>
                    <h2 class="text-base sm:text-lg font-extrabold text-white">📊 الإحصائيات</h2>
                    <p class="text-[11px] sm:text-xs text-white/55">نفس بياناتك — بس ضمن ستايل سقراط.</p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                @include('general.score-records.partials._stats-card', [
                    'title' => 'إجمالي السجلات',
                    'value' => $records->total(),
                    'icon' => '<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>',
                    'iconBg' => 'bg-blue-50'
                ])

                @include('general.score-records.partials._stats-card', [
                    'title' => 'النقاط الإيجابية',
                    'value' => '+' . number_format($totalPositive),
                    'valueColor' => 'text-green-600',
                    'icon' => '<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>',
                    'iconBg' => 'bg-green-50'
                ])

                @include('general.score-records.partials._stats-card', [
                    'title' => 'النقاط السلبية',
                    'value' => '-' . number_format($totalNegative),
                    'valueColor' => 'text-red-600',
                    'icon' => '<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/></svg>',
                    'iconBg' => 'bg-red-50'
                ])

                @include('general.score-records.partials._stats-card', [
                    'title' => 'إجمالي الساعات',
                    'value' => number_format($totalHours, 1) . ' ساعة',
                    'subtitle' => 'فقط الحضور الفعلي',
                    'valueColor' => 'text-purple-600',
                    'icon' => '<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
                    'iconBg' => 'bg-purple-50'
                ])
            </div>
        </section>

        {{-- FILTERS (نفس partial) --}}
        <section class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-xl p-4 sm:p-6">
            <div class="flex items-center justify-between gap-3 mb-4">
                <div>
                    <h2 class="text-base sm:text-lg font-extrabold text-white">🎛️ الفلاتر</h2>
                    <p class="text-[11px] sm:text-xs text-white/55">اختَر العضو/النوع/الحالة/الوقت…</p>
                </div>
            </div>

            {{-- الفلاتر المحسنة مع إضافة فلتر حالة العضو (مغادر/متواجد) والبحث بالاسم --}}
            @include('general.score-records.partials._filter-form', [
                'action' => route('score-records.index'),
                'users' => $users ?? [],
                'showUserFilter' => !auth()->user()->hasRole('member')
            ])
        </section>

        {{-- RECORDS --}}
        <section class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl p-4 sm:p-6">
            <div class="flex items-center justify-between gap-3 mb-4">
                <div>
                    <h2 class="text-base sm:text-lg font-extrabold text-white">🧾 السجلات</h2>
                    <p class="text-[11px] sm:text-xs text-white/55">كروت مرتبة — قابلة للتصفح.</p>
                </div>
            </div>

            @if($records->isEmpty())
                <div class="bg-black/30 rounded-2xl border border-white/10 p-10 text-center">
                    <svg class="w-16 h-16 text-white/25 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <p class="text-white/65 text-lg font-semibold">لا توجد سجلات</p>
                    <p class="text-white/45 text-sm mt-1">جرّب تغيير الفلاتر أو توسيع البحث.</p>
                </div>
            @else
                <div class="grid grid-cols-1 gap-4">
                    @foreach($records as $record)
                        @include('general.score-records.partials._record-card', ['record' => $record])
                    @endforeach
                </div>

                <div class="mt-6">
                    {{ $records->links() }}
                </div>
            @endif
        </section>

        {{-- FOOTER --}}
        <div class="pt-3 text-center text-[11px] text-white/35">
            سجل العلامات — ستايل سقراط ✨
        </div>

    </div>
</div>

@push('scripts')
@endpush
@endsection