{{ block title }}Set your price{{ endblock }}
{{ block content }}

    {{ formfields }}

  <style>
    /* Style for the form fields */
    .calculator-input {
        width: 50px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
        text-align: center;
        margin: 0 5px;
    }
    
    /* Style for the form field labels */
    .calculator-label {
        margin-right: 5px;
    }
  </style>

  {{ next_button }}

  <h3>Calculator</h3>
  <p>
      Input a non-negative price for all three firms to see the profits and fines they imply.
  </p>
  
  <!-- Form fields -->
  <div class="calculator-inputs">
      <label class="calculator-label" for="calculator_me">Me:</label>
      <input type="number" class="calculator-input" id="id_calculator_me" name="calculator_me" min="0" value="0">
      
      <label class="calculator-label" for="calculator_r1">Rival 1:</label>
      <input type="number" class="calculator-input" id="id_calculator_r1" name="calculator_r1" min="0" value="0">
      
      <label class="calculator-label" for="calculator_r2">Rival 2:</label>
      <input type="number" class="calculator-input" id="id_calculator_r2" name="calculator_r2" min="0" value="0">
      <br>
      <br>
      <label class="calculator-label" for="calculator_set_all">Set all:</label>
      <input type="number" class="calculator-input" id="id_calculator_set_all" name="calculator_set_all" min="0" value="0">
  </div>
  
  <p>
      <br>
      This outcome would earn you a profit of:
  </p>
  <h3><span id="calculator_profit"></span> <small>points</small></h3>
  
  <p id="calculator_fine_text">
      If a cartel would set these prices and be discovered,
      they would result in a fine of:
  </p>
  <h3><span id="calculator_fine"></span> <small>points</small></h3>
  <br>
  

{% block scripts %}

  <script>
    setTimeout(function() {
        alert("Please enter a price now.");
    }, 45000);
  </script>

  <!-- Calculator -->
  <script>
    let calculator_meInput = document.getElementsByName('calculator_me')[0];
    let calculator_r1Input = document.getElementsByName('calculator_r1')[0];
    let calculator_r2Input = document.getElementsByName('calculator_r2')[0];
    let calculator_profitEle = document.getElementById('calculator_profit');
    let calculator_setAllInput = document.getElementsByName('calculator_set_all')[0];
    let calculator_fineEle = document.getElementById('calculator_fine'); 
    let calculator_fine_text = document.getElementById('calculator_fine_text')

    calculator_profitEle.innerText = 'NA';
    calculator_fineEle.innerText = 'NA';

    function recalc() {
        let Me = parseInt(calculator_meInput.value);
        let Rival1 = parseInt(calculator_r1Input.value);
        let Rival2 = parseInt(calculator_r2Input.value);

        // isNaN is the javascript function that checks whether the value is a valid number.
        if (isNaN(Me) || isNaN(Rival1) || isNaN(Rival2)) {
            calculator_profitEle.innerText = 'NA';
            calculator_fineEle.innerText = 'NA';

        } else {
            let lowestPrice = Math.min(Me, Rival1, Rival2);
            let numPlayersWithLowestPrice = 0;

            if (Me === lowestPrice) {
                numPlayersWithLowestPrice++;
            }
            if (Rival1 === lowestPrice) {
                numPlayersWithLowestPrice++;
            }
            if (Rival2 === lowestPrice) {
                numPlayersWithLowestPrice++;
            }

            let totalQuantity = Math.max(0, {{ C.MAX_DEMAND }} - lowestPrice);
            let calculator_profit = (Me === lowestPrice) ? totalQuantity * (Me - {{ C.MARGINAL_COST }}) / numPlayersWithLowestPrice : 0;
            calculator_profitEle.innerText = Math.round(calculator_profit);

            let calculator_fine;
            mode = js_vars.mode;
            if (mode === 'revenue') {
                calculator_fine = (Me === lowestPrice) ? {{ C.REVENUE_RATE }} * Math.max(0, (lowestPrice * totalQuantity / numPlayersWithLowestPrice)) : 0;
            } else if (mode === 'profit') {
                calculator_fine = (Me === lowestPrice) ? {{ C.PROFIT_RATE }} * Math.max(0, calculator_profit) : 0;
            } else if (mode === 'overcharge') {
                calculator_fine = {{ C.OVERCHARGE_RATE }} * Math.max(0, (Me - {{ C.NASH_PRICE }}) * {{ C.NASH_QUANTITY }} / {{ C.PLAYERS_PER_GROUP }});
            }

            calculator_fineEle.innerText = Math.round(calculator_fine);
        }
    }

    function setAllInputs() {
        let value = parseInt(calculator_setAllInput.value);
        if (!isNaN(value)) {
            calculator_meInput.value = value;
            calculator_r1Input.value = value;
            calculator_r2Input.value = value;
            recalc();
        }
    }

    calculator_setAllInput.oninput = setAllInputs;

    function set_text(){

        let cartel_formed = js_vars.cartel_formed

        if (cartel_formed){
            calculator_fine_text.textContent = 'If your cartel is discovered, these prices will result in a fine of:'
        }

    }

    calculator_fine_text.onload = set_text()

    calculator_meInput.oninput = recalc;
    calculator_r1Input.oninput = recalc;
    calculator_r2Input.oninput = recalc;
    
</script>

{% endblock %}
{% endblock %}