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

<style>
	.aoust-table-actions .btn { padding-inline: 0.75rem; }
	.aoust-muted { color: rgba(33, 37, 41, 0.7); }
</style>

<div class="care-admin" id="aoustAcademic">
	<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 — Academic Data'; ?></h1>
				<p class="ca-sub mb-0">Add/Edit/Delete via modals. Data stored in JS array.</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'); ?>">Dashboard</a>
					<a class="btn btn-light" href="<?php echo base_url('admin/aoust_users'); ?>">Users</a>
					<a class="btn btn-primary" href="<?php echo base_url('admin/aoust_academic'); ?>">Academic</a>
				</div>
			</div>
		</div>
	</div>

	<div class="ca-card mb-4">
		<div class="ca-card-header d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between gap-2">
			<div>
				<h5 class="ca-card-title mb-1"><i class="fa-solid fa-graduation-cap me-2 text-success"></i>Academic Data</h5>
				<p class="mb-0">Program catalog (dummy data).</p>
			</div>
			<div class="d-flex align-items-stretch gap-2 flex-wrap justify-content-lg-end">
				<span class="badge rounded-pill ca-pill bg-light text-dark border" id="academicCountLabel">Showing 0</span>
				<div class="input-group" style="min-width: 280px;">
					<span class="input-group-text bg-white"><i class="fa-solid fa-magnifying-glass"></i></span>
					<input type="search" class="form-control" id="academicSearch" placeholder="Search country, university, program">
				</div>
				<button type="button" class="btn btn-ca-success" id="btnAddAcademic"><i class="fa-solid fa-plus me-2"></i>Add program</button>
			</div>
		</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>Country</th>
							<th>University</th>
							<th>Program</th>
							<th>Fee</th>
							<th class="text-end">Actions</th>
						</tr>
					</thead>
					<tbody id="academicTbody"></tbody>
				</table>
			</div>
		</div>
		<div class="p-4 d-none" id="academicEmpty">
			<div class="text-center">
				<div class="mb-2"><i class="fa-regular fa-face-frown fs-2 text-muted"></i></div>
				<div class="fw-semibold">No programs found</div>
				<div class="aoust-muted small">Try a different search keyword.</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modalAcademic" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modalAcademicTitle">Academic Program</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form id="formAcademic">
				<div class="modal-body">
					<input type="hidden" id="academic_id">
					<div class="mb-3">
						<label class="form-label">Country</label>
						<input class="form-control" id="academic_country" required>
					</div>
					<div class="mb-3">
						<label class="form-label">University</label>
						<input class="form-control" id="academic_university" required>
					</div>
					<div class="mb-3">
						<label class="form-label">Program</label>
						<input class="form-control" id="academic_program" required>
					</div>
					<div class="mb-0">
						<label class="form-label">Fee</label>
						<input class="form-control" id="academic_fee" required placeholder="e.g. £38,000 / year">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-primary">Save</button>
				</div>
			</form>
		</div>
	</div>
</div>

<script>
(function () {
	var academicPrograms = [
		{ id: 'ac1', country: 'UK', university: 'Oxford', program: 'BS Computer Science', fee: '£38,000 / year' },
		{ id: 'ac2', country: 'Canada', university: 'Toronto', program: 'MBA', fee: 'CAD 62,000 / year' }
	];
	var searchQuery = '';

	function el(id) { return document.getElementById(id); }
	function escapeHtml(str) {
		return String(str)
			.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
			.replaceAll('"', '&quot;').replaceAll("'", '&#039;');
	}
	function nextId(prefix, list) {
		var max = 0;
		list.forEach(function (x) {
			var m = String(x.id || '').match(/\d+$/);
			if (m) max = Math.max(max, parseInt(m[0], 10));
		});
		return prefix + String(max + 1);
	}
	function showModal(modalId) {
		var node = document.getElementById(modalId);
		var m = bootstrap.Modal.getOrCreateInstance(node);
		m.show();
		return m;
	}

	function render() {
		var q = (searchQuery || '').trim().toLowerCase();
		var filtered = academicPrograms.filter(function (a) {
			if (!q) return true;
			return (a.country + ' ' + a.university + ' ' + a.program + ' ' + a.fee).toLowerCase().indexOf(q) !== -1;
		});

		var countLabel = el('academicCountLabel');
		if (countLabel) {
			var extra = q ? ' · filtered' : '';
			countLabel.textContent = 'Showing ' + filtered.length + ' of ' + academicPrograms.length + extra;
		}

		el('academicTbody').innerHTML = filtered.map(function (a) {
			return '' +
				'<tr>' +
					'<td class="fw-semibold">' + escapeHtml(a.country) + '</td>' +
					'<td>' + escapeHtml(a.university) + '</td>' +
					'<td>' + escapeHtml(a.program) + '</td>' +
					'<td>' + escapeHtml(a.fee) + '</td>' +
					'<td class="text-end">' +
						'<div class="btn-group aoust-table-actions" role="group">' +
							'<button class="btn btn-sm btn-light border" data-action="edit" data-id="' + escapeHtml(a.id) + '" title="Edit"><i class="fa-regular fa-pen-to-square"></i></button>' +
							'<button class="btn btn-sm btn-outline-danger" data-action="delete" data-id="' + escapeHtml(a.id) + '" title="Delete"><i class="fa-regular fa-trash-can"></i></button>' +
						'</div>' +
					'</td>' +
				'</tr>';
		}).join('');

		var empty = el('academicEmpty');
		if (empty) {
			if (filtered.length === 0) empty.classList.remove('d-none');
			else empty.classList.add('d-none');
		}
	}

	function openModal(mode, id) {
		el('modalAcademicTitle').textContent = mode === 'add' ? 'Add program' : 'Edit program';
		if (mode === 'add') {
			el('academic_id').value = '';
			el('academic_country').value = '';
			el('academic_university').value = '';
			el('academic_program').value = '';
			el('academic_fee').value = '';
		} else {
			var a = academicPrograms.find(function (x) { return x.id === id; });
			el('academic_id').value = a.id;
			el('academic_country').value = a.country;
			el('academic_university').value = a.university;
			el('academic_program').value = a.program;
			el('academic_fee').value = a.fee;
		}
		showModal('modalAcademic');
	}

	el('btnAddAcademic').addEventListener('click', function () { openModal('add'); });
	el('academicSearch').addEventListener('input', function () {
		searchQuery = el('academicSearch').value || '';
		render();
	});

	document.getElementById('aoustAcademic').addEventListener('click', function (e) {
		var btn = e.target.closest('button[data-action]');
		if (!btn) return;
		var action = btn.getAttribute('data-action');
		var id = btn.getAttribute('data-id');
		if (action === 'edit') return openModal('edit', id);
		if (action === 'delete') {
			var a = academicPrograms.find(function (x) { return x.id === id; });
			if (confirm('Delete program "' + a.university + ' — ' + a.program + '"?')) {
				academicPrograms = academicPrograms.filter(function (x) { return x.id !== id; });
				render();
			}
		}
	});

	el('formAcademic').addEventListener('submit', function (e) {
		e.preventDefault();
		var id = el('academic_id').value.trim();
		var payload = {
			id: id || nextId('ac', academicPrograms),
			country: el('academic_country').value.trim(),
			university: el('academic_university').value.trim(),
			program: el('academic_program').value.trim(),
			fee: el('academic_fee').value.trim()
		};
		if (!id) academicPrograms.unshift(payload);
		else academicPrograms = academicPrograms.map(function (a) { return a.id === id ? payload : a; });
		bootstrap.Modal.getInstance(document.getElementById('modalAcademic')).hide();
		render();
	});

	render();
})();
</script>

