<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="aoustWebinars">
	<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 — Webinars'; ?></h1>
				<p class="ca-sub mb-0">Add/Edit modal, delete confirmation. 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_webinars'); ?>">Webinars</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-video me-2 text-success"></i>Webinars</h5>
				<p class="mb-0">Manage sessions and speakers.</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="webinarCountLabel">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="webinarSearch" placeholder="Search title or speaker">
				</div>
				<button type="button" class="btn btn-ca-success" id="btnAddWebinar"><i class="fa-solid fa-plus me-2"></i>Add webinar</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>Title</th>
							<th>Date</th>
							<th>Time</th>
							<th>Speaker</th>
							<th class="text-end">Actions</th>
						</tr>
					</thead>
					<tbody id="webinarsTbody"></tbody>
				</table>
			</div>
		</div>
		<div class="p-4 d-none" id="webinarsEmpty">
			<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 webinars found</div>
				<div class="aoust-muted small">Try a different search keyword.</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modalWebinar" 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="modalWebinarTitle">Webinar</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form id="formWebinar">
				<div class="modal-body">
					<input type="hidden" id="webinar_id">
					<div class="mb-3">
						<label class="form-label">Title</label>
						<input class="form-control" id="webinar_title" required>
					</div>
					<div class="row g-3">
						<div class="col-md-6">
							<label class="form-label">Date</label>
							<input class="form-control" id="webinar_date" type="date" required>
						</div>
						<div class="col-md-6">
							<label class="form-label">Time</label>
							<input class="form-control" id="webinar_time" type="time" required>
						</div>
					</div>
					<div class="mt-3">
						<label class="form-label">Speaker</label>
						<input class="form-control" id="webinar_speaker" required>
					</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 webinars = [
		{ id: 'w1', title: 'UK Study Visa Webinar', date: '2026-04-20', time: '18:00', speaker: 'Sarah Williams' },
		{ id: 'w2', title: 'Canada Immigration Session', date: '2026-04-25', time: '17:30', speaker: 'Michael Chen' }
	];
	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 = webinars.filter(function (w) {
			if (!q) return true;
			return (w.title + ' ' + w.speaker).toLowerCase().indexOf(q) !== -1;
		});

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

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

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

	function openModal(mode, id) {
		el('modalWebinarTitle').textContent = mode === 'add' ? 'Add webinar' : 'Edit webinar';
		if (mode === 'add') {
			el('webinar_id').value = '';
			el('webinar_title').value = '';
			el('webinar_date').value = '';
			el('webinar_time').value = '';
			el('webinar_speaker').value = '';
		} else {
			var w = webinars.find(function (x) { return x.id === id; });
			el('webinar_id').value = w.id;
			el('webinar_title').value = w.title;
			el('webinar_date').value = w.date;
			el('webinar_time').value = w.time;
			el('webinar_speaker').value = w.speaker;
		}
		showModal('modalWebinar');
	}

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

	document.getElementById('aoustWebinars').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 w = webinars.find(function (x) { return x.id === id; });
			if (confirm('Delete webinar "' + w.title + '"?')) {
				webinars = webinars.filter(function (x) { return x.id !== id; });
				render();
			}
		}
	});

	el('formWebinar').addEventListener('submit', function (e) {
		e.preventDefault();
		var id = el('webinar_id').value.trim();
		var payload = {
			id: id || nextId('w', webinars),
			title: el('webinar_title').value.trim(),
			date: el('webinar_date').value,
			time: el('webinar_time').value,
			speaker: el('webinar_speaker').value.trim()
		};
		if (!id) webinars.unshift(payload);
		else webinars = webinars.map(function (w) { return w.id === id ? payload : w; });
		bootstrap.Modal.getInstance(document.getElementById('modalWebinar')).hide();
		render();
	});

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

