@extends('layouts.superadmin')

@section('title','قوائم الأوائل — الغياب / النقاط / التواجد')
@section('page-title','🏆 قوائم الأعضاء — الغياب / النقاط / التواجد')

@section('content')
<div class="space-y-6">
<div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-3">
        <div>
            <h2 class="text-sm md:text-base font-bold text-gray-800 dark:text-gray-100">
                @if($type === 'absences')
                    ❌ الأعلى في الغياب بدون عذر
                @elseif($type === 'points')
                    ⭐ الأعلى في النقاط
                @else
                    ⏱️ أعلى تواجد أسبوعياً (ساعات)
                @endif
            </h2>
            <span class="text-[11px] text-gray-500 dark:text-gray-400">
                يظهر حتى 20 عضوًا مرتبين حسب المؤشر المختار
            </span>
        </div>

        {{-- زر إرسال للواتساب --}}
        <form method="POST" action="{{ route('superadmin.top-members.whatsapp') }}"
              class="flex items-center gap-2">
            @csrf
            <input type="hidden" name="type" value="{{ $type }}">

            @if($type === 'presence')
                <input type="hidden" name="week" value="{{ $week ?? now()->isoWeek() }}">
                <input type="hidden" name="year" value="{{ $year ?? now()->year }}">
            @else
                <input type="hidden" name="from" value="{{ $from }}">
                <input type="hidden" name="to" value="{{ $to }}">
            @endif

            <button type="submit"
                    class="inline-flex items-center gap-2 px-3 py-2 rounded-xl
                           bg-emerald-600 text-white text-xs md:text-sm hover:bg-emerald-700 shadow">
                <i class="fa-brands fa-whatsapp text-lg"></i>
                <span>إرسال Top 10 للواتساب</span>
            </button>
        </form>
    </div>
    {{-- ... باقي الكود كما هو (قائمة الكروت) --}}

    {{-- تعريف بسيط --}}
    <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm text-sm text-gray-600 dark:text-gray-300 leading-6">
        <p>
            هذه الصفحة تعرض <b>قوائم الأوائل</b> في عدة مؤشرات:
            <b>أعلى الغياب بدون عذر</b>، <b>أعلى النقاط</b>، و<b>أعلى التواجد الأسبوعي</b>.
        </p>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
            الفترة الحالية: {{ $period ?? ($from . ' → ' . $to) }}
        </p>
    </div>

    {{-- Tabs / كبسات اختيار النوع --}}
    <div class="bg-white dark:bg-gray-800 rounded-2xl p-2 shadow-sm flex flex-col md:flex-row md:items-center md:justify-between gap-3">
        <div class="flex flex-wrap gap-2">
            @php
                $baseRoute = route('superadmin.top-members.index');
            @endphp

            <a href="{{ $baseRoute.'?type=absences&from='.$from.'&to='.$to }}"
               class="px-4 py-2 text-xs md:text-sm rounded-xl inline-flex items-center gap-2
                      {{ $type==='absences' ? 'bg-rose-500 text-white shadow' : 'bg-rose-50 text-rose-700 hover:bg-rose-100' }}">
                ❌ الأعلى في الغياب بدون عذر
            </a>

            <a href="{{ $baseRoute.'?type=points&from='.$from.'&to='.$to }}"
               class="px-4 py-2 text-xs md:text-sm rounded-xl inline-flex items-center gap-2
                      {{ $type==='points' ? 'bg-emerald-500 text-white shadow' : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100' }}">
                ⭐ الأعلى في النقاط
            </a>

            <a href="{{ $baseRoute.'?type=presence&week='.($week ?? now()->isoWeek()).'&year='.($year ?? now()->year) }}"
               class="px-4 py-2 text-xs md:text-sm rounded-xl inline-flex items-center gap-2
                      {{ $type==='presence' ? 'bg-sky-500 text-white shadow' : 'bg-sky-50 text-sky-700 hover:bg-sky-100' }}">
                ⏱️ أعلى تواجد أسبوعيًا
            </a>
        </div>

        {{-- فلتر الفترة / الأسبوع --}}
        <div>
            @if($type === 'presence')
                <form method="get" class="flex flex-wrap items-center gap-2 text-xs md:text-sm">
                    <input type="hidden" name="type" value="presence">
                    <label class="flex items-center gap-1">
                        <span>الأسبوع</span>
                        <input type="number" name="week"
                               value="{{ $week ?? now()->isoWeek() }}"
                               class="w-20 rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white text-center text-xs">
                    </label>
                    <label class="flex items-center gap-1">
                        <span>السنة</span>
                        <input type="number" name="year"
                               value="{{ $year ?? now()->year }}"
                               class="w-24 rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white text-center text-xs">
                    </label>
                    <button class="px-3 py-1.5 rounded-lg bg-sky-600 text-white hover:bg-sky-700">
                        بحث
                    </button>
                </form>
            @else
                <form method="get" class="flex flex-wrap items-center gap-2 text-xs md:text-sm">
                    <input type="hidden" name="type" value="{{ $type }}">
                    <label class="flex items-center gap-1">
                        <span>من</span>
                        <input type="date" name="from" value="{{ $from }}"
                               class="rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white text-xs">
                    </label>
                    <label class="flex items-center gap-1">
                        <span>إلى</span>
                        <input type="date" name="to" value="{{ $to }}"
                               class="rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white text-xs">
                    </label>
                    <button class="px-3 py-1.5 rounded-lg bg-primary-600 text-white hover:bg-primary-700">
                        بحث
                    </button>
                </form>
            @endif
        </div>
    </div>

    {{-- قائمة الأوائل --}}
    <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm">
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-sm md:text-base font-bold text-gray-800 dark:text-gray-100">
                @if($type === 'absences')
                    ❌ الأعلى في الغياب بدون عذر
                @elseif($type === 'points')
                    ⭐ الأعلى في النقاط
                @else
                    ⏱️ أعلى تواجد أسبوعياً (ساعات)
                @endif
            </h2>
            <span class="text-[11px] text-gray-500 dark:text-gray-400">
                يظهر حتى 20 عضوًا مرتبين حسب المؤشر المختار
            </span>
        </div>

        <div class="space-y-3">
            @forelse($rows as $index => $row)
                @php
                    $user = $row->user;
                    $rank = $index + 1;

                    $isFemale = optional($user)->gender === 'female';
                    $badgeBg  = $type === 'absences'
                        ? 'bg-rose-500'
                        : ($type === 'points' ? 'bg-emerald-500' : 'bg-sky-500');

                    if ($type === 'absences') {
                        $mainValue = $row->count_absences;
                        $mainLabel = 'مرّة غياب بدون عذر';
                    } elseif ($type === 'points') {
                        $mainValue = number_format($row->total_points, 1);
                        $mainLabel = 'نقطة في الفترة';
                    } else { // presence
                        $mainValue = number_format($row->total_hours, 1);
                        $mainLabel = 'ساعة تواجد هذا الأسبوع';
                    }
                @endphp

                <div class="rounded-2xl border border-gray-100 dark:border-gray-700 bg-gradient-to-l
                            from-gray-50 via-white to-gray-50
                            dark:from-gray-900 dark:via-gray-800 dark:to-gray-900
                            px-3 py-3 md:px-4 md:py-3 flex items-center gap-3 md:gap-4">
                    {{-- الرتبة --}}
                    <div class="flex flex-col items-center justify-center w-10">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white shadow
                                    @if($rank==1) bg-yellow-400 @elseif($rank==2) bg-gray-400 @elseif($rank==3) bg-orange-400 @else bg-slate-400 @endif">
                            #{{ $rank }}
                        </div>
                    </div>

                    {{-- معلومات العضو --}}
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            <div class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold text-white shadow
                                        {{ $isFemale ? 'bg-gradient-to-br from-pink-400 to-rose-500' : 'bg-gradient-to-br from-blue-400 to-indigo-500' }}">
                                {{ $user ? mb_substr($user->name,0,2) : '؟' }}
                            </div>
                            <div class="min-w-0">
                                <div class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
                                    {{ $user->name ?? 'عضو محذوف' }}
                                </div>
                                <div class="text-[11px] text-gray-500 dark:text-gray-400 flex items-center gap-1">
                                    <span>{{ $user->membership_status ?? 'عضو' }}</span>
                                    @if($user && $user->gender)
                                        <span>•</span>
                                        <span>{{ $user->gender === 'female' ? 'أنثى' : 'ذكر' }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- الأرقام --}}
                    <div class="flex flex-col items-end gap-1 text-xs md:text-sm">
                        <div class="inline-flex items-center gap-2">
                            <span class="text-lg md:text-xl font-extrabold text-gray-900 dark:text-white">
                                {{ $mainValue }}
                            </span>
                            <span class="text-[11px] text-gray-500 dark:text-gray-400">
                                {{ $mainLabel }}
                            </span>
                        </div>

                        @if($type === 'points')
                            <div class="flex flex-wrap justify-end gap-2 text-[11px] text-gray-500 dark:text-gray-400">
                                <span>🕒 {{ number_format($row->total_hours,1) }} ساعة</span>
                                <span>• ⚡ {{ $row->total_records }} نشاط/سجل</span>
                            </div>
                        @elseif($type === 'presence')
                            <div class="flex flex-wrap justify-end gap-2 text-[11px] text-gray-500 dark:text-gray-400">
                                <span>⭐ {{ number_format($row->total_points,1) }} نقطة</span>
                                <span>• ⚡ {{ $row->total_records }} نشاط</span>
                            </div>
                        @endif
                    </div>
                </div>
            @empty
                <div class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                    لا توجد بيانات متاحة للفترة / الأسبوع المختار.
                </div>
            @endforelse
        </div>

        @if($rows->count() > 0)
            <div class="mt-4 text-[11px] text-gray-500 dark:text-gray-400 leading-relaxed">
                <p>📌 هذه القوائم تعتمد على بيانات <b>Evaluation</b> و <b>ScoreRecord</b> للفترة أو الأسبوع المحدّد.</p>
            </div>
        @endif
    </div>

</div>
@endsection