{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Step 3 — Stock Requisition | Job #{{ job.job_no }}{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/>
<style>
:root{--c-bg:#f2f2f7;--c-card:#fff;--c-border:#d1d1d6;--c-accent:#007aff;
  --c-accent-d:#005ecb;--c-text:#1c1c1e;--c-sub:#6e6e73;
  --c-success:#34c759;--c-info:#0dcaf0;--c-purple:#5856d6;--r-card:14px;--r-inp:9px;
  --shadow:0 2px 14px rgba(0,0,0,.08);--shadow-h:0 4px 22px rgba(0,0,0,.13);}
body{background:var(--c-bg)!important;}
.sf-card{background:var(--c-card);border-radius:var(--r-card);box-shadow:var(--shadow);
  margin-bottom:1.1rem;overflow:hidden;}
.sf-card-hd{padding:.6rem 1.2rem;border-bottom:1px solid var(--c-border);
  font-size:.76rem;font-weight:700;color:#222;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(0,0,0,.02);}
.sf-card-bd{padding:.9rem 1.1rem;}
.sf-lbl{font-size:.73rem;font-weight:600;color:#000;margin-bottom:3px;display:block;}
.sf-inp{height:34px;border:1px solid var(--c-border);border-radius:var(--r-inp)!important;
  font-size:.83rem;color:var(--c-text);padding:0 .65rem;background:#fff;
  width:100%;outline:none;transition:border-color .15s,box-shadow .15s;}
.sf-inp:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,122,255,.13);}
.sf-inp.ro{background:#f8f8f9;color:#888;}
.sf-inp.locked{background:#f4f1ff;color:#5856d6;font-weight:600;}
.select2-container .select2-selection--single{border:1px solid var(--c-border)!important;
  border-radius:var(--r-inp)!important;height:34px!important;}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:32px!important;font-size:.83rem;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:32px!important;}
.select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--c-accent)!important;box-shadow:0 0 0 3px rgba(0,122,255,.13)!important;}
.select2-results__option{font-size:.82rem;}
.pts-tbl{font-size:.81rem;width:100%;}
.pts-tbl th{background:#f0f0f5;font-size:.72rem;font-weight:700;color:var(--c-sub);
  padding:.45rem .5rem;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:2px solid var(--c-border);white-space:nowrap;}
.pts-tbl td{padding:.28rem .4rem;border-bottom:1px solid #f0f0f0;vertical-align:middle;}
.pts-tbl tr:hover td{background:#f8f7ff;}
.sum-box{background:#f8f7ff;border:1px solid #d6cdfb;border-radius:10px;padding:.9rem 1rem;}
.sum-row{display:flex;justify-content:space-between;font-size:.83rem;
  padding:3px 0;border-bottom:1px solid #eee;}
.sum-row:last-child{border:none;font-weight:700;font-size:1rem;color:var(--c-purple);
  border-top:2px solid var(--c-purple);padding-top:6px;margin-top:4px;}
.stk-ok{background:#d1f8e8;color:#0a6634;border:1px solid #0a6634;
  font-size:.68rem;padding:1px 6px;border-radius:10px;white-space:nowrap;}
.stk-no{background:#fdecea;color:#b71c1c;border:1px solid #b71c1c;
  font-size:.68rem;padding:1px 6px;border-radius:10px;}
.sf-page-hd{background:linear-gradient(135deg,#f1eeff,#e6e0ff);border-radius:var(--r-card);padding:.9rem 1.3rem;color:#1c1c1e;margin-bottom:1rem;box-shadow:var(--shadow);border:1px solid #c9b8ff;}
.sf-btn{height:36px;border:none;border-radius:var(--r-inp);font-size:.84rem;font-weight:700;
  padding:0 1.2rem;cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:.35rem;}
.sf-btn-primary{background:var(--c-accent);color:#fff;}
.sf-btn-outline{background:#fff;color:var(--c-accent);border:1.5px solid var(--c-accent);}
.sf-btn-purple{background:var(--c-purple);color:#fff;}
.sf-btn-purple:disabled{opacity:.4;cursor:not-allowed;}
.sf-btn-success{background:#34c759;color:#fff;}
.sf-btn-success:disabled{opacity:.4;cursor:not-allowed;}
kbd{font-size:.68rem;padding:1px 4px;border-radius:3px;border:1px solid #bbb;background:#f5f5f5;}
.kbd-hint{font-size:.7rem;color:#333;}
.row-num{width:26px;text-align:center;color:var(--c-sub);font-size:.75rem;font-weight:600;}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3 px-4">
  {% for m in messages %}
  <div class="alert alert-{{ m.tags }} alert-dismissible fade show border-0 shadow-sm py-2">
    {{ m }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  <div class="sf-page-hd d-flex justify-content-between align-items-center">
    <div>
      <h5 class="mb-0 fw-bold">
        <span class="badge me-2" style="background:rgba(0,0,0,.07);color:#5856d6;font-size:.75rem;font-weight:700;">Step 3 / 3</span>
        Stock Requisition — Job #{{ job.job_no }}
      </h5>
      <small style="color:#444;">
        {{ job.vehicle.reg_no }} | {{ job.vehicle.make }} {{ job.vehicle.model }}
        | {{ job.get_billing_type_display }} | Status: {{ job.get_status_display }}
        &nbsp;·&nbsp; <kbd style="background:rgba(0,0,0,.07);border-color:#bbb;color:#333;">Ctrl+S</kbd> save
      </small>
    </div>
    <div class="d-flex gap-2">
      <a href="{% url 'workshop:step2_services' job.job_no %}" class="sf-btn" style="background:rgba(0,0,0,.06);color:#1c1c1e;border:1px solid rgba(0,0,0,.12);">
        <i class="bi bi-arrow-left"></i> Step 2
      </a>
      <a href="{% url 'workshop:job_detail' job.job_no %}" class="sf-btn" style="background:rgba(0,0,0,.06);color:#1c1c1e;border:1px solid rgba(0,0,0,.12);">
        <i class="bi bi-eye"></i> View Job
      </a>
    </div>
  </div>

  <div class="alert alert-light border d-flex align-items-center gap-2 py-2 mb-3" style="font-size:.82rem;">
    <i class="bi bi-info-circle-fill text-purple" style="color:var(--c-purple);"></i>
    Request the parts needed for this job. Rate is locked from the product master —
    the <strong>Stock Issuer</strong> department will issue the actual quantity from store,
    which is what gets billed. If this job genuinely needs no parts, use
    <strong>"No Parts — Send to Cash Counter"</strong> below to skip straight ahead.
  </div>

  <form method="POST" id="step3Form">
    {% csrf_token %}
    <input type="hidden" name="parts_json" id="partsJson">

    <div class="row g-3">
      <div class="col-lg-9">

        {# Search bar #}
        <div class="sf-card">
          <div class="sf-card-bd">
            <div class="row g-2 align-items-end">
              <div class="col-md-5">
                <label class="sf-lbl"><i class="bi bi-search me-1 text-info"></i>Search by Name</label>
                <select id="partNameSel" style="width:100%" placeholder="Type part name…"></select>
              </div>
              <div class="col-md-4">
                <label class="sf-lbl">
                  <i class="bi bi-upc-scan me-1 text-success"></i>Code / Barcode
                  <span class="kbd-hint ms-1"><kbd>Enter</kbd> to load</span>
                </label>
                <input type="text" id="partCodeInput" class="sf-inp"
                       placeholder="Scan barcode or type code…" autocomplete="off">
              </div>
              <div class="col-md-3">
                <button type="button" class="sf-btn sf-btn-outline" onclick="addEmptyPart()" style="width:100%;">
                  <i class="bi bi-plus-lg"></i> Add Row
                </button>
              </div>
            </div>
            <div class="kbd-hint mt-1">
              Search/scan a part → its rate is locked automatically &nbsp;·&nbsp;
              <kbd>Enter</kbd> on Qty → next field &nbsp;·&nbsp; <kbd>Ctrl+S</kbd> save
            </div>
          </div>
        </div>

        {# Parts table #}
        <div class="sf-card">
          <div class="table-responsive">
            <table class="pts-tbl" id="ptsTable">
              <thead>
                <tr>
                  <th class="row-num">#</th>
                  <th style="min-width:90px;">Code</th>
                  <th style="min-width:160px;">Part Name</th>
                  <th style="min-width:60px;text-align:center;">Stock</th>
                  <th style="min-width:80px;text-align:center;">Req. Qty</th>
                  <th style="min-width:95px;text-align:right;">Rate <i class="bi bi-lock-fill" style="font-size:.65rem;"></i></th>
                  <th style="min-width:55px;text-align:center;">Tax% <i class="bi bi-lock-fill" style="font-size:.65rem;"></i></th>
                  <th style="min-width:80px;text-align:right;">Tax Amt</th>
                  <th style="min-width:90px;text-align:right;">Est. Value</th>
                  <th style="width:34px;"></th>
                </tr>
              </thead>
              <tbody id="ptsBody"></tbody>
              <tfoot>
                <tr style="background:#f8f7ff;">
                  <td colspan="5" class="text-end fw-semibold" style="font-size:.78rem;padding:.5rem;">TOTALS</td>
                  <td class="fw-semibold text-end" id="pfRate" style="padding:.5rem;">0</td>
                  <td></td>
                  <td class="fw-semibold text-end text-danger" id="pfTax" style="padding:.5rem;">0</td>
                  <td class="fw-bold text-end" style="color:var(--c-purple);padding:.5rem;" id="pfTotal">0</td>
                  <td></td>
                </tr>
              </tfoot>
            </table>
            <div id="ptsNoRows" class="text-center text-muted py-4 small" style="display:none;">
              <i class="bi bi-box-seam d-block fs-4 opacity-25 mb-1"></i>
              No parts requested yet. Scan barcode, search by name, or click Add Row —
              or use "No Parts Needed" on the right if this job truly needs none.
            </div>
          </div>
        </div>
      </div>

      {# Summary sidebar #}
      <div class="col-lg-3">
        <div class="sf-card">
          <div class="sf-card-hd"><i class="bi bi-percent me-1"></i>Discount</div>
          <div class="sf-card-bd">
            <label class="sf-lbl">Parts Discount %</label>
            <input type="number" id="ptsDiscPer" class="sf-inp"
                   value="{{ job.parts_discount_per|default:0 }}"
                   min="0" max="100" step="0.01" oninput="calcPtsSummary()">
          </div>
        </div>

        <div class="sum-box mb-3">
          <div class="sum-row"><span>Requested Value (Ex.Tax)</span><span id="psSub">0</span></div>
          <div class="sum-row"><span>Discount</span><span id="psDisc" class="text-danger">0</span></div>
          <div class="sum-row"><span>Tax Amount</span><span id="psTax" class="text-warning">0</span></div>
          <div class="sum-row"><span>Estimated NET</span><span id="psNet">0</span></div>
        </div>

        <div class="sf-card">
          <div class="sf-card-bd" style="font-size:.78rem;color:var(--c-sub);">
            <i class="bi bi-info-circle me-1"></i>
            These are <strong>estimated / requested</strong> values. Actual billing happens on
            <strong>issued quantity</strong>, set by the Stock Issuer department.
          </div>
        </div>

        <div class="d-flex flex-column gap-2">
          <button type="button" class="sf-btn sf-btn-outline" onclick="saveParts('')" style="height:40px;">
            <i class="bi bi-save"></i> Save Draft
          </button>
          <button type="button" id="btnSendRequisition" class="sf-btn sf-btn-purple" onclick="saveParts('parts_requested')" style="height:40px;">
            Send to Stock Issuer <i class="bi bi-arrow-right"></i>
          </button>
          <button type="button" id="btnNoParts" class="sf-btn sf-btn-success" onclick="saveParts('ready')" style="height:40px;">
            <i class="bi bi-skip-forward"></i> No Parts — Send to Cash Counter
          </button>
        </div>
        <div class="kbd-hint text-center mt-2"><kbd>Ctrl+S</kbd> = send to Stock Issuer</div>
      </div>
    </div>

    <div class="mt-2">
      <a href="{% url 'workshop:step2_services' job.job_no %}" class="sf-btn sf-btn-outline" style="height:36px;">
        <i class="bi bi-arrow-left"></i> Back to Services
      </a>
    </div>
  </form>
</div>
{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>
const AJAX_PARTS_URL = "{% url 'workshop:ajax_parts' %}";

let partLines = [
  {% for p in parts %}
  {
    product_id:   {{ p.product_id }},
    product_code: "{{ p.product_code|escapejs }}",
    product_name: "{{ p.product_name|escapejs }}",
    qty:          {{ p.qty|default:1 }},
    rate:         {{ p.rate|default:0 }},
    tax_per:      {{ p.tax_per|default:0 }},
    tax_amount:   {{ p.tax_amount|default:0 }},
    stock:        0,
  },
  {% endfor %}
];

function esc(s){ return String(s||"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;"); }
function fmt(n){ return Math.round(parseFloat(n)||0).toLocaleString("en-PK"); }

function updateBypassButton(){
  const btn = document.getElementById('btnNoParts');
  if(!btn) return;
  btn.disabled = partLines.length > 0;
  btn.title = partLines.length > 0 ? 'Remove all requested parts first to use this option' : '';
}

function renderParts(){
  const body=document.getElementById('ptsBody'),
        noR=document.getElementById('ptsNoRows'),
        tbl=document.getElementById('ptsTable');
  updateBypassButton();
  if(!partLines.length){ body.innerHTML=''; noR.style.display=''; tbl.style.display='none'; calcPtsSummary(); return; }
  noR.style.display='none'; tbl.style.display='';

  body.innerHTML = partLines.map((p,i)=>{
    const base=Math.round((p.qty||0)*(p.rate||0)*100)/100;
    const tax =Math.round(base*(p.tax_per||0)/100*100)/100;
    p.tax_amount=tax;
    const stkBadge = p.stock>0 ? `<span class="stk-ok">✓ ${p.stock}</span>`
                   : p.stock===0 ? `<span class="stk-no">0</span>` : '';
    return `
    <tr id="pr${i}">
      <td class="row-num">${i+1}</td>
      <td><input type="text" class="sf-inp pt-code" value="${esc(p.product_code)}"
             placeholder="Code" oninput="partLines[${i}].product_code=this.value" id="pc${i}"></td>
      <td><input type="text" class="sf-inp" value="${esc(p.product_name)}"
             placeholder="Part name" oninput="partLines[${i}].product_name=this.value"></td>
      <td style="text-align:center;">${stkBadge}</td>
      <td><input type="number" class="sf-inp text-center pt-qty" value="${p.qty}"
             min="0.01" step="0.01" id="pq${i}"
             oninput="partLines[${i}].qty=parseFloat(this.value)||0;recalcPart(${i})"></td>
      <td><input type="number" class="sf-inp text-end ro locked" value="${p.rate}" readonly tabindex="-1"></td>
      <td><input type="number" class="sf-inp text-center ro locked" value="${p.tax_per}" readonly tabindex="-1"></td>
      <td><input type="text" class="sf-inp ro text-end" value="${fmt(tax)}" readonly id="pta${i}"></td>
      <td><input type="text" class="sf-inp ro text-end fw-semibold" value="${fmt(base+tax)}" readonly id="ptt${i}"></td>
      <td><button type="button" class="btn btn-sm btn-outline-danger py-0 px-1" style="border-radius:6px;"
                  onclick="removePart(${i})"><i class="bi bi-x-lg" style="font-size:.7rem;"></i></button></td>
    </tr>`;
  }).join('');

  calcPtsSummary();
  bindPtsKeyNav();
}

function recalcPart(i){
  const p=partLines[i];
  const base=Math.round((p.qty||0)*(p.rate||0)*100)/100;
  p.tax_amount=Math.round(base*(p.tax_per||0)/100*100)/100;
  const ta=document.getElementById(`pta${i}`),tt=document.getElementById(`ptt${i}`);
  if(ta) ta.value=fmt(p.tax_amount);
  if(tt) tt.value=fmt(base+p.tax_amount);
  calcPtsSummary();
}

function calcPtsSummary(){
  const sub=partLines.reduce((a,p)=>a+(parseFloat(p.qty)||0)*(parseFloat(p.rate)||0),0);
  const tax=partLines.reduce((a,p)=>a+(parseFloat(p.tax_amount)||0),0);
  const disc=parseFloat(document.getElementById('ptsDiscPer').value)||0;
  const da=sub*disc/100, net=sub-da+tax;
  const set=(id,v)=>{const el=document.getElementById(id);if(el)el.textContent=fmt(v);};
  set('psSub',sub);set('psDisc',da);set('psTax',tax);set('psNet',net);
  set('pfRate',sub);set('pfTax',tax);set('pfTotal',net);
}

function removePart(i){ partLines.splice(i,1); renderParts(); }

function addEmptyPart(){
  partLines.push({product_id:null,product_code:"",product_name:"",qty:1,rate:0,tax_per:0,tax_amount:0,stock:0});
  renderParts();
  setTimeout(()=>{ const el=document.getElementById(`pq${partLines.length-1}`); if(el) el.focus(); },60);
}

function addFromPartSearch(p,focusQty=true){
  partLines.push({
    product_id:   p.id,
    product_code: p.product_code||"",
    product_name: p.name||p.text||"",
    qty:          1,
    rate:         parseFloat(p.rate||0),
    tax_per:      parseFloat(p.gst||0),
    tax_amount:   Math.round(parseFloat(p.rate||0)*parseFloat(p.gst||0)/100*100)/100,
    stock:        parseFloat(p.stock||0),
  });
  renderParts();
  const last=partLines.length-1;
  setTimeout(()=>{ const el=document.getElementById(`pq${last}`); if(el&&focusQty) el.focus(); },60);
}

// Barcode
document.getElementById('partCodeInput').addEventListener('keydown',function(e){
  if(e.key!=='Enter') return; e.preventDefault();
  const code=this.value.trim(); if(!code) return;
  this.disabled=true;
  fetch(`${AJAX_PARTS_URL}?code=${encodeURIComponent(code)}&exact=1`)
    .then(r=>r.json())
    .then(data=>{
      const match=data.results.find(p=>(p.product_code||'').toLowerCase()===code.toLowerCase())||data.results[0];
      if(match){ addFromPartSearch(match,true); this.value=''; }
      else{ this.classList.add('is-invalid'); setTimeout(()=>this.classList.remove('is-invalid'),1400); }
    })
    .finally(()=>{ this.disabled=false; });
});

// Keyboard nav: Qty → Code input (rate/tax are locked, skipped)
function bindPtsKeyNav(){
  document.querySelectorAll('.pt-qty').forEach((el)=>{
    el.removeEventListener('keydown',el._h);
    el._h=function(e){ if(e.key!=='Enter') return; e.preventDefault();
      document.getElementById('partCodeInput').focus(); };
    el.addEventListener('keydown',el._h);
  });
}

// Select2
$(document).ready(function(){
  $('#partNameSel').select2({
    ajax:{url:AJAX_PARTS_URL,dataType:'json',delay:250,
      data:function(p){return{q:p.term};},
      processResults:function(d){return{results:d.results};},cache:true},
    placeholder:'Type part name…',minimumInputLength:2,width:'100%',
    templateResult:function(p){
      if(p.loading) return p.text;
      const stk=parseFloat(p.stock||0);
      return $(`<div class="d-flex justify-content-between align-items-center">
        <span><b>${p.product_code||''}</b> — ${p.name||p.text}
          <span class="text-primary ms-2">${parseFloat(p.rate||0).toLocaleString()}</span></span>
        <span>
          <span class="badge bg-${stk>0?'success':'danger'}-subtle text-${stk>0?'success':'danger'} border">Stk:${stk}</span>
          <span class="badge bg-warning-subtle text-warning border ms-1">GST:${p.gst||0}%</span>
        </span></div>`);
    },
  });
  $('#partNameSel').on('select2:select',function(e){ addFromPartSearch(e.params.data,true); $(this).val(null).trigger('change'); });
  renderParts();
  document.getElementById('partCodeInput').focus();
});

document.addEventListener('keydown',function(e){
  if(e.ctrlKey&&e.key.toLowerCase()==='s'){ e.preventDefault(); saveParts('parts_requested'); }
});
document.getElementById('step3Form').addEventListener('keydown',function(e){
  if(e.key==='Enter'&&e.target.tagName!=='BUTTON'&&!e.ctrlKey){ e.preventDefault(); }
});

function saveParts(nextStatus){
  if(nextStatus === 'ready' && partLines.length > 0){
    alert('You have requested parts — use "Send to Stock Issuer" instead, or remove all parts first.');
    return;
  }
  document.getElementById('partsJson').value=JSON.stringify({
    parts:              partLines,
    parts_discount_per: parseFloat(document.getElementById('ptsDiscPer').value)||0,
    next_status:         nextStatus,
  });
  document.getElementById('step3Form').submit();
}
</script>
{% endblock %}