{{-- resources/views/admin/analytics.blade.php --}}
@extends('layouts.admin')
@section('title','التحليلات')
@section('breadcrumb')<span class="text-gray-900">التحليلات</span>@endsection

@section('content')
<div class="space-y-6">

  <h1 class="text-xl font-bold text-gray-900">تحليلات النظام</h1>

  {{-- Growth Chart --}}
  <div class="bg-white rounded-2xl border border-gray-100 p-5">
    <h3 class="font-semibold text-gray-800 mb-4">نمو الشركات والمستخدمين (آخر 6 أشهر)</h3>
    <canvas id="growthChart" height="120"></canvas>
  </div>

  {{-- Table --}}
  <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
    <div class="p-5 border-b border-gray-50">
      <h3 class="font-semibold text-gray-800">تفاصيل النمو الشهري</h3>
    </div>
    <table class="w-full text-sm">
      <thead class="bg-gray-50 border-b border-gray-100">
        <tr>
          <th class="text-right px-5 py-3 text-gray-500 font-medium">الشهر</th>
          <th class="text-right px-4 py-3 text-gray-500 font-medium">شركات جديدة</th>
          <th class="text-right px-4 py-3 text-gray-500 font-medium">مستخدمون جدد</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-50">
        @foreach($monthlyGrowth as $m)
        <tr class="hover:bg-gray-50/50">
          <td class="px-5 py-3 font-medium text-gray-800">{{ $m['month'] }}</td>
          <td class="px-4 py-3">
            <div class="flex items-center gap-2">
              <div class="bg-blue-100 rounded-full h-1.5 w-24">
                <div class="bg-blue-500 h-1.5 rounded-full" style="width:{{ min(($m['tenants']/max($monthlyGrowth->max('tenants'),1))*100,100) }}%"></div>
              </div>
              <span class="font-medium text-blue-700">{{ $m['tenants'] }}</span>
            </div>
          </td>
          <td class="px-4 py-3">
            <div class="flex items-center gap-2">
              <div class="bg-green-100 rounded-full h-1.5 w-24">
                <div class="bg-green-500 h-1.5 rounded-full" style="width:{{ min(($m['users']/max($monthlyGrowth->max('users'),1))*100,100) }}%"></div>
              </div>
              <span class="font-medium text-green-700">{{ $m['users'] }}</span>
            </div>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

</div>
@endsection

@push('head_scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
@endpush
@push('scripts')
<script>
const data = @json($monthlyGrowth);
new Chart(document.getElementById('growthChart'), {
  type: 'line',
  data: {
    labels: data.map(d=>d.month),
    datasets: [
      { label:'شركات جديدة', data:data.map(d=>d.tenants), borderColor:'#3b82f6', backgroundColor:'rgba(59,130,246,0.08)', tension:0.4, fill:true, pointRadius:4 },
      { label:'مستخدمون جدد', data:data.map(d=>d.users), borderColor:'#10b981', backgroundColor:'rgba(16,185,129,0.08)', tension:0.4, fill:true, pointRadius:4 },
    ]
  },
  options:{
    responsive:true,maintainAspectRatio:false,
    plugins:{legend:{position:'top',labels:{font:{family:'IBM Plex Sans Arabic',size:12}}}},
    scales:{
      y:{beginAtZero:true,grid:{color:'#f1f5f9'},ticks:{font:{family:'IBM Plex Sans Arabic',size:11}}},
      x:{grid:{display:false},ticks:{font:{family:'IBM Plex Sans Arabic',size:11}}}
    }
  }
});
</script>
@endpush