@props(['progress'])

@php
    use App\Support\MoneyFormatter;

    $max = max(1, collect($progress['series'])->flatMap(fn ($p) => [$p['moved'], $p['received']])->max() ?: 1);
@endphp

{{--
    What actually happened, over the chosen stretch of time. Every figure here
    comes from money that moved and was referenced, not from money that was
    merely planned.
--}}
<section class="card">
    <div class="row-between" style="flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-5)">
        <h2 style="font-size:var(--text-lg)">{{ __('progress.title') }}</h2>

        <div class="row" style="gap:var(--s-1)">
            @foreach (\App\Services\Progress\ProgressService::WINDOWS as $window)
                <a href="{{ request()->fullUrlWithQuery(['window' => $window]) }}"
                   class="btn btn--sm {{ $progress['window'] === $window ? 'btn--primary' : 'btn--quiet' }}">
                    {{ __('progress.window.'.$window) }}
                </a>
            @endforeach
        </div>
    </div>

    <p class="hint" style="margin-bottom:var(--s-5)">
        {{ $progress['from']->translatedFormat('j M Y') }} — {{ $progress['to']->translatedFormat('j M Y') }}
    </p>

    <div class="grid grid-4">
        <x-figure :label="__('progress.received')">
            <x-money :value="$progress['received']" compact />
        </x-figure>

        <x-figure :label="__('progress.moved')" tone="positive">
            <x-money :value="$progress['moved']" compact />
        </x-figure>

        <x-figure :label="__('progress.giving')">
            <x-money :value="$progress['giving']" compact />
        </x-figure>

        <x-figure :label="__('progress.goals_funded')">
            <x-money :value="$progress['goals_funded']" compact />
        </x-figure>
    </div>

    @if ($progress['outstanding']->isPositive())
        <x-note tone="warn" style="margin-top:var(--s-5)">
            {{ __('progress.outstanding_note', ['amount' => MoneyFormatter::format($progress['outstanding'])]) }}
        </x-note>
    @endif

    {{-- Received against moved, side by side. Two bars per point, because the
         gap between them is the story. --}}
    <div style="margin-top:var(--s-8)">
        <div class="eyebrow" style="margin-bottom:var(--s-4)">{{ __('progress.over_time') }}</div>

        <div class="row" style="align-items:flex-end;gap:var(--s-4);height:9rem">
            @foreach ($progress['series'] as $point)
                <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);height:100%">
                    <div class="row" style="align-items:flex-end;gap:2px;flex:1;width:100%;justify-content:center">
                        <div style="width:38%;border-radius:3px 3px 0 0;background:var(--navy-500);
                                    height:{{ max(2, round($point['received'] / $max * 100)) }}%"
                             title="{{ __('progress.received') }}: {{ number_format($point['received']) }}"></div>
                        <div style="width:38%;border-radius:3px 3px 0 0;background:var(--gold-500);
                                    height:{{ max(2, round($point['moved'] / $max * 100)) }}%"
                             title="{{ __('progress.moved') }}: {{ number_format($point['moved']) }}"></div>
                    </div>
                    <span class="hint" style="font-size:var(--text-xs)">{{ $point['label'] }}</span>
                </div>
            @endforeach
        </div>

        <div class="legend" style="margin-top:var(--s-4)">
            <span class="legend__item">
                <span class="legend__swatch" style="background:var(--navy-500)"></span>{{ __('progress.received') }}
            </span>
            <span class="legend__item">
                <span class="legend__swatch" style="background:var(--gold-500)"></span>{{ __('progress.moved') }}
            </span>
        </div>
    </div>

    {{-- Consistency: how often a plan was carried through, not how big it was. --}}
    @if ($progress['periods_total'] > 0)
        <div class="card card--sunken" style="margin-top:var(--s-6)">
            <div class="row-between">
                <div>
                    <div style="font-weight:600">{{ __('progress.consistency') }}</div>
                    <div class="hint">
                        {{ __('progress.periods_closed', [
                            'closed' => $progress['periods_closed'],
                            'total' => $progress['periods_total'],
                        ]) }}
                    </div>
                </div>
                <span class="money money--lg">{{ number_format($progress['consistency'], 0) }}%</span>
            </div>

            <div class="meter" style="margin-top:var(--s-3)">
                <div class="meter__fill {{ $progress['consistency'] >= 80 ? 'meter__fill--good' : 'meter__fill--gold' }}"
                     style="width:{{ max(2, $progress['consistency']) }}%"></div>
            </div>
        </div>
    @endif
</section>