<!-- داشبورد ملاعبنا - الصق هذا الكود في Custom HTML Block -->
<style>
#mala3ebna-dash * { box-sizing: border-box; margin: 0; padding: 0; font-family: Tahoma, Arial, sans-serif; }
#mala3ebna-dash { direction: rtl; padding: 1rem 0; }
#mala3ebna-dash .header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.5rem; }
#mala3ebna-dash .logo { font-size: 20px; font-weight: bold; color: #111; display: flex; align-items: center; gap: 8px; }
#mala3ebna-dash .logo-badge { background: #1D9E75; color: white; font-size: 11px; padding: 3px 8px; border-radius: 6px; font-weight: 500; }
#mala3ebna-dash .refresh-btn { background: none; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; color: #6b7280; }
#mala3ebna-dash .refresh-btn:hover { border-color: #9ca3af; color: #111; }
#mala3ebna-dash .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 1.5rem; }
#mala3ebna-dash .stat-card { background: #f9fafb; border-radius: 8px; padding: 1rem; text-align: center; }
#mala3ebna-dash .stat-label { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
#mala3ebna-dash .stat-num { font-size: 22px; font-weight: bold; color: #111; }
#mala3ebna-dash .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.5rem; }
#mala3ebna-dash .filter-btn { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 20px; padding: 6px 16px; font-size: 13px; cursor: pointer; color: #6b7280; transition: all 0.15s; }
#mala3ebna-dash .filter-btn:hover { border-color: #9ca3af; color: #111; }
#mala3ebna-dash .filter-btn.active { background: #0F6E56; border-color: #0F6E56; color: white; }
#mala3ebna-dash .news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#mala3ebna-dash .news-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem 1.25rem; cursor: pointer; transition: border-color 0.15s; }
#mala3ebna-dash .news-card:hover { border-color: #9ca3af; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
#mala3ebna-dash .news-card.featured { grid-column: span 2; display: flex; gap: 1rem; align-items: flex-start; }
#mala3ebna-dash .featured-icon { width: 48px; height: 48px; border-radius: 8px; background: #f0fdf4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 24px; }
#mala3ebna-dash .cat-tag { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 6px; margin-bottom: 8px; font-weight: 500; }
#mala3ebna-dash .cat-koura { background: #E1F5EE; color: #0F6E56; }
#mala3ebna-dash .cat-basket { background: #FAEEDA; color: #854F0B; }
#mala3ebna-dash .cat-tennis { background: #E6F1FB; color: #185FA5; }
#mala3ebna-dash .cat-breaking { background: #FCEBEB; color: #A32D2D; }
#mala3ebna-dash .news-title { font-size: 14px; font-weight: bold; color: #111; line-height: 1.6; margin-bottom: 8px; }
#mala3ebna-dash .news-card.featured .news-title { font-size: 16px; }
#mala3ebna-dash .news-meta { font-size: 12px; color: #9ca3af; }
#mala3ebna-dash .state-msg { text-align: center; padding: 2rem; color: #6b7280; font-size: 14px; grid-column: span 2; }
@media (max-width: 600px) {
  #mala3ebna-dash .stats-row { grid-template-columns: repeat(2, 1fr); }
  #mala3ebna-dash .news-grid { grid-template-columns: 1fr; }
  #mala3ebna-dash .news-card.featured { grid-column: span 1; flex-direction: column; }
}
</style>

<div id="mala3ebna-dash">
  <div class="header">
    <div class="logo">
      ⚽ ملاعبنا
      <span class="logo-badge">أخبار رياضية</span>
    </div>
    <button class="refresh-btn" onclick="mala3ebnaLoad(mala3ebnaCat)">🔄 تحديث</button>
  </div>

  <div class="stats-row">
    <div class="stat-card"><div class="stat-label">⚽ كرة القدم</div><div class="stat-num" id="m3-s-koura">-</div></div>
    <div class="stat-card"><div class="stat-label">🏀 كرة السلة</div><div class="stat-num" id="m3-s-basket">-</div></div>
    <div class="stat-card"><div class="stat-label">🎾 تنس</div><div class="stat-num" id="m3-s-tennis">-</div></div>
    <div class="stat-card"><div class="stat-label">🔥 عاجل</div><div class="stat-num" id="m3-s-breaking">-</div></div>
  </div>

  <div class="filters">
    <button class="filter-btn active" onclick="mala3ebnaLoad('all', this)">الكل</button>
    <button class="filter-btn" onclick="mala3ebnaLoad('koura', this)">⚽ كرة القدم</button>
    <button class="filter-btn" onclick="mala3ebnaLoad('basketball', this)">🏀 كرة السلة</button>
    <button class="filter-btn" onclick="mala3ebnaLoad('tennis', this)">🎾 تنس</button>
    <button class="filter-btn" onclick="mala3ebnaLoad('breaking', this)">🔥 عاجل</button>
  </div>

  <div id="m3-news" class="news-grid">
    <div class="state-msg">⏳ جاري تحميل الأخبار...</div>
  </div>
</div>

<script>
(function() {
  var BASE = 'https://mala3ebna.com/wp-json/wp/v2';
  var catMap = { koura: null, basketball: null, tennis: null, breaking: null };
  var catLabels = { koura: 'كرة القدم', basketball: 'كرة السلة', tennis: 'تنس', breaking: 'عاجل' };
  var catClasses = { koura: 'cat-koura', basketball: 'cat-basket', tennis: 'cat-tennis', breaking: 'cat-breaking' };
  var catIcons = { koura: '⚽', basketball: '🏀', tennis: '🎾', breaking: '🔥' };
  window.mala3ebnaCat = 'all';

  function timeAgo(d) {
    var diff = Math.floor((Date.now() - new Date(d)) / 60000);
    if (diff < 60) return 'منذ ' + diff + ' دقيقة';
    if (diff < 1440) return 'منذ ' + Math.floor(diff/60) + ' ساعة';
    return 'منذ ' + Math.floor(diff/1440) + ' يوم';
  }

  function detectCat(post) {
    for (var s in catMap) {
      if (catMap[s] && post.categories && post.categories.indexOf(catMap[s]) !== -1) return s;
    }
    return 'koura';
  }

  function renderCards(posts) {
    var el = document.getElementById('m3-news');
    if (!posts.length) { el.innerHTML = '<div class="state-msg">لا توجد أخبار في هذا القسم</div>'; return; }
    el.innerHTML = posts.map(function(p, i) {
      var cat = detectCat(p);
      var title = p.title.rendered.replace(/<[^>]+>/g, '');
      var date = timeAgo(p.date);
      var url = p.link;
      if (i === 0) {
        return '<div class="news-card featured" onclick="window.open(\'' + url + '\',\'_blank\')">' +
          '<div class="featured-icon">' + catIcons[cat] + '</div>' +
          '<div><span class="cat-tag ' + catClasses[cat] + '">' + catLabels[cat] + '</span>' +
          '<div class="news-title">' + title + '</div>' +
          '<div class="news-meta">🕐 ' + date + '</div></div></div>';
      }
      return '<div class="news-card" onclick="window.open(\'' + url + '\',\'_blank\')">' +
        '<span class="cat-tag ' + catClasses[cat] + '">' + catLabels[cat] + '</span>' +
        '<div class="news-title">' + title + '</div>' +
        '<div class="news-meta">🕐 ' + date + '</div></div>';
    }).join('');
  }

  window.mala3ebnaLoad = function(cat, btn) {
    window.mala3ebnaCat = cat;
    document.querySelectorAll('#mala3ebna-dash .filter-btn').forEach(function(b) { b.classList.remove('active'); });
    if (btn) btn.classList.add('active');
    var el = document.getElementById('m3-news');
    el.innerHTML = '<div class="state-msg">⏳ جاري التحميل...</div>';
    var url = BASE + '/posts?per_page=8&_fields=id,title,date,link,categories';
    if (cat !== 'all' && catMap[cat]) url += '&categories=' + catMap[cat];
    fetch(url).then(function(r) {
      if (!r.ok) throw new Error('HTTP ' + r.status);
      return r.json();
    }).then(function(posts) {
      renderCards(posts);
    }).catch(function() {
      el.innerHTML = '<div class="state-msg">⚠️ تعذر تحميل الأخبار. تحقق من الاتصال.</div>';
    });
  };

  function loadStats() {
    for (var s in catMap) {
      (function(slug) {
        if (!catMap[slug]) return;
        fetch(BASE + '/posts?categories=' + catMap[slug] + '&per_page=1&_fields=id')
          .then(function(r) {
            var t = r.headers.get('X-WP-Total') || '0';
            var id = slug === 'basketball' ? 'm3-s-basket' : 'm3-s-' + slug;
            var el = document.getElementById(id);
            if (el) el.textContent = t;
          }).catch(function(){});
      })(s);
    }
  }

  fetch(BASE + '/categories?per_page=20').then(function(r) { return r.json(); }).then(function(cats) {
    cats.forEach(function(c) { if (catMap.hasOwnProperty(c.slug)) catMap[c.slug] = c.id; });
    window.mala3ebnaLoad('all');
    loadStats();
  }).catch(function() { window.mala3ebnaLoad('all'); });
})();
</script>