@extends('layouts.app')

@section('title', 'Reports')
@section('page', 'reports')

@section('content')
  @include('reports.partials.header', [
    'title' => 'Reports Overview',
    'subtitle' => 'Business summary for '.$dateFrom.' to '.$dateTo.'.',
  ])

  <div class="product-stats-panel mb-4">
    <div class="row g-3 product-stats product-stats--4 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-currency-dollar"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Revenue</p>
            <p class="product-kpi__value">{{ money($revenue) }}</p>
            <p class="product-kpi__meta">{{ $saleCount }} completed sales</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-receipt"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Avg. Ticket</p>
            <p class="product-kpi__value">{{ money($avgTicket) }}</p>
            <p class="product-kpi__meta">Per completed sale</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3 product-stat-col">
        <div class="product-kpi product-kpi--warning">
          <span class="product-kpi__icon" aria-hidden="true">
            <span class="product-kpi__glyph"><i class="bi bi-cart-plus"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Purchases</p>
            <p class="product-kpi__value">{{ money($purchases - $purchaseReturns) }}</p>
            <p class="product-kpi__meta">Net purchase spend</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3 product-stat-col">
        <div class="product-kpi product-kpi--inactive">
          <span class="product-kpi__icon" aria-hidden="true">
            <span class="product-kpi__glyph"><i class="bi bi-graph-up"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Net Profit</p>
            <p class="product-kpi__value {{ $netProfit >= 0 ? 'text-success' : 'text-danger' }}">{{ money($netProfit) }}</p>
            <p class="product-kpi__meta">Revenue − costs</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-lg-6">
      <div class="reports-card">
        <div class="reports-card__head">
          <h2 class="reports-card__title">Payment Methods</h2>
        </div>
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead>
              <tr>
                <th>Method</th>
                <th class="text-end">Sales</th>
                <th class="text-end">Revenue</th>
              </tr>
            </thead>
            <tbody>
              @forelse ($paymentMix as $row)
                <tr>
                  <td>{{ $row->label }}</td>
                  <td class="text-end">{{ $row->sale_count }}</td>
                  <td class="text-end">{{ money((float) $row->revenue) }}</td>
                </tr>
              @empty
                <tr><td colspan="3" class="text-center text-muted py-3">No sales in this period.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="reports-card">
        <div class="reports-card__head">
          <h2 class="reports-card__title">Top Products</h2>
          <a href="{{ route('reports.products', request()->query()) }}" class="btn btn-sm btn-outline-primary">View all</a>
        </div>
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead>
              <tr>
                <th>Product</th>
                <th class="text-end">Qty</th>
                <th class="text-end">Revenue</th>
              </tr>
            </thead>
            <tbody>
              @forelse ($topProducts as $row)
                <tr>
                  <td>{{ $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="3" class="text-center text-muted py-3">No product sales in this period.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="col-12">
      <div class="reports-card">
        <div class="reports-card__head">
          <h2 class="reports-card__title">Quick Links</h2>
        </div>
        <div class="reports-quick-links">
          <a href="{{ route('reports.sales', request()->query()) }}" class="reports-quick-link">
            <i class="bi bi-receipt"></i>
            <span>Sales Report</span>
          </a>
          <a href="{{ route('reports.profit-loss', request()->query()) }}" class="reports-quick-link">
            <i class="bi bi-graph-up-arrow"></i>
            <span>Profit &amp; Loss</span>
          </a>
          <a href="{{ route('reports.cash-flow', request()->query()) }}" class="reports-quick-link">
            <i class="bi bi-cash-stack"></i>
            <span>Cash Flow</span>
          </a>
          <a href="{{ route('reports.expenses', request()->query()) }}" class="reports-quick-link">
            <i class="bi bi-wallet2"></i>
            <span>Expense Report</span>
          </a>
          <a href="{{ route('reports.campaigns', request()->query()) }}" class="reports-quick-link">
            <i class="bi bi-megaphone"></i>
            <span>Campaign Report</span>
          </a>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="reports-card reports-card--muted">
        <p class="reports-card__label mb-1">Customer Credit Due</p>
        <p class="reports-card__amount mb-0">{{ money($customerCredit) }}</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="reports-card reports-card--muted">
        <p class="reports-card__label mb-1">Supplier Credit Due</p>
        <p class="reports-card__amount mb-0">{{ money($supplierCredit) }}</p>
      </div>
    </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