|
|
<?php |
|
|
ini_set('display_errors', 1); |
|
|
ini_set('display_startup_errors', 1); |
|
|
error_reporting(E_ALL); |
|
|
|
|
|
session_start(); |
|
|
|
|
|
|
|
|
$host = '127.0.0.1'; |
|
|
$dbname = 'jmdb'; |
|
|
$username = 'root'; |
|
|
$password = 'YourStrongPassword123'; |
|
|
|
|
|
try { |
|
|
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password); |
|
|
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); |
|
|
} catch(PDOException $e) { |
|
|
die("Database connection failed: " . $e->getMessage()); |
|
|
} |
|
|
|
|
|
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) { |
|
|
header('Location: ../../index.php'); |
|
|
exit; |
|
|
} |
|
|
|
|
|
|
|
|
if (!isset($_SESSION['user_id']) && isset($_SESSION['username'])) { |
|
|
$stmt = $pdo->prepare("SELECT id FROM users WHERE username = ?"); |
|
|
$stmt->execute([$_SESSION['username']]); |
|
|
$user = $stmt->fetch(PDO::FETCH_ASSOC); |
|
|
if ($user) { |
|
|
$_SESSION['user_id'] = $user['id']; |
|
|
} |
|
|
} |
|
|
|
|
|
if (!isset($_SESSION['user_id'])) { |
|
|
header('Location: ../../index.php'); |
|
|
exit; |
|
|
} |
|
|
|
|
|
|
|
|
$stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?"); |
|
|
$stmt->execute([$_SESSION['user_id']]); |
|
|
$user = $stmt->fetch(PDO::FETCH_ASSOC); |
|
|
|
|
|
if (!$user) { |
|
|
session_destroy(); |
|
|
header('Location: ../../index.php'); |
|
|
exit; |
|
|
} |
|
|
|
|
|
|
|
|
$username = $user['username'] ?? $_SESSION['username']; |
|
|
$email = $user['email'] ?? $_SESSION['email']; |
|
|
$tier = $user['tier'] ?? $_SESSION['tier']; |
|
|
$package = $user['package'] ?? $_SESSION['package']; |
|
|
$balance = $user['balance'] ?? $_SESSION['balance']; |
|
|
$total_deposits = $user['total_deposits'] ?? $_SESSION['total_deposits']; |
|
|
$total_withdrawals = $user['total_withdrawals'] ?? $_SESSION['total_withdrawals']; |
|
|
$rewards = $user['rewards'] ?? $_SESSION['rewards']; |
|
|
|
|
|
|
|
|
$first_name = $user['first_name'] ?? 'Maha'; |
|
|
$last_name = $user['last_name'] ?? 'Ibrahim'; |
|
|
$phone_number = $user['phone_number'] ?? '254712345678'; |
|
|
$country_code = $user['country_code'] ?? 'KE'; |
|
|
$status = $user['status'] ?? 'Dormant'; |
|
|
$member_since = $user['member_since'] ?? '2023-01-15'; |
|
|
|
|
|
|
|
|
$member_since_formatted = date('d M Y', strtotime($member_since)); |
|
|
$earnings = $total_deposits - $total_withdrawals; |
|
|
|
|
|
|
|
|
$_SESSION['username'] = $username; |
|
|
$_SESSION['email'] = $email; |
|
|
$_SESSION['tier'] = $tier; |
|
|
$_SESSION['package'] = $package; |
|
|
$_SESSION['balance'] = $balance; |
|
|
$_SESSION['total_deposits'] = $total_deposits; |
|
|
$_SESSION['total_withdrawals'] = $total_withdrawals; |
|
|
$_SESSION['rewards'] = $rewards; |
|
|
?> |
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Profile | Japanese Motors</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
:root { |
|
|
--bg: |
|
|
--card: |
|
|
--card-2: |
|
|
--accent: |
|
|
--muted: rgba(255,255,255,0.6); |
|
|
font-family: 'Poppins', system-ui, Arial; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: var(--bg); |
|
|
font-family: 'Poppins', sans-serif; |
|
|
transition: all 0.3s ease; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
width: 250px; |
|
|
height: 100vh; |
|
|
background: |
|
|
color: |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: -250px; |
|
|
transition: all 0.3s ease; |
|
|
z-index: 1000; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.sidebar.active { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
|
|
|
margin-left: 0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.sidebar.active ~ |
|
|
margin-left: 250px; |
|
|
} |
|
|
|
|
|
header { |
|
|
background: |
|
|
color: white; |
|
|
padding: 15px 20px; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
position: relative; |
|
|
z-index: 900; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.sidebar.active ~ |
|
|
margin-left: 250px; |
|
|
} |
|
|
|
|
|
.menu-toggle { |
|
|
background: transparent; |
|
|
border: none; |
|
|
color: white; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.logo-section { |
|
|
padding: 15px; |
|
|
border-bottom: 1px solid |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.brand { |
|
|
font-size: 1.2rem; |
|
|
font-weight: 700; |
|
|
color: |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
font-size: 0.75rem; |
|
|
color: |
|
|
} |
|
|
|
|
|
.menu { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.menu li a { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 12px 20px; |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
transition: background 0.3s; |
|
|
} |
|
|
|
|
|
.menu li a:hover { |
|
|
background: |
|
|
} |
|
|
|
|
|
.menu li a i { |
|
|
margin-right: 12px; |
|
|
} |
|
|
|
|
|
.user-footer { |
|
|
padding: 15px; |
|
|
background: |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
position: sticky; |
|
|
bottom: 0; |
|
|
} |
|
|
|
|
|
.avatar { |
|
|
width: 35px; |
|
|
height: 35px; |
|
|
background: |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: var(--card); |
|
|
border-radius: 12px; |
|
|
padding: 26px; |
|
|
color: white; |
|
|
box-shadow: 0 6px 0 rgba(0,0,0,0.08) inset; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.card.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.profile-avatar { |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
border-radius: 50%; |
|
|
background: |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin: 0 auto; |
|
|
font-size: 2rem; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin: 12px 0; |
|
|
} |
|
|
|
|
|
label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
color: rgba(255,255,255,0.85); |
|
|
} |
|
|
|
|
|
input, select { |
|
|
width: 100%; |
|
|
padding: 14px; |
|
|
border-radius: 10px; |
|
|
border: 1px solid rgba(255,255,255,0.05); |
|
|
background: transparent; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-block; |
|
|
padding: 14px 24px; |
|
|
border-radius: 10px; |
|
|
background: var(--accent); |
|
|
color: |
|
|
font-weight: 700; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background: transparent; |
|
|
border: 1px solid var(--accent); |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.tab { |
|
|
padding: 10px 20px; |
|
|
border-bottom: 2px solid transparent; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.tab.active { |
|
|
border-bottom: 2px solid var(--accent); |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.notification { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
padding: 15px 20px; |
|
|
border-radius: 8px; |
|
|
color: white; |
|
|
z-index: 10000; |
|
|
animation: slideIn 0.3s ease; |
|
|
} |
|
|
|
|
|
.notification.success { background: |
|
|
.notification.error { background: |
|
|
.notification.info { background: |
|
|
|
|
|
.activity-item { |
|
|
padding: 15px; |
|
|
border-bottom: 1px solid rgba(255,255,255,0.1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.activity-item:last-child { |
|
|
border-bottom: none; |
|
|
} |
|
|
|
|
|
.activity-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: rgba(255,255,255,0.1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-right: 15px; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); opacity: 0; } |
|
|
to { transform: translateX(0); opacity: 1; } |
|
|
} |
|
|
|
|
|
.loading { |
|
|
opacity: 0.6; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.tabs { |
|
|
flex-direction: column; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<!-- Sidebar --> |
|
|
<aside class="sidebar" id="sidebar"> |
|
|
<div class="logo-section"> |
|
|
<i data-feather="zap" class="text-yellow-400"></i> |
|
|
<div> |
|
|
<h2 class="brand">JMOTORS</h2> |
|
|
<p class="subtitle">Marketing Platform</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<ul class="menu"> |
|
|
<li><a href="index.php"><i data-feather="home"></i> Dashboard</a></li> |
|
|
<li><a href="meta-uploads.php"><i data-feather="upload"></i> Meta Uploads</a></li> |
|
|
<li><a href="transactions.php"><i data-feather="repeat"></i> Transactions</a></li> |
|
|
<li><a href="transfer.php"><i data-feather="send"></i> Transfer</a></li> |
|
|
<li><a href="daily-product.php"><i data-feather="shopping-bag"></i> Daily Product</a></li> |
|
|
<li><a href="withdraw.php"><i data-feather="dollar-sign"></i> Withdraw</a></li> |
|
|
<li><a href="packages.php"><i data-feather="package"></i> Packages</a></li> |
|
|
<li><a href="loan.php"><i data-feather="credit-card"></i> Loan</a></li> |
|
|
<li><a href="recharge.php"><i data-feather="battery-charging"></i> Recharge</a></li> |
|
|
<li><a href="agent-approval.php"><i data-feather="user-check"></i> Agent Approval</a></li> |
|
|
<li><a href="access-token.php"><i data-feather="key"></i> Access Token</a></li> |
|
|
<li><a href="agent-claim.php"><i data-feather="tag"></i> Agent Claim</a></li> |
|
|
<li><a href="team.php"><i data-feather="users"></i> Team</a></li> |
|
|
</ul> |
|
|
|
|
|
<ul class="menu bottom"> |
|
|
<li><a href="profile.php" class="active-page"><i data-feather="user"></i> Profile</a></li> |
|
|
<li><a href="settings.php"><i data-feather="settings"></i> Settings</a></li> |
|
|
<li><a href="whatsapp-channel.php"><i data-feather="message-square"></i> Whatsapp Channel</a></li> |
|
|
<li><a href="customer-care.php"><i data-feather="headphones"></i> Customer Care</a></li> |
|
|
</ul> |
|
|
|
|
|
<div class="user-footer"> |
|
|
<div class="avatar"><?php echo substr($username, 0, 2); ?></div> |
|
|
<div> |
|
|
<h4><?php echo htmlspecialchars($username); ?></h4> |
|
|
<p><?php echo htmlspecialchars($tier); ?> - Marketer</p> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
<!-- Main Content --> |
|
|
<div id="content"> |
|
|
<header class="bg-gray-800 text-white p-4"> |
|
|
<div class="flex items-center"> |
|
|
<button class="menu-toggle" id="menu-toggle"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
<div class="ml-4 font-bold text-xl">Jmotors</div> |
|
|
</div> |
|
|
<nav class="flex items-center space-x-6"> |
|
|
<a href="transfer.php" class="hover:text-yellow-300">Transfer</a> |
|
|
<a href="loan.php" class="hover:text-yellow-300">Loans</a> |
|
|
<a href="dailyproduct.php" class="hover:text-yellow-300">New Product</a> |
|
|
<div class="w-9 h-9 rounded-full bg-gradient-to-r from-yellow-300 to-orange-400 flex items-center justify-center font-bold"> |
|
|
<?php echo substr($first_name, 0, 1) . substr($last_name, 0, 1); ?> |
|
|
</div> |
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
<main class="p-4"> |
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<div class="card mb-6 active"> |
|
|
<div class="flex flex-col md:flex-row items-center gap-6"> |
|
|
<div class="profile-avatar"><?php echo substr($first_name, 0, 1) . substr($last_name, 0, 1); ?></div> |
|
|
<div class="text-center md:text-left"> |
|
|
<h2 class="text-2xl font-bold"><?php echo htmlspecialchars($first_name . ' ' . $last_name); ?></h2> |
|
|
<p class="text-gray-300"><?php echo htmlspecialchars($status); ?> Marketer</p> |
|
|
<p class="text-sm mt-2">Member since: <?php echo $member_since_formatted; ?></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex tabs border-b border-gray-700 mb-6"> |
|
|
<div class="tab active" data-tab="personal">Personal Info</div> |
|
|
<div class="tab" data-tab="security">Security</div> |
|
|
<div class="tab" data-tab="activity">Activity</div> |
|
|
</div> |
|
|
|
|
|
<!-- Personal Info Tab --> |
|
|
<div class="card active" id="personal-tab"> |
|
|
<h3 class="text-lg font-bold mb-6">Personal Information</h3> |
|
|
|
|
|
<form id="profileForm"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="form-group"> |
|
|
<label>First Name</label> |
|
|
<input type="text" name="first_name" value="<?php echo htmlspecialchars($first_name); ?>" id="first_name"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>Last Name</label> |
|
|
<input type="text" name="last_name" value="<?php echo htmlspecialchars($last_name); ?>" id="last_name"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>Email Address</label> |
|
|
<input type="email" name="email" value="<?php echo htmlspecialchars($email); ?>" id="email"> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>Phone Number</label> |
|
|
<input type="tel" name="phone_number" value="<?php echo htmlspecialchars($phone_number); ?>" id="phone_number"> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>Country</label> |
|
|
<select name="country_code" id="country" required> |
|
|
<option value="">Select your country</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="flex gap-4 mt-6"> |
|
|
<button type="submit" class="btn" id="saveBtn">Save Changes</button> |
|
|
<button type="button" class="btn btn-outline" id="cancelBtn">Cancel</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<!-- Security Tab --> |
|
|
<div class="card" id="security-tab"> |
|
|
<h3 class="text-lg font-bold mb-6">Security Settings</h3> |
|
|
|
|
|
<form id="securityForm"> |
|
|
<div class="form-group"> |
|
|
<label>Current Password</label> |
|
|
<input type="password" name="current_password" id="current_password" required> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>New Password</label> |
|
|
<input type="password" name="new_password" id="new_password" required minlength="6"> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>Confirm New Password</label> |
|
|
<input type="password" name="confirm_password" id="confirm_password" required minlength="6"> |
|
|
</div> |
|
|
|
|
|
<div class="flex gap-4 mt-6"> |
|
|
<button type="submit" class="btn" id="changePasswordBtn">Change Password</button> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<div class="mt-8 pt-6 border-t border-gray-700"> |
|
|
<h4 class="text-md font-bold mb-4">Security Recommendations</h4> |
|
|
<ul class="space-y-2 text-sm text-gray-300"> |
|
|
<li>• Use a strong, unique password</li> |
|
|
<li>• Enable two-factor authentication if available</li> |
|
|
<li>• Regularly update your password</li> |
|
|
<li>• Never share your password with anyone</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Activity Tab --> |
|
|
<div class="card" id="activity-tab"> |
|
|
<h3 class="text-lg font-bold mb-6">Recent Activity</h3> |
|
|
|
|
|
<div id="activityList" class="space-y-4"> |
|
|
<div class="text-center py-8 text-gray-400"> |
|
|
<i data-feather="activity" class="w-12 h-12 mx-auto mb-4"></i> |
|
|
<p>Loading activity history...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 text-center"> |
|
|
<button class="btn btn-outline" id="loadMoreActivity">Load More</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
// Countries data |
|
|
const countries = [ |
|
|
{ name: "Afghanistan", dial_code: "+93", code: "AF" }, |
|
|
{ name: "Albania", dial_code: "+355", code: "AL" }, |
|
|
{ name: "Algeria", dial_code: "+213", code: "DZ" }, |
|
|
{ name: "Andorra", dial_code: "+376", code: "AD" }, |
|
|
{ name: "Angola", dial_code: "+244", code: "AO" }, |
|
|
{ name: "Antigua and Barbuda", dial_code: "+1-268", code: "AG" }, |
|
|
{ name: "Argentina", dial_code: "+54", code: "AR" }, |
|
|
{ name: "Armenia", dial_code: "+374", code: "AM" }, |
|
|
{ name: "Australia", dial_code: "+61", code: "AU" }, |
|
|
{ name: "Austria", dial_code: "+43", code: "AT" }, |
|
|
{ name: "Azerbaijan", dial_code: "+994", code: "AZ" }, |
|
|
{ name: "Bahamas", dial_code: "+1-242", code: "BS" }, |
|
|
{ name: "Bahrain", dial_code: "+973", code: "BH" }, |
|
|
{ name: "Bangladesh", dial_code: "+880", code: "BD" }, |
|
|
{ name: "Barbados", dial_code: "+1-246", code: "BB" }, |
|
|
{ name: "Belarus", dial_code: "+375", code: "BY" }, |
|
|
{ name: "Belgium", dial_code: "+32", code: "BE" }, |
|
|
{ name: "Belize", dial_code: "+501", code: "BZ" }, |
|
|
{ name: "Benin", dial_code: "+229", code: "BJ" }, |
|
|
{ name: "Bhutan", dial_code: "+975", code: "BT" }, |
|
|
{ name: "Bolivia", dial_code: "+591", code: "BO" }, |
|
|
{ name: "Bosnia and Herzegovina", dial_code: "+387", code: "BA" }, |
|
|
{ name: "Botswana", dial_code: "+267", code: "BW" }, |
|
|
{ name: "Brazil", dial_code: "+55", code: "BR" }, |
|
|
{ name: "Brunei", dial_code: "+673", code: "BN" }, |
|
|
{ name: "Bulgaria", dial_code: "+359", code: "BG" }, |
|
|
{ name: "Burkina Faso", dial_code: "+226", code: "BF" }, |
|
|
{ name: "Burundi", dial_code: "+257", code: "BI" }, |
|
|
{ name: "Cabo Verde", dial_code: "+238", code: "CV" }, |
|
|
{ name: "Cambodia", dial_code: "+855", code: "KH" }, |
|
|
{ name: "Cameroon", dial_code: "+237", code: "CM" }, |
|
|
{ name: "Canada", dial_code: "+1", code: "CA" }, |
|
|
{ name: "Central African Republic", dial_code: "+236", code: "CF" }, |
|
|
{ name: "Chad", dial_code: "+235", code: "TD" }, |
|
|
{ name: "Chile", dial_code: "+56", code: "CL" }, |
|
|
{ name: "China", dial_code: "+86", code: "CN" }, |
|
|
{ name: "Colombia", dial_code: "+57", code: "CO" }, |
|
|
{ name: "Comoros", dial_code: "+269", code: "KM" }, |
|
|
{ name: "Congo (Brazzaville)", dial_code: "+242", code: "CG" }, |
|
|
{ name: "Congo (Kinshasa)", dial_code: "+243", code: "CD" }, |
|
|
{ name: "Costa Rica", dial_code: "+506", code: "CR" }, |
|
|
{ name: "Croatia", dial_code: "+385", code: "HR" }, |
|
|
{ name: "Cuba", dial_code: "+53", code: "CU" }, |
|
|
{ name: "Cyprus", dial_code: "+357", code: "CY" }, |
|
|
{ name: "Czechia", dial_code: "+420", code: "CZ" }, |
|
|
{ name: "Denmark", dial_code: "+45", code: "DK" }, |
|
|
{ name: "Djibouti", dial_code: "+253", code: "DJ" }, |
|
|
{ name: "Dominica", dial_code: "+1-767", code: "DM" }, |
|
|
{ name: "Dominican Republic", dial_code: "+1-809", code: "DO" }, |
|
|
{ name: "Ecuador", dial_code: "+593", code: "EC" }, |
|
|
{ name: "Egypt", dial_code: "+20", code: "EG" }, |
|
|
{ name: "El Salvador", dial_code: "+503", code: "SV" }, |
|
|
{ name: "Equatorial Guinea", dial_code: "+240", code: "GQ" }, |
|
|
{ name: "Eritrea", dial_code: "+291", code: "ER" }, |
|
|
{ name: "Estonia", dial_code: "+372", code: "EE" }, |
|
|
{ name: "Eswatini", dial_code: "+268", code: "SZ" }, |
|
|
{ name: "Ethiopia", dial_code: "+251", code: "ET" }, |
|
|
{ name: "Fiji", dial_code: "+679", code: "FJ" }, |
|
|
{ name: "Finland", dial_code: "+358", code: "FI" }, |
|
|
{ name: "France", dial_code: "+33", code: "FR" }, |
|
|
{ name: "Gabon", dial_code: "+241", code: "GA" }, |
|
|
{ name: "Gambia", dial_code: "+220", code: "GM" }, |
|
|
{ name: "Georgia", dial_code: "+995", code: "GE" }, |
|
|
{ name: "Germany", dial_code: "+49", code: "DE" }, |
|
|
{ name: "Ghana", dial_code: "+233", code: "GH" }, |
|
|
{ name: "Greece", dial_code: "+30", code: "GR" }, |
|
|
{ name: "Grenada", dial_code: "+1-473", code: "GD" }, |
|
|
{ name: "Guatemala", dial_code: "+502", code: "GT" }, |
|
|
{ name: "Guinea", dial_code: "+224", code: "GN" }, |
|
|
{ name: "Guinea-Bissau", dial_code: "+245", code: "GW" }, |
|
|
{ name: "Guyana", dial_code: "+592", code: "GY" }, |
|
|
{ name: "Haiti", dial_code: "+509", code: "HT" }, |
|
|
{ name: "Honduras", dial_code: "+504", code: "HN" }, |
|
|
{ name: "Hungary", dial_code: "+36", code: "HU" }, |
|
|
{ name: "Iceland", dial_code: "+354", code: "IS" }, |
|
|
{ name: "India", dial_code: "+91", code: "IN" }, |
|
|
{ name: "Indonesia", dial_code: "+62", code: "ID" }, |
|
|
{ name: "Iran", dial_code: "+98", code: "IR" }, |
|
|
{ name: "Iraq", dial_code: "+964", code: "IQ" }, |
|
|
{ name: "Ireland", dial_code: "+353", code: "IE" }, |
|
|
{ name: "Israel", dial_code: "+972", code: "IL" }, |
|
|
{ name: "Italy", dial_code: "+39", code: "IT" }, |
|
|
{ name: "Jamaica", dial_code: "+1-876", code: "JM" }, |
|
|
{ name: "Japan", dial_code: "+81", code: "JP" }, |
|
|
{ name: "Jordan", dial_code: "+962", code: "JO" }, |
|
|
{ name: "Kazakhstan", dial_code: "+7", code: "KZ" }, |
|
|
{ name: "Kenya", dial_code: "+254", code: "KE" }, |
|
|
{ name: "Kiribati", dial_code: "+686", code: "KI" }, |
|
|
{ name: "Kuwait", dial_code: "+965", code: "KW" }, |
|
|
{ name: "Kyrgyzstan", dial_code: "+996", code: "KG" }, |
|
|
{ name: "Laos", dial_code: "+856", code: "LA" }, |
|
|
{ name: "Latvia", dial_code: "+371", code: "LV" }, |
|
|
{ name: "Lebanon", dial_code: "+961", code: "LB" }, |
|
|
{ name: "Lesotho", dial_code: "+266", code: "LS" }, |
|
|
{ name: "Liberia", dial_code: "+231", code: "LR" }, |
|
|
{ name: "Libya", dial_code: "+218", code: "LY" }, |
|
|
{ name: "Liechtenstein", dial_code: "+423", code: "LI" }, |
|
|
{ name: "Lithuania", dial_code: "+370", code: "LT" }, |
|
|
{ name: "Luxembourg", dial_code: "+352", code: "LU" }, |
|
|
{ name: "Madagascar", dial_code: "+261", code: "MG" }, |
|
|
{ name: "Malawi", dial_code: "+265", code: "MW" }, |
|
|
{ name: "Malaysia", dial_code: "+60", code: "MY" }, |
|
|
{ name: "Maldives", dial_code: "+960", code: "MV" }, |
|
|
{ name: "Mali", dial_code: "+223", code: "ML" }, |
|
|
{ name: "Malta", dial_code: "+356", code: "MT" }, |
|
|
{ name: "Marshall Islands", dial_code: "+692", code: "MH" }, |
|
|
{ name: "Mauritania", dial_code: "+222", code: "MR" }, |
|
|
{ name: "Mauritius", dial_code: "+230", code: "MU" }, |
|
|
{ name: "Mexico", dial_code: "+52", code: "MX" }, |
|
|
{ name: "Micronesia", dial_code: "+691", code: "FM" }, |
|
|
{ name: "Moldova", dial_code: "+373", code: "MD" }, |
|
|
{ name: "Monaco", dial_code: "+377", code: "MC" }, |
|
|
{ name: "Mongolia", dial_code: "+976", code: "MN" }, |
|
|
{ name: "Montenegro", dial_code: "+382", code: "ME" }, |
|
|
{ name: "Morocco", dial_code: "+212", code: "MA" }, |
|
|
{ name: "Mozambique", dial_code: "+258", code: "MZ" }, |
|
|
{ name: "Myanmar", dial_code: "+95", code: "MM" }, |
|
|
{ name: "Namibia", dial_code: "+264", code: "NA" }, |
|
|
{ name: "Nauru", dial_code: "+674", code: "NR" }, |
|
|
{ name: "Nepal", dial_code: "+977", code: "NP" }, |
|
|
{ name: "Netherlands", dial_code: "+31", code: "NL" }, |
|
|
{ name: "New Zealand", dial_code: "+64", code: "NZ" }, |
|
|
{ name: "Nicaragua", dial_code: "+505", code: "NI" }, |
|
|
{ name: "Niger", dial_code: "+227", code: "NE" }, |
|
|
{ name: "Nigeria", dial_code: "+234", code: "NG" }, |
|
|
{ name: "North Korea", dial_code: "+850", code: "KP" }, |
|
|
{ name: "North Macedonia", dial_code: "+389", code: "MK" }, |
|
|
{ name: "Norway", dial_code: "+47", code: "NO" }, |
|
|
{ name: "Oman", dial_code: "+968", code: "OM" }, |
|
|
{ name: "Pakistan", dial_code: "+92", code: "PK" }, |
|
|
{ name: "Palau", dial_code: "+680", code: "PW" }, |
|
|
{ name: "Palestine", dial_code: "+970", code: "PS" }, |
|
|
{ name: "Panama", dial_code: "+507", code: "PA" }, |
|
|
{ name: "Papua New Guinea", dial_code: "+675", code: "PG" }, |
|
|
{ name: "Paraguay", dial_code: "+595", code: "PY" }, |
|
|
{ name: "Peru", dial_code: "+51", code: "PE" }, |
|
|
{ name: "Philippines", dial_code: "+63", code: "PH" }, |
|
|
{ name: "Poland", dial_code: "+48", code: "PL" }, |
|
|
{ name: "Portugal", dial_code: "+351", code: "PT" }, |
|
|
{ name: "Qatar", dial_code: "+974", code: "QA" }, |
|
|
{ name: "Romania", dial_code: "+40", code: "RO" }, |
|
|
{ name: "Russia", dial_code: "+7", code: "RU" }, |
|
|
{ name: "Rwanda", dial_code: "+250", code: "RW" }, |
|
|
{ name: "Saint Kitts and Nevis", dial_code: "+1-869", code: "KN" }, |
|
|
{ name: "Saint Lucia", dial_code: "+1-758", code: "LC" }, |
|
|
{ name: "Saint Vincent and the Grenadines", dial_code: "+1-784", code: "VC" }, |
|
|
{ name: "Samoa", dial_code: "+685", code: "WS" }, |
|
|
{ name: "San Marino", dial_code: "+378", code: "SM" }, |
|
|
{ name: "Sao Tome and Principe", dial_code: "+239", code: "ST" }, |
|
|
{ name: "Saudi Arabia", dial_code: "+966", code: "SA" }, |
|
|
{ name: "Senegal", dial_code: "+221", code: "SN" }, |
|
|
{ name: "Serbia", dial_code: "+381", code: "RS" }, |
|
|
{ name: "Seychelles", dial_code: "+248", code: "SC" }, |
|
|
{ name: "Sierra Leone", dial_code: "+232", code: "SL" }, |
|
|
{ name: "Singapore", dial_code: "+65", code: "SG" }, |
|
|
{ name: "Slovakia", dial_code: "+421", code: "SK" }, |
|
|
{ name: "Slovenia", dial_code: "+386", code: "SI" }, |
|
|
{ name: "Solomon Islands", dial_code: "+677", code: "SB" }, |
|
|
{ name: "Somalia", dial_code: "+252", code: "SO" }, |
|
|
{ name: "South Africa", dial_code: "+27", code: "ZA" }, |
|
|
{ name: "South Korea", dial_code: "+82", code: "KR" }, |
|
|
{ name: "South Sudan", dial_code: "+211", code: "SS" }, |
|
|
{ name: "Spain", dial_code: "+34", code: "ES" }, |
|
|
{ name: "Sri Lanka", dial_code: "+94", code: "LK" }, |
|
|
{ name: "Sudan", dial_code: "+249", code: "SD" }, |
|
|
{ name: "Suriname", dial_code: "+597", code: "SR" }, |
|
|
{ name: "Sweden", dial_code: "+46", code: "SE" }, |
|
|
{ name: "Switzerland", dial_code: "+41", code: "CH" }, |
|
|
{ name: "Syria", dial_code: "+963", code: "SY" }, |
|
|
{ name: "Taiwan", dial_code: "+886", code: "TW" }, |
|
|
{ name: "Tajikistan", dial_code: "+992", code: "TJ" }, |
|
|
{ name: "Tanzania", dial_code: "+255", code: "TZ" }, |
|
|
{ name: "Thailand", dial_code: "+66", code: "TH" }, |
|
|
{ name: "Timor-Leste", dial_code: "+670", code: "TL" }, |
|
|
{ name: "Togo", dial_code: "+228", code: "TG" }, |
|
|
{ name: "Tonga", dial_code: "+676", code: "TO" }, |
|
|
{ name: "Trinidad and Tobago", dial_code: "+1-868", code: "TT" }, |
|
|
{ name: "Tunisia", dial_code: "+216", code: "TN" }, |
|
|
{ name: "Turkey", dial_code: "+90", code: "TR" }, |
|
|
{ name: "Turkmenistan", dial_code: "+993", code: "TM" }, |
|
|
{ name: "Tuvalu", dial_code: "+688", code: "TV" }, |
|
|
{ name: "Uganda", dial_code: "+256", code: "UG" }, |
|
|
{ name: "Ukraine", dial_code: "+380", code: "UA" }, |
|
|
{ name: "United Arab Emirates", dial_code: "+971", code: "AE" }, |
|
|
{ name: "United Kingdom", dial_code: "+44", code: "GB" }, |
|
|
{ name: "United States", dial_code: "+1", code: "US" }, |
|
|
{ name: "Uruguay", dial_code: "+598", code: "UY" }, |
|
|
{ name: "Uzbekistan", dial_code: "+998", code: "UZ" }, |
|
|
{ name: "Vanuatu", dial_code: "+678", code: "VU" }, |
|
|
{ name: "Vatican City", dial_code: "+379", code: "VA" }, |
|
|
{ name: "Venezuela", dial_code: "+58", code: "VE" }, |
|
|
{ name: "Vietnam", dial_code: "+84", code: "VN" }, |
|
|
{ name: "Yemen", dial_code: "+967", code: "YE" }, |
|
|
{ name: "Zambia", dial_code: "+260", code: "ZM" }, |
|
|
{ name: "Zimbabwe", dial_code: "+263", code: "ZW"}, |
|
|
]; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const toggleBtn = document.getElementById('menu-toggle'); |
|
|
const sidebar = document.getElementById('sidebar'); |
|
|
const content = document.getElementById('content'); |
|
|
|
|
|
toggleBtn.addEventListener('click', function() { |
|
|
sidebar.classList.toggle('active'); |
|
|
content.classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
const countrySelect = document.getElementById("country"); |
|
|
const userCountryCode = "<?php echo $country_code; ?>"; |
|
|
|
|
|
countries.forEach(c => { |
|
|
const option = document.createElement("option"); |
|
|
option.value = c.code; |
|
|
option.textContent = `${c.name} (${c.dial_code})`; |
|
|
if (c.code === userCountryCode) { |
|
|
option.selected = true; |
|
|
} |
|
|
countrySelect.appendChild(option); |
|
|
}); |
|
|
|
|
|
|
|
|
const tabs = document.querySelectorAll('.tab'); |
|
|
const tabContents = document.querySelectorAll('.card'); |
|
|
|
|
|
tabs.forEach(tab => { |
|
|
tab.addEventListener('click', function() { |
|
|
const tabName = this.getAttribute('data-tab'); |
|
|
|
|
|
// Update tabs |
|
|
tabs.forEach(t => t.classList.remove('active')); |
|
|
this.classList.add('active'); |
|
|
|
|
|
// Update content |
|
|
tabContents.forEach(content => { |
|
|
content.classList.remove('active'); |
|
|
if (content.id === `${tabName}-tab`) { |
|
|
content.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (tabName === 'activity') { |
|
|
loadActivity(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
new ProfileManager(); |
|
|
}); |
|
|
|
|
|
|
|
|
class ProfileManager { |
|
|
constructor() { |
|
|
this.originalData = {}; |
|
|
this.activityOffset = 0; |
|
|
this.init(); |
|
|
} |
|
|
|
|
|
init() { |
|
|
this.setupEventListeners(); |
|
|
this.loadOriginalData(); |
|
|
} |
|
|
|
|
|
loadOriginalData() { |
|
|
this.originalData = { |
|
|
first_name: document.getElementById('first_name').value, |
|
|
last_name: document.getElementById('last_name').value, |
|
|
email: document.getElementById('email').value, |
|
|
phone_number: document.getElementById('phone_number').value, |
|
|
country_code: document.getElementById('country').value |
|
|
}; |
|
|
} |
|
|
|
|
|
setupEventListeners() { |
|
|
|
|
|
const profileForm = document.getElementById('profileForm'); |
|
|
const securityForm = document.getElementById('securityForm'); |
|
|
const loadMoreBtn = document.getElementById('loadMoreActivity'); |
|
|
|
|
|
|
|
|
const inputs = profileForm.querySelectorAll('input, select'); |
|
|
inputs.forEach(input => { |
|
|
input.addEventListener('input', this.debounce((e) => { |
|
|
this.autoSaveField(e.target.name, e.target.value); |
|
|
}, 1000)); |
|
|
}); |
|
|
|
|
|
profileForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
this.saveProfile(); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancelBtn').addEventListener('click', () => { |
|
|
this.cancelChanges(); |
|
|
}); |
|
|
|
|
|
|
|
|
securityForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
this.changePassword(); |
|
|
}); |
|
|
|
|
|
|
|
|
if (loadMoreBtn) { |
|
|
loadMoreBtn.addEventListener('click', () => { |
|
|
this.loadMoreActivity(); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
async autoSaveField(field, value) { |
|
|
try { |
|
|
const response = await this.makeRequest('profile_handler.php', { |
|
|
action: 'update_profile', |
|
|
[field]: value |
|
|
}); |
|
|
|
|
|
if (response.success) { |
|
|
this.showNotification('Auto-saved successfully', 'success'); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Auto-save failed:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
async saveProfile() { |
|
|
const formData = new FormData(document.getElementById('profileForm')); |
|
|
const data = Object.fromEntries(formData.entries()); |
|
|
|
|
|
try { |
|
|
this.setLoading(true, 'saveBtn', 'Saving...'); |
|
|
|
|
|
const response = await this.makeRequest('profile_handler.php', { |
|
|
action: 'update_profile', |
|
|
...data |
|
|
}); |
|
|
|
|
|
if (response.success) { |
|
|
this.showNotification('Profile updated successfully!', 'success'); |
|
|
this.loadOriginalData(); |
|
|
this.updateProfileDisplay(data); |
|
|
} else { |
|
|
throw new Error(response.message); |
|
|
} |
|
|
} catch (error) { |
|
|
this.showNotification('Error: ' + error.message, 'error'); |
|
|
} finally { |
|
|
this.setLoading(false, 'saveBtn', 'Save Changes'); |
|
|
} |
|
|
} |
|
|
|
|
|
async changePassword() { |
|
|
const formData = new FormData(document.getElementById('securityForm')); |
|
|
const data = Object.fromEntries(formData.entries()); |
|
|
|
|
|
try { |
|
|
this.setLoading(true, 'changePasswordBtn', 'Changing...'); |
|
|
|
|
|
const response = await this.makeRequest('profile_handler.php', { |
|
|
action: 'change_password', |
|
|
...data |
|
|
}); |
|
|
|
|
|
if (response.success) { |
|
|
this.showNotification('Password changed successfully!', 'success'); |
|
|
document.getElementById('securityForm').reset(); |
|
|
} else { |
|
|
throw new Error(response.message); |
|
|
} |
|
|
} catch (error) { |
|
|
this.showNotification('Error: ' + error.message, 'error'); |
|
|
} finally { |
|
|
this.setLoading(false, 'changePasswordBtn', 'Change Password'); |
|
|
} |
|
|
} |
|
|
|
|
|
async loadActivity() { |
|
|
try { |
|
|
const response = await this.makeRequest('profile_handler.php', { |
|
|
action: 'get_activity' |
|
|
}); |
|
|
|
|
|
if (response.success) { |
|
|
this.displayActivity(response.activities); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Failed to load activity:', error); |
|
|
document.getElementById('activityList').innerHTML = |
|
|
'<div class="text-center py-8 text-gray-400">Failed to load activity history</div>'; |
|
|
} |
|
|
} |
|
|
|
|
|
async loadMoreActivity() { |
|
|
this.activityOffset += 10; |
|
|
try { |
|
|
const response = await this.makeRequest('../api/profile_handler.php', { |
|
|
action: 'get_activity', |
|
|
offset: this.activityOffset |
|
|
}); |
|
|
|
|
|
if (response.success && response.activities.length > 0) { |
|
|
this.displayActivity(response.activities, true); |
|
|
} else { |
|
|
this.showNotification('No more activities to load', 'info'); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Failed to load more activity:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
displayActivity(activities, append = false) { |
|
|
const activityList = document.getElementById('activityList'); |
|
|
|
|
|
if (!activities || activities.length === 0) { |
|
|
if (!append) { |
|
|
activityList.innerHTML = |
|
|
'<div class="text-center py-8 text-gray-400">No activity history found</div>'; |
|
|
} |
|
|
return; |
|
|
} |
|
|
|
|
|
const activitiesHTML = activities.map(activity => ` |
|
|
<div class="activity-item"> |
|
|
<div class="activity-icon"> |
|
|
<i data-feather="${this.getActivityIcon(activity.activity_type)}"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="font-medium">${activity.description}</div> |
|
|
<div class="text-sm text-gray-400">${new Date(activity.timestamp).toLocaleString()}</div> |
|
|
</div> |
|
|
<div class="text-sm text-gray-400 capitalize">${activity.activity_type.replace('_', ' ')}</div> |
|
|
</div> |
|
|
`).join(''); |
|
|
|
|
|
if (append) { |
|
|
activityList.innerHTML += activitiesHTML; |
|
|
} else { |
|
|
activityList.innerHTML = activitiesHTML; |
|
|
} |
|
|
|
|
|
feather.replace(); |
|
|
} |
|
|
|
|
|
getActivityIcon(activityType) { |
|
|
const icons = { |
|
|
'profile_update': 'user', |
|
|
'password_change': 'lock', |
|
|
'login': 'log-in', |
|
|
'logout': 'log-out', |
|
|
'default': 'activity' |
|
|
}; |
|
|
return icons[activityType] || icons.default; |
|
|
} |
|
|
|
|
|
cancelChanges() { |
|
|
document.getElementById('first_name').value = this.originalData.first_name; |
|
|
document.getElementById('last_name').value = this.originalData.last_name; |
|
|
document.getElementById('email').value = this.originalData.email; |
|
|
document.getElementById('phone_number').value = this.originalData.phone_number; |
|
|
document.getElementById('country').value = this.originalData.country_code; |
|
|
|
|
|
this.showNotification('Changes cancelled', 'info'); |
|
|
} |
|
|
|
|
|
updateProfileDisplay(data) { |
|
|
|
|
|
const avatar = document.querySelector('.profile-avatar'); |
|
|
const nameDisplay = document.querySelector('.text-2xl.font-bold'); |
|
|
const userAvatar = document.querySelector('.w-9.h-9.rounded-full'); |
|
|
|
|
|
if (avatar) { |
|
|
avatar.textContent = (data.first_name?.[0] || '') + (data.last_name?.[0] || ''); |
|
|
} |
|
|
if (nameDisplay) { |
|
|
nameDisplay.textContent = `${data.first_name} ${data.last_name}`; |
|
|
} |
|
|
if (userAvatar) { |
|
|
userAvatar.textContent = (data.first_name?.[0] || '') + (data.last_name?.[0] || ''); |
|
|
} |
|
|
} |
|
|
|
|
|
setLoading(loading, buttonId, text) { |
|
|
const button = document.getElementById(buttonId); |
|
|
if (loading) { |
|
|
button.classList.add('loading'); |
|
|
button.textContent = text; |
|
|
button.disabled = true; |
|
|
} else { |
|
|
button.classList.remove('loading'); |
|
|
button.textContent = text; |
|
|
button.disabled = false; |
|
|
} |
|
|
} |
|
|
|
|
|
async makeRequest(url, data) { |
|
|
const formData = new FormData(); |
|
|
for (const key in data) { |
|
|
formData.append(key, data[key]); |
|
|
} |
|
|
|
|
|
const response = await fetch(url, { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
return await response.json(); |
|
|
} |
|
|
|
|
|
showNotification(message, type = 'info') { |
|
|
|
|
|
const existingNotifications = document.querySelectorAll('.notification'); |
|
|
existingNotifications.forEach(notification => notification.remove()); |
|
|
|
|
|
|
|
|
const notification = document.createElement('div'); |
|
|
notification.className = `notification ${type}`; |
|
|
notification.textContent = message; |
|
|
|
|
|
document.body.appendChild(notification); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.remove(); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
debounce(func, wait) { |
|
|
let timeout; |
|
|
return function executedFunction(...args) { |
|
|
const later = () => { |
|
|
clearTimeout(timeout); |
|
|
func(...args); |
|
|
}; |
|
|
clearTimeout(timeout); |
|
|
timeout = setTimeout(later, wait); |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function loadActivity() { |
|
|
const profileManager = new ProfileManager(); |
|
|
profileManager.loadActivity(); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
