{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Your bonus task is {{player.bonusTask}}
{% endblock %}

{% block content %}
{{ formfield_errors 'showVerificationPW' }}
<div class="col-6 d-none">
    <input type="hidden" id="showVerificationPW" name="showVerificationPW" value="false"></input>
</div>

<!--Header-->
<div class="my-3 bg-light px-3 py-3 rounded border">
    
    <div class="row">
        <div class="col">
            <div class="alert alert-info">
                <span id="walkingTaskInfo"></span>
                {{ if costly }}
                Your bonus is £{{payoff}} plus the endowment of £{{endowment}} less the 
                cost for using {{ballName}} balls of £{{decoloringCosts}}. 
                Including the completion fee from Prolific, you receive:
                <h3 class="text-center">
                    £{{payoff}} + £{{endowment}} - £{{decoloringCosts}} + £{{completionFee}} = £{{totalEarnings}} 
                </h3>
                {{ else }}
                Your bonus is £{{payoff}} plus the endowment of £{{endowment}}. 
                Including the completion fee from Prolific, you receive:
                <h3 class="text-center">£{{payoff}} + £{{endowment}} + £{{completionFee}} = £{{totalEarnings}} </h3>
                {{ endif }}
            </div>
        </div>
    </div>

    <!--REACT component-->
    <div class="row mb-3">
        <div class="col-6 offset-3">
            <div class="card" style="min-height: 300px;">
                <div class="card-header bg-dark text-white text-center">
                    Your accumulated earnings
                </div>
                <div class="card-body" 
                    style="height:250px; width: 300px; position:relative; margin: 0 auto;"> 
                    <svg id="lineSVG" style="position:absolute; left:0; top:0; height:100%; width:100%;">
                    </svg>
                    <div class="outcomePanel"></div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-3 d-none" id="verificationInfo">
        <div class="col">
            <p>
                <strong>
                    Remarks on verification
                </strong>
            </p>
            <p>
                As mentioned, if you downloaded Verification.pdf earlier, you can personally verify that your bonus 
                above was determined fairly, exactly as described during the experiment:
            </p>
            <ol>
                <li>
                    The content of your bonus file was not manipulated. </li>
                <li>
                    If your bonus was determined by the outcome(s) of one or several risks, then each outcome was
                    determined fairly, exactly as described during the experiment. </li>
            </ol>
            <p>
                <strong>
                    How verification works exactly is explained in Verification.pdf. </strong>
            </p>

            <p>
                To verify the second point above, you must save the following information: 
            </p>

            <div id="showInput" class="alert alert-warning">
                <table>
                    <colgroup>
                        <col span="1" style="width: 45%;">
                        <col span="1" style="width: 45%;">
                     </colgroup>
                    <tr>
                        <td>
                            The password to your bonus file is:
                        </td>
                        <td> {{password_bonus}}</td>
                    </tr>
                    <tr id="verificationPW">
                        <td>
                            The password to your Verification.pdf is:
                        </td>
                        <td> {{password_verification}}</td>
                    </tr>
                    <tr id="coinTossOutcomes" class="d-none">
                        <td>
                            The coin toss outcomes you entered were:
                        </td>
                        <td id="enteredOutcomes"></td>
                    </tr>
                    <tr id="cardDraw" class="d-none">
                        <td>
                            The cards you drew were:
                        </td>
                        <td id="cardDrawNumbers"></td>
                    </tr>
                    <tr id="stoppingProb" class="d-none">
                        <td>
                            Your stopping probabilities along the taken path were:
                        </td>
                        <td id="stoppingProbPath"></td>
                    </tr>
                    <tr id="continuationPathSec" class="d-none">
                        <td>
                            Your instructions along the taken path were:
                        </td>
                        <td id="continuationPath"></td>
                    </tr>
                </table>
            </div>
            
            <strong>
                Verification is most convenient if you 
                hold this page back-to-back to the verification file and your bonus file.
            </strong>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="alert alert-primary">
                Thank you for participating in this experiment!
            </div>
            
            <button type="button" id="verificationBtn" class="btn btn-primary" onClick="showVerification()">
                Show information for Verification.pdf
            </button>

            <a class="btn btn-primary" 
                class="d-inline"
                href = "https://app.prolific.co/submissions/complete?cc=C1BJGA78"
                >Click
                here to return to Prolific's completion URL</a>
        </div>
    </div>

</div>

<style>
    table.table-bordered {
        border: 1px solid black;
        margin-top: 20px;
    }

    table.table-bordered>thead>tr>th {
        border: 1px solid black;
    }

    table.table-bordered>tbody>tr>td {
        border: 1px solid black;
    }
</style>

<!--Load React Components-->
<script type="text/babel" src="{% static 'js/ballTriangle.js' %}"></script>

<script type="text/babel">
    let type = js_vars.bonusFileData[0]
    let coinTossOutcome = js_vars.player_winningSides.filter(function (v) {return v != null;});
    let realizedPath = js_vars.player_path.filter(function (v) {return v != null;});
    let continuePath = js_vars.continuationDec.filter(function (v) {return v != null;});
    
    let stopIndex = continuePath.indexOf("Stop");
    if (stopIndex !== -1) {
        continuePath[stopIndex] = 0;
    }

    let stopPath = continuePath.map(item => 100 - item)
    
    // Show coin toss outcomes
    document.getElementById("coinTossOutcomes").classList.remove("d-none")
    document.getElementById("enteredOutcomes").innerHTML = `    
        ${coinTossOutcome.slice(0, stopIndex)}
    `
    
    // Write continuation decisions
    if (js_vars.treatment == 0 || js_vars.treatment == 1 || js_vars.treatment == 3){
        let writePath = continuePath.map(elem => elem == 0 ? " Stop" : " Continue")
        document.getElementById("continuationPathSec").classList.remove("d-none")
        document.getElementById("continuationPath").innerHTML = `    
            ${writePath.slice(0, stopIndex + 1)}
        `
    } else if (js_vars.treatment == 2 || js_vars.treatment == 4) {
        let writePath = js_vars.stopPath.map(elem => elem == 3000 ? "" : 100 - elem)
        document.getElementById("stoppingProb").classList.remove("d-none")
        document.getElementById("stoppingProbPath").innerHTML = `    
            ${writePath.slice(0, stopIndex + 1)}
        `

        let writeCards = js_vars.drawnCards.map(elem => elem == -1 ? "" : elem)
        // Show chosen cards
        document.getElementById("cardDraw").classList.remove("d-none")
        document.getElementById("cardDrawNumbers").innerHTML = `
            ${writeCards.slice(0, stopIndex + 1)}
        `
    }
    

    function showVerification() {
        document.getElementById("showVerificationPW").value = "True"
        document.getElementById("verificationInfo").classList.remove("d-none")
        document.getElementById("verificationBtn").classList.add("d-none")
    }

    function voidFunction () {
        return
    }

    ReactDOM.render(<DecisionTree
        upTick = {js_vars.upTick} 
        isClicked={js_vars.stoppingStrat.isClicked} 
        drawn={js_vars.player_path}
        continuation={js_vars.stoppingStrat.continuation}
        initialColor = {js_vars.initialColor}
        currentRound = {5}
        continuationDec = {js_vars.continuationDec}
        pulse = {false}
        ClickHandler = {() => voidFunction()}
        mouseEnter = {() => voidFunction()}
        mouseLeave = {() => voidFunction()}

    />, document.querySelector('.outcomePanel'))

    if (type[0]=="walking") {
        document.getElementById("walkingTaskInfo").innerHTML= `
            {{player.bonusTask}} is in your bonus file and 
            your instructions for {{player.bonusTask}} are 
            shown below.`
    }
</script>

{% endblock %}