{% extends "pos/base.html" %}
{% load static sales_extras %}

{% block title %}Challan #{{ challan.challan_no }}{% endblock %}

{% block stylesheets %}

<style>
  .status-badge { font-size: 14px; }
  .settlement-table input[type="number"] { width: 100px; text-align: right; }
  .settlement-table select { width: 120px; }
  .settlement-table td { vertical-align: middle !important; }
  .due-positive { color: #dc3545; font-weight: bold; }
  .due-zero { color: #28a745; font-weight: bold; }
  .btn-return { padding: 2px 6px; font-size: 11px; }
  .options-bar { background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 15px; }
  .summary-box { background: #fff; border: 1px solid #dee2e6; padding: 12px; border-radius: 4px; }
  .summary-box .label { color: #6c757d; font-size: 12px; }
  .summary-box .value { font-size: 18px; font-weight: bold; }

  /* Load sheet styles */
  .load-table { border-collapse: collapse; }
  ./*load-table th { font-size: 12px; color: #000; font-weight: bold; border: 1px solid #000; padding: 4px 6px; }
  .load-table td { font-size: 12px; padding: 4px 6px; color: #000; border: 1px solid #000; }
*/

/* Load sheet styles */
  .load-table { border-collapse: collapse; }
  .load-table th { font-size: 14px; color: #000; font-weight: bold; border: 1px solid #000; padding: 8px 10px; line-height: 1.6; }
  .load-table td { font-size: 14px; padding: 8px 10px; color: #000; border: 1px solid #000; line-height: 1.6; }

  /* Salesman sheet */
  
  .salesman-table { border-collapse: collapse; }
  .salesman-table th { background-color: #d9d9d9; text-align: center; font-size: 12px; padding: 4px 2px; color: #000; font-weight: bold; border: 1px solid #000; }
  .salesman-table td { text-align: center; font-size: 12px; padding: 3px 2px; color: #000; border: 1px solid #000; }
  .customer-header-row { background-color: #e9e9e9; padding: 5px 10px; font-weight: bold; display: flex; justify-content: space-between; color: #000; }
  .salesman-total-row { background-color: #f5f5f5; font-weight: bold; color: #000; }
  .return-col { border: 2px solid #333; min-width: 50px; }
  .po-cell { border: 2px solid #333 !important; }

  /* ── Print styles ── */
  @media print {
    body * { visibility: hidden; }
    #print-header, #print-header * { visibility: visible; }
    #printable-section, #printable-section * { visibility: visible; }
    #print-header { position: absolute; top: 0; left: 0; width: 100%; }
    #printable-section { position: absolute; top: 80px; left: 0; width: 100%; }
    .no-print { display: none !important; }
    .card { border: none !important; box-shadow: none !important; }
    .card-header { display: none; }
    @page { margin: 10mm; }

    /* Force black text everywhere */
    table, table th, table td, table tr, table thead, table tbody, table tfoot,
    table span, table strong, table a,
    .load-table, .load-table th, .load-table td,
    .salesman-table, .salesman-table th, .salesman-table td,
    .salesman-total-row, .salesman-total-row td,
    .customer-header-row, .customer-header-row span {
      color: #000 !important;
      -webkit-text-fill-color: #000 !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      opacity: 1 !important;
    }
    .load-table td, .load-table th {
      font-weight: 600 !important;
    }
    .salesman-table td, .salesman-table th {
      font-weight: 600 !important;
    }
    .customer-header-row {
      font-weight: 700 !important;
    }

    /* Load form: larger font + dark grid */
    .load-table th, .load-table td {
      font-size: 15px !important;
      padding: 8px 10px !important;
      line-height: 1.7 !important;
      border: 2px solid #000 !important;
    }
    .load-table {
      border: 2px solid #000 !important;
      border-collapse: collapse !important;
    }

    /* Salesman sheet: dark grid */
    .salesman-table th, .salesman-table td {
      border: 2px solid #000 !important;
    }
    .salesman-table {
      border: 2px solid #000 !important;
      border-collapse: collapse !important;
    }
    .customer-header-row {
      border: 2px solid #000 !important;
    }
    .salesman-total-row td {
      border-top: 2px solid #000 !important;
    }
  }
</style>
{% endblock %}

{% block heading %}
  <span class="no-print">
    Challan #{{ challan.challan_no }}
    {% if challan.status == 'settled' %}
      <span class="badge badge-success status-badge ml-2">Settled</span>
    {% else %}
      <span class="badge badge-warning status-badge ml-2">Active</span>
    {% endif %}
  </span>
{% endblock %}

{% block content %}

<!-- ═══ PRINT HEADER (visible only during print) ═══ -->
<div id="print-header" style="display:none;">
  <div style="text-align:center; margin-bottom:5px;">
    <h4 style="margin:0;">
      Challan #{{ challan.challan_no }}
      {% if show_mode == 'loadsheet' %} — Load Sheet
      {% elif show_mode == 'salesman' %} — Salesman Sheet
      {% elif show_mode == 'invoices' %} — Invoices Table
      {% endif %}
    </h4>
    <div style="font-size:13px;">
      Date: {{ challan.challan_date }} &nbsp;|&nbsp;
      Areas: {{ challan_areas }} &nbsp;|&nbsp;
      Bookers: {{ challan_bookers }} &nbsp;|&nbsp;
      Status: {{ challan.status|title }} &nbsp;|&nbsp;
      Invoices: {{ challan.line_count }}
    </div>
  </div>
  <hr style="margin:5px 0;">
</div>

<!-- ═══ Header Info Row ═══ -->
<div class="row mb-3 no-print">
  <div class="col-md-8">
    <div class="card">
      <div class="card-body py-2">
        <div class="row">
          <div class="col-md-3"><strong>Date:</strong> {{ challan.challan_date }}</div>
          <div class="col-md-4"><strong>Areas:</strong> {{ challan_areas }}</div>
          <div class="col-md-3"><strong>Bookers:</strong> {{ challan_bookers }}</div>
          <div class="col-md-2"><strong>Invoices:</strong> {{ challan.line_count }}</div>
        </div>
        {% if challan.remarks %}
          <div class="mt-1 text-muted"><small>{{ challan.remarks }}</small></div>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="row">
      <div class="col-6">
        <div class="summary-box text-center">
          <div class="label">Total Due</div>
          <div class="value {% if challan.total_due > 0 %}text-danger{% else %}text-success{% endif %}">
            {{ challan.total_due|floatformat:0 }}
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="summary-box text-center">
          <div class="label">Received</div>
          <div class="value text-primary">{{ challan.total_received|floatformat:0 }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ═══ Action Buttons Bar ═══ -->
<div class="row mb-3 no-print">
  <div class="col-12">
    <div class="options-bar d-flex justify-content-between align-items-center flex-wrap">
      <div class="d-flex align-items-center flex-wrap">
        <!-- View Mode -->
        <a href="?show=settlement" class="btn btn-sm {% if show_mode == 'settlement' %}btn-primary{% else %}btn-outline-primary{% endif %} mr-1 mb-1">
          <i class="fas fa-file-invoice-dollar"></i> Settlement
        </a>
        <a href="?show=loadsheet&include_returns_normal=1&include_returns_expiry=1&show_amounts=1" class="btn btn-sm {% if show_mode == 'loadsheet' %}btn-primary{% else %}btn-outline-primary{% endif %} mr-1 mb-1">
          <i class="fas fa-clipboard-list"></i> Load Sheet
        </a>
        <a href="?show=salesman&include_returns_normal=1" class="btn btn-sm {% if show_mode == 'salesman' %}btn-primary{% else %}btn-outline-primary{% endif %} mr-1 mb-1">
          <i class="fas fa-user-tie"></i> Salesman Sheet
        </a>
        <a href="?show=invoices&show_remarks_col=1" class="btn btn-sm {% if show_mode == 'invoices' %}btn-primary{% else %}btn-outline-primary{% endif %} mr-1 mb-1">
          <i class="fas fa-list"></i> Invoices Table
        </a>
      </div>
      <div class="d-flex align-items-center flex-wrap">
        <!-- Print current section -->
        {% if show_mode != 'settlement' %}
        <button type="button" class="btn btn-sm btn-outline-dark mr-1 mb-1" onclick="printSection()">
          <i class="fas fa-print"></i> Print {{ show_mode|title }}
        </button>
        {% endif %}

        <!-- Bulk Print Invoices -->
        <button type="button" class="btn btn-sm btn-outline-info mr-1 mb-1" id="btn-bulk-print">
          <i class="fas fa-print"></i> Print All Invoices
        </button>

        {% if challan.status == 'active' %}
          <form method="post" action="{% url 'sales:challan_settle' challan_no=challan.challan_no %}" class="d-inline mr-1 mb-1" id="settle-form">
            {% csrf_token %}
            <!-- Hidden fields will be populated from recovery form before submit -->
            <button type="button" class="btn btn-sm btn-success" id="btn-settle">
              <i class="fas fa-check"></i> Settle Challan
            </button>
          </form>
          <form method="post" action="{% url 'sales:challan_delete' challan_no=challan.challan_no %}" class="d-inline mr-1 mb-1">
          {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-outline-danger"
                  onclick="return confirm('DELETE Challan #{{ challan.challan_no }}?\n\nSales, returns & payments will NOT be deleted — only the challan record.\nInvoices will be unlocked for future challans.')">
            <i class="fas fa-trash"></i> Delete Challan
          </button>
        </form>
        {% else %}
          <form method="post" action="{% url 'sales:challan_reopen' challan_no=challan.challan_no %}" class="d-inline mr-1 mb-1">
            {% csrf_token %}
            <button type="submit" class="btn btn-sm btn-warning" onclick="return confirm('Re-open this challan for editing?')">
              <i class="fas fa-lock-open"></i> Re-open
            </button>
          </form>
        {% endif %}
        <a href="{% url 'sales:challan_list' %}" class="btn btn-sm btn-outline-secondary mb-1">
          <i class="fas fa-arrow-left"></i> Back to List
        </a>
      </div>
    </div>
  </div>
</div>


{% if show_mode == 'settlement' %}
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SETTLEMENT TABLE                                                -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div class="row">
  <div class="col-12">
    <form method="post" action="{% url 'sales:challan_save_recovery' challan_no=challan.challan_no %}" id="recovery-form">
      {% csrf_token %}
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <span><strong>Settlement — Credit Recovery</strong></span>
          <div class="d-flex align-items-center">
            <div class="custom-control custom-checkbox mr-3">
              <input type="checkbox" class="custom-control-input" id="select-all-recv">
              <label class="custom-control-label" for="select-all-recv"><strong>Select All (Auto-fill Due)</strong></label>
            </div>
            <button type="button" class="btn btn-primary btn-sm" id="btn-save-recovery">
              <i class="fas fa-save"></i> Save Recovery
            </button>
          </div>
        </div>
        <div class="card-body table-responsive p-0">
          <table class="table table-hover table-bordered settlement-table mb-0">
            <thead class="thead-light">
              <tr>
                <th style="width:30px;">#</th>
                <th>Customer</th>
                <th class="text-center">Sale Inv</th>
                <th class="text-right">Sale Amount</th>
                <th class="text-center" style="width:50px;">Return</th>
                <th class="text-center">Return Inv</th>
                <th class="text-right">Return Amt</th>
                <th class="text-right">Credit to Ledger</th>
                <th class="text-right">Discount</th>
                <th class="text-right">Credit Received</th>
                <th>Bank</th>
                <th class="text-right">Due</th>
              </tr>
            </thead>
            <tbody>
              {% for ln in lines_data %}
              <tr data-credit="{{ ln.credit_to_ledger }}" data-discount="{{ ln.discount_amount }}">
                <td>
                  {{ forloop.counter }}
                  <input type="hidden" name="line_id[]" value="{{ ln.line_id }}">
                </td>
                <td>
                  <strong>{{ ln.customer_name }}</strong>
                  <small class="text-muted d-block">ID: {{ ln.customer_id }}</small>
                </td>
                <td class="text-center">
                  <a href="#" title="View Invoice" class="text-primary">{{ ln.sale_invoice_no }}</a>
                </td>
                <td class="text-right">{{ ln.sale_amount|floatformat:0 }}</td>
                <td class="text-center">
                  {% if ln.return_invoice_no == 0 %}
                    <a href="{% url 'sales:challan_return_popup' invoice_no=ln.sale_invoice_no challan_no=challan.challan_no %}"
                       class="btn btn-outline-danger btn-return" title="Convert to Return"
                       target="_blank">
                      <i class="fas fa-undo"></i>
                    </a>
                  {% else %}
                    <span class="text-success"><i class="fas fa-check-circle"></i></span>
                  {% endif %}
                </td>
                <td class="text-center">
                  {% if ln.return_invoice_no > 0 %}
                    <span class="text-danger">{{ ln.return_invoice_no }}</span>
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>
                <td class="text-right">
                  {% if ln.return_amount > 0 %}
                    <span class="text-danger">{{ ln.return_amount|floatformat:0 }}</span>
                  {% else %}
                    0
                  {% endif %}
                </td>
                <td class="text-right"><strong>{{ ln.credit_to_ledger|floatformat:0 }}</strong></td>
                <td>
                  <input type="number" name="discount_amount[]"
                         class="form-control form-control-sm disc-input entry-input"
                         data-col="disc"
                         value="{{ ln.discount_amount|floatformat:2 }}" step="0.01" min="0">
                </td>
                <td>
                  <input type="number" name="credit_received[]"
                         class="form-control form-control-sm recv-input entry-input"
                         data-col="recv"
                         value="{{ ln.credit_received|floatformat:2 }}" step="0.01" min="0">
                </td>
                <td>
                  <select name="bank_id[]" class="form-control form-control-sm">
                    {% for ba in bank_accounts %}
                      <option value="{{ ba.t_id }}" {% if ba.t_id == ln.bank_id %}selected{% endif %}>
                        {{ ba.name|title }}
                      </option>
                    {% endfor %}
                  </select>
                </td>
                <td class="text-right">
                  <span class="due-display {% if ln.due > 0 %}due-positive{% else %}due-zero{% endif %}">
                    {{ ln.due|floatformat:0 }}
                  </span>
                  <input type="hidden" name="note[]" value="{{ ln.note }}">
                </td>
              </tr>
              {% endfor %}
            </tbody>
            <tfoot>
              <tr class="font-weight-bold bg-light">
                <td colspan="3" class="text-right">Totals:</td>
                <td class="text-right" id="tot-sale">{{ challan.total_sale_amount|floatformat:0 }}</td>
                <td></td>
                <td></td>
                <td class="text-right" id="tot-return">{{ challan.total_return_amount|floatformat:0 }}</td>
                <td class="text-right" id="tot-credit">—</td>
                <td class="text-right" id="tot-disc">{{ challan.total_discount|floatformat:0 }}</td>
                <td class="text-right" id="tot-recv">{{ challan.total_received|floatformat:0 }}</td>
                <td></td>
                <td class="text-right" id="tot-due">{{ challan.total_due|floatformat:0 }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </form>
  </div>
</div>


{% elif show_mode == 'loadsheet' and load_sheet_data %}
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- LOAD SHEET                                                      -->
<!-- ═══════════════════════════════════════════════════════════════ -->

<!-- Column options -->
<div class="row mb-3 no-print">
  <div class="col-12">
    <div class="options-bar">
      <form method="get" class="form-inline flex-wrap">
        <input type="hidden" name="show" value="loadsheet">
        <div class="custom-control custom-checkbox mr-3 mb-1">
          <input type="checkbox" class="custom-control-input" id="lc_bonus" name="include_bonus" value="1"
                 {% if load_sheet_data.include_bonus %}checked{% endif %}>
          <label class="custom-control-label" for="lc_bonus">Bonus</label>
        </div>
        <div class="custom-control custom-checkbox mr-3 mb-1">
          <input type="checkbox" class="custom-control-input" id="lc_ret_n" name="include_returns_normal" value="1"
                 {% if load_sheet_data.include_ret_normal %}checked{% endif %}>
          <label class="custom-control-label" for="lc_ret_n">Return (Normal)</label>
        </div>
        <div class="custom-control custom-checkbox mr-3 mb-1">
          <input type="checkbox" class="custom-control-input" id="lc_ret_e" name="include_returns_expiry" value="1"
                 {% if load_sheet_data.include_ret_expiry %}checked{% endif %}>
          <label class="custom-control-label" for="lc_ret_e">Return (Expiry)</label>
        </div>
        <div class="custom-control custom-checkbox mr-3 mb-1">
          <input type="checkbox" class="custom-control-input" id="lc_amt" name="show_amounts" value="1"
                 {% if load_sheet_data.show_amounts %}checked{% endif %}>
          <label class="custom-control-label" for="lc_amt">Amounts</label>
        </div>
        <div class="mr-3 mb-1">
          <select name="group_mode" class="form-control form-control-sm">
            <option value="none" {% if load_sheet_data.group_mode == 'none' %}selected{% endif %}>No Grouping</option>
            <option value="company" {% if load_sheet_data.group_mode == 'company' %}selected{% endif %}>By Company</option>
            <option value="category" {% if load_sheet_data.group_mode == 'category' %}selected{% endif %}>By Category</option>
          </select>
        </div>
        <button type="submit" class="btn btn-sm btn-primary mb-1">Apply</button>
      </form>
    </div>
  </div>
</div>

<!-- Printable load sheet content -->
<div id="printable-section">
{% for gk, rows in load_sheet_data.groups.items %}
<div class="row">
  <div class="col-12">
    <h6 class="font-weight-bold">{{ gk }}</h6>
    <div class="card mb-3">
      <div class="card-body table-responsive p-0">
        <table class="table table-hover table-striped load-table mb-0">
          <thead class="thead-light">
            <tr>
              <th>Product</th>
              <th class="text-right">Pack</th>
              <th class="text-right">Ctn</th>
              <th class="text-right">Pcs</th>
              {% if load_sheet_data.include_bonus %}
                <th class="text-right">Bonus (PCS)</th>
              {% endif %}
              {% if load_sheet_data.include_ret_normal %}
                <th class="text-right">Ret(N) Ctn</th>
                <th class="text-right">Ret(N) Pcs</th>
              {% endif %}
              {% if load_sheet_data.include_ret_expiry %}
                <th class="text-right">Ret(E) Ctn</th>
                <th class="text-right">Ret(E) Pcs</th>
              {% endif %}
              {% if load_sheet_data.show_amounts %}
                <th class="text-right">Amount</th>
              {% endif %}
            </tr>
          </thead>
          <tbody>
            {% for r in rows %}
            <tr>
              <td>{{ r.product_code }} - {{ r.product_name }}</td>
              <td class="text-right">{{ r.pack }}</td>
              <td class="text-right">{{ r.issued_ctn }}</td>
              <td class="text-right">{{ r.issued_pcs }}</td>
              {% if load_sheet_data.include_bonus %}
                <td class="text-right">{{ r.bonus_pcs }}</td>
              {% endif %}
              {% if load_sheet_data.include_ret_normal %}
                <td class="text-right">{{ r.ret_norm_ctn }}</td>
                <td class="text-right">{{ r.ret_norm_pcs }}</td>
              {% endif %}
              {% if load_sheet_data.include_ret_expiry %}
                <td class="text-right">{{ r.ret_exp_ctn }}</td>
                <td class="text-right">{{ r.ret_exp_pcs }}</td>
              {% endif %}
              {% if load_sheet_data.show_amounts %}
                <td class="text-right">{{ r.amount|floatformat:2 }}</td>
              {% endif %}
            </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            {% with tot=load_sheet_data.group_totals|get_item:gk %}
            <tr class="font-weight-bold">
              <td class="text-right">Totals:</td>
              <td></td>
              <td class="text-right">{{ tot.issued_ctn }}</td>
              <td class="text-right">{{ tot.issued_pcs }}</td>
              {% if load_sheet_data.include_bonus %}
                <td class="text-right">{{ tot.bonus_pcs }}</td>
              {% endif %}
              {% if load_sheet_data.include_ret_normal %}
                <td class="text-right">{{ tot.ret_norm_ctn }}</td>
                <td class="text-right">{{ tot.ret_norm_pcs }}</td>
              {% endif %}
              {% if load_sheet_data.include_ret_expiry %}
                <td class="text-right">{{ tot.ret_exp_ctn }}</td>
                <td class="text-right">{{ tot.ret_exp_pcs }}</td>
              {% endif %}
              {% if load_sheet_data.show_amounts %}
                <td class="text-right">{{ tot.amount|floatformat:2 }}</td>
              {% endif %}
            </tr>
            {% endwith %}
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
{% empty %}
<div class="alert alert-info">No load sheet data for this challan.</div>
{% endfor %}
</div><!-- /printable-section -->


{% elif show_mode == 'salesman' and load_sheet_data.salesman_blocks %}
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SALESMAN SHEET                                                  -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div id="printable-section">
<div class="row">
  <div class="col-12">
    <h5 class="text-center font-weight-bold mb-3">Cash Memo Saleman Copy — Challan #{{ challan.challan_no }}</h5>

    {% for blk in load_sheet_data.salesman_blocks %}
    <div class="card mb-3">
      <div class="customer-header-row">
        <span>{{ blk.customer_id }} / {{ blk.invoice_no }} — {{ blk.customer_name }}</span>
        <span>Bill No: {{ blk.bill_no }}</span>
      </div>
      <div class="px-2 py-1 d-flex justify-content-between" style="font-size:13px;">
        <span>{{ blk.customer_name|upper }} / {{ blk.customer_address }}</span>
        <span>Date: {{ blk.order_date }}</span>
      </div>
      <div class="card-body table-responsive p-0">
        <table class="table table-bordered salesman-table mb-0">
          <thead>
            <tr>
              <th style="width:24%;">Product</th>
              <th style="width:5%;">CTN<br>Size</th>
              <th style="width:5%;">Ctns</th>
              <th style="width:5%;">Pcs</th>
              <th style="width:7%;">Return<br>Qty</th>
              <th style="width:8%;">Trade<br>Price</th>
              <th style="width:10%;">Gross<br>Amount</th>
              <th style="width:8%;">Trade<br>Offer</th>
              <th style="width:7%;">Disc</th>
              <th style="width:9%;">Net<br>Amount</th>
              <th style="width:12%;">Remarks</th>
            </tr>
          </thead>
          <tbody>
            {% for r in blk.rows %}
            <tr>
              <td style="text-align:left;">{{ r.product }}</td>
              <td>{{ r.ctn_size }}</td>
              <td>{{ r.ctns }}</td>
              <td>{% if r.pcs %}{{ r.pcs }}{% else %}0{% endif %}</td>
              <td class="return-col">
                {% if r.return_qty %}
                  <span class="text-danger">{{ r.return_qty }}</span>
                {% endif %}
              </td>
              <td class="text-right">{{ r.trade_price|floatformat:0 }}</td>
              <td class="text-right">{{ r.gross_amount|floatformat:0 }}</td>
              <td class="text-right">{% if r.trade_offer %}{{ r.trade_offer|floatformat:0 }}{% endif %}</td>
              <td class="text-right">{% if r.disc %}{{ r.disc|floatformat:1 }}{% endif %}</td>
              <td class="text-right">{{ r.net_amount|floatformat:0 }}</td>
              <td></td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr class="salesman-total-row">
              <td style="text-align:left;"><strong>Total</strong></td>
              <td></td>
              <td><strong>{{ blk.totals.ctns }}</strong></td>
              <td><strong>{{ blk.totals.pcs }}</strong></td>
              <td colspan="2" class="po-cell">
                <strong>{% if blk.po %}P/O: {{ blk.po|floatformat:0 }}{% endif %}</strong>
              </td>
              <td class="text-right"><strong>{{ blk.totals.gross_amount|floatformat:0 }}</strong></td>
              <td class="text-right"><strong>{% if blk.totals.trade_offer %}{{ blk.totals.trade_offer|floatformat:0 }}{% endif %}</strong></td>
              <td class="text-right"><strong>{% if blk.totals.disc %}{{ blk.totals.disc|floatformat:1 }}{% endif %}</strong></td>
              <td class="text-right"><strong>{{ blk.totals.net_amount|floatformat:0 }}</strong></td>
              <td>
                {% if blk.recovery > 0 %}
                  <strong class="text-success">Recv: {{ blk.recovery|floatformat:0 }}</strong>
                {% endif %}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
</div><!-- /printable-section -->


{% elif show_mode == 'invoices' and load_sheet_data.invoice_rows %}
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- INVOICES TABLE                                                  -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div id="printable-section">
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header no-print"><strong>Invoices — Challan #{{ challan.challan_no }}</strong></div>
      <div class="card-body table-responsive p-0">
        <table class="table table-hover table-striped mb-0">
          <thead class="thead-light">
            <tr>
              <th>Invoice #</th>
              <th>Customer</th>
              <th>Date</th>
              <th class="text-right">Amount</th>
              <th>Area</th>
              <th>Booker</th>
              <th class="text-right">Recovery</th>
              <th>Remarks</th>
            </tr>
          </thead>
          <tbody>
            {% for it in load_sheet_data.invoice_rows %}
            <tr>
              <td><strong>{{ it.inv }}</strong></td>
              <td>{{ it.customer }}</td>
              <td>{{ it.date }}</td>
              <td class="text-right">{{ it.amount|floatformat:0 }}</td>
              <td>{{ it.area }}</td>
              <td>{{ it.booker }}</td>
              <td class="text-right">
                {% if it.recovery > 0 %}
                  <span class="text-success">{{ it.recovery|floatformat:0 }}</span>
                {% else %}
                  —
                {% endif %}
              </td>
              <td></td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr class="font-weight-bold">
              <td></td>
              <td>Total</td>
              <td></td>
              <td class="text-right">{{ load_sheet_data.invoices_amount_total|floatformat:0 }}</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
</div><!-- /printable-section -->

{% else %}
  {% if show_mode != 'settlement' %}
    <div class="alert alert-info">No data to display. Make sure the challan has invoices.</div>
  {% endif %}
{% endif %}


<!-- No hidden forms needed for bulk print — uses existing /invoices/ URL pattern -->

{% endblock %}


{% block javascripts %}
<script>
$(function(){

  // ═══════════════════════════════════════════════════════════
  // 1. ENTER KEY → Move focus to next row, same column
  //    (Prevent form submit on Enter in settlement inputs)
  // ═══════════════════════════════════════════════════════════
  $("#recovery-form").on("keydown", function(e){
    if(e.key === "Enter"){
      e.preventDefault();
      var target = $(e.target);
      if(!target.hasClass("entry-input")) return;

      var col = target.data("col"); // "disc" or "recv"
      var currentRow = target.closest("tr");
      var nextRow = currentRow.next("tr");

      if(nextRow.length){
        // Find same column input in next row
        var nextInput = nextRow.find(".entry-input[data-col='" + col + "']");
        if(nextInput.length){
          nextInput.focus().select();
        }
      }
    }
  });


  // ═══════════════════════════════════════════════════════════
  // 2. SAVE RECOVERY button (explicit, no form submit on Enter)
  // ═══════════════════════════════════════════════════════════
  $("#btn-save-recovery").on("click", function(){
    $("#recovery-form").submit();
  });


  // ═══════════════════════════════════════════════════════════
  // 3. SETTLE CHALLAN → first save recoveries via AJAX, then settle
  // ═══════════════════════════════════════════════════════════
  $("#btn-settle").on("click", function(){
    if(!confirm("Save all recoveries and settle this challan?")) return;

    var btn = $(this);
    btn.prop("disabled", true).html('<i class="fas fa-spinner fa-spin"></i> Settling...');

    // Gather recovery form data
    var formData = $("#recovery-form").serialize();

    // Step 1: POST recovery data
    $.ajax({
      url: "{% url 'sales:challan_save_recovery' challan_no=challan.challan_no %}",
      method: "POST",
      data: formData,
      success: function(){
        // Step 2: POST settle
        $("#settle-form").submit();
      },
      error: function(xhr){
        alert("Error saving recoveries. Please try again.");
        btn.prop("disabled", false).html('<i class="fas fa-check"></i> Settle Challan');
      }
    });
  });


  // ═══════════════════════════════════════════════════════════
  // 4. SELECT ALL: auto-fill credit_received
  // ═══════════════════════════════════════════════════════════
  $("#select-all-recv").on("change", function(){
    var checked = this.checked;
    $(".settlement-table tbody tr").each(function(){
      var credit = parseFloat($(this).data("credit")) || 0;
      var discInput = $(this).find(".disc-input");
      var recvInput = $(this).find(".recv-input");
      var disc = parseFloat(discInput.val()) || 0;
      if(checked){
        var autoVal = Math.max(0, credit - disc);
        recvInput.val(autoVal.toFixed(2));
      } else {
        recvInput.val("0.00");
      }
      recalcDue($(this));
    });
    recalcTotals();
  });


  // ═══════════════════════════════════════════════════════════
  // 5. RECALC due on input change
  // ═══════════════════════════════════════════════════════════
  $(".recv-input, .disc-input").on("input change", function(){
    var row = $(this).closest("tr");
    recalcDue(row);
    recalcTotals();
  });

  function recalcDue(row){
    var credit = parseFloat(row.data("credit")) || 0;
    var recv = parseFloat(row.find(".recv-input").val()) || 0;
    var disc = parseFloat(row.find(".disc-input").val()) || 0;
    var due = credit - recv - disc;
    var span = row.find(".due-display");
    span.text(Math.round(due).toLocaleString());
    span.removeClass("due-positive due-zero")
        .addClass(due > 0.5 ? "due-positive" : "due-zero");
  }

  function recalcTotals(){
    var totRecv=0, totDisc=0, totDue=0, totCredit=0;
    $(".settlement-table tbody tr").each(function(){
      var credit = parseFloat($(this).data("credit")) || 0;
      var recv = parseFloat($(this).find(".recv-input").val()) || 0;
      var disc = parseFloat($(this).find(".disc-input").val()) || 0;
      totRecv += recv;
      totDisc += disc;
      totCredit += credit;
      totDue += (credit - recv - disc);
    });
    $("#tot-recv").text(Math.round(totRecv).toLocaleString());
    $("#tot-disc").text(Math.round(totDisc).toLocaleString());
    $("#tot-due").text(Math.round(totDue).toLocaleString());
    $("#tot-credit").text(Math.round(totCredit).toLocaleString());
  }

  // Initial calc
  $(".settlement-table tbody tr").each(function(){ recalcDue($(this)); });
  recalcTotals();


  // ═══════════════════════════════════════════════════════════
  // 6. BULK PRINT ALL INVOICES (existing invoice system)
  // ═══════════════════════════════════════════════════════════
  var invoiceCsv = "{{ invoice_numbers_csv|default:'' }}";
  var bulkTplId = "{{ bulk_invoice_tpl_id|default:'a1'|escapejs }}";

  $("#btn-bulk-print").on("click", function(){
    if (!invoiceCsv) {
      alert("No invoices found in this challan.");
      return;
    }
    var url = "/invoices/invoice-templates/" + bulkTplId + "/" + invoiceCsv + "/sale/";
    window.open(url, "_blank");
  });

});


// ═══════════════════════════════════════════════════════════
// 7. PRINT SECTION (Load Sheet / Salesman Sheet / Invoices)
// ═══════════════════════════════════════════════════════════
function printSection(){
  // Show print header, then print
  var ph = document.getElementById("print-header");
  if(ph) ph.style.display = "block";
  window.print();
  // Re-hide after print
  setTimeout(function(){
    if(ph) ph.style.display = "none";
  }, 500);
}
</script>
{% endblock %}