{% block content %}

<B>ROUND 1</B>
<br><br>

Please decode as many letter combinations as possible within 2 minutes 30 seconds using the decoding key for round 1. <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 (example — replace with your real ones)
    const correctAnswers = {
        1: "3063",
        2: "7177",
        3: "4968",
        4: "5229",
        5: "5746",
        6: "52634757",
        7: "7830",
        8: "4575",
        9: "1952",
        10: "63525530",
        11: "7819",
        12: "8649",
        13: "46197579",
        14: "6842",
        15: "6329",
        16: "7742",
        17: "2186",
        18: "86777552",
        19: "6352",
        20: "5530",
        21: "5263",
        22: "2968",
        23: "7149",
        24: "4942",
        25: "21862286",
        26: "4546",
        27: "6871",
        28: "7975",
        29: "30637177",
        30: "4247",
        31: "5752",
        32: "4757",
        33: "45751952",
        34: "2245",
        35: "3055",
        36: "7871",
        37: "2930",
        38: "57467830",
        39: "4242",
        40: "4619",
        41: "7579",
        42: "2222",
        43: "29687149",
        44: "8677",
        45: "7552",
        46: "6368",
        47: "1919",
        48: "22478649",
        49: "7546",
        50: "5277",
    };

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

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

    for (let i = 1; i <= TOTAL_INPUTS; i++) {
        const input = document.querySelector(`input[name="decodedinput${i}"]`);
        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";
                }

                const nextInput = document.querySelector(
                    `input[name="decodedinput${i + 1}"]`
                );

                if (nextInput) {
                    nextInput.disabled = false;
                } else {
                    // Last input correct → enable submit
                    nextBtn.disabled = false;
                }
            } else {
                if (feedback) {
                    feedback.textContent = "❌ Incorrect";
                    feedback.style.color = "darkred";
                }

                if (i < TOTAL_INPUTS) {
                    const nextInput = document.querySelector(
                        `input[name="decodedinput${i + 1}"]`
                    );
                    if (nextInput) nextInput.disabled = true;
                }

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


{% endblock %}