{{-- Full-costing controls: pricing/uplift, the recipe (BOM) grouped & colour-coded
     by category with a tick-many item picker, live readout, and price tiers.
     Expects the Editor component's state ($bom, $tiers, $methods, $picker, …) and
     the view data $recipe, $materialVariants, $assetOptions, $supplierOptions,
     $operatingCostOptions, $inkModeOptions, $baseCodeModal. --}}

@php
    // One place for every category's colour + icon. Full literal Tailwind class
    // strings so the JIT compiler picks them up.
    $typeMeta = [
        'material'   => ['label' => __('Material'),   'icon' => 'cube',                'head' => 'bg-emerald-50 text-emerald-700 ring-emerald-200', 'border' => 'border-emerald-200', 'zebra' => 'bg-emerald-50/50', 'num' => 'bg-emerald-100 text-emerald-700', 'btn' => 'border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100', 'dot' => 'bg-emerald-400'],
        'ink'        => ['label' => __('Ink'),        'icon' => 'swatch',              'head' => 'bg-violet-50 text-violet-700 ring-violet-200',    'border' => 'border-violet-200',  'zebra' => 'bg-violet-50/50',  'num' => 'bg-violet-100 text-violet-700',   'btn' => 'border-violet-200 bg-violet-50 text-violet-700 hover:bg-violet-100',   'dot' => 'bg-violet-400'],
        'machine'    => ['label' => __('Machine'),    'icon' => 'wrench-screwdriver',  'head' => 'bg-sky-50 text-sky-700 ring-sky-200',             'border' => 'border-sky-200',     'zebra' => 'bg-sky-50/50',     'num' => 'bg-sky-100 text-sky-700',         'btn' => 'border-sky-200 bg-sky-50 text-sky-700 hover:bg-sky-100',               'dot' => 'bg-sky-400'],
        'outsourced' => ['label' => __('Outsourced'), 'icon' => 'truck',               'head' => 'bg-amber-50 text-amber-700 ring-amber-200',       'border' => 'border-amber-200',   'zebra' => 'bg-amber-50/50',   'num' => 'bg-amber-100 text-amber-700',     'btn' => 'border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100',       'dot' => 'bg-amber-400'],
        'labour'     => ['label' => __('Labour'),     'icon' => 'users',               'head' => 'bg-rose-50 text-rose-700 ring-rose-200',          'border' => 'border-rose-200',    'zebra' => 'bg-rose-50/50',    'num' => 'bg-rose-100 text-rose-700',       'btn' => 'border-rose-200 bg-rose-50 text-rose-700 hover:bg-rose-100',           'dot' => 'bg-rose-400'],
        'overhead'   => ['label' => __('Overhead'),   'icon' => 'building-office',     'head' => 'bg-teal-50 text-teal-700 ring-teal-200',          'border' => 'border-teal-200',    'zebra' => 'bg-teal-50/50',    'num' => 'bg-teal-100 text-teal-700',       'btn' => 'border-teal-200 bg-teal-50 text-teal-700 hover:bg-teal-100',           'dot' => 'bg-teal-400'],
    ];
    $variantById = collect($materialVariants)->keyBy('id');
@endphp

{{-- ===================== TICK-MANY PICKER ===================== --}}
{{-- Kept at the partial's top level (outside every <x-card>) so `fixed` centres
     against the viewport, the cards use a hover transform that would otherwise
     become the containing block and knock the overlay off-centre. --}}
@if ($picker !== '')
    @php
        $pm = $typeMeta[$picker];
        $pickItems = match ($picker) {
            'material'   => collect($materialVariants)->map(fn ($v) => ['id' => $v['id'], 'title' => $v['material'] . ($v['label'] ? ', ' . $v['label'] : ''), 'meta' => $v['base_unit'] ?: null])->all(),
            'machine'    => $assetOptions->map(fn ($a) => ['id' => $a->id, 'title' => $a->name, 'meta' => $a->run_rate !== null ? $baseCodeModal . ' ' . number_format((float) $a->run_rate, 2) . '/' . ($a->rate_unit ?: __('unit')) : null])->all(),
            'outsourced' => $supplierOptions->map(fn ($s) => ['id' => $s->id, 'title' => $s->name, 'meta' => null])->all(),
            'ink'        => $inkModeOptions->map(fn ($im) => ['id' => $im->id, 'title' => $im->name, 'meta' => rtrim(rtrim(number_format((float) $im->ml_per_sqm, 2), '0'), '.') . ' ml/m²'])->all(),
            'labour', 'overhead' => $operatingCostOptions->where('type', $picker)->map(fn ($oc) => ['id' => $oc->id, 'title' => $oc->name, 'meta' => str_replace('_', ' ', $oc->allocation_basis)])->values()->all(),
            default => [],
        };
    @endphp
    <div class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-sm" wire:key="picker-{{ $picker }}">
        <div x-data class="flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-3xl bg-white shadow-2xl" @click.outside="$wire.closePicker()">
            <div class="flex items-center justify-between gap-2 border-b border-slate-100 px-5 py-4">
                <span class="inline-flex items-center gap-2 text-base font-bold text-slate-900">
                    <span class="flex h-8 w-8 items-center justify-center rounded-lg ring-1 {{ $pm['head'] }}"><x-icon name="{{ $pm['icon'] }}" class="h-4 w-4" /></span>
                    {{ __('Add :type', ['type' => $pm['label']]) }}
                </span>
                <button type="button" wire:click="closePicker" class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"><x-icon name="x-mark" class="h-5 w-5" /></button>
            </div>

            <div class="min-h-0 flex-1 overflow-y-auto px-3 py-3">
                @if (empty($pickItems))
                    <p class="px-2 py-8 text-center text-sm text-slate-400">{{ __('Nothing set up yet in this category. Add a manual line instead.') }}</p>
                @else
                    <p class="px-2 pb-2 text-[11px] font-medium text-slate-400">{{ __('Tick everything this product uses.') }}</p>
                    <div class="space-y-1.5">
                        @foreach ($pickItems as $item)
                            <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-slate-200 px-3 py-2.5 transition hover:border-indigo-300 hover:bg-indigo-50/40 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50">
                                <input type="checkbox" value="{{ $item['id'] }}" wire:model.live="pickerSel" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                <span class="min-w-0 flex-1">
                                    <span class="block truncate text-sm font-medium text-slate-700">{{ $item['title'] }}</span>
                                    @if ($item['meta'])
                                        <span class="block text-[11px] text-slate-400">{{ $item['meta'] }}</span>
                                    @endif
                                </span>
                            </label>
                        @endforeach
                    </div>
                @endif
            </div>

            <div class="flex items-center justify-between gap-2 border-t border-slate-100 bg-slate-50/60 px-5 py-3">
                <button type="button" wire:click="addManualLine('{{ $picker }}')" class="inline-flex items-center gap-1 text-xs font-semibold text-slate-500 transition hover:text-slate-800">
                    <x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('Add a manual line') }}
                </button>
                <div class="flex items-center gap-2">
                    <x-secondary-button type="button" wire:click="closePicker">{{ __('Cancel') }}</x-secondary-button>
                    <x-button type="button" wire:click="confirmPicker" x-bind:disabled="!$wire.pickerSel.length">
                        {{ __('Add selected') }}
                    </x-button>
                </div>
            </div>
        </div>
    </div>
@endif

{{-- Pricing & cost-plus uplift --}}
<x-card class="p-6">
    <h2 class="text-base font-semibold text-slate-900">{{ __('Pricing & margin') }}</h2>
    <p class="mb-4 text-xs text-slate-500">{{ __('The suggested price = computed cost × (1 + buffer + markup + risk + misc), matching the costing workbook.') }}</p>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div>
            <select id="pricing_mode" wire:model.live="pricing_mode" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" aria-label="{{ __('Pricing mode') }}">
                <option value="fixed">{{ __('Fixed (per item)') }}</option>
                <option value="per_sqm">{{ __('Per square metre') }}</option>
                <option value="per_linear_m">{{ __('Per linear metre') }}</option>
            </select>
            @if ($pricing_mode !== 'fixed')
                <p class="mt-1.5 inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-0.5 text-[11px] font-semibold text-indigo-700">
                    <x-icon name="arrows-pointing-out" class="h-3 w-3" />
                    {{ __('Dimensional, width × height captured per quote/invoice line') }}
                </p>
            @endif
        </div>
        <div>
            <x-input id="default_price" type="number" step="0.01" min="0" class="block w-full placeholder:text-xs" wire:model="default_price" placeholder="{{ __('Sell price') }} ({{ $baseCodeModal }})" aria-label="{{ __('Sell price') }}" />
            <p class="mt-1 text-[11px] text-slate-400">{{ __('Cost is computed from the recipe on save.') }}</p>
            <x-input-error for="default_price" class="mt-2" />
        </div>
        <div>
            <x-input id="jobs_per_day" type="number" step="0.01" min="0" class="block w-full placeholder:text-xs" wire:model.live.debounce.400ms="jobs_per_day" placeholder="{{ __('Jobs / day (throughput)') }}" aria-label="{{ __('Jobs / day') }}" />
            <p class="mt-1 text-[11px] text-slate-400">{{ __('Spreads per-job labour/overhead onto a unit.') }}</p>
            <x-input-error for="jobs_per_day" class="mt-2" />
        </div>

        <div>
            <x-input id="markup_pct" type="number" step="0.01" min="0" class="block w-full placeholder:text-xs" wire:model.live.debounce.400ms="markup_pct" placeholder="{{ __('Markup % (e.g. 40)') }}" aria-label="{{ __('Markup (%)') }}" />
        </div>
        <div>
            <x-input id="buffer_pct" type="number" step="0.01" min="0" class="block w-full placeholder:text-xs" wire:model.live.debounce.400ms="buffer_pct" placeholder="{{ __('Materials buffer % (e.g. 5)') }}" aria-label="{{ __('Materials buffer (%)') }}" />
        </div>
        <div>
            <x-input id="risk_pct" type="number" step="0.01" min="0" class="block w-full placeholder:text-xs" wire:model.live.debounce.400ms="risk_pct" placeholder="{{ __('Risk % (e.g. 5)') }}" aria-label="{{ __('Risk (%)') }}" />
        </div>
        <div>
            <x-input id="misc_pct" type="number" step="0.01" min="0" class="block w-full placeholder:text-xs" wire:model.live.debounce.400ms="misc_pct" placeholder="{{ __('Misc % (e.g. 3)') }}" aria-label="{{ __('Misc (%)') }}" />
        </div>
        <div>
            <x-input id="competitor_price" type="number" step="0.01" min="0" class="block w-full placeholder:text-xs" wire:model.live.debounce.400ms="competitor_price" placeholder="{{ __('Competitor price (benchmark)') }}" aria-label="{{ __('Competitor price') }}" />
        </div>
        <div>
            <div class="flex gap-2">
                <label class="flex flex-1 items-center justify-center gap-2 rounded-xl border px-3 py-2 text-sm {{ in_array('dtf', $methods) ? 'border-indigo-400 bg-indigo-50 text-indigo-700' : 'border-slate-200 text-slate-600' }}">
                    <input type="checkbox" value="dtf" wire:model.live="methods" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" /> {{ __('DTF') }}
                </label>
                <label class="flex flex-1 items-center justify-center gap-2 rounded-xl border px-3 py-2 text-sm {{ in_array('emb', $methods) ? 'border-indigo-400 bg-indigo-50 text-indigo-700' : 'border-slate-200 text-slate-600' }}">
                    <input type="checkbox" value="emb" wire:model.live="methods" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" /> {{ __('EMB') }}
                </label>
            </div>
        </div>
    </div>
</x-card>

{{-- Recipe (bill of materials) --}}
<x-card class="p-6">
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
            <h2 class="text-base font-semibold text-slate-900">{{ __('Bill of materials') }}</h2>
            <p class="text-xs text-slate-500">{{ __('What this product consumes to produce, drives the computed cost. Add a category, tick the items you use, then fill in the details.') }}</p>
        </div>
    </div>

    {{-- Category add buttons (open the tick-many picker) --}}
    <div class="mt-4 flex flex-wrap gap-2">
        @foreach ($typeMeta as $t => $m)
            <button type="button" wire:click="openPicker('{{ $t }}')"
                class="group inline-flex items-center gap-2 rounded-xl border px-3 py-1.5 text-xs font-semibold shadow-sm transition {{ $m['btn'] }}">
                <x-icon name="{{ $m['icon'] }}" class="h-4 w-4" /> {{ $m['label'] }}
                <x-icon name="plus" class="h-3.5 w-3.5 opacity-40 transition group-hover:opacity-90" />
            </button>
        @endforeach
    </div>

    @if (empty($bom))
        <p class="mt-4 rounded-xl border border-dashed border-slate-300 bg-white px-4 py-8 text-center text-sm text-slate-400">
            {{ __('No recipe lines yet. Pick a category above to add materials, machine time, labour, or outsourced work.') }}
        </p>
    @else
        @php
            // Compact per-field label, kept tiny so a whole line fits on one row.
            $lbl = 'mb-0.5 block text-[10px] font-semibold uppercase tracking-wide text-slate-400';
            $fld = 'block w-full rounded-lg border-slate-300 py-1.5 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
        @endphp
        <div class="mt-5 space-y-4">
            @foreach ($typeMeta as $type => $meta)
                @php $groupIdx = collect($bom)->keys()->filter(fn ($k) => ($bom[$k]['component_type'] ?? 'material') === $type)->values(); @endphp
                @if ($groupIdx->isNotEmpty())
                    <div wire:key="bomgroup-{{ $type }}" x-data="{ open: true }" class="overflow-hidden rounded-2xl border {{ $meta['border'] }} bg-white shadow-sm">
                        {{-- Group header, click the label to collapse/expand the section --}}
                        <div class="flex items-center justify-between gap-2 px-3 py-2" x-bind:class="open && 'border-b border-slate-100'">
                            <button type="button" x-on:click="open = ! open" class="inline-flex items-center gap-2 text-left" x-bind:aria-expanded="open">
                                <span class="text-slate-400 transition-transform duration-200" x-bind:class="! open && '-rotate-90'">
                                    <x-icon name="chevron-down" class="h-4 w-4" />
                                </span>
                                <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold ring-1 {{ $meta['head'] }}">
                                    <x-icon name="{{ $meta['icon'] }}" class="h-3.5 w-3.5" /> {{ $meta['label'] }}
                                    <span class="rounded-full bg-white/70 px-1.5 text-[10px]">{{ $groupIdx->count() }}</span>
                                </span>
                            </button>
                            <button type="button" wire:click="openPicker('{{ $type }}')" class="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-semibold text-slate-500 transition hover:bg-slate-50 hover:text-slate-800">
                                <x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('Add') }}
                            </button>
                        </div>

                        {{-- Rows, collapse via a CSS grid-rows height transition (no plugin needed) --}}
                        <div class="grid transition-[grid-template-rows] duration-200 ease-out" x-bind:class="open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'">
                        <div class="min-h-0 overflow-hidden">
                        {{-- Zebra-striped in the category hue + numbered so no two read alike --}}
                        <div class="divide-y divide-slate-100">
                            @foreach ($groupIdx as $i)
                                @php
                                    $line = $bom[$i];
                                    $ctype = $line['component_type'] ?? 'material';
                                    $lineVariant = $ctype === 'material' && ! empty($line['material_variant_id'])
                                        ? ($variantById[(int) $line['material_variant_id']] ?? null)
                                        : null;
                                    $fromStock = ($line['source'] ?? (empty($line['material_variant_id']) ? 'bought' : 'stock')) === 'stock';
                                @endphp
                                <div wire:key="bom-{{ $i }}" class="flex items-start gap-2.5 px-3 py-2.5 transition {{ $loop->even ? $meta['zebra'] : 'bg-white' }}">
                                    <span class="mt-5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-bold {{ $meta['num'] }}">{{ $loop->iteration }}</span>

                                    <div class="min-w-0 flex-1">
                                        <div class="flex flex-wrap items-start gap-x-3 gap-y-2">
                                            {{-- Identity (per type) --}}
                                            @if ($ctype === 'material')
                                                <div class="min-w-[220px] flex-1 space-y-1.5">
                                                    <div class="inline-flex gap-0.5 rounded-lg bg-slate-100 p-0.5">
                                                        <button type="button" wire:click="setMaterialSource({{ $i }}, 'stock')"
                                                            class="rounded-md px-2 py-0.5 text-[11px] font-semibold transition {{ $fromStock ? 'bg-white text-emerald-700 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">
                                                            {{ __('From stock') }}
                                                        </button>
                                                        <button type="button" wire:click="setMaterialSource({{ $i }}, 'bought')"
                                                            class="rounded-md px-2 py-0.5 text-[11px] font-semibold transition {{ ! $fromStock ? 'bg-white text-amber-700 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">
                                                            {{ __('Bought') }}
                                                        </button>
                                                    </div>
                                                    @if ($fromStock)
                                                        <select wire:model.live="bom.{{ $i }}.material_variant_id" class="{{ $fld }}">
                                                            <option value="">{{ __('— Select material —') }}</option>
                                                            @foreach ($materialVariants as $v)
                                                                <option value="{{ $v['id'] }}">{{ $v['material'] }}@if ($v['label']), {{ $v['label'] }}@endif @if ($v['base_unit']) ({{ $v['base_unit'] }})@endif</option>
                                                            @endforeach
                                                        </select>
                                                        <x-input-error for="bom.{{ $i }}.material_variant_id" class="mt-1" />
                                                    @else
                                                        <div class="flex flex-wrap items-start gap-2">
                                                            <input type="text" wire:model="bom.{{ $i }}.description" placeholder="{{ __('Item name') }}" class="{{ $fld }} min-w-[140px] flex-1" />
                                                            <input type="number" step="0.01" min="0" wire:model.live.debounce.400ms="bom.{{ $i }}.unit_cost" placeholder="{{ __('Cost') }}" class="{{ $fld }} w-24" />
                                                        </div>
                                                        <x-input-error for="bom.{{ $i }}.unit_cost" class="mt-1" />
                                                    @endif
                                                </div>
                                            @elseif ($ctype === 'machine')
                                                <div class="min-w-[200px] flex-1">
                                                    <span class="{{ $lbl }}">{{ __('Machine') }}</span>
                                                    <select wire:model.live="bom.{{ $i }}.asset_id" class="{{ $fld }}">
                                                        <option value="">{{ __('— Select machine —') }}</option>
                                                        @foreach ($assetOptions as $a)
                                                            <option value="{{ $a->id }}">{{ $a->name }}@if ($a->run_rate !== null), {{ $baseCodeModal }} {{ number_format((float) $a->run_rate, 2) }}/{{ $a->rate_unit ?: __('unit') }}@endif</option>
                                                        @endforeach
                                                    </select>
                                                    <x-input-error for="bom.{{ $i }}.asset_id" class="mt-1" />
                                                    <p class="mt-1 text-[11px] text-slate-400">{{ __('Cost auto, from the machine run-rate.') }}</p>
                                                </div>
                                            @elseif ($ctype === 'outsourced')
                                                <div class="min-w-[160px] flex-1">
                                                    <span class="{{ $lbl }}">{{ __('Item / service') }}</span>
                                                    <input type="text" wire:model="bom.{{ $i }}.description" placeholder="{{ __('e.g. Cut & sew, plates') }}" class="{{ $fld }}" />
                                                </div>
                                                <div class="min-w-[150px] flex-1">
                                                    <span class="{{ $lbl }}">{{ __('Supplier') }}</span>
                                                    <select wire:model.live="bom.{{ $i }}.supplier_id" class="{{ $fld }}">
                                                        <option value="">{{ __('— Select supplier —') }}</option>
                                                        @foreach ($supplierOptions as $s)
                                                            <option value="{{ $s->id }}">{{ $s->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <x-input-error for="bom.{{ $i }}.supplier_id" class="mt-1" />
                                                </div>
                                                <div class="w-24">
                                                    <span class="{{ $lbl }}">{{ __('Unit cost') }}</span>
                                                    <input type="number" step="0.01" min="0" wire:model.live.debounce.400ms="bom.{{ $i }}.unit_cost" class="{{ $fld }}" />
                                                    <x-input-error for="bom.{{ $i }}.unit_cost" class="mt-1" />
                                                </div>
                                            @elseif (in_array($ctype, ['labour', 'overhead'], true))
                                                <div class="min-w-[200px] flex-1">
                                                    <span class="{{ $lbl }}">{{ __('Rate') }}</span>
                                                    <select wire:model.live="bom.{{ $i }}.operating_cost_id" class="{{ $fld }}">
                                                        <option value="">{{ __('— Manual cost —') }}</option>
                                                        @foreach ($operatingCostOptions->where('type', $ctype) as $oc)
                                                            <option value="{{ $oc->id }}">{{ $oc->name }} ({{ str_replace('_', ' ', $oc->allocation_basis) }})</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="w-24">
                                                    <span class="{{ $lbl }}">{{ __('Unit cost') }}</span>
                                                    <input type="number" step="0.0001" min="0" wire:model.live.debounce.400ms="bom.{{ $i }}.unit_cost" class="{{ $fld }}" />
                                                    <x-input-error for="bom.{{ $i }}.unit_cost" class="mt-1" />
                                                </div>
                                            @elseif ($ctype === 'ink')
                                                <div class="min-w-[200px] flex-1">
                                                    <span class="{{ $lbl }}">{{ __('Ink pass-mode') }}</span>
                                                    <select wire:model.live="bom.{{ $i }}.ink_mode_id" class="{{ $fld }}">
                                                        <option value="">{{ __('— Select pass-mode —') }}</option>
                                                        @foreach ($inkModeOptions as $im)
                                                            <option value="{{ $im->id }}">{{ $im->name }} ({{ rtrim(rtrim(number_format((float) $im->ml_per_sqm, 2), '0'), '.') }} ml/m²)</option>
                                                        @endforeach
                                                    </select>
                                                    <x-input-error for="bom.{{ $i }}.ink_mode_id" class="mt-1" />
                                                    <p class="mt-1 text-[11px] text-slate-400">{{ __('Cost auto, per m² at the ink rate in Costing.') }}</p>
                                                </div>
                                            @endif

                                            {{-- Detail (shared, compact) --}}
                                            <div class="flex flex-wrap items-start gap-x-2.5 gap-y-2">
                                                @if (! empty($methods))
                                                    <div class="w-20">
                                                        <span class="{{ $lbl }}">{{ __('Method') }}</span>
                                                        <select wire:model.live="bom.{{ $i }}.method" class="{{ $fld }} !px-1.5">
                                                            <option value="">{{ __('All') }}</option>
                                                            @if (in_array('dtf', $methods)) <option value="dtf">DTF</option> @endif
                                                            @if (in_array('emb', $methods)) <option value="emb">EMB</option> @endif
                                                        </select>
                                                    </div>
                                                @endif
                                                <div class="w-28">
                                                    <span class="{{ $lbl }}">{{ __('Basis') }}</span>
                                                    <select wire:model.live="bom.{{ $i }}.consumption_basis" class="{{ $fld }} !px-1.5">
                                                        <option value="per_item">{{ __('Per item') }}</option>
                                                        <option value="per_sqm">{{ __('Per m²') }}</option>
                                                        <option value="per_linear_m">{{ __('Per lin. m') }}</option>
                                                    </select>
                                                </div>
                                                <div class="w-16">
                                                    <span class="{{ $lbl }}">{{ __('Qty') }}</span>
                                                    <input type="number" step="0.000001" min="0" wire:model.live.debounce.400ms="bom.{{ $i }}.quantity" class="{{ $fld }} !px-2 text-center" />
                                                    <x-input-error for="bom.{{ $i }}.quantity" class="mt-1" />
                                                </div>
                                                <div class="w-14">
                                                    <span class="{{ $lbl }}">{{ __('Unit') }}</span>
                                                    <input type="text" wire:model="bom.{{ $i }}.unit" class="{{ $fld }} !px-2 text-center" />
                                                </div>
                                                <div class="w-16">
                                                    <span class="{{ $lbl }}">{{ __('Waste') }}</span>
                                                    <input type="number" step="0.01" min="0" max="100" wire:model.live.debounce.400ms="bom.{{ $i }}.waste_pct" class="{{ $fld }} !px-2 text-center" />
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Contextual notes (material only) --}}
                                        @if ($ctype === 'material')
                                            <div class="mt-1.5 flex flex-wrap items-center gap-2">
                                                @if ($fromStock)
                                                    <span class="text-[11px] text-slate-400">{{ __('Cost auto, live stock price.') }}</span>
                                                    @if ($lineVariant && ($lineVariant['stock_dimension'] ?? 'unit') === 'roll' && ($lineVariant['roll_width'] ?? null))
                                                        <span class="inline-flex items-center gap-1 rounded-md bg-amber-50 px-1.5 py-0.5 text-[11px] font-medium text-amber-700">
                                                            <x-icon name="arrows-pointing-out" class="h-3 w-3" /> {{ __('Roll, :w m wide', ['w' => rtrim(rtrim(number_format((float) $lineVariant['roll_width'], 4), '0'), '.')]) }}
                                                        </span>
                                                    @elseif ($lineVariant && ($lineVariant['stock_dimension'] ?? 'unit') === 'sheet' && ($lineVariant['sheet_width'] ?? null) && ($lineVariant['sheet_height'] ?? null))
                                                        <span class="inline-flex items-center gap-1 rounded-md bg-sky-50 px-1.5 py-0.5 text-[11px] font-medium text-sky-700">
                                                            <x-icon name="arrows-pointing-out" class="h-3 w-3" /> {{ __('Sheet, :w × :h m', ['w' => rtrim(rtrim(number_format((float) $lineVariant['sheet_width'], 4), '0'), '.'), 'h' => rtrim(rtrim(number_format((float) $lineVariant['sheet_height'], 4), '0'), '.')]) }}
                                                        </span>
                                                    @endif
                                                @else
                                                    <label class="inline-flex items-center gap-1.5 text-[11px] font-medium text-slate-500">
                                                        <input type="checkbox" wire:model.live="bom.{{ $i }}.is_estimate" class="rounded border-slate-300 text-amber-600 focus:ring-amber-500" />
                                                        {{ __('Estimate, confirm real price at production') }}
                                                    </label>
                                                @endif
                                            </div>
                                        @endif
                                    </div>

                                    <button type="button" wire:click="removeBomLine({{ $i }})" class="mt-5 shrink-0 rounded-lg p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600" title="{{ __('Remove line') }}">
                                        <x-icon name="trash" class="h-4 w-4" />
                                    </button>
                                </div>
                            @endforeach
                        </div>{{-- divide-y --}}
                        </div>{{-- overflow-hidden --}}
                        </div>{{-- grid collapse --}}
                    </div>{{-- group --}}
                @endif
            @endforeach
        </div>
    @endif

    {{-- Live cost readout --}}
    <div class="mt-5 rounded-2xl border border-indigo-100 bg-gradient-to-br from-indigo-50 to-violet-50 p-4">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div class="grid grid-cols-3 gap-6">
                <div>
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Computed cost') }}</p>
                    <p class="mt-0.5 text-lg font-bold tabular-nums text-slate-900">{{ $baseCodeModal }} {{ number_format($recipe['cost'], 2) }}</p>
                </div>
                <div>
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Suggested price') }}</p>
                    <p class="mt-0.5 text-lg font-bold tabular-nums text-indigo-700">{{ $baseCodeModal }} {{ number_format($recipe['price'], 2) }}</p>
                </div>
                <div>
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Margin') }}</p>
                    <p class="mt-0.5 text-lg font-bold tabular-nums {{ $recipe['margin'] === null ? 'text-slate-400' : ($recipe['margin'] >= 0 ? 'text-emerald-600' : 'text-rose-600') }}">
                        {{ $recipe['margin'] === null ? '—' : number_format($recipe['margin'], 2) . '%' }}
                    </p>
                </div>
            </div>

            <div class="flex flex-wrap items-end gap-3">
                @if ($pricing_mode !== 'fixed')
                    <div class="w-32">
                        <x-label class="!text-[11px]" value="{{ $pricing_mode === 'per_sqm' ? __('Preview area (m²)') : __('Preview length (m)') }}" />
                        <x-input type="number" step="0.01" min="0" class="mt-1 block w-full !text-sm" wire:model.live.debounce.400ms="previewArea" />
                    </div>
                @endif
                @if ($recipe['hasRoll'])
                    <div class="w-28">
                        <x-label class="!text-[11px]" value="{{ __('Piece W (m)') }}" />
                        <x-input type="number" step="0.0001" min="0" class="mt-1 block w-full !text-sm" wire:model.live.debounce.400ms="previewWidth" placeholder="{{ __('e.g. 1.2') }}" />
                    </div>
                    <div class="w-28">
                        <x-label class="!text-[11px]" value="{{ __('Piece H (m)') }}" />
                        <x-input type="number" step="0.0001" min="0" class="mt-1 block w-full !text-sm" wire:model.live.debounce.400ms="previewHeight" placeholder="{{ __('e.g. 2.0') }}" />
                    </div>
                @endif
            </div>
        </div>

        @if (! empty($recipe['perMethod']) && ! empty($methods))
            <div class="mt-3 grid gap-2 sm:grid-cols-2">
                @foreach ($recipe['perMethod'] as $m => $fig)
                    <div class="rounded-xl border border-indigo-100 bg-white/70 p-3">
                        <p class="text-[11px] font-bold uppercase tracking-wider text-indigo-700">{{ strtoupper($m) }}</p>
                        <div class="mt-1 flex items-center justify-between text-sm">
                            <span class="text-slate-500">{{ __('Cost') }} <span class="font-semibold tabular-nums text-slate-800">{{ number_format($fig['cost'], 2) }}</span></span>
                            <span class="text-slate-500">{{ __('Price') }} <span class="font-semibold tabular-nums text-indigo-700">{{ number_format($fig['price'], 2) }}</span></span>
                            <span class="text-slate-500">{{ __('Margin') }} <span class="font-semibold tabular-nums text-emerald-600">{{ number_format($fig['margin'], 1) }}%</span></span>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        @if (! empty($recipe['breakdown']))
            @php $bdLabels = ['material' => __('Materials'), 'ink' => __('Ink'), 'outsourced' => __('Hardware / outsourced'), 'machine' => __('Machine'), 'labour' => __('Labour'), 'overhead' => __('Overhead')]; @endphp
            <div class="mt-3 rounded-xl border border-indigo-100 bg-white/70 p-3">
                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Cost breakdown') }}</p>
                <div class="mt-2 flex flex-wrap gap-2">
                    @foreach ($recipe['breakdown'] as $type => $amt)
                        <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">
                            <span class="h-2 w-2 rounded-full {{ $typeMeta[$type]['dot'] ?? 'bg-slate-400' }}"></span>
                            {{ $bdLabels[$type] ?? ucfirst($type) }}
                            <span class="font-semibold tabular-nums text-slate-900">{{ $baseCodeModal }} {{ number_format($amt, 2) }}</span>
                        </span>
                    @endforeach
                </div>
                <p class="mt-2 text-[11px] text-slate-500">
                    {{ __('Cost-plus uplift') }}: <span class="font-semibold text-slate-700">+{{ number_format($recipe['uplift'], 1) }}%</span>
                    <span class="text-slate-400">{{ __('(buffer + markup + risk + misc)') }}</span>
                </p>
            </div>
        @endif

        @if (! empty($recipe['competitor']))
            @php
                $cdiff = $recipe['price'] - $recipe['competitor'];
                $cpct = $recipe['competitor'] > 0 ? ($cdiff / $recipe['competitor']) * 100 : 0;
            @endphp
            <div class="mt-2 flex flex-wrap items-center gap-2 text-xs">
                <span class="text-slate-500">{{ __('Competitor') }}: <span class="font-semibold tabular-nums text-slate-700">{{ $baseCodeModal }} {{ number_format($recipe['competitor'], 2) }}</span></span>
                <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-semibold {{ $cdiff <= 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">
                    {{ $cdiff <= 0 ? '▼' : '▲' }} {{ $baseCodeModal }} {{ number_format(abs($cdiff), 2) }}
                    ({{ number_format(abs($cpct), 0) }}% {{ $cdiff <= 0 ? __('below market') : __('above market') }})
                </span>
            </div>
        @endif
    </div>

</x-card>

{{-- Quantity price tiers --}}
<x-card class="p-6">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-base font-semibold text-slate-900">{{ __('Quantity price tiers') }}</h2>
            <p class="text-xs text-slate-500">{{ __('Optional break pricing by quantity (e.g. 1–24, 25–100). Applied automatically on quotes.') }}</p>
        </div>
        <button type="button" wire:click="addTier" class="inline-flex items-center gap-1 rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
            <x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('Tier') }}
        </button>
    </div>

    @if (! empty($tiers))
        <div class="mt-3 space-y-2">
            @foreach ($tiers as $i => $tier)
                <div wire:key="tier-{{ $i }}" class="grid grid-cols-12 items-end gap-2 rounded-xl border border-slate-200 bg-white p-2">
                    @if (! empty($methods))
                        <div class="col-span-3">
                            <x-label class="!text-[11px]" value="{{ __('Method') }}" />
                            <select wire:model="tiers.{{ $i }}.method" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('All') }}</option>
                                @if (in_array('dtf', $methods)) <option value="dtf">DTF</option> @endif
                                @if (in_array('emb', $methods)) <option value="emb">EMB</option> @endif
                            </select>
                        </div>
                    @endif
                    <div class="{{ empty($methods) ? 'col-span-3' : 'col-span-2' }}">
                        <x-label class="!text-[11px]" value="{{ __('Min qty') }}" />
                        <x-input type="number" min="1" class="mt-1 block w-full !text-sm" wire:model="tiers.{{ $i }}.min_qty" />
                        <x-input-error for="tiers.{{ $i }}.min_qty" class="mt-1" />
                    </div>
                    <div class="{{ empty($methods) ? 'col-span-3' : 'col-span-2' }}">
                        <x-label class="!text-[11px]" value="{{ __('Max qty') }}" />
                        <x-input type="number" min="1" class="mt-1 block w-full !text-sm" wire:model="tiers.{{ $i }}.max_qty" placeholder="{{ __('∞') }}" />
                    </div>
                    <div class="col-span-4">
                        <x-label class="!text-[11px]" value="{{ __('Unit price') }} ({{ $baseCodeModal }})" />
                        <x-input type="number" step="0.01" min="0" class="mt-1 block w-full !text-sm" wire:model="tiers.{{ $i }}.unit_price" />
                        <x-input-error for="tiers.{{ $i }}.unit_price" class="mt-1" />
                    </div>
                    <div class="col-span-1 flex justify-end">
                        <button type="button" wire:click="removeTier({{ $i }})" class="rounded-lg p-2 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600" title="{{ __('Remove tier') }}">
                            <x-icon name="trash" class="h-4 w-4" />
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</x-card>