{% extends "finance_and_banking_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% block title %}
<title>Add Backlog PI</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_pi_form">
    {% csrf_token %}
    <div class="accordion-item">
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0 fw-bold"> 
              Add Backlog PI
            </h5>
          </div>
          <div class="card-body">
              <div class="row">
                  <div class="col-md-3">
                    {{ form.supplier|as_crispy_field }}
                  </div>

                  <div class="col-md-3">
                    {{ form.file|as_crispy_field }}
                  </div>
                  <div class="col-md-3">
                    {{ form.order_no|as_crispy_field }}
                  </div>
                  {% comment %} <div class="col-md-3">
                    {{ form.backlog_budget_costing|as_crispy_field }}
                  </div> {% endcomment %}
                  <div class="col-md-3">
                    {{ form.payment_type|as_crispy_field }}
                  </div>
                  <div class="col-md-3">
                    {{ form.tenor|as_crispy_field }}
                  </div>
                  <div class="col-md-3">
                    {{ form.material_type|as_crispy_field }}
                  </div>
                  {% comment %} <div class="col-md-3">
                      {{ form.btb_lc|as_crispy_field }}
                  </div> {% endcomment %}
                  <div class="col-md-3">
                      {{ form.pi_no|as_crispy_field }}
                  </div>
                  <div class="col-md-3">
                      {{ form.pi_rcv_date|as_crispy_field }}
                  </div>
                  <div class="col-md-3">
                    {{ form.remarks|as_crispy_field }}
                  </div>
                  <div class="col-md-3">
                    {{ form.document|as_crispy_field }}
                  </div>
                  <div class="col-md-3" style="margin-top: 40px;">
                    {{ form.is_uploaded|as_crispy_field }}
                  </div>
              </div>
          </div>

          <div class="tables table-responsive" id="pi_formset_rows">
            {% if form.errors or pi_material_formset.errors %}
              {% include 'merchant_app/pi/old_pi_form.html' with pi_material_formset=pi_material_formset %}
            {% endif %}
          </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 id="id_backlog_budget_costing"></div>
    </div>
  </form>
</div>

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

{% block JS %}

<script>
  let hasError = false;
  {% if form.errors or pi_material_formset.errors %}
    hasError = true;
  {% endif %}

  $(document).ready(function () {
    if (!hasError) {
      $("#id_order_no").trigger("change", true);

      var parent_order_id = $("#id_order_no").val();
      $.ajax({
        url: pi_item_load_url,
        data: {
          'parent_order_id': parent_order_id
        },
        success: function (data) {
          $("#pi_formset_rows").html(data);
          $("#pi_formset_rows select").select2({ width: 'resolve' });
        }
      });
    }

    $("#id_parent_file").select2();
    $("#id_file").select2();
    $("#id_order_no").select2();
    $("#id_tenor").select2();
    $("#id_supplier").select2();
    $("#id_f_nd_b_submission").select2();
    $("#id_parent_order").select2();
    $("#id_payment_type").select2();
    $("#id_material_type").select2();
    $("#id_costing_adjustment").select2();
  });
</script>

<script>
  var pi_item_load_url = '{% url "ajax_lc_old_pi_form_load" %}';
  var order_no_url = '{% url "ajax_order_no_load_from_parent_file" %}';
  var backlog_budget_costing_url = '{% url "load_costing_report_from_order_no" %}';

  $("#id_parent_file").change(function () {
    var parent_file_id = $(this).val();
    $.ajax({
      url: order_no_url,
      data: {
        'parent_file_id': parent_file_id
      },
      success: function (data) {
        $("#id_parent_order").html(data);
      }
    });
  });

  $("#id_file").change(function () {
    var file_id = $(this).val();
    $.ajax({
      url: order_no_url,
      data: {
        'parent_file_id': file_id
      },
      success: function (data) {
        $("#id_order_no").html(data);
      }
    });
  });

  $("#id_order_no").change(function () {
    var parent_order_id = $(this).val();
    $.ajax({
      url: backlog_budget_costing_url,
      data: {
        'order_no_id': parent_order_id
      },
      success: function (data) {
        $("#id_backlog_budget_costing").html(data);
      }
    });
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
      let clickCount = 0;
      const saveButton = document.getElementById("saveButton");
      saveButton.addEventListener("click", function () {
          clickCount++;
          if (clickCount == 2) {
              saveButton.disabled = true;
              saveButton.innerText = "Saving..."; // Optionally change button text
              // Re-enable the button after 5 seconds
              setTimeout(function () {
                  saveButton.disabled = false;
                  saveButton.innerText = "Save"; // Reset button text
                  clickCount = 0; // Reset click count
              }, 5000);
          }
      });
  });
</script>

{% endblock JS %}