@extends('layouts.superadmin')

@section('title','صيانة وأوامر السيرفر')
@section('page-title','🛠️ صيانة وأوامر السيرفر')

@push('styles')
<style>
  @keyframes pulse-scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
  .animate-pulse-scale { animation: pulse-scale 1.2s ease-in-out infinite; }

  .sc-scrollbar::-webkit-scrollbar{ width:10px; }
  .sc-scrollbar::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
  .sc-scrollbar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
  .sc-scrollbar::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }

  .min-h-\[56px\]{min-height:56px}
</style>
@endpush

@section('content')
<div class="min-h-screen rtl" dir="rtl"
     style="background:
       radial-gradient(45vmax 45vmax at 115% -10%, rgba(59,130,246,.18) 0, transparent 60%),
       radial-gradient(38vmax 38vmax at -10% 120%, rgba(34,211,238,.14) 0, transparent 60%),
       linear-gradient(180deg, #020617 0%, #0b1224 45%, #020617 100%);">

<div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 py-6 sm:py-8 space-y-6 text-white">

  {{-- HERO + PROGRESS --}}
  <section class="relative overflow-hidden rounded-3xl shadow-2xl
                  bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                  border border-sky-500/25">
    <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-sky-500/16 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-32 -left-16 w-80 h-80 rounded-full bg-indigo-500/14 blur-3xl"></div>

    <div class="relative p-5 sm:p-7 lg:p-8 space-y-4">
      <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
        <div class="space-y-2 max-w-3xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-sky-400/25 text-[11px] text-white/85">
            <span class="inline-flex w-6 h-6 rounded-full bg-gradient-to-br from-sky-500 to-indigo-500 text-white items-center justify-center">
              <i class="fa-solid fa-screwdriver-wrench text-[11px]"></i>
            </span>
            غرفة الصقر — صيانة وأوامر السيرفر (داخل النظام)
          </div>

          <h1 class="text-xl sm:text-2xl lg:text-3xl font-extrabold tracking-tight">
            🛠️ صيانة وأوامر السيرفر
          </h1>

          <p class="text-[12px] sm:text-[14px] text-white/70 leading-relaxed">
            سلايدات احترافية: فحص → تنظيف Laravel → تسريع → DB → Queue → تنظيف شامل → تقارير الجداول → AI Tables → Retention → Diagnostics
          </p>

          <div class="flex flex-wrap gap-2 pt-1">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
              التنفيذ محمي + مخرجات فورية
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <span class="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
              نفّذ حسب البروجريس
            </span>
          </div>
        </div>

        <div class="w-full lg:w-[520px]">
          <div class="rounded-3xl bg-black/35 border border-white/15 p-4 space-y-2">
            <div class="text-[11px] text-white/60 font-extrabold">مسار التنفيذ</div>

            <div class="flex items-center justify-between text-[11px] text-white/60 mb-1">
              <span id="stepLabel">الخطوة 1/10 — فحص سريع</span>
              <span id="percentLabel">0%</span>
            </div>
            <div class="h-2 rounded-full bg-white/10 border border-white/10 overflow-hidden">
              <div id="progressBar" class="h-full w-[0%] bg-gradient-to-r from-sky-500 via-cyan-400 to-emerald-300 transition-all duration-300"></div>
            </div>

            <div class="mt-3 grid grid-cols-10 gap-2 text-[11px]">
              @for($i=1;$i<=10;$i++)
                <button type="button" data-step-jump="{{ $i }}"
                        class="stepDot px-2 py-1 rounded-2xl bg-white/5 border border-white/10 text-white/70 font-extrabold">
                  {{ $i }}
                </button>
              @endfor
            </div>

            <div class="text-[11px] text-white/45">
              تقدر تقفز بين السلايدات… أي تشغيل يظهر تحت فورًا.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- STATS --}}
  <section class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-xl p-5 sm:p-6">
    <div class="pointer-events-none absolute -top-20 -left-20 w-72 h-72 rounded-full bg-sky-500/10 blur-3xl"></div>
    <h3 class="font-extrabold mb-4">📊 معلومات عامة</h3>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
      @php
        $items = [
          ['k'=>'PHP','v'=>$stats['php']],
          ['k'=>'Laravel','v'=>$stats['laravel']],
          ['k'=>'ENV','v'=>$stats['app_env']],
          ['k'=>'Cache','v'=>$stats['cache']],
          ['k'=>'Queue','v'=>$stats['queue']],
          ['k'=>'DB','v'=>$stats['db']],
          ['k'=>'LoadAvg','v'=>$stats['loadavg']],
          ['k'=>'OPcache','v'=>$stats['opcache'] ? 'Enabled' : 'Disabled'],
          ['k'=>'Disk Used','v'=>$stats['disk']['used']],
          ['k'=>'Disk Free','v'=>$stats['disk']['free']],
          ['k'=>'Logs Size','v'=>$stats['log_size']],
        ];
      @endphp
      @foreach($items as $it)
        <div class="p-3 rounded-2xl bg-black/35 border border-white/10">
          <span class="text-white/60 text-[11px]">{{ $it['k'] }}</span>
          <div class="font-extrabold text-white mt-1">{{ $it['v'] }}</div>
        </div>
      @endforeach
    </div>

    <div class="mt-5 bg-amber-500/10 border border-amber-400/20 rounded-2xl p-4 text-amber-100 text-sm leading-relaxed">
      @include('superadmin.falcon-room.partials.maintenance_notice')
    </div>
  </section>

  {{-- OUTPUT --}}
  <section class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-xl p-5 sm:p-6">
    <div class="flex items-center justify-between gap-3">
      <div>
        <h3 class="font-extrabold">📟 مخرجات التنفيذ</h3>
        <p class="text-[11px] text-white/55">أي أمر ينفّذ سيظهر نتيجته هنا مباشرة.</p>
      </div>
      <button type="button" id="outClear"
              class="px-3 py-2 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/15 text-[12px] font-extrabold transition">
        <i class="fa-solid fa-broom text-[12px]"></i>
        تنظيف الشاشة
      </button>
    </div>

    <div id="maint-out"
         class="mt-4 text-sm text-white/80 bg-black/35 rounded-2xl p-3 min-h-[56px] border border-white/10 overflow-auto sc-scrollbar">
      <span class="text-white/45">نتيجة الأوامر ستظهر هنا…</span>
    </div>
  </section>

  {{-- SLIDES (10) --}}
  <section class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl">
    <div class="pointer-events-none absolute -top-24 -right-20 w-80 h-80 rounded-full bg-indigo-500/10 blur-3xl"></div>

    <div class="p-5 sm:p-7 border-b border-white/10">
      <div class="flex items-center gap-3">
        <div class="w-11 h-11 rounded-2xl bg-sky-500/12 border border-sky-400/20 text-sky-200 grid place-items-center">
          <i class="fa-solid fa-bolt"></i>
        </div>
        <div>
          <div class="text-[11px] text-white/60">الأوامر</div>
          <div class="text-lg font-extrabold">مركز الصيانة — أقسام إضافية</div>
        </div>
      </div>
    </div>

    <div class="p-5 sm:p-7 space-y-6">

      {{-- (1) Quick --}}
      <div class="slide" data-step="1">
        <div class="flex items-center justify-between">
          <div class="text-[11px] text-white/60 font-extrabold">الخطوة 1/10</div>
          <div class="text-[11px] text-white/60">فحص سريع</div>
        </div>
        <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <button class="maint-btn px-4 py-3 rounded-2xl bg-cyan-500/12 hover:bg-cyan-500/16 border border-cyan-400/20 text-cyan-100 font-extrabold transition" data-action="health_check">
            Health Check
            <div class="text-[11px] font-medium text-cyan-100/80 mt-1">ملخص سريع داخل التطبيق</div>
          </button>
          <button class="maint-btn px-4 py-3 rounded-2xl bg-emerald-500/12 hover:bg-emerald-500/16 border border-emerald-400/20 text-emerald-100 font-extrabold transition" data-action="optimize_clear">
            optimize:clear
            <div class="text-[11px] font-medium text-emerald-100/80 mt-1">Clear لكل كاش Laravel</div>
          </button>
          <button class="maint-btn px-4 py-3 rounded-2xl bg-amber-500/12 hover:bg-amber-500/16 border border-amber-400/20 text-amber-100 font-extrabold transition" data-action="logs_truncate">
            تدوير اللوجات
            <div class="text-[11px] font-medium text-amber-100/80 mt-1">Logs تصبح .bak</div>
          </button>
        </div>
      </div>

      {{-- (2) Laravel Clean --}}
      <div class="slide hidden" data-step="2">
        <div class="flex items-center justify-between">
          <div class="text-[11px] text-white/60 font-extrabold">الخطوة 2/10</div>
          <div class="text-[11px] text-white/60">تنظيف Laravel الداخلي</div>
        </div>
        <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <button class="maint-btn px-4 py-3 rounded-2xl bg-sky-500/12 hover:bg-sky-500/16 border border-sky-400/20 text-sky-100 font-extrabold transition" data-action="assets_cleanup">
            تنظيف framework/cache
            <div class="text-[11px] font-medium text-sky-100/80 mt-1">views + cache/data</div>
          </button>
          <button class="maint-btn px-4 py-3 rounded-2xl bg-indigo-500/12 hover:bg-indigo-500/16 border border-indigo-400/20 text-indigo-100 font-extrabold transition" data-action="clear_sessions">
            تنظيف Sessions
            <div class="text-[11px] font-medium text-indigo-100/80 mt-1">لو جلساتك file</div>
          </button>
          <button class="maint-btn px-4 py-3 rounded-2xl bg-rose-500/12 hover:bg-rose-500/16 border border-rose-400/20 text-rose-100 font-extrabold transition" data-action="clear_failed_jobs">
            تنظيف failed_jobs
            <div class="text-[11px] font-medium text-rose-100/80 mt-1">تفريغ الجدول</div>
          </button>
        </div>
      </div>

      {{-- (3) Laravel Boost --}}
      <div class="slide hidden" data-step="3">
        <div class="flex items-center justify-between">
          <div class="text-[11px] text-white/60 font-extrabold">الخطوة 3/10</div>
          <div class="text-[11px] text-white/60">تسريع Laravel</div>
        </div>
        <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <button class="maint-btn px-4 py-3 rounded-2xl bg-cyan-500/12 hover:bg-cyan-500/16 border border-cyan-400/20 text-cyan-100 font-extrabold transition" data-action="config_cache">
            config:cache
            <div class="text-[11px] font-medium text-cyan-100/80 mt-1">سريع للإنتاج</div>
          </button>
          <button class="maint-btn px-4 py-3 rounded-2xl bg-indigo-500/12 hover:bg-indigo-500/16 border border-indigo-400/20 text-indigo-100 font-extrabold transition" data-action="route_cache">
            route:cache
            <div class="text-[11px] font-medium text-indigo-100/80 mt-1">يتطلب أسماء Routes بدون تكرار</div>
          </button>
          <button class="maint-btn px-4 py-3 rounded-2xl bg-violet-500/12 hover:bg-violet-500/16 border border-violet-400/20 text-violet-100 font-extrabold transition" data-action="view_cache">
            view:cache
            <div class="text-[11px] font-medium text-violet-100/80 mt-1">سريع للفيوز</div>
          </button>
          <button class="maint-btn md:col-span-3 px-4 py-3 rounded-2xl bg-emerald-500/12 hover:bg-emerald-500/16 border border-emerald-400/20 text-emerald-100 font-extrabold transition" data-action="optimize">
            optimize
            <div class="text-[11px] font-medium text-emerald-100/80 mt-1">Boost شامل (قد يفشل لو route names مكررة)</div>
          </button>
        </div>
      </div>

      {{-- (4) DB --}}
      <div class="slide hidden" data-step="4">
        <div class="flex items-center justify-between">
          <div class="text-[11px] text-white/60 font-extrabold">الخطوة 4/10</div>
          <div class="text-[11px] text-white/60">قاعدة البيانات</div>
        </div>
        <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <button class="maint-btn px-4 py-3 rounded-2xl bg-violet-500/12 hover:bg-violet-500/16 border border-violet-400/20 text-violet-100 font-extrabold transition" data-action="db_optimize">
            DB Optimize+Analyze
            <div class="text-[11px] font-medium text-violet-100/80 mt-1">مهم لتسريع الاستعلامات</div>
          </button>
          <button class="maint-btn px-4 py-3 rounded-2xl bg-purple-500/12 hover:bg-purple-500/16 border border-purple-400/20 text-purple-100 font-extrabold transition" data-action="db_repair">
            DB Repair MyISAM
            <div class="text-[11px] font-medium text-purple-100/80 mt-1">لو عندك MyISAM</div>
          </button>
          <button class="maint-btn px-4 py-3 rounded-2xl bg-amber-500/12 hover:bg-amber-500/16 border border-amber-400/20 text-amber-100 font-extrabold transition" data-action="db_table_sizes_report">
            Table Sizes Report
            <div class="text-[11px] font-medium text-amber-100/80 mt-1">تقرير سريع للأحجام</div>
          </button>
        </div>
      </div>

      {{-- (5) Queue --}}
      <div class="slide hidden" data-step="5">
        <div class="flex items-center justify-between">
          <div class="text-[11px] text-white/60 font-extrabold">الخطوة 5/10</div>
          <div class="text-[11px] text-white/60">Queue / Workers</div>
        </div>
        <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <button class="maint-btn px-4 py-3 rounded-2xl bg-sky-500/12 hover:bg-sky-500/16 border border-sky-400/20 text-sky-100 font-extrabold transition" data-action="queue_restart">
            queue:restart
            <div class="text-[11px] font-medium text-sky-100/80 mt-1">يعيد العمال</div>
          </button>
          <button class="maint-btn px-4 py-3 rounded-2xl bg-indigo-500/12 hover:bg-indigo-500/16 border border-indigo-400/20 text-indigo-100 font-extrabold transition" data-action="horizon_terminate">
            horizon:terminate
            <div class="text-[11px] font-medium text-indigo-100/80 mt-1">لو Horizon مثبت</div>
          </button>
          <button class="maint-btn px-4 py-3 rounded-2xl bg-rose-500/12 hover:bg-rose-500/16 border border-rose-400/20 text-rose-100 font-extrabold transition" data-action="queue_flush_confirmed">
            queue:flush (Danger)
            <div class="text-[11px] font-medium text-rose-100/80 mt-1">يمسح كل Jobs (بحذر)</div>
          </button>
        </div>
      </div>

      {{-- (6) Deep cleanup --}}
      <div class="slide hidden" data-step="6">
        <div class="flex items-center justify-between">
          <div class="text-[11px] text-white/60 font-extrabold">الخطوة 6/10</div>
          <div class="text-[11px] text-white/60">🧹 تنظيف شامل داخل التطبيق</div>
        </div>
        <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
          <button class="maint-btn px-4 py-4 rounded-2xl bg-emerald-500/12 hover:bg-emerald-500/16 border border-emerald-400/20 text-emerald-100 font-extrabold transition" data-action="deep_cleanup_app">
            تنظيف شامل (Recommended)
            <div class="text-[11px] font-medium text-emerald-100/80 mt-1">
              optimize:clear + framework + sessions + logs + opcache + DB optimize
            </div>
          </button>
          <button class="maint-btn px-4 py-4 rounded-2xl bg-sky-500/12 hover:bg-sky-500/16 border border-sky-400/20 text-sky-100 font-extrabold transition" data-action="opcache_reset">
            OPcache reset
            <div class="text-[11px] font-medium text-sky-100/80 mt-1">تفريغ OPcache فقط</div>
          </button>
        </div>
      </div>

      {{-- (7) Tables dashboard (interactive) --}}
      <div class="slide hidden" data-step="7">
        <div class="flex items-center justify-between">
          <div class="text-[11px] text-white/60 font-extrabold">الخطوة 7/10</div>
          <div class="text-[11px] text-white/60">📦 الجداول المستخدمة + الحجم + تحديد</div>
        </div>

        <div class="mt-3 flex flex-col sm:flex-row gap-2">
          <button type="button" id="btnLoadTables"
                  class="px-5 py-2.5 rounded-2xl bg-sky-500/12 hover:bg-sky-500/16 border border-sky-400/20 text-sky-100 text-sm font-extrabold transition">
            <i class="fa-solid fa-database text-[12px]"></i>
            تحميل تقرير الجداول
          </button>

          <button type="button" id="btnSelectAllTables"
                  class="px-5 py-2.5 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/15 text-white/90 text-sm font-extrabold transition">
            تحديد الكل
          </button>

          <button type="button" id="btnSelectNoneTables"
                  class="px-5 py-2.5 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/15 text-white/90 text-sm font-extrabold transition">
            إلغاء التحديد
          </button>
        </div>

        <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <button type="button" id="btnOptimizeSelected"
                  class="px-4 py-3 rounded-2xl bg-emerald-500/12 hover:bg-emerald-500/16 border border-emerald-400/20 text-emerald-100 font-extrabold transition">
            OPTIMIZE المحدد
            <div class="text-[11px] font-medium text-emerald-100/80 mt-1">يحسن الجداول المحددة</div>
          </button>
          <button type="button" id="btnAnalyzeSelected"
                  class="px-4 py-3 rounded-2xl bg-cyan-500/12 hover:bg-cyan-500/16 border border-cyan-400/20 text-cyan-100 font-extrabold transition">
            ANALYZE المحدد
            <div class="text-[11px] font-medium text-cyan-100/80 mt-1">يحدث إحصاءات المُحسّن</div>
          </button>
          <button type="button" id="btnTablesUsageReport"
                  class="px-4 py-3 rounded-2xl bg-amber-500/12 hover:bg-amber-500/16 border border-amber-400/20 text-amber-100 font-extrabold transition">
            تقرير “الأكثر استخدامًا”
            <div class="text-[11px] font-medium text-amber-100/80 mt-1">حسب الحجم/rows (آمن)</div>
          </button>
        </div>

        <div class="mt-4 rounded-3xl bg-black/35 border border-white/10 overflow-hidden">
          <div class="px-4 py-3 border-b border-white/10 flex items-center justify-between">
            <div class="font-extrabold text-white/90">📋 قائمة الجداول</div>
            <div class="text-[11px] text-white/55" id="tablesMeta">لم يتم التحميل بعد</div>
          </div>

          <div class="overflow-x-auto sc-scrollbar">
            <table class="w-full text-sm">
              <thead class="text-[11px] uppercase tracking-wide text-white/55 bg-white/5">
                <tr class="text-right">
                  <th class="p-2.5">تحديد</th>
                  <th class="p-2.5">الجدول</th>
                  <th class="p-2.5">Rows</th>
                  <th class="p-2.5">Data</th>
                  <th class="p-2.5">Index</th>
                  <th class="p-2.5">Total</th>
                  <th class="p-2.5">Engine</th>
                </tr>
              </thead>
              <tbody id="tablesBody" class="divide-y divide-white/10">
                <tr><td class="p-4 text-white/55" colspan="7">اضغط “تحميل تقرير الجداول”.</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="mt-3 text-[12px] text-white/65">
          <b class="text-white">ملاحظة:</b> هذا التقرير يعرض الحجم من قاعدة البيانات. “الأكثر استخدامًا” هنا = الأكبر/الأكثر صفوفًا (أفضل مؤشر سريع للصيانة).
        </div>
      </div>

      {{-- (8) AI tables --}}
      <div class="slide hidden" data-step="8">
        <div class="flex items-center justify-between">
          <div class="text-[11px] text-white/60 font-extrabold">الخطوة 8/10</div>
          <div class="text-[11px] text-white/60">🤖 جداول الذكاء الاصطناعي وتحسينها</div>
        </div>

        <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <button class="maint-btn px-4 py-3 rounded-2xl bg-indigo-500/12 hover:bg-indigo-500/16 border border-indigo-400/20 text-indigo-100 font-extrabold transition"
                  data-action="ai_tables_report">
            AI Tables Report
            <div class="text-[11px] font-medium text-indigo-100/80 mt-1">يكتشف جداول AI ويعطي الحجم</div>
          </button>

          <button class="maint-btn px-4 py-3 rounded-2xl bg-emerald-500/12 hover:bg-emerald-500/16 border border-emerald-400/20 text-emerald-100 font-extrabold transition"
                  data-action="ai_tables_optimize">
            OPTIMIZE AI Tables
            <div class="text-[11px] font-medium text-emerald-100/80 mt-1">Optimize+Analyze للجداول AI</div>
          </button>

          <button class="maint-btn px-4 py-3 rounded-2xl bg-amber-500/12 hover:bg-amber-500/16 border border-amber-400/20 text-amber-100 font-extrabold transition"
                  data-action="ai_logs_prune">
            Prune AI Logs
            <div class="text-[11px] font-medium text-amber-100/80 mt-1">حذف قديم (يتطلب created_at)</div>
          </button>
        </div>

        <div class="mt-4 rounded-2xl bg-black/35 border border-white/10 p-4 text-[12px] text-white/75">
          <b class="text-white">فكرة التحسين:</b> جداول AI عادةً تكبر بسرعة (logs/analytics/embeddings). Optimize+Analyze يقلل fragmentation ويحسن planner.
        </div>
      </div>

      {{-- (9) Retention / Pruning (important from me) --}}
      <div class="slide hidden" data-step="9">
        <div class="flex items-center justify-between">
          <div class="text-[11px] text-white/60 font-extrabold">الخطوة 9/10</div>
          <div class="text-[11px] text-white/60">🧾 Retention & Pruning (مهم جدًا)</div>
        </div>

        <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <button class="maint-btn px-4 py-3 rounded-2xl bg-sky-500/12 hover:bg-sky-500/16 border border-sky-400/20 text-sky-100 font-extrabold transition"
                  data-action="maintenance_logs_prune_30d">
            Prune maintenance_logs (30d)
            <div class="text-[11px] font-medium text-sky-100/80 mt-1">يحذف الأقدم من 30 يوم</div>
          </button>

          <button class="maint-btn px-4 py-3 rounded-2xl bg-rose-500/12 hover:bg-rose-500/16 border border-rose-400/20 text-rose-100 font-extrabold transition"
                  data-action="telescope_prune_7d">
            Telescope prune (7d)
            <div class="text-[11px] font-medium text-rose-100/80 mt-1">لو Telescope مثبت</div>
          </button>

          <button class="maint-btn px-4 py-3 rounded-2xl bg-emerald-500/12 hover:bg-emerald-500/16 border border-emerald-400/20 text-emerald-100 font-extrabold transition"
                  data-action="temp_files_prune">
            Prune temp files
            <div class="text-[11px] font-medium text-emerald-100/80 mt-1">يحذف temp قديم داخل storage</div>
          </button>
        </div>

        <div class="mt-3 rounded-2xl bg-black/35 border border-white/10 p-3 text-[12px] text-white/70">
          هذه السلايد بتعمل “تخفيف وزن” دوري: logs/records/temps… والنتيجة بتكون سرعة + مساحة.
        </div>
      </div>

      {{-- (10) Diagnostics (important from me) --}}
      <div class="slide hidden" data-step="10">
        <div class="flex items-center justify-between">
          <div class="text-[11px] text-white/60 font-extrabold">الخطوة 10/10</div>
          <div class="text-[11px] text-white/60">🧠 Diagnostics (مهم جدًا)</div>
        </div>

        <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <button class="maint-btn px-4 py-3 rounded-2xl bg-cyan-500/12 hover:bg-cyan-500/16 border border-cyan-400/20 text-cyan-100 font-extrabold transition"
                  data-action="db_big_tables_top20">
            Top 20 Big Tables
            <div class="text-[11px] font-medium text-cyan-100/80 mt-1">أكبر 20 جدول بالحجم</div>
          </button>

          <button class="maint-btn px-4 py-3 rounded-2xl bg-indigo-500/12 hover:bg-indigo-500/16 border border-indigo-400/20 text-indigo-100 font-extrabold transition"
                  data-action="failed_jobs_report">
            failed_jobs report
            <div class="text-[11px] font-medium text-indigo-100/80 mt-1">count + last failed</div>
          </button>

          <button class="maint-btn px-4 py-3 rounded-2xl bg-amber-500/12 hover:bg-amber-500/16 border border-amber-400/20 text-amber-100 font-extrabold transition"
                  data-action="cache_dirs_report">
            Cache dirs report
            <div class="text-[11px] font-medium text-amber-100/80 mt-1">حجم views/cache/sessions</div>
          </button>
        </div>

        <div class="mt-3 rounded-2xl bg-black/35 border border-white/10 p-3 text-[12px] text-white/70">
          هاي السلايد بتعطيك “وين المشكلة غالبًا”: جداول ضخمة / كاش متضخم / failed jobs متراكمة.
        </div>
      </div>

      {{-- NAV --}}
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 pt-4 border-t border-white/10">
        <button type="button" id="prevBtn"
                class="px-5 py-2.5 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/15
                       text-white/90 text-sm font-extrabold transition disabled:opacity-40 disabled:cursor-not-allowed">
          <i class="fa-solid fa-arrow-right ms-2 text-[12px]"></i>
          السابق
        </button>

        <div class="flex flex-col sm:flex-row-reverse gap-2 w-full sm:w-auto">
          <button type="button" id="nextBtn"
                  class="px-5 py-2.5 rounded-2xl bg-sky-500/12 hover:bg-sky-500/16 border border-sky-400/20
                         text-sky-100 text-sm font-extrabold transition">
            التالي
            <i class="fa-solid fa-arrow-left ms-2 text-[12px]"></i>
          </button>

          <a href="#" id="jumpToOut"
             class="px-5 py-2.5 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/15
                    text-white/90 text-sm font-extrabold transition text-center">
            مشاهدة المخرجات
          </a>
        </div>
      </div>

    </div>
  </section>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', ()=>{

  const out = document.getElementById('maint-out');
  const outClear = document.getElementById('outClear');
  const jumpToOut = document.getElementById('jumpToOut');

  // ===== Slides + Progress =====
  const slides = Array.from(document.querySelectorAll('.slide'));
  const totalSteps = slides.length;
  let currentStep = 1;

  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');

  const progressBar = document.getElementById('progressBar');
  const stepLabel = document.getElementById('stepLabel');
  const percentLabel = document.getElementById('percentLabel');
  const stepDots = Array.from(document.querySelectorAll('.stepDot'));

  const titles = {
    1:'فحص سريع',
    2:'تنظيف Laravel',
    3:'تسريع Laravel',
    4:'DB',
    5:'Queue',
    6:'تنظيف شامل',
    7:'الجداول (تحديد/حجم)',
    8:'AI Tables',
    9:'Retention',
    10:'Diagnostics'
  };

  function markDots() {
    stepDots.forEach((b, idx) => {
      const n = idx + 1;
      const active = n <= currentStep;
      b.classList.toggle('bg-sky-500/15', active);
      b.classList.toggle('border-sky-400/25', active);
      b.classList.toggle('text-sky-100', active);
      b.classList.toggle('bg-white/5', !active);
      b.classList.toggle('border-white/10', !active);
      b.classList.toggle('text-white/70', !active);
    });
  }

  function showStep(step) {
    currentStep = Math.min(Math.max(step, 1), totalSteps);
    slides.forEach(s => s.classList.toggle('hidden', Number(s.dataset.step) !== currentStep));

    const pct = Math.round(((currentStep - 1) / (totalSteps - 1)) * 100);
    progressBar.style.width = pct + '%';
    percentLabel.textContent = pct + '%';
    stepLabel.textContent = `الخطوة ${currentStep}/${totalSteps} — ${titles[currentStep] || ''}`;

    prevBtn.disabled = currentStep === 1;
    nextBtn.disabled = currentStep === totalSteps;

    markDots();
  }

  prevBtn?.addEventListener('click', () => showStep(currentStep - 1));
  nextBtn?.addEventListener('click', () => showStep(currentStep + 1));
  stepDots.forEach(btn => btn.addEventListener('click', () => showStep(Number(btn.dataset.stepJump || 1))));
  showStep(1);

  // ===== Output helpers =====
  outClear?.addEventListener('click', ()=>{
    out.innerHTML = '<span class="text-white/45">تم تنظيف الشاشة…</span>';
  });

  jumpToOut?.addEventListener('click', (e)=>{
    e.preventDefault();
    out.scrollIntoView({behavior:'smooth', block:'start'});
  });

  // ===== Runner =====
  function run(action, extra = {}, options = {}) {
    if (!/^[a-z0-9_]+$/i.test(action)) return;

    if (action === 'queue_flush_confirmed') {
      if (!confirm('⚠️ خطر: هذا سيمسح كل Jobs من الطابور. متأكد؟')) return;
      if (!confirm('تأكيد ثاني: هل تريد فعلًا مسح الطابور بالكامل؟')) return;
    } else if (!options.skipConfirm) {
      if (!confirm('تأكيد التنفيذ: ' + action + ' ؟')) return;
    }

    out.innerHTML = `<div class="text-white/70"><i class="fa-solid fa-spinner fa-spin"></i> جارِ التنفيذ: <b>${action}</b> ...</div>`;

    return fetch("{{ route('superadmin.falcon-room.maintenance.run') }}", {
      method:'POST',
      headers:{
        'X-CSRF-TOKEN':'{{ csrf_token() }}',
        'Accept':'application/json',
        'Content-Type':'application/json'
      },
      body: JSON.stringify(Object.assign({action}, extra))
    }).then(r=>r.json()).then(d=>{
      if(d.ok){
        // لو في data (JSON) — رجعه للـ caller
        if (d.data) return d;
        out.innerHTML = '<pre class="whitespace-pre-wrap">'+ (d.output || d.message) +'</pre>';
        return d;
      }else{
        out.innerHTML = '<div class="text-rose-200 font-extrabold">'+ (d.message||'فشل التنفيذ') +'</div>';
        return d;
      }
    }).catch(()=>{
      out.innerHTML = '<div class="text-rose-200 font-extrabold">فشل الطلب</div>';
      return null;
    });
  }

  // Buttons
  document.querySelectorAll('.maint-btn').forEach(btn=>{
    btn.addEventListener('click', ()=> run(btn.getAttribute('data-action') || btn.dataset.action || ''));
  });

  // ===== (Slide 7) Tables interactive =====
  const btnLoadTables        = document.getElementById('btnLoadTables');
  const btnSelectAllTables   = document.getElementById('btnSelectAllTables');
  const btnSelectNoneTables  = document.getElementById('btnSelectNoneTables');
  const btnOptimizeSelected  = document.getElementById('btnOptimizeSelected');
  const btnAnalyzeSelected   = document.getElementById('btnAnalyzeSelected');
  const btnTablesUsageReport = document.getElementById('btnTablesUsageReport');
  const tablesBody           = document.getElementById('tablesBody');
  const tablesMeta           = document.getElementById('tablesMeta');

  let tablesCache = []; // [{name, rows, data_bytes, index_bytes, total_bytes, engine}]

  function formatBytes(n){
    n = Number(n||0);
    const u=['B','KB','MB','GB','TB'];
    let i=0;
    while(n>=1024 && i<u.length-1){ n/=1024; i++; }
    return (i? n.toFixed(2): Math.round(n))+' '+u[i];
  }

  function renderTables(list){
    tablesCache = Array.isArray(list) ? list : [];
    if (!tablesCache.length){
      tablesBody.innerHTML = `<tr><td class="p-4 text-white/55" colspan="7">لا توجد بيانات.</td></tr>`;
      tablesMeta.textContent = '0 جدول';
      return;
    }
    tablesMeta.textContent = `${tablesCache.length} جدول`;
    tablesBody.innerHTML = tablesCache.map(t => `
      <tr class="text-right">
        <td class="p-2.5">
          <input type="checkbox" class="tblChk w-5 h-5 rounded border-white/20 bg-black/40 text-emerald-400 focus:ring-emerald-500/40"
                 data-name="${t.name}">
        </td>
        <td class="p-2.5 font-extrabold text-white/90">${t.name}</td>
        <td class="p-2.5 text-white/70">${t.rows ?? 0}</td>
        <td class="p-2.5 text-white/70">${formatBytes(t.data_bytes)}</td>
        <td class="p-2.5 text-white/70">${formatBytes(t.index_bytes)}</td>
        <td class="p-2.5 font-extrabold text-emerald-200">${formatBytes(t.total_bytes)}</td>
        <td class="p-2.5 text-white/60">${t.engine ?? ''}</td>
      </tr>
    `).join('');
  }

  function selectedTables(){
    return Array.from(document.querySelectorAll('.tblChk:checked')).map(x => x.dataset.name).filter(Boolean);
  }

  btnLoadTables?.addEventListener('click', async ()=>{
    const res = await run('tables_report', {}, {skipConfirm:true});
    if(res?.ok && res.data?.tables){
      renderTables(res.data.tables);
      out.innerHTML = `<pre class="whitespace-pre-wrap">تم تحميل تقرير الجداول.\n- جداول: ${res.data.tables.length}\n- إجمالي الحجم: ${formatBytes(res.data.total_bytes||0)}</pre>`;
    }
  });

  btnSelectAllTables?.addEventListener('click', ()=>{
    document.querySelectorAll('.tblChk').forEach(c=>c.checked=true);
  });

  btnSelectNoneTables?.addEventListener('click', ()=>{
    document.querySelectorAll('.tblChk').forEach(c=>c.checked=false);
  });

  btnOptimizeSelected?.addEventListener('click', async ()=>{
    const tbls = selectedTables();
    if(!tbls.length){ alert('اختر جداول أولاً'); return; }
    const res = await run('tables_optimize', {tables: tbls, mode:'optimize'}, {skipConfirm:false});
    if(res?.ok) out.scrollIntoView({behavior:'smooth', block:'start'});
  });

  btnAnalyzeSelected?.addEventListener('click', async ()=>{
    const tbls = selectedTables();
    if(!tbls.length){ alert('اختر جداول أولاً'); return; }
    const res = await run('tables_optimize', {tables: tbls, mode:'analyze'}, {skipConfirm:false});
    if(res?.ok) out.scrollIntoView({behavior:'smooth', block:'start'});
  });

  btnTablesUsageReport?.addEventListener('click', async ()=>{
    const res = await run('tables_usage_report', {}, {skipConfirm:true});
    if(res?.ok) out.scrollIntoView({behavior:'smooth', block:'start'});
  });

  // Audit prune (existing form on step 6)
  const auditForm = document.getElementById('audit-prune-form');
  if (auditForm) {
    auditForm.addEventListener('submit', function(e){
      e.preventDefault();
      const limit     = this.limit.value;
      const direction = this.direction.value;

      let msg;
      if (limit === 'all') msg = 'حذف جميع سجلات عمليات الإدارة بالكامل!';
      else msg = 'حذف ' + limit + ' سجل من ' + (direction === 'oldest' ? 'أقدم السجلات' : 'أحدث السجلات');

      if (!confirm('⚠️ تأكيد نهائي:\n' + msg + '\nهذه العملية لا يمكن التراجع عنها.')) return;

      run('prune_admin_audit_logs', {limit, direction}, {skipConfirm: true});
    });
  }

});
</script>
@endpush