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

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

{% block stylesheets %}
{{ block.super }}
<style>
  :root {
    --gt-primary: #01478f;
    --gt-green: #16a34a;
    --gt-red: #dc2626;
    --gt-bg: #eef2f7;
    --gt-border: #d7deea;
    --gt-border-soft: #e1e7f0;
    --gt-head: #f8fafc;
    --gt-text: #0f172a;
    --gt-muted: #64748b;
    --gt-nav-h: 52px; /* apne navbar ki height yahan set karein */
  }

  /* ── no body scroll ── */
  body {
    overflow: hidden !important;
    background: var(--gt-bg);
  }

  /* ── page shell ── */
  .gt-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--gt-nav-h));
    padding: 5px 8px 4px;
    overflow: hidden;
    gap: 0;
    box-sizing: border-box;
  }

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

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

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

  .gt-title-main {
    color: var(--gt-text);
  }

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

  .gt-mode-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
  }

  /* ── form fills remaining space ── */
  #gtForm {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* ── main card ── */
  .gt-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border: 1px solid var(--gt-border);
    border-radius: 6px;
    overflow: hidden;
  }

  /* ── section bar ── */
  .gt-bar {
    flex-shrink: 0;
    height: 25px;
    padding: 0 9px;
    background: linear-gradient(180deg, #f8fbff 0%, #edf3fa 100%);
    border-bottom: 1px solid var(--gt-border);
    font-size: 12px;
    font-weight: 900;
    color: var(--gt-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .gt-bar small {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--gt-muted);
  }

  /* ── header section ── */
  .gt-head-body {
    flex-shrink: 0;
    padding: 6px 8px;
    border-bottom: 1px solid var(--gt-border-soft);
  }

    .gt-head-grid {
    display: grid;
    grid-template-columns: 1.7fr .75fr .8fr .95fr;
    gap: 6px;
    align-items: end;
  }

  .gt-customer-extra {
    display: none;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 5px;
  }

  .gt-customer-extra.is-open {
    display: grid;
  }

  .gt-span-2 {
    grid-column: span 2;
  }

  .gt-customer-extra.is-open {
    display: grid;
  }

  /* ── field labels & controls ── */
  .gt-field label {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 900;
    color: var(--gt-muted);
    line-height: 1;
  }

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

  .gt-field textarea {
    resize: none;
    line-height: 19px;
  }

  .gt-control:focus,
  .gt-field input:focus,
  .gt-field select:focus,
  .gt-field textarea:focus {
    border-color: var(--gt-primary);
    box-shadow: 0 0 0 2px rgba(1, 71, 143, 0.12);
    outline: none;
  }

  /* ── TABLE: wrapper takes all remaining vertical space ── */
  .gt-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: 1px solid var(--gt-border-soft);
  }

  /* custom scrollbar */
  .gt-table-wrapper::-webkit-scrollbar {
    width: 6px;
  }
  .gt-table-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
  .gt-table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }
  .gt-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

  .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;
  }

  /* ── sticky header so thead stays visible when tbody scrolls ── */
  .gt-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 26px;
    background: var(--gt-head);
    color: #475569;
    font-weight: 900;
    border-bottom: 2px solid var(--gt-border);
  }

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

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

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

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

  /* ── footer section ── */
  .gt-footer-body {
    flex-shrink: 0;
    padding: 5px 8px;
    border-top: 1px solid var(--gt-border-soft);
  }

  .gt-footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 0.78fr;
    gap: 6px;
  }

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

  .gt-box-title {
    height: 24px;
    padding: 0 8px;
    background: var(--gt-head);
    border-bottom: 1px solid var(--gt-border-soft);
    font-size: 12px;
    font-weight: 900;
    color: var(--gt-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

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

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

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

  .gt-tender-grid {
    display: grid;
    grid-template-columns: 1fr 100px 52px;
    gap: 4px;
    align-items: end;
    margin-bottom: 4px;
  }

  .gt-tender-list {
    min-height: 54px;
    border: 1px solid var(--gt-border-soft);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
  }

  .gt-tender-row {
    display: grid;
    grid-template-columns: 24px 1fr 80px 28px;
    gap: 3px;
    align-items: center;
    min-height: 26px;
    padding: 2px 5px;
    border-bottom: 1px solid #eef2f7;
    font-size: 12px;
    font-weight: 800;
  }

  .gt-tender-empty {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
  }

  .gt-summary-box {
    background: #fff7f7;
    border-color: #fecaca;
  }

  .gt-summary-box .gt-box-title {
    background: #fee2e2;
    border-bottom-color: #fecaca;
    color: #991b1b;
  }

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

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

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

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

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

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

  /* ── action bar ── */
  .gt-actions {
    flex-shrink: 0;
    height: 38px;
    padding: 0 8px;
    border-top: 1px solid var(--gt-border);
    background: var(--gt-head);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

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

  .gt-btn-primary { background: var(--gt-primary); border-color: var(--gt-primary); color: #fff !important; }
  .gt-btn-green   { background: var(--gt-green);   border-color: #15803d;           color: #fff !important; }
  .gt-btn-red     { background: var(--gt-red);     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 overrides ── */
  .select2-container {
    width: 100% !important;
    min-width: 0 !important;
  }

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

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

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




  /*new*/
  /* ── Route + Sender/Receiver clear blocks ── */
  .gt-route-grid {
    display: grid;
    grid-template-columns: 0.75fr 0.75fr 1.5fr;
    gap: 6px;
    margin-top: 5px;
    align-items: end;
  }

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

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

  .gt-party-title {
    height: 24px;
    padding: 0 8px;
    background: linear-gradient(180deg, #f8fbff 0%, #edf3fa 100%);
    border-bottom: 1px solid var(--gt-border-soft);
    font-size: 12px;
    font-weight: 900;
    color: var(--gt-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

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

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

  .gt-party-address {
    grid-column: span 2;
  }


  /* ── responsive fallback ── */
  @media (max-width: 1100px) {
    .gt-head-grid      { grid-template-columns: 1fr 1fr; }
    .gt-customer-extra { grid-template-columns: 1fr 1fr; }
    .gt-footer-grid    { grid-template-columns: 1fr; }
  }

  @media (max-width: 700px) {
    .gt-head-grid      { grid-template-columns: 1fr; }
    .gt-customer-extra { grid-template-columns: 1fr; }
  }


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

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


</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>

  <!-- top bar -->
  <div class="gt-topbar">
    <h2 class="gt-title">
      <span class="gt-title-main">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 stretches to fill remaining height -->
  <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">

      <!-- ── Header bar ── -->
      <div class="gt-bar">
        <span>Header</span>
        <small>Enter / Arrow se next field</small>
      </div>

      <div class="gt-head-body">
        <div class="gt-head-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:'' }}">
          </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 class="gt-field">
            <label>Payment Mode</label>
            <select class="gt-control gt-focusable" name="payment_mode">
              {% for value,label in payment_mode_choices %}
                <option value="{{ value }}" {% if invoice and invoice.payment_mode == value %}selected{% elif not invoice and value == "paid" %}selected{% endif %}>
                  {{ label }}
                </option>
              {% endfor %}
            </select>
          </div>


        </div>

<!-- Route + Remarks -->
<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>

<!-- Sender / Receiver Blocks -->
<div class="gt-party-grid">

  <!-- Sender Block -->
  <div class="gt-party-box">
    <div class="gt-party-title">
      <span>Sender Detail</span>
      <small>Sender / 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="Sender mobile"
        >
      </div>

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

  <!-- Receiver Block -->
  <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="Receiver mobile"
        >
      </div>

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

</div>
      </div>

      <!-- ── Items bar ── -->
      <div class="gt-bar">
        <span>Items Entry</span>
        <small>Row by row entry</small>
      </div>

      <!-- ── TABLE WRAPPER — this div scrolls, not the page ── -->
      <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>

      <!-- ── Footer ── -->
      <div class="gt-footer-body">
        <div class="gt-footer-grid">

          <!-- Charges -->
          <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>

          <!-- Tender -->
          <div class="gt-box">
            <div class="gt-box-title">
              <span>Cash / Bank Tender</span>
              <small>Compact</small>
            </div>
            <div class="gt-box-body">
              <div class="gt-tender-grid">
                <div class="gt-field">
                  <label>Bank / Cash</label>
                  <select id="bankSelect" class="gt-control gt-focusable">
                    {% 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>
                <div class="gt-field">
                  <label>Amount</label>
                  <input type="text" inputmode="decimal" id="bankAmount" class="gt-control gt-right gt-focusable" value="0">
                </div>
                <div class="gt-field">
                  <label>&nbsp;</label>
                  <button type="button" class="gt-btn gt-btn-green" id="addTenderBtn" style="width:100%;">Add</button>
                </div>
              </div>
              <div class="gt-tender-list" id="tenderBody">
                <div class="gt-tender-empty">No tender added</div>
              </div>
            </div>
          </div>

          <!-- Summary -->
          <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>

      <!-- ── Action bar ── -->
      <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><!-- /.gt-shell -->
  </form>
</div><!-- /#gtRoot -->
{% endblock %}

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

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

  var MIN_ROWS = 1;

  /* ── helpers ── */
  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 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;
  }

  /* ── customer ── */
  function openCustomerExtra() { $("#customerExtra").addClass("is-open"); }

  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 || "");
      }

      setTimeout(function () {
        $("#senderMobile").focus().select();
      }, 80);
      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 || "");
    }

    setTimeout(function () {
      $("input[name='builty_no']").focus().select();
    }, 80);
  }

  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("");
      $("#customerExtra").removeClass("is-open");
    });

    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") || ""
      });
    }
  }

  // route
  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 || "");
  });

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

  /* ── product select per row ── */
  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();
    });
  }

  /* ── render lines ── */
  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()));
  }

  /* ── tenders ── */
  function renderTenders() {
    var html = "";
    if (!state.tenders.length) {
      html = "<div class='gt-tender-empty'>No tender added</div>";
    } else {
      $.each(state.tenders, function (index, row) {
        var bankName = $.trim($("#bankSelect option[value='" + row.bank_id + "']").text() || row.bank_id);
        html += "<div class='gt-tender-row'>"
          + "<div class='gt-right'>" + (index + 1) + "</div>"
          + "<div>" + escapeHtml(bankName) + "</div>"
          + "<div class='gt-right'>" + money(row.amount) + "</div>"
          + "<div><button type='button' class='gt-btn gt-btn-red gt-btn-mini btn-remove-tender' data-index='" + index + "'>✕</button></div>"
          + "</div>";
      });
    }
    $("#tenderBody").html(html);
    $("#tendersJson").val(JSON.stringify(state.tenders));
    calculateTotals();
  }

  /* ── totals ── */
  function calculateTotals() {
    var total    = 0;
    var received = 0;
    $(".gt-money").each(function () { total += toNumber($(this).val()); });
    $.each(state.tenders, function (i, row) { received += toNumber(row.amount); });
    $("#totalAmount").val(money(total));
    $("#receivedAmount").val(money(received));
    $("#balanceAmount").val(money(total - received));
  }

  function addTender() {
    var bankId = parseInt($("#bankSelect").val() || 0, 10);
    var amount = toNumber($("#bankAmount").val());
    if (!bankId)   { notify("Bank/Cash select karein."); return; }
    if (amount <= 0) { notify("Amount enter karein."); $("#bankAmount").focus().select(); return; }
    state.tenders.push({ bank_id: bankId, amount: amount });
    $("#bankAmount").val("0");
    renderTenders();
  }

  /* ── keyboard navigation ── */
  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, #bankSelect:visible, #bankAmount: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);
  }

  /* ── submit ── */
  function submitForm(actionValue) {
    $("#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());
    }
    renderTenders();

    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.");
      $("#bankAmount").focus().select();
      return;
    }

    var paymentMode = $("select[name='payment_mode']").val();
    var totalAmount = toNumber($("#totalAmount").val());
    var receivedAmount = toNumber($("#receivedAmount").val());
    var balanceAmount = toNumber($("#balanceAmount").val());

    if (paymentMode === "paid" && Math.abs(balanceAmount) > 0.009) {
      notify("Paid mode mein full payment receive karna zaroori hai. Balance 0 hona chahiye.");
      $("#bankAmount").focus().select();
      return;
    }

    if ((paymentMode === "to_pay" || paymentMode === "credit") && totalAmount > 0 && balanceAmount <= 0.009) {
      if (paymentMode === "to_pay") {
        notify("To Pay mode mein full amount receive nahi ho sakti. Full payment hai to Payment Mode Paid karein.");
      } else {
        notify("Credit mode mein full amount receive nahi ho sakti. Full payment hai to Payment Mode Paid karein.");
      }
      $("select[name='payment_mode']").focus();
      return;
    }


    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");
        $("#gtForm").data("real-submit", true);
        HTMLFormElement.prototype.submit.call(form);
      });
      return;
    }
    $("#gtForm").data("real-submit", true);
    HTMLFormElement.prototype.submit.call(form);
  }

  /* ── event bindings ── */
  function bindEvents() {
    $("#saveBtn").on("click",      function () { submitForm("save"); });
    $("#savePrintBtn").on("click", function () { submitForm("save_print"); });
    $("#addTenderBtn").on("click", addTender);
    $("#remarksBox").on("focus", openCustomerExtra);

    $(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, #bankAmount", 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-remove-tender", function () {
      var index = parseInt($(this).data("index"), 10);
      state.tenders.splice(index, 1);
      renderTenders();
    });

    $(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, #bankAmount, #bankSelect", function (e) {
        var $current = $(this);

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

          if ($current.attr("id") === "bankAmount") {
            addTender();
            return;
          }

          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;
    });
  }

  /* ── init ── */
  $(function () {
    var initialLines   = readJsonScript("gtInitialLines");
    var initialTenders = readJsonScript("gtInitialTenders");

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

    ensureRows();
    setupCustomerSearch();
    renderLines();
    renderTenders();
    bindEvents();
    calculateTotals();
    setupRouteSelect("#fromAreaSelect", "#fromCityHidden", "Search from area");
setupRouteSelect("#toAreaSelect", "#toCityHidden", "Search to area");

    if ($("#customerSelect").val() || $.trim($("#remarksBox").val() || "")) {
      openCustomerExtra();
    }

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