{% load static %}
{{ block title }}
Part 1
{{ endblock }}
{{ block content }}
{{ formfield_errors 'part_1_puzzle_status' }}
<style>
    body {
        font-family: Arial, Helvetica, sans-serif;

    }

    #board {
        width: 322px;
        height: 322px;
        border: 2px solid purple;

        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }

    #board img {
        width: 79px;
        height: 79px;
        border: 0.5px solid lightblue;
    }


    #pieces {
        width: 562px;
        height: 240px;
        border: 2px solid purple;

        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }

    #pieces img {
        width: 79.5px;
        height: 79.5px;
        border: 0.5px solid lightblue;


    }

    .otree-chat {
        width: 330px;
        /* Set desired width */
        height: 250px;
        /* Set desired height */
    }

    .otree-chat__input
    {
        width: 200px;
        /* Set desired width */
        height: 30px;
        /* Set desired height */
    }
    .flex-container {
  display: flex;
  flex-wrap: nowrap;
}

</style>




<p id="error_message" style="color:red"></p>

<br>

{% if group_id == 1 %}
<div><img src="{{ static 'global/puzzle_images_red/17.png' }}" height= "300px"align='left'></div>
{% elif group_id == 2 %}
<div><img src="{{ static 'global/puzzle_images_blue/17.png' }}" height= "300px" align='left'></div>
{% else %}
<div><img src="{{ static 'global/puzzle_images_red/17.png' }}" height= "300px" align='left'></div>
{% endif%}
<div id="board"></div>

</div>
<div id="check_button" class="container" align="left"><button class="btn btn-primary" onclick="check_func()"
            type="button">Submit Puzzle</button></div><br>
    <div id="next-btn" align="right" style="display:none">{{next_button}}</div><br>

    <div class="flex-container">
    {% if group_id == 1 %}
<div><h5>Chat with your <color style="color:red;">RED </color>group members:</h5>
{% elif group_id == 2 %}
<div><h5>Chat with your <color style="color:blue;">BLUE </color>group members:</h5>
{% else %}
<div><h5>Chat with your <color style="color:red;">RED </color>group members:</h5>
{% endif%}
     {{ chat }}<br></div>
     
  <div id="pieces"></div>
  </div>



    




<input type="text" name="part_1_puzzle_status" id="part_1_puzzle_status" value='' style="display: None;">
<input type="text" name="time_elapsed_to_solve" id="time_elapsed_to_solve" value="" style="display: None;">


{% if group_id == 1 %}
<script>
    var rows = 4;
    var columns = 4;

    var currTile;
    var otherTile;

    var turns = 0;

    window.onload = function () {
        for (let r = 0; r < rows; r++) {
            for (let c = 0; c < columns; c++) {
                //<img>
                let tile = document.createElement("img");
                tile.src = "{{ static 'global/puzzle_images_red/blank.png' }}";

                //DRAG FUNCTIONALITY
                tile.addEventListener("dragstart", dragStart); //click on image to drag
                tile.addEventListener("dragover", dragOver); //drag an image
                tile.addEventListener("dragenter", dragEnter); //dragging an image into another one
                tile.addEventListener("dragleave", dragLeave); //dragging an image away from another one
                tile.addEventListener("drop", dragDrop); //drop an image onto another one
                tile.addEventListener("dragend", dragEnd); //after you completed dragDrop

                document.getElementById("board").append(tile);
            }
        }

        //pieces
        let pieces = [];
        for (let i = 1; i <= rows * columns; i++) {
            pieces.push(i.toString()); //put "1" to "25" into the array (puzzle images names)
        }
        pieces.reverse();
        for (let i = 0; i < pieces.length; i++) {
            let j = Math.floor(Math.random() * pieces.length);

            //swap
            let tmp = pieces[i];
            pieces[i] = pieces[j];
            pieces[j] = tmp;
        }
        let pieces_location = ["{{ static 'global/puzzle_images_red/15.png' }}",
            "{{ static 'global/puzzle_images_red/3.png' }}", "{{ static 'global/puzzle_images_red/11.png' }}",
            "{{ static 'global/puzzle_images_red/8.png' }}", "{{ static 'global/puzzle_images_red/10.png' }}",
            "{{ static 'global/puzzle_images_red/5.png' }}", "{{ static 'global/puzzle_images_red/4.png' }}",
            "{{ static 'global/puzzle_images_red/2.png' }}","{{ static 'global/puzzle_images_red/12.png' }}",
            "{{ static 'global/puzzle_images_red/14.png' }}", "{{ static 'global/puzzle_images_red/13.png' }}",
            "{{ static 'global/puzzle_images_red/6.png' }}","{{ static 'global/puzzle_images_red/7.png' }}",
            "{{ static 'global/puzzle_images_red/9.png' }}", "{{ static 'global/puzzle_images_red/16.png' }}",
            "{{ static 'global/puzzle_images_red/1.png' }}",
        ];
        for (let i = 0; i < pieces.length; i++) {
            let tile = document.createElement("img");
            tile.src = pieces_location[i]

            //DRAG FUNCTIONALITY
            tile.addEventListener("dragstart", dragStart); //click on image to drag
            tile.addEventListener("dragover", dragOver); //drag an image
            tile.addEventListener("dragenter", dragEnter); //dragging an image into another one
            tile.addEventListener("dragleave", dragLeave); //dragging an image away from another one
            tile.addEventListener("drop", dragDrop); //drop an image onto another one
            tile.addEventListener("dragend", dragEnd); //after you completed dragDrop

            document.getElementById("pieces").append(tile);
        }
    }

    //DRAG TILES
    function dragStart() {
        currTile = this; //this refers to image that was clicked on for dragging
    }

    function dragOver(e) {
        e.preventDefault();
    }

    function dragEnter(e) {
        e.preventDefault();
    }

    function dragLeave() {

    }

    function dragDrop() {
        otherTile = this; //this refers to image that is being dropped on
    }

    function dragEnd() {
        if (currTile.src.includes("blank")) {
            return;
        }
        let currImg = currTile.src;
        let otherImg = otherTile.src;
        currTile.src = otherImg;
        otherTile.src = currImg;

        turns += 1;
        document.getElementById("turns").innerText = turns;
    }

    function check_func() {
        let check_string = "";
        let string_to_check = "";
        let score = 0;
        const assembled_puzzle = document.getElementById("board").children;
        for (let i = 0; i < assembled_puzzle.length; i++) {
            check_string = "static/global/puzzle_images_red/" + (i + 1) + ".png"
            string_to_check = assembled_puzzle[i].src.toString()
            if (string_to_check.search(check_string) != -1) {
                score++;
            }
            console.log(check_string);
            console.log(string_to_check)
            console.log(string_to_check.search(check_string));
            console.log(score);
        }
        if (score === 16) {
            
            const timer_value = document.getElementsByClassName("otree-timer__time-left")[0].textContent;
            const inputElement2 = document.getElementById('part_1_puzzle_status');
            inputElement2.value = "Done";
            const inputElement1 = document.getElementById('time_elapsed_to_solve');
            inputElement1.value = timer_value.toString();
            console.log(inputElement1)
            console.log(inputElement2)
            document.getElementById('error_message').innerText = ''
            document.querySelector('.otree-btn-next').click();
        } else {
            document.getElementById('error_message').innerText = 'Please complete the puzzle to move forward!'


        }
    }
</script>
{% elif group_id == 2 %}

<script>
    var rows = 4;
    var columns = 4;

    var currTile;
    var otherTile;

    var turns = 0;

    window.onload = function () {
        for (let r = 0; r < rows; r++) {
            for (let c = 0; c < columns; c++) {
                //<img>
                let tile = document.createElement("img");
                tile.src = "{{ static 'global/puzzle_images_blue/blank.png' }}";

                //DRAG FUNCTIONALITY
                tile.addEventListener("dragstart", dragStart); //click on image to drag
                tile.addEventListener("dragover", dragOver); //drag an image
                tile.addEventListener("dragenter", dragEnter); //dragging an image into another one
                tile.addEventListener("dragleave", dragLeave); //dragging an image away from another one
                tile.addEventListener("drop", dragDrop); //drop an image onto another one
                tile.addEventListener("dragend", dragEnd); //after you completed dragDrop

                document.getElementById("board").append(tile);
            }
        }

        //pieces
        let pieces = [];
        for (let i = 1; i <= rows * columns; i++) {
            pieces.push(i.toString()); //put "1" to "25" into the array (puzzle images names)
        }
        pieces.reverse();
        for (let i = 0; i < pieces.length; i++) {
            let j = Math.floor(Math.random() * pieces.length);

            //swap
            let tmp = pieces[i];
            pieces[i] = pieces[j];
            pieces[j] = tmp;
        }
        let pieces_location = ["{{ static 'global/puzzle_images_blue/15.png' }}",
            "{{ static 'global/puzzle_images_blue/3.png' }}", "{{ static 'global/puzzle_images_blue/11.png' }}",
            "{{ static 'global/puzzle_images_blue/8.png' }}", "{{ static 'global/puzzle_images_blue/10.png' }}",
            "{{ static 'global/puzzle_images_blue/5.png' }}", "{{ static 'global/puzzle_images_blue/4.png' }}",
            "{{ static 'global/puzzle_images_blue/2.png' }}","{{ static 'global/puzzle_images_blue/12.png' }}",
            "{{ static 'global/puzzle_images_blue/14.png' }}", "{{ static 'global/puzzle_images_blue/13.png' }}",
            "{{ static 'global/puzzle_images_blue/6.png' }}","{{ static 'global/puzzle_images_blue/7.png' }}",
            "{{ static 'global/puzzle_images_blue/9.png' }}", "{{ static 'global/puzzle_images_blue/16.png' }}",
            "{{ static 'global/puzzle_images_blue/1.png' }}",
        ];
        for (let i = 0; i < pieces.length; i++) {
            let tile = document.createElement("img");
            tile.src = pieces_location[i]

            //DRAG FUNCTIONALITY
            tile.addEventListener("dragstart", dragStart); //click on image to drag
            tile.addEventListener("dragover", dragOver); //drag an image
            tile.addEventListener("dragenter", dragEnter); //dragging an image into another one
            tile.addEventListener("dragleave", dragLeave); //dragging an image away from another one
            tile.addEventListener("drop", dragDrop); //drop an image onto another one
            tile.addEventListener("dragend", dragEnd); //after you completed dragDrop

            document.getElementById("pieces").append(tile);
        }
    }

    //DRAG TILES
    function dragStart() {
        currTile = this; //this refers to image that was clicked on for dragging
    }

    function dragOver(e) {
        e.preventDefault();
    }

    function dragEnter(e) {
        e.preventDefault();
    }

    function dragLeave() {

    }

    function dragDrop() {
        otherTile = this; //this refers to image that is being dropped on
    }

    function dragEnd() {
        if (currTile.src.includes("blank")) {
            return;
        }
        let currImg = currTile.src;
        let otherImg = otherTile.src;
        currTile.src = otherImg;
        otherTile.src = currImg;

        turns += 1;
        document.getElementById("turns").innerText = turns;
    }

    function check_func() {
        let check_string = "";
        let string_to_check = "";
        let score = 0;
        const assembled_puzzle = document.getElementById("board").children;
        for (let i = 0; i < assembled_puzzle.length; i++) {
            check_string = "static/global/puzzle_images_blue/" + (i + 1) + ".png"
            string_to_check = assembled_puzzle[i].src.toString()
            if (string_to_check.search(check_string) != -1) {
                score++;
            }
            console.log(check_string);
            console.log(string_to_check)
            console.log(string_to_check.search(check_string));
            console.log(score);
        }
        if (score === 16) {
            
            const timer_value = document.getElementsByClassName("otree-timer__time-left")[0].textContent;
            const inputElement2 = document.getElementById('part_1_puzzle_status');
            inputElement2.value = "Done";
            const inputElement1 = document.getElementById('time_elapsed_to_solve');
            inputElement1.value = timer_value.toString();
            console.log(inputElement1)
            console.log(inputElement2)
            document.getElementById('error_message').innerText = ''
            document.querySelector('.otree-btn-next').click();
        } else {
            document.getElementById('error_message').innerText = 'Please complete the puzzle to move forward!'


        }
    }
</script>
{% else %}
<script>
    var rows = 4;
    var columns = 4;

    var currTile;
    var otherTile;

    var turns = 0;

    window.onload = function () {
        for (let r = 0; r < rows; r++) {
            for (let c = 0; c < columns; c++) {
                //<img>
                let tile = document.createElement("img");
                tile.src = "{{ static 'global/puzzle_images_red/blank.png' }}";

                //DRAG FUNCTIONALITY
                tile.addEventListener("dragstart", dragStart); //click on image to drag
                tile.addEventListener("dragover", dragOver); //drag an image
                tile.addEventListener("dragenter", dragEnter); //dragging an image into another one
                tile.addEventListener("dragleave", dragLeave); //dragging an image away from another one
                tile.addEventListener("drop", dragDrop); //drop an image onto another one
                tile.addEventListener("dragend", dragEnd); //after you completed dragDrop

                document.getElementById("board").append(tile);
            }
        }

        //pieces
        let pieces = [];
        for (let i = 1; i <= rows * columns; i++) {
            pieces.push(i.toString()); //put "1" to "25" into the array (puzzle images names)
        }
        pieces.reverse();
        for (let i = 0; i < pieces.length; i++) {
            let j = Math.floor(Math.random() * pieces.length);

            //swap
            let tmp = pieces[i];
            pieces[i] = pieces[j];
            pieces[j] = tmp;
        }
        let pieces_location = ["{{ static 'global/puzzle_images_red/15.png' }}",
            "{{ static 'global/puzzle_images_red/3.png' }}", "{{ static 'global/puzzle_images_red/11.png' }}",
            "{{ static 'global/puzzle_images_red/8.png' }}", "{{ static 'global/puzzle_images_red/10.png' }}",
            "{{ static 'global/puzzle_images_red/5.png' }}", "{{ static 'global/puzzle_images_red/4.png' }}",
            "{{ static 'global/puzzle_images_red/2.png' }}","{{ static 'global/puzzle_images_red/12.png' }}",
            "{{ static 'global/puzzle_images_red/14.png' }}", "{{ static 'global/puzzle_images_red/13.png' }}",
            "{{ static 'global/puzzle_images_red/6.png' }}","{{ static 'global/puzzle_images_red/7.png' }}",
            "{{ static 'global/puzzle_images_red/9.png' }}", "{{ static 'global/puzzle_images_red/16.png' }}",
            "{{ static 'global/puzzle_images_red/1.png' }}",
        ];
        for (let i = 0; i < pieces.length; i++) {
            let tile = document.createElement("img");
            tile.src = pieces_location[i]

            //DRAG FUNCTIONALITY
            tile.addEventListener("dragstart", dragStart); //click on image to drag
            tile.addEventListener("dragover", dragOver); //drag an image
            tile.addEventListener("dragenter", dragEnter); //dragging an image into another one
            tile.addEventListener("dragleave", dragLeave); //dragging an image away from another one
            tile.addEventListener("drop", dragDrop); //drop an image onto another one
            tile.addEventListener("dragend", dragEnd); //after you completed dragDrop

            document.getElementById("pieces").append(tile);
        }
    }

    //DRAG TILES
    function dragStart() {
        currTile = this; //this refers to image that was clicked on for dragging
    }

    function dragOver(e) {
        e.preventDefault();
    }

    function dragEnter(e) {
        e.preventDefault();
    }

    function dragLeave() {

    }

    function dragDrop() {
        otherTile = this; //this refers to image that is being dropped on
    }

    function dragEnd() {
        if (currTile.src.includes("blank")) {
            return;
        }
        let currImg = currTile.src;
        let otherImg = otherTile.src;
        currTile.src = otherImg;
        otherTile.src = currImg;

        turns += 1;
        document.getElementById("turns").innerText = turns;
    }

    function check_func() {
        let check_string = "";
        let string_to_check = "";
        let score = 0;
        const assembled_puzzle = document.getElementById("board").children;
        for (let i = 0; i < assembled_puzzle.length; i++) {
            check_string = "static/global/puzzle_images_red/" + (i + 1) + ".png"
            string_to_check = assembled_puzzle[i].src.toString()
            if (string_to_check.search(check_string) != -1) {
                score++;
            }
            console.log(check_string);
            console.log(string_to_check)
            console.log(string_to_check.search(check_string));
            console.log(score);
        }
        if (score === 16) {
            
            const timer_value = document.getElementsByClassName("otree-timer__time-left")[0].textContent;
            const inputElement2 = document.getElementById('part_1_puzzle_status');
            inputElement2.value = "Done";
            const inputElement1 = document.getElementById('time_elapsed_to_solve');
            inputElement1.value = timer_value.toString();
            console.log(inputElement1)
            console.log(inputElement2)
            document.getElementById('error_message').innerText = ''
            document.querySelector('.otree-btn-next').click();
        } else {
            document.getElementById('error_message').innerText = 'Please complete the puzzle to move forward!'


        }
    }
</script>
{% endif%}






{{ endblock }}