@extends('layouts.app')

@section('title', 'Profit & Loss')
@section('page', 'reports')

@section('content')
  @include('reports.partials.header', [
    'title' => 'Profit & Loss',
    'subtitle' => 'Gross profit from product sales vs cost. Net profit after expenses and payroll. '.$dateFrom.' to '.$dateTo.'.',
  ])

  <ul class="nav nav-tabs reports-tabs mb-4" role="tablist">
    <li class="nav-item" role="presentation">
      <button
        class="nav-link {{ $activeTab === 'summary' ? 'active' : '' }}"
        id="pnl-summary-tab"
        data-bs-toggle="tab"
        data-bs-target="#pnl-summary-panel"
        type="button"
        role="tab"
        aria-controls="pnl-summary-panel"
        aria-selected="{{ $activeTab === 'summary' ? 'true' : 'false' }}"
      >
        Summary
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link {{ $activeTab === 'gross' ? 'active' : '' }}"
        id="gross-profit-tab"
        data-bs-toggle="tab"
        data-bs-target="#gross-profit-panel"
        type="button"
        role="tab"
        aria-controls="gross-profit-panel"
        aria-selected="{{ $activeTab === 'gross' ? 'true' : 'false' }}"
      >
        Gross Profit
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link {{ $activeTab === 'net' ? 'active' : '' }}"
        id="net-profit-tab"
        data-bs-toggle="tab"
        data-bs-target="#net-profit-panel"
        type="button"
        role="tab"
        aria-controls="net-profit-panel"
        aria-selected="{{ $activeTab === 'net' ? 'true' : 'false' }}"
      >
        Net Profit
      </button>
    </li>
  </ul>

  <div class="tab-content">
    <div
      class="tab-pane fade {{ $activeTab === 'summary' ? 'show active' : '' }}"
      id="pnl-summary-panel"
      role="tabpanel"
      aria-labelledby="pnl-summary-tab"
      tabindex="0"
    >
      <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-graph-up-arrow"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Revenue</p>
                <p class="product-kpi__value">{{ money($pnlKpis['revenue']['value']) }}</p>
                <p class="pnl-kpi-trend pnl-kpi-trend--{{ $pnlKpis['revenue']['trend']['direction'] }}">
                  <i class="bi bi-{{ $pnlKpis['revenue']['trend']['direction'] === 'up' ? 'arrow-up-right' : 'arrow-down-right' }}" aria-hidden="true"></i>
                  {{ $pnlKpis['revenue']['trend']['label'] }} <span>{{ $pnlCompareLabel }}</span>
                </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-wallet2"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Gross Profit</p>
                <p class="product-kpi__value">{{ money($pnlKpis['grossProfit']['value']) }}</p>
                <p class="pnl-kpi-trend pnl-kpi-trend--{{ $pnlKpis['grossProfit']['trend']['direction'] }}">
                  <i class="bi bi-{{ $pnlKpis['grossProfit']['trend']['direction'] === 'up' ? 'arrow-up-right' : 'arrow-down-right' }}" aria-hidden="true"></i>
                  {{ $pnlKpis['grossProfit']['trend']['label'] }} <span>{{ $pnlCompareLabel }}</span>
                </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-bar-chart-line"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Operating Profit</p>
                <p class="product-kpi__value">{{ money($pnlKpis['operatingProfit']['value']) }}</p>
                <p class="pnl-kpi-trend pnl-kpi-trend--{{ $pnlKpis['operatingProfit']['trend']['direction'] }}">
                  <i class="bi bi-{{ $pnlKpis['operatingProfit']['trend']['direction'] === 'up' ? 'arrow-up-right' : 'arrow-down-right' }}" aria-hidden="true"></i>
                  {{ $pnlKpis['operatingProfit']['trend']['label'] }} <span>{{ $pnlCompareLabel }}</span>
                </p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--accent">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-cash-coin"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Net Profit</p>
                <p class="product-kpi__value">{{ money($pnlKpis['netProfit']['value']) }}</p>
                <p class="pnl-kpi-trend pnl-kpi-trend--{{ $pnlKpis['netProfit']['trend']['direction'] }}">
                  <i class="bi bi-{{ $pnlKpis['netProfit']['trend']['direction'] === 'up' ? 'arrow-up-right' : 'arrow-down-right' }}" aria-hidden="true"></i>
                  {{ $pnlKpis['netProfit']['trend']['label'] }} <span>{{ $pnlCompareLabel }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row g-3 mb-3">
        <div class="col-lg-4">
          <div class="reports-card h-100">
            <div class="reports-card__head">
              <h2 class="reports-card__title">Profit &amp; Loss Statement</h2>
            </div>
            <div class="table-responsive">
              <table class="table table-sm align-middle mb-0 pnl-statement-table" data-report-table data-report-title="Profit & Loss Statement">
                <thead>
                  <tr>
                    <th>Description</th>
                    <th class="text-end">Amount</th>
                    <th class="text-end">% of Sales</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($pnlStatement as $row)
                    <tr class="{{ $row['highlight'] ? 'pnl-statement-table__highlight' : '' }}">
                      <td>{{ $row['label'] }}</td>
                      <td class="text-end {{ $row['amount'] < 0 ? 'text-danger' : ($row['highlight'] ? 'text-success' : '') }}">
                        @if ($row['amount'] < 0)
                          ({{ money(abs($row['amount'])) }})
                        @else
                          {{ money($row['amount']) }}
                        @endif
                      </td>
                      <td class="text-end">{{ number_format($row['pct'], 2) }}%</td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="reports-card h-100">
            <div class="reports-card__head">
              <h2 class="reports-card__title">P&amp;L Summary Chart (Monthly)</h2>
            </div>
            <div id="pnl-monthly-chart" class="reports-chart"></div>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="reports-card h-100">
            <div class="reports-card__head">
              <h2 class="reports-card__title">Profit Margin (%)</h2>
            </div>
            <div id="pnl-margin-chart" class="reports-chart reports-chart--donut"></div>
          </div>
        </div>
      </div>

      <div class="row g-3">
        <div class="col-lg-4">
          <div class="reports-card h-100">
            <div class="reports-card__head">
              <h2 class="reports-card__title">Revenue Breakdown</h2>
            </div>
            <div id="pnl-revenue-chart" class="reports-chart reports-chart--donut"></div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="reports-card h-100">
            <div class="reports-card__head">
              <h2 class="reports-card__title">Expense Breakdown</h2>
            </div>
            <div id="pnl-expense-chart" class="reports-chart reports-chart--donut"></div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="reports-card h-100">
            <div class="reports-card__head">
              <h2 class="reports-card__title">Key Performance Indicators</h2>
            </div>
            <div class="pnl-kpi-gauges">
              @foreach ($pnlPerformance as $gauge)
                @php
                  $maxScale = max(1, (float) ($gauge['max'] ?? 100));
                  $fillPct = min(100, max(0, round(((float) $gauge['value'] / $maxScale) * 100, 1)));
                  $inRange = ! empty($gauge['inverse'])
                    ? (float) $gauge['value'] <= (float) $gauge['max']
                    : (float) $gauge['value'] >= (float) $gauge['min'] && (float) $gauge['value'] <= (float) $gauge['max'];
                @endphp
                <div class="pnl-kpi-gauge">
                  <div class="pnl-kpi-gauge__head">
                    <span>{{ $gauge['label'] }}</span>
                    <strong>{{ number_format($gauge['value'], 2) }}%</strong>
                  </div>
                  <div class="pnl-kpi-gauge__track">
                    <div
                      class="pnl-kpi-gauge__fill pnl-kpi-gauge__fill--{{ $gauge['tone'] }} {{ $inRange ? 'is-in-range' : '' }}"
                      style="width: {{ $fillPct }}%"
                    ></div>
                  </div>
                  <p class="pnl-kpi-gauge__target mb-0">Target: {{ $gauge['target'] }}</p>
                </div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="tab-pane fade {{ $activeTab === 'gross' ? 'show active' : '' }}"
      id="gross-profit-panel"
      role="tabpanel"
      aria-labelledby="gross-profit-tab"
      tabindex="0"
    >
      <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">Sales Revenue</p>
                <p class="product-kpi__value">{{ money($salesRevenue) }}</p>
                <p class="product-kpi__meta">Product line totals</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-box-seam"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Product Cost</p>
                <p class="product-kpi__value">{{ money($productCost) }}</p>
                <p class="product-kpi__meta">{{ number_format($itemsSold) }} items sold</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-graph-up"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Gross Profit</p>
                <p class="product-kpi__value {{ $grossProfit >= 0 ? 'text-success' : 'text-danger' }}">{{ money($grossProfit) }}</p>
                <p class="product-kpi__meta">Sales − product cost</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-percent"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Gross Margin</p>
                <p class="product-kpi__value">{{ number_format($grossMargin, 2) }}%</p>
                <p class="product-kpi__meta">On product sales</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="reports-card">
        <div class="reports-card__head">
          <h2 class="reports-card__title">Gross Profit by Product</h2>
        </div>
        <div class="reports-pl mb-3">
          <div class="reports-pl__row reports-pl__row--section">
            <span>Sales revenue</span>
            <strong class="text-success">{{ money($salesRevenue) }}</strong>
          </div>
          <div class="reports-pl__row reports-pl__row--section">
            <span>Product cost</span>
            <strong class="text-danger">− {{ money($productCost) }}</strong>
          </div>
          <div class="reports-pl__divider"></div>
          <div class="reports-pl__row reports-pl__row--total">
            <span>Gross profit</span>
            <strong class="{{ $grossProfit >= 0 ? 'text-success' : 'text-danger' }}">{{ money($grossProfit) }}</strong>
          </div>
        </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">Sales</th>
                <th class="text-end">Cost</th>
                <th class="text-end">Profit</th>
              </tr>
            </thead>
            <tbody>
              @forelse ($grossByProduct as $row)
                <tr>
                  <td>{{ $row->product_name }}</td>
                  <td class="text-end">{{ $row->qty }}</td>
                  <td class="text-end">{{ money($row->revenue) }}</td>
                  <td class="text-end">{{ money($row->cost) }}</td>
                  <td class="text-end {{ $row->profit >= 0 ? 'text-success' : 'text-danger' }}">{{ money($row->profit) }}</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>
    </div>

    <div
      class="tab-pane fade {{ $activeTab === 'net' ? 'show active' : '' }}"
      id="net-profit-panel"
      role="tabpanel"
      aria-labelledby="net-profit-tab"
      tabindex="0"
    >
      @include('reports.partials.net-pnl-statement')
    </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

@push('scripts')
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.54.1/dist/apexcharts.min.js"></script>
  <script>
    window.PNL_MONTHLY_TREND = @json($pnlMonthlyTrend);
    window.PNL_MARGIN_DONUT = @json($pnlMarginDonut);
    window.PNL_REVENUE_BREAKDOWN = @json($pnlRevenueBreakdown);
    window.PNL_EXPENSE_BREAKDOWN = @json($pnlExpenseBreakdown);
    window.PNL_NET_MARGIN = {{ json_encode(number_format(collect($pnlMarginDonut)->firstWhere('label', 'Net Profit Margin')['value'] ?? 0, 2)) }};
    window.PNL_TOTAL_REVENUE = {{ json_encode((float) $pnlKpis['revenue']['value']) }};
    window.PNL_TOTAL_EXPENSES = {{ json_encode((float) collect($pnlExpenseBreakdown)->sum('amount')) }};
  </script>
  <script src="{{ asset('assets/js/pages/reports-pnl.js') }}"></script>
  <script>
    (function () {
      const tabs = document.querySelectorAll('.reports-tabs [data-bs-toggle="tab"]');
      tabs.forEach((tab) => {
        tab.addEventListener('shown.bs.tab', (event) => {
          const id = event.target.id === 'net-profit-tab'
            ? 'net'
            : (event.target.id === 'gross-profit-tab' ? 'gross' : 'summary');
          const url = new URL(window.location.href);
          url.searchParams.set('tab', id);
          window.history.replaceState({}, '', url);
        });
      });
    })();
  </script>
@endpush