{% 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 With Exel File</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>
          <p class="text-center">You are requested to upload the specified exel file format. To get the specified exel file format, just make a click <a href="{% static 'specification_format/format.xlsx' %}" class="text-danger">here</a>.</p>
          <div class="row mt-4">
            <div class="col-md-3 fw-bold">
              {{ style_specification_form.style_number|as_crispy_field }}
            </div> 
            {% comment %} 
            <div class="col-md-3 fw-bold">
              {{ style_specification_form.purchase_order_number|as_crispy_field }} 
            </div> 
            {% endcomment %}
            <div class="col-md-3 fw-bold">
              {{ style_specification_form.lot_number|as_crispy_field }}
            </div>
            <div class="col-md-3 fw-bold">
                {{ excel_form.excel_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>
  </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>
  
  $(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 %}