Thêm tìm kiếm catalogue OCR vào thanh tìm kiếm chính: khi search sản phẩm cũng hiển thị các trang catalogue liên quan

index.html

@@ -366,6 +366,7 @@ textarea.form-input{height:120px;resize:vertical}
 </div>
 <div class="pg" id="grid"></div>
 <div class="pagination" id="pag"></div>
+<div id="catSearchResults"></div>
 </main>
 </div>
 </div>
@@ -643,11 +644,11 @@ document.getElementById('tab-'+id).classList.add('active');
 // ===== ACTIONS =====
 function setCat(s){S.cat=s;S.pg=1;updActive('.cat-item','data-s',s);render();closeMsb()}
 function setPrice(min,max,i){S.pmin=min;S.pmax=max;S.pg=1;document.querySelectorAll('.pr-item').forEach((e,j)=>e.classList.toggle('active',j===i));render();closeMsb()}
-function doSearch(){S.q=document.getElementById('q').value.trim();S.pg=1;render()}
+function doSearch(){S.q=document.getElementById('q').value.trim();S.pg=1;render();renderMainCatSearch()}
 function doSort(){S.sort=document.getElementById('ss').value;S.pg=1;render()}
 function setV(v){S.view=v;document.getElementById('gb').classList.toggle('active',v==='g');document.getElementById('lb').classList.toggle('active',v==='l');render()}
 function goPg(p){let f=getF(),tp=Math.ceil(f.length/PP);if(p<1||p>tp)return;S.pg=p;render();document.querySelector('.toolbar').scrollIntoView({behavior:'smooth',block:'start'})}
-function resetAll(){S={cat:'all',q:'',pmin:0,pmax:1e15,sort:'default',pg:1,view:S.view};document.getElementById('q').value='';document.getElementById('ss').value='default';updActive('.cat-item','data-s','all');document.querySelectorAll('.pr-item').forEach((e,i)=>e.classList.toggle('active',i===0));render()}
+function resetAll(){S={cat:'all',q:'',pmin:0,pmax:1e15,sort:'default',pg:1,view:S.view};document.getElementById('q').value='';document.getElementById('ss').value='default';updActive('.cat-item','data-s','all');document.querySelectorAll('.pr-item').forEach((e,i)=>e.classList.toggle('active',i===0));render();let csr=document.getElementById('catSearchResults');if(csr)csr.innerHTML='';}
 function updActive(sel,attr,val){document.querySelectorAll(sel).forEach(e=>e.classList.toggle('active',e.getAttribute(attr)===val))}
 function closeMsb(){document.getElementById('msb').classList.remove('open')}
 document.addEventListener('keydown',e=>{if(e.key==='Escape')goBack();if(e.key==='/'&&document.activeElement.tagName!=='INPUT'){e.preventDefault();document.getElementById('q').focus()}});
@@ -797,6 +798,59 @@ let re=new RegExp('('+q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')+')','gi');
 return text.replace(re,'<mark style="background:var(--al);color:var(--d);padding:1px 2px;border-radius:2px">$1</mark>');
 }
 
+// ===== MAIN SEARCH → CATALOGUE OCR RESULTS =====
+function renderMainCatSearch(){
+let container=document.getElementById('catSearchResults');
+if(!container)return;
+let q=S.q;
+if(!q||q.length<2){container.innerHTML='';return;}
+// Ensure OCR data and catalogue list are loaded
+if(!catOcrData){
+loadCatOcr().then(()=>{
+if(!CAT_LIST.length){
+fetch('catalogues.json').then(r=>r.json()).then(data=>{CAT_LIST=data;renderMainCatSearch()});
+}else{renderMainCatSearch()}
+});
+return;
+}
+if(!CAT_LIST.length){
+fetch('catalogues.json').then(r=>r.json()).then(data=>{CAT_LIST=data;renderMainCatSearch()});
+return;
+}
+let ql=q.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');
+let results=[];
+for(let ci=0;ci<CAT_LIST.length;ci++){
+let ocr=catOcrData&&catOcrData[ci]?catOcrData[ci].texts:[];
+let pages=CAT_LIST[ci].pages;
+for(let pi=0;pi<pages.length;pi++){
+let txt=(ocr[pi]||'').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');
+if(txt.includes(ql)){
+results.push({catIdx:ci,catName:CAT_LIST[ci].name,pageIdx:pi,pageNum:pi+1,img:pages[pi],text:ocr[pi]||''});
+}
+}
+}
+if(!results.length){container.innerHTML='';return;}
+let shown=results.slice(0,8);
+let moreCount=results.length-shown.length;
+container.innerHTML=`
+<div style="margin-top:24px;background:#fff;border-radius:var(--r);padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.06)">
+<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px">
+<h3 style="font-size:.95rem;font-weight:700;color:var(--d);display:flex;align-items:center;gap:8px">
+<i class="fas fa-book-open" style="color:var(--a)"></i> Tìm thấy trong Catalogue: <strong style="color:var(--p)">${results.length} trang</strong>
+</h3>
+${results.length>8?`<button onclick="showPage('catalogue');document.getElementById('catSearch').value='${q.replace(/'/g,"\\'")}';setTimeout(searchCatalogue,300)" style="padding:6px 16px;border:2px solid var(--p);border-radius:8px;background:#fff;color:var(--p);font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit">Xem tất cả ${results.length} trang <i class="fas fa-arrow-right" style="margin-left:4px"></i></button>`:''}
+</div>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px">
+${shown.map(r=>`<div style="position:relative;border-radius:10px;overflow:hidden;border:2px solid var(--gl);cursor:pointer;transition:all .2s;aspect-ratio:1.4" onmouseover="this.style.borderColor='var(--p)';this.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(--gl)';this.style.transform=''" onclick="openCatImage('${r.img.replace(/'/g,"\\'")}')">
+<img src="${r.img}" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover">
+<div style="position:absolute;top:6px;left:6px;background:var(--p);color:#fff;padding:2px 8px;border-radius:5px;font-size:.6rem;font-weight:700">${r.catName} — Trang ${r.pageNum}</div>
+<div style="position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.75));padding:8px 10px 6px;color:#fff;font-size:.65rem;line-height:1.3">${highlightText(r.text.substring(0,100),q)}...</div>
+</div>`).join('')}
+</div>
+${moreCount>0?`<div style="text-align:center;margin-top:12px"><button onclick="showPage('catalogue');document.getElementById('catSearch').value='${q.replace(/'/g,"\\'")}';setTimeout(searchCatalogue,300)" style="padding:8px 20px;border:none;background:var(--p);color:#fff;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit">+${moreCount} trang khác trong Catalogue <i class="fas fa-arrow-right" style="margin-left:4px"></i></button></div>`:''}
+</div>`;
+}
+
 // ===== NAVIGATION =====
 let currentPage='products';