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

{% block title %}
<title>Specification Create</title>
{% endblock title %}

{% block 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>Specification 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">
            {{ style_specification_form.style_number|as_crispy_field }}
          </div> 
          <div class="col-md-3 fw-bold">
            {% comment %} {{ style_specification_form.purchase_order_number|as_crispy_field }} {% endcomment %}
          </div> 
          <div class="col-md-3 fw-bold">
            {{ style_specification_form.lot_number|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>Color</th>
          <th>Size</th>
          <th>Quantity</th>
          
        </tr>
      </thead>
        <tbody id="lot_number_table">  
          {{style_specification_form_set.management_form}}        
          {% for form in style_specification_form_set %}
          <tr id="lot_number_form">
            <td>{{form.color|add_class:"form-control"}}</td>
            <td> {{form.size|add_class:"form-control"}}</td>
            <td>{{form.quantity|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' %}"
  var lot_url = "{% url 'merchant_load_lot' %}"

</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_number").select2({
        
    });
  });

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

  $(document).ready(function() {
    $("#id_lot_number").select2({
        
    });
  });
  
  $('#id_style_number').change(function() {
    var styleNumber = $(this).val()
    console.log(styleNumber)
    $.ajax({
      url: lot_url,
      data: {
        "styleNumber" : styleNumber,
      },
      success : function (data) {
        $('#id_lot_number').html(data)
      }
    })
  })
</script>


{% endblock JS %}