@extends('layouts.finance')

@section('title', 'Monthly Report')
@section('subtitle', 'Closed month detail report')

@section('content')
@php
    $closing = $reportData['closing'];
    $status = $reportData['status'];
    $trend = $reportData['trend'];
@endphp

<section class="card p-5 mb-6" style="background:linear-gradient(135deg,#f8fafc,#ffffff);border-color:#dbe4f0">
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <div class="text-xs" style="color:var(--muted);text-transform:uppercase;letter-spacing:1.4px;font-weight:700">Monthly Business Report</div>
            <div class="text-xl font-bold" style="margin-top:4px">{{ $closing->month->format('F Y') }} Closing</div>
            <div class="text-sm muted" style="margin-top:6px">
                Covered period: {{ $closing->period_start?->format('d M Y') ?? $status['period_start']->format('d M Y') }}
                to
                {{ $closing->period_end?->format('d M Y') ?? $status['period_end']->format('d M Y') }}
            </div>
        </div>
        <div style="display:flex;gap:8px;flex-wrap:wrap">
            <span class="pill pill-green">Closed {{ $closing->closed_at?->format('d M Y, H:i') }}</span>
            <span class="pill">{{ $closing->accounts_closed_count }}/{{ $closing->accounts_required_count }} accounts closed</span>
        </div>
    </div>
</section>

<section class="grid kpi-grid gap-3 mb-6">
    <div class="card kpi-card">
        <div class="kpi-label">Total Sale</div>
        <div class="kpi-value">{{ $metrics->money($closing->total_sale, $closing->currency) }}</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-label">Profit Before Expense</div>
        <div class="kpi-value" style="color:{{ (float) $closing->profit >= 0 ? '#10b981' : '#ef4444' }}">{{ $metrics->money($closing->profit, $closing->currency) }}</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-label">Expense</div>
        <div class="kpi-value" style="color:#b45309">{{ $metrics->money($closing->expense, $closing->currency) }}</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-label">Net Profit / Loss</div>
        <div class="kpi-value" style="color:{{ (float) $closing->net_profit >= 0 ? '#10b981' : '#ef4444' }}">{{ $metrics->money($closing->net_profit, $closing->currency) }}</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-label">Company Net Worth</div>
        <div class="kpi-value">{{ $metrics->money($closing->net_worth, $closing->currency) }}</div>
    </div>
</section>

<div class="grid grid-2 mb-6">
    <section class="card">
        <div class="section-head"><h2>Closing Checklist</h2></div>
        <table>
            <thead>
            <tr>
                <th>Account</th>
                <th>Type</th>
                <th>Status</th>
            </tr>
            </thead>
            <tbody>
            @foreach($status['rows'] as $row)
                <tr>
                    <td>
                        <div style="font-weight:700">{{ $row['name'] }}</div>
                        <div class="text-xs muted">{{ $row['subtitle'] }}</div>
                    </td>
                    <td>{{ $row['kind'] === 'bank' ? 'Bank / Wallet' : 'Credit Card' }}</td>
                    <td>
                        @if($row['is_closed'])
                            <span class="pill pill-green">Closed {{ $row['closing']?->closed_at?->format('d M Y') }}</span>
                        @else
                            <span class="pill pill-red">Open</span>
                        @endif
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </section>

    <section class="card">
        <div class="section-head"><h2>Report Notes</h2></div>
        <div class="p-4">
            <div class="card p-4" style="background:#f8fafc;border-style:dashed">
                <div class="text-sm" style="line-height:1.7;color:var(--text-2)">
                    This report is generated from the locked monthly closing snapshot.
                    The month only becomes reportable after every active bank, wallet, and credit card is manually closed for that cycle.
                    For {{ $closing->month->format('F Y') }}, the coverage window is
                    <strong>{{ $closing->period_start?->format('d M Y') ?? $status['period_start']->format('d M Y') }}</strong>
                    to
                    <strong>{{ $closing->period_end?->format('d M Y') ?? $status['period_end']->format('d M Y') }}</strong>.
                </div>
            </div>
        </div>
    </section>
</div>

<section class="card">
    <div class="section-head"><h2>Recent 6-Month Trend</h2></div>
    <table>
        <thead>
        <tr>
            <th>Month</th>
            <th class="right">Revenue</th>
            <th class="right">Expenses</th>
            <th class="right">Net</th>
        </tr>
        </thead>
        <tbody>
        @foreach($trend['labels'] as $i => $label)
            <tr @if($label === $closing->month->format('M Y')) style="background:#eef2ff" @endif>
                <td>{{ $label }}</td>
                <td class="right">{{ $metrics->money($trend['revenue'][$i]) }}</td>
                <td class="right">{{ $metrics->money($trend['expenses'][$i]) }}</td>
                <td class="right" style="color:{{ ($trend['revenue'][$i] - $trend['expenses'][$i]) >= 0 ? '#10b981' : '#ef4444' }}">
                    {{ $metrics->money($trend['revenue'][$i] - $trend['expenses'][$i]) }}
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</section>
@endsection