@props([
    'name',
    'label' => null,
    'value' => null,
    'placeholder' => '0',
    'help' => null,
    'required' => false,
    'readonly' => false,
    'unit' => null,
    'min' => '0',
    'step' => '1',
    'id' => null,
])

@php
    $id = $id ?? 'field-' . str_replace(['[', ']', '.'], '-', $name);
    $hasError = $errors->has($name);
    $val = old($name, $value);
    $classes = 'form-control form-control--qty' . ($hasError ? ' is-invalid' : '');
@endphp

<div {{ $attributes->except(['class'])->merge(['class' => 'form-field ' . $attributes->get('class', '')]) }}>
    @if($label)
        <label for="{{ $id }}" class="form-label">
            {{ $label }} @if($required)<span class="form-label__required" aria-hidden="true">*</span>@endif
        </label>
    @endif
    <div class="input-group qty-stepper" data-qty-stepper>
        <button type="button" class="btn btn-outline-secondary" data-qty-decrement aria-label="Decrease">
            {!! icon('dash') !!}
        </button>
        <input
            type="number"
            inputmode="numeric"
            name="{{ $name }}"
            id="{{ $id }}"
            value="{{ $val }}"
            placeholder="{{ $placeholder }}"
            class="{{ $classes }}"
            min="{{ $min }}"
            step="{{ $step }}"
            @if($required) required @endif
            @if($readonly) readonly @endif
        >
        <button type="button" class="btn btn-outline-secondary" data-qty-increment aria-label="Increase">
            {!! icon('plus') !!}
        </button>
        @if($unit)<span class="input-group-text">{{ $unit }}</span>@endif
    </div>
    @if($help && ! $hasError)
        <small class="form-text">{{ $help }}</small>
    @endif
    @error($name)
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>