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

{% block title %}
  {% if is_edit %}Edit{% else %}Add{% endif %} Spot Trip
{% endblock %}

{% block stylesheets %}
<!-- <link href="{% static 'select2/css/select2.min.css' %}" rel="stylesheet"> -->
<style>
  .section-card {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .section-card h6 {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
  }
  .table-compact th,
  .table-compact td {
    padding: 4px 6px;
    vertical-align: middle;
  }
  .small-input {
    padding: 0.15rem 0.35rem;
    font-size: 0.8rem;
    height: calc(1.6em + 0.5rem);
  }
</style>
{% endblock %}

{% block heading %}
  {% if is_edit %}Edit{% else %}Add{% endif %} Spot Trip
{% endblock %}

{% block content %}

<form method="post" id="spottrip-form">
  {% csrf_token %}

  <div class="mb-2">
    {% if trip %}
      <span class="badge badge-info">Trip # {{ trip.trip_no }}</span>
      <span class="badge badge-secondary">Status: {{ trip.status }}</span>
      {% if trip.sale_invoice_no %}
        <span class="badge badge-success">Sale Inv # {{ trip.sale_invoice_no }}</span>
      {% endif %}
    {% else %}
      <span class="badge badge-primary">New Spot Trip</span>
    {% endif %}
  </div>

  <!-- Header -->
  <div class="section-card">
    <div class="form-row">
      <div class="col-md-2">
        <label class="small mb-1">Date</label>
        <input type="date"
               name="trip_date"
               class="form-control form-control-sm"
               value="{{ trip_date|date:'Y-m-d' }}">
      </div>
      <div class="col-md-3">
        <label class="small mb-1">Staff / Driver</label>
        <select name="staff_id" class="form-control form-control-sm">
          <option value="0">— Select —</option>
          {% for s in staff_list %}
            <option value="{{ s.t_id }}"
                    {% if trip and trip.staff_id == s.t_id %}selected{% endif %}>
              {{ s.name }}
            </option>
          {% endfor %}
        </select>

      </div>
      <div class="col-md-3">
        <label class="small mb-1">Vehicle</label>
        <input type="text" name="vehicle_desc"
               class="form-control form-control-sm"
               value="{{ trip.vehicle_desc|default_if_none:'' }}">
      </div>
      <div class="col-md-4">
        <label class="small mb-1">Route / Area</label>
        <input type="text" name="route_desc"
               class="form-control form-control-sm"
               value="{{ trip.route_desc|default_if_none:'' }}">
      </div>
    </div>

    <div class="form-row mt-2">
      <div class="col-md-12">
        <label class="small mb-1">General Remarks</label>
        <input type="text" name="general_note"
               class="form-control form-control-sm"
               value="{{ trip.general_note|default_if_none:'' }}">
      </div>
    </div>
  </div>

  <!-- 1) Items: Sale + Return -->
  <div class="section-card">

    <h6>1) Items (Sale / Return)</h6>
    <div class="table-responsive">
      <table class="table table-sm table-bordered table-compact" id="tbl-items">
        <thead class="thead-light">
          <tr>
            <th style="width: 60px;">#</th>
            <th style="width: 80px;">Return?</th>
            <th style="width: 90px;">Prod ID</th>
            <th>Product Name</th>
            <th style="width: 100px;">Ret. Type</th>
            <th style="width: 90px;">Qty</th>
            <th style="width: 90px;">Price</th>
            <th style="width: 120px;">Note</th>
            <th style="width: 40px;"></th>
          </tr>
        </thead>
        <tbody>
          {% if item_lines %}
            {% for ln in item_lines %}
              {% with p=ln.product_obj %}
              <tr>
                <td class="text-center">{{ forloop.counter }}</td>

                <!-- Return? -->
                <td class="text-center">
                  <select name="item_is_return[]" class="form-control form-control-sm small-input item-return-flag">
                    <option value="0" {% if not ln.is_return %}selected{% endif %}>Sale</option>
                    <option value="1" {% if ln.is_return %}selected{% endif %}>Return</option>
                  </select>
                </td>

                <!-- Prod ID = hidden prod_id + visible product_code -->
                <td>
                  <input type="hidden"
                         name="item_line_id[]"
                         value="{{ ln.id }}">

                  {# IMPORTANT: yahan ab hamesha ln.product_id use karo #}
                  <input type="hidden"
                         name="item_product_id[]"
                         class="item-product-id-hidden"
                         value="{{ ln.product_id }}">

                  <input type="text"
                         class="form-control form-control-sm small-input item-prod-id"
                         value="{% if p %}{{ p.product_code }}{% else %}{{ ln.product_id }}{% endif %}">
                </td>

                <!-- Product Name (Select2 target) -->
                <td>
                  <select name="item_product_name[]"
                          class="form-control form-control-sm small-input item-prod-name"
                          style="width:100%;">
                    {% if p %}
                      <option value="{{ p.product_code }}" selected>
                        {{ p.name }} ({{ p.product_code }})
                      </option>
                    {% else %}
                      <option value="">— Search Product —</option>
                    {% endif %}
                  </select>
                </td>

                <!-- Return Type -->
                <td>
                  <select name="item_return_type[]"
                          class="form-control form-control-sm small-input item-return-type">
                    <option value="">—</option>
                    <option value="expiry" {% if ln.return_type == "expiry" %}selected{% endif %}>Expiry</option>
                    <option value="damage" {% if ln.return_type == "damage" %}selected{% endif %}>Damage</option>
                  </select>
                </td>

                <!-- Qty -->
                <td>
                  <input type="number" step="0.01"
                         name="item_qty[]"
                         class="form-control form-control-sm small-input item-qty"
                         value="{{ ln.quantity }}">
                </td>

                <!-- Price -->
                <td>
                  <input type="number" step="0.01"
                         name="item_price[]"
                         class="form-control form-control-sm small-input item-price"
                         value="{{ ln.price }}">
                </td>

                <!-- Note -->
                <td>
                  <input type="text"
                         name="item_note[]"
                         class="form-control form-control-sm small-input item-note"
                         value="{{ ln.note }}">
                </td>

                <!-- delete -->
                <td class="text-center">
                  <button type="button"
                          class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                </td>
              </tr>
              {% endwith %}
            {% endfor %}
          {% else %}
            <!-- Empty state row (template) -->
            <tr>
              <td class="text-center">1</td>

              <!-- Return? -->
              <td class="text-center">
                <select name="item_is_return[]"
                        class="form-control form-control-sm small-input item-return-flag">
                  <option value="0">Sale</option>
                  <option value="1">Return</option>
                </select>
              </td>

              <!-- Prod ID + hidden product_id -->
              <td>
                <input type="hidden"
                       name="item_line_id[]"
                       value="">
                <input type="hidden"
                       name="item_product_id[]"
                       class="item-product-id-hidden"
                       value="">
                <input type="text"
                       class="form-control form-control-sm small-input item-prod-id"
                       placeholder="Code">
              </td>

              <!-- Product Name (select2) -->
              <td>
                <select name="item_product_name[]"
                        class="form-control form-control-sm small-input item-prod-name"
                        style="width:100%;">
                  <option value="">— Search Product —</option>
                </select>
              </td>

              <!-- Ret. Type -->
              <td>
                <select name="item_return_type[]"
                        class="form-control form-control-sm small-input item-return-type">
                  <option value="">—</option>
                  <option value="expiry">Expiry</option>
                  <option value="damage">Damage</option>
                </select>
              </td>

              <!-- Qty -->
              <td>
                <input type="number" step="0.01"
                       name="item_qty[]"
                       class="form-control form-control-sm small-input item-qty">
              </td>

              <!-- Price -->
              <td>
                <input type="number" step="0.01"
                       name="item_price[]"
                       class="form-control form-control-sm small-input item-price">
              </td>

              <!-- Note -->
              <td>
                <input type="text"
                       name="item_note[]"
                       class="form-control form-control-sm small-input item-note">
              </td>

              <!-- delete -->
              <td class="text-center">
                <button type="button"
                        class="btn btn-sm btn-danger btn-remove-row">&times;</button>
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
    <button type="button"
            id="btn-add-item-row"
            class="btn btn-sm btn-outline-primary">
      + Add Item Row
    </button>



  </div>

  <!-- 2) Extra Cash Given -->
  <div class="section-card">
    <h6>2) Extra Cash Given (to Driver / Vehicle)</h6>
    <div class="table-responsive">
      <table class="table table-sm table-bordered table-compact" id="tbl-extra">
        <thead class="thead-light">
          <tr>
            <th style="width: 60px;">#</th>
            <th style="width: 180px;">Bank</th>
            <th style="width: 120px;">Amount</th>
            <th>Note</th>
            <th style="width: 40px;"></th>
          </tr>
        </thead>
        <tbody>
          {% if extra_cash_lines %}
            {% for ln in extra_cash_lines %}
              <tr>
                <td class="text-center">{{ forloop.counter }}</td>
                <td>
                  <select name="extra_bank_id[]"
                          class="form-control form-control-sm small-input">
                    <option value="0">—</option>
                    {% for b in bank_accounts %}
                      <option value="{{ b.t_id }}"
                        {% if ln.bank_id == b.t_id %}selected{% endif %}>
                        {{ b.name }}
                      </option>
                    {% endfor %}
                  </select>
                </td>
                <td>
                  <input type="number" step="0.01"
                         name="extra_amount[]"
                         class="form-control form-control-sm small-input"
                         value="{{ ln.amount }}">
                </td>
                <td>
                  <input type="text"
                         name="extra_note[]"
                         class="form-control form-control-sm small-input"
                         value="{{ ln.note }}">
                </td>
                <td class="text-center">
                  <button type="button"
                          class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                </td>
              </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td class="text-center">1</td>
              <td>
                <select name="extra_bank_id[]"
                        class="form-control form-control-sm small-input">
                  <option value="0">—</option>
                  {% for b in bank_accounts %}
                    <option value="{{ b.t_id }}">{{ b.name }}</option>
                  {% endfor %}
                </select>
              </td>
              <td>
                <input type="number" step="0.01"
                       name="extra_amount[]"
                       class="form-control form-control-sm small-input">
              </td>
              <td>
                <input type="text"
                       name="extra_note[]"
                       class="form-control form-control-sm small-input">
              </td>
              <td class="text-center">
                <button type="button"
                        class="btn btn-sm btn-danger btn-remove-row">&times;</button>
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
    <button type="button"
            id="btn-add-extra-row"
            class="btn btn-sm btn-outline-primary">
      + Add Extra Cash Row
    </button>
  </div>

  <!-- 4) Debitor Cash -->
  <div class="section-card">
    <h6>4) Debitor Cash Movements</h6>
    <div class="row">
      <div class="col-md-6">
        <h6 class="text-success">4.a) Debitor Cash Receive</h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-compact" id="tbl-debt-recv">
            <thead class="thead-light">
              <tr>
                <th style="width: 60px;">#</th>
                <th style="width: 100px;">Debitor ID</th>
                <th style="width: 180px;">Debitor Name</th>
                <th style="width: 120px;">Amount</th>
                <th>Note</th>
                <th style="width: 40px;"></th>

              </tr>
            </thead>
            <tbody>
              {% if debitor_movements %}
                {% for ln in debitor_movements %}
                  {% if ln.direction == "RECEIVE" %}
                    <tr>
                      <td class="text-center">{{ forloop.counter }}</td>

                      <!-- Debitor ID -->
                      <td>
                        <input type="number"
                               name="debt_recv_debitor_id[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.debitor_id }}">
                      </td>

                      <!-- Debitor Name (Select2) -->
                      <td>
                        <select class="form-control form-control-sm small-input debitor-select debitor-recv-select"
                                style="width:100%;">
                          <option value="">— Select Debitor —</option>
                          {# agar ln.debitor property ho to yahan bhi pre-fill kar sakte ho #}
                        </select>
                      </td>

                      <!-- Amount -->
                      <td>
                        <input type="number" step="0.01"
                               name="debt_recv_amount[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.amount }}">
                      </td>

                      <!-- Note -->
                      <td>
                        <input type="text"
                               name="debt_recv_note[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.note }}">
                      </td>

                      <!-- Delete -->
                      <td class="text-center">
                        <button type="button"
                                class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                      </td>
                    </tr>
                  {% endif %}
                {% endfor %}
              {% else %}
                <tr>
                  <td class="text-center">1</td>
                  <td>
                    <input type="number"
                           name="debt_recv_debitor_id[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <select class="form-control form-control-sm small-input debitor-select debitor-recv-select"
                            style="width:100%;">
                      <option value="">— Select Debitor —</option>
                    </select>
                  </td>
                  <td>
                    <input type="number" step="0.01"
                           name="debt_recv_amount[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <input type="text"
                           name="debt_recv_note[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td class="text-center">
                    <button type="button"
                            class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                  </td>
                </tr>
              {% endif %}
            </tbody>

          </table>
        </div>
        <button type="button"
                id="btn-add-debt-recv-row"
                class="btn btn-sm btn-outline-primary">
          + Add Receive Row
        </button>
      </div>

      <div class="col-md-6">
        <h6 class="text-danger">4.b) Debitor Cash Send</h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-compact" id="tbl-debt-send">
            <thead class="thead-light">
              <tr>
                <th style="width: 60px;">#</th>
                <th style="width: 100px;">Debitor ID</th>
                <th style="width: 120px;">Name</th>
                <th style="width: 120px;">Amount</th>
                <th>Note</th>
                <th style="width: 40px;"></th>
              </tr>
            </thead>
            <tbody>
              {% if debitor_movements %}
                {% for ln in debitor_movements %}
                  {% if ln.direction == "SEND" %}
                    <tr>
                      <td class="text-center">{{ forloop.counter }}</td>

                      <!-- Debitor ID -->
                      <td>
                        <input type="number"
                               name="debt_send_debitor_id[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.debitor_id }}">
                      </td>

                      <!-- Debitor Name (Select2) -->
                      <td>
                        <select class="form-control form-control-sm small-input debitor-select debitor-send-select"
                                style="width:100%;">
                          <option value="">— Select Debitor —</option>
                        </select>
                      </td>

                      <!-- Amount -->
                      <td>
                        <input type="number" step="0.01"
                               name="debt_send_amount[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.amount }}">
                      </td>

                      <!-- Note -->
                      <td>
                        <input type="text"
                               name="debt_send_note[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.note }}">
                      </td>

                      <!-- Delete -->
                      <td class="text-center">
                        <button type="button"
                                class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                      </td>
                    </tr>
                  {% endif %}
                {% endfor %}
              {% else %}
                <tr>
                  <td class="text-center">1</td>
                  <td>
                    <input type="number"
                           name="debt_send_debitor_id[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <select class="form-control form-control-sm small-input debitor-select debitor-send-select"
                            style="width:100%;">
                      <option value="">— Select Debitor —</option>
                    </select>
                  </td>
                  <td>
                    <input type="number" step="0.01"
                           name="debt_send_amount[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <input type="text"
                           name="debt_send_note[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td class="text-center">
                    <button type="button"
                            class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                  </td>
                </tr>
              {% endif %}
            </tbody>

          </table>
        </div>
        <button type="button"
                id="btn-add-debt-send-row"
                class="btn btn-sm btn-outline-primary">
          + Add Send Row
        </button>
      </div>
    </div>
  </div>

  <!-- 5) Expenses -->
  <div class="section-card">
    <h6>5) Expenses (Trip-wise)</h6>
    <div class="table-responsive">
      <table class="table table-sm table-bordered table-compact" id="tbl-expenses">
        <thead class="thead-light">
          <tr>
            <th style="width: 60px;">#</th>
            <th style="width: 160px;">Expense Name</th>
            <th style="width: 160px;">Debitor Name (optional)</th>
            <th style="width: 100px;">Amount</th>
            <th style="width: 100px;">Paid</th>
            <th>Note</th>
            <th style="width: 40px;"></th>
          </tr>
        </thead>
        <tbody>
          {% if expense_lines %}
            {% for ln in expense_lines %}
              <tr>
                <td class="text-center">{{ forloop.counter }}</td>

                <!-- Expense Name (Select2 + ID = expenses_record.t_id) -->
                <td>
                  <select name="exp_expense_id[]"
                          class="form-control form-control-sm small-input expense-select">
                    <option value="0">—</option>
                    {% for e in expenses_list %}
                      <option value="{{ e.t_id }}"
                        {% if ln.expense_t_id == e.t_id %}selected{% endif %}>
                        {{ e.expense_name }}
                      </option>
                    {% endfor %}
                  </select>
                </td>

                <!-- Debitor (optional) -->
                <td>
                  <input type="hidden"
                         name="exp_debitor_id[]"
                         class="exp-debitor-id"
                         value="{{ ln.debitor_id }}">
                  <select class="form-control form-control-sm small-input expense-debitor-select">
                    {% if ln.debitor_id %}
                      <!-- Agar tumhare paas debitor name ho to yahan use kar lena -->
                      <option value="{{ ln.debitor_id }}" selected>
                        Deb #{{ ln.debitor_id }}
                      </option>
                    {% else %}
                      <option value="">— Select Debitor —</option>
                    {% endif %}
                  </select>
                </td>

                <!-- Amount -->
                <td>
                  <input type="number" step="0.01"
                         name="exp_amount[]"
                         class="form-control form-control-sm small-input"
                         value="{{ ln.amount }}">
                </td>

                <!-- Paid -->
                <td>
                  <input type="number" step="0.01"
                         name="exp_paid_amount[]"
                         class="form-control form-control-sm small-input"
                         value="{{ ln.paid_amount }}">
                </td>

                <!-- Note -->
                <td>
                  <input type="text"
                         name="exp_note[]"
                         class="form-control form-control-sm small-input"
                         value="{{ ln.note }}">
                </td>

                <!-- Delete -->
                <td class="text-center">
                  <button type="button"
                          class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                </td>
              </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td class="text-center">1</td>

              <!-- Expense Name -->
              <td>
                <select name="exp_expense_id[]"
                        class="form-control form-control-sm small-input expense-select">
                  <option value="0">—</option>
                  {% for e in expenses_list %}
                    <option value="{{ e.t_id }}">{{ e.expense_name }}</option>
                  {% endfor %}
                </select>
              </td>

              <!-- Debitor (optional) -->
              <td>
                <input type="hidden"
                       name="exp_debitor_id[]"
                       class="exp-debitor-id">
                <select class="form-control form-control-sm small-input expense-debitor-select">
                  <option value="">— Select Debitor —</option>
                </select>
              </td>

              <!-- Amount -->
              <td>
                <input type="number" step="0.01"
                       name="exp_amount[]"
                       class="form-control form-control-sm small-input">
              </td>

              <!-- Paid -->
              <td>
                <input type="number" step="0.01"
                       name="exp_paid_amount[]"
                       class="form-control form-control-sm small-input">
              </td>

              <!-- Note -->
              <td>
                <input type="text"
                       name="exp_note[]"
                       class="form-control form-control-sm small-input">
              </td>

              <!-- Delete -->
              <td class="text-center">
                <button type="button"
                        class="btn btn-sm btn-danger btn-remove-row">&times;</button>
              </td>
            </tr>
          {% endif %}
        </tbody>

      </table>
    </div>
    <button type="button"
            id="btn-add-exp-row"
            class="btn btn-sm btn-outline-primary">
      + Add Expense Row
    </button>
  </div>


  <!-- 3) Customer Credit Receive / Send -->
  <div class="section-card">
    <h6>3) Customer Credit Movements</h6>
    <div class="row">
      <div class="col-md-6">
        <h6 class="text-success">3.a) Credit Receive from Customer</h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-compact" id="tbl-cust-recv">
            <thead class="thead-light">
              <tr>
                <th style="width: 60px;">#</th>
                <th style="width: 100px;">Cust ID</th>
                <th style="width: 180px;">Customer Name</th>
                <th style="width: 120px;">Amount</th>
                <th>Note</th>
                <th style="width: 40px;"></th>
              </tr>
            </thead>

            <tbody>
              {% if customer_movements %}
                {% for ln in customer_movements %}
                  {% if ln.direction == "RECEIVE" %}
                    <tr>
                      <td class="text-center">{{ forloop.counter }}</td>

                      <!-- Cust ID -->
                      <td>
                        <input type="number"
                               name="cust_recv_customer_id[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.customer_id }}">
                      </td>

                      <!-- Customer Name (Select2) -->
                      <td>
                        <select class="form-control form-control-sm small-input customer-select customer-recv-select"
                                style="width:100%;">
                          <option value="">— Select Customer —</option>
                          {# agar model me ln.customer property ho to yahan pre-fill bhi kar sakte ho #}
                          {# 
                          {% if ln.customer %}
                            <option value="{{ ln.customer.t_id }}" selected>
                              {{ ln.customer.name }}
                            </option>
                          {% endif %}
                          #}
                        </select>
                      </td>

                      <!-- Amount -->
                      <td>
                        <input type="number" step="0.01"
                               name="cust_recv_amount[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.amount }}">
                      </td>

                      <!-- Note -->
                      <td>
                        <input type="text"
                               name="cust_recv_note[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.note }}">
                      </td>

                      <!-- Delete -->
                      <td class="text-center">
                        <button type="button"
                                class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                      </td>
                    </tr>

                  {% endif %}
                {% endfor %}

                <tr>
                  <td class="text-center">1</td>
                  <td>
                    <input type="number"
                           name="cust_recv_customer_id[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <select class="form-control form-control-sm small-input customer-select customer-recv-select"
                            style="width:100%;">
                      <option value="">— Select Customer —</option>
                    </select>
                  </td>
                  <td>
                    <input type="number" step="0.01"
                           name="cust_recv_amount[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <input type="text"
                           name="cust_recv_note[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td class="text-center">
                    <button type="button"
                            class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                  </td>
                </tr>

              {% else %}
                <tr>
                  <td class="text-center">1</td>
                  <td>
                    <input type="number"
                           name="cust_recv_customer_id[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <select class="form-control form-control-sm small-input customer-select customer-recv-select"
                            style="width:100%;">
                      <option value="">— Select Customer —</option>
                    </select>
                  </td>
                  <td>
                    <input type="number" step="0.01"
                           name="cust_recv_amount[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <input type="text"
                           name="cust_recv_note[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td class="text-center">
                    <button type="button"
                            class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                  </td>
                </tr>
              {% endif %}
            </tbody>

          </table>
        </div>
        <button type="button"
                id="btn-add-cust-recv-row"
                class="btn btn-sm btn-outline-primary">
          + Add Receive Row
        </button>
      </div>

      <div class="col-md-6">
        <h6 class="text-danger">3.b) Credit Sent to Customer</h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-compact" id="tbl-cust-send">
            <thead class="thead-light">
              <tr>
                <th style="width: 60px;">#</th>
                <th style="width: 100px;">Cust ID</th>
                <th style="width: 180px;">Customer Name</th>
                <th style="width: 120px;">Amount</th>
                <th>Note</th>
                <th style="width: 40px;"></th>

              </tr>
            </thead>
            <tbody>
              {% if customer_movements %}
                {% for ln in customer_movements %}
                  {% if ln.direction == "SEND" %}
                    <tr>
                      <td class="text-center">{{ forloop.counter }}</td>

                      <!-- Cust ID -->
                      <td>
                        <input type="number"
                               name="cust_send_customer_id[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.customer_id }}">
                      </td>

                      <!-- Customer Name (Select2) -->
                      <td>
                        <select class="form-control form-control-sm small-input customer-select customer-send-select"
                                style="width:100%;">
                          <option value="">— Select Customer —</option>
                          {# yahan bhi chaaho to ln.customer ho to pre-fill #}
                        </select>
                      </td>

                      <!-- Amount -->
                      <td>
                        <input type="number" step="0.01"
                               name="cust_send_amount[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.amount }}">
                      </td>

                      <!-- Note -->
                      <td>
                        <input type="text"
                               name="cust_send_note[]"
                               class="form-control form-control-sm small-input"
                               value="{{ ln.note }}">
                      </td>

                      <!-- Delete -->
                      <td class="text-center">
                        <button type="button"
                                class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                      </td>
                    </tr>
                  {% endif %}
                {% endfor %}

                <tr>
                  <td class="text-center">1</td>
                  <td>
                    <input type="number"
                           name="cust_send_customer_id[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <select class="form-control form-control-sm small-input customer-select customer-send-select"
                            style="width:100%;">
                      <option value="">— Select Customer —</option>
                    </select>
                  </td>
                  <td>
                    <input type="number" step="0.01"
                           name="cust_send_amount[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <input type="text"
                           name="cust_send_note[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td class="text-center">
                    <button type="button"
                            class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                  </td>
                </tr>
              {% else %}
                <tr>
                  <td class="text-center">1</td>
                  <td>
                    <input type="number"
                           name="cust_send_customer_id[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <select class="form-control form-control-sm small-input customer-select customer-send-select"
                            style="width:100%;">
                      <option value="">— Select Customer —</option>
                    </select>
                  </td>
                  <td>
                    <input type="number" step="0.01"
                           name="cust_send_amount[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td>
                    <input type="text"
                           name="cust_send_note[]"
                           class="form-control form-control-sm small-input">
                  </td>
                  <td class="text-center">
                    <button type="button"
                            class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                  </td>
                </tr>
              {% endif %}
            </tbody>

          </table>
        </div>
        <button type="button"
                id="btn-add-cust-send-row"
                class="btn btn-sm btn-outline-primary">
          + Add Send Row
        </button>
      </div>
    </div>
  </div>



  <!-- 6) Discount & Other Charges -->
  <div class="section-card">
    <h6>6) Discount / Other Charges</h6>
    <div class="form-row">
      <div class="col-md-2">
        <label class="small mb-1">Discount</label>
        <input type="number" step="0.01"
               name="discount_amount"
               class="form-control form-control-sm"
               value="{{ trip.discount_amount|default_if_none:0 }}">
      </div>
      <div class="col-md-2">
        <label class="small mb-1">Other Charges</label>
        <input type="number" step="0.01"
               name="other_charges_amount"
               class="form-control form-control-sm"
               value="{{ trip.other_charges_amount|default_if_none:0 }}">
      </div>
      <div class="col-md-8">
        <label class="small mb-1">Description / Remarks</label>
        <input type="text"
               name="discount_note"
               class="form-control form-control-sm"
               value="{{ trip.discount_note|default_if_none:'' }}">
      </div>
    </div>
  </div>

  <!-- 7) Final Cash Receive -->
  <div class="section-card">
    <h6>7) Final Cash Received (Banks wise)</h6>
    <div class="table-responsive">
      <table class="table table-sm table-bordered table-compact" id="tbl-finalcash">
        <thead class="thead-light">
          <tr>
            <th style="width: 60px;">#</th>
            <th style="width: 160px;">Bank</th>
            <th style="width: 120px;">Amount</th>
            <th>Note</th>
            <th style="width: 40px;"></th>
          </tr>
        </thead>
        <tbody>
          {% if final_cash_lines %}
            {% for ln in final_cash_lines %}
              <tr>
                <td class="text-center">{{ forloop.counter }}</td>
                <td>
                  <select name="final_bank_id[]"
                          class="form-control form-control-sm small-input">
                    <option value="0">—</option>
                    {% for b in bank_accounts %}
                      <option value="{{ b.t_id }}"
                        {% if ln.bank_id == b.t_id %}selected{% endif %}>
                        {{ b.name }}
                      </option>
                    {% endfor %}
                  </select>
                </td>
                <td>
                  <input type="number" step="0.01"
                         name="final_amount[]"
                         class="form-control form-control-sm small-input"
                         value="{{ ln.amount }}">
                </td>
                <td>
                  <input type="text"
                         name="final_note[]"
                         class="form-control form-control-sm small-input"
                         value="{{ ln.note }}">
                </td>
                <td class="text-center">
                  <button type="button"
                          class="btn btn-sm btn-danger btn-remove-row">&times;</button>
                </td>
              </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td class="text-center">1</td>
              <td>
                <select name="final_bank_id[]"
                        class="form-control form-control-sm small-input">
                  <option value="0">—</option>
                  {% for b in bank_accounts %}
                    <option value="{{ b.t_id }}">{{ b.name }}</option>
                  {% endfor %}
                </select>
              </td>
              <td>
                <input type="number" step="0.01"
                       name="final_amount[]"
                       class="form-control form-control-sm small-input">
              </td>
              <td>
                <input type="text"
                       name="final_note[]"
                       class="form-control form-control-sm small-input">
              </td>
              <td class="text-center">
                <button type="button"
                        class="btn btn-sm btn-danger btn-remove-row">&times;</button>
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
    <button type="button"
            id="btn-add-final-row"
            class="btn btn-sm btn-outline-primary">
      + Add Final Cash Row
    </button>
  </div>

  <!-- Totals summary (just read-only from 'totals') -->
  <div class="section-card">
    <h6>Summary (Computed)</h6>
    <div class="row">
      <div class="col-md-3">
        <strong>Net Sale:</strong>
        <span id="sum-net-sale">
          {% if totals %}{{ totals.net_sale_amount|default_if_none:0 }}{% else %}0{% endif %}
        </span>
      </div>
      <div class="col-md-3">
        <strong>Net Expenses:</strong>
        <span id="sum-net-expense">
          {% if totals %}{{ totals.expenses_total_amount|default_if_none:0 }}{% else %}0{% endif %}
        </span>
      </div>
      
      <div class="col-md-3">
        <strong>Final Cash Expected:</strong>
        <span id="sum-final-expected">
          {% if totals %}{{ totals.final_cash_expected|default_if_none:0 }}{% else %}0{% endif %}
        </span>
      </div>
      <div class="col-md-3">
        <strong>Final Cash Received:</strong>
        <span id="sum-final-received">
          {% if totals %}{{ totals.final_cash_received|default_if_none:0 }}{% else %}0{% endif %}
        </span>
      </div>
      <div class="col-md-3">
        <strong>Variance:</strong>
        <span id="sum-cash-variance">
          {% if totals %}{{ totals.cash_variance|default_if_none:0 }}{% else %}0{% endif %}
        </span>
      </div>
    </div>
  </div>


  <!-- Footer buttons -->
  <div class="mt-3 d-flex justify-content-between">
    <div>
      <a href="{% url 'sales:spottrip_list' %}"
         class="btn btn-secondary btn-sm">
        &laquo; Back to List
      </a>
    </div>
    <div>
      {% if not trip or not trip.is_settled %}
      <button type="submit"
              name="action"
              value="save"
              class="btn btn-primary">
        Save Draft
      </button>
      {% endif %}
      <button type="submit"
              name="action"
              value="settle"
              class="btn btn-success">
        Save &amp; Settle
      </button>
    </div>
  </div>
</form>

{% endblock %}

{% block javascripts %}
<!-- <script src="{% static 'select2/js/select2.full.min.js' %}"></script> -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  var form = document.getElementById('spottrip-form');

  // -------------------- helpers --------------------
  function getCsrfToken() {
    var el = document.querySelector('input[name="csrfmiddlewaretoken"]');
    return el ? el.value : '';
  }
  var csrfToken = getCsrfToken();


  function toNum(val) {
    var x = parseFloat(val);
    return isNaN(x) ? 0 : x;
  }

  function recalcSummary() {
    var saleTotal     = 0;   // 1) items (sale - return)
    var extraTotal    = 0;   // 2) extra cash given
    var finalRecv     = 0;   // 7) final cash received
    var custRecvTotal = 0;   // 3.a customer credit receive
    var custSendTotal = 0;   // 3.b customer credit send
    var debtRecvTotal = 0;   // 4.a debitor cash receive
    var debtSendTotal = 0;   // 4.b debitor cash send
    var expPaidTotal  = 0;   // 5) expenses → sirf PAID cash out

    // ---- 1) Items → Net Sale ----
    var itemsTbl = document.getElementById('tbl-items');
    if (itemsTbl) {
      itemsTbl.querySelectorAll('tbody tr').forEach(function (row) {
        var qtyEl   = row.querySelector('input[name="item_qty[]"]');
        var priceEl = row.querySelector('input[name="item_price[]"]');
        var retSel  = row.querySelector('select[name="item_is_return[]"]');

        var qty   = qtyEl   ? toNum(qtyEl.value)   : 0;
        var price = priceEl ? toNum(priceEl.value) : 0;
        if (!qty && !price) return;     // blank row skip

        var line = qty * price;
        var isReturn = false;
        if (retSel) {
          var rv = (retSel.value || '').toString().toLowerCase();
          isReturn = (rv === '1' || rv === 'true' || rv === 'return');
        }
        saleTotal += isReturn ? -line : line;
      });
    }

    // ---- 2) Extra Cash (Given) ----
    document.querySelectorAll('#tbl-extra input[name="extra_amount[]"]').forEach(function (inp) {
      extraTotal += toNum(inp.value);
    });

    // ---- 7) Final Cash (Received) ----
    document.querySelectorAll('#tbl-finalcash input[name="final_amount[]"]').forEach(function (inp) {
      finalRecv += toNum(inp.value);
    });

    // ---- 3.a Customer Credit Receive ----
    document.querySelectorAll('#tbl-cust-recv input[name="cust_recv_amount[]"]').forEach(function (inp) {
      custRecvTotal += toNum(inp.value);
    });

    // ---- 3.b Customer Credit Send ----
    document.querySelectorAll('#tbl-cust-send input[name="cust_send_amount[]"]').forEach(function (inp) {
      custSendTotal += toNum(inp.value);
    });

    // ---- 4.a Debitor Cash Receive ----
    document.querySelectorAll('#tbl-debt-recv input[name="debt_recv_amount[]"]').forEach(function (inp) {
      debtRecvTotal += toNum(inp.value);
    });

    // ---- 4.b Debitor Cash Send ----
    document.querySelectorAll('#tbl-debt-send input[name="debt_send_amount[]"]').forEach(function (inp) {
      debtSendTotal += toNum(inp.value);
    });

    // ✅ ---- 5) Expenses (PAID = actual cash out) ----
    // sirf exp_paid_amount[] ko minus kareinge, kyun ke:
    //   - Amount > Paid → baqi Debitor me chala jata hai (cash nahi gaya)
    document.querySelectorAll('#tbl-expenses input[name="exp_paid_amount[]"]').forEach(function (inp) {
      expPaidTotal += toNum(inp.value);
    });

    // ---- 6) Discount & Other Charges ----
    var discountInput = document.querySelector('input[name="discount_amount"]');
    var otherInput    = document.querySelector('input[name="other_charges_amount"]');

    var discount = discountInput ? toNum(discountInput.value) : 0;
    var other    = otherInput    ? toNum(otherInput.value)    : 0;

    // ---- Formula (Final Cash Expected) ----
    var finalExpected =
        saleTotal
      + extraTotal
      + custRecvTotal
      + debtRecvTotal
      - custSendTotal
      - debtSendTotal
      - expPaidTotal      // 👈 expenses paid = cash out
      - discount
      + other;

    var variance = finalExpected - finalRecv;

    // ---- UI update ----
    function setText(id, val) {
      var el = document.getElementById(id);
      if (!el) return;
      el.textContent = val.toFixed(2);
    }

    setText('sum-net-sale',        saleTotal);
    setText('sum-net-expense',     expPaidTotal);
    setText('sum-final-expected',  finalExpected);
    setText('sum-final-received',  finalRecv);
    setText('sum-cash-variance',   variance);
  }





  var urlSearchProduct       = "{% url 'products:search_product' %}";
  var urlProdByName          = "{% url 'products:get_products' %}";
  var urlCustSearch          = "{% url 'customers:get_customers' %}";
  var urlCustByTid           = "{% url 'customers:get_customers_with_tid' %}";
  var urlDebSearch           = "{% url 'transactions:get_debitors' %}";
  var urlExpenseAutocomplete = "{% url 'transactions:expense_autocomplete' %}";  // app_name 'pos' assume

  function renumberRows(tbody) {
    if (!tbody) return;
    var rows = tbody.querySelectorAll('tr');
    rows.forEach(function (tr, idx) {
      var cell = tr.querySelector('td');
      if (cell) cell.textContent = idx + 1;
    });
  }

  function hookRemoveButtons(tbl) {
    if (!tbl) return;
    var tbody = tbl.querySelector('tbody');
    if (!tbody) return;
    tbody.querySelectorAll('.btn-remove-row').forEach(function (btn) {
      btn.onclick = function () {
        var tr = btn.closest('tr');
        if (!tr) return;
        var rows = tbody.querySelectorAll('tr');
        if (rows.length > 1) {
          tr.remove();
          renumberRows(tbody);
          recalcSummary();
        }
      };
    });
  }

  function hookSummaryRecalc() {
    if (!form) return;

    // initial load
    recalcSummary();

    // input/update par
    form.addEventListener('input', function (e) {
      var t = e.target;
      if (!t) return;
      var tag = (t.tagName || '').toLowerCase();
      if (tag === 'input' || tag === 'select') {
        recalcSummary();
      }
    });

    form.addEventListener('change', function (e) {
      var t = e.target;
      if (!t) return;
      var tag = (t.tagName || '').toLowerCase();
      if (tag === 'input' || tag === 'select') {
        recalcSummary();
      }
    });
  }



  function initTableAddRemove(btnId, tableId) {
    var btn = document.getElementById(btnId);
    var tbl = document.getElementById(tableId);
    if (!btn || !tbl) return;

    btn.addEventListener('click', function () {
      var tbody = tbl.querySelector('tbody');
      if (!tbody) return;
      var last = tbody.querySelector('tr:last-child');
      if (!last) return;

      var clone = last.cloneNode(true);

      // clear values
      clone.querySelectorAll('input').forEach(function (inp) {
        inp.value = '';
      });
      clone.querySelectorAll('select').forEach(function (sel) {
        sel.selectedIndex = 0;
      });

      // clean old select2 wrappers
      if (typeof $ !== 'undefined') {
        $(clone).find('span.select2').remove();
      }
      clone.querySelectorAll('select').forEach(function (sel) {
        sel.style.display = '';
        sel.classList.remove('select2-hidden-accessible');
        sel.removeAttribute('data-select2-id');
        sel.removeAttribute('tabindex');
        sel.removeAttribute('aria-hidden');
      });

      tbody.appendChild(clone);
      renumberRows(tbody);
      hookRemoveButtons(tbl);

      // re-init select2s for new row
      initItemProductSelect2All();
      initCustomerSelect2All();
      initDebitorSelect2All();
      initExpenseSelect2All();
      initExpenseDebitorSelect2All();
    });

    hookRemoveButtons(tbl);
  }

  // -------------------- Prefill Customer Select2 on edit (from IDs) --------------------
  function prefillCustomerSelectsFromIds() {
    if (typeof $ === 'undefined') return;

    ['recv', 'send'].forEach(function(mode) {
      var tableId   = (mode === 'recv') ? 'tbl-cust-recv' : 'tbl-cust-send';
      var isRecv    = (mode === 'recv');
      var idName    = isRecv ? 'cust_recv_customer_id[]' : 'cust_send_customer_id[]';
      var selClass  = isRecv ? '.customer-recv-select'   : '.customer-send-select';

      var tbl   = document.getElementById(tableId);
      if (!tbl) return;
      var tbody = tbl.querySelector('tbody');
      if (!tbody) return;

      $(tbody).find('tr').each(function() {
        var row    = this;
        var idInput = row.querySelector('input[name="' + idName + '"]');
        var $sel    = $(row).find(selClass);

        if (!idInput || !$sel.length) return;

        var val = (idInput.value || '').trim();
        if (!val) return;  // empty row

        // already selected?
        if ($sel.val()) return;

        $.post(urlCustByTid, {
          term: val,
          csrfmiddlewaretoken: csrfToken
        }).done(function(data) {
          if (data && data.length) {
            var item = data[0];
            var opt  = new Option(item.text, item.id, true, true);
            $sel.append(opt).trigger('change');
          }
        });
      });
    });
  }

  // -------------------- Prefill Debitor Select2 on edit (from IDs) --------------------
  function prefillDebitorSelectsFromIds() {
    if (typeof $ === 'undefined') return;

    ['recv', 'send'].forEach(function(mode) {
      var tableId  = (mode === 'recv') ? 'tbl-debt-recv' : 'tbl-debt-send';
      var isRecv   = (mode === 'recv');
      var idName   = isRecv ? 'debt_recv_debitor_id[]' : 'debt_send_debitor_id[]';
      var selClass = isRecv ? '.debitor-recv-select'   : '.debitor-send-select';

      var tbl   = document.getElementById(tableId);
      if (!tbl) return;
      var tbody = tbl.querySelector('tbody');
      if (!tbody) return;

      $(tbody).find('tr').each(function() {
        var row    = this;
        var idInput = row.querySelector('input[name="' + idName + '"]');
        var $sel    = $(row).find(selClass);

        if (!idInput || !$sel.length) return;

        var val = (idInput.value || '').trim();
        if (!val) return;

        // already selected?
        if ($sel.val()) return;

        $.post(urlDebSearch, {
          term: val,
          csrfmiddlewaretoken: csrfToken
        }).done(function(data) {
          var arr = (data && data.results) ? data.results : [];
          if (!arr.length) return;

          // try exact id match, warna first
          var item = arr.find(function(x) {
            return String(x.id) === String(val);
          }) || arr[0];

          var opt  = new Option(item.text, item.id, true, true);
          $sel.append(opt).trigger('change');
        });
      });
    });
  }

  function initProductSelect2All() {
    if (typeof $ === 'undefined' || !$.fn || !$.fn.select2) return;

    $('.item-prod-name').each(function () {
      var $sel = $(this);
      if ($sel.hasClass('select2-hidden-accessible')) return;

      $sel.select2({
        width: '100%',
        placeholder: 'Search product...',
        ajax: {
          url: "{% url 'products:get_products' %}",
          type: 'POST',
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
              term: params.term || '',
              csrfmiddlewaretoken: '{{ csrf_token }}'
            };
          },
          processResults: function (data) {
            // product.to_json() ko {id,text} me map kar lo
            var results = [];
            (data || []).forEach(function (p) {
              results.push({
                id: p.prod_id || p.product_code,
                text: p.name + ' (' + p.product_code + ')',
                raw: p
              });
            });
            return { results: results };
          }
        }
      });
    });
  }


  // -------------------- Form: block Enter submit + Ctrl+S + Expense validation --------------------
  if (form) {
    form.addEventListener('keydown', function (e) {
      if (e.key === 'Enter' && !e.ctrlKey && !e.metaKey) {
        var tag  = (e.target.tagName || '').toLowerCase();
        var type = (e.target.getAttribute('type') || '').toLowerCase();
        if (tag !== 'textarea' && type !== 'submit' && type !== 'button') {
          e.preventDefault();
        }
      }
    });

    document.addEventListener('keydown', function (e) {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
        e.preventDefault();
        form.submit();   // default "save" action
      }
    });

    // Expense rule: if Amount > Paid -> Debitor required
    form.addEventListener('submit', function (e) {
      var tbl = document.getElementById('tbl-expenses');
      if (!tbl) return;
      var tbody = tbl.querySelector('tbody');
      if (!tbody) return;

      var rows = tbody.querySelectorAll('tr');
      for (var i = 0; i < rows.length; i++) {
        var r = rows[i];
        var amtInp  = r.querySelector('input[name="exp_amount[]"]');
        var paidInp = r.querySelector('input[name="exp_paid_amount[]"]');
        var debInp  = r.querySelector('input[name="exp_debitor_id[]"]');

        var amt  = amtInp  ? parseFloat(amtInp.value  || '0') : 0;
        var paid = paidInp ? parseFloat(paidInp.value || '0') : 0;
        var deb  = debInp  ? (debInp.value || '').trim()      : '';

        if (amt > 0 && paid + 0.0001 < amt && !deb) {
          alert('Expenses row ' + (i + 1) +
                ': Agar Paid < Amount hai to Debitor Name lazmi hai.');
          e.preventDefault();
          return false;
        }
      }
    });
  }

  // -------------------- ITEMS (Sale / Return) --------------------
  function getItemRowControls(row) {
    return {
      codeInput:       row.querySelector('.item-prod-id'),  //row.querySelector('input[name="item_product_code[]"]'),
      hiddenProductId: row.querySelector('input[name="item_product_id[]"]'),
      isReturn:        row.querySelector('select[name="item_is_return[]"]'),
      returnType:      row.querySelector('select[name="item_return_type[]"]'),
      qtyInput:        row.querySelector('input[name="item_qty[]"]'),
      priceInput:      row.querySelector('input[name="item_price[]"]'),
      noteInput:       row.querySelector('input[name="item_note[]"]'),
      nameSelect:      row.querySelector('select[name="item_product_name[]"]')
    };
  }

  function setupItemsKeyboard() {
    var tbl = document.getElementById('tbl-items');
    if (!tbl) return;
    var tbody = tbl.querySelector('tbody');
    if (!tbody) return;

    tbody.addEventListener('keydown', function (e) {
      if (e.key !== 'Enter') return;
      var target = e.target;
      if (!target.name) return;
      var row = target.closest('tr');
      if (!row) return;

      var c = getItemRowControls(row);
      var addBtn = document.getElementById('btn-add-item-row');

      e.preventDefault();
      e.stopPropagation();

      // Product Code
      if (target === c.codeInput) {
        var code = (c.codeInput.value || '').trim();
        var isReturn = false;
        if (c.isReturn) {
          var rv = (c.isReturn.value || '').toString().toLowerCase();
          isReturn = (rv === '1' || rv === 'true' || rv === 'return');
        }

        if (!code) {
          // empty -> open product name select2
          if (typeof $ !== 'undefined' && c.nameSelect && $(c.nameSelect).length) {
            if ($(c.nameSelect).data('select2')) {
              $(c.nameSelect).select2('open');
            } else {
              c.nameSelect.focus();
            }
          } else if (c.nameSelect) {
            c.nameSelect.focus();
          }
          return;
        }

        if (typeof $ === 'undefined') {
          alert('jQuery needed for product search');
          return;
        }

        $.get(urlSearchProduct, { product_code: code })
          .done(function (data) {
            if (data && !data.error) {
              if (c.hiddenProductId && (data.prod_id != null || data.id != null)) {
                c.hiddenProductId.value = (data.prod_id != null ? data.prod_id : data.id);
              }
              if (c.nameSelect) {
                var text = (data.name || '') + ' (' + (data.product_code || code) + ')';
                if (typeof $ !== 'undefined' && $(c.nameSelect).data('select2')) {
                  var opt = new Option(text, data.product_code || code, true, true);
                  $(c.nameSelect).append(opt).trigger('change');
                } else {
                  c.nameSelect.innerHTML = '';
                  var opt2 = document.createElement('option');
                  opt2.value = data.product_code || code;
                  opt2.textContent = text;
                  opt2.selected = true;
                  c.nameSelect.appendChild(opt2);
                }
              }
              if (c.priceInput) {
                var p = (data.l_sale_price != null ? data.l_sale_price : data.price);
                c.priceInput.value = (p != null ? p : '');
              }
              if (c.qtyInput && !c.qtyInput.value) {
                c.qtyInput.value = data.qty || 1;
              }

              if (isReturn) {
                if (c.returnType) c.returnType.focus();
              } else if (c.qtyInput) {
                c.qtyInput.focus();
                c.qtyInput.select && c.qtyInput.select();
              }
            } else {
              alert(data && data.error ? data.error : 'Product not found');
              c.codeInput.focus();
              c.codeInput.select && c.codeInput.select();
            }
          })
          .fail(function () {
            alert('Error searching product');
            c.codeInput.focus();
            c.codeInput.select && c.codeInput.select();
          });

        return;
      }

      // Return? dropdown
      if (target === c.isReturn) {
        var rv2 = (c.isReturn.value || '').toString().toLowerCase();
        var isRet = (rv2 === '1' || rv2 === 'true' || rv2 === 'return');
        if (isRet && c.returnType) {
          c.returnType.focus();
        } else if (!isRet && c.qtyInput) {
          c.qtyInput.focus();
          c.qtyInput.select && c.qtyInput.select();
        }
        return;
      }

      // Return Type
      if (target === c.returnType) {
        if (c.qtyInput) {
          c.qtyInput.focus();
          c.qtyInput.select && c.qtyInput.select();
        }
        return;
      }

      // Qty
      if (target === c.qtyInput) {
        if (c.priceInput) {
          c.priceInput.focus();
          c.priceInput.select && c.priceInput.select();
        }
        return;
      }

      // Price -> new row
      if (target === c.priceInput) {
        if (addBtn) {
          addBtn.click();
          setTimeout(function () {
            var tbody2 = tbl.querySelector('tbody');
            if (!tbody2) return;
            var rows2 = tbody2.querySelectorAll('tr');
            if (!rows2.length) return;
            var lastRow = rows2[rows2.length - 1];
            var c2 = getItemRowControls(lastRow);
            if (c2.codeInput) c2.codeInput.focus();
          }, 10);
        }
        return;
      }

      // Note -> new row
      if (target === c.noteInput) {
        if (addBtn) {
          addBtn.click();
          setTimeout(function () {
            var tbody2 = tbl.querySelector('tbody');
            if (!tbody2) return;
            var rows2 = tbody2.querySelectorAll('tr');
            if (!rows2.length) return;
            var lastRow = rows2[rows2.length - 1];
            var c2 = getItemRowControls(lastRow);
            if (c2.codeInput) c2.codeInput.focus();
          }, 10);
        }
        return;
      }
    });
  }

  // -------------------- Bank tables (Extra / Final) --------------------
  function setupBankTableKeyboard(tableId, prefix) {
    var tbl = document.getElementById(tableId);
    if (!tbl) return;
    var tbody = tbl.querySelector('tbody');
    if (!tbody) return;

    var idName   = prefix + '_bank_id[]';
    var amtName  = prefix + '_amount[]';
    var noteName = prefix + '_note[]';
    var addBtnId = (prefix === 'extra') ? 'btn-add-extra-row' : 'btn-add-final-row';

    tbody.addEventListener('keydown', function (e) {
      if (e.key !== 'Enter') return;
      var target = e.target;
      if (!target.name) return;
      var row = target.closest('tr');
      if (!row) return;

      e.preventDefault();
      e.stopPropagation();

      if (target.name === idName) {
        var amt = row.querySelector('input[name="' + amtName + '"]');
        if (amt) {
          amt.focus();
          amt.select && amt.select();
        }
        return;
      }
      if (target.name === amtName) {
        var note = row.querySelector('input[name="' + noteName + '"]');
        if (note) {
          note.focus();
          note.select && note.select();
        }
        return;
      }
      if (target.name === noteName) {
        var btn = document.getElementById(addBtnId);
        if (btn) {
          btn.click();
          setTimeout(function () {
            var tbody2 = tbl.querySelector('tbody');
            if (!tbody2) return;
            var rows2 = tbody2.querySelectorAll('tr');
            if (!rows2.length) return;
            var lastRow = rows2[rows2.length - 1];
            var bankSel = lastRow.querySelector('select[name="' + idName + '"]');
            if (bankSel) bankSel.focus();
          }, 10);
        }
        return;
      }
    });
  }

  // -------------------- Select2: Item products --------------------
  function initItemProductSelect2All() {
    if (typeof $ === 'undefined' || !$.fn || !$.fn.select2) return;

    $('.item-prod-name').each(function () {
      var $sel = $(this);
      if ($sel.hasClass('select2-hidden-accessible')) return;

      $sel.select2({
        width: '100%',
        placeholder: 'Search product...',
        ajax: {
          url: urlProdByName,
          type: 'POST',
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
              term: params.term || '',
              csrfmiddlewaretoken: csrfToken
            };
          },
          processResults: function (data) {
            data = data || [];
            return {
              results: data.map(function (p) {
                var code = p.product_code || p.code || '';
                var text = (p.name || '') + (code ? ' (' + code + ')' : '');
                return {
                  id: code,
                  text: text,
                  raw: p
                };
              })
            };
          }
        }
      }).on('select2:select', function (e) {
        var item = e.params.data;
        var p = item.raw || {};
        var row = $sel.closest('tr')[0];
        if (!row) return;
        var c = getItemRowControls(row);

        var code = p.product_code || p.code || item.id || '';
        if (c.codeInput) c.codeInput.value = code;
        if (c.hiddenProductId && (p.prod_id != null || p.id != null)) {
          c.hiddenProductId.value = (p.prod_id != null ? p.prod_id : p.id);
        }
        if (c.priceInput) {
          var price = (p.l_sale_price != null ? p.l_sale_price : p.price);
          c.priceInput.value = (price != null ? price : '');
        }
        if (c.qtyInput && !c.qtyInput.value) {
          c.qtyInput.value = 1;
        }

        var isReturn = false;
        if (c.isReturn) {
          var rv = (c.isReturn.value || '').toString().toLowerCase();
          isReturn = (rv === '1' || rv === 'true' || rv === 'return');
        }
        if (isReturn && c.returnType) {
          c.returnType.focus();
        } else if (!isReturn && c.qtyInput) {
          c.qtyInput.focus();
          c.qtyInput.select && c.qtyInput.select();
        }
      });
    });
  }

  // -------------------- Select2: Customer Name --------------------
  function initCustomerSelect2All() {
    if (typeof $ === 'undefined' || !$.fn || !$.fn.select2) return;

    $('.customer-select').each(function () {
      var $sel = $(this);
      if ($sel.hasClass('select2-hidden-accessible')) return;

      $sel.select2({
        width: '100%',
        placeholder: 'Search customer...',
        ajax: {
          url: urlCustSearch,
          type: 'POST',
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
              term: params.term || '',
              csrfmiddlewaretoken: csrfToken
            };
          },
          processResults: function (data) {
            return { results: data || [] };
          }
        }
      }).on('select2:select', function (e) {
        var data = e.params.data;
        var row = $sel.closest('tr')[0];
        if (!row) return;

        var isRecv = $sel.hasClass('customer-recv-select');
        var idName  = isRecv ? 'cust_recv_customer_id[]' : 'cust_send_customer_id[]';
        var amtName = isRecv ? 'cust_recv_amount[]'      : 'cust_send_amount[]';

        var idInput  = row.querySelector('input[name="' + idName  + '"]');
        var amtInput = row.querySelector('input[name="' + amtName + '"]');

        if (idInput) idInput.value = data.id;
        if (amtInput) {
          amtInput.focus();
          amtInput.select && amtInput.select();
        }
      });
    });
  }

  // -------------------- Select2: Debitor Name (Movements 4) --------------------
  function initDebitorSelect2All() {
    if (typeof $ === 'undefined' || !$.fn || !$.fn.select2) return;

    $('.debitor-select').each(function () {
      var $sel = $(this);
      if ($sel.hasClass('select2-hidden-accessible')) return;

      $sel.select2({
        width: '100%',
        placeholder: 'Search debitor...',
        ajax: {
          url: urlDebSearch,
          type: 'POST',
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
              term: params.term || '',
              csrfmiddlewaretoken: csrfToken
            };
          },
          processResults: function (data) {
            return data || { results: [] };
          }
        }
      }).on('select2:select', function (e) {
        var data = e.params.data;
        var row = $sel.closest('tr')[0];
        if (!row) return;

        var isRecv = $sel.hasClass('debitor-recv-select');
        var idName  = isRecv ? 'debt_recv_debitor_id[]' : 'debt_send_debitor_id[]';
        var amtName = isRecv ? 'debt_recv_amount[]'     : 'debt_send_amount[]';

        var idInput  = row.querySelector('input[name="' + idName  + '"]');
        var amtInput = row.querySelector('input[name="' + amtName + '"]');

        if (idInput) idInput.value = data.id;
        if (amtInput) {
          amtInput.focus();
          amtInput.select && amtInput.select();
        }
      });
    });
  }

  // -------------------- Customer Movements keyboard (3.a / 3.b) --------------------
  function setupCustomerMovementsKeyboard() {
    if (!form || typeof $ === 'undefined') return;

    function hook(tableId, mode) {
      var tbl = document.getElementById(tableId);
      if (!tbl) return;
      var tbody = tbl.querySelector('tbody');
      if (!tbody) return;

      var isRecv   = (mode === 'recv');
      var idName   = isRecv ? 'cust_recv_customer_id[]' : 'cust_send_customer_id[]';
      var amtName  = isRecv ? 'cust_recv_amount[]'      : 'cust_send_amount[]';
      var noteName = isRecv ? 'cust_recv_note[]'        : 'cust_send_note[]';
      var selClass = isRecv ? '.customer-recv-select'   : '.customer-send-select';
      var addBtnId = isRecv ? 'btn-add-cust-recv-row'   : 'btn-add-cust-send-row';

      tbody.addEventListener('keydown', function (e) {
        if (e.key !== 'Enter') return;
        var target = e.target;
        if (!target.name) return;
        var row = target.closest('tr');
        if (!row) return;

        e.preventDefault();
        e.stopPropagation();

        // Cust ID
        if (target.name === idName) {
          var val = (target.value || '').trim();
          var $sel = $(row).find(selClass);

          if (val) {
            $.post(urlCustByTid, {
              term: val,
              csrfmiddlewaretoken: csrfToken
            }).done(function (data) {
              if (data && data.length) {
                var item = data[0];
                if ($sel.length) {
                  var opt = new Option(item.text, item.id, true, true);
                  $sel.append(opt).trigger('change');
                }
                var amtInput = row.querySelector('input[name="' + amtName + '"]');
                if (amtInput) {
                  amtInput.focus();
                  amtInput.select && amtInput.select();
                }
              } else {
                alert('Customer not found');
                target.focus();
                target.select && target.select();
              }
            }).fail(function () {
              alert('Error searching customer');
              target.focus();
              target.select && target.select();
            });
          } else {
            if ($sel.length) $sel.select2('open');
          }
          return;
        }

        // Amount
        if (target.name === amtName) {
          var noteInput = row.querySelector('input[name="' + noteName + '"]');
          if (noteInput) {
            noteInput.focus();
            noteInput.select && noteInput.select();
          }
          return;
        }

        // Note -> new row
        if (target.name === noteName) {
          var btn = document.getElementById(addBtnId);
          if (btn) {
            btn.click();
            setTimeout(function () {
              var tbody2 = tbl.querySelector('tbody');
              if (!tbody2) return;
              var rows2 = tbody2.querySelectorAll('tr');
              if (!rows2.length) return;
              var lastRow = rows2[rows2.length - 1];
              var idInput = lastRow.querySelector('input[name="' + idName + '"]');
              if (idInput) {
                idInput.focus();
                idInput.select && idInput.select();
              }
            }, 10);
          }
          return;
        }
      });
    }

    hook('tbl-cust-recv', 'recv');
    hook('tbl-cust-send', 'send');
  }

  // -------------------- Debitor Movements keyboard (4.a / 4.b) --------------------
  function setupDebitorMovementsKeyboard() {
    if (typeof $ === 'undefined') return;

    function hook(tableId, mode) {
      var tbl = document.getElementById(tableId);
      if (!tbl) return;
      var tbody = tbl.querySelector('tbody');
      if (!tbody) return;

      var isRecv   = (mode === 'recv');
      var idName   = isRecv ? 'debt_recv_debitor_id[]' : 'debt_send_debitor_id[]';
      var amtName  = isRecv ? 'debt_recv_amount[]'     : 'debt_send_amount[]';
      var noteName = isRecv ? 'debt_recv_note[]'       : 'debt_send_note[]';
      var selClass = isRecv ? '.debitor-recv-select'   : '.debitor-send-select';
      var addBtnId = isRecv ? 'btn-add-debt-recv-row'  : 'btn-add-debt-send-row';

      tbody.addEventListener('keydown', function (e) {
        if (e.key !== 'Enter') return;
        var target = e.target;
        if (!target.name) return;
        var row = target.closest('tr');
        if (!row) return;

        e.preventDefault();
        e.stopPropagation();

        // Debitor ID
        if (target.name === idName) {
          var val = (target.value || '').trim();
          var $sel = $(row).find(selClass);

          if (val) {
            $.post(urlDebSearch, {
              term: val,
              csrfmiddlewaretoken: csrfToken
            }).done(function (data) {
              var arr = (data && data.results) ? data.results : [];
              if (arr.length) {
                var item = arr[0];
                if ($sel.length) {
                  var opt = new Option(item.text, item.id, true, true);
                  $sel.append(opt).trigger('change');
                }
                var amtInput = row.querySelector('input[name="' + amtName + '"]');
                if (amtInput) {
                  amtInput.focus();
                  amtInput.select && amtInput.select();
                }
              } else {
                alert('Debitor not found');
                target.focus();
                target.select && target.select();
              }
            }).fail(function () {
              alert('Error searching debitor');
              target.focus();
              target.select && target.select();
            });
          } else {
            if ($sel.length) $sel.select2('open');
          }
          return;
        }

        // Amount
        if (target.name === amtName) {
          var noteInput = row.querySelector('input[name="' + noteName + '"]');
          if (noteInput) {
            noteInput.focus();
            noteInput.select && noteInput.select();
          }
          return;
        }

        // Note -> new row
        if (target.name === noteName) {
          var btn = document.getElementById(addBtnId);
          if (btn) {
            btn.click();
            setTimeout(function () {
              var tbody2 = tbl.querySelector('tbody');
              if (!tbody2) return;
              var rows2 = tbody2.querySelectorAll('tr');
              if (!rows2.length) return;
              var lastRow = rows2[rows2.length - 1];
              var idInput = lastRow.querySelector('input[name="' + idName + '"]');
              if (idInput) {
                idInput.focus();
                idInput.select && idInput.select();
              }
            }, 10);
          }
          return;
        }
      });
    }

    hook('tbl-debt-recv', 'recv');
    hook('tbl-debt-send', 'send');
  }

  // -------------------- EXPENSES (5) – select2 + keyboard --------------------
  function getExpenseRowControls(row) {
    return {
      expenseSelect:   row.querySelector('select[name="exp_expense_id[]"]'),
      debitorIdInput:  row.querySelector('input[name="exp_debitor_id[]"]'),
      debitorSelect:   row.querySelector('.expense-debitor-select'),
      amountInput:     row.querySelector('input[name="exp_amount[]"]'),
      paidInput:       row.querySelector('input[name="exp_paid_amount[]"]'),
      noteInput:       row.querySelector('input[name="exp_note[]"]')
    };
  }

  function initExpenseSelect2All() {
    if (typeof $ === 'undefined' || !$.fn || !$.fn.select2) return;

    $('.expense-select').each(function () {
      var $sel = $(this);
      if ($sel.hasClass('select2-hidden-accessible')) return;

      $sel.select2({
        width: '100%',
        placeholder: 'Expense name...',
        ajax: {
          url: urlExpenseAutocomplete,
          type: 'GET',
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
              q: params.term || ''
            };
          },
          processResults: function (data) {
            return { results: data || [] };
          }
        }
      }).on('select2:select', function (e) {
        var row = $sel.closest('tr')[0];
        if (!row) return;
        var c = getExpenseRowControls(row);
        // focus Amount
        if (c.amountInput) {
          c.amountInput.focus();
          c.amountInput.select && c.amountInput.select();
        }
      });
    });
  }

  function initExpenseDebitorSelect2All() {
    if (typeof $ === 'undefined' || !$.fn || !$.fn.select2) return;

    $('.expense-debitor-select').each(function () {
      var $sel = $(this);
      if ($sel.hasClass('select2-hidden-accessible')) return;

      $sel.select2({
        width: '100%',
        placeholder: 'Debitor (optional)...',
        ajax: {
          url: urlDebSearch,
          type: 'POST',
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
              term: params.term || '',
              csrfmiddlewaretoken: csrfToken
            };
          },
          processResults: function (data) {
            return data || { results: [] };
          }
        }
      }).on('select2:select', function (e) {
        var data = e.params.data;
        var row = $sel.closest('tr')[0];
        if (!row) return;
        var c = getExpenseRowControls(row);

        if (c.debitorIdInput) {
          c.debitorIdInput.value = data.id;
        }

        // user mostly pehle amount dalega, is liye yahan focus nahi change kar rahe
      });
    });
  }

  function setupExpensesKeyboard() {
    var tbl = document.getElementById('tbl-expenses');
    if (!tbl) return;
    var tbody = tbl.querySelector('tbody');
    if (!tbody) return;

    var addBtn = document.getElementById('btn-add-exp-row');

    // Enter navigation
    tbody.addEventListener('keydown', function (e) {
      if (e.key !== 'Enter') return;
      var target = e.target;
      if (!target.name) return;
      var row = target.closest('tr');
      if (!row) return;

      e.preventDefault();
      e.stopPropagation();

      var c = getExpenseRowControls(row);

      // Amount: copy to Paid + move focus to Paid
      if (target === c.amountInput) {
        if (c.paidInput) {
          c.paidInput.value = c.amountInput.value;
          c.paidInput.focus();
          c.paidInput.select && c.paidInput.select();
        }
        return;
      }

      // Paid: move to Note
      if (target === c.paidInput) {
        if (c.noteInput) {
          c.noteInput.focus();
          c.noteInput.select && c.noteInput.select();
        }
        return;
      }

      // Note: new row + Expense select2 open
      if (target === c.noteInput) {
        if (addBtn) {
          addBtn.click();
          setTimeout(function () {
            var tbody2 = tbl.querySelector('tbody');
            if (!tbody2) return;
            var rows = tbody2.querySelectorAll('tr');
            if (!rows.length) return;
            var lastRow = rows[rows.length - 1];
            var c2 = getExpenseRowControls(lastRow);
            if (c2.expenseSelect) {
              if (typeof $ !== 'undefined' && $(c2.expenseSelect).data('select2')) {
                $(c2.expenseSelect).select2('open');
              } else {
                c2.expenseSelect.focus();
              }
            }
          }, 10);
        }
        return;
      }
    });

    // Amount input -> always mirror to Paid
    tbody.addEventListener('input', function (e) {
      var target = e.target;
      if (!target || target.name !== 'exp_amount[]') return;
      var row = target.closest('tr');
      if (!row) return;
      var paid = row.querySelector('input[name="exp_paid_amount[]"]');
      if (paid) {
        paid.value = target.value;
      }
    });
  }

  // -------------------- init all tables + flows --------------------
  initTableAddRemove('btn-add-item-row',      'tbl-items');
  initTableAddRemove('btn-add-extra-row',     'tbl-extra');
  initTableAddRemove('btn-add-cust-recv-row', 'tbl-cust-recv');
  initTableAddRemove('btn-add-cust-send-row', 'tbl-cust-send');
  initTableAddRemove('btn-add-debt-recv-row', 'tbl-debt-recv');
  initTableAddRemove('btn-add-debt-send-row', 'tbl-debt-send');
  initTableAddRemove('btn-add-exp-row',       'tbl-expenses');
  initTableAddRemove('btn-add-final-row',     'tbl-finalcash');

  setupItemsKeyboard();
  setupBankTableKeyboard('tbl-extra',  'extra');
  setupBankTableKeyboard('tbl-finalcash', 'final');

  initItemProductSelect2All();
  initCustomerSelect2All();
  initDebitorSelect2All();
  initExpenseSelect2All();
  initExpenseDebitorSelect2All();

  setupCustomerMovementsKeyboard();
  setupDebitorMovementsKeyboard();
  setupExpensesKeyboard();

  prefillCustomerSelectsFromIds();
  prefillDebitorSelectsFromIds();
  initProductSelect2All();

  hookSummaryRecalc();

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