@extends('layouts.superadmin')
@section('content')
<div class="p-6 space-y-4">

  <div class="font-extrabold text-xl text-slate-900 dark:text-white">📈 Analytics</div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="lg:col-span-2 rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 p-4 shadow-lg">
      <div class="font-extrabold text-slate-800 dark:text-white mb-2">Signals — آخر 14 يوم</div>
      <div style="height:300px">
        <canvas id="sig14"></canvas>
      </div>
    </div>

    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 p-4 shadow-lg">
      <div class="font-extrabold text-slate-800 dark:text-white mb-2">Top Types</div>
      <div class="space-y-2">
        @foreach($types as $t)
          <div class="flex items-center justify-between p-3 rounded-2xl border border-slate-200/60 dark:border-white/10 bg-slate-50/70 dark:bg-white/5">
            <span class="font-bold text-slate-700 dark:text-white/70">{{ $t->signal_type }}</span>
            <span class="font-extrabold text-cyan-700 dark:text-cyan-200">{{ $t->c }}</span>
          </div>
        @endforeach
      </div>

      <div class="pt-3 mt-3 border-t border-white/10">
        <div class="font-extrabold text-slate-800 dark:text-white mb-2">By Severity</div>
        <div style="height:220px">
          <canvas id="sevPie"></canvas>
        </div>
      </div>
    </div>
  </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const last14 = @json($last14);
  const severity = @json($severity);

  const ctx = document.getElementById('sig14').getContext('2d');
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: last14.map(x => x.d),
      datasets: [{ label: 'Signals', data: last14.map(x => x.c), tension: 0.25 }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: true } },
      scales: { y: { beginAtZero: true } }
    }
  });

  const ctx2 = document.getElementById('sevPie').getContext('2d');
  new Chart(ctx2, {
    type: 'doughnut',
    data: {
      labels: severity.map(x => x.severity),
      datasets: [{ data: severity.map(x => x.c) }]
    },
    options: { responsive: true, maintainAspectRatio: false }
  });
});
</script>
@endpush