@php
    $id             = $field['id'];
    $inputName      = 'data[' . $id . ']';
    $hiddenName     = 'data[' . $id . '__shop_id]';
    $errorKey       = 'data.' . $id;
    $inputId        = 'field_' . str_replace(['-', '_', '.'], '_', $id);
    $required       = $field['required'] === true;
    $oldVal         = old($errorKey);
    $oldShopId      = old('data.' . $id . '__shop_id');
    // Compute the DOM id of the field to pre-fill on shop pick (empty = no pre-fill)
    $addressPrefill = isset($field['address_prefill'])
        ? 'field_' . str_replace(['-', '_', '.'], '_', $field['address_prefill'])
        : '';
@endphp

<div class="relative" data-shop-autocomplete data-address-field="{{ $addressPrefill }}">
    <label for="{{ $inputId }}" class="block text-base font-medium text-gray-800 leading-relaxed">
        {{ $field['label_en'] }}
        @if($required)
            <span class="text-red-500" aria-hidden="true"> *</span>
        @endif
    </label>
    @if(!empty($field['label_bn']))
        <p class="text-sm text-gray-500 leading-relaxed">{{ $field['label_bn'] }}</p>
    @endif

    <input
        type="text"
        id="{{ $inputId }}"
        name="{{ $inputName }}"
        value="{{ $oldVal }}"
        autocomplete="off"
        @if($required) required aria-required="true" @endif
        aria-autocomplete="list"
        role="combobox"
        aria-expanded="false"
        class="mt-2 w-full rounded-md border border-gray-300 px-3 py-3 text-base
               focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500
               @error($errorKey) border-red-500 @enderror"
        data-shop-input
    >
    <input type="hidden" name="{{ $hiddenName }}" value="{{ $oldShopId }}" data-shop-id-input>

    <ul
        class="hidden absolute z-10 w-full bg-white border border-gray-200 rounded-md mt-1 shadow-lg max-h-64 overflow-y-auto"
        data-shop-results
        role="listbox"
    ></ul>

    @error($errorKey)
        <p class="mt-1 text-sm text-red-600" role="alert" aria-live="polite">{{ $message }}</p>
    @enderror
</div>