@props([
    'label',
    'name',
    'placeholder' => '',
    'required' => false,
    'id' => null,
])

@php
  $inputId = $id ?? $name;
@endphp

<div class="form-group">
  <label class="form-label">
    {{ $label }}
    @if($required)
      <span class="text-red">*</span>
    @endif
  </label>

  <div class="input-group">
    <input
      type="text"
      id="{{ $inputId }}"
      name="{{ $name }}"
      placeholder="{{ $placeholder }}"
      class="form-control readonly InputDate @error($name) is-invalid @enderror"
      wire:model.live="{{ $name }}"
      value="{{ old($name) }}"
      autocomplete="off"
      onchange="this.dispatchEvent(new InputEvent('input'))"
      {{ $attributes }}
    >
    <span class="input-group-text" data-datepicker="#{{ $inputId }}">
      <i class="fa fa-calendar"></i>
    </span>
  </div>

  @error($name)
    <span class="text-danger">{{ $message }}</span>
  @enderror
</div>