{{ block content }}
<div class="container">
    <!--    --------------------   HTML CONTENT    ---------------------    -->
    <div class="card">
        <h4 class="card-header">
            Please wait: We are trying to find a group for you!
        </h4>
        <div class="card-body">
            <div class="row">
                <div class="col-md-7">
                    <p> <b>Click the button below to signal you are 'active'.</b>
                        Only when you are 'active', you can be grouped and proceed to the game.
                    </p>
                    <p>
                        Once you click the button you are active for 20 seconds.
                        The clock on the right shows how much time you have left until you are 'inactive'.
                    </p>
                    <p>
                        <div id="activity-check">
                            <button type="button" id="activity-button"
                                    style="border-radius: 5px; background-color: #0d6efd; border-color: #0d6efd; color: white;">
                                Stay Active!
                            </button>
                        </div>
                    </p>
                    <p>
                        For every 20 seconds you are active, you receive $0.05 in earnings.
                        <br>
                        <br><b>If you are inactive for 60 seconds, you will be excluded
                        from the experiment!</b>
                    </p>
                    <p>
                        <div id="longwait-check" style="display: none;">
                            <p id="longwait-info">
                                Test for longwait is updated through JavaFunction
                            </p>
                            <div>
                                <button id="longwait-button"
                                        style="border-radius: 5px; background-color: #0d6efd; border-color: #0d6efd; color: white;">
                                    Exit Experiment
                                </button>
                            </div>
                        </div>
                    </p>
                </div>
                <div class="col-md-5">
                    <!-- Countdown Timer -->
                    <div class="base-timer">
                        <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                            <g class="base-timer__circle">
                                <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
                                <path id="base-timer-path-remaining" stroke-dasharray="283"
                                      class="base-timer__path-remaining" d="M 50, 50 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0"></path>
                            </g>
                        </svg>
                        <span id="base-timer-label" class="base-timer__label">
                            0:20
                        </span>
                    </div>
                    <!-- End Countdown Timer -->
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* CSS Styles for the Countdown Ring */
    .base-timer {
        position: relative;
        height: 100%; /* Adjust height as needed */
        width: 100%; /* Adjust width as needed */
        max-width: 300px; /* Set the maximum width */
    }

    .base-timer__circle {
        fill: none;
        stroke: none;
    }

    .base-timer__path-elapsed {
        stroke-width: 7px;
        stroke: grey;
    }

    .base-timer__path-remaining {
        /* Just as thick as the original ring */
        stroke-width: 7px;

        /* Rounds the line endings to create a seamless circle */
        stroke-linecap: round;

        /* Makes sure the animation starts at the top of the circle */
        transform: rotate(90deg);
        transform-origin: center;

        /* One second aligns with the speed of the countdown timer */
        transition: 1s linear all;

        /* Allows the ring to change color when the color value updates */
        stroke: currentColor;
    }

    .base-timer__svg {
        /* Flips the svg and makes the animation move left-to-right */
        transform: scaleX(-1);
    }

    .base-timer__label {
        position: absolute;

        /* Size should match the parent container */
        width: 100%;
        height: 100%;

        /* Keep the label aligned to the top */
        top: 0;

        /* Create a flexible box that centers content vertically and horizontally */
        display: flex;
        align-items: center;
        justify-content: center;

        /* Sort of an arbitrary number; adjust to your liking */
        font-size: 48px;
    }

    .base-timer__path-remaining.blue {
        color: #0d6efd;
    }

    .base-timer__path-remaining.orange {
        color: orange;
    }

    .base-timer__path-remaining.red {
        color: red;
    }
</style>


<script>
    // -------------------------------------------------------------------------------------------------------------- //
    // (A) Code that processes information from server: 1. Submit form if grouped ; 2. Update info for long wait
    let longwaitCheck= document.getElementById('longwait-check')
    let longwaitButton= document.getElementById('longwait-button')
    let longwaitText = document.getElementById('longwait-info');


    function liveRecv(data) {
        console.log('data', data)
        if (data.finished) {
            document.getElementById("form").submit();
        }
        if (data.long) {
           longwaitCheck.style.display = 'block';
            longwaitText.textContent = `There are currently ${data.eligible} participants aside from you who are either waiting (${data.waiting}) or still answering the quiz (${data.pipeline}).
           \nSince you have actively waited for a while and we could not group you yet, you have the option of exiting the experiment.
           \nIn this case, we will pay you $2.50 for your time, but you cannot participate in the game.`;
        }
    }


    // (B) Code that sends information to the server/python code:
    // 1. Code for exiting the experiment:
    longwaitButton.addEventListener('click', function() {
        liveSend({'type': 'exit'});
        }
    )


    // 2. Code for the pop-up of of the "Click me" button, and setting participants inactive and excluding them
    let activityButton = document.getElementById('activity-button');
    let activityCheck = document.getElementById('activity-check');
    let isActive = false;
    let inactivityTimer;
    let exclusionTimer;

    // Additional variables for tracking active time
    let totalActiveTime = 0; // Initialize total active time to zero
    let lastActivityTime = null; // Track the timestamp of the last activity

    // This function is executed after 20 seconds that the Button was clicked to set the person to passive
    function showActivityCheck() {
        if (!isActive) {
                    // Calculate the time since the last activity and add it to the total active time
            if (lastActivityTime !== null) {
                const currentTime = new Date().getTime();
                const timeSinceLastActivity = (currentTime - lastActivityTime) / 1000; // Convert to seconds
                totalActiveTime += timeSinceLastActivity;
            }
            lastActivityTime = null;
            // Send update to the server that participant is passive
            liveSend({'type': 'participant_passive', 'active_time': totalActiveTime});
        }
    }

    // This function is executed after 30 seconds to signal python that player is inactive
    function setPlayerInactive(){
            liveSend({'type': 'inactive'});
    }

    function setPlayerExcluded() {
            liveSend({'type': 'excluded'});
            document.getElementById("form").submit();
    }

    // This defined how the button works
    activityButton.addEventListener('click', function() {
        isActive = true;

        // Calculate the time since the last activity and add it to the total active time
        // so we could do last activite time is null in the beginning, then it is something until inactive and then its set back to null
        // For every click, when still active
        if (lastActivityTime !== null) {
            const currentTime = new Date().getTime();
            const timeSinceLastActivity = (currentTime - lastActivityTime) / 1000; // Convert to seconds
            totalActiveTime += timeSinceLastActivity;
        }

        // Send update to the server that participant is active
        liveSend({'type': 'participant_active', 'active_time': totalActiveTime});

        // Clear any previous inactivity timer
        clearTimeout(inactivityTimer);
        clearTimeout(exclusionTimer);

        // Track the timestamp of the activity
        lastActivityTime = new Date().getTime();

        setTimeout(function() {
            isActive = false;
            showActivityCheck();
        }, 20000); // Show the button again after 20 seconds

        inactivityTimer = setTimeout(function () {
            setPlayerInactive();
        }, 20000);  // set player inactive if haven't clicked button for 10 seconds after it appeared

        exclusionTimer = setTimeout(function() {
            setPlayerExcluded();
        }, 60000);
    });

    // -------------------------------------------------------------------------------------------------------------- //
    // JavaScript Code For Countdown Ring
    const TIME_LIMIT = 20;
    let timePassed = 0;
    let timeLeft = TIME_LIMIT;
    let timerInterval = null;

    const DEFAULT_THRESHOLD = TIME_LIMIT;
    const WARNING_THRESHOLD = 10;
    const ALERT_THRESHOLD = 5;

    const COLOR_CODES = {
        info: {
            color: "blue",
            threshold: DEFAULT_THRESHOLD
        },
        warning: {
            color: "orange",
            threshold: WARNING_THRESHOLD
        },
        alert: {
            color: "red",
            threshold: ALERT_THRESHOLD
        }
    };

    // JavaScript Functions For Countdown Ring
    function formatTimeLeft(time) {
        const minutes = Math.floor(time / 60);
        let seconds = time % 60;

        if (seconds < 10) {
            seconds = `0${seconds}`;
        }

        return `${minutes}:${seconds}`;
    }

    function calculateTimeFraction() {
        const rawTimeFraction = timeLeft / TIME_LIMIT;
        return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
    }

    function setCircleDasharray() {
        const circleDasharray = `${(calculateTimeFraction() * 283).toFixed(0)} 283`;
        document.getElementById("base-timer-path-remaining").setAttribute("stroke-dasharray", circleDasharray);
    }

    function startTimer() {
        timerInterval = setInterval(() => {
            if (timeLeft <= 0) {
                clearInterval(timerInterval); // Stop the timer when timeLeft is zero or negative
                timeLeft = 0;
            } else {
                timePassed = timePassed += 1;
                timeLeft = TIME_LIMIT - timePassed;
            }

            document.getElementById("base-timer-label").innerHTML = formatTimeLeft(timeLeft);
            setCircleDasharray();
            setRemainingPathColor(timeLeft);
        }, 1000);
    }


    function setRemainingPathColor(timeLeft) {
        const { alert, warning, info } = COLOR_CODES;

        if (timeLeft <= alert.threshold) {
            document.getElementById("base-timer-path-remaining").classList.remove(warning.color);
            document.getElementById("base-timer-path-remaining").classList.add(alert.color);
        } else if (timeLeft <= warning.threshold) {
            document.getElementById("base-timer-path-remaining").classList.remove(info.color);
            document.getElementById("base-timer-path-remaining").classList.add(warning.color);
        } else {
            document.getElementById("base-timer-path-remaining").classList.add(info.color);
        }
    }

    // Dynamics For Countdown Ring
    startTimer();

    // Event listener for the activity button
    document.getElementById("activity-button").addEventListener("click", function() {
        const { alert, warning, info } = COLOR_CODES;

        // Reset timer to 20 seconds
        timePassed = -1;
        timeLeft = TIME_LIMIT;
        clearInterval(timerInterval); // Clear any existing timer interval
        // Reset the color of the circle path
        document.getElementById("base-timer-path-remaining").classList.remove(alert.color);
        document.getElementById("base-timer-path-remaining").classList.remove(warning.color);
        document.getElementById("base-timer-path-remaining").classList.remove(info.color);
        document.getElementById("base-timer-path-remaining").classList.add(info.color);
        startTimer();
    });
</script>

{{ endblock }}