{% extends "finance_and_banking_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% block title %}
<title>Create Backlog Budget Costing</title>
{% endblock title %}
{% block Style %}

{% endblock Style %}


{% block MainContent %}

{% 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="contents">

  <form action="" method="POST" enctype="multipart/form-data" autocomplete="off" id="backlog_budget_costing_form">
    {% csrf_token %}
    <div class="accordion-item">
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0 fw-bold"> 
              Create Backlog Budget Costing
            </h5>
          </div>
          <div class="card-body">
                <div class="row">
                  <div class="col-md-4">
                      {{ form.supplier|as_crispy_field }}
                  </div>
        
                    <div class="col-md-4">
                        {{ form.good_description|as_crispy_field }}
                    </div>
                    <div class="col-md-4">
                        {{ form.cost_per_unit|as_crispy_field }}
                    </div>
                    <div class="col-md-4">
                        {{ form.material_type|as_crispy_field }}
                    </div>
    
                    <div class="col-md-4">
                        {{ form.remarks|as_crispy_field }}
                    </div>
                </div>
          </div>
        </div>
  
        <div class="row" style="margin-top: 10px; margin-bottom: 8px;">
          <div class="col-md-12 text-center">
              <button type="submit" class="cus-btn" id="saveButton">Save</button>
          </div>
        </div>
       
    </div>
  </form>
</div>

    
{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}           
{% endblock meassage %}

{% block JS %}

<script>
   $(document).ready(function(){
    $("#id_parent_file").select2()
    $("#id_order_no").select2()
    $("#id_supplier").select2()
    $("#id_material_type").select2()
   })
</script>
<script>
  $("#saveButton").click(function(){
    $(this).prop("disabled", true);
    $("#backlog_budget_costing_form").submit();
  })
</script>

{% endblock JS %}