{% extends 'base/base.html' %}
{% block start %}

<section class="main_content dashboard_part default_content">
    <div class="main_content_iner ">
        <div class="container-fluid p-0">
            <div class="row ">
                <div class="col-lg-12">
                    <div class="row design-white-box">
                        <div class="col-lg-12">
                        
                           <div class="dropdown">
                            <div class="input-group">
                                <textarea class="form-control" id="selectedSkills" name="skill" placeholder="Select Operator" aria-label="Select Operator" aria-describedby="dropdownMenuButton" oninput="resizeTextarea()">{{item.skill}}</textarea>
                                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  <span class="dropdown-icon"></span>
                                </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="height: 200px; overflow-y: auto;">
                        {% for operator in data %}
                        <div class="form-check" style="padding-left: 2.5em important;">
                            <input class="form-check-input check-step" type="checkbox" id="{{operator.id}}" name="{{operator.id}}" value="{{operator.name|default:''}}" onchange="updateSelectedSkills()">
                            <label class="form-check-label" for="{{operator.id}}" style="font-size:8px;">{{operator.name}}</label>
                    </div>
                          <!-- <a class="dropdown-item" onclick="selectArticle('{{operator.id}}','{{operator.name}}')">{{operator.name}}</a> -->
                        {% endfor %}
                        </div>
                            </div>
                            
                        </div>
                        </div>
                        </div>

                </div>
            </div>
        </div>
    </div>
</section>

<script>
 var selectedSkills = [];
 var names = [];

function updateSelectedSkills() {
  var selectedItemSkill = document.getElementById('selectedSkills').value;
  var selectedSkillsArray = selectedItemSkill.split(',');

  var checkboxes = document.querySelectorAll('.check-step');

  selectedSkills = [];
  names = [];

  checkboxes.forEach(function (checkbox) {
    // Iterate over selected skills
    for (var j = 0; j < selectedSkillsArray.length; j++) {
      var selectedSkill_data = selectedSkillsArray[j].trim();

      // If a checkbox's value matches the selected skill
      if (checkbox.value === selectedSkill_data) {
        // Set the checked attribute based on checkbox value and selectedSkillsArray
        checkbox.checked = true;
      }
    }

    // Add event listener to checkbox
    checkbox.addEventListener('click', function() {
      if (this.checked) {
        // If the checkbox is checked, add it to selectedSkills
        selectedSkills.push(this.id);
      } else {
        // If the checkbox is unchecked, remove it from selectedSkills
        var index = selectedSkills.indexOf(this.id);
        if (index !== -1) {
          selectedSkills.splice(index, 1);
        }
      }
      
      var textarea = document.getElementById('selectedSkills');
      textarea.value = selectedSkills.join(', ');
      resizeTextarea();

      
    });

   
    // If the checkbox is checked, add it to selectedSkills
    if (checkbox.checked) {
      selectedSkills.push(checkbox.id);
      names.push(checkbox.value);
    }
  });

  var textarea = document.getElementById('selectedSkills');
  textarea.value = names.join(', ');
  resizeTextarea();

  console.log(selectedSkills, 's');
}

function resizeTextarea() {
  var textarea = document.getElementById('selectedSkills');
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}
</script>


{% endblock %}