<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="aoustVisa">
	<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 — Program & Visa Info'; ?></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_academic'); ?>">Academic</a>
					<a class="btn btn-primary" href="<?php echo base_url('admin/aoust_visa'); ?>">Visa</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-passport me-2 text-success"></i>Program &amp; Visa Info</h5>
				<p class="mb-0">Maintain visa options and processing timelines.</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="visaCountLabel">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="visaSearch" placeholder="Search country or visa type">
				</div>
				<button type="button" class="btn btn-ca-success" id="btnAddVisa"><i class="fa-solid fa-plus me-2"></i>Add</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>Visa Type</th>
							<th>Processing Time</th>
							<th class="text-end">Actions</th>
						</tr>
					</thead>
					<tbody id="visaTbody"></tbody>
				</table>
			</div>
		</div>
		<div class="p-4 d-none" id="visaEmpty">
			<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 visa info found</div>
				<div class="aoust-muted small">Try a different search keyword.</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modalVisa" 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="modalVisaTitle">Visa Info</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form id="formVisa">
				<div class="modal-body">
					<input type="hidden" id="visa_id">
					<div class="mb-3">
						<label class="form-label">Country</label>
						<input class="form-control" id="visa_country" required>
					</div>
					<div class="mb-3">
						<label class="form-label">Visa Type</label>
						<input class="form-control" id="visa_type" required>
					</div>
					<div class="mb-0">
						<label class="form-label">Processing Time</label>
						<input class="form-control" id="visa_processing" required placeholder="e.g. 3–6 weeks">
					</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 visaInfo = [
		{ id: 'v1', country: 'UK', visaType: 'Study Visa', processingTime: '3–6 weeks' },
		{ id: 'v2', country: 'Canada', visaType: 'Work Permit', processingTime: '8–16 weeks' }
	];
	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 = visaInfo.filter(function (v) {
			if (!q) return true;
			return (v.country + ' ' + v.visaType + ' ' + v.processingTime).toLowerCase().indexOf(q) !== -1;
		});

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

		el('visaTbody').innerHTML = filtered.map(function (v) {
			return '' +
				'<tr>' +
					'<td class="fw-semibold">' + escapeHtml(v.country) + '</td>' +
					'<td>' + escapeHtml(v.visaType) + '</td>' +
					'<td>' + escapeHtml(v.processingTime) + '</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(v.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(v.id) + '" title="Delete"><i class="fa-regular fa-trash-can"></i></button>' +
						'</div>' +
					'</td>' +
				'</tr>';
		}).join('');

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

	function openModal(mode, id) {
		el('modalVisaTitle').textContent = mode === 'add' ? 'Add visa info' : 'Edit visa info';
		if (mode === 'add') {
			el('visa_id').value = '';
			el('visa_country').value = '';
			el('visa_type').value = '';
			el('visa_processing').value = '';
		} else {
			var v = visaInfo.find(function (x) { return x.id === id; });
			el('visa_id').value = v.id;
			el('visa_country').value = v.country;
			el('visa_type').value = v.visaType;
			el('visa_processing').value = v.processingTime;
		}
		showModal('modalVisa');
	}

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

	document.getElementById('aoustVisa').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 v = visaInfo.find(function (x) { return x.id === id; });
			if (confirm('Delete visa info "' + v.country + ' — ' + v.visaType + '"?')) {
				visaInfo = visaInfo.filter(function (x) { return x.id !== id; });
				render();
			}
		}
	});

	el('formVisa').addEventListener('submit', function (e) {
		e.preventDefault();
		var id = el('visa_id').value.trim();
		var payload = {
			id: id || nextId('v', visaInfo),
			country: el('visa_country').value.trim(),
			visaType: el('visa_type').value.trim(),
			processingTime: el('visa_processing').value.trim()
		};
		if (!id) visaInfo.unshift(payload);
		else visaInfo = visaInfo.map(function (v) { return v.id === id ? payload : v; });
		bootstrap.Modal.getInstance(document.getElementById('modalVisa')).hide();
		render();
	});

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

