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

<div class="relative"
    x-data="{
        decimalValue: {{ json_encode(is_numeric($value) ? (float) $value : '') }},
        isInvalid: false,
        validateAndFormat() {
            if (this.decimalValue === '' || this.decimalValue === null) {
                this.isInvalid = false;
                return;
            }
            const v = parseFloat(this.decimalValue);
            if (isNaN(v)) {
                this.isInvalid = true;
                this.decimalValue = '';
                return;
            }
            if (v < 0 || v > 24) {
                this.isInvalid = true;
                this.decimalValue = '';
                return;
            }
            this.isInvalid = false;
            this.decimalValue = v.toFixed(2);
        }
    }"
>
    <input
        type="number"
        x-model.lazy="decimalValue"
        @blur="validateAndFormat()"
        step="0.01"
        min="0"
        max="24"
        placeholder="1.75"
        class="input-style max-w-24"
        name="{{ $name }}"
        id="{{ $id ?? $name }}"
        @if($required) required @endif
    />

    <span x-show="isInvalid" class="text-red-500 text-sm absolute mt-1">
        Please enter a valid time between 0 and 24 hours
    </span>
</div>