{{ block title }}
<div align="center"> <strong>  Practice Round [Big Grid] </strong></div>
{{ endblock }}

{{ block content }}
<br/>
    <div style="position: relative;">
        <div id="successMessage" style="display: none; position: absolute; top: 0; right: 0; margin-right: 50px;margin-top:30px;">
            <br/>
            <br/>
            <br/>
            <br/>
            <p style="line-height:1.75;color: red;">You have worked out this task!</p>
        </div>
        <div align="center">
        <canvas id="gridCanvas_practice_big" width="300" height="300"></canvas>
        </div>
    </div>

<br/>

    <p style="line-height:1.75;margin-bottom:20px;">You have found <span id="foundPairsNumber">0</span> pairs that add up to 100.</p>

<br/>
<div align="center">    {{ next_button }} </div>

<script>
    var canvas = document.getElementById('gridCanvas_practice_big');
    var ctx = canvas.getContext('2d');
    var gridSizeBig = 5;
    var cellSizeBig = canvas.width / gridSizeBig;
    var lineWidth = 2;
    var matrix_practice_big = [64, 65, 44, 21, 50, 33, 95, 63, 22, 42, 24, 26, 28, 13, 78, 16, 56, 37, 14, 34, 82, 85, 29, 67, 36];
    var clickedIndex = -1;
    var clickedNumbers = [];
    var pairs = [];
    var colors = ['orange', 'blue', 'green', 'LightPink','DarkOrchid'];
    var foundPairs = 0;
    var success_practice_big = 0;
    var foundPairIndices = [];

    canvas.addEventListener('click', function(event) {
        var rect = canvas.getBoundingClientRect();
        var x = event.clientX - rect.left;
        var y = event.clientY - rect.top;
        var i = Math.floor(y / cellSizeBig);
        var j = Math.floor(x / cellSizeBig);
        var index = i * gridSizeBig + j;
        var number = matrix_practice_big[index];

        if (index === clickedIndex || foundPairIndices.includes(index)) {
            return;
        }

        if (clickedIndex === -1) {
            clickedIndex = index;
            drawGrid();
        } else {
            var number1 = matrix_practice_big[clickedIndex];
            if (number + number1 === 100 && !foundPairIndices.includes(clickedIndex) && !foundPairIndices.includes(index)) {
                pairs.push([number, number1]);
                foundPairIndices.push(clickedIndex, index);
                updateFoundPairs();
                if (foundPairs >= 3) {
                    success_practice_big = 1;
                    document.getElementById('successMessage').style.display = 'block';
                }
                sendSuccess(success_practice_big);
            }
            clickedIndex = -1;
            drawGrid();
        }
    });

    function updateFoundPairs() {
        foundPairs = pairs.length;
        updateFoundPairsDisplay();
        sendFoundPairs(foundPairs);
    }

    function updateFoundPairsDisplay() {
        var foundPairsDisplay = document.getElementById('foundPairsNumber');
        foundPairsDisplay.textContent = foundPairs;
    }

    function sendFoundPairs(foundPairs) {
        liveSend({'foundPairs': foundPairs});
    }

    function sendSuccess(success_practice_big) {
        liveSend({'success_practice_big': success_practice_big});
    }

    function checkPairs() {
        pairs = [];
        for (var i = 0; i < clickedNumbers.length - 1; i++) {
            for (var j = i + 1; j < clickedNumbers.length; j++) {
                if (clickedNumbers[i] + clickedNumbers[j] === 100) {
                    pairs.push([clickedNumbers[i], clickedNumbers[j]]);
                }
            }
        }
    }

    function drawGrid() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.lineWidth = lineWidth;

        ctx.strokeStyle = 'black';
        ctx.font = 'bold 16px Georgia';
        ctx.textAlign = 'center';

        for (var x = 0; x <= canvas.width; x += cellSizeBig) {
            ctx.moveTo(x, 0);
            ctx.lineTo(x, canvas.height);
        }

        for (var y = 0; y <= canvas.height; y += cellSizeBig) {
            ctx.moveTo(0, y);
            ctx.lineTo(canvas.width, y);
        }

        ctx.stroke();

        for (var i = 0; i < gridSizeBig; i++) {
            for (var j = 0; j < gridSizeBig; j++) {
                var index = i * gridSizeBig + j;
                var number = matrix_practice_big[index];
                var xPos = j * cellSizeBig + cellSizeBig / 2;
                var yPos = i * cellSizeBig + cellSizeBig / 2 + 8;
                var colorIndex = pairs.findIndex(pair => pair.includes(number));
                if (index === clickedIndex) {
                    ctx.fillStyle = 'red';
                } else if (colorIndex !== -1) {
                    ctx.fillStyle = colors[colorIndex % colors.length];
                } else {
                    ctx.fillStyle = 'black';
                }
                ctx.fillText(number, xPos, yPos);
            }
        }
    }
    drawGrid();

</script>



{{ endblock }}