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

{% block title %}
<title>Create Position Breakdown</title>
{% endblock title %}

{% 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 %}

  <form id="breakDownForm" action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="table-area">
      <div class="table-title">
        <div class="row">
          <div class="col-md-4">
            <div class="depertment-name">
              <h4 class="fw-bold">Add Breakdown</h4>
            </div>
          </div>
        </div>
      </div>
        <div class="table-header bg-white">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4">{{ form.pi_breakdown|as_crispy_field }}</div>
                        <div class="col-md-4">
                          <label for="{{ form.qty.id_for_label }}" class="form-label">
                            Received Quantity<span class="text-danger">*</span>
                          </label>
                          <div class="input-group">
                            {{ form.received_qty|add_class:"form-control" }}
                            <input type="text" id="id_unit" class="form-control" readonly style="flex: 0 0 60px;">
                          </div>
                        </div>
                        <div class="col-md-4">{{ form.consignment_value|as_crispy_field }}</div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">{{ form.hs_code|as_crispy_field }}</div>
                        <div class="col-md-4">
                          <label for="{{ form.qty.id_for_label }}" class="form-label">
                            PI Quantity
                          </label>
                          <div class="input-group">
                            {{ form.pi_qty|add_class:"form-control" }}
                            <input type="text" id="id_unit2" class="form-control" readonly style="flex: 0 0 60px;">
                          </div>
                        </div>
                        <div class="col-md-4">{{ form.pi_value|as_crispy_field }}</div>
                        <div class="col-md-4">{{ form.balance|as_crispy_field }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 10px; margin-bottom: 8px;">
          <div class="col-md-12" style="text-align: center;">
            <button id="submit_button" type="submit" class="cus-btn">Submit</button>
          </div>
        </div>
      </div>
    </div>

    </div>
  </form>
</div>
{% endblock MainContent %}

{% block JS %}
<script>
  var ajax_item_url = "{% url 'ajax_load_item_data' %}"

  $("#submit_button").click(function(){
    $(this).prop("disabled", true);
    $("#breakDownForm").submit();
  })
  $(document).ready(function(){
    $("#id_pi_breakdown").change(function(){
      const item = $(this).val()
      console.log("item", item)
      if(item){
        $.ajax({
          url: ajax_item_url,
          data: {
            'item_id': item
          },
          success: function(data){
            $("#id_hs_code").val(data.item_obj.hs_code);
            $("#id_pi_qty").val(data.item_obj.qty);
            $("#id_pi_value").val(data.item_obj.pi_value);
            $("#id_balance").val(data.item_obj.balance);
            $("#id_unit").val(data.item_obj.unit);
            $("#id_unit2").val(data.item_obj.unit);
          }
        })
      }
    })
  })
    $(document).ready(function(){
        $("#id_pi_breakdown").select2()
        $("#id_pi_breakdown").trigger('change', true)
    })
</script>
{% endblock JS %}