{% 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 Machine</h3>
</div>
</div>
</div>
<div class="white_card_body">
<div class="card-body">

<form>

<div class="row mb-3">
<div class="col-md-12">
<label class="form-label" for="inputEmail4">Title</label>
<input type="text" 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" class="form-control" id="inputEmail4" placeholder="Enter Device ID" name="device_ID">
</div>

<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>





 <button type="button" class="btn btn-primary"  id="machineadd" style="float:right">Add 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>

<!-- review_form.html -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  
  // Retrieve the CSRF token value from the template variable
 
  // Event listener for the "Add Operator" button click
  $('#machineadd').click(function() {
    var title = $('[name="title"]').val();
    var device_ID = $('[name="device_ID"]').val();
    var selectedSkills = $('#selectedSkills').val();
   

    // Create an object to hold the form data
    var formData = {
      'title': title,
      'device_ID': device_ID,
      'skill': selectedSkills
    }
      
    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_Machine' %}",
      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 'machine_page' %}"
        console.log(response.data_machine);

        // 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 title = $('[name="title"]').val();
      var device_ID = $('[name="device_ID"]').val();
      var step_ID = $('[name="step_ID"]').val();
      var state = $('[name="state"]').val();
    
    
      // Populate modal with entered data
      $('#title').text(title);
      $('#device_ID').text(device_ID);
      $('#step_ID').text(step_ID);
      $('#state').text(state);

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

    $('#confirm-review').click(function() {
      var title = $('[name="title"]').val();
      var device_ID = $('[name="device_ID"]').val();
      var step_ID = $('[name="step_ID"]').val();
      var state = $('[name="state"]').val();
    

      // Make the API request to submit the review
      $.ajax({
        type: 'POST',
        url: "{% url 'Add_Machine' %}",
        data: $('#reviewForm').serialize(),
        success: function(response) {
          // Handle the success response, e.g., show a success message
          window.location.href = "{% url 'machine_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>
  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 %}