<!-- فونت وزیر -->
<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>
<script>
// =======================
// تنظیمات
// =======================
const pageId = "85045112";
const fileName = "form-data.json";
let docs = [];

// =======================
// ابزار تشخیص نوع فایل
// =======================
function isPdfFile(fileName){
    return fileName && fileName.toLowerCase().endsWith(".pdf");
}

// =======================
// لینک فایل از Confluence
// =======================
function getAttachmentUrl(fileName) {
    if (!fileName) return null;
    return `/download/attachments/${pageId}/${encodeURIComponent(fileName)}?api=v2`;
}

// =======================
// مشاهده یا دانلود هوشمند
// =======================
async function viewOrDownloadFile(url, fileName){
    try {
        // ✅ PDF → تب جدید
        if (isPdfFile(fileName)) {
            window.open(url, "_blank");
            return;
        }

        // ✅ غیر PDF → دانلود
        const res = await fetch(url, { credentials:"include" });
        const blob = await res.blob();

        const a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(a.href);

    } catch (e) {
        alert("خطا در دریافت فایل");
        console.error(e);
    }
}

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

    const fileUrl = getAttachmentUrl(doc.document_file_name);
    const iconUrl = detectSanadIcon(doc.noe_sanad);

    card.innerHTML = `
        <div class="card-content">
            <h3><b>${doc.document_name || doc.title || ""}</b></h3>
            <ul>
                <li>زیرمحور: ${doc.zirmohvar || "-"}</li>
                <li>نوع سند: ${doc.noe_sanad || "-"}</li>
                <li>شماره استاندارد: ${doc.standard_no || "-"}</li>
                <li>تاریخ آخرین بازنگری: ${doc.date || "-"}</li>
            </ul>

            ${
                fileUrl
                ? `<button class="open-btn"
                      onclick="viewOrDownloadFile('${fileUrl}', '${doc.document_file_name}')">
                        مشاهده
                   </button>`
                : `<span class="open-btn" style="background:#ccc;cursor:not-allowed">
                        فایل ندارد
                   </span>`
            }
        </div>

        <div class="card-icon">
            <img src="${iconUrl}" alt="سند">
        </div>
    `;

    return card;
}
</script>