{{ block title }}
Commitment
{{ endblock }}

{{ block content }}
<b>How many encryptions you are doing for each piece-rate?</b>
<div class="table-container">
<table>
    <tr class="title-row1">
        <td class="column1"></td>
        <td class="column2"></td>
        <td colspan="2" style="text-align: center; border-bottom: 2px solid black;padding-top: 0px"><i>Examples</i></td>
    </tr>
    <tr class="title-row2">
        <td class="column1"><b>Piece-rate</b></td>
        <td class="column2"><b>Commitment</b></td>
        <td class="column3"><i>£ produced (GBP)</i></td>
        <td class="column4"><i>duration (min:sec)</i></td>
    </tr>
    <tr>
        <td class="column1">5 cents (~0.06 USD)</td>
        <td class="column2"><select id="low1" name="comm_low1" style="width=100px"><option selected>-----</option></select></td>
        <td class="column3"><b><span id="money1"></span></b></td>
        <td class="column4"><b><span id="time1"></span></b></td>
    </tr>
    <tr class="bottom-row">
        <td class="column1">50 cents (~0.60 USD)</td>
        <td class="column2"><select id="high2" name="comm_high2" style="width=100px"><option selected>-----</option></select></td>
        <td class="column3"><b><span id="money2"></span></b></td>
        <td class="column4"><b><span id="time2"></span></b></td>
    </tr>
</table>
</div>
<br>
<br>

<button id='next' class="otree-btn-next btn btn-dark btn-primary">Next</button>&nbsp;&nbsp;
<span id="time">Please submit your commitments.</span><br>


<br>
<br>
<div class="card">
    <div class="card-body" style="text-align: justify">
        <span style="font-size: 16px;"><b>Consider carefully how many tasks you are willing to do!</b></span>
            <p>
                <span style="font-size: 16px;">
                    As you choose how many tasks you want to commit to,
                    the table above will show you how much you will produce and the expected time of completion.
                    Remember: <u>you will only get paid if you follow through your commitment</u>.
                </span>
            </p>
    </div>
</div>

{{ if DEBUG }}
<br>
<br>
<div class="card">
    <div class="card-header" style="font-size: 24px; color: #005EB8; background-color: hotpink; text-align: center"><b>DEBUG OPTIONS:</b></div>
    <div class="card-body" style="font-size: 16px; background-color: lightpink; text-align: center">
    <button class="otree-btn-next btn btn-dark btn-primary">Next</button>
    </div>
</div>

{{ endif }}

{{ endblock }}

{{ block style }}
    <link href="{% static 'trial/trial.css' %}" rel="stylesheet"/>
    <style>
        .table-container {
            max-width: 100%;
            overflow-x: auto;
        }

        .table-container table {
            max-width: 100%;
        }
        td {vertical-align: middle;}
        .column1 {width: 250px; text-align: left;}
        .column2 {width: 175px; text-align: left;}
        .column3 {width: 150px; text-align: center; color: #008C3C}
        .column4 {width: 150px; text-align: center; color: crimson}
        .title-row1 td {border-top: 2px solid black;padding-top: 10px}
        .title-row2 td {border-bottom: 2px solid black;padding-bottom: 10px}
        .bottom-row td {border-bottom: 2px solid black;padding-bottom: 10px;}
    </style>
{{ endblock }}

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

    function updateDisplay() {
        if (seconds % 5 === 0) {
            time.textContent = 'Please revise your commitments. You can click "Next" in ' + seconds + ' seconds.';
        }
    }

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

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

            if (seconds < 0) {
                clearInterval(countdown);
                time.textContent = 'You can click "Next"!';
                updateButton();
            }
            else {
                updateDisplay();
            }
        }, 1000);
    }

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

    function updateButton() {
        next.style.backgroundColor = 'black';
        next.style.color = 'white';
        next.disabled = false;
    }

    // Start countdown when all commitments stated
    initialButton();
    $('select[name=comm_low1]').on('change', function(){
        input1 = true;
        if (input1 && input2) {
            startCountdown();
            if (seconds == 20) {
                time.textContent = 'Please revise your commitments. You can click "Next" in ' + seconds + ' seconds.';
            }
        }
    });
    $('select[name=comm_high2]').on('change', function(){
        input2 = true;
        if (input1 && input2) {
            startCountdown();
            if (seconds == 20) {
                time.textContent = 'Please revise your commitments. You can click "Next" in ' + seconds + ' seconds.';
            }
        }
    });
</script>
<script>
    let money1 = document.getElementById('money1');
    let money2 = document.getElementById('money2');
    let time1 = document.getElementById('time1');
    let time2 = document.getElementById('time2');

    function roundDownToTwoDecimals(number) {
        return number.toFixed(2)
    }
    // Money examples
    function moneyFunction1() {
        let commitmentValue = parseFloat(forminputs.comm_low1.value);
        let text=2 + (commitmentValue * 0.05);
        if (isNaN(text)) {
            money1.textContent = "";
        }
        else {
            money1.textContent = roundDownToTwoDecimals(text);
        }
    }
    function moneyFunction2() {
        let commitmentValue = parseFloat(forminputs.comm_high2.value);
        let text=2 + (commitmentValue * 0.50);
        if (isNaN(text)) {
            money2.textContent = "";
        }
        else {
            money2.textContent = roundDownToTwoDecimals(text);
        }
    }

    // Time function: translates seconds to minutes:seconds
    function secondsToTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const secondsRemainder = seconds % 60;
      const formattedTime = `${minutes}:${secondsRemainder < 10 ? '0' : ''}${secondsRemainder}`;
      return formattedTime;
    }
    // Time examples
    function timeFunction1() {
        let commitmentValue = parseFloat(forminputs.comm_low1.value);
        let text=330 + (commitmentValue * 30);
        if (isNaN(text)) {
            time1.textContent = "";
        }
        else {
            time1.textContent = secondsToTime(text);
        }

    }
    function timeFunction2() {
        let commitmentValue = parseFloat(forminputs.comm_high2.value);
        let text=330 + (commitmentValue * 30);
        if (isNaN(text)) {
            time2.textContent = "";
        }
        else {
            time2.textContent = secondsToTime(text);
        }
    }
    function click1() {
        moneyFunction1();
        timeFunction1();
    }
    function click2() {
        moneyFunction2();
        timeFunction2();
    }

    forminputs.comm_low1.oninput = click1;
    forminputs.comm_high2.oninput = click2;
</script>

<!-- Fills options for selections -->
<script>
	// Get the select element by its ID
    const selectLow1 = document.getElementById('low1');

    // Loop to generate options from 5 to 50
    for (let i = 5; i <= 50; i++) {
	    // Create a new option element
	    const option = document.createElement('option');

	    // Set the value and label of the option
	    option.value = i;
	    option.textContent = i;

	    // Add the option to the select list
	    selectLow1.appendChild(option);
    }

    // Get the select element by its ID
    const selectHigh2 = document.getElementById('high2');

    // Loop to generate options from 5 to 50
    for (let i = 5; i <= 50; i++) {
	    // Create a new option element
	    const option = document.createElement('option');

	    // Set the value and label of the option
	    option.value = i;
	    option.textContent = i;

	    // Add the option to the select list
	    selectHigh2.appendChild(option);
    }
</script>
{{ endblock }}