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

@section('title', 'نظام التعتير')
@section('page-title', '🔐 نظام التعتير')

@section('content')
@php
    $csrfToken = csrf_token();
@endphp

<style>
    .taateer-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
    .taateer-scrollbar::-webkit-scrollbar-track { background: rgba(15, 23, 42, .45); border-radius: 999px; }
    .taateer-scrollbar::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(34,211,238,.55), rgba(59,130,246,.45)); border-radius: 999px; }
    .taateer-grid-bg {
        background-image:
            radial-gradient(circle at 20% 10%, rgba(34,211,238,.16), transparent 34%),
            radial-gradient(circle at 85% 20%, rgba(250,204,21,.10), transparent 30%),
            radial-gradient(circle at 50% 100%, rgba(59,130,246,.15), transparent 38%),
            linear-gradient(180deg, #020617 0%, #07111f 46%, #020617 100%);
    }
    .taateer-pattern {
        background-image:
            linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
        background-size: 34px 34px;
        mask-image: radial-gradient(circle at center, black, transparent 72%);
    }
</style>

<div class="relative min-h-screen overflow-hidden taateer-grid-bg py-5 sm:py-7" dir="rtl">
    <div class="pointer-events-none absolute inset-0 taateer-pattern opacity-60"></div>
    <div class="pointer-events-none absolute -top-28 -right-24 w-80 h-80 rounded-full bg-cyan-500/20 blur-3xl"></div>
    <div class="pointer-events-none absolute top-48 -left-28 w-96 h-96 rounded-full bg-blue-600/15 blur-3xl"></div>
    <div class="pointer-events-none absolute bottom-12 right-1/3 w-72 h-72 rounded-full bg-amber-400/10 blur-3xl"></div>

    <div class="relative max-w-7xl mx-auto px-3 sm:px-5 lg:px-7 space-y-5">

        {{-- الهيدر الرسمي المختصر --}}
        <section class="overflow-hidden rounded-[2rem] border border-white/10 bg-white/[0.045] shadow-2xl shadow-cyan-950/40 backdrop-blur-xl">
            <div class="relative p-4 sm:p-6 lg:p-7">
                <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-l from-transparent via-cyan-300/70 to-transparent"></div>

                <div class="grid gap-5 lg:grid-cols-[1.15fr_.85fr] lg:items-center">
                    <div class="space-y-4">
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="inline-flex items-center gap-2 rounded-full border border-cyan-300/25 bg-cyan-400/10 px-3 py-1 text-[11px] font-bold text-cyan-100">
                                <i class="fa-solid fa-shield-halved text-cyan-300"></i>
                                نظام التعتير — لوحة داخلية منظمة
                            </span>
                            <span class="inline-flex items-center gap-2 rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-[11px] font-bold text-amber-100">
                                <i class="fa-solid fa-crown text-amber-300"></i>
                                تصميم بانلز بدون زحمة
                            </span>
                        </div>

                        <div>
                            <h1 class="text-2xl sm:text-4xl font-black tracking-tight text-white">
                                إدارة <span class="bg-gradient-to-l from-cyan-200 via-sky-300 to-blue-400 bg-clip-text text-transparent">أرقام التعتير</span>
                            </h1>
                            <p class="mt-2 max-w-2xl text-sm sm:text-[15px] leading-7 text-slate-300">
                                إصدار، متابعة، إلغاء، وإعادة إصدار الأكواد من صفحة واحدة مرتبة. إدارة الأكواد صارت بانيل جانبي خفيف بدل مودال يخنق الشاشة.
                            </p>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-2 sm:gap-3">
                        <div class="rounded-2xl border border-white/10 bg-black/25 p-3 sm:p-4">
                            <div class="flex items-center justify-between gap-2 text-[11px] text-slate-400">
                                <span>عدد الأعضاء</span>
                                <i class="fa-solid fa-users text-cyan-300"></i>
                            </div>
                            <div class="mt-2 text-2xl font-black text-cyan-200">{{ number_format($stats['total_members'] ?? 0) }}</div>
                        </div>

                        <div class="rounded-2xl border border-white/10 bg-black/25 p-3 sm:p-4">
                            <div class="flex items-center justify-between gap-2 text-[11px] text-slate-400">
                                <span>إجمالي الأكواد</span>
                                <i class="fa-solid fa-hashtag text-slate-200"></i>
                            </div>
                            <div class="mt-2 text-2xl font-black text-white">{{ number_format($stats['total_codes'] ?? 0) }}</div>
                        </div>

                        <div class="rounded-2xl border border-emerald-300/20 bg-emerald-400/10 p-3 sm:p-4">
                            <div class="flex items-center justify-between gap-2 text-[11px] text-emerald-100/80">
                                <span>أكواد فعّالة</span>
                                <i class="fa-solid fa-circle-check text-emerald-300"></i>
                            </div>
                            <div class="mt-2 text-2xl font-black text-emerald-200">{{ number_format($stats['active_codes'] ?? 0) }}</div>
                        </div>

                        <div class="rounded-2xl border border-rose-300/20 bg-rose-400/10 p-3 sm:p-4">
                            <div class="flex items-center justify-between gap-2 text-[11px] text-rose-100/80">
                                <span>أكواد ملغاة</span>
                                <i class="fa-solid fa-ban text-rose-300"></i>
                            </div>
                            <div class="mt-2 text-2xl font-black text-rose-200">{{ number_format($stats['revoked_codes'] ?? 0) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- تخطيط الصفحة: الأعضاء + بانيل الإنشاء --}}
        <section class="grid gap-4 lg:grid-cols-12 lg:items-start">

            {{-- قائمة الأعضاء --}}
            <div class="lg:col-span-8 xl:col-span-9 space-y-4">
                <div class="rounded-[1.7rem] border border-white/10 bg-white/[0.04] p-3 sm:p-4 backdrop-blur-xl shadow-xl shadow-black/20">
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <h2 class="text-lg sm:text-xl font-black text-white flex items-center gap-2">
                                <i class="fa-solid fa-address-card text-cyan-300"></i>
                                الأعضاء الذين لديهم رقم تعتير
                            </h2>
                            <p class="mt-1 text-xs sm:text-sm text-slate-400">
                                بطاقات مختصرة وواضحة، وزر إدارة الأكواد يفتح بانيل جانبي بدل نافذة كبيرة.
                            </p>
                        </div>

                        <div class="relative w-full sm:w-72">
                            <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 text-xs"></i>
                            <input id="memberSearch" type="search" placeholder="بحث باسم العضو..."
                                   class="w-full rounded-2xl border border-white/10 bg-black/35 py-2.5 pr-9 pl-3 text-sm text-white placeholder:text-slate-500 outline-none transition focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-400/20">
                        </div>
                    </div>
                </div>

                @if($membersWithCodes->isEmpty())
                    <div class="rounded-[1.7rem] border border-white/10 bg-white/[0.04] px-5 py-10 text-center text-slate-300 backdrop-blur-xl">
                        <div class="mx-auto mb-3 grid h-14 w-14 place-items-center rounded-2xl border border-cyan-300/20 bg-cyan-400/10 text-cyan-200">
                            <i class="fa-solid fa-inbox text-xl"></i>
                        </div>
                        لا يوجد أي عضو لديه رقم تعتير بعد.
                    </div>
                @else
                    <div id="membersGrid" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                        @foreach($membersWithCodes as $member)
                            @php
                                $latestStatus = $member->latest_status ?? 'active';
                                $revokedCount = (int)($member->revoked_count ?? 0);
                                $totalCodes   = (int)($member->total_codes ?? 0);
                                $initials     = mb_substr($member->name, 0, 2, 'UTF-8');
                            @endphp

                            <article class="member-card group rounded-[1.55rem] border border-white/10 bg-slate-950/72 p-4 shadow-lg shadow-black/25 transition hover:-translate-y-0.5 hover:border-cyan-300/35 hover:bg-slate-950/90"
                                     data-member-name="{{ e($member->name) }}">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="flex min-w-0 items-center gap-3">
                                        <div class="relative shrink-0">
                                            <div class="grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-cyan-400 via-sky-500 to-blue-700 text-sm font-black text-white shadow-lg shadow-cyan-900/30">
                                                {{ $initials }}
                                            </div>
                                            <span class="absolute -bottom-1 -left-1 h-4 w-4 rounded-full border-2 border-slate-950 {{ $latestStatus === 'active' ? 'bg-emerald-400' : ($latestStatus === 'revoked' ? 'bg-rose-400' : 'bg-amber-400') }}"></span>
                                        </div>

                                        <div class="min-w-0">
                                            <h3 class="truncate text-sm font-black text-white">{{ $member->name }}</h3>
                                            <div class="mt-1 flex flex-wrap items-center gap-1.5">
                                                @if($latestStatus === 'active')
                                                    <span class="rounded-full border border-emerald-300/30 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-bold text-emerald-200">كود فعّال</span>
                                                @elseif($latestStatus === 'revoked')
                                                    <span class="rounded-full border border-rose-300/30 bg-rose-400/10 px-2 py-0.5 text-[10px] font-bold text-rose-200">ملغى</span>
                                                @elseif($latestStatus === 'reissued')
                                                    <span class="rounded-full border border-amber-300/30 bg-amber-400/10 px-2 py-0.5 text-[10px] font-bold text-amber-200">أُعيد إصداره</span>
                                                @else
                                                    <span class="rounded-full border border-white/15 bg-white/5 px-2 py-0.5 text-[10px] font-bold text-slate-300">غير معروف</span>
                                                @endif

                                                @if($revokedCount > 0)
                                                    <span class="rounded-full border border-rose-300/20 bg-rose-400/10 px-2 py-0.5 text-[10px] font-bold text-rose-200">ملغى {{ $revokedCount }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-4 grid grid-cols-2 gap-2 text-xs">
                                    <div class="rounded-2xl border border-white/10 bg-white/[0.035] p-3">
                                        <div class="text-slate-500">عدد الأكواد</div>
                                        <div class="mt-1 font-black text-white">{{ $totalCodes }}</div>
                                    </div>
                                    <div class="rounded-2xl border border-white/10 bg-white/[0.035] p-3">
                                        <div class="text-slate-500">الرمز الحالي</div>
                                        <div class="mt-1 truncate font-mono text-[13px] font-black tracking-wider text-cyan-200">{{ $member->active_code ?? '—' }}</div>
                                    </div>
                                </div>

                                <button type="button"
                                        class="codes-manager-btn mt-3 inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-cyan-300/25 bg-cyan-400/10 px-3 py-2.5 text-xs font-black text-cyan-100 transition hover:border-cyan-200/55 hover:bg-cyan-400/18"
                                        data-user-id="{{ $member->id }}"
                                        data-member-name="{{ e($member->name) }}">
                                    <i class="fa-solid fa-sliders text-cyan-300"></i>
                                    إدارة الأكواد
                                </button>
                            </article>
                        @endforeach
                    </div>

                    <div id="emptySearchState" class="hidden rounded-[1.7rem] border border-white/10 bg-white/[0.04] px-5 py-8 text-center text-sm text-slate-300 backdrop-blur-xl">
                        لا يوجد عضو مطابق لعملية البحث.
                    </div>
                @endif
            </div>

            {{-- بانيل إنشاء رقم جديد + معلومات --}}
            <aside class="lg:col-span-4 xl:col-span-3 lg:sticky lg:top-5 space-y-4">
                <div class="overflow-hidden rounded-[1.8rem] border border-cyan-300/20 bg-slate-950/80 shadow-xl shadow-cyan-950/25 backdrop-blur-xl">
                    <div class="border-b border-white/10 bg-white/[0.035] p-4">
                        <div class="flex items-center gap-3">
                            <div class="grid h-10 w-10 place-items-center rounded-2xl border border-cyan-300/20 bg-cyan-400/10 text-cyan-200">
                                <i class="fa-solid fa-plus"></i>
                            </div>
                            <div>
                                <h2 class="text-base font-black text-white">إنشاء رقم جديد</h2>
                                <p class="text-[11px] text-slate-400">معالج مختصر ومنظم بخطوات واضحة.</p>
                            </div>
                        </div>
                    </div>

                    <div class="p-4 space-y-3">
                        <label for="taateerUser" class="block text-xs font-bold text-slate-300">اختر العضو</label>
                        <select id="taateerUser"
                                class="w-full rounded-2xl border border-white/10 bg-black/45 px-3 py-3 text-sm text-white outline-none transition focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-400/20">
                            <option value="">— اختر عضواً —</option>
                            @foreach($availableUsers as $user)
                                <option value="{{ $user->id }}" data-photo="{{ $user->avatar_url }}">
                                    {{ $user->name }}
                                </option>
                            @endforeach
                        </select>

                        <button id="openWizardBtn" type="button"
                                class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-l from-sky-500 via-cyan-500 to-blue-700 px-5 py-3 text-sm font-black text-white shadow-lg shadow-cyan-500/20 transition hover:scale-[1.01] active:scale-100">
                            <i class="fa-solid fa-wand-magic-sparkles"></i>
                            بدء إنشاء الرقم
                        </button>

                        <div id="taateerStatus" class="min-h-[1.25rem] text-xs text-slate-400"></div>
                    </div>
                </div>

                <div class="rounded-[1.8rem] border border-amber-300/15 bg-amber-400/[0.055] p-4 text-xs leading-7 text-slate-300 backdrop-blur-xl">
                    <h3 class="mb-2 flex items-center gap-2 text-sm font-black text-amber-200">
                        <i class="fa-solid fa-circle-info"></i>
                        ملاحظة إدارية
                    </h3>
                    <p>
                        رقم التعتير ليس عقوبة، بل أداة تنظيمية داخلية. كل تعديل على الأكواد يتم تسجيله مع المسؤول والتاريخ لضمان الشفافية.
                    </p>
                    <div class="mt-3 grid gap-2">
                        <div class="rounded-2xl border border-white/10 bg-black/20 p-3">إصدار الأكواد من الإدارة العليا فقط.</div>
                        <div class="rounded-2xl border border-white/10 bg-black/20 p-3">الإلغاء وإعادة الإصدار يتمان من بانيل الأكواد.</div>
                    </div>
                </div>
            </aside>
        </section>

        {{-- بانيل Wizard إنشاء رقم التعتير --}}
        <div id="taateerModal" class="fixed inset-0 z-[9999] hidden">
            <div class="absolute inset-0 bg-black/75 backdrop-blur-sm" onclick="closeTaateerModal()" aria-hidden="true"></div>

            <section class="relative z-10 mx-auto mt-4 flex max-h-[calc(100vh-2rem)] w-[calc(100%-1rem)] max-w-xl flex-col overflow-hidden rounded-[2rem] border border-cyan-300/25 bg-slate-950 text-white shadow-2xl shadow-cyan-950/40 sm:mt-10">
                <header class="shrink-0 border-b border-white/10 bg-white/[0.035] p-4">
                    <div class="flex items-center justify-between gap-3">
                        <div class="flex min-w-0 items-center gap-3">
                            <div class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl border border-cyan-300/20 bg-cyan-400/10 text-cyan-200">
                                <i class="fa-solid fa-shield-halved"></i>
                            </div>
                            <div class="min-w-0">
                                <div class="truncate font-black text-white">إنشاء رقم التعتير</div>
                                <div class="truncate text-[11px] text-slate-400">إجراء رسمي داخلي — صلاحية أسبوعين</div>
                            </div>
                        </div>
                        <button class="grid h-9 w-9 place-items-center rounded-xl border border-white/10 bg-white/5 text-slate-300 transition hover:border-rose-300/40 hover:text-rose-200" onclick="closeTaateerModal()" aria-label="إغلاق">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>

                    <div class="mt-4 flex items-center gap-2">
                        <div id="stDot1" class="grid h-8 w-8 place-items-center rounded-full bg-cyan-400 text-sm font-black text-slate-950">1</div>
                        <div id="stLine1" class="h-1 flex-1 rounded-full bg-white/10"></div>
                        <div id="stDot2" class="grid h-8 w-8 place-items-center rounded-full bg-white/10 text-sm font-black text-white/55">2</div>
                        <div id="stLine2" class="h-1 flex-1 rounded-full bg-white/10"></div>
                        <div id="stDot3" class="grid h-8 w-8 place-items-center rounded-full bg-white/10 text-sm font-black text-white/55">3</div>
                    </div>
                </header>

                <main class="taateer-scrollbar flex-1 overflow-y-auto p-4 sm:p-5">
                    {{-- 1 معلومات --}}
                    <div id="step1" class="space-y-4">
                        <div class="rounded-3xl border border-white/10 bg-white/[0.035] p-4">
                            <div class="flex items-center gap-4">
                                <div id="tPhotoWrapper" class="grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-3xl border border-cyan-300/20 bg-gradient-to-br from-cyan-500/25 to-blue-600/25">
                                    <img id="tPhoto" src="" class="hidden h-full w-full object-cover" alt="">
                                    <span id="tPhotoFallback" class="text-lg font-black text-white"></span>
                                </div>
                                <div class="min-w-0">
                                    <div class="text-xs text-slate-400">سيتم إنشاء رقم للعضو</div>
                                    <div id="tName" class="truncate text-lg font-black text-white"></div>
                                </div>
                            </div>
                        </div>

                        <div class="rounded-3xl border border-cyan-300/15 bg-cyan-400/10 p-4 text-sm leading-7 text-slate-200">
                            سيتم إنشاء رقم تعتير بصيغة
                            <span class="font-mono font-black tracking-widest text-cyan-200">XB-T########</span>
                            مع تاريخ انتهاء تلقائي بعد <span class="font-black text-white">14 يوم</span> من لحظة الإصدار.
                        </div>

                        <div class="flex justify-end gap-2">
                            <button class="rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-bold text-slate-200 hover:bg-white/10" onclick="closeTaateerModal()">إلغاء</button>
                            <button id="nextBtn" class="rounded-2xl bg-gradient-to-l from-sky-500 via-cyan-500 to-blue-700 px-5 py-2 text-sm font-black text-white shadow" onclick="goWaitingStep()">التالي</button>
                        </div>
                    </div>

                    {{-- انتظار 30 ثانية --}}
                    <div id="wait30" class="hidden space-y-4 text-center">
                        <div class="mx-auto grid h-16 w-16 place-items-center rounded-3xl border border-cyan-300/20 bg-cyan-400/10">
                            <div class="h-10 w-10 animate-spin rounded-full border-4 border-cyan-400/25 border-t-cyan-300"></div>
                        </div>
                        <div class="font-black text-white">رجاء الانتظار…</div>
                        <div class="text-sm text-slate-400">تهيئة البيانات والتحقق من السجلات</div>
                        <div class="text-xs text-slate-300">الوقت المتبقي: <span id="countdown" class="font-black text-cyan-200">30</span> ثانية</div>
                    </div>

                    {{-- 2 أهمية + تأكيد --}}
                    <div id="step2" class="hidden space-y-4">
                        <div class="rounded-3xl border border-white/10 bg-white/[0.035] p-4 text-sm leading-8 text-slate-200">
                            <span class="font-black text-cyan-200">أهمية رقم التعتير:</span><br>
                            إنشاء رقم التعتير هو إجراء تنظيمي لحماية المنصّة وحفظ حقوق الأعضاء. يتم استخدام الرقم داخلياً للأرشفة والمتابعة مع تسجيل كل حركة على الكود.
                        </div>
                        <div class="rounded-3xl border border-amber-300/20 bg-amber-400/10 p-4 text-sm font-bold text-amber-100">
                            هل أنت متأكد من إنشاء رقم التعتير لهذا العضو مع صلاحية تمتد لأسبوعين من اليوم؟
                        </div>
                        <div class="flex items-center justify-between gap-2">
                            <button class="rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-bold text-slate-200 hover:bg-white/10" onclick="backToStep1()">
                                <i class="fa-solid fa-arrow-right ms-1"></i> رجوع
                            </button>
                            <button id="confirmBtn" class="rounded-2xl bg-gradient-to-l from-emerald-500 to-green-700 px-5 py-2 text-sm font-black text-white shadow" onclick="confirmCreate()">
                                نعم، إنشاء الرقم
                            </button>
                        </div>
                    </div>

                    {{-- جاري الإنشاء --}}
                    <div id="generating" class="hidden space-y-4 text-center">
                        <div class="mx-auto grid h-16 w-16 place-items-center rounded-3xl border border-amber-300/20 bg-amber-400/10">
                            <div class="h-10 w-10 animate-spin rounded-full border-4 border-amber-400/25 border-t-amber-300"></div>
                        </div>
                        <div class="font-black text-white">رجاء الانتظار…</div>
                        <div class="text-sm text-slate-400">جارٍ إنشاء رقم التعتير</div>
                    </div>

                    {{-- 3 النتيجة --}}
                    <div id="step3" class="hidden space-y-4 text-center">
                        <div class="text-sm text-slate-400">رقم التعتير للعضو</div>
                        <div id="tName2" class="text-lg font-black text-white"></div>
                        <div class="inline-flex max-w-full items-center gap-3 rounded-3xl border border-cyan-300/25 bg-cyan-400/10 px-4 py-3 shadow-inner">
                            <i class="fa-solid fa-hashtag text-cyan-200"></i>
                            <div id="finalCode" class="max-w-[180px] truncate font-mono text-xl font-black tracking-widest text-white sm:max-w-none sm:text-2xl"></div>
                            <button class="rounded-full border border-cyan-300/25 bg-cyan-400/10 px-3 py-1 text-xs font-bold text-cyan-100 hover:bg-cyan-400/20" onclick="copyFinalCode()">
                                <i class="fa-regular fa-copy ms-1"></i> نسخ
                            </button>
                        </div>
                        <div>
                            <button class="rounded-2xl bg-emerald-600 px-6 py-2 text-sm font-black text-white hover:bg-emerald-700" onclick="closeTaateerModal()">تم</button>
                        </div>
                    </div>
                </main>

                <input type="hidden" id="tUserId">
            </section>
        </div>

        {{-- بانيل إدارة الأكواد الجانبي --}}
        <div id="codesManagerModal" class="fixed inset-0 z-[9998] hidden">
            <div id="codesBackdrop" class="absolute inset-0 bg-black/70 backdrop-blur-sm" onclick="closeCodesManager()"></div>

            <aside id="codesPanelContent"
                   class="absolute right-0 top-0 flex h-full w-[92vw] max-w-[500px] translate-x-full flex-col overflow-hidden border-l border-cyan-300/20 bg-slate-950 text-white shadow-2xl shadow-black/60 transition-transform duration-300 ease-out">
                <header class="shrink-0 border-b border-white/10 bg-white/[0.035] p-4">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <div class="mb-1 inline-flex items-center gap-2 rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-[11px] font-black text-amber-100">
                                <i class="fa-solid fa-key text-amber-300"></i>
                                بانيل إدارة الأكواد
                            </div>
                            <h3 class="truncate text-lg font-black text-white">
                                <span id="codesMemberName"></span>
                            </h3>
                            <p class="mt-1 text-xs text-slate-400">الإلغاء وإعادة الإصدار بدون فتح صفحة كاملة.</p>
                        </div>

                        <button type="button"
                                class="grid h-10 w-10 shrink-0 place-items-center rounded-2xl border border-white/10 bg-white/5 text-slate-300 transition hover:border-rose-300/40 hover:text-rose-200"
                                onclick="closeCodesManager()"
                                aria-label="إغلاق">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                </header>

                <main class="taateer-scrollbar min-h-0 flex-1 overflow-y-auto p-4">
                    <div id="codesListArea" class="min-h-[160px] text-xs text-slate-200/90">
                        جارٍ التحميل...
                    </div>
                </main>

                <footer class="shrink-0 border-t border-white/10 bg-slate-950/95 p-4 backdrop-blur-xl">
                    <div class="grid grid-cols-2 gap-2">
                        <button type="button"
                                class="inline-flex items-center justify-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-3 py-3 text-xs font-black text-slate-200 transition hover:bg-white/10"
                                onclick="refreshCodesList()">
                            <i class="fa-solid fa-rotate"></i>
                            تحديث
                        </button>
                        <button id="reissueBtn" type="button"
                                class="inline-flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-l from-amber-300 to-yellow-500 px-3 py-3 text-xs font-black text-slate-950 shadow-lg shadow-amber-500/15 transition hover:scale-[1.01] active:scale-100"
                                onclick="reissueCodeForCurrent()">
                            <i class="fa-solid fa-arrows-rotate"></i>
                            إعادة إصدار كود
                        </button>
                    </div>
                </footer>
            </aside>
        </div>

        {{-- تنبيه خفيف بدل كثرة alert --}}
        <div id="taateerToast" class="fixed bottom-4 left-4 z-[10000] hidden max-w-[calc(100vw-2rem)] rounded-2xl border border-white/10 bg-slate-950/95 px-4 py-3 text-sm font-bold text-white shadow-2xl backdrop-blur-xl"></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const createUrl    = "{{ route('superadmin.taateer.create') }}";
    const listUrl      = "{{ route('superadmin.taateer.list') }}";
    const revokeUrl    = "{{ route('superadmin.taateer.revoke') }}";
    const reissueUrl   = "{{ route('superadmin.taateer.reissue') }}";
    const csrfToken    = "{{ $csrfToken }}";

    const userSelect    = document.getElementById('taateerUser');
    const openWizardBtn = document.getElementById('openWizardBtn');
    const statusSpan    = document.getElementById('taateerStatus');

    function notify(message, type = 'info') {
        const toast = document.getElementById('taateerToast');
        if (!toast) {
            alert(message);
            return;
        }

        const styles = {
            info: 'border-white/10 text-white',
            ok: 'border-emerald-300/25 text-emerald-100',
            err: 'border-rose-300/25 text-rose-100',
            warn: 'border-amber-300/25 text-amber-100',
        };

        toast.className = 'fixed bottom-4 left-4 z-[10000] max-w-[calc(100vw-2rem)] rounded-2xl bg-slate-950/95 px-4 py-3 text-sm font-bold shadow-2xl backdrop-blur-xl ' + (styles[type] || styles.info);
        toast.textContent = message;
        toast.classList.remove('hidden');
        clearTimeout(window.__taateerToastTimer);
        window.__taateerToastTimer = setTimeout(() => toast.classList.add('hidden'), 3200);
    }

    // ====== حالة واجهة أسفل الصفحة ======
    function setStatus(msg, type = 'info') {
        if (!statusSpan) return;
        const colors = {
            info: 'text-slate-300',
            ok:   'text-emerald-300',
            err:  'text-rose-300'
        };
        statusSpan.className = 'min-h-[1.25rem] text-xs ' + (colors[type] || colors.info);
        statusSpan.textContent = msg || '';
    }

    // ====== بحث الأعضاء ======
    const memberSearch = document.getElementById('memberSearch');
    const emptySearchState = document.getElementById('emptySearchState');

    if (memberSearch) {
        memberSearch.addEventListener('input', () => {
            const q = memberSearch.value.trim().toLowerCase();
            const cards = Array.from(document.querySelectorAll('.member-card'));
            let visibleCount = 0;

            cards.forEach(card => {
                const name = (card.dataset.memberName || '').toLowerCase();
                const match = !q || name.includes(q);
                card.classList.toggle('hidden', !match);
                if (match) visibleCount++;
            });

            if (emptySearchState) emptySearchState.classList.toggle('hidden', visibleCount !== 0);
        });
    }

    // ====== Wizard إنشاء رقم التعتير ======
    let selectedUser = { id: null, name: '' };
    let waitTimer = null;
    let countLeft = 30;

    const taateerModal = document.getElementById('taateerModal');

    function openTaateerModal(userId, userName, photoUrl) {
        selectedUser = { id: userId, name: userName };
        document.getElementById('tUserId').value = userId;
        document.getElementById('tName').textContent  = userName;
        document.getElementById('tName2').textContent = userName;

        const img      = document.getElementById('tPhoto');
        const fallback = document.getElementById('tPhotoFallback');

        if (photoUrl) {
            img.src = photoUrl;
            img.classList.remove('hidden');
            fallback.textContent = '';
        } else {
            img.classList.add('hidden');
            fallback.textContent = userName ? userName.trim().substring(0, 2) : '?';
        }

        showStep(1);
        taateerModal.classList.remove('hidden');
        document.body.classList.add('overflow-hidden');
    }

    function closeTaateerModal() {
        clearInterval(waitTimer);
        taateerModal.classList.add('hidden');
        showStep(1);
        if (document.getElementById('codesManagerModal')?.classList.contains('hidden')) {
            document.body.classList.remove('overflow-hidden');
        }
    }

    function setStepCircle(id, active) {
        const el = document.getElementById(id);
        if (!el) return;
        el.className = 'grid h-8 w-8 place-items-center rounded-full text-sm font-black ' + (active ? 'bg-cyan-400 text-slate-950' : 'bg-white/10 text-white/55');
    }

    function setStepLine(id, active) {
        const el = document.getElementById(id);
        if (!el) return;
        el.className = 'h-1 flex-1 rounded-full ' + (active ? 'bg-cyan-400' : 'bg-white/10');
    }

    function showStep(n) {
        ['step1','wait30','step2','generating','step3'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.classList.add('hidden');
        });

        if (n === 1)  document.getElementById('step1').classList.remove('hidden');
        if (n === 99) document.getElementById('wait30').classList.remove('hidden');
        if (n === 2)  document.getElementById('step2').classList.remove('hidden');
        if (n === 98) document.getElementById('generating').classList.remove('hidden');
        if (n === 3)  document.getElementById('step3').classList.remove('hidden');

        setStepCircle('stDot1', n >= 1);
        setStepCircle('stDot2', n >= 2);
        setStepCircle('stDot3', n >= 3);
        setStepLine('stLine1', n >= 2);
        setStepLine('stLine2', n >= 3);
    }

    function goWaitingStep() {
        const btn = document.getElementById('nextBtn');
        btn.disabled = true;
        btn.textContent = 'رجاء الانتظار…';

        countLeft = 30;
        document.getElementById('countdown').textContent = countLeft;
        showStep(99);
        clearInterval(waitTimer);
        waitTimer = setInterval(() => {
            countLeft--;
            document.getElementById('countdown').textContent = countLeft;
            if (countLeft <= 0) {
                clearInterval(waitTimer);
                showStep(2);
                btn.disabled = false;
                btn.textContent = 'التالي';
            }
        }, 1000);
    }

    function backToStep1() {
        clearInterval(waitTimer);
        const btn = document.getElementById('nextBtn');
        btn.disabled = false;
        btn.textContent = 'التالي';
        showStep(1);
    }

    async function confirmCreate() {
        const cBtn = document.getElementById('confirmBtn');
        cBtn.disabled = true;
        cBtn.textContent = 'رجاء الانتظار…';
        showStep(98);

        try {
            const res = await fetch(createUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken,
                },
                body: JSON.stringify({ user_id: selectedUser.id })
            });

            const data = await res.json();

            if (data.ok) {
                document.getElementById('finalCode').textContent = data.code;
                showStep(3);
                setStatus('تم إنشاء رقم التعتير: ' + data.code, 'ok');
                notify('تم إنشاء رقم التعتير بنجاح: ' + data.code, 'ok');
            } else if (data.msg === 'already_active') {
                notify('يوجد كود فعّال لهذا العضو. افتح إدارة الأكواد لإدارته.', 'warn');
                showStep(2);
            } else {
                notify('حدث خطأ أثناء الإنشاء.', 'err');
                showStep(2);
            }
        } catch (e) {
            notify('مشكلة اتصال مع الخادم.', 'err');
            showStep(2);
        } finally {
            cBtn.disabled = false;
            cBtn.textContent = 'نعم، إنشاء الرقم';
        }
    }

    function copyFinalCode() {
        const code = document.getElementById('finalCode').textContent.trim();
        if (!code) return;
        navigator.clipboard.writeText(code).then(() => {
            notify('تم نسخ رقم التعتير.', 'ok');
        }).catch(() => {
            notify('تعذّر النسخ تلقائياً.', 'warn');
        });
    }

    if (openWizardBtn) {
        openWizardBtn.addEventListener('click', () => {
            const userId = userSelect.value;
            const opt = userSelect.options[userSelect.selectedIndex];
            const userName = opt?.text || '';
            const photoUrl = opt?.dataset.photo || '';

            if (!userId) {
                setStatus('اختر عضواً أولاً.', 'err');
                return;
            }

            setStatus('');
            openTaateerModal(userId, userName, photoUrl);
        });
    }

    // ====== إدارة الأكواد (بانيل جانبي) ======
    let currentCodesUserId = null;

    document.querySelectorAll('.codes-manager-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            openCodesManager(btn.dataset.userId, btn.dataset.memberName || 'عضو');
        });
    });

    function openCodesManager(userId, name) {
        currentCodesUserId = userId;
        document.getElementById('codesMemberName').textContent = name;

        const modal = document.getElementById('codesManagerModal');
        const panel = document.getElementById('codesPanelContent');

        modal.classList.remove('hidden');
        document.body.classList.add('overflow-hidden');

        requestAnimationFrame(() => {
            panel.classList.remove('translate-x-full');
        });

        refreshCodesList();
    }

    function closeCodesManager() {
        currentCodesUserId = null;
        const modal = document.getElementById('codesManagerModal');
        const panel = document.getElementById('codesPanelContent');

        panel.classList.add('translate-x-full');
        setTimeout(() => {
            modal.classList.add('hidden');
            if (taateerModal?.classList.contains('hidden')) {
                document.body.classList.remove('overflow-hidden');
            }
        }, 250);
    }

    async function refreshCodesList() {
        if (!currentCodesUserId) return;
        const box = document.getElementById('codesListArea');
        box.innerHTML = `
            <div class="grid min-h-[180px] place-items-center rounded-3xl border border-white/10 bg-white/[0.035] text-center">
                <div>
                    <div class="mx-auto mb-3 h-10 w-10 animate-spin rounded-full border-4 border-cyan-400/25 border-t-cyan-300"></div>
                    <div class="text-sm font-black text-slate-200">جارٍ تحميل الأكواد...</div>
                </div>
            </div>
        `;

        try {
            const res = await fetch(listUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken,
                },
                body: JSON.stringify({ user_id: currentCodesUserId })
            });

            const data = await res.json();

            if (!data.ok) {
                box.innerHTML = '<div class="rounded-3xl border border-rose-300/20 bg-rose-400/10 p-4 text-rose-100">تعذّر تحميل الأكواد.</div>';
                return;
            }

            if (!data.codes || !data.codes.length) {
                box.innerHTML = `
                    <div class="rounded-3xl border border-white/10 bg-white/[0.035] p-6 text-center text-slate-300">
                        <div class="mx-auto mb-3 grid h-12 w-12 place-items-center rounded-2xl border border-cyan-300/20 bg-cyan-400/10 text-cyan-200">
                            <i class="fa-solid fa-key"></i>
                        </div>
                        لا توجد أي أكواد لهذا العضو بعد.
                    </div>
                `;
                return;
            }

            const rows = data.codes.map(c => {
                const badge =
                    c.status === 'active'   ? '<span class="rounded-full border border-emerald-300/30 bg-emerald-400/10 px-2.5 py-1 text-[10px] font-black text-emerald-200">فعّال</span>' :
                    c.status === 'revoked'  ? '<span class="rounded-full border border-rose-300/30 bg-rose-400/10 px-2.5 py-1 text-[10px] font-black text-rose-200">ملغى</span>' :
                    c.status === 'reissued' ? '<span class="rounded-full border border-amber-300/30 bg-amber-400/10 px-2.5 py-1 text-[10px] font-black text-amber-200">أُعيد إصداره</span>' :
                                              '<span class="rounded-full border border-white/15 bg-white/5 px-2.5 py-1 text-[10px] font-black text-slate-300">غير معروف</span>';

                const canRevoke = (c.status === 'active' || c.status === 'reissued');

                return `
                    <article class="rounded-3xl border border-white/10 bg-white/[0.035] p-4 transition hover:border-cyan-300/25">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <div class="truncate font-mono text-base font-black tracking-widest text-white">${c.code}</div>
                                <div class="mt-1 text-[11px] text-slate-500">صدر بتاريخ: ${c.issued_at ?? '-'}</div>
                            </div>
                            ${badge}
                        </div>

                        <div class="mt-3 flex items-center justify-end gap-2">
                            <button type="button"
                                    class="rounded-full border border-cyan-300/20 bg-cyan-400/10 px-3 py-1.5 text-[11px] font-bold text-cyan-100 hover:bg-cyan-400/20"
                                    onclick="copyCodeFromList('${String(c.code).replace(/'/g, "\\'")}')">
                                <i class="fa-regular fa-copy ms-1"></i> نسخ
                            </button>
                            ${canRevoke
                                ? `<button type="button"
                                           class="rounded-full border border-rose-300/30 bg-rose-400/10 px-3 py-1.5 text-[11px] font-black text-rose-200 hover:bg-rose-400/20"
                                           onclick="revokeCode(${c.id})">
                                       إلغاء
                                   </button>`
                                : ''}
                        </div>
                    </article>
                `;
            });

            box.innerHTML = `<div class="space-y-3">${rows.join('')}</div>`;
        } catch (e) {
            box.innerHTML = '<div class="rounded-3xl border border-rose-300/20 bg-rose-400/10 p-4 text-rose-100">مشكلة اتصال أثناء تحميل القائمة.</div>';
        }
    }

    function copyCodeFromList(code) {
        if (!code) return;
        navigator.clipboard.writeText(code).then(() => notify('تم نسخ الكود.', 'ok')).catch(() => notify('تعذّر النسخ تلقائياً.', 'warn'));
    }

    async function revokeCode(codeId) {
        if (!confirm('هل أنت متأكد من إلغاء هذا الكود؟')) return;

        try {
            const res = await fetch(revokeUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken,
                },
                body: JSON.stringify({ code_id: codeId, reason: '' })
            });

            const data = await res.json();
            if (data.ok) {
                notify('تم إلغاء الكود بنجاح.', 'ok');
                await refreshCodesList();
            } else {
                notify('تعذّر إلغاء الكود.', 'err');
            }
        } catch (e) {
            notify('مشكلة اتصال أثناء الإلغاء.', 'err');
        }
    }

    async function reissueCodeForCurrent() {
        if (!currentCodesUserId) return;

        const btn = document.getElementById('reissueBtn');
        const oldContent = btn ? btn.innerHTML : '';
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<i class="fa-solid fa-spinner animate-spin"></i> جارٍ الإصدار...';
        }

        try {
            const res = await fetch(reissueUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken,
                },
                body: JSON.stringify({ user_id: currentCodesUserId })
            });

            const data = await res.json();

            if (data.ok) {
                notify('تم إصدار كود جديد: ' + data.code, 'ok');
                await refreshCodesList();
            } else if (data.msg === 'none_active_to_reissue') {
                notify('لا يوجد كود فعّال لإعادة إصداره.', 'warn');
            } else {
                notify('تعذّر إعادة الإصدار.', 'err');
            }
        } catch (e) {
            notify('مشكلة اتصال أثناء إعادة الإصدار.', 'err');
        } finally {
            if (btn) {
                btn.disabled = false;
                btn.innerHTML = oldContent;
            }
        }
    }

    document.addEventListener('keydown', (e) => {
        if (e.key !== 'Escape') return;
        if (!document.getElementById('codesManagerModal')?.classList.contains('hidden')) closeCodesManager();
        else if (!taateerModal?.classList.contains('hidden')) closeTaateerModal();
    });
</script>
@endpush