{% 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 Bundle</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">Tag ID</label>
<input type="text" class="form-control" id="inputPassword4" placeholder="Enter Tag ID" name="tag_ID">
</div>
</div>

 <div class="row mb-3">
<div class="col-md-6">
<label class="form-label" for="inputEmail4">Step ID</label>
<input type="text" class="form-control" id="inputEmail4" placeholder="Enter Step ID" name="step_ID">
</div>
<div class="col-md-6">
<label class="form-label" for="inputPassword4">Bundle Size</label>
<input type="text" class="form-control" id="inputPassword4" placeholder="Bundle Size" name="bundleSize">
</div>
</div> 

 <div class="row mb-3">
<div class=" col-md-6">
<label class="form-label" for="inputCity">State</label>
<input type="text" class="form-control" placeholder="Enter State"  id="inputCity" name="state">
</div>
<div class=" col-md-6">
<label class="form-label" for="inputCity">Status</label>
<input type="text" class="form-control" placeholder="Enter Status" id="inputCity" name="status">
</div>
</div> 
<button type="button" id="reviewSubmitBtn" class="btn btn-primary" style="float:right">
  Review Bundle
</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 Bundle</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>Tag ID:  <span id="tag_ID"></span></p>
    <p>Step ID:  <span id="step_ID"></span></p>
    <p>Bundle Size:<span id="bundleSize"></span></p>
    <p>State:<span id="state"></span></p>
    <p>Status:<span id="status"></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 Bundle</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 tag_ID = $('[name="tag_ID"]').val();
      var step_ID = $('[name="step_ID"]').val();
      var bundleSize = $('[name="bundleSize"]').val();
      var state = $('[name="state"]').val();
      var status = $('[name="status"]').val();
    
      // Populate modal with entered data
      $('#article_ID').text(article_ID);
      $('#tag_ID').text(tag_ID);
      $('#step_ID').text(step_ID);
      $('#bundleSize').text(bundleSize); 
      $('#state').text(state);
      $('#status').text(status);

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

    $('#confirm-review').click(function() {
      var article_ID = $('[name="article_ID"]').val();
      var tag_ID = $('[name="tag_ID"]').val();
      var step_ID = $('[name="step_ID"]').val();
      var bundleSize = $('[name="bundleSize"]').val();
      var state = $('[name="state"]').val();
      var status = $('[name="status"]').val();

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