{% 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 Machine</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-12">
<label class="form-label" for="inputEmail4">Title</label>
<input type="text" class="form-control" id="inputEmail4" placeholder="Title" name="title">
</div>

</div>

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

<div class="row mb-3">
<div class="col-md-6">
<label class="form-label" for="inputPassword4">Machine State</label>
<input type="text" class="form-control" id="date_value" placeholder="Enter Machine State" name="state" >

</div>
 
</div> 
<button type="button" id="reviewSubmitBtn" class="btn btn-primary" style="float:right">
  Review Machine
</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 Machine</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>Title: <span id="title"></span></p>
    <p>Device ID:<span id="device_ID"></span></p>
    <p>Step ID:<span id="step_ID"></span></p>
    <p>Machine State: <span id="state"></span></p>
   
<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 Machine</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 title = $('[name="title"]').val();
      var device_ID = $('[name="device_ID"]').val();
      var step_ID = $('[name="step_ID"]').val();
      var state = $('[name="state"]').val();
    
    
      // Populate modal with entered data
      $('#title').text(title);
      $('#device_ID').text(device_ID);
      $('#step_ID').text(step_ID);
      $('#state').text(state);

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

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

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