@extends('layouts.app')

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

@section('content')
  @include('reports.partials.header', [
    'title' => 'Expense Report',
    'subtitle' => 'Active expenses 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--warning">
          <span class="product-kpi__icon" aria-hidden="true">
            <span class="product-kpi__glyph"><i class="bi bi-wallet2"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Total Expenses</p>
            <p class="product-kpi__value">{{ money($totalExpenses) }}</p>
            <p class="product-kpi__meta">{{ $expenseCount }} records</p>
          </div>
        </div>
      </div>
      <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-tags"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Categories</p>
            <p class="product-kpi__value">{{ $byCategory->count() }}</p>
            <p class="product-kpi__meta">With spending</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-lg-5">
      <div class="reports-card">
        <div class="reports-card__head">
          <h2 class="reports-card__title">By Category</h2>
        </div>
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead>
              <tr>
                <th>Category</th>
                <th class="text-end">Count</th>
                <th class="text-end">Total</th>
              </tr>
            </thead>
            <tbody>
              @forelse ($byCategory as $row)
                <tr>
                  <td>{{ $row['name'] }}</td>
                  <td class="text-end">{{ $row['count'] }}</td>
                  <td class="text-end">{{ money($row['total']) }}</td>
                </tr>
              @empty
                <tr><td colspan="3" class="text-center text-muted py-3">No expenses.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-lg-7">
      <div class="reports-card">
        <div class="reports-card__head">
          <h2 class="reports-card__title">Expense Details</h2>
        </div>
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead>
              <tr>
                <th>Date</th>
                <th>Category</th>
                <th>Notes</th>
                <th class="text-end">Amount</th>
              </tr>
            </thead>
            <tbody>
              @forelse ($expenses as $expense)
                <tr>
                  <td>{{ $expense->expense_date?->format('Y-m-d') }}</td>
                  <td>{{ $expense->category?->name ?? '—' }}</td>
                  <td>{{ $expense->notes ?: '—' }}</td>
                  <td class="text-end">{{ money((float) $expense->amount) }}</td>
                </tr>
              @empty
                <tr><td colspan="4" class="text-center text-muted py-4">No expenses in this period.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </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