@props([
    'name',
    'label' => $name ?? '',
    'required' => false,
    'value' => null,
    'useLabel' => true,
    'canClear' => false,
    'container' => 'body',
    'minDate' => null,
])
<div id="div-monthpicker-{{ Str::slug($name) }}" class="form-floating mb-2">
    <input
        {{ $attributes->class(['form-control bg-unset monthpicker', 'is-invalid' => $errors->has($name)]) }}
        id="monthpicker-{{ Str::slug($name) }}"
        type="text"
        name="{{ $name }}"
        value="{{ old($name, $value) }}"
        placeholder="{{ $useLabel ? '' : $label }}"
        @required($required)
        autocomplete="off"
        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() {
            $('#monthpicker-{{ Str::slug($name) }}').datepicker({
                format: 'yyyy-mm',
                minViewMode: 'months',
                viewMode: 'months',
                autoclose: true,
                orientation: 'bottom',
                container: '{{ $container }}',
                @if($minDate)
                    startDate: moment(@json($minDate)).format('YYYY-MM'),
                @endif
                @if($canClear)
                    clearBtn: true,
                @endif
            });
        });
    </script>
@endpush