<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>لوحة التحكم — Artal CRM</title>
  <link rel="icon" type="image/png" href="/images/icon.png">
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Inter', sans-serif; background: #f0f4f8; }
    h1,h2,h3 { font-family: 'Manrope', sans-serif; }
    .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
  </style>
</head>
<body class="text-[#191c1e]">
<%- include('partials/sidebar', { currentPage: 'dashboard' }) %>

<div class="lg:mr-64 min-h-screen pt-14 lg:pt-0">
  <!-- Top bar -->
  <header class="bg-white border-b border-[#eceef0] px-4 lg:px-8 py-4 flex items-center justify-between sticky top-14 lg:top-0 z-30">
    <div>
      <h1 class="text-xl font-bold text-[#1a3c6e]">لوحة التحكم</h1>
      <p class="text-xs text-[#43474f] mt-0.5">مرحباً <%= locals.adminName %> — نظرة عامة على مسار صفقات المبيعات</p>
    </div>
    <a href="/admin/clients/new"
       class="bg-[#1a3c6e] text-white text-sm font-medium px-5 py-2.5 rounded-xl flex items-center gap-2 hover:bg-[#0f2847] transition-colors">
      <span class="material-symbols-outlined text-base">person_add</span>
      عميل جديد
    </a>
  </header>

  <main class="p-4 lg:p-8 space-y-6">

    <!-- ═════ Welcome / Onboarding (للعملاء الجدد فقط) ═════ -->
    <% if (stats.total === 0) { %>
    <div class="relative overflow-hidden bg-gradient-to-br from-[#1a3c6e] via-[#2a4d80] to-[#4f6bed] text-white rounded-3xl p-6 lg:p-8 shadow-xl">
      <div class="absolute -top-20 -left-20 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>

      <div class="relative grid grid-cols-1 lg:grid-cols-3 gap-6 items-center">
        <div class="lg:col-span-2">
          <div class="flex items-center gap-2 mb-3">
            <span class="bg-white/20 backdrop-blur text-xs font-semibold px-3 py-1 rounded-full">🎉 أهلاً وسهلاً</span>
          </div>
          <h2 class="text-2xl lg:text-3xl font-extrabold mb-2">مرحباً <%= locals.adminName %>!</h2>
          <p class="text-white/90 text-sm lg:text-base mb-5">حسابك جاهز ويعمل. اتبع الخطوات التالية لتبدأ بإدارة عملائك بكفاءة.</p>

          <!-- Quick steps -->
          <div class="space-y-2.5">
            <a href="/admin/clients/new" class="group flex items-center gap-3 bg-white/10 hover:bg-white/20 backdrop-blur rounded-xl px-4 py-3 transition-colors">
              <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                <span class="text-sm font-bold">1</span>
              </div>
              <div class="flex-1 min-w-0">
                <div class="font-semibold text-sm">أضف أول عميل</div>
                <div class="text-xs text-white/70">اختر موقعه على الخريطة بدقة</div>
              </div>
              <span class="material-symbols-outlined text-base opacity-50 group-hover:opacity-100 group-hover:translate-x-[-4px] transition-all">arrow_back</span>
            </a>

            <div class="flex items-center gap-3 bg-white/5 rounded-xl px-4 py-3 opacity-60">
              <div class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0">
                <span class="text-sm font-bold">2</span>
              </div>
              <div class="flex-1 min-w-0">
                <div class="font-semibold text-sm">سجّل نشاطاً (اتصال/زيارة)</div>
                <div class="text-xs text-white/70">يتفعّل بعد إضافة عميل</div>
              </div>
            </div>

            <div class="flex items-center gap-3 bg-white/5 rounded-xl px-4 py-3 opacity-60">
              <div class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0">
                <span class="text-sm font-bold">3</span>
              </div>
              <div class="flex-1 min-w-0">
                <div class="font-semibold text-sm">استكشف الخريطة والـ Pipeline</div>
                <div class="text-xs text-white/70">رؤية شاملة لمسار صفقاتك</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Sample data option (للمدير فقط) -->
        <% if (isManager) { %>
        <div class="bg-white/10 backdrop-blur border border-white/20 rounded-2xl p-5">
          <div class="flex items-center gap-2 mb-2">
            <span class="material-symbols-outlined text-yellow-300" style="font-variation-settings:'FILL' 1">science</span>
            <strong class="text-sm">جرّب مع بيانات تجريبية</strong>
          </div>
          <p class="text-xs text-white/80 mb-4">سننشئ 30 عميل تجريبي بأنشطة وزيارات لترى الشكل النهائي قبل إدخال بياناتك الحقيقية.</p>
          <button id="seedDataBtn" class="w-full bg-white text-[#1a3c6e] font-bold text-sm py-2.5 rounded-lg hover:bg-white/90 transition-colors flex items-center justify-center gap-2">
            <span class="material-symbols-outlined text-base">auto_awesome</span>
            إنشاء بيانات تجريبية
          </button>
          <p class="text-[10px] text-white/60 text-center mt-2">يمكنك حذفها لاحقاً من الإعدادات</p>
        </div>
        <% } %>
      </div>
    </div>

    <script>
      document.getElementById('seedDataBtn')?.addEventListener('click', async function() {
        if (!confirm('سيتم إنشاء 30 عميل تجريبي مع أنشطة وزيارات. متابعة؟')) return;
        this.disabled = true;
        this.innerHTML = '<span class="material-symbols-outlined text-base animate-spin">progress_activity</span> جاري الإنشاء...';
        try {
          const r = await fetch('/admin/seed-data', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ count: 30 })
          });
          const d = await r.json();
          if (d.ok) {
            location.reload();
          } else {
            toast.error(d.error || 'فشل إنشاء البيانات');
            this.disabled = false;
            this.innerHTML = '<span class="material-symbols-outlined text-base">auto_awesome</span> إنشاء بيانات تجريبية';
          }
        } catch (e) {
          toast.error('خطأ في الاتصال');
          this.disabled = false;
        }
      });
    </script>
    <% } %>

    <!-- Pipeline Stage Cards -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-3">
      <%
        const stageCards = [
          { key: 'lead',        label: 'عميل محتمل', colorBg: 'bg-gray-100',   colorText: 'text-gray-700',   colorDot: 'bg-gray-400',   icon: 'person_add' },
          { key: 'contacted',   label: 'تم التواصل', colorBg: 'bg-blue-100',   colorText: 'text-blue-700',   colorDot: 'bg-blue-400',   icon: 'phone' },
          { key: 'visited',     label: 'تمت الزيارة', colorBg: 'bg-purple-100', colorText: 'text-purple-700', colorDot: 'bg-purple-400', icon: 'handshake' },
          { key: 'proposal',    label: 'عرض سعر',    colorBg: 'bg-orange-100', colorText: 'text-orange-700', colorDot: 'bg-orange-400', icon: 'description' },
          { key: 'negotiation', label: 'تفاوض',       colorBg: 'bg-yellow-100', colorText: 'text-yellow-700', colorDot: 'bg-yellow-400', icon: 'balance' },
          { key: 'closed_won',  label: 'مكتسب',      colorBg: 'bg-green-100',  colorText: 'text-green-700',  colorDot: 'bg-green-500',  icon: 'verified' },
          { key: 'closed_lost', label: 'خسارة',       colorBg: 'bg-red-100',    colorText: 'text-red-700',    colorDot: 'bg-red-400',    icon: 'cancel' },
        ];
      %>
      <% stageCards.forEach(sc => { %>
      <a href="/admin/clients?stage=<%= sc.key %>"
         class="bg-white rounded-2xl p-4 hover:shadow-md transition-shadow border border-transparent hover:border-gray-100">
        <div class="flex items-center gap-2 mb-2">
          <span class="<%= sc.colorDot %> w-2 h-2 rounded-full flex-shrink-0"></span>
          <span class="text-xs text-[#43474f] truncate"><%= sc.label %></span>
        </div>
        <div class="text-2xl font-extrabold text-[#1a3c6e]"><%= stats[sc.key] || 0 %></div>
        <div class="text-xs text-[#8a9099] mt-0.5">عميل</div>
      </a>
      <% }) %>
    </div>

    <!-- ─── هدفي الشهري — يُعرض دائماً (للجميع) مع إمكانية التعديل ──────── -->
    <%
      const _monthLabel = new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' });
      const _valPct = myTarget.won_value > 0 ? Math.min(100, Math.round(myTarget.actual_won_value / myTarget.won_value * 100)) : 0;
      const _actPct = myTarget.activities > 0 ? Math.min(100, Math.round(myTarget.actual_activities / myTarget.activities * 100)) : 0;
    %>
    <div class="bg-white rounded-2xl p-5 border-r-4 border-[#10b981]">
      <div class="flex items-center justify-between mb-4">
        <h2 class="font-bold text-sm text-[#1a3c6e] flex items-center gap-2">
          <span class="material-symbols-outlined text-base text-[#10b981]">flag</span>
          هدفي الشهري — <%= _monthLabel %>
        </h2>
        <% if (myTarget.has_target) { %>
        <button onclick="openTargetModal(<%= myTarget.user_id %>, '<%= myTarget.user_name.replace(/'/g,"\\\'") %>', <%= myTarget.won_value %>, <%= myTarget.activities %>)"
                class="text-xs text-[#1a3c6e] hover:text-[#0f2847] flex items-center gap-1">
          <span class="material-symbols-outlined text-sm">edit</span>تعديل
        </button>
        <% } %>
      </div>

      <% if (!myTarget.has_target) { %>
        <!-- لا يوجد هدف محدد — زر CTA -->
        <div class="text-center py-6">
          <span class="material-symbols-outlined text-4xl text-gray-200 block mb-2">flag</span>
          <p class="text-sm text-[#43474f] mb-3">لم تحدّد هدفاً لهذا الشهر بعد</p>
          <button onclick="openTargetModal(<%= myTarget.user_id %>, '<%= myTarget.user_name.replace(/'/g,"\\\'") %>', 0, 0)"
                  class="bg-[#10b981] hover:bg-[#059669] text-white text-sm font-medium px-5 py-2 rounded-xl inline-flex items-center gap-1.5 transition-colors">
            <span class="material-symbols-outlined text-base">add_circle</span>
            حدّد هدفي الشهري
          </button>
          <p class="text-[10px] text-[#8a9099] mt-3">
            الإنجاز الحالي: <%= myTarget.actual_won_value.toLocaleString('ar-SA', {maximumFractionDigits:0}) %> ر.س · <%= myTarget.actual_activities %> نشاط
          </p>
        </div>
      <% } else { %>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

        <% if (myTarget.won_value > 0) { %>
        <div>
          <div class="flex items-center justify-between text-xs mb-1.5">
            <span class="text-[#43474f]">قيمة الصفقات المكتسبة</span>
            <span class="font-bold text-[#1a3c6e]"><%= _valPct %>%</span>
          </div>
          <div class="h-3 bg-[#f0f4f8] rounded-full overflow-hidden">
            <div class="h-3 rounded-full transition-all"
                 style="width:<%= _valPct %>%; background:<%= _valPct >= 100 ? '#10b981' : _valPct >= 60 ? '#3b82f6' : '#eab308' %>"></div>
          </div>
          <div class="flex items-center justify-between text-xs mt-1.5">
            <span class="text-[#8a9099]"><%= myTarget.actual_won_value.toLocaleString('ar-SA', {maximumFractionDigits:0}) %> ر.س</span>
            <span class="text-[#8a9099]">من <%= myTarget.won_value.toLocaleString('ar-SA', {maximumFractionDigits:0}) %> ر.س</span>
          </div>
        </div>
        <% } %>

        <% if (myTarget.activities > 0) { %>
        <div>
          <div class="flex items-center justify-between text-xs mb-1.5">
            <span class="text-[#43474f]">عدد الأنشطة</span>
            <span class="font-bold text-[#1a3c6e]"><%= _actPct %>%</span>
          </div>
          <div class="h-3 bg-[#f0f4f8] rounded-full overflow-hidden">
            <div class="h-3 rounded-full transition-all"
                 style="width:<%= _actPct %>%; background:<%= _actPct >= 100 ? '#10b981' : _actPct >= 60 ? '#3b82f6' : '#eab308' %>"></div>
          </div>
          <div class="flex items-center justify-between text-xs mt-1.5">
            <span class="text-[#8a9099]"><%= myTarget.actual_activities %> نشاط</span>
            <span class="text-[#8a9099]">من <%= myTarget.activities %> نشاط</span>
          </div>
        </div>
        <% } %>

      </div>
      <% } %>
    </div>

    <!-- ─── يومي: خطة اليوم + إنجازي اليوم ────────────────────────────── -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

      <!-- My today achievements -->
      <div class="bg-gradient-to-br from-[#1a3c6e] to-[#0f2847] text-white rounded-2xl p-5">
        <div class="flex items-center justify-between mb-3">
          <h2 class="font-bold text-sm flex items-center gap-2">
            <span class="material-symbols-outlined text-base">today</span>
            إنجازي اليوم
          </h2>
          <span class="text-[10px] bg-white/15 px-2 py-0.5 rounded-full"><%= new Date().toLocaleDateString('ar-SA') %></span>
        </div>
        <div class="grid grid-cols-2 gap-3">
          <div class="bg-white/10 rounded-xl p-3 text-center">
            <div class="text-2xl font-extrabold"><%= myTodayStats.activities %></div>
            <div class="text-[11px] text-white/70 mt-0.5">نشاط</div>
          </div>
          <div class="bg-white/10 rounded-xl p-3 text-center">
            <div class="text-2xl font-extrabold"><%= myTodayStats.visits %></div>
            <div class="text-[11px] text-white/70 mt-0.5">زيارة</div>
          </div>
          <div class="bg-white/10 rounded-xl p-3 text-center">
            <div class="text-2xl font-extrabold"><%= myTodayStats.calls %></div>
            <div class="text-[11px] text-white/70 mt-0.5">مكالمة</div>
          </div>
          <div class="bg-white/10 rounded-xl p-3 text-center">
            <div class="text-2xl font-extrabold"><%= myTodayStats.messages %></div>
            <div class="text-[11px] text-white/70 mt-0.5">رسالة</div>
          </div>
        </div>
      </div>

      <!-- Today's visits -->
      <div class="bg-white rounded-2xl p-5">
        <div class="flex items-center justify-between mb-3">
          <h2 class="font-bold text-sm text-[#1a3c6e] flex items-center gap-2">
            <span class="material-symbols-outlined text-base text-blue-500">event_available</span>
            زيارات اليوم
          </h2>
          <span class="bg-blue-100 text-blue-700 text-xs font-bold px-2 py-0.5 rounded-full"><%= todayVisits.length %></span>
        </div>
        <% if (todayVisits.length === 0) { %>
        <div class="text-center text-[#8a9099] text-xs py-6">
          <span class="material-symbols-outlined text-3xl text-gray-200 block mb-1">event_available</span>
          لا توجد زيارات مجدولة اليوم
        </div>
        <% } else { %>
        <div class="space-y-2 max-h-44 overflow-y-auto">
          <% todayVisits.slice(0,6).forEach(v => { %>
          <a href="/admin/clients/<%= v.id %>" class="flex items-center justify-between p-2 rounded-lg hover:bg-[#f0f4f8] transition-colors">
            <div class="min-w-0">
              <p class="text-xs font-medium text-[#1a3c6e] truncate"><%= v.full_name %></p>
              <% if (v.company) { %><p class="text-[10px] text-[#8a9099] truncate"><%= v.company %></p><% } %>
            </div>
            <a href="tel:<%= v.phone %>" onclick="event.stopPropagation()" class="text-blue-500 hover:text-blue-700 flex-shrink-0 mr-2">
              <span class="material-symbols-outlined text-sm">call</span>
            </a>
          </a>
          <% }) %>
        </div>
        <% } %>
      </div>

      <!-- Today's tasks -->
      <div class="bg-white rounded-2xl p-5">
        <div class="flex items-center justify-between mb-3">
          <h2 class="font-bold text-sm text-[#1a3c6e] flex items-center gap-2">
            <span class="material-symbols-outlined text-base text-orange-500">checklist</span>
            مهام اليوم
          </h2>
          <span class="bg-orange-100 text-orange-700 text-xs font-bold px-2 py-0.5 rounded-full"><%= todayTasks.length %></span>
        </div>
        <% if (todayTasks.length === 0) { %>
        <div class="text-center text-[#8a9099] text-xs py-6">
          <span class="material-symbols-outlined text-3xl text-gray-200 block mb-1">task_alt</span>
          لا توجد مهام لليوم
        </div>
        <% } else { %>
        <div class="space-y-2 max-h-44 overflow-y-auto">
          <% todayTasks.slice(0,6).forEach(t => { %>
          <div class="flex items-start gap-2 p-2 rounded-lg hover:bg-[#f0f4f8] transition-colors">
            <span class="material-symbols-outlined text-sm text-[#43474f] mt-0.5">radio_button_unchecked</span>
            <div class="flex-1 min-w-0">
              <p class="text-xs font-medium text-[#1a3c6e] truncate"><%= t.title %></p>
              <% if (t.client_name) { %>
              <a href="/admin/clients/<%= t.client_id %>" class="text-[10px] text-[#8a9099] hover:text-[#1a3c6e]"><%= t.client_name %></a>
              <% } %>
            </div>
          </div>
          <% }) %>
        </div>
        <% } %>
      </div>

    </div>

    <!-- Summary & value row -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div class="bg-[#1a3c6e] text-white rounded-2xl p-5">
        <div class="flex items-center gap-3 mb-2">
          <span class="material-symbols-outlined text-xl" style="font-variation-settings:'FILL' 1">groups</span>
          <span class="text-sm text-white/80">إجمالي العملاء</span>
        </div>
        <div class="text-3xl font-extrabold"><%= stats.total %></div>
      </div>
      <div class="bg-white rounded-2xl p-5">
        <div class="flex items-center gap-3 mb-2">
          <span class="material-symbols-outlined text-xl text-[#10b981]" style="font-variation-settings:'FILL' 1">attach_money</span>
          <span class="text-sm text-[#43474f]">قيمة الصفقات النشطة</span>
        </div>
        <div class="text-2xl font-extrabold text-[#10b981]">
          <%= stats.pipeline_value > 0 ? stats.pipeline_value.toLocaleString('ar-SA', {maximumFractionDigits:0}) + ' ر.س' : '—' %>
        </div>
      </div>
      <div class="bg-white rounded-2xl p-5">
        <div class="flex items-center gap-3 mb-2">
          <span class="material-symbols-outlined text-xl text-[#1a3c6e]" style="font-variation-settings:'FILL' 1">payments</span>
          <span class="text-sm text-[#43474f]">إجمالي الصفقات المكتسبة</span>
        </div>
        <div class="text-2xl font-extrabold text-[#1a3c6e]">
          <%= stats.total_value > 0 ? stats.total_value.toLocaleString('ar-SA', {maximumFractionDigits:0}) + ' ر.س' : '—' %>
        </div>
      </div>
    </div>

    <!-- Alerts row -->
    <% const hasAlerts = staleClients.length > 0 || upcomingVisits.length > 0 || overdueTasks.length > 0; %>
    <% if (hasAlerts) { %>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

      <!-- Stale clients -->
      <% if (staleClients.length > 0) { %>
      <div class="bg-white rounded-2xl p-5 border-r-4 border-red-400">
        <h3 class="font-bold text-sm text-[#1a3c6e] flex items-center gap-2 mb-3">
          <span class="material-symbols-outlined text-red-400 text-base">warning</span>
          عملاء بدون تواصل (+7 أيام)
          <span class="mr-auto bg-red-100 text-red-700 text-xs font-bold px-2 py-0.5 rounded-full"><%= staleClients.length %></span>
        </h3>
        <div class="space-y-2">
          <% staleClients.forEach(c => { %>
          <div class="flex items-center justify-between">
            <a href="/admin/clients/<%= c.id %>" class="text-sm font-medium text-[#1a3c6e] hover:underline truncate"><%= c.full_name %></a>
            <span class="text-xs text-red-600 font-semibold flex-shrink-0 mr-2"><%= c.days_stale %> يوم</span>
          </div>
          <% }) %>
        </div>
      </div>
      <% } %>

      <!-- Upcoming visits -->
      <% if (upcomingVisits.length > 0) { %>
      <div class="bg-white rounded-2xl p-5 border-r-4 border-blue-400">
        <h3 class="font-bold text-sm text-[#1a3c6e] flex items-center gap-2 mb-3">
          <span class="material-symbols-outlined text-blue-400 text-base">event_available</span>
          زيارات اليوم وغداً
          <span class="mr-auto bg-blue-100 text-blue-700 text-xs font-bold px-2 py-0.5 rounded-full"><%= upcomingVisits.length %></span>
        </h3>
        <div class="space-y-2">
          <% upcomingVisits.forEach(v => { %>
          <div class="flex items-center justify-between">
            <div>
              <a href="/admin/clients/<%= v.id %>" class="text-sm font-medium text-[#1a3c6e] hover:underline"><%= v.full_name %></a>
              <% if (v.company) { %><span class="text-xs text-[#43474f] block"><%= v.company %></span><% } %>
            </div>
            <span class="text-xs text-blue-600 font-semibold flex-shrink-0 mr-2">
              <%= fmtDate(v.next_visit_date) %>
            </span>
          </div>
          <% }) %>
        </div>
      </div>
      <% } %>

      <!-- Overdue tasks -->
      <% if (overdueTasks.length > 0) { %>
      <div class="bg-white rounded-2xl p-5 border-r-4 border-orange-400">
        <h3 class="font-bold text-sm text-[#1a3c6e] flex items-center gap-2 mb-3">
          <span class="material-symbols-outlined text-orange-400 text-base">schedule</span>
          مهام متأخرة
          <span class="mr-auto bg-orange-100 text-orange-700 text-xs font-bold px-2 py-0.5 rounded-full"><%= overdueTasks.length %></span>
        </h3>
        <div class="space-y-2">
          <% overdueTasks.forEach(t => { %>
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-[#1a3c6e] truncate"><%= t.title %></span>
            <span class="text-xs text-orange-600 flex-shrink-0 mr-2"><%= fmtDate(t.due_date) %></span>
          </div>
          <% }) %>
        </div>
        <a href="/admin/tasks?tab=overdue" class="text-xs text-[#1a3c6e] hover:underline mt-2 block">عرض الكل</a>
      </div>
      <% } %>

    </div>
    <% } %>

    <!-- Charts + Recent activities -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

      <!-- Pipeline donut chart -->
      <div class="bg-white rounded-2xl p-6">
        <h2 class="font-bold text-[#1a3c6e] text-base mb-4">توزيع مسار الصفقات</h2>
        <% if (stats.total === 0) { %>
        <div class="text-center text-[#43474f] text-sm py-8">لا توجد بيانات</div>
        <% } else { %>
        <div style="position:relative;height:200px;">
          <canvas id="pipelineChart"></canvas>
        </div>
        <% } %>
      </div>

      <!-- Recent activities — span 2 cols -->
      <div class="lg:col-span-2 bg-white rounded-2xl p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="font-bold text-[#1a3c6e] text-base">آخر الأنشطة</h2>
          <a href="/admin/clients" class="text-xs text-[#1a3c6e] hover:underline">عرض العملاء</a>
        </div>
        <% if (recentActivities.length === 0) { %>
        <div class="text-center text-[#43474f] text-sm py-8">لا توجد أنشطة بعد</div>
        <% } else { %>
        <div class="space-y-3">
          <% const ACT_ICONS = { call:'call', visit:'directions_walk', whatsapp:'chat', email:'mail', meeting:'groups', note:'edit_note', stage_change:'swap_horiz', follow_up:'notifications_active' }; %>
          <% recentActivities.forEach(a => { %>
          <div class="flex items-start gap-3">
            <div class="w-8 h-8 rounded-full bg-[#f0f4f8] flex items-center justify-center flex-shrink-0 mt-0.5">
              <span class="material-symbols-outlined text-[#1a3c6e] text-sm"><%= ACT_ICONS[a.type] || 'circle' %></span>
            </div>
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-2">
                <a href="/admin/clients/<%= a.client_id %>" class="text-sm font-medium text-[#1a3c6e] hover:underline truncate"><%= a.client_name %></a>
                <span class="text-xs text-[#43474f] flex-shrink-0"><%= fmtDateTime(a.created_at) %></span>
              </div>
              <p class="text-xs text-[#43474f] mt-0.5 truncate"><%= a.content %></p>
            </div>
          </div>
          <% }) %>
        </div>
        <% } %>
      </div>
    </div>

    <!-- Rep performance + monthly targets — manager only -->
    <% if (isManager && repPerformance.length > 0) {
         const monthLabel = new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' });
    %>
    <div class="bg-white rounded-2xl p-6">
      <div class="flex items-center justify-between mb-4">
        <h2 class="font-bold text-[#1a3c6e] text-base">أداء المندوبين + الأهداف الشهرية</h2>
        <span class="text-xs text-[#8a9099]"><%= monthLabel %></span>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead>
            <tr class="text-[#43474f] text-xs border-b border-[#f0f1f3]">
              <th class="text-right pb-3 font-semibold">المندوب</th>
              <th class="text-center pb-3 font-semibold">العملاء</th>
              <th class="text-center pb-3 font-semibold">أنشطة 30 يوم</th>
              <th class="text-center pb-3 font-semibold">مكتسبة (شامل)</th>
              <th class="text-right pb-3 font-semibold">هدف الشهر — قيمة</th>
              <th class="text-right pb-3 font-semibold">هدف الشهر — أنشطة</th>
              <th class="text-center pb-3 font-semibold">إجراءات</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-[#f0f1f3]">
            <% repPerformance.forEach(r => {
                 const valT = Number(r.target_won_value) || 0;
                 const actT = Number(r.target_activities) || 0;
                 const valA = Number(r.month_won_value) || 0;
                 const actA = Number(r.month_activities) || 0;
                 const valPct = valT > 0 ? Math.min(100, Math.round(valA / valT * 100)) : 0;
                 const actPct = actT > 0 ? Math.min(100, Math.round(actA / actT * 100)) : 0;
                 const barColor = (p) => p >= 100 ? '#10b981' : p >= 60 ? '#3b82f6' : '#eab308';
            %>
            <tr class="hover:bg-[#f8f9fb]">
              <td class="py-3 font-medium">
                <%= r.full_name || r.username %>
                <% if (r.role === 'manager') { %>
                <span class="text-[10px] bg-yellow-100 text-yellow-800 px-1.5 py-0.5 rounded-full mr-1">مدير بيّاع</span>
                <% } %>
              </td>
              <td class="py-3 text-center"><%= r.client_count %></td>
              <td class="py-3 text-center">
                <span class="bg-blue-100 text-blue-700 text-xs font-bold px-2 py-0.5 rounded-full"><%= r.activity_count %></span>
              </td>
              <td class="py-3 text-center">
                <span class="bg-green-100 text-green-700 text-xs font-bold px-2 py-0.5 rounded-full"><%= r.won_count %></span>
              </td>
              <!-- قيمة هدف -->
              <td class="py-3 min-w-[180px]">
                <% if (valT > 0) { %>
                  <div class="flex items-center justify-between text-[11px] mb-1">
                    <span class="text-[#8a9099]"><%= valA.toLocaleString('ar-SA',{maximumFractionDigits:0}) %> / <%= valT.toLocaleString('ar-SA',{maximumFractionDigits:0}) %></span>
                    <span class="font-bold text-[#1a3c6e]"><%= valPct %>%</span>
                  </div>
                  <div class="h-2 bg-[#f0f4f8] rounded-full overflow-hidden">
                    <div class="h-2 rounded-full" style="width:<%= valPct %>%; background:<%= barColor(valPct) %>"></div>
                  </div>
                <% } else { %>
                  <span class="text-xs text-[#8a9099]">—</span>
                <% } %>
              </td>
              <!-- أنشطة هدف -->
              <td class="py-3 min-w-[180px]">
                <% if (actT > 0) { %>
                  <div class="flex items-center justify-between text-[11px] mb-1">
                    <span class="text-[#8a9099]"><%= actA %> / <%= actT %></span>
                    <span class="font-bold text-[#1a3c6e]"><%= actPct %>%</span>
                  </div>
                  <div class="h-2 bg-[#f0f4f8] rounded-full overflow-hidden">
                    <div class="h-2 rounded-full" style="width:<%= actPct %>%; background:<%= barColor(actPct) %>"></div>
                  </div>
                <% } else { %>
                  <span class="text-xs text-[#8a9099]">—</span>
                <% } %>
              </td>
              <td class="py-3 text-center">
                <button onclick="openTargetModal(<%= r.id %>, '<%= (r.full_name || r.username).replace(/'/g,'\\\'') %>', <%= valT %>, <%= actT %>)"
                        class="text-xs px-3 py-1.5 rounded-lg border border-[#1a3c6e] text-[#1a3c6e] hover:bg-[#1a3c6e] hover:text-white transition-colors">
                  <%= (valT > 0 || actT > 0) ? 'تعديل الهدف' : 'تحديد هدف' %>
                </button>
              </td>
            </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>
    <% } %>

    <!-- ─── Target Modal (متاح للجميع: مدير لأي مندوب، أو موظف لنفسه) ───── -->
    <div id="target-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
      <div class="bg-white rounded-2xl w-full max-w-md shadow-2xl">
        <div class="flex items-center justify-between px-6 pt-5 pb-4 border-b border-[#f0f1f3]">
          <div>
            <h3 class="font-bold text-[#1a3c6e]">هدف الشهر</h3>
            <p class="text-xs text-[#43474f] mt-0.5" id="target-rep-name"></p>
          </div>
          <button onclick="closeTargetModal()" class="text-[#43474f] hover:text-[#1a3c6e]">
            <span class="material-symbols-outlined">close</span>
          </button>
        </div>
        <form id="target-form" class="p-6 space-y-4">
          <input type="hidden" name="user_id" id="target-user-id">
          <div>
            <label class="block text-xs font-semibold text-[#43474f] mb-1.5">قيمة الصفقات المكتسبة المستهدفة (ريال)</label>
            <input type="number" name="target_won_value" id="target-won-value" min="0" step="100"
                   class="w-full border border-[#e0e3e5] rounded-xl px-3 py-2.5 text-sm outline-none focus:border-[#1a3c6e]"
                   placeholder="مثال: 50000">
            <p class="text-[10px] text-[#8a9099] mt-1">اتركه 0 إذا لا تريد هدفاً للقيمة</p>
          </div>
          <div>
            <label class="block text-xs font-semibold text-[#43474f] mb-1.5">عدد الأنشطة المستهدفة</label>
            <input type="number" name="target_activities" id="target-activities" min="0" step="1"
                   class="w-full border border-[#e0e3e5] rounded-xl px-3 py-2.5 text-sm outline-none focus:border-[#1a3c6e]"
                   placeholder="مثال: 80">
            <p class="text-[10px] text-[#8a9099] mt-1">اتركه 0 إذا لا تريد هدفاً لعدد الأنشطة</p>
          </div>
          <div class="flex gap-3 pt-2">
            <button type="button" onclick="closeTargetModal()"
                    class="flex-1 border border-[#e0e3e5] text-[#43474f] rounded-xl py-2.5 text-sm font-medium hover:bg-[#f0f4f8] transition-colors">
              إلغاء
            </button>
            <button type="submit"
                    class="flex-1 bg-[#1a3c6e] text-white rounded-xl py-2.5 text-sm font-medium hover:bg-[#0f2847] transition-colors">
              حفظ الهدف
            </button>
          </div>
        </form>
      </div>
    </div>

    <script>
      function openTargetModal(userId, name, currentVal, currentAct) {
        document.getElementById('target-user-id').value = userId;
        document.getElementById('target-rep-name').textContent = name;
        document.getElementById('target-won-value').value = currentVal || '';
        document.getElementById('target-activities').value = currentAct || '';
        const m = document.getElementById('target-modal');
        m.classList.remove('hidden');
        m.classList.add('flex');
      }
      function closeTargetModal() {
        const m = document.getElementById('target-modal');
        m.classList.add('hidden');
        m.classList.remove('flex');
      }
      document.getElementById('target-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const fd = new FormData(this);
        const data = Object.fromEntries(fd);
        try {
          const r = await fetch('/admin/targets', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
          });
          const d = await r.json();
          if (d.ok) { closeTargetModal(); location.reload(); }
          else toast.error(d.error || 'حدث خطأ');
        } catch { toast.error('خطأ في الاتصال'); }
      });
    </script>

  </main>
</div>

<% if (stats.total > 0) { %>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
(function() {
  const el = document.getElementById('pipelineChart');
  if (!el || typeof Chart === 'undefined') return;
  new Chart(el, {
    type: 'doughnut',
    data: {
      labels: ['عميل محتمل','تم التواصل','تمت الزيارة','عرض سعر','تفاوض','مكتسب','خسارة'],
      datasets: [{
        data: [<%= stats.lead %>,<%= stats.contacted %>,<%= stats.visited %>,<%= stats.proposal %>,<%= stats.negotiation %>,<%= stats.closed_won %>,<%= stats.closed_lost %>],
        backgroundColor: ['#9ca3af','#3b82f6','#8b5cf6','#f97316','#eab308','#10b981','#ef4444'],
        borderWidth: 2,
        borderColor: '#fff',
      }]
    },
    options: {
      responsive: true, maintainAspectRatio: false, cutout: '65%',
      plugins: {
        legend: { position: 'bottom', labels: { font: { size: 11 }, boxWidth: 10, padding: 8 } }
      }
    }
  });
})();
</script>
<% } %>
</body>
</html>
