@extends('layouts.app')

@section('title', 'Product Report')
@section('page', 'reports')

@section('content')
  @include('reports.partials.header', [
    'title' => 'Product Performance',
    'subtitle' => 'Top selling items from '.$dateFrom.' to '.$dateTo.'.',
  ])

  <div class="product-stats-panel mb-4">
    <div class="row g-3 product-stats product-stats--2 justify-content-start">
      <div class="col-6 col-md-3 product-stat-col">
        <div class="product-kpi product-kpi--primary">
          <span class="product-kpi__icon" aria-hidden="true">
            <span class="product-kpi__glyph"><i class="bi bi-box-seam"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Items Sold</p>
            <p class="product-kpi__value">{{ number_format($totalQty) }}</p>
            <p class="product-kpi__meta">Total quantity</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3 product-stat-col">
        <div class="product-kpi product-kpi--success">
          <span class="product-kpi__icon" aria-hidden="true">
            <span class="product-kpi__glyph"><i class="bi bi-currency-dollar"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Product Revenue</p>
            <p class="product-kpi__value">{{ money($totalRevenue) }}</p>
            <p class="product-kpi__meta">Top {{ $topProducts->count() }} products</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="reports-card">
    <div class="reports-card__head">
      <h2 class="reports-card__title">Top Products</h2>
    </div>
    <div class="table-responsive">
      <table class="table table-sm align-middle mb-0">
        <thead>
          <tr>
            <th>#</th>
            <th>Code</th>
            <th>Product</th>
            <th class="text-end">Qty Sold</th>
            <th class="text-end">Revenue</th>
          </tr>
        </thead>
        <tbody>
          @forelse ($topProducts as $index => $row)
            <tr>
              <td>{{ $index + 1 }}</td>
              <td>{{ $row->product_code ?: '—' }}</td>
              <td class="cell-primary">{{ $row->product_name }}</td>
              <td class="text-end">{{ $row->total_qty }}</td>
              <td class="text-end">{{ money((float) $row->revenue) }}</td>
            </tr>
          @empty
            <tr><td colspan="5" class="text-center text-muted py-4">No product sales in this period.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
  <link href="{{ asset('assets/css/pages/reports.css') }}" rel="stylesheet">
@endpush