<link href="<?php echo base_url('assets/css/admin-panel.css'); ?>" rel="stylesheet">

<div class="care-admin" id="aoustDash">
	<div class="ca-hero">
		<div class="ca-hero-inner row align-items-center g-3">
			<div class="col-lg-8">
				<p class="ca-kicker">AOUST portal</p>
				<h1 class="ca-title"><?php echo isset($page_title) ? htmlspecialchars($page_title) : 'AOUST — Dashboard'; ?></h1>
				<p class="ca-sub mb-0">This dashboard uses JavaScript dummy arrays and renders dynamically.</p>
			</div>
			<div class="col-lg-4">
				<div class="ca-nav justify-content-lg-end">
					<a class="btn btn-light" href="<?php echo base_url('admin/aoust_users'); ?>">Users</a>
					<a class="btn btn-light" href="<?php echo base_url('aoust_pickup'); ?>">Pickup</a>
					<a class="btn btn-primary" href="<?php echo base_url('admin/aoust_webinars'); ?>">Webinars</a>
				</div>
			</div>
		</div>
	</div>

	<div class="row g-3 mb-4" id="dashCards"></div>

	<div class="ca-card mb-4">
		<div class="ca-card-header d-flex flex-column flex-md-row align-items-md-center justify-content-md-between gap-2">
			<div>
				<h5 class="ca-card-title mb-1"><i class="fa-solid fa-chart-line me-2 text-success"></i>User signup trends</h5>
				<p class="mb-0">Dummy monthly signups (Chart.js).</p>
			</div>
			<span class="badge rounded-pill ca-pill bg-light text-dark border">Last 12 months</span>
		</div>
		<div class="ca-card-body">
			<div style="height: 320px;">
				<canvas id="signupTrendChart" aria-label="User signup trends chart" role="img"></canvas>
			</div>
		</div>
	</div>

	<div class="ca-card mb-4">
		<div class="ca-card-header">
			<h5 class="ca-card-title mb-1"><i class="fa-solid fa-clock-rotate-left me-2 text-success"></i>Recent activity</h5>
			<p class="mb-0">Dummy activity log.</p>
		</div>
		<div class="ca-card-body p-0">
			<div class="ca-table-wrap border-0 rounded-0 border-top">
				<table class="table ca-table table-striped mb-0 align-middle">
					<thead>
						<tr>
							<th>When</th>
							<th>Actor</th>
							<th>Action</th>
							<th>Target</th>
							<th class="text-end">Status</th>
						</tr>
					</thead>
					<tbody id="recentActivityTbody"></tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<script src="<?php echo base_url('assets/plugins/chartjs/js/chart.js'); ?>"></script>
<script>
(function () {
	var users = [
		{ id: 'u1', role: 'User' }, { id: 'u2', role: 'User' }, { id: 'u3', role: 'User' },
		{ id: 'a1', role: 'Agency' }, { id: 'a2', role: 'Agency' }
	];
	var requests = [
		{ id: 'p1', status: 'Pending' }, { id: 'p2', status: 'Approved' }, { id: 's1', status: 'Pending' }
	];
	var activity = [
		{ when: '2026-04-10 10:12', actor: 'Admin', action: 'Approved', target: 'Pickup request p2', status: 'Approved' },
		{ when: '2026-04-10 09:40', actor: 'Admin', action: 'Added', target: 'Webinar "UK Study Visa Webinar"', status: 'Success' },
		{ when: '2026-04-09 16:22', actor: 'Admin', action: 'Rejected', target: 'Pickup request p3', status: 'Rejected' }
	];

	function el(id) { return document.getElementById(id); }
	function escapeHtml(str) {
		return String(str)
			.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
			.replaceAll('"', '&quot;').replaceAll("'", '&#039;');
	}
	function badgeForStatus(st) {
		var s = String(st || '').toLowerCase();
		if (s === 'pending') return '<span class="badge bg-warning-subtle text-warning border border-warning-subtle">Pending</span>';
		if (s === 'approved') return '<span class="badge bg-success-subtle text-success border border-success-subtle">Approved</span>';
		if (s === 'rejected') return '<span class="badge bg-danger-subtle text-danger border border-danger-subtle">Rejected</span>';
		if (s === 'success') return '<span class="badge bg-success-subtle text-success border border-success-subtle">Success</span>';
		return '<span class="badge bg-light text-dark border">—</span>';
	}

	var totalUsers = users.filter(function (u) { return u.role === 'User'; }).length;
	var totalAgencies = users.filter(function (u) { return u.role === 'Agency'; }).length;
	var totalRequests = requests.length;
	var pendingRequests = requests.filter(function (r) { return r.status === 'Pending'; }).length;

	var cards = [
		{ icon: 'fa-solid fa-user', label: 'Total Users', value: totalUsers },
		{ icon: 'fa-solid fa-building', label: 'Total Agencies', value: totalAgencies },
		{ icon: 'fa-solid fa-inbox', label: 'Total Requests', value: totalRequests },
		{ icon: 'fa-solid fa-hourglass-half', label: 'Pending Requests', value: pendingRequests }
	];

	el('dashCards').innerHTML = cards.map(function (c) {
		return '' +
			'<div class="col-12 col-md-6 col-xl-3">' +
				'<div class="ca-stat h-100">' +
					'<div class="ca-stat-icon"><i class="' + c.icon + '"></i></div>' +
					'<p class="ca-stat-label">' + escapeHtml(c.label) + '</p>' +
					'<div class="display-6 fw-bold mb-0">' + escapeHtml(c.value) + '</div>' +
				'</div>' +
			'</div>';
	}).join('');

	el('recentActivityTbody').innerHTML = activity.map(function (a) {
		return '' +
			'<tr>' +
				'<td class="text-muted small">' + escapeHtml(a.when) + '</td>' +
				'<td class="fw-semibold">' + escapeHtml(a.actor) + '</td>' +
				'<td>' + escapeHtml(a.action) + '</td>' +
				'<td>' + escapeHtml(a.target) + '</td>' +
				'<td class="text-end">' + badgeForStatus(a.status) + '</td>' +
			'</tr>';
	}).join('');

	// Chart.js: signup trend
	var canvas = document.getElementById('signupTrendChart');
	if (canvas && window.Chart) {
		var labels = ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr'];
		var signups = [8, 11, 9, 14, 18, 16, 19, 23, 17, 21, 25, 28];

		/* eslint-disable no-new */
		new Chart(canvas, {
			type: 'line',
			data: {
				labels: labels,
				datasets: [{
					label: 'User signups',
					data: signups,
					borderColor: '#198754',
					backgroundColor: 'rgba(25, 135, 84, 0.12)',
					pointRadius: 4,
					pointHoverRadius: 5,
					tension: 0.35,
					fill: true
				}]
			},
			options: {
				responsive: true,
				maintainAspectRatio: false,
				plugins: {
					legend: { display: false },
					tooltip: { intersect: false, mode: 'index' }
				},
				scales: {
					x: { grid: { display: false } },
					y: { beginAtZero: true, ticks: { precision: 0 } }
				}
			}
		});
		/* eslint-enable no-new */
	}
})();
</script>

