@extends('layouts.app')
@section('title', 'Sales by Product')

@include('inventory.accounting.partials.styles')

@section('content')
<div class="acc-header">
    <div><h1>Sales by Product</h1><p>{{ \Carbon\Carbon::parse($from)->format('M j') }} – {{ \Carbon\Carbon::parse($to)->format('M j, Y') }}</p></div>
    <form method="GET" class="acc-filters" style="margin:0;">
        <label>From <input type="date" name="from" value="{{ $from }}" class="acc-input"></label>
        <label>To <input type="date" name="to" value="{{ $to }}" class="acc-input"></label>
        <button class="acc-btn">Run</button>
    </form>
</div>

@include('inventory.accounting.partials.sub-nav')

@php
    $totalRev    = array_sum(array_column($sales, 'revenue'));
    $totalCogs   = array_sum(array_column($sales, 'cogs'));
    $totalProfit = $totalRev - $totalCogs;
    $totalMargin = $totalRev > 0 ? round(($totalProfit / $totalRev) * 100, 2) : 0;
@endphp

{{-- Top-of-page KPI strip so the merchant sees the bottom line first --}}
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0.75rem; margin-bottom:1.25rem;">
    <div class="acc-card" style="margin:0;">
        <div style="font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.25rem;">Revenue</div>
        <div style="font-size:1.3rem; font-weight:700;">₦{{ number_format($totalRev, 2) }}</div>
    </div>
    <div class="acc-card" style="margin:0;">
        <div style="font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.25rem;">COGS</div>
        <div style="font-size:1.3rem; font-weight:700;">₦{{ number_format($totalCogs, 2) }}</div>
    </div>
    <div class="acc-card" style="margin:0; {{ $totalProfit >= 0 ? 'background:rgba(0,212,170,0.08); border-color:var(--success,#00d4aa);' : 'background:rgba(255,71,87,0.08); border-color:var(--danger,#ff4757);' }}">
        <div style="font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.25rem;">Gross Profit</div>
        <div style="font-size:1.3rem; font-weight:700; color:{{ $totalProfit >= 0 ? 'var(--success,#00d4aa)' : 'var(--danger,#ff4757)' }};">₦{{ number_format($totalProfit, 2) }}</div>
    </div>
    <div class="acc-card" style="margin:0;">
        <div style="font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.25rem;">Margin</div>
        <div style="font-size:1.3rem; font-weight:700;">{{ $totalMargin }}%</div>
    </div>
</div>

<div class="acc-card">
    <table class="acc-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Product</th>
                <th class="num">Qty Sold</th>
                <th class="num">Revenue</th>
                <th class="num">COGS</th>
                <th class="num">Profit</th>
                <th class="num">Margin</th>
                <th class="num">Share</th>
            </tr>
        </thead>
        <tbody>
            @forelse($sales as $i => $row)
                <tr>
                    <td>{{ $i + 1 }}</td>
                    <td><strong>{{ $row['product_name'] }}</strong></td>
                    <td class="num">{{ number_format($row['qty']) }}</td>
                    <td class="num">{{ number_format($row['revenue'], 2) }}</td>
                    <td class="num">{{ number_format($row['cogs'], 2) }}</td>
                    <td class="num" style="color:{{ ($row['profit'] ?? 0) >= 0 ? 'var(--success,#00d4aa)' : 'var(--danger,#ff4757)' }}; font-weight:600;">
                        {{ number_format($row['profit'], 2) }}
                    </td>
                    <td class="num">{{ $row['margin_pct'] }}%</td>
                    <td class="num">{{ $totalRev > 0 ? round(($row['revenue'] / $totalRev) * 100, 1) : 0 }}%</td>
                </tr>
            @empty
                <tr><td colspan="8" class="acc-empty">No sales in this period.</td></tr>
            @endforelse
            @if(! empty($sales))
                <tr style="font-weight:700; background:var(--bg-secondary);">
                    <td colspan="3">Total</td>
                    <td class="num">{{ number_format($totalRev, 2) }}</td>
                    <td class="num">{{ number_format($totalCogs, 2) }}</td>
                    <td class="num" style="color:{{ $totalProfit >= 0 ? 'var(--success,#00d4aa)' : 'var(--danger,#ff4757)' }};">{{ number_format($totalProfit, 2) }}</td>
                    <td class="num">{{ $totalMargin }}%</td>
                    <td></td>
                </tr>
            @endif
        </tbody>
    </table>

    @if(empty($sales) || array_sum(array_column($sales, 'cogs')) === 0)
        <p style="font-size:0.75rem; color:var(--text-muted); margin-top:0.75rem;">
            <i class="fas fa-info-circle"></i>
            Profit columns only populate for products that have a <strong>Cost Price</strong> set. Add cost prices on your products to unlock per-product profitability tracking.
        </p>
    @endif
</div>
@endsection