{{ block title }}
Scenario #{{ round }} out of 25
{{ endblock }}

{{ block content }}
<br>
<p>
In this scenario:
</p>
<div class="card" style="background-color: #e6e6e6">
    <div class="card-body">
    {{ if reason == 0 }}
        <p>
        Both Agents participated in letter-to-numbers conversions.    
        </p>
        <p>
        Agent A has <b>more correct answers</b>.
        <br>
        Agent B has <b>fewer correct answers</b>.
        </p>
    {{ elif reason == 1 }}
        <p>
        Both Agents participated in the lottery.    
        </p>
        <p>
        Agent A has the <b>higher lottery number</b>.
        <br>
        Agent B has the <b>lower lottery number</b>.
        </p>
    {{ endif }}
    </div>
</div>
<br>

<div class="d-flex flex-column align-items-center">    
<h5>How would you split the 6 USD bonus?</h5>
<table>
    <tr class="title-row-upper">
        <td class='column2title'><img src="https://i.imgur.com/xehibP6.jpg" width="100"/></td>
        <td class='column3title'><img src="https://i.imgur.com/QYo5uBb.jpg" width="100"/></td>
        <td class='column4title'></td>
    </tr>
    <tr>
        <td class='column2title'><b>Agent {{ agent0 }}</b></td>
        <td class='column3title'><b>Agent {{ agent1 }}</b></td> 
        <td></td>       
    </tr>
    <tr class="title-row-lower">
        {{ if reason == 0 }}
        <td class="column2">More correct answers</td>
        <td class="column3">Fewer correct answers</td>
        {{ elif reason == 1 }}
        <td class="column2">Higher lottery number</td>
        <td class="column3">Lower lottery number</td>
        {{ endif }}
        <td></td>
    </tr>
    <tr class="gray-row">
        <td colspan="3">&nbsp;</td>
    </tr>
    <tr class="bottom-row">
        <td><input name='game_alloc0' id=agenta class="short-input" type="number" min="0" max="6" step=".01" oninput="let val = this.value; if (val.includes('.')) { let parts = val.split('.'); if (parts[0].length > 1) parts[0] = parts[0].slice(-1); if (parts[1] && parts[1].length > 1) parts[1] = parts[1].slice(0, 1); this.value = parts.join('.'); } else if (val.length > 1) { this.value = val.slice(-1); }"></td>
        <td><input name='game_alloc1' id=agentb class="short-input" type="number" min="0" max="6" step=".01" oninput="let val = this.value; if (val.includes('.')) { let parts = val.split('.'); if (parts[0].length > 1) parts[0] = parts[0].slice(-1); if (parts[1] && parts[1].length > 1) parts[1] = parts[1].slice(0, 1); this.value = parts.join('.'); } else if (val.length > 1) { this.value = val.slice(-1); }"></td>
        <td><b>Total: </b><span id="sum" class="invalid">0</span> USD</td>
    </tr>
    <tr>
        <td style="height: 25px">
            <input type="hidden" name="time_firstA" id="time_firstA"/>
            <input type="hidden" name="time_lastA" id="time_lastA"/>
            <input type="hidden" name="time_firstB" id="time_firstB"/>
            <input type="hidden" name="time_lastB" id="time_lastB"/>
        </td>
    </tr>
    <tr>
        <td> </td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td style="text-align: center"><button id='next' class="otree-btn-next btn btn-dark btn-primary"><span id='time'>Decide</span></button></td>
    </tr>
</table>
</div>

{{ include C.spectator_instructions }}

{{ endblock }}

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

    <style>
        /*Table*/
        table {margin: 0 auto}
        td {vertical-align: middle;}
        .column1 {width: 200px;}
        .column2 {width: 200px; text-align: center}
        .column2title {width: 200px; text-align: center}
        .column3 {width: 200px; text-align: center}
        .column3title {width: 200px; text-align: center}
        .column4title {width: 150px;}
        .title-row-upper td {border-top: 2px solid black; padding-top: 10px}
        .title-row-lower td {border-bottom: 2px solid black; padding-bottom: 10px}
        .bottom-row td {border-bottom: 2px solid black; padding-bottom: 10px; text-align: center}
        tr.gray-row {color: gray; font-size: 5px}

        /*Input*/
        .short-input {
            width: 100px; 
            text-align: center; 
            padding: 5px; 
        }
        /*https://www.accountingexperiments.com/post/sliders/*/    
        /*Button*/
        .btn {width: 150px;}

        #sum {
        font-weight: bold;
        }
        .valid {
        color: green;
        }
        .invalid {
        color: red;
        }
    </style>
{{ endblock }}

{{ block scripts }}
    <script>
        // Sum
        const inputs = [
            document.getElementById('agenta'),
            document.getElementById('agentb'),
        ];
        const sumDisplay = document.getElementById('sum');
        
        // Timer
        const time = document.getElementById('time');
        const next = document.getElementById('next');
        let countdown;
        let seconds = 20;

        // Functions
        function updateSum() {
            const sum = inputs.reduce((acc, input) => acc + Number(input.value), 0);
            sumDisplay.textContent = sum;
            sumDisplay.className = (sum === 6) ? 'valid' : 'invalid';
            next.disabled = (seconds < 0 && sum === 6) ? false : true;
            next.style.backgroundColor = (seconds < 0 && sum === 6) ? '#000000' : '#969696';
        }

        inputs.forEach(input => input.addEventListener('input', updateSum));

        function updateDisplay() {
            if (seconds % 5 === 0) {
                time.textContent = 'Wait ' + seconds + "'";
            }
        }

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

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

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

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

        function updateButton() {
            const sum = inputs.reduce((acc, input) => acc + Number(input.value), 0);
            next.style.color = 'white';
            next.disabled = (sum === 6) ? false : true;
            next.style.backgroundColor = (sum === 6) ? '#000000' : '#969696';
        }
        
        // Automatically start countdown when the page loads
        initialButton();
        startCountdown();
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const inputA = document.getElementById('agenta');
            const inputB = document.getElementById('agentb');
            let firstA = null;
            let lastA = null;
            let firstB = null;
            let lastB = null;

            inputA.addEventListener('input', (event) => {
                const nowA = Date.now()/1000;

                if (firstA === null) {
                    firstA = nowA;
                }

                lastA = nowA;
            });
            inputB.addEventListener('input', (event) => {
                const nowB = Date.now()/1000;

                if (firstB === null) {
                    firstB = nowB;
                }

                lastB = nowB;
            });

            document.getElementById('next').addEventListener('click', () => {
                document.getElementById('time_firstA').value = firstA;
                document.getElementById('time_lastA').value = lastA;
                document.getElementById('time_firstB').value = firstB;
                document.getElementById('time_lastB').value = lastB;
            });
        });
    </script>
{{ endblock }}