{{-- resources/views/advisor/tips/index.blade.php --}}

@extends('layouts.advisor')
@section('title', 'إدارة النصائح')
@section('page-title', 'إدارة النصائح')

@section('content')
<div class="space-y-6">

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl border border-slate-200/70 dark:border-slate-700
                bg-gradient-to-br from-advisor-600/10 via-white to-emerald-500/10
                dark:from-advisor-500/10 dark:via-slate-900 dark:to-emerald-500/10">
        <div class="pointer-events-none absolute -top-20 -left-16 h-56 w-56 rounded-full bg-advisor-500/15 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-24 -right-24 h-64 w-64 rounded-full bg-emerald-500/10 blur-3xl"></div>

        <div class="relative p-4 sm:p-6">
            <div class="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-6">
                <div class="flex-1 space-y-3">
                    <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/70 dark:bg-slate-800/70
                                border border-slate-200/70 dark:border-slate-700 text-xs sm:text-[13px]
                                text-slate-700 dark:text-slate-200">
                        <span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-advisor-600 text-white text-[11px]">س</span>
                        <span>نظام نصائح الأعضاء — سؤال → فهم → خطوة واحدة</span>
                    </div>

                    <h2 class="text-xl sm:text-2xl lg:text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
                        إدارة النصائح… ملحمية + منظمة + مناسبة للجوال
                    </h2>

                    <p class="text-sm sm:text-[15px] leading-relaxed text-slate-600 dark:text-slate-300">
                        قبل أن ترسل نصيحة: اسأل <span class="font-bold">ما الذي حدث؟</span> ثم <span class="font-bold">ما السبب؟</span> ثم <span class="font-bold">ما الخطوة الأصغر؟</span>
                    </p>

                    <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
                        <button type="button" id="heroAddTipBtn"
                                class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-3 rounded-2xl
                                       bg-gradient-to-r from-advisor-600 to-advisor-700 text-white font-extrabold
                                       shadow-sm hover:shadow-lg transition active:scale-[0.99]">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                            </svg>
                            <span>إضافة نصيحة الآن</span>
                        </button>

                        <button type="button" id="heroGoTipsBtn"
                                class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-3 rounded-2xl
                                       bg-white/80 dark:bg-slate-800/70 border border-slate-200/80 dark:border-slate-700
                                       text-slate-800 dark:text-slate-200 font-extrabold hover:bg-white dark:hover:bg-slate-800
                                       transition active:scale-[0.99]">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M8 10h8M8 14h6M6 18h12a2 2 0 002-2V8l-6-4H6a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            <span>النصائح المرسلة</span>
                        </button>
                    </div>
                </div>

                <div class="w-full lg:w-[360px] rounded-3xl border border-slate-200/80 dark:border-slate-700
                            bg-white/80 dark:bg-slate-900/60 p-4 sm:p-5">
                    <div class="flex items-start gap-3">
                        <div class="mt-0.5 flex h-10 w-10 items-center justify-center rounded-2xl bg-advisor-500/10 text-advisor-700 dark:text-advisor-300">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 1010 10A10.011 10.011 0 0012 2z"/>
                            </svg>
                        </div>
                        <div class="space-y-1">
                            <div class="text-sm font-extrabold text-slate-900 dark:text-white">مبدأ سقراطي</div>
                            <div class="text-xs sm:text-sm text-slate-600 dark:text-slate-300 leading-relaxed">
                                لا تقل “أنت مخطئ”… اسأل: “ما الذي جعلك تختار هذا؟” ثم أعطه خطوة واحدة.
                            </div>
                        </div>
                    </div>

                    <div class="mt-3 grid grid-cols-3 gap-2 text-[11px] sm:text-xs">
                        <div class="rounded-2xl border border-slate-200/70 dark:border-slate-700 bg-slate-50/70 dark:bg-slate-800/50 px-3 py-2">
                            <div class="font-extrabold text-slate-800 dark:text-slate-100">سؤال</div>
                            <div class="text-slate-500 dark:text-slate-400">لفهم السبب</div>
                        </div>
                        <div class="rounded-2xl border border-slate-200/70 dark:border-slate-700 bg-slate-50/70 dark:bg-slate-800/50 px-3 py-2">
                            <div class="font-extrabold text-slate-800 dark:text-slate-100">دليل</div>
                            <div class="text-slate-500 dark:text-slate-400">بمثال</div>
                        </div>
                        <div class="rounded-2xl border border-slate-200/70 dark:border-slate-700 bg-slate-50/70 dark:bg-slate-800/50 px-3 py-2">
                            <div class="font-extrabold text-slate-800 dark:text-slate-100">خطوة</div>
                            <div class="text-slate-500 dark:text-slate-400">تطبيق</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- الإحصائيات --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-4 sm:p-6 border-r-4 border-blue-500">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-medium">إجمالي النصائح</p>
                    <p class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mt-1 sm:mt-2">{{ $stats['total'] }}</p>
                </div>
                <div class="p-3 bg-blue-100 dark:bg-blue-900 rounded-2xl">
                    <svg class="w-7 h-7 sm:w-8 sm:h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-4 sm:p-6 border-r-4 border-green-500">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-medium">مقروءة</p>
                    <p class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mt-1 sm:mt-2">{{ $stats['read'] }}</p>
                </div>
                <div class="p-3 bg-green-100 dark:bg-green-900 rounded-2xl">
                    <svg class="w-7 h-7 sm:w-8 sm:h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-4 sm:p-6 border-r-4 border-yellow-500">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-medium">غير مقروءة</p>
                    <p class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mt-1 sm:mt-2">{{ $stats['unread'] }}</p>
                </div>
                <div class="p-3 bg-yellow-100 dark:bg-yellow-900 rounded-2xl">
                    <svg class="w-7 h-7 sm:w-8 sm:h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-4 sm:p-6 border-r-4 border-purple-500">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-medium">تم الرد عليها</p>
                    <p class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mt-1 sm:mt-2">{{ $stats['replied'] }}</p>
                </div>
                <div class="p-3 bg-purple-100 dark:bg-purple-900 rounded-2xl">
                    <svg class="w-7 h-7 sm:w-8 sm:h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabs --}}
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-3 sm:p-4">
        <div class="flex justify-center">
            <div class="inline-flex rounded-2xl shadow-sm overflow-hidden border border-slate-200 dark:border-slate-700" role="group">
                <button id="viewUsers" type="button"
                        class="px-5 sm:px-6 py-3 text-sm font-extrabold text-white bg-advisor-600 hover:bg-advisor-700 transition focus:z-10 focus:ring-2 focus:ring-advisor-500 active-tab">
                    <svg class="w-5 h-5 mr-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    الأعضاء
                </button>

                <button id="viewTips" type="button"
                        class="px-5 sm:px-6 py-3 text-sm font-extrabold text-slate-900 bg-white hover:bg-slate-50 hover:text-advisor-700 transition focus:z-10 focus:ring-2 focus:ring-advisor-500 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
                    <svg class="w-5 h-5 mr-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                    </svg>
                    النصائح المرسلة
                </button>
            </div>
        </div>
    </div>

    {{-- USERS --}}
    <div id="usersSection" class="space-y-6">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-4 sm:p-6">
            <div class="space-y-4">
                <div class="flex flex-col sm:flex-row gap-3">
                    <div class="flex-1 relative">
                        <input id="searchUsers" type="text" placeholder="ابحث بالاسم أو الإيميل أو المعرّف..."
                               class="w-full rounded-2xl border-2 border-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-white
                                      focus:ring-2 focus:ring-advisor-500 focus:border-advisor-500 px-4 py-3 pr-12 transition-all">
                        <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>

                    <button id="searchBtn"
                            class="w-full sm:w-auto px-6 py-3 bg-advisor-600 hover:bg-advisor-700 text-white rounded-2xl font-extrabold
                                   transition-all flex items-center justify-center gap-2 shadow-sm hover:shadow-md active:scale-[0.99]">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        بحث
                    </button>
                </div>

                <details class="group rounded-2xl border border-slate-200/80 dark:border-slate-700 bg-slate-50/60 dark:bg-slate-900/40 p-3 sm:p-4">
                    <summary class="cursor-pointer list-none flex items-center justify-between gap-2">
                        <div class="flex items-center gap-2 text-sm font-extrabold text-slate-800 dark:text-slate-200">
                            <svg class="w-5 h-5 text-slate-500 dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L15 12.414V19a1 1 0 01-.553.894l-4 2A1 1 0 019 21v-8.586L3.293 6.707A1 1 0 013 6V4z"/>
                            </svg>
                            فلاتر متقدمة
                        </div>
                        <svg class="w-5 h-5 text-slate-500 transition group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </summary>

                    <div class="mt-3 grid grid-cols-1 sm:grid-cols-4 gap-3">
                        <div>
                            <label class="block text-xs font-extrabold text-slate-700 dark:text-slate-300 mb-2">الدور</label>
                            <select id="filterRole" class="w-full rounded-2xl border-2 border-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-white
                                                           focus:ring-2 focus:ring-advisor-500 focus:border-advisor-500 px-4 py-2.5 transition-all">
                                <option value="">الكل</option>
                                <option value="super-admin">إدارة عليا</option>
                                <option value="admin">إداري</option>
                                <option value="moderator">مشرف</option>
                                <option value="member">عضو</option>
                                <option value="official-member">عضو رسمي</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-extrabold text-slate-700 dark:text-slate-300 mb-2">نوع العضوية</label>
                            <select id="filterMembership" class="w-full rounded-2xl border-2 border-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-white
                                                                 focus:ring-2 focus:ring-advisor-500 focus:border-advisor-500 px-4 py-2.5 transition-all">
                                <option value="">الكل</option>
                                <option value="official">رسمي</option>
                                <option value="beta">بيتا</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-extrabold text-slate-700 dark:text-slate-300 mb-2">حالة التواجد</label>
                            <select id="filterStatus" class="w-full rounded-2xl border-2 border-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-white
                                                             focus:ring-2 focus:ring-advisor-500 focus:border-advisor-500 px-4 py-2.5 transition-all">
                                <option value="">الكل</option>
                                <option value="active">متواجد</option>
                                <option value="left">مغادر</option>
                            </select>
                        </div>

                        <div class="flex items-end">
                            <button id="clearFiltersBtn" type="button"
                                    class="w-full px-4 py-2.5 bg-white/80 hover:bg-white dark:bg-slate-800 dark:hover:bg-slate-700
                                           text-slate-800 dark:text-white rounded-2xl font-extrabold transition-all flex items-center justify-center gap-2
                                           border border-slate-200/70 dark:border-slate-700 active:scale-[0.99]">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                                مسح
                            </button>
                        </div>
                    </div>
                </details>
            </div>
        </div>

        <div id="usersGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
            {{-- JS --}}
        </div>

        <div id="noUsersMessage" class="hidden bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-10 sm:p-12 text-center">
            <svg class="w-16 h-16 sm:w-20 sm:h-20 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
            </svg>
            <p class="text-lg sm:text-xl font-extrabold text-gray-700 dark:text-gray-200">لا توجد نتائج</p>
            <p class="text-gray-500 dark:text-gray-400 mt-2">جرّب تغيير البحث أو الفلاتر</p>
        </div>
    </div>

    {{-- TIPS --}}
    <div id="tipsSection" class="space-y-6 hidden">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div>
                <h3 class="text-lg sm:text-xl font-extrabold text-gray-900 dark:text-white">النصائح المرسلة</h3>
                <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 mt-1">راقب الأثر: قراءة + رد + تحسّن.</p>
            </div>

            <button id="addTipBtn"
                    class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3
                           bg-gradient-to-r from-advisor-600 to-advisor-700 text-white rounded-2xl hover:shadow-lg
                           transition-all active:scale-[0.99] font-extrabold">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                <span>إضافة نصيحة جديدة</span>
            </button>
        </div>

        <div class="grid grid-cols-1 gap-4 sm:gap-6">
            @forelse($tips as $tip)
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
                    <div class="p-4 sm:p-6">
                        <div class="flex items-start justify-between gap-4">
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-3 mb-3">
                                    <img src="{{ $tip->recipient->avatar_url }}"
                                         alt="{{ $tip->recipient->name }}"
                                         class="w-12 h-12 rounded-2xl object-cover ring-2 ring-advisor-500">
                                    <div class="flex-1 min-w-0">
                                        <h4 class="text-base sm:text-lg font-extrabold text-gray-900 dark:text-white truncate">
                                            {{ $tip->title }}
                                        </h4>
                                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
                                            إلى: <span class="font-extrabold">{{ $tip->recipient->name }}</span>
                                        </p>
                                    </div>
                                </div>

                                <p class="text-sm sm:text-[15px] text-gray-700 dark:text-gray-300 line-clamp-2 mb-3">
                                    {{ $tip->content }}
                                </p>

                                <div class="flex flex-wrap items-center gap-2 sm:gap-3 text-xs sm:text-sm">
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full {{ $tip->is_read ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' }}">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            @if($tip->is_read)
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            @else
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            @endif
                                        </svg>
                                        {{ $tip->is_read ? 'مقروءة' : 'غير مقروءة' }}
                                    </span>

                                    @if($tip->reply)
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                                            </svg>
                                            تم الرد
                                        </span>
                                    @endif

                                    <span class="text-gray-500 dark:text-gray-400">
                                        {{ $tip->formatted_created_at }}
                                    </span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-2">
                                <button onclick="window.location='{{ route('advisor.advisor-tips.show', $tip) }}'"
                                        class="p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-xl transition-colors"
                                        title="عرض التفاصيل">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                </button>

                                <button
                                    data-tip-id="{{ $tip->id }}"
                                    data-tip-recipient-id="{{ $tip->recipient_id }}"
                                    data-tip-title-b64="{{ base64_encode($tip->title) }}"
                                    data-tip-content-b64="{{ base64_encode($tip->content) }}"
                                    class="edit-tip-btn p-2 text-yellow-600 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 rounded-xl transition-colors"
                                    title="تعديل">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                    </svg>
                                </button>

                                <button onclick="deleteTip({{ $tip->id }})"
                                        class="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors"
                                        title="حذف">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-10 sm:p-12 text-center">
                    <p class="text-lg sm:text-xl font-extrabold text-gray-700 dark:text-gray-200">لم يتم إرسال أي نصائح بعد</p>
                    <p class="text-gray-500 dark:text-gray-400 mt-2">ابدأ بإضافة نصيحة جديدة</p>
                </div>
            @endforelse
        </div>

        @if($tips->hasPages())
            <div class="mt-6">
                {{ $tips->links() }}
            </div>
        @endif
    </div>
</div>

{{-- MODAL: Bottom Sheet ملحمي --}}
<div id="tipModal" class="hidden fixed inset-0 z-50">
    <div id="tipModalBackdrop" class="absolute inset-0 bg-black/55 backdrop-blur-sm opacity-0"></div>

    <div class="absolute inset-x-0 bottom-0 sm:inset-0 sm:flex sm:items-center sm:justify-center p-2 sm:p-4">
        <div id="tipModalPanel"
             class="w-full sm:max-w-xl lg:max-w-2xl max-h-[92vh] overflow-y-auto overflow-x-hidden
                    rounded-t-3xl sm:rounded-3xl bg-white/95 dark:bg-slate-900/95
                    border border-slate-200/70 dark:border-slate-700 shadow-2xl
                    translate-y-full sm:translate-y-3 sm:scale-[0.99] opacity-0">

            {{-- Handle للـ drag --}}
            <div class="sticky top-0 z-10 bg-white/85 dark:bg-slate-900/85 backdrop-blur border-b border-slate-200/60 dark:border-slate-700/60 rounded-t-3xl sm:rounded-t-3xl">
                <div class="flex items-center justify-between px-4 sm:px-6 py-3">
                    <div class="flex items-center gap-2">
                        <div id="modalHandle"
                             class="h-1.5 w-12 rounded-full bg-slate-300/80 dark:bg-slate-600/70 cursor-grab active:cursor-grabbing"></div>
                        <span class="text-xs sm:text-sm font-extrabold text-slate-700 dark:text-slate-200">نافذة النصيحة</span>
                    </div>

                    <button type="button" id="closeModalBtn"
                            class="inline-flex h-10 w-10 items-center justify-center rounded-2xl text-slate-500 hover:text-slate-800
                                   dark:text-slate-300 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>

            <div class="relative p-4 sm:p-6 space-y-5 pb-[max(1rem,env(safe-area-inset-bottom))]">

                <div class="space-y-1">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-advisor-50 text-advisor-700 dark:bg-advisor-900/40 dark:text-advisor-200 text-xs sm:text-[13px]">
                        <span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-advisor-500 text-white text-[11px]">ن</span>
                        <span>نظام نصائح الأعضاء — متابعة رسمية</span>
                    </div>
                    <h3 id="modalTitle" class="text-xl sm:text-2xl font-extrabold text-slate-900 dark:text-white mt-2">
                        إضافة نصيحة جديدة
                    </h3>
                    <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
                        اكتب نصيحة “تُفهم” لا تُخيف: سبب واضح + خطوة واحدة + موعد متابعة.
                    </p>
                </div>

                {{-- ملخص العضو الحقيقي --}}
                <div id="recipientSummaryWrap" class="hidden">
                    <div class="rounded-3xl border border-slate-200/80 dark:border-slate-700 bg-white/80 dark:bg-slate-900/60 p-4">
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="relative">
                                    <img id="rsAvatar" src="" alt="" class="w-12 h-12 rounded-2xl object-cover ring-2 ring-advisor-500">
                                    <span id="rsOnlineDot" class="absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full border-2 border-white dark:border-slate-900 bg-slate-400"></span>
                                </div>

                                <div class="min-w-0">
                                    <div class="text-sm sm:text-base font-extrabold text-slate-900 dark:text-white truncate" id="rsName">—</div>
                                    <div class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 truncate" id="rsMeta">—</div>
                                </div>
                            </div>

                            <a id="rsReportLink" href="#"
                               class="shrink-0 inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700
                                      text-slate-800 dark:text-slate-200 text-xs font-extrabold transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                                <span>تقرير العضو</span>
                            </a>
                        </div>

                        <div class="mt-3 flex flex-wrap gap-2" id="rsBadges"></div>

                        <div class="mt-3 grid grid-cols-2 gap-2 text-[11px] sm:text-xs">
                            <div class="rounded-2xl border border-slate-200/70 dark:border-slate-700 bg-slate-50/70 dark:bg-slate-800/50 px-3 py-2">
                                <div class="font-extrabold text-slate-700 dark:text-slate-200">تاريخ الانضمام</div>
                                <div class="text-slate-500 dark:text-slate-400 mt-0.5" id="rsJoined">—</div>
                            </div>
                            <div class="rounded-2xl border border-slate-200/70 dark:border-slate-700 bg-slate-50/70 dark:bg-slate-800/50 px-3 py-2">
                                <div class="font-extrabold text-slate-700 dark:text-slate-200">آخر نشاط</div>
                                <div class="text-slate-500 dark:text-slate-400 mt-0.5" id="rsLastActivity">—</div>
                            </div>
                        </div>
                    </div>
                </div>

                <form id="tipForm" class="space-y-5" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="tipId" name="tip_id">

                    {{-- Recipient --}}
                    <div id="recipientField" class="space-y-2">
                        <label class="block text-xs sm:text-sm font-extrabold text-slate-900 dark:text-white">
                            المستلم <span class="text-red-500">*</span>
                        </label>
                        <select id="recipient_id" name="recipient_id" required
                                class="w-full px-4 py-3 rounded-2xl border-2 border-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-white
                                       text-sm focus:ring-2 focus:ring-advisor-500 focus:border-advisor-500 transition-all">
                            <option value="">-- اختر المستلم --</option>
                        </select>
                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                            سيتم ربط النصيحة بملف العضو + تقدر تفتح تقريره من أعلى.
                        </p>
                    </div>

                    {{-- Member Summary --}}
                    <div class="space-y-2">
                        <label class="block text-xs sm:text-sm font-extrabold text-slate-900 dark:text-white">
                            ملخص وضع العضو (اختياري)
                        </label>
                        <textarea id="member_summary" name="member_summary" rows="3"
                                  class="w-full px-4 py-3 rounded-2xl border-2 border-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-white
                                         text-sm focus:ring-2 focus:ring-advisor-500 focus:border-advisor-500 transition-all resize-none"
                                  placeholder="مثال: مشكلة الالتزام بالتواجد هذا الأسبوع — يحتاج إشعار مسبق عند العذر + تثبيت جدول..."></textarea>
                    </div>

                    {{-- Title --}}
                    <div class="space-y-2">
                        <label class="block text-xs sm:text-sm font-extrabold text-slate-900 dark:text-white">
                            عنوان النصيحة <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="title" name="title" required maxlength="255"
                               class="w-full px-4 py-3 rounded-2xl border-2 border-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-white
                                      text-sm focus:ring-2 focus:ring-advisor-500 focus:border-advisor-500 transition-all"
                               placeholder="مثال: تنظيم وقت التواجد — خطوة واحدة تغيّر النتيجة">
                    </div>

                    {{-- Content --}}
                    <div class="space-y-2">
                        <div class="flex items-end justify-between gap-2">
                            <label class="block text-xs sm:text-sm font-extrabold text-slate-900 dark:text-white">
                                نص النصيحة <span class="text-red-500">*</span>
                            </label>
                            <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                                <span id="contentCount">0</span> حرف
                            </div>
                        </div>

                        <textarea id="content" name="content" required rows="6"
                                  class="w-full px-4 py-3 rounded-2xl border-2 border-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-white
                                         text-sm focus:ring-2 focus:ring-advisor-500 focus:border-advisor-500 transition-all resize-none"
                                  placeholder="ماذا حدث؟ لماذا؟ ما المطلوب؟ وما موعد المتابعة؟"></textarea>

                        <div class="flex flex-wrap gap-2">
                            <button type="button" id="insertSocraticTemplate"
                                    class="px-3 py-2 rounded-2xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700
                                           text-slate-800 dark:text-slate-200 text-[12px] font-extrabold transition">
                                + قالب سقراطي
                            </button>
                            <button type="button" id="insertFormalTemplate"
                                    class="px-3 py-2 rounded-2xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700
                                           text-slate-800 dark:text-slate-200 text-[12px] font-extrabold transition">
                                + قالب رسمي
                            </button>
                        </div>
                    </div>

                    {{-- Attachment --}}
                    <div class="space-y-2">
                        <label class="block text-xs sm:text-sm font-extrabold text-slate-900 dark:text-white">
                            مرفق (اختياري)
                        </label>
                        <input type="file" id="attachment" name="attachment"
                               class="w-full text-sm file:mr-3 file:px-4 file:py-2 file:rounded-2xl file:border-0
                                      file:bg-slate-100 file:text-slate-800 hover:file:bg-slate-200
                                      dark:file:bg-slate-800 dark:file:text-slate-100 dark:hover:file:bg-slate-700">
                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                            JPG/PNG/PDF/DOC — حتى 10MB.
                        </p>
                    </div>

                    {{-- Buttons --}}
                    <div class="flex flex-col sm:flex-row gap-3 pt-1">
                        <button type="submit" id="submitBtn"
                                class="w-full sm:flex-1 px-6 py-3 bg-gradient-to-r from-advisor-600 to-advisor-700 text-white rounded-2xl hover:shadow-lg
                                       transition-all active:scale-[0.99] font-extrabold flex items-center justify-center gap-2 text-sm">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span id="submitBtnText">إرسال النصيحة</span>
                        </button>

                        <button type="button" id="cancelModalBtn"
                                class="w-full sm:flex-1 px-6 py-3 bg-slate-200/80 dark:bg-slate-800 text-slate-800 dark:text-slate-200 rounded-2xl
                                       hover:bg-slate-300 dark:hover:bg-slate-700 transition font-extrabold text-sm active:scale-[0.99]">
                            إلغاء
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

{{-- Template User Card --}}
<template id="user-card-template">
    <div class="user-card bg-white dark:bg-gray-800 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden
                border border-slate-200/70 dark:border-slate-700 hover:border-advisor-500">
        <div class="p-4 sm:p-5">
            <div class="flex flex-col items-center text-center">
                <div class="relative mb-4">
                    <img class="user-avatar w-20 h-20 sm:w-24 sm:h-24 rounded-2xl object-cover ring-4 ring-advisor-500" src="" alt="">
                    <span class="user-status-badge absolute -bottom-2 -right-2 w-6 h-6 rounded-full border-4 border-white dark:border-gray-800"></span>
                </div>

                <h4 class="user-name text-base sm:text-lg font-extrabold text-gray-900 dark:text-white mb-1 truncate w-full"></h4>
                <p class="user-email text-xs sm:text-sm text-gray-600 dark:text-gray-400 mb-3 truncate w-full"></p>

                <div class="flex items-center gap-2 mb-2 flex-wrap justify-center">
                    <span class="user-role inline-block px-3 py-1 text-[11px] sm:text-xs font-extrabold rounded-full"></span>
                    <span class="user-membership inline-block px-3 py-1 text-[11px] sm:text-xs font-extrabold rounded-full"></span>
                </div>

                <div class="mb-4">
                    <span class="user-presence inline-block px-3 py-1 text-[11px] sm:text-xs font-extrabold rounded-full"></span>
                </div>

                <div class="flex gap-2 w-full">
                    <button type="button" class="view-report-btn flex-1 px-3 py-2.5 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700
                                                 text-white rounded-2xl flex items-center justify-center gap-2 text-xs sm:text-sm font-extrabold transition-all shadow-sm hover:shadow-md active:scale-[0.99]">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        <span>التقرير</span>
                    </button>

                    <button type="button" class="add-tip-btn flex-1 px-3 py-2.5 bg-gradient-to-r from-advisor-600 to-advisor-700 hover:from-advisor-700 hover:to-advisor-800
                                                 text-white rounded-2xl flex items-center justify-center gap-2 text-xs sm:text-sm font-extrabold transition-all shadow-sm hover:shadow-md active:scale-[0.99]">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        <span>نصيحة</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

@push('scripts')
<script>
/**
 * ✅ أهم نقطة: المعطيات جاهزة من الكنترول مباشرة
 */
window.__ADVISOR_TIPS_USERS__ = @json($users);

let isEditMode = false;
let editTipId = null;
let allUsers = [];

/** Base64 decode (يدعم العربي) */
function b64DecodeUnicode(str) {
    try {
        const binary = atob(str);
        const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
        return new TextDecoder('utf-8').decode(bytes);
    } catch (e) {
        try { return atob(str); } catch (_) { return str; }
    }
}

const SUMMARY_MARKER = 'ملخص وضع العضو:';
const SEPARATOR_LINE = '\n\n—\n\n';

function splitSummaryFromContent(content) {
    const raw = (content || '').trim();
    if (!raw.startsWith(SUMMARY_MARKER)) {
        return { summary: '', content: raw };
    }
    const withoutMarker = raw.slice(SUMMARY_MARKER.length).trimStart();
    const parts = withoutMarker.split(SEPARATOR_LINE);
    if (parts.length < 2) return { summary: '', content: raw };
    return { summary: (parts[0] || '').trim(), content: (parts.slice(1).join(SEPARATOR_LINE) || '').trim() };
}

function safeEl(id){ return document.getElementById(id); }

document.addEventListener('DOMContentLoaded', function() {
    // bootstrap users
    allUsers = Array.isArray(window.__ADVISOR_TIPS_USERS__) ? window.__ADVISOR_TIPS_USERS__ : [];
    renderUserCards(allUsers);
    populateRecipientDropdown(allUsers);

    setupTabs();
    setupSearchAndFilter();
    setupButtonListeners();
    setupModalUX();
    setupSmartTemplates();
    setupCounters();
});

// ===== Tabs =====
function setupTabs() {
    const viewUsersBtn = safeEl('viewUsers');
    const viewTipsBtn = safeEl('viewTips');
    const usersSection = safeEl('usersSection');
    const tipsSection = safeEl('tipsSection');

    const activateUsers = () => {
        usersSection.classList.remove('hidden');
        tipsSection.classList.add('hidden');

        viewUsersBtn.classList.add('text-white','bg-advisor-600','active-tab');
        viewUsersBtn.classList.remove('text-slate-900','bg-white');

        viewTipsBtn.classList.remove('text-white','bg-advisor-600','active-tab');
        viewTipsBtn.classList.add('text-slate-900','bg-white');
    };

    const activateTips = () => {
        usersSection.classList.add('hidden');
        tipsSection.classList.remove('hidden');

        viewTipsBtn.classList.add('text-white','bg-advisor-600','active-tab');
        viewTipsBtn.classList.remove('text-slate-900','bg-white');

        viewUsersBtn.classList.remove('text-white','bg-advisor-600','active-tab');
        viewUsersBtn.classList.add('text-slate-900','bg-white');
    };

    viewUsersBtn.addEventListener('click', activateUsers);
    viewTipsBtn.addEventListener('click', activateTips);

    safeEl('heroGoTipsBtn')?.addEventListener('click', () => { activateTips(); window.scrollTo({top:0,behavior:'smooth'}); });
    safeEl('heroAddTipBtn')?.addEventListener('click', () => { activateTips(); openCreateModal(); });
}

// ===== Filters =====
function setupSearchAndFilter() {
    const searchInput = safeEl('searchUsers');
    const searchBtn = safeEl('searchBtn');
    const clearBtn = safeEl('clearFiltersBtn');

    searchBtn.addEventListener('click', filterUsers);
    searchInput.addEventListener('keypress', (e)=>{ if(e.key==='Enter') filterUsers(); });

    ['filterRole','filterMembership','filterStatus'].forEach(id=>{
        safeEl(id)?.addEventListener('change', filterUsers);
    });

    clearBtn.addEventListener('click', ()=>{
        searchInput.value='';
        safeEl('filterRole').value='';
        safeEl('filterMembership').value='';
        safeEl('filterStatus').value='';
        filterUsers();
    });
}

function filterUsers() {
    const term = (safeEl('searchUsers').value || '').toLowerCase();
    const role = safeEl('filterRole').value || '';
    const membership = safeEl('filterMembership').value || '';
    const status = safeEl('filterStatus').value || '';

    const filtered = allUsers.filter(u=>{
        const name = (u.name||'').toLowerCase();
        const email = (u.email||'').toLowerCase();
        const username = (u.username||'').toLowerCase();

        const matchesSearch = name.includes(term) || email.includes(term) || username.includes(term);
        const matchesRole = !role || u.role === role;
        const matchesMembership = !membership || u.membership_status === membership;
        const matchesStatus = !status || (status==='active' ? !u.isLeft : u.isLeft);

        return matchesSearch && matchesRole && matchesMembership && matchesStatus;
    });

    renderUserCards(filtered);
}

// ===== Render cards =====
function renderUserCards(users) {
    const grid = safeEl('usersGrid');
    const empty = safeEl('noUsersMessage');
    const tpl = safeEl('user-card-template');

    grid.innerHTML = '';

    if (!users.length) {
        grid.classList.add('hidden');
        empty.classList.remove('hidden');
        return;
    }

    grid.classList.remove('hidden');
    empty.classList.add('hidden');

    users.forEach(user=>{
        const node = tpl.content.cloneNode(true);

        node.querySelector('.user-avatar').src = user.avatar || '';
        node.querySelector('.user-avatar').alt = user.name || '';
        node.querySelector('.user-name').textContent = user.name || '—';
        node.querySelector('.user-email').textContent = user.email || '—';

        const roleEl = node.querySelector('.user-role');
        roleEl.textContent = user.role_ar || user.role || '—';
        const roleColors = {
            'super-admin': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
            'admin': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
            'moderator': 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
            'official-member': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
            'member': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
        };
        roleEl.className += ' ' + (roleColors[user.role] || roleColors.member);

        const memEl = node.querySelector('.user-membership');
        memEl.textContent = user.membership_status_ar || user.membership_status || '—';
        memEl.className += ' ' + ((user.membership_status==='official')
            ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
            : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200');

        const presenceEl = node.querySelector('.user-presence');
        const dot = node.querySelector('.user-status-badge');

        if (user.isLeft) {
            presenceEl.textContent = 'مغادر';
            presenceEl.className += ' bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-200';
            dot.classList.add('bg-slate-400');
        } else {
            presenceEl.textContent = 'متواجد';
            presenceEl.className += ' bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200';
            dot.classList.add('bg-emerald-500');
        }

        node.querySelector('.view-report-btn').addEventListener('click', ()=> {
            window.location.href = '/advisor/advisor-tips/report/' + user.id;
        });

        node.querySelector('.add-tip-btn').addEventListener('click', ()=> {
            openCreateModalForUser(user.id);
        });

        grid.appendChild(node);
    });
}

// ===== Recipient dropdown + summary =====
function populateRecipientDropdown(users) {
    const select = safeEl('recipient_id');
    select.innerHTML = '<option value="">-- اختر المستلم --</option>';

    users.forEach(u=>{
        const op = document.createElement('option');
        op.value = u.id;
        op.textContent = `${u.name}${u.username ? ' (@'+u.username+')' : ''}`;
        select.appendChild(op);
    });

    select.addEventListener('change', ()=> renderRecipientSummary(select.value));
}

function findUserById(id){
    return allUsers.find(u => String(u.id) === String(id)) || null;
}

function pill(text, cls) {
    return `<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] sm:text-xs font-extrabold ${cls}">${text}</span>`;
}

function renderRecipientSummary(recipientId) {
    const wrap = safeEl('recipientSummaryWrap');
    const user = findUserById(recipientId);

    if (!user) { wrap.classList.add('hidden'); return; }
    wrap.classList.remove('hidden');

    safeEl('rsAvatar').src = user.avatar || '';
    safeEl('rsAvatar').alt = user.name || '';

    const metaParts = [];
    if (user.username) metaParts.push('@' + user.username);
    metaParts.push('ID: ' + user.id);
    if (user.email) metaParts.push(user.email);

    safeEl('rsName').textContent = user.name || '—';
    safeEl('rsMeta').textContent = metaParts.join(' • ');

    safeEl('rsReportLink').href = '/advisor/advisor-tips/report/' + user.id;

    safeEl('rsJoined').textContent = user.joined_at_formatted || 'غير محدد';
    safeEl('rsLastActivity').textContent = user.last_activity_formatted || 'غير متوفر';

    // Online dot (متصل فعلاً)
    const dot = safeEl('rsOnlineDot');
    dot.className = 'absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full border-2 border-white dark:border-slate-900 ' + (user.is_online_now ? 'bg-emerald-500' : 'bg-slate-400');

    let html = '';
    html += pill(`الدور: ${user.role_ar || user.role}`, 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200');
    html += pill(`العضوية: ${user.membership_status_ar || user.membership_status}`, (user.membership_status==='official')
        ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
        : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200');

    html += pill(`التواجد: ${user.isLeft ? 'مغادر' : 'متواجد'}`, user.isLeft
        ? 'bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-200'
        : 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200');

    if (user.gender_ar) html += pill(`الجنس: ${user.gender_ar}`, 'bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-200');
    if (user.total_points != null) html += pill(`النقاط: ${Number(user.total_points).toLocaleString()}`, 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200');

    safeEl('rsBadges').innerHTML = html;
}

// ===== Buttons =====
function setupButtonListeners() {
    safeEl('addTipBtn')?.addEventListener('click', openCreateModal);

    document.querySelectorAll('.edit-tip-btn').forEach(btn=>{
        btn.addEventListener('click', ()=>{
            const id = btn.getAttribute('data-tip-id');
            const rid = btn.getAttribute('data-tip-recipient-id');
            const title = b64DecodeUnicode(btn.getAttribute('data-tip-title-b64') || '');
            const content = b64DecodeUnicode(btn.getAttribute('data-tip-content-b64') || '');
            openEditModal(id, title, content, rid);
        });
    });
}

// ===== Modal (Bottom Sheet حركة + Drag) =====
function setupModalUX() {
    safeEl('tipModalBackdrop')?.addEventListener('click', closeModal);
    safeEl('closeModalBtn')?.addEventListener('click', closeModal);
    safeEl('cancelModalBtn')?.addEventListener('click', closeModal);

    document.addEventListener('keydown', (e)=>{
        if(e.key==='Escape'){
            const modal = safeEl('tipModal');
            if(modal && !modal.classList.contains('hidden')) closeModal();
        }
    });

    setupDragToClose();
}

function openCreateModal() {
    isEditMode = false;
    editTipId = null;

    safeEl('modalTitle').textContent = 'إضافة نصيحة جديدة';
    safeEl('submitBtnText').textContent = 'إرسال النصيحة';

    safeEl('recipientField').classList.remove('hidden');
    safeEl('tipForm').reset();
    safeEl('recipientSummaryWrap').classList.add('hidden');
    updateContentCount();

    showModal();
}

function openCreateModalForUser(userId) {
    openCreateModal();
    safeEl('recipient_id').value = userId;
    renderRecipientSummary(userId);
}

function openEditModal(id, title, content, recipientId) {
    isEditMode = true;
    editTipId = id;

    safeEl('modalTitle').textContent = 'تعديل النصيحة';
    safeEl('submitBtnText').textContent = 'حفظ التعديلات';

    safeEl('recipientField').classList.add('hidden');

    safeEl('tipId').value = id;
    safeEl('title').value = title;

    const parsed = splitSummaryFromContent(content);
    safeEl('member_summary').value = parsed.summary;
    safeEl('content').value = parsed.content;

    renderRecipientSummary(recipientId);
    updateContentCount();

    showModal();
}

function showModal() {
    const modal = safeEl('tipModal');
    const panel = safeEl('tipModalPanel');
    const backdrop = safeEl('tipModalBackdrop');

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

    requestAnimationFrame(()=>{
        backdrop.classList.remove('opacity-0');
        backdrop.classList.add('opacity-100');

        panel.classList.remove('translate-y-full','opacity-0','sm:translate-y-3','sm:scale-[0.99]');
        panel.classList.add('translate-y-0','opacity-100','sm:translate-y-0','sm:scale-100');
    });
}

function closeModal() {
    const modal = safeEl('tipModal');
    const panel = safeEl('tipModalPanel');
    const backdrop = safeEl('tipModalBackdrop');

    backdrop.classList.add('opacity-0');
    backdrop.classList.remove('opacity-100');

    panel.classList.add('translate-y-full','opacity-0','sm:translate-y-3','sm:scale-[0.99]');
    panel.classList.remove('translate-y-0','opacity-100','sm:translate-y-0','sm:scale-100');

    setTimeout(()=>{
        modal.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
        panel.style.transform = '';
        safeEl('tipForm').reset();
        safeEl('recipientSummaryWrap').classList.add('hidden');
        updateContentCount();
    }, 180);
}

function setupDragToClose(){
    const handle = safeEl('modalHandle');
    const panel = safeEl('tipModalPanel');
    if(!handle || !panel) return;

    let startY = 0;
    let currentY = 0;
    let dragging = false;

    const onDown = (e)=>{
        dragging = true;
        startY = e.touches ? e.touches[0].clientY : e.clientY;
        currentY = startY;
        handle.setPointerCapture?.(e.pointerId);
    };

    const onMove = (e)=>{
        if(!dragging) return;
        const y = e.touches ? e.touches[0].clientY : e.clientY;
        const delta = Math.max(0, y - startY);
        currentY = y;

        // translate panel down (mobile فقط)
        panel.style.transform = `translateY(${delta}px)`;
    };

    const onUp = ()=>{
        if(!dragging) return;
        dragging = false;

        const delta = Math.max(0, currentY - startY);
        if(delta > 120){
            closeModal();
        } else {
            // snap back
            panel.style.transform = '';
        }
    };

    // Pointer events
    handle.addEventListener('pointerdown', onDown);
    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);

    // Touch fallback
    handle.addEventListener('touchstart', onDown, {passive:true});
    window.addEventListener('touchmove', onMove, {passive:true});
    window.addEventListener('touchend', onUp);
}

// ===== Submit =====
safeEl('tipForm')?.addEventListener('submit', async function(e){
    e.preventDefault();

    const submitBtn = safeEl('submitBtn');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<svg class="animate-spin h-5 w-5 text-white mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';

    try {
        const formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');

        let url, method;
        if (isEditMode) {
            url = `/advisor/advisor-tips/${editTipId}`;
            method = 'POST';
            formData.append('_method', 'PUT');

            // recipient not editable in update
            formData.delete('recipient_id');
        } else {
            url = '{{ route("advisor.advisor-tips.store") }}';
            method = 'POST';
        }

        const response = await fetch(url, {
            method,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: formData
        });

        const data = await response.json();
        if (data.success) {
            showNotification(data.message, 'success');
            closeModal();
            setTimeout(() => location.reload(), 900);
        } else {
            showNotification(data.message || 'حدث خطأ', 'error');
        }
    } catch (err) {
        console.error(err);
        showNotification('حدث خطأ في الاتصال بالخادم', 'error');
    } finally {
        submitBtn.disabled = false;
        submitBtn.innerHTML = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span id="submitBtnText">${isEditMode ? 'حفظ التعديلات' : 'إرسال النصيحة'}</span>`;
    }
});

// ===== Delete =====
async function deleteTip(id){
    if(!confirm('هل أنت متأكد من حذف هذه النصيحة؟')) return;

    try {
        const res = await fetch(`/advisor/advisor-tips/${id}`, {
            method:'DELETE',
            headers:{
                'X-CSRF-TOKEN':'{{ csrf_token() }}',
                'Accept':'application/json'
            }
        });
        const data = await res.json();
        if(data.success){
            showNotification(data.message,'success');
            setTimeout(()=>location.reload(),900);
        } else showNotification(data.message || 'حدث خطأ','error');
    } catch(e){
        console.error(e);
        showNotification('حدث خطأ في الاتصال بالخادم','error');
    }
}

// ===== Templates =====
function setupSmartTemplates(){
    safeEl('insertSocraticTemplate')?.addEventListener('click', ()=>{
        const box = safeEl('content');
        const tpl =
`[سؤال لفهم السبب]
- ما الذي جعلك تختار هذا؟

[ملاحظة واضحة]
- ما الذي نلاحظه فعليًا بدون أحكام؟

[خطوة واحدة قابلة للتطبيق]
- ابتداءً من اليوم: (…)
- لمدة: (…)
- عند وجود عذر: إبلاغ مسبق قبل (…)

[متابعة]
- موعد المراجعة: (…).`;
        insertAtCursor(box, tpl); updateContentCount();
    });

    safeEl('insertFormalTemplate')?.addEventListener('click', ()=>{
        const box = safeEl('content');
        const tpl =
`عزيزي عضو فريق الوفاء الذهبي،
نرجو منك الالتزام بـ (…)، حيث إن ذلك ينعكس على (…).

المطلوب منك:
1) …
2) …

في حال وجود ظرف طارئ:
يرجى إبلاغ الإدارة مسبقًا.

مع التحية.`;
        insertAtCursor(box, tpl); updateContentCount();
    });
}

function insertAtCursor(textarea, text){
    if(!textarea) return;
    const start = textarea.selectionStart || 0;
    const end = textarea.selectionEnd || 0;
    const value = textarea.value || '';
    const before = value.substring(0,start);
    const after = value.substring(end);
    textarea.value = before + (before && !before.endsWith('\n') ? '\n\n' : '') + text + (after ? '\n\n' : '') + after;
    textarea.focus();
}

// ===== Count =====
function setupCounters(){
    safeEl('content')?.addEventListener('input', updateContentCount);
    updateContentCount();
}
function updateContentCount(){
    const c = safeEl('content')?.value || '';
    safeEl('contentCount').textContent = String(c.length);
}

// ===== Notification =====
function showNotification(message, type='success'){
    const bg = (type==='success') ? 'bg-emerald-600' : 'bg-red-600';
    const icon = (type==='success')
        ? '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>'
        : '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>';
    const el = document.createElement('div');
    el.className = `fixed top-4 right-4 ${bg} text-white px-5 py-4 rounded-2xl shadow-lg flex items-center gap-3 z-[60] animate-fade-in`;
    el.innerHTML = `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">${icon}</svg><span class="font-extrabold text-sm">${message}</span>`;
    document.body.appendChild(el);
    setTimeout(()=>el.remove(),3000);
}
</script>

<style>
@keyframes fade-in { from { opacity:0; transform:translateY(-10px);} to {opacity:1; transform:translateY(0);} }
.animate-fade-in { animation: fade-in .25s ease-out forwards; }
.active-tab { font-weight: 900; }
.user-card:hover { transform: translateY(-3px); }
#tipModalBackdrop { transition: opacity .18s ease; }
#tipModalPanel { transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease; will-change: transform; }
</style>
@endpush
@endsection