@php
    $fmt = app(\App\Services\Formatter::class);
    $money = fn ($value) => $fmt->money($value);
@endphp

<div>
    <x-ui.page-header
        title="Revenue"
        :subtitle="$this->rangeLabel().' — verified payments only. A claim is not money until somebody has checked it.'"
    />

    <div class="mb-4 flex flex-wrap items-end gap-2">
        <x-ui.date-range />

        <select wire:model.live="productId" class="field-input w-auto py-1.5 text-xs">
            <option value="">All products</option>
            @foreach ($products as $id => $name)
                <option value="{{ $id }}">{{ $name }}</option>
            @endforeach
        </select>
    </div>

    <div class="grid gap-4 sm:grid-cols-3">
        <x-ui.stat label="Collected" :value="$fmt->money($collected)" :sub="$payments.' verified payment(s)'"
                   icon="banknote" color="green" />

        <x-ui.stat label="Average payment"
                   :value="$fmt->money($payments > 0 ? $collected / $payments : 0)"
                   icon="chart" />

        <x-ui.stat label="Still unverified" :value="$fmt->money($stillPending)"
                   sub="Sitting in the queue right now"
                   icon="clock" :color="$stillPending > 0 ? 'amber' : 'slate'" />
    </div>

    <x-ui.card class="mt-4" title="Collected by month">
        <x-chart.bars :series="$months" :formatter="$money" label="Collected" :slot="1" :height="240" />

        <details class="mt-3">
            <summary class="cursor-pointer text-xs font-medium text-slate-500 hover:text-brand">Show as table</summary>

            <x-ui.table class="mt-2">
                <x-slot:head>
                    <tr><th>Month</th><th class="num">Collected</th><th>Payments</th></tr>
                </x-slot:head>

                @forelse ($months as $row)
                    <tr>
                        <td>{{ $row['label'] }}</td>
                        <td class="num">{{ $fmt->money($row['value']) }}</td>
                        <td class="text-xs text-slate-500">{{ $row['meta'] }}</td>
                    </tr>
                @empty
                    <tr><td colspan="3" class="text-center text-sm text-slate-400">Nothing collected in this range.</td></tr>
                @endforelse
            </x-ui.table>
        </details>
    </x-ui.card>

    <div class="mt-4 grid gap-4 lg:grid-cols-2">
        <x-ui.card title="By payment method" subtitle="Which rails to keep, and which to drop.">
            <x-chart.donut :series="$gateways" :formatter="$money"
                           center-label="Collected" :center-value="$fmt->compact($collected)" />
        </x-ui.card>

        <x-ui.card title="By plan" subtitle="Where the money actually comes from.">
            <x-chart.hbars :series="$plans" :formatter="$money" label="Collected" :slot="2" />
        </x-ui.card>
    </div>

    <x-ui.card class="mt-4" title="Largest accounts" subtitle="Whose churn would hurt most.">
        @if ($tenants === [])
            <x-ui.empty icon="building" title="Nothing to rank yet" />
        @else
            <x-ui.table>
                <x-slot:head>
                    <tr><th>#</th><th>Shop</th><th class="num">Paid in this period</th><th class="num">Share</th></tr>
                </x-slot:head>

                @foreach ($tenants as $index => $row)
                    <tr>
                        <td class="num text-slate-400">{{ $index + 1 }}</td>
                        <td>
                            <a href="{{ route('tenants.show', $row['id']) }}" wire:navigate
                               class="font-medium text-brand hover:underline">{{ $row['label'] }}</a>
                        </td>
                        <td class="num">{{ $fmt->money($row['value']) }}</td>
                        <td class="num">{{ $collected > 0 ? $fmt->percent($row['value'] / $collected * 100) : '—' }}</td>
                    </tr>
                @endforeach
            </x-ui.table>
        @endif
    </x-ui.card>
</div>