<!-- فونت وزیر -->
<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 type="text" id="search-input" 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:0 40px 60px; direction:rtl;"></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;
    transition: all 0.3s ease;
    flex-direction: row-reverse;
    font-family: Vazir, Tahoma;
  }

  .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-type:disc;
    color:#555;
    font-size:13px;
  }

  .download-btn {
    display:inline-block;
    background:#b40074;
    color:white;
    border:none;
    border-radius:25px;
    padding:4px 18px;
    font-size:13px;
    text-decoration:none;
    margin-top:12px;
    cursor:pointer;
    text-align:center;
  }
  .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.large { transform:scale(1.05); background:#fafafa; }
  .card:hover { transform:scale(1.03); background:#fdfdfd; }

  @media (max-width:900px){
    #doc-grid { grid-template-columns:1fr; }
  }
</style>

<script>
  // نمونه داده‌های کارت‌ها (در عمل این‌ها از فرم قبل یا API می‌آیند)
  const docs = [
    {title:"راهنمای مدیریت کیفیت", mahvar:"مدیریت، رهبری و کیفیت", zirmohvar:"رهبری و مدیریت کیفیت", noe_sanad:"دستورالعمل", standard_no:"STD-101", date:"1404/05/12"},
    {title:"روش اجرایی دارویی", mahvar:"مراقبت و درمان", zirmohvar:"مدیریت دارویی", noe_sanad:"روش اجرایی", standard_no:"STD-102", date:"1404/06/22"},
    {title:"تأمین تسهیلات گیرنده", mahvar:"حمایت از گیرنده خدمت", zirmohvar:"تأمین تسهیلات برای گیرنده خدمت", noe_sanad:"آیین‌نامه", standard_no:"STD-103", date:"1404/07/15"}
  ];

  const grid = document.getElementById("doc-grid");

  function createDocCard(doc){
    const card = document.createElement("div");
    card.className="card";
    card.innerHTML=`
      <div class="card-content">
        <h3>${doc.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>
      </div>
      <div class="card-icon">
        <img src="https://cdn-icons-png.flaticon.com/512/103/103081.png" alt="سند">
      </div>
    `;
    return card;
  }

  function displayDocs(filter=""){
    grid.innerHTML="";
    docs.filter(d => 
      d.title.includes(filter) || d.mahvar.includes(filter)
    ).forEach(doc=> grid.appendChild(createDocCard(doc)));
  }

  displayDocs();

  // جستجوی زنده
  const searchInput = document.getElementById("search-input");
  searchInput.addEventListener("input", e => displayDocs(e.target.value));

  // بزرگ‌نمایی کارت هنگام کلیک
  document.addEventListener("click", e=>{
    if(e.target.closest(".card")){
      e.target.closest(".card").classList.toggle("large");
    }
  });
</script>