{% extends "marchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}

{% block title %}
<title>Purchase Order Create</title>
{% endblock title %}
{% block Style %}

<style>
.fa-plus {
  background: #0077b7!important;
  color: #fff;

}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; 
}


</style>

{% endblock Style %}

{% block MainContent %}


<div class="contents">

  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">{{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endfor %}
  {% endif %}

<div class="table-area">
  <div class="table-title">
    <div class="row">
      <div class="col-md-4">
        <div class="style-name">
          {% comment %} <h4>Style {{style.style_number}}</h4> {% endcomment %}
          <h5>Purchase Order Create</h5>
        </div>
      </div>
    </div>
  </div>

  <form method="post" id="personForm" enctype="multipart/form-data" data-cities-url="" novalidate>
    {% csrf_token %}
    <div class="table-header">
      <div>
        <div class="row">
          <div class="col-md-3 fw-bold">
            {{ purchase_form.style|as_crispy_field }}
          </div> 
          <div class="col-md-3 fw-bold">
            {{ purchase_form.purchase_order_number|as_crispy_field }}
          </div> 
          <div class="col-md-3 fw-bold">
            {{ purchase_form.purchase_order_file|as_crispy_field }}
          </div>
          <div class="col-md-1" style="margin-top: 31px;">
            <button type="submit" class="cus-btn">Submit</button>
          </div>
        </div>
      </div>
    </div>
 

  <div class="tables table-responsive" id="">
    <table class="table  table-striped table-hover">
      <thead>
        <tr>
          <th>Lot</th>
          <th>Shipment Date</th>
          <th>Quantity</th>
          <th>Value</th>
          {% comment %} <th>Action</th> {% endcomment %}
        </tr>
      </thead>
        <tbody id="lot_number_table">
          {{LOTNumberFormSet.management_form}}
          {% for LOTNumberForm in LOTNumberFormSet %}
          <tr id="lot_number_form">
            <td>{{LOTNumberForm.lot_number|add_class:"form-control"}}</td>
            <td> {{LOTNumberForm.shipment_date|add_class:"form-control"}}</td>
            <td>{{LOTNumberForm.quantity|add_class:"form-control"}}</td>
            <td>{{LOTNumberForm.value|add_class:"form-control"}}</td>
          </tr>
          {% endfor %}
      </tbody>
    </table>
    <div class="col-md-12">
      <div class="row">
        <ul class="action col-md-4">
          <li >
            <button type="button" id ="add_lot_number_form"  style="background-color: green; color: white" class="btn">ADD</button>
          </li>
          <li>
            <button type="button" id ="remove_lot_number_form" style="background-color: red; color: white" class="btn">Remove</button>
          </li>
        </ul>
      </div>
    </div>
  </div>

</form>
</div>



{% endblock MainContent %}
{% block meassage %}

{% include 'notifications/notifications.html' %}

{% endblock meassage %}

{% block JS %}



<script type=text/javascript>
  
  var redirect_url = "{% url 'merchant-purchase-order-create' %}"
  var load_branch_organization_url = "{% url 'load-branch-organization' %}"
  var ajax_search_url = "{% url 'style-search' %}"
  var ajax_merchant_lot_number_create = "{% url 'merchant-lot-number-create' %}"
  var merchant_purchase_order_create = "{% url 'merchant-purchase-order-create' %}"

</script>


<script type=text/javascript>
let experience_form_num = 0

$('#add_experience').click(
    function(event){
       
        event.preventDefault()
        experience_form_num += 1           
        let cloned_node=$("#experience_form").clone() 
         
        let formRegex = RegExp(`experience-(\\d){1}-`,'g')
        cloned_node.html(cloned_node.html().replace(formRegex, `experience-${experience_form_num}-`))
        cloned_node.appendTo("#experience_table")     
        
       
        $('#experience_table #id_experience-TOTAL_FORMS').attr('value', `${experience_form_num+1}`)
        console.log($('#experience_table #id_experience-TOTAL_FORMS').attr('value'))

  
      
    }
  )



let lot_number_form_num = 0

$('#add_lot_number_form').click(
  function(event){
    event.preventDefault()
    lot_number_form_num += 1  
    console.log(lot_number_form_num)         
    let cloned_node=$("#lot_number_form").clone() 
      
    let formRegex = RegExp(`form-(\\d){1}-`,'g')
    cloned_node.html(cloned_node.html().replace(formRegex, `form-${lot_number_form_num}-`))
    cloned_node.appendTo("#lot_number_table")     
    
    $('#lot_number_table #id_form-TOTAL_FORMS').attr('value', `${lot_number_form_num+1}`)
  }
)


// $("#add_lot_number_form").on('click', function(e){
//     var n = $("#id_form-TOTAL_FORMS").val(); // current number of forms;
//     var new_form = ruleform.replace(/{n}/g, n); // replace all {n} by the new form number
//     $(".parent").append(new_form);
//     $("#id_form-TOTAL_FORMS").val(parseInt(n) + 1); // update the total forms number

// })




$('#remove_lot_number_form').click(
  function(event){
    event.preventDefault()
    const list = document.getElementById("lot_number_table");
    if (list.firstElementChild < list.lastElementChild){
      list.removeChild(list.lastElementChild);
    }
    
  }
)



// function Geeks() {
//   $('table tr:last')
//   .css("background-color", "yellow");
// }


</script>


<script>
  // $("#btnSubmit").click(function (event) {


  //     var self = $(this)
  //     Swal.fire({
  //       title: 'Do you want to reuse purchase order number',
  //       showDenyButton: true,
  //     // showCancelButton: true,
  //       confirmButtonText: 'Yes',
  //       denyButtonText: `No`,
  //     }).then((result) => {
  //       if (result.isConfirmed) {
  //         Swal.fire('Reuse purchase order!', '', 'success')
  //       } else if (result.isDenied) {
  //         Swal.fire('Changes blank the purchase order', '', 'info')
  //       }
  //     })
    

    
      

  // data = new FormData()
  // console.log( $("#id_purchase_order_file")[0].files[0])
  // data.append("csrfmiddlewaretoken", '{{ csrf_token }}')
  // data.append("purchase_order_file", $("#id_purchase_order_file")[0].files[0])
  // data.append('style', $('#id_style').val())
  // data.append('purchase_order_number', $('#id_purchase_order_number').val())
  // data.append('lot_number', $('#id_lot_number').val())
  // data.append('shipment_date', $('#id_shipment_date').val())
  // data.append('quantity', $('#id_quantity').val())
  // data.append('value', $('#id_value').val())

  //   $.ajax({
  //     method: "POST",
      
  //     url: ajax_merchant_lot_number_create,
  //     processData: false,
  //     contentType: false,
  //     mimeType: "multipart/form-data",
  //     data: data,
  //     success: function (res) {
  //       console.log(res)
  //       $("#lot_numbers_id").html(res); 
  //     },
  //     error: function (e) {
  //       $("#result").text(e.responseText);
  //       console.log("ERROR : ", e);
  //       $("#btnSubmit").prop("disabled", false);
  //     },
  //   });
  // });




  


  $(document).ready(function() {
    $("#id_style").select2({
        
    });
  });

</script>


{% endblock JS %}