@extends('layouts.app')
@section('title', 'Financial report')

@section('content')
    <div class="page-head">
        <div><h1>Financial performance</h1><p>{{ $from->format('d M Y') }} – {{ $to->format('d M Y') }}</p></div>
        <div class="page-actions">
            <a href="{{ route('reports.export', ['report' => 'financial', 'from' => $from->toDateString(), 'to' => $to->toDateString()]) }}" class="btn secondary">Export CSV</a>
            <button type="button" class="btn" onclick="window.print()">Print</button>
        </div>
    </div>

    <form class="filters" method="GET">
        <div class="field"><label>From</label><input type="date" name="from" value="{{ $from->toDateString() }}"></div>
        <div class="field"><label>To</label><input type="date" name="to" value="{{ $to->toDateString() }}"></div>
        <div class="field" style="flex:0 0 auto;"><label>&nbsp;</label><button type="submit" class="btn secondary">Apply</button></div>
    </form>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Revenue', 'value' => money($summary['revenue']), 'variant' => 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'MRR', 'value' => money($summary['mrr']), 'variant' => 'info', 'href' => '#'])
        @include('components.kpi', ['label' => 'ARR', 'value' => money($summary['arr']), 'variant' => 'info', 'href' => '#'])
        @include('components.kpi', ['label' => 'ARPU', 'value' => money($summary['arpu']), 'href' => '#'])
        @include('components.kpi', ['label' => 'Collection rate', 'value' => percent($summary['collection_rate']),
            'variant' => $summary['collection_rate'] >= 90 ? 'good' : 'warn', 'href' => '#'])
        @include('components.kpi', ['label' => 'Outstanding', 'value' => money($summary['outstanding']),
            'variant' => 'bad', 'href' => route('reports.collections')])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Revenue by month</h3></div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($monthly)->map(fn ($m) => [
                        'label' => \Carbon\Carbon::parse($m['month'])->format('M y'),
                        'value' => $m['revenue'],
                    ])->all(),
                    'type' => 'bar', 'format' => 'money', 'height' => 210,
                ])
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Collections vs receivables</h3></div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($monthly)->map(fn ($m) => [
                        'label' => \Carbon\Carbon::parse($m['month'])->format('M y'),
                        'value' => $m['collected'],
                    ])->all(),
                    'type' => 'line', 'format' => 'money', 'height' => 210,
                ])
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-head"><h3>Monthly breakdown</h3></div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr><th>Month</th><th class="num">Invoiced</th><th class="num">Collected</th>
                        <th class="num">Outstanding</th><th class="num">Collection rate</th><th class="num">MRR</th><th class="num">ARPU</th></tr>
                    </thead>
                    <tbody>
                    @forelse ($monthly as $row)
                        <tr>
                            <td class="strong">{{ \Carbon\Carbon::parse($row['month'])->format('F Y') }}</td>
                            <td class="num">{{ money($row['invoiced']) }}</td>
                            <td class="num">{{ money($row['collected']) }}</td>
                            <td class="num">{{ money($row['outstanding']) }}</td>
                            <td class="num">{{ percent($row['collection_rate']) }}</td>
                            <td class="num">{{ money($row['mrr']) }}</td>
                            <td class="num">{{ money($row['arpu']) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7">@include('components.empty-state', ['icon' => '&#128176;', 'title' => 'No financial data in this period'])</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection