{% extends "finance_and_banking_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% block title %}
<title>Proforma Invoices</title>
{% endblock title %}
{% block Style %}
<style>
  .disabled-link {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
  }
  .search {
    width: 94%!important;
  }
  .cus-btn {
    background: #FC6736;
  }
  div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
    margin-bottom: 10px;
  }

  i.fa.fa-info-circle.btn-info {
    padding: 4px 6px;
  }

  .hidden-password {
    font-size: 1em;
    color: #ccc; 
  }
  #approval_data_table_filter,
  #pending_pis_data_table_filter,
  #approved_data_table_filter {
    float: left !important;
    text-align: left !important;
  }
  #pending_lcs_data_table_filter {
    float: left !important;
    text-align: left !important;
    display: block;
    margin-top: -43px;
  }
  #approval_data_table_filter input, 
  #pending_lcs_data_table_filter input,
  #approved_data_table_filter input,
  #pending_pis_data_table_filter input {
    width: 280px !important;
  }


</style>

{% endblock Style %}

{% block MainContent %}
<meta name="csrf-token" content="{{ csrf_token }}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />

<!-- fixed columns datatable css -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.dataTables.min.css" />

{% 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 action="" method="POST">
  {% csrf_token %}

<div class="contents">
  <div class="table-area">
    <!-- Table Header -->
    <div class="table-title">
      <div class="row">
        <div class="col-md-4">
          <div class="depertment-name">
            <h4 class='fw-bold' style='font-size: 17px; color: #1f7622;'>Proforma Invoices</h4>
          </div>
        </div>
        <div class="col-md-8">
          {% comment %} <div class="add-btn">
            <a href="{% url 'backlog_pi_create' %}">
              <button id="mother-organization" class="cus-btn" type="button">
                <i class="fa fa-plus-circle"></i> Add New
              </button>
            </a>
          </div> {% endcomment %}
        </div>
      </div>
    </div>

    <!-- Accordion Section: Manager Approval PIs -->
    <div class="table-area">
    {% if approval_obj_list %}
    <div class="accordion mb-3 mt-3 px-2" id="approvalAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingApproval">
          <button style='font-size: 15px;' class="accordion-button collapsed fw-bold {% if approval_obj_list|length > 0 %}bg-warning text-dark{% endif %}"
                  type="button" data-bs-toggle="collapse" data-bs-target="#collapseApproval" aria-expanded="false"
                  aria-controls="collapseApproval">
            Approvals &nbsp;&nbsp; {{ approval_obj_list|length }}
          </button>
        </h2>
        <div id="collapseApproval" class="accordion-collapse collapse show" aria-labelledby="headingApproval"
             data-bs-parent="#approvalAccordion">
          <div class="accordion-body p-0">
        </div>

        <!-- Your Grouped Table -->
        <div class="tables table-responsive" id="deptList">
          <table id="approval_data_table" class="table">
            <thead>
              <tr style="background-color:#c7c7c7;">
                <th>SL</th>
                <th>PI No</th>
                <th>Supplier</th>
                <th>Item Details</th>
                <th>PI Value</th>
                <th>Budgeted Value</th>
                <th>Parent File</th>
                
                <th>Payment Type</th>
                <th>Material Type</th>
                <th>Remarks</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {% if approval_obj_list %}
                {% for obj in approval_obj_list %}
                    <tr>
                      <td>{{ forloop.counter}}</td>
                      <td>{{ obj.pi_no }} <br> <span style="color: green; font-weight:bold">  Buyer :{{obj.parent_order.buyer_display.buyer|default:"N/A"}} Agent: {{obj.parent_order.buyer_display.agent|default:'N/A'}} </span>   </td>
                      <td>{{ obj.supplier }}</td>
                      <td>{{ obj.backlog_budget_costing.good_description|default:'N/A' }}</td>
                      <td>${{ obj.pi_value|floatformat:"3" }}</td>
                      <td>${{ obj.backlog_budget_costing.costing_value|floatformat:"3" }}</td>
                      <td>{{ obj.parent_file|default:'N/A' }}(Order-{{obj.parent_order.order_no}})</td>
                      
                      <td>{{ obj.get_payment_type_display|default:'N/A' }}</td>
                      <td>{{ obj.get_material_type_display|default:'N/A' }}</td>
                      <td>{{ obj.remarks|default:'N/A' }}</td>
                      
                      <td>
                         {% if 'pi_approvals_for_btb_lc' in request.user.f_nd_b_permissions %}
                        <ul class="action"> 
                          {% comment %} <li>
                            <a href="{% url 'old_backlog_pi_details' obj.id %}" class="edit-click">
                              <i class="fa fa-eye" aria-hidden="true"></i>
                            </a>
                          </li> {% endcomment %}
                          
                          <li>
                            <a href="{% url 'approval_pi_details' obj.id %}" class="edit-click">
                              <i class="fa fa-eye" aria-hidden="true"></i>
                            </a>
                          </li>
                          <li>
                            <a href="{% url 'running_btb_lc_and_amendments' obj.id %}" 
                              class="open-modal-btn" 
                              data-bs-toggle="modal" 
                              data-bs-target="#dynamicModal">
                              <i aria-hidden="true" class="fa fa-info-circle btn-info" style="color: white;"></i>
                            </a>
                          </li>
                          <li>
                            <a onclick="SweetDelete(event, this.href)" href="{% url 'backlog_pi_delete' obj.id %}">
                              <i class="fa fa-trash" aria-hidden="true"></i>
                            </a>
                          </li>
                        </ul>
                        {% endif %}
                      </td>
                    </tr>
                {% endfor %}
              {% else %}
                <tr><td colspan="13" class="text-center">Data is not found</td></tr>
              {% endif %}
            </tbody>
          </table>
        </div>


          </div>
        </div>
      </div>
    </div>
{% endif %}
    <!-- Accordion Section: Pending PIs (General) -->
    {% if obj_list %}
    <div class="accordion mb-3 mt-2 px-2" id="pendingAccordion11">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingPending11">
          <button style='font-size: 15px; background: #f4e5b8;' class="accordion-button collapsed fw-bold {% if obj_list|length > 0 %} text-dark{% endif %}"
                  type="button" data-bs-toggle="collapse" data-bs-target="#collapsePending11"
                  aria-expanded="false" aria-controls="collapsePending11">
            Pending PIs &nbsp;&nbsp; {{ obj_list|length }}
          </button>
        </h2>
        <div id="collapsePending11" class="accordion-collapse collapse show" aria-labelledby="headingPending11"
             data-bs-parent="#pendingAccordion11">
          <div class="accordion-body p-0">

            <div class="tables table-responsive" id="deptList">
          <table id="pending_pis_data_table" class="table">
            <thead>
              <tr style="background-color:#c7c7c7;">
                <th>SL</th>
                <th>PI No</th>
                <th>Supplier</th>
                <th>Item Details</th>
                <th>PI Value</th>
                <th>Budgeted Value</th>
                <th>Parent File</th>
                <th>Payment Type</th>
                <th>Material Type</th>
                <th>Management</th>
                <th>Remarks</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {% if obj_list %}
                {% for obj in obj_list %}
                    <tr>
                      <td>{{ forloop.counter }}</td>
                      <td>{{ obj.pi_no }} <br> <span style="color: green; font-weight:bold">  Buyer :{{obj.parent_order.buyer_display.buyer|default:"N/A"}} Agent: {{obj.parent_order.buyer_display.agent|default:'N/A'}} </span> </td>
                      <td>{{ obj.supplier }}</td>
                      <td>{{ obj.backlog_budget_costing.good_description|default:'N/A' }}</td>
                      <td>${{ obj.pi_value|floatformat:"3"  }}</td>
                      <td>${{ obj.backlog_budget_costing.costing_value|floatformat:"3" }}
                      <td>{{ obj.parent_file }}(Order-{{obj.parent_order.order_no}})</td>
                    
                      </td>
                      <td>{{ obj.get_payment_type_display|default:'N/A' }}</td>
                      <td>{{ obj.get_material_type_display|default:'N/A' }}</td>
                      {% if obj.management_status == 'rejected' %}
                      <td class="bg-rejected">{{ obj.get_management_status_display|default:'N/A' }}</td>
                      {% else %}
                      <td>{{ obj.get_management_status_display|default:'N/A' }}</td>
                      {% endif %}
                      <td>{{ obj.remarks|default:'N/A' }}</td>
                      <td>
                        <ul class="action"> 
                          {% comment %} <li>
                            <a href="{% url 'old_backlog_pi_details' obj.id %}" class="edit-click">
                              <i class="fa fa-eye" aria-hidden="true"></i>
                            </a>
                          </li> {% endcomment %}
                         
                          <li>
                            <a href="{% url 'financing_pi_details' obj.id %}" class="edit-click">
                              <i class="fa fa-eye" aria-hidden="true"></i>
                            </a>
                          </li>
                          <li>
                            <a href="{% url 'running_btb_lc_and_amendments' obj.id %}" 
                              class="open-modal-btn" 
                              data-bs-toggle="modal" 
                              data-bs-target="#dynamicModal">
                              <i aria-hidden="true" class="fa fa-info-circle btn-info" style="color: white;"></i>
                            </a>
                          </li>
                           {% if obj.is_uploaded  or request.user.is_superuser == True   %}
                          <li>
                            <a onclick="SweetDelete(event, this.href)" href="{% url 'backlog_pi_delete' obj.id %}">
                              <i class="fa fa-trash" aria-hidden="true"></i>
                            </a>
                          </li>
                          
                          {% else %}
                             {% comment %} <li>
                            <a onclick="SweetDelete(event, this.href)" href="{% url 'backlog_pi_delete' obj.id %}">
                              <i class="fa fa-trash" aria-hidden="true" style="background:gray;pointer:none !important;"></i>
                            </a>
                          </li> {% endcomment %}
                          {% endif %} 
                        </ul>
                      </td>
                    </tr>
                {% endfor %}
              {% else %}
                <tr><td colspan="13" class="text-center">Data is not found</td></tr>
              {% endif %}
            </tbody>
          </table>
        </div>

          </div>
        </div>
      </div>
    </div>
{% endif %}
{% if pending_pi_btb_lc_obj %}
    <!-- Accordion Section: Pending PIs (BTB LC Missing) -->
    <div class="accordion mb-3 px-2 mt-2" id="pendingAccordion1">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingPending1">
          <button style="font-size: 15px; background: #f4e5b8;"
                  class="accordion-button collapsed fw-bold {% if pending_pi_btb_lc_obj|length > 0 %} text-dark{% endif %}"
                  type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapsePending1"
                  aria-expanded="false" aria-controls="collapsePending1">
            Pending BTB LCs &nbsp;&nbsp; {{ pending_pi_btb_lc_obj|length }}
          </button>
        </h2>
        <div id="collapsePending1" class="accordion-collapse collapse"
             aria-labelledby="headingPending1">
          <div class="accordion-body p-0">
<div class="contents">

  <!-- table-title -->

    <div class="row">
      <div class="col-md-4">

      </div>
      <div class="col-md-8">
          <div class="row">
            <div class="col-md-12 text-end">
                <button type="submit" class="cus-btn" >Submit</button>
            </div>
          </div>
      </div>
 
    </div>


  <!-- table-title -->
    <div class="mt-2" id="pi_lists">
        <table id="pending_lcs_data_table" class="table table-responsive">
            <thead>
                <tr style="background-color:#c7c7c7;">
                    <th class="text-center">SL No</th>
                    <th>PI Number</th>
                    <th>Supplier</th>
                    <th>Item Details</th>
                    <th>PI Value</th>
                    <th>Budgeted Value</th>
                    <th>Parent File</th>
                    <th>Finance File</th>
                    <th>Remarks</th>
                    <th style="background-color: #f4e1ab">BTB LC</th>
                    <th style="background-color:rgb(208, 189, 240)">Amendments</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for pi in pending_pi_btb_lc_obj %}
                <tr>
                <td class="text-center">{{forloop.counter}}</td>
                <td>{{pi.pi_no}}<br> <span style="color: green; font-weight:bold">  Buyer :{{pi.parent_order.buyer_display.buyer|default:"N/A"}} Agent: {{pi.parent_order.buyer_display.agent|default:'N/A'}} </span> </td>
                <td>{{pi.supplier}}</td>
                <td>{{pi.backlog_budget_costing.good_description|default:'N/A' }}</td>
                <td>${{pi.pi_value|floatformat:"3"}}</td>
                <td>${{pi.backlog_budget_costing.costing_value|floatformat:"3" }}
                <td>{{pi.parent_file}}(Order-{{pi.parent_order.order_no}})</td>
                <td>{{pi.file}}(Order-{{pi.order_no.order_no}})</td>
                <td>{{pi.remarks|default:'N/A'}}</td>
                <td style="background-color: #f4e1ab">
                
                    <div class="form-check">
                      <input class="form-check-input" name ='btb_opening_pis'type="checkbox" value="{{pi.id}}" id="{{pi.id}}">
                      <label class="form-check-label" for="{{pi.id}}">
                        BTB
                      </label>
                    </div>
           
                </td>
                <td style="background-color:rgb(208, 189, 240)">
                  <div class="form-check">
                    <input class="form-check-input" name="btb_opening_pis_amendments" type="checkbox" value="{{ pi.id }}" id="btb_amendment_{{ pi.id }}">
                    <label class="form-check-label" for="btb_amendment_{{ pi.id }}">
                      Amend.
                    </label>
                  </div>
                </td>
               <td class="align-middle">
                    <ul class="action">
                    <li>
                        <a href="{% url 'old_backlog_pi_details' pi.id %}"  type="button">
                            <i aria-hidden="true" class="fa fa-eye"></i>
                        </a>
                    </li>
                    <li>
                      <a href="{% url 'running_btb_lc_and_amendments' pi.id %}" 
                        class="open-modal-btn" 
                        data-bs-toggle="modal" 
                        data-bs-target="#dynamicModal">
                        <i aria-hidden="true" class="fa fa-info-circle btn-info" style="color: white;"></i>
                      </a>
                    </li>
                    
                    </ul> 
                </td> 
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

  
</div>

</div>
</div>
</div>
</div>


{% endif %}
{% if pending_pi_btb_lc_cash_obj %}
    <!-- Accordion Section: Pending PIs (BTB LC Missing) -->
    <div class="accordion mb-3 px-2 mt-2" id="pendingAccordion2">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingPending2">
          <button style="font-size: 15px; background: #f4e5b8;"
                  class="accordion-button collapsed fw-bold {% if pending_pi_btb_lc_cash_obj|length > 0 %} text-dark{% endif %}"
                  type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapsePending2"
                  aria-expanded="false" aria-controls="collapsePending2">
            Pending Cash Payment &nbsp;&nbsp; {{ pending_pi_btb_lc_cash_obj|length }}
          </button>
        </h2>
        <div id="collapsePending2" class="accordion-collapse collapse"
             aria-labelledby="headingPending2">
          <div class="accordion-body p-0">
     

<div class="contents">

  <!-- table-title -->

    <div class="row">
      <div class="col-md-4">

      </div>
      <div class="col-md-8">
          <div class="row">
            <div class="col-md-12 text-end">
                <button type="submit" class="cus-btn" >Submit</button>
            </div>
          </div>
      </div>
 
    </div>


  <!-- table-title -->
    <div class="mt-2" id="pi_lists">
        <table id="pending_lcs_data_table" class="table table-responsive">
            <thead>
                <tr style="background-color:#c7c7c7;">
                    <th class="text-center">SL No</th>
                    <th>PI Number</th>
                    <th>Supplier</th>
                    <th>Item Details</th>
                    <th>PI Value</th>
                    <th>Budgeted Value</th>
                    <th>Parent File</th>
                    <th>Finance File</th>
                    <th>Remarks</th>
                    <th style="background-color: #f4e1ab">Cash</th>
                </tr>
            </thead>
            <tbody>
                {% for pi in pending_pi_btb_lc_cash_obj %}
                <tr>
                <td class="text-center">{{forloop.counter}}</td>
                <td>{{pi.pi_no}}<br>  <span style="color: green; font-weight:bold">  Buyer :{{pi.parent_order.buyer_display.buyer|default:"N/A"}} Agent: {{pi.parent_order.buyer_display.agent|default:'N/A'}} </span>  </td>
                <td>{{pi.supplier}}</td>
                <td>{{pi.backlog_budget_costing.good_description|default:'N/A' }}</td>
                <td>${{pi.pi_value|floatformat:"3" }}</td>
                <td>${{pi.backlog_budget_costing.costing_value|floatformat:"3" }}
                <td>{{pi.parent_file}}(Order-{{pi.parent_order.order_no}})</td>
                <td>{{pi.file}}(Order-{{pi.order_no.order_no}})</td>
                <td>{{pi.remarks|default:'N/A'}}</td>
                <td style="background-color: #f4e1ab">
                
                    <div class="form-check">
                      <input class="form-check-input" name ='btb_opening_pis_cash'type="checkbox" value="{{pi.id}}" id="{{pi.id}}">
                      <label class="form-check-label" for="{{pi.id}}">
                        Cash
                      </label>
                    </div>
           
                </td>
                {% comment %} <td style="background-color:rgb(208, 189, 240)">
                  <div class="form-check">
                    <input class="form-check-input" name="btb_opening_pis_amendments" type="checkbox" value="{{ pi.id }}" id="btb_amendment_{{ pi.id }}">
                    <label class="form-check-label" for="btb_amendment_{{ pi.id }}">
                      Amend.
                    </label>
                  </div>
                </td> {% endcomment %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
  </form>
  
</div>

</div>
</div>
</div>
</div>


{% endif %}
{% if all_pi_obj %}
    <!-- Accordion Section: Pending PIs (BTB LC Missing) -->
    <div class="accordion mb-3 px-2" id="pendingAccordion3">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingPending3">
          <button style='font-size: 15px;' class="accordion-button collapsed fw-bold bg-light"
                  type="button" data-bs-toggle="collapse" data-bs-target="#collapsePending3"
                  aria-expanded="false" aria-controls="collapsePending3">
            Archived PIs &nbsp;&nbsp; {{ total_all_pi_obj }}
          </button>
        </h2>
        <div id="collapsePending3" class="accordion-collapse collapse" aria-labelledby="headingPending3"
             data-bs-parent="#pendingAccordion3">
          <div class="accordion-body p-0">

            <div class="tables table-responsive" id="deptList">
        
  <div class="table-header">
          <div class="row">
            <div class="col-md-3 p-0">
              <div class="data-searc p-0">
                <div class="input-group search">
                  <input type="search" class="form-control" id="searchFileSales" placeholder="Search...">
                  <span class="input-group-text" id="search-btn">
                    <i class="fa fa-search" aria-hidden="true"></i>
                  </span>
                </div>
              </div> 
            </div>
          </div>
        </div>

        <!-- Your Grouped Table -->
        <div class="tables table-responsive p-0" id="piList">
          <table class="table table-responsive" >
            <thead>
              <tr style="background-color:#c7c7c7;">
                <th>SL</th>
                <th>PI No</th>
                <th>Supplier</th>
                <th>Item Details</th>
                <th>PI Value</th>
                <th>Budgeted Value</th>
                <th>Parent Order</th>
                
                <th>Payment Type</th>
                <th>Material Type</th>
                <th>Remarks</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {% if all_pi_obj %}
                {% for obj in all_pi_obj %}
                    <tr>
                      <td>{{ forloop.counter }}</td>
                      <td>{{ obj.pi_no }} <br> <span style="color: green; font-weight:bold">  Buyer :{{obj.parent_order.buyer_display.buyer|default:"N/A"}} Agent: {{obj.parent_order.buyer_display.agent|default:'N/A'}} </span>  </td>
                      <td>{{ obj.supplier }}</td>
                      <td>{{ obj.backlog_budget_costing.good_description|default:'N/A' }}</td>
                      <td>${{ obj.pi_value|floatformat:"3"  }}</td>
                      <td>${{ obj.backlog_budget_costing.costing_value|floatformat:"3" }}</td>
                      <td>{{ obj.parent_file|default:'N/A' }}(Order-{{obj.parent_order.order_no}})</td>
                      
                      <td>{{ obj.get_payment_type_display|default:'N/A' }}</td>
                      <td>{{ obj.get_material_type_display|default:'N/A' }}</td>
                      <td>{{ obj.remarks|default:'N/A' }}</td>
                      <td>
                        <ul class="action"> 
                          <li>
                            <a href="{% url 'old_backlog_pi_archived_details' obj.id %}" class="edit-click">
                              <i class="fa fa-eye" aria-hidden="true"></i>
                            </a>
                          </li>
                          <li>
                            <a href="{% url 'running_btb_lc_and_amendments' obj.id %}" 
                              class="open-modal-btn" 
                              data-bs-toggle="modal" 
                              data-bs-target="#dynamicModal">
                              <i aria-hidden="true" class="fa fa-info-circle btn-info" style="color: white;"></i>
                            </a>
                          </li>
                          {% if obj.is_uploaded and obj.btb_lc_no == 'N/A' or  request.user.is_superuser == True  %}
                          <li>
                            <a onclick="SweetDelete(event, this.href)" href="{% url 'backlog_pi_delete' obj.id %}">
                              <i class="fa fa-trash" aria-hidden="true"></i>
                            </a>
                          </li>
                          {% else %}
                             <li>
                            {% comment %} <a onclick="SweetDelete(event, this.href)" href="{% url 'backlog_pi_delete' obj.id %}">
                              <i class="fa fa-trash" aria-hidden="true" style="background:gray;pointer:none !important;"></i>
                            </a> {% endcomment %}
                          </li>
                          {% endif %}
                          {% comment %} <li>
                            <a href="{% url 'financing_pi_details' obj.id %}" class="edit-click">
                              <i class="fa fa-eye" aria-hidden="true"></i>
                            </a>
                          </li> {% endcomment %}
                        </ul>
                      </td>
                    </tr>
                {% endfor %}
              {% else %}
                <tr><td colspan="13" class="text-center">Data is not found</td></tr>
              {% endif %}
            </tbody>
          </table>
        </div>

        <!-- Your Pagination -->
        {% if all_pi_obj.has_other_pages %}
        <nav aria-label="Page navigation example">
          <ul class="pagination justify-content-end">
            {% if all_pi_obj.has_previous %}
              <li class="page-item">
                <a href="?page={{ all_pi_obj.previous_page_number }}" class="page-link" tabindex="-1">Previous</a>
              </li>
              {% if all_pi_obj.number > 3 %}
                <li class="page-item">
                  <a class="page-link" href="?page=1">1</a>
                </li>
                {% if all_pi_obj.number > 4 %}
                  <li class="page-item"><span class="page-link">...</span></li>
                {% endif %}
              {% endif %}
            {% endif %}

            {% for num in all_pi_obj.paginator.page_range %}
              {% if all_pi_obj.number == num %}
                <li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
              {% elif num > all_pi_obj.number|add:'-3' and num < all_pi_obj.number|add:'3' %}
                <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
              {% endif %}
            {% endfor %}

            {% if all_pi_obj.has_next %}
              {% if all_pi_obj.number < all_pi_obj.paginator.num_pages|add:'-3' %}
                <li class="page-item"><span class="page-link">...</span></li>
                <li class="page-item"><a class="page-link" href="?page={{ all_pi_obj.paginator.num_pages }}">{{ all_pi_obj.paginator.num_pages }}</a></li>
              {% elif all_pi_obj.number < all_pi_obj.paginator.num_pages|add:'-2' %}
                <li class="page-item"><a class="page-link" href="?page={{ all_pi_obj.paginator.num_pages }}">{{ all_pi_obj.paginator.num_pages }}</a></li>
              {% endif %}
              <li class="page-item"><a href="?page={{ all_pi_obj.next_page_number }}" class="page-link">Next</a></li>
            {% endif %}
          </ul>
        </nav>
        {% endif %}


          </div>
        </div>
      </div>
    </div>
  </div>

{% endif %}

{% if approved_pi_obj_list %}
    <div class="accordion pb-4 mt-3 px-2" id="approvedPIAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingApprovedPI">
          <button style='font-size: 15px;' class="accordion-button collapsed fw-bold {% if approved_pi_obj_list|length > 0 %} text-dark{% endif %}"
                  type="button" data-bs-toggle="collapse" data-bs-target="#collapsePIApproval" aria-expanded="false"
                  aria-controls="collapsePIApproval">
            Approved PIs &nbsp;&nbsp; {{ approved_pi_obj_list|length }}
          </button>
        </h2>
        <div id="collapsePIApproval" class="accordion-collapse collapse" aria-labelledby="headingApprovedPI"
             data-bs-parent="#approvedPIAccordion">
          <div class="accordion-body p-0">
        <!-- Your Grouped Table -->
        <div class="tables table-responsive" id="deptList">
          <table id="approved_data_table" class="table">
            <thead>
              <tr style="background-color:#c7c7c7;">
                <th>SL</th>
                <th>PI No</th>
                <th>Supplier</th>
                <th>Item Details</th>
                <th>PI Value</th>
                <th>Budgeted Value</th>
                <th>Parent File</th>
                
                <th>Payment Type</th>
                <th>Material Type</th>
                <th>Remarks</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {% if approved_pi_obj_list %}
                {% for obj in approved_pi_obj_list %}
                    <tr>
                      <td>{{ forloop.counter}}</td>
                      <td>{{ obj.pi_no }} <br> <span style="color: green; font-weight:bold">  Buyer :{{obj.parent_order.buyer_display.buyer|default:"N/A"}} Agent: {{obj.parent_order.buyer_display.agent|default:'N/A'}} </span> </td>
                      <td>{{ obj.supplier }}</td>
                      <td>{{ obj.backlog_budget_costing.good_description|default:'N/A' }}</td>
                      <td>${{ obj.pi_value|floatformat:"3"  }}</td>
                      <td>${{ obj.backlog_budget_costing.costing_value|floatformat:"3" }}</td>
                      <td>{{ obj.parent_file|default:'N/A' }}(Order-{{obj.parent_order.order_no}})</td>
                      
                      <td>{{ obj.get_payment_type_display|default:'N/A' }}</td>
                      <td>{{ obj.get_material_type_display|default:'N/A' }}</td>
                      <td>{{ obj.remarks|default:'N/A' }}</td>
                      <td>
                        {% if 'pi_approvals_for_btb_lc' in request.user.f_nd_b_permissions %}
                        <ul class="action"> 
                          {% comment %} <li>
                            <a href="{% url 'old_backlog_pi_details' obj.id %}" class="edit-click">
                              <i class="fa fa-eye" aria-hidden="true"></i>
                            </a>
                          </li> {% endcomment %}
                          {% if 'pi_approvals_for_btb_lc' in request.user.f_nd_b_permissions %}
                          <li>
                            <a onclick="SweetDelete(event, this.href)" href="{% url 'backlog_pi_delete' obj.id %}">
                              <i class="fa fa-trash" aria-hidden="true"></i>
                            </a>
                          </li>
                         
                          {% endif %}
                          
                          <li>
                            <a href="{% url 'approval_pi_details' obj.id %}" class="edit-click">
                              <i class="fa fa-eye" aria-hidden="true"></i>
                            </a>
                          </li>
                          <li>
                            <a href="{% url 'running_btb_lc_and_amendments' obj.id %}" 
                              class="open-modal-btn" 
                              data-bs-toggle="modal" 
                              data-bs-target="#dynamicModal">
                              <i aria-hidden="true" class="fa fa-info-circle btn-info" style="color: white;"></i>
                            </a>
                          </li>
                        </ul>
                          {% endif %}

                      </td>
                    </tr>
                {% endfor %}
              {% else %}
                <tr><td colspan="13" class="text-center">Data is not found</td></tr>
              {% endif %}
            </tbody>
          </table>
        </div>


          </div>
        </div>
      </div>
    </div>
{% endif %}
</div>

<div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content" id="modalContent">

    </div>
  </div>
</div>

{% endblock MainContent %}
{% block meassage %}

{% include 'notifications/notifications.html' %}

{% endblock meassage %}

{% block JS %}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!--Fixheader columns JS -->
<script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>


<script>
    $("#approval_data_table").DataTable({
      paging: false,
      searching: true,   
      ordering: true,  
      info: false,         
      responsive: true,
      pageLength: 50,
      language: {
        search: ""
      },
      initComplete: function() {
        $('#approval_data_table_filter input').attr('placeholder', 'Search...');
      },
    })
    $("#approved_data_table").DataTable({
      paging: false,
      searching: true,   
      ordering: true,  
      info: false,         
      responsive: true,
      pageLength: 50,
      language: {
        search: ""
      },
      initComplete: function() {
        $('#approved_data_table_filter input').attr('placeholder', 'Search...');
      },
    })
    $("#pending_pis_data_table").DataTable({
      paging: false,
      searching: true,   
      ordering: true,  
      info: false,         
      responsive: true,
      pageLength: 50,
      language: {
        search: ""
      },
      initComplete: function() {
        $('#pending_pis_data_table_filter input').attr('placeholder', 'Search...');
      },
    })
    $("#pending_lcs_data_table").DataTable({
      paging: false,
      searching: true,   
      ordering: true,  
      info: false,         
      responsive: true,
      pageLength: 50,
      language: {
        search: ""
      },
      initComplete: function() {
        $('#pending_lcs_data_table_filter input').attr('placeholder', 'Search...');
      },
    })

  
</script>

<script type=text/javascript>
  var ajax_search_url = "{% url 'backlog_pi_search' %}"
  var redirect_url = "{% url 'backlog_pi_index' %}"

  function SweetDelete(e,href){
    e.preventDefault()
    var self = $(this)
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire(
          'Deleted!',
          'Your file has been deleted.',
          'success',
          
        )
        location.href = href
    
      }
    })
  }
  
  $("#searchFileSales").keypress(function (e) { 
    console.log('worked')
    if (e.keyCode == 13){
    $("#search-btn").click();
    }
  });
  $("#search-btn").click(function () { 
    console.log('worked')
    console.log($("#searchFileSales").val())
    if($("#searchFileSales").val())
      $.ajax({                       
      url: ajax_search_url,                   
      data: {
        'file_name': $("#searchFileSales").val()     
      },
      success: function (data) {   
        $("#piList").html(data);  
      }
    });
    else
    location.href = redirect_url
  });
</script>

<script>
  $(document).on('click', '.open-modal-btn', function(e) {
    e.preventDefault();

    var url = $(this).attr('href');

    $.ajax({
      url: url,
      type: 'GET',
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      },
      success: function(data) {
        $('#modalContent').html(data);
        $('#dynamicModal').modal('show');

        if ($.fn.DataTable.isDataTable('#amendmentTable')) {
          $('#amendmentTable').DataTable().destroy();
        }

        $('#modalContent').on('shown.bs.modal', function () {
          $('#amendmentTable').DataTable({
            paging: false,
            searching: true,
            ordering: true,
            info: false,
            responsive: true,
            language: {
              emptyTable: "",           
              zeroRecords: "",          
              infoEmpty: "",
              loadingRecords: "",
              processing: ""
            }
          });
        });
      },
    });
  });
</script>
<script>
  if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
  }

  window.addEventListener("load", function() {
    window.scrollTo(0, 0);

    if (document.activeElement && document.activeElement !== document.body) {
      document.activeElement.blur();
    }
  });
</script>
{% endblock JS %}