{% extends "finance_and_banking_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% block title %}
<title>BTB Amendments Create</title>
{% endblock title %}
{% block Style %}
<style>
  .select2-selection__rendered {
    width: 250px !important;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
  }
</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">
{% if request.user.is_superuser == True  or user_obj.user_type == 'dept_admin' %}
<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
  {% csrf_token %}
  <div class="accordion-item">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0 fw-bold"> 
            Add New BTB Amendments
          </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.btb_lc|as_crispy_field}}
                </div>  
              
              <div class="col-md-4">
                {{form.bank_apply_date|as_crispy_field}}
              </div> 
              
              <div class="col-md-4">
                {{form.date|as_crispy_field}}
              </div> 
              
              <div class="col-md-4">
                {{form.remarks|as_crispy_field}}
              </div>
              <div class="col-md-4">
                {{form.amendment_document|as_crispy_field}}
              </div>    
            </div>
            <div class="row" id="id_info"></div>
        </div>
        <div class="tables table-responsive" id="deptList">
          <table class="table table-hover">
            <thead>
                    <tr>
                      <th style="width: 2.5% !important;" class="text-center">SL No</th>
                      {% comment %} <th style="width: 20% !important;">New PI</th> {% endcomment %}
                      <th style="width: 20% !important;">PI</th>
                      <th style="width: 9.5% !important;">Value</th>
                      {% comment %} <th style="width: 12% !important;">New Parent Order</th> {% endcomment %}
                      {% comment %} <th style="width: 12% !important;">Old Parent Order</th> {% endcomment %}
                      {% comment %} <th style="width: 12% !important;">New Finance Order</th> {% endcomment %}
                      <th style="width: 12% !important;">Finance Order</th>
                      
                    </tr>
                  </thead>
                  <tbody id="pi_formset_rows">


                     {{ LC_OpenedRequestFormset.management_form }}
                        {% for form in LC_OpenedRequestFormset %}
                                {% for hidden in form.hidden_fields %}
                                        {{ hidden }}
                                {% endfor %}           
                        <tr>
                            <td style="width: 2.5% !important;">{{forloop.counter}}</td>
                            <td style="width: 20% !important;">{% render_field  form.old_request class="form-control" %}</td>
                            <td style="width: 9.5% !important;">{% render_field form.value class="form-control" %}</td>
                            <td style="width: 12% !important;">{% render_field form.old_finance_budget class="form-control" %}</td>
                        


                            
                        </tr>
                        {% endfor %}
        








                    
            

                    </tbody>
                    </table>

      </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>
{% endif %} 
{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}           
{% endblock meassage %}
{% block JS %}

<script>
function logValueInput(inputElement) {
    console.log("Value on input:", inputElement.value);
}

function captureFinalValue() {
    updateTotalSum();
}

function updateTotalSum() {
    let totalSum = 0;

    document.querySelectorAll('input[name$="-value"]').forEach(function(input) {
        const val = input.value.trim();
        if (!isNaN(val) && val !== "") {
            totalSum += parseFloat(val);
        }
    });

    // Update the total field (must exist)
    const totalField = document.getElementById("id_value");
    if (totalField) {
        totalField.value = totalSum.toFixed(2);
    }
}

// Auto calculate on page load
document.addEventListener("DOMContentLoaded", function() {
    updateTotalSum();
});
</script>
<script src="{% static 'js/f_nd_b_app/file/create.js' %} "></script>

 <script>
 
  var ajax_lc_opened_request_form_load_url = "{% url 'ajax_lc_amendment_request_form_load'  %}"
  var ajax_load_btb_lc_information_url = "{% url 'ajax_load_btb_lc_information'  %}"


      $(document).ready(function() {
        $("#id_supplier").select2();
      });
      $(document).ready(function() {
        $("#id_file").select2();
      });
      $(document).ready(function() {
        $("#id_budget").select2();
      });
      $(document).ready(function() {
        $("#id_btb_lc").select2();
      });
      $(document).ready(function() {
        $("#id_pi").select2();
      });
      
</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>
<script type="text/javaScript">
  $("#id_btb_lc").change(function () {
    var btb_lcID = $("#id_btb_lc").val()
    if (btb_lcID ){
      $.ajax({                       
        url: ajax_load_btb_lc_information_url,
        data: {
          'btb_lcID':btb_lcID
        },
        success: function (data) { 
          $("#id_info").html(data);  
          }
      }); 
    }
  });
    $(document).ready(function () {
    $("#pi_formset_rows select").select2();
    $("#id_btb_lc").trigger('change', true);
  });
</script>
{% endblock JS %}