{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block scripts %}
<script language="JavaScript">

    document.getElementById("p1_local_weight").addEventListener('input', totalcalc);
    document.getElementById("p1_state_weight").addEventListener('input', totalcalc);
    document.getElementById("p1_national_weight").addEventListener('input', totalcalc);
    document.getElementById("p1_dollars_kept").addEventListener('input', dollarcalc);
    document.getElementById("p1_dollars_invested").addEventListener('input', dollarcalc);

    var sec = 0;

    var timer = setInterval(function () {
    document.getElementById("p1_decision_time").value = ((sec+=100)/1000);}, 100);

    function checkwork(autosubmit){

        var checkflag = 0;
        var dollarskept = Number(document.getElementById("form").elements["p1_dollars_kept"].value);
        var dollarsinvested = Number(document.getElementById("form").elements["p1_dollars_invested"].value);
        var totaldollars = dollarskept + dollarsinvested;

        if (dollarskept < 0 || dollarsinvested < 0) {
            checkflag = 1;
            alert("Please use positive numbers only.");
        } else if (totaldollars > 6) {
            checkflag = 1;
            alert("Your total budget use must add up to $6.00");
        } else if (totaldollars < 6) {
            checkflag = 1;
            alert("Your total budget use must add up to $6.00.");
        }

        if (dollarsinvested > 0) {
            var localweight = Number(document.getElementById("form").elements["p1_local_weight"].value);
            var stateweight = Number(document.getElementById("form").elements["p1_state_weight"].value);
            var nationalweight = Number(document.getElementById("form").elements["p1_national_weight"].value);
            var totalweight = localweight + stateweight + nationalweight;

            if (totalweight > 100) {
                checkflag = 1;
                alert("The total weighting of your investment in projects must add up to 100%");
            } else if (totalweight < 100) {
                checkflag = 1;
                alert("The total weighting of your investment in projects must add up to 100%");
            }

        }

        if (checkflag == 0) {
            document.getElementById("form").submit();
        }

    }


    function totalcalc() {
        //alert("Hi");
        var dollarsinvested = Number(document.getElementById("form").elements["p1_dollars_invested"].value);

        if (dollarsinvested == 0) {
            document.getElementById("form").elements["p1_local_weight"].value = 0;
            document.getElementById("form").elements["p1_state_weight"].value = 0;
            document.getElementById("form").elements["p1_national_weight"].value = 0;
            alert("You are not currently investing in socially responsible projects. Please update your investment amount to > $0.00 first if you wish to allocate that investment to projects.")
        } else {

            var localweight = Number(document.getElementById("form").elements["p1_local_weight"].value);
            var stateweight = Number(document.getElementById("form").elements["p1_state_weight"].value);
            var nationalweight = Number(document.getElementById("form").elements["p1_national_weight"].value);

            var totalw = localweight + stateweight + nationalweight;

            document.getElementById("form").elements["total_weight"].value = totalw;

            if (totalw == 100) {
                var impactscore = (localweight / 100 * 2) + (stateweight / 100 * 3) + (nationalweight / 100 * 6);
                document.getElementById("form").elements["impact_score"].value = impactscore.toFixed(1);
            }
        }
    }

    function dollarcalc() {
        var dollarskept = Number(document.getElementById("form").elements["p1_dollars_kept"].value);
        var dollarsinvested = Number(document.getElementById("form").elements["p1_dollars_invested"].value);
        var totaldollars = dollarskept + dollarsinvested;
        document.getElementById("form").elements["total_dollars"].value = totaldollars.toFixed(2);
    }



</script>
{% endblock %}

{% block title %}
    Performance Period #1
{% endblock %}

{% block content %}


    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; }
        .tabmarg {margin-left: 80px}
        tr, td { padding: 5px; vertical-align: top; }
    </STYLE>
    <hr>
    <p>
        This is performance period #1 of 4. <b>As a reminder, your compensation and any payments to charity generated by your decisions will be based on one randomly-selected period.</b>
    </p>

    <p>
        You have a $6.00 discretionary budget. You may invest any amount from $0.00-$6.00 in the socially responsible projects shown below.
    </p>

    <div class="indented">
        <table class="indented" width="80%" border="1">
        <tbody>
            <tr>
                <td><b>Project</b></td>
                <td><b>Potential Social <br>Impact Score</b></td>
                <td><b>Probability of Success</b></td>
            </tr>
            <tr>
                <td>National</td>
                <td>6</td>
                <td>1/3 chance of success; 2/3 chance of failure</td>
            </tr>
            <tr>
                <td>State</td>
                <td>3</td>
                <td>2/3 chance of success; 1/3 chance of failure</td>
            </tr>
            <tr>
                <td>Local</td>
                <td>2</td>
                <td>3/3 chance of success; 0 chance of failure</td>
            </tr>
        </tbody>
        </table>
    </div>

    <hr>
    <p>
        Please indicate how much of your discretionary budget you would like to keep or invest in socially responsible projects. Please enter dollars and cents, i.e. 1.25, 2.50, 4.00, and so on.
        Your total must add up to $6.00.
    </p>

    <div class="indented">
        <table width="65%" border="1">
        <tbody>
            <tr>
                <td align="right" valign="top" width="25%">$ &nbsp;<input type="text" id="p1_dollars_kept" name="p1_dollars_kept" maxlength="4" size="4" value="0.00"></td>
                <td align="left">Keep&nbsp;&nbsp;&nbsp;</td>
            </tr>

            <tr>
                <td align="right" valign="top" width="25%">$ &nbsp;<input type="text" id="p1_dollars_invested" name="p1_dollars_invested" maxlength="4" size="4" value="0.00"></td>
                <td align="left">Invest in Socially Responsible Projects&nbsp;&nbsp;&nbsp;</td>
            </tr>

            <tr>
                <td align="right" valign="top" width="25%">$ &nbsp;<input type="text"  disabled id="total_dollars" name="total_dollars" maxlength="4" size="4" value="0.00"></td>
                <td align="left">Total&nbsp;&nbsp;&nbsp;</td>
            </tr>

        </tbody>
        </table>
    </div>
    <br>
    <p>
        If you chose to invest in socially responsible projects, please indicate how you would like to allocate that investment among the following projects. Please use whole numbers, i.e. 30, 60, and so on.
        Your total percentage must add up to 100%.
    </p>

    <div class="indented">
        <table class="indented" width="70%" border="1">
        <tbody>
            <tr>
                <td>Project</td>
                <td>Potential Social Impact Score</td>
                <td>% Weighting</td>
            </tr>
            <tr>
                <td>National</td>
                <td>6</td>
                <td align="left" valign="top"><input type="text" id="p1_national_weight" name="p1_national_weight" maxlength="3" size="3" value="0">&nbsp;%</td>
            </tr>
            <tr>
                <td>State</td>
                <td>3</td>
                <td align="left" valign="top"><input type="text" id="p1_state_weight" name="p1_state_weight" maxlength="3" size="3" value="0">&nbsp;%</td>
            </tr>
            <tr>
                <td>Local</td>
                <td>2</td>
                <td align="left" valign="top"><input type="text" id="p1_local_weight" name="p1_local_weight" maxlength="3" size="3" value="0">&nbsp;%</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td align="right">Total:&nbsp;</td>
                <td align="left" valign="top"><input type="text"  disabled id="total_weight" name="total_weight" maxlength="3" size="3" value="0">&nbsp;%</td>
            </tr>
            <tr>
                <td colspan="3">&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td colspan="3">Average Impact Score (Weighted average of social impact score of socially responsible projects in which you are investing):
                    &nbsp;&nbsp;<input type="text"  disabled id="impact_score" name="impact_score" maxlength="3" size="3" value="0.0">
            </tr>

        </tbody>
        </table>
    </div>

    <hr>
    <p>
        When you are ready, click "Next" to continue.
    </p>


    <button type="button" class="btn btn-primary" onclick="checkwork(0)">Next</button>
    <input type="hidden" id="p1_decision_time" name="p1_decision_time">

    <hr>


{% endblock %}