{{ block title }}
Group Task
{{ endblock }}

{{ block content }}
<style>
 {{ include C.STYLE }}
</style>
 <div id="popup_box">    <!-- OUR PopupBox DIV-->
        <h1 id="countDown"></h1>
        <div class="scr" id="scores2"></div>

        {{ if player.role == C.LEADER_ROLE }}
         <p>This is your team’s 60 seconds pause. As the Manager you can instigate a discussion among your Workers.
             Click to re-assign if you wish to change the modules</p>
{#        <span id="reassignText2">Click here to reassign</span>#}
        {{ include C.L_TABLE_TEMPLATE }}


{#         <p>#}
{#        <button type="submit" class="btn btn-primary" onclick="sendVolunteer()">Re-assign</button>#}
{#         </p>#}
        {{ endif }}

        {{ if player.role != C.LEADER_ROLE  }}
                <p>This is your team's 60 seconds Pause, you may talk with
                    your Worker and Manager.</p>


        {{ endif }}
        <a id="popupBoxClose"></a>
    </div>

<div lass="box" id="container" > <!-- Main Page -->



<div class="item left-column">
    <div class="qs" id="question"></div>
    <div class="opt" id="options"></div>


</div>
<div class="item right-column" id="right-column">

    <div class="scr" id="scores"></div>
       {{ if player.role == C.LEADER_ROLE }}

        <span id="reassignText">Click here to reassign</span>

    {{ endif }}

</div>


</div>
    {{ if player.role == C.LEADER_ROLE }}

    <div id="reassignDiv"> {{ include C.L_TABLE_TEMPLATE }} </div>

    {{ endif }}



<script>
// Get the data from the server

    let responses = {}
    let questionDiv = document.getElementById('question');
    let optionDiv = document.getElementById('options');
    let scoresTable = document.getElementById('scores');
    let scoresTable2 = document.getElementById('scores2');

    {#let optionDivImages = document.getElementById('images');#}

    function makeButton(trail, item) {
        let text = trail[item];
        return `<input type="radio" id="${item}" value="${item}" name="radioselect" />
        <label for="${item}">${text}</label><br>`
    }

    function makeButtonSpa(trail, item) {
        let text = trail[item];
        return `<input type="radio" id="${item}" value="${item}" name="radioselect" />
        <label for="${item}">${text}</label>`
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({'type': 'load'});
        $('.otree-timer__time-left').on('update.countdown', function (event) {if (event.offset.totalSeconds < 360 && event.offset.totalSeconds > 300) {pauseGame(event.offset.totalSeconds, 300)
         } else if (event.offset.totalSeconds < 180 && event.offset.totalSeconds > 120) {pauseGame(event.offset.totalSeconds, 120)
         }
        });
    });

function updateUIS(current) {
        let key = current['key'];
        let mod = current['mod'];
        if (key == '5') {
            let items = ['optionA', 'optionB', 'optionC', 'optionD', 'optionE']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)" name="${mod}">Next</button>`;
            optionDiv.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="600" height="480">`;
        } else if (key == '4') {
            let items = ['optionA', 'optionB', 'optionC', 'optionD']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)" name="${mod}">Next</button>`;
            optionDiv.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="600" height="480">`;
        } else if (key == 'int8') {
            let items = ['option1', 'option2', 'option3', 'option4', 'option5', 'option6', 'option7', 'option8']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)" name="${mod}">Next</button>`;
            optionDiv.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="600" height="480">`;
        } else if (key == 'int6') {
            let items = ['option1', 'option2', 'option3', 'option4', 'option5', 'option6']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)" name="${mod}">Next</button>`;
            optionDiv.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="600" height="480">`;
        } else if (key == 'int4') {
            let items = ['option1', 'option2', 'option3', 'option4']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)" name="${mod}">Next</button>`;
            optionDiv.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="600" height="480">`;
        } else if (key == 'int5') {
            let items = ['option1', 'option2', 'option3', 'option4', 'option5']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)" name="${mod}">Next</button>`;
            optionDiv.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="650" height="480">`;

        }
    }


    function updateUINA(current) {
        let items = ['optionA', 'optionB', 'optionC', 'optionD', 'optionE']
        let mod = current['mod'];
        let options = items.map(e => makeButton(current, e)).join('');
        options += `<button type="button" id="next" class="opt-button click" onclick="recordResponse(this)" name="${mod}">Next</button>`;
        optionDiv.innerHTML = options;
        let q = current['question']
        questionDiv.innerHTML = `<p id="question">${q}</p>`
    }

    function recordResponse(btn) {
            let my_id = js_vars.my_id;
            var radioButtonGroup = document.getElementsByName("radioselect");
            var checkedRadio = Array.from(radioButtonGroup).find(
               (radio) => radio.checked
            );
            let response = checkedRadio.value
            let mod = btn.name
            liveSend({'type': 'response', 'response': response, 'mod': mod});
    }


    function sendAssign(btn) {
        let task = btn.value;
        let id_in_group = parseInt(btn.name);
        liveSend({'type': 'assign', 'task': task, 'id': id_in_group});
    }



    function liveRecv(data) {
       console.log(data);
       if (data.finished) {
            document.getElementById('form').submit();
        }
       if (data.error) {
            window.alert(data.msg);
            return;
       }
       let current = data.current_q;
       let task = data.task;
       let score = data.score;
       let min_score = data.min_score;
       if (task === 'Spatial') {
            updateUIS(current);
       } else {
            updateUINA(current);
       }
       let is_leader = data.is_leader;
       let scores_table // if leader return both min and current scores, else just score (worker)
        if (is_leader) {
            scores_table = `<table class="tableS">
            <tr>
                <th><strong>Score in ${task}:<strong></th>
            </tr>
            <tr>
                <td>${score}</td>
            </tr>
            </table>`
            scores_table += `<table class="tableS">
            <tr>
                <th><strong>OVERALL TEAM SCORE:<strong></th>
            </tr>
            <tr>
                            <td>${min_score}</td>
            </tr>
            </table>`
        } else {
            scores_table = `<table class="tableS">
            <tr>
                <th><strong>Score in ${task}:<strong></th>
            </tr>
            <tr>
                <td>${score}</td>
            </tr>
            </table>`
        }
        scoresTable.innerHTML = scores_table;
        scoresTable2.innerHTML = scores_table;
    }

    // reassign div show
  const reassignText = document.getElementById("reassignText");
  const reassignDiv = document.getElementById("reassignDiv");
  const reassignText2 = document.getElementById("reassignText2");

  reassignText.addEventListener("click", function() {
    if (reassignDiv.style.display === "none" || reassignDiv.style.display === "") {
      reassignDiv.style.display = "block";
    } else {
      reassignDiv.style.display = "none";
    }
  });
  reassignText2.addEventListener("click", function() {
    if (reassignDiv2.style.display === "none" || reassignDiv2.style.display === "") {
      reassignDiv2.style.display = "block";
    } else {
      reassignDiv2.style.display = "none";
    }
  });

 {{ include C.PAUSEP }}

</script>

{{ endblock }}