{% extends "merchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
<title>BTB Positions Details</title>
{% endblock title %}
{% block Style %}
<style>
  .search {
    width: 100%!important;
  }

  .fa-plus {
    background: #0077b7!important;
    color: #fff;
  
  }
  button.btn.btn-success:hover {
    i.fa.fa-check{
      color: white !important;
    }
  }
  .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

</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">
    <div class="table-area">
        <div class="table-title">
          <div class="row">
            <div class="col-md-6">
              <div class="depertment-name">
                <h4 class="fw-bold">BTB Position Details</h4>
              </div>
            </div>
            <div class="col-md-6">
             {% if "payment_request_manager_approval" in request.user.merchant_permissions and get_obj.manager_approval_status == 'submitted' %}
                  <div class="add-btn">
                      <a href="{% url 'btb_position_breakdown_create' get_obj.id %}"> <button id="mother-rganization" class="cus-btn"   style="background:#4de0c7; color: black;" type="button" name="button">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i>
                        Breakdown
                    </button></a>
                  </div>
              {% elif get_obj.manager_approval_status == 'not_submitted' %}
                      <div class="add-btn">
                        <a href="{% url 'btb_position_breakdown_create' get_obj.id %}"> <button id="mother-rganization" class="cus-btn"   style="background:#4de0c7;" type="button" name="button">
                          <i class="fa fa-plus-circle" aria-hidden="true"></i>
                          Breakdown 
                      </button></a>
                    </div>
              {% endif %}
          </div>
        </div>
        <hr>
        
        <div class="tables">
            <div class="row">
                <div class="col-md-6">
                    <table class="table table-hover table-responsive table-bordered">
                        <tr>
                            <th colspan="2" class="fw-bold text-center">PI Details</th>
                        </tr>
                        <tr>
                            <th class="fw-bold">Item Details</th>
                            <td>{{get_obj.pi.backlog_budget_costing.good_description|default:"N/A"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">Material Type</th>
                            <td>{% if get_obj.pi.material_type  %}{{get_obj.pi.get_material_type_display|default:"N/A"}} {% else %} N/A{% endif %}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">Supplier</th>
                            <td>{{get_obj.pi.supplier}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">PI No</th>
                            <td>{{get_obj.pi.pi_no}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">PI Value</th>
                            <td>${{get_obj.pi.pi_value|default:"N/A"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">Costing Value</th>
                            <td>${{get_obj.pi.backlog_budget_costing.costing_value|floatformat:"4"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">PI Receive Date</th>
                            <td>{{get_obj.pi.pi_rcv_date|default:"N/A"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">Tenor</th>
                            <td>{{get_obj.pi.tenor|default:"N/A"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">Payment Type</th>
                            <td>{{get_obj.pi.get_payment_type_display|default:"N/A"}}</td>
                        </tr>

                        <tr>
                            <th class="fw-bold">Remarks</th>
                            <td>{{get_obj.pi.remarks|default:"N/A"}}</td>
                        </tr>
                        {% for document in pi_documents %}
                            <tr>
                                <th class="fw-bold">Documents</th>
                                <td><a href="{{ document.document.url }}" target="_blank">View Document</a></td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                <div class="col-md-6">
                    <table class="table table-hover table-responsive table-bordered">
                        <tr>
                            <th colspan="2" class="fw-bold text-center">Basic Informations</th>
                        </tr>
                        <tr>
                            <th class="fw-bold">File</th>
                            <td>{{get_obj.pi.parent_file}} (Order-{{get_obj.pi.parent_order.order_no}})</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">Budget</th>
                            <td>{{get_obj.pi.budget}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">BTB LC</th>
                            <td>{{get_obj.btb_lc|default:"N/A"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">BTB Tenor</th>
                            <td>{{get_obj.btb_lc.tenor|default:"N/A"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">Tentative Doc. Release Date</th>
                            <td>{{get_obj.tentative_release_date|default:"N/A"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">Team</th>
                            <td>{{get_obj.team|default:"N/A"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">Manager Comment</th>
                            <td style="background: #fadbd8;">{{get_obj.manager_comment|default:"N/A"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">FnB Comment</th>
                            <td style="background: #fadbd8;">{{get_obj.rejection_comment|default:"N/A"}}</td>
                        </tr>
                        <tr>
                            <th class="fw-bold">Manager Submission</th>
                            {% comment %} <td>{{get_obj.get_f_nd_b_submission_display|default:"N/A"}}</td> {% endcomment %}
                            
                              {% comment %} {% if request.user.is_superuser or request.user.special_users or get_obj.manager_approval_status == 'not_submitted' or  get_obj.manager_approval_status == 'back_to_merchant' %} {% endcomment %}
                              {% if get_obj.manager_approval_status == 'not_submitted' or  get_obj.manager_approval_status == 'back_to_merchant' %}
                              <td>
                                <form method="POST" style="display: flex; align-items: center;">
                                    {% csrf_token %}
                                    <select name="f_nd_b_submission" class="form-control" style="width: auto; display: inline-block; margin-right: 10px;">
                                        {% for key, value in fndb_submission_choices %}
                                            <option value="{{ key }}" {% if key == get_obj.manager_approval_status %}selected{% endif %}>
                                                {{ value }}
                                            </option>
                                        {% endfor %}
                                    </select>

                                        <button type="submit" class="btn btn-sm" style="background: skyblue;">Update</button>
                                    
                                </form>
                              </td>
                              {% elif get_obj.manager_approval_status == 'Approved' %}
                              <td class="bgc-approved">{{get_obj.get_manager_approval_status_display}}</td>
                              {% else %}
                                  {% if get_obj.manager_approval_status == "Approved" %}
                                    <td class="bgc-approved">{{get_obj.get_manager_approval_status_display}}</td>
                                  {% else %}
                                    <td>{{get_obj.get_manager_approval_status_display}}</td>
                                  {% endif %}
                              {% endif %}
                        </tr>
                        {% if 'payment_request_manager_approval' in request.user.merchant_permissions or request.user.is_superuser %}
                          <tr>
                            <th class="fw-bold">Approval Status</th>
                              {% if get_obj.manager_approval_status == 'submitted' %}
                                  {% if 'payment_request_manager_approval' in request.user.merchant_permissions or request.user.is_superuser %}
                                    <td>
                                      <form method="post" id="approvalForm">
                                          {% csrf_token %}
                                          <div class="input-group">
                                              {{ form.manager_approval_status }}
                                              {{ form.manager_comment }}
                                              <div id="comment-error" class="text-danger small mt-1" style="display: none;"></div>
                                              <button type="submit" class="btn btn-success" id="manager_approval">
                                                  <i class="fa fa-check" style="color: green;"></i> Submit
                                              </button>
                                          </div>
                                      </form>
                                    </td>
                                  {% else %}
                                      <td>{{ get_obj.get_manager_approval_status_display }}</td>
                                  {% endif %}
                              {% elif get_obj.manager_approval_status == 'Approved' %}
                                  <td class="bgc-approved">{{ get_obj.get_manager_approval_status_display }}</td>
                              {% else %}
                                  <td>{{ get_obj.get_manager_approval_status_display }}</td>
                              {% endif %}
                        </tr>

                        {% endif %}
                    </table>
                </div>
            </div>
        </div>
      {% if 'payment_request_manager_approval' in request.user.merchant_permissions or request.user.is_superuser %}
            {% if get_obj.manager_approval_status == 'Approved' %}
      <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Document Check List</h5>
        </div>
        <div class="card-body p-2">
          <table class="table table-hover table-responsive table-bordered">
            <thead>
              <tr>
                <th class="text-center">SL</th>
                <th>Type</th>
                <th class="text-center">Status</th>

              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-center">1</td>
                <td>Bill of Exchange</td>
                <td class="text-center">{% if doc_obj.mdr_bill_of_exchange %}✅{% else %}❌{% endif %}</td>
              </tr>
              <tr>
                <td class="text-center">2</td>
                <td>Delivery Challan</td>
                <td class="text-center">{% if doc_obj.mdr_delivery_challan %}✅{% else %}❌{% endif %}</td>
              </tr>
              <tr>
                <td class="text-center">3</td>
                <td>Mushak</td>
                <td class="text-center">{% if doc_obj.mdr_mushak %}✅{% else %}❌{% endif %}</td>
              </tr>
              <tr>
                <td class="text-center">4</td>
                <td>Proforma Invoice (PI)</td>
                <td class="text-center">{% if doc_obj.mdr_pi %}✅{% else %}❌{% endif %}</td>
              </tr>
              <tr>
                <td class="text-center">5</td>
                <td>BTB LC Copy</td>
                <td class="text-center">{% if doc_obj.mdr_btb %}✅{% else %}❌{% endif %}</td>
              </tr>
            </tbody>
          </table>
          </div>
      </div>
      {% else %}
<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
    {% csrf_token %}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Document Check List</h5>
            <button type="submit" class="btn-success btn-sm">Update</button>
        </div>
        <div class="card-body p-2">
          <table class="table table-hover table-responsive table-bordered">
            <thead>
              <tr>
                <th class="text-center">SL</th>
                <th>Type</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-center">1</td>
                <td class="fw-bold">{{ doc_form.mdr_bill_of_exchange.label }}</td>
                <td>{{ doc_form.mdr_bill_of_exchange }}</td>
              </tr>
              <tr>
                <td class="text-center">2</td>
                <td class="fw-bold">{{ doc_form.mdr_delivery_challan.label }}</td>
                <td>{{ doc_form.mdr_delivery_challan }}</td>
              </tr>
              <tr>
                <td class="text-center">3</td>
                <td class="fw-bold">{{ doc_form.mdr_mushak.label }}</td>
                <td>{{ doc_form.mdr_mushak }}</td>
              </tr>
              <tr>
                <td class="text-center">4</td>
                <td class="fw-bold">{{ doc_form.mdr_pi.label }}</td>
                <td>{{ doc_form.mdr_pi }}</td>
              </tr>
              <tr>
                <td class="text-center">5</td>
                <td class="fw-bold">{{ doc_form.mdr_btb.label }}</td>
                <td>{{ doc_form.mdr_btb }}</td>
              </tr>
            </tbody>
          </table>
        </div>
    </div>
</form>
{% endif %}  
      {% else %}
      {% if get_obj.manager_approval_status != 'not_submitted' %}
      <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Document Check List</h5>
        </div>
        <div class="card-body p-2">
          <table class="table table-hover table-responsive table-bordered">
            <thead>
              <tr>
                <th class="text-center">SL</th>
                <th>Type</th>
                <th class="text-center">Status</th>

              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-center">1</td>
                <td>Bill of Exchange</td>
                <td class="text-center">{% if doc_obj.mdr_bill_of_exchange %}✅{% else %}❌{% endif %}</td>
              </tr>
              <tr>
                <td class="text-center">2</td>
                <td>Delivery Challan</td>
                <td class="text-center">{% if doc_obj.mdr_delivery_challan %}✅{% else %}❌{% endif %}</td>
              </tr>
              <tr>
                <td class="text-center">3</td>
                <td>Mushak</td>
                <td class="text-center">{% if doc_obj.mdr_mushak %}✅{% else %}❌{% endif %}</td>
              </tr>
              <tr>
                <td class="text-center">4</td>
                <td>Proforma Invoice (PI)</td>
                <td class="text-center">{% if doc_obj.mdr_pi %}✅{% else %}❌{% endif %}</td>
              </tr>
              <tr>
                <td class="text-center">5</td>
                <td>BTB LC Copy</td>
                <td class="text-center">{% if doc_obj.mdr_btb %}✅{% else %}❌{% endif %}</td>
              </tr>
            </tbody>
          </table>
          </div>
      </div>
      {% else %}
<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
    {% csrf_token %}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Document Check List</h5>
            <button type="submit" class="btn btn-success btn-sm">Update</button>
        </div>
        <div class="card-body p-2">
          <table class="table table-hover table-responsive table-bordered">
            <thead>
              <tr>
                <th class="text-center">SL</th>
                <th>Type</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-center">1</td>
                <td>{{ doc_form.mdr_bill_of_exchange.label }}</td>
                <td>{{ doc_form.mdr_bill_of_exchange }}</td>
              </tr>
              <tr>
                <td class="text-center">2</td>
                <td>{{ doc_form.mdr_delivery_challan.label }}</td>
                <td>{{ doc_form.mdr_delivery_challan }}</td>
              </tr>
              <tr>
                <td class="text-center">3</td>
                <td>{{ doc_form.mdr_mushak.label }}</td>
                <td>{{ doc_form.mdr_mushak }}</td>
              </tr>
              <tr>
                <td class="text-center">4</td>
                <td>{{ doc_form.mdr_pi.label }}</td>
                <td>{{ doc_form.mdr_pi }}</td>
              </tr>
              <tr>
                <td class="text-center">5</td>
                <td>{{ doc_form.mdr_btb.label }}</td>
                <td>{{ doc_form.mdr_btb }}</td>
              </tr>
            </tbody>
          </table>
        </div>
    </div>
</form>
{% endif %}  
{% endif %}
        {% if payment_breakdown_obj %}
          <div class="tables table-responsive" id="btb_opening_list">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th class="text-center" colspan=11 style="background:#4de0c7;">Consignment Breakdown</th>
                    </tr>
                    
                    <tr>
                        <th>SL No</th>
                        <th>Item</th>
                        <th>PI Number</th>
                        <th>PI Value</th>
                        <th>Balance</th>
                        <th>Cons. Quantity</th>
                        <th>Cons. Value</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                  
                  {% for obj in payment_breakdown_obj %}
                  <tr>
                    <td>{{forloop.counter}} </td>
                    <td>{{obj.pi_breakdown.backlog_budget_costing}}</td>
                    <td>{{obj.pi_breakdown.pi.pi_no}}</td>
                    <td>${{obj.pi_breakdown.pi.pi_value}}</td>
                    <td>${{obj.pi_breakdown.balance}}</td>
                    <td>{{obj.received_qty}} Pcs</td>
                    {% if obj.is_overruled %}
                    <td class='bg-danger text-light'>${{obj.consignment_value}}</td>
                    {% else %}
                    <td>${{obj.consignment_value}}</td>
                    {% endif %}
                    
                    {% if "payment_request_manager_approval" in request.user.merchant_permissions and obj.payment_request.manager_approval_status == 'submitted' %}
                      <td>
                        <ul class="action">
                          <li>
                              <a type="button" href="{% url 'btb_position_breakdown_update' obj.id %}">
                                <i class="fa fa-pencil" aria-hidden="true"></i>
                              </a>
                          </li>
                          <li>
                              <a onclick="SweetDelete(event,this.href)" href="{% url 'btb_position_breakdown_delete' obj.id %}">
                                <i class="fa fa-trash" aria-hidden="true"></i>
                              </a>
                          </li>
                        </ul>
                      </td>
                    {% elif obj.payment_request.manager_approval_status == 'not_submitted' %}
                          <td>
                            <ul class="action">
                              <li>
                                  <a type="button" href="{% url 'btb_position_breakdown_update' obj.id %}">
                                    <i class="fa fa-pencil" aria-hidden="true"></i>
                                  </a>
                              </li>
                              <li>
                                  <a onclick="SweetDelete(event,this.href)" href="{% url 'btb_position_breakdown_delete' obj.id %}">
                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                  </a>
                              </li>
                            </ul>
                          </td>
                    {% else %}
                      <td></td>
                    {% endif %}


                
                  </tr>
                  {% endfor %}
                    
                </tbody>
            </table>
            
          </div>
          {% if btb_opening_obj.has_other_pages %}
            <nav aria-label="Page navigation example">
              <ul class="pagination justify-content-end">
                  {% if btb_opening_obj.has_previous %}
                    <li class="page-item" >
                          <a href="?page={{ btb_opening_obj.previous_page_number }}" class="page-link" tabindex="-1">Previous</a>
                      </li>
                    {% if btb_opening_obj.number > 3 %}
                    <li class="page-item">
                      <a class="page-link" href="?page=1">1</a>
                    </li>
                      {% if btb_opening_obj.number > 4 %}
            
                      <li class="page-item">
                      <span class="page-link">...</span>
                      </li>
                      {% endif %}
                    {% endif %}
                  {% endif %}
            
                  {% for num in btb_opening_obj.paginator.page_range %}
                    {% if btb_opening_obj.number == num %}
                    <li class="page-item active">
                      <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                    {% elif num > btb_opening_obj.number|add:'-3' and num < btb_opening_obj.number|add:'3' %}
                    <li class="page-item">
                      <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                    {% endif %}
                  {% endfor %}
            
                  {% if btb_opening_obj.has_next %}
                    {% if btb_opening_obj.number < btb_opening_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={{ btb_opening_obj.paginator.num_pages }}">{{ btb_opening_obj.paginator.num_pages }}</a>
                      </li>
                    {% elif btb_opening_obj.number < btb_opening_obj.paginator.num_pages|add:'-2' %}
                    <li class="page-item">
                      <a class="page-link" href="?page={{ btb_opening_obj.paginator.num_pages }}">{{ btb_opening_obj.paginator.num_pages }}</a>
                    </li>
                    {% endif %}
                    <li class="page-item">
                    <a href="?page={{ btb_opening_obj.next_page_number }}" class="page-link">Next</a>
                    </li>
                  {% endif %}
              </ul>  
            </nav> 
            {% endif %}  
        </div>
      </div>
    </div>
  </div>
{% endif %}


</div>


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

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

{% endblock meassage %}

{% block JS %}

<script type=text/javascript>
  var btb_opening_index_search_url = "{% url 'btb_opening_index_search' %}"

  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
      }
    })
  }
</script>

<script>
  $("#searchStyle").keypress(function (e) { 
    if (e.keyCode == 13){
    $("#searchBtn").click();
    }
  });
  
$("#searchBtn").click(function () {
  console.log($("#searchStyle").val())
  if($("#searchStyle").val())
    $.ajax({                       
    url: btb_opening_index_search_url,                   
    data: {
      'btb_index_list': $("#searchStyle").val()
    },
    success: function (data) {   
      $("#btb_opening_list").html(data);
    }
  });
  else
  location.href = btb_opening_index_search_url
});
</script>
<script>
document.getElementById('approvalForm').addEventListener('submit', function(e) {
  const status = document.getElementById('id_manager_approval_status').value;
  const commentField = document.getElementById('id_manager_comment');
  const comment = commentField.value.trim();

  // Reset placeholder and border color
  commentField.placeholder = 'Add a comment...';
  commentField.style.borderColor = '';

  if (status === 'not_submitted' && comment === '') {
    e.preventDefault(); // stop form submission
    commentField.placeholder = '⚠ Comment required for Not Submitted status';
    commentField.style.borderColor = 'red';  // Optional visual cue
    commentField.focus();
  }
});
</script>
{% endblock JS %}