{{ block title }}
Verify your commitments
{{ endblock }}

{{ block content }}

{% load otree static %}
<link rel="stylesheet" href="{% static 'global/style.css' %}"/>

<br>
<div class="card">
    <div class="card-header">
        If the lottery draws <b>5 cents (~ 0.06 USD)</b>:
    </div>
    <div class="card-body">
        You have commited to complete <u><span id="comm1">{{ comm1 }}</span> encryptions</u>. <br>
        You will produce <span id="gbp1"></span> GBP (~ <span id="usd1"></span> USD). <br>
        <span style="color: crimson">Expected duration of the task is <span id="time1"></span>.</span>
    </div>
</div>
<br>

<div class="card">
    <div class="card-header">
        If the lottery draws <b>50 cents (~ 0.60 USD)</b>:
    </div>
    <div class="card-body">
        You have commited to complete <u><span id="comm2">{{ comm2 }}</span> encryptions</u>. <br>
        You will produce <span id="gbp2"></span> GBP (~ <span id="usd2"></span> USD). <br>
        <span style="color: crimson">Expected duration of the task is <span id="time2"></span>.</span>
    </div>
</div>
<br>
<br>

<div style="text-align: center">
    <p>
        <b>Take your time to verify</b>
    </p>
    <p>
        You can take the time you want to verify your commitments. <br>
        You can proceed after a minimum of 10 seconds.
    </p>
    <br>
    <div id="hiddenbox">
        <button id='next' name="redo" value="False" class="btn btn-green" style="width: 300px"><span id="time">Can click in 30 seconds</span></button>
        <button name="redo" value="True" class="btn btn-red" style="width: 300px">Revise submission</button>
    </div>
</div>
{{ endblock }}

{{ block styles }}
<style>
    .btn-green {
        background-color: #008C3C;
        color: white;
        width: 75px;
    }
    .btn-green:hover {
        background-color: #008C3C;
        color: white;
    }
    .btn-red {
        background-color: #E53935;
        color: white;
        width: 75px;
    }
    .btn-red:hover {
        background-color: #E53935;
        color: white;
    }
</style>
{{ endblock }}

{{ block scripts }}
<!-- Countdown -->
<script>
    const time = document.getElementById('time');
    const next = document.getElementById('next');
    const hiddenbox = document.getElementById('hiddenbox');
    let countdown;
    let seconds = 10;

    function updateDisplay() {
        if (seconds % 5 == 0) {
            time.textContent = 'Can click in '+ seconds+ ' seconds';
        }
    }

    function startCountdown() {
        if (countdown) {
            clearInterval(countdown);
        }

        countdown = setInterval(function () {
            seconds--;

            if (seconds < 0) {
                clearInterval(countdown);
                time.textContent = 'Confirm submission';
                updateButton();
            }
            else {
                updateDisplay();
            }
        }, 1000);
    }

    function initialButton() {
        next.style.backgroundColor = 'darkgrey';
        next.style.color = 'white';
        next.disabled = true;
        hiddenbox.style.display = 'none';
    }

    function updateButton() {
        next.style.backgroundColor = '#008C3C';
        next.style.color = 'white';
        next.disabled = false;
        hiddenbox.style.display = 'block';
    }
    // Automatically start countdown when the page loads
    initialButton();
    startCountdown();
</script>

<!-- Creates examples for money produced -->
<script>
    let comm1 = document.getElementById('comm1');
    let comm2 = document.getElementById('comm2');
    let gbp1 = document.getElementById('gbp1');
    let gbp2 = document.getElementById('gbp2');
    let usd1 = document.getElementById('usd1');
    let usd2 = document.getElementById('usd2');
    let time1 = document.getElementById('time1');
    let time2 = document.getElementById('time2');

    function roundDownToTwoDecimals(number) {
        return number.toFixed(2)
    }
    function secondsToTime(seconds) {
        const minutes = Math.floor(seconds / 60);
        const secondsRemainder = seconds % 60;
        const formattedTime = `${minutes}:${secondsRemainder < 10 ? '0' : ''}${secondsRemainder}`;
        return formattedTime;
    }

    function Function1() {
        let commitmentValue = parseFloat(comm1.textContent);
        let money=2 + (commitmentValue * 0.05);
        gbp1.textContent = roundDownToTwoDecimals(money);
        let dollar=money * 1.2;
        usd1.textContent = roundDownToTwoDecimals(dollar);

        let time=330 + (commitmentValue * 30);
        time1.textContent = secondsToTime(time);
    }
    function Function2() {
        let commitmentValue = parseFloat(comm2.textContent);
        let money=2 + (commitmentValue * 0.50);
        gbp2.textContent = roundDownToTwoDecimals(money);
        let dollar=money * 1.2;
        usd2.textContent = roundDownToTwoDecimals(dollar);

        let time=330 + (commitmentValue * 30);
        time2.textContent = secondsToTime(time);
    }

    document.addEventListener('DOMContentLoaded', function() {
        Function1();
        Function2();
    });
</script>
{{ endblock }}