<style type="text/css">
.brb-btn.nws{color:#fff;background:linear-gradient(120deg,#6f42c1,#8a5cd6);box-shadow:0 4px 14px rgba(111,66,193,.32);}
.brb-nws-rowbtn{margin-top:5px;border:1px solid #d9c9f2;background:#f6f1fd;color:#5a32a3;border-radius:8px;font-size:9.5px;font-weight:800;padding:3px 8px;cursor:pointer;}
.brb-nws-rowbtn:hover{background:#ece2fb;}
.nws-ov{position:fixed;inset:0;background:rgba(16,28,40,.62);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;padding:14px;z-index:10001;}
.nws-ov.show{display:flex;}
.nws-box{width:100%;max-width:660px;max-height:92vh;background:#fff;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);}
.nws-head{background:linear-gradient(120deg,#4a2a8a,#6f42c1);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;}
.nws-head b{font-size:14px;} .nws-head small{opacity:.9;}
.nws-head .x{margin-left:auto;border:0;background:rgba(255,255,255,.18);color:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:14px;}
.nws-body{padding:12px 16px;overflow-y:auto;}
.nws-sec{font-size:10px;font-weight:800;letter-spacing:.6px;color:#69748a;text-transform:uppercase;margin:10px 0 6px;}
.nws-chips{display:flex;flex-wrap:wrap;gap:5px;}
.nws-chip{border:1px solid #dfe6ee;background:#f4f7fa;border-radius:16px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;color:#3c4658;}
.nws-chip.on{background:#6f42c1;color:#fff;border-color:#6f42c1;}
.nws-chip.c-NODA.on{background:#d6453f;border-color:#d6453f;} .nws-chip.c-KUSUT.on{background:#c9821a;border-color:#c9821a;}
.nws-chip.c-BAU.on{background:#2f6fb0;border-color:#2f6fb0;} .nws-chip.c-LAIN.on{background:#56657a;border-color:#56657a;}
.nws-toggle{border:1px solid #dfe6ee;background:#fff;border-radius:8px;padding:3px 8px;font-size:10px;font-weight:800;cursor:pointer;margin-left:6px;}
.nws-toggle.on{background:#0f766e;color:#fff;border-color:#0f766e;}
.nws-manual{width:100%;border:1px solid #dfe6ee;border-radius:8px;padding:7px;font-size:12px;margin-top:6px;}
.nws-num{border:1px solid #e3e8ef;border-radius:10px;padding:8px 10px;margin-bottom:8px;background:#fbfcfe;}
.nws-num-top{display:flex;align-items:center;gap:8px;cursor:pointer;}
.nws-no{font-weight:900;color:#6f42c1;min-width:38px;}
.nws-nm{flex:1;font-size:12px;font-weight:700;}
.nws-acts{display:flex;gap:4px;}
.nws-acts button,.nws-foto{border:1px solid #dfe6ee;background:#fff;border-radius:7px;font-size:11px;padding:3px 7px;cursor:pointer;}
.nws-foto input{display:none;}
.nws-notes{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;}
.nws-note{background:#f1ecfb;color:#5a32a3;border-radius:14px;padding:3px 9px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:5px;}
.nws-del{cursor:pointer;color:#b3261c;font-weight:900;}
.nws-phbox{margin-top:6px;} .nws-phbox img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid #dfe6ee;}
.nws-hist{max-height:150px;overflow-y:auto;border:1px solid #e3e8ef;border-radius:9px;padding:7px;margin-top:6px;background:#fff;display:none;}
.nws-hist.show{display:block;}
.nws-hist .h{border-bottom:1px dashed #e3e8ef;padding:5px 4px;font-size:11px;cursor:pointer;}
.nws-hist .h:hover{background:#f6f1fd;}
.nws-foot{border-top:1px solid #e3e8ef;padding:10px 16px;display:flex;gap:8px;justify-content:flex-end;background:#fbfdfc;}
.nws-foot button{border:0;border-radius:9px;padding:9px 16px;font-weight:800;font-size:12px;cursor:pointer;}
.nws-save{color:#fff;background:linear-gradient(120deg,#0f766e,#1f9d63);}
.nws-ghost{background:#eef1f5;color:#56657a;border:1px solid #d7dde6 !important;}
</style>

<div class="nws-ov" id="nwsOv">
<div class="nws-box">
<div class="nws-head"><span style="font-size:20px;">📝</span><div><b id="nwsTitle">Catatan QC (NWS)</b><br><small id="nwsSub">—</small></div><button type="button" class="x" id="nwsX">✕</button></div>
<div class="nws-body">
<div class="nws-sec">1 · Jenis Masalah</div>
<div class="nws-chips" id="nwsCat"></div>
<div class="nws-sec">2 · Posisi (boleh kosong) <button type="button" class="nws-toggle" id="nwsPosTgl">Pakaian</button></div>
<div class="nws-chips" id="nwsPos"></div>
<div class="nws-sec" id="nwsKetLbl">3 · Keterangan (boleh kosong)</div>
<div class="nws-chips" id="nwsKet"></div>
<textarea class="nws-manual" id="nwsManual" rows="2" placeholder="Ketik keterangan (wajib untuk LAINNYA)…" style="display:none;"></textarea>
<div class="nws-sec">4 · Terapkan ke Num (centang) &nbsp;<button type="button" class="nws-toggle" id="nwsAll">centang semua</button> &nbsp;<button type="button" class="nws-toggle" id="nwsPrintAll">🖨 Cetak Semua</button> &nbsp;<button type="button" class="nws-toggle" id="nwsHistBtn">🕘 History</button></div>
<div class="nws-hist" id="nwsHist"></div>
<div id="nwsNums"></div>
</div>
<div class="nws-foot">
<button type="button" class="nws-ghost" id="nwsBack">↩ Tutup</button>
<button type="button" class="nws-save" id="nwsSave">💾 Simpan ke Num Terpilih</button>
</div>
</div>
</div>

<script type="text/javascript">
var NWS_AJAX = '<?php echo app_url(); ?>barber/';
var NWS_IMG  = '<?php echo base_url().AZAPP."assets/nws/"; ?>';
(function(){
var curGroup=null, curItems=[], optData=null, selKat='', selPos='', selKet='', posType='posisi_pakaian';
var LIN_KW=['gordyn','gorden','sprei','sarung','bed cover','bedcover','selimut','handuk','taplak','linen','keset','jubah','toga'];
function esc(s){ s=(s==null?'':String(s)); return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
// tangkap bill aktif dari tombol Selesai Proses / tombol 📝 per baris
document.addEventListener('click', function(e){
var go=e.target.closest('.brb-act.go'); if(go){ curGroup=go.getAttribute('data-id'); return; }
var rb=e.target.closest('.brb-nws-rowbtn'); if(rb){ openNws(rb.getAttribute('data-id')); return; }
}, true);
// suntik tombol Add Note di footer modal + tombol 📝 di tiap baris
function inject(){
var foot=document.querySelector('.brb-modal-foot');
if(foot && !document.getElementById('brbNwsAdd')){
var b=document.createElement('button'); b.type='button'; b.id='brbNwsAdd'; b.className='brb-btn nws'; b.innerHTML='📝 Add Note (NWS)';
foot.insertBefore(b, foot.firstChild);
b.addEventListener('click', function(){ if(curGroup) openNws(curGroup); });
}
document.querySelectorAll('tr.brb-row').forEach(function(tr){
var cell=tr.querySelector('td.brb-act-cell');
if(cell && !cell.querySelector('.brb-nws-rowbtn')){
var b=document.createElement('button'); b.type='button'; b.className='brb-nws-rowbtn'; b.innerHTML='📝 NWS';
b.setAttribute('data-id', tr.getAttribute('data-id')); cell.appendChild(b);
}
});
}
inject(); setTimeout(inject, 900);
function openNws(id){
curGroup=id; selKat=''; selPos=''; selKet='';
document.getElementById('nwsNums').innerHTML='<div style="text-align:center;padding:16px;color:#69748a;">Memuat…</div>';
document.getElementById('nwsOv').classList.add('show');
var fd=new FormData(); fd.append('id', id);
fetch(NWS_AJAX+'nws_data',{method:'POST',body:fd}).then(function(r){return r.json();}).then(function(res){
if(res.err_code!==0){ alert(res.err_message); closeNws(); return; }
curItems=res.items; optData=res.options;
document.getElementById('nwsSub').textContent=res.code+' · '+res.customer;
// auto pilih linen bila jenis barang pertama mengandung kata linen
posType='posisi_pakaian';
if(curItems.length){ var nm=(curItems[0].product_name||'').toLowerCase(); for(var i=0;i<LIN_KW.length;i++){ if(nm.indexOf(LIN_KW[i])>-1){ posType='posisi_linen'; break; } } }
renderCats(); renderPos(); renderKet(); renderNums();
}).catch(function(){ alert('Gagal menghubungi server'); closeNws(); });
}
function closeNws(){ document.getElementById('nwsOv').classList.remove('show'); }
function renderCats(){
var el=document.getElementById('nwsCat'); el.innerHTML='';
['NODA','KUSUT','BAU','LAIN'].forEach(function(k){
var b=document.createElement('button'); b.type='button'; b.className='nws-chip c-'+k+(selKat===k?' on':'');
b.textContent=(k==='NODA'?'🟤 Noda':k==='KUSUT'?'🌀 Kusut':k==='BAU'?'👃 Aroma Bau':'✏️ Lainnya');
b.onclick=function(){ selKat=(selKat===k?'':k); selKet=''; renderCats(); renderKet(); };
el.appendChild(b);
});
}
function renderPos(){
var el=document.getElementById('nwsPos'); el.innerHTML='';
var tgl=document.getElementById('nwsPosTgl'); tgl.textContent=(posType==='posisi_linen'?'Linen':'Pakaian'); tgl.className='nws-toggle'+(posType==='posisi_linen'?' on':'');
var b0=document.createElement('button'); b0.type='button'; b0.className='nws-chip'+(selPos===''?' on':''); b0.textContent='– kosongkan';
b0.onclick=function(){ selPos=''; renderPos(); }; el.appendChild(b0);
(optData[posType]||[]).forEach(function(p){
var b=document.createElement('button'); b.type='button'; b.className='nws-chip'+(selPos===p?' on':''); b.textContent=p;
b.onclick=function(){ selPos=(selPos===p?'':p); renderPos(); }; el.appendChild(b);
});
}
function renderKet(){
var el=document.getElementById('nwsKet'); var man=document.getElementById('nwsManual'); var lbl=document.getElementById('nwsKetLbl');
el.innerHTML='';
if(selKat==='LAIN'){ el.style.display='none'; lbl.style.display='none'; man.style.display='block'; return; }
man.style.display='none'; lbl.style.display=''; el.style.display='';
if(selKat==='BAU'){ el.innerHTML='<span style="font-size:11px;color:#69748a;">(tidak perlu keterangan)</span>'; return; }
var list=(selKat==='NODA')?(optData.ket_noda||[]):(selKat==='KUSUT'?(optData.ket_kusut||[]):[]);
var b0=document.createElement('button'); b0.type='button'; b0.className='nws-chip'+(selKet===''?' on':''); b0.textContent='– kosongkan';
b0.onclick=function(){ selKet=''; renderKet(); }; el.appendChild(b0);
list.forEach(function(p){
var b=document.createElement('button'); b.type='button'; b.className='nws-chip'+(selKet===p?' on':''); b.textContent=p;
b.onclick=function(){ selKet=(selKet===p?'':p); renderKet(); }; el.appendChild(b);
});
}
function renderNums(){
var el=document.getElementById('nwsNums'); el.innerHTML='';
curItems.forEach(function(it){
var d=document.createElement('div'); d.className='nws-num';
var h='<label class="nws-num-top"><input type="checkbox" class="nws-chk" value="'+it.idtransaction+'"> <span class="nws-no">'+it.n+'/'+it.tot+'</span> <span class="nws-nm">'+esc(it.product_name)+'</span></label>';
h+='<span class="nws-acts">';
if(it.notes.length) h+='<button type="button" class="nws-print" data-n="'+it.n+'" title="Cetak NWS num ini">🖨</button>';
h+='<label class="nws-foto" title="Foto bukti (opsional)">📷<input type="file" accept="image/*" class="nws-ph" data-tid="'+it.idtransaction+'"></label>';
h+='</span>';
if(it.notes.length){
h+='<div class="nws-notes">';
it.notes.forEach(function(nn){
h+='<span class="nws-note">'+esc(nn.kategori)+(nn.posisi?' · '+esc(nn.posisi):'')+(nn.keterangan?' · '+esc(nn.keterangan):'')+(nn.note_manual?' · '+esc(nn.note_manual):'')+'<span class="nws-del" data-nid="'+nn.id+'">✕</span></span>';
});
h+='</div>';
}
if(it.photo) h+='<div class="nws-phbox"><img src="'+NWS_IMG+esc(it.photo)+'"></div>';
d.innerHTML=h; el.appendChild(d);
});
}
document.getElementById('nwsPosTgl').onclick=function(){ posType=(posType==='posisi_pakaian'?'posisi_linen':'posisi_pakaian'); selPos=''; renderPos(); };
document.getElementById('nwsAll').onclick=function(){
var chks=document.querySelectorAll('.nws-chk'); var all=true;
chks.forEach(function(c){ if(!c.checked) all=false; });
chks.forEach(function(c){ c.checked=!all; });
};
document.getElementById('nwsPrintAll').onclick=function(){ window.open(NWS_AJAX+'nws_print?id='+curGroup+'&num=all','_blank'); };
document.getElementById('nwsHistBtn').onclick=function(){
var box=document.getElementById('nwsHist');
if(box.classList.contains('show')){ box.classList.remove('show'); return; }
fetch(NWS_AJAX+'nws_history').then(function(r){return r.json();}).then(function(res){
box.innerHTML='';
(res.list||[]).forEach(function(hh){
var d=document.createElement('div'); d.className='h';
d.textContent=hh.kategori+(hh.keterangan?' · '+hh.keterangan:'')+(hh.posisi?' · '+hh.posisi:'')+(hh.note_manual?' · '+hh.note_manual:'');
d.onclick=function(){ selKat=hh.kategori; selPos=hh.posisi||''; selKet=hh.keterangan||''; document.getElementById('nwsManual').value=hh.note_manual||''; renderCats(); renderPos(); renderKet(); box.classList.remove('show'); };
box.appendChild(d);
});
if(!(res.list||[]).length) box.innerHTML='<div style="font-size:11px;color:#69748a;">Belum ada history.</div>';
box.classList.add('show');
});
};
document.getElementById('nwsX').onclick=closeNws;
document.getElementById('nwsBack').onclick=closeNws;
document.getElementById('nwsSave').onclick=function(){
if(!selKat){ alert('Pilih jenis masalah dahulu.'); return; }
var tids=[]; document.querySelectorAll('.nws-chk:checked').forEach(function(c){ tids.push(c.value); });
if(!tids.length){ alert('Centang minimal 1 num.'); return; }
var fd=new FormData();
fd.append('id',curGroup); fd.append('kategori',selKat); fd.append('posisi',selPos); fd.append('keterangan',selKet);
fd.append('note_manual',document.getElementById('nwsManual').value); fd.append('tids',tids.join(','));
fetch(NWS_AJAX+'nws_save',{method:'POST',body:fd}).then(function(r){return r.json();}).then(function(res){
if(res.err_code!==0){ alert(res.err_message); return; }
openNws(curGroup); // refresh daftar
});
};
document.getElementById('nwsNums').addEventListener('click', function(e){
var pr=e.target.closest('.nws-print'); if(pr){ window.open(NWS_AJAX+'nws_print?id='+curGroup+'&num='+pr.getAttribute('data-n'),'_blank'); return; }
var del=e.target.closest('.nws-del'); if(del){
var fd=new FormData(); fd.append('nid', del.getAttribute('data-nid'));
fetch(NWS_AJAX+'nws_delete',{method:'POST',body:fd}).then(function(){ openNws(curGroup); });
}
});
document.getElementById('nwsNums').addEventListener('change', function(e){
var ph=e.target.closest('.nws-ph'); if(!ph) return;
var fd=new FormData(); fd.append('idtransaction', ph.getAttribute('data-tid')); fd.append('photo', ph.files[0]);
fetch(NWS_AJAX+'nws_photo',{method:'POST',body:fd}).then(function(r){return r.json();}).then(function(res){
if(res.err_code!==0){ alert(res.err_message); } else { openNws(curGroup); }
});
});
})();
</script>
<?php if ($this->session->userdata('role_name') == 'administrator'): ?>
<script type="text/javascript">
(function(){
function addBtnAnalisa(){
var tb=document.querySelector('.toolbar');
if(tb && !document.getElementById('btnNwsAnalysis')){
var b=document.createElement('button');
b.type='button'; b.id='btnNwsAnalysis'; b.className='b-pdf';
b.style.background='#6f42c1';
b.innerHTML='📊 Analisa NWS';
b.onclick=function(){ window.open('<?php echo app_url(); ?>barber/nws_analysis', '_blank'); };
tb.insertBefore(b, tb.querySelector('.brb-filter'));
}
}
addBtnAnalisa(); setTimeout(addBtnAnalisa, 900);
})();
</script>
<?php endif; ?>