<!-- فونت وزیر -->
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />

<h1 style="text-align:center; font-family:Vazir, Tahoma; color:#333;font-weight:600;">📂 اسناد ثبت شده</h1>

<!-- نوار جستجو -->
<div style="display:flex; justify-content:center; margin:30px 0;">
  <input id="search" type="text" placeholder="جستجو در عنوان، محور و زیرمحور" 
    style="width:60%; max-width:600px; padding:12px 16px; border:none; background:#f3f3f3; border-radius:30px; font-size:16px; outline:none; text-align:right; font-family:Vazir, Tahoma;">
</div>

<!-- گرید کارت‌ها -->
<div id="doc-grid" style="display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; padding:30px 40px 60px; direction:rtl;"></div>

<!-- پیام وقتی چیزی پیدا نشد -->
<div id="no-result" style="display:none; text-align:center; color:#b40074; font-weight:600; font-size:16px; margin-top:20px;">
هیچ سندی پیدا نشد.
</div>

<style>
.card { 
  background:#fff; 
  border-radius:18px; 
  box-shadow:0 4px 10px rgba(0,0,0,0.1); 
  padding:20px; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  flex-direction:row-reverse; 
  font-family:Vazir, Tahoma; 
  transition:all 0.3s ease; 
}
.card-content { flex:1; text-align:right; padding-right:15px; }
.card-content h3 { margin:0 0 8px; font-weight:600; font-size:14px; color:#333; }
.card-content ul { margin:0; padding-right:15px; list-style:disc; font-size:13px; color:#555; }
.download-btn { display:inline-block; background:#b40074; color:#fff; border:none; border-radius:25px; padding:4px 18px; font-size:13px; text-decoration:none; margin-top:12px; cursor:pointer; }
.download-btn:hover { background:#d50088; }
.card-icon { background:#f7f7f7; border-radius:16px; padding:12px; display:flex; align-items:center; justify-content:center; }
.card-icon img { width:2cm; height:2cm; }
.card:hover { transform:scale(1.03); background:#fdfdfd; }
@media(max-width:900px){ #doc-grid{grid-template-columns:1fr;} }
</style>

<script>
const PAGE_ID = "85045112"; // صفحه حاوی JSON
const JSON_FILE = "form-data.json";
const grid = document.getElementById("doc-grid");
const searchInput = document.getElementById("search");
const noResult = document.getElementById("no-result");
let docs = [];

// دریافت JSON
async function loadJSON(){
  try {
      const r = await fetch(`/rest/api/content/${PAGE_ID}/child/attachment?filename=${JSON_FILE}`, {credentials:"include"});
      const data = await r.json();
      const file = data.results && data.results[0] ? data.results[0] : null;
      if(!file) { console.warn("JSON file not found"); return; }

      const downloadUrl = new URL(file._links.download, window.location.origin).href;
      const text = await fetch(downloadUrl, {credentials:"include"}).then(r=>r.text());
      docs = JSON.parse(text);
      renderGrid();
  } catch(e) {
      console.error("Error loading JSON:", e);
  }
}

// ساخت کارت
function createCard(doc){
  const card = document.createElement("div");
  card.className="card";

  // تبدیل Base64 به Blob URL
  let downloadLink = "#";
  if(doc.document_file){
      const arr = doc.document_file.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while(n--){
          u8arr[n] = bstr.charCodeAt(n);
      }
      const blob = new Blob([u8arr], {type: mime});
      downloadLink = URL.createObjectURL(blob);
  }

  const title = doc.title ?? "بدون عنوان";
  card.innerHTML = `
    <div class="card-content">
      <h3>${title}</h3>
      <ul>
        <li>محور: ${doc.mahvar}</li>
        <li>زیرمحور: ${doc.zirmohvar}</li>
        <li>نوع سند: ${doc.noe_sanad}</li>
        <li>شماره استاندارد: ${doc.standard_no}</li>
        <li>تاریخ آخرین ویرایش: ${doc.date}</li>
      </ul>
      <a href="${downloadLink}" download="${doc.document_file_name ?? 'file'}" class="download-btn">دانلود</a>
    </div>
    <div class="card-icon">
      <img src="https://kb.h-soft.ir/download/thumbnails/85045112/13.png?api=v2&nonce=1764175790566" alt="سند">
    </div>
  `;
  return card;
}

// رندر کارت‌ها با فیلتر جستجو
function renderGrid(filter=""){
  grid.innerHTML="";
  const filtered = docs.filter(d=>{
      const search = filter.toLowerCase();
      return (d.title??"").toLowerCase().includes(search) ||
             (d.mahvar??"").toLowerCase().includes(search) ||
             (d.zirmohvar??"").toLowerCase().includes(search);
  });
  if(filtered.length === 0){
      noResult.style.display = "block";
  } else {
      noResult.style.display = "none";
      filtered.reverse().forEach(d=>grid.appendChild(createCard(d)));
  }
}

// جستجوی زنده
searchInput.addEventListener("input", e=>{
  renderGrid(e.target.value);
});

loadJSON();
</script>