{{ extends 'global/Page.html' }}
{{ block title }}Supply Chain Decisions{{ endblock }}

{{ block content }}

<div id="game">
    <div id="game_left_panel">
        {{ formfields }}    
    </div>

    <div id="game_right_panel">
        <div class="status_label">Bank Account:</div>
        <div id="money" class="status_value"></div>

        <div class="status_label">Sustainability Performance:</div>
        <img id="impact" class="game-stars" class=“https://i.ibb.co/khPB5NK/0stars.png” />
    </div>     
</div>

{{ next_button }}

{{ endblock }}

{{ block scripts }}
<script>
const star_image_links = [
  "https://i.ibb.co/khPB5NK/0stars.png",
  "https://i.ibb.co/mDKMtVT/1star.png",
  "https://i.ibb.co/QfcDdMT/2stars.png",
  "https://i.ibb.co/sJcvJmc/3stars.png",
  "https://i.ibb.co/4T4Tmmg/4stars.png",
  "https://i.ibb.co/3McDJ75/5stars.png"
];

let decisions = [...js_vars.decisions];
let num_decisions = decisions.length;

let calculateMoney = function() {
  let currentMoney = js_vars.initialMoney;
  
  for(var decision_num = 0; decision_num < num_decisions; decision_num++) {
  	if (decisions[decision_num] !== null) {
  	  currentMoney -= js_vars.monetaryImpact[decision_num][decisions[decision_num]];
  	}
  }
  
  document.getElementById("money").innerText = 
    currentMoney.toLocaleString(
	  undefined, // leave undefined to use the visitor's browser to overwrite it
	  { minimumFractionDigits: 2 }
	) + "€";
}

let calculateImpact = function() {
  let impactSum = 0;
  let numDecisionsSelected = 0;
    
  for(let decision_num = 0; decision_num < num_decisions; decision_num++) {
  	if (decisions[decision_num] !== null && decisions[decision_num] !== 0) {
  	  impactSum += js_vars.environmentImpact[decision_num][decisions[decision_num]];
      numDecisionsSelected++;
  	}
  }
  
  let numStarsToDisplay = 
      numDecisionsSelected == 0 ? 0 : Math.round(impactSum * 1.0 / numDecisionsSelected);
 
  document.getElementById("impact").src = star_image_links[numStarsToDisplay];
}

let calculateStatus = function() {
  calculateMoney();
  calculateImpact();
}

let updateDecision = function(decision_num, choice) {
  decisions[decision_num] = choice;
  calculateStatus();
}

for (let decision_num = 0; decision_num < num_decisions; decision_num++) {
  let radios = document.querySelectorAll('input[type=radio][name="question' + (decision_num + 1) + '"]');
  for(let i = 0, max = radios.length; i < max; i++) {
    radios[i].onclick = function() {
      //console.log("Decision Number: " + decision_num);
      //console.log("Decision Value: " + this.value);
      updateDecision(decision_num, this.value);
  	}
  }
  let currentSelection = document.querySelector('input[type=radio][name="question' + (decision_num + 1) + '"]:checked');
  if (currentSelection !== null) {
      decisions[decision_num] = currentSelection.value;
  }
}

calculateStatus();
</script>
{{ endblock }}