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

{% block scripts %}

<script language="JavaScript">
    var sec = 0;

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

    function captureProject() {
        document.getElementById("form").elements["implemented_project_1"].value = $("input:radio[name={{ comparison }}]:checked").val();
    }

    function checkwork(autosubmit){

     if ($('input[type=radio]:checked').length > 0) {
         document.getElementById("form").submit();
     } else {
         alert("Please choose either Project A or Project B to implement in your division.");
     }


    }
</script>

{% endblock %}

{% block title %}
    Project Selection
{% endblock %}

{% block content %}


    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; }
        .tabmarg {margin-left: 80px}

    </STYLE>

    <hr>
    <br>
    <p>
        Please consider the following projects. Indicate which project you want to implement by clicking the button below the project you prefer, and then clicking "Next."
    </p>
    <br>
        <table width="70%" border="0">
        <tbody>
            <tr>
                <td align="center" width="45%"><b>Project A</b></td>
                <td width="10%">&nbsp;</td>
                <td align="center" width="45%"><b>Project B</b></td>
            </tr>
            <tr>
                <td align="center">
                    <table border="1" cellpadding="10" cellspacing="5">
                        <tr bgcolor="#d3d3d3">
                            <td align="center">Project Net Income</td>
                            <td align="center">Likelihood</td>
                        </tr>
                        {% for ProjectDisplay in project_a %}
                        <tr>
                            <td align="center">{{ ProjectDisplay.first_outcome }}</td>
                            <td align="center">{{ ProjectDisplay.first_odds }}%</td>
                        </tr>
                        <tr>
                            <td align="center">{{ ProjectDisplay.second_outcome }}</td>
                            <td align="center">{{ ProjectDisplay.second_odds }}%</td>
                        </tr>
                        {% endfor %}
                    </table>
                </td>
                <td>&nbsp;</td>
                <td align="center">
                    <table border="1" cellpadding="10" cellspacing="5">
                        <tr bgcolor="#d3d3d3">
                            <td align="center">Project Net Income</td>
                            <td align="center">Likelihood</td>
                        </tr>
                        {% for ProjectDisplay in project_b %}
                        <tr>
                            <td align="center">{{ ProjectDisplay.first_outcome }}</td>
                            <td align="center">{{ ProjectDisplay.first_odds }}%</td>
                        </tr>
                        <tr>
                            <td align="center">{{ ProjectDisplay.second_outcome }}</td>
                            <td align="center">{{ ProjectDisplay.second_odds }}%</td>
                        </tr>
                        {% endfor %}
                    </table>
                </td>
            </tr>



            <tr>
                <td align="center"><input type="radio" name="{{ comparison }}" value="{{ first }}" required onclick="captureProject()"> </td>
                <td>&nbsp;</td>
                <td align="center"><input type="radio" name="{{ comparison }}" value="{{ second }}" required onclick="captureProject()"> </td>
            </tr>

        </tbody>
        </table>

    <br>
    <br>
    <p>
        <button type="button" class="btn btn-primary" onclick="checkwork(0)">Next</button>
    </p>
    <br>
    <hr>
    <p>
        <table width="100%" border="0">
        <tbody>
            <tr>
                <td align="center">For reference, your bonus compensation will be determined in the following manner:</td>

            </tr>
            <tr>
                <td align="center">Division Profit = Project Net Income - Allocated Common Costs</td>
            </tr>
            <tr>
                <td align="center"><img src="{% static "cost_allocation_task/bonus_schedule.jpg" %}"/></td>
            </tr>
        </tbody>
        </table>
    </p>

    <input type="hidden" id="{{ comparison_a }}" name="{{ comparison_a }}" value="{{first}}">

    <input type="hidden" id="{{comparison}}_time" name="{{comparison}}_time">
    <input type="hidden" id="implemented_project_1" name="implemented_project_1">



{% endblock %}