{% extends "pos/base.html" %}
{% block title %}{{ action }}{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<style>
/* ── General Form ── */
.section-card { border-left: 3px solid #004080; margin-bottom: 1rem; }
.section-card .card-header { background: #f0f4ff; font-weight: 700; font-size: .9rem; padding: .5rem .9rem; }
.info-label { font-size:.7rem; color:#888; text-transform:uppercase; }

/* ── Product Table ── */
#products-table .select2-container { min-width: 280px; }
#products-table input[type=number] { max-width: 100px; }
.row-total { min-width: 80px; }

/* ── Calculator ── */
.calc-group { background:#f8f9fb; border:1px solid #dee2e6; border-radius:6px; padding:.7rem 1rem; }
.calc-result { background:#e8f4fd; border-color:#b8daff; }
.calc-highlight { background:#fff3cd; border-color:#ffc107; }

/* ── Keyboard hint ── */
.kbd-hint { font-size:.72rem; color:#aaa; margin-left:4px; }

/* ── Select2 fix ── */
.select2-container--default .select2-selection--single { height:calc(1.5em + .5rem + 2px); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:calc(1.5em + .5rem); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:calc(1.5em + .5rem + 2px); }

/* ── Btn-xs ── */
.btn-xs { padding:.15rem .45rem; font-size:.76rem; }

/* ── Print ── */
@media print {
  .no-print { display:none !important; }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-2">

  <!-- ── HEADER ─────────────────────────────────────────────────────── -->
  <div class="d-flex align-items-center justify-content-between mb-3 no-print">
    <div class="d-flex align-items-center">
      <a href="{% url 'installments:deal_list' %}" class="btn btn-sm btn-outline-secondary mr-2">
        <i class="fa fa-arrow-left"></i>
      </a>
      <div>
        <h4 class="mb-0 font-weight-bold">{{ action }}</h4>
        <small class="text-muted">
          Press <kbd>Ctrl+S</kbd> to save &nbsp;·&nbsp;
          <kbd>Enter</kbd> moves to next field
        </small>
      </div>
    </div>
    <div>
      <button type="button" id="btn-preprint" class="btn btn-sm btn-outline-info mr-2">
        <i class="fa fa-print mr-1"></i> Pre-Print Preview
      </button>
      <button type="button" id="btn-save-deal" class="btn btn-sm btn-primary">
        <i class="fa fa-save mr-1"></i> Save Deal <kbd class="ml-1" style="font-size:.7rem;">Ctrl+S</kbd>
      </button>
    </div>
  </div>

  {% if messages %}
    {% for msg in messages %}
      <div class="alert alert-{{ msg.tags }} alert-dismissible fade show py-2 no-print">
        {{ msg }}<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
      </div>
    {% endfor %}
  {% endif %}

  <!-- ── MAIN FORM ───────────────────────────────────────────────────── -->
  <form id="deal-form" method="post" action="{{ form_url|default:'' }}">
    {% csrf_token %}

    <div class="row">

      <!-- LEFT COLUMN ─────────────────────────────────────── -->
      <div class="col-lg-8">

        <!-- §1 Customer & Buyer Details -->
        <div class="card section-card shadow-sm mb-3">
          <div class="card-header">
            <i class="fa fa-user mr-2 text-primary"></i> Buyer Details
          </div>
          <div class="card-body py-2">
            <div class="row">

              <!-- Customer Select2 AJAX -->
              <div class="col-md-6">
                <div class="form-group mb-2">
                  <label class="font-weight-bold small">Customer <span class="text-danger">*</span></label>
                  <div class="d-flex align-items-center">
                    <select id="customer-select" name="customer_t_id" class="form-control form-control-sm" style="width:100%;" required>
                    </select>
                    <a href="{% url 'customers:customers_add' %}" target="_blank"
                       id="btn-cust-add"
                       class="btn btn-xs btn-outline-success ml-2 no-print"
                       title="Add new customer (opens in new tab)">
                      <i class="fa fa-plus"></i>
                    </a>
                    <button type="button" id="btn-cust-history"
                            class="btn btn-xs btn-outline-warning ml-2 d-none"
                            title="View customer installment history">
                      <i class="fa fa-history"></i>
                    </button>
                  </div>
                  <!-- Hidden display fields for pre-print -->
                  <input type="hidden" id="customer-name-display" name="customer_name_display">
                  <input type="hidden" id="customer-mobile-hidden" name="buyer_mobile">
                  <input type="hidden" id="customer-address-hidden" name="buyer_address">
                </div>
              </div>

              <!-- CNIC -->
              <div class="col-md-6">
                <div class="form-group mb-2">
                  <label class="font-weight-bold small">CNIC</label>
                  <input type="text" id="buyer-cnic" name="buyer_cnic"
                         class="form-control form-control-sm"
                         placeholder="XXXXX-XXXXXXX-X"
                         value="{{ form_data.buyer_cnic|default:'' }}">
                </div>
              </div>

              <!-- Father Name -->
              <div class="col-md-4">
                <div class="form-group mb-2">
                  <label class="font-weight-bold small">Father's Name</label>
                  <input type="text" name="buyer_father_name" id="buyer-father-name"
                         class="form-control form-control-sm"
                         value="{{ form_data.buyer_father_name|default:'' }}">
                </div>
              </div>

              <!-- Occupation -->
              <div class="col-md-4">
                <div class="form-group mb-2">
                  <label class="font-weight-bold small">Occupation</label>
                  <input type="text" name="buyer_occupation" id="buyer-occupation"
                         class="form-control form-control-sm"
                         value="{{ form_data.buyer_occupation|default:'' }}">
                </div>
              </div>

              <!-- Monthly Income -->
              <div class="col-md-4">
                <div class="form-group mb-2">
                  <label class="font-weight-bold small">Monthly Income</label>
                  <input type="number" name="buyer_monthly_income" id="buyer-income"
                         class="form-control form-control-sm" step="1" min="0"
                         value="{{ form_data.buyer_monthly_income|default:0 }}">
                </div>
              </div>

              <!-- Employer -->
              <div class="col-md-6">
                <div class="form-group mb-2">
                  <label class="font-weight-bold small">Employer / Company</label>
                  <input type="text" name="buyer_employer" id="buyer-employer"
                         class="form-control form-control-sm"
                         value="{{ form_data.buyer_employer|default:'' }}">
                </div>
              </div>

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

        <!-- §2 Deal Info -->
        <div class="card section-card shadow-sm mb-3">
          <div class="card-header">
            <i class="fa fa-info-circle mr-2 text-info"></i> Deal Information
          </div>
          <div class="card-body py-2">
            <div class="row">

              <!-- Plan -->
              <div class="col-md-4">
                <div class="form-group mb-2">
                  <label class="font-weight-bold small">Plan</label>
                  <select id="plan-select" name="plan_id" class="form-control form-control-sm">
                    <option value="">— Custom / No Plan —</option>
                    {% for plan in plans %}
                      <option value="{{ plan.id }}"
                        {% if is_edit and deal.plan and deal.plan.id == plan.id %}selected{% endif %}
                        {% if form_data.plan_id == plan.id|stringformat:"s" %}selected{% endif %}
                        data-duration="{{ plan.duration_months }}"
                        data-name="{{ plan.plan_name }}">
                        {{ plan.plan_name }} ({{ plan.duration_months }}m)
                      </option>
                    {% endfor %}
                  </select>
                  <input type="hidden" id="plan-name-display" name="plan_name_display">
                </div>
              </div>

              <!-- Sale Date -->
              <div class="col-md-4">
                <div class="form-group mb-2">
                  <label class="font-weight-bold small">Sale Date <span class="text-danger">*</span></label>
                  <input type="date" name="sale_date" id="sale-date"
                         class="form-control form-control-sm" required
                         value="{% if is_edit and deal %}{{ deal.sale_date|date:'Y-m-d' }}{% else %}{{ today }}{% endif %}">
                </div>
              </div>

              <!-- Duration -->
              <div class="col-md-4">
                <div class="form-group mb-2">
                  <label class="font-weight-bold small">Duration (Months) <span class="text-danger">*</span></label>
                  <input type="number" name="duration_months" id="duration-months"
                         class="form-control form-control-sm" min="1" max="120" required
                         value="{% if is_edit %}{{ deal.duration_months }}{% elif form_data.duration_months %}{{ form_data.duration_months }}{% else %}12{% endif %}">
                </div>
              </div>

              <!-- Notes -->
              <div class="col-12">
                <div class="form-group mb-2">
                  <label class="font-weight-bold small">Notes</label>
                  <textarea name="notes" class="form-control form-control-sm" rows="1"
                            placeholder="Any special terms or remarks">{% if is_edit %}{{ deal.notes }}{% else %}{{ form_data.notes|default:'' }}{% endif %}</textarea>
                </div>
              </div>

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

        <!-- §3 Products -->
        <div class="card section-card shadow-sm mb-3">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="fa fa-box mr-2 text-success"></i> Products</span>
            <button type="button" id="btn-add-product" class="btn btn-xs btn-success no-print">
              <i class="fa fa-plus mr-1"></i> Add Row
            </button>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-sm mb-0" id="products-table">
                <thead class="thead-light">
                  <tr>
                    <th style="min-width:280px;">Product Name</th>
                    <th style="width:110px;">Serial</th>
                    <th style="width:90px;">Qty</th>
                    <th style="width:110px;">Sale Price</th>
                    <th style="width:90px;" class="text-right">Row Total</th>
                    <th style="width:80px;" class="text-center" title="Uncheck for one-time charges (registration, service fee, insurance, etc.) that should NOT be part of the installment plan / financed amount.">
                      Plan?
                    </th>
                    <th class="text-center no-print" style="width:50px;"></th>
                  </tr>
                </thead>
                <tbody id="products-tbody"></tbody>
                <tfoot>
                  <tr class="font-weight-bold bg-light">
                    <td colspan="4" class="text-right pr-3">Installment-Applicable Total:</td>
                    <td class="text-right" id="cash-price-display">0</td>
                    <td class="no-print" colspan="2"></td>
                  </tr>
                  <tr class="bg-light" id="exempt-total-row" style="display:none;">
                    <td colspan="4" class="text-right pr-3 text-muted">One-time / Exempt Charges (paid upfront, not financed):</td>
                    <td class="text-right text-muted" id="exempt-total-display">0</td>
                    <td class="no-print" colspan="2"></td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>

      </div><!-- /LEFT COL -->

      <!-- RIGHT COLUMN ────────────────────────────────────── -->
      <div class="col-lg-4">

        <!-- §4 Deal Calculator -->
        <div class="card section-card shadow-sm mb-3">
          <div class="card-header">
            <i class="fa fa-calculator mr-2 text-warning"></i> Deal Calculator
          </div>
          <div class="card-body py-2">

            <!-- Cash Price (auto-computed) -->
            <div class="form-group mb-2">
              <label class="small font-weight-bold">Cash Price (Auto)</label>
              <input type="number" id="cash-price" name="cash_price" class="form-control form-control-sm calc-result"
                     readonly value="{% if is_edit and deal %}{{ deal.cash_price|default:0 }}{% else %}0{% endif %}">
              <small class="text-muted">Auto-summed from products above</small>
            </div>

            <!-- Markup % -->
            <div class="form-group mb-2">
              <label class="small font-weight-bold">
                Markup / Finance Charge %
                <span class="kbd-hint">→ Enter → Down Payment %</span>
              </label>
              <div class="input-group input-group-sm">
                <input type="number" id="markup-percent" name="markup_percent" class="form-control form-control-sm calc-highlight"
                       placeholder="e.g. 15" min="0" max="200" step="0.01"
                       value="{% if is_edit %}{{ markup_percent_computed }}{% elif form_data.markup_percent %}{{ form_data.markup_percent }}{% else %}0{% endif %}">
                <div class="input-group-append">
                  <span class="input-group-text">%</span>
                </div>
              </div>
            </div>

            <!-- Markup Amount (auto) -->
            <div class="form-group mb-2">
              <label class="small font-weight-bold">Markup Amount (Auto)</label>
              <input type="number" id="markup-amount" name="markup_amount" class="form-control form-control-sm calc-result"
                     readonly value="{% if is_edit %}{{ deal.markup_amount }}{% else %}0{% endif %}">
            </div>

            <!-- Total Price (auto) -->
            <div class="form-group mb-2">
              <label class="small font-weight-bold">Total Sale Price (Auto)</label>
              <input type="number" id="total-price" name="total_price" class="form-control form-control-sm calc-result font-weight-bold"
                     readonly value="{% if is_edit %}{{ deal.total_price }}{% else %}0{% endif %}">
            </div>

            <!-- Down Payment % -->
            <div class="form-group mb-2">
              <label class="small font-weight-bold">
                Down Payment %
                <span class="kbd-hint">→ Enter → Duration</span>
              </label>
              <div class="input-group input-group-sm">
                <input type="number" id="dp-percent" name="dp_percent" class="form-control form-control-sm calc-highlight"
                       placeholder="e.g. 20" min="0" max="100" step="0.01"
                       value="{% if is_edit %}{{ dp_percent_computed }}{% elif form_data.dp_percent %}{{ form_data.dp_percent }}{% else %}0{% endif %}">
                <div class="input-group-append">
                  <span class="input-group-text">%</span>
                </div>
              </div>
            </div>

            <!-- Down Payment Amount (auto) -->
            <div class="form-group mb-2">
              <label class="small font-weight-bold">Down Payment Amount (Auto)</label>
              <input type="number" id="down-payment" name="down_payment" class="form-control form-control-sm calc-result"
                     readonly value="{% if is_edit %}{{ deal.down_payment }}{% else %}0{% endif %}">
            </div>

            <!-- Financed Amount (auto) -->
            <div class="form-group mb-2">
              <label class="small font-weight-bold">Financed Amount (Auto)</label>
              <input type="number" id="financed-amount" name="financed_amount" class="form-control form-control-sm calc-result"
                     readonly value="{% if is_edit %}{{ deal.financed_amount }}{% else %}0{% endif %}">
            </div>

            <!-- Monthly Installment (auto) -->
            <div class="form-group mb-2">
              <label class="small font-weight-bold">Monthly Installment (Auto)</label>
              <input type="number" id="monthly-amount" name="monthly_amount" class="form-control form-control-sm calc-result font-weight-bold text-primary"
                     readonly value="{% if is_edit %}{{ deal.monthly_amount }}{% else %}0{% endif %}">
            </div>

            <!-- Bank for Down Payment -->
            <div class="form-group mb-2">
              <label class="small font-weight-bold">Down Payment Bank</label>
              <select name="down_payment_bank_id" id="dp-bank" class="form-control form-control-sm">
                <option value="">— Not receiving now —</option>
                {% for b in bank_accounts %}
                  <option value="{{ b.id }}"
                    {% if is_edit and deal.down_payment_bank_id == b.id %}selected
                    {% elif not is_edit and form_data.down_payment_bank_id|stringformat:"s" == b.id|stringformat:"s" %}selected{% endif %}>
                    {{ b.name }}
                  </option>
                {% endfor %}
              </select>
              <small class="text-muted">
                Optional — leave as "Not receiving now" to just record the plan.
                Down payment can be received later from
                <a href="{% url 'installments:downpayment_collection' %}" target="_blank">Down Payment Collection</a>.
              </small>
            </div>

            <!-- start_date hidden (same as sale_date) -->
            <input type="hidden" name="start_date" id="start-date">

          </div>
        </div>

        <!-- §5 Schedule Preview -->
        <div class="card section-card shadow-sm mb-3" id="schedule-preview" style="display:none;">
          <div class="card-header">
            <i class="fa fa-calendar-alt mr-2 text-success"></i> Schedule Preview
          </div>
          <div class="card-body p-0">
            <div class="table-responsive" style="max-height:260px; overflow-y:auto;">
              <table class="table table-sm mb-0">
                <thead class="thead-light">
                  <tr><th>Slot</th><th>Due Date</th><th class="text-right">Amount</th><th>Status</th></tr>
                </thead>
                <tbody id="schedule-tbody"></tbody>
              </table>
            </div>
          </div>
        </div>

      </div><!-- /RIGHT COL -->

    </div><!-- /row -->

    <!-- §6 Witnesses -->
    <div class="card section-card shadow-sm mb-3">
      <div class="card-header">
        <i class="fa fa-user-shield mr-2 text-secondary"></i> Witnesses (Optional — Max 2)
      </div>
      <div class="card-body py-2">
        <div class="row">

          <!-- Witness 1 -->
          <div class="col-md-6">
            <div class="card bg-light border mb-2">
              <div class="card-header py-1 d-flex justify-content-between align-items-center">
                <small class="font-weight-bold">Witness 1</small>
                <div>
                  <button type="button" class="btn btn-xs btn-outline-primary mr-1"
                          onclick="openWitnessModal(1)">
                    <i class="fa fa-search mr-1"></i> Search Existing
                  </button>
                  <button type="button" class="btn btn-xs btn-outline-success"
                          onclick="openCreateWitnessModal(1)">
                    <i class="fa fa-plus mr-1"></i> Create New
                  </button>
                </div>
              </div>
              <div class="card-body py-2">
                <div class="row">
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">Name</label>
                    <input type="text" name="w1_name" id="w1_name"
                           class="form-control form-control-sm"
                           value="{{ form_data.w1_name|default:'' }}">
                  </div>
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">CNIC</label>
                    <input type="text" name="w1_cnic" id="w1_cnic"
                           class="form-control form-control-sm"
                           value="{{ form_data.w1_cnic|default:'' }}">
                  </div>
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">Mobile</label>
                    <input type="text" name="w1_mobile" id="w1_mobile"
                           class="form-control form-control-sm" value="{{ form_data.w1_mobile|default:'' }}">
                  </div>
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">Father Name</label>
                    <input type="text" name="w1_father_name" id="w1_father_name"
                           class="form-control form-control-sm" value="{{ form_data.w1_father_name|default:'' }}">
                  </div>
                  <div class="col-12 mb-1">
                    <label class="small font-weight-bold">Address</label>
                    <input type="text" name="w1_address" id="w1_address"
                           class="form-control form-control-sm" value="{{ form_data.w1_address|default:'' }}">
                  </div>
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">Occupation</label>
                    <input type="text" name="w1_occupation" id="w1_occupation"
                           class="form-control form-control-sm" value="{{ form_data.w1_occupation|default:'' }}">
                  </div>
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">Relationship</label>
                    <input type="text" name="w1_relationship" id="w1_relationship"
                           class="form-control form-control-sm" value="{{ form_data.w1_relationship|default:'' }}">
                  </div>
                  <input type="hidden" name="w1_phone" id="w1_phone" value="{{ form_data.w1_phone|default:'' }}">
                  <input type="hidden" name="w1_notes" id="w1_notes" value="{{ form_data.w1_notes|default:'' }}">
                </div>
              </div>
            </div>
          </div>

          <!-- Witness 2 -->
          <div class="col-md-6">
            <div class="card bg-light border mb-2">
              <div class="card-header py-1 d-flex justify-content-between align-items-center">
                <small class="font-weight-bold">Witness 2</small>
                <div>
                  <button type="button" class="btn btn-xs btn-outline-primary mr-1"
                          onclick="openWitnessModal(2)">
                    <i class="fa fa-search mr-1"></i> Search Existing
                  </button>
                  <button type="button" class="btn btn-xs btn-outline-success"
                          onclick="openCreateWitnessModal(2)">
                    <i class="fa fa-plus mr-1"></i> Create New
                  </button>
                </div>
              </div>
              <div class="card-body py-2">
                <div class="row">
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">Name</label>
                    <input type="text" name="w2_name" id="w2_name"
                           class="form-control form-control-sm"
                           value="{{ form_data.w2_name|default:'' }}">
                  </div>
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">CNIC</label>
                    <input type="text" name="w2_cnic" id="w2_cnic"
                           class="form-control form-control-sm"
                           value="{{ form_data.w2_cnic|default:'' }}">
                  </div>
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">Mobile</label>
                    <input type="text" name="w2_mobile" id="w2_mobile"
                           class="form-control form-control-sm" value="{{ form_data.w2_mobile|default:'' }}">
                  </div>
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">Father Name</label>
                    <input type="text" name="w2_father_name" id="w2_father_name"
                           class="form-control form-control-sm" value="{{ form_data.w2_father_name|default:'' }}">
                  </div>
                  <div class="col-12 mb-1">
                    <label class="small font-weight-bold">Address</label>
                    <input type="text" name="w2_address" id="w2_address"
                           class="form-control form-control-sm" value="{{ form_data.w2_address|default:'' }}">
                  </div>
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">Occupation</label>
                    <input type="text" name="w2_occupation" id="w2_occupation"
                           class="form-control form-control-sm" value="{{ form_data.w2_occupation|default:'' }}">
                  </div>
                  <div class="col-6 mb-1">
                    <label class="small font-weight-bold">Relationship</label>
                    <input type="text" name="w2_relationship" id="w2_relationship"
                           class="form-control form-control-sm" value="{{ form_data.w2_relationship|default:'' }}">
                  </div>
                  <input type="hidden" name="w2_phone" id="w2_phone" value="{{ form_data.w2_phone|default:'' }}">
                  <input type="hidden" name="w2_notes" id="w2_notes" value="{{ form_data.w2_notes|default:'' }}">
                </div>
              </div>
            </div>
          </div>

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

    <!-- Hidden fields for form submission -->
    <input type="hidden" name="products_json" id="products-json" value="{{ initial_products_json|default:'[]' }}">
    <input type="hidden" name="exempt_total" id="exempt-total" value="0">

  </form><!-- /deal-form -->

</div><!-- /container -->


<!-- ── WITNESS SEARCH MODAL ────────────────────────────────────────── -->
<div class="modal fade" id="witness-search-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title font-weight-bold"><i class="fa fa-search mr-2"></i> Search Existing Witness</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <p class="small text-muted mb-2">Search by name, CNIC, or mobile number:</p>
        <select id="witness-search-select" style="width:100%;"></select>
        <div id="witness-preview" class="mt-3 d-none">
          <table class="table table-sm table-bordered">
            <tr><th>Name</th><td id="wp-name"></td><th>CNIC</th><td id="wp-cnic"></td></tr>
            <tr><th>Father</th><td id="wp-father"></td><th>Mobile</th><td id="wp-mobile"></td></tr>
            <tr><th>Address</th><td id="wp-address" colspan="3"></td></tr>
            <tr><th>Occupation</th><td id="wp-occupation"></td><th>Relation</th><td id="wp-relation"></td></tr>
          </table>
        </div>
      </div>
      <div class="modal-footer py-1">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary btn-sm" id="btn-use-witness">
          <i class="fa fa-check mr-1"></i> Use This Witness
        </button>
      </div>
    </div>
  </div>
</div>

<!-- ── WITNESS CREATE MODAL ────────────────────────────────────────── -->
<div class="modal fade" id="witness-create-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title font-weight-bold"><i class="fa fa-plus mr-2"></i> Create New Witness</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-6 mb-2"><label class="small font-weight-bold">Full Name *</label><input type="text" id="wc-name" class="form-control form-control-sm" placeholder="Full name"></div>
          <div class="col-md-6 mb-2"><label class="small font-weight-bold">Father's Name</label><input type="text" id="wc-father" class="form-control form-control-sm"></div>
          <div class="col-md-4 mb-2"><label class="small font-weight-bold">CNIC</label><input type="text" id="wc-cnic" class="form-control form-control-sm" placeholder="XXXXX-XXXXXXX-X"></div>
          <div class="col-md-4 mb-2"><label class="small font-weight-bold">Mobile</label><input type="text" id="wc-mobile" class="form-control form-control-sm"></div>
          <div class="col-md-4 mb-2"><label class="small font-weight-bold">Phone</label><input type="text" id="wc-phone" class="form-control form-control-sm"></div>
          <div class="col-12 mb-2"><label class="small font-weight-bold">Address</label><input type="text" id="wc-address" class="form-control form-control-sm"></div>
          <div class="col-md-6 mb-2"><label class="small font-weight-bold">Occupation</label><input type="text" id="wc-occupation" class="form-control form-control-sm"></div>
          <div class="col-md-6 mb-2"><label class="small font-weight-bold">Relationship to Buyer</label><input type="text" id="wc-relationship" class="form-control form-control-sm" placeholder="e.g. Friend, Brother"></div>
        </div>
      </div>
      <div class="modal-footer py-1">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success btn-sm" id="btn-confirm-create-witness">
          <i class="fa fa-check mr-1"></i> Add to Deal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- ── SERIAL PICKER MODAL (is_serial_tracked products) ───────────────── -->
<div class="modal fade" id="serial-picker-modal" tabindex="-1" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
    <div class="modal-content">
      <div class="modal-header py-2" style="background:#7c2d12;">
        <h6 class="modal-title text-white mb-0" style="font-size:.85rem;">
          <i class="fa fa-barcode mr-1"></i> Select Serial — <span id="sp-product-name"></span>
        </h6>
        <button type="button" class="close text-white" data-dismiss="modal" style="opacity:.8;"><span>&times;</span></button>
      </div>
      <div class="modal-body p-2">
        <input type="text" id="sp-search" class="form-control form-control-sm mb-2" placeholder="Search serial…" autocomplete="off">
        <div id="sp-loading" class="text-center py-4"><i class="fa fa-spinner fa-spin fa-2x text-primary"></i></div>
        <div id="sp-empty" class="text-muted text-center py-3" style="display:none;font-size:.8rem;"></div>
        <div id="sp-list" class="list-group" style="max-height:320px;overflow-y:auto;display:none;font-size:.8rem;"></div>
      </div>
      <div class="modal-footer py-1">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
<style>
  #sp-list, #sp-list .serial-pick-item, #sp-list .serial-pick-item * { color:#000 !important; }
  #sp-list .serial-pick-item.sp-hl { background-color:#fef3c7 !important; border-color:#f59e0b !important; }
</style>

<!-- ── CUSTOMER HISTORY MODAL ──────────────────────────────────────── -->
<div class="modal fade" id="history-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title font-weight-bold"><i class="fa fa-history mr-2 text-warning"></i> Customer Installment History</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body" id="history-modal-body">
        <div class="text-center py-3"><i class="fa fa-spinner fa-spin"></i> Loading...</div>
      </div>
      <div class="modal-footer py-1">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}


{% block javascripts %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
"use strict";

// ──────────────────────────────────────────────────────────────────────────
// GLOBALS
// ──────────────────────────────────────────────────────────────────────────
var rowCounter = 0;
var activeWitnessNum = 1;  // which witness slot is being filled
var selectedWitnessData = null;

// ──────────────────────────────────────────────────────────────────────────
// UTILS
// ──────────────────────────────────────────────────────────────────────────
function fmtNum(v) {
  var n = parseFloat(v) || 0;
  return n.toLocaleString('en-PK', {minimumFractionDigits: 0, maximumFractionDigits: 0});
}

// ──────────────────────────────────────────────────────────────────────────
// CUSTOMER SELECT2  (AJAX)
// ──────────────────────────────────────────────────────────────────────────
function initCustomerSelect2() {
  $('#customer-select').select2({
    ajax: {
      url: '{% url "installments:ajax_customer_search" %}',
      dataType: 'json',
      delay: 250,
      data: function(p) { return { q: p.term }; },
      processResults: function(d) { return { results: d.results }; },
      cache: true,
    },
    minimumInputLength: 1,
    placeholder: 'Search customer by name, mobile, or CNIC...',
    width: '100%',
    dropdownParent: $('body'),
    {% if is_edit and deal %}
    // Pre-select existing customer for edit mode
    {% endif %}
  });

  $('#customer-select').on('select2:select', function(e) {
    var d = e.params.data;
    $('#customer-name-display').val(d.name || d.text || '');
    $('#customer-mobile-hidden').val(d.mobile || '');
    checkCustomerHistory(d.id);
    // Load profile for auto-fill
    loadCustomerProfile(d.id);
  });
}

function loadCustomerProfile(t_id) {
  if (!t_id) return;
  $.get('{% url "installments:ajax_customer_profile" %}', { customer_t_id: t_id }, function(data) {
    if (data.found) {
      if (data.cnic)           $('#buyer-cnic').val(data.cnic);
      if (data.father_name)    $('#buyer-father-name').val(data.father_name);
      if (data.occupation)     $('#buyer-occupation').val(data.occupation);
      if (data.employer_name)  $('#buyer-employer').val(data.employer_name);
      if (data.monthly_income) $('#buyer-income').val(data.monthly_income);
    }
  });
}

function checkCustomerHistory(t_id) {
  if (!t_id) { $('#btn-cust-history').addClass('d-none'); return; }
  $.get('{% url "installments:ajax_customer_history" %}', { customer_t_id: t_id }, function(data) {
    if (data.found && data.deals && data.deals.length > 0) {
      $('#btn-cust-history').removeClass('d-none').data('t_id', t_id);
    } else {
      $('#btn-cust-history').addClass('d-none');
    }
  });
}

$('#btn-cust-history').on('click', function() {
  var t_id = $(this).data('t_id');
  if (!t_id) return;
  $('#history-modal').modal('show');
  $('#history-modal-body').html('<div class="text-center py-3"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');
  $.get('{% url "installments:ajax_customer_history" %}', { customer_t_id: t_id }, function(data) {
    if (!data.found) {
      $('#history-modal-body').html('<p class="text-muted text-center">No previous deals found.</p>');
      return;
    }
    var s = data.summary;
    var html = '<div class="row text-center mb-3">'
      + '<div class="col"><div class="h5 font-weight-bold">' + s.total_deals + '</div><small class="text-muted">Total Deals</small></div>'
      + '<div class="col"><div class="h5 font-weight-bold">Rs. ' + fmtNum(s.total_price) + '</div><small class="text-muted">Total Business</small></div>'
      + '<div class="col"><div class="h5 font-weight-bold text-success">Rs. ' + fmtNum(s.total_paid) + '</div><small class="text-muted">Total Paid</small></div>'
      + '<div class="col"><div class="h5 font-weight-bold text-danger">Rs. ' + fmtNum(s.total_pending) + '</div><small class="text-muted">Pending</small></div>'
      + '</div>';
    html += '<table class="table table-sm table-hover"><thead class="thead-light"><tr><th>Deal#</th><th>Date</th><th>Plan</th><th>Total</th><th>Status</th></tr></thead><tbody>';
    data.deals.forEach(function(d) {
      var badge = d.status === 'ACTIVE' ? 'primary' : d.status === 'COMPLETED' ? 'success' : 'secondary';
      html += '<tr><td><a href="/installments/' + d.id + '/" target="_blank">#' + d.installment_no + '</a></td>'
        + '<td>' + d.sale_date + '</td><td>' + d.plan_name + '</td><td>Rs. ' + fmtNum(d.total_price) + '</td>'
        + '<td><span class="badge badge-' + badge + '">' + d.status + '</span></td></tr>';
    });
    html += '</tbody></table>';
    $('#history-modal-body').html(html);
  });
});

// ──────────────────────────────────────────────────────────────────────────
// PLAN SELECT  →  auto-fill duration
// ──────────────────────────────────────────────────────────────────────────
$('#plan-select').on('change', function() {
  var $opt = $(this).find(':selected');
  var dur = parseInt($opt.data('duration')) || 0;
  var name = $opt.data('name') || '';
  if (dur > 0) {
    $('#duration-months').val(dur);
  }
  $('#plan-name-display').val(name);
  recalcAmounts();
});

// ──────────────────────────────────────────────────────────────────────────
// PRODUCT TABLE
// ──────────────────────────────────────────────────────────────────────────
function addProductRow(prefill) {
  rowCounter++;
  var rid = 'prod-row-' + rowCounter;
  var pn = prefill || {};
  var html = '<tr id="' + rid + '" class="product-row">'
    + '<td style="min-width:300px;">'
    +   '<select class="product-select form-control form-control-sm" style="width:100%;"></select>'
    +   '<input type="hidden" class="pcode-val" value="' + (pn.product_code || '') + '">'
    +   '<input type="hidden" class="pname-val" value="' + (pn.product_name || '') + '">'
    +   '<input type="hidden" class="pprice-val" value="' + (pn.purchase_price || 0) + '">'
    +   '<input type="hidden" class="pserial-id-val" value="' + (pn.serial_id || '') + '">'
    + '</td>'
    + '<td class="text-center align-middle serial-cell">'
    +   '<div class="d-flex align-items-center justify-content-center" style="gap:4px;">'
    +     '<span class="serial-display small text-muted">' + (pn.serial_no || '—') + '</span>'
    +     '<button type="button" class="btn btn-xs btn-outline-secondary btn-pick-serial d-none" title="Pick / change serial"><i class="fa fa-barcode"></i></button>'
    +   '</div>'
    + '</td>'
    + '<td><input type="number" class="qty-input form-control form-control-sm" value="' + (pn.quantity || 1) + '" min="0.01" step="0.01"></td>'
    + '<td><input type="number" class="sale-price-input form-control form-control-sm" value="' + (pn.cash_price_per_unit || 0) + '" min="0" step="0.01"></td>'
    + '<td class="text-right align-middle row-total font-weight-bold">0</td>'
    + '<td class="text-center align-middle">'
    +   '<input type="checkbox" class="plan-applicable-input" ' + (pn.is_installment_applicable === false ? '' : 'checked') + ' title="Include in installment plan / financed amount">'
    + '</td>'
    + '<td class="text-center align-middle no-print">'
    +   '<button type="button" class="btn btn-xs btn-outline-danger delete-row"><i class="fa fa-times"></i></button>'
    + '</td>'
    + '</tr>';

  $('#products-tbody').append(html);
  var $row = $('#' + rid);
  initProductSelect2($row.find('.product-select'));

  if (pn.product_code && pn.product_name) {
    // Pre-fill in edit mode
    var $sel = $row.find('.product-select');
    $sel.append(new Option(pn.product_name, pn.product_code, true, true)).trigger('change');
    $row.find('.qty-input').val(pn.quantity);
    $row.find('.sale-price-input').val(pn.cash_price_per_unit);
    updateRowTotal($row);
    updateCashPrice();

    if (pn.serial_id) {
      $row.data('isSerialTracked', true);
      $row.find('.pserial-id-val').val(pn.serial_id);
      $row.find('.serial-display').removeClass('text-muted').addClass('text-success font-weight-bold').text(pn.serial_no || ('#' + pn.serial_id));
      $row.find('.btn-pick-serial').removeClass('d-none');
      lockRowQtyForSerial($row, true);
    }
  }
}

// Ek serial = ek hi qty
function lockRowQtyForSerial($row, isLocked) {
  var $qty = $row.find('.qty-input');
  if (isLocked) {
    $qty.val(1).prop('readonly', true).css('background-color', '#e9ecef');
  } else {
    $qty.prop('readonly', false).css('background-color', '');
  }
}

function resetRowSerial($row) {
  $row.find('.pserial-id-val').val('');
  $row.find('.serial-display').removeClass('text-success font-weight-bold').addClass('text-muted').text('—');
  lockRowQtyForSerial($row, false);
}

function initProductSelect2($sel) {
  $sel.select2({
    ajax: {
      url: '{% url "installments:ajax_products" %}',
      dataType: 'json',
      delay: 250,
      data: function(p) { return { q: p.term }; },
      processResults: function(d) {
        return {
          results: d.results.map(function(r) {
            return { id: r.id, text: r.name + (r.product_code ? ' [' + r.product_code + ']' : ''), data: r };
          })
        };
      },
      cache: true,
    },
    minimumInputLength: 1,
    placeholder: 'Type product name or code...',
    width: '100%',
    dropdownParent: $('body'),
  });

  $sel.on('select2:select', function(e) {
    var r = e.params.data.data;
    var $row = $(this).closest('tr');
    $row.find('.pcode-val').val(r.id);
    $row.find('.pname-val').val(r.name);
    $row.find('.pprice-val').val(r.purchase_price || 0);
    $row.find('.sale-price-input').val(r.sale_price || 0);
    updateRowTotal($row);
    updateCashPrice();

    // Product badla → purani serial binding (agar thi) reset kar do
    resetRowSerial($row);
    $row.data('isSerialTracked', !!r.is_serial_tracked);

    if (r.is_serial_tracked) {
      $row.find('.btn-pick-serial').removeClass('d-none');
      openSerialPicker($row, r);
    } else {
      $row.find('.btn-pick-serial').addClass('d-none');
      // Enter → focus Qty
      setTimeout(function() {
        $row.find('.qty-input').focus().select();
      }, 60);
    }
  });
}

function updateRowTotal($row) {
  var qty   = parseFloat($row.find('.qty-input').val()) || 0;
  var price = parseFloat($row.find('.sale-price-input').val()) || 0;
  var total = qty * price;
  $row.find('.row-total').text(fmtNum(total));
  return total;
}

function updateCashPrice() {
  var applicableTotal = 0;
  var exemptTotal = 0;
  $('.product-row').each(function() {
    var $row = $(this);
    var rowTotal = updateRowTotal($row);
    if ($row.find('.plan-applicable-input').is(':checked')) {
      applicableTotal += rowTotal;
    } else {
      exemptTotal += rowTotal;
    }
  });
  $('#cash-price').val(applicableTotal.toFixed(2));
  $('#cash-price-display').text(fmtNum(applicableTotal));
  $('#exempt-total').val(exemptTotal.toFixed(2));
  $('#exempt-total-display').text(fmtNum(exemptTotal));
  $('#exempt-total-row').toggle(exemptTotal > 0);
  recalcAmounts();
}

// Delete row
$(document).on('click', '.delete-row', function() {
  $(this).closest('tr').remove();
  updateCashPrice();
});

// Plan-applicable checkbox toggled → recalc split totals
$(document).on('change', '.plan-applicable-input', function() {
  updateCashPrice();
});

// ──────────────────────────────────────────────────────────────────────────
// SERIAL PICKER (is_serial_tracked products)
// ──────────────────────────────────────────────────────────────────────────
var __spActiveRow   = null;
var __spData        = [];
var __spPicked      = false;
var __spActiveIndex = -1;

function openSerialPicker($row, prodData) {
  __spActiveRow = $row;
  __spPicked = false;
  __spData = [];
  $('#sp-search').val('');
  $('#sp-product-name').text(prodData.name || '');
  $('#sp-loading').show();
  $('#sp-list').empty().hide();
  $('#sp-empty').hide();
  $('#serial-picker-modal').modal('show');

  $.get('{% url "installments:ajax_serials_for_product" %}', { product_id: prodData.id }, function(res) {
    $('#sp-loading').hide();
    __spData = (res && res.ok) ? (res.serials || []) : [];
    renderSerialList(__spData);
  }).fail(function() {
    $('#sp-loading').hide();
    __spData = [];
    $('#sp-empty').text('Failed to load serials.').show();
  });
}

function renderSerialList(list) {
  var $ul = $('#sp-list');
  $ul.empty();
  __spActiveIndex = -1;
  if (!list.length) {
    $('#sp-empty').text('No serial in stock for this item.').show();
    $ul.hide();
    return;
  }
  $('#sp-empty').hide();
  list.forEach(function(s) {
    var $item = $('<button type="button" class="list-group-item list-group-item-action serial-pick-item"></button>').attr('data-id', s.id);
    var $row1 = $('<div class="d-flex justify-content-between align-items-center"></div>');
    $('<span class="font-weight-bold"></span>').text(s.serial_no).appendTo($row1);
    $('<span class="text-muted small"></span>').text(s.received_at || '').appendTo($row1);
    $item.append($row1);
    var descParts = [s.description1, s.description2].filter(function(d) { return (d || '').trim(); });
    if (descParts.length) {
      $('<div class="text-muted" style="font-size:.72rem;"></div>').text(descParts.join('  •  ')).appendTo($item);
    }
    $ul.append($item);
  });
  $ul.show();
  highlightSerialItem(0);
}

function highlightSerialItem(idx) {
  var $items = $('#sp-list .serial-pick-item:visible');
  $items.removeClass('sp-hl');
  if (!$items.length) { __spActiveIndex = -1; return; }
  if (idx < 0) idx = 0;
  if (idx > $items.length - 1) idx = $items.length - 1;
  __spActiveIndex = idx;
  var $target = $items.eq(idx).addClass('sp-hl');
  var $list = $('#sp-list');
  var itemTop = $target.position().top + $list.scrollTop();
  var itemBottom = itemTop + $target.outerHeight();
  if (itemTop < $list.scrollTop()) { $list.scrollTop(itemTop); }
  else if (itemBottom > $list.scrollTop() + $list.height()) { $list.scrollTop(itemBottom - $list.height()); }
}

// Search box auto-focus on open
$(document).on('shown.bs.modal', '#serial-picker-modal', function() {
  $('#sp-search').trigger('focus');
});

// Client-side search filter
$(document).on('input', '#sp-search', function() {
  var term = ($(this).val() || '').trim().toLowerCase();
  var filtered = term ? __spData.filter(function(s) { return (s.serial_no || '').toLowerCase().indexOf(term) !== -1; }) : __spData;
  renderSerialList(filtered);
});

// Arrow keys + Enter navigation
$(document).on('keydown', '#sp-search', function(e) {
  var $items = $('#sp-list .serial-pick-item:visible');
  if (!$items.length) return;
  if (e.key === 'ArrowDown') { e.preventDefault(); highlightSerialItem(__spActiveIndex + 1); return; }
  if (e.key === 'ArrowUp')   { e.preventDefault(); highlightSerialItem(__spActiveIndex - 1); return; }
  if (e.key === 'Enter') {
    e.preventDefault();
    var idx = (__spActiveIndex >= 0) ? __spActiveIndex : 0;
    $items.eq(idx).trigger('click');
  }
});

// Pick a serial
$(document).on('click', '.serial-pick-item', function() {
  var id = $(this).data('id');
  var s = __spData.find(function(x) { return String(x.id) === String(id); });
  var $row = __spActiveRow;
  if (!s || !$row || !$row.length) { $('#serial-picker-modal').modal('hide'); return; }

  $row.find('.pserial-id-val').val(s.id);
  $row.find('.serial-display').removeClass('text-muted').addClass('text-success font-weight-bold').text(s.serial_no);
  if (s.rate != null && +s.rate > 0) {
    $row.find('.sale-price-input').val(s.rate);
  }
  $row.find('.qty-input').val(1);
  lockRowQtyForSerial($row, true);
  updateRowTotal($row);
  updateCashPrice();

  __spPicked = true;
  $('#serial-picker-modal').modal('hide');

  setTimeout(function() { $row.find('.qty-input').focus().select(); }, 150);
});

// Modal band hui bina serial select kiye → serial zaroori hai, product selection revert
$('#serial-picker-modal').on('hidden.bs.modal', function() {
  if (__spPicked) return;
  var $row = __spActiveRow;
  if (!$row || !$row.length) return;

  $row.find('.pcode-val').val('');
  $row.find('.pname-val').val('');
  $row.find('.pprice-val').val('');
  $row.find('.sale-price-input').val(0);
  resetRowSerial($row);
  $row.find('.btn-pick-serial').addClass('d-none');
  $row.data('isSerialTracked', false);

  var $sel = $row.find('.product-select');
  $sel.empty().trigger('change.select2');

  updateRowTotal($row);
  updateCashPrice();

  alert('Is item ke liye serial select karna zaroori hai.');

  setTimeout(function() {
    if ($sel.data('select2')) { $sel.select2('open'); }
  }, 200);
});

// Manual "pick / change serial" button (edit mode ya dobara select karne ke lea)
$(document).on('click', '.btn-pick-serial', function() {
  var $row = $(this).closest('tr');
  var prodId = $row.find('.pcode-val').val();
  var prodName = $row.find('.pname-val').val();
  if (!prodId) return;
  openSerialPicker($row, { id: prodId, name: prodName });
});

// Add row button
$('#btn-add-product').on('click', function() { addProductRow(null); });

// ──────────────────────────────────────────────────────────────────────────
// CALCULATOR
// ──────────────────────────────────────────────────────────────────────────
function recalcAmounts() {
  var cashPrice   = parseFloat($('#cash-price').val()) || 0;      // installment-applicable products only
  var exemptTotal = parseFloat($('#exempt-total').val()) || 0;    // one-time / exempt charges (paid upfront, never financed)
  var markupPct   = parseFloat($('#markup-percent').val()) || 0;
  var markupAmt   = cashPrice * markupPct / 100;                  // markup applies only to financed goods
  var financeBase = cashPrice + markupAmt;                        // the part that can actually be financed
  var totalPrice  = financeBase + exemptTotal;                    // what the customer owes overall
  var dpPct       = parseFloat($('#dp-percent').val()) || 0;
  var dpAmt       = (financeBase * dpPct / 100) + exemptTotal;    // dp% on financed part + all exempt charges upfront
  var financed    = totalPrice - dpAmt;                           // exempt cancels out — only financeBase gets spread
  var duration    = parseInt($('#duration-months').val()) || 1;
  var monthly     = duration > 0 ? financed / duration : 0;

  $('#markup-amount').val(markupAmt.toFixed(2));
  $('#total-price').val(totalPrice.toFixed(2));
  $('#down-payment').val(dpAmt.toFixed(2));
  $('#financed-amount').val(financed.toFixed(2));
  $('#monthly-amount').val(monthly.toFixed(2));

  // sync start_date = sale_date
  $('#start-date').val($('#sale-date').val());

  schedulePreviewDebounce();
}

var _schedTimer = null;
function schedulePreviewDebounce() {
  clearTimeout(_schedTimer);
  _schedTimer = setTimeout(loadSchedulePreview, 700);
}

function loadSchedulePreview() {
  var saleDate = $('#sale-date').val();
  var duration = parseInt($('#duration-months').val()) || 0;
  var monthly  = parseFloat($('#monthly-amount').val()) || 0;
  var dp       = parseFloat($('#down-payment').val()) || 0;
  if (!saleDate || duration < 1 || monthly <= 0) return;

  $.get('{% url "installments:ajax_schedule_preview" %}', {
    sale_date: saleDate,
    start_date: saleDate,
    duration_months: duration,
    monthly_amount: monthly,
    down_payment: dp,
  }, function(data) {
    if (!data.schedule) return;
    var rows = '';
    data.schedule.forEach(function(s) {
      rows += '<tr><td>' + s.label + '</td><td>' + s.due_date + '</td>'
        + '<td class="text-right">Rs. ' + fmtNum(s.amount) + '</td>'
        + '<td><span class="badge badge-' + (s.status === 'PAID' ? 'success' : 'secondary') + '">' + s.status + '</span></td></tr>';
    });
    $('#schedule-tbody').html(rows);
    $('#schedule-preview').show();
  });
}

// ──────────────────────────────────────────────────────────────────────────
// KEYBOARD NAVIGATION
// ──────────────────────────────────────────────────────────────────────────

// Qty → Sale Price
$(document).on('keydown', '.qty-input', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    $(this).closest('tr').find('.sale-price-input').focus().select();
  }
});

// Sale Price → next product row (or add row)
$(document).on('keydown', '.sale-price-input', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    updateCashPrice();
    var $next = $(this).closest('tr').next('.product-row');
    if ($next.length) {
      // Open the next row's Select2
      $next.find('.product-select').select2('open');
    } else {
      addProductRow(null);
      // Focus the newly added row's Select2
      setTimeout(function() {
        $('#products-tbody .product-row:last .product-select').select2('open');
      }, 100);
    }
  }
});

// Markup % → Down Payment %
$('#markup-percent').on('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    recalcAmounts();
    $('#dp-percent').focus().select();
  }
});
$('#markup-percent, #dp-percent, #duration-months').on('input change', function() {
  recalcAmounts();
});
$('#sale-date').on('change', function() {
  $('#start-date').val($(this).val());
  schedulePreviewDebounce();
});

// DP % → Duration
$('#dp-percent').on('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    recalcAmounts();
    $('#duration-months').focus().select();
  }
});

// Duration → Bank
$('#duration-months').on('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    recalcAmounts();
    $('#dp-bank').focus();
  }
});

// ──────────────────────────────────────────────────────────────────────────
// GENERIC ENTER-KEY → NEXT FIELD
// (Fallback for every plain input/select/textarea in the form that doesn't
//  already have its own dedicated Enter-key behaviour above — e.g. CNIC,
//  Father's Name, Occupation, Income, Employer, Sale Date, Plan, Bank,
//  Witness fields, etc.)
// ──────────────────────────────────────────────────────────────────────────
var ENTER_ALREADY_HANDLED = '.qty-input, .sale-price-input, #markup-percent, #dp-percent, #duration-months, .product-select, #customer-select, #witness-search-select, #sp-search';

function focusableFormFields() {
  return $('#deal-form').find(
    'input:not([type=hidden]):not([type=button]):not([type=submit]):not(:disabled):not([readonly]), ' +
    'select:not(:disabled), textarea:not(:disabled)'
  ).filter(':visible');
}

$(document).on('keydown', '#deal-form input, #deal-form select, #deal-form textarea', function(e) {
  if (e.key !== 'Enter') return;

  var $target = $(this);

  // Fields that already have their own dedicated Enter-navigation — don't interfere.
  if ($target.is(ENTER_ALREADY_HANDLED)) return;

  // Select2's own generated hidden <select> — select2 handles Enter internally.
  if ($target.hasClass('select2-hidden-accessible')) return;

  e.preventDefault();

  var $fields = focusableFormFields();
  var idx = $fields.index($target);
  if (idx > -1 && idx < $fields.length - 1) {
    var $next = $fields.eq(idx + 1);
    if ($next.hasClass('select2-hidden-accessible') && $next.data('select2')) {
      $next.select2('open');
    } else {
      $next.trigger('focus');
      if ($next.is('input[type=text], input[type=number]')) { $next.trigger('select'); }
    }
  }
});

// Ctrl+S → submit
$(document).on('keydown', function(e) {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    submitDealForm();
  }
});
$('#btn-save-deal').on('click', function() { submitDealForm(); });

// ──────────────────────────────────────────────────────────────────────────
// FORM SUBMIT
// ──────────────────────────────────────────────────────────────────────────
function submitDealForm() {
  // Validate products
  var prods = buildProductsArray();
  if (prods.length === 0) {
    alert('Please add at least one product.');
    return;
  }

  var missingSerial = false;
  $('.product-row').each(function() {
    if ($(this).data('isSerialTracked') && !$(this).find('.pserial-id-val').val()) {
      missingSerial = true;
    }
  });
  if (missingSerial) {
    alert('Ek ya zyada serial-tracked products ke lea serial select nahi hui — pehle serial select karein.');
    return;
  }

  $('#products-json').val(JSON.stringify(prods));
  // sync start_date
  $('#start-date').val($('#sale-date').val());
  $('#deal-form').submit();
}

function buildProductsArray() {
  var arr = [];
  $('.product-row').each(function() {
    var code = $(this).find('.pcode-val').val();
    if (!code) return;
    var qty       = parseFloat($(this).find('.qty-input').val()) || 0;
    var price     = parseFloat($(this).find('.sale-price-input').val()) || 0;
    var purch     = parseFloat($(this).find('.pprice-val').val()) || 0;
    var serialRaw = $(this).find('.pserial-id-val').val();
    arr.push({
      product_code:        parseInt(code),
      product_name:        $(this).find('.pname-val').val(),
      quantity:            qty,
      purchase_price:      purch,
      cash_price_per_unit: price,
      total_cost:          qty * purch,
      total_sale_price:    qty * price,
      serial_id:           serialRaw ? parseInt(serialRaw) : null,
      is_installment_applicable: $(this).find('.plan-applicable-input').is(':checked'),
    });
  });
  return arr;
}

// ──────────────────────────────────────────────────────────────────────────
// PRE-PRINT
// ──────────────────────────────────────────────────────────────────────────
$('#btn-preprint').on('click', function() {
  var prods = buildProductsArray();
  if (prods.length === 0) {
    alert('Add at least one product before printing preview.');
    return;
  }
  $('#products-json').val(JSON.stringify(prods));

  // Build a temporary form and POST to pre-print URL in new tab
  var $f = $('<form>', {
    method: 'POST',
    action: '{% url "installments:pre_print_pdf" %}',
    target: '_blank',
  });
  // Copy all form fields
  $('#deal-form').find('input, select, textarea').each(function() {
    var $el = $(this);
    if ($el.attr('type') === 'submit') return;
    $f.append($('<input>', {
      type: 'hidden',
      name: $el.attr('name') || '',
      value: $el.val() || '',
    }));
  });
  // CSRF
  $f.append($('<input>', { type: 'hidden', name: 'csrfmiddlewaretoken', value: '{{ csrf_token }}' }));
  $('body').append($f);
  $f.submit();
  $f.remove();
});

// ──────────────────────────────────────────────────────────────────────────
// WITNESS SEARCH
// ──────────────────────────────────────────────────────────────────────────
function openWitnessModal(num) {
  activeWitnessNum = num;
  selectedWitnessData = null;
  // Reset modal state
  $('#witness-search-select').val(null).trigger('change');
  $('#witness-preview').addClass('d-none');
  $('#witness-search-modal').modal('show');

  // Init Select2 if not already done
  if (!$('#witness-search-select').data('select2')) {
    $('#witness-search-select').select2({
      ajax: {
        url: '{% url "installments:ajax_witnesses" %}',
        dataType: 'json',
        delay: 300,
        data: function(p) { return { q: p.term }; },
        processResults: function(d) { return { results: d.results }; },
      },
      minimumInputLength: 1,
      placeholder: 'Search by name, CNIC, or mobile...',
      width: '100%',
      dropdownParent: $('#witness-search-modal'),
    });

    $('#witness-search-select').on('select2:select', function(e) {
      var w = e.params.data;
      selectedWitnessData = w;
      // Show preview
      $('#wp-name').text(w.name || '');
      $('#wp-cnic').text(w.cnic || '—');
      $('#wp-father').text(w.father_name || '—');
      $('#wp-mobile').text(w.mobile || '—');
      $('#wp-address').text(w.address || '—');
      $('#wp-occupation').text(w.occupation || '—');
      $('#wp-relation').text(w.relationship || '—');
      $('#witness-preview').removeClass('d-none');
    });
  }
}

$('#btn-use-witness').on('click', function() {
  if (!selectedWitnessData) { alert('Please select a witness first.'); return; }
  fillWitness(activeWitnessNum, selectedWitnessData);
  $('#witness-search-modal').modal('hide');
});

function fillWitness(num, w) {
  $('#w' + num + '_name').val(w.name || '');
  $('#w' + num + '_father_name').val(w.father_name || '');
  $('#w' + num + '_cnic').val(w.cnic || '');
  $('#w' + num + '_mobile').val(w.mobile || '');
  $('#w' + num + '_phone').val(w.phone || '');
  $('#w' + num + '_address').val(w.address || '');
  $('#w' + num + '_occupation').val(w.occupation || '');
  $('#w' + num + '_relationship').val(w.relationship || '');
}

// ──────────────────────────────────────────────────────────────────────────
// WITNESS CREATE
// ──────────────────────────────────────────────────────────────────────────
function openCreateWitnessModal(num) {
  activeWitnessNum = num;
  // Clear fields
  ['#wc-name','#wc-father','#wc-cnic','#wc-mobile','#wc-phone','#wc-address','#wc-occupation','#wc-relationship'].forEach(function(id) {
    $(id).val('');
  });
  $('#witness-create-modal').modal('show');
}

$('#btn-confirm-create-witness').on('click', function() {
  var name = $('#wc-name').val().trim();
  if (!name) { alert('Witness name is required.'); return; }
  fillWitness(activeWitnessNum, {
    name:         name,
    father_name:  $('#wc-father').val(),
    cnic:         $('#wc-cnic').val(),
    mobile:       $('#wc-mobile').val(),
    phone:        $('#wc-phone').val(),
    address:      $('#wc-address').val(),
    occupation:   $('#wc-occupation').val(),
    relationship: $('#wc-relationship').val(),
  });
  $('#witness-create-modal').modal('hide');
});

// ──────────────────────────────────────────────────────────────────────────
// INIT ON PAGE LOAD
// ──────────────────────────────────────────────────────────────────────────
$(document).ready(function() {

  initCustomerSelect2();

  // Load initial products (for edit mode)
  var initProds = [];
  try { initProds = JSON.parse('{{ initial_products_json|default:"[]"|escapejs }}'); } catch(e) {}
  if (initProds && initProds.length > 0) {
    initProds.forEach(function(p) { addProductRow(p); });
  } else {
    addProductRow(null);  // Start with one empty row
  }

  // Sync start_date on load
  $('#start-date').val($('#sale-date').val());

  // Re-init for edit mode
  {% if is_edit %}
  $('#cash-price-display').text(fmtNum(parseFloat('{{ deal.cash_price|default:0 }}') || 0));
  loadSchedulePreview();

  // Pre-select customer (correct name/mobile, not a "—" placeholder)
  {% if edit_customer %}
  var editCustOption = new Option(
    '{{ edit_customer.name|escapejs }}' + '{% if edit_customer.mobile %} ({{ edit_customer.mobile|escapejs }}){% endif %}',
    '{{ edit_customer.t_id }}',
    true, true
  );
  $('#customer-select').append(editCustOption).trigger('change');
  $('#customer-name-display').val('{{ edit_customer.name|escapejs }}');
  $('#customer-mobile-hidden').val('{{ edit_customer.mobile|escapejs }}');
  checkCustomerHistory('{{ edit_customer.t_id }}');
  {% endif %}
  {% endif %}

  // Init plan name display
  var planName = $('#plan-select').find(':selected').data('name') || '';
  $('#plan-name-display').val(planName);

  // Pre-populate witness fields for edit mode
  {% if is_edit and existing_witnesses %}
  {% for wnum, w in existing_witnesses.items %}
  $('#w{{ wnum }}_name').val('{{ w.name|escapejs }}');
  $('#w{{ wnum }}_father_name').val('{{ w.father_name|escapejs }}');
  $('#w{{ wnum }}_cnic').val('{{ w.cnic|escapejs }}');
  $('#w{{ wnum }}_mobile').val('{{ w.mobile|escapejs }}');
  $('#w{{ wnum }}_phone').val('{{ w.phone|escapejs }}');
  $('#w{{ wnum }}_address').val('{{ w.address|escapejs }}');
  $('#w{{ wnum }}_occupation').val('{{ w.occupation|escapejs }}');
  $('#w{{ wnum }}_relationship').val('{{ w.relationship|escapejs }}');
  {% endfor %}
  {% endif %}

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