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

{% block title %}Goods Transport Invoice{% endblock %}

{% block stylesheets %}
{{ block.super }}
<style>
  :root {
    --gt-primary: #01478f;
    --gt-primary-2: #0b66c3;
    --gt-sky: #e0f2fe;
    --gt-green: #16a34a;
    --gt-red: #dc2626;
    --gt-amber: #f59e0b;
    --gt-bg: #eef4fb;
    --gt-card: #ffffff;
    --gt-border: #cbd7e6;
    --gt-border-soft: #e1eaf5;
    --gt-head: #f6faff;
    --gt-text: #0f172a;
    --gt-muted: #64748b;
    --gt-nav-h: 72px;
  }

  body {
    overflow: hidden !important;
    background: var(--gt-bg);
  }

  .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .gt-page {
    height: calc(100vh - var(--gt-nav-h) - 8px);
    height: calc(100dvh - var(--gt-nav-h) - 8px);
    padding: 4px 7px 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }

  .gt-topbar {
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .gt-title {
    margin: 0;
    font-size: 17px;
    font-weight: 1000;
    color: var(--gt-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .gt-invoice-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #dbeafe;
    border: 1px solid #60a5fa;
    color: #075985;
    font-size: 12px;
    font-weight: 1000;
  }

  .gt-mode-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: 11px;
    font-weight: 1000;
  }

  #gtForm {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .gt-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--gt-card);
    border: 1px solid var(--gt-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  }

  .gt-bar {
    height: 24px;
    flex-shrink: 0;
    padding: 0 9px;
    background: linear-gradient(90deg, #dbeafe 0%, #f0f9ff 45%, #ecfeff 100%);
    border-bottom: 1px solid var(--gt-border);
    color: #0f3f75;
    font-size: 12px;
    font-weight: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .gt-bar small {
    font-size: 10px;
    color: #475569;
    font-weight: 900;
  }

  .gt-head-body {
    flex-shrink: 0;
    padding: 6px 8px 6px;
    border-bottom: 1px solid var(--gt-border-soft);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  }

  .gt-main-grid {
    display: grid;
    grid-template-columns: 1.55fr 0.65fr 0.7fr 0.8fr;
    gap: 5px;
    align-items: end;
  }

  .gt-route-grid {
    display: grid;
    grid-template-columns: 0.8fr 0.8fr 1.6fr;
    gap: 5px;
    margin-top: 4px;
    align-items: end;
  }

  .gt-party-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 5px;
  }

  .gt-party-box {
    border: 1px solid var(--gt-border);
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
  }

  .gt-party-title {
    height: 22px;
    padding: 0 8px;
    background: linear-gradient(90deg, #e0f2fe 0%, #f8fafc 100%);
    border-bottom: 1px solid var(--gt-border-soft);
    color: #0f3f75;
    font-size: 12px;
    font-weight: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .gt-party-title small {
    font-size: 10px;
    font-weight: 900;
    color: var(--gt-muted);
  }

  .gt-party-fields {
    padding: 5px 6px;
    display: grid;
    grid-template-columns: 1fr 0.75fr 1.35fr;
    gap: 5px;
  }

  .gt-field label {
    display: block;
    margin: 0 0 2px;
    font-size: 10.5px;
    font-weight: 1000;
    color: var(--gt-muted);
    line-height: 1;
  }

  .gt-control,
  .gt-field input,
  .gt-field select,
  .gt-field textarea {
    width: 100%;
    height: 25px !important;
    min-height: 25px !important;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 850;
    color: #111827;
    box-sizing: border-box;
  }

  .gt-control:focus,
  .gt-field input:focus,
  .gt-field select:focus,
  .gt-field textarea:focus {
    border-color: var(--gt-primary-2);
    box-shadow: 0 0 0 2px rgba(11, 102, 195, 0.14);
    outline: none;
  }

  .gt-table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: 1px solid var(--gt-border-soft);
    background: #ffffff;
  }

  .gt-table-wrapper::-webkit-scrollbar {
    width: 7px;
  }

  .gt-table-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
  }

  .gt-table-wrapper::-webkit-scrollbar-thumb {
    background: #9db7d3;
    border-radius: 4px;
  }

  .gt-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0;
  }

  .gt-table th,
  .gt-table td {
    border: 1px solid var(--gt-border-soft);
    padding: 3px 5px;
    font-size: 12px;
    vertical-align: middle;
    overflow: hidden;
  }

  .gt-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 27px;
    background: linear-gradient(180deg, #eaf3ff 0%, #f8fbff 100%);
    color: #334155;
    font-weight: 1000;
    border-bottom: 2px solid var(--gt-border);
  }

  .gt-table td {
    height: 31px;
    background: #fff;
  }

  .gt-table tr.gt-active-row td {
    background: #f0f9ff;
  }

  .gt-right {
    text-align: right;
  }

  .gt-check {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 11px;
    font-weight: 900;
    color: var(--gt-muted);
    white-space: nowrap;
  }

  .gt-footer-body {
    flex-shrink: 0;
    padding: 5px 8px;
    background: #f8fbff;
    border-top: 1px solid var(--gt-border-soft);
  }

  .gt-footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.95fr 0.72fr;
    gap: 6px;
  }

  .gt-box {
    border: 1px solid var(--gt-border);
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
  }

  .gt-box-title {
    height: 24px;
    padding: 0 8px;
    background: linear-gradient(90deg, #eaf3ff 0%, #f8fafc 100%);
    border-bottom: 1px solid var(--gt-border-soft);
    color: #0f3f75;
    font-size: 12px;
    font-weight: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .gt-box-title small {
    font-size: 10px;
    color: var(--gt-muted);
    font-weight: 850;
  }

  .gt-box-body {
    padding: 5px 6px;
  }

  .gt-charges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .gt-money {
    text-align: right;
  }


  /* ── Cash / Bank Tender - live rows ── */
.gt-tender-list {
  height: 56px;
  max-height: 56px;
  border: 1px solid var(--gt-border-soft);
  border-radius: 6px;
  background: #ffffff;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3px;
  box-sizing: border-box;
}

.gt-tender-row {
  display: grid;
  grid-template-columns: 18px minmax(95px, 1fr) 82px 24px 24px;
  gap: 4px;
  align-items: center;
  min-height: 24px;
  padding: 1px 2px;
  border-bottom: 1px solid #eef2f7;
  box-sizing: border-box;
}

.gt-tender-row:last-child {
  border-bottom: 0;
}

.gt-tender-no {
  text-align: right;
  font-size: 11px;
  font-weight: 900;
  color: var(--gt-muted);
}

.gt-tender-bank,
.gt-tender-amount {
  width: 100%;
  min-width: 0;
  height: 23px !important;
  min-height: 23px !important;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #ffffff;
  padding: 1px 5px;
  font-size: 11.5px;
  font-weight: 850;
  color: #111827;
  box-sizing: border-box;
}

.gt-tender-amount {
  text-align: right;
}

.gt-tender-bank:focus,
.gt-tender-amount:focus {
  border-color: var(--gt-primary-2);
  box-shadow: 0 0 0 2px rgba(11, 102, 195, 0.14);
  outline: none;
}




  /* ── Live tender rows ── */
  .gt-tender-list {
    min-height: 74px;
    max-height: 86px;
    border: 1px solid var(--gt-border-soft);
    border-radius: 5px;
    background: #fff;
    overflow-y: auto;
    padding: 3px;
  }

  .gt-tender-row {
    display: grid;
    grid-template-columns: 24px 1fr 96px 28px 28px;
    gap: 4px;
    align-items: center;
    min-height: 28px;
    padding: 2px;
    border-bottom: 1px solid #eef2f7;
  }

  .gt-tender-row:last-child {
    border-bottom: 0;
  }

  .gt-tender-no {
    text-align: right;
    font-size: 12px;
    font-weight: 900;
    color: var(--gt-muted);
  }

  .gt-tender-bank,
  .gt-tender-amount {
    height: 25px !important;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 850;
    width: 100%;
    box-sizing: border-box;
  }

  .gt-tender-amount {
    text-align: right;
  }

  .gt-btn-plus {
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
    color: #fff !important;
    border-color: #15803d;
  }

  .gt-btn-muted {
    background: #e5e7eb;
    color: #111827 !important;
    border-color: #cbd5e1;
  }

.gt-btn-plus {
  width: 23px !important;
  height: 23px !important;
  padding: 0 !important;
  border-radius: 5px;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border-color: #15803d;
  color: #ffffff !important;
  font-size: 12px;
  line-height: 1;
}

.gt-btn-muted {
  width: 23px !important;
  height: 23px !important;
  padding: 0 !important;
  border-radius: 5px;
  background: #e5e7eb;
  border-color: #cbd5e1;
  color: #111827 !important;
  font-size: 12px;
  line-height: 1;
}

  

  .gt-summary-box {
    background: #fff7ed;
    border-color: #fed7aa;
  }

  .gt-summary-box .gt-box-title {
    background: linear-gradient(90deg, #ffedd5 0%, #fff7ed 100%);
    border-bottom-color: #fed7aa;
    color: #9a3412;
  }

  .gt-summary-row {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 5px;
    align-items: center;
    margin-bottom: 4px;
  }

  .gt-summary-row:last-child {
    margin-bottom: 0;
  }

  .gt-summary-label {
    font-size: 12px;
    font-weight: 1000;
    color: #475569;
  }

  .gt-summary-input {
    width: 100%;
    height: 26px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    padding: 2px 7px;
    text-align: right;
    font-size: 13px;
    font-weight: 1000;
    background: #fff;
    box-sizing: border-box;
  }

  .gt-total-red {
    color: var(--gt-red);
    border-color: #fca5a5;
    background: #fff1f2;
    font-size: 16px;
  }

  .gt-balance-blue {
    color: var(--gt-primary);
    font-size: 14px;
  }

  .gt-actions {
    flex-shrink: 0;
    height: 36px;
    padding: 0 8px;
    border-top: 1px solid var(--gt-border);
    background: linear-gradient(90deg, #f8fafc 0%, #eef6ff 100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  .gt-btn {
    height: 27px;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 0 11px;
    font-size: 12px;
    font-weight: 1000;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .gt-btn-primary {
    background: linear-gradient(180deg, #0b66c3 0%, #01478f 100%);
    border-color: #01478f;
    color: #fff !important;
  }

  .gt-btn-green {
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
    border-color: #15803d;
    color: #fff !important;
  }

  .gt-btn-red {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    border-color: #b91c1c;
    color: #fff !important;
  }

  .gt-btn-light {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #111827 !important;
  }

  .gt-btn-mini {
    width: 24px;
    height: 23px;
    padding: 0;
    font-size: 11px;
  }

  .select2-container {
    width: 100% !important;
    min-width: 0 !important;
  }

  .select2-container .select2-selection--single {
    height: 25px !important;
    min-height: 25px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 5px !important;
    background: #fff !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 25px !important;
    line-height: 23px !important;
    font-size: 12px !important;
    font-weight: 850;
    padding-left: 7px !important;
    padding-right: 22px !important;
    color: #111827;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 23px !important;
    right: 3px !important;
  }

  @media (max-width: 1400px) {
    :root {
      --gt-nav-h: 78px;
    }

    .gt-page {
      padding: 4px 6px;
    }

    .gt-topbar {
      height: 29px;
      margin-bottom: 4px;
    }

    .gt-title {
      font-size: 16px;
    }

    .gt-invoice-pill {
      height: 22px;
      font-size: 11px;
    }

    .gt-mode-pill {
      height: 21px;
      font-size: 10px;
    }

    .gt-bar {
      height: 22px;
    }

    .gt-head-body {
      padding: 4px 7px;
    }

    .gt-main-grid {
      grid-template-columns: 1.35fr 0.62fr 0.68fr 0.75fr;
      gap: 4px;
    }

    .gt-route-grid {
      grid-template-columns: 0.8fr 0.8fr 1.45fr;
      gap: 4px;
      margin-top: 3px;
    }

    .gt-party-grid {
      gap: 5px;
      margin-top: 4px;
    }

    .gt-party-title {
      height: 20px;
      font-size: 11.5px;
    }

    .gt-party-fields {
      grid-template-columns: 1fr 0.65fr 1.25fr;
      gap: 4px;
      padding: 4px 5px;
    }

    .gt-field label {
      font-size: 10px;
    }

    .gt-control,
    .gt-field input,
    .gt-field select,
    .gt-field textarea {
      height: 24px !important;
      min-height: 24px !important;
      font-size: 11.5px;
    }

    .select2-container .select2-selection--single {
      height: 24px !important;
      min-height: 24px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
      height: 24px !important;
      line-height: 22px !important;
      font-size: 11.5px !important;
    }

    .gt-table thead th {
      height: 26px;
    }

    .gt-table td {
      height: 29px;
    }

    .gt-footer-body {
      padding: 4px 7px;
    }

    .gt-footer-grid {
      grid-template-columns: 1.2fr 0.9fr 0.7fr;
      gap: 5px;
    }

    .gt-box-title {
      height: 22px;
    }

    .gt-box-body {
      padding: 4px 5px;
    }

    .gt-tender-list {
      height: 44px;
    }



    .gt-actions {
      height: 33px;
    }

    .gt-btn {
      height: 25px;
      padding: 0 10px;
      font-size: 11.5px;
    }
  }

  @media (max-width: 980px) {
    body {
      overflow: auto !important;
    }

    :root {
      --gt-nav-h: 82px;
    }

    .gt-page {
      height: auto;
      min-height: calc(100vh - var(--gt-nav-h));
      overflow: visible;
    }

    #gtForm,
    .gt-shell {
      overflow: visible;
    }

    .gt-main-grid {
      grid-template-columns: 1fr 1fr;
    }

    .gt-route-grid {
      grid-template-columns: 1fr 1fr;
    }

    .gt-route-grid .gt-field:last-child {
      grid-column: span 2;
    }

    .gt-party-grid {
      grid-template-columns: 1fr;
    }

    .gt-party-fields {
      grid-template-columns: 1fr 1fr;
    }

    .gt-party-fields .gt-field:last-child {
      grid-column: span 2;
    }

    .gt-footer-grid {
      grid-template-columns: 1fr;
    }

    .gt-table-wrapper {
      min-height: 320px;
      max-height: 420px;
    }
  }

  @media (max-width: 700px) {
    .gt-main-grid,
    .gt-route-grid,
    .gt-party-fields {
      grid-template-columns: 1fr;
    }

    .gt-route-grid .gt-field:last-child,
    .gt-party-fields .gt-field:last-child {
      grid-column: span 1;
    }

    .gt-table-wrapper {
      min-height: 300px;
      max-height: 380px;
    }
  }
</style>
{% endblock %}

{% block content %}
<div
  id="gtRoot"
  class="gt-page"
  data-customer-search-url="{% url 'customers:get_customers' %}"
  data-product-search-url="{% url 'products:search_products_for_edit' %}"
  data-route-search-url="{% url 'good_transport:routes:api_search' %}"
>
  <script type="application/json" id="gtInitialLines">{{ initial_lines_json|default:"[]"|safe }}</script>
  <script type="application/json" id="gtInitialTenders">{{ initial_tenders_json|default:"[]"|safe }}</script>

  <div class="gt-topbar">
    <h2 class="gt-title">
      <span>Goods Transport Invoice</span>
      <span class="gt-invoice-pill">Invoice No: {{ display_invoice_no|default:"Auto" }}</span>
      <span class="gt-mode-pill">{% if invoice %}Edit{% else %}New{% endif %}</span>
    </h2>
    <a class="gt-btn gt-btn-light" href="{% url 'good_transport:bookings:bookings_list' %}">Back</a>
  </div>

  <form method="post" id="gtForm" autocomplete="off">
    {% csrf_token %}

    <input type="hidden" name="lines_json" id="linesJson">
    <input type="hidden" name="tenders_json" id="tendersJson">
    <input type="hidden" name="customer_mobile" id="customerMobile" value="{{ invoice.customer_mobile|default:'' }}">
    <input type="hidden" name="customer_address" id="customerAddress" value="{{ invoice.customer_address|default:'' }}">
    <input type="hidden" name="from_city" id="fromCityHidden" value="{{ invoice.from_city|default:'' }}">
    <input type="hidden" name="to_city" id="toCityHidden" value="{{ invoice.to_city|default:'' }}">
    <input type="hidden" name="customer_name" id="customerNameHidden">
    <input type="hidden" name="customer_ref" id="customerRefHidden">
    <input type="hidden" name="rent_zero_confirmed" id="rentZeroConfirmed" value="0">
    <input type="hidden" name="action" id="formAction" value="save">

    <div class="gt-shell">

      <div class="gt-bar">
        <span>Booking Header</span>
        <small>Compact layout — more space for items</small>
      </div>

      <div class="gt-head-body">
        <div class="gt-main-grid">
          <div class="gt-field">
            <label>Customer / Account</label>
            <select id="customerSelect" name="customer_value" class="gt-control gt-focusable">
              {% if initial_customer %}
                <option
                  selected
                  value="{{ initial_customer.id }}"
                  data-ref="{{ initial_customer.id }}"
                  data-mobile="{{ initial_customer.mobile|default:'' }}"
                  data-address="{{ initial_customer.address|default:'' }}"
                >{{ initial_customer.name }}</option>
              {% endif %}
            </select>
          </div>

          <div class="gt-field">
            <label>Builty No</label>
            <input class="gt-focusable" type="text" name="builty_no" value="{{ invoice.builty_no|default:'' }}" placeholder="Builty no">
          </div>

          <div class="gt-field">
            <label>Date</label>
            <input
              class="gt-focusable"
              type="date"
              name="invoice_date"
              value="{% if invoice %}{{ invoice.invoice_date|date:'Y-m-d' }}{% else %}{{ today|date:'Y-m-d' }}{% endif %}"
            >
          </div>

        </div>

        <div class="gt-route-grid">
          <div class="gt-field">
            <label>From City</label>
            <select id="fromAreaSelect" name="from_area_t_id" class="gt-control gt-focusable">
              {% if invoice and invoice.from_area_t_id %}
                <option selected value="{{ invoice.from_area_t_id }}">{{ invoice.from_city }}</option>
              {% endif %}
            </select>
          </div>

          <div class="gt-field">
            <label>To City</label>
            <select id="toAreaSelect" name="to_area_t_id" class="gt-control gt-focusable">
              {% if invoice and invoice.to_area_t_id %}
                <option selected value="{{ invoice.to_area_t_id }}">{{ invoice.to_city }}</option>
              {% endif %}
            </select>
          </div>

          <div class="gt-field">
            <label>Remarks</label>
            <input class="gt-focusable" type="text" name="remarks" id="remarksBox" value="{{ invoice.remarks|default:'' }}" placeholder="Optional remarks">
          </div>
        </div>

        <div class="gt-party-grid">

          <div class="gt-party-box">
            <div class="gt-party-title">
              <span>Sender Detail</span>
              <small>Booking person</small>
            </div>

            <div class="gt-party-fields">
              <div class="gt-field">
                <label>Sender Name</label>
                <input class="gt-focusable" type="text" id="senderName" name="sender_name" value="{{ invoice.sender_name|default:'' }}" placeholder="Sender name">
              </div>

              <div class="gt-field">
                <label>Sender Mobile</label>
                <input class="gt-focusable" type="text" id="senderMobile" name="sender_mobile" value="{{ invoice.sender_mobile|default:'' }}" placeholder="Mobile">
              </div>

              <div class="gt-field">
                <label>Sender Address</label>
                <input class="gt-focusable" type="text" id="senderAddress" name="sender_address" value="{{ invoice.sender_address|default:'' }}" placeholder="Address">
              </div>
            </div>
          </div>

          <div class="gt-party-box">
            <div class="gt-party-title">
              <span>Receiver Detail</span>
              <small>Delivery receiver</small>
            </div>

            <div class="gt-party-fields">
              <div class="gt-field">
                <label>Receiver Name</label>
                <input class="gt-focusable" type="text" id="receiverName" name="receiver_name" value="{{ invoice.receiver_name|default:'' }}" placeholder="Receiver name">
              </div>

              <div class="gt-field">
                <label>Receiver Mobile</label>
                <input class="gt-focusable" type="text" id="receiverMobile" name="receiver_mobile" value="{{ invoice.receiver_mobile|default:'' }}" placeholder="Mobile">
              </div>

              <div class="gt-field">
                <label>Receiver Address</label>
                <input class="gt-focusable" type="text" id="receiverAddress" name="receiver_address" value="{{ invoice.receiver_address|default:'' }}" placeholder="Address">
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="gt-bar">
        <span>Items Entry</span>
        <small>Items area expanded</small>
      </div>

      <div class="gt-table-wrapper">
        <table class="gt-table" id="itemsTable">
          <thead>
            <tr>
              <th style="width:42px;">#</th>
              <th>Item Name</th>
              <th style="width:105px;">Qty</th>
              <th style="width:115px;">Weight</th>
              <th style="width:125px;">Create</th>
              <th style="width:55px;">Del</th>
            </tr>
          </thead>
          <tbody id="lineBody"></tbody>
        </table>
      </div>

      <div class="gt-footer-body">
        <div class="gt-footer-grid">

          <div class="gt-box">
            <div class="gt-box-title">
              <span>Charges</span>
              <small>Rent 0 par confirmation hogi</small>
            </div>

            <div class="gt-box-body">
              <div class="gt-charges-grid">
                <div class="gt-field">
                  <label>Rent</label>
                  <input class="gt-control gt-money gt-right gt-focusable" type="text" inputmode="decimal" name="rent" id="rentInput" value="{{ invoice.rent|default:'0.00' }}">
                </div>

                <div class="gt-field">
                  <label>Loading</label>
                  <input class="gt-control gt-money gt-right gt-focusable" type="text" inputmode="decimal" name="loading_charges" value="{{ invoice.loading_charges|default:'0.00' }}">
                </div>

                <div class="gt-field">
                  <label>Unloading</label>
                  <input class="gt-control gt-money gt-right gt-focusable" type="text" inputmode="decimal" name="unloading_charges" value="{{ invoice.unloading_charges|default:'0.00' }}">
                </div>

                <div class="gt-field">
                  <label>Builty</label>
                  <input class="gt-control gt-money gt-right gt-focusable" type="text" inputmode="decimal" name="builty_service" value="{{ invoice.builty_service|default:'0.00' }}">
                </div>

                <div class="gt-field">
                  <label>Cash Exp</label>
                  <input class="gt-control gt-money gt-right gt-focusable" type="text" inputmode="decimal" name="cash_expense" value="{{ invoice.cash_expense|default:'0.00' }}">
                </div>

                <div class="gt-field">
                  <label>Other</label>
                  <input class="gt-control gt-money gt-right gt-focusable" type="text" inputmode="decimal" name="other_charges" value="{{ invoice.other_charges|default:'0.00' }}">
                </div>
              </div>
            </div>
          </div>

          <div class="gt-box">
            <div class="gt-box-title">
              <span>Cash / Bank Tender</span>
              <small>Compact</small>
            </div>

            <div class="gt-box-body">
              <select id="bankOptionsTemplate" style="display:none;">
                {% for b in banks %}
                  <option
                    value="{{ b.t_id }}"
                    {% if cash_bank and cash_bank.t_id == b.t_id %}selected{% endif %}
                  >
                    {{ b.name }}
                  </option>
                {% endfor %}
              </select>

              <div class="gt-tender-list" id="tenderBody"></div>
            </div>
          </div>

          <div class="gt-box gt-summary-box">
            <div class="gt-box-title">
              <span>Final Total</span>
            </div>

            <div class="gt-box-body">
              <div class="gt-summary-row">
                <div class="gt-summary-label">Total</div>
                <input class="gt-summary-input gt-total-red" id="totalAmount" type="text" readonly>
              </div>

              <div class="gt-summary-row">
                <div class="gt-summary-label">Received</div>
                <input class="gt-summary-input" id="receivedAmount" type="text" readonly>
              </div>

              <div class="gt-summary-row">
                <div class="gt-summary-label">Balance</div>
                <input class="gt-summary-input gt-balance-blue" id="balanceAmount" type="text" readonly>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="gt-actions">
        <a class="gt-btn gt-btn-light" href="{% url 'good_transport:bookings:bookings_list' %}">Cancel</a>
        <button class="gt-btn gt-btn-primary" id="saveBtn" type="button">Save</button>
        <button class="gt-btn gt-btn-green" id="savePrintBtn" type="button">Save &amp; Print</button>
      </div>

    </div>
  </form>
</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
(function () {
  var root = $("#gtRoot");

  var state = {
    lines: [],
    tenders: [],
    selectedCustomer: null
  };
  var isFormSubmitting = false;

  var MIN_ROWS = 1;

  function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== "") {
      var cookies = document.cookie.split(";");
      for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].trim();
        if (cookie.substring(0, name.length + 1) === (name + "=")) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

  function escapeHtml(value) {
    return String(value || "")
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  function toNumber(value) {
    value = String(value || "0").replace(/,/g, "").trim();
    var n = parseFloat(value);
    return isNaN(n) ? 0 : n;
  }

  function money(value) {
    return toNumber(value).toFixed(2);
  }

  function cleanAmount(value) {
    value = String(value || "").replace(/[^0-9.]/g, "");
    var parts = value.split(".");
    if (parts.length > 2) value = parts[0] + "." + parts.slice(1).join("");
    return value;
  }

  function notify(message, icon) {
    if (window.Swal) {
      Swal.fire({
        toast: true,
        position: "top-end",
        icon: icon || "warning",
        title: message,
        showConfirmButton: false,
        timer: 2200
      });
      return;
    }
    alert(message);
  }

  function confirmBox(message) {
    if (window.Swal) {
      return Swal.fire({
        title: "Confirm",
        text: message,
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Yes, Save",
        cancelButtonText: "Cancel",
        confirmButtonColor: "#01478f"
      }).then(function (res) { return !!res.isConfirmed; });
    }
    return Promise.resolve(confirm(message));
  }


  function focusInput(selector, delay) {
    setTimeout(function () {
      var $el = $(selector);
      if (!$el.length) return;
      $el.focus();
      if ($el.is("input")) $el.select();
    }, delay || 120);
  }

  function openSelect2(selector, delay) {
    setTimeout(function () {
      var $el = $(selector);
      if ($el.length && $el.hasClass("select2-hidden-accessible")) {
        $el.select2("open");
      } else if ($el.length) {
        $el.focus();
      }
    }, delay || 120);
  }

  function focusAfterSelect2(selector) {
    if (selector === "#customerSelect") {
      focusInput("input[name='builty_no']");
      return;
    }

    if (selector === "#fromAreaSelect") {
      openSelect2("#toAreaSelect");
      return;
    }

    if (selector === "#toAreaSelect") {
      focusInput("#remarksBox");
      return;
    }
  }

  function readJsonScript(id) {
    var el = document.getElementById(id);
    var raw = el ? $.trim(el.textContent || "[]") : "[]";
    try { return JSON.parse(raw || "[]"); } catch (e) { return []; }
  }

  function getRows(data) {
    if (data && $.isArray(data.results)) return data.results;
    if (data && data.ok && $.isArray(data.results)) return data.results;
    if ($.isArray(data)) return data;
    return [];
  }

  function customerRow(c) {
    c = c || {};
    return {
      id: c.id || c.pk || c.t_id || "",
      text: c.text || c.name || c.label || "",
      mobile: c.mobile || c.phone || "",
      address: c.address || "",
      ref: c.id || c.pk || c.t_id || ""
    };
  }

  function productRow(p) {
    p = p || {};
    return {
      id: p.id || p.pk || p.prod_id || p.product_id || "",
      text: p.text || p.name || p.product_name || p.category || "",
      product_code: p.product_code || p.code || p.prod_id || p.product_id || "",
      ref: p.id || p.pk || p.prod_id || p.product_id || ""
    };
  }

  function emptyLine() {
    return {
      product_ref: 0,
      product_name: "",
      qty: "1",
      weight: "1",
      create_product: false
    };
  }

  function ensureRows() {
    if (!state.lines.length) {
      state.lines.push(emptyLine());
    }
  }

  function filledLines() {
    var rows = [];
    $.each(state.lines, function (i, line) {
      var productName = $.trim(line.product_name || "");
      if (!productName) return;

      rows.push({
        product_ref: parseInt(line.product_ref || 0, 10),
        product_name: productName,
        qty: toNumber(line.qty),
        weight: toNumber(line.weight),
        create_product: !!line.create_product
      });
    });
    return rows;
  }

  function openCustomerExtra() {
    /* sender / receiver blocks always visible */
  }

  function setCustomer(data) {
    data = data || {};
    state.selectedCustomer = data;

    $("#customerNameHidden").val(data.text || "");
    $("#customerRefHidden").val(data.ref || data.id || "");
    openCustomerExtra();

    if (String(data.id || "").indexOf("new:") === 0 || data.is_new) {
      $("#customerMobile").val("");
      $("#customerAddress").val("");

      if (!$.trim($("#senderName").val() || "")) {
        $("#senderName").val(data.text || "");
      }

      focusAfterSelect2("#customerSelect");
      return;
    }

    $("#customerMobile").val(data.mobile || "");
    $("#customerAddress").val(data.address || "");

    if (!$.trim($("#senderName").val() || "")) {
      $("#senderName").val(data.text || "");
    }

    if (!$.trim($("#senderMobile").val() || "")) {
      $("#senderMobile").val(data.mobile || "");
    }

    if (!$.trim($("#senderAddress").val() || "")) {
      $("#senderAddress").val(data.address || "");
    }

    focusAfterSelect2("#customerSelect");
  }

  function setupCustomerSearch() {
    var url = root.data("customer-search-url");

    if (!$.fn.select2) {
      notify("Select2 load nahi hua.");
      return;
    }

    $("#customerSelect").select2({
      placeholder: "Search or type customer name",
      width: "100%",
      tags: true,
      allowClear: true,
      ajax: {
        url: url,
        type: "POST",
        dataType: "json",
        delay: 250,
        headers: { "X-CSRFToken": getCookie("csrftoken") },
        data: function (params) {
          return { term: params.term || "" };
        },
        processResults: function (data) {
          return {
            results: $.map(getRows(data), function (c) {
              return customerRow(c);
            })
          };
        }
      },
      createTag: function (params) {
        var term = $.trim(params.term || "");
        if (!term) return null;
        return {
          id: "new:" + term,
          text: term,
          ref: "new:" + term,
          is_new: true
        };
      },
      templateResult: function (item) {
        if (item.loading) return item.text;

        var html = "<div style='line-height:1.25;'>"
          + "<div style='font-weight:900;color:#0f172a;'>" + escapeHtml(item.text || "") + "</div>";

        if (item.mobile) {
          html += "<div style='font-size:11px;color:#64748b;'>" + escapeHtml(item.mobile) + "</div>";
        }

        if (item.address) {
          html += "<div style='font-size:11px;color:#64748b;'>" + escapeHtml(item.address) + "</div>";
        }

        if (item.is_new) {
          html += "<div style='font-size:11px;font-weight:900;color:#01478f;'>Create new customer</div>";
        }

        html += "</div>";
        return html;
      },
      templateSelection: function (item) {
        return item.text || "";
      },
      escapeMarkup: function (markup) {
        return markup;
      }
    });

    $("#customerSelect").on("select2:select", function (e) {
      setCustomer(e.params.data || {});
    });

    $("#customerSelect").on("select2:clear", function () {
      state.selectedCustomer = null;
      $("#customerNameHidden, #customerRefHidden, #customerMobile, #customerAddress").val("");
    });

    var selected = $("#customerSelect option:selected");

    if (selected.length && selected.val()) {
      setCustomer({
        id: selected.val(),
        ref: selected.val(),
        text: $.trim(selected.text()),
        mobile: selected.data("mobile") || "",
        address: selected.data("address") || ""
      });
    }
  }

  function routeRow(a) {
    a = a || {};
    return {
      id: a.id || a.t_id || a.ref || "",
      text: a.text || a.area_name || "",
      area_name: a.area_name || a.text || "",
      description: a.description || "",
      ref: a.ref || a.id || a.t_id || ""
    };
  }

  function setupRouteSelect(selector, hiddenSelector, placeholder) {
    var url = root.data("route-search-url");

    if (!$.fn.select2) {
      notify("Select2 load nahi hua.");
      return;
    }

    $(selector).select2({
      placeholder: placeholder || "Search route / area",
      width: "100%",
      allowClear: true,
      ajax: {
        url: url,
        type: "POST",
        dataType: "json",
        delay: 250,
        headers: { "X-CSRFToken": getCookie("csrftoken") },
        data: function (params) {
          return { term: params.term || "" };
        },
        processResults: function (data) {
          return {
            results: $.map(getRows(data), function (a) {
              return routeRow(a);
            })
          };
        }
      },
      templateResult: function (item) {
        if (item.loading) return item.text;

        var html = "<div style='line-height:1.25;'>"
          + "<div style='font-weight:900;color:#0f172a;'>" + escapeHtml(item.text || "") + "</div>";

        if (item.description) {
          html += "<div style='font-size:11px;color:#64748b;'>" + escapeHtml(item.description) + "</div>";
        }

        html += "</div>";
        return html;
      },
      templateSelection: function (item) {
        return item.text || "";
      },
      escapeMarkup: function (markup) {
        return markup;
      }
    });

    $(selector).on("select2:select", function (e) {
      var data = routeRow(e.params.data || {});
      $(hiddenSelector).val(data.area_name || data.text || "");
      focusAfterSelect2(selector);
    });

    $(selector).on("select2:clear", function () {
      $(hiddenSelector).val("");
    });
  }

  function setupProductSelect($el, rowIndex) {
    if ($el.hasClass("select2-hidden-accessible")) return;

    $el.select2({
      placeholder: "Search or type item name",
      width: "100%",
      tags: true,
      allowClear: true,
      minimumInputLength: 1,
      ajax: {
        url: root.data("product-search-url"),
        type: "POST",
        dataType: "json",
        delay: 200,
        headers: { "X-CSRFToken": getCookie("csrftoken") },
        data: function (params) {
          return { term: params.term || "", limit: 80 };
        },
        processResults: function (data) {
          return {
            results: $.map(getRows(data), function (p) {
              return productRow(p);
            })
          };
        }
      },
      createTag: function (params) {
        var term = $.trim(params.term || "");
        if (!term) return null;

        return {
          id: "new:" + term,
          text: term,
          ref: 0,
          is_new: true
        };
      },
      templateSelection: function (item) {
        return item.text || "";
      }
    });

    $el.on("select2:select", function (e) {
      var data = e.params.data || {};
      var isNew = String(data.id || "").indexOf("new:") === 0 || data.is_new;

      state.lines[rowIndex].product_name = data.text || "";
      state.lines[rowIndex].product_ref = isNew ? 0 : parseInt(data.ref || data.id || 0, 10);
      state.lines[rowIndex].create_product = !!isNew;

      $(".gt-line-create[data-row='" + rowIndex + "']").prop("checked", !!isNew);
      $("tr[data-row='" + rowIndex + "']").addClass("gt-active-row");

      syncLinesJson();

      setTimeout(function () {
        $(".gt-line-qty[data-row='" + rowIndex + "']").focus().select();
      }, 80);
    });

    $el.on("select2:clear", function () {
      state.lines[rowIndex].product_name = "";
      state.lines[rowIndex].product_ref = 0;
      state.lines[rowIndex].qty = "1";
      state.lines[rowIndex].weight = "1";
      state.lines[rowIndex].create_product = false;

      $(".gt-line-qty[data-row='" + rowIndex + "']").val("1");
      $(".gt-line-weight[data-row='" + rowIndex + "']").val("1");
      $(".gt-line-create[data-row='" + rowIndex + "']").prop("checked", false);

      syncLinesJson();
    });
  }

  function renderLines() {
    ensureRows();

    var html = "";

    $.each(state.lines, function (index, line) {
      var checked = line.create_product ? "checked" : "";
      var option = "";

      if (line.product_name) {
        option = "<option selected value='" + escapeHtml(line.product_ref || ("new:" + line.product_name)) + "'>"
          + escapeHtml(line.product_name)
          + "</option>";
      }

      html += "<tr data-row='" + index + "'>"
        + "<td class='gt-right'>" + (index + 1) + "</td>"
        + "<td><select class='gt-control gt-product-select' data-row='" + index + "'>" + option + "</select></td>"
        + "<td><input class='gt-control gt-right gt-line-qty' data-row='" + index + "' type='text' inputmode='decimal' value='" + escapeHtml(line.qty) + "'></td>"
        + "<td><input class='gt-control gt-right gt-line-weight' data-row='" + index + "' type='text' inputmode='decimal' value='" + escapeHtml(line.weight) + "'></td>"
        + "<td><label class='gt-check'><input type='checkbox' class='gt-line-create' data-row='" + index + "' " + checked + "> Create Product</label></td>"
        + "<td><button type='button' class='gt-btn gt-btn-red gt-btn-mini btn-remove-line' data-row='" + index + "'>✕</button></td>"
        + "</tr>";
    });

    $("#lineBody").html(html);

    $(".gt-product-select").each(function () {
      setupProductSelect($(this), parseInt($(this).data("row"), 10));
    });

    syncLinesJson();
  }

  function syncLine(rowIndex) {
    var $product = $(".gt-product-select[data-row='" + rowIndex + "']");
    var data = [];

    if ($product.length && $product.hasClass("select2-hidden-accessible")) {
      data = $product.select2("data") || [];
    }

    if (data.length && data[0].text) {
      var item = data[0];
      var isNew = String(item.id || "").indexOf("new:") === 0 || item.is_new;

      state.lines[rowIndex].product_name = item.text || "";
      state.lines[rowIndex].product_ref = isNew ? 0 : parseInt(item.ref || item.id || 0, 10);
    }

    state.lines[rowIndex].qty = $(".gt-line-qty[data-row='" + rowIndex + "']").val();
    state.lines[rowIndex].weight = $(".gt-line-weight[data-row='" + rowIndex + "']").val();
    state.lines[rowIndex].create_product = $(".gt-line-create[data-row='" + rowIndex + "']").is(":checked");
  }

  function syncAllLines() {
    $(".gt-product-select").each(function () {
      syncLine(parseInt($(this).data("row"), 10));
    });
  }

  function syncLinesJson() {
    syncAllLines();
    $("#linesJson").val(JSON.stringify(filledLines()));
  }

  function getDefaultBankId() {
    var selected = $("#bankOptionsTemplate option:selected").val();
    if (selected) return parseInt(selected, 10);

    var first = $("#bankOptionsTemplate option:first").val();
    return parseInt(first || 0, 10);
  }

  function getBankOptionsHtml(selectedId) {
    var html = "";

    $("#bankOptionsTemplate option").each(function () {
      var value = $(this).val();
      var text = $(this).text();
      var selected = String(value) === String(selectedId) ? "selected" : "";

      html += "<option value='" + escapeHtml(value) + "' " + selected + ">"
        + escapeHtml($.trim(text))
        + "</option>";
    });

    return html;
  }

  function emptyTenderRow() {
    return {
      bank_id: getDefaultBankId(),
      amount: 0
    };
  }

  function ensureTenderRows() {
    if (!state.tenders.length) {
      state.tenders.push(emptyTenderRow());
    }
  }

  function syncTendersFromDom() {
    var rows = [];

    $(".gt-tender-row").each(function () {
      var bankId = parseInt($(this).find(".gt-tender-bank").val() || 0, 10);
      var amount = toNumber($(this).find(".gt-tender-amount").val());

      rows.push({
        bank_id: bankId,
        amount: amount
      });
    });

    state.tenders = rows;
    $("#tendersJson").val(JSON.stringify(state.tenders));
  }

  function renderTenders() {
    ensureTenderRows();

    var html = "";

    $.each(state.tenders, function (index, row) {
      html += ""
        + "<div class='gt-tender-row' data-index='" + index + "'>"
        + "  <div class='gt-tender-no'>" + (index + 1) + "</div>"
        + "  <div>"
        + "    <select class='gt-tender-bank gt-focusable' data-index='" + index + "'>"
        +        getBankOptionsHtml(row.bank_id)
        + "    </select>"
        + "  </div>"
        + "  <div>"
        + "    <input type='text' inputmode='decimal' class='gt-tender-amount gt-focusable' data-index='" + index + "' value='" + money(row.amount) + "'>"
        + "  </div>"
        + "  <div>"
        + "    <button type='button' class='gt-btn gt-btn-mini gt-btn-plus btn-add-tender-row' title='Add row'>+</button>"
        + "  </div>"
        + "  <div>"
        + "    <button type='button' class='gt-btn gt-btn-mini gt-btn-muted btn-remove-tender' data-index='" + index + "' title='Remove row'>×</button>"
        + "  </div>"
        + "</div>";
    });

    $("#tenderBody").html(html);
    syncTendersFromDom();
    calculateTotals();
  }

  function addTenderRow() {
    syncTendersFromDom();
    state.tenders.push(emptyTenderRow());
    renderTenders();

    setTimeout(function () {
      $(".gt-tender-row:last .gt-tender-bank").focus();
    }, 80);
  }

  function calculateTotals() {
    var total = 0;
    var received = 0;

    $(".gt-money").each(function () {
      total += toNumber($(this).val());
    });

    syncTendersFromDom();

    $.each(state.tenders, function (i, row) {
      received += toNumber(row.amount);
    });

    $("#totalAmount").val(money(total));
    $("#receivedAmount").val(money(received));
    $("#balanceAmount").val(money(total - received));
  }

  function focusNext(current, reverse) {
    var focusables = $(".gt-focusable:visible, .gt-product-select:visible, .gt-line-qty:visible, .gt-line-weight:visible, .gt-line-create:visible, .gt-tender-bank:visible, .gt-tender-amount:visible")
      .filter(function () {
        return !$(this).prop("disabled") && !$(this).prop("readonly");
      });

    var index = focusables.index(current);
    var next = reverse ? focusables.eq(index - 1) : focusables.eq(index + 1);

    if (!next.length) return;

    if (next.hasClass("gt-product-select")) {
      next.select2("open");
    } else {
      next.focus().select();
    }
  }

  function focusProductRow(rowIndex) {
    setTimeout(function () {
      var $product = $(".gt-product-select[data-row='" + rowIndex + "']");

      if ($product.length && $product.hasClass("select2-hidden-accessible")) {
        $product.select2("open");
      } else {
        $product.focus();
      }

      var wrap = document.querySelector(".gt-table-wrapper");
      if (wrap) {
        wrap.scrollTop = wrap.scrollHeight;
      }
    }, 80);
  }

  function isLastTableField($el) {
    var rowIndex = parseInt($el.data("row"), 10);

    if (isNaN(rowIndex)) {
      return false;
    }

    return rowIndex === state.lines.length - 1 &&
      ($el.hasClass("gt-line-weight") || $el.hasClass("gt-line-create"));
  }

  function addNewLineAndFocus() {
    syncAllLines();
    state.lines.push(emptyLine());
    renderLines();
    focusProductRow(state.lines.length - 1);
  }

  function setSaveButtonsLoading(actionValue) {
    isFormSubmitting = true;

    $("#saveBtn, #savePrintBtn")
      .prop("disabled", true)
      .css({
        "opacity": "0.65",
        "cursor": "not-allowed",
        "pointer-events": "none"
      });

    if (actionValue === "save_print") {
      $("#savePrintBtn").text("Saving & Printing...");
    } else {
      $("#saveBtn").text("Saving...");
    }
  }

  function realSubmitForm(form) {
    if (isFormSubmitting) {
      return;
    }

    setSaveButtonsLoading($("#formAction").val());

    $("#gtForm").data("real-submit", true);
    HTMLFormElement.prototype.submit.call(form);
  }
  function submitForm(actionValue) {
    if (isFormSubmitting) {
      return;
    }

    $("#formAction").val(actionValue || "save");
    $("#gtForm").trigger("submit");
  }

  function validateAndSubmit(form) {
    if ($.fn.select2 && $("#customerSelect").hasClass("select2-hidden-accessible")) {
      var cData = $("#customerSelect").select2("data") || [];
      if (cData.length) setCustomer(cData[0]);
    }

    if (!$("#fromAreaSelect").val()) {
      notify("From area select karein.");
      $("#fromAreaSelect").select2("open");
      return;
    }

    if (!$("#toAreaSelect").val()) {
      notify("To area select karein.");
      $("#toAreaSelect").select2("open");
      return;
    }

    syncLinesJson();

    if (!$("#customerMobile").val()) {
      $("#customerMobile").val($("#senderMobile").val());
    }

    if (!$("#customerAddress").val()) {
      $("#customerAddress").val($("#senderAddress").val());
    }

    syncTendersFromDom();
    calculateTotals();

    if (!$("#customerSelect").val() || !$("#customerRefHidden").val()) {
      notify("Customer select ya type karein.");
      $("#customerSelect").select2("open");
      return;
    }

    if (!filledLines().length) {
      notify("Kam az kam 1 item add karein.");
      $(".gt-product-select").first().select2("open");
      return;
    }

    if (toNumber($("#receivedAmount").val()) > toNumber($("#totalAmount").val())) {
      notify("Received amount total se zyada nahi ho sakta.");
      $(".gt-tender-amount:first").focus().select();
      return;
    }

    var totalAmount = toNumber($("#totalAmount").val());
    var balanceAmount = toNumber($("#balanceAmount").val());

    if (toNumber($("#rentInput").val()) <= 0 && $("#rentZeroConfirmed").val() !== "1") {
      confirmBox("Rent 0 hai. Kya aap waqai 0 rent par invoice save karna chahte hain?").then(function (ok) {
        if (!ok) {
          $("#rentInput").focus().select();
          return;
        }

        $("#rentZeroConfirmed").val("1");
        realSubmitForm(form);
      });
      return;
    }

    realSubmitForm(form);
  }

  function bindEvents() {
    $("#saveBtn").on("click", function () {
      submitForm("save");
    });

    $("#savePrintBtn").on("click", function () {
      submitForm("save_print");
    });

    $(document).on("focus", "#itemsTable input, #itemsTable select", function () {
      $("#itemsTable tr").removeClass("gt-active-row");
      $(this).closest("tr").addClass("gt-active-row");
    });

    $(document).on("input", ".gt-line-qty, .gt-line-weight", function () {
      var clean = cleanAmount($(this).val());

      if ($(this).val() !== clean) {
        $(this).val(clean);
      }

      syncLine(parseInt($(this).data("row"), 10));
      syncLinesJson();
    });

    $(document).on("change", ".gt-line-create", function () {
      syncLine(parseInt($(this).data("row"), 10));
      syncLinesJson();
    });

    $(document).on("input", ".gt-money", function () {
      var clean = cleanAmount($(this).val());

      if ($(this).val() !== clean) {
        $(this).val(clean);
      }

      $("#rentZeroConfirmed").val("0");
      calculateTotals();
    });

    $(document).on("click", ".btn-remove-line", function () {
      var rowIndex = parseInt($(this).data("row"), 10);

      state.lines.splice(rowIndex, 1);

      if (!state.lines.length) {
        state.lines.push(emptyLine());
      }

      renderLines();
      calculateTotals();
    });

    $(document).on("click", ".btn-add-tender-row", function () {
      addTenderRow();
    });

    $(document).on("click", ".btn-remove-tender", function () {
      var index = parseInt($(this).data("index"), 10);

      syncTendersFromDom();

      if (state.tenders.length <= 1) {
        state.tenders[0].amount = 0;
      } else {
        state.tenders.splice(index, 1);
      }

      renderTenders();
    });

    $(document).on("change", ".gt-tender-bank", function () {
      syncTendersFromDom();
      calculateTotals();
    });

    $(document).on("input", ".gt-tender-amount", function () {
      var clean = cleanAmount($(this).val());

      if ($(this).val() !== clean) {
        $(this).val(clean);
      }

      syncTendersFromDom();
      calculateTotals();
    });

    $(document).on("keydown", function (e) {
      if (e.altKey && String(e.key).toLowerCase() === "s") {
        e.preventDefault();
        submitForm("save");
      }

      if (e.altKey && String(e.key).toLowerCase() === "p") {
        e.preventDefault();
        submitForm("save_print");
      }
    });

    $(document).on("keydown", ".gt-focusable, .gt-line-qty, .gt-line-weight, .gt-line-create, .gt-tender-bank, .gt-tender-amount", function (e) {
      var $current = $(this);

      if (e.key === "Enter" || e.key === "ArrowRight" || e.key === "ArrowDown") {
        e.preventDefault();

    

        if (isLastTableField($current)) {
          addNewLineAndFocus();
          return;
        }

        focusNext(this, false);
      }

      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
        e.preventDefault();
        focusNext(this, true);
      }
    });

    $("#gtForm").on("submit", function (e) {
      if ($("#gtForm").data("real-submit") === true) {
        return true;
      }

      e.preventDefault();
      validateAndSubmit(this);
      return false;
    });
  }

  $(function () {
    var initialLines = readJsonScript("gtInitialLines");
    var initialTenders = readJsonScript("gtInitialTenders");

    state.lines = $.isArray(initialLines) && initialLines.length ? initialLines : [];
    state.tenders = $.isArray(initialTenders) && initialTenders.length ? initialTenders : [];

    ensureRows();
    ensureTenderRows();

    setupCustomerSearch();
    renderLines();
    renderTenders();
    bindEvents();
    calculateTotals();

    setupRouteSelect("#fromAreaSelect", "#fromCityHidden", "Search from area");
    setupRouteSelect("#toAreaSelect", "#toCityHidden", "Search to area");

    setTimeout(function () {
      if ($.fn.select2) {
        $("#customerSelect").select2("open");
      }
    }, 250);
  });
})();
</script>
{% endblock %}