{{-- resources/views/components/form-input.blade.php --}}
{{--@props(['label', 'name', 'value' => '', 'type' => 'text', 'required' => false, 'icon' => 'circle', 'color' => 'gray', 'maxlength' => null])--}}

{{--<div>--}}
{{--    <label class="block text-gray-700 font-medium mb-1">--}}
{{--        {{ $label }} @if($required)<span class="text-red-500">*</span>@endif--}}
{{--    </label>--}}
{{--    <div class="relative">--}}
{{--        <input--}}
{{--            type="{{ $type }}"--}}
{{--            name="{{ $name }}"--}}
{{--            value="{{ $value }}"--}}
{{--            @if($required) required @endif--}}
{{--            @if($maxlength) maxlength="{{ $maxlength }}" @endif--}}
{{--            class="w-full p-2 pl-8 border rounded text-xs focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">--}}
{{--        <i class="fas fa-{{ $icon }} absolute left-2 top-2.5 text-{{ $color }}-500 text-xs"></i>--}}
{{--    </div>--}}
{{--    @error($name)--}}
{{--    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>--}}
{{--    @enderror--}}
{{--</div>--}}
{{-- resources/views/components/form-input.blade.php --}}
@props(['label', 'name', 'value' => '', 'type' => 'text', 'required' => false, 'icon' => 'circle', 'color' => 'gray', 'maxlength' => null])

<div>
    <label class="block text-gray-700 font-medium mb-1 text-xs">
        {{ $label }} @if($required)<span class="text-red-500">*</span>@endif
    </label>
    <div class="relative">
        <input
            type="{{ $type }}"
            name="{{ $name }}"
            value="{{ $value }}"
            @if($required) required @endif
            @if($maxlength) maxlength="{{ $maxlength }}" @endif
            class="w-full p-2 pl-8 border rounded text-xs focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        <i class="fas fa-{{ $icon }} absolute left-2 top-2.5 text-{{ $color }}-500 text-xs"></i>
    </div>
    @error($name)
    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
    @enderror
</div>