@props(['id' => null, 'name' => null, 'value' => null, 'required' => false, 'calculated' => false])


<div class="relative" x-data="{ value: '{{ $value }}', isInvalid: false }" x-init="() => {
    $watch('value', value => {
        const decimalRegex = /^\d*(\.\d+)?$/;
        isInvalid = !decimalRegex.test(value);
    });
}">
    <input type="number"
           id="{{ $id }}"
           name="{{ $name }}"
           x-model="value"
           @input="value = $event.target.value.replace(/[^0-9.]/g, ''); isInvalid = !/^\d*(\.\d+)?$/.test(value)"
           class="input-style"
           @if($required) required @endif
           @if($calculated) disabled @endif
           @blur="isInvalid && alert('Please enter a valid decimal number')"
           @focus="isInvalid = false"
           @keydown="handleKeyDown($event)"
           style="min-width: 80px;"
    />
    <span x-show="isInvalid" class="text-red-500 text-sm absolute">Invalid decimal number</span>
</div>

<script>
    function handleKeyDown(event) {
        const validKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete', 'Enter', 'Escape'];
        const isNumber = /^[0-9]$/;
        const isDecimal = /^.$/;

        if (!validKeys.includes(event.key) && !isNumber.test(event.key) && (event.key !== '.' || event.target.value.includes('.'))) {
            event.preventDefault();
        }
    }
</script>