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

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

    You are in a group of 6. <br><br>

    <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()">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();
                if (supervisor_message.value != "") {
                    localStorage.removeItem("timer");
                } else {
                    return 1;
                }
                
                
            }
    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 }}