@auth

@php
    $surveyModal = null;

    try {
        $u = auth()->user();

        // === Helpers داخل Blade (بدون use statements) ===
        $matchesTargets = function($survey) use ($u) {
            $targets = \App\Models\SocraticSurveyTarget::where('survey_id', $survey->id)->get();
            if ($targets->isEmpty()) return true;
            if ($targets->where('target_type','all')->count() > 0) return true;

            foreach ($targets as $t) {
                if ($t->target_type === 'user' && (string)$u->id === (string)$t->target_value) return true;
                if ($t->target_type === 'membership_status' && (string)($u->membership_status ?? '') === (string)$t->target_value) return true;
                if ($t->target_type === 'gender' && (string)($u->gender ?? '') === (string)$t->target_value) return true;

                // role (spatie)
                if ($t->target_type === 'role' && $t->target_value && method_exists($u,'hasRole')) {
                    try { if ($u->hasRole($t->target_value)) return true; } catch(\Throwable $e){}
                }
            }
            return false;
        };

        $alreadySubmitted = function($survey) use ($u) {
            // إذا allow_multiple_submissions = 1 => ما في منع
            if ((int)($survey->allow_multiple_submissions ?? 0) === 1) return false;

            // نفس منطق الكنترولر
            $key = null;
            if ((int)($survey->is_anonymous ?? 0) === 1) {
                $anon = hash_hmac('sha256', (string)$u->id, config('app.key'));
                $key  = 'anon:' . $anon . ':survey:' . $survey->id;
            } else {
                $key  = 'user:' . $u->id . ':survey:' . $survey->id;
            }

            return \App\Models\SocraticSurveySubmission::where('survey_id', $survey->id)
                ->where('submission_key', $key)
                ->exists();
        };

        // ✅ جيب أحدث استطلاع Active ويكون مفتوح الآن ومناسب لهدفه ولسه ما انعمل
        $candidates = \App\Models\SocraticSurvey::query()
            ->where('status','active')
            ->orderByDesc('id')
            ->get();

        foreach ($candidates as $s) {
            if (!$s->isOpenNow()) continue;
            if (!$matchesTargets($s)) continue;
            if ($alreadySubmitted($s)) continue;

            $surveyModal = \App\Models\SocraticSurvey::query()
                ->where('id', $s->id)
                ->with(['questions' => function($q){
                    $q->where('is_active', true)
                      ->orderBy('sort_order')
                      ->with(['options' => function($o){
                          $o->where('is_active', true)->orderBy('sort_order');
                      }]);
                }])
                ->first();

            break;
        }

    } catch (\Throwable $e) {
        $surveyModal = null;
    }

    // ✅ Daily Reading (Widget)
    $dailyReading = \App\Models\DailyReading::activeForToday()->first();

    $hasRead = false;
    if ($dailyReading && auth()->check()) {
        $hasRead = $dailyReading->readers()
            ->where('user_id', auth()->id())
            ->exists();
    }
@endphp

@if($surveyModal)
    @include('surveys.partials.active-modal', ['survey' => $surveyModal])
@endif

@include('partials.site-updates-slider')

{{-- Redirect to pending site updates (إن وجد) --}}
<script>
(() => {
    const endpoint   = @json(route('site-updates.pending-count'));
    const updatesUrl = @json(route('site-updates.show'));

    function samePath(a, b){
        try {
            return (new URL(a, location.origin)).pathname ===
                   (new URL(b, location.origin)).pathname;
        } catch(e){
            return false;
        }
    }

    async function run(){
        const p = location.pathname;
        if (p.startsWith('/site-updates') || p.startsWith('/admin/site-updates')) return;

        try{
            const res  = await fetch(endpoint, { headers:{'Accept':'application/json'} });
            if (!res.ok) return;

            const data = await res.json();
            const n    = Number(data.count || 0);

            if (n > 0 && !samePath(location.href, updatesUrl)) {
                location.href = updatesUrl;
            }
        } catch(e){}
    }

    run();
})();
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const widget    = document.getElementById('daily-reading-widget');
  if (!widget) return;

  // ✅✅ منع تهيئة مكررة (يحمي من التعارض)
  if (widget.dataset.drScrollInit === '1') return;
  widget.dataset.drScrollInit = '1';

  const scrollBox = widget.querySelector('[data-dr-scroll]');
  const confirmBtn= widget.querySelector('[data-dr-confirm]');
  if (!scrollBox || !confirmBtn) return;

  // ✅ عطّل الزر افتراضيًا
  function setEnabled(on){
    confirmBtn.disabled = !on;
    confirmBtn.classList.toggle('opacity-50', !on);
    confirmBtn.classList.toggle('cursor-not-allowed', !on);
    confirmBtn.classList.toggle('pointer-events-none', !on);
  }
  setEnabled(false);

  // ✅ اعمل "نقطة نهاية" داخل صندوق السكروول
  let sentinel = scrollBox.querySelector('[data-dr-sentinel]');
  if (!sentinel) {
    sentinel = document.createElement('div');
    sentinel.setAttribute('data-dr-sentinel', '1');
    sentinel.style.height = '1px';
    sentinel.style.width  = '1px';
    sentinel.style.pointerEvents = 'none';
    scrollBox.appendChild(sentinel);
  }

  // ✅ راقب وصول النهاية داخل نفس scrollBox
  const io = new IntersectionObserver((entries) => {
    const hit = entries.some(e => e.isIntersecting);
    if (hit) setEnabled(true);
  }, {
    root: scrollBox,
    threshold: 1.0
  });

  io.observe(sentinel);

  // ✅ لو المحتوى قصير وما فيه سكروول: فعّل مباشرة
  const noScroll = scrollBox.scrollHeight <= scrollBox.clientHeight + 2;
  if (noScroll) setEnabled(true);
});
</script>

{{-- ===========================
| ✅ GLOBAL UI UPGRADE (CSS)
|=========================== --}}
<style id="smart-ui-upgrade">
    /* ===== squircle ===== */
    .neo-squircle{ border-radius: 22px !important; }

    /* ===== float animation ===== */
    @keyframes floaty{ 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-3px)} }
    .fab-floaty{ animation: floaty 3.2s ease-in-out infinite; }

    @media (prefers-reduced-motion: reduce){
        .fab-floaty{ animation:none !important; }
        #smart-fab-dock [data-dock-item]{ transition:none !important; }
        #daily-reading-widget [data-dr-body]{ transition:none !important; }
    }

    /* ===== Daily Reading (animated collapse) ===== */
    #daily-reading-widget [data-dr-body]{
        transition: max-height .28s ease, opacity .22s ease, transform .22s ease, margin .22s ease;
        overflow: hidden;
    }
    #daily-reading-widget[data-state="closed"] [data-dr-body]{
        max-height: 0 !important;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        margin-top: 0 !important;
    }
    #daily-reading-widget[data-state="open"] [data-dr-body]{
        max-height: 70vh;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        margin-top: 12px;
    }
    #daily-reading-widget [data-dr-chevron]{ transition: transform .25s ease; }
    #daily-reading-widget[data-state="open"] [data-dr-chevron]{ transform: rotate(180deg); }

    /* scroll fix (iOS smooth) */
    #daily-reading-widget [data-dr-scroll]{
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* ===== Dock menu show/hide ===== */
    #smart-fab-dock{ --dock-translate: 12px; }
    #smart-fab-dock [data-dock-item]{ transition: opacity .22s ease, transform .22s ease; will-change: transform,opacity; }

    #smart-fab-dock[data-open="1"] [data-dock-item]{ transition-delay: calc(var(--i, 0) * 55ms); }
    #smart-fab-dock[data-open="0"] [data-dock-item]{ transition-delay: 0ms; }

    #smart-fab-dock[data-open="0"] [data-dock-item]{
        opacity: 0;
        transform: translateY(var(--dock-translate)) scale(.92);
        pointer-events: none;
    }
    #smart-fab-dock[data-open="1"] [data-dock-item]{
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    #smart-fab-toggle i{ transition: transform .25s ease; }
    #smart-fab-dock[data-open="1"] #smart-fab-toggle i{ transform: rotate(90deg); }

    /* داخل الدوك: حوّل أي rounded-full إلى squircle (حتى اللي داخل include) */
    #smart-fab-dock .rounded-full{ border-radius: 22px !important; }

    /* indicator dot */
    #smart-fab-indicator{
        position:absolute;
        top:-4px; right:-4px;
        width:12px; height:12px;
        border-radius: 22px;
        background: rgba(244,63,94,0.95);
        box-shadow: 0 0 18px rgba(244,63,94,0.85);
        border: 2px solid rgba(255,255,255,0.75);
        opacity:0;
        transition: opacity .2s ease;
        z-index: 50;
        pointer-events:none;
    }

    /* ✅✅ NEW: رقم البادج على زر السمارت نفسه = مجموع بادجات الداخل */
    @keyframes smartTotalPop{
        0%   { transform: scale(.88); opacity:.75; }
        100% { transform: scale(1); opacity:1; }
    }
    #smart-fab-total-badge{
        position:absolute;
        top:-8px;
        left:-8px; /* من برا الأيقونة وبعيد عن indicator */
        height:20px;
        min-width:26px;
        padding:0 8px;
        border-radius:9999px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:11px;
        font-weight:900;
        line-height:1;
        color:#fff;
        background: rgba(244,63,94,0.95);
        box-shadow: 0 0 18px rgba(244,63,94,0.55);
        border:1px solid rgba(255,255,255,0.35);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        white-space: nowrap;
        z-index: 60;
        pointer-events:none;
    }
    #smart-fab-total-badge.hidden{ display:none !important; }
    #smart-fab-total-badge.pop{ animation: smartTotalPop .18s ease; }

    /* ✅ FIX مهم: الدوك وهو مسكر ما يبلع كبسات (يحمي ProActive وغيره) */
    #smart-fab-dock{ pointer-events:none; }
    #smart-fab-dock[data-open="1"]{ pointer-events:auto; }
    #smart-fab-dock #smart-fab-toggle{ pointer-events:auto; }
</style>

{{-- ===========================
| ✅ DAILY READING (NEW UI)
|=========================== --}}
@if($dailyReading && !$hasRead)
    <div id="daily-reading-widget"
         data-state="closed"
         class="fixed bottom-24 left-4 right-4 sm:right-auto sm:left-4 sm:w-[420px] z-40 rtl">

        <div class="bg-gradient-to-br from-slate-950/95 via-slate-900/90 to-slate-950/95
                    border border-emerald-400/25 shadow-2xl rounded-3xl p-3 sm:p-4 backdrop-blur-xl">

            {{-- Header --}}
            <div class="flex items-center justify-between gap-3 cursor-pointer select-none"
                 data-dr-toggle
                 role="button"
                 aria-expanded="false">

                <div class="flex items-center gap-3 min-w-0">
                    <div class="h-10 w-10 neo-squircle bg-emerald-500/15 border border-emerald-400/30
                                flex items-center justify-center shadow fab-floaty">
                        <i class="fa-solid fa-book-open-reader text-[14px] text-emerald-100"></i>
                    </div>

                    <div class="min-w-0 flex flex-col">
                        <span class="text-sm font-extrabold text-white truncate">
                            اقرأني لليوم: {{ $dailyReading->title }}
                        </span>
                        <span class="text-[11px] text-white/70 truncate">
                            مطلوب من جميع الأعضاء قراءته والموافقة على أنهم قرأوه
                        </span>
                    </div>
                </div>

                <div class="flex items-center gap-2 shrink-0">
                    <span class="inline-flex items-center justify-center rounded-full bg-rose-500 text-white
                                 text-[10px] px-2 py-0.5 shadow">
                        جديد
                    </span>

                    <button type="button"
                            class="h-9 w-9 neo-squircle bg-white/5 hover:bg-white/10 border border-white/10
                                   flex items-center justify-center text-white/80 hover:text-white transition"
                            data-dr-open
                            aria-label="عرض">
                        <i class="fa-solid fa-chevron-down text-xs" data-dr-chevron></i>
                    </button>
                </div>
            </div>

            {{-- Body --}}
            <div class="border-t border-white/10 pt-3 text-xs sm:text-sm text-white/90"
                 data-dr-body>

                {{-- ✅ Scroll area fixed + not huge --}}
                <div class="max-h-64 overflow-y-auto pr-1 rounded-2xl bg-white/5 border border-white/10 p-3"
                     data-dr-scroll>
                    <div class="prose prose-sm max-w-none rtl prose-invert">
                        {!! $dailyReading->body_html !!}
                    </div>
                </div>

                <div class="mt-4 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                    <p class="text-[11px] text-white/70 leading-6">
                        بنقرة الزر أدناه، أنت تؤكد: <br>
                        <span class="font-extrabold text-white">
                            "موافق، قرأت وأقسم بالله أني قرأته بالكامل."
                        </span>
                    </p>

                    <button type="button"
                            class="inline-flex items-center justify-center px-4 py-2
                                   bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-extrabold
                                   neo-squircle shadow-lg shadow-emerald-500/20"
                            data-dr-confirm>
                        <i class="fa-solid fa-check ml-1 text-[11px]"></i>
                        موافق قرأت وأقسم بالله قرأته
                    </button>
                </div>
            </div>

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const widget = document.getElementById('daily-reading-widget');
            if (!widget) return;

            // ✅✅ منع تهيئة مكررة
            if (widget.dataset.drToggleInit === '1') return;
            widget.dataset.drToggleInit = '1';

            const header     = widget.querySelector('[data-dr-toggle]');
            const openBtn    = widget.querySelector('[data-dr-open]');
            const confirmBtn = widget.querySelector('[data-dr-confirm]');

            function isOpen(){ return widget.dataset.state === 'open'; }
            function setOpen(v){
                widget.dataset.state = v ? 'open' : 'closed';
                if (header) header.setAttribute('aria-expanded', v ? 'true' : 'false');
            }
            function toggle(){ setOpen(!isOpen()); }

            if (header) header.addEventListener('click', toggle);

            if (openBtn) {
                openBtn.addEventListener('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    toggle();
                });
            }

            if (confirmBtn) {
                confirmBtn.addEventListener('click', function (e) {
                    e.stopPropagation();

                    if (!confirm('هل تؤكد أنك قرأت المحتوى بالكامل وتقر بذلك؟')) return;

                    const originalHtml = confirmBtn.innerHTML;
                    confirmBtn.disabled = true;
                    confirmBtn.innerHTML = 'جاري التسجيل...';

                    fetch('{{ route('daily-reading.ack', $dailyReading) }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    })
                    .then(r => r.json())
                    .then(data => {
                        if (data && data.success) {
                            widget.remove();
                        } else {
                            alert((data && data.message) ? data.message : 'حدث خطأ أثناء تسجيل القراءة.');
                            confirmBtn.disabled = false;
                            confirmBtn.innerHTML = originalHtml;
                        }
                    })
                    .catch(() => {
                        alert('تعذر الاتصال بالخادم، حاول مرة أخرى.');
                        confirmBtn.disabled = false;
                        confirmBtn.innerHTML = originalHtml;
                    });
                });
            }

            // افتراضي: مغلق
            setOpen(false);
        });
    </script>
@endif

{{-- ===========================
| ✅ PROACTIVE (SERVER PREP)
|=========================== --}}
@php
    $tz    = config('app.timezone','Asia/Jerusalem');
    $today = now($tz)->toDateString();

    $proTodayActiveNow = $proTodayActiveNow ?? null;
    $proTodayTotal     = $proTodayTotal ?? null;
    $plusTodayCount    = $plusTodayCount ?? null;

    $notesToday = $notesToday ?? ($falconRolaNotesToday ?? 0);

    $proSchedulesToday   = collect();
    $proRecentStatus     = collect();
    $proLatestChangeIso  = now($tz)->toIso8601String();

    try {
        if ($proTodayActiveNow === null || $proTodayTotal === null || $plusTodayCount === null) {
            $proTodayActiveNow = (int) DB::table('proactive_schedules')
                ->whereDate('event_date', $today)
                ->where('status','active')
                ->count();

            $proTodayTotal = (int) DB::table('proactive_schedules')
                ->whereDate('event_date', $today)
                ->whereIn('status',['upcoming','active'])
                ->count();

            $plusTodayCount = (int) DB::table('proactive_schedules')
                ->where('event_type','plus')
                ->whereIn('status',['upcoming','active'])
                ->whereDate('event_date',$today)
                ->count();
        } else {
            $proTodayActiveNow = (int) $proTodayActiveNow;
            $proTodayTotal     = (int) $proTodayTotal;
            $plusTodayCount    = (int) $plusTodayCount;
        }

        $proSchedulesToday = DB::table('proactive_schedules')
            ->select('id','event_date','event_time','event_type','status')
            ->whereDate('event_date', $today)
            ->orderBy('event_time','asc')
            ->limit(25)
            ->get();

        $proRecentStatus = DB::table('proactive_reports as pr')
            ->leftJoin('users as u', 'u.id', '=', 'pr.created_by')
            ->select(
                'pr.id','pr.activity_date','pr.activity_type','pr.program_status',
                'pr.live_host','pr.live_owner_name','pr.platform','pr.rejection_reason','pr.updated_at',
                'u.name as creator_name'
            )
            ->whereIn('pr.program_status',['approved','rejected'])
            ->orderByDesc('pr.updated_at')
            ->orderByDesc('pr.id')
            ->limit(12)
            ->get();

        if ($proRecentStatus->first() && $proRecentStatus->first()->updated_at) {
            $proLatestChangeIso = \Illuminate\Support\Carbon::parse($proRecentStatus->first()->updated_at)->toIso8601String();
        }
    } catch (\Throwable $e) {
        $proTodayActiveNow = (int)($proTodayActiveNow ?? 0);
        $proTodayTotal     = (int)($proTodayTotal ?? 0);
        $plusTodayCount    = (int)($plusTodayCount ?? 0);
        $proSchedulesToday = collect();
        $proRecentStatus   = collect();
    }

    $proStatusMap = [
        'upcoming' => 'قادم',
        'active'   => 'نشط',
        'done'     => 'تم',
        'canceled' => 'ملغي',
        'cancelled'=> 'ملغي',
    ];

    // ✅ Initial badge (show live count OR today count) — بدون داخل الدائرة
    $proInitBadgeKind  = 'none';
    $proInitBadgeValue = 0;
    if ((int)$proTodayActiveNow > 0) {
        $proInitBadgeKind  = 'live';
        $proInitBadgeValue = (int)$proTodayActiveNow;
    } elseif ((int)$proTodayTotal > 0) {
        $proInitBadgeKind  = 'today';
        $proInitBadgeValue = (int)$proTodayTotal;
    }
@endphp

{{-- ===========================
| ✅ PROACTIVE UI (CSS)
|=========================== --}}
<style id="proactive-orb-ui">
    .pro-circle{ border-radius: 9999px !important; }

    @keyframes proOrbBreath {
        0%,100% { transform: translateY(0) scale(1); filter: saturate(1); }
        50%     { transform: translateY(-2px) scale(1.02); filter: saturate(1.25); }
    }
    @keyframes proOrbRing {
        0%   { transform: rotate(0deg); opacity: .55; }
        100% { transform: rotate(360deg); opacity: .85; }
    }
    #proactive-orb-btn[data-hot="1"]{ animation: proOrbBreath 2.8s ease-in-out infinite; }
    #proactive-orb-ring{ animation: proOrbRing 3.6s linear infinite; transform-origin: center; }

    /* ✅ Orb fixed OUTSIDE smart dock */
    #proactive-orb-root{
        position: fixed;
        left: 1rem;
        bottom: 6.35rem;
        z-index: 60;
        transition: transform .22s ease; /* ✅ للسحب لفوق لما تفتح السمارت */
        will-change: transform;
    }
    @media (min-width: 640px){
        #proactive-orb-root{ bottom: 6.85rem; }
    }

    /* ✅✅✅ BADGE PILL (فوق الدائرة بالنص) */
    @keyframes proBadgePop {
        0%   { transform: translateX(-50%) scale(.86); opacity:.75; }
        100% { transform: translateX(-50%) scale(1); opacity:1; }
    }

    #proactive-badge-pill{
        position:absolute;
        top:-12px;
        left:50%;
        transform: translateX(-50%);
        height:20px;
        min-width:26px;
        padding:0 8px;
        border-radius:9999px !important;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:11px;
        font-weight:900;
        line-height:1;
        color:#fff;
        border:1px solid rgba(255,255,255,0.35);
        box-shadow: 0 0 18px rgba(0,0,0,0.35);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        white-space: nowrap;
        pointer-events:none; /* ✅ ما يمنع كبسة الدائرة */
        z-index: 5;
    }
    #proactive-badge-pill.hidden{ display:none !important; }
    #proactive-badge-pill.pro-pop{ animation: proBadgePop .18s ease; }

    /* badge colors حسب نوعه */
    #proactive-badge-pill[data-kind="approved"]{
        background: rgba(16,185,129,0.95);
        box-shadow: 0 0 18px rgba(16,185,129,0.55);
    }
    #proactive-badge-pill[data-kind="rejected"]{
        background: rgba(244,63,94,0.95);
        box-shadow: 0 0 18px rgba(244,63,94,0.55);
    }
    #proactive-badge-pill[data-kind="live"]{
        background: rgba(6,182,212,0.95);
        box-shadow: 0 0 18px rgba(6,182,212,0.55);
    }
    #proactive-badge-pill[data-kind="today"]{
        background: rgba(99,102,241,0.95);
        box-shadow: 0 0 18px rgba(99,102,241,0.55);
    }
    #proactive-badge-pill[data-kind="plus"]{
        background: rgba(245,158,11,0.95);
        box-shadow: 0 0 18px rgba(245,158,11,0.55);
    }

    /* Modal: tabs */
    #proactive-modal [data-pro-tab-btn]{ transition: transform .18s ease, opacity .18s ease; }
    #proactive-modal [data-pro-tab-btn][data-active="1"]{ opacity: 1; transform: translateY(-1px); }
    #proactive-modal [data-pro-tab-panel]{ display:none; }
    #proactive-modal [data-pro-tab-panel][data-show="1"]{ display:block; }

    /* Scroll area */
    #proactive-modal [data-pro-scroll]{ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
</style>

{{-- ===========================
| ✅ PROACTIVE ORB (OUTSIDE SMART DOCK ✅)
| ✅ Badge pill فوق الدائرة + بدون نص تحت
|=========================== --}}
<div id="proactive-orb-root"
     class="relative"
     data-pulse-url="{{ \Illuminate\Support\Facades\Route::has('proactive.pulse') ? route('proactive.pulse') : '' }}"
     data-latest-change="{{ $proLatestChangeIso }}"
     data-init-total="{{ (int)$proTodayTotal }}"
     data-init-active="{{ (int)$proTodayActiveNow }}"
     data-init-plus="{{ (int)$plusTodayCount }}"
     data-today="{{ $today }}">

    <div class="relative inline-block">
        <button type="button"
                id="proactive-orb-btn"
                data-hot="{{ $proTodayActiveNow > 0 ? '1' : '0' }}"
                class="relative w-14 h-14 sm:w-16 sm:h-16 pro-circle
                       bg-gradient-to-br from-slate-950 via-slate-900 to-black
                       border border-indigo-400/35
                       shadow-[0_0_26px_rgba(99,102,241,0.45)]
                       hover:shadow-[0_0_40px_rgba(34,211,238,0.55)]
                       hover:border-cyan-300/60
                       backdrop-blur-xl overflow-hidden
                       flex items-center justify-center
                       transition-all duration-300">

            <span id="proactive-orb-ring"
                  class="pointer-events-none absolute -inset-2 pro-circle
                         bg-[conic-gradient(from_180deg,rgba(34,211,238,0.22),rgba(99,102,241,0.28),rgba(236,72,153,0.20),rgba(34,211,238,0.22))]"></span>

            <span class="pointer-events-none absolute inset-[5px] pro-circle bg-slate-950/85 border border-white/10"></span>
            <span class="pointer-events-none absolute inset-0 pro-circle bg-gradient-to-tr from-white/12 via-transparent to-transparent opacity-50"></span>

            <span class="relative z-10 flex items-center justify-center">
                <i class="fa-solid fa-satellite-dish text-xl sm:text-2xl text-cyan-200
                          drop-shadow-[0_0_12px_rgba(34,211,238,0.75)]"></i>
            </span>
        </button>

        {{-- ✅✅ Badge pill فوق الدائرة بالنص --}}
        <span id="proactive-badge-pill"
              data-kind="{{ $proInitBadgeKind }}"
              class="{{ $proInitBadgeValue > 0 ? '' : 'hidden' }}">
            {{ (int)$proInitBadgeValue }}
        </span>
    </div>
</div>

{{-- ===========================
| ✅ PROACTIVE MODAL (TABS + SCROLL)
|=========================== --}}
<div id="proactive-modal"
     class="fixed inset-0 z-[1000005] hidden items-center justify-center bg-black/60 backdrop-blur-md rtl"
     aria-hidden="true">

    <div class="relative w-[92vw] max-w-xl overflow-hidden rounded-3xl
                bg-gradient-to-br from-slate-950 via-slate-900 to-black
                border border-indigo-400/20 shadow-2xl">

        <div class="pointer-events-none absolute -top-24 -right-20 w-80 h-80 rounded-full bg-indigo-500/15 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-24 -left-20 w-80 h-80 rounded-full bg-cyan-400/12 blur-3xl"></div>

        <div class="relative flex items-center justify-between gap-3 px-5 py-4 border-b border-white/10">
            <div class="flex items-center gap-3">
                <div class="h-11 w-11 pro-circle bg-cyan-500/12 border border-cyan-400/25 flex items-center justify-center shadow">
                    <i class="fa-solid fa-satellite-dish text-xl text-cyan-200"></i>
                </div>
                <div class="flex flex-col">
                    <div class="text-base font-extrabold text-white">مركز ProActive</div>
                    <div class="text-[12px] text-white/70">
                        اليوم: <span id="pro-modal-today">{{ $today }}</span> •
                        <span id="pro-modal-mini-status">
                            @if($proTodayActiveNow > 0) شغّال الآن @elseif($proTodayTotal > 0) في مواعيد اليوم @else لا يوجد اليوم @endif
                        </span>
                    </div>
                </div>
            </div>

            <button type="button" data-pro-close
                    class="h-10 w-10 pro-circle border border-white/10 bg-white/5 hover:bg-white/10
                           flex items-center justify-center text-white/80 hover:text-white transition">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
        </div>

        <div class="relative px-5 pt-4">
            <div class="flex items-center gap-2">
                <button type="button" data-pro-tab-btn data-tab="today" data-active="1"
                        class="px-3 py-2 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10
                               text-xs font-extrabold text-white/90">
                    اليوم
                    <span class="mr-1 inline-flex items-center justify-center min-w-[22px] h-5 px-1 pro-circle
                                 bg-emerald-600/90 text-[11px] text-white shadow">
                        <span id="pro-tab-today-count">{{ (int)$proTodayTotal }}</span>
                    </span>
                </button>

                <button type="button" data-pro-tab-btn data-tab="reports" data-active="0"
                        class="px-3 py-2 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10
                               text-xs font-extrabold text-white/90">
                    تغييرات التقارير
                    <span class="mr-1 inline-flex items-center justify-center min-w-[22px] h-5 px-1 pro-circle
                                 bg-rose-600/90 text-[11px] text-white shadow">
                        <span id="pro-tab-changes-count">0</span>
                    </span>
                </button>

                <button type="button" data-pro-tab-btn data-tab="stats" data-active="0"
                        class="px-3 py-2 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10
                               text-xs font-extrabold text-white/90">
                    مؤشرات
                </button>
            </div>

            <div class="mt-4 grid grid-cols-3 gap-2">
                <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
                    <div class="text-[11px] text-white/70 font-bold">نشط الآن</div>
                    <div class="text-xl font-extrabold text-cyan-100" id="pro-mini-active">{{ (int)$proTodayActiveNow }}</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
                    <div class="text-[11px] text-white/70 font-bold">اليوم</div>
                    <div class="text-xl font-extrabold text-emerald-100" id="pro-mini-total">{{ (int)$proTodayTotal }}</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
                    <div class="text-[11px] text-white/70 font-bold">Plus</div>
                    <div class="text-xl font-extrabold text-indigo-100" id="pro-mini-plus">{{ (int)$plusTodayCount }}</div>
                </div>
            </div>
        </div>

        <div class="relative px-5 py-4">
            <div data-pro-tab-panel data-panel="today" data-show="1">
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div class="flex items-center justify-between gap-3 mb-3">
                        <div class="text-sm font-extrabold text-white">مواعيد اليوم</div>
                        <div class="text-[11px] text-white/70">
                            ملاحظات اليوم: <span class="font-extrabold text-white">{{ (int)$notesToday }}</span>
                        </div>
                    </div>

                    <div class="max-h-64 overflow-y-auto pr-1 rounded-2xl bg-black/20 border border-white/10 p-3"
                         data-pro-scroll id="pro-schedules-box">
                        @if($proSchedulesToday->count() === 0)
                            <div class="text-[12px] text-white/70">لا يوجد عناصر لليوم.</div>
                        @else
                            <div class="space-y-2">
                                @foreach($proSchedulesToday as $s)
                                    @php
                                        $st = (string)($s->status ?? '');
                                        $tt = (string)($s->event_type ?? '');
                                        $stText = $proStatusMap[$st] ?? $st;
                                    @endphp
                                    <div class="flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2">
                                        <div class="flex items-center gap-2 min-w-0">
                                            <span class="inline-flex items-center justify-center pro-circle w-7 h-7 bg-cyan-500/10 border border-cyan-400/20">
                                                <i class="fa-solid fa-clock text-[12px] text-cyan-200"></i>
                                            </span>
                                            <div class="min-w-0">
                                                <div class="text-[12px] font-extrabold text-white truncate">
                                                    {{ (string)($s->event_time ?? '—') }}
                                                    <span class="text-white/50 font-bold">•</span>
                                                    {{ $tt === 'plus' ? 'Plus' : 'Regular' }}
                                                </div>
                                                <div class="text-[11px] text-white/60 truncate">
                                                    #{{ (int)$s->id }} • {{ (string)($s->event_date ?? '') }}
                                                </div>
                                            </div>
                                        </div>

                                        <span class="text-[11px] px-2 py-1 pro-circle font-extrabold border border-white/10
                                                     @if($st === 'active') bg-emerald-600/30 text-emerald-100
                                                     @elseif($st === 'upcoming') bg-indigo-600/25 text-indigo-100
                                                     @else bg-white/5 text-white/70 @endif">
                                            {{ $stText }}
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    <div class="mt-3 text-[11px] text-white/60 leading-6">
                        أي تغيير بالحالة أو التقارير رح يفتح هذا المودال تلقائيًا ✨
                    </div>
                </div>
            </div>

            <div data-pro-tab-panel data-panel="reports" data-show="0">
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div class="flex items-center justify-between gap-3 mb-3">
                        <div class="text-sm font-extrabold text-white">آخر تغييرات (Approved/Rejected)</div>
                        <div class="text-[11px] text-white/70">
                            آخر تحديث: <span id="pro-last-update" class="font-extrabold text-white">—</span>
                        </div>
                    </div>

                    <div class="max-h-64 overflow-y-auto pr-1 rounded-2xl bg-black/20 border border-white/10 p-3"
                         data-pro-scroll id="pro-reports-box">
                        @if($proRecentStatus->count() === 0)
                            <div class="text-[12px] text-white/70">لا يوجد تغييرات حديثة.</div>
                        @else
                            <div class="space-y-2">
                                @foreach($proRecentStatus as $r)
                                    @php $ps = (string)($r->program_status ?? ''); @endphp
                                    <div class="rounded-xl border border-white/10 bg-white/5 px-3 py-2">
                                        <div class="flex items-center justify-between gap-3">
                                            <div class="text-[12px] font-extrabold text-white truncate">
                                                {{ (string)($r->live_host ?? '—') }}
                                                <span class="text-white/50">•</span>
                                                {{ (string)($r->live_owner_name ?? '') }}
                                            </div>

                                            <span class="text-[11px] px-2 py-1 pro-circle font-extrabold border border-white/10
                                                         @if($ps === 'approved') bg-emerald-600/30 text-emerald-100
                                                         @else bg-rose-600/25 text-rose-100 @endif">
                                                {{ $ps === 'approved' ? 'موافق' : 'مرفوض' }}
                                            </span>
                                        </div>

                                        <div class="mt-1 text-[11px] text-white/70 flex flex-wrap gap-x-2 gap-y-1">
                                            <span>#{{ (int)$r->id }}</span>
                                            <span>• {{ (string)($r->activity_date ?? '') }}</span>
                                            <span>• {{ (string)($r->creator_name ?? '—') }}</span>
                                            @if($ps === 'rejected' && (string)($r->rejection_reason ?? '') !== '')
                                                <span class="text-rose-100/90">• السبب: {{ (string)$r->rejection_reason }}</span>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    <div class="mt-3 flex items-center justify-between gap-2">
                        <button type="button" data-pro-mark-seen
                                class="px-4 py-2 rounded-xl border border-emerald-400/20
                                       bg-emerald-500/10 hover:bg-emerald-500/15
                                       text-xs font-extrabold text-emerald-100 transition">
                            تمت المراجعة ✅
                        </button>

                        <button type="button" data-pro-close
                                class="px-4 py-2 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10
                                       text-xs font-extrabold text-white/80 hover:text-white transition">
                            إغلاق
                        </button>
                    </div>
                </div>
            </div>

            <div data-pro-tab-panel data-panel="stats" data-show="0">
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div class="text-sm font-extrabold text-white mb-3">مؤشرات سريعة</div>

                    <div class="grid grid-cols-3 gap-2">
                        <div class="rounded-2xl border border-white/10 bg-black/20 p-3">
                            <div class="text-[11px] text-white/70 font-bold">Pending</div>
                            <div class="text-xl font-extrabold text-white" id="pro-stat-pending">—</div>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-black/20 p-3">
                            <div class="text-[11px] text-white/70 font-bold">Approved</div>
                            <div class="text-xl font-extrabold text-emerald-100" id="pro-stat-approved">—</div>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-black/20 p-3">
                            <div class="text-[11px] text-white/70 font-bold">Rejected</div>
                            <div class="text-xl font-extrabold text-rose-100" id="pro-stat-rejected">—</div>
                        </div>
                    </div>

                    <div class="mt-3 text-[11px] text-white/70 leading-6">
                        هذا القسم يتحدث تلقائيًا من نفس Pulse endpoint.
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

{{-- ✅✅ Scroll Lock Manager (يحمي من تعارض overflow-hidden بين المودالات) --}}
<script>
(function(){
    if (window.__uiScrollLock && window.__lockScroll && window.__unlockScroll) return;

    window.__uiScrollLock = window.__uiScrollLock || { count: 0, had: false };

    window.__lockScroll = function(){
        try{
            const docEl = document.documentElement;
            const st = window.__uiScrollLock;
            if (!st) return docEl.classList.add('overflow-hidden');

            if (st.count === 0) st.had = docEl.classList.contains('overflow-hidden');
            st.count++;
            docEl.classList.add('overflow-hidden');
        } catch(e){}
    };

    window.__unlockScroll = function(){
        try{
            const docEl = document.documentElement;
            const st = window.__uiScrollLock;
            if (!st) return docEl.classList.remove('overflow-hidden');

            st.count = Math.max(0, (st.count || 0) - 1);
            if (st.count === 0 && !st.had) docEl.classList.remove('overflow-hidden');
        } catch(e){}
    };
})();
</script>

{{-- ✅ PROACTIVE JS (FIXED + NO-CONFLICT + NO-FALSE-AUTO-OPEN) --}}
<script>
(function(){
    const orbRoot   = document.getElementById('proactive-orb-root');
    const orbBtn    = document.getElementById('proactive-orb-btn');
    const badgePill = document.getElementById('proactive-badge-pill');

    const modal     = document.getElementById('proactive-modal');
    if (!orbRoot || !orbBtn || !modal) return;

    // ✅✅ منع تهيئة مكررة (لو صار include مرتين / Livewire / Turbo)
    if (orbRoot.dataset.proJsInited === '1') return;
    orbRoot.dataset.proJsInited = '1';

    const pulseUrl  = orbRoot.dataset.pulseUrl || '';
    const todayStr  = orbRoot.dataset.today || '';

    // Storage helpers (تمنع exceptions)
    const lsGet = (k, fallback='') => { try { const v = localStorage.getItem(k); return (v == null) ? fallback : v; } catch(e){ return fallback; } };
    const lsSet = (k, v) => { try { localStorage.setItem(k, v); } catch(e){} };
    const ssGet = (k, fallback='') => { try { const v = sessionStorage.getItem(k); return (v == null) ? fallback : v; } catch(e){ return fallback; } };
    const ssSet = (k, v) => { try { sessionStorage.setItem(k, v); } catch(e){} };

    const tabBtns   = modal.querySelectorAll('[data-pro-tab-btn]');
    const panels    = modal.querySelectorAll('[data-pro-tab-panel]');
    const closeBtns = modal.querySelectorAll('[data-pro-close]');
    const markSeenBtn = modal.querySelector('[data-pro-mark-seen]');

    const elMiniActive = document.getElementById('pro-mini-active');
    const elMiniTotal  = document.getElementById('pro-mini-total');
    const elMiniPlus   = document.getElementById('pro-mini-plus');
    const elTabTodayCount = document.getElementById('pro-tab-today-count');
    const elTabChangesCount = document.getElementById('pro-tab-changes-count');

    const elReportsBox   = document.getElementById('pro-reports-box');
    const elSchedulesBox = document.getElementById('pro-schedules-box');
    const elLastUpdate   = document.getElementById('pro-last-update');

    const elStatPending  = document.getElementById('pro-stat-pending');
    const elStatApproved = document.getElementById('pro-stat-approved');
    const elStatRejected = document.getElementById('pro-stat-rejected');

    const LS_SEEN_TS    = 'pro_pulse_seen_ts';
    const LS_LAST_CNT   = 'pro_pulse_last_counts';
    const LS_SEEN_SCHED = 'pro_pulse_seen_sched_sig' + (todayStr ? (':' + todayStr) : '');

    const SS_AUTO_KEY   = 'pro_pulse_auto_key' + (todayStr ? (':' + todayStr) : '');
    const SS_AUTO_AT    = 'pro_pulse_auto_at'  + (todayStr ? (':' + todayStr) : '');
    const AUTO_COOLDOWN_MS = 2500;

    let lastFetchedLatest = orbRoot.dataset.latestChange || '';
    let seenTs = lsGet(LS_SEEN_TS, '') || lastFetchedLatest || '';

    let seenSchedSig = lsGet(LS_SEEN_SCHED, '') || '';
    let lastScheduleSig = '';

    let lastAutoKey = ssGet(SS_AUTO_KEY, '');
    let lastAutoAt  = Number(ssGet(SS_AUTO_AT, '0')) || 0;

    // ✅✅ FIX: baseline أول refresh + منع vibrate بدون تفاعل
    let bootstrapped   = false;
    let userInteracted = false;

    const markInteracted = () => { userInteracted = true; };
    window.addEventListener('pointerdown', markInteracted, { once:true, passive:true });
    window.addEventListener('keydown',     markInteracted, { once:true, passive:true });
    window.addEventListener('touchstart',  markInteracted, { once:true, passive:true });

    const hasUserInteracted = () => {
        if (userInteracted) return true;
        try {
            if (window.__modalGuard && typeof window.__modalGuard.interacted === 'function') {
                return !!window.__modalGuard.interacted();
            }
        } catch(e){}
        return false;
    };

    // init counts
    let lastCounts = {
        active_now: Number(orbRoot.dataset.initActive || 0),
        total_today: Number(orbRoot.dataset.initTotal || 0),
        plus_today: Number(orbRoot.dataset.initPlus || 0),
    };

    try {
        const saved = JSON.parse(lsGet(LS_LAST_CNT, '{}') || '{}');
        if (saved && typeof saved === 'object') {
            lastCounts.active_now  = Number(saved.active_now  ?? lastCounts.active_now);
            lastCounts.total_today = Number(saved.total_today ?? lastCounts.total_today);
            lastCounts.plus_today  = Number(saved.plus_today  ?? lastCounts.plus_today);
        }
    } catch(e){}

    const statusMap = {upcoming:'قادم', active:'نشط', done:'تم', canceled:'ملغي', cancelled:'ملغي'};
    const typeMap   = {plus:'Plus', regular:'Regular'};

    function esc(s){
        return String(s ?? '')
            .replaceAll('&','&amp;')
            .replaceAll('<','&lt;')
            .replaceAll('>','&gt;')
            .replaceAll('"','&quot;')
            .replaceAll("'","&#039;");
    }

    function isOpen(){ return !modal.classList.contains('hidden'); }

    function setTab(tab){
        tabBtns.forEach(b => {
            const active = (b.dataset.tab === tab);
            b.dataset.active = active ? '1' : '0';
        });
        panels.forEach(p => {
            const show = (p.dataset.panel === tab);
            p.dataset.show = show ? '1' : '0';
        });
    }

    function safeVibrate(pattern){
        try{
            if (!hasUserInteracted()) return;
            if (navigator && typeof navigator.vibrate === 'function') navigator.vibrate(pattern);
        } catch(e){}
    }

    function openModal(tab, opts = {}){
        // ✅✅ منع فتح تلقائي قبل تفاعل المستخدم (حل “يفتح لحاله”)
        if (opts && opts.auto){
            if (!hasUserInteracted()) return false;
            if (document.visibilityState && document.visibilityState !== 'visible') return false;

            // لو في مودل تاني ماسك الـ scroll، لا تفتح فوقه
            if (!isOpen() && document.documentElement.classList.contains('overflow-hidden')) return false;
        }

        modal.classList.remove('hidden');
        modal.classList.add('flex');
        modal.setAttribute('aria-hidden','false');

        // ✅ lock scroll بطريقة آمنة (بدون تعارض)
        if (window.__lockScroll) window.__lockScroll();
        else document.documentElement.classList.add('overflow-hidden');

        setTab(tab || 'today');

        if (opts.auto) safeVibrate([20, 30, 20]);
        return true;
    }

    function closeModal(){
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        modal.setAttribute('aria-hidden','true');

        // ✅ unlock scroll بطريقة آمنة
        if (window.__unlockScroll) window.__unlockScroll();
        else document.documentElement.classList.remove('overflow-hidden');
    }

    // badge pill helpers
    function popBadge(){
        if (!badgePill) return;
        badgePill.classList.remove('pro-pop');
        void badgePill.offsetWidth;
        badgePill.classList.add('pro-pop');
    }

    function setBadge(kind, value){
        if (!badgePill) return;
        const n = Number(value || 0);

        const prevText = String(badgePill.textContent || '');
        const prevKind = String(badgePill.dataset.kind || '');

        if (n <= 0){
            badgePill.classList.add('hidden');
            badgePill.dataset.kind = 'none';
            badgePill.textContent = '';
            return;
        }

        badgePill.classList.remove('hidden');
        badgePill.dataset.kind = kind || 'today';
        badgePill.textContent = (n > 99) ? '99+' : String(n);

        if (badgePill.textContent !== prevText || badgePill.dataset.kind !== prevKind) {
            popBadge();
        }
    }

    function applyFallbackBadge(counts){
        const a = Number(counts?.active_now || 0);
        const t = Number(counts?.total_today || 0);
        const p = Number(counts?.plus_today || 0);

        if (a > 0) return setBadge('live', a);
        if (t > 0) return setBadge('today', t);
        if (p > 0) return setBadge('plus', p);
        return setBadge('none', 0);
    }

    // signature helpers
    function toMs(ts){
        try{
            if (!ts) return null;
            const d = new Date(ts);
            const ms = d.getTime();
            return Number.isFinite(ms) ? ms : null;
        } catch(e){ return null; }
    }

    function buildScheduleSig(list, counts){
        try{
            if (Array.isArray(list) && list.length){
                const normalized = list.map(x => ({
                    id: String(x.id ?? ''),
                    event_date: String(x.event_date ?? ''),
                    event_time: String(x.event_time ?? ''),
                    event_type: String(x.event_type ?? ''),
                    status: String(x.status ?? ''),
                }));

                normalized.sort((a,b) => {
                    const ai = Number(a.id), bi = Number(b.id);
                    if (Number.isFinite(ai) && Number.isFinite(bi) && ai !== bi) return ai - bi;
                    return a.id.localeCompare(b.id);
                });

                return normalized.map(i => `${i.id}|${i.event_date}|${i.event_time}|${i.event_type}|${i.status}`).join('~');
            }
        } catch(e){}

        // fallback على الأرقام
        const a = Number(counts?.active_now || 0);
        const t = Number(counts?.total_today || 0);
        const p = Number(counts?.plus_today || 0);
        return `c:${a}:${t}:${p}`;
    }

    function markSeen(){
        // reports seen
        if (lastFetchedLatest) {
            seenTs = lastFetchedLatest;
            lsSet(LS_SEEN_TS, seenTs);
        }

        // schedules seen (لليوم فقط)
        if (lastScheduleSig) {
            seenSchedSig = lastScheduleSig;
            lsSet(LS_SEEN_SCHED, seenSchedSig);
        }

        if (elTabChangesCount) elTabChangesCount.textContent = '0';
        applyFallbackBadge(lastCounts);
    }

    // click: open
    orbBtn.addEventListener('click', function(e){
        e.preventDefault();
        openModal('today');
    });

    // tabs
    tabBtns.forEach(b => b.addEventListener('click', function(){
        setTab(b.dataset.tab);
    }));

    // close
    closeBtns.forEach(b => b.addEventListener('click', function(e){
        e.preventDefault();
        markSeen();
        closeModal();
    }));

    if (markSeenBtn){
        markSeenBtn.addEventListener('click', function(e){
            e.preventDefault();
            markSeen();
            closeModal();
        });
    }

    modal.addEventListener('click', function(e){
        if (e.target === modal) {
            markSeen();
            closeModal();
        }
    });

    document.addEventListener('keydown', function(e){
        if (e.key === 'Escape' && isOpen()){
            markSeen();
            closeModal();
        }
    });

    // Render helpers
    function renderSchedules(list){
        if (!elSchedulesBox) return;

        if (!Array.isArray(list) || list.length === 0) {
            elSchedulesBox.innerHTML = '<div class="text-[12px] text-white/70">لا يوجد عناصر لليوم.</div>';
            return;
        }

        elSchedulesBox.innerHTML = list.map(item => {
            const st = String(item.status || '');
            const stText = statusMap[st] || st || '—';
            const tt = String(item.event_type || '');
            const ttText = typeMap[tt] || tt || '—';

            const stClass =
                st === 'active'   ? 'bg-emerald-600/30 text-emerald-100' :
                st === 'upcoming' ? 'bg-indigo-600/25 text-indigo-100' :
                                    'bg-white/5 text-white/70';

            return `
                <div class="flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2">
                    <div class="flex items-center gap-2 min-w-0">
                        <span class="inline-flex items-center justify-center pro-circle w-7 h-7 bg-cyan-500/10 border border-cyan-400/20">
                            <i class="fa-solid fa-clock text-[12px] text-cyan-200"></i>
                        </span>
                        <div class="min-w-0">
                            <div class="text-[12px] font-extrabold text-white truncate">
                                ${esc(item.event_time || '—')}
                                <span class="text-white/50 font-bold">•</span>
                                ${esc(ttText)}
                            </div>
                            <div class="text-[11px] text-white/60 truncate">
                                #${esc(item.id)} • ${esc(item.event_date || '')}
                            </div>
                        </div>
                    </div>
                    <span class="text-[11px] px-2 py-1 pro-circle font-extrabold border border-white/10 ${stClass}">
                        ${esc(stText)}
                    </span>
                </div>
            `;
        }).join('');
    }

    function renderReportChanges(list){
        if (!elReportsBox) return;

        if (!Array.isArray(list) || list.length === 0) {
            elReportsBox.innerHTML = '<div class="text-[12px] text-white/70">لا يوجد تغييرات حديثة.</div>';
            return;
        }

        elReportsBox.innerHTML = list.map(r => {
            const ps = String(r.program_status || '');
            const badge =
                ps === 'approved'
                    ? '<span class="text-[11px] px-2 py-1 pro-circle font-extrabold border border-white/10 bg-emerald-600/30 text-emerald-100">موافق</span>'
                    : '<span class="text-[11px] px-2 py-1 pro-circle font-extrabold border border-white/10 bg-rose-600/25 text-rose-100">مرفوض</span>';

            const reason = (ps === 'rejected' && r.rejection_reason)
                ? `<span class="text-rose-100/90">• السبب: ${esc(r.rejection_reason)}</span>`
                : '';

            return `
                <div class="rounded-xl border border-white/10 bg-white/5 px-3 py-2">
                    <div class="flex items-center justify-between gap-3">
                        <div class="text-[12px] font-extrabold text-white truncate">
                            ${esc(r.live_host || '—')}
                            <span class="text-white/50">•</span>
                            ${esc(r.live_owner_name || '')}
                        </div>
                        ${badge}
                    </div>

                    <div class="mt-1 text-[11px] text-white/70 flex flex-wrap gap-x-2 gap-y-1">
                        <span>#${esc(r.id)}</span>
                        <span>• ${esc(r.activity_date || '')}</span>
                        <span>• ${esc(r.creator_name || '—')}</span>
                        ${reason}
                    </div>
                </div>
            `;
        }).join('');
    }

    function updateCountsUI(schedules){
        const active = Number(schedules?.active_now || 0);
        const total  = Number(schedules?.total_today || 0);
        const plus   = Number(schedules?.plus_today || 0);

        if (elMiniActive) elMiniActive.textContent = String(active);
        if (elMiniTotal)  elMiniTotal.textContent  = String(total);
        if (elMiniPlus)   elMiniPlus.textContent   = String(plus);

        if (elTabTodayCount) elTabTodayCount.textContent = String(total);

        return {active_now: active, total_today: total, plus_today: plus};
    }

    function updateStatsUI(counts){
        if (!counts) return;
        if (elStatPending)  elStatPending.textContent  = String(counts.pending ?? '—');
        if (elStatApproved) elStatApproved.textContent = String(counts.approved ?? '—');
        if (elStatRejected) elStatRejected.textContent = String(counts.rejected ?? '—');
    }

    if (!pulseUrl) {
        applyFallbackBadge(lastCounts);
        return;
    }

    async function refresh(){
        try{
            const url = pulseUrl + '?since=' + encodeURIComponent(seenTs || '') + '&_=' + Date.now();

            const res = await fetch(url, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin'
            });

            if(!res.ok) return;

            const ct = (res.headers.get('content-type') || '').toLowerCase();
            if (!ct.includes('application/json')) return;

            const data = await res.json();
            if(!data || !data.success) return;

            const prevCounts = { ...lastCounts };

            // update latest change
            if (data.reports && data.reports.latest_change_ts) {
                lastFetchedLatest = data.reports.latest_change_ts;
            }

            const newCounts = updateCountsUI(data.schedules || {});
            lsSet(LS_LAST_CNT, JSON.stringify(newCounts));

            // render lists
            if (data.schedules && Array.isArray(data.schedules.list)) renderSchedules(data.schedules.list);
            if (data.reports && Array.isArray(data.reports.recent)) renderReportChanges(data.reports.recent);

            // stats
            if (data.reports && data.reports.counts) updateStatsUI(data.reports.counts);

            // last update label
            if (elLastUpdate) {
                const t = data.now ? String(data.now) : '';
                elLastUpdate.textContent = t ? t.replace('T',' ').replace('Z','') : '—';
            }

            // schedule signature (stable)
            lastScheduleSig = buildScheduleSig((data.schedules && data.schedules.list) ? data.schedules.list : null, newCounts);

            // ✅✅ FIX: لو changes_since رجع غلط، صحّحه حسب timestamps
            let changesSince = Number(data.reports?.changes_since || 0);
            const msSeen   = toMs(seenTs);
            const msLatest = toMs(lastFetchedLatest);

            // إذا latest <= seen => ما في تغييرات مهما قال السيرفر
            if (msSeen !== null && msLatest !== null && msLatest <= msSeen) {
                changesSince = 0;
            }

            if (elTabChangesCount) elTabChangesCount.textContent = String(changesSince);

            // badge logic: changes > live > today > plus
            if (changesSince > 0) {
                const latest = (data.reports && Array.isArray(data.reports.recent) && data.reports.recent[0]) ? data.reports.recent[0] : null;
                const ps = latest ? String(latest.program_status || '') : '';
                setBadge(ps === 'rejected' ? 'rejected' : 'approved', changesSince);
            } else {
                applyFallbackBadge(newCounts);
            }

            // hot animation (changes OR active now)
            orbBtn.dataset.hot = (changesSince > 0 || newCounts.active_now > 0) ? '1' : '0';

            // commit lastCounts
            lastCounts = newCounts;

            // ✅ baseline أول refresh: لا تفتح مودال
            if (!bootstrapped) {
                bootstrapped = true;

                // ثبّت seenTs لو فاضي
                if (!seenTs && lastFetchedLatest) {
                    seenTs = lastFetchedLatest;
                    lsSet(LS_SEEN_TS, seenTs);
                }

                // ثبّت sched signature لليوم لو فاضي (حتى ما يفتح بسبب بيانات قديمة)
                if (!seenSchedSig && lastScheduleSig) {
                    seenSchedSig = lastScheduleSig;
                    lsSet(LS_SEEN_SCHED, seenSchedSig);
                }

                return;
            }

            // ✅ auto-open logic: Reports > Schedules (unseen)
            const scheduleUnseenChanged = !!(lastScheduleSig && seenSchedSig && lastScheduleSig !== seenSchedSig);
            const schedulesShouldOpen   = scheduleUnseenChanged && (newCounts.total_today > 0);

            const shouldAutoOpen = (changesSince > 0) || schedulesShouldOpen;

            const p = location.pathname || '';
            const onProactivePage = p.includes('/proactive');

            if (shouldAutoOpen && !isOpen() && !onProactivePage) {
                const now = Date.now();
                const cooldownOk = (now - lastAutoAt) > AUTO_COOLDOWN_MS;

                const autoTab = (changesSince > 0) ? 'reports' : 'today';
                const autoKey = (changesSince > 0)
                    ? (`rep:${String(lastFetchedLatest || '')}:${String(changesSince)}`)
                    : (`sch:${String(lastScheduleSig || '')}`);

                const keyOk = autoKey && autoKey !== lastAutoKey;

                if (cooldownOk && keyOk) {
                    const opened = openModal(autoTab, {auto:true});
                    if (opened) {
                        lastAutoKey = autoKey;
                        lastAutoAt  = now;
                        ssSet(SS_AUTO_KEY, lastAutoKey);
                        ssSet(SS_AUTO_AT, String(lastAutoAt));
                    }
                }
            }

        } catch(e){}
    }

    applyFallbackBadge(lastCounts);
    refresh();
    setInterval(refresh, 15000);
})();
</script>

{{-- ===========================
| ✅ SMART FAB DOCK (NEW UI)
|=========================== --}}
<div id="smart-fab-dock"
     data-open="0"
     class="fixed left-4 bottom-5 sm:bottom-6 z-50 flex flex-col items-start gap-2 rtl">

    {{-- Menu --}}
    <div class="flex flex-col gap-3 mb-1" data-dock-menu>

        {{-- TikTok Coins FAB --}}
        <div id="tiktok-coins-fab-root" class="relative" data-dock-item style="--i:0;">
            <button type="button"
                    data-open-tiktok-coins
                    class="relative w-14 h-14 sm:w-16 sm:h-16 neo-squircle flex items-center justify-center
                           bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                           border border-amber-400/35
                           shadow-[0_0_22px_rgba(245,158,11,0.40)]
                           hover:shadow-[0_0_34px_rgba(245,158,11,0.90)]
                           hover:border-amber-300/70
                           transition-all duration-300 backdrop-blur-xl overflow-visible group fab-floaty">

                <span class="absolute -inset-1 neo-squircle opacity-80 group-hover:opacity-100
                             bg-[radial-gradient(circle_at_0%_0%,rgba(245,158,11,0.35),transparent_55%),radial-gradient(circle_at_100%_100%,rgba(236,72,153,0.28),transparent_55%)]"></span>

                <span class="absolute inset-[3px] neo-squircle bg-slate-950/85 border border-slate-600/70"></span>

                <span class="absolute inset-0 neo-squircle bg-gradient-to-tr from-white/14 via-transparent to-transparent
                             opacity-40 group-hover:opacity-70"></span>

                <span class="absolute inset-[8px] neo-squircle
                             bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.20),transparent_55%),radial-gradient(circle_at_70%_70%,rgba(0,0,0,0.25),transparent_55%),linear-gradient(135deg,rgba(245,158,11,0.35),rgba(251,191,36,0.22),rgba(236,72,153,0.16))]
                             border border-amber-300/25
                             shadow-[inset_0_0_18px_rgba(245,158,11,0.20)]"></span>

                <span class="relative z-20 flex items-center justify-center">
                    <i class="fa-solid fa-coins text-xl sm:text-2xl text-amber-200
                              drop-shadow-[0_0_12px_rgba(245,158,11,0.75)]"></i>

                    <span class="absolute -bottom-2 -right-2 h-6 w-6 neo-squircle
                                 bg-slate-950/90 border border-white/10
                                 flex items-center justify-center
                                 shadow-[0_0_14px_rgba(236,72,153,0.35)]">
                        <i class="fa-brands fa-tiktok text-[12px] text-pink-200"></i>
                    </span>
                </span>

                <span class="absolute -top-1 -right-1
                             h-5 min-w-[22px] px-1 rounded-full
                             bg-emerald-600 text-[11px] font-extrabold text-white
                             flex items-center justify-center
                             shadow-[0_0_12px_rgba(16,185,129,0.75)]
                             border border-white/30
                             z-30">
                    0$
                </span>
            </button>
        </div>

        {{-- Group Chat FAB --}}
        <div id="group-chat-fab-root"
             class="relative"
             data-url="{{ route('group_chat.index') }}"
             data-unread-url="{{ route('group_chat.unread') }}"
             data-dock-item style="--i:1;">
            <a href="{{ route('group_chat.index') }}"
               class="relative w-14 h-14 sm:w-16 sm:h-16 neo-squircle flex items-center justify-center
                      bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                      border border-emerald-500/50
                      shadow-[0_0_22px_rgba(16,185,129,0.45)]
                      hover:shadow-[0_0_32px_rgba(45,212,191,0.85)]
                      hover:border-cyan-400/70
                      transition-all duration-300 backdrop-blur-xl overflow-visible group fab-floaty">

                <span class="absolute -inset-1 neo-squircle opacity-80 group-hover:opacity-100
                             bg-[radial-gradient(circle_at_0%_0%,rgba(16,185,129,0.35),transparent_55%),radial-gradient(circle_at_100%_100%,rgba(79,70,229,0.40),transparent_55%)]"></span>

                <span class="absolute inset-[3px] neo-squircle bg-slate-950/80 border border-slate-600/70"></span>

                <span class="absolute inset-0 neo-squircle bg-gradient-to-tr from-white/12 via-transparent to-transparent
                             opacity-40 group-hover:opacity-70"></span>

                <i class="fa-solid fa-users text-xl sm:text-2xl text-emerald-200
                          drop-shadow-[0_0_10px_rgba(16,185,129,0.8)] relative z-20"></i>

                <span id="group-chat-badge"
                      class="hidden absolute -top-1 -right-1
                             h-5 min-w-[22px] px-1 rounded-full
                             bg-rose-600 text-[11px] font-bold text-white
                             flex items-center justify-center
                             shadow-[0_0_12px_rgba(255,80,80,0.9)]
                             border border-white/30
                             z-30 transition-all duration-200"></span>

                <span id="group-chat-pulse"
                      class="hidden absolute inset-0 neo-squircle
                             bg-emerald-400/25 blur-xl animate-ping z-10"></span>
            </a>
        </div>

        {{-- Socratic --}}
        <div data-dock-item style="--i:2;">
            @include('partials.socratic-modal')
        </div>

        {{-- Support FAB --}}
        <div id="support-fab-root"
             class="relative"
             data-url="{{ route('support.index') }}"
             data-unread-url="{{ route('support.widget.unread') }}"
             data-dock-item style="--i:3;">
            <a href="{{ route('support.index') }}"
               class="relative w-14 h-14 sm:w-16 sm:h-16 neo-squircle flex items-center justify-center
                      bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                      border border-cyan-500/45
                      shadow-[0_0_22px_rgba(56,189,248,0.45)]
                      hover:shadow-[0_0_34px_rgba(34,211,238,0.85)]
                      hover:border-emerald-400/70
                      transition-all duration-300 backdrop-blur-xl overflow-visible group fab-floaty">

                <span class="absolute -inset-1 neo-squircle opacity-80 group-hover:opacity-100
                             bg-[radial-gradient(circle_at_0%_0%,rgba(56,189,248,0.35),transparent_55%),radial-gradient(circle_at_100%_100%,rgba(16,185,129,0.35),transparent_55%)]"></span>

                <span class="absolute inset-[3px] neo-squircle bg-slate-950/80 border border-slate-600/70"></span>

                <span class="absolute inset-0 neo-squircle bg-gradient-to-tr from-white/12 via-transparent to-transparent
                             opacity-40 group-hover:opacity-70"></span>

                <i class="fa-solid fa-envelope text-xl sm:text-2xl text-cyan-200
                          drop-shadow-[0_0_10px_rgba(34,211,238,0.8)] relative z-20"></i>

                <span id="support-badge"
                      class="hidden absolute -top-1 -right-1
                             h-5 min-w-[22px] px-1 rounded-full
                             bg-rose-600 text-[11px] font-bold text-white
                             flex items-center justify-center
                             shadow-[0_0_12px_rgba(255,80,80,0.9)]
                             border border-white/30
                             z-30 transition-all duration-200"></span>

                <span id="support-pulse"
                      class="hidden absolute inset-0 neo-squircle
                             bg-cyan-400/25 blur-xl animate-ping z-10"></span>
            </a>
        </div>

    </div>

    {{-- Toggle Button --}}
    <button type="button"
            id="smart-fab-toggle"
            class="relative w-14 h-14 sm:w-16 sm:h-16 neo-squircle
                   bg-gradient-to-br from-rose-500/20 via-indigo-500/15 to-emerald-500/15
                   border border-white/10
                   shadow-[0_0_30px_rgba(99,102,241,0.30)]
                   hover:shadow-[0_0_46px_rgba(34,211,238,0.40)]
                   backdrop-blur-xl
                   flex items-center justify-center
                   transition-all duration-300 group">

        <span class="absolute -inset-1 neo-squircle opacity-70 group-hover:opacity-100
                     bg-[radial-gradient(circle_at_20%_20%,rgba(236,72,153,0.35),transparent_55%),radial-gradient(circle_at_80%_80%,rgba(34,211,238,0.30),transparent_55%)]"></span>
        <span class="absolute inset-[3px] neo-squircle bg-slate-950/80 border border-white/10"></span>

        <i class="fa-solid fa-layer-group text-xl text-white/90 relative z-10"></i>

        <span id="smart-fab-indicator" aria-hidden="true"></span>

        {{-- ✅ مجموع البادجات الداخلية (من برا) --}}
        <span id="smart-fab-total-badge" class="hidden" aria-hidden="true"></span>
    </button>
</div>

{{-- ✅ Smart Dock JS:
| 1) يرفع ProActive لفوق لما تفتح السمارت
| 2) Badge مجموع بادجات الداخل
--}}
<script>
(function(){
    const dock   = document.getElementById('smart-fab-dock');
    const toggle = document.getElementById('smart-fab-toggle');

    const indicator  = document.getElementById('smart-fab-indicator');
    const totalBadge = document.getElementById('smart-fab-total-badge');

    const proRoot  = document.getElementById('proactive-orb-root');
    const dockMenu = dock ? dock.querySelector('[data-dock-menu]') : null;

    if(!dock || !toggle) return;

    // ✅✅ منع تهيئة مكررة
    if (dock.dataset.jsInited === '1') return;
    dock.dataset.jsInited = '1';

    const badgeA = document.getElementById('group-chat-badge');
    const badgeB = document.getElementById('support-badge');
    const badges = [badgeA, badgeB].filter(Boolean);

    function isOpen(){ return dock.dataset.open === '1'; }

    function readBadgeNumber(b){
        if (!b) return 0;
        if (b.classList.contains('hidden')) return 0;

        // ✅ رقم حقيقي حتى لو العرض 9+ (من unread script)
        const ds = (b.dataset && b.dataset.count) ? String(b.dataset.count) : '';
        if (ds !== '') {
            const n = Number(ds);
            return Number.isFinite(n) ? n : 0;
        }

        const t = String(b.textContent || '').trim();
        if (!t) return 0;
        if (t.endsWith('+')) {
            const n = Number(t.slice(0, -1));
            return Number.isFinite(n) ? n : 0;
        }
        const n = Number(t);
        return Number.isFinite(n) ? n : 0;
    }

    function popTotal(){
        if(!totalBadge) return;
        totalBadge.classList.remove('pop');
        void totalBadge.offsetWidth;
        totalBadge.classList.add('pop');
    }

    function setTotal(n){
        if(!totalBadge) return;
        const val = Number(n || 0);

        const prev = String(totalBadge.textContent || '').trim();

        if (val <= 0){
            totalBadge.classList.add('hidden');
            totalBadge.textContent = '';
            return;
        }

        totalBadge.classList.remove('hidden');
        totalBadge.textContent = (val > 99) ? '99+' : String(val);

        if (String(totalBadge.textContent) !== prev) popTotal();
    }

    function refreshBadges(){
        const total = badges.reduce((sum, b) => sum + readBadgeNumber(b), 0);

        // indicator dot (اختياري) — يخليها شغالة زي قبل
        if (indicator){
            indicator.style.opacity = total > 0 ? '1' : '0';
        }

        setTotal(total);
    }

    // ✅ رفع ProActive لفوق لما تفتح السمارت
    function liftProactive(){
        if(!proRoot || !dockMenu) return;

        // reset before measuring
        proRoot.style.transform = '';

        if (!isOpen()) return;

        const gap = 12;
        const menuRect = dockMenu.getBoundingClientRect();
        const proRect  = proRoot.getBoundingClientRect();

        const desiredBottom = menuRect.top - gap;
        let shift = proRect.bottom - desiredBottom;

        if (shift <= 0) return;

        // clamp: ما يطلع برا الشاشة من فوق
        const maxShift = Math.max(0, proRect.top - 12);
        shift = Math.min(shift, maxShift);

        if (shift > 0){
            proRoot.style.transform = `translateY(-${Math.ceil(shift)}px)`;
        }
    }

    function setOpen(v){
        dock.dataset.open = v ? '1' : '0';
        requestAnimationFrame(liftProactive);
    }

    // init
    setOpen(false);
    refreshBadges();

    toggle.addEventListener('click', function(e){
        e.preventDefault();
        setOpen(!isOpen());
    });

    document.addEventListener('click', function(e){
        if(!isOpen()) return;
        if(dock.contains(e.target)) return;
        setOpen(false);
    });

    document.addEventListener('keydown', function(e){
        if(e.key === 'Escape') setOpen(false);
    });

    dock.querySelectorAll('[data-dock-item] a, [data-dock-item] button').forEach(el => {
        el.addEventListener('click', function(){
            if (el.id === 'smart-fab-toggle') return;
            setOpen(false);
        });
    });

    // ✅ لو تغيرت بادجات الداخل، حدّث المجموع مباشرة
    if (badges.length) {
        const mo = new MutationObserver(refreshBadges);
        badges.forEach(b => mo.observe(b, { attributes:true, childList:true, characterData:true, subtree:true }));
    }

    // ✅ لو المستخدم غيّر حجم الشاشة وهي مفتوحة
    window.addEventListener('resize', function(){
        if (isOpen()) requestAnimationFrame(liftProactive);
    });
})();
</script>

{{-- TikTok Coins Modal (كما هو) --}}
<div id="tiktok-coins-modal"
     class="fixed inset-0 z-[1000003] hidden items-center justify-center bg-black/60 backdrop-blur-md rtl">
    <div class="relative w-[92vw] max-w-lg overflow-hidden rounded-3xl
                bg-gradient-to-br from-slate-950 via-slate-900 to-black
                border border-amber-400/20 shadow-2xl">

        <div class="pointer-events-none absolute -top-24 -right-16 w-72 h-72 rounded-full bg-amber-400/20 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-24 -left-16 w-72 h-72 rounded-full bg-pink-500/15 blur-3xl"></div>

        <div class="relative flex items-center justify-between gap-3 px-5 py-4 border-b border-white/10">
            <div class="flex items-center gap-3">
                <div class="h-11 w-11 rounded-full bg-amber-500/12 border border-amber-400/25
                            flex items-center justify-center shadow">
                    <i class="fa-solid fa-coins text-xl text-amber-200"></i>
                </div>
                <div class="flex flex-col">
                    <div class="text-base font-extrabold text-white">خدمة شحن عملات تيكتوك</div>
                    <div class="text-[12px] text-white/70">عبر البرنامج + عبر علاماتك داخل البرنامج</div>
                </div>
            </div>

            <button type="button" data-close-tiktok-coins
                    class="h-10 w-10 rounded-full border border-white/10 bg-white/5 hover:bg-white/10
                           flex items-center justify-center text-white/80 hover:text-white transition">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
        </div>

        <div class="relative px-5 py-5 space-y-4">
            <div class="rounded-2xl border border-amber-400/25 bg-amber-500/10 px-4 py-3">
                <div class="flex items-start gap-3">
                    <div class="mt-0.5 h-9 w-9 rounded-full bg-amber-500/15 border border-amber-400/25
                                flex items-center justify-center">
                        <i class="fa-solid fa-hourglass-half text-amber-200"></i>
                    </div>
                    <div class="text-sm text-amber-50 leading-7">
                        <div class="font-extrabold">قيد التطوير</div>
                        <div class="text-amber-100/90">
                            شحن عملات تيكتوك سيكون متاح عبر برنامجنا وعبر <span class="font-bold">علاماتك</span>.
                            سيتم تفعيله قريبًا بإذن الله.
                        </div>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
                <div class="flex items-center justify-between">
                    <div class="text-sm font-bold text-white/90">رصيدك الحالي</div>
                    <div class="inline-flex items-center gap-2 rounded-full px-3 py-1
                                bg-emerald-500/15 border border-emerald-400/25 text-emerald-100 font-extrabold">
                        <i class="fa-solid fa-coins"></i>
                        <span>0$</span>
                    </div>
                </div>

                <div class="mt-3 text-[12px] text-white/70 leading-6">
                    سيتم ربط الرصيد بـ “علاماتك” داخل النظام مع سجل عمليات كامل + إثباتات + متابعة الإدارة.
                </div>
            </div>
        </div>

        <div class="relative px-5 py-4 border-t border-white/10 flex items-center justify-end gap-2">
            <button type="button" data-close-tiktok-coins
                    class="px-4 py-2 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10
                           text-sm font-bold text-white/80 hover:text-white transition">
                إغلاق
            </button>
            <button type="button" disabled
                    class="px-4 py-2 rounded-xl border border-amber-400/20
                           bg-amber-500/10 text-sm font-extrabold text-amber-100/70
                           cursor-not-allowed">
                تفعيل الخدمة (قريبًا)
            </button>
        </div>
    </div>
</div>

<script>
(function(){
    const modal  = document.getElementById('tiktok-coins-modal');
    const openBtn = document.querySelector('[data-open-tiktok-coins]');
    if (!modal || !openBtn) return;

    // ✅✅ منع تهيئة مكررة
    if (modal.dataset.jsInited === '1') return;
    modal.dataset.jsInited = '1';

    const closes = modal.querySelectorAll('[data-close-tiktok-coins]');

    function open(){
        modal.classList.remove('hidden');
        modal.classList.add('flex');

        // ✅ lock scroll بطريقة آمنة
        if (window.__lockScroll) window.__lockScroll();
        else document.documentElement.classList.add('overflow-hidden');
    }

    function close(){
        modal.classList.add('hidden');
        modal.classList.remove('flex');

        // ✅ unlock scroll بطريقة آمنة
        if (window.__unlockScroll) window.__unlockScroll();
        else document.documentElement.classList.remove('overflow-hidden');
    }

    openBtn.addEventListener('click', function(e){
        e.preventDefault();
        open();
    });

    closes.forEach(btn => btn.addEventListener('click', function(e){
        e.preventDefault();
        close();
    }));

    modal.addEventListener('click', function(e){
        if (e.target === modal) close();
    });

    document.addEventListener('keydown', function(e){
        if (e.key === 'Escape' && !modal.classList.contains('hidden')) close();
    });
})();
</script>

{{-- ======= BADGES (UNREAD) ======= --}}
<script>
(function(){
    const rootS = document.getElementById('support-fab-root');
    if (rootS) {
        // ✅✅ منع تهيئة مكررة (حتى ما يصير interval مرتين)
        if (rootS.dataset.badgeInit === '1') {
            // no-op
        } else {
            rootS.dataset.badgeInit = '1';

            const badge = document.getElementById('support-badge');
            const pulse = document.getElementById('support-pulse');
            const url   = rootS.dataset.unreadUrl;

            async function refresh(){
                try{
                    const res = await fetch(url, { headers:{'Accept':'application/json'} });
                    if(!res.ok) return;
                    const data = await res.json();
                    const n = Number(data.unread || data.count || 0);

                    if (badge) badge.dataset.count = String(n); // ✅ رقم حقيقي للمجموع

                    if (n > 0){
                        badge && badge.classList.remove('hidden');
                        badge && (badge.textContent = n > 9 ? '9+' : String(n));
                        pulse && pulse.classList.remove('hidden');
                    } else {
                        badge && badge.classList.add('hidden');
                        badge && (badge.textContent = '');
                        pulse && pulse.classList.add('hidden');
                    }
                }catch(e){}
            }

            refresh();
            setInterval(refresh, 15000);
        }
    }

    const rootG = document.getElementById('group-chat-fab-root');
    if (rootG) {
        // ✅✅ منع تهيئة مكررة
        if (rootG.dataset.badgeInit === '1') {
            // no-op
        } else {
            rootG.dataset.badgeInit = '1';

            const badge = document.getElementById('group-chat-badge');
            const pulse = document.getElementById('group-chat-pulse');
            const url   = rootG.dataset.unreadUrl;

            async function refresh(){
                try{
                    const res = await fetch(url, { headers:{'Accept':'application/json'} });
                    if(!res.ok) return;
                    const data = await res.json();
                    const n = Number(data.unread || data.count || 0);

                    if (badge) badge.dataset.count = String(n); // ✅ رقم حقيقي للمجموع

                    if (n > 0){
                        badge && badge.classList.remove('hidden');
                        badge && (badge.textContent = n > 9 ? '9+' : String(n));
                        pulse && pulse.classList.remove('hidden');
                    } else {
                        badge && badge.classList.add('hidden');
                        badge && (badge.textContent = '');
                        pulse && pulse.classList.add('hidden');
                    }
                }catch(e){}
            }

            refresh();
            setInterval(refresh, 15000);
        }
    }
})();
</script>

{{-- ======= SAFETY (AS IS) ======= --}}
<script>
(function () {
  const safeStub = function(){};

  if (typeof window.updateMessagesBadge !== 'function') {
    window.updateMessagesBadge = safeStub;
  }

  window.addEventListener('error', function (e) {
    console.warn('JS Error blocked:', e.message);
  });
})();
</script>

<script>
/**
 * Modal Guard + Refresh Safe Wrapper
 * - يمنع فتح المودل تلقائياً من refresh/onload
 * - يمنع تكرار فتح نفس المودل
 * - يمنع vibrate قبل أي تفاعل من المستخدم (ويزيل Intervention)
 * - يمنع فتح مودل إذا الاستجابة ليست JSON (redirect/login/html/419..)
 *
 * الاستخدام:
 *   1) سيقوم بالتقاط openModal تلقائياً (إن كانت موجودة global)
 *   2) ويوفر دالة safeRefreshFetch(url) بدل fetch العادي داخل refresh (اختياري)
 */

(function () {
  // ✅✅ منع تهيئة مكررة
  if (window.__modalGuardInit) return;
  window.__modalGuardInit = true;

  // ====== 1) User interaction gate (لـ vibrate وفتح مودل) ======
  let __userInteracted = false;
  const markInteracted = () => { __userInteracted = true; };
  window.addEventListener('pointerdown', markInteracted, { passive: true, once: true });
  window.addEventListener('keydown', markInteracted, { passive: true, once: true });
  window.addEventListener('touchstart', markInteracted, { passive: true, once: true });

  // ====== 2) Modal state guard ======
  let __modalOpen = false;
  let __lastModalKey = null;
  let __lastOpenedAt = 0;

  // ثواني منع التكرار حتى لو نفس الحدث رجع من السيرفر
  const COOLDOWN_MS = 2500;

  // ====== 3) Safe vibrate ======
  function safeVibrate(pattern) {
    try {
      if (!__userInteracted) return;
      if (navigator && typeof navigator.vibrate === 'function') {
        navigator.vibrate(pattern);
      }
    } catch (e) {}
  }

  // ====== 4) Wrap global openModal (إن كانت موجودة) ======
  const originalOpenModal = window.openModal;

  if (typeof originalOpenModal === 'function') {
    window.openModal = function (...args) {
      const key = args.length ? JSON.stringify(args).slice(0, 180) : 'default';

      const now = Date.now();
      if (__modalOpen) return;
      if (__lastModalKey === key && (now - __lastOpenedAt) < COOLDOWN_MS) return;

      if (!__userInteracted) return;

      __modalOpen = true;
      __lastModalKey = key;
      __lastOpenedAt = now;

      const result = originalOpenModal.apply(this, args);

      safeVibrate(35);

      return result;
    };
  }

  // ====== 5) Helper: call when modal closes ======
  const originalCloseModal = window.closeModal;
  if (typeof originalCloseModal === 'function') {
    window.closeModal = function (...args) {
      __modalOpen = false;
      return originalCloseModal.apply(this, args);
    };
  }

  // ====== 6) Safe fetch for refresh ======
  window.safeRefreshFetch = async function (url, options = {}) {
    const opts = Object.assign({
      credentials: 'same-origin',
      headers: Object.assign({ 'Accept': 'application/json' }, (options.headers || {})),
      cache: 'no-store',
    }, options);

    const res = await fetch(url, opts);

    const ct = (res.headers.get('content-type') || '').toLowerCase();
    if (!res.ok) return null;
    if (!ct.includes('application/json')) return null;

    try {
      return await res.json();
    } catch (e) {
      return null;
    }
  };

  // ====== 7) Expose small utilities ======
  window.__modalGuard = {
    interacted: () => __userInteracted,
    setModalOpen: (v) => { __modalOpen = !!v; },
    resetLast: () => { __lastModalKey = null; __lastOpenedAt = 0; },
  };
})();
</script>

{{-- FIX: بدون حذف سطر — نخلي @endaut موجود لكن داخل تعليق حتى لا يكسر Blade --}}
{{-- 
@endaut
--}}
@endauth