{% extends 'base/base.html' %}
{% block start %}
<style>
.input-margin {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>

<section class="main_content dashboard_part large_header_bg">


<div class="main_content_iner ">
<div class="container-fluid p-0">
<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">Operation</h3>
</div>
</div>
</div>
<div class="white_card_body">
<div class="QA_section">
<div class="white_box_tittle list_header">
<h4> </h4>
<div class="dropdown" style="position: absolute;">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Select Group
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    {% for article in data_articlegroup %}
    <a class="dropdown-item" onclick="displayForm('{{article.id}}','{{article.title}}')">{{article.title}} / {{article.bundle_size}}</a>
    {% endfor %}
</div>
</div>
<div class="box_right d-flex lms_block">
<div class="serach_field_2">
<div class="search_inner">
<form active="#">
<div class="search_field">
<input type="text" placeholder="Search content here...">
</div>
<button type="submit"> <i class="ti-search"></i> </button>
</form>
</div>
</div>
   
<div class="add_button ms-2">
{% comment %} <a href="{%url 'Add_operator' %}" class="btn_1">Add New</a> {% endcomment %}
</div>
</div>
</div>
{% comment %} <div class="white_card_body"> {% endcomment %}
{% comment %} <div class="card-body"> {% endcomment %}
{% comment %} <form method="POST" action="{% url 'Add_article' %}" enctype="multipart/form-data">
 {% endcomment %}
<div id="formContainer" style="display: none;">
  <form id="myForm" method="POST" enctype="multipart/form-data">
    {% comment %} {% csrf_token %} {% endcomment %}
    <div class="row mb-3">
      <div class="col-md-6">
        <input type="text" class="form-control" id="inputTitle" placeholder="Enter Operation title" name="title">
      </div>
      <div class="col-md-6">
        <input type="text" class="form-control" id="inputBundleSize" placeholder="Enter Operation title" name="title">
      </div>
    </div>
    <div class="row mb-3">
      <div class="col-md-6">
        <input type="text" class="form-control" id="inputOtherField" placeholder="Enter Operation title" name="title">
      </div>
      <div class="col-md-6">
        <input type="text" class="form-control" id="inputOtherField" placeholder="Enter Operation title" name="title">
        <a href="#" id="addInputLink" onclick="addInputField()" style="float:right">Add more </a>
      </div>
    </div>

    <button type="button" onclick="submitForm()" id="reviewSubmitBtn" class="btn btn-primary" style="float:right">
      Add Operations
    </button>
  </form>
</div>


</div>
</div>
</div>
</div>
<div class="col-12">
</div>
</div>
</div>
</div>

<div class="footer_part">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="footer_iner text-center">
{% comment %} <p>2020 © Influence - Designed by <a href="#"> <i class="ti-heart"></i> </a><a href="#"> Dashboard</a></p> {% endcomment %}
</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.6.0.min.js"></script>
<script>
 
  function displayForm(articleId,title) {

    document.getElementById('dropdownMenuButton').textContent = title;
    // Show the form
    var formContainer = document.getElementById('formContainer');
    formContainer.style.display = 'block';

    // Set the articleId as a data attribute on the dropdown button
    var dropdownButton = document.getElementById('dropdownMenuButton');
    dropdownButton.setAttribute('data-article-id', articleId);
  }

function addInputField() {
  var formContainer = document.getElementById("formContainer");
  var targetRow = formContainer.querySelector(".row:nth-child(2)"); // Get the second row
  var targetNode = targetRow.querySelector(".col-md-6:last-child"); // Get the third input field

  var newCol = document.createElement("div");
  newCol.className = "col-md-6";

  var newInput = document.createElement("input");
  newInput.type = "text";
  newInput.className = "form-control input-margin";
  newInput.placeholder = "Enter Operation title";
  newInput.name = "title";

  newCol.appendChild(newInput);

  var addInputLink = document.getElementById("addInputLink");
  newCol.appendChild(addInputLink); // Append link to the new column

  targetRow.insertBefore(newCol, targetNode.nextSibling); // Insert the new column after the third input field
}

 function submitForm() {
  var articleId = document.getElementById('dropdownMenuButton').getAttribute('data-article-id');
  var form = document.getElementById('myForm');
  var formData = new FormData(form);
  var formValues = [];

  for (var value of formData.values()) {
    if (value !== 'none' && value !== null && value !== "") {  // Exclude "none" values
      formValues.push(value);
    }
  }

  if (formValues.length === 0) {
    alert('No valid form values to submit.');
    return;
  }

  var dataToSend = {
    articleId: articleId,
    fields: formValues
  };
  
  var serializedData = JSON.stringify(dataToSend);
  console.log(serializedData);

  // Get the CSRF token value from the template variable
  var csrftoken = '{{ csrf_token }}';

  // Perform AJAX request or any other action to send the data
  $.ajax({
    url: '{% url "operations_page" %}',
    method: 'POST',
    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');
      console.log(response);
       window.location.href = "{% url 'operations_page' %}";

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


{% endblock %}