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

<style>
	.aoust-muted { color: rgba(33, 37, 41, 0.7); }
	.aoust-thumb {
		width: 44px;
		height: 34px;
		object-fit: cover;
		border-radius: 10px;
		border: 1px solid rgba(0,0,0,0.08);
		background: #f8f9fa;
	}
	.aoust-table-actions .btn { padding-inline: 0.75rem; }
	/* Keep scheme; ensure white text on primary actions */
	.btn-ca-success { color: #fff !important; }
	.btn-ca-success:hover, .btn-ca-success:focus { color: #fff !important; }
</style>

<div class="care-admin" id="aoustWebinarsCrud">
	<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">Firestore collection: <strong>Webinars</strong> · Images: Firebase Storage</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('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">Add and edit webinars on separate pages.</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">Total: <?php echo isset($webinars) ? (int) count($webinars) : 0; ?></span>
				<a class="btn btn-ca-success" href="<?php echo base_url('aoust_webinars/create'); ?>">
					<i class="fa-solid fa-plus me-2"></i>Add webinar
				</a>
			</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>Webinar</th>
							<th>Date</th>
							<th>Time</th>
							<th>Language</th>
							<th>Participants</th>
							<th>Status</th>
							<th class="text-end">Actions</th>
						</tr>
					</thead>
					<tbody>
					<?php if (!empty($webinars)): ?>
						<?php foreach ($webinars as $w): ?>
							<?php
								$id = isset($w['id']) ? $w['id'] : '';
								$title = isset($w['title']) ? $w['title'] : '';
								$img = isset($w['image']) ? $w['image'] : '';
								$date = isset($w['date']) ? $w['date'] : '';
								$time = isset($w['time']) ? $w['time'] : '';
								$lang = isset($w['language']) ? $w['language'] : '';
								$dur = isset($w['duration']) ? $w['duration'] : '';
								$sp = isset($w['speakerName']) ? $w['speakerName'] : '';
								$pos = isset($w['speakerPosition']) ? $w['speakerPosition'] : '';
								$active = !empty($w['isActive']);
								$participants = isset($w['noOfParticipant']) ? (int) $w['noOfParticipant'] : 0;
							?>
							<tr>
								<td class="fw-semibold">
									<div class="d-flex align-items-center gap-2">
										<?php if ($img): ?>
											<img class="aoust-thumb" src="<?php echo htmlspecialchars($img); ?>" alt="">
										<?php else: ?>
											<div class="aoust-thumb d-inline-flex align-items-center justify-content-center text-muted">
												<i class="fa-regular fa-image"></i>
											</div>
										<?php endif; ?>
										<div class="min-w-0">
											<div class="text-truncate"><?php echo htmlspecialchars($title); ?></div>
											<div class="aoust-muted small text-truncate">
												<?php echo htmlspecialchars($sp); ?><?php if ($pos): ?> · <?php echo htmlspecialchars($pos); ?><?php endif; ?>
												<?php if ($dur): ?> · <?php echo htmlspecialchars($dur); ?><?php endif; ?>
											</div>
											<div class="aoust-muted small text-truncate">ID: <?php echo htmlspecialchars($id); ?></div>
										</div>
									</div>
								</td>
								<td><?php echo htmlspecialchars($date); ?></td>
								<td><?php echo htmlspecialchars($time); ?></td>
								<td><?php echo htmlspecialchars($lang); ?></td>
								<td><span class="badge bg-light text-dark border"><?php echo (int) $participants; ?></span></td>
								<td>
									<?php if ($active): ?>
										<span class="badge bg-success-subtle text-success border border-success-subtle">Published</span>
									<?php else: ?>
										<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Unpublished</span>
									<?php endif; ?>
								</td>
								<td class="text-end">
									<div class="btn-group aoust-table-actions" role="group">
										<a class="btn btn-sm btn-light border" href="<?php echo base_url('aoust_webinars/edit/' . rawurlencode($id)); ?>" title="Edit">
											<i class="fa-regular fa-pen-to-square"></i>
										</a>
										<a class="btn btn-sm btn-light border" href="<?php echo base_url('aoust_webinars/toggle/' . rawurlencode($id)); ?>" title="Publish / Unpublish">
											<i class="fa-solid <?php echo $active ? 'fa-eye-slash' : 'fa-eye'; ?>"></i>
										</a>
										<a class="btn btn-sm btn-outline-danger" href="<?php echo base_url('aoust_webinars/delete/' . rawurlencode($id)); ?>" onclick="return confirm('Delete this webinar?');" title="Delete">
											<i class="fa-regular fa-trash-can"></i>
										</a>
									</div>
								</td>
							</tr>
						<?php endforeach; ?>
					<?php else: ?>
						<tr>
							<td colspan="7" class="p-4 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 yet</div>
								<div class="aoust-muted small">Click “Add webinar” to create your first one.</div>
							</td>
						</tr>
					<?php endif; ?>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

