@php
    $pillClass = [
        'up' => 'bg-emerald-50 text-emerald-700',
        'down' => 'bg-rose-50 text-rose-700',
        'muted' => 'bg-slate-100 text-slate-500',
    ];

    $kpis = [
        [
            'label' => __('Total Products'),
            'value' => number_format($stats['total']),
            'icon' => 'cube', 'accent' => '#124a61',
            'sub' => ['text' => number_format($stats['active']) . ' ' . __('active') . ' · ' . number_format($stats['inactive']) . ' ' . __('inactive'), 'tone' => 'muted', 'arrow' => null],
        ],
        [
            'label' => __('Active Products'),
            'value' => number_format($stats['active']),
            'icon' => 'check-circle', 'accent' => '#10b981',
            'sub' => ['text' => $stats['active_pct'] . '% ' . __('of catalogue'), 'tone' => $stats['active_pct'] >= 50 ? 'up' : 'muted', 'arrow' => null],
        ],
        [
            'label' => __('Avg. Margin'),
            'value' => $stats['avg_margin'] !== null ? number_format($stats['avg_margin'], 2) . '%' : '—',
            'icon' => 'receipt-percent', 'accent' => '#f59e0b',
            'sub' => ['text' => trans_choice('{1} across :count priced item|[2,*] across :count priced items', $stats['priced'], ['count' => number_format($stats['priced'])]),
                'tone' => $stats['avg_margin'] === null ? 'muted' : ($stats['avg_margin'] >= 25 ? 'up' : ($stats['avg_margin'] < 10 ? 'down' : 'muted')), 'arrow' => null],
        ],
        [
            'label' => __('Needs Pricing'),
            'value' => number_format($stats['uncosted']),
            'icon' => $stats['uncosted'] > 0 ? 'exclamation-triangle' : 'check-circle',
            'accent' => $stats['uncosted'] > 0 ? '#f43f5e' : '#10b981',
            'sub' => $stats['uncosted'] > 0
                ? ['text' => __('Uncosted, set a recipe or cost'), 'tone' => 'down', 'arrow' => null]
                : ['text' => __('Every product is costed'), 'tone' => 'up', 'arrow' => null],
        ],
    ];

    // Revenue is a financial figure: hidden from Production (and anyone without
    // financial visibility), shown to management just before "Needs Pricing".
    if ($canViewRevenue) {
        array_splice($kpis, 3, 0, [[
            'label' => __('Revenue (MTD)'),
            'value' => $baseCode . ' ' . number_format($stats['revenue_mtd'], 2),
            'icon' => 'banknotes', 'accent' => '#a855f7',
            'sub' => $stats['revenue_delta'] !== null
                ? ['text' => number_format(abs($stats['revenue_delta']), 1) . '% ' . __('vs last month'), 'tone' => $stats['revenue_delta'] >= 0 ? 'up' : 'down', 'arrow' => $stats['revenue_delta'] >= 0 ? 'up' : 'down']
                : ['text' => __('This month'), 'tone' => 'muted', 'arrow' => null],
        ]]);
    }
@endphp

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

        <x-page-header :title="__('Products')" :subtitle="__('Manage the products and services you bill for.')" class="!mb-0">
            <a href="{{ route('product-categories.index') }}" class="inline-flex items-center justify-center rounded-xl border border-slate-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-slate-700 shadow-sm transition hover:bg-slate-50">
                <x-icon name="tag" class="-ms-1 me-1.5 h-4 w-4" />
                {{ __('Manage Categories') }}
            </a>
            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-2 h-4 w-4" />
                    {{ __('New Product') }}
                </x-button>
            @endif
        </x-page-header>

        <!-- KPI cards -->
        <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
            @foreach ($kpis as $kpi)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $kpi['label'] }}">{{ $kpi['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $kpi['accent'] }}, {{ $kpi['accent'] }}bb)">
                            <x-icon :name="$kpi['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $kpi['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full px-2 py-1 text-[11px] font-semibold {{ $pillClass[$kpi['sub']['tone']] ?? $pillClass['muted'] }}">
                        @if (! empty($kpi['sub']['arrow']))
                            <x-icon :name="$kpi['sub']['arrow'] === 'up' ? 'arrow-trending-up' : 'arrow-trending-down'" class="h-3 w-3 shrink-0" />
                        @endif
                        {{ $kpi['sub']['text'] }}
                    </span>
                </x-card>
            @endforeach
        </section>

        <!-- Table -->
        <x-card>
            <!-- Search + filters -->
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:flex-wrap sm:items-center sm:p-6">
                <div class="relative flex-1 sm:max-w-xs">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('Search products...') }}"
                        class="block w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm transition focus:border-indigo-500 focus:ring-indigo-500"
                    />
                </div>

                <select wire:model.live="categoryFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('All Categories') }}</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>

                <select wire:model.live="statusFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('All Status') }}</option>
                    <option value="active">{{ __('Active') }}</option>
                    <option value="inactive">{{ __('Inactive') }}</option>
                </select>

                <select wire:model.live="typeFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('All Types') }}</option>
                    <option value="catalogue">{{ __('Catalogue') }}</option>
                    <option value="bespoke">{{ __('Bespoke') }}</option>
                </select>
            </div>

            @if ($products->isEmpty())
                <div class="p-6">
                    <x-empty-state
                        icon="cube"
                        :title="__('No products found')"
                        :message="$search !== '' || $categoryFilter !== '' || $statusFilter !== '' || $typeFilter !== '' ? __('No products match your filters. Try adjusting them.') : __('Add your first product to start building quotes and invoices.')"
                        class="border-0"
                    >
                        @if ($canManage && $search === '' && $categoryFilter === '' && $statusFilter === '' && $typeFilter === '')
                            <x-button wire:click="create" type="button">
                                <x-icon name="plus" class="-ms-1 me-2 h-4 w-4" />
                                {{ __('New Product') }}
                            </x-button>
                        @endif
                    </x-empty-state>
                </div>
            @else
                <!-- Table (desktop) -->
                <div class="hidden overflow-x-auto lg:block">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80">
                                <th class="w-2/5 px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Product') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Category') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Sell Price') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Avg. Cost') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Margin') }}</th>
                                @if ($canViewRevenue)
                                    <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Revenue (MTD)') }}</th>
                                @endif
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($products as $product)
                                @php $margin = $product->margin; @endphp
                                <tr wire:key="product-{{ $product->id }}" class="transition hover:bg-slate-50/75">
                                    <td class="px-3 lg:px-4 py-2.5">
                                        <div class="flex items-center gap-2">
                                            <p class="text-sm font-medium text-slate-900">{{ $product->name }}</p>
                                            @if ($product->is_bespoke)
                                                <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-[11px] font-semibold text-amber-700 ring-1 ring-amber-200" title="{{ __('Custom-made for one client, not resold as-is') }}">
                                                    <x-icon name="sparkles" class="h-3 w-3" /> {{ __('Bespoke') }}
                                                </span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-2.5">
                                        @if ($product->category)
                                            <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" style="background: {{ $product->category->color }}"></span>
                                                {{ $product->category->name }}
                                            </span>
                                        @else
                                            <span class="text-sm text-slate-400">—</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-2.5 text-right text-sm tabular-nums text-slate-900">{{ $baseCode }} {{ number_format((float) $product->default_price, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-2.5 text-right text-sm tabular-nums text-slate-600">{{ $baseCode }} {{ number_format((float) $product->cost, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-2.5 text-right text-sm font-semibold tabular-nums {{ $margin === null ? 'text-slate-400' : ($margin >= 0 ? 'text-emerald-600' : 'text-rose-600') }}">
                                        {{ $margin === null ? '—' : number_format($margin, 2) . '%' }}
                                    </td>
                                    @if ($canViewRevenue)
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-2.5 text-right text-sm tabular-nums text-slate-900">{{ $baseCode }} {{ number_format($revenueMtdByProduct[$product->id] ?? 0, 2) }}</td>
                                    @endif
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-2.5 text-right text-sm font-medium">
                                        @if ($canManage || $canQuote)
                                            <div class="flex items-center justify-end gap-1">
                                                @if ($canQuote)
                                                    <button wire:click="openAddToQuote({{ $product->id }})" class="rounded-lg p-2 text-slate-400 transition hover:bg-emerald-50 hover:text-emerald-600" title="{{ __('Add to a quote') }}">
                                                        <x-icon name="document-currency-dollar" class="h-4 w-4" />
                                                    </button>
                                                @endif
                                                <x-notes-button :for="$product" />
                                                @if ($canManage)
                                                <button wire:click="edit({{ $product->id }})" class="rounded-lg p-2 text-slate-400 transition hover:bg-indigo-50 hover:text-indigo-600" title="{{ __('Edit') }}">
                                                    <x-icon name="pencil-square" class="h-4 w-4" />
                                                </button>
                                                <button wire:click="duplicate({{ $product->id }})" class="rounded-lg p-2 text-slate-400 transition hover:bg-sky-50 hover:text-sky-600" title="{{ __('Duplicate') }}">
                                                    <x-icon name="document-duplicate" class="h-4 w-4" />
                                                </button>
                                                <button
                                                    wire:click="delete({{ $product->id }})"
                                                    wire:confirm="{{ __('Are you sure you want to delete this product?') }}"
                                                    class="rounded-lg p-2 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600"
                                                    title="{{ __('Delete') }}"
                                                >
                                                    <x-icon name="trash" class="h-4 w-4" />
                                                </button>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-slate-400">—</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Cards (mobile / tablet) -->
                <div class="divide-y divide-slate-100 lg:hidden">
                    @foreach ($products as $product)
                        @php $margin = $product->margin; @endphp
                        <div wire:key="product-mobile-{{ $product->id }}" class="p-4">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <p class="text-sm font-semibold text-slate-900">{{ $product->name }}</p>
                                        @if ($product->is_bespoke)
                                            <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-[11px] font-semibold text-amber-700 ring-1 ring-amber-200">
                                                <x-icon name="sparkles" class="h-3 w-3" /> {{ __('Bespoke') }}
                                            </span>
                                        @endif
                                    </div>
                                    <p class="mt-0.5 text-xs text-slate-400">{{ $product->sku ? 'SKU: ' . $product->sku : '' }}
                                        @if ($product->category)
                                            · {{ $product->category->name }}
                                        @endif
                                    </p>
                                    <p class="mt-1 text-sm text-slate-600">{{ $baseCode }} {{ number_format((float) $product->default_price, 2) }} / {{ $product->unit ?: '—' }}</p>
                                    <p class="text-xs text-slate-500">
                                        {{ __('Margin') }}:
                                        <span class="{{ $margin === null ? 'text-slate-400' : ($margin >= 0 ? 'text-emerald-600' : 'text-rose-600') }} font-medium">{{ $margin === null ? '—' : number_format($margin, 2) . '%' }}</span>
                                        @if ($canViewRevenue)
                                            · {{ __('Revenue') }}: {{ $baseCode }} {{ number_format($revenueMtdByProduct[$product->id] ?? 0, 2) }}
                                        @endif
                                    </p>
                                    <div class="mt-2">
                                        @if ($product->is_active)
                                            <x-badge color="emerald">{{ __('Active') }}</x-badge>
                                        @else
                                            <x-badge color="slate">{{ __('Inactive') }}</x-badge>
                                        @endif
                                    </div>
                                </div>
                                @if ($canManage || $canQuote)
                                    <div class="flex shrink-0 items-center gap-1">
                                        @if ($canQuote)
                                            <button wire:click="openAddToQuote({{ $product->id }})" class="rounded-lg p-2 text-slate-400 transition hover:bg-emerald-50 hover:text-emerald-600" title="{{ __('Add to a quote') }}">
                                                <x-icon name="document-currency-dollar" class="h-4 w-4" />
                                            </button>
                                        @endif
                                        <x-notes-button :for="$product" />
                                        @if ($canManage)
                                            <button wire:click="edit({{ $product->id }})" class="rounded-lg p-2 text-slate-400 transition hover:bg-indigo-50 hover:text-indigo-600">
                                                <x-icon name="pencil-square" class="h-4 w-4" />
                                            </button>
                                            <button wire:click="duplicate({{ $product->id }})" class="rounded-lg p-2 text-slate-400 transition hover:bg-sky-50 hover:text-sky-600" title="{{ __('Duplicate') }}">
                                                <x-icon name="document-duplicate" class="h-4 w-4" />
                                            </button>
                                            <button
                                                wire:click="delete({{ $product->id }})"
                                                wire:confirm="{{ __('Are you sure you want to delete this product?') }}"
                                                class="rounded-lg p-2 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600"
                                            >
                                                <x-icon name="trash" class="h-4 w-4" />
                                            </button>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="flex flex-col items-center justify-between gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:px-6">
                    <p class="text-xs text-slate-500">
                        {{ __('Showing :from to :to of :total results', ['from' => $products->firstItem() ?? 0, 'to' => $products->lastItem() ?? 0, 'total' => $products->total()]) }}
                    </p>
                    <div class="flex items-center gap-3">
                        {{ $products->onEachSide(1)->links() }}
                        <select wire:model.live="perPage" class="rounded-lg border-slate-300 py-1 pl-2 pr-7 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="10">10 / {{ __('page') }}</option>
                            <option value="25">25 / {{ __('page') }}</option>
                            <option value="50">50 / {{ __('page') }}</option>
                        </select>
                    </div>
                </div>
            @endif
        </x-card>

        <!-- Top selling + revenue trend + category donut -->
        <section class="grid grid-cols-1 gap-6 {{ $canViewRevenue ? 'lg:grid-cols-3' : 'lg:grid-cols-2' }}">
            @if ($canViewRevenue)
            <!-- Top selling products -->
            <x-card class="p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Top Selling Products') }}</h2>
                        <p class="text-xs text-slate-500">{{ __('By revenue this month') }}</p>
                    </div>
                </div>

                <div class="mt-4 space-y-4">
                    @forelse (collect($topSelling)->take(4) as $i => $row)
                        <div class="flex items-center gap-3">
                            <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-indigo-50 text-xs font-bold text-indigo-600">{{ $i + 1 }}</span>
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center justify-between gap-2">
                                    <p class="truncate text-sm font-medium text-slate-900">{{ $row['name'] }}</p>
                                    <p class="shrink-0 text-sm font-semibold text-slate-900">{{ $baseCode }} {{ number_format($row['revenue'], 0) }}</p>
                                </div>
                                <p class="text-[11px] text-slate-400">{{ trans_choice('{0} no invoices|{1} :count invoice|[2,*] :count invoices', $row['uses'], ['count' => $row['uses']]) }}</p>
                                <div class="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
                                    <div class="h-full rounded-full bg-gradient-to-r from-indigo-500 to-violet-500" style="width: {{ max($row['pct'], 3) }}%"></div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="py-12 text-center text-sm text-slate-400">{{ __('No sales recorded this month yet.') }}</p>
                    @endforelse
                </div>
            </x-card>

            <!-- Revenue trend -->
            <x-card class="p-6">
                <div class="flex items-start justify-between">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Revenue Trend') }}</h2>
                        <p class="text-xs text-slate-500">{{ __('Last 6 months') }}</p>
                    </div>
                    <span class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-medium text-slate-500">
                        <span class="h-1.5 w-1.5 rounded-full bg-indigo-500"></span>{{ __('Monthly') }}
                    </span>
                </div>
                <div wire:ignore class="mt-2" x-data="dashRevenueChart(@js([
                    'labels' => $revenueTrend['labels'],
                    'values' => $revenueTrend['values'],
                    'target' => $revenueTrend['target'],
                    'targetKind' => $revenueTrend['targetKind'],
                    'code' => $baseCode,
                ]))">
                    <div x-ref="chart"></div>
                </div>
            </x-card>
            @endif

            <!-- Products by category -->
            <x-card class="p-6">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Products by Category') }}</h2>

                @if (! empty($categoryBreakdown['segments']))
                    <div wire:ignore class="mt-2" x-data="dashDonut(@js([
                        'labels' => collect($categoryBreakdown['segments'])->pluck('label')->all(),
                        'values' => collect($categoryBreakdown['segments'])->pluck('count')->all(),
                        'colors' => collect($categoryBreakdown['segments'])->pluck('color')->all(),
                        'centerLabel' => __('Total'),
                        'centerValue' => $categoryBreakdown['total'],
                    ]))">
                        <div x-ref="donut"></div>
                    </div>
                @else
                    <p class="py-12 text-center text-sm text-slate-400">{{ __('No categorised products yet.') }}</p>
                @endif
            </x-card>
        </section>
    </div>

    <!-- Add to an existing quote -->
    <x-dialog-modal wire:model.live="showAddToQuote" maxWidth="lg">
        <x-slot name="title">
            {{ __('Add to a quote') }}
        </x-slot>

        <x-slot name="content">
            @if ($addProduct)
                <div class="rounded-lg bg-slate-50 p-3 text-sm">
                    <p class="font-semibold text-slate-900">{{ $addProduct->name }}</p>
                    <p class="text-slate-500">{{ $baseCode }} {{ number_format((float) $addProduct->default_price, 2) }}
                        @if ($addProduct->pricing_mode === 'per_sqm') · {{ __('per m²') }}
                        @elseif ($addProduct->pricing_mode === 'per_linear_m') · {{ __('per linear m') }}
                        @endif
                    </p>
                </div>

                <div class="mt-4 space-y-4">
                    <div>
                        <x-label value="{{ __('Quote') }}" />
                        <select wire:model="addQuoteId" 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="">{{ __('Choose a quote…') }}</option>
                            @foreach ($addQuoteOptions as $q)
                                <option value="{{ $q->id }}">{{ $q->quote_number }}, {{ $q->customer?->name ?? __('No customer') }} ({{ $q->status }})</option>
                            @endforeach
                        </select>
                        <x-input-error for="addQuoteId" class="mt-1" />
                        @if ($addQuoteOptions->isEmpty())
                            <p class="mt-1 text-xs text-slate-400">{{ __('No editable quotes yet, create one on the Quotes page first.') }}</p>
                        @endif
                    </div>

                    <div>
                        <x-label value="{{ __('Quantity') }}" />
                        <x-input type="number" step="0.01" min="0.01" wire:model="addQty" class="mt-1 block w-full" />
                        <x-input-error for="addQty" class="mt-1" />
                    </div>
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeAddToQuote" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>
            @if ($addQuoteOptions->isNotEmpty())
                <x-button class="ms-3" wire:click="addToExistingQuote" wire:loading.attr="disabled">
                    {{ __('Add to quote') }}
                </x-button>
            @endif
        </x-slot>
    </x-dialog-modal>

    <!-- Create / Edit Modal -->
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Product') : __('New Product') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div class="sm:col-span-2">
                        <x-label for="name" value="{{ __('Name') }}" />
                        <x-input id="name" type="text" class="mt-1 block w-full" wire:model="name" />
                        <x-input-error for="name" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="sku" value="{{ __('SKU') }}" />
                        <x-input id="sku" type="text" class="mt-1 block w-full" wire:model="sku" placeholder="{{ __('e.g. BC-001') }}" />
                        <x-input-error for="sku" class="mt-2" />
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <x-label for="product_category_id" value="{{ __('Category') }}" />
                        <select id="product_category_id" wire:model="product_category_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 ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                        <x-input id="newCategory" type="text" class="mt-2 block w-full" wire:model="newCategory" placeholder="{{ __('…or type a new category') }}" />
                        <x-input-error for="product_category_id" class="mt-2" />
                        <x-input-error for="newCategory" class="mt-2" />
                    </div>
                </div>

                <div>
                    <x-label for="description" value="{{ __('Description') }}" />
                    <textarea id="description" rows="2" wire:model="description" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm transition focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="description" class="mt-2" />
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <x-label for="default_price" value="{{ __('Sell Price') }}" />
                        <x-input id="default_price" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="default_price" />
                        <x-input-error for="default_price" class="mt-2" />
                    </div>

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

                    <div>
                        <x-label for="unit" value="{{ __('Unit') }}" />
                        <x-input id="unit" type="text" class="mt-1 block w-full" wire:model="unit" placeholder="{{ __('e.g. each, hour') }}" />
                        <x-input-error for="unit" class="mt-2" />
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <x-label for="tax_rate" value="{{ __('Tax Rate (%)') }}" />
                        <x-input id="tax_rate" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="tax_rate" />
                        <x-input-error for="tax_rate" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="pricing_mode" value="{{ __('Pricing Mode') }}" />
                        <select id="pricing_mode" wire:model.live="pricing_mode" 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="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 item, width × height captured on each quote/invoice line') }}
                            </p>
                        @endif
                        <x-input-error for="pricing_mode" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="markup_pct" value="{{ __('Markup (%)') }}" />
                        <x-input id="markup_pct" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="markup_pct" placeholder="{{ __('e.g. 40') }}" />
                        <x-input-error for="markup_pct" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="buffer_pct" value="{{ __('Materials buffer (%)') }}" />
                        <x-input id="buffer_pct" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="buffer_pct" placeholder="{{ __('e.g. 5') }}" />
                        <x-input-error for="buffer_pct" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="risk_pct" value="{{ __('Risk (%)') }}" />
                        <x-input id="risk_pct" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="risk_pct" placeholder="{{ __('e.g. 5') }}" />
                        <x-input-error for="risk_pct" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="misc_pct" value="{{ __('Misc (%)') }}" />
                        <x-input id="misc_pct" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="misc_pct" placeholder="{{ __('e.g. 3') }}" />
                        <x-input-error for="misc_pct" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="competitor_price" value="{{ __('Competitor price') }}" />
                        <x-input id="competitor_price" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="competitor_price" placeholder="{{ __('benchmark') }}" />
                        <x-input-error for="competitor_price" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="jobs_per_day" value="{{ __('Jobs / day') }}" />
                        <x-input id="jobs_per_day" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="jobs_per_day" placeholder="{{ __('throughput') }}" />
                        <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-label value="{{ __('Print methods') }}" />
                        <div class="mt-1 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>
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Enable to price DTF vs Embroidery separately.') }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                    <label for="is_active" class="flex items-center gap-2 rounded-xl border border-slate-200 px-3 py-2.5">
                        <input id="is_active" type="checkbox" wire:model="is_active" class="rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                        <span class="text-sm text-slate-600">{{ __('Active') }}</span>
                    </label>

                    <label for="track_stock" class="flex items-center gap-2 rounded-xl border border-slate-200 px-3 py-2.5">
                        <input id="track_stock" type="checkbox" wire:model="track_stock" class="rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                        <span class="text-sm text-slate-600">{{ __('Track stock') }}</span>
                    </label>

                    <label for="is_outsourced" class="flex items-center gap-2 rounded-xl border border-slate-200 px-3 py-2.5">
                        <input id="is_outsourced" type="checkbox" wire:model="is_outsourced" class="rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                        <span class="text-sm text-slate-600">{{ __('Outsourced') }}</span>
                    </label>
                </div>

                <!-- Recipe (BOM) -->
                <div class="rounded-2xl border border-slate-200 bg-slate-50/60 p-4">
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <h3 class="text-sm font-semibold text-slate-900">{{ __('Recipe (Bill of Materials)') }}</h3>
                            <p class="text-xs text-slate-500">{{ __('What this product consumes to produce, drives the computed cost.') }}</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <button type="button" wire:click="addBomLine('material')" 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" /> {{ __('Material') }}
                            </button>
                            <button type="button" wire:click="addBomLine('machine')" 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" /> {{ __('Machine') }}
                            </button>
                            <button type="button" wire:click="addBomLine('outsourced')" 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" /> {{ __('Outsourced') }}
                            </button>
                            <button type="button" wire:click="addBomLine('labour')" 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" /> {{ __('Labour') }}
                            </button>
                            <button type="button" wire:click="addBomLine('overhead')" 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" /> {{ __('Overhead') }}
                            </button>
                            <button type="button" wire:click="addBomLine('ink')" 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" /> {{ __('Ink') }}
                            </button>
                        </div>
                    </div>

                    @php
                        // Fast lookup of a variant's surfaced dimension metadata by id.
                        $variantById = collect($materialVariants)->keyBy('id');
                    @endphp

                    @if (empty($bom))
                        <p class="mt-4 rounded-xl border border-dashed border-slate-300 bg-white px-4 py-6 text-center text-xs text-slate-400">
                            {{ __('No recipe lines yet. Add materials, machine time, or outsourced work above.') }}
                        </p>
                    @else
                        <div class="mt-4 space-y-3">
                            @foreach ($bom as $i => $line)
                                @php
                                    $lineVariant = ($line['component_type'] ?? 'material') === 'material' && ! empty($line['material_variant_id'])
                                        ? ($variantById[(int) $line['material_variant_id']] ?? null)
                                        : null;
                                @endphp
                                <div wire:key="bom-{{ $i }}" class="rounded-xl border border-slate-200 bg-white p-3">
                                    <div class="flex items-start gap-3">
                                        <div class="flex-1 space-y-3">
                                            <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
                                                <div class="sm:col-span-3">
                                                    <x-label class="!text-[11px]" value="{{ __('Type') }}" />
                                                    <select wire:model.live="bom.{{ $i }}.component_type" 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="material">{{ __('Material') }}</option>
                                                        <option value="machine">{{ __('Machine') }}</option>
                                                        <option value="outsourced">{{ __('Outsourced') }}</option>
                                                        <option value="labour">{{ __('Labour') }}</option>
                                                        <option value="overhead">{{ __('Overhead') }}</option>
                                                        <option value="ink">{{ __('Ink') }}</option>
                                                    </select>
                                                </div>

                                                @if (($line['component_type'] ?? 'material') === 'material')
                                                    <div class="sm:col-span-9">
                                                        <x-label class="!text-[11px]" value="{{ __('Material Variant') }}" />
                                                        <select wire:model.live="bom.{{ $i }}.material_variant_id" 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="">{{ __('— 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" />
                                                        @if ($lineVariant && ($lineVariant['stock_dimension'] ?? 'unit') === 'roll' && ($lineVariant['roll_width'] ?? null))
                                                            <p class="mt-1 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 media, :w m wide drives consumption (real linear-m yield from the piece size).', ['w' => rtrim(rtrim(number_format((float) $lineVariant['roll_width'], 4), '0'), '.')]) }}
                                                                @if (($lineVariant['default_waste_pct'] ?? 0) > 0)
                                                                    · {{ __('+:p% default waste', ['p' => rtrim(rtrim(number_format((float) $lineVariant['default_waste_pct'], 2), '0'), '.')]) }}
                                                                @endif
                                                            </p>
                                                        @elseif ($lineVariant && ($lineVariant['stock_dimension'] ?? 'unit') === 'sheet' && ($lineVariant['sheet_width'] ?? null) && ($lineVariant['sheet_height'] ?? null))
                                                            <p class="mt-1 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 media, :w × :h m per sheet.', ['w' => rtrim(rtrim(number_format((float) $lineVariant['sheet_width'], 4), '0'), '.'), 'h' => rtrim(rtrim(number_format((float) $lineVariant['sheet_height'], 4), '0'), '.')]) }}
                                                            </p>
                                                        @endif
                                                    </div>
                                                @elseif (($line['component_type'] ?? '') === 'machine')
                                                    <div class="sm:col-span-9">
                                                        <x-label class="!text-[11px]" value="{{ __('Machine / Asset') }}" />
                                                        <select wire:model.live="bom.{{ $i }}.asset_id" 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="">{{ __('— 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" />
                                                    </div>
                                                @elseif (($line['component_type'] ?? '') === 'outsourced')
                                                    <div class="sm:col-span-6">
                                                        <x-label class="!text-[11px]" value="{{ __('Supplier') }}" />
                                                        <select wire:model.live="bom.{{ $i }}.supplier_id" 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="">{{ __('— 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="sm:col-span-3">
                                                        <x-label class="!text-[11px]" value="{{ __('Unit Cost') }}" />
                                                        <x-input type="number" step="0.01" min="0" class="mt-1 block w-full !text-sm" wire:model.live.debounce.400ms="bom.{{ $i }}.unit_cost" />
                                                        <x-input-error for="bom.{{ $i }}.unit_cost" class="mt-1" />
                                                    </div>
                                                @elseif (in_array($line['component_type'] ?? '', ['labour', 'overhead'], true))
                                                    <div class="sm:col-span-6">
                                                        <x-label class="!text-[11px]" value="{{ __('Rate (from Costing)') }}" />
                                                        <select wire:model.live="bom.{{ $i }}.operating_cost_id" 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="">{{ __('— Manual cost —') }}</option>
                                                            @foreach ($operatingCostOptions->where('type', $line['component_type']) as $oc)
                                                                <option value="{{ $oc->id }}">{{ $oc->name }} ({{ str_replace('_', ' ', $oc->allocation_basis) }})</option>
                                                            @endforeach
                                                        </select>
                                                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Auto-fills the unit cost from jobs/day; override below if needed.') }}</p>
                                                    </div>
                                                    <div class="sm:col-span-3">
                                                        <x-label class="!text-[11px]" value="{{ __('Unit Cost') }}" />
                                                        <x-input type="number" step="0.0001" min="0" class="mt-1 block w-full !text-sm" wire:model.live.debounce.400ms="bom.{{ $i }}.unit_cost" />
                                                        <x-input-error for="bom.{{ $i }}.unit_cost" class="mt-1" />
                                                    </div>
                                                @elseif (($line['component_type'] ?? '') === 'ink')
                                                    <div class="sm:col-span-9">
                                                        <x-label class="!text-[11px]" value="{{ __('Ink Pass-Mode') }}" />
                                                        <select wire:model.live="bom.{{ $i }}.ink_mode_id" 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="">{{ __('— 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">{{ __('Valued per m² at the ink cost set in Costing.') }}</p>
                                                    </div>
                                                @endif
                                            </div>

                                            @if (! empty($methods))
                                                <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
                                                    <div class="sm:col-span-4">
                                                        <x-label class="!text-[11px]" value="{{ __('Applies to method') }}" />
                                                        <select wire:model.live="bom.{{ $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 methods') }}</option>
                                                            @if (in_array('dtf', $methods)) <option value="dtf">{{ __('DTF only') }}</option> @endif
                                                            @if (in_array('emb', $methods)) <option value="emb">{{ __('EMB only') }}</option> @endif
                                                        </select>
                                                    </div>
                                                </div>
                                            @endif

                                            <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
                                                <div class="sm:col-span-4">
                                                    <x-label class="!text-[11px]" value="{{ __('Description') }}" />
                                                    <x-input type="text" class="mt-1 block w-full !text-sm" wire:model="bom.{{ $i }}.description" placeholder="{{ __('Optional note') }}" />
                                                </div>
                                                <div class="sm:col-span-3">
                                                    <x-label class="!text-[11px]" value="{{ __('Basis') }}" />
                                                    <select wire:model.live="bom.{{ $i }}.consumption_basis" 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="per_item">{{ __('Per item') }}</option>
                                                        <option value="per_sqm">{{ __('Per m²') }}</option>
                                                        <option value="per_linear_m">{{ __('Per linear m') }}</option>
                                                    </select>
                                                </div>
                                                <div class="sm:col-span-2">
                                                    <x-label class="!text-[11px]" value="{{ __('Qty') }}" />
                                                    <x-input type="number" step="0.000001" min="0" class="mt-1 block w-full !text-sm" wire:model.live.debounce.400ms="bom.{{ $i }}.quantity" />
                                                    <x-input-error for="bom.{{ $i }}.quantity" class="mt-1" />
                                                </div>
                                                <div class="sm:col-span-1">
                                                    <x-label class="!text-[11px]" value="{{ __('Unit') }}" />
                                                    <x-input type="text" class="mt-1 block w-full !text-sm" wire:model="bom.{{ $i }}.unit" />
                                                </div>
                                                <div class="sm:col-span-2">
                                                    <x-label class="!text-[11px]" value="{{ __('Waste %') }}" />
                                                    <x-input type="number" step="0.01" min="0" max="100" class="mt-1 block w-full !text-sm" wire:model.live.debounce.400ms="bom.{{ $i }}.waste_pct" />
                                                    <x-input-error for="bom.{{ $i }}.waste_pct" class="mt-1" />
                                                </div>
                                            </div>
                                        </div>

                                        <button type="button" wire:click="removeBomLine({{ $i }})" class="mt-6 shrink-0 rounded-lg p-2 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>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    <!-- Live cost readout -->
                    <div class="mt-4 rounded-xl 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 ($recipe['hasRoll'])
                            <p class="mt-2 inline-flex items-center gap-1 text-[11px] font-medium text-amber-700">
                                <x-icon name="arrows-pointing-out" class="h-3 w-3" />
                                {{ ($recipe['width'] && $recipe['height'])
                                    ? __('Roll line valued by real linear-metre yield from the piece size above.')
                                    : __('Enter a piece W × H to value the roll line by real linear-metre yield (otherwise it falls back to area/per-item).') }}
                            </p>
                        @endif
                        @if (! empty($methods) && ! empty($recipe['perMethod']))
                            <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">
                                            {{ $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">{{ __('(materials buffer + markup + risk + misc, summed)') }}</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

                        <p class="mt-2 text-[11px] text-slate-500">
                            {{ __('Saving writes the computed cost into the product. Suggested price = cost ×(1 + buffer + markup + risk + misc), matching the costing workbook.') }}
                        </p>
                    </div>
                </div>

                <!-- Quantity price tiers -->
                <div class="rounded-2xl border border-slate-200 bg-slate-50/60 p-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-sm font-semibold text-slate-900">{{ __('Quantity Price Tiers') }}</h3>
                            <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="{{ empty($methods) ? 'col-span-4' : '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
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled">
                {{ __('Save') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>