{% extends "pos/base.html" %}
{% load static %}
{% block title %}Spec-A Bulk Stock{% endblock %}
{% block heading %}Spec-A Variant Stock{% endblock %}

{% block stylesheets %}
{{ block.super }}
<style>
:root{
  --primary:#2563eb;--primary-dark:#1d4ed8;--primary-light:#dbeafe;
  --success:#16a34a;--warning:#f59e0b;--danger:#dc2626;
  --g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;--g300:#d1d5db;
  --g400:#9ca3af;--g500:#6b7280;--g600:#4b5563;--g700:#374151;--g800:#1f2937;
}
*{box-sizing:border-box}
.bw{max-width:100%;overflow-x:hidden;padding:0 5px}

/* cards */
.cc{background:#fff;border:1px solid var(--g200);border-radius:6px;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.cc .ch{background:var(--g50);border-bottom:1px solid var(--g200);padding:10px 15px;font-size:13px;font-weight:600;color:var(--g700);display:flex;align-items:center;gap:8px}
.cc .ch i{color:var(--primary);font-size:12px}
.cc .cb{padding:12px 15px}

/* top bar */
.tb{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:10px}
.btn-back{background:#fff;color:var(--g600);border:1px solid var(--g300);padding:6px 14px;border-radius:5px;font-size:13px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.btn-back:hover{background:var(--g50);color:var(--g700);text-decoration:none}
.pt{font-size:18px;font-weight:600;color:var(--g800);display:flex;align-items:center;gap:8px}
.pt i{color:var(--primary)}

/* filter */
.fr{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.fi{display:flex;flex-direction:column;gap:4px}
.fi label{font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:.3px}
.fi .form-control,.fi .select2-container{min-width:160px}

/* radio group */
.rg{display:flex;gap:4px;background:var(--g100);padding:3px;border-radius:5px}
.rg input{display:none}
.rg label{padding:5px 12px;font-size:12px;font-weight:500;color:var(--g600);cursor:pointer;border-radius:4px;transition:.15s;text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:4px}
.rg label i{font-size:10px}
.rg input:checked+label{background:#fff;color:var(--primary);box-shadow:0 1px 2px rgba(0,0,0,.08)}

.input-sm{height:32px;padding:4px 10px;font-size:13px;border:1px solid var(--g300);border-radius:5px;color:var(--g700);transition:.15s}
.input-sm:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light)}

/* select2 */
.select2-container--default .select2-selection--single{height:32px;border:1px solid var(--g300);border-radius:5px}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:30px;font-size:13px;padding-left:10px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:30px}

/* buttons */
.bs{height:32px;padding:0 14px;font-size:12px;font-weight:600;border-radius:5px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.15s}
.bp{background:var(--primary);color:#fff}.bp:hover{background:var(--primary-dark)}
.bg{background:var(--success);color:#fff}.bg:hover{background:#15803d}
.bse{background:var(--g100);color:var(--g600);border:1px solid var(--g300)}.bse:hover{background:var(--g200)}

/* action bar */
.ab{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px;padding:10px 15px;background:#fff;border:1px solid var(--g200);border-radius:6px}
.ab-btns{display:flex;gap:8px;flex-wrap:wrap}
.sb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--g500)}
.sd{width:8px;height:8px;border-radius:50%;background:var(--g300)}
.sd.active{background:var(--warning);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* info bar */
.ib{border-radius:6px;padding:10px 15px;font-size:13px;margin-bottom:12px;display:flex;align-items:center;gap:8px;background:var(--primary-light);color:var(--primary-dark);border:1px solid #93c5fd}
.ib i{font-size:14px}

/* tabulator tweaks */
.tabulator{font-size:12px;border:1px solid var(--g200);border-radius:6px}
.tabulator .tabulator-header{background:var(--g700);border-bottom:none}
.tabulator .tabulator-header .tabulator-col{background:transparent;border-right:1px solid var(--g600)}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:8px 6px}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title{color:#fff;font-weight:600;font-size:11px}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row{border-bottom:1px solid var(--g100)}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even){background:var(--g50)}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover{background:var(--primary-light)}
.tabulator .tabulator-cell{padding:6px;border-right:1px solid var(--g100)}
.tabulator .tabulator-cell.dirty-cell{background:#fef3c7 !important}
.tabulator .tabulator-cell input{border:1px solid var(--primary);border-radius:3px;padding:2px 5px;font-size:12px}
.tabulator .tabulator-cell input:focus{outline:none;box-shadow:0 0 0 2px var(--primary-light)}
.tabulator .tabulator-frozen{background:#eef2ff !important}

/* spec header highlight */
.tabulator .tabulator-header .spec-col-header{background:rgba(37,99,235,.25) !important}
.tabulator .spec-col-cell{background:rgba(219,234,254,.25)}

/* total column */
.tabulator .total-cell{background:#f0fdf4 !important;font-weight:700}
.tabulator .tabulator-header .total-header{background:rgba(22,163,74,.3) !important}

/* default stock */
.tabulator .default-cell{color:var(--g400);font-style:italic}

/* remove number spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield}

/* toast */
.toast-container{position:fixed;top:15px;right:15px;z-index:9999}
.toast{background:#fff;border-radius:6px;box-shadow:0 4px 15px rgba(0,0,0,.15);padding:10px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;min-width:250px;max-width:350px;animation:slideIn .25s ease;border-left:4px solid var(--g400)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.toast.success{border-left-color:var(--success)}.toast.error{border-left-color:var(--danger)}
.toast.warning{border-left-color:var(--warning)}.toast.info{border-left-color:var(--primary)}
.toast i{font-size:14px}
.toast.success i{color:var(--success)}.toast.error i{color:var(--danger)}
.toast.warning i{color:var(--warning)}.toast.info i{color:var(--primary)}
.toast-content{flex:1}.toast-title{font-size:13px;font-weight:600;color:var(--g800)}
.toast-msg{font-size:11px;color:var(--g500)}
.toast-close{background:none;border:none;color:var(--g400);cursor:pointer;padding:2px}

/* loading */
.lo{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9998;opacity:0;visibility:hidden;transition:.2s}
.lo.show{opacity:1;visibility:visible}
.spinner{width:36px;height:36px;border:3px solid var(--g200);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lt{margin-top:10px;font-size:13px;color:var(--g600)}

@media(max-width:768px){
  .fr{flex-direction:column;align-items:stretch}
  .fi{width:100%}
  .fi .form-control,.fi .select2-container{width:100%!important;min-width:100%}
}
</style>
{% endblock %}

{% block content %}

<!-- Toast -->
<div id="toastContainer" class="toast-container"></div>

<!-- Loading -->
<div id="loadingOverlay" class="lo">
  <div class="spinner"></div>
  <div class="lt">Loading…</div>
</div>

<div class="bw">

  <!-- Top Bar -->
  <div class="tb">
    <span class="pt"><i class="fas fa-layer-group"></i> Spec-A Variant Stock</span>
    <a href="{% url 'products:products_list' %}" class="btn-back"><i class="fas fa-arrow-left"></i> Back</a>
  </div>

  <!-- Filter Card -->
  <div class="cc">
    <div class="ch"><i class="fas fa-filter"></i> Filter &amp; Load Data</div>
    <div class="cb">
      <div class="fr">

        <div class="fi">
          <label>Filter By</label>
          <div class="rg">
            <input type="radio" name="mode" id="mAll" value="all" checked>
            <label for="mAll"><i class="fas fa-globe"></i> All</label>
            <input type="radio" name="mode" id="mCo" value="company">
            <label for="mCo"><i class="fas fa-building"></i> Company</label>
            <input type="radio" name="mode" id="mCa" value="category">
            <label for="mCa"><i class="fas fa-tag"></i> Category</label>
          </div>
        </div>

        <div class="fi" id="companyGrp" style="display:none">
          <label>Company</label>
          <select id="fComp" class="form-control" style="width:180px"></select>
        </div>

        <div class="fi" id="categoryGrp" style="display:none">
          <label>Category</label>
          <select id="fCat" class="form-control" style="width:180px"></select>
        </div>

        <div class="fi">
          <label>Max Rows</label>
          <input type="number" id="limit" class="input-sm" value="1000" min="1" style="width:90px">
        </div>

        <div class="fi">
          <label>&nbsp;</label>
          <button id="btnLoad" class="bs bp"><i class="fas fa-download"></i> Load</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Info Banner -->
  <div id="infoBar" class="ib" style="display:none">
    <i class="fas fa-info-circle"></i>
    <span id="infoText"></span>
  </div>

  <!-- Action Bar -->
  <div class="ab">
    <div class="ab-btns">
      <button id="btnSave"    class="bs bg"><i class="fas fa-save"></i> Save</button>
      <button id="btnDiscard" class="bs bse"><i class="fas fa-undo"></i> Discard</button>
      <button id="btnRefresh" class="bs bse"><i class="fas fa-sync-alt"></i> Refresh</button>
    </div>
    <div class="sb">
      <div class="sd" id="sDot"></div>
      <span id="sTxt">No changes</span>
    </div>
  </div>

  <!-- Grid -->
  <div id="grid"></div>

</div>
{% endblock %}


{% block javascripts %}
{{ block.super }}
<script>
// =====================================================
// UTILITIES
// =====================================================
function getCk(n){const m=document.cookie.match('(^|;)\\s*'+n+'\\s*=\\s*([^;]+)');return m?m.pop():''}
const CSRF=getCk('csrftoken')||'{{ csrf_token }}';

function toast(t,ti,msg,d=3500){
  const c=document.getElementById('toastContainer'),
    ic={success:'fa-check-circle',error:'fa-times-circle',warning:'fa-exclamation-circle',info:'fa-info-circle'},
    el=document.createElement('div');
  el.className='toast '+t;
  el.innerHTML=`<i class="fas ${ic[t]}"></i><div class="toast-content"><div class="toast-title">${ti}</div><div class="toast-msg">${msg}</div></div><button class="toast-close"><i class="fas fa-times"></i></button>`;
  c.appendChild(el);
  el.querySelector('.toast-close').onclick=()=>el.remove();
  setTimeout(()=>el.remove(),d);
}

function showLoad(t='Loading…'){const o=document.getElementById('loadingOverlay');o.querySelector('.lt').textContent=t;o.classList.add('show')}
function hideLoad(){document.getElementById('loadingOverlay').classList.remove('show')}


// =====================================================
// SELECT2 (company / category)
// =====================================================
$('#fComp').select2({
  ajax:{url:'{% url "products:companies_autocomplete" %}',data:p=>({term:p.term}),processResults:d=>({results:d})},
  placeholder:'Search…',allowClear:true,minimumInputLength:1,width:'100%'
});
$('#fCat').select2({
  ajax:{url:'{% url "products:categories_autocomplete" %}',data:p=>({term:p.term}),processResults:d=>({results:d})},
  placeholder:'Search…',allowClear:true,minimumInputLength:1,width:'100%'
});

$('input[name="mode"]').on('change',function(){
  $('#companyGrp,#categoryGrp').hide();
  $('#fComp,#fCat').val(null).trigger('change');
  if(this.value==='company')$('#companyGrp').show();
  else if(this.value==='category')$('#categoryGrp').show();
});


// =====================================================
// STATE
// =====================================================
let specATerms  = [];
let changedMap  = new Map();   // id → { spec_1: val, purchase_price: val, … }
let isAuto      = false;
let table       = null;


// =====================================================
// BUILD COLUMNS DYNAMICALLY
// =====================================================
function buildCols(){
  const cols=[
    {formatter:"rownum", title:"#", width:50, frozen:true, hozAlign:"center"},
    {field:"product_code", title:"Code",  frozen:true, width:120},
    {field:"name",         title:"Name",  frozen:true, width:180},
    {field:"purchase_price", title:"P.Price", editor:"input", hozAlign:"right", width:95,
     formatter:"money", formatterParams:{precision:2}},
    {field:"present_stock", title:"Cur Stock", hozAlign:"right", width:90,
     cssClass:"default-cell"},
    {field:"default_stock", title:"Default", hozAlign:"right", width:85,
     cssClass:"default-cell"},
  ];

  specATerms.forEach(t=>{
    cols.push({
      field:      `spec_${t.id}`,
      title:      t.name,
      editor:     "input",
      hozAlign:   "right",
      width:      100,
      cssClass:   "spec-col-cell",
      headerSort: true,
    });
  });

  cols.push({
    field:      "_total",
    title:      "Spec Total",
    hozAlign:   "right",
    width:      100,
    cssClass:   "total-cell",
    headerSort: true,
  });

  return cols;
}


// =====================================================
// RECALCULATE TOTAL
// =====================================================
function recalcTotal(row){
  const d=row.getData();
  let t=0;
  specATerms.forEach(s=>{t+=parseFloat(d[`spec_${s.id}`])||0});
  isAuto=true;
  row.update({_total:Math.round(t*100)/100});
  isAuto=false;
}

function calcAllTotals(data){
  data.forEach(r=>{
    let t=0;
    specATerms.forEach(s=>{t+=parseFloat(r[`spec_${s.id}`])||0});
    r._total=Math.round(t*100)/100;
  });
}


// =====================================================
// INIT / REBUILD TABLE
// =====================================================
function initTable(data){
  if(table) table.destroy();

  calcAllTotals(data);

  table=new Tabulator("#grid",{
    height:     "60vh",
    layout:     "fitDataStretch",
    movableColumns: true,
    selectable: false,
    columns: