{% 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">
<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">Steps</h3>
</div>
</div>
</div>
<div class="white_card_body">
<div class="QA_section">
<div class="white_box_tittle list_header" style="display: flex;
    justify-content: flex-start;important">
<h4> </h4>

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Article
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{% for article in data_artcile %}
  <a class="dropdown-item" onclick="selectArticle('{{article.ID}}','{{article.title}}')">{{article.title}}</a>
{% endfor %}
</div>
</div>

<div class="dropdown" style="margin-left:39px">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton_1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Group
</button>
<div class="dropdown-menu group_menu" aria-labelledby="dropdownMenuButton_1" >

<a class="dropdown-item" onclick="selectMachine('{{machine.ID}}','{{machine.title}}')">{{machine.title}}</a>

</div>
</div>


<div class="add_button ms-2">

</div>
</div>
</div>
<div class="QA_table mb_30">

<table class="table lms_table_active ">
<thead>
<tr>

<th scope="col">Id</th>
<th scope="col">Article </th>
<th scope="col">Group</th>
<th scope="col">Tag ID</th>
<th scope="col">State</th>
<th scope="col">Quality Assurance</th>
<th scope="col">Created_on</th>
<th scope="col">Action</th>

</tr>
</thead>
<tbody id="steps-container">
 

</tbody>
</table>
</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">

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


<div class="modal-data"></div>


{% comment %} <div class="modal fade bd-example-modal-lg"  id="{{item.ID}}-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content p-4">

<div id="groupContainer">
<div class="col-lg-12">
<div class="card_box box_shadow position-relative mb_30 " >
<div class="white_box_tittle " style="padding:12px!important">
<div class="main-title2">
<h4 class="mb-2 nowrap" style="margin:10px">Steps </h4>
</div>
</div>
<div class="box_body">
<table class="table lms_table_active ">
<thead>
<tr>

<th scope="col">Id</th>
<th scope="col">Article </th>
<th scope="col">Machine</th>
<th scope="col">Operator</th>
<th scope="col">Steps</th>
<th scope="col">Start Time</th>
<th scope="col">End Time</th>


</tr>
</thead>
<tbody id="steps_data">
 
</tbody>
</table>



<div class="modal-footer">


</div>
</div>
</div> {% endcomment %}




<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 src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script>
   function selectArticle(id,title) {

// Create a data object to send to the server
// Convert the id to an integer4

article_name =  document.getElementById('dropdownMenuButton').textContent = title;


articleId = parseInt(id, 10);

// Create a data object to send to the server
var data = {
    'id': articleId
};
//console.log(data);
// Serialize the data object
var serializedData = JSON.stringify(data);
console.log(serializedData);

// Get the CSRF token value from the cookie
var csrftoken = Cookies.get('csrftoken');
// Send the serialized data to the server using AJAX
$.ajax({
  url: '{% url "getgroupstep" %}',
  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);
    var dataGroup = response.data_group; // Assuming the server returns the 'data_steps' in the response
    //console.log(dataGroup,'aqsa');
    // Add an event listener to the "Select Group" button
    document.getElementById('dropdownMenuButton_1').addEventListener('click', function() {
    var dropdownMenu = document.querySelector('.group_menu');
    while (dropdownMenu.length > 0) {
          dropdownMenu[0].remove();
      }
    // Clear existing dropdown items
    dropdownMenu.innerHTML = '';

    // Assuming the response is stored in the 'dataGroup' variable
    for (var i = 0; i < dataGroup.length; i++) {
      var groupinfo = dataGroup[i];
      var dropdownItem = document.createElement('a');
      dropdownItem.className = 'dropdown-item';
      dropdownItem.setAttribute('onclick', "selectGroup('" + groupinfo.id + "', '" + groupinfo.title + "')");
      dropdownItem.textContent = groupinfo.title;
      dropdownMenu.appendChild(dropdownItem);
    }
  });

          
    // 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.');
  }
});
}

function selectGroup(id,title){

group_id = parseInt(id, 10);
group_name = title

document.getElementById('dropdownMenuButton_1').textContent = title;

//console.log(group_id)
// Create a data object to send to the server
var data = {
    'id': group_id
};
//console.log(data);
// Serialize the data object
var serializedData = JSON.stringify(data);
console.log(serializedData);

// Get the CSRF token value from the cookie
var csrftoken = Cookies.get('csrftoken');
// Send the serialized data to the server using AJAX
$.ajax({
  url: '{% url "getStepsbyGroups" %}',
  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);
     dataSteps = response.step_data; // Assuming the server returns the 'data_steps' in the response
     console.log(dataSteps,'step')
    //console.log(dataSteps);
    updateStepsOnPage(dataSteps);
    

    // 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.');
  }
});

}


function updateStepsOnPage(dataSteps) {
  // Clear the existing steps
  
  $('#steps-container').empty();

  dataSteps.forEach(function(item, index) {
    var orderNo = index + 1;
    var stepHtml = '<tr>' +
      '<td>' + orderNo + '</td>' +
      '<td>' + item.article_title + '</td>' +
      '<td>' + item.group_id + '</td>' +
      '<td>' + item.tag_ID + '</td>' +
      '<td>' + item.bundle_states + '</td>' +
      '<td>' + item.quality_assurance + '</td>' +
      '<td>' + item.created_on + '</td>' +
      '<td>' + '<button type="button" onclick="selectstep('+ item.ID + ')" class="btn btn-primary view-button" data-bs-toggle="modal" data-bs-target="#modal-' + item.ID + '">View</button>' + '</td>' +
      '</tr>';

    // Append the new steps
    $('#steps-container').append(stepHtml);
  });

  // Add modals for each step
  dataSteps.forEach(function(item) {
    var modalHtml = '<div class="modal fade bd-example-modal-lg" id="modal-' + item.ID + '" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">' +
      '<div class="modal-dialog modal-lg">' +
      '<div class="modal-content p-4">' +
      '<div id="groupContainer">' +
      '<div class="col-lg-12">' +
      '<div class="card_box box_shadow position-relative mb_30 " >' +
      '<div class="white_box_tittle " style="padding:12px!important">' +
      '<div class="main-title2">' +
      '<h4 class="mb-2 nowrap" style="margin:10px">Steps </h4>' +
      '</div>' +
      '</div>' +
      '<div class="box_body">' +
      '<div class="QA_table mb_30">'+
      '<table class="table lms_table_active ">' +
      '<thead>' +
      '<tr>' +
      '<th scope="col">Id</th>' +
      '<th scope="col">Article</th>' +
      '<th scope="col">Machine</th>' +
      '<th scope="col">Operator</th>' +
      '<th scope="col">Steps</th>' +
      '<th scope="col">Start Time</th>' +
      '<th scope="col">End Time</th>' +
      '</tr>' +
      '</thead>' +
      '<tbody class="steps_data">' +
      '</tbody>' +
      '</table>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>';

    // Append the modal
    $('.modal-data').append(modalHtml);
  });

  // Event listener for "View" button clicks
  $('.view-button').on('click', function() {
    var targetModalId = $(this).data('bs-target');
    $(targetModalId).modal('show');
  });
}




function selectstep(id){

console.log(id,'step_id');
var data = {
    'id': id
};
//console.log(data);
// Serialize the data object
var serializedData = JSON.stringify(data);
console.log(serializedData);

// Get the CSRF token value from the cookie
var csrftoken = Cookies.get('csrftoken');
// Send the serialized data to the server using AJAX
$.ajax({
  url: '{% url "getStepBundle" %}',
  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);
     dataSteps_info = response.step_info; // Assuming the server returns the 'data_steps' in the response
     console.log(dataSteps_info,'stepinfo')
    //console.log(dataSteps);
    updateSteps(dataSteps_info);
    

    // 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.');
  }
});

}


function updateSteps(dataSteps_info) {
  $('.steps_data').empty();
    
  if (dataSteps_info && dataSteps_info.length > 0) {
    dataSteps_info.forEach(function(item, index) {
      var orderNo = index + 1;
      var stepHtmls = '<tr>' +
        '<td>' + orderNo + '</td>' +
        '<td>' + item.article_title + '</td>' +
        '<td>' + item.machine_title + '</td>' +
        '<td>' + item.operatpr_name + '</td>' +
        '<td>' + item.steps + '</td>' +
        '<td>' + item.startTime + '</td>' +
        '<td>' + item.endTime + '</td>' +
        '</tr>';

      // Append the new steps
      $('.steps_data').append(stepHtmls);
    });
  } else {
    // No data available
    var noDataHtml = '<tr><td colspan="7" style="text-align:center;">No data available</td></tr>';
    $('.steps_data').append(noDataHtml);
  }
}




</script>




{% endblock %}