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

{% comment %} <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> {% endcomment %}
   
<div class="add_button ms-2">
{% comment %} <a href="{%url 'Add_Step' %}" class="btn_1">Add New</a> {% endcomment %}
</div>
</div>
</div>
<div class="QA_table mb_30">

<table class="table lms_table_active ">
<thead>
<tr>
{% comment %} <th scope="col">Id</th> {% endcomment %}
<th scope="col">Id</th>
<th scope="col">Title</th>
<th scope="col">Last Step</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">
{% 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 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
    document.getElementById('dropdownMenuButton').textContent = title;

    var 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 "step_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);
        var dataSteps = response.data_steps; // Assuming the server returns the 'data_steps' in the response
        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();
  
  // Append the new steps
  dataSteps.forEach(function(item, index) {
     var editUrl = "{% url 'Edit_Steps' id='__id__' %}".replace('__id__', item.id);
    var stepHtml = '<tr>' +
                   '<td>' + (index + 1) + '</td>' +
                   '<td>' + item.title + '</td>' +
                   '<td>' + item.last_step + '</td>' +
                   '<td>' + item.created_on + '</td>' +
                   '<td><a href="' + editUrl + '" class="status_btn">Edit</a></td>' +
                   '</tr>';
    $('#steps-container').append(stepHtml);
  });
}
</script>


{% endblock %}