<!-- فونت وزیر -->
<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:#00A9C3; 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:#00A9C3; 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:#0090a8; }
.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>

<!-- کانتینر نمایش اسناد -->
<div id="sections-container" style="padding:0 40px 60px; direction:rtl;"></div>
<div id="no-result" style="display:none; text-align:center; color:#00A9C3; font-weight:600; font-size:16px; margin-top:20px;">
هیچ سندی پیدا نشد.
</div>

<script>
const fileName = "form-data.json"; // نام فایل JSON
let docs = [];

// شبیه‌سازی بخش‌ها (می‌توان متناسب با JSON واقعی تغییر داد)
const sections = [
  { title: "رهبری و مدیریت", value: "رهبری و مدیریت" },
  { title: "مراقبت و درمان", value: "مراقبت و درمان" },
  { title: "حمایت از گیرنده خدمت", value: "حمایت از گیرنده خدمت" }
];

// ==== تابع باز کردن فایل Base64 ====
function openBase64File(base64, mimeType, fileName="file") {
    if (!base64) return alert("فایل Base64 موجود نیست!");
    const byteCharacters = atob(base64.split(',')[1]); // اگر DataURL باشد
    const byteNumbers = new Array(byteCharacters.length);
    for (let i=0;i<byteCharacters.length;i++){
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], { type: mimeType });
    const url = URL.createObjectURL(blob);

    const a = document.createElement("a");
    a.href = url;
    a.download = encodeURIComponent(fileName);
    a.target = "_blank";
    a.click();

    setTimeout(() => URL.revokeObjectURL(url), 10000);
}

// ==== ایجاد کارت برای هر سند ====
function createCard(doc) {
    const card = document.createElement("div");
    card.className = "card";
    card.style = "display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; padding:10px; border:1px solid #ccc; border-radius:10px; background:#fff; flex-direction:row-reverse;";

    const contentDiv = document.createElement("div");
    contentDiv.style = "flex:1; text-align:right; padding-right:10px;";

    contentDiv.innerHTML = `
        <h3 style="margin:0 0 5px;">${doc.document_name || "-"}</h3>
        <ul style="margin:0; padding-right:15px; list-style:disc;">
            <li>محور: ${doc.mahvar || "-"}</li>
            <li>زیرمحور: ${doc.zirmohvar || "-"}</li>
            <li>نوع سند: ${doc.noe_sanad || "-"}</li>
            <li>شماره استاندارد: ${doc.standard_no || "-"}</li>
            <li>تاریخ آخرین بازنگری: ${doc.date || "-"}</li>
        </ul>
    `;

    const btn = document.createElement("button");
    btn.textContent = doc.file_base64 ? "مشاهده فایل" : "فایل ندارد";
    btn.disabled = !doc.file_base64;
    btn.style = `margin-left:10px; padding:5px 12px; border-radius:5px; cursor:pointer; background:${doc.file_base64 ? "#00A9C3" : "#ccc"}; color:white; border:none;`;
    btn.onclick = () => openBase64File(doc.file_base64, doc.mime || "application/octet-stream", doc.document_file_name || "file");

    card.appendChild(contentDiv);
    card.appendChild(btn);

    return card;
}

// ==== رندر کل بخش‌ها ====
function renderSections() {
    const container = document.getElementById("sections-container");
    container.innerHTML = "";
    let found = false;

    sections.forEach(sec => {
        const list = docs.filter(d => d.mahvar === sec.value);
        if (!list.length) return;
        found = true;

        const h2 = document.createElement("h2");
        h2.textContent = sec.title;
        h2.style = "text-align:center; margin-bottom:10px;";

        container.appendChild(h2);

        list.forEach(d => container.appendChild(createCard(d)));
    });

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

// ==== بارگذاری JSON ====
async function loadJSON() {
    try {
        const res = await fetch(fileName);
        const text = await res.text();
        docs = JSON.parse(text);

        console.log("🚀 Loaded JSON:", docs); // بررسی داده‌ها در کنسول
        renderSections();
    } catch(e) {
        console.error("❌ خطا در بارگذاری JSON:", e);
    }
}

document.addEventListener("DOMContentLoaded", loadJSON);
</script>