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

@section('content')
@php
  $field = 'h-11 px-3 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500';
  $box = 'rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800';

  $cards = [
    ['Total sales (with VAT)',      'AED ' . number_format($summary->total, 2),    $summary->invoices . ' invoices',        'text-emerald-500'],
    ['VAT collected',               'AED ' . number_format($summary->vat, 2),      'Subtotal ' . number_format($summary->subtotal, 2), 'text-brand-500'],
    ['Gross profit',                'AED ' . number_format($profit, 2),            'VAT chhara, kena dam badh diye',   $profit >= 0 ? 'text-sky-500' : 'text-red-500'],
    ['Due (ei invoice gulor)',      'AED ' . number_format($summary->due, 2),      'Ekhono baki',                      'text-red-500'],
    ['Due collected',               'AED ' . number_format($collected, 2),         'Ei somoy e neya payment',          'text-emerald-500'],
  ];

  $y = now()->format('Y-m-d');
@endphp

<style>
  @media print {
    aside, header, .no-print { display: none !important; }
    main { padding: 0 !important; }
    body { background: #fff !important; }
  }
</style>

{{-- Breadcrumb --}}
<div class="no-print flex items-center gap-2 text-sm text-slate-500">
  <span>Reports</span><span>/</span><span class="text-slate-800 dark:text-slate-200 font-medium">Sales &amp; VAT report</span>
</div>

@if ($errors->any())
  <div class="no-print px-4 py-3 rounded-xl bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/30 text-sm">
    <ul class="list-disc ml-5">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
  </div>
@endif

{{-- Filter --}}
<div class="no-print {{ $box }} p-5 space-y-4">
  <form method="GET" class="flex flex-wrap items-end gap-3">
    <div>
      <label class="block text-xs font-semibold text-slate-500 mb-1.5">From</label>
      <input type="date" name="from" value="{{ $from }}" class="{{ $field }}">
    </div>
    <div>
      <label class="block text-xs font-semibold text-slate-500 mb-1.5">To</label>
      <input type="date" name="to" value="{{ $to }}" class="{{ $field }}">
    </div>
    <button class="h-11 px-6 rounded-xl bg-slate-900 dark:bg-slate-700 text-white text-sm font-semibold hover:opacity-90">Show report</button>
    <button type="button" onclick="window.print()" class="h-11 px-6 rounded-xl bg-gradient-to-r from-brand-500 to-orange-500 text-slate-900 font-bold text-sm shadow-lg shadow-brand-500/25 hover:opacity-90">Print</button>
  </form>

  <div class="flex flex-wrap gap-2">
    <a href="{{ route('admin.reports.index', ['from' => $y, 'to' => $y]) }}" class="h-9 px-4 inline-flex items-center rounded-full border border-slate-300 dark:border-slate-700 text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800">Today</a>
    <a href="{{ route('admin.reports.index', ['from' => now()->startOfMonth()->format('Y-m-d'), 'to' => now()->endOfMonth()->format('Y-m-d')]) }}" class="h-9 px-4 inline-flex items-center rounded-full border border-slate-300 dark:border-slate-700 text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800">This month</a>
    <a href="{{ route('admin.reports.index', ['from' => now()->subMonth()->startOfMonth()->format('Y-m-d'), 'to' => now()->subMonth()->endOfMonth()->format('Y-m-d')]) }}" class="h-9 px-4 inline-flex items-center rounded-full border border-slate-300 dark:border-slate-700 text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800">Last month</a>
    <a href="{{ route('admin.reports.index', ['from' => now()->startOfYear()->format('Y-m-d'), 'to' => now()->endOfYear()->format('Y-m-d')]) }}" class="h-9 px-4 inline-flex items-center rounded-full border border-slate-300 dark:border-slate-700 text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800">This year</a>
  </div>
</div>

<div class="text-sm text-slate-500">
  Report period: <b class="text-slate-800 dark:text-slate-200">{{ \Carbon\Carbon::parse($from)->format('d M Y') }}</b>
  theke <b class="text-slate-800 dark:text-slate-200">{{ \Carbon\Carbon::parse($to)->format('d M Y') }}</b>
</div>

{{-- Summary cards --}}
<div class="grid sm:grid-cols-2 xl:grid-cols-5 gap-5">
  @foreach ($cards as [$label, $value, $note, $color])
    <div class="{{ $box }} p-5">
      <div class="text-sm text-slate-500">{{ $label }}</div>
      <div class="mt-2 text-xl font-extrabold {{ $color }}">{{ $value }}</div>
      <div class="text-xs text-slate-500 mt-1">{{ $note }}</div>
    </div>
  @endforeach
</div>

{{-- Daily chart + table --}}
<div class="grid xl:grid-cols-3 gap-5">
  <div class="xl:col-span-2 {{ $box }} p-6">
    <h2 class="font-bold mb-4">Daily sales</h2>
    @if ($daily->count())
      <div class="h-72"><canvas id="dailyChart"></canvas></div>
    @else
      <div class="py-16 text-center text-slate-500">Ei somoy e kono sale nai.</div>
    @endif
  </div>

  <div class="{{ $box }} overflow-hidden">
    <div class="p-6 pb-3 font-bold">Day by day</div>
    <div class="max-h-80 overflow-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 sticky top-0">
          <tr><th class="px-6 py-2.5">Date</th><th class="text-right">VAT</th><th class="px-6 text-right">Total</th></tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
          @forelse ($daily as $d)
            <tr>
              <td class="px-6 py-2.5">{{ $d->date->format('d M') }} <span class="text-xs text-slate-500">({{ $d->invoices }})</span></td>
              <td class="text-right">{{ number_format($d->vat, 2) }}</td>
              <td class="px-6 text-right font-semibold">{{ number_format($d->total, 2) }}</td>
            </tr>
          @empty
            <tr><td colspan="3" class="px-6 py-8 text-center text-slate-500">Kichu nai.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

{{-- Top products + customer due --}}
<div class="grid xl:grid-cols-2 gap-5">
  <div class="{{ $box }} overflow-hidden">
    <div class="p-6 pb-3 font-bold">Top selling products</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">Product</th><th class="text-right">Qty</th><th class="text-right">Sales</th><th class="px-6 text-right">Profit</th></tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
          @forelse ($topProducts as $t)
            <tr>
              <td class="px-6 py-3"><div class="font-semibold">{{ $t->product_name }}</div><div class="text-xs text-slate-500">{{ $t->product_code }}</div></td>
              <td class="text-right">{{ $t->qty }}</td>
              <td class="text-right">{{ number_format($t->revenue, 2) }}</td>
              <td class="px-6 text-right font-semibold {{ $t->profit >= 0 ? 'text-emerald-500' : 'text-red-500' }}">{{ number_format($t->profit, 2) }}</td>
            </tr>
          @empty
            <tr><td colspan="4" class="px-6 py-10 text-center text-slate-500">Ei somoy e kono product bikri hoyni.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  <div class="{{ $box }} overflow-hidden">
    <div class="p-6 pb-3 font-bold">Customer due <span class="text-sm font-medium text-slate-500">(shob somoyer)</span></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">Customer</th><th>Phone</th><th class="px-6 text-right">Due</th></tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
          @forelse ($dueCustomers as $c)
            <tr>
              <td class="px-6 py-3"><a href="{{ route('admin.customers.show', $c) }}" class="font-semibold hover:text-brand-500">{{ $c->name }}</a></td>
              <td class="text-slate-500">{{ $c->phone ?: '—' }}</td>
              <td class="px-6 text-right font-bold text-red-500">{{ number_format($c->due_total, 2) }}</td>
            </tr>
          @empty
            <tr><td colspan="3" class="px-6 py-10 text-center text-slate-500">Kono customer er due nai.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

{{-- Stock --}}
<div class="{{ $box }} overflow-hidden">
  <div class="p-6 pb-3 font-bold">Stock <span class="text-sm font-medium text-slate-500">(ekhon)</span></div>

  <div class="px-6 pb-4 grid sm:grid-cols-3 gap-5">
    <div class="p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50">
      <div class="text-xs text-slate-500">Stock value (kena dam)</div>
      <div class="mt-1 text-lg font-extrabold">AED {{ number_format($stockCost, 2) }}</div>
    </div>
    <div class="p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50">
      <div class="text-xs text-slate-500">Stock value (becha dam)</div>
      <div class="mt-1 text-lg font-extrabold">AED {{ number_format($stockRetail, 2) }}</div>
    </div>
    <div class="p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50">
      <div class="text-xs text-slate-500">Low stock product</div>
      <div class="mt-1 text-lg font-extrabold {{ $lowStockCount ? 'text-red-500' : 'text-emerald-500' }}">{{ $lowStockCount }}</div>
    </div>
  </div>

  @if ($lowStock->count())
    <div class="overflow-x-auto border-t border-slate-200 dark:border-slate-800">
      <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">Product</th><th>Category</th><th class="text-right">Alert at</th><th class="px-6 text-right">Stock</th></tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
          @foreach ($lowStock as $p)
            <tr>
              <td class="px-6 py-3"><div class="font-semibold">{{ $p->name }}</div><div class="text-xs text-slate-500">{{ $p->code }}</div></td>
              <td>{{ $p->category->name }}</td>
              <td class="text-right">{{ $p->stock_alert }}</td>
              <td class="px-6 text-right"><span class="px-2.5 py-1 rounded-full text-xs font-semibold {{ $p->stock_qty <= 0 ? 'bg-red-500/10 text-red-500' : 'bg-amber-500/10 text-amber-600 dark:text-amber-400' }}">{{ $p->stock_qty }}</span></td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  @endif
</div>
@endsection

@push('scripts')
@if ($daily->count())
<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('dailyChart'), {
    type: 'bar',
    data: {
      labels: @json($daily->map(fn ($d) => $d->date->format('d M'))->values()),
      datasets: [{
        label: 'Sales (AED)',
        data: @json($daily->map(fn ($d) => round((float) $d->total, 2))->values()),
        backgroundColor: '#f59e0b',
        borderRadius: 8,
        maxBarThickness: 36
      }]
    },
    options: {
      maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: {
        x: { grid: { display: false }, ticks: { color: txt } },
        y: { grid: { color: grid }, ticks: { color: txt } }
      }
    }
  });
</script>
@endif
@endpush