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

<style>
        #selectedSkills {
          height: 10px;
          resize: vertical;
        }
      </style>
      

<section class="main_content dashboard_part large_header_bg">

<div class="main_content_iner ">
<div class="container-fluid p-0 sm_padding_15px">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="white_card card_height_100 mb_30">
<div class="white_card_header">
<div class="box_header m-0">
<div class="main-title">
<h3 class="m-0">Edit Machine</h3>
</div>
</div>
</div>

<div class="white_card_body">
<div class="card-body">
        {% comment %} {% for item in data %} {% endcomment %}
        <form method="POST" action="/EditMachine/{{item.ID}}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="row mb-3">
        <div class="col-md-12">
        <label class="form-label" for="inputEmail4">Title</label>
        <input type="text"  value="{{item.title}}" class="form-control" id="inputEmail4" placeholder="Title" name="title">
        </div>

        </div>

        <div class="row mb-3">
        <div class="col-md-6">
        <label class="form-label" for="inputEmail4">Device ID</label>
        <input type="text" value="{{item.device_tid}}" class="form-control" id="inputEmail4" placeholder="Enter Device ID" name="device_ID">
        </div>
        <div class="col-md-6">
        <label class="form-label" for="inputPassword4">Skill</label>
        <div class="dropdown">
        <div class="input-group">
        <textarea class="form-control" id="selectedSkills" name="skill" placeholder="Select Skill" aria-label="Select Skill" 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 skill in skills %}
        <div class="form-check" style="padding-left: 2.5em; important">
                <input class="form-check-input check-step" type="checkbox" id="{{skill.id}}" name="{{skill.id}}" value="{{skill.title|default:''}}" onchange="updateSelectedSkills()">
                <label class="form-check-label" for="{{skill.id}}" style="font-size:12px;">{{skill.title}}</label>
        </div>
        {% endfor %}
        </div>
        </div>
        </div>
        </div>
        </div> 

        <div class="row mb-3">
        <div class="col-md-6">
        <label class="form-label" for="inputPassword4">Machine State</label>
        <!-- <input type="text"  value="{{item.state}}" class="form-control" id="date_value" placeholder="Enter Machine State" name="state" > -->
        <div class="dropdown">
        <div class="input-group">
        <input type="hidden" value="{{item.state_id}}" name="state" id="selectedState">
        <input type="text" value="{{item.state}}" class="form-control" id="stateTitle" readonly>
        {% comment %} <input type="text"  value="{{item.state}}" name="state"  id="date_value" class="form-control" id="date_value" placeholder="Enter Machine State" name="state" > {% endcomment %}
        <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 machine in state %}
        <a class="dropdown-item" onclick="selectMachineState('{{machine.ID}}','{{machine.state}}')">{{machine.state}}</a>
        {% endfor %}
        </div>
        </div>
        </div>
        </div>
        </div>

        <button type="submit" class="btn btn-primary" style="float:right">Save Machine</button>
        </form>
       
    
</div>
</div>

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

</section>



<div id="back-top" style="display: none;">
<a title="Go to Top" href="#">
<i class="ti-angle-up"></i>
</a>
</div>


<script>
  function selectMachineState(stateID, stateTitle) {
    document.getElementById('selectedState').value = stateID;
    document.getElementById('stateTitle').value = stateTitle;
  }
</script>

<script>

 var selectedSkills = [];

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

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

  selectedSkills = [];

  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.value);
      } else {
        // If the checkbox is unchecked, remove it from selectedSkills
        var index = selectedSkills.indexOf(this.value);
        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.value);
    }
  });

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

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


function resizeTextarea() {
  var textarea = document.getElementById('selectedSkills');
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}
 document.getElementById('dropdownMenuButton').addEventListener('click', function() {
      updateSelectedSkills();
    });


  
</script>





{% endblock %}