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


<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 Operator</h3>
</div>
</div>
</div>

<div class="white_card_body">
<div class="card-body">
        
        <form method="POST" action="/EditOperator/{{item.ID}}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="row mb-3">
        <div class="col-md-6">
        <label class="form-label" for="inputEmail4">Name</label>
        <input type="text" value="{{item.Name}}" class="form-control" id="inputEmail4" placeholder="Enter Name" name="Name">
        </div>
      
        <div class="col-md-4">
        <label class="form-label" for="inputPassword4">Tag ID</label>
        <input type="text" value="{{item.tag_id}}" id="tagIdInput" class="form-control" id="inputPassword4" placeholder="Enter Tag ID" name="tag_id">
        </div>
        <div class="col-md-2">
        <button type="button" id="scanButton" class="btn btn-primary" style="margin-top: 25px;float: right">Scan Tag ID</button>
        </div>
        </div>

        <div class="row mb-3">
        <div class="col-md-6">
        <label class="form-label" for="inputEmail4">Cell</label>
        <input type="text" value="{{item.cell}}" class="form-control" id="inputEmail4" placeholder="Enter Cell Num" name="cell">
        </div>
        <div class="col-md-6">
        <label class="form-label" for="inputPassword4">Address</label>
        <input type="text"  value="{{item.address}}" class="form-control" id="inputPassword4" placeholder="Enter Address" name="address">
        </div>
        </div> 

        <div class="row mb-3">
          <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>
         
      
        
        
          
        <!-- <label class="form-label" for="inputCity">Skill</label>
        <input type="text" value="{{item.skill}}" class="form-control" placeholder="Enter Skill"  id="inputCity" name="skill"> -->
        </div>
        <div class="col-md-6">
        <label class="form-label" for="inputPassword4">CNIC</label>
        <input type="text" value="{{item.cnic}}" class="form-control" id="inputPassword4" placeholder="Enter CNIC" name="cnic">
        </div> 
        
        </div> 

        <button type="submit" class="btn btn-primary" style="float:right">Save Operator</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 src="https://code.jquery.com/jquery-3.5.1.min.js"></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>


<script>
  // Check if jQuery library is loaded
  if (window.jQuery) {
    $(document).ready(function() {
      // Bind a click event to the scan button
      $('#scanButton').click(function() {
        // Show an alert to prompt the user to scan the tag ID
        alert('Please scan the tag ID.');

        // Send an AJAX request to the server
        $.ajax({
          type: 'GET',
          url: '{% url "tag_id_operator" %}',  // URL of your Django view function
          success: function(response) {
            // Update the input field with the received tag ID
            $('#tagIdInput').val(response.number);
          },
          error: function() {
            alert('Failed to retrieve the tag ID.');
          }
        });
      });
    });
  } else {
    alert('jQuery library is not loaded. Make sure you have included it.');
  }
</script>


{% endblock %}