<?php
session_start();
require_once "../config.php";

if (!isset($_SESSION['user_id']) || !isset($_SESSION['role']) || $_SESSION['role'] !== 'sales_manager') {
    header("Location: ../login.php");
    exit;
}

function e($v) {
    return htmlspecialchars((string)($v ?? ''), ENT_QUOTES, 'UTF-8');
}

$managerId = (int)$_SESSION['user_id'];

/* CSRF */
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$csrf = $_SESSION['csrf_token'];

$msg = $_SESSION['flash_success'] ?? '';
$error = $_SESSION['flash_error'] ?? '';
unset($_SESSION['flash_success'], $_SESSION['flash_error']);

$activeTab = $_GET['tab'] ?? 'pending';
if (!in_array($activeTab, ['pending', 'approved', 'rejected'], true)) {
    $activeTab = 'pending';
}

/* =========================================================
   HANDLE APPROVE / REJECT
========================================================= */
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $postedToken = $_POST['csrf_token'] ?? '';

    if (!hash_equals($_SESSION['csrf_token'], $postedToken)) {
        $_SESSION['flash_error'] = 'Invalid request.';
        header("Location: " . $_SERVER['PHP_SELF'] . "?tab=" . urlencode($activeTab));
        exit;
    }

    if (isset($_POST['approve_id'])) {
        $id = (int)$_POST['approve_id'];

        $stmt = $conn->prepare("
            UPDATE users
            SET is_approved = 1,
                approver_id = ?
            WHERE id = ?
              AND role = 'medical_representative'
              AND manager_id = ?
        ");

        if ($stmt) {
            $stmt->bind_param("iii", $managerId, $id, $managerId);
            if ($stmt->execute()) {
                $_SESSION['flash_success'] = 'Medical Representative approved successfully.';
            } else {
                $_SESSION['flash_error'] = 'Unable to approve this request.';
            }
            $stmt->close();
        } else {
            $_SESSION['flash_error'] = 'Database error while approving.';
        }

        header("Location: " . $_SERVER['PHP_SELF'] . "?tab=pending");
        exit;
    }

    if (isset($_POST['reject_id'])) {
        $id = (int)$_POST['reject_id'];

        $stmt = $conn->prepare("
            UPDATE users
            SET is_approved = 2,
                approver_id = ?
            WHERE id = ?
              AND role = 'medical_representative'
              AND manager_id = ?
        ");

        if ($stmt) {
            $stmt->bind_param("iii", $managerId, $id, $managerId);
            if ($stmt->execute()) {
                $_SESSION['flash_success'] = 'Medical Representative rejected successfully.';
            } else {
                $_SESSION['flash_error'] = 'Unable to reject this request.';
            }
            $stmt->close();
        } else {
            $_SESSION['flash_error'] = 'Database error while rejecting.';
        }

        header("Location: " . $_SERVER['PHP_SELF'] . "?tab=pending");
        exit;
    }
}

/* =========================================================
   COUNTS
========================================================= */
$totalCount = 0;
$pendingCount = 0;
$approvedCount = 0;
$rejectedCount = 0;

$stmt = $conn->prepare("
    SELECT
        COUNT(*) AS total_count,
        SUM(CASE WHEN is_approved = 0 THEN 1 ELSE 0 END) AS pending_count,
        SUM(CASE WHEN is_approved = 1 THEN 1 ELSE 0 END) AS approved_count,
        SUM(CASE WHEN is_approved = 2 THEN 1 ELSE 0 END) AS rejected_count
    FROM users
    WHERE role = 'medical_representative'
      AND manager_id = ?
");

if ($stmt) {
    $stmt->bind_param("i", $managerId);
    $stmt->execute();
    $res = $stmt->get_result();
    if ($row = $res->fetch_assoc()) {
        $totalCount = (int)($row['total_count'] ?? 0);
        $pendingCount = (int)($row['pending_count'] ?? 0);
        $approvedCount = (int)($row['approved_count'] ?? 0);
        $rejectedCount = (int)($row['rejected_count'] ?? 0);
    }
    $stmt->close();
}

/* =========================================================
   PENDING LIST
========================================================= */
$pendingResult = null;
$stmt = $conn->prepare("
    SELECT id, name, email, is_approved, created_at
    FROM users
    WHERE role = 'medical_representative'
      AND is_approved = 0
      AND manager_id = ?
    ORDER BY id DESC
");

if ($stmt) {
    $stmt->bind_param("i", $managerId);
    $stmt->execute();
    $pendingResult = $stmt->get_result();
}

/* =========================================================
   APPROVED LIST
========================================================= */
$approvedResult = null;
$stmt2 = $conn->prepare("
    SELECT id, name, email, is_approved, approver_id, created_at
    FROM users
    WHERE role = 'medical_representative'
      AND is_approved = 1
      AND manager_id = ?
    ORDER BY id DESC
");

if ($stmt2) {
    $stmt2->bind_param("i", $managerId);
    $stmt2->execute();
    $approvedResult = $stmt2->get_result();
}

/* =========================================================
   REJECTED LIST
========================================================= */
$rejectedResult = null;
$stmt3 = $conn->prepare("
    SELECT id, name, email, is_approved, approver_id, created_at
    FROM users
    WHERE role = 'medical_representative'
      AND is_approved = 2
      AND manager_id = ?
    ORDER BY id DESC
");

if ($stmt3) {
    $stmt3->bind_param("i", $managerId);
    $stmt3->execute();
    $rejectedResult = $stmt3->get_result();
}

$currentPage = basename($_SERVER['PHP_SELF']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medical Representatives</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        :root{
            --bg:#eef3f9;
            --card:#ffffff;
            --card-2:#f8fbff;
            --text:#0f172a;
            --muted:#64748b;
            --border:#e5eaf2;
            --shadow:0 16px 40px rgba(15,23,42,.08);
            --shadow-soft:0 10px 24px rgba(15,23,42,.06);
            --radius:22px;

            --primary:#2563eb;
            --primary-dark:#1d4ed8;
            --success:#16a34a;
            --success-bg:#dcfce7;
            --success-text:#166534;
            --danger:#dc2626;
            --danger-bg:#fee2e2;
            --danger-text:#991b1b;
            --warning-bg:#fef3c7;
            --warning-text:#92400e;
            --neutral-bg:#e2e8f0;
            --neutral-text:#334155;
        }

        *{ box-sizing:border-box; }

        body{
            margin:0;
            font-family:Inter, Arial, Helvetica, sans-serif;
            background:var(--bg);
            color:var(--text);
        }

        a{ text-decoration:none; color:inherit; }

        .page{
            margin-left:260px;
            padding:26px 28px;
            min-height:100vh;
        }

        .header-card{
            background:#ffffff;
            border-radius:18px;
            padding:35px 36px;
            margin-bottom:20px;
            box-shadow:0 10px 30px rgba(0,0,0,0.05);
        }

        .topbar{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:16px;
            margin-bottom:18px;
        }

        .title-wrap h1{
            font-size:20px;
            font-weight:700;
            color:#1e293b;
            margin:0;
             display:flex;
  align-items:center;
        }

        .title-wrap p{
            margin:8px 0 0;
            color:var(--muted);
            font-size:13px;
        }
        .title-wrap h1 i{
  font-size:20px;
  color:#334155;
  margin-right:10px;
   display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

        .summary{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:14px;
            margin-top:18px;
        }

        .stat{
            background:var(--card);
            border:1px solid var(--border);
            border-radius:18px;
            padding:14px 16px;
            box-shadow:var(--shadow-soft);
        }

        .stat .label{
            color:var(--muted);
            font-size:12.5px;
            font-weight:700;
            margin-bottom:8px;
        }

        .stat .value{
            font-size:22px;
            font-weight:900;
            line-height:1;
            color:#0f172a;
        }
        .stat .label i{
  font-size:14px;
  color:#475569;
  margin-right:6px;
}

        .tabs{
            display:flex;
            gap:12px;
            padding:6px;
            background:#f1f5f9;
            border-radius:14px;
            width:fit-content;
            box-shadow:inset 0 2px 6px rgba(0,0,0,0.05);
            flex-wrap:wrap;
        }

        .tab-btn{
            position:relative;
            display:flex;
            align-items:center;
            gap:10px;
            padding:8px 14px;
            font-size: 12px;
            border-radius:12px;
            border:none;
            background:transparent;
            color:#475569;
            font-weight:600;
            cursor:pointer;
            transition:all .25s ease;
        }

        .tab-btn i{
  font-size:13px;
  opacity:0.9;
}

        .tab-btn:hover{
            color:#0f172a;
        }

        .tab-btn.active{
            background:#334155;
            color:#fff;
            box-shadow:0 6px 18px rgba(51,65,85,0.35);
        }

        .tab-count{
            margin-left:6px;
            padding:3px 8px;
            border-radius:999px;
            font-size:11px;
            font-weight:700;
            background:#e2e8f0;
            color:#334155;
        }

        .tab-btn.active .tab-count{
            background:rgba(255,255,255,0.2);
            color:#fff;
        }

        .tab-btn:not(.active) .tab-count{
            background:#cbd5e1;
            color:#1e293b;
        }

        .panel{
            background:var(--card);
            border:1px solid var(--border);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            overflow:hidden;
        }

        .panel-head{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            padding:14px 16px;
            border-bottom:1px solid var(--border);
            background:linear-gradient(180deg,#fff 0%, #fbfcfe 100%);
        }

        .panel-head h2{
            margin:0;
            font-size:16px;
            font-weight:900;
            color:#0f172a;
        }

        .panel-head h2 i{
  font-size:14px;
  color:#475569;
  margin-right:6px;
}
        .panel-head .sub{
            color:var(--muted);
            font-size:12.5px;
        }

        .flash{
            padding:14px 16px;
            border-radius:14px;
            margin-bottom:16px;
            font-weight:700;
            border:1px solid transparent;
        }

        .flash.success{
            background:#ecfdf5;
            color:var(--success-text);
            border-color:#bbf7d0;
        }

        .flash.error{
            background:#fef2f2;
            color:var(--danger-text);
            border-color:#fecaca;
        }

        .table-wrap{
            margin-top:10px;
        }

        table{
            width:100%;
            border-collapse:separate;
            border-spacing:0 12px;
        }

        thead th{
            background:#334155;
            color:#fff;
            padding:10px;
            font-size:13px;
            text-align:left;
            border:none;
        }
thead th i{
  font-size:12px;
  margin-right:5px;
  opacity:0.9;
}
        thead th:first-child{
            border-radius:12px 0 0 12px;
        }
        thead th:last-child{
            border-radius:0 12px 12px 0;
        }

        tbody td{
            background:#f1f5f9;
            padding:10px;
            font-size:13.5px;
            border-top:1px solid #e2e8f0;
            border-bottom:1px solid #e2e8f0;
            color:#0f172a;
            font-weight:500;
        }

        tbody tr td:first-child{
            border-left:1px solid #e2e8f0;
            border-radius:12px 0 0 12px;
        }

        tbody tr td:last-child{
            border-right:1px solid #e2e8f0;
            border-radius:0 12px 12px 0;
        }

        tbody tr:hover td{
            background:#e2e8f0;
        }

        .id-pill{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:38px;
            height:26px;
            border-radius:999px;
            padding:0 12px;
            background:#e0e7ff;
            color:#3730a3;
            font-weight:800;
            font-size:11.5px;
        }

        .badge{
            font-size:11.5px;
            padding:5px 8px;
            border-radius:999px;
        }

        .badge-approved{
            background:#dcfce7;
            color:#166534;
        }

        .badge-pending{
            background:#fef3c7;
            color:#92400e;
        }

        .badge-rejected{
            background:var(--danger-bg);
            color:var(--danger-text);
        }

        .btn-row{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
        }

        .btn{
            border:none;
            border-radius:10px;
            padding:6px 12px;
            font-size:12.5px;
            font-weight:700;
            cursor:pointer;
            display:inline-flex;
            align-items:center;
            gap:6px;
            transition:all .25s ease;
            box-shadow:0 4px 10px rgba(0,0,0,0.08);
        }

        .btn-approve{
            background:linear-gradient(135deg,#22c55e,#16a34a);
            color:#fff;
        }

        .btn-reject{
            background:linear-gradient(135deg,#ef4444,#dc2626);
            color:#fff;
        }

        .empty{
            padding:30px 18px;
            font-size: 13px;
            text-align:center;
            color:var(--muted);
        }

        .empty i{
            display:block;
            font-size:32px;
            margin-bottom:12px;
            color:#94a3b8;
        }

        .tab-content{
            display:none;
        }

        .tab-content.active{
            display:block;
        }

/* ================= PERFECT RESPONSIVE ================= */

/* TABLET */
@media (max-width:1100px){

  .page{
    margin-left:0;
    padding:18px;
  }

  .summary{
    grid-template-columns:repeat(2,1fr);
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }

}

/* MOBILE */
@media (max-width:768px){

  html, body{
    overflow-x:hidden;
  }

  .page{
    margin-left:0 !important;
    padding:12px;
  }

  .header-card{
    padding:16px;
    border-radius:16px;
  }

  .title-wrap h1{
    font-size:18px;
    line-height:1.3;
  }

  .title-wrap p{
    font-size:12px;
  }

  /* STATS */
  .summary{
    grid-template-columns:1fr;
    gap:10px;
  }

  .stat{
    padding:12px;
    border-radius:14px;
  }

  .stat .value{
    font-size:20px;
  }

  /* TABS FULL WIDTH */
  .tabs{
    width:100%;
    flex-direction:column;
    gap:8px;
  }

  .tab-btn{
    width:100%;
    justify-content:space-between;
    padding:10px 14px;
  }

  /* PANEL */
  .panel{
    border-radius:16px;
  }

  .panel-head{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .panel-head h2{
    font-size:15px;
  }

  .panel-head .sub{
    font-size:12px;
  }

  /* 🔥 TABLE → CARD UI */
  table{
    border-collapse:separate;
    border-spacing:0 12px;
  }

  thead{
    display:none;
  }

  table,
  tbody,
  tr,
  td{
    display:block;
    width:100%;
  }

  tbody tr{
    background:#ffffff;
    border:1px solid #e5eaf2;
    border-radius:16px;
    padding:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
  }

  tbody td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
    border:none;
    border-bottom:1px dashed #e5e7eb;
    font-size:13px;
  }

  tbody td:last-child{
    border-bottom:none;
  }

  /* LABEL */
  tbody td::before{
    content:attr(data-label);
    font-size:11px;
    font-weight:700;
    color:#64748b;
    text-transform:uppercase;
  }

  /* BUTTONS */
  .btn-row{
    flex-direction:column;
    width:100%;
  }

  .btn{
    width:100%;
    justify-content:center;
  }

}

/* SMALL MOBILE */
@media (max-width:480px){

  .page{
    padding:10px;
  }

  .header-card{
    padding:14px;
  }

  .title-wrap h1{
    font-size:16px;
  }

  .stat .value{
    font-size:18px;
  }

  .tab-btn{
    font-size:12px;
  }

  tbody td{
    font-size:12px;
  }

  tbody td::before{
    font-size:10px;
  }
}
    </style>
</head>
<body>

<?php
if (file_exists("../header.php")) {
    include "../header.php";
}
if (file_exists("salesmanagersidebar.php")) {
    include "salesmanagersidebar.php";
}
?>

<div class="page">
    <div class="header-card">
        <div class="topbar">
            <div class="title-wrap">
                <h1>
  <i class="fa-solid fa-user-nurse" style="margin-right:8px; color:#374151;"></i>
  Medical Representatives
</h1>
                <p>Review, approve, or reject medical representative signup requests under your management.</p>
            </div>
        </div>

        <div class="summary">
           <div class="stat">
  <div class="label">
    <i class="fa-solid fa-users" style="margin-right:6px;"></i>
    Total MR
  </div>
  <div class="value"><?php echo (int)$totalCount; ?></div>
</div>

<div class="stat">
  <div class="label">
    <i class="fa-solid fa-clock" style="margin-right:6px;"></i>
    Pending Requests
  </div>
  <div class="value"><?php echo (int)$pendingCount; ?></div>
</div>

<div class="stat">
  <div class="label">
    <i class="fa-solid fa-circle-check" style="margin-right:6px;"></i>
    Approved MR
  </div>
  <div class="value"><?php echo (int)$approvedCount; ?></div>
</div>

<div class="stat">
  <div class="label">
    <i class="fa-solid fa-circle-xmark" style="margin-right:6px;"></i>
    Rejected Requests
  </div>
  <div class="value"><?php echo (int)$rejectedCount; ?></div>
</div>
    </div>
<br>
    <?php if ($msg !== ''): ?>
        <div class="flash success"><?php echo e($msg); ?></div>
    <?php endif; ?>

    <?php if ($error !== ''): ?>
        <div class="flash error"><?php echo e($error); ?></div>
    <?php endif; ?>

    <div class="tabs">
        <button type="button" class="tab-btn <?php echo $activeTab === 'pending' ? 'active' : ''; ?>" onclick="showTab('pending')">
            <span><i class="fa-solid fa-clock"></i> Pending</span>
            <span class="tab-count"><?php echo (int)$pendingCount; ?></span>
        </button>
        <button type="button" class="tab-btn <?php echo $activeTab === 'approved' ? 'active' : ''; ?>" onclick="showTab('approved')">
            <span><i class="fa-solid fa-circle-check"></i> Approved</span>
            <span class="tab-count"><?php echo (int)$approvedCount; ?></span>
        </button>
        <button type="button" class="tab-btn <?php echo $activeTab === 'rejected' ? 'active' : ''; ?>" onclick="showTab('rejected')">
            <span><i class="fa-solid fa-circle-xmark"></i> Rejected</span>
            <span class="tab-count"><?php echo (int)$rejectedCount; ?></span>
        </button>
    </div>

   <div id="pending" class="tab-content panel <?php echo $activeTab === 'pending' ? 'active' : ''; ?>">
    <div class="panel-head">
        <div>
            <h2>Pending Medical Representatives</h2>
            <div class="sub">Requests waiting for your approval</div>
        </div>
    </div>

    <div class="table-wrap">
        <?php if ($pendingResult && $pendingResult->num_rows === 0): ?>
            <div class="empty">
                <i class="fa-regular fa-folder-open"></i>
                No pending medical representative requests
            </div>
        <?php else: ?>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                <?php if ($pendingResult): while ($row = $pendingResult->fetch_assoc()): ?>
                    <tr>
                        <td data-label="ID">
                            <span class="id-pill"><?php echo (int)$row['id']; ?></span>
                        </td>

                        <td data-label="Name">
                            <?php echo e($row['name']); ?>
                        </td>

                        <td data-label="Email">
                            <?php echo e($row['email']); ?>
                        </td>

                        <td data-label="Status">
                            <span class="badge badge-pending">Pending</span>
                        </td>

                        <td data-label="Action">
                            <div class="btn-row">
                                <form method="post" style="margin:0;">
                                    <input type="hidden" name="csrf_token" value="<?php echo e($csrf); ?>">
                                    <input type="hidden" name="approve_id" value="<?php echo (int)$row['id']; ?>">
                                    <button type="submit" class="btn btn-approve">
                                        <i class="fa-solid fa-check"></i> Approve
                                    </button>
                                </form>

                                <form method="post" style="margin:0;">
                                    <input type="hidden" name="csrf_token" value="<?php echo e($csrf); ?>">
                                    <input type="hidden" name="reject_id" value="<?php echo (int)$row['id']; ?>">
                                    <button type="submit" class="btn btn-reject" onclick="return confirm('Reject this request?');">
                                        <i class="fa-solid fa-xmark"></i> Reject
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                <?php endwhile; endif; ?>
                </tbody>
            </table>
        <?php endif; ?>
    </div>
</div>

<div id="approved" class="tab-content panel <?php echo $activeTab === 'approved' ? 'active' : ''; ?>" style="margin-top:18px;">
    <div class="panel-head">
        <div>
            <h2>Approved Medical Representatives</h2>
            <div class="sub">Medical representatives approved by you</div>
        </div>
    </div>

    <div class="table-wrap">
        <?php if (!$approvedResult || $approvedResult->num_rows == 0): ?>
            <div class="empty">
                <i class="fa-solid fa-user-check"></i>
                No approved medical representatives yet
            </div>
        <?php else: ?>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Joined</th>
                    </tr>
                </thead>
                <tbody>
                <?php while ($row = $approvedResult->fetch_assoc()): ?>
                    <tr>
                        <td data-label="ID">
                            <span class="id-pill"><?php echo (int)$row['id']; ?></span>
                        </td>
                        <td data-label="Name">
                            <?php echo e($row['name']); ?>
                        </td>
                        <td data-label="Email">
                            <?php echo e($row['email']); ?>
                        </td>
                        <td data-label="Status">
                            <span class="badge badge-approved">Approved</span>
                        </td>
                        <td data-label="Joined">
                            <?php echo !empty($row['created_at']) ? e(date('d M Y', strtotime($row['created_at']))) : '-'; ?>
                        </td>
                    </tr>
                <?php endwhile; ?>
                </tbody>
            </table>
        <?php endif; ?>
    </div>
</div>

<div id="rejected" class="tab-content panel <?php echo $activeTab === 'rejected' ? 'active' : ''; ?>" style="margin-top:18px;">
    <div class="panel-head">
        <div>
            <h2>Rejected Medical Representatives</h2>
            <div class="sub">Medical representatives rejected by you</div>
        </div>
    </div>

    <div class="table-wrap">
        <?php if (!$rejectedResult || $rejectedResult->num_rows == 0): ?>
            <div class="empty">
                <i class="fa-solid fa-user-xmark"></i>
                No rejected medical representatives
            </div>
        <?php else: ?>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Joined</th>
                    </tr>
                </thead>
                <tbody>
                <?php while ($row = $rejectedResult->fetch_assoc()): ?>
                    <tr>
                        <td data-label="ID">
                            <span class="id-pill"><?php echo (int)$row['id']; ?></span>
                        </td>
                        <td data-label="Name">
                            <?php echo e($row['name']); ?>
                        </td>
                        <td data-label="Email">
                            <?php echo e($row['email']); ?>
                        </td>
                        <td data-label="Status">
                            <span class="badge badge-rejected">Rejected</span>
                        </td>
                        <td data-label="Joined">
                            <?php echo !empty($row['created_at']) ? e(date('d M Y', strtotime($row['created_at']))) : '-'; ?>
                        </td>
                    </tr>
                <?php endwhile; ?>
                </tbody>
            </table>
        <?php endif; ?>
    </div>
</div>
</div>

<script>
function showTab(tab) {
    const tabs = ['pending', 'approved', 'rejected'];

    tabs.forEach(t => {
        const el = document.getElementById(t);
        if (el) el.classList.remove('active');
    });

    const target = document.getElementById(tab);
    if (target) target.classList.add('active');

    const buttons = document.querySelectorAll('.tab-btn');
    buttons.forEach(btn => btn.classList.remove('active'));

    if (tab === 'pending' && buttons[0]) buttons[0].classList.add('active');
    if (tab === 'approved' && buttons[1]) buttons[1].classList.add('active');
    if (tab === 'rejected' && buttons[2]) buttons[2].classList.add('active');

    const url = new URL(window.location.href);
    url.searchParams.set('tab', tab);
    window.history.replaceState({}, '', url);
}
</script>

</body>
</html>