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

<div class="grid-3">
  <div class="card" style="grid-column: span 1;">
    <h3 style="margin-top:0;">Support Categories</h3>
    <ul style="list-style:none;padding:0;margin:0;">
      <li style="padding:12px;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:12px;display:flex;align-items:center;gap:12px;cursor:pointer;">
        <i class="fas fa-laptop" style="color:#2557d6;font-size:1.2rem;"></i>
        <strong style="font-size:0.95rem;color:#0f172a;">IT Support</strong>
      </li>
      <li style="padding:12px;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:12px;display:flex;align-items:center;gap:12px;cursor:pointer;">
        <i class="fas fa-users" style="color:#16a34a;font-size:1.2rem;"></i>
        <strong style="font-size:0.95rem;color:#0f172a;">HR Support</strong>
      </li>
      <li style="padding:12px;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:12px;display:flex;align-items:center;gap:12px;cursor:pointer;">
        <i class="fas fa-building" style="color:#d97706;font-size:1.2rem;"></i>
        <strong style="font-size:0.95rem;color:#0f172a;">Admin Support</strong>
      </li>
    </ul>

    <h3 style="margin:24px 0 12px;">Quick Links</h3>
    <div style="padding:16px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
        <i class="fas fa-question-circle" style="color:#64748b;"></i>
        <a href="#" style="color:#0f172a;text-decoration:none;font-weight:500;font-size:0.9rem;">FAQs</a>
      </div>
      <div style="display:flex;align-items:center;gap:12px;">
        <i class="fas fa-plus-circle" style="color:#2557d6;"></i>
        <a href="#" style="color:#2557d6;text-decoration:none;font-weight:600;font-size:0.9rem;">Raise a New Ticket</a>
      </div>
    </div>
  </div>

  <div class="card" style="grid-column: span 2;">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
      <h3 style="margin:0;">My Recent Tickets</h3>
      <button style="padding:8px 16px;font-size:0.85rem;background:#2557d6;color:#fff;border:none;border-radius:6px;cursor:pointer;"><i class="fas fa-plus"></i> Raise Ticket</button>
    </div>

    <div style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;">
      <table style="width:100%;border-collapse:collapse;text-align:left;">
        <thead style="background:#f8fafc;border-bottom:1px solid #e2e8f0;">
          <tr>
            <th style="padding:12px 16px;font-size:0.85rem;color:#64748b;font-weight:600;">Ticket ID</th>
            <th style="padding:12px 16px;font-size:0.85rem;color:#64748b;font-weight:600;">Issue Title</th>
            <th style="padding:12px 16px;font-size:0.85rem;color:#64748b;font-weight:600;">Category</th>
            <th style="padding:12px 16px;font-size:0.85rem;color:#64748b;font-weight:600;">Status</th>
            <th style="padding:12px 16px;font-size:0.85rem;color:#64748b;font-weight:600;">Date</th>
          </tr>
        </thead>
        <tbody>
          <tr style="border-bottom:1px solid #f1f5f9;">
            <td style="padding:12px 16px;font-size:0.9rem;color:#0f172a;font-weight:600;">#TK3256</td>
            <td style="padding:12px 16px;font-size:0.9rem;color:#0f172a;">System login issue</td>
            <td style="padding:12px 16px;font-size:0.9rem;color:#475569;">IT Support</td>
            <td style="padding:12px 16px;"><span style="background:#dcfce7;color:#16a34a;padding:2px 8px;border-radius:12px;font-size:0.75rem;font-weight:600;">Open</span></td>
            <td style="padding:12px 16px;font-size:0.85rem;color:#64748b;">25 May 2026</td>
          </tr>
          <tr style="border-bottom:1px solid #f1f5f9;">
            <td style="padding:12px 16px;font-size:0.9rem;color:#0f172a;font-weight:600;">#TK3251</td>
            <td style="padding:12px 16px;font-size:0.9rem;color:#0f172a;">Payslip not showing</td>
            <td style="padding:12px 16px;font-size:0.9rem;color:#475569;">HR Support</td>
            <td style="padding:12px 16px;"><span style="background:#fef3c7;color:#d97706;padding:2px 8px;border-radius:12px;font-size:0.75rem;font-weight:600;">In Progress</span></td>
            <td style="padding:12px 16px;font-size:0.85rem;color:#64748b;">20 May 2026</td>
          </tr>
          <tr>
            <td style="padding:12px 16px;font-size:0.9rem;color:#0f172a;font-weight:600;">#TK3240</td>
            <td style="padding:12px 16px;font-size:0.9rem;color:#0f172a;">Attendance correction</td>
            <td style="padding:12px 16px;font-size:0.9rem;color:#475569;">Admin Support</td>
            <td style="padding:12px 16px;"><span style="background:#f1f5f9;color:#64748b;padding:2px 8px;border-radius:12px;font-size:0.75rem;font-weight:600;">Resolved</span></td>
            <td style="padding:12px 16px;font-size:0.85rem;color:#64748b;">15 May 2026</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

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