{{ block title }}
    Bid for Good
{{ endblock }}
{{ block content }}
    <div id="make_offer" style="display: none"> <!-- state when subject makes an offer; initially hidden -->

        You have an endowment of {{ Constants.endownment }} <br>
        Please make an offer for the good <br>
        <input id="make_offer_input">
        <button type="button" onclick="make_offer()"></button> 
    
    </div> 

    <div id="wait_for_offer" style="display: none">  <!-- displayed when it's the others particpants turn to make an offer; initially hidden -->
        Please wait for an offer!
    </div>
    
    <div if="wait_for_response" style="display: none"> <!-- displayed when particiapnt is waiting for response; initially hidden -->
        Please wait for a response to your offer
    </div>

    <div id="respond_offer" style="display: none"> <!-- state when subject recieves offer and has to respond to it; initially hidden -->
        You are offered <span id="current_offer"></span>
        <button type="button" onclick="accept_offer()"> Accept Offer</button>
        <button type="button" onclick="reject_offer()"> Reject Offer</button>
    </div>

    <input type="hidden" id="money_after_trade_input" name="money_after_trade"> <!-- name has to be the same as form_field on python otree -->
    <input type="hidden" id="accepted_other_participants_offer_input" name="accepted_other_participants_offer"> <!-- name has to be the same as form_field on python otree -->
    {{ formfield_errors "money_after_trade" }}
    {{ formfield_errors "accepted_other_participants_offer"}}

{{ endblock }}

{% block scripts %}
<script>     // decides what HTML div displays first

    {% if player.id_in_group == 1 %}    // when paricipat 1 opens the page...
        document.getElementById("make_offer").style.display = "block"   // particpant 1 see's this...
    {% else %}
        document.getElementById("wait_for_offer").style.display = "block"   // and participant 2 see's this...
    {% endif %}

    var current_offer_recieved;
    var current_offer_made;

    function make_offer()
    {
        current_offer_made = parseFloat(document.getElementById("make_offer_input").value) // we ge the value of the input; we use Parse to convert string to number
        liveSend({"information_type": "offer", "offer": current_offer_made})    // send this number to otree in real time via live_method
        document.getElementById("make_offer").style.display = "none";   // hide the make_offer div
        document.getElementById("wait_for_response").style.display = "block";   // show the wait_for_response div
    }

    function accept_offer()
    {
        liveSend({"information_type": "response", "offer_response": true})    //the response is going to be true b/c we get response
        var form = document.getElementById("form");  // subjects then go to the next page
        form.money_after_trade.value = {{ Constants.endownment|json }} + current_offer_recieved;
        form.accepted_other_participants_offer.value = "True"   // Capital T b/c booleans are capital in Python
        form.submit()   // all information send to server and we go to next page
    }

    function reject_offer()
    {
        liveSend({"information_type": "response", "offer_response": false})    //the response is going to be false b/c offer was not accepted
        document.getElementById("respond_offer").style.display = "none"
        document.getElementById("make_offer").style.display = "block"
    }

    // this is the function that handles are instances and logic in the javascript page in real time
    function liveRecieve(data)
    {
        if (data["information_type"] == "offer")
        {
            current_offer_recieved = data["offer"];
            document.getElementById("current_offer").innerHTML = current_offer_recieved;
            document.getElementById("respond_offer").style.display = "block";
            document.getElementById("wait_for_offer").style.display = "none";
        }
        else if (data["information_type"] == "response")  // if we don't get a response
        {
            if (data["response"])
            {
                var form = document.getElementById("form");
                form.money_after_trade.value = {{ Constants.endownment|json }} - current_offer_recieved;
                form.accepted_other_participants_offer.value = "Flase"   // Capital T b/c booleans are capital in Python
                form.submit()   // all information send to server and we go to next page
            }
            else
            {
                document.getElementById("wait_for_response").style.display = "none"
                document.getElementById("wait_for_offer").style.display = "block"

            }
        }
    }

</script>


{% endblock %}