{% block content %}

<B>ROUND 2</B>
<br><br>

Please decode as many letter combinations as possible within 2 minutes 30 seconds using the decoding key for round 2. <br><br>
<form method="post" id="decode-form">
    <table style="width:100%; border-collapse: collapse;">
        <tbody>
        {% for field in decoded_fields %}
        <tr>
            <td style="padding: 5px;">
                {{ formfield field }}
                <p id="feedback{{ forloop.counter }}"></p>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>

    <button class="btn btn-primary" type="submit" id="next-btn" disabled>
        Next
    </button>
</form>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const TOTAL_INPUTS = 50;

    // Correct answers
     const correctAnswers = {
        1: "94278152",
        2: "55611570",
        3: "38249213",
        4: "1357",
        5: "73911241",
        6: "24578727",
        7: "66239413",
        8: "52618115",
        9: "71139255",
        10: "5561",
        11: "21701273",
        12: "27248713",
        13: "43571266",
        14: "2441",
        15: "55943813",
        16: "52662473",
        17: "1357",
        18: "43272171",
        19: "23579161",
        20: "2112",
        21: "12924156",
        22: "94617013",
        23: "2712",
        24: "55241315",
        25: "12871292",
        26: "38738191",
        27: "13662756",
        28: "6627",
        29: "73524123",
        30: "24719257",
        31: "66438712",
        32: "52619421",
        33: "71912755",
        34: "21813843",
        35: "27121324",
        36: "1313",
        37: "43562313",
        38: "61921573",
        39: "91576670",
        40: "23815271",
        41: "13135561",
        42: "70125621",
        43: "15412494",
        44: "7192",
        45: "92387323",
        46: "87436681",
        47: "94811513",
        48: "55576170",
        49: "9481",
        50: "13122724"
    };

    const nextBtn = document.getElementById("next-btn");

    // Disable all inputs except the first one
    for (let i = 2; i <= TOTAL_INPUTS; i++) {
        const input = document.querySelector(`input[name="decodedinput${i}B"]`);
        if (input) input.disabled = true;
    }

    // Add keyup listeners to all inputs
    for (let i = 1; i <= TOTAL_INPUTS; i++) {
        const input = document.querySelector(`input[name="decodedinput${i}B"]`);
        const feedback = document.getElementById(`feedback${i}`);
        if (!input) continue;

        input.addEventListener("keyup", function () {
            const value = input.value.trim();

            if (value === correctAnswers[i]) {
                if (feedback) {
                    feedback.textContent = "✅ Correct";
                    feedback.style.color = "darkgreen";
                }

                // Enable the next input if it exists
                if (i < TOTAL_INPUTS) {
                    const nextInput = document.querySelector(`input[name="decodedinput${i + 1}B"]`);
                    if (nextInput) nextInput.disabled = false;
                } else {
                    // Last input correct → enable Next button
                    nextBtn.disabled = false;
                }
            } else {
                if (feedback) {
                    feedback.textContent = "❌ Incorrect";
                    feedback.style.color = "darkred";
                }

                // Disable the next input if current is wrong
                if (i < TOTAL_INPUTS) {
                    const nextInput = document.querySelector(`input[name="decodedinput${i + 1}B"]`);
                    if (nextInput) nextInput.disabled = true;
                }

                nextBtn.disabled = true;
            }
        });
    }
});
</script>

{% endblock %}