Rewrite match_detail.js: structured timeline, events, stats, score+status display

static/match_detail.js

@@ -13,9 +13,15 @@
     .md-pre-league{font-size:9px;color:#5cb87a;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
     .md-pre-teams{display:flex;align-items:center;justify-content:center;gap:12px}
     .md-pre-team{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
-    .md-pre-team img{width:32px;height:32px;object-fit:contain}
-    .md-pre-team span{font-size:11px;color:#ddd;text-align:center}
-    .md-pre-vs{font-size:18px;font-weight:900;color:#f0c040;min-width:40px;text-align:center}
+    .md-pre-team img{width:36px;height:36px;object-fit:contain;background:#1a1a1a;border-radius:50%;padding:2px}
+    .md-pre-team span{font-size:12px;color:#ddd;text-align:center;font-weight:600}
+    .md-pre-vs{font-size:20px;font-weight:900;color:#f0c040;min-width:50px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
+    .md-pre-vs .md-vs-label{font-size:9px;color:#888;font-weight:400}
+    .md-pre-vs .md-score{font-size:20px;font-weight:900;color:#f0c040}
+    .md-pre-vs .md-status{font-size:8px;font-weight:700;padding:1px 6px;border-radius:3px;letter-spacing:.5px}
+    .md-pre-vs .md-status.finished{background:#2d8659;color:#a8ffb8}
+    .md-pre-vs .md-status.live{background:#c0392b;color:#fff;animation:mdpulse 1.5s ease-in-out infinite}
+    .md-pre-vs .md-status.halftime{background:#b7950b;color:#fff}
     .md-pre-info{display:flex;gap:12px;justify-content:center;margin-top:10px;flex-wrap:wrap}
     .md-pre-info-item{font-size:10px;color:#aaa;display:flex;align-items:center;gap:3px}
     .md-pre-info-item b{color:#ddd;font-size:11px}
@@ -35,56 +41,62 @@
     .md-form-item{display:flex;align-items:center;gap:6px;padding:5px 6px;background:#1a1a1a;border-radius:6px;margin-bottom:2px;font-size:10px}
     .md-form-result{padding:1px 5px;border-radius:3px;font-size:8px;font-weight:800;color:#fff;flex-shrink:0}
     .md-form-result.T{background:#2d8659} .md-form-result.B{background:#c0392b} .md-form-result.H{background:#666}
-    .md-form-date{font-size:9px;color:#888;min-width:50px;flex-shrink:0}
+    .md-form-date{font-size:9px;color:#888;min-width:45px;flex-shrink:0}
     .md-form-teams{flex:1;display:flex;align-items:center;gap:4px;min-width:0}
     .md-form-home{text-align:right;flex:1;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-    .md-form-away{text-align:left;flex:1;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
     .md-form-score{font-size:10px;font-weight:700;color:#f0c040;min-width:30px;text-align:center;flex-shrink:0}
+    .md-form-away{text-align:left;flex:1;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
     .md-form-section{margin-bottom:10px}
-    .md-form-team-label{font-size:11px;font-weight:700;color:#aaa;margin-bottom:4px}
-    .md-no-data{color:#777;font-size:12px;padding:16px;text-align:center}
-    .md-err{color:#e74c3c;font-size:12px;padding:16px;text-align:center}
-    .md-warn{color:#f0c040;font-size:12px;padding:12px;text-align:center;background:#1a1a0d;border-radius:8px;border:1px solid #333}
-    .mo-tab-detail{}
-    .md-raw-html{overflow:hidden;max-width:100%}
-    .md-raw-html img{max-width:100%;height:auto;display:block}
-    .md-raw-html table{max-width:100%;table-layout:fixed;word-break:break-word}
+    .md-form-team-label{font-size:10px;color:#888;margin-bottom:4px;font-weight:600}
+    .md-raw-html{overflow:hidden}
+    .md-raw-html img{max-width:100%;height:auto;display:block;margin:4px auto}
+    .md-raw-html table{width:100%;border-collapse:collapse;margin:6px 0;font-size:10px}
+    .md-raw-html table th,.md-raw-html table td{padding:4px 6px;border:1px solid #2a2a2a;text-align:center}
+    .md-raw-html table th{background:#1a2a1f;color:#5cb87a;font-weight:700}
+    .md-raw-html p{margin:4px 0}
+    .md-raw-html br{display:block;content:"";margin:2px 0}
+    .md-timeline{position:relative;padding-left:20px}
+    .md-timeline::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;background:#2a2a2a}
+    .md-tl-item{position:relative;padding:4px 0 4px 8px;font-size:11px;color:#ccc;border-bottom:1px solid #1a1a1a}
+    .md-tl-item::before{content:"";position:absolute;left:-17px;top:8px;width:6px;height:6px;border-radius:50%;background:#333;border:2px solid #555}
+    .md-tl-item.goal::before{background:#f0c040;border-color:#f0c040;box-shadow:0 0 6px rgba(240,192,64,.5)}
+    .md-tl-item.card::before{background:#e85d04;border-color:#e85d04}
+    .md-tl-item.sub::before{background:#2d8659;border-color:#2d8659}
+    .md-tl-time{font-size:9px;color:#888;font-weight:700;margin-right:6px;min-width:35px;display:inline-block}
+    .md-tl-half{font-size:9px;font-weight:800;color:#5cb87a;background:#1a2a1f;padding:1px 5px;border-radius:3px;margin:6px 0 2px 0;display:inline-block}
+    .md-events{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
+    .md-event-chip{font-size:9px;padding:2px 6px;border-radius:4px;background:#1a1a1a;color:#aaa;display:flex;align-items:center;gap:3px}
+    .md-event-chip.home{border-left:2px solid #5cb87a}
+    .md-event-chip.away{border-left:2px solid #e85d04}
+    .md-no-data{text-align:center;color:#666;padding:16px 8px;font-size:12px}
+    .md-err{color:#e85d04;font-size:12px;padding:8px;background:#2a1a1a;border-radius:6px;margin-bottom:6px}
+    .md-warn{color:#f0c040;font-size:12px;padding:8px;background:#2a2a1a;border-radius:6px;margin-bottom:6px}
+    @keyframes mdspin{to{transform:rotate(360deg)}}
+    @keyframes mdpulse{0%,100%{opacity:1}50%{opacity:.5}}
     `;
     document.head.appendChild(s);
   }
 
-  function esc(s){return String(s||'').replace(/[&<>"']/g,function(m){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]})}
+  function esc(s){ const d=document.createElement('div'); d.textContent=s||''; return d.innerHTML; }
 
   function sanitizeHtml(html){
     if(!html) return '';
-    return html
-      .replace(/<script[^>]*>[\s\S]*?<\/script>/gi,'')
-      .replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi,'')
-      .replace(/<ins[^>]*>[\s\S]*?<\/ins>/gi,'')
-      .replace(/<style[^>]*>[\s\S]*?<\/style>/gi,'')
-      .replace(/on\w+\s*=\s*["'][^"']*["']/gi,'')
-      .replace(/style\s*=\s*["'][^"']*["']/gi,'');
+    let h = html.replace(/style="[^"]*"/gi, '');
+    h = h.replace(/<script[^>]*>.*?<\/script>/gi, '');
+    h = h.replace(/<iframe[^>]*>.*?<\/iframe>/gi, '');
+    h = h.replace(/<style[^>]*>.*?<\/style>/gi, '');
+    h = h.replace(/on\w+="[^"]*"/gi, '');
+    h = h.replace(/onclick="[^"]*"/gi, '');
+    return h;
   }
 
-  const _origOpenMatch = window.openMatch;
-  window.openMatch = function(id, url){
-    if(id) window._currentEventId = String(id);
-    if(url) window._currentMatchUrl = String(url);
-    if(_origOpenMatch) _origOpenMatch.call(this, id);
-    setTimeout(function(){
-      injectDetailTab();
-      loadMatchTab('detail');
-    }, 300);
-  };
-
-  const _origLoadMatchTab = window.loadMatchTab;
   window.loadMatchTab = async function(tab){
     if(tab !== 'detail'){
       if(_origLoadMatchTab) _origLoadMatchTab.call(this, tab);
       return;
     }
     document.querySelectorAll('.mo-tab').forEach(function(t){ t.classList.remove('active'); });
-    document.querySelectorAll('.mo-tab').forEach(function(t){
+    document.querySelectorAll('. mo-tab').forEach(function(t){
       const txt = t.textContent || '';
       if(txt.includes('Chi tiết') || txt.includes('📋')) t.classList.add('active');
     });
@@ -123,36 +135,67 @@
     let hasAnyContent = false;
     const info = data.info || {};
 
-    // 0. Pre-match info card
+    // 0. Match header card (teams + score + status)
     if(info.home_team && info.away_team){
       hasAnyContent = true;
       h += '<div class="md-pre-match">';
       if(info.league) h += '<div class="md-pre-league">'+esc(info.league)+'</div>';
       h += '<div class="md-pre-teams">';
       h += '<div class="md-pre-team">';
-      if(info.home_logo) h += '<img src="'+esc(info.home_logo)+'" alt="">';
+      if(info.home_logo) h += '<img src="'+esc(info.home_logo)+'" alt="'+esc(info.home_team)+'">';
       h += '<span>'+esc(info.home_team)+'</span></div>';
-      h += '<div class="md-pre-vs">VS</div>';
+      h += '<div class="md-pre-vs">';
+      if(info.score){
+        h += '<span class="md-score">'+esc(info.score)+'</span>';
+      } else {
+        h += '<span class="md-vs-label">VS</span>';
+      }
+      if(info.status_label){
+        const sl = info.status_label;
+        let cls = 'finished';
+        if(sl === 'LIVE' || sl === 'H1' || sl === 'H2') cls = 'live';
+        if(sl === 'HT' || sl === 'Nghỉ') cls = 'halftime';
+        h += '<span class="md-status '+cls+'">'+esc(sl)+'</span>';
+      }
+      h += '</div>';
       h += '<div class="md-pre-team">';
-      if(info.away_logo) h += '<img src="'+esc(info.away_logo)+'" alt="">';
+      if(info.away_logo) h += '<img src="'+esc(info.away_logo)+'" alt="'+esc(info.away_team)+'">';
       h += '<span>'+esc(info.away_team)+'</span></div>';
       h += '</div>';
-      if(info.date || info.time || info.stadium || info.referee){
+      // Info items
+      const infoItems = [];
+      if(info.datetime) infoItems.push('📅 <b>'+esc(info.datetime)+'</b>');
+      if(info.date && !info.datetime) infoItems.push('📅 <b>'+esc(info.date)+'</b>');
+      if(info.time) infoItems.push('🕐 <b>'+esc(info.time)+'</b>');
+      if(info.stadium) infoItems.push('🏟 <b>'+esc(info.stadium)+'</b>');
+      if(info.referee) infoItems.push('👨‍⚖️ <b>'+esc(info.referee)+'</b>');
+      if(infoItems.length > 0){
         h += '<div class="md-pre-info">';
-        if(info.date) h += '<span class="md-pre-info-item">📅 <b>'+esc(info.date)+'</b></span>';
-        if(info.time) h += '<span class="md-pre-info-item">🕐 <b>'+esc(info.time)+'</b></span>';
-        if(info.stadium) h += '<span class="md-pre-info-item">🏟 <b>'+esc(info.stadium)+'</b></span>';
-        if(info.referee) h += '<span class="md-pre-info-item">👨‍⚖️ <b>'+esc(info.referee)+'</b></span>';
+        infoItems.forEach(function(item){ h += '<span class="md-pre-info-item">'+item+'</span>'; });
         h += '</div>';
       }
       h += '</div>';
-    } else if(data.pre_match_html && data.pre_match_html.length > 10){
-      hasAnyContent = true;
-      h += '<div class="md-sec"><div class="md-sec-title">📋 Thông tin trận đấu</div>';
-      h += '<div class="md-preview-text md-raw-html">' + sanitizeHtml(data.pre_match_html) + '</div></div>';
     }
 
-    // 1. H2H Stats
+    // 1. Match stats (from structured data)
+    if(data.stats_parsed && Object.keys(data.stats_parsed).length > 0){
+      const parsed = data.stats_parsed;
+      const hasNonZero = Object.values(parsed).some(s => s.home !== "0" || s.away !== "0");
+      if(hasNonZero){
+        hasAnyContent = true;
+        h += '<div class="md-sec"><div class="md-sec-title">📊 Thống kê trận đấu</div><div class="md-h2h-stats">';
+        for(const label in parsed){
+          const s = parsed[label];
+          h += '<div class="md-h2h-stat-row">';
+          h += '<span class="md-h2h-stat-home">'+esc(s.home)+'</span>';
+          h += '<span class="md-h2h-stat-label">'+esc(label)+'</span>';
+          h += '<span class="md-h2h-stat-away">'+esc(s.away)+'</span></div>';
+        }
+        h += '</div></div>';
+      }
+    }
+
+    // 2. H2H Stats (đối đầu)
     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");
@@ -170,7 +213,7 @@
       }
     }
 
-    // 2. H2H matches
+    // 3. H2H matches
     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>';
@@ -183,13 +226,9 @@
         h += '<span class="md-h2h-away">'+esc(m.away||'')+'</span></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 class="md-raw-html">' + sanitizeHtml(data.h2h_html) + '</div></div>';
     }
 
-    // 3. Team form
+    // 4. 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>';
@@ -206,30 +245,65 @@
       h += '</div>';
     }
 
-    // 4. Lineups
-    if(data.lineups_html && data.lineups_html.length > 10){
+    // 5. Events (substitutions)
+    if(data.events && data.events.length > 0){
       hasAnyContent = true;
-      h += '<div class="md-sec"><div class="md-sec-title">📋 Đội hình</div>';
-      h += '<div class="md-raw-html">' + sanitizeHtml(data.lineups_html) + '</div></div>';
+      h += '<div class="md-sec"><div class="md-sec-title">🔄 Thay đổi cầu thủ</div>';
+      h += '<div class="md-events">';
+      data.events.forEach(function(ev){
+        const cls = ev.team === 'home' ? 'home' : (ev.team === 'away' ? 'away' : '');
+        const time = ev.time || '';
+        const players = (ev.players || []).join(' → ');
+        h += '<div class="md-event-chip '+cls+'">'+esc(time)+' '+esc(players)+'</div>';
+      });
+      h += '</div></div>';
     }
 
-    // 5. Player performance stats
-    if(data.stats_html && data.stats_html.length > 10){
+    // 6. Timeline/Commentaries (structured)
+    if(data.timeline && data.timeline.length > 0){
+      hasAnyContent = true;
+      h += '<div class="md-sec"><div class="md-sec-title">📢 Diễn biến trận đấu</div>';
+      h += '<div class="md-timeline">';
+      let lastHalf = '';
+      data.timeline.forEach(function(t){
+        if(t.half && t.half !== lastHalf){
+          h += '<div class="md-tl-half">'+esc(t.half)+'</div>';
+          lastHalf = t.half;
+        }
+        let cls = '';
+        const text = t.text || '';
+        if(text.includes('⚽') || text.toLowerCase().includes('goal') || text.includes('Bàn')) cls = 'goal';
+        if(text.includes('thẻ đỏ') || text.includes('red card')) cls = 'card';
+        if(text.includes('thay') || text.includes('↔')) cls = 'sub';
+        h += '<div class="md-tl-item '+cls+'">';
+        if(t.time) h += '<span class="md-tl-time">'+esc(t.time)+'</span>';
+        h += esc(text)+'</div>';
+      });
+      h += '</div></div>';
+    }
+
+    // 7. Raw HTML fallback sections
+    if(data.stats_html && data.stats_html.length > 10 && !data.stats_parsed){
       hasAnyContent = true;
       h += '<div class="md-sec"><div class="md-sec-title">🌟 Thông số cầu thủ</div>';
       h += '<div class="md-raw-html">' + sanitizeHtml(data.stats_html) + '</div></div>';
     }
 
-    // 6. Commentaries
-    if(data.commentaries_html && data.commentaries_html.length > 10){
+    if(data.commentaries_html && data.commentaries_html.length > 10 && !data.timeline){
       hasAnyContent = true;
       h += '<div class="md-sec"><div class="md-sec-title">📢 Diễn biến</div>';
       h += '<div class="md-preview-text md-raw-html">' + sanitizeHtml(data.commentaries_html) + '</div></div>';
     }
 
-    if(!h){
+    if(data.pre_match_html && data.pre_match_html.length > 10 && !info.home_team){
+      hasAnyContent = true;
+      h += '<div class="md-sec"><div class="md-sec-title">📋 Thông tin trận đấu</div>';
+      h += '<div class="md-preview-text md-raw-html">' + sanitizeHtml(data.pre_match_html) + '</div></div>';
+    }
+
+    if(!hasAnyContent){
       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<br>• Dữ liệu chưa có sẵn</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: mã trận đấu không đúng hoặc dữ liệu chưa cập nhật.</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>';
       }
@@ -258,11 +332,12 @@
     tabs.insertBefore(d, tabs.firstChild);
   }
 
-  // Capture both event_id and full URL from match links
+  // Capture event_id and URL from match links
   document.addEventListener('click', function(e){
     const md = e.target.closest('.match-detail');
     if(!md) return;
-    const link = md.querySelector('.status a, a[href*="tran-dau"]');
+    // Try multiple selectors for match links
+    const link = md.querySelector('.status a, .teams a[href*="tran-dau"], a[href*="tran-dau"]');
     if(link){
       const href = link.getAttribute('href') || '';
       const m = href.match(/\/tran-dau\/(\d+)\//);