{# templates/sales/pos_invoice.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}POS Invoice{% endblock %}

{% block stylesheets %}
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-4-theme@1.0.0/dist/select2-bootstrap-4.min.css" rel="stylesheet" />

<style>
/* ═══════════════════════════════════════════════════════════════════
   POS INVOICE - COMPACT TOUCH FRIENDLY STYLES
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --pos-primary: #01478f;
  --pos-success: #28a745;
  --pos-danger: #dc3545;
  --pos-gray: #6c757d;
  --pos-light: #f4f5f7;
  --pos-border: #dee2e6;
}

* { box-sizing: border-box; }
body { overflow: hidden; }

.pos-container {
  background: var(--pos-light);
  height: calc(100vh - 50px);
  padding: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── HEADER ── */
.pos-header {
  background: #fff;
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.pos-header .row { margin: 0 -3px; }
.pos-header .row > div { padding: 0 3px; }
.pos-header .form-control,
.pos-header .custom-select {
  height: 32px;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 4px;
}
.pos-header .btn {
  height: 32px;
  padding: 0 10px;
  font-size: 0.8rem;
  border-radius: 4px;
}
.pos-header label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--pos-gray);
  margin-bottom: 1px;
  text-transform: uppercase;
}

/* ── CUSTOMER ── */
.pos-customer {
  background: #fff;
  border-radius: 4px;
  padding: 5px 10px;
  margin-bottom: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.pos-customer .row { margin: 0 -3px; }
.pos-customer .row > div { padding: 0 3px; }
.pos-customer .form-control {
  height: 30px;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 4px;
}
/* Select2 compact styling inside pos-customer */
.pos-customer .select2-container--bootstrap4 .select2-selection--single {
  height: 30px !important;
  font-size: 0.8rem !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}
.pos-customer .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  line-height: 26px !important;
  font-size: 0.8rem !important;
}
.pos-customer .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  height: 28px !important;
}
.btn-add-cust {
  height: 30px; width: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; border-radius: 4px;
}

/* ── CATEGORIES ── */
.pos-categories {
  background: #fff;
  border-radius: 4px;
  padding: 5px 8px;
  margin-bottom: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.pos-categories::-webkit-scrollbar { height: 4px; }
.pos-categories::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.cat-btn {
  display: inline-block;
  padding: 5px 12px;
  margin-right: 5px;
  background: var(--pos-light);
  border: 1px solid var(--pos-border);
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.cat-btn:hover { border-color: var(--pos-primary); color: var(--pos-primary); }
.cat-btn.active { background: var(--pos-primary); border-color: var(--pos-primary); color: #fff; }

/* ── MAIN ── */
.pos-main {
  display: flex;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── PRODUCTS GRID ── */
.pos-products {
  flex: 0 0 55%;
  background: #fff;
  border-radius: 4px;
  padding: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow-y: auto;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 5px;
}
.product-box {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.product-box:hover { border-color: var(--pos-primary); background: #f0f7ff; }
.product-box:active { background: #e0efff; }
.product-box .p-icon { font-size: 18px; color: var(--pos-primary); margin-bottom: 2px; }
.product-box .p-name {
  font-size: 0.68rem; font-weight: 600; color: #333; line-height: 1.15;
  margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.3em;
}
.product-box .p-price { font-size: 0.72rem; font-weight: 700; color: var(--pos-success); }
.product-box .p-stock { font-size: 0.6rem; color: #999; }
/* Low stock indicator (visual only, NOT disabled) */
.product-box.low-stock { border-color: #ffc107; }
.product-box.low-stock .p-stock { color: var(--pos-danger); font-weight: 700; }

/* ── CART ── */
.pos-cart {
  flex: 0 0 45%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cart-header {
  background: var(--pos-primary);
  color: #fff;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.cart-header .item-count {
  background: rgba(255,255,255,0.2);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
}
.cart-body { flex: 1; overflow-y: auto; min-height: 0; }
.cart-table { width: 100%; margin: 0; border-collapse: collapse; }
.cart-table th {
  background: #f5f6f8;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px 4px;
  color: #666;
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid #ddd;
}
.cart-table td {
  padding: 3px 4px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  font-size: 0.73rem;
}
.cart-table .item-name { font-weight: 600; color: #333; font-size: 0.7rem; }
.cart-table .item-price { color: #888; font-size: 0.65rem; }
.cart-table .item-total { font-weight: 700; color: var(--pos-primary); }
.cart-table .qty-controls { display: flex; align-items: center; gap: 2px; }
.cart-table .qty-btn {
  width: 20px; height: 20px; border: none; border-radius: 3px;
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cart-table .qty-btn.minus { background: #ffe5e5; color: var(--pos-danger); }
.cart-table .qty-btn.plus { background: #e5f5e5; color: var(--pos-success); }
.cart-table .qty-val { width: 24px; text-align: center; font-weight: 700; font-size: 0.78rem; }
.cart-table .del-btn {
  width: 18px; height: 18px; border: none; border-radius: 3px;
  background: var(--pos-danger); color: #fff; font-size: 0.6rem; cursor: pointer;
}
.cart-table .item-staff-select {
  height: 22px; font-size: 0.65rem; padding: 0 2px;
  border-radius: 3px; border: 1px solid #ddd; max-width: 90px;
}
.cart-empty { text-align: center; padding: 20px 10px; color: #bbb; }
.cart-empty i { font-size: 28px; margin-bottom: 5px; display: block; }
.cart-empty div { font-size: 0.8rem; }

/* ── FOOTER ── */
.pos-footer {
  background: #fff;
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.footer-row { display: flex; gap: 8px; align-items: flex-start; }
.footer-left { flex: 1; }
.footer-right { flex: 0 0 320px; }

.totals-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.total-item { display: flex; align-items: center; gap: 4px; }
.total-item label {
  font-size: 0.65rem; font-weight: 600; color: #666;
  text-transform: uppercase; white-space: nowrap; margin: 0;
}
.total-item input {
  width: 70px; height: 28px; border-radius: 4px;
  text-align: right; font-size: 0.8rem; font-weight: 600; padding: 2px 6px;
}
.total-item.grand input {
  width: 90px; background: var(--pos-primary); color: #fff;
  font-weight: 700; border: none;
}

/* Bank Payments */
.pos-banks { background: #f8f9fa; border-radius: 4px; padding: 6px 8px; }
.banks-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.banks-header strong { font-size: 0.7rem; color: #555; }
.btn-add-bank { font-size: 0.7rem; padding: 2px 8px; }
.bank-rows { max-height: 60px; overflow-y: auto; }
.bank-row { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; }
.bank-row select { flex: 1; height: 26px; font-size: 0.75rem; padding: 0 6px; border-radius: 3px; }
.bank-row input { width: 80px; height: 26px; font-size: 0.75rem; text-align: right; padding: 0 6px; border-radius: 3px; }
.bank-row .btn-del-bank {
  width: 26px; height: 26px; border: none; border-radius: 3px;
  background: var(--pos-danger); color: #fff; font-size: 0.7rem; padding: 0;
}
.bank-total { text-align: right; font-size: 0.75rem; font-weight: 700; color: var(--pos-primary); margin-top: 2px; }

.pos-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.pos-actions .btn {
  height: 36px; min-width: 110px; font-size: 0.8rem; font-weight: 700; border-radius: 4px;
}
.btn-save-invoice { background: var(--pos-success); border-color: var(--pos-success); color: #fff; }
.btn-save-invoice:hover { background: #218838; }

/* Edit Modal */
.edit-modal .modal-dialog { max-width: 280px; }
.edit-modal .modal-header { background: var(--pos-primary); color: #fff; padding: 8px 12px; }
.edit-modal .modal-header .close { color: #fff; }
.edit-modal .modal-body { padding: 12px; }
.edit-modal .modal-footer { padding: 8px 12px; }
.edit-modal .form-control { height: 38px; font-size: 1rem; text-align: center; }
.edit-modal label { font-size: 0.75rem; margin-bottom: 2px; }

/* Loading */
.pos-loading {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.pos-loading.hidden { display: none; }
.pos-loading .spinner-border { width: 2.5rem; height: 2.5rem; }

/* Select2 no-results link */
.select2-results__option .add-cust-link {
  color: var(--pos-primary); font-weight: 600; text-decoration: none;
}
.select2-results__option .add-cust-link:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 1200px) {
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); }
  .footer-right { flex: 0 0 280px; }
}
@media (max-width: 992px) {
  .pos-container { height: auto; min-height: 100vh; overflow-y: auto; }
  .pos-main { flex-direction: column; }
  .pos-products, .pos-cart { flex: none; width: 100%; }
  .pos-products { height: 250px; }
  .pos-cart { height: 280px; }
  .footer-row { flex-direction: column; }
  .footer-right { flex: none; width: 100%; }
}

/* Pending Bookings Modal */
.pbk-item { padding: 10px 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; display: flex; align-items: flex-start; gap: 10px; }
.pbk-item:hover { background: #f0f7ff; }
.pbk-item.selected { background: #e8f4ff; border-left: 3px solid #01478f; }
.pbk-radio { margin-top: 3px; }
.pbk-info .pbk-title { font-weight: 600; font-size: 0.85rem; }
.pbk-info .pbk-detail { font-size: 0.75rem; color: #666; }
.pbk-info .pbk-services { font-size: 0.72rem; color: #555; }
.pbk-amount { text-align: right; min-width: 80px; }
.pbk-amount .amt { font-weight: 700; color: #01478f; }
.pbk-amount .adv { font-size: 0.72rem; color: #28a745; }
.pbk-amount .bal { font-size: 0.72rem; color: #dc3545; }


/* Booking Advance Info */
.booking-advance-info {
  display: none;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 5px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 0.78rem;
}
.booking-advance-info .bai-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.booking-advance-info .bai-row.final {
  border-top: 1px solid #81c784;
  margin-top: 4px;
  padding-top: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #1b5e20;
}
.booking-advance-info .bai-label { color: #555; }
.booking-advance-info .bai-value { font-weight: 600; }
.booking-advance-info .bai-advance { color: #28a745; }

</style>
{% endblock %}

{% block content %}

<!-- Loading Overlay -->
<div class="pos-loading hidden" id="loadingOverlay">
  <div class="spinner-border text-primary" role="status"></div>
</div>

<div class="pos-container">

  <!-- ═══ HEADER ═══ -->
  <div class="pos-header">
    <div class="row align-items-end">
      <div class="col-auto">
        <label>Type</label>
        <select id="bill_type" class="custom-select">
          <option value="cash">Cash</option>
          <option value="credit">Credit</option>
        </select>
      </div>
      <div class="col-auto">
        <label>Staff</label>
        <select id="global_staff" class="custom-select" style="min-width:130px;">
          <option value="0">-- Select Staff --</option>
          {% for s in staff_list %}
          <option value="{{ s.t_id }}">{{ s.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-auto">
        <label>Date</label>
        <input type="date" id="sale_date" class="form-control" value="{{ today }}" style="width:130px;">
      </div>
      <div class="col">
        <label>Remarks</label>
        <input type="text" id="remarks" class="form-control" placeholder="Remarks...">
      </div>
      <div class="col-auto">
        <a href="{% url 'sales:pos_list' %}" class="btn btn-outline-secondary btn-sm">
          <i class="fas fa-list"></i>
        </a>
        <a href="{% url 'sales:sales_list' %}" class="btn btn-outline-primary btn-sm">
          <i class="fas fa-home"></i>
        </a>
      </div>
    </div>
  </div>

  <!-- ═══ CUSTOMER ═══ -->
  <div class="pos-customer">
    <div class="row align-items-center">
      <div class="col-md-4 col-6">
        <input type="hidden" id="customer_id" value="0">
        <input type="hidden" id="booking_id" value="0">
        <!-- Cash mode: plain text input -->
        <div id="customerCashWrap">
          <input type="text" id="customer_name_cash" class="form-control" placeholder="Customer Name" value="Walk-in">
        </div>
        <!-- Credit mode: Select2 + Add button -->
        <div id="customerCreditWrap" style="display:none;">
          <div class="d-flex align-items-center" style="gap:4px;">
            <div style="flex:1;">
              <select id="customer_name_credit" class="form-control" style="width:100%;"></select>
            </div>
            <a href="{% url 'customers:customers_add' %}" target="_blank"
               class="btn btn-outline-primary btn-add-cust" title="Add New Customer">
              <i class="fas fa-plus"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-6">
        <input type="text" id="customer_phone" class="form-control" placeholder="Phone (Enter to search)">
      </div>
      <div class="col-md-5">
        <input type="text" id="customer_address" class="form-control" placeholder="Address">
      </div>
    </div>


    <!-- Pending Bookings Modal -->
    <div class="modal fade" id="pendingBookingsModal" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header" style="background:#01478f; color:#fff; padding:10px 15px;">
            <h6 class="modal-title mb-0"><i class="fas fa-calendar-check mr-1"></i>Pending Bookings</h6>
            <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body p-0" id="pendingBookingsBody" style="max-height:300px; overflow-y:auto;">
          </div>
          <div class="modal-footer py-2">
            <button class="btn btn-sm btn-secondary" data-dismiss="modal">Skip</button>
            <button class="btn btn-sm btn-success" id="btnLoadBooking" disabled>
              <i class="fas fa-arrow-right mr-1"></i>Load into Invoice
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- ═══ CATEGORIES BAR ═══ -->
  <div class="pos-categories" id="categoriesBar">
    <span class="text-muted" style="font-size:0.8rem;">Loading...</span>
  </div>

  <!-- ═══ MAIN: PRODUCTS + CART ═══ -->
  <div class="pos-main">

    <!-- Products Grid -->
    <div class="pos-products">
      <div class="products-grid" id="productsGrid">
        <div class="text-muted text-center p-3" style="font-size:0.8rem;">Select category</div>
      </div>
    </div>

    <!-- Cart -->
    <div class="pos-cart">
      <div class="cart-header">
        <span><i class="fas fa-shopping-cart mr-1"></i>Cart</span>
        <span class="item-count" id="cartItemCount">0</span>
      </div>
      <div class="cart-body">
        <table class="cart-table">
          <thead>
            <tr>
              <th>Item</th>
              <th style="width:95px;">Employee</th>
              <th style="width:72px;">Qty</th>
              <th style="width:50px;">Price</th>
              <th style="width:55px;">Total</th>
              <th style="width:22px;"></th>
            </tr>
          </thead>
          <tbody id="cartBody"></tbody>
        </table>
        <div class="cart-empty" id="cartEmpty">
          <i class="fas fa-shopping-basket"></i>
          <div>Empty</div>
        </div>
      </div>
    </div>

  </div>

  <!-- ═══ FOOTER ═══ -->
  <div class="pos-footer">
    <div class="footer-row">
      <div class="footer-left">

        <!-- Booking Advance Info -->
        <div class="booking-advance-info" id="bookingAdvanceInfo">
          <div class="bai-row">
            <span class="bai-label">Today's Bill:</span>
            <span class="bai-value" id="baiBillAmount">0</span>
          </div>
          <div class="bai-row">
            <span class="bai-label">Advance Received:</span>
            <span class="bai-value bai-advance" id="baiAdvance">0</span>
          </div>
          <div class="bai-row final">
            <span>Amount Due Now:</span>
            <span id="baiDueAmount">0</span>
          </div>
        </div>


        <div class="totals-inline">
          <div class="total-item">
            <label>Sub</label>
            <input type="text" id="sub_total" class="form-control" readonly>
          </div>
          <div class="total-item">
            <label>Disc</label>
            <input type="number" id="discount" class="form-control" value="0" min="0">
          </div>
          <div class="total-item">
            <label>Trans</label>
            <input type="number" id="transport" class="form-control" value="0" min="0">
          </div>
          <div class="total-item">
            <label>Other</label>
            <input type="number" id="others" class="form-control" value="0" min="0">
          </div>
          <div class="total-item">
            <label>Tax</label>
            <input type="number" id="tax" class="form-control" value="0" min="0">
          </div>
          <div class="total-item grand">
            <label>Total</label>
            <input type="text" id="grand_total" class="form-control" readonly>
          </div>
        </div>

        <div class="pos-actions">
          <button type="button" class="btn btn-save-invoice" id="btnSaveInvoice">
            <i class="fas fa-save mr-1"></i>Save
          </button>
          {% if is_edit_mode %}
          <button type="button" class="btn btn-danger" id="btnDeleteInvoice">
            <i class="fas fa-trash mr-1"></i>Delete
          </button>
          {% endif %}
        </div>
      </div>

      <div class="footer-right">
        <div class="pos-banks">
          <div class="banks-header">
            <strong><i class="fas fa-university mr-1"></i>Payments</strong>
            <button type="button" class="btn btn-sm btn-outline-primary btn-add-bank" id="btnAddBank">
              <i class="fas fa-plus"></i>
            </button>
          </div>
          <div class="bank-rows" id="bankPaymentsContainer"></div>
          <div class="bank-total">Received: <span id="totalReceived">0</span></div>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- Edit Item Modal -->
<div class="modal fade edit-modal" id="editItemModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title mb-0">Edit Item</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="edit_prod_id">
        <div class="form-group">
          <label>Quantity</label>
          <input type="number" id="edit_qty" class="form-control" min="1">
        </div>
        <div class="form-group mb-0">
          <label>Price</label>
          <input type="number" id="edit_price" class="form-control" min="0" step="0.01">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-sm btn-primary" id="btnSaveEdit">Save</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}


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

<script>
(function(){
  'use strict';

  // ═══════════════════════════════════════════════════════════════
  // CONFIG
  // ═══════════════════════════════════════════════════════════════

  const API = {
    categories:      "{% url 'sales:api_pos_categories' %}",
    products:        "{% url 'sales:api_pos_products' %}",
    customers:       "{% url 'sales:api_pos_customers' %}",
    save:            "{% url 'sales:api_pos_save' %}",
    customerSearch:  "{% url 'customers:get_customers' %}",
    customerByPhone: "{% url 'sales:api_pos_customer_by_phone' %}",
    addCustomer:     "{% url 'customers:customers_add' %}",
    {% if is_edit_mode %}
    getInvoice:      "{% url 'sales:api_pos_get_invoice' invoice_no %}",
    deleteInvoice:   "{% url 'sales:api_pos_delete' invoice_no %}",
    {% endif %}
  };

  const isEditMode    = {{ is_edit_mode|yesno:"true,false" }};
  const editInvoiceNo = {{ invoice_no|default:0 }};

  const bankAccounts = [
    {% for b in bank_accounts %}
    { id: {{ b.t_id }}, name: "{{ b.name|escapejs }}" },
    {% endfor %}
  ];

  const staffList = [
    {% for s in staff_list %}
    { id: {{ s.t_id }}, name: "{{ s.name|escapejs }}" },
    {% endfor %}
  ];

  let cart = {};           // { prod_id: { id, prod_id, code, name, qty, price, total, staff_id } }
  let select2Initialized = false;

  function showLoading() { $('#loadingOverlay').removeClass('hidden'); }
  function hideLoading()  { $('#loadingOverlay').addClass('hidden'); }
  function fmt(n) { return Number(n || 0).toLocaleString(undefined, {minimumFractionDigits:0, maximumFractionDigits:0}); }
  function csrfToken() { return '{{ csrf_token }}'; }

  // Staff <option> builder
  function staffOpts(selectedId) {
    let h = '<option value="0">--</option>';
    staffList.forEach(s => { h += `<option value="${s.id}" ${s.id == selectedId ? 'selected' : ''}>${s.name}</option>`; });
    return h;
  }

  // Current global staff
  function currentStaffId() { return +$('#global_staff').val() || 0; }


  // ═══════════════════════════════════════════════════════════════
  // BILL TYPE → CUSTOMER WIDGET TOGGLE
  // ═══════════════════════════════════════════════════════════════

  function initCreditCustomer() {
    if (select2Initialized) return;
    $('#customer_name_credit').select2({
      theme: 'bootstrap4',
      ajax: {
        url: API.customerSearch,
        type: 'POST',
        dataType: 'json',
        delay: 300,
        headers: { 'X-CSRFToken': csrfToken() },
        data: function(params) { return { term: params.term || '' }; },
        processResults: function(data) {
          return {
            results: data.map(function(c){
              return { id: c.id, text: c.text, phone: c.phone, address: c.address, balance: c.balance };
            })
          };
        },
        cache: true
      },
      minimumInputLength: 1,
      placeholder: 'Search customer...',
      allowClear: true,
      language: {
        noResults: function() {
          return '<a class="add-cust-link" href="' + API.addCustomer + '" target="_blank"><i class="fas fa-plus"></i> Add New Customer</a>';
        }
      },
      escapeMarkup: function(m) { return m; }
    });

    // When a customer is selected
    $('#customer_name_credit').on('select2:select', function(e) {
      var d = e.params.data;
      $('#customer_id').val(d.id);
      $('#customer_phone').val(d.phone || '');
      $('#customer_address').val(d.address || '');
    });
    // When cleared
    $('#customer_name_credit').on('select2:clear', function() {
      $('#customer_id').val(0);
      $('#customer_phone').val('');
      $('#customer_address').val('');
    });

    select2Initialized = true;
  }

  function destroyCreditCustomer() {
    if (!select2Initialized) return;
    $('#customer_name_credit').select2('destroy');
    $('#customer_name_credit').empty();
    select2Initialized = false;
  }

  function toggleCustomerMode() {
    if ($('#bill_type').val() === 'credit') {
      $('#customerCashWrap').hide();
      $('#customerCreditWrap').show();
      initCreditCustomer();
    } else {
      $('#customerCreditWrap').hide();
      $('#customerCashWrap').show();
      destroyCreditCustomer();
      $('#customer_id').val(0);
      $('#customer_phone').val('');
      $('#customer_address').val('');
    }
  }

  $('#bill_type').on('change', toggleCustomerMode);


  // ═══════════════════════════════════════════════════════════════
  // PHONE SEARCH (Enter key)
  // ═══════════════════════════════════════════════════════════════

  $('#customer_phone').on('keypress', function(e) {
    if (e.which !== 13) return;
    e.preventDefault();
    var phone = $(this).val().trim();
    if (!phone) return;

    $.getJSON(API.customerByPhone, { phone: phone }).done(function(resp) {
      if (resp.ok && resp.customer) {
        var c = resp.customer;
        $('#customer_id').val(c.id);
        $('#customer_address').val(c.address || '');
        $('#customer_phone').val(c.phone || '');

        // If credit mode, set Select2 value
        if ($('#bill_type').val() === 'credit') {
          var opt = new Option(c.name, c.id, true, true);
          $('#customer_name_credit').append(opt).trigger('change');
        } else {
          $('#customer_name_cash').val(c.name);
        }

        checkPendingBookings(phone);
      } else {
        Swal.fire('Not Found', 'No customer found with this number.', 'info');
      }


    });
  });


  // ═══ BOOKING ADVANCE TRACKING ═══
  var loadedBookingAdvance = 0;

  function updateBookingAdvanceInfo() {
    if (loadedBookingAdvance <= 0) {
      $('#bookingAdvanceInfo').hide();
      return;
    }
    var grand = +$('#grand_total').val().replace(/,/g, '') || 0;
    var due = grand - loadedBookingAdvance;
    if (due < 0) due = 0;
    $('#baiBillAmount').text('Rs. ' + fmt(grand));
    $('#baiAdvance').text('- Rs. ' + fmt(loadedBookingAdvance));
    $('#baiDueAmount').text('Rs. ' + fmt(due));
    $('#bookingAdvanceInfo').show();
  }


  // ═══ BOOKING INTEGRATION ═══
  var pendingBookings = [];
 
  function checkPendingBookings(phone) {
    if (!phone || phone.length < 4) return;
    $.getJSON("{% url 'sales:api_booking_pending' %}", {phone: phone}).done(function(resp) {
      if (resp.ok && resp.bookings && resp.bookings.length) {
        pendingBookings = resp.bookings;
        renderPendingBookings(resp.bookings);
        $('#pendingBookingsModal').modal('show');
      }
    });
  }
 
  function renderPendingBookings(bookings) {
    var html = '';
    bookings.forEach(function(bk, i) {
      var svcs = bk.services.map(function(s) { return s.name; }).join(', ');
      html += '<div class="pbk-item" data-idx="'+i+'">'
            + '<input type="radio" name="sel_booking" class="pbk-radio" value="'+i+'">'
            + '<div class="pbk-info">'
            + '<div class="pbk-title">#B-'+bk.booking_id+' | '+bk.booking_date+' '+bk.booking_time+'</div>'
            + '<div class="pbk-detail">Staff: '+bk.staff_name+' | '+bk.status+'</div>'
            + '<div class="pbk-services">'+svcs+'</div>'
            + '</div>'
            + '<div class="pbk-amount">'
            + '<div class="amt">Rs.'+fmt(bk.total_amount)+'</div>'
            + (bk.advance_amount > 0 ? '<div class="adv">Advance: '+fmt(bk.advance_amount)+'</div>' : '')
            + '<div class="bal">Balance: '+fmt(bk.customer_balance)+'</div>'
            + '</div>'
            + '</div>';
    });
    $('#pendingBookingsBody').html(html);
    $('#btnLoadBooking').prop('disabled', true);
  }
 
  $(document).on('click', '.pbk-item', function() {
    $('.pbk-item').removeClass('selected');
    $(this).addClass('selected').find('.pbk-radio').prop('checked', true);
    $('#btnLoadBooking').prop('disabled', false);
  });
 
  $('#btnLoadBooking').on('click', function() {
    var idx = +$('input[name=sel_booking]:checked').val();
    var bk = pendingBookings[idx];
    if (!bk) return;
 
    // Set booking reference
    $('#booking_id').val(bk.booking_id);
    $('#customer_id').val(bk.customer_t_id);
 
    // Customer info
    if (bk.customer_t_id > 0) {
      $('#bill_type').val('credit').trigger('change');
      setTimeout(function() {
        var opt = new Option(bk.customer_name, bk.customer_t_id, true, true);
        $('#customer_name_credit').append(opt).trigger('change');
      }, 300);
    } else {
      $('#customer_name_cash').val(bk.customer_name);
    }
    $('#customer_phone').val(bk.customer_phone);
    $('#customer_address').val(bk.customer_address || '');
 
    // Load services into cart
    cart = {};
    bk.services.forEach(function(svc) {
      cart[svc.prod_id] = {
        id: 0,
        prod_id: svc.prod_id,
        code: '',
        name: svc.name,
        qty: svc.qty || 1,
        price: svc.price || 0,
        total: (svc.qty || 1) * (svc.price || 0),
        staff_id: bk.staff_t_id
      };
    });
    renderCart();
    recalcTotals();
 
    // Set staff
    $('#global_staff').val(bk.staff_t_id);
 
    // Track advance for display
    loadedBookingAdvance = bk.advance_amount || 0;

    // No advance in bank payments — balance already reflects it.
    // Add empty row for today's payment.
    $('#bankPaymentsContainer').empty();
    addBankRow();
    recalcBankTotal();

    // Show advance info
    updateBookingAdvanceInfo();
 
    // Remarks
    $('#remarks').val('Booking #B-' + bk.booking_id);
 
    $('#pendingBookingsModal').modal('hide');
  });
 
  // ═══ MODIFY PHONE SEARCH: also check bookings ═══
  // In existing phone search handler, after customer data loads, add:
  //   checkPendingBookings(phone);
 
  // ═══ BOOKING FROM URL PARAMS ═══
  var bookingQueryPhone = '{{ booking_query_phone|default:"" }}';
  if (bookingQueryPhone) {
    setTimeout(function() {
      $('#customer_phone').val(bookingQueryPhone);
      checkPendingBookings(bookingQueryPhone);
    }, 500);
  }


  // ═══════════════════════════════════════════════════════════════
  // CATEGORIES
  // ═══════════════════════════════════════════════════════════════

  function loadCategories() {
    $.getJSON(API.categories).done(function(resp) {
      if (!resp.ok) return;
      var html = '<button class="cat-btn active" data-id="0">All</button>';
      resp.categories.forEach(function(c) { html += '<button class="cat-btn" data-id="'+c.id+'">'+c.name+'</button>'; });
      $('#categoriesBar').html(html);
      loadProducts(0);
    });
  }

  $(document).on('click', '.cat-btn', function() {
    $('.cat-btn').removeClass('active');
    $(this).addClass('active');
    loadProducts($(this).data('id'));
  });


  // ═══════════════════════════════════════════════════════════════
  // PRODUCTS
  // ═══════════════════════════════════════════════════════════════

  function loadProducts(categoryId) {
    var url = API.products + (categoryId ? '?category_id=' + categoryId : '');
    $('#productsGrid').html('<div class="text-center p-3"><i class="fas fa-spinner fa-spin"></i></div>');

    $.getJSON(url).done(function(resp) {
      if (!resp.ok || !resp.products.length) {
        $('#productsGrid').html('<div class="text-muted text-center p-3" style="font-size:0.8rem;">No products</div>');
        return;
      }
      var html = '';
      resp.products.forEach(function(p) {
        // Low stock visual (only for stock-managed items with zero or less)
        var cls = (!p.no_stock_manage && p.stock <= 0) ? 'low-stock' : '';
        var stockLabel = p.no_stock_manage ? '' : '<div class="p-stock">Stock: '+Math.floor(p.stock)+'</div>';
        html += '<div class="product-box '+cls+'" data-product=\''+JSON.stringify(p)+'\'>'
              + '<div class="p-icon"><i class="fas fa-box"></i></div>'
              + '<div class="p-name">'+p.name+'</div>'
              + '<div class="p-price">'+fmt(p.price)+'</div>'
              + stockLabel
              + '</div>';
      });
      $('#productsGrid').html(html);
    });
  }


  // ═══════════════════════════════════════════════════════════════
  // ADD TO CART (with stock check)
  // ═══════════════════════════════════════════════════════════════

  $(document).on('click', '.product-box', function() {
    var product = $(this).data('product');

    // no_stock_manage → always allow
    if (product.no_stock_manage) {
      addToCart(product);
      return;
    }

    // Check available stock
    var inCart = cart[product.prod_id] ? cart[product.prod_id].qty : 0;
    var avail  = product.stock - inCart;

    if (avail <= 0) {
      Swal.fire({
        title: 'Out of Stock',
        html: '<b>' + product.name + '</b> has <b>' + Math.floor(product.stock) + '</b> in stock'
            + (inCart ? ' (' + inCart + ' already in cart).' : '.') + '<br>Add anyway?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, Add',
        cancelButtonText: 'No',
        confirmButtonColor: '#01478f'
      }).then(function(result) {
        if (result.isConfirmed) addToCart(product);
      });
    } else {
      addToCart(product);
    }
  });


  // ═══════════════════════════════════════════════════════════════
  // CART LOGIC
  // ═══════════════════════════════════════════════════════════════

  function addToCart(product) {
    var pid = product.prod_id;
    if (cart[pid]) {
      cart[pid].qty += 1;
      cart[pid].total = cart[pid].qty * cart[pid].price;
    } else {
      cart[pid] = {
        id:       product.id,
        prod_id:  pid,
        code:     product.code,
        name:     product.name,
        qty:      1,
        price:    product.price,
        total:    product.price,
        staff_id: currentStaffId()    // default from global dropdown
      };
    }
    renderCart();
    recalcTotals();
  }

  function updateCartQty(pid, delta) {
    if (!cart[pid]) return;
    cart[pid].qty += delta;
    if (cart[pid].qty <= 0) { delete cart[pid]; }
    else { cart[pid].total = cart[pid].qty * cart[pid].price; }
    renderCart();
    recalcTotals();
  }

  function removeFromCart(pid) {
    delete cart[pid];
    renderCart();
    recalcTotals();
  }

  function renderCart() {
    var items = Object.values(cart);
    if (!items.length) {
      $('#cartBody').html('');
      $('#cartEmpty').show();
      $('#cartItemCount').text('0');
      return;
    }
    $('#cartEmpty').hide();
    var html = '', count = 0;
    items.forEach(function(item) {
      count += item.qty;
      html += '<tr data-prod-id="'+item.prod_id+'">'
            + '<td>'
            +   '<div class="item-name">'+item.name+'</div>'
            +   '<div class="item-price">'+fmt(item.price)+'</div>'
            + '</td>'
            + '<td>'
            +   '<select class="item-staff-select" data-prod-id="'+item.prod_id+'">'
            +     staffOpts(item.staff_id)
            +   '</select>'
            + '</td>'
            + '<td>'
            +   '<div class="qty-controls">'
            +     '<button class="qty-btn minus" onclick="posUpdateQty('+item.prod_id+',-1)">\u2212</button>'
            +     '<span class="qty-val">'+item.qty+'</span>'
            +     '<button class="qty-btn plus" onclick="posUpdateQty('+item.prod_id+',1)">+</button>'
            +   '</div>'
            + '</td>'
            + '<td>'+fmt(item.price)+'</td>'
            + '<td class="item-total">'+fmt(item.total)+'</td>'
            + '<td><button class="del-btn" onclick="posRemoveItem('+item.prod_id+')"><i class="fas fa-times"></i></button></td>'
            + '</tr>';
    });
    $('#cartBody').html(html);
    $('#cartItemCount').text(count);
  }

  // Update cart staff when per-item dropdown changes
  $(document).on('change', '.item-staff-select', function() {
    var pid = $(this).data('prod-id');
    if (cart[pid]) cart[pid].staff_id = +$(this).val() || 0;
  });

  window.posUpdateQty  = updateCartQty;
  window.posRemoveItem = removeFromCart;

  // Double-click to edit item
  $(document).on('dblclick', '#cartBody tr', function() {
    var pid = $(this).data('prod-id'), item = cart[pid];
    if (!item) return;
    $('#edit_prod_id').val(pid);
    $('#edit_qty').val(item.qty);
    $('#edit_price').val(item.price);
    $('#editItemModal').modal('show');
    setTimeout(function(){ $('#edit_qty').focus().select(); }, 200);
  });

  $('#btnSaveEdit').on('click', function() {
    var pid = +$('#edit_prod_id').val(),
        qty = +$('#edit_qty').val() || 1,
        price = +$('#edit_price').val() || 0;
    if (cart[pid]) {
      cart[pid].qty   = Math.max(1, qty);
      cart[pid].price = price;
      cart[pid].total = cart[pid].qty * cart[pid].price;
      renderCart();
      recalcTotals();
    }
    $('#editItemModal').modal('hide');
  });


  // ═══════════════════════════════════════════════════════════════
  // TOTALS
  // ═══════════════════════════════════════════════════════════════

  function recalcTotals() {
    var sub = 0;
    Object.values(cart).forEach(function(item) { sub += item.total; });
    var disc  = +$('#discount').val()  || 0,
        trans = +$('#transport').val() || 0,
        oth   = +$('#others').val()    || 0,
        tax_v = +$('#tax').val()       || 0;
    var grand = sub - disc + trans + oth + tax_v;
    $('#sub_total').val(fmt(sub));
    $('#grand_total').val(fmt(grand));
    recalcBankTotal();
    updateBookingAdvanceInfo();
  }

  $('#discount, #transport, #others, #tax').on('input change', recalcTotals);


  // ═══════════════════════════════════════════════════════════════
  // BANK PAYMENTS
  // ═══════════════════════════════════════════════════════════════

  function bankOptions() {
    var opts = '<option value="">-- Bank --</option>';
    bankAccounts.forEach(function(b) { opts += '<option value="'+b.id+'">'+b.name+'</option>'; });
    return opts;
  }

  function addBankRow(bankId, amount) {
    var html = '<div class="bank-row">'
             + '<select class="form-control bank-select">'+bankOptions()+'</select>'
             + '<input type="number" class="form-control bank-amount" placeholder="Amt" value="'+(amount||'')+'" min="0">'
             + '<button type="button" class="btn-del-bank" onclick="$(this).closest(\'.bank-row\').remove();recalcBankTotal();"><i class="fas fa-times"></i></button>'
             + '</div>';
    $('#bankPaymentsContainer').append(html);
    if (bankId) $('#bankPaymentsContainer .bank-row:last .bank-select').val(bankId);
  }

  $('#btnAddBank').on('click', function() { addBankRow(); });
  $(document).on('input change', '.bank-amount', recalcBankTotal);

  function recalcBankTotal() {
    var total = 0;
    $('.bank-amount').each(function() { total += +$(this).val() || 0; });
    $('#totalReceived').text(fmt(total));
  }

  function collectBankPayments() {
    var pays = [];
    $('.bank-row').each(function() {
      var bid = +$(this).find('.bank-select').val() || 0,
          amt = +$(this).find('.bank-amount').val() || 0;
      if (bid && amt > 0) pays.push({ bank_id: bid, amount: amt });
    });
    return pays;
  }


  // ═══════════════════════════════════════════════════════════════
  // SAVE
  // ═══════════════════════════════════════════════════════════════

  $('#btnSaveInvoice').on('click', function() {
    var items = Object.values(cart);
    if (!items.length) { Swal.fire('Error', 'Cart is empty', 'error'); return; }

    // Determine customer name
    var custName = 'Walk-in';
    if ($('#bill_type').val() === 'credit') {
      var sel = $('#customer_name_credit').select2('data');
      custName = (sel && sel.length) ? sel[0].text : 'Walk-in';
    } else {
      custName = $('#customer_name_cash').val() || 'Walk-in';
    }

    var payload = {
      invoice_no:       isEditMode ? editInvoiceNo : null,
      bill_type:        $('#bill_type').val(),
      customer_id:      +$('#customer_id').val() || 0,
      customer_name:    custName,
      customer_phone:   $('#customer_phone').val() || '',
      customer_address: $('#customer_address').val() || '',
      sale_date:        $('#sale_date').val(),
      items:            items,
      sub_total:        +$('#sub_total').val().replace(/,/g, '') || 0,
      discount:         +$('#discount').val()   || 0,
      transport:        +$('#transport').val()  || 0,
      others:           +$('#others').val()     || 0,
      tax:              +$('#tax').val()        || 0,
      grand_total:      +$('#grand_total').val().replace(/,/g, '') || 0,
      remarks:          $('#remarks').val() || '',
      booking_id:      +$('#booking_id').val() || 0,
      bank_payments:    collectBankPayments()
    };

    showLoading();
    $.ajax({
      url: API.save,
      type: 'POST',
      contentType: 'application/json',
      headers: { 'X-CSRFToken': csrfToken() },
      data: JSON.stringify(payload),
      success: function(resp) {
        hideLoading();
        if (resp.ok) {
          Swal.fire({ icon:'success', title:'Saved!', text:resp.message, timer:1500, showConfirmButton:false })
          .then(function() {
            if (isEditMode) window.location.href = "{% url 'sales:pos_list' %}";
            else resetForm();
          });
        } else {
          Swal.fire('Error', resp.error || 'Failed', 'error');
        }
      },
      error: function(xhr) {
        hideLoading();
        Swal.fire('Error', (xhr.responseJSON && xhr.responseJSON.error) || 'Server error', 'error');
      }
    });
  });

  function resetForm() {
    cart = {};
    renderCart();
    recalcTotals();
    $('#customer_id').val(0);
    $('#customer_name_cash').val('Walk-in');
    $('#customer_phone, #customer_address, #remarks').val('');
    $('#discount, #transport, #others, #tax').val(0);
    $('#bankPaymentsContainer').empty();
    addBankRow();

    // Inside resetForm(), add:
    loadedBookingAdvance = 0;
    updateBookingAdvanceInfo();


    if ($('#bill_type').val() === 'credit' && select2Initialized) {
      $('#customer_name_credit').val(null).trigger('change');
    }
  }


  // ═══════════════════════════════════════════════════════════════
  // DELETE
  // ═══════════════════════════════════════════════════════════════

  {% if is_edit_mode %}
  $('#btnDeleteInvoice').on('click', function() {
    Swal.fire({
      title: 'Delete Invoice?',
      text: 'This will delete invoice #{{ invoice_no }}',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#dc3545',
      confirmButtonText: 'Delete'
    }).then(function(result) {
      if (!result.isConfirmed) return;
      showLoading();
      $.ajax({
        url: API.deleteInvoice,
        type: 'POST',
        headers: { 'X-CSRFToken': csrfToken() },
        success: function(resp) {
          hideLoading();
          if (resp.ok) {
            Swal.fire({ icon:'success', title:'Deleted!', timer:1500, showConfirmButton:false })
            .then(function() { window.location.href = "{% url 'sales:pos_list' %}"; });
          } else {
            Swal.fire('Error', resp.error || 'Failed', 'error');
          }
        },
        error: function() { hideLoading(); Swal.fire('Error', 'Server error', 'error'); }
      });
    });
  });
  {% endif %}


  // ═══════════════════════════════════════════════════════════════
  // LOAD INVOICE (EDIT MODE)
  // ═══════════════════════════════════════════════════════════════

  function loadInvoice() {
    if (!isEditMode) return;
    showLoading();
    $.getJSON(API.getInvoice).done(function(resp) {
      hideLoading();
      if (!resp.ok) { Swal.fire('Error', resp.error || 'Not found', 'error'); return; }

      var inv = resp.invoice;

      // Set bill type first (triggers customer toggle)
      $('#bill_type').val(inv.bill_type).trigger('change');
      $('#sale_date').val(inv.sale_date);
      $('#remarks').val(inv.remarks);
      $('#customer_id').val(inv.customer_id);
      $('#customer_phone').val(inv.customer_phone);
      $('#customer_address').val(inv.customer_address);

      if (inv.bill_type === 'credit' && inv.customer_id) {
        // Wait for Select2 to init, then set value
        setTimeout(function() {
          var opt = new Option(inv.customer_name, inv.customer_id, true, true);
          $('#customer_name_credit').append(opt).trigger('change');
        }, 300);
      } else {
        $('#customer_name_cash').val(inv.customer_name || 'Walk-in');
      }

      // Build cart from items
      cart = {};
      inv.items.forEach(function(item) {
        cart[item.prod_id] = {
          id:       item.id,
          prod_id:  item.prod_id,
          code:     item.code,
          name:     item.name,
          qty:      item.qty,
          price:    item.price,
          total:    item.total,
          staff_id: item.staff_id || 0
        };
      });
      renderCart();

      // Set the first item's staff as global (optional UX convenience)
      if (inv.items.length && inv.items[0].staff_id) {
        $('#global_staff').val(inv.items[0].staff_id);
      }

      $('#discount').val(inv.discount);
      $('#transport').val(inv.transport);
      $('#others').val(inv.others);
      $('#tax').val(inv.tax);
      recalcTotals();

      $('#bankPaymentsContainer').empty();
      if (inv.bank_payments && inv.bank_payments.length) {
        inv.bank_payments.forEach(function(bp) { addBankRow(bp.bank_id, bp.amount); });
      } else {
        addBankRow();
      }
      recalcBankTotal();

    }).fail(function() { hideLoading(); Swal.fire('Error', 'Failed to load', 'error'); });
  }


  // ═══════════════════════════════════════════════════════════════
  // INIT
  // ═══════════════════════════════════════════════════════════════

  $(function() {
    loadCategories();
    toggleCustomerMode();   // set initial mode
    if (isEditMode) {
      loadInvoice();
    } else {
      addBankRow();
      recalcTotals();
    }
  });

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