{% extends 'base/base.html' %}
{% block start %}

<style>
.notification_btn_steps{
  border-radius: 15px;
  padding: 2px 16px;
  margin-bottom:10px;
  font-size: 10px;
  font-weight: 400;
  color: #fff;
  background: #508ff4;
  
}
</style>
<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 Article</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">Pieces</label>
<input type="text" class="form-control" id="inputEmail4" placeholder="Enter Pieces" name="pieces">
</div>
<div class="col-md-6">
<label class="form-label" for="inputPassword4">Order Quantity</label>
<input type="text" class="form-control" id="inputPassword4" placeholder="Enter Order Quantity" name="orderQuantity">
</div>
</div> 

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

<div class="row mb-3">
<div class="col-md-6">
<label class="form-label" for="inputPassword4">Start Date</label>
<input type="date" class="form-control" id="date_value" name="startDate" >

</div>
<div class=" col-md-6">
<label class="form-label" for="inputCity">Delivery Date</label>
<input type="date" class="form-control" id="inputCity" name="deliveryDate">
</div>
</div>
{% comment %} <hr> {% endcomment %}
<div class="row mb-5">
<div class="col-md-3">
<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 Steps
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 {% for step_c in  step_category %}
   <div class="form-check" style="padding-left: 2.5em;important">
      <input class="form-check-input check-step" type="checkbox" id="{{step_c.id}}" name="{{step_c.id}}" value="{{step_c.title|default:''}}">
      <label class="form-check-label" for="cutting-checkbox" style="font-size:12px;">{{step_c.title}}</label>
    </div>
  {% endfor %}
</div>
</div>
</div>
<div class="col-md-4">
<div class="email-sidebar" style="height:auto">
<p>Selected Steps</p>
<ul class="text-start mt-2" id="selected-steps">

{% comment %} <li class="notification_btn_steps"><a>cutting</a></li>
<li class="notification_btn_steps" ><a >button</a></li>
<li class="notification_btn_steps" ><a>cutting</a></li>
<li class="notification_btn_steps"><a >button</a></li> {% endcomment %}
</ul>
</div>
</div>
<div class="col-md-3">
<div class="dropdown" style="float:right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select machine
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 {% for machine_data in  machine %}
   <div class="form-check" style="padding-left: 2.5em;important">
      <input class="form-check-input" type="checkbox" value="{{machine_data.title|default:''}}">
      <label class="form-check-label" for="cutting-checkbox" style="font-size:12px;">{{machine_data.title}}</label>
    </div>
  {% endfor %}
</div>
</div>
</div>


</div> 
</div> 
</div>
<button type="button" id="reviewSubmitBtn" class="btn btn-primary" style="float:right">
  Review Article
</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 Article</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="title"></span></p>
    <p>Pieces:<span id="pieces"></span></p>
    <p>Order Quantity:<span id="orderQuantity"></span></p>
    <p>Bundle Size:<span id="bundleSize"></span></p>
    <p>Fabric Length:<span id="fabricLength"></span></p>
    <p>Start Date: <span id="startDate"></span></p>
    <p>End Date:<span id="deliveryDate"></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 Article</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.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
<script>
    $(document).ready(function() {
      // Handle checkbox change event
      $('.check-step').change(function() {
        var selectedStep = $(this).val(); // Get the value of the selected checkbox
        var selectedList = $('#selected-steps');
         if ($(this).is(':checked')) {
          // If the checkbox is checked, add the selected step to the list
          selectedList.append('<li class="notification_btn_steps"><a>' + selectedStep + '</a></li>');
        } else {
          // If the checkbox is unchecked, remove the selected step from the list
          selectedList.find('li:contains("' + selectedStep + '")').remove();
        }
  
        // Initialize SortableJS
        Sortable.create(selectedList.get(0), {
          animation: 150,
          ghostClass: 'sortable-ghost',
          handle: 'li',
          onEnd: function(event) {
            console.log('Element moved:', event.item);
            var sortedArray = Array.from(selectedList.children()).map(function(li) {
            return $(li).text();
             });
            console.log('Sorted array:', sortedArray);
          }
        });
    
      });
    });
  </script>


<script>
  $(document).ready(function() {
    $('#reviewSubmitBtn').click(function() {
      var title = $('[name="title"]').val();
      var pieces = $('[name="pieces"]').val();
      var orderQuantity = $('[name="orderQuantity"]').val();
      var bundleSize = $('[name="bundleSize"]').val();
      var fabricLength = $('[name="fabricLength"]').val();
      var startDate = $('[name="startDate"]').val();
      var deliveryDate = $('[name="deliveryDate"]').val();
      
    
      // Populate modal with entered data
      $('#title').text(title);
      $('#pieces').text(pieces);
      $('#orderQuantity').text(orderQuantity);
      $('#bundleSize').text(bundleSize);
      $('#fabricLength').text(fabricLength); 
      $('#startDate').text(startDate);
      $('#deliveryDate').text(deliveryDate);

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

    $('#confirm-review').click(function() {
      var title = $('[name="title"]').val();
      var pieces = $('[name="pieces"]').val();
      var orderQuantity = $('[name="orderQuantity"]').val();
      var bundleSize = $('[name="bundleSize"]').val();
      var fabricLength = $('[name="fabricLength"]').val();
      var startDate = $('[name="startDate"]').val();
      var deliveryDate = $('[name="deliveryDate"]').val();

      // Make the API request to submit the review
      $.ajax({
        type: 'POST',
        url: "{% url 'Add_article' %}",
        data: $('#reviewForm').serialize(),
        success: function(response) {
          // Handle the success response, e.g., show a success message
          window.location.href = "{% url 'article_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>
<script>
  // Get the current date
  var currentDate = new Date();

  // Format the date to YYYY-MM-DD
  var year = currentDate.getFullYear();
  var month = String(currentDate.getMonth() + 1).padStart(2, '0');
  var day = String(currentDate.getDate()).padStart(2, '0');
  var formattedDate = `${year}-${month}-${day}`;
  console.log(formattedDate);

  // Set the defaultValue of the input field
  document.getElementById('date_value').value = formattedDate;
</script>

{% endblock %}