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

@section('content')

{{-- KPI ROW --}}
<div class="kpi-grid kpi-grid-4" style="margin-bottom:24px">
  <div class="kpi green">
    <div class="kpi-label">Revenue This Month</div>
    <div class="kpi-value">${{ number_format($pnlSummary['revenue'], 2) }}</div>
    <div class="kpi-sub">Confirmed & delivered orders</div>
  </div>
  <div class="kpi {{ $pnlSummary['grossProfit'] >= 0 ? 'green' : 'red' }}">
    <div class="kpi-label">Gross Profit</div>
    <div class="kpi-value">${{ number_format($pnlSummary['grossProfit'], 2) }}</div>
    <div class="kpi-sub">{{ $pnlSummary['margin'] }}% margin</div>
  </div>
  <div class="kpi amber">
    <div class="kpi-label">Low Stock SKUs</div>
    <div class="kpi-value">{{ $invSummary['low_stock'] + $invSummary['out_of_stock'] }}</div>
    <div class="kpi-sub">{{ $invSummary['out_of_stock'] }} out of stock</div>
  </div>
  <div class="kpi">
    <div class="kpi-label">Total SKUs</div>
    <div class="kpi-value">{{ $invSummary['total'] }}</div>
    <div class="kpi-sub">{{ $invSummary['in_stock'] }} healthy stock</div>
  </div>
</div>

{{-- ALERTS --}}
@if($outOfStockProducts->isNotEmpty())
  <div class="alert red" style="margin-bottom:16px">
    🚨 <div>
      <strong>{{ $outOfStockProducts->count() }} product(s) are out of stock:</strong>
      {{ $outOfStockProducts->map(fn($p) => $p->emoji.' '.$p->name)->join(', ') }}
      <a href="{{ route('admin.inventory.index', ['filter' => 'out']) }}" style="margin-left:8px;font-weight:700;text-decoration:underline">View →</a>
    </div>
  </div>
@endif
@if($lowStockProducts->isNotEmpty())
  <div class="alert amber" style="margin-bottom:24px">
    ⚠️ <div>
      <strong>{{ $lowStockProducts->count() }} product(s) are running low:</strong>
      {{ $lowStockProducts->map(fn($p) => $p->emoji.' '.$p->name.' ('.$p->stock.')')->join(', ') }}
      <a href="{{ route('admin.inventory.index', ['filter' => 'low']) }}" style="margin-left:8px;font-weight:700;text-decoration:underline">View →</a>
    </div>
  </div>
@endif

<div class="grid2">

  {{-- RECENT ORDERS --}}
  <div class="card">
    <div class="card-title" style="justify-content:space-between">
      <span>📦 Recent Orders</span>
      <a href="{{ route('admin.orders.index') }}" class="btn btn-ghost btn-sm">View All</a>
    </div>

    @if($recentOrders->isEmpty())
      <p style="color:var(--ink2);text-align:center;padding:32px 0">No orders yet.</p>
    @else
      <table>
        <thead>
          <tr>
            <th>Ref</th>
            <th>Customer</th>
            <th>Total</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @foreach($recentOrders as $order)
          <tr>
            <td><strong>{{ $order->reference }}</strong></td>
            <td>{{ $order->customer_name }}</td>
            <td>${{ number_format($order->total, 2) }}</td>
            <td><span class="badge {{ $order->status_color }}">{{ ucfirst($order->status) }}</span></td>
          </tr>
          @endforeach
        </tbody>
      </table>
    @endif
  </div>

  {{-- QUICK LINKS --}}
  <div class="card">
    <div class="card-title">🚀 Quick Actions</div>
    <div style="display:flex;flex-direction:column;gap:10px">
      <a href="{{ route('admin.pnl.index') }}" class="btn btn-ghost" style="justify-content:flex-start;padding:12px 16px">
        📊 &nbsp;View Profit & Loss Report
      </a>
      <a href="{{ route('admin.inventory.index') }}" class="btn btn-ghost" style="justify-content:flex-start;padding:12px 16px">
        🗃️ &nbsp;Manage Inventory & Restock
      </a>
      <a href="{{ route('admin.products.create') }}" class="btn btn-ghost" style="justify-content:flex-start;padding:12px 16px">
        ➕ &nbsp;Add New Product
      </a>
      <a href="{{ route('admin.bulk.index') }}" class="btn btn-ghost" style="justify-content:flex-start;padding:12px 16px">
        ⬆️ &nbsp;Bulk Upload Products / Images
      </a>
      <a href="{{ route('admin.orders.index') }}" class="btn btn-ghost" style="justify-content:flex-start;padding:12px 16px">
        📦 &nbsp;Manage Orders
      </a>
      <a href="{{ route('shop.index') }}" class="btn btn-ghost" style="justify-content:flex-start;padding:12px 16px">
        🏪 &nbsp;View Storefront
      </a>
    </div>
  </div>

</div>

@endsection