@php
    // Provenance / type badge per row. Stock-backed material reads "From stock";
    // everything else shows its category (material bought for the job => "Bought-in").
    $typeBadge = [
        'material'     => ['label' => __('Bought-in'),    'color' => 'bg-indigo-50 text-indigo-700 ring-indigo-200',   'icon' => 'archive-box'],
        'finishing'    => ['label' => __('Finishing'),    'color' => 'bg-violet-50 text-violet-700 ring-violet-200',   'icon' => 'sparkles'],
        'outsourcing'  => ['label' => __('Outsourced'),   'color' => 'bg-fuchsia-50 text-fuchsia-700 ring-fuchsia-200','icon' => 'building-office'],
        'installation' => ['label' => __('Installation'), 'color' => 'bg-amber-50 text-amber-700 ring-amber-200',     'icon' => 'wrench-screwdriver'],
        'transport'    => ['label' => __('Transport'),    'color' => 'bg-sky-50 text-sky-700 ring-sky-200',           'icon' => 'truck'],
        'labour'       => ['label' => __('Labour'),       'color' => 'bg-emerald-50 text-emerald-700 ring-emerald-200','icon' => 'users'],
        'consumable'   => ['label' => __('Consumable'),   'color' => 'bg-cyan-50 text-cyan-700 ring-cyan-200',         'icon' => 'inbox'],
        'equipment'    => ['label' => __('Equipment'),    'color' => 'bg-orange-50 text-orange-700 ring-orange-200',   'icon' => 'cog-6-tooth'],
        'other'        => ['label' => __('Other'),        'color' => 'bg-slate-100 text-slate-600 ring-slate-200',     'icon' => 'tag'],
    ];
    $fromStock = ['label' => __('From stock'), 'color' => 'bg-emerald-50 text-emerald-700 ring-emerald-200', 'icon' => 'cube'];
    $badgeFor = function ($cost) use ($typeBadge, $fromStock) {
        if ($cost->type === 'material' && $cost->stock_movement_id) {
            return $fromStock;
        }
        return $typeBadge[$cost->type] ?? ['label' => ucfirst(str_replace('_', ' ', $cost->type)), 'color' => 'bg-slate-100 text-slate-600 ring-slate-200', 'icon' => 'tag'];
    };

    // Variance flag presentation for the sized-production draft preview.
    $flagMeta = [
        'size_changed'  => ['label' => __('Size changed'),  'color' => 'bg-amber-50 text-amber-700 ring-amber-200', 'icon' => 'adjustments-horizontal'],
        'qty_changed'   => ['label' => __('Qty changed'),   'color' => 'bg-sky-50 text-sky-700 ring-sky-200',       'icon' => 'queue-list'],
        'over_consumed' => ['label' => __('Over-consumed'), 'color' => 'bg-rose-50 text-rose-700 ring-rose-200',    'icon' => 'exclamation-triangle'],
    ];

    $n = fn ($v, int $dp = 2): string => rtrim(rtrim(number_format((float) $v, $dp), '0'), '.');

    // Material logged from the floor, still waiting for someone to price it.
    $awaitingCost = fn ($cost): bool => in_array($cost->id, $awaitingCostIds, true);
    $canEditMaterial = fn ($cost): bool => in_array($cost->id, $editableMaterialIds, true);

    $estVsAct = $estimatedMaterial > 0 ? round(($actualMaterial / $estimatedMaterial) * 100) : null;
    $varTone = $materialVariance > 0 ? 'text-rose-600' : ($materialVariance < 0 ? 'text-emerald-600' : 'text-slate-600');
@endphp

<div class="rounded-2xl border border-slate-200 bg-white shadow-sm" x-data="{ produceMenu: false, showPicker: false }">
    {{-- ============ HEADER + UNIFIED TOOLBAR ============ --}}
    <div class="flex flex-col gap-4 border-b border-slate-100 p-6 sm:flex-row sm:items-start sm:justify-between">
        <div class="flex items-start gap-3">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-sm">
                <x-icon name="banknotes" class="h-5 w-5" />
            </span>
            <div>
                <h2 class="text-lg font-semibold text-slate-900">{{ $canManageCosts ? __('Production Costs') : __('Materials Used') }}</h2>
                <p class="mt-0.5 text-sm text-slate-500">
                    {{ $canManageCosts
                        ? __('Every material and cost on this job in one ledger, from stock, bought-in, outsourced and more.')
                        : __('Log everything you used on this job, off the shelf or by hand. Pricing is handled by management.') }}
                </p>
            </div>
        </div>

        @if ($canManage)
            <div class="flex shrink-0 items-center gap-2">
                {{-- Record production ▾ --}}
                <div class="relative">
                    <button type="button" @click="produceMenu = ! produceMenu"
                            class="inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
                        <x-icon name="play" class="h-4 w-4" />{{ __('Record production') }}
                        <x-icon name="chevron-down" class="h-3.5 w-3.5 opacity-80" />
                    </button>
                    <div x-show="produceMenu" x-cloak @click.outside="produceMenu = false" x-transition
                         class="absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg">
                        @if (! $draft)
                            <button type="button" wire:click="startProduction" @click="produceMenu = false"
                                    class="flex w-full items-start gap-2.5 px-4 py-2.5 text-left text-sm text-slate-700 transition hover:bg-slate-50">
                                <x-icon name="cog-6-tooth" class="mt-0.5 h-4 w-4 shrink-0 text-indigo-500" />
                                <span><span class="font-medium">{{ __('Start sized production') }}</span><br><span class="text-xs text-slate-400">{{ __('Actual sizes, reprints & spoilage with roll yield.') }}</span></span>
                            </button>
                        @else
                            <p class="flex items-center gap-2 px-4 py-2.5 text-xs text-amber-600"><x-icon name="sparkles" class="h-4 w-4" />{{ __('A production draft is open below.') }}</p>
                        @endif
                        <button type="button" wire:click="consumeStock" @click="produceMenu = false"
                                class="flex w-full items-start gap-2.5 px-4 py-2.5 text-left text-sm text-slate-700 transition hover:bg-slate-50">
                            <x-icon name="arrow-path" class="mt-0.5 h-4 w-4 shrink-0 text-indigo-500" />
                            <span><span class="font-medium">{{ __('Sync from recipe') }}</span><br><span class="text-xs text-slate-400">{{ __('Auto-consume the product bill of materials.') }}</span></span>
                        </button>
                        <button type="button" @click="showPicker = true; produceMenu = false"
                                class="flex w-full items-start gap-2.5 px-4 py-2.5 text-left text-sm text-slate-700 transition hover:bg-slate-50">
                            <x-icon name="cube" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" />
                            <span><span class="font-medium">{{ __('Use stock item') }}</span><br><span class="text-xs text-slate-400">{{ __('Grab one material off the shelf, no recipe.') }}</span></span>
                        </button>
                    </div>
                </div>

                {{-- Add cost (money) is management-only; the floor logs materials. --}}
                @if ($canManageCosts)
                    <button type="button" wire:click="create"
                            class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50">
                        <x-icon name="plus" class="h-4 w-4" />{{ __('Add cost') }}
                    </button>
                @else
                    <button type="button" wire:click="addMaterial"
                            class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50">
                        <x-icon name="plus" class="h-4 w-4" />{{ __('Add material used') }}
                    </button>
                @endif
            </div>
        @endif
    </div>

    <div class="space-y-6 p-6">
        {{-- ============ JOB P&L: GROSS → NET AFTER OVERHEAD (G9, FRS §3) ============
             Same ladder and same numbers as /reports/profitability, both from
             JobAbsorptionService, so the job screen and the report can never
             disagree about what this job made. --}}
        @if ($pnl)
            <div class="rounded-2xl border border-slate-200 bg-slate-50/60 p-4">
                <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                    <div>
                        <h3 class="text-sm font-semibold text-slate-800">{{ __('Job Profit & Loss') }}</h3>
                        <p class="text-xs text-slate-500">
                            {{ __('Revenue → direct costs → gross profit → absorbed overhead → net profit.') }}
                        </p>
                    </div>
                    <div class="flex shrink-0 flex-wrap items-center gap-1.5">
                        <span class="inline-flex items-center rounded-full bg-white px-2.5 py-1 text-[11px] font-medium text-slate-600 ring-1 ring-slate-200">
                            {{ \Illuminate\Support\Carbon::parse($pnl['period_start'])->translatedFormat('F Y') }}
                        </span>
                        @if ($pnl['provisional'])
                            <span class="inline-flex items-center rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-medium text-amber-700 ring-1 ring-amber-600/15">{{ __('Provisional') }}</span>
                        @endif
                    </div>
                </div>

                <div class="mt-4 grid grid-cols-2 gap-4 lg:grid-cols-4">
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Revenue') }}</p>
                        <p class="mt-1 text-xl font-bold text-slate-900 tabular-nums">{{ $baseCurrency }} {{ number_format($pnl['revenue'], 2) }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Direct Costs') }}</p>
                        <p class="mt-1 text-xl font-bold text-slate-900 tabular-nums">{{ $baseCurrency }} {{ number_format($pnl['direct_cost'], 2) }}</p>
                        <p class="text-[10px] text-slate-400">{{ __('materials :m · labour :l', ['m' => number_format($pnl['materials'], 2), 'l' => number_format($pnl['labour'], 2)]) }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Gross Profit') }}</p>
                        <p class="mt-1 text-xl font-bold tabular-nums {{ $pnl['gross_profit'] >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">{{ $baseCurrency }} {{ number_format($pnl['gross_profit'], 2) }}</p>
                        <p class="text-[10px] text-slate-400">{{ number_format($pnl['gross_margin'], 1) }}% {{ __('margin') }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ __('Net Profit') }}</p>
                        <p class="mt-1 text-xl font-bold tabular-nums {{ $pnl['net_profit'] >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">{{ $baseCurrency }} {{ number_format($pnl['net_profit'], 2) }}</p>
                        <p class="text-[10px] text-slate-400">{{ __('after :amount overhead', ['amount' => $baseCurrency.' '.number_format($pnl['absorbed_overhead'], 2)]) }}</p>
                    </div>
                </div>

                {{-- Never let an allocated figure be read as cash. --}}
                <div class="mt-4 flex items-start gap-2 rounded-xl bg-amber-50 p-3 text-[11px] 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">{{ __('Net profit here is a management allocation, not a cash fact.') }}</span>
                        {{ __('The :amount of overhead is this job\'s share of the whole month\'s nut (rent, salaries, depreciation) on a :basis basis — not money this job spent.', [
                            'amount' => $baseCurrency.' '.number_format($pnl['absorbed_overhead'], 2),
                            'basis' => \Illuminate\Support\Str::lower($pnl['basis_label']),
                        ]) }}
                        @if ($pnl['imputed'])
                            <span class="font-medium">{{ __('No time was logged on this job, so its hours were estimated from its revenue — log time to make the share accurate.') }}</span>
                        @endif
                    </p>
                </div>
            </div>
        @endif

        {{-- ============ MATERIAL ESTIMATED VS ACTUAL (slim strip) ============ --}}
        @if ($hasProductSource && $canManageCosts)
            <div class="flex flex-wrap items-center gap-x-8 gap-y-2 rounded-xl bg-slate-50 px-4 py-3">
                <span class="text-xs font-semibold uppercase tracking-wide text-slate-400">{{ __('Material est. vs actual') }}</span>
                <div class="flex items-baseline gap-1.5">
                    <span class="text-xs text-slate-500">{{ __('Estimated') }}</span>
                    <span class="text-sm font-semibold text-slate-700 tabular-nums">{{ $baseCurrency }} {{ number_format($estimatedMaterial, 2) }}</span>
                </div>
                <div class="flex items-baseline gap-1.5">
                    <span class="text-xs text-slate-500">{{ __('Actual') }}</span>
                    <span class="text-sm font-semibold text-slate-700 tabular-nums">{{ $baseCurrency }} {{ number_format($actualMaterial, 2) }}</span>
                </div>
                <div class="flex items-baseline gap-1.5">
                    <span class="text-xs text-slate-500">{{ __('Variance') }}</span>
                    <span class="text-sm font-semibold tabular-nums {{ $varTone }}">{{ $materialVariance > 0 ? '+' : '' }}{{ number_format($materialVariance, 2) }}</span>
                    @if (! is_null($estVsAct))
                        <span class="text-xs {{ $varTone }}">({{ __(':n% of est.', ['n' => $estVsAct]) }})</span>
                    @endif
                </div>
            </div>
        @endif

        {{-- ============ USE-STOCK QUICK PICKER (revealed from the menu) ============ --}}
        @if ($canManage)
            <div x-show="showPicker" x-cloak x-transition class="rounded-2xl border border-emerald-100 bg-emerald-50/40 p-4">
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                        <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-100 text-emerald-700"><x-icon name="cube" class="h-4 w-4" /></span>
                        <h3 class="text-sm font-semibold text-slate-800">{{ __('Use stock item') }}</h3>
                    </div>
                    <button type="button" @click="showPicker = false" class="text-slate-400 transition hover:text-slate-600"><x-icon name="x-mark" class="h-4 w-4" /></button>
                </div>
                <div class="mt-3 flex flex-col gap-2 sm:flex-row sm:items-end">
                    <div class="flex-1">
                        <label class="text-[11px] font-medium text-slate-500">{{ __('Stock item') }}</label>
                        <select wire:model="useVariantId"
                                class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-emerald-500 focus:ring-emerald-500">
                            <option value="">{{ __('Choose a material…') }}</option>
                            @foreach ($stockOptions as $opt)
                                <option value="{{ $opt['id'] }}">{{ $opt['label'] }}, {{ rtrim(rtrim(number_format($opt['on_hand'], 2), '0'), '.') }} {{ $opt['unit'] }} {{ __('on hand') }}</option>
                            @endforeach
                        </select>
                        @error('useVariantId') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                    </div>
                    <div class="w-full sm:w-28">
                        <label class="text-[11px] font-medium text-slate-500">{{ __('Qty') }}</label>
                        <input type="number" step="0.000001" min="0" wire:model="useQty"
                               class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-emerald-500 focus:ring-emerald-500" />
                        @error('useQty') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                    </div>
                    {{-- Which product it went on. Only asked when the job has more
                         than one; otherwise there is only one possible answer. --}}
                    @if ($jobLineItems->count() > 1)
                        <div class="w-full sm:w-56">
                            <label class="text-[11px] font-medium text-slate-500">{{ __('Used on') }}</label>
                            <select wire:model="useLineItemId"
                                    class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-emerald-500 focus:ring-emerald-500">
                                <option value="">{{ __('Shared across the job') }}</option>
                                @foreach ($jobLineItems as $line)
                                    <option value="{{ $line->id }}">{{ $line->name }}</option>
                                @endforeach
                            </select>
                            @error('useLineItemId') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                        </div>
                    @endif
                    <button type="button" wire:click="addMaterialUsed" wire:loading.attr="disabled" wire:target="addMaterialUsed"
                            class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-xl bg-emerald-600 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 disabled:opacity-60">
                        <x-icon name="plus" class="h-4 w-4" />{{ __('Use stock') }}
                    </button>
                </div>
            </div>
        @endif

        {{-- ============ SIZED PRODUCTION DRAFT EDITOR ============ --}}
        @if ($draft)
            <div class="rounded-2xl border border-indigo-100 bg-indigo-50/40 p-4">
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                        <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-900/5 px-2.5 py-1 text-xs font-medium text-slate-600">
                            <x-icon name="sparkles" class="h-3.5 w-3.5" />{{ __('Draft production') }}
                        </span>
                        <span class="text-xs text-slate-500">{{ __('Started :when', ['when' => optional($draft->produced_at)->format('Y-m-d H:i')]) }}</span>
                    </div>
                    @if ($canManage)
                        <button type="button" wire:click="discardDraft" wire:confirm="{{ __('Discard this draft? Nothing has been consumed yet.') }}"
                                class="inline-flex items-center gap-1 text-xs font-medium text-rose-600 transition hover:text-rose-700">
                            <x-icon name="x-mark" class="h-3.5 w-3.5" />{{ __('Discard draft') }}
                        </button>
                    @endif
                </div>

                <div class="mt-4 space-y-4">
                    @foreach ($draftLines as $row)
                        @php
                            /** @var \App\Models\JobProductionLine $line */
                            $line = $row['line'];
                            $pv = $row['preview'];
                            $variant = $line->materialVariant;
                            $material = $variant?->material;
                            $unit = $pv['base_unit'];
                        @endphp
                        <div wire:key="draft-line-{{ $line->id }}" class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                            <div class="flex flex-wrap items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <p class="truncate text-sm font-semibold text-slate-800">{{ $line->product?->name ?? $line->lineItem?->name ?? __('Line item') }}</p>
                                    <p class="mt-0.5 flex items-center gap-1.5 text-xs text-slate-500">
                                        <x-icon name="swatch" class="h-3.5 w-3.5" />
                                        @if ($material)
                                            {{ $material->name }}@if ($variant?->label) <span class="text-slate-400">·</span> {{ $variant->label }}@endif
                                            @if ($material->isRoll())
                                                <span class="ml-1 rounded bg-violet-50 px-1.5 py-0.5 text-[10px] font-medium text-violet-600">{{ __('Roll :w m', ['w' => $n($material->roll_width, 4)]) }}</span>
                                            @elseif ($material->isSheet())
                                                <span class="ml-1 rounded bg-sky-50 px-1.5 py-0.5 text-[10px] font-medium text-sky-600">{{ __('Sheet') }}</span>
                                            @endif
                                        @else
                                            <span class="text-amber-600">{{ __('No stock material mapped') }}</span>
                                        @endif
                                    </p>
                                </div>
                                <div class="shrink-0 rounded-lg bg-slate-50 px-3 py-1.5 text-right">
                                    <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Ordered') }}</p>
                                    <p class="text-xs font-medium text-slate-600">
                                        @if ($line->ordered_width || $line->ordered_height)
                                            {{ $n($line->ordered_width, 4) }} &times; {{ $n($line->ordered_height, 4) }} m ·
                                        @endif
                                        {{ $n($line->ordered_qty, 2) }} {{ __('pcs') }}
                                    </p>
                                </div>
                            </div>

                            <div class="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-5">
                                <div>
                                    <label class="text-[11px] font-medium text-slate-500">{{ __('Width (m)') }}</label>
                                    <input type="number" step="0.0001" min="0" wire:model.live.debounce.400ms="lineData.{{ $line->id }}.actual_width" @disabled(! $canManage)
                                           class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                                </div>
                                <div>
                                    <label class="text-[11px] font-medium text-slate-500">{{ __('Height (m)') }}</label>
                                    <input type="number" step="0.0001" min="0" wire:model.live.debounce.400ms="lineData.{{ $line->id }}.actual_height" @disabled(! $canManage)
                                           class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                                </div>
                                <div>
                                    <label class="text-[11px] font-medium text-slate-500">{{ __('Qty produced') }}</label>
                                    <input type="number" step="0.000001" min="0" wire:model.live.debounce.400ms="lineData.{{ $line->id }}.actual_qty" @disabled(! $canManage)
                                           class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                                </div>
                                <div>
                                    <label class="text-[11px] font-medium text-slate-500">{{ __('Reprints') }}</label>
                                    <input type="number" step="0.000001" min="0" wire:model.live.debounce.400ms="lineData.{{ $line->id }}.reprints" @disabled(! $canManage)
                                           class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                                </div>
                                <div>
                                    <label class="text-[11px] font-medium text-slate-500">{{ __('Spoilage') }}</label>
                                    <input type="number" step="0.000001" min="0" wire:model.live.debounce.400ms="lineData.{{ $line->id }}.spoilage_qty" @disabled(! $canManage)
                                           class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                                </div>
                            </div>

                            @if (! $pv['fits'])
                                <div class="mt-3 flex items-start gap-2 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">
                                    <x-icon name="exclamation-triangle" class="mt-0.5 h-4 w-4 shrink-0" />
                                    <span>{{ __('Piece is wider than the roll in both orientations, fix the size or the material before confirming. Falling back to area/per-item costing.') }}</span>
                                </div>
                            @endif

                            <dl class="mt-3 grid grid-cols-2 gap-3 rounded-lg bg-slate-50 p-3 text-center sm:grid-cols-4">
                                @if ($pv['mode'] === 'roll')
                                    <div>
                                        <dt class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Media off roll') }}</dt>
                                        <dd class="text-sm font-semibold text-violet-700">{{ $n($pv['linear_m'], 3) }} {{ __('m') }}</dd>
                                    </div>
                                @else
                                    <div>
                                        <dt class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Consumed') }}</dt>
                                        <dd class="text-sm font-semibold text-violet-700">{{ $n($pv['consumed'], 3) }} {{ $unit }}</dd>
                                    </div>
                                @endif
                                <div>
                                    <dt class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Billed area') }}</dt>
                                    <dd class="text-sm font-semibold text-slate-700">{{ $n($pv['billed_area'], 3) }} {{ __('m²') }}</dd>
                                </div>
                                <div>
                                    <dt class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Consumed area') }}</dt>
                                    <dd class="text-sm font-semibold text-slate-700">{{ $n($pv['consumed_area'], 3) }} {{ __('m²') }}</dd>
                                </div>
                                <div>
                                    <dt class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Offcut') }}</dt>
                                    <dd class="text-sm font-semibold {{ (float) $pv['offcut_area'] > 0 ? 'text-amber-600' : 'text-slate-400' }}">{{ $n($pv['offcut_area'], 3) }} {{ __('m²') }}</dd>
                                </div>
                            </dl>
                            @if ($pv['mode'] === 'roll' && $pv['fits'])
                                <p class="mt-1.5 text-center text-[11px] text-slate-400">{{ __(':across across, :orient orientation', ['across' => $pv['pieces_across'], 'orient' => $pv['orientation']]) }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>

                @if ($canManage)
                    <div class="mt-4 flex flex-wrap items-center justify-end gap-2">
                        <button type="button" wire:click="saveDraft" wire:loading.attr="disabled"
                                class="inline-flex items-center gap-1.5 rounded-xl bg-white px-3.5 py-2 text-sm font-medium text-slate-700 ring-1 ring-slate-200 transition hover:bg-slate-50 disabled:opacity-60">
                            <x-icon name="pencil-square" class="h-4 w-4" />{{ __('Save draft') }}
                        </button>
                        <button type="button" wire:click="confirmProduction" wire:loading.attr="disabled"
                                wire:confirm="{{ __('Confirm production? This consumes stock and cannot be edited afterwards (it can be reversed).') }}"
                                class="inline-flex items-center gap-1.5 rounded-xl bg-emerald-600 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 disabled:opacity-60">
                            <x-icon name="check-circle" class="h-4 w-4" />{{ __('Confirm production') }}
                        </button>
                    </div>
                @endif
            </div>
        @endif

        {{-- ============ VARIABLE COSTS TO CONFIRM (estimate reminders) ============ --}}
        @if (! empty($estimateReminders))
            <div class="rounded-2xl border border-amber-200 bg-amber-50/60 p-4">
                <div class="flex items-center gap-2">
                    <x-icon name="exclamation-triangle" class="h-4 w-4 text-amber-600" />
                    <h4 class="text-sm font-semibold text-amber-900">{{ __('Variable costs to confirm') }}</h4>
                </div>
                <p class="mt-0.5 text-xs text-amber-700">{{ __('These items were flagged as bought-per-job estimates on the product recipe. Confirm the real amount actually paid.') }}</p>
                <div class="mt-3 space-y-2">
                    @foreach ($estimateReminders as $i => $r)
                        <div class="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-amber-200 bg-white px-3 py-2">
                            <div class="min-w-0">
                                <p class="truncate text-sm font-medium text-slate-800">{{ $r['label'] }}</p>
                                <p class="text-[11px] text-slate-500">{{ $r['product'] }} · {{ __('est.') }} {{ $baseCurrency }} {{ number_format($r['estimated_total'], 2) }}
                                    @if ($r['qty'] != 1) <span class="text-slate-400">({{ rtrim(rtrim(number_format($r['qty'], 2), '0'), '.') }} × {{ number_format($r['estimated_unit'], 2) }})</span> @endif
                                </p>
                            </div>
                            @if ($r['done'])
                                <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-700"><x-icon name="check" class="h-3.5 w-3.5" /> {{ __('Recorded') }}</span>
                            @elseif ($canManage)
                                <button type="button" wire:click="prefillEstimate({{ $i }})" class="inline-flex items-center gap-1 rounded-lg border border-amber-300 bg-white px-2.5 py-1.5 text-xs font-semibold text-amber-700 shadow-sm transition hover:bg-amber-50">{{ __('Record actual') }}</button>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- ============ SINGLE FLAT COST LEDGER ============ --}}
        @if ($costs->isEmpty() && empty($overheadRows))
            <x-empty-state
                icon="banknotes"
                :title="$canManageCosts ? __('No costs recorded') : __('No materials recorded')"
                :message="$canManageCosts
                    ? __('Record production or add materials, finishing, installation and other costs to track this job’s profitability.')
                    : __('Record production, take an item off the shelf, or add a material by hand so the job shows what it really used.')"
            />
        @else
            <div class="overflow-hidden rounded-2xl border border-slate-200">
                <div class="overflow-x-auto">
                    <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.5 pl-4 pr-3">{{ __('Date') }}</th>
                                <th class="px-3 py-2.5">{{ __('Item') }}</th>
                                <th class="px-3 py-2.5">{{ __('Type') }}</th>
                                <th class="px-3 py-2.5">{{ __('Supplier / Partner') }}</th>
                                <th class="px-3 py-2.5 text-right">{{ __('Qty') }}</th>
                                @if ($canManageCosts)
                                    <th class="px-3 py-2.5 text-right">{{ __('Unit') }}</th>
                                    <th class="px-3 py-2.5 text-right">{{ __('Total') }}</th>
                                @endif
                                @if ($canManage)
                                    <th class="py-2.5 pl-3 pr-4 text-right">{{ __('Actions') }}</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($costs as $cost)
                                @php $badge = $badgeFor($cost); @endphp
                                <tr wire:key="cost-{{ $cost->id }}" class="transition hover:bg-slate-50/60">
                                    <td class="py-3 pl-4 pr-3 whitespace-nowrap text-slate-500 tabular-nums">{{ optional($cost->incurred_on)->format('Y-m-d') }}</td>
                                    <td class="px-3 py-3 font-medium text-slate-900">
                                        {{ $cost->description }}
                                        @if ($awaitingCost($cost))
                                            <span class="ml-1 inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-medium text-amber-700 ring-1 ring-amber-200">
                                                <x-icon name="exclamation-triangle" class="h-3 w-3" />{{ __('Cost to confirm') }}
                                            </span>
                                        @endif
                                        @if ($jobLineItems->count() > 1)
                                            {{-- Which product carries this cost. "Shared" is a real
                                                 answer, not a gap: it gets split by revenue. --}}
                                            @if ($cost->lineItem)
                                                <span class="mt-0.5 inline-flex items-center gap-1 rounded-full bg-violet-50 px-2 py-0.5 text-[10px] font-medium text-violet-700">
                                                    <x-icon name="cube" class="h-3 w-3" />{{ $cost->lineItem->name }}
                                                </span>
                                            @else
                                                <span class="mt-0.5 inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-500" title="{{ __('Split across this job’s products by revenue.') }}">
                                                    <x-icon name="arrows-right-left" class="h-3 w-3" />{{ __('Shared') }}
                                                </span>
                                            @endif
                                        @endif
                                        @if ($cost->fundAccount)
                                            <span class="mt-0.5 flex items-center gap-1 text-[11px] font-normal text-slate-400">
                                                <x-icon name="banknotes" class="h-3 w-3" />{{ __('Paid from :account', ['account' => $cost->fundAccount->name]) }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-3 py-3">
                                        <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ring-1 {{ $badge['color'] }}">
                                            <x-icon :name="$badge['icon']" class="h-3 w-3" />{{ $badge['label'] }}
                                        </span>
                                    </td>
                                    <td class="px-3 py-3 text-slate-600">
                                        @if ($cost->partnerModel)
                                            <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700"><x-icon name="building-office" class="h-3 w-3" />{{ $cost->partnerModel->name }}</span>
                                        @elseif ($cost->supplierModel)
                                            <span class="font-medium text-slate-700">{{ $cost->supplierModel->name }}</span>
                                            <span class="ml-1 text-xs {{ $cost->supplierModel->type === 'international' ? 'text-sky-600' : 'text-emerald-600' }}">{{ $cost->supplierModel->type === 'international' ? __('Intl') : __('Local') }}</span>
                                        @else
                                            {{ $cost->supplier ?: '—' }}
                                        @endif
                                    </td>
                                    <td class="px-3 py-3 text-right text-slate-600 tabular-nums">{{ number_format((float) $cost->qty, 2) }}</td>
                                    @if ($canManageCosts)
                                        <td class="px-3 py-3 text-right text-slate-600 tabular-nums">{{ number_format((float) $cost->unit_cost, 2) }} <span class="text-xs text-slate-400">{{ $cost->currency_code }}</span></td>
                                        <td class="px-3 py-3 text-right font-semibold text-slate-900 tabular-nums">{{ number_format((float) $cost->total_cost, 2) }} <span class="text-xs text-slate-400">{{ $cost->currency_code }}</span></td>
                                    @endif
                                    @if ($canManage)
                                        <td class="py-3 pl-3 pr-4 text-right">
                                            @if ($cost->stock_movement_id && $cost->job_production_id)
                                                <span class="text-xs text-slate-400">{{ __('Via production') }}</span>
                                            @elseif ($cost->stock_movement_id)
                                                <button type="button" wire:click="returnToStock({{ $cost->id }})" wire:confirm="{{ __('Return this material to stock?') }}"
                                                        class="inline-flex items-center gap-1 text-sm font-medium text-rose-600 transition hover:text-rose-700">
                                                    <x-icon name="arrow-uturn-left" class="h-3.5 w-3.5" />{{ __('Return') }}
                                                </button>
                                            @elseif ($canManageCosts)
                                                <div class="flex items-center justify-end gap-3 text-sm font-medium">
                                                    <button type="button" wire:click="edit({{ $cost->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ $awaitingCost($cost) ? __('Price it') : __('Edit') }}</button>
                                                    <button type="button" wire:click="delete({{ $cost->id }})" wire:confirm="{{ __('Delete this cost?') }}" class="text-rose-600 transition hover:text-rose-700">{{ __('Delete') }}</button>
                                                </div>
                                            @elseif ($canEditMaterial($cost))
                                                <div class="flex items-center justify-end gap-3 text-sm font-medium">
                                                    <button type="button" wire:click="editMaterial({{ $cost->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                                    <button type="button" wire:click="delete({{ $cost->id }})" wire:confirm="{{ __('Remove this material from the job?') }}" class="text-rose-600 transition hover:text-rose-700">{{ __('Remove') }}</button>
                                                </div>
                                            @else
                                                <span class="text-xs text-slate-300">—</span>
                                            @endif
                                        </td>
                                    @endif
                                </tr>
                            @endforeach

                            {{-- The product recipe's labour / machine / ink / overhead rows,
                                 folded into one figure. Only a director sees them itemised. --}}
                            @foreach ($overheadRows as $row)
                                <tr wire:key="overhead-{{ $row['currency'] }}" class="transition hover:bg-slate-50/60">
                                    <td class="py-3 pl-4 pr-3 whitespace-nowrap text-slate-500 tabular-nums">{{ $row['date'] }}</td>
                                    <td class="px-3 py-3 font-medium text-slate-900">
                                        {{ __('Production overheads') }}
                                        <span class="mt-0.5 block text-[11px] font-normal text-slate-400">{{ __('Labour, machine time, ink & overhead from the product recipe') }}</span>
                                    </td>
                                    <td class="px-3 py-3">
                                        <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ring-1 bg-slate-100 text-slate-600 ring-slate-200">
                                            <x-icon name="tag" class="h-3 w-3" />{{ __('Overheads') }}
                                        </span>
                                    </td>
                                    <td class="px-3 py-3 text-slate-600">—</td>
                                    <td class="px-3 py-3 text-right text-slate-600 tabular-nums">—</td>
                                    @if ($canManageCosts)
                                        <td class="px-3 py-3 text-right text-slate-400 tabular-nums">—</td>
                                        <td class="px-3 py-3 text-right font-semibold text-slate-900 tabular-nums">{{ number_format($row['total'], 2) }} <span class="text-xs text-slate-400">{{ $row['currency'] }}</span></td>
                                    @endif
                                    @if ($canManage)
                                        <td class="py-3 pl-3 pr-4 text-right"><span class="text-xs text-slate-400">{{ __('From recipe') }}</span></td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                        @if ($canManageCosts)
                            <tfoot class="border-t-2 border-slate-200 bg-slate-50">
                                <tr>
                                    <td colspan="6" class="py-3 pl-4 pr-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-400">{{ __('Total (base)') }}</td>
                                    <td class="px-3 py-3 text-right text-base font-bold text-slate-900 tabular-nums">{{ $baseCurrency }} {{ number_format($totalBase, 2) }}</td>
                                    @if ($canManage)<td class="pr-4"></td>@endif
                                </tr>
                            </tfoot>
                        @endif
                    </table>
                </div>
            </div>
        @endif
    </div>

    <!-- Add / edit material used, no money (production floor) -->
    <x-dialog-modal wire:model.live="showMaterialModal" maxWidth="lg">
        <x-slot name="title">{{ $editingMaterialId ? __('Edit Material Used') : __('Add Material Used') }}</x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">{{ __('Anything not taken off the shelf, an offcut, a board bought for the job, a consumable. Record what and how much; management fills in the cost.') }}</p>

            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
                <div class="sm:col-span-3">
                    <x-label for="material-description" :value="__('Material used')" />
                    <x-input id="material-description" type="text" wire:model="material_description" class="mt-1 block w-full" placeholder="{{ __('e.g. Vinyl offcut, masking tape, MDF board') }}" />
                    <x-input-error for="material_description" class="mt-1" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="material-qty" :value="__('Quantity')" />
                    <x-input id="material-qty" type="number" step="0.01" min="0" wire:model="material_qty" class="mt-1 block w-full" />
                    <x-input-error for="material_qty" class="mt-1" />
                </div>

                <div>
                    <x-label for="material-unit" :value="__('Unit')" />
                    <x-input id="material-unit" type="text" wire:model="material_unit" class="mt-1 block w-full" placeholder="{{ __('m, sheets…') }}" />
                    <x-input-error for="material_unit" class="mt-1" />
                </div>

                @if ($jobLineItems->count() > 1)
                    <div class="sm:col-span-3">
                        <x-label for="material-line-item" :value="__('Used on')" />
                        <select id="material-line-item" wire:model="material_line_item_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="">{{ __('Shared across the whole job') }}</option>
                            @foreach ($jobLineItems as $line)
                                <option value="{{ $line->id }}">{{ $line->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="material_line_item_id" class="mt-1" />
                    </div>
                @endif
            </div>

            @unless ($editingMaterialId)
                <p class="mt-4 rounded-xl bg-emerald-50 px-4 py-3 text-xs text-emerald-700">
                    {{ __('Using something that is in stock? Close this and pick “Use stock item” instead so inventory is deducted.') }}
                </p>
            @endunless
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeMaterialModal" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ml-3" wire:click="saveMaterial" wire:loading.attr="disabled">{{ $editingMaterialId ? __('Save Changes') : __('Add Material') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Add / edit cost modal (management only) -->
    @if ($canManageCosts)
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">{{ $editingId ? __('Edit Cost') : __('Add Cost') }}</x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                @if ($jobLineItems->count() > 1)
                    <div class="sm:col-span-2">
                        <x-label for="cost-line-item" :value="__('Which product is this for?')" />
                        <select id="cost-line-item" wire:model.live="line_item_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="">{{ __('Shared across the whole job') }}</option>
                            @foreach ($jobLineItems as $line)
                                <option value="{{ $line->id }}">{{ $line->name }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-400">{{ __('Tag it and this cost lands on that product’s profit exactly. Left shared, it is split across the job’s products by revenue.') }}</p>
                        <x-input-error for="line_item_id" class="mt-1" />
                    </div>
                @endif

                {{-- A product split into pieces goes one level further: the
                     reprint of design B is design B's cost, and charging it to
                     the whole line would hide which design lost money. --}}
                @php $pieces = $line_item_id ? ($jobProductParts->get((int) $line_item_id) ?? collect()) : collect(); @endphp
                @if ($pieces->count() > 1)
                    <div class="sm:col-span-2">
                        <x-label for="cost-part" :value="__('Which piece of it?')" />
                        <select id="cost-part" wire:model="job_product_part_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="">{{ __('Shared across every piece') }}</option>
                            @foreach ($pieces as $piece)
                                <option value="{{ $piece->id }}">{{ $piece->label }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-400">{{ __('Left shared, it is split across the pieces by quantity.') }}</p>
                        <x-input-error for="job_product_part_id" class="mt-1" />
                    </div>
                @endif

                <div>
                    <x-label for="cost-type" :value="__('Category')" />
                    <select id="cost-type" wire:model="type" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach (\App\Models\JobCost::CATEGORIES as $value => $label)
                            <option value="{{ $value }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="type" class="mt-1" />
                </div>

                <div>
                    <x-label for="cost-incurred" :value="__('Date incurred')" />
                    <x-input id="cost-incurred" type="date" wire:model="incurred_on" class="mt-1 block w-full" />
                    <x-input-error for="incurred_on" class="mt-1" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="cost-description" :value="__('Description')" />
                    <x-input id="cost-description" type="text" wire:model="description" class="mt-1 block w-full" />
                    <x-input-error for="description" class="mt-1" />
                </div>

                <div>
                    <x-label for="cost-qty" :value="__('Quantity')" />
                    <x-input id="cost-qty" type="number" step="0.01" min="0" wire:model.live="qty" class="mt-1 block w-full" />
                    <x-input-error for="qty" class="mt-1" />
                </div>

                <div>
                    <x-label for="cost-unit" :value="__('Unit cost')" />
                    <x-input id="cost-unit" type="number" step="0.01" min="0" wire:model.live="unit_cost" class="mt-1 block w-full" />
                    <x-input-error for="unit_cost" class="mt-1" />
                </div>

                <div>
                    <x-label for="cost-currency" :value="__('Currency')" />
                    <select id="cost-currency" wire:model.live="currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($currencies as $currency)
                            <option value="{{ $currency->code }}">{{ $currency->code }}, {{ $currency->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="currency_code" class="mt-1" />
                </div>

                <div>
                    <x-label for="cost-rate" :value="__('Exchange rate (to base)')" />
                    <x-input id="cost-rate" type="number" step="0.000001" min="0" wire:model="exchange_rate" class="mt-1 block w-full" />
                    <x-input-error for="exchange_rate" class="mt-1" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="cost-fund-account" :value="__('Payment Method')" />
                    <select id="cost-fund-account" wire:model="fund_account_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, no cash impact') }}</option>
                        @foreach ($fundAccounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                        @endforeach
                    </select>
                    @if ($fundAccounts->isEmpty())
                        <p class="mt-1 text-xs text-amber-600">{{ __('No fund accounts yet.') }} <a href="{{ route('treasury.index') }}" class="font-medium underline">{{ __('Create one') }}</a>.</p>
                    @else
                        <p class="mt-1 text-xs text-slate-400">{{ __('Pick the account this money comes out of to deduct it from your treasury. Must match the currency above. Leave as “None” for costs already paid elsewhere.') }}</p>
                    @endif
                    <x-input-error for="fund_account_id" class="mt-1" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="cost-partner-id" :value="__('Partner (payment to)')" />
                    <select id="cost-partner-id" wire:model="partner_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 ($partners as $partner)
                            <option value="{{ $partner->id }}">{{ $partner->name }}@if ($partner->industry), {{ $partner->industry }}@endif</option>
                        @endforeach
                    </select>
                    @if ($partners->isEmpty())
                        <p class="mt-1 text-xs text-amber-600">{{ __('No partners yet.') }} <a href="{{ route('partners.index') }}" class="font-medium underline">{{ __('Add one') }}</a>.</p>
                    @else
                        <p class="mt-1 text-xs text-slate-400">{{ __('Select if this cost is a payment to an outsourcing partner.') }}</p>
                    @endif
                    <x-input-error for="partner_id" class="mt-1" />
                </div>

                <div>
                    <x-label for="cost-supplier-id" :value="__('Supplier (from directory)')" />
                    <select id="cost-supplier-id" wire:model="supplier_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 / ad-hoc') }}</option>
                        @foreach ($suppliers as $supplier)
                            <option value="{{ $supplier->id }}">{{ $supplier->name }} ({{ $supplier->type === 'international' ? __('Intl') : __('Local') }})</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Materials supplier, if any.') }}</p>
                    <x-input-error for="supplier_id" class="mt-1" />
                </div>

                <div>
                    <x-label for="cost-supplier" :value="__('Or supplier name (ad-hoc)')" />
                    <x-input id="cost-supplier" type="text" wire:model="supplier" class="mt-1 block w-full" />
                    <x-input-error for="supplier" class="mt-1" />
                </div>
            </div>

            <div class="mt-4 flex items-center justify-between rounded-xl bg-slate-50 px-4 py-3 text-sm">
                <span class="font-medium text-slate-500">{{ __('Line total') }}</span>
                <span class="font-semibold text-slate-900">{{ number_format($this->lineTotal, 2) }} {{ $currency_code }}</span>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ml-3" wire:click="save" wire:loading.attr="disabled">{{ $editingId ? __('Save Changes') : __('Add Cost') }}</x-button>
        </x-slot>
    </x-dialog-modal>
    @endif
</div>