{% 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">Add Operator</h3>
</div>
</div>
</div>
<div class="white_card_body">
<div class="card-body">
{% comment %} <form method="POST" action="{% url 'Add_article' %}" enctype="multipart/form-data">
 {% endcomment %}
<form>

<div class="row mb-3">
<div class="col-md-6">
<label class="form-label" for="inputEmail4">Name</label>
<input type="text" class="form-control" id="inputEmail4" placeholder="Enter Name" name="Name">
</div>
<div class="col-md-6">
<label class="form-label" for="inputPassword4">CNIC</label>
<input type="text" class="form-control" id="inputPassword4" placeholder="Enter CNIC" name="cnic">
</div>
</div>

 <div class="row mb-3">
<div class="col-md-6">
<label class="form-label" for="inputEmail4">Cell</label>
<input type="text" 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" 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">Select Skill</label>
<div class="dropdown">
  <div class="input-group">
    <textarea class="form-control" id="selectedSkills" placeholder="Select Skill" aria-label="Select Skill" aria-describedby="dropdownMenuButton" oninput="resizeTextarea()"></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 class="col-md-4">
  <label class="form-label" for="inputPassword4">Tag ID</label>
  <input type="text" value=" " 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> 


 <button type="button"  class="btn btn-primary" style="float:right" id="addOperatorButton">Add Operator</button> 
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


</section>


<!-- review_form.html -->



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

<!-- review_form.html -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
  
  // Retrieve the CSRF token value from the template variable
 
  // Event listener for the "Add Operator" button click
  $('#addOperatorButton').click(function() {
    var Name = $('[name="Name"]').val();
    var cnic = $('[name="cnic"]').val();
    var cell = $('[name="cell"]').val();
    var address = $('[name="address"]').val();
    var selectedSkills = $('#selectedSkills').val();
    var tag_id = $('[name="tag_id"]').val();

    // Create an object to hold the form data
    var formData = {
      'Name': Name,
      'cnic': cnic,
      'cell': cell,
      'address': address,
      'skill': selectedSkills,
      'tag_id': tag_id
    };
    var serializedData = JSON.stringify(formData);
    console.log(serializedData);

    // Get the CSRF token value from the template variable
    var csrftoken = '{{ csrf_token }}';
    //Make the AJAX request to submit the form data
    $.ajax({
      type: 'POST',
      url: "{% url 'Add_operator' %}",
      data: serializedData,
      contentType: 'application/json',
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader('X-CSRFToken', csrftoken);
      },
      success: function(response) {
        console.log('Received the ID on the server');
        window.location.href="{% url 'operator_page' %}"
        console.log(response.data_article);

        // Handle the response from the server if needed
      },
      error: function(error) {
        // Handle the error response, e.g., show an error message
        alert('Error submitting the review. Please try again.');
      }
    });
  });

</script>

<!-- <script>
  $(document).ready(function() {
    $('#reviewSubmitBtn').click(function() {
      var Name = $('[name="Name"]').val();
      var cnic = $('[name="cnic"]').val();
      var cell = $('[name="cell"]').val();
      var address = $('[name="address"]').val();
      var skill = $('[name="skill"]').val();
      var tag_id = $('[name="tag_id"]').val();
    
      // Populate modal with entered data
      $('#Name').text(Name);
      $('#cnic').text(cnic);
      $('#cell').text(cell);
      $('#address').text(address); 
      $('#skill').text(skill);
      $('#tag_id').text(tag_id);

      // Show the modal
      $('#reviewModal').modal('show');
    });

    $('#confirm-review').click(function() {
      var Name = $('[name="Name"]').val();
      var cnic = $('[name="cnic"]').val();
      var cell = $('[name="cell"]').val();
      var address = $('[name="address"]').val();
      var skill = $('[name="skill"]').val();
      var tag_id = $('[name="tag_id"]').val();

      // Make the API request to submit the review
      $.ajax({
        type: 'POST',
        url: "{% url 'Add_operator' %}",
        data: $('#reviewForm').serialize(),
        success: function(response) {
          // Handle the success response, e.g., show a success message
           window.location.href = "{% url 'operator_page' %}"; // Reload the page after submitting the review
        },
        error: function(error) {
          // Handle the error response, e.g., show an error message
          alert('Error submitting the review. Please try again.');
        }
      });
      // Close the modal
      $('#reviewModal').modal('hide');
    });
  });
</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>

<script>
  var selectedSkills = [];

  function updateSelectedSkills() {
    var checkboxes = document.querySelectorAll('.check-step');
    selectedSkills = [];

    checkboxes.forEach(function(checkbox) {
      if (checkbox.checked) {
        selectedSkills.push(checkbox.value);
      }
    });

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

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


</script>
 
{% endblock %}