{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Cash Counter — Settlement | Job #{{ job.job_no }}{% endblock %}

{% block stylesheets %}
<style>
:root{--c-bg:#f2f2f7;--c-card:#fff;--c-border:#d1d1d6;--c-accent:#007aff;
  --c-text:#1c1c1e;--c-sub:#6e6e73;--c-success:#34c759;--c-warn:#ff9f0a;
  --c-danger:#ff3b30;--r-card:14px;--r-inp:9px;
  --shadow:0 2px 14px rgba(0,0,0,.08);--shadow-h:0 4px 22px rgba(0,0,0,.13);}
body{background:var(--c-bg)!important;}
.sf-card{background:var(--c-card);border-radius:var(--r-card);box-shadow:var(--shadow);
  margin-bottom:1.1rem;overflow:hidden;transition:box-shadow .2s;}
.sf-card:hover{box-shadow:var(--shadow-h);}
.sf-card-hd{padding:.6rem 1.2rem;border-bottom:1px solid var(--c-border);
  font-size:.76rem;font-weight:700;color:#222;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(0,0,0,.02);}
.sf-card-bd{padding:1rem 1.2rem;}
.sf-lbl{font-size:.73rem;font-weight:600;color:#000;margin-bottom:3px;display:block;}
.sf-inp{height:38px;border:1px solid var(--c-border);border-radius:var(--r-inp)!important;
  font-size:.87rem;color:var(--c-text);padding:0 .75rem;background:#fff;
  width:100%;outline:none;transition:border-color .15s,box-shadow .15s;}
.sf-inp:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,122,255,.13);}

/* Page header */
.sf-page-hd{background:linear-gradient(135deg,#edfff4,#d5f8e4);border-radius:var(--r-card);padding:.9rem 1.3rem;color:#1c1c1e;margin-bottom:1rem;box-shadow:var(--shadow);border:1px solid #9de6c0;}

/* Summary rows */
.sf-sum-row{display:flex;justify-content:space-between;
  padding:.4rem .2rem;border-bottom:1px solid #eee;font-size:.85rem;}
.sf-sum-row:last-child{border:none;}
.sf-sum-grand{font-weight:700;font-size:1.1rem;color:var(--c-accent);
  border-top:2px solid var(--c-accent);padding-top:.5rem;margin-top:.3rem;}

/* Pre-print banner */
.preprint-banner{border-radius:var(--r-card);padding:.85rem 1.2rem;
  background:linear-gradient(90deg,#fff8e1,#fff3cd);
  border:1.5px solid var(--c-warn);margin-bottom:1rem;}

/* Insurance breakdown box */
.ins-box{border-radius:10px;padding:.75rem 1rem;
  background:linear-gradient(135deg,rgba(255,159,10,.08),rgba(255,159,10,.04));
  border:1px solid rgba(255,159,10,.3);font-size:.82rem;}

/* Counter discount box */
.disc-box{border-radius:10px;padding:.75rem 1rem;
  background:linear-gradient(135deg,rgba(255,59,48,.06),rgba(255,59,48,.03));
  border:1px solid rgba(255,59,48,.25);}

/* Confirm box */
.confirm-box{border:2px dashed var(--c-success);border-radius:12px;padding:1.2rem;}

/* Stat boxes */
.sf-stat{border-radius:10px;padding:.7rem .9rem;text-align:center;}
.sf-stat .val{font-size:1.15rem;font-weight:700;line-height:1.2;}
.sf-stat .lbl{font-size:.72rem;color:var(--c-sub);margin-top:2px;}

/* Bank table */
.bank-tbl td,bank-tbl th{vertical-align:middle;font-size:.84rem;padding:.4rem .5rem;}

/* Buttons */
.sf-btn{height:40px;border:none;border-radius:var(--r-inp);font-size:.87rem;font-weight:700;
  padding:0 1.4rem;cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:.4rem;}
.sf-btn-success{background:var(--c-success);color:#fff;}
.sf-btn-success:hover{background:#28a745;}
.sf-btn-warn{background:var(--c-warn);color:#fff;}
.sf-btn-outline{background:#fff;color:var(--c-accent);border:1.5px solid var(--c-accent);}

/* Print grid */
.print-grid{display:flex;flex-wrap:wrap;gap:.5rem;}
.print-btn{flex:1;min-width:100px;height:38px;border-radius:8px;font-size:.78rem;
  font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;}

kbd{font-size:.68rem;padding:1px 4px;border-radius:3px;border:1px solid #bbb;background:#f5f5f5;}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3 px-4">

  {% for m in messages %}
  <div class="alert alert-{{ m.tags }} alert-dismissible fade show border-0 shadow-sm py-2">
    {{ m }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  {# Page header #}
  <div class="sf-page-hd d-flex justify-content-between align-items-center">
    <div>
      <h5 class="mb-0 fw-bold">
        <span class="badge me-2" style="background:rgba(0,0,0,.07);color:#1a9e4c;font-size:.75rem;font-weight:700;">
          <i class="bi bi-cash-coin me-1"></i>Cash Counter
        </span>
        Settlement &amp; Invoice — Job #{{ job.job_no }}
      </h5>
      <small style="color:#444;">
        {{ job.vehicle.reg_no }} | {{ job.vehicle.make }} {{ job.vehicle.model }}
        {% if job.pit %}| Pit: {{ job.pit }}{% endif %}
        | {{ job.get_billing_type_display }} | Status: {{ job.get_status_display }}
        {% if job.status == "invoiced" %} | Invoice #{{ job.invoice_no }}{% endif %}
      </small>
    </div>
    <div class="d-flex gap-2">
      <a href="{% url 'workshop:cash_counter_dashboard' %}" class="sf-btn" style="background:rgba(255,255,255,.2);color:#fff;height:36px;">
        <i class="bi bi-arrow-left"></i> Cash Counter Dashboard
      </a>
      <a href="{% url 'workshop:job_detail' job.job_no %}" class="sf-btn" style="background:rgba(255,255,255,.2);color:#fff;height:36px;">
        <i class="bi bi-eye"></i> View
      </a>
    </div>
  </div>

  {% if job.status == "invoiced" %}
  <div class="alert alert-success d-flex align-items-center gap-2 border-0 shadow-sm">
    <i class="bi bi-check-circle-fill fs-5"></i>
    Invoice #{{ job.invoice_no }} generated · Net Amount: <strong>Rs. {{ job.net_amount|floatformat:0|intcomma }}</strong>
  </div>

  <div class="sf-card">
    <div class="sf-card-hd"><i class="bi bi-printer me-1 text-primary"></i>Print Documents</div>
    <div class="sf-card-bd">
      <div class="print-grid">
        <a href="{% url 'workshop:print_customer' job.job_no %}" target="_blank"
           class="btn btn-sm btn-outline-secondary print-btn">
          <i class="bi bi-person"></i> Customer Copy
        </a>
        <a href="{% url 'workshop:print_office' job.job_no %}" target="_blank"
           class="btn btn-sm btn-outline-secondary print-btn">
          <i class="bi bi-building"></i> Office Copy
        </a>
        <a href="{% url 'workshop:print_finance' job.job_no %}" target="_blank"
           class="btn btn-sm btn-outline-primary print-btn">
          <i class="bi bi-bank"></i> Finance Copy
        </a>
        <a href="{% url 'workshop:print_pst' job.job_no %}" target="_blank"
           class="btn btn-sm btn-outline-warning print-btn">
          <i class="bi bi-file-earmark-text"></i> PST Invoice
        </a>
        <a href="{% url 'workshop:print_corporate' job.job_no %}" target="_blank"
           class="btn btn-sm btn-outline-info print-btn">
          <i class="bi bi-briefcase"></i> Corporate Bill
        </a>
        <a href="{% url 'workshop:print_gatepass' job.job_no %}" target="_blank"
           class="btn btn-sm btn-outline-dark print-btn">
          <i class="bi bi-card-checklist"></i> Gate Pass
        </a>
      </div>
    </div>
  </div>

  {# Payment receive for credit/corporate/insurance #}
  {% if job.billing_type in "credit,insurance,corporate" %}
  <div class="sf-card">
    <div class="sf-card-hd"><i class="bi bi-cash-coin me-1 text-success"></i>Payment from {{ job.get_billing_type_display }} Account</div>
    <div class="sf-card-bd">
      <a href="{% url 'workshop:job_payment' job.job_no %}" class="sf-btn sf-btn-success" style="height:38px;">
        <i class="bi bi-cash-coin"></i> Receive Payment / View Ledger
      </a>
    </div>
  </div>
  {% endif %}

  {% else %}

  {# Pre-print banner #}
  <div class="preprint-banner d-flex align-items-center justify-content-between flex-wrap gap-2">
    <div>
      <i class="bi bi-file-earmark-pdf text-warning fs-5 me-2"></i>
      <strong>Pre-Print Draft</strong>
      <span class="text-muted small ms-2">Print a preview copy before generating the final invoice</span>
    </div>
    <a href="{% url 'workshop:print_preprint' job.job_no %}" target="_blank"
       class="sf-btn sf-btn-warn" style="height:36px;">
      <i class="bi bi-printer me-1"></i>Print Pre-Invoice
    </a>
  </div>

  <div class="row g-3">

    {# ── LEFT: Invoice Summary ─────────────────────────────────────── #}
    <div class="col-lg-4">
      <div class="sf-card">
        <div class="sf-card-hd"><i class="bi bi-receipt me-1 text-primary"></i>Invoice Summary</div>
        <div class="sf-card-bd">

          {# Stat row #}
          <div class="row g-2 mb-3">
            <div class="col-6">
              <div class="sf-stat" style="background:#fff8f8;border:1px solid #ffd0d0;">
                <div class="val text-danger">{{ job.services_net|floatformat:0|intcomma }}</div>
                <div class="lbl">Labour Net</div>
              </div>
            </div>
            <div class="col-6">
              <div class="sf-stat" style="background:#f5fff8;border:1px solid #b2dfdb;">
                <div class="val text-success">{{ job.parts_net|floatformat:0|intcomma }}</div>
                <div class="lbl">Parts Net (Issued)</div>
              </div>
            </div>
          </div>

          {# Services breakdown #}
          <div class="sf-sum-row"><span >Services Sub-total</span><span>{{ job.services_subtotal|floatformat:0|intcomma }}</span></div>
          {% if job.services_discount_amt %}<div class="sf-sum-row"><span >Services Discount</span><span class="text-danger">- {{ job.services_discount_amt|floatformat:0|intcomma }}</span></div>{% endif %}
          {% if job.services_tax_amt %}<div class="sf-sum-row"><span >Services Tax</span><span class="text-warning">+ {{ job.services_tax_amt|floatformat:0|intcomma }}</span></div>{% endif %}
          <div class="sf-sum-row"><span class="text-muted fw-semibold">Services Net</span><span class="fw-semibold">{{ job.services_net|floatformat:0|intcomma }}</span></div>

          <hr class="my-2">

          <div class="sf-sum-row"><span >Parts Sub-total (Issued)</span><span>{{ job.parts_subtotal|floatformat:0|intcomma }}</span></div>
          {% if job.parts_discount_amt %}<div class="sf-sum-row"><span >Parts Discount</span><span class="text-danger">- {{ job.parts_discount_amt|floatformat:0|intcomma }}</span></div>{% endif %}
          {% if job.parts_tax_amt %}<div class="sf-sum-row"><span >Parts Tax (GST)</span><span class="text-warning">+ {{ job.parts_tax_amt|floatformat:0|intcomma }}</span></div>{% endif %}
          <div class="sf-sum-row"><span class="text-muted fw-semibold">Parts Net</span><span class="fw-semibold">{{ job.parts_net|floatformat:0|intcomma }}</span></div>

          <hr class="my-2">

          <div class="sf-sum-row"><span class="text-muted fw-semibold">Subtotal</span><span class="fw-semibold" id="dispGrandTotal">{{ job.grand_total|floatformat:0|intcomma }}</span></div>
          <div class="sf-sum-row"><span class="text-danger">Cash Counter Discount</span><span class="text-danger" id="dispCounterDisc">- {{ job.counter_discount_amt|floatformat:0|intcomma }}</span></div>

          <div class="sf-sum-row sf-sum-grand">
            <span>GRAND TOTAL</span>
            <span id="dispNetAmt">Rs. {{ job.net_amount|floatformat:0|intcomma }}</span>
          </div>

          {# Insurance depreciation / under-insurance breakdown #}
          {% if job.billing_type == "insurance" %}
          <div class="ins-box mt-3">
            <div class="fw-semibold mb-2" style="color:#885500;">
              <i class="bi bi-shield-check me-1"></i>
              Insurance Breakdown
            </div>
            <div class="d-flex justify-content-between">
              <span>Parts Net (incl. GST)</span>
              <strong>Rs. {{ ins.parts_net|floatformat:0|intcomma }}</strong>
            </div>
            <div class="d-flex justify-content-between mt-1">
              <span>Depreciation ({{ ins.dep_per|floatformat:1 }}% on Parts)</span>
              <strong class="text-danger">- Rs. {{ ins.dep_amount|floatformat:0|intcomma }}</strong>
            </div>
            <div class="d-flex justify-content-between mt-1">
              <span>Under Insurance ({{ ins.under_insurance_per|floatformat:1 }}%)</span>
              <strong class="text-primary">Rs. {{ ins.under_insurance_amt|floatformat:0|intcomma }}</strong>
            </div>
            <hr class="my-1">
            <div class="d-flex justify-content-between">
              <span class="fw-semibold">Customer pays now</span>
              <strong class="text-danger">Rs. {{ ins.customer_share|floatformat:0|intcomma }}</strong>
            </div>
            <div class="d-flex justify-content-between mt-1">
              <span class="fw-semibold">Insurance Company billed (pending)</span>
              <strong class="text-primary">Rs. {{ ins.under_insurance_amt|floatformat:0|intcomma }}</strong>
            </div>
            <div class="text-muted mt-1" style="font-size:.7rem;">
              Only the Insurance Company's share is posted to their ledger when the invoice is
              generated. The customer's share is collected now, below.
            </div>
          </div>
          {% endif %}

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

    {# ── CENTER: Payment Entry ──────────────────────────────────────── #}
    <div class="col-lg-5">
      <form method="POST" id="settleForm">
        {% csrf_token %}
        <input type="hidden" name="action" value="generate_invoice">
        <input type="hidden" name="settlement_json" id="settlementJson" value="{}">

        {# Cash Counter flat discount #}
        <div class="sf-card">
          <div class="sf-card-hd"><i class="bi bi-percent me-1 text-danger"></i>Cash Counter Discount</div>
          <div class="sf-card-bd">
            <div class="disc-box">
              <label class="sf-lbl">Flat Discount (Rs.)</label>
              <input type="number" id="counterDiscInput" class="sf-inp" min="0" step="1"
                     value="{{ job.counter_discount_amt|default:0|floatformat:0 }}"
                     oninput="onCounterDiscountChange()">
              <div class="text-muted mt-1" style="font-size:.72rem;">
                Optional extra discount given at the counter, applied on top of
                services/parts discounts already set earlier.
              </div>
            </div>
          </div>
        </div>

        <div class="sf-card">
          <div class="sf-card-hd"><i class="bi bi-credit-card me-1 text-success"></i>Payment Details</div>
          <div class="sf-card-bd">

            {# Billing type info #}
            <div class="row g-2 mb-3">
              <div class="col-6">
                <label class="sf-lbl">Billing Type</label>
                <input class="sf-inp" value="{{ job.get_billing_type_display }}" readonly style="background:#f9f9f9;">
              </div>
              <div class="col-6">
                <label class="sf-lbl">Invoice Type</label>
                <select name="invoice_type" class="sf-inp">
                  <option value="cash_memo">Cash Memo</option>
                  <option value="sales_tax">Sales Tax Invoice</option>
                </select>
              </div>
            </div>

            {% if job.billing_type == "cash" %}
            {# Cash: collect payment now #}
            <div class="mb-2">
              <div class="d-flex justify-content-between align-items-center mb-1">
                <label class="sf-lbl mb-0">Cash / Bank Received</label>
                <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-2"
                        style="font-size:.72rem;" onclick="addBankRow()">
                  + Add Row
                </button>
              </div>
              <table class="table table-sm table-bordered mb-1 bank-tbl" id="bankTable">
                <thead class="table-light">
                  <tr>
                    <th>Mode / Bank</th>
                    <th style="width:130px;" class="text-end">Amount</th>
                    <th style="width:32px;"></th>
                  </tr>
                </thead>
                <tbody id="bankRows">
                  <tr id="brow0">
                    <td>
                      <select class="sf-inp bank-sel" name="bank_0" style="height:32px;font-size:.82rem;">
                        <option value="0">Cash (Petty)</option>
                        {% for b in banks %}
                        <option value="{{ b.t_id }}">{{ b.name }}</option>
                        {% endfor %}
                      </select>
                    </td>
                    <td>
                      <input type="number" class="sf-inp text-end bank-amt" name="amount_0"
                             style="height:32px;font-size:.86rem;"
                             value="{{ job.net_amount|floatformat:0 }}"
                             min="0" step="1" oninput="calcBalance()">
                    </td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
              <div class="d-flex justify-content-between p-2 rounded"
                   style="background:#f0f4ff;font-size:.84rem;">
                <span class="fw-semibold">Balance / Change</span>
                <span id="balDisp" class="fw-bold text-success">Rs. 0</span>
              </div>
            </div>

            {% elif job.billing_type == "insurance" %}
            {# Insurance: collect ONLY the customer's share now — the Under
               Insurance Amount is posted to the insurance company's ledger. #}
            <div class="alert alert-warning border-0 py-2 small mb-2">
              <i class="bi bi-shield-check me-1"></i>
              Collect <strong>Rs. {{ ins.customer_share|floatformat:0|intcomma }}</strong> from the
              customer now. <strong>Rs. {{ ins.under_insurance_amt|floatformat:0|intcomma }}</strong>
              will be posted to the insurance company's ledger as pending.
            </div>
            <div class="mb-2">
              <div class="d-flex justify-content-between align-items-center mb-1">
                <label class="sf-lbl mb-0">Cash / Bank Received (Customer Share)</label>
                <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-2"
                        style="font-size:.72rem;" onclick="addBankRow()">
                  + Add Row
                </button>
              </div>
              <table class="table table-sm table-bordered mb-1 bank-tbl" id="bankTable">
                <thead class="table-light">
                  <tr>
                    <th>Mode / Bank</th>
                    <th style="width:130px;" class="text-end">Amount</th>
                    <th style="width:32px;"></th>
                  </tr>
                </thead>
                <tbody id="bankRows">
                  <tr id="brow0">
                    <td>
                      <select class="sf-inp bank-sel" name="bank_0" style="height:32px;font-size:.82rem;">
                        <option value="0">Cash (Petty)</option>
                        {% for b in banks %}
                        <option value="{{ b.t_id }}">{{ b.name }}</option>
                        {% endfor %}
                      </select>
                    </td>
                    <td>
                      <input type="number" class="sf-inp text-end bank-amt" name="amount_0"
                             style="height:32px;font-size:.86rem;"
                             value="{{ ins.customer_share|floatformat:0 }}"
                             min="0" step="1" oninput="calcBalance()">
                    </td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
              <div class="d-flex justify-content-between p-2 rounded"
                   style="background:#f0f4ff;font-size:.84rem;">
                <span class="fw-semibold">Balance / Change</span>
                <span id="balDisp" class="fw-bold text-success">Rs. 0</span>
              </div>
            </div>

            {% elif job.billing_type == "complimentary" %}
            <div class="alert alert-info border-0 py-2 small mb-0">
              <i class="bi bi-gift me-1"></i>
              <strong>Complimentary</strong> — No payment required. Invoice will be posted as complimentary.
            </div>

            {% else %}
            <div class="alert alert-primary border-0 py-2 small mb-0">
              <i class="bi bi-info-circle me-1"></i>
              <strong>{{ job.get_billing_type_display }} Account</strong> — Invoice will be posted to
              the billing account ledger. Collect payment separately via the company ledger.
            </div>
            {% endif %}

          </div>
        </div>

        {# Cheque entry (optional) #}
        <div class="sf-card">
          <div class="sf-card-hd"><i class="bi bi-cash-coin me-1"></i>Cheque Details (Optional)</div>
          <div class="sf-card-bd">
            <div class="row g-2">
              <div class="col-4">
                <label class="sf-lbl">Cheque No.</label>
                <input type="text" name="cheque_no" class="sf-inp" placeholder="Cheque #" id="chqNo">
              </div>
              <div class="col-4">
                <label class="sf-lbl">Cheque Date</label>
                <input type="date" name="cheque_date" class="sf-inp" value="{{ today }}" id="chqDate">
              </div>
              <div class="col-4">
                <label class="sf-lbl">Amount</label>
                <input type="number" name="cheque_amount" class="sf-inp text-end" placeholder="0" id="chqAmt">
              </div>
              <div class="col-6">
                <label class="sf-lbl">Cheque Bank</label>
                <select name="cheque_bank" class="sf-inp" style="height:34px;font-size:.83rem;" id="chqBank">
                  <option value="0">— Select —</option>
                  {% for b in banks %}
                  <option value="{{ b.t_id }}">{{ b.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-6">
                <label class="sf-lbl">Party Name</label>
                <input type="text" name="cheque_party" class="sf-inp" placeholder="Party on cheque" id="chqParty">
              </div>
            </div>
          </div>
        </div>

        {# Confirm + Generate #}
        <div class="confirm-box">
          <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" id="confirmCheck"
                   onchange="document.getElementById('generateBtn').disabled=!this.checked">
            <label for="confirmCheck" class="form-check-label fw-semibold">
              I confirm all amounts are correct and customer has approved.
            </label>
          </div>
          <button type="submit" id="generateBtn"
                  class="sf-btn sf-btn-success w-100" style="height:48px;font-size:1rem;" disabled>
            <i class="bi bi-check2-circle"></i>
            Generate Invoice &nbsp; Rs. <span id="genBtnAmt">{{ job.net_amount|floatformat:0|intcomma }}</span>
          </button>
          <div class="text-muted text-center mt-2" style="font-size:.75rem;">
            <i class="bi bi-exclamation-triangle-fill text-warning me-1"></i>
            This will post the invoice, deduct stock, and record payment. Cannot be undone.
            &nbsp;|&nbsp; <kbd>Ctrl+S</kbd> = generate
          </div>
        </div>

      </form>
    </div>

    {# ── RIGHT: Services + Parts Preview ──────────────────────────── #}
    <div class="col-lg-3">

      <div class="sf-card">
        <div class="sf-card-hd"><i class="bi bi-wrench me-1 text-secondary"></i>
          Services ({{ services.count }})
        </div>
        <div style="max-height:220px;overflow-y:auto;">
          <div class="list-group list-group-flush">
            {% for s in services %}
            <div class="list-group-item py-1 px-3" style="font-size:.79rem;">
              <div class="d-flex justify-content-between">
                <span>{{ s.service_name|default:s.description|truncatechars:32 }}</span>
                <span class="fw-semibold">{{ s.price|floatformat:0|intcomma }}</span>
              </div>
              {% if s.tax_per %}
              <small >PST {{ s.tax_per|floatformat:0 }}% = {{ s.tax_amount|floatformat:0|intcomma }}</small>
              {% endif %}
            </div>
            {% empty %}
            <div class="list-group-item text-muted text-center py-2 small">No services</div>
            {% endfor %}
          </div>
        </div>
      </div>

      <div class="sf-card">
        <div class="sf-card-hd"><i class="bi bi-box-seam me-1 text-secondary"></i>
          Parts Issued ({{ parts.count }})
        </div>
        <div style="max-height:220px;overflow-y:auto;">
          <div class="list-group list-group-flush">
            {% for p in parts %}
            {% if p.issued_qty %}
            <div class="list-group-item py-1 px-3" style="font-size:.79rem;">
              <div class="d-flex justify-content-between">
                <span>{{ p.product_name|truncatechars:28 }}</span>
                <span class="fw-semibold">{{ p.line_total|floatformat:0|intcomma }}</span>
              </div>
              <small >
                Issued {{ p.issued_qty }} × {{ p.rate|floatformat:0 }}
                {% if p.qty != p.issued_qty %}<span class="text-muted">(req. {{ p.qty }})</span>{% endif %}
                {% if p.tax_per %} | GST {{ p.tax_per|floatformat:0 }}%{% endif %}
              </small>
            </div>
            {% endif %}
            {% empty %}
            <div class="list-group-item text-muted text-center py-2 small">No parts</div>
            {% endfor %}
          </div>
        </div>
      </div>

    </div>

  </div>{# /row #}
  {% endif %}{# invoiced check #}

</div>
{% endblock %}

{% block javascripts %}
<script>
const GRAND_TOTAL        = {{ job.grand_total|default:0|floatformat:2 }};
const IS_INSURANCE       = {% if job.billing_type == "insurance" %}true{% else %}false{% endif %};
const UNDER_INSURANCE_AMT = {{ ins.under_insurance_amt|default:0|floatformat:2 }};
let bRowCount = 1;

function getEffectiveNet(){
  const disc = parseFloat(document.getElementById('counterDiscInput')?.value || 0) || 0;
  let net = GRAND_TOTAL - disc;
  if(net < 0) net = 0;
  return net;
}

// For Insurance jobs, only the Customer Share is collectible at the counter
// now — the Under Insurance Amount is posted to the insurance company's
// ledger instead of being collected here.
function getCollectibleNow(){
  const net = getEffectiveNet();
  if(IS_INSURANCE){
    const collectible = net - UNDER_INSURANCE_AMT;
    return collectible > 0 ? collectible : 0;
  }
  return net;
}

function onCounterDiscountChange(){
  const disc = parseFloat(document.getElementById('counterDiscInput').value || 0) || 0;
  const net  = getEffectiveNet();
  const collectible = getCollectibleNow();

  const fmt = (n) => Math.round(n).toLocaleString('en-PK');
  const setText = (id, v) => { const el = document.getElementById(id); if(el) el.textContent = v; };

  setText('dispCounterDisc', '- ' + fmt(disc));
  setText('dispNetAmt', 'Rs. ' + fmt(net));
  setText('genBtnAmt', fmt(net));

  // Keep the default collection row in sync if user hasn't started editing bank rows manually
  const firstAmt = document.querySelector('input[name="amount_0"]');
  if(firstAmt && !firstAmt.dataset.touched){
    firstAmt.value = Math.round(collectible);
  }
  calcBalance();
}

function calcBalance(){
  const total = Array.from(document.querySelectorAll('.bank-amt'))
    .reduce((a,el)=>a+(parseFloat(el.value)||0),0);
  const bal = getCollectibleNow() - total;
  const el  = document.getElementById('balDisp');
  if(el){
    el.textContent = 'Rs. '+Math.round(bal).toLocaleString('en-PK');
    el.className   = 'fw-bold '+(bal<=0?'text-success':'text-danger');
  }
}

function addBankRow(){
  const i=bRowCount++, tbody=document.getElementById('bankRows');
  if(!tbody) return;
  const tr=document.createElement('tr'); tr.id='brow'+i;
  tr.innerHTML=`
    <td>
      <select class="sf-inp bank-sel" name="bank_${i}" style="height:32px;font-size:.82rem;">
        <option value="0">Cash (Petty)</option>
        {% for b in banks %}<option value="{{ b.t_id }}">{{ b.name }}</option>{% endfor %}
      </select>
    </td>
    <td>
      <input type="number" class="sf-inp text-end bank-amt" name="amount_${i}"
             style="height:32px;font-size:.86rem;" value="0" min="0" step="1" oninput="calcBalance()">
    </td>
    <td>
      <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1" style="font-size:.72rem;"
              onclick="document.getElementById('brow${i}').remove();calcBalance();">
        <i class="bi bi-x"></i>
      </button>
    </td>`;
  tbody.appendChild(tr);
}

// Mark first cash row as manually touched once user edits it directly
const firstAmtInput = document.querySelector('input[name="amount_0"]');
if(firstAmtInput){
  firstAmtInput.addEventListener('input', function(){ this.dataset.touched = '1'; });
}

// Collect settlement payload on submit
const form = document.getElementById('settleForm');
if(form){
  form.addEventListener('submit',function(){
    const banks=[];
    document.querySelectorAll('#bankRows tr').forEach(tr=>{
      const sel=tr.querySelector('.bank-sel');
      const amt=tr.querySelector('.bank-amt');
      if(sel&&amt) banks.push({bank_id:sel.value,amount:parseFloat(amt.value)||0});
    });

    const cNo=document.getElementById('chqNo')?.value||'';
    const cAmt=parseFloat(document.getElementById('chqAmt')?.value||0);
    const cDate=document.getElementById('chqDate')?.value||'';
    const cBank=document.getElementById('chqBank')?.value||0;
    const cParty=document.getElementById('chqParty')?.value||'';
    const cheques = (cNo||cAmt) ? [{cheque_no:cNo,amount:cAmt,cheque_date:cDate,bank_id:cBank,party:cParty}] : [];

    const firstBank = document.querySelector('select[name="bank_0"]');

    document.getElementById('settlementJson').value = JSON.stringify({
      bank_payments:          banks,
      cheques:                cheques,
      selected_bank:          firstBank ? firstBank.value : 0,
      now_amount:             banks.reduce((a,b)=>a+(parseFloat(b.amount)||0),0),
      counter_discount_amt:   parseFloat(document.getElementById('counterDiscInput')?.value || 0) || 0,
      parts_complimentary:    {{ job.parts_complimentary|yesno:"true,false" }},
      services_complimentary: {{ job.services_complimentary|yesno:"true,false" }},
    });
  });
}

// Ctrl+S = generate invoice (only if checkbox is checked)
document.addEventListener('keydown',function(e){
  if(e.ctrlKey&&e.key.toLowerCase()==='s'){
    e.preventDefault();
    const btn=document.getElementById('generateBtn');
    if(btn&&!btn.disabled) btn.click();
    else{
      const chk=document.getElementById('confirmCheck');
      if(chk&&!chk.checked){ chk.focus(); }
    }
  }
});

// Prevent Enter from submitting
if(form){
  form.addEventListener('keydown',function(e){
    if(e.key==='Enter'&&e.target.tagName!=='BUTTON'&&!e.ctrlKey){ e.preventDefault(); }
  });
}

calcBalance();
</script>
{% endblock %}