// Insert selects
// X_001: Textilart
$('.answer-item.answer_cell_X001', thisQuestion).addClass('with-select').append(
'<select class="inserted-select form-control list-question-select">\
<option value="">Bitte auswählen</option>\
<option value="1">T-Shirt</option>\
<option value="2">Hoody</option>\
<option value="3">Fleecejacke Vintage</option>\
<option value="4">Fleecejacke</option>\
<option value="5">Polo</option>\
<option value="6">Softshelljacke</option>\
<option value="7">Softshellweste</option>\
<option value="8">Sweatshirt</option>\
<option value="9">Zip-Hoody</option>\
</select>');
 
// X_003: Farbe (abhängig von X_001)
$('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append(
'<select class="inserted-select form-control list-question-select">\
<option value="">Bitte Textil wählen!</option>\
</select>');
 
// X_004: Größe (abhängig von X_001)
$('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append(
'<select class="inserted-select form-control list-question-select">\
<option value="">Bitte Textil wählen!</option>\
</select>');

// Helpers, dicts set the right text, value combination
var thisQuestion = $('#question{QID}');
var sizes = {
    "XS": "1",
    "S": "2",
    "M": "3",
    "L": "4",
    "XL": "5",
    "XXL": "6",
    "3XL": "7",
    "4XL": "8",
    "5XL": "9",
};
var colors = {
    "Anthrazit": "1",
    "Anthrazit/Platin": "2",
    "Charcoal": "3",
    "Grau": "4",
    "Schwarz": "5",
    "Steel Grey": "6",
    "Weiß": "7",
    "Zinn": "8",
};

    // Listeners: Changing of textile type will populate the other select fields
    $('.answer-item.answer_cell_X001 .inserted-select', thisQuestion).on('change', function(i) {
      let textilCode = $('option:selected', this).val();
      let textilName = $('option:selected', this).text();
      let allowedColors;
      let allowedSizes;
 
      // Select fields for size and color
      let colorSelect = $(this).closest('tr').find('.answer-item.answer_cell_X003 .inserted-select');
      let sizeSelect = $(this).closest('tr').find('.answer-item.answer_cell_X004 .inserted-select');
 
      // Clear select fields and add dummy text
      colorSelect.find('option').remove().end().append('<option value="">Bitte auswählen</option>').val('');
      sizeSelect.find('option').remove().end().append('<option value="">Bitte auswählen</option>').val('');
   
      // Prepare population of other dropdowns
      switch (textilName) {
        case 'T-Shirt':
          allowedColors = ["Schwarz", "Steel Grey", "Weiß"];
          allowedSizes = ["XS", "S", "M", "L", "XL", "XXL", "3XL", "4XL", "5XL"];
          break;
        case 'Hoody':
          // TODO: Update der Größen und Farben
          allowedColors = ["Weiß"];
          allowedSizes = ["5XL"];
        break;
        case 'Fleecejacke Vintage':
          // TODO: Update der Größen und Farben
          allowedColors = ["Weiß"];
          allowedSizes = ["5XL"];
        break;
        case 'Fleecejacke':
          // TODO: Update der Größen und Farben
          allowedColors = ["Weiß"];
          allowedSizes = ["5XL"];
          break;
        case 'Polo':
          // TODO: Update der Größen und Farben
          allowedColors = ["Weiß"];
          allowedSizes = ["5XL"];
          break;
        case 'Softshelljacke':
          // TODO: Update der Größen und Farben
          allowedColors = ["Weiß"];
          allowedSizes = ["5XL"];
          break;
        case 'Softshellweste':
          // TODO: Update der Größen und Farben
          allowedColors = ["Weiß"];
          allowedSizes = ["5XL"];
          break;
        case 'Sweatshirt':
          // TODO: Update der Größen und Farben
          allowedColors = ["Weiß"];
          allowedSizes = ["5XL"];
          break;
        case 'Zip-Hoody':
          // TODO: Update der Größen und Farben
          allowedColors = ["Weiß"];
          allowedSizes = ["5XL"];
          break;
        default:
          break;
      }
    
 
      // Populate select fields based on switch selection
      $.each(allowedColors, function(_, value) {
        colorSelect.append($("<option></option>").attr("value", colors[value]).text(value)); 
      });
      $.each(allowedSizes, function(_, value) {
        sizeSelect.append($("<option></option>").attr("value", sizes[value]).text(value)); 
      });
 
    });