@php
    $measures = ['unit' => __('Unit'), 'area' => __('Area (m²)'), 'linear' => __('Linear (m)')];
@endphp
<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        {{-- Breadcrumb + heading --}}
        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <nav class="flex items-center gap-2 text-sm text-slate-400">
                    <a href="{{ route('costing.worksheets.index') }}" wire:navigate class="transition hover:text-slate-600">{{ __('Job Costing') }}</a>
                    <span class="text-slate-300">/</span>
                    <span class="font-medium text-slate-500">{{ $worksheetId ? __('Edit worksheet') : __('New worksheet') }}</span>
                </nav>
                <h1 class="mt-2 flex items-center gap-2 text-2xl font-bold tracking-tight text-slate-900">
                    <span class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-sm"><i class="fa-solid fa-calculator text-base"></i></span>
                    {{ __('Job Costing Studio') }}
                </h1>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                @if ($worksheetId)
                    <x-notes-button variant="button" type="costing-worksheet" :id="$worksheetId" :count="$noteCount" :title="$title" />
                @endif
                <x-secondary-button wire:click="save" wire:loading.attr="disabled">
                    <i class="fa-regular fa-floppy-disk mr-1.5"></i>{{ __('Save') }}
                </x-secondary-button>
                <x-button wire:click="createQuote" wire:loading.attr="disabled">
                    <i class="fa-solid fa-file-invoice-dollar mr-1.5"></i>{{ __('Create quote') }}
                </x-button>
            </div>
        </div>

        {{-- Details --}}
        <x-card class="p-6">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-6">
                <div class="sm:col-span-3">
                    <x-label for="ws-title" value="{{ __('Job title') }}" />
                    <x-input id="ws-title" type="text" class="mt-1 block w-full" wire:model="title" placeholder="{{ __('e.g. Bravo Paints, office signage') }}" />
                    <x-input-error for="title" class="mt-1" />
                </div>
                <div class="sm:col-span-3">
                    <x-label for="ws-customer" value="{{ __('Customer (optional)') }}" />
                    <select id="ws-customer" wire:model="customer_id" 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="">{{ __('— None —') }}</option>
                        @foreach ($customers as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-4">
                <div>
                    <x-label for="ws-profit" value="{{ __('Default profit %') }}" />
                    <x-input id="ws-profit" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.500ms="default_profit_pct" />
                    <p class="mt-1 text-[11px] text-slate-400">{{ __('Applied to new deliverables.') }}</p>
                </div>
                <div>
                    <x-label for="ws-misc" value="{{ __('Default misc %') }}" />
                    <x-input id="ws-misc" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.500ms="default_misc_pct" />
                </div>
                <div class="col-span-2">
                    <x-label for="ws-job" value="{{ __('Reconcile against job (optional)') }}" />
                    <select id="ws-job" wire:model.live="job_id" 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="">{{ __('— Not linked —') }}</option>
                        @foreach ($jobs as $job)
                            <option value="{{ $job->id }}">{{ $job->job_number }}, {{ \Illuminate\Support\Str::limit($job->title, 40) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
                <label class="flex items-center gap-2">
                    <x-checkbox wire:model="is_template" />
                    <span class="text-sm text-slate-600">{{ __('Save as a reusable template') }}</span>
                </label>
                @if (! empty($templateKeys))
                    <div class="flex flex-wrap items-center gap-1.5">
                        <span class="text-[11px] font-medium uppercase tracking-wide text-slate-400">{{ __('Add from template') }}</span>
                        @foreach ($templateKeys as $key => $label)
                            <button type="button" wire:click="addDeliverable('{{ $key }}')" class="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-medium text-slate-600 transition hover:border-indigo-300 hover:text-indigo-700">
                                {{ __($label) }}
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>
        </x-card>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            {{-- ============ Canvas ============ --}}
            <div class="space-y-4 lg:col-span-2">
                {{-- Deliverable tabs --}}
                <div class="flex flex-wrap items-center gap-1.5">
                    @foreach ($deliverables as $di => $d)
                        @php $dt = $this->deliverableTotals($di); @endphp
                        <button type="button" wire:click="selectDeliverable({{ $di }})" wire:key="tab-{{ $d['id'] ?? $di }}"
                            class="flex items-baseline gap-2 rounded-t-lg border px-3.5 py-2 text-sm font-semibold transition {{ $activeDeliverable === $di ? 'border-indigo-400 bg-white text-slate-900 shadow-[inset_0_-2px_0_theme(colors.indigo.500)]' : 'border-slate-200 bg-slate-50 text-slate-500 hover:text-slate-700' }}">
                            {{ $d['title'] ?: __('Deliverable :n', ['n' => $di + 1]) }}
                            <span class="text-[11px] font-medium tabular-nums {{ $activeDeliverable === $di ? 'text-indigo-500' : 'text-slate-400' }}">{{ $baseCode }} {{ number_format($dt['price'], 2) }}</span>
                        </button>
                    @endforeach
                    <button type="button" wire:click="addDeliverable" class="rounded-t-lg border border-dashed border-slate-300 px-3 py-2 text-sm font-medium text-indigo-600 transition hover:bg-indigo-50">
                        <i class="fa-solid fa-plus mr-1"></i>{{ __('Deliverable') }}
                    </button>
                </div>

                {{-- Active deliverable --}}
                @php $d = $deliverables[$activeDeliverable] ?? null; $di = $activeDeliverable; @endphp
                @if ($d)
                    @php $dt = $this->deliverableTotals($di); @endphp
                    <x-card class="overflow-hidden p-0" wire:key="del-{{ $d['id'] }}">
                        {{-- Deliverable header --}}
                        <div class="flex flex-col gap-3 border-b border-slate-100 bg-slate-50/60 p-4 sm:flex-row sm:items-end sm:justify-between">
                            <div class="flex-1">
                                <label class="text-[11px] font-medium uppercase tracking-wide text-slate-400">{{ __('Deliverable') }}</label>
                                <x-input type="text" class="mt-1 block w-full font-semibold" wire:model.blur="deliverables.{{ $di }}.title" placeholder="{{ __('e.g. Office 1, Contravision') }}" />
                            </div>
                            <div class="flex items-end gap-2">
                                <div class="w-20">
                                    <label class="text-[11px] font-medium uppercase tracking-wide text-slate-400">{{ __('Qty') }}</label>
                                    <x-input type="number" step="0.01" min="0" class="mt-1 block w-full text-sm" wire:model.live.debounce.500ms="deliverables.{{ $di }}.qty" />
                                </div>
                                <div class="w-24">
                                    <label class="text-[11px] font-medium uppercase tracking-wide text-slate-400">{{ __('Profit %') }}</label>
                                    <x-input type="number" step="0.01" min="0" class="mt-1 block w-full text-sm" wire:model.live.debounce.500ms="deliverables.{{ $di }}.profit_pct" />
                                </div>
                                <div class="w-20">
                                    <label class="text-[11px] font-medium uppercase tracking-wide text-slate-400">{{ __('Misc %') }}</label>
                                    <x-input type="number" step="0.01" min="0" class="mt-1 block w-full text-sm" wire:model.live.debounce.500ms="deliverables.{{ $di }}.misc_pct" />
                                </div>
                                <button type="button" wire:click="duplicateDeliverable({{ $di }})" title="{{ __('Duplicate') }}" class="mb-0.5 flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-500 transition hover:bg-slate-100"><i class="fa-regular fa-copy text-sm"></i></button>
                                <button type="button" wire:click="removeDeliverable({{ $di }})" title="{{ __('Remove') }}" class="mb-0.5 flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-rose-500 transition hover:bg-rose-50"><i class="fa-solid fa-trash text-sm"></i></button>
                            </div>
                        </div>

                        {{-- Sections --}}
                        @foreach ($d['sections'] as $si => $section)
                            <div class="border-b border-slate-100" wire:key="sec-{{ $section['id'] }}">
                                <div class="flex items-center justify-between gap-2 bg-slate-50/40 px-4 py-2">
                                    <div class="flex items-center gap-2">
                                        <span class="flex h-6 w-6 items-center justify-center rounded-md border border-slate-200 bg-white text-[11px] font-bold text-slate-400">{{ chr(65 + $si) }}</span>
                                        <input type="text" wire:model.blur="deliverables.{{ $di }}.sections.{{ $si }}.title"
                                            class="border-0 border-b border-transparent bg-transparent px-0 py-0.5 text-xs font-bold uppercase tracking-wide text-slate-600 focus:border-indigo-400 focus:ring-0" />
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <span class="text-sm font-bold tabular-nums text-slate-700">{{ $baseCode }} {{ number_format($this->sectionSubtotal($di, $si), 2) }}</span>
                                        <button type="button" wire:click="removeSection({{ $di }}, {{ $si }})" class="text-slate-300 transition hover:text-rose-500" title="{{ __('Remove section') }}"><i class="fa-solid fa-xmark text-xs"></i></button>
                                    </div>
                                </div>

                                {{-- Lines --}}
                                <div class="divide-y divide-slate-50">
                                    @forelse ($section['lines'] as $li => $line)
                                        <div class="px-3 py-2" wire:key="line-{{ $line['id'] }}">
                                            <div class="flex items-start gap-2">
                                                <x-input type="text" class="block w-full text-sm" wire:model.blur="deliverables.{{ $di }}.sections.{{ $si }}.lines.{{ $li }}.description" placeholder="{{ __('Description, e.g. Window 1 (1.71 × 0.5m)') }}" />
                                                <button type="button" wire:click="removeLine({{ $di }}, {{ $si }}, {{ $li }})" class="mt-1.5 shrink-0 text-slate-300 transition hover:text-rose-500" title="{{ __('Remove') }}"><i class="fa-solid fa-xmark"></i></button>
                                            </div>
                                            <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-xs text-slate-500">
                                                <select wire:model.live="deliverables.{{ $di }}.sections.{{ $si }}.lines.{{ $li }}.category" class="w-32 rounded-md border-slate-200 py-1 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                                    @foreach ($costCategories as $value => $label)
                                                        <option value="{{ $value }}">{{ __($label) }}</option>
                                                    @endforeach
                                                </select>
                                                @php $stockMat = ($line['kind'] ?? '') === 'material' && ($line['source'] ?? '') === 'stock'; @endphp
                                                @if ($stockMat)
                                                    <span class="inline-flex items-center gap-1 rounded-md bg-emerald-50 px-2 py-1 font-medium text-emerald-700"><i class="fa-solid fa-cubes-stacked text-[10px]"></i>{{ __('stock · m²/offcut') }}</span>
                                                    <span class="ml-auto font-mono font-semibold text-slate-700">= {{ $baseCode }} {{ number_format($this->lineCost($line), 2) }}</span>
                                                @else
                                                    <select wire:model.live="deliverables.{{ $di }}.sections.{{ $si }}.lines.{{ $li }}.measure" class="w-28 rounded-md border-slate-200 py-1 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                                        @foreach ($measures as $mv => $ml)
                                                            <option value="{{ $mv }}">{{ $ml }}</option>
                                                        @endforeach
                                                    </select>
                                                    @if (($line['measure'] ?? 'unit') === 'area')
                                                        <div class="flex items-center gap-1">
                                                            <x-input type="number" step="0.0001" min="0" class="w-16 py-1 text-xs" placeholder="{{ __('W') }}" wire:model.live.debounce.500ms="deliverables.{{ $di }}.sections.{{ $si }}.lines.{{ $li }}.w" />
                                                            <span class="text-slate-300">×</span>
                                                            <x-input type="number" step="0.0001" min="0" class="w-16 py-1 text-xs" placeholder="{{ __('H') }}" wire:model.live.debounce.500ms="deliverables.{{ $di }}.sections.{{ $si }}.lines.{{ $li }}.h" />
                                                            <span class="whitespace-nowrap text-[11px] text-slate-400">= {{ number_format((float) ($line['w'] ?? 0) * (float) ($line['h'] ?? 0), 2) }} m²</span>
                                                        </div>
                                                    @elseif (($line['measure'] ?? 'unit') === 'linear')
                                                        <x-input type="number" step="0.0001" min="0" class="w-20 py-1 text-xs" placeholder="{{ __('Length m') }}" wire:model.live.debounce.500ms="deliverables.{{ $di }}.sections.{{ $si }}.lines.{{ $li }}.length_m" />
                                                    @endif
                                                    <div class="flex items-center gap-1">
                                                        <span class="text-[10px] uppercase text-slate-400">{{ __('Unit') }} {{ $baseCode }}</span>
                                                        <x-input type="number" step="0.0001" min="0" class="w-20 py-1 text-xs" wire:model.live.debounce.500ms="deliverables.{{ $di }}.sections.{{ $si }}.lines.{{ $li }}.unit_cost" />
                                                    </div>
                                                    <div class="flex items-center gap-1">
                                                        <span class="text-[10px] uppercase text-slate-400">{{ __('Qty') }}</span>
                                                        <x-input type="number" step="0.01" min="0" class="w-16 py-1 text-xs" wire:model.live.debounce.500ms="deliverables.{{ $di }}.sections.{{ $si }}.lines.{{ $li }}.qty" />
                                                    </div>
                                                    <span class="ml-auto font-mono font-semibold text-slate-700">= {{ $baseCode }} {{ number_format($this->lineCost($line), 2) }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    @empty
                                        <p class="px-4 py-3 text-center text-xs text-slate-400">{{ __('No lines yet, add a cost line or a stock material below.') }}</p>
                                    @endforelse
                                </div>

                                {{-- Add line + calculator --}}
                                <div class="flex flex-wrap items-center gap-2 px-3 py-2">
                                    <button type="button" wire:click="addCostLine({{ $di }}, {{ $si }}, '{{ $section['key'] === 'materials' ? 'material' : ($section['key'] === 'finishing' ? 'finishing' : ($section['key'] === 'installation' ? 'installation' : 'labour')) }}')"
                                        class="inline-flex items-center gap-1 rounded-lg border border-slate-200 px-2.5 py-1 text-xs font-medium text-slate-600 transition hover:border-indigo-300 hover:text-indigo-700"><i class="fa-solid fa-plus"></i>{{ __('Cost line') }}</button>
                                    <button type="button" wire:click="openMaterialCalc({{ $di }}, {{ $si }})"
                                        class="inline-flex items-center gap-1 rounded-lg border border-slate-200 px-2.5 py-1 text-xs font-medium text-slate-600 transition hover:border-violet-300 hover:text-violet-700"><i class="fa-solid fa-ruler-combined"></i>{{ __('Stock material') }}</button>
                                </div>

                                @if ($calcTargetDi === $di && $calcTargetSi === $si)
                                    @include('livewire.costing.partials.material-calculator', ['di' => $di, 'si' => $si])
                                @endif
                            </div>
                        @endforeach

                        {{-- Add section --}}
                        <div class="flex flex-wrap items-center gap-1.5 px-4 py-3">
                            <span class="text-[11px] font-medium uppercase tracking-wide text-slate-400">{{ __('Add section') }}</span>
                            @foreach ($sectionPresets as $key => $label)
                                <button type="button" wire:click="addSection({{ $di }}, '{{ $key }}')" class="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-medium text-slate-600 transition hover:border-indigo-300 hover:text-indigo-700">{{ __($label) }}</button>
                            @endforeach
                        </div>

                        {{-- Deliverable price build-up --}}
                        <div class="grid grid-cols-2 gap-px border-t border-slate-100 bg-slate-100 sm:grid-cols-4">
                            <div class="bg-white p-3">
                                <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Production cost') }}</p>
                                <p class="mt-1 text-lg font-bold tabular-nums text-slate-900">{{ $baseCode }} {{ number_format($dt['cost'], 2) }}</p>
                            </div>
                            <div class="bg-white p-3">
                                <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Profit :p%', ['p' => rtrim(rtrim(number_format((float) ($d['profit_pct'] ?? 0), 2), '0'), '.')]) }}</p>
                                <p class="mt-1 text-lg font-bold tabular-nums text-slate-700">+ {{ number_format($dt['profit'], 2) }}</p>
                            </div>
                            <div class="bg-white p-3">
                                <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Misc :p%', ['p' => rtrim(rtrim(number_format((float) ($d['misc_pct'] ?? 0), 2), '0'), '.')]) }}</p>
                                <p class="mt-1 text-lg font-bold tabular-nums text-slate-700">+ {{ number_format($dt['misc'], 2) }}</p>
                            </div>
                            <div class="bg-indigo-50 p-3">
                                <p class="text-[10px] uppercase tracking-wide text-indigo-400">{{ __('Final price') }}</p>
                                <p class="mt-1 text-lg font-bold tabular-nums text-indigo-700">{{ $baseCode }} {{ number_format($dt['price'], 2) }}</p>
                                @if ($dt['margin'] !== null)<p class="text-[11px] text-indigo-400">{{ __('margin :m%', ['m' => number_format($dt['margin'], 1)]) }}</p>@endif
                            </div>
                        </div>
                    </x-card>
                @endif
            </div>

            {{-- ============ Summary rail ============ --}}
            <div class="space-y-4">
                <div class="lg:sticky lg:top-6 lg:space-y-4">
                    {{-- Job total --}}
                    <x-card class="p-5">
                        <div class="flex items-center justify-between">
                            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ __('Job total') }}</p>
                            <span class="text-[11px] text-slate-400">{{ trans_choice(':count deliverable|:count deliverables', count($deliverables), ['count' => count($deliverables)]) }}</span>
                        </div>
                        <div class="mt-2 flex items-end justify-between gap-2">
                            <p class="text-3xl font-extrabold tabular-nums text-slate-900">{{ $baseCode }} {{ number_format($totals['price'], 2) }}</p>
                            @if ($totals['margin'] !== null)
                                <span class="rounded-full bg-emerald-50 px-3 py-1 text-sm font-bold tabular-nums text-emerald-700">{{ number_format($totals['margin'], 1) }}% {{ __('GP') }}</span>
                            @endif
                        </div>
                        <p class="mt-1 text-xs text-slate-400">{{ __('Cost :cur :c · Profit :cur :p', ['cur' => $baseCode, 'c' => number_format($totals['cost'], 2), 'p' => number_format($totals['profit'] + $totals['misc'], 2)]) }}@if ($totals['weight'] > 0) · {{ number_format($totals['weight'], 2) }} kg @endif</p>
                    </x-card>

                    {{-- Quote roll-up --}}
                    <x-card class="p-5">
                        <p class="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-500">{{ __('Customer quote') }}</p>
                        <div class="space-y-2">
                            @foreach ($deliverables as $di => $d)
                                @php $dt = $this->deliverableTotals($di); @endphp
                                <div class="flex items-start justify-between gap-3 border-b border-slate-50 pb-2 text-sm last:border-0">
                                    <span class="text-slate-600">{{ $d['title'] ?: __('Deliverable :n', ['n' => $di + 1]) }}</span>
                                    <span class="whitespace-nowrap font-mono font-semibold text-slate-800">{{ number_format($dt['price'], 2) }}</span>
                                </div>
                            @endforeach
                            @if ($totals['additions'] > 0)
                                <div class="flex items-center justify-between gap-3 text-sm text-slate-500">
                                    <span>{{ __('Additions') }}</span>
                                    <span class="font-mono">+ {{ number_format($totals['additions'], 2) }}</span>
                                </div>
                            @endif
                        </div>
                        <div class="mt-2 flex items-center justify-between border-t-2 border-slate-200 pt-2 text-base font-bold">
                            <span>{{ __('Quote total') }}</span>
                            <span class="font-mono text-indigo-700">{{ $baseCode }} {{ number_format($totals['price'], 2) }}</span>
                        </div>
                        <p class="mt-2 text-[11px] text-slate-400">{{ __('Create quote makes one line per deliverable, each carrying its full cost breakdown.') }}</p>
                    </x-card>

                    {{-- Additions + delivery --}}
                    <x-card class="p-5">
                        <div class="flex items-center justify-between">
                            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ __('Job additions') }}</p>
                            <button type="button" wire:click="addAddition" class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-800"><i class="fa-solid fa-plus"></i>{{ __('Add') }}</button>
                        </div>
                        <div class="mt-2 space-y-2">
                            @foreach ($additions as $ai => $addition)
                                <div wire:key="add-{{ $ai }}" class="flex items-center gap-1.5">
                                    <x-input type="text" class="block w-full text-xs" placeholder="{{ __('e.g. Delivery') }}" wire:model.blur="additions.{{ $ai }}.label" />
                                    <select wire:model.live="additions.{{ $ai }}.type" class="rounded-md border-slate-200 py-1 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option value="fixed">{{ $baseCode }}</option>
                                        <option value="percent">%</option>
                                    </select>
                                    <x-input type="number" step="0.01" class="w-20 text-xs" wire:model.live.debounce.500ms="additions.{{ $ai }}.value" />
                                    <button type="button" wire:click="removeAddition({{ $ai }})" class="text-slate-300 transition hover:text-rose-500"><i class="fa-solid fa-xmark text-xs"></i></button>
                                </div>
                            @endforeach
                        </div>
                        @if ($totals['weight'] > 0)
                            <div class="mt-2 flex flex-wrap items-center gap-1.5 rounded-lg bg-slate-50 px-2.5 py-2 text-xs">
                                <span class="text-slate-500"><i class="fa-solid fa-truck mr-1"></i>{{ number_format($totals['weight'], 2) }} kg @</span>
                                <x-input type="number" step="0.01" min="0" class="w-16 py-1 text-xs" wire:model="deliveryRate" placeholder="{{ $baseCode }}/kg" />
                                <button type="button" wire:click="addWeightDelivery" class="rounded-md border border-slate-200 bg-white px-2 py-1 font-medium text-slate-600 hover:bg-slate-100">{{ __('Add delivery') }}</button>
                            </div>
                        @endif
                    </x-card>

                    {{-- Actions --}}
                    <x-card class="space-y-2 p-5">
                        <x-button class="w-full justify-center" wire:click="createQuote" wire:loading.attr="disabled">
                            <i class="fa-solid fa-file-invoice-dollar mr-1.5"></i>{{ __('Create quote') }}
                        </x-button>
                        <div class="grid grid-cols-2 gap-2">
                            <x-secondary-button class="justify-center" wire:click="save" wire:loading.attr="disabled"><i class="fa-regular fa-floppy-disk mr-1.5"></i>{{ __('Save') }}</x-secondary-button>
                            <x-secondary-button class="justify-center" wire:click="saveAsProduct" wire:loading.attr="disabled"><i class="fa-solid fa-box-archive mr-1.5"></i>{{ __('As product') }}</x-secondary-button>
                        </div>
                        @if ($worksheetId)
                            <x-secondary-button class="w-full justify-center" wire:click="duplicate" wire:loading.attr="disabled"><i class="fa-regular fa-copy mr-1.5"></i>{{ __('Duplicate / reuse') }}</x-secondary-button>
                        @endif
                    </x-card>
                </div>
            </div>
        </div>

        {{-- Reconciliation (estimate vs actual) --}}
        @if ($reconciliation)
            @php $rc = $reconciliation; @endphp
            <x-card class="p-6">
                <div class="mb-3 flex items-center gap-2">
                    <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-100 text-emerald-700"><i class="fa-solid fa-scale-balanced text-sm"></i></span>
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Estimate vs actual') }}</h2>
                        <p class="text-xs text-slate-500">{{ __('Actuals pulled live from :job’s cost ledger (incl. production & completion expenses).', ['job' => $rc['job']->job_number]) }}</p>
                    </div>
                </div>

                <div class="overflow-x-auto rounded-xl border border-slate-100">
                    <table class="min-w-full divide-y divide-slate-100 text-sm">
                        <thead class="bg-slate-50">
                            <tr class="text-left text-xs font-semibold uppercase tracking-wider text-slate-400">
                                <th class="py-2 pl-4 pr-3">{{ __('Category') }}</th>
                                <th class="px-3 py-2 text-right">{{ __('Estimate') }}</th>
                                <th class="px-3 py-2 text-right">{{ __('Actual') }}</th>
                                <th class="px-3 py-2 text-right">{{ __('Variance') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($rc['rows'] as $row)
                                <tr>
                                    <td class="py-2 pl-4 pr-3 font-medium text-slate-700">{{ __($costCategories[$row['category']] ?? ucfirst($row['category'])) }}</td>
                                    <td class="px-3 py-2 text-right tabular-nums text-slate-500">{{ number_format($row['estimate'], 2) }}</td>
                                    <td class="px-3 py-2 text-right tabular-nums text-slate-700">{{ number_format($row['actual'], 2) }}</td>
                                    <td class="px-3 py-2 text-right tabular-nums font-medium {{ $row['variance'] > 0 ? 'text-rose-600' : ($row['variance'] < 0 ? 'text-emerald-600' : 'text-slate-400') }}">{{ $row['variance'] > 0 ? '+' : '' }}{{ number_format($row['variance'], 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="border-t-2 border-slate-200 bg-slate-50">
                            <tr class="font-semibold text-slate-900">
                                <td class="py-2 pl-4 pr-3">{{ __('Total cost') }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ number_format($rc['estimate_total'], 2) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ number_format($rc['actual_total'], 2) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums {{ $rc['variance_total'] > 0 ? 'text-rose-600' : 'text-emerald-600' }}">{{ $rc['variance_total'] > 0 ? '+' : '' }}{{ number_format($rc['variance_total'], 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
                    <div class="rounded-xl bg-slate-50 p-3">
                        <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Quoted price') }}</p>
                        <p class="text-base font-bold tabular-nums text-slate-900">{{ $baseCode }} {{ number_format($rc['quoted_price'], 2) }}</p>
                    </div>
                    <div class="rounded-xl bg-slate-50 p-3">
                        <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Actual cost') }}</p>
                        <p class="text-base font-bold tabular-nums text-slate-900">{{ $baseCode }} {{ number_format($rc['actual_total'], 2) }}</p>
                    </div>
                    <div class="rounded-xl bg-slate-50 p-3">
                        <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Estimated margin') }}</p>
                        <p class="text-base font-bold tabular-nums text-slate-500">{{ $rc['estimated_margin'] !== null ? number_format($rc['estimated_margin'], 1).'%' : '—' }}</p>
                    </div>
                    <div class="rounded-xl p-3 {{ ($rc['realized_margin'] ?? 0) >= ($rc['estimated_margin'] ?? 0) ? 'bg-emerald-50' : 'bg-rose-50' }}">
                        <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Realized margin') }}</p>
                        <p class="text-base font-bold tabular-nums {{ ($rc['realized_margin'] ?? 0) >= 0 ? 'text-emerald-700' : 'text-rose-700' }}">{{ $rc['realized_margin'] !== null ? number_format($rc['realized_margin'], 1).'%' : '—' }}</p>
                    </div>
                </div>
            </x-card>
        @endif
    </div>
</div>