<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>سجل التدقيق — Super Admin</title>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Rounded" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'IBM Plex Sans Arabic', sans-serif; background: #f1f5f9; }
    .topbar { background: #0f172a; color: white; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; }
    .topbar h1 { font-size: 18px; display: flex; align-items: center; gap: 10px; }
    .topbar a { color: #cbd5e1; text-decoration: none; margin-right: 16px; font-size: 14px; }
    .container { max-width: 1200px; margin: 28px auto; padding: 0 24px; }
    .panel { background: white; border-radius: 14px; border: 1px solid #e2e8f0; overflow: hidden; }
    .panel-head { padding: 18px 22px; border-bottom: 1px solid #e2e8f0; }
    table { width: 100%; border-collapse: collapse; }
    th { background: #f8fafc; padding: 12px 16px; text-align: right; font-size: 13px; color: #475569; font-weight: 600; border-bottom: 1px solid #e2e8f0; }
    td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid #f1f5f9; }
    .badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; background: #eef2ff; color: #4338ca; }
  </style>
</head>
<body>
  <div class="topbar">
    <h1><span class="material-symbols-rounded">history</span> سجل التدقيق</h1>
    <div>
      <a href="/">العودة للوحة</a>
      <a href="/logout">خروج</a>
    </div>
  </div>
  <div class="container">
    <div class="panel">
      <div class="panel-head"><h2>آخر 200 عملية</h2></div>
      <table>
        <thead>
          <tr>
            <th>الوقت</th>
            <th>الإجراء</th>
            <th>العميل</th>
            <th>التفاصيل</th>
            <th>بواسطة</th>
            <th>IP</th>
          </tr>
        </thead>
        <tbody>
          <% logs.forEach(function(l) { %>
            <tr>
              <td style="color:#64748b;font-size:13px"><%= new Date(l.created_at).toLocaleString('ar-SA') %></td>
              <td><span class="badge"><%= l.action %></span></td>
              <td><%= l.company_name || '—' %><% if (l.slug) { %><br><span style="color:#64748b;font-size:12px;direction:ltr"><%= l.slug %></span><% } %></td>
              <td style="color:#475569"><%= l.details || '—' %></td>
              <td style="font-size:13px"><%= l.performed_by || '—' %></td>
              <td style="font-size:12px;color:#64748b"><%= l.ip || '—' %></td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>
