<?php
session_start();
require_once 'db.php';

// Check if admin is logged in
if (!isset($_SESSION['admin_id'])) {
    header("Location: admin_login.php");
    exit;
}

// Get admin info
$admin_id = $_SESSION['admin_id'];
$admin    = $conn->query("SELECT * FROM admin_users WHERE id = $admin_id")->fetch_assoc();

$success = '';
$error   = '';

// ── Handle URL update ──────────────────────────────────────
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {

    if ($_POST['action'] === 'update_support_url') {
        $url       = trim($_POST['support_url'] ?? '');
        $url_admin = trim($_POST['support_url_admin'] ?? '');

        if (empty($url) && empty($url_admin)) {
            $error = 'Please enter at least one URL.';
        } else {
            $conn->query("UPDATE settings SET key_value = '" . $conn->real_escape_string($url) . "', updated_at = NOW() WHERE key_name = 'support_url'");
            $conn->query("UPDATE settings SET key_value = '" . $conn->real_escape_string($url_admin) . "', updated_at = NOW() WHERE key_name = 'support_url_admin'");
            $success = 'Support URLs updated successfully.';
        }
    }

    if ($_POST['action'] === 'change_password') {
        $old = $_POST['old_password'] ?? '';
        $new = $_POST['new_password'] ?? '';
        $cnf = $_POST['confirm_password'] ?? '';

        if (strlen($new) < 4) {
            $error = 'New password must be at least 4 characters.';
        } elseif ($new !== $cnf) {
            $error = 'Passwords do not match.';
        } elseif (!password_verify($old, $admin['password'])) {
            $error = 'Current password is incorrect.';
        } else {
            $hashed = password_hash($new, PASSWORD_DEFAULT);
            $conn->query("UPDATE admin_users SET password='$hashed' WHERE id=$admin_id");
            $success = 'Password changed successfully.';
            $admin = $conn->query("SELECT * FROM admin_users WHERE id = $admin_id")->fetch_assoc();
        }
    }

    if ($_POST['action'] === 'update_currency') {
        $symbol = trim($_POST['currency_symbol'] ?? '');
        if (empty($symbol)) {
            $error = 'Currency symbol cannot be empty.';
        } else {
            $s = $conn->real_escape_string($symbol);
            $conn->query("INSERT INTO settings (key_name, key_value) VALUES ('currency_symbol','$s')
                          ON DUPLICATE KEY UPDATE key_value='$s', updated_at=NOW()");
            $success = 'Currency symbol updated to "' . htmlspecialchars($symbol) . '" for all user pages.';
        }
    }
}

function getSetting($conn, $key) {
    $r = $conn->query("SELECT key_value FROM settings WHERE key_name = '" . $conn->real_escape_string($key) . "'")->fetch_assoc();
    return $r['key_value'] ?? '';
}

$support_url       = getSetting($conn, 'support_url');
$support_url_admin = getSetting($conn, 'support_url_admin');
$currency_symbol   = getSetting($conn, 'currency_symbol') ?: '$';

$total_users  = $conn->query("SELECT COUNT(*) as c FROM users")->fetch_assoc()['c'];
$today_users  = $conn->query("SELECT COUNT(*) as c FROM users WHERE DATE(created_at) = CURDATE()")->fetch_assoc()['c'];
$recent_users = $conn->query("SELECT id, phone, created_at FROM users ORDER BY created_at DESC LIMIT 8")->fetch_all(MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - WFM</title>
<style>
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

  :root {
    --sidebar-w: 240px;
    --teal:      #3ecf8e;
    --blue:      #2c7be5;
    --dark:      #0f2027;
    --card-bg:   #fff;
    --body-bg:   #f0f4f8;
    --text:      #2d3748;
    --muted:     #718096;
    --border:    #e2e8f0;
    --radius:    12px;
  }

  body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background: var(--body-bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
  }

  /* ── Sidebar ── */
  .sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, #0f2027 0%, #203a43 100%);
    min-height: 100vh;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform .3s ease;
  }

  .sidebar-logo {
    padding: 22px 16px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .sidebar-logo svg { width: 34px; height: 34px; flex-shrink:0; }

  .sidebar-logo span {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
  }

  /* ── Hamburger quick links ── */
  .quick-links {
    padding: 10px 0 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .quick-links-label {
    padding: 0 16px 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.35);
  }

  .quick-link-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: all .18s;
    border-left: 3px solid transparent;
  }

  .quick-link-btn:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
    border-left-color: var(--teal);
  }

  .quick-link-btn .ql-icon {
    width: 26px; height: 26px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
  }

  .ql-icon.deposits   { background: rgba(62,207,142,.15); color: #3ecf8e; }
  .ql-icon.finance    { background: rgba(44,123,229,.15);  color: #2c7be5; }
  .ql-icon.invest     { background: rgba(255,193,7,.15);   color: #f0c040; }
  .ql-icon.login      { background: rgba(255,91,122,.15);  color: #ff5b7a; }
  .ql-icon.message    { background: rgba(0,212,170,.15);   color: #00d4aa; }
  .ql-icon.payment    { background: rgba(155,114,245,.15); color: #9b72f5; }
  .ql-icon.plans      { background: rgba(62,207,142,.15);  color: #3ecf8e; }
  .ql-icon.withdraw   { background: rgba(255,152,0,.15);   color: #ff9800; }

  .sidebar-nav { padding: 10px 0; flex: 1; overflow-y: auto; }

  .nav-section-label {
    padding: 10px 16px 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.35);
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
    border-left: 3px solid transparent;
    text-decoration: none;
    background: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
  }

  .nav-item:hover, .nav-item.active {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-left-color: var(--teal);
  }

  .nav-item svg { width: 17px; height: 17px; flex-shrink:0; }

  .sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .admin-pill {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .admin-avatar {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--teal), var(--blue));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 14px;
    flex-shrink: 0;
  }

  .admin-info { flex: 1; overflow: hidden; }
  .admin-info .aname { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-info .arole { color: rgba(255,255,255,0.5); font-size: 11px; }

  .logout-btn {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.5); display: flex; align-items: center;
    transition: color .2s; flex-shrink: 0;
  }
  .logout-btn:hover { color: #ff6b6b; }
  .logout-btn svg { width: 18px; height: 18px; }

  /* ── Main ── */
  .main {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left .3s ease;
  }

  .topbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; top: 0; z-index: 50;
  }

  .topbar-left { display: flex; align-items: center; gap: 14px; }

  .hamburger-btn {
    display: none;
    background: none; border: none; cursor: pointer;
    color: var(--text); padding: 4px;
    flex-direction: column; gap: 5px;
    justify-content: center;
  }
  .hamburger-btn span {
    display: block; width: 22px; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: all .3s;
  }

  .topbar h1 { font-size: 19px; font-weight: 700; color: var(--text); }
  .topbar .date { color: var(--muted); font-size: 13px; }

  .content { padding: 24px 22px; flex: 1; }

  /* ── Alerts ── */
  .alert {
    padding: 12px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
  }
  .alert.success { background: #e6f9f0; color: #1a7a4a; border-left: 4px solid var(--teal); }
  .alert.error   { background: #fde8e8; color: #c0392b; border-left: 4px solid #e74c3c; }

  /* ── Stat cards ── */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
  }

  .stat-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .stat-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .stat-icon svg { width: 22px; height: 22px; }
  .stat-icon.green { background: #e6f9f0; color: #1a7a4a; }
  .stat-icon.blue  { background: #e8f0fe; color: #1a5cbf; }

  .stat-val { font-size: 24px; font-weight: 800; line-height: 1; }
  .stat-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; }

  /* ── Section cards ── */
  .section-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    margin-bottom: 22px;
    overflow: hidden;
  }

  .section-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .section-head h2 { font-size: 15px; font-weight: 700; }
  .section-head svg { width: 20px; height: 20px; color: var(--blue); }

  .section-body { padding: 20px; }

  /* ── Form ── */
  .form-label {
    display: block;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--muted); margin-bottom: 6px;
  }
  .form-input {
    width: 100%; height: 44px;
    border: 1.5px solid var(--border); border-radius: 10px;
    padding: 0 14px; font-size: 14px; font-family: inherit;
    color: var(--text); outline: none; transition: border-color .2s;
    margin-bottom: 14px;
  }
  .form-input:focus { border-color: var(--blue); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 22px; height: 44px;
    border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; transition: opacity .15s, transform .1s;
    font-family: inherit;
  }
  .btn:hover { opacity: 0.9; }
  .btn:active { transform: scale(0.98); }
  .btn-primary { background: linear-gradient(90deg, var(--teal), var(--blue)); color: #fff; box-shadow: 0 4px 14px rgba(44,123,229,0.3); }
  .btn-danger  { background: linear-gradient(90deg, #e74c3c, #c0392b); color: #fff; box-shadow: 0 4px 14px rgba(231,76,60,0.3); }
  .btn svg { width: 16px; height: 16px; }

  /* ── Table ── */
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th {
    text-align: left; padding: 10px 14px;
    background: var(--body-bg); color: var(--muted);
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.5px; font-weight: 600;
  }
  td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: #f7fafc; }
  .badge {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    background: #e6f9f0; color: #1a7a4a;
  }

  /* ── Tab panels ── */
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  /* ── Overlay for mobile ── */
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99;
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .sidebar {
      transform: translateX(-100%);
    }
    .sidebar.open {
      transform: translateX(0);
    }
    .sidebar-overlay.open {
      display: block;
    }
    .main {
      margin-left: 0;
    }
    .hamburger-btn {
      display: flex;
    }
    .content { padding: 16px 14px; }
  }
</style>
</head>
<body>

<!-- Overlay -->
<div class="sidebar-overlay" id="overlay" onclick="closeSidebar()"></div>

<!-- ── Sidebar ── -->
<aside class="sidebar" id="sidebar">
  <div class="sidebar-logo">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="gl" cx="40%" cy="38%" r="60%">
          <stop offset="0%" stop-color="#5bc8d8"/>
          <stop offset="100%" stop-color="#1a5a8a"/>
        </radialGradient>
      </defs>
      <circle cx="50" cy="50" r="46" fill="url(#gl)"/>
      <ellipse cx="38" cy="42" rx="18" ry="11" fill="#2db88a" opacity="0.75" transform="rotate(-20 38 42)"/>
      <ellipse cx="62" cy="56" rx="12" ry="8" fill="#3ecf8e" opacity="0.65" transform="rotate(15 62 56)"/>
      <text x="50" y="56" text-anchor="middle" font-family="'Segoe UI',Arial,sans-serif" font-weight="900" font-size="20" fill="#fff">WFM</text>
    </svg>
    <span>Admin Panel</span>
  </div>

  <!-- ── Quick Link Buttons ── -->
  <div class="quick-links">
    <div class="quick-links-label">Quick Links</div>

    <a href="admin_deposits.php" class="quick-link-btn">
      <span class="ql-icon deposits">💰</span>
      Deposits
    </a>
    <a href="admin_finance_settings.php" class="quick-link-btn">
      <span class="ql-icon finance">⚙️</span>
      Finance Settings
    </a>
    <a href="admin_investment_plans.php" class="quick-link-btn">
      <span class="ql-icon invest">📈</span>
      Investment Plans
    </a>
    <a href="admin_login.php" class="quick-link-btn">
      <span class="ql-icon login">🔐</span>
      Admin Login
    </a>
    <a href="admin_message.php" class="quick-link-btn">
      <span class="ql-icon message">✉️</span>
      Messages
    </a>
    <a href="admin_payment_methods.php" class="quick-link-btn">
      <span class="ql-icon payment">💳</span>
      Payment Methods
    </a>
    <a href="admin_plans.php" class="quick-link-btn">
      <span class="ql-icon plans">📋</span>
      Plans
    </a>
    <a href="admin_withdrawals.php" class="quick-link-btn">
      <span class="ql-icon withdraw">💸</span>
      Withdrawals
    </a>
  </div>

  <!-- ── Main Nav ── -->
  <nav class="sidebar-nav">
    <div class="nav-section-label">Management</div>
    <a class="nav-item active" href="#" onclick="showTab('dashboard',this)">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
      Dashboard
    </a>
    <a class="nav-item" href="#" onclick="showTab('support',this)">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
      Support URL
    </a>
    <a class="nav-item" href="#" onclick="showTab('users',this)">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
      Users
    </a>
    <a class="nav-item" href="#" onclick="showTab('password',this)">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 8h-1V6A5 5 0 0 0 7 6v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-6 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm3.1-9H8.9V6a3.1 3.1 0 1 1 6.2 0v2z"/></svg>
      Change Password
    </a>
    <a class="nav-item" href="#" onclick="showTab('currency',this)">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>
      Currency Symbol
    </a>
  </nav>

  <div class="sidebar-footer">
    <div class="admin-pill">
      <div class="admin-avatar"><?= strtoupper(substr($admin['name'], 0, 1)) ?></div>
      <div class="admin-info">
        <div class="aname"><?= htmlspecialchars($admin['name']) ?></div>
        <div class="arole">Administrator</div>
      </div>
      <form method="POST" action="admin_logout.php" style="margin:0">
        <button type="submit" class="logout-btn" title="Logout">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>
        </button>
      </form>
    </div>
  </div>
</aside>

<!-- ── Main ── -->
<main class="main">
  <div class="topbar">
    <div class="topbar-left">
      <!-- Hamburger button (mobile) -->
      <button class="hamburger-btn" id="hamburger" onclick="toggleSidebar()" aria-label="Toggle menu">
        <span></span><span></span><span></span>
      </button>
      <h1 id="page-title">Dashboard</h1>
    </div>
    <span class="date"><?= date('l, d F Y') ?></span>
  </div>

  <div class="content">

    <?php if ($success): ?>
      <div class="alert success"><?= htmlspecialchars($success) ?></div>
    <?php endif; ?>
    <?php if ($error): ?>
      <div class="alert error"><?= htmlspecialchars($error) ?></div>
    <?php endif; ?>

    <!-- ══ TAB: Dashboard ══ -->
    <div class="tab-panel active" id="tab-dashboard">
      <div class="stats-row">
        <div class="stat-card">
          <div class="stat-icon green">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
          </div>
          <div>
            <div class="stat-val"><?= number_format($total_users) ?></div>
            <div class="stat-lbl">Total Users</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon blue">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>
          </div>
          <div>
            <div class="stat-val"><?= number_format($today_users) ?></div>
            <div class="stat-lbl">New Today</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon green">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
          </div>
          <div>
            <div class="stat-val">WFM</div>
            <div class="stat-lbl">Platform Active</div>
          </div>
        </div>
      </div>

      <div class="section-card">
        <div class="section-head">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
          <h2>Recent Registrations</h2>
        </div>
        <div style="overflow-x:auto">
          <table>
            <thead>
              <tr><th>#</th><th>Phone</th><th>Registered</th><th>Status</th></tr>
            </thead>
            <tbody>
              <?php foreach ($recent_users as $u): ?>
              <tr>
                <td><?= $u['id'] ?></td>
                <td><?= htmlspecialchars($u['phone']) ?></td>
                <td><?= date('d M Y, H:i', strtotime($u['created_at'])) ?></td>
                <td><span class="badge">Active</span></td>
              </tr>
              <?php endforeach; ?>
              <?php if (empty($recent_users)): ?>
              <tr><td colspan="4" style="text-align:center;color:#aaa;padding:24px">No users yet.</td></tr>
              <?php endif; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ══ TAB: Support URL ══ -->
    <div class="tab-panel" id="tab-support">
      <div class="section-card">
        <div class="section-head">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
          <h2>Customer Support URLs</h2>
        </div>
        <div class="section-body">
          <p style="font-size:13px;color:var(--muted);margin-bottom:20px">
            These URLs appear on the login and register pages as the "Online Service" link.
          </p>
          <form method="POST">
            <input type="hidden" name="action" value="update_support_url">
            <div class="form-row">
              <div>
                <label class="form-label">User Support URL</label>
                <input type="url" class="form-input" name="support_url"
                       placeholder="https://wa.me/255700000000"
                       value="<?= htmlspecialchars($support_url) ?>">
              </div>
              <div>
                <label class="form-label">Admin Support URL</label>
                <input type="url" class="form-input" name="support_url_admin"
                       placeholder="https://wa.me/255700000001"
                       value="<?= htmlspecialchars($support_url_admin) ?>">
              </div>
            </div>
            <button type="submit" class="btn btn-primary">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
              Save URLs
            </button>
          </form>
        </div>
      </div>
      <div class="section-card">
        <div class="section-head">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
          <h2>Current URLs</h2>
        </div>
        <div class="section-body">
          <p style="font-size:13px;margin-bottom:8px"><strong>User URL:</strong>
            <a href="<?= htmlspecialchars($support_url) ?>" target="_blank" style="color:var(--blue)"><?= htmlspecialchars($support_url) ?></a>
          </p>
          <p style="font-size:13px"><strong>Admin URL:</strong>
            <a href="<?= htmlspecialchars($support_url_admin) ?>" target="_blank" style="color:var(--blue)"><?= htmlspecialchars($support_url_admin) ?></a>
          </p>
        </div>
      </div>
    </div>

    <!-- ══ TAB: Users ══ -->
    <div class="tab-panel" id="tab-users">
      <div class="section-card">
        <div class="section-head">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
          <h2>All Users (<?= $total_users ?>)</h2>
        </div>
        <div style="overflow-x:auto">
          <?php
          $all_users = $conn->query("SELECT id, phone, invitation_code, created_at FROM users ORDER BY created_at DESC")->fetch_all(MYSQLI_ASSOC);
          ?>
          <table>
            <thead>
              <tr><th>ID</th><th>Phone</th><th>Invitation Code</th><th>Registered</th><th>Status</th></tr>
            </thead>
            <tbody>
              <?php foreach ($all_users as $u): ?>
              <tr>
                <td><?= $u['id'] ?></td>
                <td><?= htmlspecialchars($u['phone']) ?></td>
                <td><?= htmlspecialchars($u['invitation_code'] ?: '—') ?></td>
                <td><?= date('d M Y, H:i', strtotime($u['created_at'])) ?></td>
                <td><span class="badge">Active</span></td>
              </tr>
              <?php endforeach; ?>
              <?php if (empty($all_users)): ?>
              <tr><td colspan="5" style="text-align:center;color:#aaa;padding:24px">No users found.</td></tr>
              <?php endif; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ══ TAB: Change Password ══ -->
    <div class="tab-panel" id="tab-password">
      <div class="section-card" style="max-width:480px">
        <div class="section-head">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 8h-1V6A5 5 0 0 0 7 6v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-6 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm3.1-9H8.9V6a3.1 3.1 0 1 1 6.2 0v2z"/></svg>
          <h2>Change Admin Password</h2>
        </div>
        <div class="section-body">
          <form method="POST">
            <input type="hidden" name="action" value="change_password">
            <label class="form-label">Current Password</label>
            <input type="password" class="form-input" name="old_password" placeholder="Current password" minlength="4">
            <label class="form-label">New Password</label>
            <input type="password" class="form-input" name="new_password" placeholder="Min 4 characters" minlength="4">
            <label class="form-label">Confirm New Password</label>
            <input type="password" class="form-input" name="confirm_password" placeholder="Repeat new password" minlength="4">
            <button type="submit" class="btn btn-danger">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 8h-1V6A5 5 0 0 0 7 6v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-6 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>
              Update Password
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- ══ TAB: Currency Symbol ══ -->
    <div class="tab-panel" id="tab-currency">
      <div class="section-card" style="max-width:520px">
        <div class="section-head">
          <svg viewBox="0 0 24 24" fill="currentColor" style="color:var(--blue)"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>
          <h2>Currency Symbol</h2>
        </div>
        <div class="section-body">
          <p style="font-size:13px;color:var(--muted);margin-bottom:20px">
            This symbol will appear on all user-facing pages wherever amounts are displayed.
          </p>
          <label class="form-label">Quick Select</label>
          <div style="display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px">
            <?php
            $common = ['$'=>'USD','€'=>'Euro','£'=>'GBP','¥'=>'Yen','₹'=>'Rupee','TZS'=>'Tanzania','KSh'=>'Kenya','NGN'=>'Naira','GH₵'=>'Cedi','ZAR'=>'Rand','ETB'=>'Birr'];
            foreach ($common as $sym => $label):
              $isActive = ($sym === $currency_symbol) ? 'background:var(--teal);color:#fff;border-color:var(--teal)' : '';
            ?>
            <button type="button" onclick="pickCurrency('<?= htmlspecialchars($sym) ?>')"
              style="padding:7px 14px;border-radius:8px;border:1.5px solid var(--border);
                     background:#fff;cursor:pointer;font-size:13px;font-weight:600;
                     font-family:inherit;transition:all .2s;<?= $isActive ?>">
              <?= htmlspecialchars($sym) ?> <span style="font-size:11px;font-weight:400;opacity:.7"><?= $label ?></span>
            </button>
            <?php endforeach; ?>
          </div>
          <form method="POST">
            <input type="hidden" name="action" value="update_currency">
            <label class="form-label">Or Type Custom Symbol</label>
            <div style="display:flex;gap:12px;align-items:flex-start">
              <input type="text" class="form-input" name="currency_symbol" id="currency_input"
                     placeholder="e.g. $ € £ TZS"
                     value="<?= htmlspecialchars($currency_symbol) ?>"
                     style="margin-bottom:0;max-width:180px">
              <button type="submit" class="btn btn-primary" style="flex-shrink:0">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
                Save Symbol
              </button>
            </div>
          </form>
          <div style="margin-top:22px;padding:16px;background:var(--body-bg);border-radius:12px">
            <p style="font-size:12px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;font-weight:600">Preview</p>
            <p style="font-size:22px;font-weight:700;color:var(--text)">
              Balance: <span id="currency_preview"><?= htmlspecialchars($currency_symbol) ?></span>1,250.00
            </p>
            <p style="font-size:15px;color:var(--muted);margin-top:4px">
              Earnings: <span id="currency_preview2"><?= htmlspecialchars($currency_symbol) ?></span>320.00 &nbsp;|&nbsp;
              Withdraw: <span id="currency_preview3"><?= htmlspecialchars($currency_symbol) ?></span>50.00
            </p>
          </div>
        </div>
      </div>
    </div>

  </div><!-- /content -->
</main>

<script>
const titles = {
  dashboard: 'Dashboard',
  support:   'Support URL Settings',
  users:     'Manage Users',
  password:  'Change Password',
  currency:  'Currency Symbol'
};

function showTab(name, el) {
  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
  document.getElementById('tab-' + name).classList.add('active');
  document.getElementById('page-title').textContent = titles[name] || 'Dashboard';
  if (el) el.classList.add('active');
  closeSidebar();
  if (event) event.preventDefault();
}

function toggleSidebar() {
  document.getElementById('sidebar').classList.toggle('open');
  document.getElementById('overlay').classList.toggle('open');
}

function closeSidebar() {
  document.getElementById('sidebar').classList.remove('open');
  document.getElementById('overlay').classList.remove('open');
}

function pickCurrency(sym) {
  document.getElementById('currency_input').value = sym;
  document.getElementById('currency_preview').textContent  = sym;
  document.getElementById('currency_preview2').textContent = sym;
  document.getElementById('currency_preview3').textContent = sym;
}

document.addEventListener('DOMContentLoaded', function() {
  const inp = document.getElementById('currency_input');
  if (inp) {
    inp.addEventListener('input', function() {
      const v = this.value || '$';
      document.getElementById('currency_preview').textContent  = v;
      document.getElementById('currency_preview2').textContent = v;
      document.getElementById('currency_preview3').textContent = v;
    });
  }
});
</script>

</body>
</html>