{{-- resources/views/reports/financial.blade.php --}}
@extends('layouts.app')
@section('title', 'Financial Summary')
@section('page_title', 'Financial Summary')
@section('page_subtitle', $from->format('d M Y') . ' — ' . $to->format('d M Y'))

@section('content')

@include('reports.partials.nav')
@include('reports.partials.filters', ['route' => 'reports.financial'])

{{-- P&L Summary --}}
<div class="row g-3 mb-3">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon si-success">
                <i class="bi bi-cash-coin"></i>
            </div>
            <div>
                <div class="stat-value">
                    ${{ number_format($revenue, 0) }}
                </div>
                <div class="stat-label">Revenue</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon si-danger">
                <i class="bi bi-wallet2"></i>
            </div>
            <div>
                <div class="stat-value">
                    ${{ number_format($expenses, 0) }}
                </div>
                <div class="stat-label">Expenses</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon {{ $gross_profit >= 0 ? 'si-success' : 'si-danger' }}">
                <i class="bi bi-graph-up-arrow"></i>
            </div>
            <div>
                <div class="stat-value"
                     style="color:{{ $gross_profit >= 0 ? 'var(--success)' : 'var(--danger)' }};">
                    ${{ number_format(abs($gross_profit), 0) }}
                </div>
                <div class="stat-label">
                    Gross Profit
                    <span class="stat-trend {{ $gross_profit >= 0 ? 'trend-up' : 'trend-down' }}">
                        {{ $profit_margin }}% margin
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon si-warning">
                <i class="bi bi-clock-history"></i>
            </div>
            <div>
                <div class="stat-value">
                    ${{ number_format($outstanding, 0) }}
                </div>
                <div class="stat-label">Outstanding</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">

    {{-- P&L Summary Card --}}
    <div class="col-md-5">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-file-earmark-text me-2"
                       style="color:var(--clay)"></i>
                    Profit & Loss Summary
                </span>
            </div>
            <div class="card-body">
                <div style="display:flex;flex-direction:column;gap:0;">
                    <div style="display:flex;justify-content:space-between;
                                padding:10px 0;border-bottom:1px solid var(--border);
                                font-size:.85rem;">
                        <span style="color:var(--muted);">Total Revenue</span>
                        <span class="fw-semibold" style="color:var(--success);">
                            ${{ number_format($revenue, 2) }}
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;
                                padding:10px 0;border-bottom:1px solid var(--border);
                                font-size:.85rem;">
                        <span style="color:var(--muted);">Total Expenses</span>
                        <span class="fw-semibold" style="color:var(--danger);">
                            (${{ number_format($expenses, 2) }})
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;
                                padding:14px 0;border-bottom:2px solid var(--text);
                                font-size:.92rem;font-weight:800;">
                        <span>Gross Profit</span>
                        <span style="color:{{ $gross_profit >= 0 ? 'var(--success)' : 'var(--danger)' }};">
                            ${{ number_format($gross_profit, 2) }}
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;
                                padding:10px 0;font-size:.82rem;">
                        <span style="color:var(--muted);">Profit Margin</span>
                        <span class="fw-semibold"
                              style="color:{{ $profit_margin >= 20 ? 'var(--success)' : ($profit_margin >= 0 ? 'var(--warning)' : 'var(--danger)') }};">
                            {{ $profit_margin }}%
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;
                                padding:10px 0;
                                border-top:1px solid var(--border);
                                font-size:.82rem;">
                        <span style="color:var(--muted);">Outstanding Invoices</span>
                        <span class="fw-semibold" style="color:var(--warning);">
                            ${{ number_format($outstanding, 2) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Expenses by Category --}}
    <div class="col-md-7">
        <div class="card">
            <div class="card-header">
                <span class="card-title">Expenses by Category</span>
            </div>
            <div class="card-body">
                @php
                    $expTotal = $expenses_by_category->sum();
                @endphp
                @forelse($expenses_by_category as $category => $amount)
                    <div style="margin-bottom:10px;">
                        <div style="display:flex;justify-content:space-between;
                                    font-size:.8rem;margin-bottom:3px;">
                            <span class="fw-semibold">{{ $category }}</span>
                            <span>
                                ${{ number_format($amount, 0) }}
                                <span style="color:var(--muted);font-size:.72rem;">
                                    ({{ $expTotal > 0 ? round(($amount / $expTotal) * 100, 0) : 0 }}%)
                                </span>
                            </span>
                        </div>
                        <div style="background:var(--border);border-radius:3px;
                                    height:6px;overflow:hidden;">
                            <div style="height:100%;
                                        width:{{ $expTotal > 0 ? ($amount / $expTotal) * 100 : 0 }}%;
                                        background:var(--danger);border-radius:3px;opacity:.7;">
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-muted text-center mb-0"
                       style="font-size:.8rem;">No expenses in this period</p>
                @endforelse
            </div>
        </div>
    </div>

</div>

@endsection