search-dropdown-fix.js

/**
 * Search Dropdown & Add Product Fix
 * =================================
 * 1. Khôi phục dropdown kết quả khi tìm kiếm thường
 * 2. Khôi phục nút "Thêm sản phẩm" mở modal
 */

(function() {
  'use strict';
  
  // === PATCH doSearch() để hiện dropdown ===
  // Ghi đè hàm doSearch gốc
  var originalDoSearch = window.doSearch;
  
  window.doSearch = function() {
    var input = document.getElementById('q');
    var sidebar = document.getElementById('sidebar');
    var grid = document.getElementById('grid');
    
    // Ẩn sidebar khi search
    if (sidebar) sidebar.style.display = 'none';
    
    // Tạo dropdown nếu chưa có
    var dropdown = document.getElementById('searchDropdown');
    if (!dropdown) {
      dropdown = document.createElement('div');
      dropdown.id = 'searchDropdown';
      dropdown.style.cssText = 'position:absolute;z-index:100;top:100%;left:0;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:10px;max-height:400px;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,0.1);margin-top:5px';
      input.parentNode.appendChild(dropdown);
    }
    
    var query = (input.value || '').trim();
    if (!query || query.length < 2) {
      dropdown.innerHTML = '';
      dropdown.style.display = 'none';
      if (originalDoSearch) originalDoSearch();
      return;
    }
    
    // Tìm kiếm trong dữ liệu
    var D = window.D || [];
    var results = [];
    var qNorm = query.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/đ/g, 'd');
    
    for (var i = 0; i < D.length && results.length < 10; i++) {
      var p = D[i];
      var name = (p.name || '').toLowerCase();
      var sku = (p.sku || '').toLowerCase();
      var model = (p.sku || p.mod || '');
      
      if (name.indexOf(qNorm) !== -1 || sku.indexOf(qNorm) !== -1) {
        results.push(p);
      }
    }
    
    if (results.length === 0) {
      dropdown.innerHTML = '<div style="padding:12px;color:#64748b;font-size:.85rem">Không tìm thấy sản phẩm</div>';
      dropdown.style.display = 'block';
      return;
    }
    
    // Render dropdown results
    dropdown.innerHTML = results.map(function(p, i) {
      var idx = window.D.indexOf(p);
      var brandColor = p.brand === 'Eurogold' ? '#c8102c' : (p.brand === 'Grob' ? '#2e7d32' : '#003f62');
      return '<div data-idx="' + idx + '" style="padding:10px 12px;cursor:pointer;border-bottom:1px solid #e2e8f0;transition:background .2s;font-size:.82rem;display:flex;gap:10px;align-items:center" ' +
        'onmouseover="this.style.background=\'#f8fafc\'" onmouseout="this.style.background=\'#fff\'">' +
        '<img src="' + (p.image || '') + '" style="width:48px;height:48px;object-fit:contain;background:#f8fafc;border-radius:6px" onerror="this.style.display=\'none\'">' +
        '<div style="flex:1"><div style="font-weight:600;color:#0f172a;margin-bottom:2px">' + p.name + '</div>' +
        '<div style="font-size:.72rem;color:' + brandColor + '">' + model + ' ' + (p.price ? ' — ' + p.price : '') + '</div></div>' +
        '<button onclick="event.stopPropagation();addToCart({id:\'' + p.sku + '\',name:\'' + p.name.replace(/'/g, "\\'") + '\',price:' + (p.priceNum || 0) + ',sku:\'' + p.sku + '\',image:\'' + (p.image || '') + '\',brand:\'' + p.brand + '\'});this.innerHTML=\'✅\';this.disabled=true;" ' +
        'style="background:#25d366;color:#fff;border:none;border-radius:5px;padding:4px 8px;font-size:.7rem;cursor:pointer">Thêm giỏ</button></div>';
    }).join('');
    
    dropdown.style.display = 'block';
    
    // Bind click to show detail
    setTimeout(function() {
      dropdown.querySelectorAll('[data-idx]').forEach(function(el) {
        el.onclick = function() {
          var idx = parseInt(this.getAttribute('data-idx'));
          showDetail(idx);
          dropdown.innerHTML = '';
          dropdown.style.display = 'none';
          input.value = '';
        };
      });
    }, 100);
  };
  
  // Ẩn dropdown khi click ngoài
  document.addEventListener('click', function(e) {
    var dropdown = document.getElementById('searchDropdown');
    var input = document.getElementById('q');
    if (dropdown && input && !input.contains(e.target) && !dropdown.contains(e.target)) {
      dropdown.innerHTML = '';
      dropdown.style.display = 'none';
    }
  });
  
  // === THÊM NÚT "THÊM SẢN PHẨM" ===
  // Kiểm tra nút đã tồn tại chưa
  function addAddProductButton() {
    var existing = document.getElementById('addProductQuickBtn');
    if (existing) return;
    
    // Tạo nút
    var btn = document.createElement('button');
    btn.id = 'addProductQuickBtn';
    btn.innerHTML = '<i class="fas fa-plus"></i> Thêm sản phẩm';
    btn.style.cssText = 'padding:8px 16px;background:#003f62;color:#fff;border:none;border-radius:8px;font-size:.8rem;cursor:pointer;margin-left:10px';
    btn.onclick = function() {
      // Mở modal thêm sản phẩm
      var modal = document.getElementById('addProductOverlay');
      if (modal) {
        modal.classList.add('open');
        modal.style.display = 'flex';
      }
    };
    
    // Thêm vào header
    var navIcons = document.querySelector('.nav-icons');
    if (navIcons) {
      navIcons.insertBefore(btn, navIcons.firstChild);
    }
    
    console.log('[Search Fix] Added "Thêm sản phẩm" button');
  }
  
  // Chờ DOM sẵn sàng
  setTimeout(addAddProductButton, 2000);
  
  console.log('[Search Dropdown Fix] Loaded');
})();