Page History

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



<!-- فیلترهای زیبا -->
<div id="search-filters" style="
     display:flex; justify-content:center; flex-wrap:wrap; 
     gap:10px; margin:25px 0; direction:rtl;">

  <select id="filterAxis" onchange="updateSubAxis(); filterTable()"
          style="flex:0 1 160px; padding:10px 15px; border-radius:25px; 
          border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px;
          background:#fff; cursor:pointer;">
    <option value="">انتخاب محور</option>
    <option value="modiriyat">رهبری و مدیریت</option>
    <option value="mored">مراقبت و درمان</option>
    <option value="hemayat">حمایت از گیرنده خدمت</option>
  </select>

  <select id="filterSubAxis" onchange="filterTable()"
          style="flex:0 1 160px; 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>
<table id="archiveTable" border="1" style="width:100%; border-collapse:collapse; text-align:center;">
    <thead>
        <tr>
            <th>محور</th>
            <th>زیرمحور</th>
            <th>کمیته</th>
            <th>عنوان سند</th>
            <th>نوع سند</th>
            <th>تاریخ ثبت اولیه</th>
            <th>تاریخ آخرین بازنگری</th>
            <th>تاریخ ویرایش</th>
            <th>کد ویرایش</th>
            <th>فایل</th>
        </tr>
    </thead>
    <tbody id="archiveBody"></tbody>
</table>


<!-- CSS جدول زیبا -->
<style>
#myTable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: Vazir, Tahoma;
  direction: rtl;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}
#myTable thead th {
  background-color: #f2f2f2;
  padding: 10px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
#myTable tbody td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
#myTable tbody tr:nth-child(even) {
  background-color: #fafafa;
}
#myTable tbody tr:hover {
  background-color: #e6f7ff;
  transition: background-color 0.3s;
}
#myTable thead tr:first-child th:first-child { border-top-right-radius: 10px; }
#myTable thead tr:first-child th:last-child { border-top-left-radius: 10px; }
#myTable tbody tr:last-child td:first-child { border-bottom-right-radius: 10px; }
#myTable tbody tr:last-child td:last-child { border-bottom-left-radius: 10px; }
#search-filters select { transition: all 0.3s; }
#search-filters select:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
</style>

<script>
<script>
// نگاشت محورها به فارسی
const axisMap = {
    modiriyat: "رهبری و مدیریت",
    mored: "مراقبت و درمان",
    hemayat: "حمایت از گیرنده خدمت"
};

// وقتی محور انتخاب شد، زیرمحورها و جدول را آپدیت می‌کنیم
function updateSubAxis() {
    const axisSelect = document.getElementById('filterAxis');
    const subAxisSelect = document.getElementById('filterSubAxis');

    // مقدار انتخاب شده (کد محور)
    const selectedAxis = axisSelect.value;

    // پر کردن زیرمحورها متناسب با محور
    subAxisSelect.innerHTML = '<option value="">انتخاب زیرمحور</option>';
    // می‌توانید یک map برای زیرمحورها هم بسازید اگر لازم باشد
}

// فیلتر کردن جدول
function filterTable() {
    const axisSelect = document.getElementById('filterAxis');
    const subAxisSelect = document.getElementById('filterSubAxis');
    const tbody = document.getElementById('archiveBody');

    const selectedAxis = axisSelect.value;
    const selectedSubAxis = subAxisSelect.value;

    Array.from(tbody.rows).forEach(row => {
        const mahvarCell = row.cells[0].textContent; // ستون محور فارسی
        const zirmohvarCell = row.cells[1].textContent;

        // چک کردن تطابق با محور و زیرمحور
        const show = (!selectedAxis || axisMap[selectedAxis] === mahvarCell)
                  && (!selectedSubAxis || selectedSubAxis === zirmohvarCell);

        row.style.display = show ? '' : 'none';
    });
}

// وقتی DOM آماده شد جدول را پر می‌کنیم
document.addEventListener("DOMContentLoaded", populateArchiveTable);
</script>