@extends('layouts.app')
@section('title', 'Collections')

@section('content')
    <div class="page-head">
        <div><h1>Collections &amp; aging</h1><p>Receivables and recovery performance.</p></div>
        <div class="page-actions">
            <a href="{{ route('invoices.index', ['status' => 'overdue']) }}" class="btn secondary">Overdue invoices</a>
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Total receivable', 'value' => money($summary['total_receivable']), 'variant' => 'warn', 'href' => '#'])
        @include('components.kpi', ['label' => 'Overdue', 'value' => money($summary['overdue_amount']), 'variant' => 'bad', 'href' => '#'])
        @include('components.kpi', ['label' => 'Collection rate', 'value' => percent($summary['collection_rate']),
            'variant' => $summary['collection_rate'] >= 90 ? 'good' : 'warn', 'href' => '#'])
        @include('components.kpi', ['label' => 'Accounts at risk', 'value' => number_format($summary['at_risk_accounts']),
            'variant' => $summary['at_risk_accounts'] > 0 ? 'bad' : 'good', 'href' => '#'])
    </div>

    <div class="grid grid-2 mb-2">
        <div class="card">
            <div class="card-head"><h3>Aging buckets</h3></div>
            <div class="card-body">
                @php $maxBucket = collect($aging)->max('amount') ?: 1; @endphp
                @foreach ($aging as $bucket)
                    <div class="bar-row">
                        <span class="bar-label">{{ $bucket['label'] }}</span>
                        <span class="bar-track">
                            <span class="bar-fill {{ $bucket['label'] === '90+ days' || $bucket['label'] === '61–90 days' ? 'danger' : ($bucket['label'] === 'Not yet due' ? '' : 'warn') }}"
                                  style="width: {{ ($bucket['amount'] / $maxBucket) * 100 }}%"></span>
                        </span>
                        <span class="bar-value">{{ money($bucket['amount']) }}</span>
                    </div>
                @endforeach
            </div>
        </div>

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

    <div class="card">
        <div class="card-head"><h3>Top debtors</h3></div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead><tr><th>Customer</th><th class="num">Outstanding</th><th class="num">Overdue</th>
                        <th class="num">Oldest invoice</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                    @forelse ($debtors as $debtor)
                        <tr>
                            <td>
                                <a href="{{ route('customers.show', $debtor->customer) }}" class="strong">{{ $debtor->customer->display_name }}</a>
                                <div class="tiny muted mono">{{ $debtor->customer->customer_number }}</div>
                            </td>
                            <td class="num strong">{{ money($debtor->outstanding, $debtor->customer->currency) }}</td>
                            <td class="num">{{ money($debtor->overdue, $debtor->customer->currency) }}</td>
                            <td class="num small">{{ $debtor->oldest_days }} days</td>
                            <td><span class="badge {{ status_color($debtor->customer->status) }}">{{ $debtor->customer->status }}</span></td>
                            <td class="right">
                                <a href="{{ route('payments.create', ['customer' => $debtor->customer_id]) }}" class="btn xs">Collect</a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6">@include('components.empty-state', ['icon' => '&#10003;', 'title' => 'No outstanding balances'])</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection