{{--
    A 24h time field typed as plain digits: the colon is inserted while typing
    and the value is completed on blur ("9" -> 09:00, "930" -> 09:30).
    Replaces <input type="time">, whose native wheel is awkward on mobile.

    @param string $get Alpine expression returning the current "HH:MM" value.
    @param string $set Alpine expression storing $el.value back (runs on input and blur).
--}}
@props(['get', 'set'])

<input type="text" inputmode="numeric" autocomplete="off" maxlength="5" placeholder="--:--"
    :value="{{ $get }}"
    @input="$el.value = timeMask($el.value, ($event.inputType || '').startsWith('delete')); {{ $set }}"
    @blur="$el.value = timeComplete($el.value); {{ $set }}"
    {{ $attributes->merge(['class' => 'tabular-nums']) }}>

@once
    <script>
        /** Digits only, at most `max` of them. */
        function timeDigits(value, max) {
            return String(value ?? '').replace(/\D/g, '').slice(0, max);
        }

        /**
         * Hours that cannot exist as typed are read as a single-digit hour:
         * "9" -> "09", "25" -> "02" + "5" as the first minute digit.
         */
        function timeFixHours(digits) {
            if (digits !== '' && digits[0] > '2') { digits = '0' + digits; }
            if (digits.length >= 2 && Number(digits.slice(0, 2)) > 23) { digits = '0' + digits; }

            return digits.slice(0, 4);
        }

        /** Insert the colon while typing. Deleting never re-adds it, so backspace can get through. */
        function timeMask(value, isDeleting) {
            const d = timeFixHours(timeDigits(value, 5));

            if (d.length < 2) { return d; }
            if (d.length === 2) { return isDeleting ? d : d + ':'; }

            return d.slice(0, 2) + ':' + d.slice(2);
        }

        /** Complete a partial entry on blur: "9" -> "09:00", "093" -> "09:30", "097" -> "09:07". */
        function timeComplete(value) {
            const d = timeFixHours(timeDigits(value, 5));

            if (d === '') { return ''; }

            const hours = d.slice(0, 2).padStart(2, '0');
            let minutes = d.slice(2);

            if (minutes === '') {
                minutes = '00';
            } else if (minutes.length === 1) {
                minutes = Number(minutes) <= 5 ? minutes + '0' : '0' + minutes;
            }

            return hours + ':' + (Number(minutes) > 59 ? '59' : minutes);
        }
    </script>
@endonce