{% extends 'pos/base.html' %}
{% block content %}
<h1>Transfer #{{ transfer.pk }}</h1>
<p>
  <strong>From:</strong> {{ transfer.from_branch.branch_name }}<br>
  <strong>To:</strong>   {{ transfer.to_branch.branch_name }}<br>
  <strong>Status:</strong> {{ transfer.get_status_display }}
</p>

<form method="post" action="{% url 'stock_transfer:transfer_approve' transfer.pk %}">
  {% csrf_token %}
  <table class="table">
    <thead>
      <tr>
        <th><input type="checkbox" id="chk-all"></th>
        <th>Code</th><th>Name</th><th>Qty</th><th>Cost</th><th>Total</th>
      </tr>
    </thead>
    <tbody>
      {% for line in pending_lines %}
      <tr>
        <td>
          <input type="checkbox" name="approve_ids" value="{{ line.pk }}">
        </td>
        <td>{{ line.product_code }}</td>
        <td>{{ line.product_name }}</td>
        <td>{{ line.quantity }}</td>
        <td>{{ line.fifo_cost|default:"—" }}</td>
        <td>
          {% if line.fifo_cost %}
            {{ line.quantity|floatformat:2 }} × {{ line.fifo_cost|floatformat:2 }}
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>


  <div id="billSummary" class="card mt-3">
    <div class="card-body">
      <h5 class="mb-3">Bill Summary (Approval)</h5>

      <div class="row">
        <div class="col-md-6">
          <p class="mb-1"><strong>Selected Subtotal:</strong> <span id="selSub">0.00</span></p>
          <p class="mb-1"><strong>Discount:</strong> <span id="sumDisc">{{ transfer.discount }}</span></p>
          <p class="mb-1"><strong>Transport:</strong> <span id="sumTran">{{ transfer.transport_charges }}</span></p>
          <p class="mb-1"><strong>Other:</strong> <span id="sumOth">{{ transfer.other_charges }}</span></p>
          <p class="mb-1"><strong>Sales Tax:</strong> <span id="sumTax">{{ transfer.sales_tax }}</span></p>
          <hr>
          <p class="mb-0"><strong>Grand Total:</strong> <span id="selGrand">0.00</span></p>
        </div>
        <div class="col-md-6 text-muted">
          <small>
            Note: Aapke rule ke mutabiq, approval pe Discount/Charges/Tax full add hotay hain
            (selected items chahe jitne hon).
          </small>
        </div>
      </div>
    </div>
  </div>


  <button type="submit" class="btn btn-success">Approve Selected</button>
  <a href="{% url 'stock_transfer:transfer_delete' transfer.pk %}" class="btn btn-danger">Reject All</a>
</form>

<script>
  // toggle all
  document.getElementById('chk-all').addEventListener('change', function(){
    document.querySelectorAll('input[name="approve_ids"]').forEach(cb => {
      cb.checked = this.checked;
    });
  });

(function(){
  const billOnPurchase = {{ transfer.bill_on_purchase|yesno:"true,false" }};

  function num(v){
    v = (v ?? "0").toString().replace(/,/g,'').trim();
    const x = parseFloat(v);
    return isNaN(x) ? 0 : x;
  }
  function money(x){ return (Math.round(x * 100) / 100).toFixed(2); }

  function recalcSelected(){
    let sub = 0;
    document.querySelectorAll('.approve-check:checked').forEach(ch=>{
      const qty = num(ch.dataset.qty);
      const price = num(ch.dataset.price);
      sub += (qty * price);
    });

    const disc = num(document.getElementById('sumDisc')?.textContent);
    const tran = num(document.getElementById('sumTran')?.textContent);
    const oth  = num(document.getElementById('sumOth')?.textContent);
    const tax  = num(document.getElementById('sumTax')?.textContent);

    const grand = sub - disc + tran + oth + tax;

    document.getElementById('selSub').textContent = money(sub);
    document.getElementById('selGrand').textContent = money(grand);
  }

  // hide summary if bill_on_purchase
  if (billOnPurchase){
    const box = document.getElementById('billSummary');
    if (box) box.style.display = 'none';
  } else {
    document.addEventListener('change', function(e){
      if (e.target && e.target.classList.contains('approve-check')){
        recalcSelected();
      }
    });
    recalcSelected();
  }
})();
</script>
{% endblock %}