@php
    $id        = $field['id'];
    $inputName = 'data[' . $id . ']';
    $inputId   = 'field_' . str_replace(['-', '_', '.'], '_', $id);
    $required  = $field['required'] === true;
@endphp

<div>
    <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
        <span class="text-gray-400 text-sm font-normal"> (JPG / PNG, max 5 MB)</span>
    </label>
    @if(!empty($field['label_bn']))
        <p class="text-sm text-gray-500 leading-relaxed">{{ $field['label_bn'] }}</p>
    @endif

    <input
        type="file"
        id="{{ $inputId }}"
        name="{{ $inputName }}"
        accept="image/*"
        capture="environment"
        @if($required) required aria-required="true" @endif
        class="mt-2 w-full text-base text-gray-700
               file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0
               file:text-base file:font-medium file:bg-indigo-50 file:text-indigo-700
               hover:file:bg-indigo-100 cursor-pointer
               @error($inputName) border border-red-500 rounded @enderror"
    >

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