{% 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 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 Steps</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 method="POST" enctype="multipart/form-data" id="reviewForm">
 {% csrf_token %}
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label" for="inputEmail4">Article ID</label>
<input type="text" class="form-control" id="inputEmail4" placeholder="Enter Article ID" name="article_ID">
</div>
<div class="col-md-6">
<label class="form-label" for="inputPassword4">Title</label>
<input type="text" class="form-control" id="inputPassword4" placeholder="Enter Title" name="title">
</div>
</div>

 <div class="row mb-3">
<div class="col-md-6">
<label class="form-label" for="inputEmail4">Last Step</label>
<input type="text" class="form-control" id="inputEmail4" placeholder="Enter Last Step" name="last_step">
</div>
</div> 
 

 
<button type="button" id="reviewSubmitBtn" class="btn btn-primary" style="float:right">
  Review Steps
</button>

{% comment %} <button type="submit" class="btn btn-primary" style="float:right">Add Article</button> {% endcomment %}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


</section>

<div class="modal fade" id="reviewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Review Steps</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
    <p>Article ID :  <span id="article_ID"></span></p>
    <p>Title :  <span id="title"></span></p>
    <p>Last Step :  <span id="last_step"></span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" style="float:right" id="confirm-review">Add Steps</button> 
</div>
</div>
</div>
</div>
<!-- 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.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#reviewSubmitBtn').click(function() {
      var article_ID = $('[name="article_ID"]').val();
      var title = $('[name="title"]').val();
      var last_step = $('[name="last_step"]').val();
      
    
      // Populate modal with entered data
      $('#article_ID').text(article_ID);
      $('#title').text(title);
      $('#last_step').text(last_step);
  

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

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

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


{% endblock %}