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

{% block title %}Delivery{% endblock %}

{% block stylesheets %}
<style>
  .dlv-wrap { max-width: 1000px; margin: 0 auto; }

  /* Centered invoice search box */
  .dlv-search-box { max-width: 460px; margin: 24px auto 18px; text-align: center; }
  .dlv-search-box label { font-weight: 600; color: #334155; margin-bottom: 8px; display: block; font-size: .95rem; }
  #dlv_invoice {
    font-size: 1.6rem; text-align: center; letter-spacing: 1px; height: 58px;
    border: 2px solid #2563eb; border-radius: 10px; font-weight: 700; color: #1e3a8a;
  }
  #dlv_invoice:focus { box-shadow: 0 0 0 .2rem rgba(37,99,235,.2); }
  .dlv-hint { font-size: .78rem; color: #64748b; margin-top: 6px; }

  /* Header card */
  .dlv-header-card {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 12px 16px; margin-bottom: 12px; display: none;
  }
  .dlv-header-card .cust-name { font-size: 1.15rem; font-weight: 700; color: #0f172a; }
  .dlv-meta { font-size: .82rem; color: #475569; }
  .dlv-total-badge { font-size: 1.25rem; font-weight: 800; color: #065f46; background: #d1fae5; border-radius: 8px; padding: 6px 14px; }

  /* Items table */
  #dlv_items_wrap { display: none; }
  #dlv_table th { font-size: .78rem; background: #f1f5f9; white-space: nowrap; }
  #dlv_table td { font-size: .9rem; vertical-align: middle; }
  #dlv_table tr.dlv-row { cursor: pointer; }
  #dlv_table tr.dlv-active { background: #dbeafe !important; }
  #dlv_table tr.dlv-done { background: #f0fdf4; color: #166534; }
  #dlv_table tr.dlv-done td { opacity: .85; }
  .urdu-name { font-size: .9rem; color:#475569; direction: rtl; }
  .badge-pending   { background:#fef3c7; color:#92400e; }
  .badge-partial   { background:#fed7aa; color:#9a3412; }
  .badge-delivered { background:#bbf7d0; color:#166534; }
  .dlv-chk { transform: scale(1.4); cursor: pointer; }
  .dlv-chk:focus { outline: 3px solid #2563eb; outline-offset: 2px; }

  /* Footer actions */
  .dlv-actions { display:none; gap:10px; margin-top:10px; }
  .dlv-keys {
    font-size: .72rem; color:#64748b; margin-top:8px;
    background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px; padding:6px 10px;
  }
  .dlv-keys kbd { background:#1e293b; color:#fff; border-radius:4px; padding:1px 6px; font-size:.7rem; }
  #dlv_toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    z-index: 1080; min-width: 240px; text-align:center; display:none;
  }
  #dlv_empty_msg { display:none; }
</style>
{% endblock %}

{% block content %}
<div class="dlv-wrap mt-3">

  <div id="dlv_toast" class="alert alert-success py-2 px-3 shadow-sm"></div>

  <div class="d-flex justify-content-between align-items-center mb-1">
    <h5 class="mb-0">📦 Delivery</h5>
    <a href="{% url 'sales:delivery_bill_report' %}" class="btn btn-outline-secondary btn-sm">Delivery Report</a>
  </div>

  <!-- Centered invoice search -->
  <div class="dlv-search-box">
    <label for="dlv_invoice">Invoice Number</label>
    <input type="text" id="dlv_invoice" class="form-control" autocomplete="off" placeholder="0000">
    <div class="dlv-hint">Type the invoice number and press <kbd>Enter</kbd></div>
  </div>

  <div id="dlv_empty_msg" class="alert alert-warning py-2 text-center"></div>

  <!-- Header card -->
  <div class="dlv-header-card" id="dlv_header">
    <div class="d-flex justify-content-between align-items-center flex-wrap">
      <div>
        <div class="cust-name" id="dlv_cust">—</div>
        <div class="dlv-meta">Invoice <b id="dlv_inv_no">—</b> &nbsp;•&nbsp; Date <b id="dlv_date">—</b></div>
      </div>
      <div class="text-right">
        <div class="dlv-meta">Bill Total</div>
        <span class="dlv-total-badge" id="dlv_total">0</span>
      </div>
    </div>
  </div>

  <!-- Items -->
  <div id="dlv_items_wrap">
    <div class="table-responsive">
      <table class="table table-bordered table-hover table-sm mb-0" id="dlv_table">
        <thead>
          <tr>
            <th style="width:42px;">✓</th>
            <th style="width:40px;">#</th>
            <th>Code</th>
            <th>Item</th>
            <th class="text-right">Ordered<br><small>(ctn.pcs)</small></th>
            <th class="text-right">Delivered</th>
            <th class="text-right">Remaining</th>
            <th class="text-center">Status</th>
          </tr>
        </thead>
        <tbody id="dlv_tbody"></tbody>
      </table>
    </div>

    <div class="dlv-actions d-flex" id="dlv_actions">
      <button type="button" class="btn btn-success btn-sm" id="btn_deliver_selected">Deliver Selected <kbd>Enter</kbd></button>
      <button type="button" class="btn btn-primary btn-sm" id="btn_deliver_all">Deliver All <kbd>Ctrl+Enter</kbd></button>
      <button type="button" class="btn btn-light btn-sm border" id="btn_new_invoice">New Invoice <kbd>Esc</kbd></button>
    </div>

    <div class="dlv-keys">
      <kbd>↑</kbd><kbd>↓</kbd> move &nbsp;•&nbsp;
      <kbd>Space</kbd> select &nbsp;•&nbsp;
      <kbd>A</kbd> select all &nbsp;•&nbsp;
      <kbd>Enter</kbd> deliver selected &nbsp;•&nbsp;
      <kbd>Ctrl+Enter</kbd> deliver all &nbsp;•&nbsp;
      <kbd>Esc</kbd> new invoice
    </div>
  </div>

</div>
{% endblock %}

{% block javascripts %}
<script>
(function () {
  "use strict";

  var SENTINEL = "999999999";
  var LOOKUP_TPL = "{% url 'sales:delivery_lookup' 999999999 %}";
  var MARK_TPL   = "{% url 'sales:delivery_mark'   999999999 %}";
  var CSRF = "{{ csrf_token }}";

  function lookupUrl(inv){ return LOOKUP_TPL.replace(SENTINEL, String(inv)); }
  function markUrl(inv){ return MARK_TPL.replace(SENTINEL, String(inv)); }

  var elInv     = document.getElementById('dlv_invoice');
  var elHeader  = document.getElementById('dlv_header');
  var elCust    = document.getElementById('dlv_cust');
  var elInvNo   = document.getElementById('dlv_inv_no');
  var elDate    = document.getElementById('dlv_date');
  var elTotal   = document.getElementById('dlv_total');
  var elWrap    = document.getElementById('dlv_items_wrap');
  var elTbody   = document.getElementById('dlv_tbody');
  var elActions = document.getElementById('dlv_actions');
  var elEmpty   = document.getElementById('dlv_empty_msg');
  var elToast   = document.getElementById('dlv_toast');

  var currentInvoice = null;
  var rows = [];            // all rows: {product_code, deliverable, tr, chk}
  var deliverableChks = []; // focusable checkboxes, in order

  function fmt(n){
    n = parseFloat(n || 0);
    return n.toLocaleString('en-US', {maximumFractionDigits: 2});
  }
  // Smart invoice parse: first run of digits  ->  "S-142" => "142"
  function extractDigits(s){ var m = String(s || '').match(/\d+/); return m ? m[0] : ''; }

  function toast(msg, ok){
    elToast.className = 'alert py-2 px-3 shadow-sm ' + (ok === false ? 'alert-danger' : 'alert-success');
    elToast.textContent = msg;
    elToast.style.display = 'block';
    clearTimeout(elToast._t);
    elToast._t = setTimeout(function(){ elToast.style.display = 'none'; }, 2200);
  }

  function resetView(){
    currentInvoice = null;
    rows = [];
    deliverableChks = [];
    elHeader.style.display = 'none';
    elWrap.style.display = 'none';
    elActions.style.display = 'none';
    elEmpty.style.display = 'none';
    elTbody.innerHTML = '';
    elInv.value = '';
    elInv.focus();
  }

  function badge(status){
    if (status === 'delivered') return '<span class="badge badge-delivered">Delivered</span>';
    if (status === 'partial')   return '<span class="badge badge-partial">Partial</span>';
    return '<span class="badge badge-pending">Pending</span>';
  }

  function highlightRowOf(chk){
    rows.forEach(function(r){ r.tr.classList.remove('dlv-active'); });
    var tr = chk.closest('tr');
    if (tr) { tr.classList.add('dlv-active'); tr.scrollIntoView({block:'nearest'}); }
  }

  function render(data){
    elEmpty.style.display = 'none';
    var h = data.header;
    currentInvoice = h.invoice_no;
    elCust.textContent  = h.customer_name || 'Cash Customer';
    elInvNo.textContent = h.invoice_no;
    elDate.textContent  = h.sale_date || '—';
    elTotal.textContent = fmt(h.total_amount);
    elHeader.style.display = 'block';

    elTbody.innerHTML = '';
    rows = [];
    deliverableChks = [];
    var n = 0;

    data.items.forEach(function(it){
      var deliverable = (it.status !== 'delivered');
      var tr = document.createElement('tr');
      tr.className = 'dlv-row' + (deliverable ? '' : ' dlv-done');

      var urdu = it.urdu_name ? '<div class="urdu-name">' + it.urdu_name + '</div>' : '';

      tr.innerHTML =
        '<td class="text-center">' +
          (deliverable ? '<input type="checkbox" class="dlv-chk" tabindex="0">' : '✔') +
        '</td>' +
        '<td>' + (n + 1) + '</td>' +
        '<td>' + (it.code || '') + '</td>' +
        '<td>' + (it.name || '') + urdu + '</td>' +
        '<td class="text-right">' + (it.ordered_disp || '0') + '</td>' +
        '<td class="text-right">' + (it.delivered_disp || '0') + '</td>' +
        '<td class="text-right">' + (it.remaining_disp || '0') + '</td>' +
        '<td class="text-center">' + badge(it.status) + '</td>';
      elTbody.appendChild(tr);

      var chk = tr.querySelector('.dlv-chk');
      var rowObj = { product_code: it.product_code, deliverable: deliverable, tr: tr, chk: chk };
      rows.push(rowObj);

      if (deliverable && chk) {
        deliverableChks.push(chk);
        chk.addEventListener('focus', function(){ highlightRowOf(chk); });
        tr.addEventListener('click', function(e){
          if (e.target !== chk) chk.checked = !chk.checked;
          chk.focus();
        });
      }
      n++;
    });

    elWrap.style.display = 'block';
    elActions.style.display = 'flex';

    // Focus moves DOWN into the table -> first row's select checkbox
    if (deliverableChks.length) { deliverableChks[0].focus(); }

    if (h.all_delivered) toast('This invoice is already fully delivered.', false);
  }

  function chkIndex(){ return deliverableChks.indexOf(document.activeElement); }
  function focusChk(i){
    if (!deliverableChks.length) return;
    if (i < 0) i = deliverableChks.length - 1;
    if (i >= deliverableChks.length) i = 0;
    deliverableChks[i].focus();
  }
  function selectAll(){
    var anyUnchecked = deliverableChks.some(function(c){ return !c.checked; });
    deliverableChks.forEach(function(c){ c.checked = anyUnchecked; });
  }
  function selectedCodes(){
    var out = [];
    rows.forEach(function(r){ if (r.deliverable && r.chk && r.chk.checked) out.push(r.product_code); });
    return out;
  }

  function doLookup(){
    var inv = extractDigits(elInv.value);
    if (!inv) { elInv.focus(); return; }
    elEmpty.style.display = 'none';
    fetch(lookupUrl(inv), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
      .then(function(r){ return r.json(); })
      .then(function(d){
        if (!d.ok) {
          elHeader.style.display = 'none';
          elWrap.style.display = 'none';
          elActions.style.display = 'none';
          elEmpty.textContent = d.error || 'Invoice not found.';
          elEmpty.style.display = 'block';
          elInv.select();
          return;
        }
        render(d);
      })
      .catch(function(){ toast('Network error.', false); });
  }

  function doDeliver(all){
    if (!currentInvoice) return;
    var codes = all ? [] : selectedCodes();
    if (!all && codes.length === 0) {
      toast('No item selected. Select items (Space) or use Deliver All.', false);
      return;
    }
    var body = new URLSearchParams();
    body.set('deliver_all', all ? '1' : '0');
    body.set('product_codes', JSON.stringify(codes));

    fetch(markUrl(currentInvoice), {
      method: 'POST',
      headers: {
        'X-CSRFToken': CSRF,
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: body.toString()
    })
    .then(function(r){ return r.json(); })
    .then(function(d){
      if (!d.ok) { toast(d.error || 'Delivery failed.', false); return; }
      toast(d.delivered_count + ' item(s) delivered.', true);
      var inv = currentInvoice;
      fetch(lookupUrl(inv), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(function(r){ return r.json(); })
        .then(function(dd){
          if (dd.ok) {
            render(dd);
            if (dd.header.all_delivered) { elInv.value=''; elInv.focus(); }
          }
        });
    })
    .catch(function(){ toast('Network error.', false); });
  }

  // Invoice box: Enter to load, Esc to reset
  elInv.addEventListener('keydown', function(e){
    if (e.key === 'Enter') { e.preventDefault(); doLookup(); }
    else if (e.key === 'Escape') { resetView(); }
  });

  // Table keyboard navigation (focus is on a checkbox)
  document.addEventListener('keydown', function(e){
    if (e.key === 'Escape') { e.preventDefault(); resetView(); return; }
    if (document.activeElement === elInv) return;
    if (elWrap.style.display === 'none') return;

    if (e.key === 'ArrowDown') { e.preventDefault(); focusChk(chkIndex() + 1); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); focusChk(chkIndex() - 1); }
    else if (e.key === 'a' || e.key === 'A') { e.preventDefault(); selectAll(); }
    else if (e.key === 'Enter' && e.ctrlKey) { e.preventDefault(); doDeliver(true); }
    else if (e.key === 'Enter') { e.preventDefault(); doDeliver(false); }
    // Space left to native checkbox toggle
  });

  document.getElementById('btn_deliver_selected').addEventListener('click', function(){ doDeliver(false); });
  document.getElementById('btn_deliver_all').addEventListener('click', function(){ doDeliver(true); });
  document.getElementById('btn_new_invoice').addEventListener('click', resetView);

  elInv.focus();
})();
</script>
{% endblock %}