{{ extends 'global/Page.html' }}
{{ block title }}Round {{ subsession.round_number }} out of {{ C.NUM_ROUNDS }}{{ endblock }}

{{ block content }}

<div id="info">
    <p>
        Now you get to make a choice in a group of {{ C.PLAYERS_PER_GROUP }}. <br>
    </p>
    <p>
        The competition factor is: <b>{{ group.c_inten_group }}</b>
    </p>
    <p>
        {{ if group.treatment_id == "INEQ_C2" }}
        Revenue factors are <b>not equal</b>.<br>
        
        <li>You have a revenue factor of <b>{{player.revenue_multiplier}}</b></li>
        <li><span class="blue-text">Rival 1</span> has a revenue factor of <b>{{player.rival1_rev_mult}}</b></li>
        <li><span class="red-text">Rival 2</span> has a revenue factor of <b>{{player.rival2_rev_mult}}</b></li>
        
        {{ else }}
        Revenue factors are equal for all players: <b>1</b>
        {{ endif }}
    </p>
    <p>
        <span class="red-text">Caution:</span> Please do not press ENTER on your keyboard when inserting your decision as this will send you automatically to the next round!
    </p>
    <p>
        With the following button, you can use a demo profit calculator to see the impact of certain sharing decisions on each rival's profit. Feel free to note down any observations you have.
        {{ if subsession.round_number == 1 }}
        From the next round onwards, you can also load in previous rounds' result in the calculator.
        {{ else }}
        <b>You can now access the results of the previous round once again in the calculator.</b>
        {{ endif }}
    </p>
</div>

<!--Calculator-->
{{ if subsession.round_number == 1 }}
<button type='button' id="toggleButton" onclick="toggleCalculator()">Show Calculator</button>
{{ else }}
<button type='button' id="toggleButton" onclick="toggleCalculator()">Show Calculator and Previous Round's Results</button>
{{ endif }}

<div id="calculator", class="boxed", style="display: none;">   
    <p>
        <b>CALCULATOR</b>
    </p>
    
    {{ if subsession.round_number > 1 }}
    <button type='button' id="loadButton" onclick="loadPrevValues()">Load Previous Rounds's decision</button><br>
    {{ endif }}
    
    <button type='button' id="resetButton" onclick="resetCalculator()">Reset Calculator</button><br>
    
    <label for="share1">What <b>you</b> share with <span class="blue-text">rival 1</span> (%):</label>
  <input type="text" id="share1" value="0"><br><br>
    <label for="share2">What <b>you</b> share with <span class="red-text">rival 2</span> (%):</label>
  <input type="text" id="share2" value="0"><br><br>
  <label for="receive1">What <span class="blue-text">rival 1</span> shares with <b>you</b> (%):</label>
  <input type="text" id="receive1" value="0"><br><br>
  <label for="receive2">What <span class="red-text">rival 2</span> shares with <b>you</b> (%):</label>
  <input type="text" id="receive2" value="0"><br><br>
  <label for="cross1">What <span class="blue-text">rival 1</span> shares with <span class="red-text">rival 2</span> (%):</label>
  <input type="text" id="cross1" value="0"><br><br>
  <label for="cross2">What <span class="red-text">rival 2</span> shares with <span class="blue-text">rival 1</span> (%):</label>
  <input type="text" id="cross2" value="0"><br><br>
  <label for="result1"><b>Your</b> expected profit:</label>
  <input type="text" id="result1" disabled><br><br>
  <label for="result2"><span class="blue-text">Rival 1</span>'s expected profit:</label>
  <input type="text" id="result2" disabled><br><br>
  <label for="result3"><span class="red-text">Rival 2</span>'s expected profit:</label>
  <input type="text" id="result3" disabled><br><br>
</div>

<!--END Calculator-->
<br>
<p>
    <b>DECISION</b>
</p>

{{ formfields }}

{{ next_button }}

{{ endblock }}

{{ block scripts }}
<script>
document.addEventListener("DOMContentLoaded", function() {
  const share1Input = document.getElementById('share1');
  const share2Input = document.getElementById('share2');
  const receive1Input = document.getElementById('receive1');
  const receive2Input = document.getElementById('receive2');
  const cross1Input = document.getElementById('cross1');
  const cross2Input = document.getElementById('cross2');

  share1Input.addEventListener("input", profit);
  share2Input.addEventListener("input", profit);
  receive1Input.addEventListener("input", profit);
  receive2Input.addEventListener("input", profit);
  cross1Input.addEventListener("input", profit);
  cross2Input.addEventListener("input", profit);
});

function profit() {
  var s1 = parseInt(document.getElementById("share1").value)/100 || 0;
  var s2 = parseInt(document.getElementById("share2").value)/100 || 0;
  var r1 = parseInt(document.getElementById("receive1").value)/100 || 0;
  var r2 = parseInt(document.getElementById("receive2").value)/100 || 0;
  var c1 = parseInt(document.getElementById("cross1").value)/100 || 0;
  var c2 = parseInt(document.getElementById("cross2").value)/100 || 0;
  const x_endow = 100;
  
  let c_inten = js_vars.c_inten;
  let p_r_mult = js_vars.p_r_mult;
  let r1_r_mult = js_vars.r1_r_mult;
  let r2_r_mult = js_vars.r2_r_mult;
  let n_players = js_vars.no_players;
  
  var result1 = Math.round(
  	x_endow * p_r_mult * (1 + r1 + r2) -
  	c_inten / (n_players - 1) * (x_endow * r1_r_mult * (1 + s1 + c2) + x_endow * r2_r_mult * (1 + s2 + c1))
  );
  document.getElementById("result1").value = result1;

  var result2 = Math.round(
  	x_endow * r1_r_mult * (1 + s1 + c2) -
  	c_inten / (n_players - 1) * (x_endow * p_r_mult * (1 + r1 + r2) + x_endow * r2_r_mult * (1 + s2 + c1))
  );
  document.getElementById("result2").value = result2;

  var result3 = Math.round(
  	x_endow * r2_r_mult * (1 + s2 + c1) -
  	c_inten / (n_players - 1) * (x_endow * r1_r_mult * (1 + s1 + c2) + x_endow * p_r_mult * (1 + r1 + r2))
  );
  document.getElementById("result3").value = result3;
}

function toggleCalculator() {
    var calculator = document.getElementById("calculator");
    var toggleButton = document.getElementById("toggleButton2");

    if (calculator.style.display === "none" || calculator.style.display === "") {
      // Show the calculator
      calculator.style.display = "block";
      toggleButton.textContent = "Hide Calculator";
    } else {
      // Hide the calculator
      calculator.style.display = "none";
      toggleButton.textContent = "Show Calculator";
    }
  }

function baseLoadPrevValues() {
  let prev_share1=js_vars.p_s1;
  let prev_share2=js_vars.p_s2;
  // Removed due to feedback: anchoring effect
  // forminputs.shared_data1.value = prev_share1;
  // forminputs.shared_data2.value = prev_share2;
}

function loadPrevValues() {
  let prev_share1=js_vars.p_s1;
  let prev_share2=js_vars.p_s2;
  let prev_rec1=js_vars.p_r1;
  let prev_rec2=js_vars.p_r2;
  let prev_cro1=js_vars.p_c1;
  let prev_cro2=js_vars.p_c2;
  
  document.getElementById("share1").value = prev_share1;
  document.getElementById("share2").value = prev_share2;
  document.getElementById("receive1").value = prev_rec1;
  document.getElementById("receive2").value = prev_rec2;
  document.getElementById("cross1").value = prev_cro1;
  document.getElementById("cross2").value = prev_cro2;
  
  profit()
}

function resetCalculator() {  
  document.getElementById("share1").value = 0;
  document.getElementById("share2").value = 0;
  document.getElementById("receive1").value = 0;
  document.getElementById("receive2").value = 0;
  document.getElementById("cross1").value = 0;
  document.getElementById("cross2").value = 0;
  
  profit()
}

window.onload=profit();
// Removed due to feedback: anchoring effect
// window.onload=baseLoadPrevValues();
</script>
{{ endblock }}