@extends('layouts.app')

@section('title', 'Cash Flow Report')
@section('page', 'reports')

@section('content')
  @include('reports.partials.header', [
    'title' => 'Cash Flow',
    'subtitle' => 'Cash book and bank book movement from '.$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--success">
          <span class="product-kpi__icon" aria-hidden="true">
            <span class="product-kpi__glyph"><i class="bi bi-arrow-down-left"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Total In</p>
            <p class="product-kpi__value">{{ money($cashIn + $bankIn) }}</p>
            <p class="product-kpi__meta">Cash + bank</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-arrow-up-right"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Total Out</p>
            <p class="product-kpi__value">{{ money($cashOut + $bankOut) }}</p>
            <p class="product-kpi__meta">Cash + bank</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-journal-text"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Cash Book Net</p>
            <p class="product-kpi__value">{{ money($cashIn - $cashOut) }}</p>
            <p class="product-kpi__meta">In − out</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-bank"></i></span>
          </span>
          <div class="product-kpi__body">
            <p class="product-kpi__label">Net Movement</p>
            <p class="product-kpi__value {{ $netMovement >= 0 ? 'text-success' : 'text-danger' }}">{{ money($netMovement) }}</p>
            <p class="product-kpi__meta">Bank net: {{ money($bankIn - $bankOut) }}</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">Cash Book by Category</h2>
        </div>
        @include('reports.partials.category-table', ['rows' => $cashCategories])
      </div>
    </div>
    <div class="col-lg-6">
      <div class="reports-card">
        <div class="reports-card__head">
          <h2 class="reports-card__title">Bank Book by Category</h2>
        </div>
        @include('reports.partials.category-table', ['rows' => $bankCategories])
      </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