@php
    $tz = config('app.display_timezone');
    $f = $contents['figures'];
    $statusColor = ['draft' => 'amber', 'submitted' => 'sky', 'reviewed' => 'emerald'];
    $stats = [
        ['label' => __('New opportunities'), 'value' => $f['opportunities_opened'], 'icon' => 'plus', 'tone' => 'bg-indigo-50 text-indigo-600'],
        ['label' => __('Outreach'), 'value' => $f['outreach'], 'icon' => 'paper-airplane', 'tone' => 'bg-sky-50 text-sky-600'],
        ['label' => __('Meetings'), 'value' => $f['meetings'], 'icon' => 'users', 'tone' => 'bg-violet-50 text-violet-600'],
        ['label' => __('Pitches'), 'value' => $f['pitches'], 'icon' => 'document-text', 'tone' => 'bg-fuchsia-50 text-fuchsia-600'],
        ['label' => __('Follow-ups done'), 'value' => $f['follow_ups_completed'], 'icon' => 'check-circle', 'tone' => 'bg-emerald-50 text-emerald-600'],
        ['label' => __('Overdue tasks'), 'value' => $f['tasks_overdue'], 'icon' => 'exclamation-triangle', 'tone' => 'bg-rose-50 text-rose-600'],
        ['label' => __('Qualified'), 'value' => $f['qualified'], 'icon' => 'flag', 'tone' => 'bg-cyan-50 text-cyan-600'],
        ['label' => __('Handovers accepted'), 'value' => $f['handovers_accepted'], 'icon' => 'arrow-path', 'tone' => 'bg-amber-50 text-amber-600'],
        ['label' => __('Won'), 'value' => $f['won'], 'icon' => 'trophy', 'tone' => 'bg-emerald-50 text-emerald-600'],
        ['label' => __('Lost'), 'value' => $f['lost'], 'icon' => 'exclamation-triangle', 'tone' => 'bg-slate-100 text-slate-600'],
    ];
    $listMeta = [
        'opened' => __('New opportunities'),
        'qualified' => __('Qualified for the first time'),
        'won' => __('Won'),
        'lost' => __('Lost'),
    ];
    $num = fn ($v): string => rtrim(rtrim(number_format((float) $v, 1), '0'), '.');
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <div>
            <a href="{{ route('crm.weekly-reports.index') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 hover:text-slate-700">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('Weekly Reports') }}
            </a>
        </div>

        <x-page-header :title="__('Weekly report: :name', ['name' => $report->user?->name ?? __('Officer')])"
            :subtitle="__(':from to :to', ['from' => $report->week_starting->format('j M Y'), 'to' => $weekEnd->format('j M Y')])">
            <x-badge :color="$statusColor[$report->status] ?? 'slate'">{{ __(\App\Models\Crm\WeeklyReport::STATUSES[$report->status] ?? $report->status) }}</x-badge>
            <x-secondary-button type="button" wire:click="downloadPdf" wire:loading.attr="disabled" wire:target="downloadPdf">
                <x-icon name="arrow-down-tray" class="-ms-1 me-1.5 h-4 w-4" />
                {{ __('PDF') }}
            </x-secondary-button>
        </x-page-header>

        <div class="rounded-2xl border px-4 py-3 text-sm {{ $report->isSubmitted() ? 'border-slate-200 bg-slate-50 text-slate-600' : 'border-indigo-100 bg-indigo-50 text-indigo-800' }}">
            @if ($report->isSubmitted())
                {{ __('Figures frozen when submitted on :date. They come from what was logged in the CRM that week.', ['date' => $report->submitted_at?->timezone($tz)->format('j M Y, H:i')]) }}
            @else
                {{ __('These figures are filled in from what was logged this week and keep updating until you submit. You only need to add blockers and next week\'s priorities.') }}
            @endif
        </div>

        {{-- The week in figures --}}
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($stats as $s)
                <x-card class="flex items-center gap-3 p-4">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $s['tone'] }}">
                        <x-icon :name="$s['icon']" class="h-5 w-5" />
                    </span>
                    <div class="min-w-0">
                        <p class="truncate text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ $s['label'] }}</p>
                        <p class="text-base font-bold tabular-nums text-slate-900">{{ number_format($s['value']) }}</p>
                    </div>
                </x-card>
            @endforeach
        </section>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <x-card class="p-5">
                <h2 class="text-sm font-bold text-slate-900">{{ __('Activity by channel') }}</h2>
                <dl class="mt-3 space-y-1.5 text-sm">
                    @forelse ($contents['figures']['interactions'] as $type => $count)
                        <div class="flex justify-between gap-3">
                            <dt class="text-slate-500">{{ __($channels[$type] ?? ucfirst($type)) }}</dt>
                            <dd class="font-semibold tabular-nums text-slate-800">{{ number_format($count) }}</dd>
                        </div>
                    @empty
                        <p class="text-sm text-slate-400">{{ __('Nothing logged this week.') }}</p>
                    @endforelse
                    <div class="flex justify-between gap-3 border-t border-slate-100 pt-1.5">
                        <dt class="text-slate-500">{{ __('Proposals submitted') }}</dt>
                        <dd class="font-semibold tabular-nums text-slate-800">{{ number_format($f['proposals_submitted']) }}</dd>
                    </div>
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Handovers sent') }}</dt>
                        <dd class="font-semibold tabular-nums text-slate-800">{{ number_format($f['handovers_submitted']) }}</dd>
                    </div>
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Deferred') }}</dt>
                        <dd class="font-semibold tabular-nums text-slate-800">{{ number_format($f['deferred']) }}</dd>
                    </div>
                </dl>
            </x-card>

            <x-card class="p-5">
                <h2 class="text-sm font-bold text-slate-900">{{ __('Pipeline they own') }}</h2>
                <p class="text-xs text-slate-400">{{ $report->isSubmitted() ? __('As it stood at submission') : __('As it stands now') }}</p>
                <dl class="mt-3 space-y-1.5 text-sm">
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Open opportunities') }}</dt>
                        <dd class="font-semibold tabular-nums text-slate-800">{{ number_format($contents['pipeline']['count']) }}</dd>
                    </div>
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Estimated value (base)') }}</dt>
                        <dd class="font-semibold tabular-nums text-slate-800">{{ $contents['pipeline']['value_base'] === null ? __('Not estimated') : number_format($contents['pipeline']['value_base'], 2) }}</dd>
                    </div>
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Not estimated') }}</dt>
                        <dd class="font-semibold tabular-nums text-slate-800">{{ number_format($contents['pipeline']['not_estimated']) }}</dd>
                    </div>
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Gone quiet') }}</dt>
                        <dd class="font-semibold tabular-nums text-slate-800">{{ number_format($contents['pipeline']['stale']) }}</dd>
                    </div>
                </dl>
            </x-card>

            <x-card class="p-5">
                <h2 class="text-sm font-bold text-slate-900">{{ __('Against weekly targets') }}</h2>
                @if (empty($contents['targets']))
                    <p class="mt-3 text-sm text-slate-400">{{ __('No weekly targets are in force for this officer.') }}</p>
                @else
                    <dl class="mt-3 space-y-1.5 text-sm">
                        @foreach ($contents['targets'] as $t)
                            @php($pct = in_array($t['metric'], $percentMeasures, true) ? '%' : '')
                            <div class="flex justify-between gap-3">
                                <dt class="text-slate-500">{{ __($t['label']) }}</dt>
                                <dd class="whitespace-nowrap font-semibold tabular-nums text-slate-800">
                                    {{ $t['actual'] === null ? __('Not available') : $num($t['actual']).$pct }} / {{ $num($t['target']).$pct }}
                                </dd>
                            </div>
                        @endforeach
                    </dl>
                @endif
            </x-card>
        </div>

        <x-card class="p-5">
            <h2 class="text-sm font-bold text-slate-900">{{ __('Opportunities this week') }}</h2>
            <div class="mt-3 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($listMeta as $key => $label)
                    <div>
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $label }} ({{ count($contents['lists'][$key]) }})</p>
                        <ul class="mt-2 space-y-1 text-sm">
                            @forelse ($contents['lists'][$key] as $o)
                                <li wire:key="list-{{ $key }}-{{ $o['id'] }}">
                                    <a href="{{ route('crm.opportunities.show', $o['id']) }}" wire:navigate class="text-indigo-600 hover:text-indigo-800">{{ $o['title'] }}</a>
                                    @if ($o['organisation'])
                                        <span class="text-xs text-slate-400">· {{ $o['organisation'] }}</span>
                                    @endif
                                </li>
                            @empty
                                <li class="text-slate-400">{{ __('None') }}</li>
                            @endforelse
                        </ul>
                    </div>
                @endforeach
            </div>
        </x-card>

        {{-- The officer's words --}}
        <x-card class="overflow-hidden !p-0">
            <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="pencil-square" class="h-4 w-4" /></span>
                <h2 class="text-sm font-bold text-slate-900">{{ __('Blockers and next week') }}</h2>
            </div>
            <div class="space-y-4 p-5">
                @if ($canEdit)
                    <div>
                        <x-label for="blockers" :value="__('Blockers: what is holding work up, and what help is needed')" />
                        <textarea id="blockers" rows="4" wire:model="blockers" placeholder="{{ __('Leave blank if nothing is in the way') }}" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="blockers" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="priorities" :value="__('Next week\'s priorities')" />
                        <textarea id="priorities" rows="4" wire:model="priorities" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="priorities" class="mt-2" />
                    </div>
                    <div class="flex items-center justify-end gap-3">
                        <x-secondary-button type="button" wire:click="saveDraft" wire:loading.attr="disabled" wire:target="saveDraft">
                            <span wire:loading.remove wire:target="saveDraft">{{ __('Save draft') }}</span>
                            <span wire:loading wire:target="saveDraft">{{ __('Saving…') }}</span>
                        </x-secondary-button>
                        <x-button type="button" wire:click="submit" wire:confirm="{{ __('Submit this report? The figures are frozen and the directors are told.') }}" wire:loading.attr="disabled" wire:target="submit">
                            <span wire:loading.remove wire:target="submit">{{ __('Submit report') }}</span>
                            <span wire:loading wire:target="submit">{{ __('Submitting…') }}</span>
                        </x-button>
                    </div>
                @else
                    <div>
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Blockers') }}</p>
                        <p class="mt-1 whitespace-pre-line text-sm text-slate-800">{{ $report->blockers ?: __('None reported') }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Next week\'s priorities') }}</p>
                        <p class="mt-1 whitespace-pre-line text-sm text-slate-800">{{ $report->priorities ?: __('Not written yet') }}</p>
                    </div>
                @endif
            </div>
        </x-card>

        @if ($report->status === 'reviewed' || $canReview)
            <x-card class="p-5">
                <h2 class="text-sm font-bold text-slate-900">{{ __('Director review') }}</h2>
                @if ($report->status === 'reviewed')
                    <p class="mt-1 text-sm text-slate-600">
                        {{ __('Reviewed by :name on :date.', ['name' => $report->reviewer?->name ?? __('Not available'), 'date' => $report->reviewed_at?->timezone($tz)->format('j M Y')]) }}
                    </p>
                    @if ($report->review_note)
                        <p class="mt-2 whitespace-pre-line text-sm text-slate-800">{{ $report->review_note }}</p>
                    @endif
                @endif
                @if ($canReview && $report->status === 'submitted')
                    <div class="mt-3">
                        <x-label for="reviewNote" :value="__('Note to the officer (optional)')" />
                        <textarea id="reviewNote" rows="2" wire:model="reviewNote" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="reviewNote" class="mt-2" />
                        <div class="mt-3 flex justify-end">
                            <x-button type="button" wire:click="review" wire:loading.attr="disabled" wire:target="review">
                                <x-icon name="check-circle" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('Mark reviewed') }}
                            </x-button>
                        </div>
                    </div>
                @endif
            </x-card>
        @endif
    </div>
</div>