@extends('layouts.superadmin')

@section('title','لوحة ذكاء ProActive')
@section('page-title','📊 لوحة ذكاء ProActive — تحليلات ذكية')

@section('content')
@php
    $reportStats = $reportStats ?? [
        'total' => 0,'last7'=>0,'regular'=>0,'plus'=>0,
        'issues'=>0,'progress'=>0,'grades'=>['good'=>0,'very_good'=>0,'excellent'=>0],
    ];
@endphp

<div class="space-y-6">

  {{-- HERO --}}
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-sky-600 via-indigo-700 to-violet-700 text-white p-6 md:p-8">
    <div class="absolute inset-0 opacity-25 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 800 400" fill="none">
        <defs>
          <linearGradient id="piG" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#38BDF8"/>
            <stop offset="100%" stop-color="#A855F7"/>
          </linearGradient>
        </defs>
        <circle cx="120" cy="80" r="160" fill="url(#piG)" />
        <circle cx="700" cy="320" r="220" fill="url(#piG)" opacity="0.7" />
      </svg>
    </div>

    <div class="relative flex flex-col md:flex-row md:items-center md:justify-between gap-6">
      <div class="flex items-start gap-4">
        <div class="w-14 h-14 rounded-2xl bg-white/15 flex items-center justify-center ring-1 ring-white/20">
          <i class="fa-solid fa-chart-line text-2xl"></i>
        </div>
        <div class="space-y-2">
          <h1 class="text-2xl md:text-3xl font-extrabold">
            لوحة ذكاء ProActive — Intelligence Board
          </h1>
          <p class="text-sm md:text-base text-white/80 leading-relaxed">
            هنا تراقِب نشاط تقارير ProActive وتحصل على نظرة ذكية: توزيع المنصّات، التقديرات،
            المشاكل والتقدم، بالإضافة إلى حالة الملاحظات (قبول / رفض / قيد المراجعة) المرتبطة بالبرنامج.
          </p>
          <div class="flex flex-wrap items-center gap-2 text-xs text-white/80">
            <span class="inline-flex items-center gap-1 bg-black/20 px-3 py-1 rounded-full">
              <i class="fa-solid fa-microchip"></i> ذكاء تحليلي
            </span>
            <span class="inline-flex items-center gap-1 bg-black/20 px-3 py-1 rounded-full">
              <i class="fa-solid fa-user-shield"></i> لوحة خاصة للإدارة
            </span>
          </div>
        </div>
      </div>

      <div class="bg-black/20 rounded-2xl p-4 min-w-[230px] max-w-xs space-y-2 text-sm">
        <div class="flex items-center justify-between">
          <span class="text-white/80 text-xs">إجمالي التقارير</span>
          <span class="font-bold text-lg">{{ number_format($reportStats['total']) }}</span>
        </div>
        <div class="flex items-center justify-between text-xs">
          <span class="text-emerald-100">آخر 7 أيام</span>
          <span class="font-semibold text-emerald-200">{{ number_format($reportStats['last7']) }}</span>
        </div>
        <div class="flex items-center justify-between text-xs">
          <span class="text-sky-100">عادية / PLUS</span>
          <span class="font-semibold text-sky-200">
            {{ number_format($reportStats['regular']) }} / {{ number_format($reportStats['plus']) }}
          </span>
        </div>
        <div class="flex items-center justify-between text-xs">
          <span class="text-amber-100">مشاكل / تقدم</span>
          <span class="font-semibold text-amber-200">
            {{ number_format($reportStats['issues']) }} / {{ number_format($reportStats['progress']) }}
          </span>
        </div>
      </div>
    </div>
  </div>

  {{-- كروت سريعة --}}
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
    <div class="rounded-xl border border-sky-100 dark:border-sky-800 bg-sky-50 dark:bg-sky-900/20 p-4">
      <div class="text-xs text-sky-700 dark:text-sky-200 mb-1">إجمالي التقارير</div>
      <div class="text-2xl font-extrabold text-sky-900 dark:text-sky-100">{{ number_format($reportStats['total']) }}</div>
    </div>
    <div class="rounded-xl border border-emerald-100 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-900/20 p-4">
      <div class="text-xs text-emerald-700 dark:text-emerald-200 mb-1">تقارير فيها مشاكل</div>
      <div class="text-2xl font-extrabold text-emerald-900 dark:text-emerald-100">{{ number_format($reportStats['issues']) }}</div>
    </div>
    <div class="rounded-xl border border-amber-100 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-4">
      <div class="text-xs text-amber-700 dark:text-amber-200 mb-1">تقارير فيها تقدم</div>
      <div class="text-2xl font-extrabold text-amber-900 dark:text-amber-100">{{ number_format($reportStats['progress']) }}</div>
    </div>
    <div class="rounded-xl border border-indigo-100 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-900/20 p-4">
      <div class="text-xs text-indigo-700 dark:text-indigo-200 mb-1">توزيع التقديرات</div>
      <div class="mt-1 space-y-1 text-xs text-indigo-900 dark:text-indigo-100">
        <div>جيد: {{ $reportStats['grades']['good'] }}</div>
        <div>جيد جدًا: {{ $reportStats['grades']['very_good'] }}</div>
        <div>ممتاز: {{ $reportStats['grades']['excellent'] }}</div>
      </div>
    </div>
  </div>

  {{-- الرسوم البيانية --}}
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {{-- توزيع المنصّات --}}
    <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 p-4">
      <div class="flex items-center justify-between mb-2">
        <h3 class="font-bold text-gray-800 dark:text-gray-100 text-sm">توزيع التقارير حسب المنصّة</h3>
      </div>
      <canvas id="chartReportsByPlatform" class="w-full h-64"></canvas>
    </div>

    {{-- توزيع التقديرات --}}
    <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 p-4">
      <div class="flex items-center justify-between mb-2">
        <h3 class="font-bold text-gray-800 dark:text-gray-100 text-sm">توزيع التقديرات في تقارير ProActive</h3>
      </div>
      <canvas id="chartGrades" class="w-full h-64"></canvas>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {{-- تقارير آخر 14 يوم --}}
    <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 p-4">
      <div class="flex items-center justify-between mb-2">
        <h3 class="font-bold text-gray-800 dark:text-gray-100 text-sm">عدد التقارير في آخر 14 يوم</h3>
      </div>
      <canvas id="chartReportsLast14" class="w-full h-64"></canvas>
    </div>

    {{-- حالة ملاحظات البرنامج (لو موجودة) --}}
    <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 p-4">
      <div class="flex items-center justify-between mb-2">
        <h3 class="font-bold text-gray-800 dark:text-gray-100 text-sm">حالة ملاحظات البرنامج (قبول / رفض / قيد المراجعة)</h3>
      </div>
      <canvas id="chartNoteStatus" class="w-full h-64"></canvas>
      <p class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
        * في حال لم يكن هناك جدول <code>falcon_rola_notes</code> لن تظهر بيانات فعلية في هذا الرسم.
      </p>
    </div>
  </div>

</div>

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const reportsByPlatform = @json($chartReportsByPlatform);
  const gradesData        = @json($chartGrades);
  const reportsLast14     = @json($chartReportsLast14);
  const noteStatus        = @json($chartNoteStatus);

  const ctxPlat = document.getElementById('chartReportsByPlatform').getContext('2d');
  new Chart(ctxPlat, {
    type: 'pie',
    data: {
      labels: reportsByPlatform.labels,
      datasets: [{
        data: reportsByPlatform.data,
      }]
    },
    options: {
      plugins: { legend: { position: 'bottom' } }
    }
  });

  const ctxGrades = document.getElementById('chartGrades').getContext('2d');
  new Chart(ctxGrades, {
    type: 'bar',
    data: {
      labels: gradesData.labels,
      datasets: [{
        data: gradesData.data,
      }]
    },
    options: {
      plugins: { legend: { display: false } },
      scales: { y: { beginAtZero: true, ticks: { precision:0 } } }
    }
  });

  const ctxLast14 = document.getElementById('chartReportsLast14').getContext('2d');
  new Chart(ctxLast14, {
    type: 'line',
    data: {
      labels: reportsLast14.labels,
      datasets: [{
        data: reportsLast14.data,
        tension: 0.3,
        fill: false,
      }]
    },
    options: {
      plugins: { legend: { display: false } },
      scales: { y: { beginAtZero: true, ticks: { precision:0 } } }
    }
  });

  const ctxNoteStatus = document.getElementById('chartNoteStatus').getContext('2d');
  new Chart(ctxNoteStatus, {
    type: 'doughnut',
    data: {
      labels: noteStatus.labels,
      datasets: [{
        data: noteStatus.data,
      }]
    },
    options: {
      plugins: { legend: { position: 'bottom' } }
    }
  });
</script>
@endsection