{{ block title }}
Spiel {{GameNumber}}/2: Runde {{round_num}}/5
<br>
{{ endblock }}
{{ block content }}



<!--<input type="radio" id="ein" onclick ="sendRadio_in(value)" name="entrant" value="10">
<label for="ein">Markteintritt</label><br>
<input type="radio" id="aus" onclick="sendRadio_out(value)" name="entrant" value="15">
<label for="aus">Kein Markteintritt</label><br> -->


<u><p id="title"></p></u>



{{if player.id_in_group == 1}}
<p id="payout">
    <b>Ihre Auszahlung:</b> <span id="ent_payout">0</span><br>
 <!--   <i>Time already invested</i>: <span id="ent_invest">0</span><br> -->
    <b>Zeit bis zum Markteintritt des Entrants [Sekunden]</b>: <span id="ent_invest_until_in">0</span><br>
  <!--   <i>Time Phase 1</i>: <span id="len_phase1">0</span> -->
</p>
<b>Auszahlungen Phase 1 pro Sekunde</b>
<style>
<style>
    th, td {
        border: 1px solid black;
    }
</style>
 <table cellpadding=12 id="table">
  <tr>
      <th>Entrant</th>
      <th colspan="2">Monopolist</th>
  </tr>

  <tr>
  	<th></th>
    <td>
        <input type="radio" id="inc_tolerate" onclick ="sendAction(value)" name="incumbent"  value="TOLERATE">
        <label for="dulden">Investment Dulden</label>
    </td>
    <td>
        <input type="radio" id="inc_fight" onclick="sendAction(value)" name="incumbent"  value="FIGHT">
        <label for="fight">Investment Erschweren</label></td>
    </td>
  </tr>

  <tr id="investieren">
      <td>
          <input type="radio" id="ent_in" onclick ="sendAction(value)" name="ent"  value="IN">
          <label for="ein">Investieren</label>
      </td>
      <td align="center"><p id="tolerate_in" class="action_display">(<b>{{Constants.payout_entrant_invest_tolerate_1}}</b>,{{Constants.payout_incumbent_invest_tolerate_1}})</p></td>
      <td align="center"><p id="fight_in" class="action_display">(<b>{{Constants.payout_entrant_invest_fight_1}}</b>,{{Constants.payout_incumbent_invest_fight_1}})</p></td>
  </tr>

  <tr id="Ninvestieren">
      <td>
          <input type="radio" id="ent_out" onclick="sendAction(value)" name="ent"  value="OUT">
          <label for="aus">Nicht Investieren</label></td>
      <td align="center"><p id="tolerate_out" class="action_display">(<b>{{Constants.payout_entrant_ninvest_tolerate_1}}</b>,{{Constants.payout_incumbent_ninvest_tolerate_1}})</p></td>
      <td align="center"><p id="fight_out" class="action_display">(<b>{{Constants.payout_entrant_ninvest_fight_1}}</b>,{{Constants.payout_incumbent_ninvest_fight_1}})</p></td>
  </tr>
</table> <br>
<b>Auszahlungen Phase 2 pro Sekunde</b>
<style>
    th, td {
        border: 1px solid black;
    }
</style>
<table cellpadding=12 align="middle">
  <tr>
      <th>Kapazitätsaufbau des Entrants vollständig</th>
      <th>Kapazitätsaufbau des Entrants unvollständig</th>
  </tr>

  <tr>
      <td align="center"><b>{{Constants.payout_entrant_invest_2}}</b> , {{Constants.payout_incumbent_invest_2}}</td>
      <td align="center"><b>{{Constants.payout_entrant_n_invest_2}}</b> , {{Constants.payout_incumbent_n_invest_2}}</td>
  </tr>
</table> <br>

<br><br>

{{else}}
<p id="payout">
    <b>Ihre Auszahlung:</b> <span id="inc_payout">0</span><br>
 <!--   <i>Time already invested</i>: <span id="ent_invest">0</span><br> -->
    <b>Zeit bis zum Markteintritt des Entrants [Sekunden]</b>: <span id="ent_invest_until_in">0</span><br>
  <!--   <i>Time Phase 1</i>: <span id="len_phase1">0</span> -->
</p>
<b>Auszahlungen Phase 1 pro Sekunde</b>
<style>
    th, td {
        border: 1px solid black;
    }
</style>
 <table cellpadding=12 id="table">

  <tr>
      <th>Entrant</th>
      <th colspan="2">Monopolist</th>
  </tr>

  <tr>
  	<th></th>
    <td>
        <input type="radio" id="inc_tolerate" onclick ="sendAction(value)" name="incumbent"  value="TOLERATE">
        <label for="dulden">Investment Dulden</label>
    </td>
    <td>
        <input type="radio" id="inc_fight" onclick="sendAction(value)" name="incumbent"  value="FIGHT">
        <label for="fight">Investment Erschweren</label></td>
    </td>
  </tr>

  <tr id="investieren">
      <td>
          <input type="radio" id="ent_in" onclick ="sendAction(value)" name="ent"  value="IN">
          <label for="ein">Investieren</label>
      </td>
      <td align="center"><p id="tolerate_in" class="action_display">({{Constants.payout_entrant_invest_tolerate_1}},<b>{{Constants.payout_incumbent_invest_tolerate_1}}</b>)</p></td>
      <td align="center"><p id="fight_in" class="action_display">({{Constants.payout_entrant_invest_fight_1}},<b>{{Constants.payout_incumbent_invest_fight_1}}</b>)</p></td>
  </tr>

  <tr id="Ninvestieren">
      <td>
          <input type="radio" id="ent_out" onclick="sendAction(value)" name="ent"  value="OUT">
          <label for="aus">Nicht Investieren</label></td>
      <td align="center"><p id="tolerate_out" class="action_display">({{Constants.payout_entrant_ninvest_tolerate_1}},<b>{{Constants.payout_incumbent_ninvest_tolerate_1}}</b>)</p></td>
      <td align="center"><p id="fight_out" class="action_display">({{Constants.payout_entrant_ninvest_fight_1}},<b>{{Constants.payout_incumbent_ninvest_fight_1}}</b>)</p></td>
  </tr>
</table><br>
<b>Auszahlungen Phase 2 pro Sekunde </b>

<style>
    th, td {
        border: 1px solid black;
    }
</style>
<table cellpadding=12 align="middle">
  <tr>
      <th>Kapazitätsaufbau des Entrants vollständig</th>
      <th>Kapazitätsaufbau des Entrants unvollständig</th>
  </tr>

  <tr>
      <td align="center">{{Constants.payout_entrant_invest_2}} , <b>{{Constants.payout_incumbent_invest_2}}</b></td>
      <td align="center">{{Constants.payout_entrant_n_invest_2}} , <b>{{Constants.payout_incumbent_n_invest_2}}</b></td>
  </tr>
</table> <br>

{{endif}}

<h4>Vergangene Spielergebnisse</h4>
<style>


    .meine-tabelle{
        border-collapse: collapse;
        width: 100%;
    }

    .meine-tabelle th, .meine-tabelle td {
        border: none;
        padding: 10px;
    }

    .meine-tabelle tr:first-child {
        border-top: 2px solid black; /* Eine horizontale Linie ganz oben */
    }

    .meine-tabelle tr:nth-child(1) {
        border-bottom: 2px solid black; /* Eine horizontale Linie an zweitoberster Position */
    }

    .meine-tabelle tr:last-child {
        border-bottom: 2px solid black; /* Eine horizontale Linie ganz unten */
    }

    /* Spezifischer Stil für die Tabelle mit der Klasse "meine-tabelle" */
</style>

<table class="meine-tabelle">
     <tr align="center">
         <td colspan="5"><b>{{if player.id_in_group == 1}}Spieldaten vergangener Entrants mit dem Monopolisten{{else}}Ihre bisherigen Spieldaten als Monopolist{{endif}}</b></td>
     </tr>
      <tr>
          <th>Runde</th>
          <th>{{if player.id_in_group == 1}}Auszahlung Entrant{{else}}Ihre bisherigen Auszahlungen{{endif}}</th>
          <th>Ist der Entrant in den Markt eingetreten?</th>
          <th>{{if player.id_in_group == 1}}Anteil Strategie Erschweren gesamtes Spiel{{else}}Ihr Anteil Strategie Erschweren gesamtes Spiel{{endif}}</th>
          <th>{{if player.id_in_group == 1}}Anteil Strategie Erschweren erste 60s{{else}}Ihr Anteil Strategie Erschweren erste 60s{{endif}}</th>

      </tr>
     <tr>
          <td>1</td>
          <td>{{if player.id_in_group == 1}}{{display_ent_payoff.1}}{{else}}{{display_inc_payoff.1}}{{endif}}</td>
          <td>{{display_proportion_marketentry.1}}</td>
          <td>{{display_proportion_fight.1}}
          <td>{{display_proportion_fight_60s.1}}</td>
          </td>

      </tr>
           <tr>
          <td>2</td>
          <td>{{if player.id_in_group == 1}}{{display_ent_payoff.2}}{{else}}{{display_inc_payoff.2}}{{endif}}</td>
               <td>{{display_proportion_marketentry.2}}</td>
          <td>{{display_proportion_fight.2}} </td>
          <td>{{display_proportion_fight_60s.2}}</td>

      </tr>
        <tr>
          <td>3</td>
          <td>{{if player.id_in_group == 1}}{{display_ent_payoff.3}}{{else}}{{display_inc_payoff.3}}{{endif}}</td>
          <td>{{display_proportion_marketentry.3}}</td>
          <td>{{display_proportion_fight.3}}</td>
          <td>{{display_proportion_fight_60s.3}}</td>
        </tr>

        <tr>
          <td>4</td>
          <td>{{if player.id_in_group == 1}}{{display_ent_payoff.4}}{{else}}{{display_inc_payoff.4}}{{endif}}</td>
          <td>{{display_proportion_marketentry.4}}</td>
          <td>{{display_proportion_fight.4}}</td>
          <td>{{display_proportion_fight_60s.4}}</td>
        </tr>
 </table>

<br><br>
 <!--<p id="aktion"></p> -->
<br><br>


<script>
    let title = document.getElementById('title');
//    let aktion = document.getElementById('aktion');
    let test = document.getElementById('test');


    // Disable distinct buttons for the respective players
    if (js_vars.my_id == 1){
        document.getElementById("inc_tolerate").disabled = true;
        document.getElementById("inc_fight").disabled = true;
        title.innerText = "Sie sind der Entrant"

        }
    if (js_vars.my_id == 2){
        document.getElementById("ent_in").disabled = true;
        document.getElementById("ent_out").disabled = true;
        title.innerText = "Sie sind der Monopolist"
        }

    // Send the value of the button to the python script
    function sendAction(value) {
        liveSend(value);
    }

    // Function recalls itself every 1000ms
    function periodicRefresh() {
        setInterval(function(){
            liveSend("UPDATE");
            }, 1000);
    }

    // Receive the processed data from the python script
    function liveRecv(data) {
        console.log('liveRecv', data)

        // Set all case to background color white
        document.getElementById("table").rows[1].cells[1].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[1].cells[2].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[2].cells[0].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[2].cells[1].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[2].cells[2].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[3].cells[0].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[3].cells[1].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[3].cells[2].style.backgroundColor = "#FFFFFF";

        // Make rows and colums light blue for Entrant
        document.getElementById("table").rows[get_row_2(data.ent_action)].cells[0].style.backgroundColor = "#E0FFFF";
        document.getElementById("table").rows[get_row_2(data.ent_action)].cells[1].style.backgroundColor = "#E0FFFF";
        document.getElementById("table").rows[get_row_2(data.ent_action)].cells[2].style.backgroundColor = "#E0FFFF";

        // Make rows and colums light blue for Incumbent
        document.getElementById("table").rows[1].cells[get_col_2(data.inc_action)].style.backgroundColor = "#E0FFFF";
        document.getElementById("table").rows[2].cells[get_col_2(data.inc_action)].style.backgroundColor = "#E0FFFF";
        document.getElementById("table").rows[3].cells[get_col_2(data.inc_action)].style.backgroundColor = "#E0FFFF";

        // The Radio-Buttons are checked depending on the variable of the player
        document.getElementById("inc_" + data.inc_action.toLowerCase()).checked = true
        document.getElementById("ent_" + data.ent_action.toLowerCase()).checked = true

        // Make background of the cell dark blue
        var row = get_row(data.inc_action.toLowerCase() + "_" + data.ent_action.toLowerCase())
        var col = get_col(data.inc_action.toLowerCase() + "_" + data.ent_action.toLowerCase())
        document.getElementById("table").rows[row].cells[col].style.backgroundColor = "#B4CDCD";


//        aktion.innerText =  aktion.innerText + data.aktion + "\n";
        if (js_vars.my_id == 1) {
            document.getElementById("ent_payout").innerText = Math.round(parseInt(data.ent_payout))
        }
        if (js_vars.my_id == 2) {
            document.getElementById("inc_payout").innerText = Math.round(parseInt(data.inc_payout))
        }
//        document.getElementById("ent_invest").innerText = Math.round((parseInt(data.ent_invest) / 1000000000))
        var remainingTimeForInvest = parseFloat(data.ent_invest_until_in)
        document.getElementById("ent_invest_until_in").innerText = Math.round(remainingTimeForInvest)

        // Submit the form when the time to invest reaches 0
        if(remainingTimeForInvest <= 0) {
            $('<input>').attr({
                type: 'hidden',
                name: 'timeout_happened',
                value: '1'
            }).appendTo('form');
            $('#form').submit();
        }
        
//        document.getElementById("len_phase1").innerText = Math.round((parseInt(data.len_phase1) / 1000000000))
    }

    // Function calls liveSend and periodicRefresh after the page is loaded
    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
            if (js_vars.my_id == 1) {
        periodicRefresh()
    }
    });

    //Function to get the column of the marked cell
    function get_col(value){
        if (value == "tolerate_in") {
            return 1;
        }
        else if  (value == "tolerate_out"){
            return 1;
        }
        else if (value == "fight_in") {
            return 2;
        }
        else if  (value == "fight_out"){
            return 2;
        }
    }

    function get_row(value){
        if (value == "tolerate_in") {
            return 2;
        }
        else if  (value == "tolerate_out"){
            return 3;
        }
        else  if (value == "fight_in") {
            return 2;
        }
        else if  (value == "fight_out"){
            return 3;
        }
    }

    function get_row_2(value){
        if (value == "IN"){
            return 2;
        }
        else{
            return 3;
        }
    }

    function get_col_2(value){
        if (value == "TOLERATE") {
            return 1;
        }
        else{
            return 2;
        }
    }

</script>




{{ endblock }}