<!-- فونت وزیر -->
<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 id="search-filters" style="display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:30px 0;">
  <input type="text" id="search" placeholder="جستجو بر اساس عنوان" 
         style="flex:1 1 300px; max-width:400px; padding:10px 15px; border:none; background:#f3f3f3; border-radius:30px; font-size:14px; outline:none; text-align:right; font-family:Vazir, Tahoma; min-width:150px;">
  
  <select id="filter-mahvar" style="flex:0 1 150px; padding:10px 15px; border-radius:25px; border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px; background:#fff; cursor:pointer;">
    <option value="">انتخاب محور</option>
  </select>
  
  <select id="filter-zirmohvar" style="flex:0 1 150px; padding:10px 15px; border-radius:25px; border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px; background:#fff; cursor:pointer;">
    <option value="">انتخاب زیرمحور</option>
  </select>
</div>

<!-- کانتینر سه بخش -->
<div id="sections-container" style="padding:0 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; }
.open-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; }
.open-btn:hover { background:#c44a93
; }
.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){ 
  .section-grid{grid-template-columns:1fr;} 
  #search-filters { flex-direction:column; align-items:center; }
  #search-filters input, #search-filters select { flex:1 1 auto; max-width:300px; }
}
</style>

<script>
const pageId = "92538739";
const jsonFileName = "form-data.json";

let docs = [];
let attachmentsMap = {};

const sections = [
  { title: "رهبری و مدیریت", value: "رهبری و مدیریت" },
  { title: "مراقبت و درمان", value: "مراقبت و درمان" },
  { title: "حمایت از گیرنده خدمت", value: "حمایت از گیرنده خدمت" }
];

const zirmohvarOptions = {
  "رهبری و مدیریت": [
    "رهبری و مدیریت کیفیت",
    "مدیریت خطر، حوادث و بلایا",
    "مدیریت منابع انسانی و سلامت حرفه‌ای",
    "مدیریت خدمات پرستاری",
    "فناوری و مدیریت اطلاعات سلامت",
    "بهداشت محیط",
    "مدیریت تجهیزات پزشکی"
  ],
  "مراقبت و درمان": [
    "مراقبت‌های عمومی بالینی",
    "مراقبت‌های حاد و اورژانس",
    "مراقبت‌های جراحی و بیهوشی",
    "مراقبت‌های مادر و نوزاد",
    "پیشگیری و کنترل عفونت",
    "مدیریت دارویی",
    "خدمات تصویربرداری",
    "خدمات آزمایشگاه",
    "طب انتقال خون",
    "خدمات سرپایی"
  ],
  "حمایت از گیرنده خدمت": [
    "تأمین تسهیلات برای گیرنده خدمت",
    "احترام به حقوق گیرنده خدمت"
  ]
};

/* ---------- نرمال‌سازی نام فایل ---------- */
function normalizeFileName(name){
  return (name || "")
    .toLowerCase()
    .normalize("NFKD")
    .replace(/[\u200c\u200f\u202a-\u202e]/g, "") // کاراکترهای مخفی
    .replace(/[ي]/g, "ی")
    .replace(/[ك]/g, "ک")
    .replace(/\s+/g, "")
    .trim();
}

/* ---------- بارگذاری JSON + تمام Attachment ها ---------- */
async function loadData(){
  const res = await fetch(
    `/rest/api/content/${pageId}/child/attachment?limit=500`,
    { credentials: "include" }
  );
  const attData = await res.json();

  attData.results.forEach(a => {
    const key = normalizeFileName(a.title);
    attachmentsMap[key] = new URL(
      a._links.download,
      window.location.origin
    ).href;
  });

  const jsonAtt = attData.results.find(a => a.title === jsonFileName);
  if (!jsonAtt) {
    console.error("JSON attachment not found");
    return;
  }

  const jsonUrl = new URL(
    jsonAtt._links.download,
    window.location.origin
  ).href;

  docs = await fetch(jsonUrl, { credentials: "include" }).then(r => r.json());

  fillMahvarFilter();
  renderSections();
}

/* ---------- فیلترها ---------- */
function fillMahvarFilter(){
  const sel = document.getElementById("filter-mahvar");
  sections.forEach(s => {
    const o = document.createElement("option");
    o.value = s.value;
    o.textContent = s.title;
    sel.appendChild(o);
  });
}

function updateZirmohvarFilter(){
  const mahvar = document.getElementById("filter-mahvar").value;
  const sel = document.getElementById("filter-zirmohvar");
  sel.innerHTML = `<option value="">انتخاب زیرمحور</option>`;
  (zirmohvarOptions[mahvar] || []).forEach(z => {
    const o = document.createElement("option");
    o.value = z;
    o.textContent = z;
    sel.appendChild(o);
  });
}

/* ---------- دریافت لینک فایل ---------- */
function getAttachmentUrl(fileName){
  return attachmentsMap[normalizeFileName(fileName)] || null;
}

/* ---------- کارت سند ---------- */
function createCard(doc){
  const fileUrl = getAttachmentUrl(doc.document_file_name);

  const card = document.createElement("div");
  card.className = "card";
  card.innerHTML = `
    <div class="card-content">
      <h3><b>${doc.document_name || ""}</b></h3>
      <ul>
        <li>زیرمحور: ${doc.zirmohvar || "-"}</li>
        <li>نوع سند: ${doc.noe_sanad || "-"}</li>
        <li>شماره استاندارد: ${doc.standard_no || "-"}</li>
        <li>تاریخ بازنگری: ${doc.date || "-"}</li>
      </ul>
      ${
        fileUrl
          ? `<a href="${fileUrl}" target="_blank" class="open-btn">مشاهده</a>`
          : `<span class="open-btn disabled">فایل ندارد</span>`
      }
    </div>
  `;
  return card;
}

/* ---------- رندر ---------- */
function renderSections(){
  const search = document.getElementById("search").value.toLowerCase();
  const m = document.getElementById("filter-mahvar").value;
  const z = document.getElementById("filter-zirmohvar").value;

  const container = document.getElementById("sections-container");
  container.innerHTML = "";
  let found = false;

  sections.forEach(sec => {
    const list = docs.filter(d =>
      d.mahvar === sec.value &&
      (!m || d.mahvar === m) &&
      (!z || d.zirmohvar === z) &&
      (!search || (d.document_name || "").toLowerCase().includes(search))
    );

    if (!list.length) return;
    found = true;

    const grid = document.createElement("div");
    grid.className = "section-grid";

    list.reverse().forEach(d => grid.appendChild(createCard(d)));

    container.insertAdjacentHTML(
      "beforeend",
      `<h2 class="section-title">${sec.title}</h2><hr class="section-hr">`
    );
    container.appendChild(grid);
  });

  document.getElementById("no-result").style.display = found ? "none" : "block";
}

/* ---------- رویدادها ---------- */
document.getElementById("search").addEventListener("input", renderSections);
document.getElementById("filter-mahvar").addEventListener("change", () => {
  updateZirmohvarFilter();
  renderSections();
});
document.getElementById("filter-zirmohvar").addEventListener("change", renderSections);

/* ---------- شروع ---------- */
loadData();
</script>