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

    }

    #board {
        width: 400px;
        height: 400px;
        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: 1040px;
        height: 160px;
        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;


    }

    .chat-window {
        width: 200px;
        /* Set desired width */
        height: 300px;
        /* Set desired height */
    }
</style>
<p id="error_message" style="color:red"></p>
<br>
<div class="container"><img src="{{ static 'global/puzzle_images/26.png' }}" height="200px" align='left'>

    <div id="board"></div><br>
    <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>

<div id="pieces"></div><br>
<h5>Chat with your group members here:</h5>
<div class='container' height="200px" width="200px">{{ chat }}</div>
<input type="text" name="puzzle_status" id="puzzle_status" value='' style="display: None;">
<input type="text" name="time_elapsed_to_solve" id="time_elapsed_to_solve" value="" style="display: None;">







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

    var currTile;
    var otherTile;

    var turns = 0;

    window.onload = function () {
        //initialize the 5x5 board
        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/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/1.png' }}",
            "{{ static 'global/puzzle_images/18.png' }}", "{{ static 'global/puzzle_images/17.png' }}",
            "{{ static 'global/puzzle_images/8.png' }}", "{{ static 'global/puzzle_images/21.png' }}",
            "{{ static 'global/puzzle_images/2.png' }}", "{{ static 'global/puzzle_images/23.png' }}",
            "{{ static 'global/puzzle_images/4.png' }}", "{{ static 'global/puzzle_images/16.png' }}",
            "{{ static 'global/puzzle_images/22.png' }}", "{{ static 'global/puzzle_images/14.png' }}",
            "{{ static 'global/puzzle_images/10.png' }}", "{{ static 'global/puzzle_images/25.png' }}",
            "{{ static 'global/puzzle_images/13.png' }}", "{{ static 'global/puzzle_images/5.png' }}",
            "{{ static 'global/puzzle_images/15.png' }}", "{{ static 'global/puzzle_images/19.png' }}",
            "{{ static 'global/puzzle_images/20.png' }}", "{{ static 'global/puzzle_images/12.png' }}",
            "{{ static 'global/puzzle_images/9.png' }}", "{{ static 'global/puzzle_images/7.png' }}",
            "{{ static 'global/puzzle_images/24.png' }}", "{{ static 'global/puzzle_images/11.png' }}",
            "{{ static 'global/puzzle_images/3.png' }}", "{{ static 'global/puzzle_images/6.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/" + (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.search(check_string));
            console.log(score);
        }
        if (score === 25) {
            document.getElementById('next-btn').style.display = 'block';
            document.getElementById('check_button').style.display = 'None';
            const timer_value = document.getElementsByClassName("otree-timer__time-left")[0].textContent;
            const inputElement2 = document.getElementById('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 = ''
        } else {
            document.getElementById('error_message').innerText = 'Please complete the puzzle to move forward!'


        }
    }
</script>
{{ endblock }}