@extends('layouts.app')

@section('title', 'Financial Summary')

@section('content')
<div class="card mb-3">
  <div class="card-header">
    <div class="row flex-between-center">
      <div class="col-6 col-sm-auto d-flex align-items-center pe-0">
        <h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">Financial Summary</h5>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="row g-3">
      <div class="col-md-6 col-xxl-3">
        <div class="card h-100 bg-gradient-to-right-primary">
          <div class="card-body text-white">
            <div class="d-flex justify-content-between">
              <div>
                <h6 class="text-white">Total Revenue</h6>
                <h2 class="text-white">$125,450</h2>
                <p class="mb-0">+15% from last month</p>
              </div>
              <div class="align-self-center">
                <span class="fas fa-dollar-sign fa-2x"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xxl-3">
        <div class="card h-100 bg-gradient-to-right-success">
          <div class="card-body text-white">
            <div class="d-flex justify-content-between">
              <div>
                <h6 class="text-white">Net Profit</h6>
                <h2 class="text-white">$28,340</h2>
                <p class="mb-0">+8% from last month</p>
              </div>
              <div class="align-self-center">
                <span class="fas fa-chart-line fa-2x"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xxl-3">
        <div class="card h-100 bg-gradient-to-right-warning">
          <div class="card-body text-white">
            <div class="d-flex justify-content-between">
              <div>
                <h6 class="text-white">Total Expenses</h6>
                <h2 class="text-white">$97,110</h2>
                <p class="mb-0">+3% from last month</p>
              </div>
              <div class="align-self-center">
                <span class="fas fa-receipt fa-2x"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xxl-3">
        <div class="card h-100 bg-gradient-to-right-info">
          <div class="card-body text-white">
            <div class="d-flex justify-content-between">
              <div>
                <h6 class="text-white">Cash Flow</h6>
                <h2 class="text-white">$45,230</h2>
                <p class="mb-0">+12% from last month</p>
              </div>
              <div class="align-self-center">
                <span class="fas fa-coins fa-2x"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-3 mt-3">
      <div class="col-xxl-8">
        <div class="card h-100">
          <div class="card-header">
            <h6 class="mb-0">Revenue Trends</h6>
          </div>
          <div class="card-body">
            <p class="text-muted">Chart placeholder - Revenue trends over the last 12 months</p>
            <div class="bg-light p-4 text-center">
              <span class="fas fa-chart-area fa-3x text-muted"></span>
              <p class="mt-2 mb-0">Revenue Chart Integration Required</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xxl-4">
        <div class="card h-100">
          <div class="card-header">
            <h6 class="mb-0">Financial Breakdown</h6>
          </div>
          <div class="card-body">
            <div class="d-flex justify-content-between py-2">
              <span>Sales Revenue</span>
              <span class="text-success">$85,450</span>
            </div>
            <div class="d-flex justify-content-between py-2">
              <span>Service Revenue</span>
              <span class="text-success">$40,000</span>
            </div>
            <div class="d-flex justify-content-between py-2">
              <span>Operating Expenses</span>
              <span class="text-danger">$67,110</span>
            </div>
            <div class="d-flex justify-content-between py-2">
              <span>Administrative Costs</span>
              <span class="text-danger">$30,000</span>
            </div>
            <hr>
            <div class="d-flex justify-content-between py-2 fw-bold">
              <span>Net Income</span>
              <span class="text-success">$28,340</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection