{% extends 'frontend/layouts/index.html.twig' %}
{% set active = '2fa-activate' %}
{% set for2Fa = true %}
{% block title %}Two Factor Authentication{% endblock %}
{% block stylesheets %}
    <style>
        .otp-input-fields{
            margin: 0 auto;
            max-width: 400px;
            width: auto;
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        input[type="text"]{
            height: 40px;
            width: 40px;
            background-color: transparent;
            border-radius: 4px;
            border: 1px solid #ccc;
            text-align: center;
            outline: none;
            font-size: 16px;
            margin: 0;
        }
        input[type="number"]:focus {
            border-width: 2px;
            border-color: #2f8f1f;
            font-size: 20px;
        }
    </style>
{% endblock %}
{% block twoFA %}
    <div class="container-fluid overflow-auto m-sm-auto" id="main_content">
        <div class="container-sm w-lg-25">
            <div class="d-flex justify-content-center mb-4">
                {% if getSiteLogo() %}
                    <img src="{{ getSiteLogo() }}" class="d-sm-inline-block h-24px ms-3" alt="">
                {% endif %}
            </div>
            {% include 'frontend/security/2fa/first_step.html.twig' %}
            {% include 'frontend/security/2fa/second_step.html.twig' %}
            <div id="incorrect_code_message" class="d-none">
                <twig:Alert type="danger" message="you have entered incorrect Code Please try again."/>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function (e) {
            console.log('he');
            let nextStepButton = document.getElementById("next-step");
            let prevStepButton = document.getElementById("prev-step");
            var firstStepContent = document.getElementById("show_qr_code_step");
            var secondStepContent = document.getElementById("show_auth_step");
            const queryString = window.location.search;
            const searchParams = new URLSearchParams(queryString);
            const isVerified = searchParams.get('isVerified');
            if (isVerified == 0) {
                if (document.getElementById("incorrect_code_message").classList.contains('d-none')) {
                    document.getElementById("incorrect_code_message").classList.remove("d-none");
                }
            } else {
                if (!document.getElementById("incorrect_code_message").classList.contains('d-none')) {
                    document.getElementById("incorrect_code_message").classList.add("d-none");
                }
            }
            showContent();

            nextStepButton.addEventListener('click', function () {
                sessionStorage.setItem('2fa_step', 'show_auth_step');
                showContent();
            });

            prevStepButton.addEventListener('click', function () {
                sessionStorage.setItem('2fa_step', 'show_qr_code_step');
                showContent();
            });

            function showContent() {
                let currentStep = sessionStorage.getItem('2fa_step');
                if (currentStep === null || currentStep === 'show_qr_code_step') {
                    secondStepContent.classList.add('d-none');
                    if (firstStepContent.classList.contains('d-none')) {
                        firstStepContent.classList.remove('d-none');
                    }
                } else {
                    firstStepContent.classList.add('d-none');
                    if (secondStepContent.classList.contains('d-none')) {
                        secondStepContent.classList.remove('d-none');
                    }
                }
            }
        });
    </script>
{% endblock %}