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

{% block title %}
    Round {{ round_number }}
{% endblock %}

{% block content %}

    <div style="float: left;width: 400px">
        <b>
            <p id="pcost"></p>
            <p id="pfee"></p>
            <p id="pbudget"></p>
            <p>Fixed payment: 3,500</p>
        </b>
        <button type="button" class="btn btn-primary btn-large" onclick="displayResults()">Results in Previous Rounds
        </button>
    </div>
    <div style="display: inline-block">
        <label for="bid_input">Your Bid Amount</label>
        <br>
        <input type="number" name="p_int_bid" id="bid_input" value="" style="width:70px" oninput="changeValue()">
        <br>
        <br>
        <span><b>Potential Outcomes</b></span>
        <table>
            <tr>
                <td style="border:1px solid black;">

                    <label for="bid_accept">If your bid is accepted, your total round earnings will be</label>
                    <input type="number" id="bid_accept" style="background-color: #EEEEEE; width:70px" disabled>
                    <br>
                    <label for="bid_reject">If your bid is rejected, your total round earnings will be</label>
                    <input type="number" id="bid_reject" style="background-color: #EEEEEE; width:70px" disabled>
                    <br>
                </td>
            </tr>
        </table>
        <br>
        <p><b>Do you wish to submit your bid for $<input type="number" id="bid_submit_input"
                                                         style="background-color: #EEEEEE; width:70px" disabled>?</b>
        </p>
        <div>
            <button name="p_bool_bid" value="True" class="btn btn-primary btn-large">Yes, I want to submit this bid
            </button>
            <br>
            <br>
            <button name="p_bool_bid" value="False" class="btn btn-primary btn-large"
                    onclick="bid_input.hidden=true;bid_input.min=-1;bid_input.value=-1">No, I do not want to submit a
                bid
            </button>
            <br>
            <br>
        </div>
    </div>

    <div id="resultsTable" hidden="true">
        <br>
        <table style="width:100%">
            <caption style="color: black; caption-side:top; text-align:center"><b>Results from previous rounds</b></caption>
            <tr>
                <th>Round</th>
                <th>Your Bid Amount</th>
                <th>Your Project Cost</th>
                <th>Bid Submission Fee</th>
                <th>Fixed Payment</th>
                <th>Program Budget</th>
                <th>Bid Accepted</th>
                <th>Total Round Earnings</th>
            </tr>
            {% for p in player.in_previous_rounds %}
                {% if p.p_bool_bid %}
                    <tr>
                        <td>{{ round_number }}</td>
                        <td>{{ p.p_int_bid }}</td>
                        <td>{{ p.p_int_project_cost }}</td>
                        <td>{{ p.group.g_int_submission_fee }}</td>
                        <td>{{ p.group.g_int_general_earnings }}</td>
                        <td>{{ p.group.g_int_budget }}</td>
                        {% if p.p_bool_bid_accepted %}
                            <td>Yes</td>
                        {% else %}
                            <td>No</td>
                        {% endif %}
                        <td>{{ p.p_int_round_earnings }}</td>
                    </tr>
                {% else %}
                    <tr>
                        <td>{{ round_number }}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>{{ p.group.g_int_general_earnings }}</td>
                        <td>{{ p.group.g_int_budget }}</td>
                        <td></td>
                        <td>{{ p.p_int_round_earnings }}</td>
                    </tr>
                {% endif %}
            {% endfor %}
        </table>
    </div>

{% endblock %}

{% block scripts %}
    <script>
        var trigger = true;

        function displayResults() {
            trigger = !trigger;
            document.getElementById("resultsTable").hidden = trigger;
        }

        function changeValue() {
            document.getElementById("bid_accept").value = (parseInt(document.getElementById("bid_input").value) + {{ group.g_int_general_earnings|json }})
                - ({{ group.g_int_submission_fee|json }} + {{ player.p_int_project_cost|json }});
            document.getElementById("bid_reject").value = {{ group.g_int_general_earnings|json }} - {{ group.g_int_submission_fee|json }};
            document.getElementById("bid_submit_input").value = document.getElementById("bid_input").value;
        }

        document.getElementById("bid_input").min = {{ player.p_int_project_cost|json }};
        document.getElementById("bid_input").max = {{ group.g_int_budget|json }};
        document.getElementById("pcost").innerHTML = "Your Project Cost: " + Number({{ player.p_int_project_cost|json }}).toLocaleString('en');
        document.getElementById("pfee").innerHTML = "Bid Submission Fee: " + Number({{ group.g_int_submission_fee|json }}).toLocaleString('en');
        document.getElementById("pbudget").innerHTML = "Program Budget: " + Number({{ group.g_int_budget|json }}).toLocaleString('en');
    </script>
{% endblock %}

{% block styles %}

    <style type="text/css">
        table {
            border-collapse: collapse;
        }

        table, th, td {
            border: 1px solid black;
        }
    </style>

{% endblock %}