{% 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-3">
                    {{form.btb_lc|as_crispy_field}}
                </div>  
              <div class="col-md-3">
                {{form.date|as_crispy_field}}
              </div> 
              <div class="col-md-3">
                {{form.remarks|as_crispy_field}}
              </div>
              <div class="col-md-3">
                {{form.amendment_document|as_crispy_field}}
              </div>  
            </div>
        </div>
        <div class="tables table-responsive" id="deptList">
          <table class="table table-hover" style="width: 150% !important;">
              <thead>
                <tr>
                  <th style="width: 2.5% !important;" class="text-center" class="text-center">SL No</th>
                  <th style="width: 20% !important;">New PI</th>
                  <th style="width: 20% !important;">Old PI</th>
                  <th style="width: 9.5% !important;">Value</th>
                  <th style="width: 12% !important;">New Parent Order</th>
                  <th style="width: 12% !important;">Old Parent Order</th>
                  <th style="width: 12% !important;">New Finance Order</th>
                  <th style="width: 12% !important;">Old Finance Order</th>
                  
                </tr>
              </thead>
              <tbody id="pi_formset_rows">
        
                  <tr>
                    <td class="text-center" colspan="8">No Data Found</td>

                  </tr>
                </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 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'  %}"

 
  $(document).ready(function () {
    $("#pi_formset_rows select").select2();
});
  

  $("#id_btb_lc").change(function () {
    var btb_lcID = $("#id_btb_lc").val()
    if (btb_lcID ){
      console.log("Event Called")
      $.ajax({                       
        url: ajax_lc_opened_request_form_load_url,
        
        data: {
       
          'btb_lcID':btb_lcID
        },
        success: function (data) { 
          console.log(data);
          $("#pi_formset_rows").html(data);  
          $("#pi_formset_rows select").select2({ width: 'resolve', });
          }
      }); 
    }
   
    
  });
  $("#id_file").change(function () {
      var fileId = $(this).val();  
      console.log('fileId ',fileId )
      $.ajax({                       
        url: ajax_budget_load_url,
        
        data: {
          'file': fileId   
        },
        success: function (data) { 
          console.log(data);
          $("#id_budget").html(data);  
          }
      }); 
    });

    
    $(document).ready(function() {
      $('#id_pi').change(function() {
          const selectedPIs = $(this).val();
          if (selectedPIs.length > 0) {
              $.ajax({
                  url: "{% url 'calculate_pi_value' %}",
                  data: {
                      'pi_ids': selectedPIs
                  },
                  success: function(data) {
                      $('#id_pi_value').val(data.pi_value_sum); 
                  }
              });
          } else {
              $('#id_pi_value').val('');
          }
      });
    });


    //btb lc
    $("#id_supplier").change(function () {
      var supplierId = $(this).val();
      console.log('supplierId ',supplierId )
      $.ajax({                       
        url: ajax_btb_lc_load_url,
        
        data: {
          'supplier_id': supplierId   
        },
        success: function (data) { 
          console.log(data);
          $("#id_btb_lc").html(data);  
          }
      }); 
    });


   
    




  


      $(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 () {
      const lcValueInput = document.getElementById("id_value");
      const form = document.getElementById("lc-form");

      lcValueInput.addEventListener("input", function () {
          const value = parseFloat(lcValueInput.value);
          if (isNaN(value) || value <= 0) {
              lcValueInput.setCustomValidity("Amendments Value must be greater than 0 and positive.");
          } else {
              lcValueInput.setCustomValidity(""); // Clear any previous errors
          }
      });

      form.addEventListener("submit", function (e) {
          const value = parseFloat(lcValueInput.value);
          if (isNaN(value) || value <= 0) {
              e.preventDefault(); // Stop form submission
              alert("Please enter a valid Value greater than 0.");
          }
      });
  });
</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 %}