<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manage Complaints | Admin Panel</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
  <style>
    .admin-nav {
      background-color: var(--bg-card);
      border-bottom: 1px solid var(--border-color);
      padding: 12px 20px;
    }
    .admin-nav-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .admin-menu {
      display: flex;
      gap: 10px;
    }
    .admin-menu a {
      color: var(--text-muted);
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.9rem;
    }
    .admin-menu a:hover, .admin-menu a.active {
      background-color: var(--accent-gold);
      color: #000;
    }
    .table-container {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      overflow-x: auto;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }
    th, td {
      padding: 12px 15px;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.9rem;
    }
    th {
      background-color: rgba(0, 0, 0, 0.4);
      color: var(--accent-gold);
      font-weight: 600;
    }
    .status-badge {
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 700;
    }
    .status-Pending { background: rgba(255, 183, 3, 0.2); color: var(--accent-gold); }
    .status-Resolved { background: rgba(46, 196, 182, 0.2); color: var(--accent-green); }
    .status-Dismissed { background: rgba(230, 57, 70, 0.2); color: var(--accent-red); }
    .alert-msg {
      background: rgba(46, 196, 182, 0.2);
      border: 1px solid var(--accent-green);
      color: var(--accent-green);
      padding: 10px 15px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>

  <!-- Admin Header -->
  <header class="site-header">
    <div class="header-container">
      <a href="/admin/dashboard" class="logo-area">
        <div class="logo-icon">ADMIN</div>
        <div class="logo-text">
          <h1><%= settings.siteTitle %></h1>
          <span>COMPLAINT MANAGER</span>
        </div>
      </a>
      <div>
        <a href="/" target="_blank" class="btn-admin" style="margin-right: 10px;"><i class="fas fa-external-link-alt"></i> View Site</a>
        <a href="/admin/logout" class="btn-admin" style="border-color: var(--accent-red); color: var(--accent-red);"><i class="fas fa-sign-out-alt"></i> Logout</a>
      </div>
    </div>
  </header>

  <!-- Admin Sub Nav -->
  <nav class="admin-nav">
    <div class="admin-nav-container">
      <div class="admin-menu">
        <a href="/admin/dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
        <a href="/admin/agents"><i class="fas fa-users-cog"></i> Manage Agents</a>
        <a href="/admin/settings"><i class="fas fa-sliders-h"></i> Site Settings</a>
        <a href="/admin/complaints" class="active"><i class="fas fa-exclamation-circle"></i> Complaints</a>
      </div>
    </div>
  </nav>

  <main class="main-container">

    <% if (msg) { %>
      <div class="alert-msg"><i class="fas fa-info-circle"></i> <%= msg %></div>
    <% } %>

    <h2 style="margin-bottom: 20px; color: #fff;"><i class="fas fa-exclamation-triangle"></i> User Complaints Against Agents</h2>

    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>Date</th>
            <th>Agent ID</th>
            <th>Agent Name</th>
            <th>User Contact</th>
            <th>Issue Details</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <% if (complaints && complaints.length > 0) { %>
            <% complaints.forEach(c => { %>
              <tr>
                <td style="white-space: nowrap; font-size: 0.8rem; color: #888;"><%= c.date %></td>
                <td><strong style="color: var(--accent-gold);"><%= c.agentId %></strong></td>
                <td><%= c.agentName %></td>
                <td><i class="fab fa-whatsapp" style="color: #25d366;"></i> <%= c.userContact %></td>
                <td style="max-width: 250px;"><%= c.issue %></td>
                <td><span class="status-badge status-<%= c.status %>"><%= c.status %></span></td>
                <td style="white-space: nowrap;">
                  <form action="/admin/complaints/status/<%= c.id %>" method="POST" style="display: inline;">
                    <select name="status" onchange="this.form.submit()" style="padding: 4px; background: #2a2a2a; color: #fff; border: 1px solid #444; border-radius: 4px;">
                      <option value="Pending" <%= c.status === 'Pending' ? 'selected' : '' %>>Pending</option>
                      <option value="Resolved" <%= c.status === 'Resolved' ? 'selected' : '' %>>Resolved</option>
                      <option value="Dismissed" <%= c.status === 'Dismissed' ? 'selected' : '' %>>Dismissed</option>
                    </select>
                  </form>
                  <form action="/admin/complaints/delete/<%= c.id %>" method="POST" style="display: inline;" onsubmit="return confirm('Delete complaint?')">
                    <button type="submit" style="background: none; border: none; color: var(--accent-red); cursor: pointer; margin-left: 5px;" title="Delete">
                      <i class="fas fa-trash"></i>
                    </button>
                  </form>
                </td>
              </tr>
            <% }); %>
          <% } else { %>
            <tr>
              <td colspan="7" style="text-align: center; padding: 20px; color: var(--text-muted);">No complaints reported yet.</td>
            </tr>
          <% } %>
        </tbody>
      </table>
    </div>

  </main>

</body>
</html>
