@props([
    'name',
    'label',
    'optional' => false,
    'help' => false,
    'errorName' => false,
    'includeOther' => false,
    'classInputBox' => null
])

<div class="mt-4 flex-1">
    <div class="form-group-label-box flex mb-4">
        <label class="text-gray-900 text-sm font-semibold" for="{{$name}}">{{$label}}</label>
        @if(!empty($optional))
            <span class="text-gray-600 text-sm ml-1">(optional)</span>
        @endif
    </div>
    <div class="form-group-input-box mt-2 {{$classInputBox}}">
        {{ $slot }}
    </div>

    @if(!empty($help))
        <div class="form-group-help-box mt-2 text-md text-gray-700 leading-tight font-normal">
            <small>{!! $help !!}</small>
        </div>
    @endif

    @error($errorName)
        <div class="form-group-error-box text-sm text-red-500 mt-2">
            {!! $message !!}
        </div>
    @enderror

    @if(!empty($include_other))
        @error($name . '_other')
        <div class="form-group-error-box text-md text-red-500">
            <small>{!! $message !!}</small>
        </div>
        @enderror
    @endif

</div>