document.getElementById('characterForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevents form from submitting normally
  
  // Retrieves selected character type
  var charType = document.getElementById('charType').value;
  
  // Makes a POST request to endpoint with selected charType as parameter
  fetch('https://gammaworld.gmgauthier.com/character/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ chartype: charType }) // Data sent to server
  })
  .then(response => response.json()) // Gets the response and returns it as JSON
  .then(data => { // When promise is resolved

    var resultSection = document.getElementById('resultSection');
    resultSection.innerHTML = '';

    // Display animal-stock if it exists
    if(data['animal-stock']){
      resultSection.innerHTML += `<strong>Animal Stock:</strong><br/>`;
      var animalStock = data['animal-stock'];
      for(var prop in animalStock){
        resultSection.innerHTML += ` - ${prop}: ${animalStock[prop]}<br/>`;
      }
      resultSection.innerHTML += "<br/>";
    }

    // Printing abilities
    resultSection.innerHTML += "<strong>Abilities:</strong><br/>";
    var abilities = data.abilities;
    for(var ability in abilities) {
      resultSection.innerHTML += ` - ${ability}: ${abilities[ability]}<br/>`;
    }
    resultSection.innerHTML += "<br/>";

    // Display hp, gold, domars
    resultSection.innerHTML += `<strong>hp:</strong> ${data.hp}<br/>`;
    resultSection.innerHTML += `<strong>gold:</strong> ${data.gold}<br/>`;
    resultSection.innerHTML += `<strong>domars:</strong> ${data.domar}<br/>`;
    resultSection.innerHTML += "<br/>";

    // Display mutations if they exist
    if(data.mutations){
      resultSection.innerHTML += `<strong>Mutations:</strong><br/>`;
      var mutations = data.mutations;
      resultSection.innerHTML += ` - Mental (${mutations.count.mental}): ${mutations.mental.join(', ')}<br/>`;
      resultSection.innerHTML += ` - Physical (${mutations.count.physical}): ${mutations.physical.join(', ')}<br/>`;
    }

    // Display cybermods if they exist
    if(data.cybermods){
      resultSection.innerHTML += `<strong>Cybermods:</strong><br/>`;
      var cybermods = data.cybermods;
      if (data.cybermods.mental) {
        resultSection.innerHTML += ` - Mental (${cybermods.count.mental}): ${cybermods.mental.join(', ')}<br/>`;
      }
      if (data.cybermods.physical) {
        resultSection.innerHTML += ` - Physical (${cybermods.count.physical}): ${cybermods.physical.join(', ')}<br/>`;
      }
    }

  })
      .catch(error => console.error('Error:', error));
});