{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Stage 3: Puzzle Task
{% endblock %}

{% block content %}
    <h1 class=" alert-danger" id="partnerLeftPageText" style="display: none">
        Your partner left the stage, please also advance to next screen by clicking the button "Leave Stage"
        below. </h1>
    <h1 class=" alert-danger" id="partnerLeftExperimentText" style="display: none">
        Your partner left the experiment, please also advance to next screen by clicking the button "Leave Stage"
        below. </h1>
    {% if player.role == 'Sender' %}
        <img src="https://imgur.com/P1W6ooZ.jpg" width="500px"/>

        <style>
            .form-control-errors {
                color: red;
                font-size: 1.5em;
            }

            .otree-form-errors {
                display: none;
            }
        </style>

        <div class="row container-fluid">
            <div class="col-8">
                {% formfield player.puzzle1 label="Puzzle 1 Soultion" %}
                {% formfield player.puzzle2 label="Puzzle 2 Soultion" %}
            </div>
            <div class="col-4">
                <p class="mt-5  alert-danger" id="wrongAnswerAlert" style="display: none">
                    One or more of your answers is incorrect. Please communicate with your partner further to solve the
                    task
                </p>
                <p class="mt-5  alert-success" id="rightAnswerAlert" style="display: none">
                    Your solutions are correct, please tell this to your partner and advance to the next stage
                </p>
            </div>
        </div>
    {% endif %}


    {% if player.role == 'Receiver' %}
        <iframe src="https://www.docdroid.net/QSBeH4n/instructions-pdf" width="80%" height="500px">
        </iframe>

    {% endif %}

    {% chat nickname=player.role %}

    <br>
    <br>
    {% if player.role == 'Sender' %}

        <button type="button" onclick="checkAnswers()">
            Check Answers
        </button>

    {% endif %}
    <br>
    <br>
    <button>
        Leave Stage
    </button>

    {#
    <!-- Modal if other player left the page -->
    #}

    <div class="modal fade" id="playerLeftPageModal" tabindex="-1" aria-labelledby="playerLeftPageModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content alert-danger">
                <div class="modal-header alert-danger">
                    <h5 class="modal-title" id="playerLeftPageModal">Your partner left!</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Your partner left the stage, please also advance to next screen by clicking the button "Leave Stage"
                    below
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    {#
    <!-- Modal if other player left the experiment -->
    #}
    <div class="modal fade" id="playerLeftExperimentModal" tabindex="-1" aria-labelledby="playerLeftExperimentModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content alert-danger">
                <div class="modal-header alert-danger">
                    <h5 class="modal-title" id="playerLeftExperimentModal">Your partner left!</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Your partner left the experiment, please also advance to next screen by clicking the button "Leave
                    Stage"
                    below
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        // make sure modal is shown only once by assigning a global variable
        window.playerLeftModalShown = false
        // you can see debug messages by opening the Console in browser Developer Tools
        const DEBUG = true

        // send data to oTree when button in clicked
        // checkAnswers function in bound to onlick of the button
        // TODO: add cool-down for the button to not overwhelm the server
        function checkAnswers() {
            // get answer values from fields
            let puzzle1_solution = document.getElementById("id_puzzle1").value
            let puzzle2_solution = document.getElementById("id_puzzle2").value
            // send answers to oTree
            let payload =   {
                    "puzzle1_solution": puzzle1_solution,
                    "puzzle2_solution": puzzle2_solution
            }
            if (DEBUG) {
                console.log("Sending payload: ", payload, "to check the answers oTree!")
            }
            // use liveSend function inbuild in oTree, see documentation for more examples
            liveSend(
              payload
            );
        }

        // deal with data received from pages.py
        function liveRecv(data) {
            // if data contains areAnswersCorrect, deal with answer evaluation
            if (data.hasOwnProperty("areAnswersCorrect")) {
                if (data['areAnswersCorrect'] === false) {
                    // hide the right answer message
                    document.getElementById("rightAnswerAlert").style.display = "none";
                    // display the wrong answer message
                    document.getElementById("wrongAnswerAlert").style.display = "block";
                }
                if (data['areAnswersCorrect'] === true) {
                    // hide the right wrong message
                    document.getElementById("wrongAnswerAlert").style.display = "none";
                    // display the right answer message
                    document.getElementById("rightAnswerAlert").style.display = "block";
                }
            }

            // if data contains otherPlayerPresent, deal with other player appearance status
            if (data.hasOwnProperty("otherPlayerPresenceStatus")) {
                // if other player present, do nothing
                if (data['otherPlayerPresenceStatus'] === 'present') {
                }
                // if other player present left the page
                if (data['otherPlayerPresenceStatus'] === 'left the page') {
                    // show modal only once, not at every received message
                    if (window.playerLeftModalShown === false) {
                        $("#playerLeftPageModal").modal('toggle');
                        window.playerLeftModalShown = true
                    }
                    // show the big text on top of the screen
                    document.getElementById("partnerLeftPageText").style.display = "block";
                }
                // if other player timed out
                if (data['otherPlayerPresenceStatus'] === 'timed-out') {
                    // show modal only once, not at every received message
                    if (window.playerLeftModalShown === false) {
                        $("#playerLeftExperimentModal").modal('toggle');
                        window.playerLeftModalShown = true
                    }
                    // show the big text on top of the screen
                    document.getElementById("partnerLeftExperimentText").style.display = "block";
                }
            }
            if (DEBUG) {
                console.log('received a message from the server: ', data);
            }
        }

        // tell every 5 second to the server that Im on the page
        // receive answer, if other player is also on the page or timed out
        function isOnTheSameScreen() {
            if (DEBUG) {
                console.log('told server that im on the page! I should receive info if other player is on the page');
            }
            liveSend(
                {
                    "playerPresent": true
                }
            );
        }

        setInterval(function () {
            isOnTheSameScreen();
        }, 5000);

    </script>
{% endblock %}