{{-- resources/views/superadmin/taateer/members_overview.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'تقسيم الأعضاء حسب رقم التعتير')
@section('page-title', '👥 حالة الأعضاء في نظام التعتير')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8">
    <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

        {{-- هيدر ملحمي + فلتر المجال --}}
        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-cyan-500/25 shadow-2xl shadow-cyan-500/10">
            <div class="pointer-events-none absolute -top-24 -right-10 w-64 h-64 rounded-full bg-cyan-500/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -left-10 w-72 h-72 rounded-full bg-blue-500/15 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 space-y-5">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
                    <div class="space-y-3 max-w-xl">
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-cyan-400/30 text-xs text-cyan-200">
                            <i class="fa-solid fa-users-gear text-[11px]"></i>
                            <span>نظرة شاملة على الأعضاء في نظام التعتير</span>
                        </div>
                        <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                            تقسيم <span class="text-cyan-300">الأعضاء</span> حسب حالة رقم التعتير
                        </h1>
                        <p class="text-sm sm:text-[15px] text-slate-200/80 leading-relaxed">
                            هذه الصفحة تعرض أعضاء <span class="font-semibold text-cyan-300">جيش الوفاء الذهبي</span>
                            بحسب حالة أرقام التعتير الخاصة بهم: من لديهم رقم فعّال، من لا يملكون رقم فعّال حالياً،
                            ومن لديهم رقم يقترب من انتهاء الصلاحية، مع إحصائيات عامة وفلتر للتحكم في المجال المعروض.
                        </p>
                    </div>

                    {{-- كروت إحصائيات سريعة --}}
                    <div class="w-full lg:w-auto">
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 text-center text-xs">
                            <div class="rounded-2xl bg-white/5 border border-white/10 px-3 py-3">
                                <div class="text-[11px] text-slate-300/80 mb-1">
                                    عدد الأعضاء (ضمن المجال)
                                </div>
                                <div class="text-xl sm:text-2xl font-extrabold text-cyan-300">
                                    {{ number_format($stats['total_members_scope'] ?? 0) }}
                                </div>
                            </div>
                            <div class="rounded-2xl bg-emerald-500/10 border border-emerald-400/50 px-3 py-3">
                                <div class="text-[11px] text-emerald-200/90 mb-1">
                                    لديهم كود فعّال
                                </div>
                                <div class="text-xl sm:text-2xl font-extrabold text-emerald-300">
                                    {{ number_format($stats['with_active_code'] ?? 0) }}
                                </div>
                            </div>
                            <div class="rounded-2xl bg-rose-500/10 border border-rose-400/60 px-3 py-3">
                                <div class="text-[11px] text-rose-200/90 mb-1">
                                    بدون كود فعّال
                                </div>
                                <div class="text-xl sm:text-2xl font-extrabold text-rose-300">
                                    {{ number_format($stats['without_active_code'] ?? 0) }}
                                </div>
                            </div>
                            <div class="rounded-2xl bg-amber-500/10 border border-amber-400/60 px-3 py-3 col-span-2 sm:col-span-1">
                                <div class="text-[11px] text-amber-200/90 mb-1">
                                    كودهم يقترب من الانتهاء
                                </div>
                                <div class="text-xl sm:text-2xl font-extrabold text-amber-300">
                                    {{ number_format($stats['expiring_soon'] ?? 0) }}
                                </div>
                            </div>
                            <div class="rounded-2xl bg-slate-800/70 border border-slate-500/70 px-3 py-3 col-span-2 sm:col-span-1">
                                <div class="text-[11px] text-slate-200/90 mb-1">
                                    إجمالي الأكواد في النظام
                                </div>
                                <div class="text-xl sm:text-2xl font-extrabold text-slate-50">
                                    {{ number_format($stats['total_codes_overall'] ?? 0) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- فلاتر المجال --}}
                <div class="border-t border-white/10 pt-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 text-xs">
                    <div class="text-slate-300/85 flex items-center gap-1.5">
                        <i class="fa-solid fa-filter text-[11px] text-cyan-300"></i>
                        <span>نطاق الأعضاء المعروضين:</span>
                    </div>
                    <form method="GET" class="flex items-center gap-3">
                        <label class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-[11px] cursor-pointer
                                      {{ $scope === 'active' ? 'border-cyan-400 bg-cyan-500/10 text-cyan-100' : 'border-white/20 bg-white/5 text-slate-200' }}">
                            <input type="radio" name="scope" value="active" class="hidden" {{ $scope === 'active' ? 'checked' : '' }} onchange="this.form.submit()">
                            <span class="w-2 h-2 rounded-full {{ $scope === 'active' ? 'bg-cyan-300' : 'bg-slate-400' }}"></span>
                            <span>الأعضاء الفعّالين فقط داخل التيم</span>
                        </label>
                        <label class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-[11px] cursor-pointer
                                      {{ $scope === 'all' ? 'border-amber-400 bg-amber-500/10 text-amber-100' : 'border-white/20 bg-white/5 text-slate-200' }}">
                            <input type="radio" name="scope" value="all" class="hidden" {{ $scope === 'all' ? 'checked' : '' }} onchange="this.form.submit()">
                            <span class="w-2 h-2 rounded-full {{ $scope === 'all' ? 'bg-amber-300' : 'bg-slate-400' }}"></span>
                            <span>جميع الأعضاء (حتى غير الفعّالين / من غادر التيم)</span>
                        </label>
                    </form>
                </div>
            </div>
        </div>

        {{-- فاصل --}}
        <div class="relative">
            <div class="h-px bg-gradient-to-l from-transparent via-cyan-400/60 to-transparent"></div>
        </div>

        {{-- الأقسام الثلاثة --}}
        <div class="space-y-6">

            {{-- 1) أعضاء لديهم كود فعّال --}}
            <section class="space-y-3">
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-xl bg-emerald-500/20 text-emerald-200 grid place-items-center">
                            <i class="fa-solid fa-user-shield"></i>
                        </div>
                        <div>
                            <h2 class="text-sm sm:text-base font-bold text-white">
                                الأعضاء الذين لديهم رقم تعتير فعّال
                            </h2>
                            <p class="text-[11px] text-slate-300/80">
                                كل عضو لديه على الأقل كود واحد بحالة <span class="text-emerald-300 font-semibold">active</span>.
                            </p>
                        </div>
                    </div>
                    <div class="text-[11px] text-slate-300">
                        العدد: <span class="font-semibold text-emerald-300">{{ $activeMembers->count() }}</span>
                    </div>
                </div>

                @if($activeMembers->isEmpty())
                    <div class="rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-4 text-center text-slate-300/80 text-xs">
                        لا يوجد أي عضو يملك حالياً رقم تعتير فعّال ضمن المجال المختار.
                    </div>
                @else
                    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach($activeMembers as $member)
                            @php
                                $hint = null;
                                if ($member->isLeft) {
                                    $hint = 'خرج من التيم';
                                } elseif (!is_null($member->account_status) && $member->account_status !== 'active') {
                                    $hint = 'الحساب غير فعّال (' . $member->account_status . ')';
                                }

                                $expiresText = $member->active_expires_at
                                    ? \Carbon\Carbon::parse($member->active_expires_at)->format('Y-m-d')
                                    : 'غير محدد';

                                $isExpiringSoon = false;
                                if ($member->active_expires_at) {
                                    $exp = \Carbon\Carbon::parse($member->active_expires_at);
                                    $isExpiringSoon = $exp->greaterThanOrEqualTo(\Carbon\Carbon::now())
                                                           && $exp->lessThanOrEqualTo(\Carbon\Carbon::now()->addDays(3));
                                }
                            @endphp
                            <div class="rounded-2xl p-4 bg-gradient-to-b from-slate-900 to-black border border-emerald-400/25 shadow-lg hover:shadow-2xl transition">
                                <div class="flex items-center justify-between gap-2">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 via-teal-500 to-sky-500 grid place-items-center text-white font-bold text-xs">
                                            {{ mb_substr($member->name,0,2,'UTF-8') }}
                                        </div>
                                        <div class="min-w-0">
                                            <div class="font-bold text-white truncate">{{ $member->name }}</div>
                                            @if($hint)
                                                <div class="text-[10px] text-amber-300/90">{{ $hint }}</div>
                                            @endif
                                        </div>
                                    </div>
                                    @if($isExpiringSoon)
                                        <span class="px-2 py-0.5 rounded-full bg-amber-500/15 border border-amber-400/60 text-amber-200 text-[10px]">
                                            اقترب الانتهاء
                                        </span>
                                    @else
                                        <span class="px-2 py-0.5 rounded-full bg-emerald-500/15 border border-emerald-400/60 text-emerald-200 text-[10px]">
                                            كود فعّال
                                        </span>
                                    @endif
                                </div>

                                <div class="mt-3 text-[11px] text-slate-200/80 space-y-1.5">
                                    <div class="flex justify-between gap-2">
                                        <span class="text-slate-400">الكود الحالي:</span>
                                        <span class="font-mono tracking-widest text-xs">
                                            {{ $member->active_code ?? '—' }}
                                        </span>
                                    </div>
                                    <div class="flex justify-between gap-2">
                                        <span class="text-slate-400">تاريخ الإصدار:</span>
                                        <span>
                                            {{ $member->active_issued_at ? \Carbon\Carbon::parse($member->active_issued_at)->format('Y-m-d') : 'غير متوفر' }}
                                        </span>
                                    </div>
                                    <div class="flex justify-between gap-2">
                                        <span class="text-slate-400">تاريخ الانتهاء:</span>
                                        <span class="{{ $isExpiringSoon ? 'text-amber-300 font-semibold' : '' }}">
                                            {{ $expiresText }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </section>

            {{-- فاصل --}}
            <div class="relative">
                <div class="h-px bg-gradient-to-l from-transparent via-cyan-400/40 to-transparent"></div>
            </div>

            {{-- 2) أعضاء لا يملكون كود فعّال / لا يملكون أي كود --}}
            <section class="space-y-3">
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-xl bg-rose-500/20 text-rose-200 grid place-items-center">
                            <i class="fa-solid fa-user-slash"></i>
                        </div>
                        <div>
                            <h2 class="text-sm sm:text-base font-bold text-white">
                                أعضاء بدون رقم تعتير فعّال / لا يملكون أي رقم
                            </h2>
                            <p class="text-[11px] text-slate-300/80">
                                يشمل الأعضاء الذين لا يوجد لديهم كود فعّال حالياً، أو لم يُصدر لهم رقم تعتير من قبل ضمن المجال المختار.
                            </p>
                        </div>
                    </div>
                    <div class="text-[11px] text-slate-300">
                        العدد: <span class="font-semibold text-rose-300">{{ $inactiveOrNoCodeMembers->count() }}</span>
                    </div>
                </div>

                @if($inactiveOrNoCodeMembers->isEmpty())
                    <div class="rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-4 text-center text-slate-300/80 text-xs">
                        لا يوجد أعضاء بدون رقم تعتير فعّال ضمن المجال المختار.
                    </div>
                @else
                    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach($inactiveOrNoCodeMembers as $member)
                            @php
                                $hint = null;
                                if ($member->isLeft) {
                                    $hint = 'خرج من التيم';
                                } elseif (!is_null($member->account_status) && $member->account_status !== 'active') {
                                    $hint = 'الحساب غير فعّال (' . $member->account_status . ')';
                                }

                                $hadCodes = (int) $member->total_codes > 0;
                            @endphp
                            <div class="rounded-2xl p-4 bg-gradient-to-b from-slate-900 to-black border border-rose-400/25 shadow-lg hover:shadow-2xl transition">
                                <div class="flex items-center justify-between gap-2">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-rose-500 via-red-500 to-orange-500 grid place-items-center text-white font-bold text-xs">
                                            {{ mb_substr($member->name,0,2,'UTF-8') }}
                                        </div>
                                        <div class="min-w-0">
                                            <div class="font-bold text-white truncate">{{ $member->name }}</div>
                                            @if($hint)
                                                <div class="text-[10px] text-amber-300/90">{{ $hint }}</div>
                                            @endif
                                        </div>
                                    </div>
                                    <span class="px-2 py-0.5 rounded-full bg-rose-500/15 border border-rose-400/60 text-rose-200 text-[10px]">
                                        لا يوجد كود فعّال
                                    </span>
                                </div>

                                <div class="mt-3 text-[11px] text-slate-200/80 space-y-1.5">
                                    <div class="flex justify-between gap-2">
                                        <span class="text-slate-400">هل كان لديه أكواد سابقاً؟</span>
                                        <span class="font-semibold {{ $hadCodes ? 'text-amber-300' : 'text-slate-300' }}">
                                            {{ $hadCodes ? 'نعم' : 'لا' }}
                                        </span>
                                    </div>
                                    <div class="flex justify-between gap-2">
                                        <span class="text-slate-400">إجمالي عدد الأكواد المسجّلة:</span>
                                        <span class="font-semibold">
                                            {{ (int) $member->total_codes }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </section>

            {{-- فاصل --}}
            <div class="relative">
                <div class="h-px bg-gradient-to-l from-transparent via-cyan-400/40 to-transparent"></div>
            </div>

            {{-- 3) أعضاء لديهم كود فعّال يقترب من الانتهاء --}}
            <section class="space-y-3">
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-xl bg-amber-500/20 text-amber-200 grid place-items-center">
                            <i class="fa-solid fa-hourglass-half"></i>
                        </div>
                        <div>
                            <h2 class="text-sm sm:text-base font-bold text-white">
                                أعضاء لديهم رقم تعتير فعّال يقترب من انتهاء الصلاحية
                            </h2>
                            <p class="text-[11px] text-slate-300/80">
                                أعضاء لديهم كود فعّال حالي، وتاريخ الانتهاء خلال الأيام <span class="font-semibold text-amber-300">القليلة القادمة (3 أيام)</span>.
                            </p>
                        </div>
                    </div>
                    <div class="text-[11px] text-slate-300">
                        العدد: <span class="font-semibold text-amber-300">{{ $expiringSoonMembers->count() }}</span>
                    </div>
                </div>

                @if($expiringSoonMembers->isEmpty())
                    <div class="rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-4 text-center text-slate-300/80 text-xs">
                        لا يوجد حالياً أي عضو يقترب رقم التعتير الخاص به من الانتهاء ضمن المجال المختار.
                    </div>
                @else
                    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach($expiringSoonMembers as $member)
                            @php
                                $expiresAt = $member->active_expires_at ? \Carbon\Carbon::parse($member->active_expires_at) : null;
                            @endphp
                            <div class="rounded-2xl p-4 bg-gradient-to-b from-slate-900 to-black border border-amber-400/40 shadow-lg hover:shadow-2xl transition">
                                <div class="flex items-center justify-between gap-2">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 via-yellow-400 to-orange-500 grid place-items-center text-black font-bold text-xs">
                                            {{ mb_substr($member->name,0,2,'UTF-8') }}
                                        </div>
                                        <div class="min-w-0">
                                            <div class="font-bold text-white truncate">{{ $member->name }}</div>
                                            @if($member->account_status !== 'active' || $member->isLeft)
                                                <div class="text-[10px] text-amber-300/90">
                                                    حالة العضو: {{ $member->isLeft ? 'خرج من التيم' : $member->account_status }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <span class="px-2 py-0.5 rounded-full bg-amber-500/15 border border-amber-400/60 text-amber-200 text-[10px]">
                                        اقترب الانتهاء
                                    </span>
                                </div>

                                <div class="mt-3 text-[11px] text-slate-200/80 space-y-1.5">
                                    <div class="flex justify-between gap-2">
                                        <span class="text-slate-400">الكود:</span>
                                        <span class="font-mono tracking-widest text-xs">
                                            {{ $member->active_code ?? '—' }}
                                        </span>
                                    </div>
                                    <div class="flex justify-between gap-2">
                                        <span class="text-slate-400">تاريخ الانتهاء:</span>
                                        <span class="text-amber-300 font-semibold">
                                            {{ $expiresAt ? $expiresAt->format('Y-m-d H:i') : 'غير محدد' }}
                                        </span>
                                    </div>
                                    @if($expiresAt)
                                        <div class="flex justify-between gap-2">
                                            <span class="text-slate-400">الوقت المتبقي (تقريبا):</span>
                                            <span class="text-amber-200">
                                                {{ $expiresAt->diffForHumans() }}
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </section>

        </div>
    </div>
</div>
@endsection