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

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

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

<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 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                <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-shield-halved 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="text-cyan-300 font-semibold">جيش الوفاء الذهبي</span>.
                        كل رقم هو هوية خاصة تُستخدم داخلياً لزيادة الأمان، وضبط النظام، ومتابعة الأعضاء بشكل منظم.
                    </p>
                </div>

                <div class="w-full lg:w-auto">
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-center">

                        <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'] ?? 0) }}
                            </div>
                        </div>

                        <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-slate-50">
                                {{ number_format($stats['total_codes'] ?? 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['active_codes'] ?? 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['revoked_codes'] ?? 0) }}
                            </div>
                        </div>

                    </div>
                </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-4">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                <div>
                    <h2 class="text-lg sm:text-xl font-extrabold text-cyan-300">
                        الأعضاء الذين لديهم رقم تعتير
                    </h2>
                    <p class="text-xs sm:text-sm text-slate-300/80">
                        يظهر هنا كل عضو تم إصدار رقم تعتير له، مع حالته الحالية وعدد الأكواد التي صدرت له سابقاً.
                    </p>
                </div>
            </div>

            @if($membersWithCodes->isEmpty())
                <div class="rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-6 text-center text-slate-300/80 text-sm">
                    لا يوجد أي عضو لديه رقم تعتير بعد.
                </div>
            @else
                <div class="grid gap-3 sm:grid-cols-2 lg: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);
                        @endphp

                        <div class="rounded-2xl p-4 bg-gradient-to-b from-slate-900 to-black border border-white/10 shadow-lg hover:shadow-2xl transition">
                            <div class="flex items-center gap-3">
                                <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-cyan-500 via-sky-500 to-blue-600 grid place-items-center text-white font-bold text-sm">
                                    {{ mb_substr($member->name,0,2,'UTF-8') }}
                                </div>
                                <div class="min-w-0">
                                    <div class="font-bold text-white truncate">{{ $member->name }}</div>
                                    <div class="text-[11px] text-white/60 space-x-1 space-x-reverse">
                                        @if($latestStatus === 'active')
                                            <span class="px-2 py-0.5 rounded-full border border-emerald-400/40 bg-emerald-500/15 text-emerald-200 text-[11px]">
                                                كود فعّال
                                            </span>
                                        @elseif($latestStatus === 'revoked')
                                            <span class="px-2 py-0.5 rounded-full border border-rose-400/40 bg-rose-500/15 text-rose-200 text-[11px]">
                                                ملغى
                                            </span>
                                        @elseif($latestStatus === 'reissued')
                                            <span class="px-2 py-0.5 rounded-full border border-amber-400/40 bg-amber-500/15 text-amber-200 text-[11px]">
                                                أُعيد إصداره
                                            </span>
                                        @else
                                            <span class="px-2 py-0.5 rounded-full border border-white/30 bg-white/5 text-white/70 text-[11px]">
                                                غير معروف
                                            </span>
                                        @endif

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

                            <div class="mt-3 text-xs text-slate-200/80 space-y-1.5">
                                <div class="flex justify-between">
                                    <span class="text-slate-400">عدد الأكواد:</span>
                                    <span class="font-semibold">{{ $totalCodes }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-slate-400">الرمز الحالي:</span>
                                    <span class="font-mono tracking-widest text-sm">
                                        {{ $member->active_code ?? '—' }}
                                    </span>
                                </div>
                            </div>

                            <div class="mt-3 flex justify-end gap-2">
                                <button type="button"
                                        class="px-3 py-1.5 rounded-full border border-cyan-400/40 bg-cyan-500/10 text-[11px] text-cyan-100 hover:bg-cyan-500/20"
                                        onclick="openCodesManager({{ $member->id }}, '{{ addslashes($member->name) }}')">
                                    إدارة الأكواد
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

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

        {{-- إنشاء رقم تعتير جديد --}}
        <div class="grid gap-4 lg:grid-cols-3">
            <div class="lg:col-span-2 rounded-3xl bg-gradient-to-br from-slate-900 to-black border border-cyan-500/30 shadow-xl p-5 sm:p-6 space-y-4">
                <div class="flex items-center gap-2">
                    <div class="w-9 h-9 rounded-xl bg-cyan-500/20 text-cyan-200 grid place-items-center">
                        <i class="fa-solid fa-plus"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-white">إنشاء رقم تعتير جديد</h2>
                        <p class="text-xs text-slate-300/80">
                            اختر العضو الذي تريد إصدار رقم تعتير له. النظام سيتأكد آلياً أنه لا يملك كوداً فعّالاً مسبقاً.
                        </p>
                    </div>
                </div>

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

                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                        <button id="openWizardBtn"
                                type="button"
                                class="inline-flex items-center justify-center px-6 py-2.5 rounded-full text-sm font-bold text-white
                                       bg-gradient-to-r from-sky-500 via-cyan-500 to-blue-600 shadow-lg shadow-cyan-500/30
                                       hover:scale-[1.02] active:scale-100 transition">
                            <i class="fa-solid fa-hashtag ms-1 text-xs"></i>
                            <span>بدء معالج إنشاء الرقم</span>
                        </button>

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

            {{-- صندوق توضيح رسمي --}}
            <div class="rounded-3xl bg-gradient-to-b from-slate-900 to-slate-950 border border-white/10 shadow-xl p-5 space-y-3 text-xs text-slate-200/85">
                <h3 class="text-sm font-bold text-cyan-300 flex items-center gap-2">
                    <i class="fa-solid fa-circle-info text-[13px]"></i>
                    أهمية رقم التعتير
                </h3>
                <p>
                    رقم التعتير ليس عقوبة، بل أداة تنظيمية داخلية تساعد الإدارة على ضبط الحسابات، حماية المنصّة،
                    والمتابعة الدقيقة لسلوك الأعضاء في حالات معيّنة.
                </p>
                <ul class="list-disc list-inside space-y-1">
                    <li>يُصدر فقط من قبل الإدارة العليا.</li>
                    <li>يظهر ضمن ملفات الأعضاء وسجلات التتبع.</li>
                    <li>يمكن إلغاؤه أو إعادة إصداره مع توثيق السبب.</li>
                </ul>
                <p class="text-[11px] text-slate-400">
                    أي تعديل على الأكواد يتم تسجيله مع اسم المسؤول وتاريخ الإجراء لضمان الشفافية الكاملة داخل
                    <span class="text-cyan-300 font-semibold">نظام التعتير</span>.
                </p>
            </div>
        </div>

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

            <div class="relative z-10 max-w-xl mx-auto mt-10 sm:mt-16 bg-gradient-to-b from-slate-900 to-black text-white rounded-3xl border border-cyan-500/30 shadow-2xl overflow-hidden">
                <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl grid place-items-center bg-cyan-500/15 text-cyan-300">
                            <i class="fa-solid fa-shield-halved"></i>
                        </div>
                        <div>
                            <div class="font-extrabold">إنشاء رقم التعتير</div>
                            <div class="text-xs text-white/60">إجراء رسمي داخلي — صلاحية أسبوعين من تاريخ الإصدار</div>
                        </div>
                    </div>
                    <button class="text-white/70 hover:text-red-400 text-xl" onclick="closeTaateerModal()" aria-label="إغلاق">&times;</button>
                </div>

                {{-- شريط المراحل --}}
                <div class="px-5 pt-4">
                    <div class="flex items-center gap-2 mb-4">
                        <div id="stDot1" class="w-7 h-7 rounded-full grid place-items-center bg-cyan-500 text-black font-bold">1</div>
                        <div id="stLine1" class="h-0.5 flex-1 bg-white/10"></div>
                        <div id="stDot2" class="w-7 h-7 rounded-full grid place-items-center bg-white/10 text-white/60 font-bold">2</div>
                        <div id="stLine2" class="h-0.5 flex-1 bg-white/10"></div>
                        <div id="stDot3" class="w-7 h-7 rounded-full grid place-items-center bg-white/10 text-white/60 font-bold">3</div>
                    </div>
                </div>

                <div class="p-5">
                    {{-- 1 معلومات --}}
                    <div id="step1" class="space-y-4">
                        <div class="flex items-center gap-4">
                            <div id="tPhotoWrapper" class="w-16 h-16 rounded-2xl border border-white/10 overflow-hidden bg-gradient-to-br from-cyan-500/30 to-blue-500/30 grid place-items-center">
                                <img id="tPhoto" src="" class="w-full h-full object-cover hidden" alt="">
                                <span id="tPhotoFallback" class="font-bold text-lg text-white"></span>
                            </div>
                            <div>
                                <div class="text-sm text-white/70">سيتم إنشاء رقم للعضو</div>
                                <div id="tName" class="text-lg font-bold"></div>
                            </div>
                        </div>
                        <div class="text-xs text-white/60">
                            سيتم إنشاء رقم تعتير بصيغة
                            <span class="font-mono text-cyan-300">XB-T########</span>
                            مع تاريخ انتهاء تلقائي بعد <span class="font-semibold">14 يوم</span> من لحظة الإصدار.
                        </div>
                        <div class="flex justify-end gap-2">
                            <button class="px-4 py-2 rounded-full bg-white/10 hover:bg-white/15 text-sm" onclick="closeTaateerModal()">إلغاء</button>
                            <button id="nextBtn" class="px-5 py-2 rounded-full font-bold text-sm bg-gradient-to-r from-sky-500 via-cyan-500 to-blue-600 shadow" onclick="goWaitingStep()">التالي</button>
                        </div>
                    </div>

                    {{-- انتظار 30 ثانية --}}
                    <div id="wait30" class="hidden space-y-4 text-center">
                        <div class="mx-auto w-14 h-14 rounded-full border-4 border-cyan-400/30 border-t-cyan-400 animate-spin"></div>
                        <div class="mt-3 font-bold">رجاء الانتظار…</div>
                        <div class="text-sm text-white/70">تهيئة البيانات والتحقق من السجلات</div>
                        <div class="mt-2 text-xs">
                            الوقت المتبقي:
                            <span id="countdown" class="font-bold text-cyan-300">30</span>
                            ثانية
                        </div>
                    </div>

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

                    {{-- جاري الإنشاء --}}
                    <div id="generating" class="hidden space-y-4 text-center">
                        <div class="mx-auto w-14 h-14 rounded-full border-4 border-yellow-400/30 border-t-yellow-400 animate-spin"></div>
                        <div class="mt-3 font-bold">رجاء الانتظار…</div>
                        <div class="text-sm text-white/70">جارٍ إنشاء رقم التعتير</div>
                    </div>

                    {{-- 3 النتيجة --}}
                    <div id="step3" class="hidden space-y-4 text-center">
                        <div class="text-sm text-white/70">رقم التعتير للعضو</div>
                        <div id="tName2" class="text-lg font-bold mb-2"></div>
                        <div class="inline-flex items-center gap-3 rounded-2xl px-4 py-3 bg-white/5 border border-cyan-400/40 shadow-inner">
                            <i class="fa-solid fa-hashtag text-cyan-300"></i>
                            <div id="finalCode" class="text-2xl font-extrabold tracking-widest font-mono"></div>
                            <button class="text-xs bg-cyan-600/20 border border-cyan-400/30 px-3 py-1 rounded-full hover:bg-cyan-600/30" onclick="copyFinalCode()">
                                <i class="fa-regular fa-copy ms-1"></i> نسخ
                            </button>
                        </div>
                        <div class="pt-2">
                            <button class="px-6 py-2 rounded-full bg-green-600 hover:bg-green-700 font-bold shadow text-sm" onclick="closeTaateerModal()">تم</button>
                        </div>
                    </div>
                </div>

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

        {{-- مودال إدارة الأكواد --}}
        <div id="codesManagerModal"
             class="fixed inset-0 z-[9998] hidden items-center justify-center p-4">
            <div class="absolute inset-0 bg-black/70" onclick="closeCodesManager()"></div>
            <div class="relative z-10 max-w-xl w-full rounded-3xl bg-slate-950 border border-yellow-400/40 shadow-2xl p-5 space-y-3">
                <div class="flex items-center justify-between gap-3">
                    <h3 class="text-sm sm:text-base font-bold text-yellow-300">
                        إدارة أكواد التعتير — <span id="codesMemberName"></span>
                    </h3>
                    <button type="button"
                            class="text-slate-300 hover:text-rose-300 text-xl"
                            onclick="closeCodesManager()">
                        &times;
                    </button>
                </div>

                <div id="codesListArea"
                     class="mt-2 text-xs text-slate-200/85 min-h-[80px]">
                    جارٍ التحميل...
                </div>

                <div class="pt-3 flex items-center justify-end gap-2">
                    <button type="button"
                            class="px-3 py-1.5 rounded-full text-[11px] bg-white/5 border border-white/15 text-slate-200 hover:bg-white/10"
                            onclick="refreshCodesList()">
                        تحديث
                    </button>
                    <button type="button"
                            class="px-3 py-1.5 rounded-full text-[11px] bg-gradient-to-r from-amber-400 to-yellow-500 text-black font-bold shadow"
                            onclick="reissueCodeForCurrent()">
                        إعادة إصدار كود جديد
                    </button>
                </div>
            </div>
        </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 setStatus(msg, type = 'info') {
        if (!statusSpan) return;
        const colors = {
            info: 'text-slate-200',
            ok:   'text-emerald-300',
            err:  'text-rose-300'
        };
        statusSpan.className = 'text-xs ' + (colors[type] || colors.info);
        statusSpan.textContent = msg || '';
    }

    // ====== 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');
    }

    function closeTaateerModal() {
        clearInterval(waitTimer);
        taateerModal.classList.add('hidden');
        showStep(1);
    }

    function showStep(n) {
        ['step1','wait30','step2','generating','step3'].forEach(id =>
            document.getElementById(id).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');

        // تحديث شريط المراحل
        document.getElementById('stDot1').className =
            'w-7 h-7 rounded-full grid place-items-center ' + (n >= 1 ? 'bg-cyan-500 text-black font-bold' : 'bg-white/10 text-white/60 font-bold');
        document.getElementById('stDot2').className =
            'w-7 h-7 rounded-full grid place-items-center ' + (n >= 2 ? 'bg-cyan-500 text-black font-bold' : 'bg-white/10 text-white/60 font-bold');
        document.getElementById('stDot3').className =
            'w-7 h-7 rounded-full grid place-items-center ' + (n >= 3 ? 'bg-cyan-500 text-black font-bold' : 'bg-white/10 text-white/60 font-bold');

        document.getElementById('stLine1').className =
            'h-0.5 flex-1 ' + (n >= 2 ? 'bg-cyan-500' : 'bg-white/10');
        document.getElementById('stLine2').className =
            'h-0.5 flex-1 ' + (n >= 3 ? 'bg-cyan-500' : 'bg-white/10');
    }

    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');
            } else if (data.msg === 'already_active') {
                alert('يوجد كود فعّال لهذا العضو. يمكنك إدارته من "إدارة الأكواد".');
                showStep(2);
            } else {
                alert('حدث خطأ أثناء الإنشاء.');
                showStep(2);
            }
        } catch (e) {
            alert('مشكلة اتصال مع الخادم.');
            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(() => {
            alert('تم نسخ رقم التعتير.');
        });
    }

    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;

    function openCodesManager(userId, name) {
        currentCodesUserId = userId;
        document.getElementById('codesMemberName').textContent = name;
        const modal = document.getElementById('codesManagerModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        refreshCodesList();
    }

    function closeCodesManager() {
        currentCodesUserId = null;
        const modal = document.getElementById('codesManagerModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    async function refreshCodesList() {
        if (!currentCodesUserId) return;
        const box = document.getElementById('codesListArea');
        box.textContent = 'جارٍ التحميل...';

        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.textContent = 'تعذّر تحميل الأكواد.';
                return;
            }

            if (!data.codes || !data.codes.length) {
                box.textContent = 'لا توجد أي أكواد لهذا العضو بعد.';
                return;
            }

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

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

                return `
                    <div class="flex items-center justify-between gap-3 py-2 border-b border-white/5">
                        <div class="space-y-0.5">
                            <div class="font-mono text-sm tracking-widest text-slate-50">${c.code}</div>
                            <div class="text-[10px] text-slate-400">
                                صدر بتاريخ: ${c.issued_at ?? '-'}
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            ${badge}
                            ${canRevoke
                                ? `<button type="button"
                                           class="px-2 py-1 rounded-full bg-rose-500/15 border border-rose-400/40 text-rose-200 text-[10px]"
                                           onclick="revokeCode(${c.id})">
                                       إلغاء
                                   </button>`
                                : ''}
                        </div>
                    </div>
                `;
            });

            box.innerHTML = `<div class="divide-y divide-white/5">${rows.join('')}</div>`;
        } catch (e) {
            box.textContent = 'مشكلة اتصال أثناء تحميل القائمة.';
        }
    }

    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) {
                await refreshCodesList();
            } else {
                alert('تعذّر إلغاء الكود.');
            }
        } catch (e) {
            alert('مشكلة اتصال أثناء الإلغاء.');
        }
    }

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

        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) {
                alert('تم إصدار كود جديد: ' + data.code);
                await refreshCodesList();
            } else if (data.msg === 'none_active_to_reissue') {
                alert('لا يوجد كود فعّال لإعادة إصداره.');
            } else {
                alert('تعذّر إعادة الإصدار.');
            }
        } catch (e) {
            alert('مشكلة اتصال أثناء إعادة الإصدار.');
        }
    }
</script>
@endpush