{{ block title }}
Part 3 
{{ endblock }}

{{ block content }}
<div class="container mt-5">
        <b><div class="alert alert-warning" id="timer-alert">
         Timer: <span id="timer">60</span> seconds
        </div></b>
    </div>
<div class="container" style="width:80%">
    <p>
<p><h4>Round: {{ round }} </h4><br>      

        {% if player_group_color == "red" %}
        <p>You are in a group of 6. You belong to <tag style="color:Red">RED </tag> group. 4 of the Workers in your <b>PART 2 group</b> belong to
the <tag style="color:Red">RED </tag> group while 1 of the Workers belongs to the <tag style="color:Blue">BLUE</tag> group.
            
        
        {% elif player.group_color == "blue" %}
        <p>You are in a group of 6. You belong to <tag style="color:Blue">BLUE</tag> group. 4 of the Workers in your <b>PART 2 group</b> belong to
the <tag style="color:Blue">BLUE</tag> group while 1 of the Workers belongs to the <tag style="color:Red">RED </tag> group.
    
        
        {% else %}
         <p>You are in a group of 6. You belong to <tag style="color:Red">RED </tag> group. 4 of the Workers in your <b>PART 2 group</b> belong to
the <tag style="color:Red">RED </tag> group while 1 of the Workers belongs to the <tag style="color:Blue">BLUE</tag> group.
            
        {% endif %}

        <p> You have 60 seconds to type your
    message. The workers in your group will receive the message.</p>
    <p>You can type your message below.</p>
    {{ formfield_errors 'supervisor_message' }}

        <form action="" id="supervisor-message-sender">
            <input class="form-control" type="text" name="temp_supervisor_message" id="temp_supervisor_message">
            <input type="form-control" name="supervisor_message" id="supervisor_message" style="display:none">

            <br>
            <div align="right" id="send-msg-btn" style="display:block"><button class="btn btn-primary" onclick="check_func()" type="button">Send Message</button></div>
        </form>
        <p id="message_sent" style="color:green" align="right"></p>
        <div id="next-btn" align="right" style="display:none">{{next_button}}</div>

        
        
</div>

<script>
    function check_func() {
                temp_supervisor_message = document.getElementById("temp_supervisor_message");
                temp_supervisor_message.disabled = true;
                supervisor_message = document.getElementById("supervisor_message");
                supervisor_message.value = temp_supervisor_message.value;
                message_sent = document.getElementById("message_sent");
                message_sent.innerHTML = "Your message has been sent.";
                document.getElementById('send-msg-btn').style.display = 'none';
                nxt_btn= document.querySelector('.otree-btn-next')
                nxt_btn.click();
                
            }
    window.onbeforeunload = function() {};

    document.addEventListener("DOMContentLoaded", function() {
    const timerAlert = document.getElementById("timer-alert");
    const timerDisplay = document.getElementById("timer");

    // Function to update the timer display
    function updateTimerDisplay(seconds) {
        timerDisplay.textContent = seconds;
    }

    // Function to start the timer
    function startTimer() {
        let remainingTime = parseInt(localStorage.getItem("timer")) || 60;

        function countdown() {
            if (remainingTime > 0) {
                updateTimerDisplay(remainingTime);
                remainingTime--;
                localStorage.setItem("timer", remainingTime.toString());
            } else {
                clearInterval(timerInterval);
                timerAlert.innerHTML = "Send your message ASAP!";
                // You can add additional actions here when the timer expires
            }
        }

        // Call countdown initially
        countdown();

        const timerInterval = setInterval(countdown, 1000);
    }

    startTimer();
});

</script>

{{ endblock }}