@php
    $control = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 placeholder:text-xs';
    $hasLines = collect($lines)->contains(fn ($row) => trim((string) ($row['description'] ?? '')) !== '' || trim((string) ($row['product_id'] ?? '')) !== '');
@endphp

<div class="space-y-4 p-5">
    <p class="text-sm text-slate-500">{{ __('Pick catalogue items, with a quantity and an optional size or variant. The Products note is for anything that is not a line.') }}</p>

    @if ($canEdit)
        <div>
            <x-label for="product-search" value="{{ __('Find in the catalogue') }}" />
            <input id="product-search" type="text" wire:model.live.debounce.300ms="productSearch"
                placeholder="{{ __('Name or SKU') }}"
                class="{{ $control }}" />
        </div>

        @if (trim($productSearch) !== '')
            <ul class="divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200">
                @forelse ($catalogue as $product)
                    <li wire:key="catalogue-{{ $product->id }}">
                        <button type="button" wire:click="addCatalogueProduct({{ $product->id }})"
                            class="flex w-full items-center justify-between gap-3 px-3 py-2.5 text-left text-sm hover:bg-slate-50">
                            <span class="font-medium text-slate-900">{{ $product->name }}</span>
                            <span class="shrink-0 text-xs text-slate-400">{{ $product->sku }}</span>
                        </button>
                    </li>
                @empty
                    <li class="px-3 py-2.5 text-sm text-slate-500">{{ __('Nothing in the catalogue matches that.') }}</li>
                @endforelse
            </ul>
        @endif
    @endif

    @forelse ($lines as $index => $line)
        <div wire:key="opp-line-{{ $index }}" class="rounded-xl border border-slate-200 p-3">
            @if ($canEdit)
                <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
                    <div class="sm:col-span-6">
                        <x-label for="line-description-{{ $index }}" value="{{ __('Item') }}" />
                        <x-input id="line-description-{{ $index }}" type="text" class="mt-1 block w-full" wire:model="lines.{{ $index }}.description" />
                        <x-input-error for="lines.{{ $index }}.description" class="mt-2" />
                        <x-input-error for="lines.{{ $index }}.product_id" class="mt-2" />
                    </div>
                    <div class="sm:col-span-6">
                        <x-label for="line-variant-{{ $index }}" value="{{ __('Size or variant') }}" />
                        <x-input id="line-variant-{{ $index }}" type="text" class="mt-1 block w-full" wire:model="lines.{{ $index }}.variant" placeholder="{{ __('Optional, for example A2 or Navy') }}" />
                        <x-input-error for="lines.{{ $index }}.variant" class="mt-2" />
                    </div>
                    <div class="sm:col-span-4">
                        <x-label for="line-quantity-{{ $index }}" value="{{ __('Quantity') }}" />
                        <x-input id="line-quantity-{{ $index }}" type="number" step="0.01" min="0.01" class="mt-1 block w-full" wire:model="lines.{{ $index }}.quantity" />
                        <x-input-error for="lines.{{ $index }}.quantity" class="mt-2" />
                    </div>
                    <div class="sm:col-span-4">
                        <x-label for="line-price-{{ $index }}" value="{{ __('Unit price') }}" />
                        <x-input id="line-price-{{ $index }}" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="lines.{{ $index }}.unit_price" placeholder="{{ __('Leave blank if not known') }}" />
                        <x-input-error for="lines.{{ $index }}.unit_price" class="mt-2" />
                    </div>
                    <div class="flex items-end sm:col-span-4">
                        <button type="button" wire:click="removeLine({{ $index }})" class="text-sm font-medium text-rose-600 transition hover:text-rose-800">{{ __('Remove') }}</button>
                    </div>
                </div>
            @else
                <div class="flex flex-wrap items-baseline justify-between gap-2 text-sm">
                    <p class="font-medium text-slate-900">
                        {{ $line['description'] ?: __('Untitled line') }}
                        @if (filled($line['variant'] ?? null))
                            <span class="font-normal text-slate-500">({{ $line['variant'] }})</span>
                        @endif
                    </p>
                    <p class="whitespace-nowrap tabular-nums text-slate-700">
                        {{ __('Qty :n', ['n' => $line['quantity']]) }}
                        ·
                        @if (trim((string) ($line['unit_price'] ?? '')) === '')
                            {{ __('Not estimated') }}
                        @else
                            {{ $currency_code }} {{ number_format((float) $line['unit_price'], 2) }}
                        @endif
                    </p>
                </div>
            @endif
        </div>
    @empty
        <p class="text-sm text-slate-500">{{ __('No catalogue lines yet.') }}</p>
    @endforelse

    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p class="text-sm {{ $lineTotal === null ? 'text-slate-500' : 'font-semibold tabular-nums text-slate-900' }}">
            @if (! $hasLines)
                {{ __('Line total: no lines yet') }}
            @elseif ($lineTotal === null)
                {{ __('Line total: Not estimated') }}
            @else
                {{ __('Line total: :amount', ['amount' => trim($currency_code.' '.number_format($lineTotal, 2))]) }}
            @endif
        </p>
        @if ($canEdit)
            <div class="flex flex-wrap gap-2">
                <x-secondary-button type="button" wire:click="addCustomLine">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Add a line not in the catalogue') }}
                </x-secondary-button>
                @if ($showEstimateButton)
                    <x-secondary-button type="button" wire:click="buildEstimatedValue">
                        {{ __('Use the line total as the estimate') }}
                    </x-secondary-button>
                @endif
                @if ($showSave)
                    <x-button type="button" wire:click="saveLines" wire:loading.attr="disabled" wire:target="saveLines">
                        <span wire:loading.remove wire:target="saveLines">{{ __('Save lines') }}</span>
                        <span wire:loading wire:target="saveLines">{{ __('Saving…') }}</span>
                    </x-button>
                @endif
            </div>
        @endif
    </div>
</div>