@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-6">لوحة التحليلات</h1>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
    <form method="GET" class="mb-4 flex items-center gap-3">
        <label class="text-sm">المدة:</label>
        <select name="days" class="form-select">
            <option value="7" {{ ($days ?? 30)==7 ? 'selected' : '' }}>7 أيام</option>
            <option value="30" {{ ($days ?? 30)==30 ? 'selected' : '' }}>30 يومًا</option>
            <option value="90" {{ ($days ?? 30)==90 ? 'selected' : '' }}>90 يومًا</option>
        </select>
        <button class="btn btn-primary">تحديث</button>
        <a class="btn" href="{{ route('admin.analytics.export', ['days' => $days ?? 30]) }}">تصدير CSV</a>
    </form>
        <canvas id="analyticsChart" height="120"></canvas>
    </div>
</div>

@push('head-css')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" defer></script>
@endpush

<script>
document.addEventListener('DOMContentLoaded', function(){
  const ctx = document.getElementById('analyticsChart');
  if(!ctx || typeof Chart === 'undefined') return;
  const data = {
    labels: @json($labels),
    datasets: [
      { label: 'إعجابات', data: @json($series['likes'] ?? []), borderColor: '#3b82f6', backgroundColor: 'rgba(59,130,246,0.2)', tension: 0.3 },
      { label: 'انجذاب', data: @json($series['attractions'] ?? []), borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,0.2)', tension: 0.3 },
      { label: 'اهتمام', data: @json($series['interests'] ?? []), borderColor: '#8b5cf6', backgroundColor: 'rgba(139,92,246,0.2)', tension: 0.3 },
    ]
  };
  new Chart(ctx, {
    type: 'line', data,
    options: { responsive: true, maintainAspectRatio: false,
      plugins: { legend: { position: 'top' } },
      scales: { x: { ticks: { autoSkip: true, maxTicksLimit: 10 } } }
    }
  });
});
</script>
@endsection