|
|
<?php |
|
|
ini_set('display_errors', 1); |
|
|
ini_set('display_startup_errors', 1); |
|
|
error_reporting(E_ALL); |
|
|
|
|
|
session_start(); |
|
|
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) { |
|
|
header('Location: ../../index.php'); |
|
|
exit; |
|
|
} |
|
|
|
|
|
|
|
|
$username = $_SESSION['username']; |
|
|
$email = $_SESSION['email']; |
|
|
$tier = $_SESSION['tier']; |
|
|
$package = $_SESSION['package']; |
|
|
$balance = $_SESSION['balance']; |
|
|
$total_deposits = $_SESSION['total_deposits']; |
|
|
$total_withdrawals = $_SESSION['total_withdrawals']; |
|
|
$rewards = $_SESSION['rewards']; |
|
|
$earnings = $total_deposits - $total_withdrawals; |
|
|
|
|
|
|
|
|
$servername = "127.0.0.1"; |
|
|
$db_username = "root"; |
|
|
$db_password = "YourStrongPassword123"; |
|
|
$dbname = "jmdb"; |
|
|
|
|
|
try { |
|
|
$pdo = new PDO("mysql:host=$servername;dbname=$dbname", $db_username, $db_password); |
|
|
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); |
|
|
|
|
|
|
|
|
$stmt = $pdo->prepare("SELECT * FROM support_tickets WHERE user_id = :user_id ORDER BY created_at DESC"); |
|
|
$stmt->bindParam(':user_id', $_SESSION['user_id']); |
|
|
$stmt->execute(); |
|
|
$tickets = $stmt->fetchAll(PDO::FETCH_ASSOC); |
|
|
|
|
|
|
|
|
$open_tickets = 0; |
|
|
$in_progress_tickets = 0; |
|
|
$resolved_tickets = 0; |
|
|
|
|
|
foreach ($tickets as $ticket) { |
|
|
switch ($ticket['status']) { |
|
|
case 'open': |
|
|
$open_tickets++; |
|
|
break; |
|
|
case 'in_progress': |
|
|
$in_progress_tickets++; |
|
|
break; |
|
|
case 'resolved': |
|
|
$resolved_tickets++; |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
} catch(PDOException $e) { |
|
|
|
|
|
$tickets = []; |
|
|
$open_tickets = 0; |
|
|
$in_progress_tickets = 0; |
|
|
$resolved_tickets = 0; |
|
|
$db_error = "Database connection failed: " . $e->getMessage(); |
|
|
} |
|
|
?> |
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Japanese Motors — Customer Care</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
:root { |
|
|
--bg: |
|
|
--card: |
|
|
--card-2: |
|
|
--accent: |
|
|
--muted: rgba(255,255,255,0.6); |
|
|
--glass: rgba(255,255,255,0.04); |
|
|
--promo-gradient: linear-gradient(180deg,#a13df0 0%, #ff2a79 50%, #d70b1a 100%); |
|
|
font-family: 'Poppins', system-ui, Arial; |
|
|
--banner-gradient-start: |
|
|
--banner-gradient-end: |
|
|
--spacing-unit: 1rem; |
|
|
--accent-primary: |
|
|
--accent-secondary: |
|
|
--shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.1); |
|
|
--premium-gold: |
|
|
} |
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
.banner { |
|
|
max-width: 450px; |
|
|
margin: 0 auto calc(var(--spacing-unit) * 2); |
|
|
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); |
|
|
border-radius: 12px; |
|
|
padding: calc(var(--spacing-unit) * 1.5); |
|
|
text-align: center; |
|
|
box-shadow: var(--shadow-hover); |
|
|
animation: fadeIn 0.5s ease; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.3; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.banner .title { |
|
|
font-size: 1.25rem; |
|
|
margin-bottom: calc(var(--spacing-unit) * 1); |
|
|
color: |
|
|
font-weight: 700; |
|
|
animation: blink 1.5s infinite; |
|
|
} |
|
|
|
|
|
.banner p { |
|
|
font-size: 0.95rem; |
|
|
line-height: 1.6; |
|
|
margin-bottom: calc(var(--spacing-unit) * 1); |
|
|
color: var(--premium-gold); |
|
|
animation: blink 1.5s infinite; |
|
|
} |
|
|
|
|
|
.banner .footer { |
|
|
font-size: 0.75rem; |
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
font-style: italic; |
|
|
animation: blink 1.5s infinite; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: var(--card); |
|
|
border-radius: 12px; |
|
|
padding: 26px; |
|
|
color: white; |
|
|
box-shadow: 0 6px 0 rgba(0,0,0,0.08) inset; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.balance { |
|
|
background: rgba(255,255,255,0.03); |
|
|
padding: 14px; |
|
|
border-radius: 10px; |
|
|
margin: 18px 0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin: 12px 0; |
|
|
} |
|
|
|
|
|
label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
color: rgba(255,255,255,0.85); |
|
|
} |
|
|
|
|
|
input, select, textarea { |
|
|
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: 2px solid var(--accent); |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.dashboard-card { |
|
|
background: rgba(0,0,0,0.2); |
|
|
border-radius: 12px; |
|
|
padding: 20px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background: rgba(0,0,0,0.15); |
|
|
border-radius: 10px; |
|
|
padding: 16px; |
|
|
margin-bottom: 16px; |
|
|
} |
|
|
|
|
|
.support-ticket { |
|
|
background: rgba(0,0,0,0.15); |
|
|
border-radius: 10px; |
|
|
padding: 16px; |
|
|
margin-bottom: 16px; |
|
|
border-left: 4px solid var(--accent); |
|
|
} |
|
|
|
|
|
.faq-item { |
|
|
background: rgba(0,0,0,0.15); |
|
|
border-radius: 10px; |
|
|
padding: 16px; |
|
|
margin-bottom: 16px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.faq-answer { |
|
|
display: none; |
|
|
padding-top: 12px; |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
.active-page { |
|
|
background: |
|
|
border-right: 4px solid var(--accent); |
|
|
} |
|
|
|
|
|
.whatsapp-btn { |
|
|
background: |
|
|
color: white; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 8px; |
|
|
padding: 12px 20px; |
|
|
border-radius: 10px; |
|
|
font-weight: 600; |
|
|
text-decoration: none; |
|
|
margin-top: 15px; |
|
|
} |
|
|
|
|
|
.contact-option { |
|
|
background: rgba(0,0,0,0.15); |
|
|
border-radius: 10px; |
|
|
padding: 16px; |
|
|
margin-bottom: 16px; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.contact-option:hover { |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.ticket-status { |
|
|
padding: 4px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.status-open { |
|
|
background-color: |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.status-in-progress { |
|
|
background-color: |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.status-resolved { |
|
|
background-color: |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.notification { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
padding: 15px 20px; |
|
|
border-radius: 8px; |
|
|
color: white; |
|
|
z-index: 10000; |
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.notification.success { |
|
|
background-color: |
|
|
} |
|
|
|
|
|
.notification.error { |
|
|
background-color: |
|
|
} |
|
|
|
|
|
.ticket-item { |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.ticket-item:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.cards { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.promo { |
|
|
width: 92%; |
|
|
} |
|
|
|
|
|
.grid-cols-2 { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.grid-cols-3 { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
</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" class="active-page"><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"><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 $username; ?></h4> |
|
|
<p><?php echo $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">MI</div> |
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
<main class="p-4"> |
|
|
<div class="banner"> |
|
|
<div class="title">🛎️ Customer Care Support</div> |
|
|
<p>We're here to help you with any issues or questions about your Japanese Motors account</p> |
|
|
|
|
|
<div class="footer">⏰ 24/7 support • Quick response • Expert help</div> |
|
|
</div> |
|
|
|
|
|
<!-- Ticket Statistics --> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"> |
|
|
<div class="stat-card"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-500/20 mr-4"> |
|
|
<i data-feather="message-circle" class="text-green-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold"><?php echo $open_tickets; ?></h3> |
|
|
<p class="text-sm text-gray-300">Open Tickets</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="stat-card"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-yellow-500/20 mr-4"> |
|
|
<i data-feather="clock" class="text-yellow-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold"><?php echo $in_progress_tickets; ?></h3> |
|
|
<p class="text-sm text-gray-300">In Progress</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="stat-card"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-gray-500/20 mr-4"> |
|
|
<i data-feather="check-circle" class="text-gray-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold"><?php echo $resolved_tickets; ?></h3> |
|
|
<p class="text-sm text-gray-300">Resolved</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"> |
|
|
<div class="dashboard-card md:col-span-2"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="help-circle" class="text-blue-400"></i> Submit a Support Request |
|
|
</h3> |
|
|
|
|
|
<form id="support-form" enctype="multipart/form-data"> |
|
|
<div class="form-group"> |
|
|
<label for="issue-type">Issue Type</label> |
|
|
<select id="issue-type" name="issue_type" required> |
|
|
<option value="">Select issue type</option> |
|
|
<option value="technical">Technical Issue</option> |
|
|
<option value="account">Account Problem</option> |
|
|
<option value="payment">Payment Issue</option> |
|
|
<option value="product">Product Related</option> |
|
|
<option value="withdrawal">Withdrawal Problem</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="subject">Subject</label> |
|
|
<input type="text" id="subject" name="subject" placeholder="Brief description of your issue" required> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="description">Description</label> |
|
|
<textarea id="description" name="description" rows="5" placeholder="Please describe your issue in detail..." required></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="priority">Priority Level</label> |
|
|
<select id="priority" name="priority" required> |
|
|
<option value="low">Low - General inquiry</option> |
|
|
<option value="medium" selected>Medium - Feature request or minor issue</option> |
|
|
<option value="high">High - Functionality impaired</option> |
|
|
<option value="urgent">Urgent - System down or critical issue</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="attachments">Attachments (Optional)</label> |
|
|
<input type="file" id="attachments" name="attachments[]" multiple> |
|
|
<p class="text-xs text-gray-400 mt-1">Upload screenshots or documents that might help us understand your issue</p> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="btn" id="submit-btn"> |
|
|
<span id="submit-text">Submit Request</span> |
|
|
<span id="submit-loading" class="hidden">Submitting...</span> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="phone" class="text-green-400"></i> Contact Options |
|
|
</h3> |
|
|
|
|
|
<div class="contact-option"> |
|
|
<h4 class="font-bold mb-2 flex items-center gap-2"> |
|
|
<i data-feather="message-circle" class="text-green-400"></i> Direct WhatsApp Support |
|
|
</h4> |
|
|
<p class="text-sm mb-3">Chat directly with our support team for instant assistance</p> |
|
|
<a href="https://wa.me/254712345678" class="whatsapp-btn" target="_blank"> |
|
|
<i data-feather="message-circle"></i> Message Support |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="contact-option"> |
|
|
<h4 class="font-bold mb-2 flex items-center gap-2"> |
|
|
<i data-feather="mail" class="text-blue-400"></i> Email Support |
|
|
</h4> |
|
|
<p class="text-sm mb-1">support@jmotors.com</p> |
|
|
<p class="text-sm mb-1">help@jmotors.com</p> |
|
|
<p class="text-xs text-gray-400">Response within 2 hours</p> |
|
|
</div> |
|
|
|
|
|
<div class="contact-option"> |
|
|
<h4 class="font-bold mb-2 flex items-center gap-2"> |
|
|
<i data-feather="phone" class="text-purple-400"></i> Phone Support |
|
|
</h4> |
|
|
<p class="text-sm mb-1">+254 756 709 823</p> |
|
|
<p class="text-sm mb-1">+254 756 709 823</p> |
|
|
<p class="text-xs text-gray-400">Available 24/7 for urgent issues</p> |
|
|
</div> |
|
|
|
|
|
<div class="contact-option"> |
|
|
<h4 class="font-bold mb-2 flex items-center gap-2"> |
|
|
<i data-feather="map-pin" class="text-red-400"></i> Office Visit |
|
|
</h4> |
|
|
<p class="text-sm mb-1">Jmotors Headquarters</p> |
|
|
<p class="text-sm mb-1">Nairobi, Kenya</p> |
|
|
<p class="text-xs text-gray-400">By appointment only</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Ticket History --> |
|
|
<div class="dashboard-card mt-8"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="file-text" class="text-red-400"></i> Your Support Tickets |
|
|
</h3> |
|
|
|
|
|
<div id="tickets-container"> |
|
|
<?php if (empty($tickets)): ?> |
|
|
<div class="text-center py-8"> |
|
|
<i data-feather="inbox" class="mx-auto text-gray-400 text-4xl mb-4"></i> |
|
|
<p class="text-gray-400">No support tickets yet. Submit your first request above.</p> |
|
|
</div> |
|
|
<?php else: ?> |
|
|
<?php foreach ($tickets as $ticket): ?> |
|
|
<div class="ticket-item support-ticket"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h4 class="font-bold text-lg"><?php echo htmlspecialchars($ticket['subject']); ?></h4> |
|
|
<span class="ticket-status status-<?php echo $ticket['status']; ?>"> |
|
|
<?php |
|
|
$status_text = str_replace('_', ' ', $ticket['status']); |
|
|
echo ucwords($status_text); |
|
|
?> |
|
|
</span> |
|
|
</div> |
|
|
<p class="text-sm mb-3"><?php echo htmlspecialchars(substr($ticket['description'], 0, 150)); ?>...</p> |
|
|
<div class="flex justify-between items-center text-xs text-gray-400"> |
|
|
<div> |
|
|
<span>Ticket #: <?php echo $ticket['ticket_number']; ?></span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>Type: <?php echo ucfirst($ticket['issue_type']); ?></span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>Priority: <?php echo ucfirst($ticket['priority']); ?></span> |
|
|
</div> |
|
|
<span><?php echo date('M j, Y g:i A', strtotime($ticket['created_at'])); ?></span> |
|
|
</div> |
|
|
</div> |
|
|
<?php endforeach; ?> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card mt-8"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="book-open" class="text-purple-400"></i> Frequently Asked Questions |
|
|
</h3> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">How do I reset my password?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>To reset your password, go to the login page and click on "Forgot Password". Enter your registered email address and follow the instructions sent to your email. If you don't receive the email within 5 minutes, check your spam folder or contact support.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">Why is my withdrawal pending?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>Withdrawals typically process within 24 hours. If it's taking longer, it might be undergoing security verification. Contact support if pending for more than 48 hours. Make sure you've completed the required 5 uploads in the last 7 days to be eligible for withdrawal.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">How do I join the affiliate program?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>To join our affiliate program, go to your dashboard, click on "Team" and then "Become an Affiliate". Follow the registration process and start inviting members. You need to have been active for at least 30 days and completed 50 successful uploads to qualify.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">What are the minimum withdrawal requirements?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>The minimum withdrawal amount is KES 500. You must also have completed at least 5 successful uploads in the last 7 days to be eligible for withdrawal. There's a 2% processing fee for withdrawals below KES 2,000.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">How do I upgrade my account level?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>Account levels are automatically upgraded based on your activity and earnings. To move from Dormant to Active Marketer, you need to complete 10 uploads and earn at least KES 1,000. Higher levels require more activity and team members.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">What should I do if my uploads are rejected?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>If your uploads are frequently rejected, check the content guidelines in the Meta Uploads section. Make sure your content is original, follows platform rules, and meets the quality standards. If you believe your content was wrongly rejected, contact support with the upload ID.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8"> |
|
|
<div class="dashboard-card"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="clock" class="text-yellow-400"></i> Support Hours |
|
|
</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex justify-between"> |
|
|
<span>WhatsApp Support:</span> |
|
|
<span class="font-bold">24/7</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Email Support:</span> |
|
|
<span class="font-bold">Mon-Sun, 6am-11pm EAT</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Phone Support:</span> |
|
|
<span class="font-bold">24/7 for urgent issues</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Average Response Time:</span> |
|
|
<span class="font-bold">Under 30 minutes</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Ticket Resolution Time:</span> |
|
|
<span class="font-bold">Within 24 hours</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="users" class="text-green-400"></i> Community Support |
|
|
</h3> |
|
|
<p class="mb-4">Join our community of marketers to get help from experienced members and share insights:</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="stat-card"> |
|
|
<h4 class="font-bold mb-2">Community Forum</h4> |
|
|
<p class="text-sm mb-3">Get answers from other marketers in our community forum</p> |
|
|
<a href="#" class="btn btn-outline">Visit Forum</a> |
|
|
</div> |
|
|
|
|
|
<div class="stat-card"> |
|
|
<h4 class="font-bold mb-2">Knowledge Base</h4> |
|
|
<p class="text-sm mb-3">Browse our comprehensive knowledge base articles</p> |
|
|
<a href="#" class="btn btn-outline">Browse Articles</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
// Notification function |
|
|
function showNotification(message, type) { |
|
|
const notification = document.createElement('div'); |
|
|
notification.className = `notification ${type}`; |
|
|
notification.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="${type === 'success' ? 'check-circle' : 'alert-circle'}"></i> |
|
|
<span class="ml-2">${message}</span> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
document.body.appendChild(notification); |
|
|
feather.replace(); |
|
|
|
|
|
// Auto remove after 5 seconds |
|
|
setTimeout(() => { |
|
|
notification.style.opacity = '0'; |
|
|
setTimeout(() => { |
|
|
if (notification.parentNode) { |
|
|
notification.parentNode.removeChild(notification); |
|
|
} |
|
|
}, 300); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
// FAQ toggle functionality |
|
|
const faqItems = document.querySelectorAll('.faq-item'); |
|
|
faqItems.forEach(item => { |
|
|
item.addEventListener('click', function() { |
|
|
const answer = this.querySelector('.faq-answer'); |
|
|
const icon = this.querySelector('.faq-toggle'); |
|
|
|
|
|
if (answer.style.display === 'block') { |
|
|
answer.style.display = 'none'; |
|
|
icon.setAttribute('data-feather', 'chevron-down'); |
|
|
} else { |
|
|
answer.style.display = 'block'; |
|
|
icon.setAttribute('data-feather', 'chevron-up'); |
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
// Support form submission with AJAX |
|
|
const supportForm = document.getElementById('support-form'); |
|
|
if (supportForm) { |
|
|
supportForm.addEventListener('submit', async function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const submitBtn = document.getElementById('submit-btn'); |
|
|
const submitText = document.getElementById('submit-text'); |
|
|
const submitLoading = document.getElementById('submit-loading'); |
|
|
|
|
|
// Show loading state |
|
|
submitText.classList.add('hidden'); |
|
|
submitLoading.classList.remove('hidden'); |
|
|
submitBtn.disabled = true; |
|
|
|
|
|
try { |
|
|
const formData = new FormData(this); |
|
|
|
|
|
const response = await fetch('submit_ticket.php', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
if (result.success) { |
|
|
showNotification('Support ticket submitted successfully! Ticket #: ' + result.ticket_number, 'success'); |
|
|
this.reset(); |
|
|
|
|
|
// Refresh the page to show new ticket |
|
|
setTimeout(() => { |
|
|
location.reload(); |
|
|
}, 2000); |
|
|
} else { |
|
|
showNotification('Error: ' + result.message, 'error'); |
|
|
} |
|
|
} catch (error) { |
|
|
showNotification('Network error: ' + error.message, 'error'); |
|
|
} finally { |
|
|
// Reset button state |
|
|
submitText.classList.remove('hidden'); |
|
|
submitLoading.classList.add('hidden'); |
|
|
submitBtn.disabled = false; |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
