Fix match detail UI: add lineups section, restore proper rendering

static/match_detail.js

@@ -5,7 +5,6 @@
   if(window._mdLoaded) return;
   window._mdLoaded = true;
 
-  // Inject styles
   if(!document.getElementById('md-css')){
     const s=document.createElement('style');
     s.id='md-css';
@@ -62,52 +61,39 @@
 
   function esc(s){return String(s||'').replace(/[&<>"']/g,function(m){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]})}
 
-  // === 1. Override openMatch to always set _currentEventId ===
   const _origOpenMatch = window.openMatch;
   window.openMatch = function(id){
     if(id) window._currentEventId = String(id);
     if(_origOpenMatch) _origOpenMatch.call(this, id);
-    // Switch to detail tab
     setTimeout(function(){
       injectDetailTab();
       loadMatchTab('detail');
     }, 300);
   };
 
-  // === 2. Override loadMatchTab to handle 'detail' tab ===
   const _origLoadMatchTab = window.loadMatchTab;
   window.loadMatchTab = async function(tab){
     if(tab !== 'detail'){
       if(_origLoadMatchTab) _origLoadMatchTab.call(this, tab);
       return;
     }
-
-    // Update tab UI — highlight the Chi tiết tab
     document.querySelectorAll('.mo-tab').forEach(function(t){ t.classList.remove('active'); });
     document.querySelectorAll('.mo-tab').forEach(function(t){
       const txt = t.textContent || '';
       if(txt.includes('Chi tiết') || txt.includes('📋')) t.classList.add('active');
     });
-
     const el = document.getElementById('mo-body');
     if(!el) return;
     el.innerHTML = '<div class="md-no-data"><div style="display:inline-block;width:20px;height:20px;border:2px solid #333;border-top-color:#5cb87a;border-radius:50%;animation:mdspin .8s linear infinite;vertical-align:middle;margin-right:8px"></div>Đang tải chi tiết trận đấu...</div>';
-
     const eventId = window._currentEventId;
     if(!eventId){
       el.innerHTML = '<div class="md-err">⚠️ Không tìm thấy mã trận đấu.<br><small>Hãy click vào một trận đấu cụ thể từ danh sách livescore.</small></div>';
       return;
     }
-
     try{
       const r = await fetch('/api/match/' + eventId + '/detail');
       if(!r.ok){
-        // Handle HTTP errors gracefully
-        if(r.status === 404){
-          el.innerHTML = '<div class="md-warn">⚠️ Không tìm thấy dữ liệu trận đấu.<br><small>Event ID: ' + esc(String(eventId)) + '</small><br><small style="color:#888">Trận đấu có thể chưa được cập nhật trên bongda.com.vn</small></div>';
-        } else {
-          el.innerHTML = '<div class="md-err">⚠️ Lỗi máy chủ (' + r.status + ').<br><small>Event ID: ' + esc(String(eventId)) + '</small><br><button onclick="window.loadMatchTab(\'detail\')" style="margin-top:8px;background:#0066cc;border:none;color:#fff;padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer">Thử lại</button></div>';
-        }
+        el.innerHTML = '<div class="md-err">⚠️ Lỗi máy chủ (' + r.status + ').<br><small>Event ID: ' + esc(String(eventId)) + '</small><br><button onclick="window.loadMatchTab(\'detail\')" style="margin-top:8px;background:#0066cc;border:none;color:#fff;padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer">Thử lại</button></div>';
         return;
       }
       const d = await r.json();
@@ -121,13 +107,12 @@
     }
   };
 
-  // === 3. Render match detail ===
   function renderMatchDetail(el, data){
     let h = '';
     let hasAnyContent = false;
-
-    // 0. Pre-match info card (teams, league, date, stadium)
     const info = data.info || {};
+
+    // 0. Pre-match info card
     if(info.home_team && info.away_team){
       hasAnyContent = true;
       h += '<div class="md-pre-match">';
@@ -152,16 +137,12 @@
       h += '</div>';
     } else if(data.pre_match_html && data.pre_match_html.length > 10){
       hasAnyContent = true;
-      // Fallback: render raw HTML
-      let clean = data.pre_match_html
-        .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
-        .replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi, '')
-        .replace(/<ins[^>]*>[\s\S]*?<\/ins>/gi, '');
+      let clean = data.pre_match_html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '').replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi, '').replace(/<ins[^>]*>[\s\S]*?<\/ins>/gi, '');
       h += '<div class="md-sec"><div class="md-sec-title">📋 Thông tin trận đấu</div>';
       h += '<div class="md-preview-text">' + clean + '</div></div>';
     }
 
-    // 1. H2H Stats comparison (only show if has non-zero data)
+    // 1. H2H Stats comparison
     if(data.h2h_stats_parsed && Object.keys(data.h2h_stats_parsed).length > 0){
       const parsed = data.h2h_stats_parsed;
       const hasNonZero = Object.values(parsed).some(s => s.home !== "0" || s.away !== "0");
@@ -185,8 +166,7 @@
     if(data.h2h && data.h2h.length > 0){
       hasAnyContent = true;
       h += '<div class="md-sec"><div class="md-sec-title">🔄 Lịch sử đối đầu</div>';
-      const h2hList = data.h2h.slice(0, 10);
-      h2hList.forEach(function(m){
+      data.h2h.slice(0, 10).forEach(function(m){
         h += '<div class="md-h2h-item">';
         h += '<span class="md-h2h-date">'+esc(m.date||'')+'</span>';
         if(m.league) h += '<span class="md-h2h-league">'+esc(m.league)+'</span>';
@@ -197,58 +177,60 @@
         h += '</span></div>';
       });
       h += '</div>';
+    } else if(data.h2h_html && data.h2h_html.length > 10){
+      hasAnyContent = true;
+      h += '<div class="md-sec"><div class="md-sec-title">🔄 Lịch sử đối đầu</div>';
+      h += '<div>' + data.h2h_html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi,'').replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi,'') + '</div></div>';
     }
 
     // 3. Team form
     if((data.home_form && data.home_form.length > 0) || (data.away_form && data.away_form.length > 0)){
       hasAnyContent = true;
       h += '<div class="md-sec"><div class="md-sec-title">📈 Phong độ gần đây</div>';
-
       if(data.home_form && data.home_form.length > 0){
         h += '<div class="md-form-section">';
         h += '<div class="md-form-team-label">🏠 Đội nhà</div>';
-        data.home_form.slice(0, 5).forEach(function(m){
-          h += renderFormItem(m);
-        });
+        data.home_form.slice(0, 5).forEach(function(m){ h += renderFormItem(m); });
         h += '</div>';
       }
-
       if(data.away_form && data.away_form.length > 0){
         h += '<div class="md-form-section">';
         h += '<div class="md-form-team-label">✈️ Đội khách</div>';
-        data.away_form.slice(0, 5).forEach(function(m){
-          h += renderFormItem(m);
-        });
+        data.away_form.slice(0, 5).forEach(function(m){ h += renderFormItem(m); });
         h += '</div>';
       }
       h += '</div>';
     }
 
-    // 4. Player performance stats
+    // 4. Lineups
+    if(data.lineups_html && data.lineups_html.length > 10){
+      hasAnyContent = true;
+      h += '<div class="md-sec"><div class="md-sec-title">📋 Đội hình</div>';
+      h += '<div>' + data.lineups_html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi,'').replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi,'') + '</div></div>';
+    }
+
+    // 5. Player performance stats
     if(data.stats_html && data.stats_html.length > 10){
       hasAnyContent = true;
       h += '<div class="md-sec"><div class="md-sec-title">🌟 Thông số cầu thủ</div>';
       h += '<div>' + data.stats_html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi,'').replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi,'') + '</div></div>';
     }
 
-    // 5. Commentaries (live match info)
+    // 6. Commentaries
     if(data.commentaries_html && data.commentaries_html.length > 10){
       hasAnyContent = true;
       h += '<div class="md-sec"><div class="md-sec-title">📢 Diễn biến</div>';
       h += '<div class="md-preview-text">' + data.commentaries_html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi,'').replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi,'') + '</div></div>';
     }
 
-    // If no content at all, show appropriate message
     if(!h){
       if(data.found === false){
-        h = '<div class="md-warn">⚠️ Không tìm thấy dữ liệu trận đấu.<br><small>Event ID: ' + esc(String(data.event_id||'')) + '</small><br><small style="color:#888;margin-top:4px;display:block">Nguyên nhân có thể:<br>• Mã trận đấu không đúng<br>• Trận đấu chưa được cập nhật trên bongda.com.vn<br>• Dữ liệu chưa có sẵn (trận đấu quá mới hoặc đã kết thúc lâu)</small></div>';
+        h = '<div class="md-warn">⚠️ Không tìm thấy dữ liệu trận đấu.<br><small>Event ID: ' + esc(String(data.event_id||'')) + '</small><br><small style="color:#888;margin-top:4px;display:block">Nguyên nhân có thể:<br>• Mã trận đấu không đúng<br>• Trận đấu chưa được cập nhật<br>• Dữ liệu chưa có sẵn</small></div>';
       } else {
         h = '<div class="md-no-data">⏳ Chưa có chi tiết cho trận đấu này.<br><small style="color:#666">Dữ liệu sẽ cập nhật khi giải khởi tranh hoặc trận đấu bắt đầu.</small></div>';
       }
     }
-
     el.innerHTML = h;
-    // Prevent link navigation inside overlay
     el.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', function(e){ e.preventDefault(); }); });
   }
 
@@ -264,7 +246,6 @@
     return h;
   }
 
-  // === 4. Inject "Chi tiết" tab into overlay ===
   function injectDetailTab(){
     const tabs = document.querySelector('.mo-tabs');
     if(!tabs || document.querySelector('.mo-tab-detail')) return;
@@ -275,7 +256,6 @@
     tabs.insertBefore(d, tabs.firstChild);
   }
 
-  // === 5. Intercept clicks in livescore to capture event_id ===
   document.addEventListener('click', function(e){
     const md = e.target.closest('.match-detail');
     if(!md) return;
@@ -287,7 +267,6 @@
     }
   }, true);
 
-  // Try to inject tab on DOM ready
   if(document.readyState==='loading') document.addEventListener('DOMContentLoaded', function(){ setTimeout(injectDetailTab, 1000); });
   else setTimeout(injectDetailTab, 1000);
 })();