@extends('layouts.admin')
@section('page-title','Profit & Loss')

@section('topbar-actions')
  <div style="display:flex;gap:8px;align-items:center">
    <form method="GET" action="{{ route('admin.pnl.index') }}" style="display:flex;gap:6px">
      @foreach(['all'=>'All Time','month'=>'This Month','year'=>'This Year'] as $val=>$label)
        <button type="submit" name="period" value="{{ $val }}"
          class="btn {{ $period===$val ? 'btn-primary' : 'btn-ghost' }}" style="padding:7px 14px;font-size:13px">
          {{ $label }}
        </button>
      @endforeach
    </form>
    <a href="{{ route('admin.pnl.export') }}" class="btn btn-ghost">⬇️ Export CSV</a>
  </div>
@endsection

@section('content')

{{-- KPI STRIP --}}
<div class="kpi-grid kpi-grid-4" style="margin-bottom:24px">
  <div class="kpi green">
    <div class="kpi-label">Gross Revenue</div>
    <div class="kpi-value">${{ number_format($summary['revenue'],2) }}</div>
    <div class="kpi-sub">Selling price × qty sold</div>
  </div>
  <div class="kpi">
    <div class="kpi-label">Cost of Goods</div>
    <div class="kpi-value">${{ number_format($summary['cogs'],2) }}</div>
    <div class="kpi-sub">Cost price × qty sold</div>
  </div>
  <div class="kpi {{ $summary['grossProfit'] >= 0 ? 'green' : 'red' }}">
    <div class="kpi-label">Gross Profit</div>
    <div class="kpi-value">${{ number_format($summary['grossProfit'],2) }}</div>
    <div class="kpi-sub">Revenue − COGS</div>
  </div>
  <div class="kpi amber">
    <div class="kpi-label">Gross Margin</div>
    <div class="kpi-value">{{ $summary['margin'] }}%</div>
    <div class="kpi-sub">Gross profit / revenue</div>
  </div>
</div>

{{-- CHARTS --}}
<div class="grid-60-40" style="margin-bottom:24px">
  <div class="card">
    <div class="card-title">📈 Revenue vs Gross Profit (Monthly)</div>
    <div class="chart-wrap"><canvas id="pnlChart"></canvas></div>
  </div>
  <div class="card">
    <div class="card-title">🍩 Revenue by Category</div>
    <div class="chart-wrap"><canvas id="catChart"></canvas></div>
  </div>
</div>

{{-- PRODUCT BREAKDOWN TABLE --}}
<div class="card">
  <div class="card-title">📋 Product P&L Breakdown</div>
  @if($byProd->isEmpty())
    <p style="color:var(--ink2);text-align:center;padding:32px">No confirmed or delivered orders yet.</p>
  @else
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Qty Sold</th>
        <th>Revenue</th>
        <th>COGS</th>
        <th>Gross Profit</th>
        <th>Margin</th>
      </tr>
    </thead>
    <tbody>
      @foreach($byProd as $row)
      @php
        $marginColor = $row->margin >= 50 ? 'var(--green)' : ($row->margin >= 25 ? 'var(--amber)' : 'var(--red)');
      @endphp
      <tr>
        <td><strong>{{ $row->product_name }}</strong></td>
        <td>{{ number_format($row->qty_sold) }}</td>
        <td>${{ number_format($row->revenue,2) }}</td>
        <td>${{ number_format($row->cogs,2) }}</td>
        <td><strong style="color:{{ $row->gross_profit>=0?'var(--green)':'var(--red)' }}">${{ number_format($row->gross_profit,2) }}</strong></td>
        <td><span style="font-weight:700;color:{{ $marginColor }}">{{ $row->margin }}%</span></td>
      </tr>
      @endforeach
    </tbody>
  </table>
  @endif
</div>

@endsection

@push('scripts')
<script>
const monthly  = @json($monthly);
const byCat    = @json($byCat);

// ── Revenue vs Profit Bar Chart ────────────────────────────────────────
new Chart(document.getElementById('pnlChart'), {
  type: 'bar',
  data: {
    labels: monthly.map(r => r.month),
    datasets: [
      { label:'Revenue',      data: monthly.map(r=>r.revenue),      backgroundColor:'rgba(200,82,42,.75)',  borderRadius:6 },
      { label:'Gross Profit', data: monthly.map(r=>r.gross_profit), backgroundColor:'rgba(42,122,78,.75)',  borderRadius:6 },
    ]
  },
  options: {
    responsive:true, maintainAspectRatio:false,
    plugins:{ legend:{ position:'bottom' } },
    scales:{ x:{ grid:{ display:false } }, y:{ grid:{ color:'rgba(0,0,0,.05)' } } }
  }
});

// ── Category Donut ─────────────────────────────────────────────────────
new Chart(document.getElementById('catChart'), {
  type: 'doughnut',
  data: {
    labels: byCat.map(r => r.category.charAt(0).toUpperCase() + r.category.slice(1)),
    datasets: [{
      data: byCat.map(r => r.revenue),
      backgroundColor: ['#c8522a','#2a7a4e','#b87b1a','#3b5bdb'],
      borderWidth: 0,
      hoverOffset: 8
    }]
  },
  options: {
    responsive:true, maintainAspectRatio:false,
    plugins:{ legend:{ position:'bottom' } },
    cutout: '65%'
  }
});
</script>
@endpush