<form method="post" name="twofactor" action="index.php?fuse=admin&action=verifytwofactor" class="validate-form">

    <?php if ($this->redirectURL != '') { ?>
        <input type="hidden" name="redirect_url" value="<?php echo $this->redirectURL; ?>" />
    <?php } ?>

    <div class="content-page">
        <div class="container">
            <div class="cm-holder">
                <div class="data-table-wrapper">

                    <div class="head">
                        <h1>
                            <?php echo $this->user->lang('Two-Factor Authentication'); ?>
                        </h1>
                    </div>

                    <div class="cs-padding">
                        <div class="row justify-content-center">
                            <div class="col-12 col-md-6">
                                <div id="ce-loginbox">

                                    <h4 class="text-center mb-4">
                                        <?php echo $this->user->lang('Enter your authentication code'); ?>
                                    </h4>

                                    <div class="row">
                                        <div class="col-12 text-center">
                                            <label for="verification_code_1">
                                                <?php echo $this->user->lang('Authentication Code'); ?>
                                            </label>
                                        </div>

                                        <div class="col-12 mb-3">
                                            <input
                                                    type="hidden"
                                                    name="verification_code"
                                                    id="verification_code"
                                                    value=""
                                                    data-parsley-errors-container="#codeGroup"
                                                    required
                                            />
                                            <div class="twofactor-code-inputs" id="twofactor-code-inputs">
                                                <input type="text" id="verification_code_1" class="form-control text-center twofactor-digit" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" />
                                                <input type="text" id="verification_code_2" class="form-control text-center twofactor-digit" inputmode="numeric" pattern="[0-9]*" />
                                                <input type="text" id="verification_code_3" class="form-control text-center twofactor-digit" inputmode="numeric" pattern="[0-9]*" />
                                                <input type="text" id="verification_code_4" class="form-control text-center twofactor-digit" inputmode="numeric" pattern="[0-9]*" />
                                                <input type="text" id="verification_code_5" class="form-control text-center twofactor-digit" inputmode="numeric" pattern="[0-9]*" />
                                                <input type="text" id="verification_code_6" class="form-control text-center twofactor-digit" inputmode="numeric" pattern="[0-9]*" />
                                            </div>
                                            <div id="codeGroup"></div>
                                        </div>

                                        <?php if (!empty($this->error)) { ?>
                                            <div class="col-12">
                                                <div class="alert alert-danger">
                                                    <?php echo $this->error; ?>
                                                </div>
                                            </div>
                                        <?php } ?>

                                        <div class="col-12 text-center">
                                            <?php echo $this->form()->submit(
                                                    $this->user->lang('Verify'),
                                                    [
                                                            'class' => ['app-btns', 'primary'],
                                                    ]
                                            ); ?>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</form>

<style>
    .twofactor-code-inputs {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .twofactor-code-inputs .twofactor-digit {
        width: 54px;
        height: 54px;
        padding: 0;
        font-size: 24px;
        font-weight: 600;
    }

    @media (max-width: 576px) {
        .twofactor-code-inputs {
            gap: 8px;
        }

        .twofactor-code-inputs .twofactor-digit {
            width: 44px;
            height: 44px;
            font-size: 20px;
        }
    }
</style>

<script>
    $(function () {
        const $form = $('form[name="twofactor"]');
        const $hidden = $('#verification_code');

        function getDigits() {
            return $('.twofactor-digit');
        }

        function cleanCode(value) {
            return String(value || '').replace(/[^0-9]/g, '').slice(0, 6);
        }

        function updateHiddenValue() {
            let code = '';

            getDigits().each(function () {
                const digit = cleanCode($(this).val()).charAt(0) || '';

                $(this).val(digit);
                code += digit;
            });

            $hidden.val(code);
        }

        function fillCode(value) {
            const code = cleanCode(value);
            const $digits = getDigits();

            $digits.val('');

            $digits.each(function (index) {
                $(this).val(code.charAt(index) || '');
            });

            updateHiddenValue();

            const focusIndex = Math.min(code.length, $digits.length) - 1;

            if (focusIndex >= 0) {
                $digits.eq(focusIndex).focus();
            }
        }

        function normalizeAutofilledDigits() {
            getDigits().each(function () {
                const value = cleanCode($(this).val());

                if (value.length > 1) {
                    fillCode(value);
                    return false;
                }

                $(this).val(value.charAt(0) || '');
            });

            updateHiddenValue();
        }

        $(document).on('beforeinput', '.twofactor-digit', function (e) {
            const event = e.originalEvent;

            if (!event) {
                return;
            }

            const data = event.data || '';

            if (
                data.length > 1 ||
                event.inputType === 'insertFromPaste' ||
                event.inputType === 'insertReplacementText'
            ) {
                e.preventDefault();
                fillCode(data);
            }
        });

        $(document).on('paste', '.twofactor-digit', function (e) {
            const event = e.originalEvent || e;
            const clipboardData = event.clipboardData || window.clipboardData;

            if (!clipboardData) {
                return;
            }

            const pastedData = clipboardData.getData('text');

            if (pastedData) {
                e.preventDefault();
                fillCode(pastedData);
            }
        });

        $(document).on('input change', '.twofactor-digit', function () {
            const $current = $(this);
            const cleanValue = cleanCode($current.val());

            if (cleanValue.length > 1) {
                fillCode(cleanValue);
                return;
            }

            $current.val(cleanValue.charAt(0) || '');

            updateHiddenValue();

            if (cleanValue !== '') {
                $current.next('.twofactor-digit').focus();
            }
        });

        $(document).on('keydown', '.twofactor-digit', function (e) {
            const $current = $(this);

            if (e.key === 'Backspace' && $current.val() === '') {
                e.preventDefault();
                $current.prev('.twofactor-digit').focus();
                updateHiddenValue();
                return;
            }

            if (e.key === 'ArrowLeft') {
                e.preventDefault();
                $current.prev('.twofactor-digit').focus();
                return;
            }

            if (e.key === 'ArrowRight') {
                e.preventDefault();
                $current.next('.twofactor-digit').focus();
            }
        });

        $form.on('submit', function () {
            normalizeAutofilledDigits();
            updateHiddenValue();
        });

        setTimeout(function () {
            getDigits().first().focus();
            normalizeAutofilledDigits();
        }, 50);

        setTimeout(normalizeAutofilledDigits, 250);
        setTimeout(normalizeAutofilledDigits, 750);

        window.addEventListener('pageshow', function () {
            setTimeout(function () {
                getDigits().first().focus();
                normalizeAutofilledDigits();
            }, 50);

            setTimeout(normalizeAutofilledDigits, 250);
        });
    });
</script>