@php
    $money = fn ($v) => number_format((float) $v, 2);
    $signed = fn ($v) => (float) $v >= 0 ? 'text-emerald-600' : 'text-rose-600';

    // Status pill palette (On Track / At Risk / Behind).
    $toneChip = [
        'good' => 'bg-emerald-50 text-emerald-700 ring-emerald-600/15',
        'warn' => 'bg-amber-50 text-amber-700 ring-amber-600/15',
        'bad' => 'bg-rose-50 text-rose-700 ring-rose-600/15',
        'neutral' => 'bg-slate-100 text-slate-600 ring-slate-500/15',
    ];

    // Heatmap cell palette by band.
    $heat = [
        'high' => 'bg-emerald-100 text-emerald-800',
        'med' => 'bg-amber-100 text-amber-800',
        'low' => 'bg-rose-100 text-rose-800',
    ];

    // Build an SVG polyline from a value series (auto-scaled to the box).
    $spark = function (array $vals, int $w = 120, int $h = 34): string {
        $vals = array_values(array_map('floatval', $vals));
        if (count($vals) < 2) {
            return '';
        }
        $min = min($vals);
        $max = max($vals);
        $range = ($max - $min) ?: 1;
        $n = count($vals) - 1;
        $pts = [];
        foreach ($vals as $i => $v) {
            $x = $i / $n * $w;
            $y = $h - (($v - $min) / $range) * ($h - 4) - 2;
            $pts[] = round($x, 1) . ',' . round($y, 1);
        }
        return implode(' ', $pts);
    };

    // Donut-gauge arc path (r chosen so circumference ≈ 100 → dasharray = pct).
    $arc = 'M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831';

    $payColors = ['paid' => 'emerald', 'partial' => 'sky', 'overdue' => 'rose', 'unpaid' => 'slate', 'void' => 'slate'];
    $commColors = ['fully_paid' => 'emerald', 'deposit_paid' => 'sky', 'not_funded' => 'slate'];

    // The three page sections.
    $tabMeta = [
        'summary' => ['label' => __('Profit Summary'), 'icon' => 'chart-bar'],
        'jobs' => ['label' => __('Job Profitability'), 'icon' => 'briefcase'],
        'costs' => ['label' => __('Cost & Margin'), 'icon' => 'calculator'],
    ];

    // Month-by-month table: how each line of the statement is drawn.
    $rowStyle = [
        'plain' => ['label' => 'text-slate-600', 'value' => 'text-slate-600', 'row' => '', 'bg' => 'bg-white'],
        'deduct' => ['label' => 'pl-5 text-slate-500', 'value' => 'text-slate-500', 'row' => '', 'bg' => 'bg-white'],
        'subtotal' => ['label' => 'font-semibold text-slate-800', 'value' => 'font-semibold text-slate-900', 'row' => 'border-t border-slate-200', 'bg' => 'bg-white'],
        'total' => ['label' => 'font-bold text-slate-900', 'value' => 'font-bold', 'row' => 'border-t-2 border-slate-300 bg-slate-50/70', 'bg' => 'bg-slate-50'],
        'memo' => ['label' => 'text-slate-400', 'value' => 'text-slate-400', 'row' => '', 'bg' => 'bg-white'],
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        {{-- =====================================================================
             Header + period
             ===================================================================== --}}
        <x-page-header
            :title="__('Profitability')"
            :subtitle="__('What the business earned, what it cost and what was left.')"
        >
            <select wire:model.live="period"
                    class="rounded-xl border-slate-300 py-2 pl-3 pr-9 text-sm font-medium text-slate-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                <option value="this_month">{{ __('This Month') }}</option>
                <option value="last_month">{{ __('Last Month') }}</option>
                <option value="quarter">{{ __('This Quarter') }}</option>
                <option value="year">{{ __('This Year') }}</option>
                <option value="custom">{{ __('Custom Range') }}</option>
            </select>
            <span class="hidden rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-500 shadow-sm sm:inline-flex">
                {{ $rangeText }}
            </span>
            <x-secondary-button onclick="window.print()">
                <x-icon name="arrow-down-tray" class="h-4 w-4 text-slate-400" />
                {{ __('Export') }}
            </x-secondary-button>
        </x-page-header>

        {{-- Filters (custom range + drill-down) --}}
        <x-card class="p-4">
            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5">
                <div>
                    <x-label for="from" :value="__('From')" />
                    <x-input id="from" type="date" wire:model.live="dateFrom" class="mt-1 block w-full" />
                </div>
                <div>
                    <x-label for="to" :value="__('To')" />
                    <x-input id="to" type="date" wire:model.live="dateTo" class="mt-1 block w-full" />
                </div>
                <div>
                    <x-label for="cat" :value="__('Category')" />
                    <select id="cat" wire:model.live="categoryFilter"
                            class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All categories') }}</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <x-label for="job" :value="__('Job')" />
                    <select id="job" wire:model.live="jobFilter"
                            class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All jobs') }}</option>
                        @foreach ($jobOptions as $job)
                            <option value="{{ $job->id }}">{{ $job->job_number }}{{ $job->title ? ', ' . \Illuminate\Support\Str::limit($job->title, 26) : '' }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-end">
                    <x-secondary-button type="button" wire:click="resetFilters" class="w-full justify-center">
                        {{ __('Reset') }}
                    </x-secondary-button>
                </div>
            </div>
        </x-card>

        {{-- =====================================================================
             Headline cards, ACCRUAL basis. Cash collected is not among them by
             design: it is a receivables event, not an earnings one.
             ===================================================================== --}}
        <section class="space-y-3">
            <div class="flex flex-wrap items-center justify-between gap-2">
                <div class="inline-flex items-center gap-2">
                    <h2 class="text-xs font-bold uppercase tracking-wider text-slate-400">{{ __('Profit Headlines') }}</h2>
                    <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-0.5 text-[10px] font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-600/15">
                        {{ __('Accrual basis · revenue recognised') }}
                    </span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-xs text-slate-400">{{ $periodLabel }}</span>
                    <x-badge :color="$company['health_color']" class="px-2.5 py-0.5 text-xs font-semibold">{{ $company['health_label'] }}</x-badge>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-6">
                @foreach ($summaryCards as $card)
                    <x-card class="group flex flex-col p-4 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                        @if ($card['type'] === 'money')
                            <div class="flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <p class="text-[11px] font-semibold uppercase leading-tight tracking-wider text-slate-400">{{ $card['label'] }}</p>
                                    @if ($card['sub'])
                                        <p class="truncate text-[10px] text-slate-400">{{ $card['sub'] }}</p>
                                    @endif
                                </div>
                                <span class="flex shrink-0 items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40"
                                      style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $card['accent'] }}, {{ $card['accent'] }}bb)">
                                    <x-icon name="{{ $card['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;">{{ $card['value'] }}</p>
                            @if ($card['target'])
                                <p class="mt-1.5 text-[10px] text-slate-400">{{ $card['target'] }} · <span class="font-semibold text-slate-600">{{ $card['pct'] }}% {{ $card['pct_caption'] }}</span></p>
                            @endif
                            @if ($card['delta'] !== null)
                                <span class="mt-2 inline-flex w-fit items-center gap-1 rounded-full px-2 py-1 text-[11px] font-semibold {{ $card['delta'] >= 0 ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' }}">
                                    <x-icon name="{{ $card['delta'] >= 0 ? 'arrow-trending-up' : 'arrow-trending-down' }}" class="h-3 w-3 shrink-0" />
                                    {{ number_format(abs($card['delta']), 1) }}% <span class="font-normal opacity-70">{{ __('vs last month') }}</span>
                                </span>
                            @endif
                            @if (! empty($card['spark']))
                                <svg viewBox="0 0 120 34" preserveAspectRatio="none" class="mt-auto h-8 w-full pt-2" aria-hidden="true">
                                    <polyline points="{{ $spark($card['spark']) }}" fill="none" stroke="{{ $card['accent'] }}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            @endif
                            @if ($card['status'])
                                <span class="mt-2 inline-flex w-fit items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold ring-1 ring-inset {{ $toneChip[$card['status']['tone']] ?? $toneChip['neutral'] }}">
                                    {{ $card['status']['label'] }}
                                </span>
                            @endif
                        @else
                            {{-- margin card: radial gauge --}}
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $card['label'] }}</p>
                            <div class="mt-1 flex items-center justify-center">
                                <div class="relative">
                                    <svg viewBox="0 0 36 36" class="h-24 w-24">
                                        <path d="{{ $arc }}" fill="none" stroke="#e2e8f0" stroke-width="3.2" />
                                        <path d="{{ $arc }}" fill="none" stroke="{{ $card['accent'] }}" stroke-width="3.2" stroke-linecap="round" stroke-dasharray="{{ $card['gauge'] }}, 100" />
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <span class="text-lg font-bold text-slate-900 tabular-nums">{{ $card['value'] }}</span>
                                    </div>
                                </div>
                            </div>
                            @if ($card['delta_pp'] !== null)
                                <p class="mt-auto text-center text-[11px] font-semibold {{ $card['delta_pp'] >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                                    {{ $card['delta_pp'] >= 0 ? '+' : '−' }}{{ number_format(abs($card['delta_pp']), 1) }}pp <span class="font-normal text-slate-400">{{ __('vs last month') }}</span>
                                </p>
                            @endif
                        @endif
                    </x-card>
                @endforeach
            </div>
        </section>

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

        {{-- =====================================================================
             TAB 1 · PROFIT SUMMARY
             ===================================================================== --}}
        @if ($tab === 'summary')

            {{-- Revenue basis: billed → earned → banked → owed. The one panel that
                 keeps the four figures from being read as the same number. --}}
            <x-card class="p-6">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <h3 class="text-sm font-semibold text-slate-900">{{ __('Revenue Basis & Receivables') }}</h3>
                        <p class="text-xs text-slate-500">{{ __('What was billed, what was earned, what was banked and what is still owed.') }}</p>
                    </div>
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1 text-[11px] font-semibold text-emerald-700 ring-1 ring-emerald-600/15">
                        <x-icon name="check-circle" class="h-3.5 w-3.5" />{{ __('Only recognised revenue drives profit') }}
                    </span>
                </div>

                <div class="mt-5 grid grid-cols-1 gap-6 lg:grid-cols-3">
                    {{-- The bridge --}}
                    <div class="space-y-3 lg:col-span-2">
                        @php
                            $bridge = [
                                ['label' => __('Amount Invoiced'), 'note' => __('billed in the period'), 'value' => $revenueBasis['invoiced'], 'display' => $revenueBasis['invoiced_label'], 'bar' => 'bg-violet-400', 'strong' => false],
                                ['label' => __('less Credits & Refunds'), 'note' => __('sales reversed'), 'value' => $revenueBasis['contra'], 'display' => '(' . $money($revenueBasis['contra']) . ')', 'bar' => 'bg-rose-300', 'strong' => false],
                                ['label' => __('Revenue Recognised'), 'note' => __('earned in the period'), 'value' => $revenueBasis['recognised'], 'display' => $revenueBasis['recognised_label'], 'bar' => 'bg-brand-500', 'strong' => true],
                            ];
                        @endphp
                        @foreach ($bridge as $step)
                            <div>
                                <div class="flex items-baseline justify-between gap-3">
                                    <span class="text-xs {{ $step['strong'] ? 'font-bold text-slate-900' : 'font-medium text-slate-600' }}">
                                        {{ $step['label'] }}
                                        <span class="ml-1 font-normal text-slate-400">{{ $step['note'] }}</span>
                                    </span>
                                    <span class="whitespace-nowrap text-sm {{ $step['strong'] ? 'font-bold text-slate-900' : 'font-semibold text-slate-600' }} tabular-nums">{{ $step['display'] }}</span>
                                </div>
                                <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-slate-100">
                                    {{-- A negative step (a month whose credits outran its
                                         invoicing) goes rose, or a full-width bar would read
                                         as a big positive. --}}
                                    <div class="h-full rounded-full {{ $step['value'] < 0 ? 'bg-rose-400' : $step['bar'] }}"
                                         style="width: {{ max(0, min(100, $revenueBasis['scale'] > 0 ? abs($step['value']) / $revenueBasis['scale'] * 100 : 0)) }}%"></div>
                                </div>
                            </div>
                        @endforeach

                        <div class="flex items-start gap-2.5 rounded-xl bg-slate-50 p-3 text-[11px] text-slate-500 ring-1 ring-slate-200/70">
                            <x-icon name="scale" class="mt-0.5 h-4 w-4 shrink-0 text-slate-400" />
                            <p>
                                <span class="font-semibold text-slate-700">{{ __('Gross and net profit on this page are recognised revenue less costs.') }}</span>
                                {{ __('Cash collected measures collections, not trading, so it sits on the right with the other receivables figures. Amount invoiced is what was billed and is not revenue until credits and refunds come off it.') }}
                                {{ __('The GP hurdle and commission pool below deliberately stay on collected cash, which is the basis the workspace pays commission on.') }}
                            </p>
                        </div>
                    </div>

                    {{-- Cash & receivables (moved off the profit headline) --}}
                    <div class="space-y-2 rounded-2xl border border-slate-100 bg-slate-50/60 p-4">
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400">{{ __('Cash & Receivables') }}</p>
                        @foreach ($cashCards as $c)
                            <div class="flex items-center gap-3 rounded-xl bg-white p-2.5 ring-1 ring-slate-200/70">
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
                                      style="background: {{ $c['accent'] }}1a; color: {{ $c['accent'] }}">
                                    <x-icon name="{{ $c['icon'] }}" class="h-4 w-4" />
                                </span>
                                <div class="min-w-0 flex-1">
                                    <p class="truncate text-[11px] font-medium text-slate-500">{{ $c['label'] }}</p>
                                    <p class="truncate text-[10px] text-slate-400">{{ $c['sub'] }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="whitespace-nowrap text-sm font-bold text-slate-900 tabular-nums">{{ $c['value'] }}</p>
                                    @if ($c['delta'] !== null)
                                        <p class="text-[10px] font-semibold {{ $c['delta'] >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                                            {{ $c['delta'] >= 0 ? '+' : '−' }}{{ number_format(abs($c['delta']), 1) }}%
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </x-card>

            {{-- Profit variance: growth vs prior periods + attainment vs target --}}
            @php $hasVarianceTargets = collect($variance)->contains(fn (array $r): bool => $r['target_display'] !== null); @endphp
            <div class="space-y-2">
                <x-variance-grid :rows="$variance" dense :title="__('Profit Variance Center')"
                    :subtitle="__('Growth vs prior periods and attainment vs target, current month · accrual basis')" />
                @unless ($hasVarianceTargets)
                    <p class="px-1 text-[11px] text-slate-400">
                        {{ __('The vs Target columns are empty because no monthly target is set for these metrics.') }}
                        <a href="{{ route('targets.index') }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-700">{{ __('Set one on Targets') }}</a>
                        {{ __('and they fill in here automatically.') }}
                    </p>
                @endunless
            </div>

            {{-- Month-by-month comparison (the spreadsheet view) --}}
            <x-card class="overflow-hidden">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div>
                        <h3 class="text-base font-semibold text-slate-900">{{ __('Month-by-Month Profit Statement') }}</h3>
                        <p class="text-xs text-slate-400">{{ __('Every line of the statement, one column per month, on the recognised-revenue basis.') }}</p>
                    </div>
                    <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        @foreach ($monthlyCompare['options'] as $opt)
                            <button type="button" wire:click="$set('compareMonths', {{ $opt }})"
                                class="rounded-lg px-2.5 py-1 transition {{ $compareMonths === $opt ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                {{ __(':n mo', ['n' => $opt]) }}
                            </button>
                        @endforeach
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full text-xs">
                        <thead>
                            <tr class="bg-slate-50/80 text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="sticky left-0 z-10 bg-slate-50 px-3 py-3 text-left lg:px-4">{{ __('Line') }}</th>
                                @foreach ($monthlyCompare['months'] as $m)
                                    <th class="whitespace-nowrap px-3 py-3 text-right lg:px-4" title="{{ $m['long'] }}">{{ $m['label'] }}</th>
                                @endforeach
                                <th class="whitespace-nowrap border-l border-slate-200 px-3 py-3 text-right lg:px-4">{{ __('Total') }}</th>
                                <th class="whitespace-nowrap px-3 py-3 text-right lg:px-4">{{ __('Avg/mo') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach ($monthlyCompare['rows'] as $r)
                                @php
                                    $st = $rowStyle[$r['style']] ?? $rowStyle['plain'];
                                    $isDeduct = $r['style'] === 'deduct';
                                    $fmt = function ($v) use ($r, $isDeduct, $money) {
                                        if ($r['kind'] === 'percent') {
                                            return number_format((float) $v, 1) . '%';
                                        }
                                        return $isDeduct && (float) $v >= 0
                                            ? '(' . $money($v) . ')'
                                            : $money($v);
                                    };
                                    // Money subtotals/totals go green/red with their sign; everything
                                    // else keeps the row's own muted tone.
                                    $tone = fn ($v) => in_array($r['style'], ['subtotal', 'total'], true) && $r['kind'] === 'money'
                                        ? $signed($v)
                                        : ($r['kind'] === 'percent' && in_array($r['style'], ['subtotal', 'total'], true) ? $signed($v) : '');
                                @endphp
                                <tr class="{{ $st['row'] }} transition hover:bg-slate-50/70">
                                    <th scope="row" class="sticky left-0 z-10 {{ $st['bg'] }} px-3 py-2.5 text-left lg:px-4">
                                        <span class="{{ $st['label'] }}">{{ $r['label'] }}</span>
                                        @if ($r['note'])
                                            <span class="ml-1 hidden text-[10px] font-normal text-slate-300 xl:inline">{{ $r['note'] }}</span>
                                        @endif
                                    </th>
                                    @foreach ($r['values'] as $v)
                                        <td class="whitespace-nowrap px-3 py-2.5 text-right tabular-nums lg:px-4 {{ $st['value'] }} {{ $tone($v) }}">{{ $fmt($v) }}</td>
                                    @endforeach
                                    <td class="whitespace-nowrap border-l border-slate-200 px-3 py-2.5 text-right font-semibold tabular-nums lg:px-4 {{ $st['value'] }} {{ $tone($r['total']) }}">{{ $fmt($r['total']) }}</td>
                                    <td class="whitespace-nowrap px-3 py-2.5 text-right tabular-nums lg:px-4 {{ $st['value'] }}">{{ $fmt($r['avg']) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <p class="border-t border-slate-100 px-4 py-3 text-[11px] text-slate-400 sm:px-5">
                    {{ __('All amounts in :code. Deductions are shown in brackets.', ['code' => $monthlyCompare['base']]) }}
                    {{ __('For the percentage lines, Total is the weighted figure for the whole span (e.g. total gross profit ÷ total recognised revenue) while Avg/mo is the plain average of the monthly percentages — the two differ whenever the months are of different sizes.') }}
                    {{ __('Memo lines are cash-flow measures shown for reference; they take no part in the profit above them.') }}
                </p>
            </x-card>

            {{-- Health score + GP hurdle / commission status --}}
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                <x-card class="p-6">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Profit Health Score') }}</h3>
                    <div class="mt-4 flex items-center gap-5">
                        <div class="relative shrink-0">
                            <svg viewBox="0 0 36 36" class="h-28 w-28">
                                <path d="{{ $arc }}" fill="none" stroke="#e2e8f0" stroke-width="3" />
                                <path d="{{ $arc }}" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round" stroke-dasharray="{{ $healthScore['score'] }}, 100" />
                            </svg>
                            <div class="absolute inset-0 flex flex-col items-center justify-center">
                                <span class="text-2xl font-bold text-slate-900">{{ $healthScore['score'] }}</span>
                                <span class="text-[10px] text-slate-400">/100</span>
                            </div>
                        </div>
                        <div class="min-w-0">
                            <p class="text-lg font-bold text-emerald-600">{{ $healthScore['label'] }}</p>
                            <svg viewBox="0 0 120 28" preserveAspectRatio="none" class="mt-1 h-7 w-32" aria-hidden="true">
                                <polyline points="{{ $spark($healthScore['spark'], 120, 28) }}" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>
                    </div>
                    <div class="mt-4 flex items-start gap-2 border-t border-slate-100 pt-3 text-xs text-slate-500">
                        <x-icon name="sparkles" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" />
                        <span>{{ $healthScore['note'] }}</span>
                    </div>
                </x-card>

                <x-card class="p-6 lg:col-span-2">
                    <div class="flex flex-wrap items-start justify-between gap-2">
                        <h3 class="text-sm font-semibold text-slate-900">{{ __('GP Hurdle & Commission Status') }}</h3>
                        <span class="inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-2.5 py-0.5 text-[10px] font-semibold text-amber-700 ring-1 ring-inset ring-amber-600/15">
                            {{ __('Cash basis · the basis commission is paid on') }}
                        </span>
                    </div>

                    <div class="mt-5 grid grid-cols-1 gap-6 lg:grid-cols-3">
                        <div class="lg:col-span-2">
                            {{-- Track: 0 → break-even → hurdle, with the actual-GP fill --}}
                            <div class="flex items-center justify-between text-[11px] font-medium text-slate-500">
                                <span>{{ __('Break-even') }}<br><span class="text-slate-700">{{ $baseCode }} {{ $money($gpStatus['break_even']) }}</span></span>
                                <span class="text-right">{{ __('GP Hurdle') }}<br><span class="text-slate-700">{{ $baseCode }} {{ $money($gpStatus['hurdle']) }}</span></span>
                            </div>
                            <div class="relative mt-2 h-3 w-full rounded-full bg-slate-100">
                                <div class="absolute inset-y-0 left-0 rounded-full"
                                     style="width: {{ $gpStatus['progress'] }}%; background: {{ $gpStatus['commission_active'] ? '#10b981' : ($gpStatus['above_break_even'] ? '#f59e0b' : '#f43f5e') }}"></div>
                                <div class="absolute -top-1 h-5 w-0.5 bg-slate-400" style="left: {{ $gpStatus['break_even_mark'] }}%"></div>
                            </div>
                            <div class="mt-2 flex items-center justify-between text-[11px]">
                                <span class="text-slate-400">{{ __('Actual GP (cash)') }}: <span class="font-semibold text-slate-700">{{ $baseCode }} {{ $money($gpStatus['actual_gp']) }}</span></span>
                                <span class="font-bold text-slate-900">{{ $gpStatus['progress'] }}%</span>
                            </div>

                            <div class="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
                                @foreach ([
                                    ['l' => __('Break-even GP'), 'v' => $gpStatus['break_even'], 's' => false],
                                    ['l' => __('GP Hurdle'), 'v' => $gpStatus['hurdle'], 's' => false],
                                    ['l' => __('Actual GP'), 'v' => $gpStatus['actual_gp'], 's' => false],
                                    ['l' => __('Excess GP'), 'v' => $gpStatus['excess_gp'], 's' => true],
                                ] as $mini)
                                    <div class="rounded-xl bg-slate-50 p-3">
                                        <p class="text-[11px] text-slate-500">{{ $mini['l'] }}</p>
                                        <p class="mt-1 text-sm font-bold tabular-nums {{ $mini['s'] ? $signed($mini['v']) : 'text-slate-900' }}">{{ $baseCode }} {{ $money($mini['v']) }}</p>
                                    </div>
                                @endforeach
                            </div>
                            <p class="mt-3 text-[11px]">
                                <span class="font-semibold {{ $gpStatus['above_break_even'] ? 'text-emerald-600' : 'text-rose-600' }}">{{ $gpStatus['above_break_even'] ? __('Above Break-even') : __('Below Break-even') }}</span>
                                <span class="text-slate-400">·</span>
                                <span class="text-slate-500">{{ $gpStatus['commission_active'] ? __('Commission Eligible') : __('Not Yet Commission Eligible') }}</span>
                            </p>
                        </div>

                        <div class="rounded-2xl border border-slate-100 bg-slate-50/60 p-4">
                            <div class="flex items-center gap-2">
                                <span class="flex h-8 w-8 items-center justify-center rounded-lg {{ $gpStatus['commission_active'] ? 'bg-emerald-100 text-emerald-600' : 'bg-amber-100 text-amber-600' }}">
                                    <x-icon name="gift" class="h-4 w-4" />
                                </span>
                                <div>
                                    <p class="text-[11px] text-slate-400">{{ __('Commission Status') }}</p>
                                    <p class="text-sm font-bold {{ $gpStatus['commission_active'] ? 'text-emerald-600' : 'text-amber-600' }}">
                                        {{ $gpStatus['commission_active'] ? __('Eligible') : __('Not Eligible') }}
                                    </p>
                                </div>
                            </div>
                            <div class="mt-4 space-y-1">
                                <p class="text-[11px] text-slate-400">{{ __('Commission Pool') }}</p>
                                <p class="text-xl font-bold text-slate-900 tabular-nums">{{ $baseCode }} {{ $money($gpStatus['commission_pool']) }}</p>
                            </div>
                            <div class="mt-3 flex items-center justify-between border-t border-slate-200 pt-2 text-xs">
                                <span class="text-slate-500">{{ __('Pool Rate') }}</span>
                                <span class="font-semibold text-slate-700">{{ rtrim(rtrim(number_format($gpStatus['pool_rate_pct'], 1), '0'), '.') }}%</span>
                            </div>
                            @if ($gpStatus['commission_pool'] > 0)
                                <div class="mt-1 flex items-center justify-between text-xs">
                                    <span class="text-slate-500">{{ __('Sales / Prod') }}</span>
                                    <span class="font-medium text-slate-600">{{ $money($gpStatus['sales_pool']) }} / {{ $money($gpStatus['production_pool']) }}</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </x-card>
            </div>

            {{-- Waterfall + the merged profit & margin trend --}}
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                <x-card class="p-6">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Profit Waterfall') }} ({{ $baseCode }})</h3>
                    <p class="text-xs text-slate-500">{{ __('How the amount invoiced becomes net profit.') }}</p>
                    <div wire:ignore wire:key="waterfall-{{ $period }}" class="mt-3"
                        x-data="{
                            chart: null,
                            wf: @js($waterfall),
                            base: @js($baseCode),
                            render() {
                                if (! window.ApexCharts || ! this.$refs.wf) { return; }
                                this.chart = new window.ApexCharts(this.$refs.wf, {
                                    chart: { type: 'rangeBar', height: 320, fontFamily: 'inherit', toolbar: { show: false } },
                                    series: [{ data: this.wf.map(w => ({ x: w.label, y: [w.from, w.to], fillColor: w.color })) }],
                                    plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 3 } },
                                    dataLabels: { enabled: false },
                                    xaxis: { labels: { rotate: -45, style: { colors: '#94a3b8', fontSize: '10px' } }, axisBorder: { show: false }, axisTicks: { show: false } },
                                    yaxis: { labels: { style: { colors: '#94a3b8' }, formatter: (v) => this.base + ' ' + Math.round(v).toLocaleString() } },
                                    grid: { borderColor: '#e2e8f0', strokeDashArray: 4 },
                                    tooltip: { custom: ({ dataPointIndex }) => {
                                        const w = this.wf[dataPointIndex];
                                        return '<div class=\'px-2 py-1 text-xs\'><b>' + w.label + '</b><br>' + this.base + ' ' + Number(w.value).toLocaleString() + '</div>';
                                    } },
                                    noData: { text: @js(__('No data')) },
                                });
                                this.chart.render();
                            },
                        }"
                        x-init="$nextTick(() => render())">
                        <div x-ref="wf"></div>
                    </div>
                </x-card>

                {{-- One chart: money on the left axis, margins on the right. --}}
                <x-card class="p-6">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Profit & Margin Trend') }}</h3>
                    <p class="text-xs text-slate-500">{{ __('Recognised revenue, gross and net profit against the margins they produced (12 months).') }}</p>
                    <div wire:ignore class="mt-3"
                        x-data="{
                            chart: null,
                            data: @js($profitTrend),
                            base: @js($baseCode),
                            render() {
                                if (! window.ApexCharts || ! this.$refs.pt) { return; }
                                const money = (v) => this.base + ' ' + Math.round(v).toLocaleString();
                                const revenue = @js(__('Revenue Recognised'));
                                const grossMargin = @js(__('Gross Margin %'));
                                // Hold the % axis to a readable band. A month that billed
                                // almost nothing against a full month of overheads produces a
                                // margin in the thousands of percent, which would squash every
                                // other line flat; such a month is off the scale by definition.
                                const pcts = this.data.gross_margin.concat(this.data.net_margin);
                                const pctMin = Math.max(-100, Math.min(0, Math.floor(Math.min(...pcts) / 10) * 10));
                                const pctMax = Math.min(100, Math.max(100, Math.ceil(Math.max(...pcts) / 10) * 10));
                                this.chart = new window.ApexCharts(this.$refs.pt, {
                                    chart: { type: 'line', height: 320, fontFamily: 'inherit', toolbar: { show: false } },
                                    series: [
                                        { name: revenue, type: 'column', data: this.data.revenue },
                                        { name: @js(__('Gross Profit')), type: 'line', data: this.data.gross },
                                        { name: @js(__('Net Profit')), type: 'line', data: this.data.net },
                                        { name: grossMargin, type: 'line', data: this.data.gross_margin },
                                        { name: @js(__('Net Margin %')), type: 'line', data: this.data.net_margin },
                                    ],
                                    labels: this.data.labels,
                                    colors: ['#c7d2fe', '#10b981', '#0ea5e9', '#f59e0b', '#8b5cf6'],
                                    stroke: { width: [0, 3, 3, 2, 2], dashArray: [0, 0, 0, 5, 5], curve: 'smooth' },
                                    fill: { opacity: [0.9, 1, 1, 1, 1] },
                                    plotOptions: { bar: { columnWidth: '45%', borderRadius: 3 } },
                                    markers: { size: 0, hover: { size: 4 } },
                                    dataLabels: { enabled: false },
                                    xaxis: { labels: { style: { colors: '#94a3b8', fontSize: '11px' } }, axisBorder: { show: false }, axisTicks: { show: false } },
                                    yaxis: [
                                        { seriesName: revenue, labels: { style: { colors: '#94a3b8' }, formatter: money } },
                                        { seriesName: revenue, show: false },
                                        { seriesName: revenue, show: false },
                                        { seriesName: grossMargin, opposite: true, min: pctMin, max: pctMax, labels: { style: { colors: '#94a3b8' }, formatter: (v) => Math.round(v) + '%' } },
                                        { seriesName: grossMargin, opposite: true, min: pctMin, max: pctMax, show: false },
                                    ],
                                    legend: { position: 'top', horizontalAlign: 'left', fontSize: '11px', markers: { radius: 12 } },
                                    grid: { borderColor: '#e2e8f0', strokeDashArray: 4 },
                                    tooltip: {
                                        shared: true,
                                        y: { formatter: (v, { seriesIndex }) => seriesIndex >= 3 ? Number(v).toFixed(1) + '%' : money(v) },
                                    },
                                    noData: { text: @js(__('No data')) },
                                });
                                this.chart.render();
                            },
                        }"
                        x-init="$nextTick(() => render())">
                        <div x-ref="pt"></div>
                    </div>
                </x-card>
            </div>

            {{-- Forecast + data quality --}}
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                <x-card class="p-6">
                    <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-slate-900">{{ __('Profit Forecast') }}</h3>
                        <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-500">{{ __('Run-rate · :p% elapsed', ['p' => $forecast['elapsed_pct']]) }}</span>
                    </div>
                    <p class="text-xs text-slate-500">{{ __('Projected to period end at the current pace.') }}</p>
                    <div class="mt-4 space-y-2.5 text-sm">
                        @foreach ([
                            ['l' => __('Projected Revenue Recognised'), 'v' => $forecast['revenue'], 'memo' => false],
                            ['l' => __('Projected Gross Profit'), 'v' => $forecast['gross_profit'], 'memo' => false],
                            ['l' => __('Projected Net Profit'), 'v' => $forecast['net_profit'], 'memo' => false],
                            ['l' => __('Projected Cash Collected'), 'v' => $forecast['cash'], 'memo' => true],
                            ['l' => __('Projected Commission Pool'), 'v' => $forecast['commission_pool'], 'memo' => true],
                        ] as $f)
                            <div class="flex items-center justify-between {{ $f['memo'] ? 'text-slate-400' : '' }}">
                                <span class="{{ $f['memo'] ? '' : 'text-slate-500' }}">
                                    {{ $f['l'] }}
                                    @if ($f['memo'])
                                        <span class="ml-1 text-[10px] uppercase tracking-wider">{{ __('cash') }}</span>
                                    @endif
                                </span>
                                <span class="font-semibold tabular-nums {{ $f['memo'] ? 'text-slate-500' : 'text-slate-800' }}">{{ $baseCode }} {{ $money($f['v']) }}</span>
                            </div>
                        @endforeach
                    </div>
                    <div class="mt-4 flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2">
                        <span class="text-xs text-slate-500">{{ __('Forecast Confidence') }}</span>
                        <span class="text-sm font-bold text-emerald-600">{{ $forecast['confidence_label'] }} ({{ $forecast['confidence'] }}%)</span>
                    </div>
                </x-card>

                <x-card class="p-6">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Data Quality') }}</h3>
                    <p class="text-xs text-slate-500">{{ __('Gaps that would make the figures above understate the truth.') }}</p>
                    @if (empty($warnings))
                        <div class="mt-4 flex items-center gap-2 rounded-xl bg-emerald-50 p-3 text-sm text-emerald-700">
                            <x-icon name="check-circle" class="h-5 w-5 shrink-0" />
                            {{ __('No data issues for this period.') }}
                        </div>
                    @else
                        <div class="mt-4 space-y-2.5">
                            @foreach ($warnings as $w)
                                <div class="flex items-center gap-2.5 text-xs">
                                    <span class="inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-amber-100 px-1 text-[10px] font-bold text-amber-800">{{ $w['count'] }}</span>
                                    <span class="text-slate-600">{{ $w['label'] }}</span>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <button type="button" wire:click="switchTab('jobs')" class="mt-4 inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-700">
                        {{ __('View the jobs behind them') }} <x-icon name="arrow-right" class="h-3 w-3" />
                    </button>
                </x-card>
            </div>

        {{-- =====================================================================
             TAB 2 · JOB PROFITABILITY
             ===================================================================== --}}
        @elseif ($tab === 'jobs')

            @unless ($hasData)
                <x-empty-state
                    icon="briefcase"
                    :title="__('No jobs in range')"
                    :message="__('Create jobs, log production costs and time, and link invoices to see job-level profitability here.')"
                />
            @else

            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                {{-- Top 10 most profitable jobs --}}
                <x-card class="p-6 lg:col-span-2">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Top Profitable Jobs') }}</h3>
                    <p class="text-xs text-slate-500">{{ __('Job-costing basis: each job\'s own line items and actual costs.') }}</p>
                    <div class="mt-4 overflow-x-auto">
                        <table class="min-w-full divide-y divide-slate-100 text-sm">
                            <thead>
                                <tr class="text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                    <th class="py-2 pr-3">#</th>
                                    <th class="px-3 py-2">{{ __('Job') }}</th>
                                    <th class="px-3 py-2">{{ __('Customer') }}</th>
                                    <th class="px-3 py-2 text-right">{{ __('Invoiced') }}</th>
                                    <th class="px-3 py-2 text-right">{{ __('GP') }}</th>
                                    <th class="py-2 pl-3 text-right">{{ __('Margin') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @forelse ($topJobs as $i => $row)
                                    <tr class="transition hover:bg-slate-50/70">
                                        <td class="py-2.5 pr-3 text-slate-400">{{ $i + 1 }}</td>
                                        <td class="px-3 py-2.5">
                                            <a href="{{ route('jobs.show', $row['id']) }}" class="font-medium text-indigo-600 hover:text-indigo-700">{{ $row['job_number'] }}</a>
                                        </td>
                                        <td class="px-3 py-2.5 text-slate-600">{{ \Illuminate\Support\Str::limit($row['customer'], 18) }}</td>
                                        <td class="whitespace-nowrap px-3 py-2.5 text-right tabular-nums text-slate-600">{{ $baseCode }} {{ $money($row['invoice_value']) }}</td>
                                        <td class="whitespace-nowrap px-3 py-2.5 text-right font-semibold tabular-nums {{ $signed($row['profit']) }}">{{ $baseCode }} {{ $money($row['profit']) }}</td>
                                        <td class="whitespace-nowrap py-2.5 pl-3 text-right font-semibold tabular-nums {{ $signed($row['margin']) }}">{{ number_format($row['margin'], 1) }}%</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="py-6 text-center text-sm text-slate-400">{{ __('No revenue-generating jobs in range.') }}</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </x-card>

                {{-- Profit leaks --}}
                <x-card class="p-6">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Profit Leaks') }}</h3>
                    <p class="text-xs text-slate-500">{{ __('Attention required.') }}</p>
                    <div class="mt-4 space-y-3">
                        @foreach ($profitLeaks as $leak)
                            <div class="flex items-center justify-between gap-3">
                                <span class="inline-flex min-w-0 items-center gap-2">
                                    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-{{ $leak['tone'] }}-50 text-{{ $leak['tone'] }}-600">
                                        <x-icon name="{{ $leak['icon'] }}" class="h-4 w-4" />
                                    </span>
                                    <span class="truncate text-xs text-slate-600">{{ $leak['label'] }}</span>
                                </span>
                                <span class="flex shrink-0 items-center gap-2 text-right">
                                    @if (! empty($leak['pending']))
                                        <span class="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-400">{{ __('Soon') }}</span>
                                    @else
                                        <span class="text-xs font-bold text-slate-700">{{ $leak['jobs'] }} {{ trans_choice('{1}job|[0,2,*]jobs', $leak['jobs']) }}</span>
                                        @if ($leak['amount'] != 0.0)
                                            <span class="w-20 text-xs font-semibold tabular-nums text-rose-600">{{ $baseCode }} {{ $money($leak['amount']) }}</span>
                                        @endif
                                    @endif
                                </span>
                            </div>
                        @endforeach
                    </div>
                    <a href="#all-jobs" class="mt-4 inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-700">
                        {{ __('View all profit leaks') }} <x-icon name="arrow-right" class="h-3 w-3" />
                    </a>
                </x-card>
            </div>

            {{-- Rework impact (S8, Production metrics) --}}
            <x-card class="p-6">
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Rework Impact Analysis') }}</h3>
                    @if ($rework['high_rework'])
                        <span class="rounded-full bg-rose-50 px-2.5 py-0.5 text-[11px] font-semibold text-rose-700 ring-1 ring-rose-600/20">{{ __('High rework') }}</span>
                    @else
                        <span class="rounded-full bg-emerald-50 px-2.5 py-0.5 text-[11px] font-semibold text-emerald-700 ring-1 ring-emerald-600/20">{{ __('Within threshold') }}</span>
                    @endif
                </div>
                <div class="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-4">
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Reworked Jobs') }}</p>
                        <p class="mt-1 text-2xl font-bold text-slate-900 tabular-nums">{{ $rework['rework_jobs'] }}</p>
                        <p class="text-[10px] text-slate-400">{{ __('of :n completed', ['n' => $rework['cohort']]) }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Rework Rate') }}</p>
                        <p class="mt-1 text-2xl font-bold tabular-nums {{ $rework['high_rework'] ? 'text-rose-600' : 'text-slate-900' }}">{{ number_format($rework['rework_pct'], 1) }}%</p>
                        <p class="text-[10px] text-slate-400">{{ __('threshold :t%', ['t' => number_format($rework['threshold_pct'], 0)]) }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Total Reworks') }}</p>
                        <p class="mt-1 text-2xl font-bold text-slate-900 tabular-nums">{{ $rework['rework_count'] }}</p>
                        <p class="text-[10px] text-slate-400">{{ __('reprints logged') }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Cost Overrun') }}</p>
                        <p class="mt-1 text-2xl font-bold tabular-nums {{ $rework['overrun'] > 0 ? 'text-rose-600' : 'text-slate-900' }}">{{ $rework['overrun_label'] }}</p>
                        <p class="text-[10px] text-slate-400">{{ __('on reworked jobs') }}</p>
                    </div>
                </div>
            </x-card>

            {{-- Overhead absorption → net profit per job (G9, FRS §3) --}}
            <x-card class="p-6" id="overhead-absorption">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                    <div>
                        <h3 class="text-sm font-semibold text-slate-900">{{ __('Overhead Absorption → Net Profit per Job') }}</h3>
                        <p class="text-xs text-slate-500">{{ __('The period\'s overhead nut spread over the jobs that consumed it, so every job carries a net profit and not only a gross one.') }}</p>
                    </div>
                    <div class="flex shrink-0 flex-wrap items-center gap-2">
                        <span class="inline-flex items-center gap-1.5 rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-indigo-600/15">
                            {{ __('Basis') }}: {{ $absorption['basis_label'] }}
                        </span>
                        @if ($absorption['reconciles'])
                            <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700 ring-1 ring-emerald-600/15">
                                <x-icon name="check-circle" class="h-3.5 w-3.5" />{{ __('Reconciled') }}
                            </span>
                        @else
                            <span class="inline-flex items-center gap-1.5 rounded-full bg-rose-50 px-3 py-1 text-xs font-semibold text-rose-700 ring-1 ring-rose-600/15">
                                <x-icon name="exclamation-triangle" class="h-3.5 w-3.5" />{{ __('Does not reconcile') }}
                            </span>
                        @endif
                    </div>
                </div>

                <div class="mt-5 grid grid-cols-2 gap-4 lg:grid-cols-4">
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Period Overheads') }}</p>
                        <p class="mt-1 text-2xl font-bold text-slate-900 tabular-nums">{{ $absorption['overheads_label'] }}</p>
                        <p class="text-[10px] text-slate-400">{{ __('the nut being absorbed') }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Allocated to Jobs') }}</p>
                        <p class="mt-1 text-2xl font-bold tabular-nums {{ $absorption['reconciles'] ? 'text-emerald-600' : 'text-rose-600' }}">{{ $absorption['allocated_label'] }}</p>
                        <p class="text-[10px] text-slate-400">
                            {{ $absorption['unallocated'] > 0.005
                                ? __(':amount unallocated (no job activity)', ['amount' => $absorption['unallocated_label']])
                                : __('adds up to the overhead line exactly') }}
                        </p>
                    </div>
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ $absorption['is_labour_basis'] ? __('Absorption Rate') : __('Allocation Driver') }}</p>
                        <p class="mt-1 text-2xl font-bold text-slate-900 tabular-nums">{{ $absorption['rate_label'] ?? __('Revenue share') }}</p>
                        <p class="text-[10px] {{ $absorption['degraded_to_revenue'] ? 'text-amber-600' : 'text-slate-400' }}">
                            @if ($absorption['is_labour_basis'])
                                {{ __(':driver driver hours (:logged logged)', ['driver' => number_format($absorption['driver_hours'], 1), 'logged' => number_format($absorption['logged_hours'], 1)]) }}
                            @elseif ($absorption['degraded_to_revenue'])
                                {{ __('no time logged this period — fell back to sale value') }}
                            @else
                                {{ __('sharing the nut by sale value') }}
                            @endif
                        </p>
                    </div>
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Jobs Carrying Overhead') }}</p>
                        <p class="mt-1 text-2xl font-bold text-slate-900 tabular-nums">{{ $absorption['jobs'] }}</p>
                        <p class="text-[10px] text-slate-400">
                            {{ $absorption['imputed_jobs'] > 0
                                ? __(':n with no timesheet (hours estimated from revenue)', ['n' => $absorption['imputed_jobs']])
                                : __('all with logged time') }}
                        </p>
                    </div>
                </div>

                {{-- The honesty line. This figure gets used to judge staff and price
                     work, so the screen must never let it be mistaken for cash. --}}
                <div class="mt-5 flex items-start gap-2.5 rounded-xl bg-amber-50 p-3 text-xs text-amber-800 ring-1 ring-amber-600/15">
                    <x-icon name="scale" class="mt-0.5 h-4 w-4 shrink-0" />
                    <p>
                        <span class="font-semibold">{{ __('Per-job net profit is a management allocation, not a cash fact.') }}</span>
                        {{ __('A job\'s absorbed overhead is its share of a company-wide nut (rent, salaries, depreciation) that would have been paid whether the job existed or not. No money left the business "for this job". Read it as: of the capacity we paid for this period, this job used roughly this much.') }}
                    </p>
                </div>

                @if ($absorption['is_partial'])
                    <p class="mt-3 text-[11px] text-slate-400">
                        {{ __('The :n job(s) listed below carry :visible of the :total allocated.', [
                            'n' => $absorption['visible_jobs'],
                            'visible' => $absorption['visible_label'],
                            'total' => $absorption['allocated_label'],
                        ]) }}
                        {{ $absorption['is_filtered']
                            ? __('A filter is active, so the rest sits on jobs outside it.')
                            : __('The rest sits on jobs opened in an earlier period that were still being worked on during this one — the table lists jobs by the date they were opened.') }}
                    </p>
                @endif
            </x-card>

            {{-- Full per-job table (§16) --}}
            <x-card class="p-6" id="all-jobs" x-data="{ q: '', openRow: null }">
                @php $isJobGroup = $groupBy === 'job'; @endphp
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h3 class="text-sm font-semibold text-slate-900">{{ $isJobGroup ? __('All Jobs, Profit Detail') : __('Profitability by Category') }}</h3>
                        <p class="text-xs text-slate-500">{{ __('Job-costing basis (own line items + actual costs).') }}</p>
                    </div>
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                        <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                            @foreach (['job' => __('By job'), 'category' => __('By category')] as $key => $label)
                                <button type="button" wire:click="$set('groupBy', '{{ $key }}')"
                                    class="rounded-lg px-2.5 py-1 transition {{ $groupBy === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                    {{ $label }}
                                </button>
                            @endforeach
                        </div>
                        @if ($isJobGroup)
                            <div class="relative">
                                <x-icon name="magnifying-glass" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                                <input type="search" x-model="q" placeholder="{{ __('Search jobs...') }}"
                                       class="w-full rounded-xl border-slate-200 py-2 pl-9 pr-3 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:w-56" />
                            </div>
                        @endif
                    </div>
                </div>

                <div class="mt-4 overflow-x-auto">
                    @if ($isJobGroup)
                        <table class="min-w-full divide-y divide-slate-100 text-sm">
                            <thead>
                                <tr class="text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                    <th class="py-2 pr-4">{{ __('Job') }}</th>
                                    <th class="px-3 py-2">{{ __('Status') }}</th>
                                    <th class="px-3 py-2">{{ __('Payment') }}</th>
                                    <th class="px-3 py-2 text-right">{{ __('Invoiced') }}</th>
                                    <th class="px-3 py-2 text-right">{{ __('Paid') }}</th>
                                    <th class="px-3 py-2 text-right">{{ __('Cash') }}</th>
                                    <th class="px-3 py-2 text-right">{{ __('Est. Cost') }}</th>
                                    <th class="px-3 py-2 text-right">{{ __('Actual Cost') }}</th>
                                    <th class="px-3 py-2 text-right">{{ __('Gross Profit') }}</th>
                                    <th class="px-3 py-2 text-right">{{ __('Margin') }}</th>
                                    {{-- G9: allocated, not spent. The caption under the table says so. --}}
                                    <th class="whitespace-nowrap px-3 py-2 text-right">{{ __('Overhead') }}</th>
                                    <th class="whitespace-nowrap px-3 py-2 text-right">{{ __('Net Profit') }}</th>
                                    <th class="px-3 py-2 text-center">{{ __('Comm.') }}</th>
                                    <th class="py-2 pl-3">{{ __('Flags') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach ($jobRows as $row)
                                    <tr wire:key="job-{{ $row['id'] }}" class="transition hover:bg-slate-50/70"
                                        x-show="q === '' || @js(strtolower($row['job_number'].' '.$row['title'].' '.$row['customer'].' '.$row['category'])).includes(q.toLowerCase())">
                                        <td class="py-3 pr-4 align-top">
                                            <div class="flex items-start gap-1.5">
                                                {{-- Expands the job-level P&L ladder: revenue → direct costs
                                                     → gross profit → absorbed overhead → net profit. --}}
                                                <button type="button" @click="openRow = (openRow === {{ $row['id'] }} ? null : {{ $row['id'] }})"
                                                        class="mt-0.5 rounded text-slate-300 transition hover:text-indigo-600"
                                                        :aria-expanded="openRow === {{ $row['id'] }}"
                                                        aria-label="{{ __('Show job P&L') }}">
                                                    <x-icon name="chevron-down" class="h-3.5 w-3.5 transition-transform"
                                                            ::class="openRow === {{ $row['id'] }} ? 'rotate-180 text-indigo-600' : ''" />
                                                </button>
                                                <div>
                                                    <a href="{{ route('jobs.show', $row['id']) }}" class="font-medium text-indigo-600 hover:text-indigo-700">{{ $row['job_number'] }}</a>
                                                    <div class="text-xs text-slate-400">{{ \Illuminate\Support\Str::limit($row['customer'].' · '.$row['title'], 36) }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-3 py-3 align-top">
                                            <div class="flex flex-col gap-1">
                                                <x-badge color="slate">{{ $row['status_label'] }}</x-badge>
                                                <x-badge :color="$commColors[$row['commercial_state']] ?? 'slate'">{{ $row['commercial_label'] }}</x-badge>
                                            </div>
                                        </td>
                                        <td class="px-3 py-3 align-top">
                                            @if ($row['payment_status'])
                                                <x-badge :color="$payColors[$row['payment_status']] ?? 'slate'">{{ ucfirst($row['payment_status']) }}</x-badge>
                                            @else
                                                <span class="text-slate-300">—</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-3 text-right align-top tabular-nums text-slate-600">{{ $row['invoice_value'] > 0 ? $baseCode.' '.$money($row['invoice_value']) : '—' }}</td>
                                        <td class="whitespace-nowrap px-3 py-3 text-right align-top tabular-nums text-slate-600">{{ $baseCode }} {{ $money($row['amount_paid']) }}</td>
                                        <td class="whitespace-nowrap px-3 py-3 text-right align-top tabular-nums text-slate-600">{{ $baseCode }} {{ $money($row['cash_collected']) }}</td>
                                        <td class="whitespace-nowrap px-3 py-3 text-right align-top tabular-nums {{ $row['has_estimate'] ? 'text-slate-600' : 'text-slate-300' }}">{{ $row['has_estimate'] ? $baseCode.' '.$money($row['estimated_cost']) : '—' }}</td>
                                        <td class="whitespace-nowrap px-3 py-3 text-right align-top tabular-nums text-slate-600">{{ $baseCode }} {{ $money($row['actual_cost']) }}</td>
                                        <td class="whitespace-nowrap px-3 py-3 text-right align-top font-semibold tabular-nums {{ $signed($row['profit']) }}">{{ $baseCode }} {{ $money($row['profit']) }}</td>
                                        <td class="whitespace-nowrap px-3 py-3 text-right align-top font-semibold tabular-nums {{ $signed($row['margin']) }}">{{ number_format($row['margin'], 1) }}%</td>
                                        <td class="whitespace-nowrap px-3 py-3 text-right align-top tabular-nums text-slate-500">
                                            @if ($row['absorbed_overhead'] > 0)
                                                {{ $baseCode }} {{ $money($row['absorbed_overhead']) }}
                                                @if ($row['overhead_imputed'])
                                                    <span class="block text-[10px] text-amber-600" title="{{ __('No timesheet on this job — hours estimated from its revenue.') }}">{{ __('est. hours') }}</span>
                                                @endif
                                            @else
                                                <span class="text-slate-300">—</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-3 text-right align-top font-semibold tabular-nums {{ $signed($row['net_profit']) }}">
                                            {{ $baseCode }} {{ $money($row['net_profit']) }}
                                            <span class="block text-[10px] font-normal text-slate-400">{{ number_format($row['net_margin'], 1) }}%</span>
                                        </td>
                                        <td class="px-3 py-3 text-center align-top">
                                            @if ($row['commission_eligible'] === true)
                                                <x-badge color="emerald">{{ __('Eligible') }}</x-badge>
                                            @elseif ($row['commission_eligible'] === false)
                                                <span class="text-xs text-slate-400">{{ __('No') }}</span>
                                            @else
                                                <span class="text-slate-300">—</span>
                                            @endif
                                        </td>
                                        <td class="py-3 pl-3 align-top">
                                            @if (empty($row['flags']))
                                                <span class="text-slate-300">—</span>
                                            @else
                                                <div class="flex flex-wrap gap-1">
                                                    @foreach ($row['flags'] as $flag)
                                                        <x-badge :color="$flag['tone'] === 'red' ? 'rose' : 'amber'">{{ $flag['label'] }}</x-badge>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </td>
                                    </tr>

                                    {{-- Job-level P&L drill-down (G9). Same ladder the job's
                                         Costs & Materials tab shows, from the same service. --}}
                                    <tr x-show="openRow === {{ $row['id'] }}" x-cloak wire:key="pnl-{{ $row['id'] }}">
                                        <td colspan="14" class="bg-slate-50 px-4 py-4">
                                            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                                                <div class="min-w-0 flex-1">
                                                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Job P&L') }} · {{ $row['job_number'] }}</p>
                                                    <dl class="mt-2 max-w-md divide-y divide-slate-200 text-sm">
                                                        <div class="flex items-baseline justify-between gap-4 py-1.5">
                                                            <dt class="text-slate-600">{{ __('Revenue (attributable)') }}</dt>
                                                            <dd class="whitespace-nowrap font-medium text-slate-900 tabular-nums">{{ $baseCode }} {{ $money($row['revenue']) }}</dd>
                                                        </div>
                                                        <div class="flex items-baseline justify-between gap-4 py-1.5">
                                                            <dt class="pl-3 text-slate-500">{{ __('less Materials & other direct costs') }}</dt>
                                                            <dd class="whitespace-nowrap text-slate-600 tabular-nums">({{ $money($row['materials']) }})</dd>
                                                        </div>
                                                        <div class="flex items-baseline justify-between gap-4 py-1.5">
                                                            <dt class="pl-3 text-slate-500">{{ __('less Direct labour') }}</dt>
                                                            <dd class="whitespace-nowrap text-slate-600 tabular-nums">({{ $money($row['labour']) }})</dd>
                                                        </div>
                                                        <div class="flex items-baseline justify-between gap-4 py-1.5">
                                                            <dt class="font-semibold text-slate-700">{{ __('Gross Profit') }}</dt>
                                                            <dd class="whitespace-nowrap font-semibold tabular-nums {{ $signed($row['profit']) }}">{{ $baseCode }} {{ $money($row['profit']) }}</dd>
                                                        </div>
                                                        <div class="flex items-baseline justify-between gap-4 py-1.5">
                                                            <dt class="pl-3 text-slate-500">
                                                                {{ __('less Absorbed overhead') }}
                                                                <span class="block text-[10px] text-slate-400">
                                                                    {{ $absorption['basis_label'] }}@if ($absorption['is_labour_basis'] && $row['overhead_hours'] > 0) · {{ number_format($row['overhead_hours'], 1) }} {{ __('hrs') }} × {{ $absorption['rate_label'] }}@endif
                                                                </span>
                                                            </dt>
                                                            <dd class="whitespace-nowrap text-slate-600 tabular-nums">({{ $money($row['absorbed_overhead']) }})</dd>
                                                        </div>
                                                        <div class="flex items-baseline justify-between gap-4 border-t-2 border-slate-300 py-1.5">
                                                            <dt class="font-bold text-slate-800">{{ __('Net Profit') }}</dt>
                                                            <dd class="whitespace-nowrap font-bold tabular-nums {{ $signed($row['net_profit']) }}">{{ $baseCode }} {{ $money($row['net_profit']) }}</dd>
                                                        </div>
                                                    </dl>
                                                </div>
                                                <div class="max-w-sm space-y-2 text-[11px] text-slate-500">
                                                    <p><span class="font-semibold text-slate-600">{{ __('Absorbed overhead is a management allocation, not a cash fact.') }}</span> {{ __('It is this job\'s share of the period nut, not money the job spent.') }}</p>
                                                    @if ($row['overhead_imputed'])
                                                        <p class="text-amber-600">{{ __('No time was logged on this job, so its hours were estimated from its revenue. Logging time makes the share accurate.') }}</p>
                                                    @endif
                                                    @if ($row['provisional'])
                                                        <p class="text-amber-600">{{ __('This job is still live work — its share will move as more time and cost land on it.') }}</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <p class="mt-3 text-[11px] text-slate-400">
                            {{ __('Per-job figures use each job\'s own line items + actual costs (job-costing basis), separate from the company summary above. Invoiced / paid / cash are invoice-level, so jobs sharing one invoice show that invoice\'s figures.') }}
                            {{ __('Overhead is allocated, not spent: it is the job\'s share of the period nut, so Net Profit is a management allocation rather than a cash fact. Expand a row for the full ladder.') }}
                            @if ($hasActivePlans)
                                {{ __('Commission eligibility reflects the workspace\'s active commission model.') }}
                            @endif
                        </p>
                    @else
                        <table class="min-w-full divide-y divide-slate-100 text-sm">
                            <thead>
                                <tr class="text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                    <th class="py-2 pr-4">{{ __('Category') }}</th>
                                    <th class="px-4 py-2 text-right">{{ __('Jobs') }}</th>
                                    <th class="px-4 py-2 text-right">{{ __('Revenue') }}</th>
                                    <th class="px-4 py-2 text-right">{{ __('Cost') }}</th>
                                    <th class="px-4 py-2 text-right">{{ __('Profit') }}</th>
                                    <th class="py-2 pl-4 text-right">{{ __('Margin') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach ($byCategory as $row)
                                    <tr class="transition hover:bg-slate-50/70">
                                        <td class="py-3 pr-4 font-medium text-slate-900">{{ $row['category'] }}</td>
                                        <td class="px-4 py-3 text-right tabular-nums text-slate-600">{{ $row['jobs'] }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 text-right tabular-nums text-slate-600">{{ $baseCode }} {{ $money($row['revenue']) }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 text-right tabular-nums text-slate-600">{{ $baseCode }} {{ $money($row['cost']) }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 text-right font-semibold tabular-nums {{ $signed($row['profit']) }}">{{ $baseCode }} {{ $money($row['profit']) }}</td>
                                        <td class="whitespace-nowrap py-3 pl-4 text-right font-semibold tabular-nums {{ $signed($row['margin']) }}">{{ number_format($row['margin'], 1) }}%</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
            </x-card>

            {{-- Top customers by GP --}}
            <x-card class="p-6">
                <h3 class="text-sm font-semibold text-slate-900">{{ __('Top Customers by Gross Profit') }}</h3>
                <div class="mt-4 overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100 text-sm">
                        <thead>
                            <tr class="text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                <th class="py-2 pr-3">{{ __('Customer') }}</th>
                                <th class="px-3 py-2 text-right">{{ __('Revenue') }}</th>
                                <th class="px-3 py-2 text-right">{{ __('GP') }}</th>
                                <th class="px-3 py-2 text-right">{{ __('Margin') }}</th>
                                <th class="py-2 pl-3 text-right">{{ __('Jobs') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($topCustomers as $c)
                                <tr class="transition hover:bg-slate-50/70">
                                    <td class="py-2.5 pr-3 font-medium text-slate-700">{{ \Illuminate\Support\Str::limit($c['customer'], 28) }}</td>
                                    <td class="whitespace-nowrap px-3 py-2.5 text-right tabular-nums text-slate-600">{{ $baseCode }} {{ $money($c['revenue']) }}</td>
                                    <td class="whitespace-nowrap px-3 py-2.5 text-right font-semibold tabular-nums {{ $signed($c['gp']) }}">{{ $baseCode }} {{ $money($c['gp']) }}</td>
                                    <td class="whitespace-nowrap px-3 py-2.5 text-right tabular-nums text-slate-600">{{ number_format($c['margin'], 1) }}%</td>
                                    <td class="whitespace-nowrap py-2.5 pl-3 text-right tabular-nums text-slate-500">{{ $c['jobs'] }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="py-6 text-center text-sm text-slate-400">{{ __('No customer profit in range.') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
            @endunless

        {{-- =====================================================================
             TAB 3 · COST & MARGIN
             ===================================================================== --}}
        @else

            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-4">
                {{-- Cost breakdown donut --}}
                <x-card class="p-6">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Cost Breakdown') }}</h3>
                    @if ($costDonut->isEmpty())
                        <p class="py-10 text-center text-sm text-slate-400">{{ __('No costs in range.') }}</p>
                    @else
                        <div wire:ignore class="mt-3 flex justify-center"
                            x-data="{
                                chart: null,
                                render() {
                                    if (! window.ApexCharts || ! this.$refs.cd) { return; }
                                    this.chart = new window.ApexCharts(this.$refs.cd, {
                                        chart: { type: 'donut', height: 200 },
                                        series: @js($costDonut->pluck('value')->map(fn ($v) => (float) $v)->all()),
                                        labels: @js($costDonut->pluck('label')->all()),
                                        colors: @js($costDonut->pluck('hex')->all()),
                                        stroke: { width: 2, colors: ['#fff'] },
                                        plotOptions: { pie: { donut: { size: '70%' } } },
                                        dataLabels: { enabled: false },
                                        legend: { show: false },
                                        tooltip: { y: { formatter: (v) => @js($baseCode) + ' ' + Number(v).toLocaleString() } },
                                    });
                                    this.chart.render();
                                },
                            }"
                            x-init="$nextTick(() => render())">
                            <div x-ref="cd"></div>
                        </div>
                        <div class="mt-4 space-y-2">
                            @foreach ($costDonut as $slice)
                                <div class="flex items-center justify-between text-xs">
                                    <span class="inline-flex items-center gap-2">
                                        <span class="h-2.5 w-2.5 rounded-full {{ $slice['dot'] }}"></span>
                                        <span class="text-slate-600">{{ $slice['label'] }}</span>
                                    </span>
                                    <span class="font-medium text-slate-700 tabular-nums">{{ $slice['pct'] }}%</span>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </x-card>

                {{-- Cost trend --}}
                <x-card class="p-6 xl:col-span-2">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Cost Trend Over Time') }} ({{ $baseCode }})</h3>
                    <p class="text-xs text-slate-500">{{ __('Direct costs against the overhead nut, 12 months.') }}</p>
                    <div wire:ignore class="mt-3"
                        x-data="{
                            chart: null,
                            data: @js($costTrend),
                            base: @js($baseCode),
                            render() {
                                if (! window.ApexCharts || ! this.$refs.ct) { return; }
                                this.chart = new window.ApexCharts(this.$refs.ct, {
                                    chart: { type: 'area', height: 240, fontFamily: 'inherit', toolbar: { show: false } },
                                    series: [
                                        { name: @js(__('Direct Costs (COGS)')), data: this.data.cogs },
                                        { name: @js(__('Overheads')), data: this.data.overheads },
                                    ],
                                    labels: this.data.labels,
                                    colors: ['#f59e0b', '#94a3b8'],
                                    stroke: { width: 2, curve: 'smooth' },
                                    fill: { type: 'gradient', gradient: { opacityFrom: 0.3, opacityTo: 0.05 } },
                                    dataLabels: { enabled: false },
                                    xaxis: { labels: { style: { colors: '#94a3b8', fontSize: '11px' } }, axisBorder: { show: false }, axisTicks: { show: false } },
                                    yaxis: { labels: { style: { colors: '#94a3b8' }, formatter: (v) => this.base + ' ' + Math.round(v).toLocaleString() } },
                                    legend: { position: 'top', horizontalAlign: 'left', fontSize: '12px', markers: { radius: 12 } },
                                    grid: { borderColor: '#e2e8f0', strokeDashArray: 4 },
                                    tooltip: { shared: true, y: { formatter: (v) => this.base + ' ' + Number(v).toLocaleString() } },
                                    noData: { text: @js(__('No data')) },
                                });
                                this.chart.render();
                            },
                        }"
                        x-init="$nextTick(() => render())">
                        <div x-ref="ct"></div>
                    </div>
                </x-card>

                {{-- Cost variance --}}
                <x-card class="p-6">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Cost Variance') }}</h3>
                    @if ($costVariance['has_data'])
                        <div class="mt-4 space-y-3 text-sm">
                            <div class="flex items-center justify-between">
                                <span class="text-slate-500">{{ __('Estimated') }}</span>
                                <span class="font-semibold text-slate-700 tabular-nums">{{ $baseCode }} {{ $money($costVariance['estimated']) }}</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-slate-500">{{ __('Actual') }}</span>
                                <span class="font-semibold text-slate-700 tabular-nums">{{ $baseCode }} {{ $money($costVariance['actual']) }}</span>
                            </div>
                            <div class="flex items-center justify-between border-t border-slate-100 pt-3">
                                <span class="text-slate-500">{{ __('Variance') }}</span>
                                <span class="font-semibold tabular-nums {{ $costVariance['variance'] <= 0 ? 'text-emerald-600' : 'text-rose-600' }}">{{ $baseCode }} {{ $money($costVariance['variance']) }}</span>
                            </div>
                        </div>
                        <div class="mt-4 rounded-xl p-3 text-center {{ $costVariance['pct'] <= 0 ? 'bg-emerald-50' : 'bg-rose-50' }}">
                            <p class="text-2xl font-bold tabular-nums {{ $costVariance['pct'] <= 0 ? 'text-emerald-600' : 'text-rose-600' }}">{{ $costVariance['pct'] > 0 ? '+' : '' }}{{ number_format($costVariance['pct'], 1) }}%</p>
                            <p class="text-[11px] text-slate-500">{{ $costVariance['pct'] <= 0 ? __('Under budget') : __('Over budget') }} · {{ $costVariance['jobs'] }} {{ __('jobs') }}</p>
                        </div>
                    @else
                        <p class="py-10 text-center text-sm text-slate-400">{{ __('No jobs with a cost estimate in range.') }}</p>
                    @endif
                </x-card>
            </div>

            {{-- Category profitability heatmap --}}
            <x-card class="p-6">
                <h3 class="text-sm font-semibold text-slate-900">{{ __('Category Profitability Heatmap') }}</h3>
                <p class="text-xs text-slate-500">{{ __('Where the profit is, banded against the rest of the set.') }}</p>
                @if (empty($heatmap))
                    <p class="py-8 text-center text-sm text-slate-400">{{ __('No category data in range.') }}</p>
                @else
                    <div class="mt-4 overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                    <th class="py-2 pr-4">{{ __('Category') }}</th>
                                    <th class="px-3 py-2 text-center">{{ __('Revenue') }}</th>
                                    <th class="px-3 py-2 text-center">{{ __('Cost') }}</th>
                                    <th class="px-3 py-2 text-center">{{ __('GP') }}</th>
                                    <th class="py-2 pl-3 text-center">{{ __('Margin') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($heatmap as $h)
                                    <tr class="border-t border-slate-100">
                                        <td class="py-2 pr-4 font-medium text-slate-700">{{ $h['category'] }}</td>
                                        @foreach (['revenue', 'cost', 'gp', 'margin'] as $col)
                                            <td class="px-2 py-2 text-center">
                                                <span class="inline-block w-full rounded-md px-2 py-1 text-[11px] font-semibold capitalize {{ $heat[$h[$col]] ?? $heat['low'] }}">
                                                    {{ $col === 'margin' ? number_format($h['margin_pct'], 0) . '%' : __(ucfirst($h[$col])) }}
                                                </span>
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3 flex items-center gap-4 text-[11px] text-slate-400">
                        <span class="inline-flex items-center gap-1"><span class="h-2.5 w-2.5 rounded bg-emerald-100"></span>{{ __('High') }}</span>
                        <span class="inline-flex items-center gap-1"><span class="h-2.5 w-2.5 rounded bg-amber-100"></span>{{ __('Medium') }}</span>
                        <span class="inline-flex items-center gap-1"><span class="h-2.5 w-2.5 rounded bg-rose-100"></span>{{ __('Low') }}</span>
                    </div>
                @endif
            </x-card>

        @endif

        <p class="pt-2 text-center text-xs text-slate-400">
            {{ __('All amounts are in :code and converted to your base currency. Gross and net profit are on the accrual basis (revenue recognised less costs); cash collected, receivables and the commission ladder are cash-basis and labelled where they appear. Per-job figures use job costing.', ['code' => $baseCode]) }}
        </p>

    </div>
</div>