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

    // Movement-type presentation (badge colour + label).
    $typeMeta = [
        'opening'     => ['label' => __('Opening'),     'color' => 'slate'],
        'receipt'     => ['label' => __('Receipt'),     'color' => 'emerald'],
        'consumption' => ['label' => __('Consumption'), 'color' => 'indigo'],
        // Not a type of its own: a consumption whose reason is the shop's own
        // use (a customer's invoice printed at the counter). Shown and filtered
        // apart so it is never read as a sale or as spoilage.
        'internal_use' => ['label' => __('Internal use'), 'color' => 'amber'],
        'wastage'     => ['label' => __('Wastage'),     'color' => 'rose'],
        'adjustment'  => ['label' => __('Adjustment'),  'color' => 'amber'],
        'stocktake'   => ['label' => __('Stocktake'),   'color' => 'sky'],
        'return'      => ['label' => __('Return'),      'color' => 'violet'],
    ];

    $stockActionMeta = [
        'receive'   => ['title' => __('Receive Stock'),   'verb' => __('Receive')],
        'adjust'    => ['title' => __('Adjust Stock'),    'verb' => __('Adjust')],
        'writeoff'  => ['title' => __('Write Off Stock'), 'verb' => __('Write off')],
        'stocktake' => ['title' => __('Stocktake'),       'verb' => __('Stocktake')],
    ];

    // Status badge for a material/variant given its on-hand vs reorder level.
    $statusFor = function (float $onHand, $level) {
        if ($onHand <= 0) {
            return ['label' => __('Out'), 'color' => 'rose'];
        }
        if ($level !== null && $onHand <= (float) $level) {
            return ['label' => __('Low'), 'color' => 'amber'];
        }
        return ['label' => __('In Stock'), 'color' => 'emerald'];
    };
@endphp

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

        {{-- Header --}}
        <x-page-header :title="__('Inventory')" :subtitle="__('Track materials, stock levels, reorders and the movement ledger.')">
            @if ($canManage)
                <a href="{{ route('inventory.materials.create') }}" wire:navigate>
                    <x-button type="button">
                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('New Material') }}
                    </x-button>
                </a>
            @endif
        </x-page-header>

        <x-inventory-tabs :active-tab="$tab" />

        {{-- KPI cards: compact so all five stay on a single row on desktop. --}}
        <section class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-5">
            @foreach ($kpis as $kpi)
                <x-card class="p-4">
                    <div class="flex items-center 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 shrink-0 items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $kpi['accent'] }}, {{ $kpi['accent'] }}bb)">
                            <x-icon :name="$kpi['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 truncate font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;" title="{{ $kpi['value'] }}">{{ $kpi['value'] }}</p>
                    <div class="mt-2">
                        <span class="inline-block max-w-full truncate rounded-full px-2 py-0.5 text-[10px] font-semibold {{ $tonePill[$kpi['sub']['tone']] ?? $tonePill['muted'] }}" title="{{ $kpi['sub']['text'] }}">
                            {{ $kpi['sub']['text'] }}
                        </span>
                    </div>
                </x-card>
            @endforeach
        </section>

        {{-- Main panel --}}
        <x-card class="overflow-hidden">
            {{-- Toolbar --}}
            <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-5">
                <div class="relative max-w-md flex-1">
                    <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="{{ $tab === 'suppliers' ? __('Search suppliers...') : __('Search materials...') }}"
                        class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500"
                    />
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    @if ($tab === 'movements')
                        <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>
                            @foreach ($typeMeta as $key => $meta)
                                <option value="{{ $key }}">{{ $meta['label'] }}</option>
                            @endforeach
                        </select>
                        <select wire:model.live="variantFilter" class="max-w-[14rem] rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All Materials') }}</option>
                            @foreach ($variantOptions as $opt)
                                <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
                            @endforeach
                        </select>
                        <select wire:model.live="locationFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All Locations') }}</option>
                            @foreach ($locationOptions as $opt)
                                <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
                            @endforeach
                        </select>
                        <input type="date" wire:model.live="dateFrom" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" title="{{ __('From') }}" />
                        <input type="date" wire:model.live="dateTo" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" title="{{ __('To') }}" />
                    @elseif ($tab !== 'suppliers')
                        <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 $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    @endif
                </div>
            </div>

            {{-- ============================== MATERIALS ============================== --}}
            @if ($tab === 'materials')
                @if (! $committedAvailable)
                    <div class="flex items-start gap-2 border-b border-slate-100 bg-slate-50/70 px-5 py-2.5 text-xs text-slate-500">
                        <x-icon name="exclamation-triangle" class="mt-0.5 h-3.5 w-3.5 text-slate-400" />
                        {{ __('No active-job demand to commit, Available equals On Hand.') }}
                    </div>
                @endif

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Material') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Category') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('On Hand') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Available') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Unit Cost') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Value') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($materials as $material)
                                @php
                                    $isOpen = $expandedMaterial === $material->id;
                                    $onHand = (float) $material->variants->sum(fn ($v) => (float) $v->on_hand);
                                    $stockValue = (float) $material->variants->sum(fn ($v) => (float) $v->on_hand * (float) $v->avg_cost);
                                    $committedQty = (float) $material->variants->sum(fn ($v) => (float) ($committed[$v->id] ?? 0));
                                    $available = $onHand - $committedQty;
                                    $avgCost = $onHand > 0 ? $stockValue / $onHand : (float) ($material->default_cost ?? 0);
                                    $status = $statusFor($onHand, $material->reorder_level);
                                @endphp
                                <tr wire:key="material-{{ $material->id }}" @class([
                                    'text-sm transition-colors hover:bg-indigo-50/40',
                                    'bg-indigo-50/50' => $drawerMaterialId === $material->id,
                                ])>
                                    <td class="px-3 lg:px-4 py-4">
                                        <button type="button" wire:click="toggleMaterial({{ $material->id }})" class="group flex items-start gap-3 text-left">
                                            <span class="mt-1 text-slate-400 transition group-hover:text-slate-600">
                                                <x-icon name="chevron-down" class="h-4 w-4 transition-transform duration-200 {{ $isOpen ? '' : '-rotate-90' }}" />
                                            </span>
                                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-white" style="background: {{ $material->category?->color ?? '#124a61' }}">
                                                <x-icon name="archive-box" class="h-4 w-4" />
                                            </span>
                                            <div class="min-w-0">
                                                <p class="font-semibold text-slate-900 group-hover:text-indigo-700">{{ $material->name }}</p>
                                                <p class="mt-0.5 text-xs text-slate-400">
                                                    {{ $material->base_unit }}
                                                    @if ($material->sku) · {{ __('SKU') }}: {{ $material->sku }} @endif
                                                    · {{ trans_choice('{1} :count variant|[2,*] :count variants', $material->variants->count(), ['count' => $material->variants->count()]) }}
                                                </p>
                                                @php
                                                    $sourceLink = $material->supplierLinks->firstWhere('is_preferred', true)
                                                        ?? $material->supplierLinks->first();
                                                    $otherSources = max(0, $material->supplierLinks->pluck('supplier_id')->unique()->count() - 1);
                                                @endphp
                                                <p class="mt-1 flex flex-wrap items-center gap-1 text-xs">
                                                    @if ($sourceLink?->supplier)
                                                        <span class="inline-flex items-center gap-1 text-slate-500">
                                                            <x-icon name="truck" class="h-3.5 w-3.5 text-slate-400" />
                                                            {{ $sourceLink->supplier->name }}
                                                        </span>
                                                        @if ($otherSources > 0)
                                                            <span class="text-slate-400">{{ __('+:count more', ['count' => $otherSources]) }}</span>
                                                        @endif
                                                    @else
                                                        <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 font-medium text-amber-700" title="{{ __('You can still buy it, the link is created on the first purchase.') }}">
                                                            <x-icon name="exclamation-triangle" class="h-3 w-3" />
                                                            {{ __('No supplier') }}
                                                        </span>
                                                    @endif
                                                </p>
                                            </div>
                                        </button>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        @if ($material->category)
                                            <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium text-white" style="background: {{ $material->category->color }}">{{ $material->category->name }}</span>
                                        @else
                                            <span class="text-slate-400">—</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-700">@qty($onHand)</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums {{ $available < $onHand ? 'font-semibold text-indigo-700' : 'text-slate-700' }}" title="{{ $committedQty > 0 ? __('Committed') . ': ' . \App\Support\Number::qty($committedQty) : '' }}">@qty($available)</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-600">{{ $baseCode }} {{ number_format($avgCost, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums font-medium text-slate-900">{{ $baseCode }} {{ number_format($stockValue, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4"><x-badge :color="$status['color']">{{ $status['label'] }}</x-badge></td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                        <div class="flex items-center justify-end gap-1">
                                            <button wire:click="openDrawer({{ $material->id }})" class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-indigo-600" title="{{ __('Details') }}">
                                                <x-icon name="eye" class="h-4 w-4" />
                                            </button>
                                            <x-notes-button :for="$material" />
                                            @if ($canManage)
                                                <a href="{{ route('inventory.materials.edit', $material->id) }}" wire:navigate class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-indigo-50 hover:text-indigo-600" title="{{ __('Edit') }}">
                                                    <x-icon name="pencil-square" class="h-4 w-4" />
                                                </a>
                                                <button wire:click="deleteMaterial({{ $material->id }})" wire:confirm="{{ __('Delete this material and all its variants?') }}" class="inline-flex h-8 w-8 items-center justify-center rounded-lg 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>
                                    </td>
                                </tr>

                                {{-- Variants: revealed only when the material row is expanded --}}
                                @if ($isOpen)
                                    <tr wire:key="material-{{ $material->id }}-variants" class="bg-slate-50/40">
                                        <td colspan="8" class="px-6 pb-5 pt-0">
                                            <div class="overflow-x-auto rounded-xl border border-slate-100 bg-white">
                                                <table class="min-w-full divide-y divide-slate-100">
                                                    <thead>
                                                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                                            <th class="px-4 py-2.5">{{ __('Variant') }}</th>
                                                            <th class="px-4 py-2.5 text-right">{{ __('On Hand') }}</th>
                                                            <th class="px-4 py-2.5 text-right">{{ __('Available') }}</th>
                                                            <th class="px-4 py-2.5 text-right">{{ __('Avg Cost') }}</th>
                                                            <th class="px-4 py-2.5 text-right">{{ __('Value') }}</th>
                                                            <th class="px-4 py-2.5">{{ __('Status') }}</th>
                                                            @if ($canManage)
                                                                <th class="px-4 py-2.5 text-right">{{ __('Stock Actions') }}</th>
                                                            @endif
                                                        </tr>
                                                    </thead>
                                                    <tbody class="divide-y divide-slate-100 bg-white">
                                                        @foreach ($material->variants as $variant)
                                                            @php
                                                                $vCommitted = (float) ($committed[$variant->id] ?? 0);
                                                                $vAvailable = (float) $variant->on_hand - $vCommitted;
                                                                $vLevel = $variant->reorder_level ?? $material->reorder_level;
                                                                $vStatus = $statusFor((float) $variant->on_hand, $vLevel);
                                                            @endphp
                                                            <tr wire:key="variant-{{ $variant->id }}" class="text-sm">
                                                                <td class="whitespace-nowrap px-4 py-3">
                                                                    <p class="font-medium text-slate-800">{{ $variant->label }}</p>
                                                                    @if ($variant->size || $variant->color)
                                                                        <p class="text-xs text-slate-400">{{ collect([$variant->size, $variant->color])->filter()->implode(' · ') }}</p>
                                                                    @endif
                                                                </td>
                                                                <td class="whitespace-nowrap px-4 py-3 text-right tabular-nums text-slate-700">
                                                                    @qty($variant->on_hand) {{ $material->base_unit }}
                                                                </td>
                                                                <td class="whitespace-nowrap px-4 py-3 text-right tabular-nums {{ $vAvailable < (float) $variant->on_hand ? 'font-semibold text-indigo-700' : 'text-slate-600' }}" title="{{ $vCommitted > 0 ? __('Committed') . ': ' . \App\Support\Number::qty($vCommitted) : '' }}">
                                                                    @qty($vAvailable)
                                                                </td>
                                                                <td class="whitespace-nowrap px-4 py-3 text-right tabular-nums text-slate-600">{{ $baseCode }} {{ number_format((float) $variant->avg_cost, 2) }}</td>
                                                                <td class="whitespace-nowrap px-4 py-3 text-right tabular-nums font-medium text-slate-900">{{ $baseCode }} {{ number_format((float) $variant->on_hand * (float) $variant->avg_cost, 2) }}</td>
                                                                <td class="whitespace-nowrap px-4 py-3">
                                                                    @if (! $variant->is_active)
                                                                        <x-badge color="slate">{{ __('Inactive') }}</x-badge>
                                                                    @else
                                                                        <x-badge :color="$vStatus['color']">{{ $vStatus['label'] }}</x-badge>
                                                                    @endif
                                                                </td>
                                                                @if ($canManage)
                                                                    <td class="whitespace-nowrap px-4 py-3 text-right">
                                                                        <div class="flex items-center justify-end gap-2">
                                                                            <button wire:click="openStock('receive', {{ $variant->id }})" class="inline-flex items-center gap-1 rounded-lg bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 transition hover:bg-emerald-100" title="{{ __('Receive') }}">
                                                                                <x-icon name="arrow-down-tray" class="h-3.5 w-3.5" />{{ __('Receive') }}
                                                                            </button>
                                                                            <button wire:click="openStock('adjust', {{ $variant->id }})" class="inline-flex items-center gap-1 rounded-lg bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700 transition hover:bg-amber-100" title="{{ __('Adjust') }}">
                                                                                <x-icon name="adjustments-horizontal" class="h-3.5 w-3.5" />{{ __('Adjust') }}
                                                                            </button>
                                                                            <button wire:click="openStock('writeoff', {{ $variant->id }})" class="inline-flex items-center gap-1 rounded-lg bg-rose-50 px-2 py-1 text-xs font-medium text-rose-700 transition hover:bg-rose-100" title="{{ __('Write off') }}">
                                                                                <x-icon name="archive-box-x-mark" class="h-3.5 w-3.5" />{{ __('Write off') }}
                                                                            </button>
                                                                            <button wire:click="openStock('stocktake', {{ $variant->id }})" class="inline-flex items-center gap-1 rounded-lg bg-sky-50 px-2 py-1 text-xs font-medium text-sky-700 transition hover:bg-sky-100" title="{{ __('Stocktake') }}">
                                                                                <x-icon name="scale" class="h-3.5 w-3.5" />{{ __('Count') }}
                                                                            </button>
                                                                        </div>
                                                                    </td>
                                                                @endif
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            @empty
                                <tr>
                                    <td colspan="8" class="px-3 lg:px-4 py-12">
                                        <x-empty-state
                                            icon="archive-box"
                                            :title="__('No materials found')"
                                            :message="$search !== '' || $categoryFilter !== '' ? __('Try adjusting your search or filters.') : __('Add the media, inks, blanks and consumables you keep in stock.')"
                                            class="border-0 bg-transparent py-0"
                                        >
                                            @if ($canManage && $search === '' && $categoryFilter === '')
                                                <a href="{{ route('inventory.materials.create') }}" wire:navigate>
                                                    <x-button type="button">
                                                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                        {{ __('New Material') }}
                                                    </x-button>
                                                </a>
                                            @endif
                                        </x-empty-state>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $materials->links() }}
                </div>

            {{-- ============================== MOVEMENTS ============================== --}}
            @elseif ($tab === 'movements')
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Date') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Material / Variant') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Location') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Type') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Quantity') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Unit Cost') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Value') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('By') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Notes') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($movements as $mv)
                                @php
                                    $meta = $mv->reason === \App\Models\StockMovement::REASON_INTERNAL_USE
                                        ? $typeMeta['internal_use']
                                        : ($typeMeta[$mv->type] ?? ['label' => ucfirst($mv->type), 'color' => 'slate']);
                                @endphp
                                <tr wire:key="movement-{{ $mv->id }}" class="text-sm transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-slate-500">{{ optional($mv->moved_on)->format('d M Y') }}</td>
                                    <td class="px-3 lg:px-4 py-4">
                                        <p class="font-medium text-slate-900">{{ $mv->variant?->material?->name ?? '—' }}</p>
                                        <p class="text-xs text-slate-400">
                                            {{ $mv->variant?->label }}
                                            @if ($mv->supplier) · {{ $mv->supplier->name }} @endif
                                        </p>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-slate-500">{{ $mv->location?->name ?? '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        <x-badge :color="$meta['color']">{{ $meta['label'] }}</x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums {{ (float) $mv->quantity < 0 ? 'text-rose-600' : 'text-emerald-700' }}">
                                        {{ (float) $mv->quantity > 0 ? '+' : '' }}@qty((float) $mv->quantity)
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-600">{{ $baseCode }} {{ number_format((float) $mv->unit_cost, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums font-medium {{ (float) $mv->value < 0 ? 'text-rose-600' : 'text-slate-900' }}">{{ $baseCode }} {{ number_format((float) $mv->value, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-slate-500">{{ $mv->recorder?->name ?? __('System') }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-slate-500"><span class="block max-w-[18rem] truncate" title="{{ $mv->notes }}">{{ $mv->notes ?: '—' }}</span></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="px-3 lg:px-4 py-12">
                                        <x-empty-state
                                            icon="queue-list"
                                            :title="__('No movements found')"
                                            :message="__('Stock receipts, consumption, adjustments and write-offs will appear here.')"
                                            class="border-0 bg-transparent py-0"
                                        />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $movements->links() }}
                </div>

            {{-- ============================== LOW STOCK ============================== --}}
            @elseif ($tab === 'low_stock')
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Material / Variant') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Category') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('On Hand') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Reorder Level') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Reorder Qty') }}</th>
                                @if ($canManage)
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($lowStock as $variant)
                                @php
                                    $level = $variant->reorder_level ?? $variant->material?->reorder_level;
                                    $reorderQty = $variant->material?->reorder_qty;
                                @endphp
                                <tr wire:key="low-{{ $variant->id }}" class="text-sm transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4">
                                        <p class="font-medium text-slate-900">{{ $variant->material?->name ?? '—' }}</p>
                                        <p class="text-xs text-slate-400">{{ $variant->label }}</p>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        @if ($variant->material?->category)
                                            <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium text-white" style="background: {{ $variant->material->category->color }}">{{ $variant->material->category->name }}</span>
                                        @else
                                            <span class="text-slate-400">—</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums font-semibold {{ (float) $variant->on_hand <= 0 ? 'text-rose-600' : 'text-amber-600' }}">@qty($variant->on_hand) {{ $variant->material?->base_unit }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-600">{{ $level !== null ? \App\Support\Number::qty($level) : '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-600">{{ $reorderQty !== null ? \App\Support\Number::qty($reorderQty) : '—' }}</td>
                                    @if ($canManage)
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                            <button wire:click="openStock('receive', {{ $variant->id }})" class="inline-flex items-center gap-1 rounded-lg bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700 transition hover:bg-emerald-100">
                                                <x-icon name="arrow-down-tray" class="h-3.5 w-3.5" />{{ __('Receive') }}
                                            </button>
                                        </td>
                                    @endif
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-3 lg:px-4 py-12">
                                        <x-empty-state
                                            icon="check-circle"
                                            :title="__('Nothing low on stock')"
                                            :message="__('Every variant with a reorder level is above its threshold.')"
                                            class="border-0 bg-transparent py-0"
                                        />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $lowStock->links() }}
                </div>

            {{-- ========================= REORDER SUGGESTIONS ========================= --}}
            @elseif ($tab === 'reorder')
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Material / Variant') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('On Hand') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Reorder Level') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Suggested Qty') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Preferred Supplier') }}</th>
                                @if ($canManage)
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Action') }}</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($reorder as $variant)
                                @php $level = $variant->reorder_level ?? $variant->material?->reorder_level; @endphp
                                <tr wire:key="reorder-{{ $variant->id }}" class="text-sm transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4">
                                        <p class="font-medium text-slate-900">{{ $variant->material?->name ?? '—' }}</p>
                                        <p class="text-xs text-slate-400">{{ $variant->label }}</p>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums font-semibold {{ (float) $variant->on_hand <= 0 ? 'text-rose-600' : 'text-amber-600' }}">@qty($variant->on_hand) {{ $variant->material?->base_unit }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-600">{{ $level !== null ? \App\Support\Number::qty($level) : '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums font-semibold text-indigo-700">@qty($variant->suggested_qty) {{ $variant->material?->base_unit }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        @if ($variant->suggested_supplier_name)
                                            <p class="font-medium text-slate-800">{{ $variant->suggested_supplier_name }}</p>
                                            @if ($variant->suggested_lead_time !== null)
                                                <p class="text-xs text-slate-400">{{ trans_choice('{1} :count day lead|[2,*] :count days lead', (int) $variant->suggested_lead_time, ['count' => (int) $variant->suggested_lead_time]) }}</p>
                                            @endif
                                        @else
                                            <span class="text-slate-400">{{ __('No supplier set') }}</span>
                                        @endif
                                    </td>
                                    @if ($canManage)
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                            <button wire:click="startPurchase({{ $variant->id }})" class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-indigo-700">
                                                <x-icon name="plus" class="h-3.5 w-3.5" />{{ __('Start Purchase') }}
                                            </button>
                                        </td>
                                    @endif
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-3 lg:px-4 py-12">
                                        <x-empty-state
                                            icon="check-circle"
                                            :title="__('Nothing to reorder')"
                                            :message="__('All stocked variants are above their reorder levels.')"
                                            class="border-0 bg-transparent py-0"
                                        />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $reorder->links() }}
                </div>

            {{-- ============================== SUPPLIERS ============================== --}}
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Supplier') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Category') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Materials') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Lead Time') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Payable Balance') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Last Purchase') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($suppliers as $supplier)
                                <tr wire:key="supplier-{{ $supplier->id }}" class="text-sm transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4">
                                        <div class="flex items-center gap-2">
                                            <p class="font-medium text-slate-900">{{ $supplier->name }}</p>
                                            @if ($supplier->is_preferred)
                                                <x-badge color="indigo">{{ __('Preferred') }}</x-badge>
                                            @endif
                                            @unless ($supplier->is_active)
                                                <x-badge color="slate">{{ __('Inactive') }}</x-badge>
                                            @endunless
                                        </div>
                                        @if ($supplier->contact_person)
                                            <p class="text-xs text-slate-400">{{ $supplier->contact_person }}</p>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-slate-600">{{ $supplier->category ?: '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums">
                                        @php $supplies = (int) ($supplyCounts[$supplier->id] ?? 0); @endphp
                                        <span class="{{ $supplies > 0 ? 'text-slate-700' : 'text-amber-600' }}">
                                            {{ $supplies > 0 ? number_format($supplies) : __('none') }}
                                        </span>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-600">
                                        {{ $supplier->lead_time_days !== null ? trans_choice('{1} :count day|[2,*] :count days', (int) $supplier->lead_time_days, ['count' => (int) $supplier->lead_time_days]) : '—' }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums {{ $supplier->payable_balance > 0 ? 'font-semibold text-rose-600' : 'text-slate-500' }}">
                                        {{ $baseCode }} {{ number_format($supplier->payable_balance, 2) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-slate-500">
                                        {{ $supplier->last_purchase_at ? \Illuminate\Support\Carbon::parse($supplier->last_purchase_at)->format('d M Y') : '—' }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-3 lg:px-4 py-12">
                                        <x-empty-state
                                            icon="building-office"
                                            :title="__('No suppliers found')"
                                            :message="__('Suppliers are managed from the People &amp; Partners page; they will show here with their payable balances.')"
                                            class="border-0 bg-transparent py-0"
                                        />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $suppliers->links() }}
                </div>
            @endif
        </x-card>
    </div>

    {{-- ============================ DETAIL DRAWER ============================ --}}
    @if ($drawer)
        <div class="fixed inset-0 z-40" aria-modal="true" role="dialog">
            <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" wire:click="closeDrawer"></div>
            <div class="absolute inset-y-0 right-0 flex w-full max-w-md flex-col bg-white shadow-2xl">
                {{-- Drawer header --}}
                <div class="flex items-start justify-between gap-3 border-b border-slate-100 p-5">
                    <div class="flex items-start gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-white" style="background: {{ $drawer['material']->category?->color ?? '#124a61' }}">
                            <x-icon name="archive-box" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0">
                            <h2 class="truncate text-base font-semibold text-slate-900">{{ $drawer['material']->name }}</h2>
                            <p class="mt-0.5 text-xs text-slate-400">
                                {{ $drawer['material']->base_unit }}
                                @if ($drawer['material']->sku) · {{ __('SKU') }}: {{ $drawer['material']->sku }} @endif
                            </p>
                            @if ($drawer['material']->category)
                                <span class="mt-1.5 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium text-white" style="background: {{ $drawer['material']->category->color }}">{{ $drawer['material']->category->name }}</span>
                            @endif
                        </div>
                    </div>
                    <button type="button" wire:click="closeDrawer" class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600">
                        <x-icon name="x-mark" class="h-5 w-5" />
                    </button>
                </div>

                {{-- Drawer body --}}
                <div class="flex-1 space-y-5 overflow-y-auto p-5">
                    {{-- Stock figures --}}
                    <div class="grid grid-cols-3 gap-3">
                        <div class="rounded-xl bg-slate-50 p-3 text-center">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('On Hand') }}</p>
                            <p class="mt-1 text-lg font-bold tabular-nums text-slate-900">@qty($drawer['on_hand'])</p>
                        </div>
                        <div class="rounded-xl bg-indigo-50 p-3 text-center">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-indigo-400">{{ __('Available') }}</p>
                            <p class="mt-1 text-lg font-bold tabular-nums text-indigo-700">@qty($drawer['available'])</p>
                        </div>
                        <div class="rounded-xl bg-slate-50 p-3 text-center">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Committed') }}</p>
                            <p class="mt-1 text-lg font-bold tabular-nums text-slate-900">@qty($drawer['committed'])</p>
                        </div>
                    </div>

                    @unless ($committedAvailable)
                        <p class="text-xs text-slate-400">{{ __('No active-job demand, Available equals On Hand.') }}</p>
                    @endunless

                    {{-- Per-location breakdown --}}
                    @if ($drawer['location_breakdown']->isNotEmpty())
                        <div>
                            <h3 class="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('By Location') }}</h3>
                            <div class="space-y-1.5">
                                @foreach ($drawer['location_breakdown'] as $row)
                                    <div class="flex items-center justify-between rounded-xl border border-slate-100 px-3 py-2 text-sm">
                                        <span class="flex items-center gap-1.5 text-slate-700">
                                            <x-icon name="map-pin" class="h-4 w-4 text-slate-400" />
                                            {{ $row->name }}
                                        </span>
                                        <span class="font-semibold tabular-nums text-slate-900">@qty($row->qty)</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    {{-- Detail rows --}}
                    <dl class="divide-y divide-slate-100 rounded-xl border border-slate-100">
                        <div class="flex items-center justify-between px-4 py-3">
                            <dt class="text-sm text-slate-500">{{ __('Unit Cost') }}</dt>
                            <dd class="text-sm font-medium tabular-nums text-slate-900">{{ $drawer['baseCode'] }} {{ number_format($drawer['avg_cost'], 2) }}</dd>
                        </div>
                        <div class="flex items-center justify-between px-4 py-3">
                            <dt class="text-sm text-slate-500">{{ __('Stock Value') }}</dt>
                            <dd class="text-sm font-medium tabular-nums text-slate-900">{{ $drawer['baseCode'] }} {{ number_format($drawer['stock_value'], 2) }}</dd>
                        </div>
                        <div class="flex items-center justify-between px-4 py-3">
                            <dt class="text-sm text-slate-500">{{ __('Primary Supplier') }}</dt>
                            <dd class="text-sm font-medium text-slate-900">
                                @if ($drawer['supplier'])
                                    {{ $drawer['supplier']->name }}
                                @else
                                    <span class="text-amber-700">{{ __('None linked') }}</span>
                                @endif
                            </dd>
                        </div>

                        @if ($drawer['supplier_links']->isNotEmpty())
                            <div class="px-4 py-3">
                                <dt class="text-sm text-slate-500">{{ __('All sources') }}</dt>
                                <dd class="mt-2 space-y-1.5">
                                    @foreach ($drawer['supplier_links'] as $link)
                                        <div class="flex items-baseline justify-between gap-3 text-sm">
                                            <span class="min-w-0 truncate {{ $link->is_preferred ? 'font-medium text-slate-900' : 'text-slate-600' }}">
                                                {{ $link->supplier?->name }}
                                                @if ($link->is_preferred)
                                                    <span class="ms-1 text-[11px] font-semibold uppercase text-emerald-600">{{ __('Preferred') }}</span>
                                                @endif
                                            </span>
                                            <span class="shrink-0 tabular-nums text-slate-500">
                                                {{ $link->last_unit_cost !== null
                                                    ? ($link->currency_code ?: $drawer['baseCode']) . ' ' . number_format((float) $link->last_unit_cost, 2)
                                                    : '—' }}
                                            </span>
                                        </div>
                                    @endforeach
                                </dd>
                            </div>
                        @endif
                        <div class="flex items-center justify-between px-4 py-3">
                            <dt class="text-sm text-slate-500">{{ __('Last Received') }}</dt>
                            <dd class="text-sm font-medium text-slate-900">{{ $drawer['last_received'] ? \Illuminate\Support\Carbon::parse($drawer['last_received'])->format('d M Y') : '—' }}</dd>
                        </div>
                        <div class="flex items-center justify-between px-4 py-3">
                            <dt class="text-sm text-slate-500">{{ __('Last Movement') }}</dt>
                            <dd class="text-sm font-medium text-slate-900">
                                @if ($drawer['last_movement'])
                                    {{ ($typeMeta[$drawer['last_movement']->type]['label'] ?? ucfirst($drawer['last_movement']->type)) }}
                                    <span class="text-slate-400">· {{ optional($drawer['last_movement']->moved_on)->format('d M Y') }}</span>
                                @else
                                    —
                                @endif
                            </dd>
                        </div>
                        <div class="flex items-center justify-between px-4 py-3">
                            <dt class="text-sm text-slate-500">{{ __('Reorder Point') }}</dt>
                            <dd class="text-sm font-medium tabular-nums text-slate-900">{{ $drawer['reorder_level'] !== null ? \App\Support\Number::qty($drawer['reorder_level']) : '—' }}</dd>
                        </div>
                        <div class="flex items-center justify-between px-4 py-3">
                            <dt class="text-sm text-slate-500">{{ __('Reorder Qty') }}</dt>
                            <dd class="text-sm font-medium tabular-nums text-slate-900">{{ $drawer['reorder_qty'] !== null ? \App\Support\Number::qty($drawer['reorder_qty']) : '—' }}</dd>
                        </div>
                    </dl>

                    {{-- Variants summary --}}
                    <div>
                        <h3 class="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Variants') }}</h3>
                        <div class="space-y-2">
                            @foreach ($drawer['material']->variants as $variant)
                                @php
                                    $vCommitted = (float) ($committed[$variant->id] ?? 0);
                                    $vAvailable = (float) $variant->on_hand - $vCommitted;
                                @endphp
                                <div wire:key="drawer-variant-{{ $variant->id }}" class="flex items-center justify-between rounded-xl border border-slate-100 px-3 py-2">
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-medium text-slate-800">{{ $variant->label }}</p>
                                        @if ($variant->size || $variant->color)
                                            <p class="truncate text-xs text-slate-400">{{ collect([$variant->size, $variant->color])->filter()->implode(' · ') }}</p>
                                        @endif
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm font-semibold tabular-nums text-slate-900">@qty($variant->on_hand)</p>
                                        <p class="text-xs tabular-nums text-indigo-600">{{ __('Avail') }} @qty($vAvailable)</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Drawer footer --}}
                @if ($canManage)
                    <div class="flex items-center gap-2 border-t border-slate-100 p-4">
                        <a href="{{ route('inventory.materials.edit', $drawer['material']->id) }}" wire:navigate class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-indigo-600 px-3 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
                            <x-icon name="pencil-square" class="h-4 w-4" />{{ __('Edit Material') }}
                        </a>
                        @if ($drawer['material']->variants->isNotEmpty())
                            <button wire:click="openStock('receive', {{ $drawer['material']->variants->first()->id }})" class="inline-flex items-center justify-center gap-1.5 rounded-xl bg-emerald-50 px-3 py-2.5 text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100">
                                <x-icon name="arrow-down-tray" class="h-4 w-4" />{{ __('Receive') }}
                            </button>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    @endif

    {{-- ============================ STOCK ACTION MODAL ============================ --}}
    <x-dialog-modal wire:model.live="showStockModal" maxWidth="md">
        <x-slot name="title">
            {{ $stockActionMeta[$stockAction]['title'] ?? __('Stock') }}
        </x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">{{ $stockVariantLabel }}</p>

            <div class="mt-4 space-y-4">
                <div>
                    <x-label for="stock-qty" value="{{ $stockAction === 'stocktake' ? __('Counted Quantity') : ($stockAction === 'adjust' ? __('Quantity (signed: + up, − down)') : __('Quantity')) }}" />
                    <x-input id="stock-qty" type="number" step="0.000001" class="mt-1 block w-full" wire:model="stockQuantity" />
                    <x-input-error for="stockQuantity" class="mt-2" />
                    @if ($stockAction === 'writeoff')
                        <p class="mt-1 text-xs text-slate-400">{{ __('Quantity to remove. Valued at the running weighted-average cost.') }}</p>
                    @elseif ($stockAction === 'stocktake')
                        <p class="mt-1 text-xs text-slate-400">{{ __('The physical count. The difference vs on-hand is posted as a stocktake movement.') }}</p>
                    @endif
                </div>

                @if (in_array($stockAction, ['receive', 'adjust'], true))
                    <div>
                        <x-label for="stock-cost" value="{{ $stockAction === 'receive' ? __('Unit Cost') : __('Unit Cost (optional)') }}" />
                        <x-input id="stock-cost" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="stockUnitCost" />
                        <x-input-error for="stockUnitCost" class="mt-2" />
                        @if ($stockAction === 'receive')
                            <p class="mt-1 text-xs text-slate-400">{{ __('Cost per base unit. Blends into the weighted-average cost.') }}</p>
                        @endif
                    </div>
                @endif

                @if ($stockAction === 'receive')
                    <div>
                        <x-label for="stock-supplier" value="{{ __('Received from (supplier)') }}" />
                        <select id="stock-supplier" wire:model="stockSupplierId" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('— Not recorded —') }}</option>
                            @foreach ($supplierOptions as $opt)
                                <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-400">{{ __('Links this supplier to the material and remembers what they charged.') }}</p>
                        <x-input-error for="stockSupplierId" class="mt-2" />
                    </div>
                @endif

                <div>
                    <x-label for="stock-date" value="{{ __('Date') }}" />
                    <x-input id="stock-date" type="date" class="mt-1 block w-full" wire:model="stockDate" />
                    <x-input-error for="stockDate" class="mt-2" />
                </div>

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

        <x-slot name="footer">
            <x-secondary-button wire:click="closeStockModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>
            <x-button class="ms-3" wire:click="saveStock" wire:loading.attr="disabled">
                {{ $stockActionMeta[$stockAction]['verb'] ?? __('Save') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>