document.getElementById('characterForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevents form from submitting normally
  
  // Retrieves selected character type
  var charType = document.getElementById('charType').value;
  const queryParams = new URLSearchParams({
    chartype: charType,
  });
  // Makes a POST request to endpoint with selected charType as parameter
  fetch(`${window.BASE_URL}/rules/character?${queryParams}`)
  .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 = '';

    // After existing code, add below lines for the profile rendering
      resultSection.innerHTML += `<strong>Profile:</strong><br/>`;
      var profile = data.profile;
      resultSection.innerHTML += ` - Name: ${profile.name}<br/>`;
      resultSection.innerHTML += ` - Sex: ${profile.sex}<br/>`;
      resultSection.innerHTML += ` - Age: ${profile.age}<br/>`;

      // Check if character type is human
      if(charType === 'human' && profile.hair && profile.eyes && profile.skintone) {
        resultSection.innerHTML += ` - Hair: ${profile.hair}<br/>`;
        resultSection.innerHTML += ` - Eyes: ${profile.eyes}<br/>`;
        resultSection.innerHTML += ` - Skin Tone: ${profile.skintone}<br/>`;
      }
      resultSection.innerHTML += "<br/>";


    // 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));
});