@props([
    'name',
    'label' => $name ?? '',
    'required' => false,
    'value' => null,
    'useLabel' => true,
    'canClear' => false,
    'container' => 'body',
    'minDate' => null,
    'maxDate' => null,
    'format' => null
])
<div id="div-datepicker-{{ Str::slug($name) }}" class="form-floating mb-2">
    <input {{ $attributes->class(['form-control bg-unset datepicker', 'is-invalid' => $errors->has($name)]) }} id="datepicker-{{ Str::slug($name) }}" type="text" name="{{ $name }}" value="{{ old($name, $value) }}" placeholder="{{ $useLabel ? '' : $label }}" @required($required) readonly />
    @if($useLabel)
        <label class="form-label" for="{{ $name }}">{{ $label }}
            @if($required)
                <span class="text-danger">*</span>
            @endif
        </label>
    @endif
    @error($name)
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>
@push('scripts')
    <script type="module">
        $(document).ready(function() {
            $('#datepicker-{{ Str::slug($name) }}').datepicker({
                @if($format == 'months')
                    format: 'yyyy-mm',
                    minViewMode: 'months',
                    viewMode: 'months',
                    autoclose: true,
                @else
                ...window.datepickerOptions,
                @endif
                orientation: 'bottom',
                container: '{{ $container }}',
                @if($minDate)
                    minDate: moment(@json($minDate)),
                @endif
                @if($maxDate)
                    maxDate: moment(@json($maxDate)),
                @endif
                @if($canClear)
                    clearBtn: true,
                @endif
            });
        });
    </script>
@endpush