{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Step 2 — Services | 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-danger:#ff3b30;
  --c-success:#34c759;--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;transition:box-shadow .2s;}
.sf-card:hover{box-shadow:var(--shadow-h);}
.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;}

/* Select2 match */
.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;}

/* Service search dropdown: bold, pure-black name + category line beneath */
.svc-opt-name{color:#000!important;font-weight:700!important;}
.svc-opt-cat{display:block;color:#000!important;font-weight:700!important;
  font-size:.72rem;margin-top:1px;}
.select2-container--default .select2-results__option--highlighted[aria-selected] .svc-opt-name,
.select2-container--default .select2-results__option--highlighted[aria-selected] .svc-opt-cat{
  color:#fff!important;}

/* Table */
.svc-tbl{font-size:.81rem;width:100%;}
.svc-tbl th{background:#f0f0f5;font-size:.72rem;font-weight:700;color:var(--c-sub);
  padding:.45rem .55rem;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:2px solid var(--c-border);white-space:nowrap;}
.svc-tbl td{padding:.3rem .4rem;border-bottom:1px solid #f0f0f0;vertical-align:middle;}
.svc-tbl tr:hover td{background:#fafafe;}
.svc-tbl input,svc-tbl select{font-size:.82rem;}

/* Summary */
.sum-box{background:#f8f9ff;border:1px solid #d0d8ff;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-accent);
  border-top:2px solid var(--c-accent);padding-top:6px;margin-top:4px;}

/* Page header */
.sf-page-hd{background:linear-gradient(135deg,#f3eeff,#ebe8ff);border-radius:var(--r-card);padding:.9rem 1.3rem;color:#1c1c1e;margin-bottom:1rem;box-shadow:var(--shadow);border:1px solid #c9b8ff;}

/* Buttons */
.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-primary:hover{background:var(--c-accent-d);}
.sf-btn-outline{background:#fff;color:var(--c-accent);border:1.5px solid var(--c-accent);}
.sf-btn-info{background:#0dcaf0;color:#fff;}
.sf-btn-warn{background:#ff9f0a;color:#fff;}

kbd{font-size:.68rem;padding:1px 4px;border-radius:3px;border:1px solid #bbb;background:#f5f5f5;}
.kbd-hint{font-size:.7rem;color:#333;}

/* Row numbering */
.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 2 / 3</span>
        Services &amp; Labour — 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:step1_vehicle' 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 1
      </a>
      <a href="{% url 'workshop:step3_parts' job.job_no %}" class="sf-btn" style="background:rgba(0,0,0,.06);color:#1c1c1e;border:1px solid rgba(0,0,0,.12);">
        Stock Requisition <i class="bi bi-arrow-right"></i>
      </a>
    </div>
  </div>

  <form method="POST" id="step2Form">
    {% csrf_token %}
    <input type="hidden" name="services_json" id="servicesJson">

    <div class="row g-3">

      <div class="col-lg-9">

        {# ─── Services Table ─── #}
        <div class="sf-card">
          <div class="sf-card-hd d-flex justify-content-between align-items-center">
            <span><i class="bi bi-tools me-1 text-primary"></i>Services &amp; Labour</span>
            <button type="button" class="sf-btn sf-btn-outline"
                    style="height:26px;padding:0 .7rem;font-size:.7rem;text-transform:none;letter-spacing:normal;"
                    onclick="addEmptyRow()">
              <i class="bi bi-plus-lg"></i> Add Row
            </button>
          </div>
          <div class="kbd-hint" style="padding:.5rem 1.1rem 0;">
            Search &amp; pick a service in the row, then <kbd>Enter</kbd> walks
            Description → Category → Lab.Code → Price → new row &nbsp;·&nbsp;
            <kbd>Ctrl+S</kbd> save
          </div>
          <div class="table-responsive">
            <table class="svc-tbl" id="svcTable">
              <thead>
                <tr>
                  <th class="row-num">#</th>
                  <th style="min-width:85px;">Code</th>
                  <th style="min-width:180px;">Service Name</th>
                  <th style="min-width:140px;">Description</th>
                  <th style="min-width:80px;">Lab.Category</th>
                  <th style="min-width:80px;">Lab.Code</th>
                  <th style="min-width:100px;">Price (Ex.Tax)</th>
                  <th style="min-width:60px;">Tax%</th>
                  <th style="min-width:80px;">Tax Amt</th>
                  <th style="min-width:90px;">Total (Incl)</th>
                  <th style="min-width:120px;">Technician</th>
                  <th style="width:34px;"></th>
                </tr>
              </thead>
              <tbody id="svcBody"></tbody>
              <tfoot>
                <tr style="background:#f8f9ff;">
                  <td colspan="6" class="text-end fw-semibold" style="font-size:.78rem;padding:.5rem;">TOTALS</td>
                  <td class="fw-semibold" id="ftPrice" style="padding:.5rem;text-align:right;">0</td>
                  <td></td>
                  <td class="fw-semibold text-danger" id="ftTaxAmt" style="padding:.5rem;text-align:right;">0</td>
                  <td class="fw-bold text-primary" id="ftTotal" style="padding:.5rem;text-align:right;">0</td>
                  <td colspan="2"></td>
                </tr>
              </tfoot>
            </table>
            <div id="svcNoRows" class="text-center text-muted py-4 small" style="display:none;">
              <i class="bi bi-tools d-block fs-4 opacity-25 mb-1"></i>
              No services added. Click Add Row, then search a service by name.
            </div>
          </div>
        </div>

      </div>{# /col-lg-9 #}

      <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">Services Discount %</label>
            <input type="number" id="svcDiscPer" class="sf-inp"
                   value="{{ job.services_discount_per|default:0 }}"
                   min="0" max="100" step="0.01" oninput="calcSummary()">
          </div>
        </div>

        <div class="sum-box mb-3">
          <div class="sum-row"><span >Sub-total</span><span id="sumSub">0</span></div>
          <div class="sum-row"><span >Discount</span><span id="sumDisc" class="text-danger">0</span></div>
          <div class="sum-row"><span >Tax Amount</span><span id="sumTax" class="text-warning">0</span></div>
          <div class="sum-row"><span>NET</span><span id="sumNet">0</span></div>
        </div>

        <div class="d-flex flex-column gap-2">
          <button type="button" class="sf-btn sf-btn-outline" onclick="saveServices(false)" style="height:40px;">
            <i class="bi bi-save"></i> Save Services
          </button>
          <button type="button" class="sf-btn sf-btn-warn" onclick="saveServices(true)" style="height:40px;">
            Save &amp; Mark In Progress <i class="bi bi-arrow-right"></i>
          </button>
          <a href="{% url 'workshop:step3_parts' job.job_no %}" class="sf-btn sf-btn-info" style="justify-content:center;height:40px;">
            Go to Stock Requisition <i class="bi bi-arrow-right"></i>
          </a>
        </div>
        <div class="kbd-hint text-center mt-2"><kbd>Ctrl+S</kbd> = quick save</div>

      </div>{# /sidebar #}
    </div>{# /row #}

    <div class="mt-2">
      <a href="{% url 'workshop:step1_vehicle' job.job_no %}" class="sf-btn sf-btn-outline" style="height:36px;">
        <i class="bi bi-arrow-left"></i> Back to Step 1
      </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_SVC_URL = "{% url 'workshop:ajax_services' %}";

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

// ── Initial rows from server ────────────────────────────────────────
let svcLines = [
  {% for s in services %}
  {
    product_id:     {{ s.product_id|default:"null" }},
    product_code:   "{{ s.product_code|default:''|escapejs }}",
    service_name:   "{{ s.service_name|escapejs }}",
    description:    "{{ s.description|escapejs }}",
    labor_category: "{{ s.labor_category|default:'A'|escapejs }}",
    labor_code:     "{{ s.labor_code|default:''|escapejs }}",
    price:          {{ s.price|default:0 }},
    tax_per:        {{ s.tax_per|default:0 }},
    tax_amount:     {{ s.tax_amount|default:0 }},
    technician_id:  {{ s.technician_id|default:0 }},
  },
  {% endfor %}
];

// ── Helpers ────────────────────────────────────────────────────────
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 staffOptions(sel){
  return STAFF_LIST.map(s=>
    `<option value="${s.id}" ${parseInt(sel)==s.id?'selected':''}>${esc(s.name)}</option>`
  ).join('');
}

function svcNameOption(s){
  if(s.product_id){
    return `<option value="${s.product_id}" selected>${esc(s.product_code?s.product_code+' — ':'')}${esc(s.service_name)}</option>`;
  }
  if(s.service_name){
    return `<option value="-1" selected>${esc(s.service_name)}</option>`;
  }
  return '';
}

// ── Render ─────────────────────────────────────────────────────────
function render(){
  const body   = document.getElementById('svcBody');
  const noRows = document.getElementById('svcNoRows');
  const tbl    = document.getElementById('svcTable');

  if(!svcLines.length){
    body.innerHTML = '';
    noRows.style.display = '';
    tbl.style.display    = 'none';
    calcSummary();
    return;
  }
  noRows.style.display = 'none';
  tbl.style.display    = '';

  body.innerHTML = svcLines.map((s,i) => `
    <tr id="svcRow${i}">
      <td class="row-num">${i+1}</td>
      <td>
        <input type="text" class="sf-inp svc-code"
               value="${esc(s.product_code)}" placeholder="Code"
               oninput="svcLines[${i}].product_code=this.value"
               id="sc${i}">
      </td>
      <td>
        <select class="svc-name-sel" id="sn${i}" style="width:100%;">
          <option value=""></option>
          ${svcNameOption(s)}
        </select>
      </td>
      <td>
        <input type="text" class="sf-inp svc-desc"
               value="${esc(s.description)}" placeholder="Details…"
               oninput="svcLines[${i}].description=this.value"
               id="sd${i}">
      </td>
      <td>
        <select class="sf-inp svc-labcat" style="font-size:.78rem;" id="slcat${i}"
                onchange="svcLines[${i}].labor_category=this.value">
          <option value="A" ${s.labor_category==='A'?'selected':''}>General</option>
          <option value="B" ${s.labor_category==='B'?'selected':''}>Body</option>
          <option value="C" ${s.labor_category==='C'?'selected':''}>Electrical</option>
          <option value="D" ${s.labor_category==='D'?'selected':''}>AC</option>
          <option value="E" ${s.labor_category==='E'?'selected':''}>Mechanical</option>
        </select>
      </td>
      <td>
        <input type="text" class="sf-inp svc-labcode" style="font-size:.78rem;" id="slcode${i}"
               value="${esc(s.labor_code)}" placeholder="Lab.code"
               oninput="svcLines[${i}].labor_code=this.value">
      </td>
      <td>
        <input type="number" class="sf-inp svc-price text-end"
               value="${s.price}" min="0" step="0.01"
               id="sp${i}"
               oninput="svcLines[${i}].price=parseFloat(this.value)||0;recalcLine(${i})">
      </td>
      <td>
        <input type="number" class="sf-inp svc-tax text-center"
               value="${s.tax_per}" min="0" max="100" step="0.01"
               id="st${i}"
               oninput="svcLines[${i}].tax_per=parseFloat(this.value)||0;recalcLine(${i})">
      </td>
      <td>
        <input type="text" class="sf-inp ro text-end svc-taxamt"
               value="${fmt(s.tax_amount)}" readonly id="sta${i}">
      </td>
      <td>
        <input type="text" class="sf-inp ro text-end fw-semibold"
               value="${fmt(s.price+s.tax_amount)}" readonly id="stot${i}">
      </td>
      <td>
        <select class="sf-inp svc-tech" style="font-size:.78rem;"
                onchange="svcLines[${i}].technician_id=parseInt(this.value)||0">
          ${staffOptions(s.technician_id)}
        </select>
      </td>
      <td>
        <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1"
                onclick="removeRow(${i})" style="border-radius:6px;">
          <i class="bi bi-x-lg" style="font-size:.7rem;"></i>
        </button>
      </td>
    </tr>`).join('');

  calcSummary();
  bindKeyNav();
  initRowSelect2();
}

function recalcLine(i){
  const s = svcLines[i];
  s.tax_amount = Math.round(s.price*(s.tax_per||0)/100*100)/100;
  const ta = document.getElementById(`sta${i}`);
  const tt = document.getElementById(`stot${i}`);
  if(ta) ta.value = fmt(s.tax_amount);
  if(tt) tt.value = fmt(s.price + s.tax_amount);
  calcSummary();
}

function calcSummary(){
  const sub   = svcLines.reduce((a,s)=>a+(parseFloat(s.price)||0),0);
  const tax   = svcLines.reduce((a,s)=>a+(parseFloat(s.tax_amount)||0),0);
  const disc  = parseFloat(document.getElementById('svcDiscPer').value)||0;
  const discA = sub*disc/100;
  const net   = sub-discA+tax;

  const set=(id,v)=>{ const el=document.getElementById(id); if(el) el.textContent=fmt(v); };
  set('sumSub',sub); set('sumDisc',discA); set('sumTax',tax); set('sumNet',net);
  set('ftPrice',sub); set('ftTaxAmt',tax); set('ftTotal',net);
}

function removeRow(i){ svcLines.splice(i,1); render(); }

function addEmptyRow(){
  svcLines.push({ product_id:null, product_code:"", service_name:"", description:"",
                  labor_category:"A", labor_code:"",
                  price:0, tax_per:0, tax_amount:0, technician_id:0 });
  render();
  focusRowName(svcLines.length-1);
}

// ── Focus + open a row's Service Name Select2 ───────────────────────
function focusRowName(i){
  setTimeout(()=>{
    const $sel = $(`#sn${i}`);
    if($sel.length) $sel.select2('open');
  }, 80);
}

// ── Per-row Service Name Select2: AJAX search, pick fills the row ───
function initRowSelect2(){
  document.querySelectorAll('.svc-name-sel').forEach((el, idx)=>{
    $(el).select2({
      ajax:{
        url:AJAX_SVC_URL, dataType:'json', delay:250,
        data:function(p){ return {q:p.term}; },
        processResults:function(d){ return {results:d.results}; },
        cache:true,
      },
      placeholder:'Search service…',
      minimumInputLength:2,
      width:'100%',
      dropdownAutoWidth:true,
      dropdownParent:$(document.body),
      templateResult:function(p){
        if(p.loading) return p.text;
        const cat = p.prod_company || ''; 
        return $(`<span>
          <span class="svc-opt-name">${esc(p.product_code||'')} — ${esc(p.name||p.text||'')}</span>
          <span class="text-primary ms-2">${parseFloat(p.price||0).toLocaleString()}</span>
          <span class="badge bg-warning-subtle text-warning border ms-1">GST:${p.gst||0}%</span>
          ${cat ? `<span class="svc-opt-cat">${esc(cat)}</span>` : ''}
        </span>`);
      },
    }).on('select2:select', function(e){
      const i = idx;
      const p = e.params.data;
      svcLines[i].product_id   = p.id;
      svcLines[i].product_code = p.product_code||"";
      svcLines[i].service_name = p.name||p.text||"";
      svcLines[i].price        = parseFloat(p.price||0);
      svcLines[i].tax_per      = parseFloat(p.gst||0);
      svcLines[i].tax_amount   = Math.round(svcLines[i].price*svcLines[i].tax_per/100*100)/100;
      render();
      setTimeout(()=>{
        const d=document.getElementById(`sd${i}`);
        if(d){ d.focus(); d.select(); }
      }, 70);
    });
  });
}

// ── Keyboard chain: Name(pick) → Description → Category → Lab.Code → Price → new row ──
function bindKeyNav(){
  // Description → Enter → Lab.Category
  document.querySelectorAll('.svc-desc').forEach((el,idx)=>{
    el.removeEventListener('keydown', el._navH);
    el._navH = function(e){
      if(e.key!=='Enter') return;
      e.preventDefault();
      const next=document.getElementById(`slcat${idx}`); if(next) next.focus();
    };
    el.addEventListener('keydown', el._navH);
  });

  // Lab.Category → Enter → Lab.Code
  document.querySelectorAll('.svc-labcat').forEach((el,idx)=>{
    el.removeEventListener('keydown', el._navH);
    el._navH = function(e){
      if(e.key!=='Enter') return;
      e.preventDefault();
      const next=document.getElementById(`slcode${idx}`); if(next) next.focus();
    };
    el.addEventListener('keydown', el._navH);
  });

  // Lab.Code → Enter → Price
  document.querySelectorAll('.svc-labcode').forEach((el,idx)=>{
    el.removeEventListener('keydown', el._navH);
    el._navH = function(e){
      if(e.key!=='Enter') return;
      e.preventDefault();
      const next=document.getElementById(`sp${idx}`); if(next) next.focus();
    };
    el.addEventListener('keydown', el._navH);
  });

  // Price → Enter → create a new row, focus + open its Name Select2
  document.querySelectorAll('.svc-price').forEach((el,idx)=>{
    el.removeEventListener('keydown', el._navH);
    el._navH = function(e){
      if(e.key!=='Enter') return;
      e.preventDefault();
      addEmptyRow();
    };
    el.addEventListener('keydown', el._navH);
  });
}

// ── Page load: draw the table, then focus + open the right row ──────
$(document).ready(function(){
  if(svcLines.length === 0){
    addEmptyRow();                        // fresh job → start on one open row
  } else {
    render();
    focusRowName(svcLines.length - 1);    // continue from the last row
  }
});

// ── Ctrl+S prevent default + save ──────────────────────────────────
document.addEventListener('keydown',function(e){
  if(e.ctrlKey && e.key.toLowerCase()==='s'){ e.preventDefault(); saveServices(false); }
});

// ── Prevent Enter submit on form ───────────────────────────────────
document.getElementById('step2Form').addEventListener('keydown',function(e){
  if(e.key==='Enter' && e.target.tagName!=='BUTTON' && !e.ctrlKey){ e.preventDefault(); }
});

function saveServices(advance){
  document.getElementById('servicesJson').value = JSON.stringify({
    services:              svcLines,
    services_discount_per: parseFloat(document.getElementById('svcDiscPer').value)||0,
    next_status:           advance ? 'in_progress' : '',
  });
  document.getElementById('step2Form').submit();
}
</script>
{% endblock %}