{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
    Cooperative Bargaining
{% endblock %}

{% block content %}

<div class="card bg-light instructions">
    <div class="card-body">
        <link rel="stylesheet" type="text/css"
              href="{% static 'global/matrix.css' %}"/>


          On this page, you will bargain with your partner to determine a lottery ticket distribution. Once again, your lottery prize for winning is {{player.lottery_value}}. You may either offer a ticket split, or accept one sent to you. You have 5 minutes.
          <br><br>

          <style>
            .wrap {
              border-style: groove;
              border-width: 10px;
              padding: 5px;
              background-color: 'grey';
              border-color: 'black';
              font-weight: bold;



}
          .myButton {
            box-shadow:inset 0px 1px 0px 0px #54a3f7;
            background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
            background-color:#007dc1;
            border-radius:3px;
            border:1px solid #124d77;
            display:inline-block;
            cursor:pointer;
            color:#ffffff;
            padding-top: 1px;
            font-family:Arial;
            font-size:12px;

            text-decoration:none;
            text-shadow:0px 1px 0px #0073ff;
}
          .myButton:hover {
            background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
            background-color:#0061a7;
}
          .myButton:active {
            position:relative;
            top:1px;
}



          </style>

          <strong> LATEST PROPOSAL: </strong><br><br>
          <p  id="proposal" class ='wrap'>
          <br>
          No current proposals.
          <br><br>
          </p>
          <br>
          <p>Do you wish to accept the offer? If so, click yes. If not, feel free to make a new offer below.</p>
          <div>
            <button name="offer_accepted" id="accept" type = "button" class = "myButton">Yes</button>
            <button id="next"></button>

          </div>
          <script>
            document.getElementById('accept').onclick = function (){
              liveSend('game_finished');
            };
          </script>

          <br><br>

          <strong> Propose how to split the 100 tickets. </strong><br><br>



          <div>I receive <input id="keep" type="number" > tickets and you recieve <input id="give" type="number"> tickets.  </div><br> <button type="button" id="sendbutton" class = "myButton">Send</button>
          </div>

          {% endblock %}

          {% block scripts %}
          <script>
            document.getElementById("next").style.display = "none";


            let history = document.getElementById('history');
            let give = document.getElementById('give');
            let keep = document.getElementById('keep');
            let sendbutton = document.getElementById('sendbutton');


            function liveRecv(data){
              console.log(liveRecv)
              if (data == 'game_finished'){
                  document.getElementById("next").click();
                  }
              if(data == 'error'){
                  window.alert("Lottery split not equal to 100 total tickets!");
                }
              else{
              document.getElementById("proposal").innerHTML = 'NEW PROPOSAL! \n Player two offered a lottery ticket split of ' + data[0]+'/'+data[1]+', meaning player two would keep '+data[0]+' tickets, and that you would receive '+data[1]+' tickets.';
            }


            }
              sendbutton.onclick = function (){
                  window.alert("Offer sent. You may still edit/create a new offer.");
                  console.log(liveSend)
                  liveSend([keep.value, give.value]);
                }
        </script>
{% endblock %}