{% 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">Edit Bundle</h3>
</div>
</div>
</div>

<div class="white_card_body">
<div class="card-body">
        {% comment %} {% for item in data %} {% endcomment %}
        <form method="POST" action="/EditBundle/{{item.ID}}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="row mb-3">
        <div class="col-md-6">
        <label class="form-label" for="inputEmail4">Article ID</label>
        <input type="text" value="{{item.article_ID}}" class="form-control" id="inputEmail4" placeholder="Enter Article ID" name="article_ID">
        </div>
        <div class="col-md-4">
        <label class="form-label" for="inputPassword4">Tag ID</label>
        <input type="text" value=" " id="tagIdInput" class="form-control" id="inputPassword4" placeholder="Enter Tag ID" name="tag_ID">
        </div>
        <div class="col-md-2">
        <button type="button" id="scanButton" class="btn btn-primary" style="margin-top: 25px;float: right">Scan Tag ID</button>
        </div>
        </div>

        <div class="row mb-3">
        <div class="col-md-6">
        <label class="form-label" for="inputEmail4">Step ID</label>
        <input type="text" value="{{item.step_ID}}" 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" value="{{item.bundleSize}}" 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" value="{{item.state}}" 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" value="{{item.status}}" class="form-control" placeholder="Enter Status" id="inputCity" name="status">
        </div>
        </div> 

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

</div>
</div>
</div>
</div>
</div>

</section>



<div id="back-top" style="display: none;">
<a title="Go to Top" href="#">
<i class="ti-angle-up"></i>
</a>
</div>



{% comment %} !-- Include jQuery library for AJAX --> {% endcomment %}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
  // Check if jQuery library is loaded
  if (window.jQuery) {
    $(document).ready(function() {
      // Bind a click event to the scan button
      $('#scanButton').click(function() {
        // Show an alert to prompt the user to scan the tag ID
        alert('Please scan the tag ID.');

        // Send an AJAX request to the server
        $.ajax({
          type: 'GET',
          url: '{% url "get_tag_id" %}',  // URL of your Django view function
          success: function(response) {
            // Update the input field with the received tag ID
            $('#tagIdInput').val(response.number);
          },
          error: function() {
            alert('Failed to retrieve the tag ID.');
          }
        });
      });
    });
  } else {
    alert('jQuery library is not loaded. Make sure you have included it.');
  }
</script>

{% endblock %}