const blogUrl = "https://www.egquiz.com"; const label = "تعلم CSS"; const resultsPerPage = 8; const maxPostsToFetch = 500;

const gridContainer = document.querySelector(".cases-grid"); const loadMoreBtn = document.getElementById("loadMoreBtn"); const loadMoreContainer = document.querySelector(".load-more-container"); const searchInput = document.getElementById("searchInput");

let allCases = []; let displayedCount = 0;

// 1. دالة لإنشاء البطاقة function createCaseCard(post) { try { const postTitle = post.title.$t; let postUrl = '#'; if (post.link) { for (let i = 0; i < post.link.length; i++) { if (post.link[i].rel === 'alternate') { postUrl = post.link[i].href; break; } } } const contentHtml = post.content ? post.content.$t : ''; const tempDiv = document.createElement('div'); tempDiv.innerHTML = contentHtml; // استخراج العنوان H1 const h1Element = tempDiv.querySelector('h1'); // --- ✨ التعديل هنا للعنوان ✨ --- // قمنا بتغيير textContent إلى innerHTML ليظهر الكود داخل العنوان const displayTitle = h1Element ? h1Element.innerHTML.trim() : postTitle; // استخراج الوصف const descriptionElement = tempDiv.querySelector('article.leasonx-container p'); // --- ✨ التعديل هنا للوصف (كان صحيحاً وأبقينا عليه) ✨ --- const description = descriptionElement ? descriptionElement.innerHTML : "لا يتوفر وصف..."; // هذا السطر يبقى textContent لأن البحث يجب أن يكون في النصوص فقط وليس في رموز HTML post.searchableDescription = descriptionElement ? descriptionElement.textContent.toLowerCase() : ""; const publishedDate = new Date(post.published.$t); const formattedDate = new Intl.DateTimeFormat('ar-EG', { day: 'numeric', month: 'long', year: 'numeric' }).format(publishedDate); const caseCard = document.createElement('article'); caseCard.className = 'case-card'; caseCard.innerHTML = `

`; return caseCard;

} catch (error) { console.error("Error creating card for post:", post.title.$t, error); return null; } }

// بقية الدوال كما هي... function displayCases(cases) { cases.forEach(caseData => { const card = createCaseCard(caseData); if (card) { gridContainer.appendChild(card); } }); }

function loadMoreCases() { const remainingCases = allCases.slice(displayedCount, displayedCount + resultsPerPage); displayCases(remainingCases); displayedCount += remainingCases.length;

if (displayedCount >= allCases.length) { loadMoreContainer.style.display = 'none'; } }

searchInput.addEventListener('input', function() { const searchTerm = this.value.toLowerCase().trim();

if (searchTerm === "") { gridContainer.innerHTML = ''; displayedCount = 0; loadMoreCases(); if (allCases.length > displayedCount) { loadMoreContainer.style.display = 'block'; } return; }

const filteredCases = allCases.filter(caseData => { const title = caseData.title.$t.toLowerCase(); const description = caseData.searchableDescription || ""; return title.includes(searchTerm) || description.includes(searchTerm); });

gridContainer.innerHTML = ''; loadMoreContainer.style.display = 'none';

if (filteredCases.length > 0) { displayCases(filteredCases); } else { gridContainer.innerHTML = '

لم يتم العثور على نتائج.

'; } });

function fetchAllCases() { const apiUrl = `${blogUrl}/feeds/posts/default/-/${encodeURIComponent(label)}?alt=json-in-script&max-results=${maxPostsToFetch}&callback=processAllCases`;

window.processAllCases = function(data) { allCases = data.feed.entry || []; allCases.reverse(); gridContainer.innerHTML = ''; if (allCases.length > 0) { loadMoreCases(); if (allCases.length > displayedCount) { loadMoreContainer.style.display = 'block'; } } else { gridContainer.innerHTML = '

لا توجد قضايا لعرضها حاليًا.

'; loadMoreContainer.style.display = 'none'; } };

const script = document.createElement('script'); script.src = apiUrl; document.body.appendChild(script); script.onload = () => document.body.removeChild(script); }

loadMoreBtn.addEventListener('click', loadMoreCases); fetchAllCases(); });