{{-- Stock material calculator, scoped to deliverable $di / section $si. Adds a
     material line with real m²/offcut via WithMaterialCalculator. The ad-hoc
     (off-catalogue) block is guarded on the trait exposing calcSource, so it
     stays dormant until Session 3 lands, then lights up automatically. --}}
@php $mc = $this->materialCalc; $adHocReady = property_exists($this, 'calcSource'); @endphp
<div class="border-t border-violet-100 bg-violet-50/40 px-4 py-3">
    <div class="mb-2 flex items-center justify-between">
        <div class="flex items-center gap-2">
            <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-violet-100 text-violet-700"><i class="fa-solid fa-ruler-combined text-xs"></i></span>
            <p class="text-xs font-semibold text-slate-700">{{ __('Add material, real m², offcut & cost') }}</p>
        </div>
        <button type="button" wire:click="closeMaterialCalc" class="text-slate-400 transition hover:text-slate-600" title="{{ __('Close') }}"><i class="fa-solid fa-xmark"></i></button>
    </div>

    @if ($adHocReady)
        <div class="mb-2 inline-flex rounded-lg border border-slate-200 bg-white p-0.5 text-xs">
            <button type="button" wire:click="$set('calcSource', 'stock')" class="rounded-md px-2.5 py-1 font-medium transition {{ $this->calcSource === 'stock' ? 'bg-violet-600 text-white' : 'text-slate-500' }}">{{ __('From stock') }}</button>
            <button type="button" wire:click="$set('calcSource', 'adhoc')" class="rounded-md px-2.5 py-1 font-medium transition {{ $this->calcSource === 'adhoc' ? 'bg-violet-600 text-white' : 'text-slate-500' }}">{{ __('Off-catalogue') }}</button>
        </div>
    @endif

    @if (! $adHocReady || $this->calcSource === 'stock')
        <div class="grid grid-cols-12 gap-2">
            <select wire:model.live="calcVariantId" class="col-span-12 rounded-lg border-slate-300 text-sm shadow-sm focus:border-violet-500 focus:ring-violet-500 sm:col-span-4">
                <option value="">{{ __('Choose material…') }}</option>
                @foreach ($materialOptions as $opt)
                    <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
                @endforeach
            </select>
            <x-input type="number" step="0.0001" min="0" class="col-span-3 block w-full text-sm sm:col-span-2" placeholder="{{ __('W (m)') }}" wire:model.live.debounce.400ms="calcW" />
            <x-input type="number" step="0.0001" min="0" class="col-span-3 block w-full text-sm sm:col-span-2" placeholder="{{ __('H (m)') }}" wire:model.live.debounce.400ms="calcH" />
            <x-input type="number" step="0.01" min="0" class="col-span-3 block w-full text-sm sm:col-span-2" placeholder="{{ __('Qty') }}" wire:model.live.debounce.400ms="calcQty" />
            <x-input type="number" step="0.001" min="0" class="col-span-3 block w-full text-sm sm:col-span-2" placeholder="{{ __('Bleed') }}" wire:model.live.debounce.400ms="calcBleed" />
        </div>

        @if ($mc)
            <div class="mt-2 grid grid-cols-2 gap-2 rounded-lg bg-white/70 p-2 text-center text-xs sm:grid-cols-4">
                <div><p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Consumed') }}</p><p class="font-semibold tabular-nums text-slate-700">{{ $this->trimNum($mc['consumed_qty']) }} {{ $mc['consumed_unit'] }}</p></div>
                <div><p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Offcut') }}</p><p class="font-semibold tabular-nums {{ (float) $mc['offcut_area'] > 0 ? 'text-amber-600' : 'text-slate-400' }}">{{ $this->trimNum($mc['offcut_area']) }} m² ({{ number_format($mc['offcut_pct'], 0) }}%)</p></div>
                <div><p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Material cost') }}</p><p class="font-semibold tabular-nums text-slate-700">{{ $baseCode }} {{ number_format($mc['material_cost'], 2) }}</p></div>
                <div><p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Weight') }}</p><p class="font-semibold tabular-nums text-slate-700">{{ $mc['weight_kg'] !== null ? $mc['weight_kg'].' kg' : '—' }}</p></div>
            </div>

            @if (! $mc['fits'])
                <p class="mt-2 flex items-center gap-1 text-xs text-rose-600"><i class="fa-solid fa-triangle-exclamation"></i>{{ $mc['note'] }}</p>
            @endif

            @if ((float) $mc['offcut_cost'] > 0)
                <div class="mt-2 rounded-lg bg-amber-50/60 p-2.5 ring-1 ring-amber-100">
                    <p class="text-xs text-slate-600">{{ __('Offcut costs :cur :amt, what do you want to do?', ['cur' => $baseCode, 'amt' => number_format($mc['offcut_cost'], 2)]) }}</p>
                    @if ($mc['remnant_reusable'])<p class="mt-0.5 flex items-center gap-1 text-xs text-emerald-600"><i class="fa-solid fa-recycle"></i>{{ __('Reusable remnant, consider absorbing it.') }}</p>@endif
                    <div class="mt-2 flex flex-wrap items-center gap-3 text-sm">
                        <label class="inline-flex items-center gap-1"><input type="radio" wire:model.live="calcOffcut" value="charge" class="text-violet-600 focus:ring-violet-500" /> {{ __('Charge client') }}</label>
                        <label class="inline-flex items-center gap-1"><input type="radio" wire:model.live="calcOffcut" value="absorb" class="text-violet-600 focus:ring-violet-500" /> {{ __('Absorb it') }}</label>
                        <label class="inline-flex items-center gap-1"><input type="radio" wire:model.live="calcOffcut" value="partial" class="text-violet-600 focus:ring-violet-500" /> {{ __('Charge %') }}</label>
                        @if ($calcOffcut === 'partial')
                            <div class="relative w-20"><x-input type="number" step="1" min="0" max="100" class="block w-full pr-6 text-sm" wire:model.live="calcOffcutPct" /><span class="pointer-events-none absolute inset-y-0 right-2 flex items-center text-xs text-slate-400">%</span></div>
                        @endif
                    </div>
                </div>
            @endif

            <div class="mt-2 flex flex-wrap items-center justify-between gap-2">
                <div class="text-xs text-slate-500">
                    @if ($mc['charged'] !== null)
                        {{ __('Adds :cur :amt', ['cur' => $baseCode, 'amt' => number_format($mc['charged'], 2)]) }}
                        @if (($mc['absorbed'] ?? 0) > 0)<span class="text-amber-600">· {{ __('absorbing :cur :amt', ['cur' => $baseCode, 'amt' => number_format($mc['absorbed'], 2)]) }}</span>@endif
                    @else
                        <span class="text-amber-600">{{ __('Choose what to do with the offcut ↑') }}</span>
                    @endif
                </div>
                <x-button type="button" wire:click="addMaterialLine({{ $di }}, {{ $si }})" :disabled="$mc['charged'] === null">
                    <i class="fa-solid fa-plus mr-1.5"></i>{{ __('Add material line') }}
                </x-button>
            </div>
        @elseif ($calcVariantId)
            <p class="mt-2 text-xs text-slate-400">{{ __('Enter a size and quantity to calculate…') }}</p>
        @endif
    @elseif ($adHocReady && $this->calcSource === 'adhoc')
        {{-- Off-catalogue material, typed name + buy price (Session 3 fields). --}}
        <div class="grid grid-cols-12 gap-2">
            <x-input type="text" class="col-span-12 text-sm sm:col-span-4" placeholder="{{ __('Material name, e.g. LED strip') }}" wire:model.blur="calcMaterialName" />
            <select wire:model.live="calcMeasure" class="col-span-4 rounded-lg border-slate-300 text-sm shadow-sm focus:border-violet-500 focus:ring-violet-500 sm:col-span-2">
                <option value="unit">{{ __('Unit') }}</option>
                <option value="area">{{ __('Area (m²)') }}</option>
                <option value="linear">{{ __('Linear (m)') }}</option>
            </select>
            @if ($this->calcMeasure === 'area')
                <x-input type="number" step="0.0001" min="0" class="col-span-2 text-sm" placeholder="{{ __('W') }}" wire:model.live.debounce.400ms="calcW" />
                <x-input type="number" step="0.0001" min="0" class="col-span-2 text-sm" placeholder="{{ __('H') }}" wire:model.live.debounce.400ms="calcH" />
            @elseif ($this->calcMeasure === 'linear')
                <x-input type="number" step="0.0001" min="0" class="col-span-4 text-sm sm:col-span-2" placeholder="{{ __('Length (m)') }}" wire:model.live.debounce.400ms="calcLength" />
            @endif
            <x-input type="number" step="0.0001" min="0" class="col-span-3 text-sm sm:col-span-2" placeholder="{{ __('Unit cost') }}" wire:model.live.debounce.400ms="calcUnitCost" />
            <x-input type="number" step="0.01" min="0" class="col-span-3 text-sm sm:col-span-2" placeholder="{{ __('Qty') }}" wire:model.live.debounce.400ms="calcQty" />
        </div>
        <div class="mt-2 flex justify-end">
            <x-button type="button" wire:click="addMaterialLine({{ $di }}, {{ $si }})">
                <i class="fa-solid fa-plus mr-1.5"></i>{{ __('Add material line') }}
            </x-button>
        </div>
    @endif
</div>