{% 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 Operator</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">Name</label>
<input type="text" class="form-control" id="inputEmail4" placeholder="Enter Name" name="Name">
</div>
<div class="col-md-6">
<label class="form-label" for="inputPassword4">CNIC</label>
<input type="text" class="form-control" id="inputPassword4" placeholder="Enter CNIC" name="cnic">
</div>
</div>

 <div class="row mb-3">
<div class="col-md-6">
<label class="form-label" for="inputEmail4">Cell</label>
<input type="text" class="form-control" id="inputEmail4" placeholder="Enter Cell Num" name="cell">
</div>
<div class="col-md-6">
<label class="form-label" for="inputPassword4">Address</label>
<input type="text" class="form-control" id="inputPassword4" placeholder="Enter Address" name="address">
</div>
</div> 

 <div class="row mb-3">
<div class=" col-md-6">
<label class="form-label" for="inputCity">Skill</label>
<input type="text" class="form-control" placeholder="Enter Skill"  id="inputCity" name="skill">
</div>
<div class=" col-md-6">
<label class="form-label" for="inputCity">Tag Id</label>
<input type="text" class="form-control" placeholder="Enter Tag ID" id="inputCity" name="tag_id">
</div>
</div> 
<button type="button" id="reviewSubmitBtn" class="btn btn-primary" style="float:right">
  Review Operator
</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 Operator</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>Name :  <span id="Name"></span></p>
    <p>CNIC :  <span id="cnic"></span></p>
    <p>Cell No :  <span id="cell"></span></p>
    <p>Address :<span id="address"></span></p>
    <p>Skill :<span id="skill"></span></p>
    <p>Tag Id :<span id="tag_id"></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 Operator</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 Name = $('[name="Name"]').val();
      var cnic = $('[name="cnic"]').val();
      var cell = $('[name="cell"]').val();
      var address = $('[name="address"]').val();
      var skill = $('[name="skill"]').val();
      var tag_id = $('[name="tag_id"]').val();
    
      // Populate modal with entered data
      $('#Name').text(Name);
      $('#cnic').text(cnic);
      $('#cell').text(cell);
      $('#address').text(address); 
      $('#skill').text(skill);
      $('#tag_id').text(tag_id);

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

    $('#confirm-review').click(function() {
      var Name = $('[name="Name"]').val();
      var cnic = $('[name="cnic"]').val();
      var cell = $('[name="cell"]').val();
      var address = $('[name="address"]').val();
      var skill = $('[name="skill"]').val();
      var tag_id = $('[name="tag_id"]').val();

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