Spaces:

huggingfacejs
/

static-variables

Running

App Files Files Community

static-variables / jweb /ac1 /src /pages /agent-approval.php

fellybikush

Upload 99 files

628740b verified 8 months ago

raw

history blame

38.3 kB

	<?php
	// Start session and check if user is logged in
	session_start();
	if (!isset($_SESSION['logged_in']) \|\| $_SESSION['logged_in'] !== true) {
	header('Location: ../../index.php');
	exit;
	}

	// Get user data from session
	$username = $_SESSION['username'] ?? 'User';
	$email = $_SESSION['email'] ?? '';
	$tier = $_SESSION['tier'] ?? 'basic';
	$package = $_SESSION['package'] ?? 'Starter';
	$balance = $_SESSION['balance'] ?? 0;
	$total_deposits = $_SESSION['total_deposits'] ?? 0;
	$total_withdrawals = $_SESSION['total_withdrawals'] ?? 0;
	$rewards = $_SESSION['rewards'] ?? 0;
	$earnings = $total_deposits - $total_withdrawals;

	// Make sure user_id is set in session
	if (!isset($_SESSION['user_id'])) {
	$_SESSION['user_id'] = 1; // Default for demo
	}
	$userId = $_SESSION['user_id'];

	// Debug: Check if agent-functions.php exists
	$agentFunctionsPath = __DIR__ . '/../api/agent-functions.php';
	if (!file_exists($agentFunctionsPath)) {
	// Create dummy data for testing
	$pendingAgents = [];
	$agentStats = [
	'pending' => 0,
	'approved' => 5,
	'rejected' => 2,
	'documents_needed' => 0,
	'total_applications' => 7,
	'commission_this_month' => 12500.00,
	'total_commission' => 45000.00
	];

	// Mock functions for testing
	function reviewAgentApplication($agentId, $adminId, $status, $notes = '') {
	return true; // Mock success
	}

	function searchAgents($sponsorId, $searchTerm) {
	return []; // Mock empty results
	}
	} else {
	// Include agent functions
	require_once $agentFunctionsPath;

	// Handle form submissions
	if ($_SERVER['REQUEST_METHOD'] === 'POST') {
	if (isset($_POST['action'])) {
	if ($_POST['action'] === 'review_agent') {
	$agentId = $_POST['agent_id'] ?? 0;
	$status = $_POST['status'] ?? '';
	$notes = $_POST['notes'] ?? '';

	if (reviewAgentApplication($agentId, $userId, $status, $notes)) {
	$message = "Agent application " . ($status === 'approved' ? 'approved' : 'rejected') . " successfully!";
	} else {
	$error = "Failed to update agent application.";
	}
	} elseif ($_POST['action'] === 'search_agents') {
	$searchTerm = $_POST['search_term'] ?? '';
	$agents = searchAgents($userId, $searchTerm);
	$pendingAgents = $agents; // Use search results
	}
	}
	}

	// Get pending agents and stats
	if (!isset($pendingAgents)) {
	$pendingAgents = getPendingAgents($userId);
	}
	$agentStats = getAgentStats($userId);
	}

	// Debug output
	error_log("User ID: " . $userId);
	error_log("Pending agents count: " . count($pendingAgents));
	?>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Japanese Motors — Agent Approval</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: #7b848d;
	--card: #7a2f3b;
	--card-2: #6f2630;
	--accent: #efdf2d;
	--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: #a855f7;
	--banner-gradient-end: #ec4899;
	--spacing-unit: 1rem;
	--accent-primary: #7c3aed;
	--accent-secondary: #a855f7;
	--shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.1);
	--premium-gold: #d97706;
	}

	body {
	background: var(--bg);
	font-family: 'Poppins', sans-serif;
	transition: all 0.3s ease;
	min-height: 100vh;
	}

	.sidebar {
	width: 250px;
	height: 100vh;
	background: #0d1321;
	color: #fff;
	position: fixed;
	top: 0;
	left: -250px;
	transition: all 0.3s ease;
	z-index: 1000;
	overflow-y: auto;
	}

	.sidebar.active {
	left: 0;
	}

	#content {
	margin-left: 0;
	transition: all 0.3s ease;
	}

	.sidebar.active ~ #content {
	margin-left: 250px;
	}

	header {
	background: #222;
	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 ~ #content header {
	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 #1c2230;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.brand {
	font-size: 1.2rem;
	font-weight: 700;
	color: #ff9800;
	}

	.subtitle {
	font-size: 0.75rem;
	color: #aaa;
	}

	.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: #1c2230;
	}

	.menu li a i {
	margin-right: 12px;
	}

	.user-footer {
	padding: 15px;
	background: #222;
	display: flex;
	align-items: center;
	gap: 10px;
	position: sticky;
	bottom: 0;
	}

	.avatar {
	width: 35px;
	height: 35px;
	background: #444;
	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: #ffffff;
	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: #111;
	font-weight: 700;
	border: none;
	cursor: pointer;
	width: 100%;
	}

	.btn-outline {
	background: transparent;
	border: 2px solid var(--accent);
	color: var(--accent);
	}

	.btn-sm {
	padding: 8px 16px;
	font-size: 0.875rem;
	}

	.btn-success {
	background: #10B981;
	color: white;
	}

	.btn-danger {
	background: #EF4444;
	color: white;
	}

	.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;
	}

	.agent-card {
	background: rgba(0,0,0,0.15);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
	transition: transform 0.3s ease;
	border-left: 4px solid var(--accent);
	}

	.agent-card:hover {
	transform: translateY(-3px);
	}

	.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: #1c2230;
	border-right: 4px solid var(--accent);
	}

	.confirmation-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 1000;
	justify-content: center;
	align-items: center;
	}

	.modal-content {
	background: var(--card);
	border-radius: 12px;
	padding: 30px;
	width: 90%;
	max-width: 500px;
	color: white;
	}

	.progress-bar {
	height: 6px;
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
	overflow: hidden;
	margin: 15px 0;
	}

	.progress-fill {
	height: 100%;
	background: var(--accent);
	width: 0%;
	transition: width 0.5s ease;
	}

	.status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	}

	.status-pending {
	background: rgba(245, 158, 11, 0.2);
	color: #F59E0B;
	}

	.status-approved {
	background: rgba(16, 185, 129, 0.2);
	color: #10B981;
	}

	.status-rejected {
	background: rgba(239, 68, 68, 0.2);
	color: #EF4444;
	}

	.search-box {
	background: rgba(0,0,0,0.15);
	border-radius: 10px;
	padding: 12px;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	}

	.search-box input {
	background: transparent;
	border: none;
	padding: 8px;
	margin-left: 8px;
	width: 100%;
	}

	@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;
	}

	.action-buttons {
	flex-direction: column;
	gap: 8px;
	}

	.action-buttons button {
	width: 100%;
	}
	}
	</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 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="daily-product.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($username, 0, 2); ?>
	</div>
	</nav>
	</header>

	<main class="p-4">
	<?php if (isset($message)): ?>
	<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
	<?php echo htmlspecialchars($message); ?>
	</div>
	<?php endif; ?>

	<?php if (isset($error)): ?>
	<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
	<?php echo htmlspecialchars($error); ?>
	</div>
	<?php endif; ?>

	<div class="banner">
	<div class="title">👥 Agent Approval System</div>
	<p>Review and approve new agent applications to grow your network</p>
	<div class="footer">📈 Expand your team   •   Earn commissions   •   Build your network</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="users" class="text-blue-400"></i> Pending Approvals
	</h3>

	<div class="balance">
	<div>
	<p class="text-sm">Pending Applications</p>
	<h3 class="text-xl font-bold"><?php echo $agentStats['pending']; ?></h3>
	</div>
	<div class="text-right">
	<p class="text-sm">Approved This Month</p>
	<p class="font-bold"><?php echo $agentStats['approved']; ?> Agents</p>
	</div>
	</div>

	<form method="POST" class="search-box">
	<i data-feather="search" class="text-gray-400"></i>
	<input type="text" name="search_term" placeholder="Search agents by name, phone, or ID...">
	<input type="hidden" name="action" value="search_agents">
	<button type="submit" style="background: none; border: none; cursor: pointer;">
	<i data-feather="search" class="text-gray-400"></i>
	</button>
	</form>

	<div class="agent-list">
	<?php if (empty($pendingAgents)): ?>
	<div class="agent-card text-center">
	<p>No pending agent applications</p>
	<p class="text-sm text-gray-400 mt-2">New agent applications will appear here for review</p>
	</div>
	<?php else: ?>
	<?php foreach ($pendingAgents as $agent): ?>
	<div class="agent-card">
	<div class="flex justify-between items-start mb-3">
	<div>
	<h4 class="font-bold"><?php echo htmlspecialchars($agent['full_name'] ?? 'Unknown Agent'); ?></h4>
	<p class="text-sm"><?php echo htmlspecialchars($agent['phone'] ?? 'No phone'); ?></p>
	</div>
	<span class="status-badge status-pending">
	<?php
	$status = $agent['status'] ?? 'pending';
	if ($status == 'pending') echo 'Pending Review';
	elseif ($status == 'documents_needed') echo 'Documents Needed';
	else echo ucfirst($status);
	?>
	</span>
	</div>
	<div class="grid grid-cols-2 gap-4 mb-3">
	<div>
	<p class="text-xs text-gray-400">Applied On</p>
	<p class="text-sm"><?php echo date('d M Y', strtotime($agent['applied_at'] ?? 'now')); ?></p>
	</div>
	<div>
	<p class="text-xs text-gray-400">Location</p>
	<p class="text-sm"><?php echo htmlspecialchars($agent['location'] ?? 'Unknown'); ?></p>
	</div>
	</div>
	<div class="action-buttons flex gap-2">
	<button class="btn btn-success btn-sm flex-1" onclick="reviewAgent(<?php echo $agent['id'] ?? 0; ?>)">
	<i data-feather="user-check" class="w-4 h-4 mr-1"></i> Review
	</button>
	<button class="btn btn-outline btn-sm" onclick="viewProfile(<?php echo $agent['id'] ?? 0; ?>)">
	<i data-feather="eye" class="w-4 h-4 mr-1"></i> View
	</button>
	</div>
	</div>
	<?php endforeach; ?>
	<?php endif; ?>
	</div>

	<button class="btn btn-outline mt-4">View All Applications</button>
	</div>

	<div class="dashboard-card">
	<h3 class="text-lg font-bold mb-4 flex items-center gap-2">
	<i data-feather="bar-chart-2" class="text-green-400"></i> Approval Stats
	</h3>

	<div class="stat-card">
	<div class="flex justify-between items-center mb-2">
	<span>Total Applications</span>
	<span class="font-bold"><?php echo $agentStats['total_applications']; ?></span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2.5">
	<div class="bg-green-400 h-2.5 rounded-full" style="width: 100%"></div>
	</div>
	</div>

	<div class="stat-card">
	<div class="flex justify-between items-center mb-2">
	<span>Approved</span>
	<span class="font-bold"><?php echo $agentStats['approved']; ?></span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2.5">
	<div class="bg-green-400 h-2.5 rounded-full"
	style="width: <?php echo $agentStats['total_applications'] > 0 ? ($agentStats['approved'] / $agentStats['total_applications'] * 100) : 0; ?>%"></div>
	</div>
	</div>

	<div class="stat-card">
	<div class="flex justify-between items-center mb-2">
	<span>Rejected</span>
	<span class="font-bold"><?php echo $agentStats['rejected']; ?></span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2.5">
	<div class="bg-red-400 h-2.5 rounded-full"
	style="width: <?php echo $agentStats['total_applications'] > 0 ? ($agentStats['rejected'] / $agentStats['total_applications'] * 100) : 0; ?>%"></div>
	</div>
	</div>

	<div class="stat-card">
	<div class="flex justify-between items-center mb-2">
	<span>Pending</span>
	<span class="font-bold"><?php echo $agentStats['pending']; ?></span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2.5">
	<div class="bg-yellow-400 h-2.5 rounded-full"
	style="width: <?php echo $agentStats['total_applications'] > 0 ? ($agentStats['pending'] / $agentStats['total_applications'] * 100) : 0; ?>%"></div>
	</div>
	</div>

	<div class="mt-6">
	<h4 class="font-bold mb-3 flex items-center gap-2">
	<i data-feather="award" class="text-yellow-400"></i> Commission Earnings
	</h4>
	<div class="bg-gray-700 p-4 rounded-lg">
	<div class="flex justify-between items-center mb-2">
	<span>This Month</span>
	<span class="font-bold">KES <?php echo number_format($agentStats['commission_this_month'], 2); ?></span>
	</div>
	<div class="flex justify-between items-center">
	<span>Total Earned</span>
	<span class="font-bold">KES <?php echo number_format($agentStats['total_commission'], 2); ?></span>
	</div>
	</div>
	</div>

	<button class="btn mt-6">
	<i data-feather="download" class="w-4 h-4 mr-2"></i> Export Reports
	</button>
	</div>
	</div>

	<div class="dashboard-card mt-8">
	<h3 class="text-lg font-bold mb-4 flex items-center gap-2">
	<i data-feather="help-circle" class="text-purple-400"></i> Agent Approval Guidelines
	</h3>

	<div class="faq-item">
	<div class="flex justify-between items-center">
	<h4 class="font-bold">What are the requirements for agent approval?</h4>
	<i data-feather="chevron-down" class="faq-toggle"></i>
	</div>
	<div class="faq-answer">
	<p>Agents must meet the following criteria: valid government ID, minimum age of 18 years, completed training program, and minimum initial deposit of 1,000 KES. Additional verification may be required based on location and other factors.</p>
	</div>
	</div>

	<div class="faq-item">
	<div class="flex justify-between items-center">
	<h4 class="font-bold">How long does the approval process take?</h4>
	<i data-feather="chevron-down" class="faq-toggle"></i>
	</div>
	<div class="faq-answer">
	<p>The standard approval process takes 24-48 hours after all required documents are submitted. Delays may occur if additional verification is needed. You will receive a notification once the application has been processed.</p>
	</div>
	</div>

	<div class="faq-item">
	<div class="flex justify-between items-center">
	<h4 class="font-bold">What commissions do I earn from approved agents?</h4>
	<i data-feather="chevron-down" class="faq-toggle"></i>
	</div>
	<div class="faq-answer">
	<p>You earn 10% commission on your direct agents' earnings for the first 3 months, then 5% ongoing. Additionally, you receive 2% override commission on your team's second level agents. Commissions are paid weekly every Monday.</p>
	</div>
	</div>
	</div>
	</main>
	</div>

	<!-- Review Modal -->
	<div class="confirmation-modal" id="review-modal">
	<div class="modal-content">
	<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
	<i data-feather="user-check" class="text-green-400"></i> Review Agent Application
	</h3>

	<form id="review-form" method="POST">
	<input type="hidden" name="action" value="review_agent">
	<input type="hidden" id="review-agent-id" name="agent_id">
	<input type="hidden" id="review-status" name="status">

	<div class="bg-gray-700 p-4 rounded-lg mb-4">
	<h4 class="font-bold mb-2" id="review-agent-name">Loading...</h4>

	<div class="grid grid-cols-2 gap-4 mb-3">
	<div>
	<p class="text-xs text-gray-400">Phone Number</p>
	<p class="text-sm" id="review-agent-phone">Loading...</p>
	</div>
	<div>
	<p class="text-xs text-gray-400">Location</p>
	<p class="text-sm" id="review-agent-location">Loading...</p>
	</div>
	</div>

	<div class="mb-3">
	<p class="text-xs text-gray-400">Application Date</p>
	<p class="text-sm" id="review-agent-date">Loading...</p>
	</div>

	<div>
	<p class="text-xs text-gray-400">Documents</p>
	<div class="flex gap-2 mt-1">
	<a href="#" id="id-front-link" class="btn btn-outline btn-sm" target="_blank" style="display: none;">
	<i data-feather="file-text" class="w-4 h-4 mr-1"></i> ID Front
	</a>
	<a href="#" id="id-back-link" class="btn btn-outline btn-sm" target="_blank" style="display: none;">
	<i data-feather="file-text" class="w-4 h-4 mr-1"></i> ID Back
	</a>
	</div>
	</div>
	</div>

	<div class="form-group">
	<label for="approval-notes">Approval Notes</label>
	<textarea id="approval-notes" name="notes" rows="3" placeholder="Add any notes about this application..."></textarea>
	</div>

	<div class="flex gap-3 mt-4">
	<button type="button" class="btn btn-danger flex-1" id="reject-btn">
	<i data-feather="x" class="w-4 h-4 mr-1"></i> Reject
	</button>
	<button type="button" class="btn btn-success flex-1" id="approve-btn">
	<i data-feather="check" class="w-4 h-4 mr-1"></i> Approve
	</button>
	</div>
	</form>
	</div>
	</div>

	<script>
	feather.replace();

	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();
	});
	});

	// Modal functionality
	const reviewModal = document.getElementById('review-modal');
	const rejectBtn = document.getElementById('reject-btn');
	const approveBtn = document.getElementById('approve-btn');
	const reviewForm = document.getElementById('review-form');

	// Close modal when clicking outside
	reviewModal.addEventListener('click', function(e) {
	if (e.target === reviewModal) {
	reviewModal.style.display = 'none';
	}
	});

	// Set up modal button event handlers
	rejectBtn.addEventListener('click', function() {
	document.getElementById('review-status').value = 'rejected';
	reviewForm.submit();
	});

	approveBtn.addEventListener('click', function() {
	document.getElementById('review-status').value = 'approved';
	reviewForm.submit();
	});
	});

	// Agent review function
	function reviewAgent(agentId) {
	if (!agentId \|\| agentId === 0) {
	alert('Invalid agent ID');
	return;
	}

	// Show loading state
	document.getElementById('review-agent-name').textContent = 'Loading...';
	document.getElementById('review-agent-phone').textContent = 'Loading...';
	document.getElementById('review-agent-location').textContent = 'Loading...';
	document.getElementById('review-agent-date').textContent = 'Loading...';

	// Fetch agent data from server
	fetch('get-agent.php?id=' + agentId)
	.then(response => {
	if (!response.ok) {
	throw new Error('Network response was not ok');
	}
	return response.json();
	})
	.then(agent => {
	if (agent.error) {
	throw new Error(agent.error);
	}

	document.getElementById('review-agent-name').textContent = agent.full_name \|\| 'Unknown';
	document.getElementById('review-agent-phone').textContent = agent.phone \|\| 'Not provided';
	document.getElementById('review-agent-location').textContent = agent.location \|\| 'Unknown';
	document.getElementById('review-agent-date').textContent = new Date(agent.applied_at \|\| Date.now()).toLocaleDateString('en-GB', {
	day: 'numeric',
	month: 'short',
	year: 'numeric'
	});

	// Set document links
	const idFrontLink = document.getElementById('id-front-link');
	const idBackLink = document.getElementById('id-back-link');

	if (agent.id_front && agent.id_front !== '#') {
	idFrontLink.href = agent.id_front;
	idFrontLink.style.display = 'inline-block';
	} else {
	idFrontLink.style.display = 'none';
	}

	if (agent.id_back && agent.id_back !== '#') {
	idBackLink.href = agent.id_back;
	idBackLink.style.display = 'inline-block';
	} else {
	idBackLink.style.display = 'none';
	}

	// Set agent ID in form
	document.getElementById('review-agent-id').value = agentId;

	// Show modal
	document.getElementById('review-modal').style.display = 'flex';
	})
	.catch(error => {
	console.error('Error fetching agent:', error);
	alert('Error loading agent details: ' + error.message);
	});
	}

	// View profile function
	function viewProfile(agentId) {
	if (!agentId \|\| agentId === 0) {
	alert('Invalid agent ID');
	return;
	}
	window.open('agent-profile.php?id=' + agentId, '_blank');
	}
	</script>
	</body>
	</html>