@extends('layouts.admin')
@section('title', 'Dashboard')

@php
  $cards = [
    ['Today\'s Sales',     'AED 4,820.00',  '+12% from yesterday', 'text-emerald-500'],
    ['This Month Sales',   'AED 86,450.00', '+8% from last month', 'text-emerald-500'],
    ['Total Due',          'AED 12,300.00', '9 customers pending',  'text-red-500'],
    ['VAT Collected (5%)', 'AED 4,116.00',  'This month',           'text-sky-500'],
  ];
  $months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  $sales  = [42000, 51000, 47000, 62000, 58000, 71000, 69000, 77000, 82000, 86450, 0, 0];
  $top = [
    ['LED Panel Light 18W', 320, 8960],
    ['MCB 32A Single Pole', 210, 4620],
    ['Twin & Earth Cable 2.5mm', 38, 8170],
    ['2-Gang Switch White', 190, 2660],
    ['8-Way Distribution Board', 22, 4070],
  ];
  $invoices = [
    ['INV-1042', 'Al Noor Contracting', 3250.00, 'Paid'],
    ['INV-1041', 'Gulf Star Electric',  5800.50, 'Due'],
    ['INV-1040', 'Walk-in Customer',     420.00, 'Paid'],
    ['INV-1039', 'Emirates Builders',   9120.00, 'Partial'],
    ['INV-1038', 'Walk-in Customer',     185.00, 'Paid'],
  ];
  $badge = [
    'Paid'    => 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
    'Due'     => 'bg-red-500/10 text-red-500',
    'Partial' => 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
  ];
@endphp

@section('content')
  {{-- KPI CARDS --}}
  <div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-5">
    @foreach ($cards as [$label, $value, $note, $color])
      <div class="p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
        <div class="text-sm text-slate-500">{{ $label }}</div>
        <div class="mt-2 text-2xl font-extrabold">{{ $value }}</div>
        <div class="text-xs mt-1 {{ $color }}">{{ $note }}</div>
      </div>
    @endforeach
  </div>

  {{-- CHART + TOP PRODUCTS --}}
  <div class="grid xl:grid-cols-3 gap-5">
    <div class="xl:col-span-2 p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
      <div class="flex items-center justify-between mb-4">
        <h2 class="font-bold">Monthly sales</h2>
        <span class="text-xs px-3 py-1 rounded-full bg-slate-100 dark:bg-slate-800">{{ date('Y') }}</span>
      </div>
      <div class="h-72"><canvas id="salesChart"></canvas></div>
    </div>

    <div class="p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
      <h2 class="font-bold mb-4">Top selling products</h2>
      <div class="space-y-4">
        @foreach ($top as $i => [$name, $qty, $amount])
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-lg bg-brand-500/10 text-brand-600 dark:text-brand-400 grid place-items-center text-sm font-bold">{{ $i + 1 }}</div>
            <div class="flex-1 min-w-0">
              <div class="text-sm font-medium truncate">{{ $name }}</div>
              <div class="text-xs text-slate-500">{{ $qty }} sold</div>
            </div>
            <div class="text-sm font-bold">{{ number_format($amount) }}</div>
          </div>
        @endforeach
      </div>
    </div>
  </div>

  {{-- RECENT INVOICES --}}
  <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden">
    <div class="p-6 pb-3 font-bold">Recent invoices</div>
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="text-left text-xs uppercase text-slate-500 bg-slate-50 dark:bg-slate-800/50">
          <tr>
            <th class="px-6 py-3">Invoice</th>
            <th>Customer</th>
            <th class="text-right">Amount (incl. VAT)</th>
            <th class="px-6 text-right">Status</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
          @foreach ($invoices as [$no, $customer, $amount, $status])
            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
              <td class="px-6 py-3 font-medium">{{ $no }}</td>
              <td>{{ $customer }}</td>
              <td class="text-right font-semibold">AED {{ number_format($amount, 2) }}</td>
              <td class="px-6 text-right"><span class="px-2.5 py-1 rounded-full text-xs font-medium {{ $badge[$status] }}">{{ $status }}</span></td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1"></script>
<script>
  const dark = document.documentElement.classList.contains('dark');
  const grid = dark ? 'rgba(148,163,184,.12)' : 'rgba(100,116,139,.15)';
  const txt  = dark ? '#94a3b8' : '#64748b';

  new Chart(document.getElementById('salesChart'), {
    type: 'bar',
    data: {
      labels: @json($months),
      datasets: [{ label: 'Sales (AED)', data: @json($sales), backgroundColor: '#f59e0b', borderRadius: 8, maxBarThickness: 28 }]
    },
    options: {
      maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: {
        x: { grid: { display: false }, ticks: { color: txt } },
        y: { grid: { color: grid }, ticks: { color: txt } }
      }
    }
  });
</script>
@endpush