@php
    $money = fn (?float $v): string => $v === null ? __('Not available') : trim($base.' '.number_format($v, 2));
    $viewMeta = [
        'originated' => ['icon' => 'flag', 'hint' => __('Credited to the person who brought each sale in.')],
        'managed' => ['icon' => 'briefcase', 'hint' => __('Credited to the owner who managed each sale.')],
        'supported' => ['icon' => 'users', 'hint' => __('Credited to every collaborator who supported each sale.')],
    ];
    $kpis = [
        ['label' => __('Won'), 'value' => number_format($company['count']), 'icon' => 'trophy', 'accent' => '#6366f1', 'sub' => __('Win rate :r', ['r' => $winRate === null ? __('not applicable') : number_format($winRate * 100, 1).'%'])],
        ['label' => __('Confirmed'), 'value' => $money($company['confirmed']), 'icon' => 'check-circle', 'accent' => '#0ea5e9', 'sub' => __('Each sale once')],
        ['label' => __('Invoiced'), 'value' => $money($company['invoiced']), 'icon' => 'document-text', 'accent' => '#8b5cf6', 'sub' => __('Less voids and credit notes')],
        ['label' => __('Received'), 'value' => $money($company['received']), 'icon' => 'banknotes', 'accent' => '#10b981', 'sub' => __('Less refunds')],
        ['label' => __('Outstanding'), 'value' => $money($company['outstanding']), 'icon' => 'clock', 'accent' => '#f59e0b', 'sub' => __('Invoiced, not yet received')],
    ];
    $selectClass = 'rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Sales Tracker')">
            <a href="{{ route('crm.reports.show', ['report' => 'reconciliation', 'period' => $period]) }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="scale-balance" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Reconciliation report') }}
                </x-secondary-button>
            </a>
        </x-page-header>

        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
                <select wire:model.live="period" class="{{ $selectClass }}">
                    @foreach ($periods as $key => $label)
                        <option value="{{ $key }}">{{ __($label) }}</option>
                    @endforeach
                </select>
                <select wire:model.live="sector" class="{{ $selectClass }}">
                    <option value="">{{ __('All sectors') }}</option>
                    @foreach ($options['sectors'] as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
                <select wire:model.live="source" class="{{ $selectClass }}">
                    <option value="">{{ __('All sources') }}</option>
                    @foreach ($options['sources'] as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
                <span class="text-xs text-slate-400 sm:ms-auto">{{ $window }} · {{ __('Amounts in :code at the rate frozen on each record', ['code' => $base]) }}</span>
            </div>
        </x-card>

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($kpis as $m)
                <x-card class="relative flex flex-col overflow-hidden p-5 ring-slate-200/70">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium w-fit">
            @foreach ($views as $key => $label)
                <button type="button" wire:click="setView('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $view === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$viewMeta[$key]['icon']" class="h-4 w-4" />
                    {{ __($label) }}
                </button>
            @endforeach
        </div>

        <x-card class="overflow-hidden">
            <div class="border-b border-slate-100 p-4 sm:p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __(':view, by person', ['view' => __($views[$view])]) }}</h2>
                <p class="text-xs text-slate-400">{{ $viewMeta[$view]['hint'] }} {{ __('There is deliberately no total row: one sale can sit with several people, so their figures overlap. The company figures above count each sale once.') }}</p>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Person') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Sales') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Confirmed') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Invoiced') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Received') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Outstanding') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($people as $person)
                            <tr wire:key="person-{{ $view }}-{{ $person['user_id'] ?? 0 }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">{{ $person['name'] }}</td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-700 lg:px-4">{{ $person['count'] }}</td>
                                @foreach (['confirmed', 'invoiced', 'received', 'outstanding'] as $key)
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums {{ $person[$key] === null ? 'text-slate-400' : 'text-slate-900' }} lg:px-4">{{ $money($person[$key]) }}</td>
                                @endforeach
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12">
                                    <x-empty-state icon="trophy" :title="__('Nobody is credited under this view')" :message="__('No opportunity was won in this period with these filters, or nobody supported the ones that were.')" class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @include('livewire.crm.partials.paginator', ['rows' => $people])
        </x-card>

        <x-card class="overflow-hidden">
            <div class="border-b border-slate-100 p-4 sm:p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Sales won in the period') }}</h2>
                <p class="text-xs text-slate-400">{{ __('Each sale once, with everyone credited for it.') }}</p>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Opportunity') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Originated') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Managed') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Supported') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Confirmed') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Invoiced') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Received') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($won as $o)
                            @php $f = $sales->of($o); @endphp
                            <tr wire:key="sale-{{ $o->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 py-4 text-sm lg:px-4">
                                    <a href="{{ route('crm.opportunities.show', $o) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $o->title }}</a>
                                    <div class="text-xs text-slate-500">{{ $o->customer?->name }}</div>
                                </td>
                                <td class="px-3 py-4 text-sm text-slate-600 lg:px-4">{{ $o->originator?->name ?? __('Nobody recorded') }}</td>
                                <td class="px-3 py-4 text-sm text-slate-600 lg:px-4">{{ $o->owner?->name ?? __('Nobody recorded') }}</td>
                                <td class="px-3 py-4 text-sm text-slate-600 lg:px-4">{{ $o->collaborators->map(fn ($c) => $c->user?->name)->filter()->unique()->implode(', ') ?: __('None') }}</td>
                                @foreach (['confirmed', 'invoiced', 'received'] as $key)
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums {{ $f[$key] === null ? 'text-slate-400' : 'text-slate-900' }} lg:px-4">{{ $money($f[$key]) }}</td>
                                @endforeach
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12">
                                    <x-empty-state icon="trophy" :title="__('Nothing won in this period')" :message="__('An opportunity is won when Administration links the confirmed job.')" class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                    @if ($won->isNotEmpty())
                        <tfoot>
                            <tr class="bg-slate-50/80">
                                <td colspan="4" class="px-3 py-3 text-sm font-semibold text-slate-900 lg:px-4">{{ __('Company total, each sale once') }}</td>
                                @foreach (['confirmed', 'invoiced', 'received'] as $key)
                                    <td class="whitespace-nowrap px-3 py-3 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">{{ $money($company[$key]) }}</td>
                                @endforeach
                            </tr>
                        </tfoot>
                    @endif
                </table>
            </div>
            @include('livewire.crm.partials.paginator', ['rows' => $won])
        </x-card>
    </div>
</div>