<script>
    var inputs = document.querySelectorAll(".otp-field > input");
    var button = document.querySelector(".otp-submit");

    window.addEventListener("load", () => inputs[0].focus());
    button.setAttribute("disabled", "disabled");

    inputs[0].addEventListener("paste", function (event) {
        event.preventDefault();

        const pastedValue = (event.clipboardData || window.clipboardData).getData(
            "text"
        );
        const otpLength = inputs.length;

        for (let i = 0; i < otpLength; i++) {
            console.log(i,pastedValue.length);
            if (i < pastedValue.length) {
                inputs[i].value = pastedValue[i];
                inputs[i].removeAttribute("disabled");
                inputs[i].focus;

            } else {
                inputs[i].value = ""; // Clear any remaining inputs
                inputs[i].focus;
            }
            if(i==5){
                checkInputs();
            }
        }

    });

    inputs.forEach((input, index1) => {
        input.addEventListener("keyup", (e) => {
            const currentInput = input;
            const nextInput = input.nextElementSibling;
            const prevInput = input.previousElementSibling;

            if (currentInput.value.length > 1) {
                currentInput.value = "";
                return;
            }

            if (
                nextInput &&
                nextInput.hasAttribute("disabled") &&
                currentInput.value !== ""
            ) {
                nextInput.removeAttribute("disabled");
                nextInput.focus();
            }

            if (e.key === "Backspace") {
                inputs.forEach((input, index2) => {
                    if (index1 <= index2 && prevInput) {
                        input.setAttribute("disabled", true);
                        input.value = "";
                        prevInput.focus();
                    }
                });
            }

            button.classList.remove("active");
            button.setAttribute("disabled", "disabled");


            const inputsNo = inputs.length;

            $('#code').val($('.otp-field>input').map(function () {
                return $(this).val();
            }).get().join(''));

            if (!inputs[inputsNo - 1].disabled && inputs[inputsNo - 1].value !== "") {
                button.classList.add("active");
                button.removeAttribute("disabled");

                return;
            }

        });

    });

    function checkInputs(){
        inputs.forEach((input, index1) => {
            const currentInput = input;
            const nextInput = input.nextElementSibling;
            const prevInput = input.previousElementSibling;

            if (currentInput.value.length > 1) {
                currentInput.value = "";
                return;
            }

            if (
                nextInput &&
                nextInput.hasAttribute("disabled") &&
                currentInput.value !== ""
            ) {
                nextInput.removeAttribute("disabled");
                nextInput.focus();
            }



            button.classList.remove("active");
            button.setAttribute("disabled", "disabled");


            const inputsNo = inputs.length;

            $('#code').val($('.otp-field>input').map(function () {
                return $(this).val();
            }).get().join(''));

            if (!inputs[inputsNo - 1].disabled && inputs[inputsNo - 1].value !== "") {
                button.classList.add("active");
                button.removeAttribute("disabled");

                return;
            }


        });
    }
</script>
<?php /**PATH /home/smartdigitants/public_html/oneops.co.uk/oneops.ai/resources/views/sections/2fa-js.blade.php ENDPATH**/ ?>