@props([
    'detail' => [],
    'products' => [],
    'index' => ':index',
    'width' => '320px',
    'readonly' => false,
    'template' => empty($detail) ? 'data-template-' : '',
])
<div class="position-relative">
    <div class="input-group" style="min-width: {{ $width }};">
        @if(!$readonly)
            <button type="button" class="btn btn-primary" {{ $template }}id="btn-select-product{{ $index }}" data-index="{{ $index }}">
                <i class="fa fa-search"></i>
            </button>
        @endif
        <textarea rows="1" {{ $attributes->class(['form-control', 'is-invlid' => $errors->has("details.$index.description")]) }} {{ $template }}id="details-description{{ $index }}" {{ $template }}name="details[{{ $index }}][description]" data-index="{{ $index }}" readonly rows="2">{{ $detail['description'] ?? '' }}</textarea>
    </div>
    <div class="invisible position-absolute top-0 start-0" style="min-width: {{ $width }};">
        @if($readonly)
            <x-details.input-hidden :detail="$detail" :index="$index" name="product_id" />
        @else
            <x-details.select-product :detail="$detail" :index="$index" :products="$products" name="product_id" relation="details" :selected="$detail['product_id'] ?? ''" />
        @endif
    </div>
</div>