@props([
    'index',
    'name' => '',
    'quantity' => '',
    'used' => '0',
    'productId' => null,
    'preserveUsed' => false,
    'catalogProducts' => collect(),
    'required' => false,
])

@php
    $catalogNames = $catalogProducts->pluck('name');
    $nameInCatalog = $name !== '' && $catalogNames->contains($name);
    $showLegacyOption = $name !== '' && ! $nameInCatalog && empty($productId);
    $truncateOptionLabel = static fn (string $value): string => \Illuminate\Support\Str::limit($value, 70);
@endphp

<div class="product-row rounded-xl border border-neutral-100 bg-neutral-50/80 p-4" data-product-index="{{ $index }}">
    @if ($preserveUsed)
        <input type="hidden" class="product-used-value" id="product_{{ $index }}_used" name="products[{{ $index }}][used]" value="{{ $used }}">
    @endif
    <div class="remove-product-wrap mb-4 flex justify-end {{ $index > 1 ? '' : 'hidden' }}">
        <button type="button" class="remove-product text-xs font-semibold text-red-600">Delete</button>
    </div>
    <x-oah.field :for="'product_'.$index.'_name'" :required="$required">
        <x-slot:label>
            <span class="inline-flex items-baseline gap-2 product-label">
                <span>Product</span>
                <span class="product-label-number">{{ $index }}</span>
            </span>
        </x-slot:label>
        @if ($catalogProducts->isEmpty())
            <input type="text" id="product_{{ $index }}_name" name="products[{{ $index }}][name]" value="{{ $name }}"
                class="oah-input product-name" placeholder="Service name" disabled>
        @else
            <select id="product_{{ $index }}_name" name="products[{{ $index }}][name]" class="oah-input product-name" @if ($required) required @endif>
                <option value="">Select a product</option>
                @foreach ($catalogProducts as $catalogProduct)
                    <option value="{{ $catalogProduct->name }}" @selected($name === $catalogProduct->name)>{{ $truncateOptionLabel($catalogProduct->name) }}</option>
                @endforeach
                @if ($showLegacyOption)
                    <option value="{{ $name }}" selected>{{ $truncateOptionLabel($name) }} (legacy)</option>
                @endif
            </select>
        @endif
    </x-oah.field>
    <x-oah.field :for="'product_'.$index.'_quantity'" class="mt-6" :required="$required">
        <x-slot:label>
            <span class="inline-flex items-baseline gap-2 product-label">
                <span>Product</span>
                <span class="product-label-number">{{ $index }}</span>
                <span>quantity</span>
            </span>
        </x-slot:label>
        <input type="number" id="product_{{ $index }}_quantity" name="products[{{ $index }}][quantity]" value="{{ $quantity }}"
            min="0" step="1" inputmode="numeric" class="oah-input product-quantity" placeholder="e.g. 12"
            @if ($required) required @endif>
    </x-oah.field>
</div>