<?php
$page_title = 'Notifications';
require_once __DIR__ . '/header.php';
?>

<div class="card">
  <h3 style="margin-bottom:16px;">Recent Notifications</h3>
  <ul style="list-style:none;padding:0;margin:0;">
    <li style="display:flex;align-items:flex-start;gap:16px;padding:16px;border-bottom:1px solid #f1f5f9;">
      <div style="background:#e0f2fe;color:#0ea5e9;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
        <i class="fas fa-calendar-check"></i>
      </div>
      <div>
        <strong style="display:block;color:#0f172a;font-size:1rem;margin-bottom:4px;">Leave Approved</strong>
        <p style="margin:0 0 4px;color:#475569;font-size:.9rem;">Your leave request for 19 May 2026 has been approved.</p>
        <span style="font-size:.75rem;color:#94a3b8;">2 hours ago</span>
      </div>
    </li>
    
    <li style="display:flex;align-items:flex-start;gap:16px;padding:16px;border-bottom:1px solid #f1f5f9;">
      <div style="background:#fee2e2;color:#ef4444;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
        <i class="fas fa-bullhorn"></i>
      </div>
      <div>
        <strong style="display:block;color:#0f172a;font-size:1rem;margin-bottom:4px;">New Announcement</strong>
        <p style="margin:0 0 4px;color:#475569;font-size:.9rem;">A new announcement regarding the updated safety policy has been published.</p>
        <span style="font-size:.75rem;color:#94a3b8;">5 hours ago</span>
      </div>
    </li>

    <li style="display:flex;align-items:flex-start;gap:16px;padding:16px;border-bottom:1px solid #f1f5f9;">
      <div style="background:#dcfce7;color:#16a34a;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
        <i class="fas fa-file-invoice-dollar"></i>
      </div>
      <div>
        <strong style="display:block;color:#0f172a;font-size:1rem;margin-bottom:4px;">Payslip Available</strong>
        <p style="margin:0 0 4px;color:#475569;font-size:.9rem;">Your payslip for the month of April 2026 is now available for download.</p>
        <span style="font-size:.75rem;color:#94a3b8;">1 day ago</span>
      </div>
    </li>

    <li style="display:flex;align-items:flex-start;gap:16px;padding:16px;border-bottom:1px solid #f1f5f9;">
      <div style="background:#fef3c7;color:#d97706;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
        <i class="fas fa-graduation-cap"></i>
      </div>
      <div>
        <strong style="display:block;color:#0f172a;font-size:1rem;margin-bottom:4px;">Training Due</strong>
        <p style="margin:0 0 4px;color:#475569;font-size:.9rem;">Reminder: The "Workplace Safety" training module is due tomorrow.</p>
        <span style="font-size:.75rem;color:#94a3b8;">2 days ago</span>
      </div>
    </li>

    <li style="display:flex;align-items:flex-start;gap:16px;padding:16px;">
      <div style="background:#f1f5f9;color:#64748b;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
        <i class="fas fa-tasks"></i>
      </div>
      <div>
        <strong style="display:block;color:#0f172a;font-size:1rem;margin-bottom:4px;">Task Reminder</strong>
        <p style="margin:0 0 4px;color:#475569;font-size:.9rem;">You have pending tasks that are approaching their deadline.</p>
        <span style="font-size:.75rem;color:#94a3b8;">3 days ago</span>
      </div>
    </li>
  </ul>
</div>

<?php require_once __DIR__ . '/footer.php'; ?>
