{{ 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>-----</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>-----</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 class="otree-btn-next btn btn-dark btn-primary">Next</button>

<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>.<br>
                    There is no possibility to correct this decision in the future.
                </span>
            </p>
    </div>
</div>


{{ endblock }}

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

    <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 }}
<!-- Creates examples for money produced -->
<script>
    // Get elements
    let money1 = document.getElementById('money1');
    let money2 = document.getElementById('money2');
    let time1 = document.getElementById('time1');
    let time2 = document.getElementById('time2');

    // Round to 2 decimals
    function roundDownToTwoDecimals(number) {
        return number.toFixed(2)
    }
    // Money examples
    function moneyFunction1() {
        let commitmentValue = parseFloat(forminputs.comm_low1.value);
        let text=2 + (commitmentValue * 0.04);
        if (isNaN(text)) {
            money1.textContent = "";
        }
        else {
            money1.textContent = roundDownToTwoDecimals(text);
        }
    }
    function moneyFunction2() {
        let commitmentValue = parseFloat(forminputs.comm_high2.value);
        let text=2 + (commitmentValue * 0.40);
        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);
        }
    }

    // Event listeners
    function click1() {
        moneyFunction1();
        timeFunction1();
    }
    function click2() {
        moneyFunction2();
        timeFunction2();
    }

    // Startup
    function startup() {
        let comm1 = js_vars.comm1;
        let comm2 = js_vars.comm2;

        let money_text1=2 + (comm1 * 0.05);
        let money_text2=2 + (comm2 * 0.50);
        money1.textContent = roundDownToTwoDecimals(money_text1);
        money2.textContent = roundDownToTwoDecimals(money_text2);

        let time_text1=330 + (comm1 * 30);
        let time_text2=330 + (comm2 * 30);
        time1.textContent = secondsToTime(time_text1);
        time2.textContent = secondsToTime(time_text2);
    }
    startup();
    forminputs.comm_low1.oninput = click1;
    forminputs.comm_high2.oninput = click2;
</script>

<!-- Fills options for selections -->
<script>
    // Get elements
    let defaultLow1= js_vars.comm1;
    let defaultHigh2= js_vars.comm2;

    // Auxiliaries
    const fragment1 = document.createDocumentFragment();
    const fragment2 = document.createDocumentFragment();

    // Commitment Low1
        const selectLow1 = document.getElementById('low1');
        for (let i = 5; i <= 50; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i;
            if (i === defaultLow1) {
                option.selected = true;
            }
            fragment1.appendChild(option);
        }
        selectLow1.appendChild(fragment1);

      // Commitment High2
        const selectHigh2 = document.getElementById('high2');
        for (let i = 5; i <= 50; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i;
            if (i === defaultHigh2) {
                option.selected = true;
            }
            fragment2.appendChild(option);
        }
        selectHigh2.appendChild(fragment2);
</script>
{{ endblock }}