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

<style>
	.aoust-muted { color: rgba(33, 37, 41, 0.7); }
	.aoust-preview {
		width: 100%;
		max-width: 520px;
		border-radius: 14px;
		border: 1px solid rgba(0,0,0,0.08);
		background: #f8f9fa;
	}
	.aoust-preview--square { max-width: 220px; }
	/* 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>

<?php
	$w = isset($webinar) && is_array($webinar) ? $webinar : array();
	$mode = isset($mode) ? $mode : 'create';
	$is_edit = ($mode === 'edit');
	$id = isset($w['id']) ? $w['id'] : '';
	$action = $is_edit ? base_url('aoust_webinars/update/' . rawurlencode($id)) : base_url('aoust_webinars/store');
?>

<div class="care-admin" id="aoustWebinarsForm">
	<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) : ($is_edit ? 'Edit webinar' : 'Add webinar'); ?></h1>
				<p class="ca-sub mb-0">Fields: title, images, date/time, language, duration, description, speaker, publish, userId, participants.</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('aoust_webinars'); ?>">Back to list</a>
					<?php if ($is_edit): ?>
						<a class="btn btn-light" href="<?php echo base_url('aoust_webinars/toggle/' . rawurlencode($id)); ?>">
							<?php echo !empty($w['isActive']) ? 'Unpublish' : 'Publish'; ?>
						</a>
					<?php endif; ?>
				</div>
			</div>
		</div>
	</div>

	<div class="row g-3">
		<div class="col-lg-8">
			<div class="ca-card mb-4">
				<div class="ca-card-header">
					<h5 class="ca-card-title mb-1"><i class="fa-solid fa-pen-to-square me-2 text-success"></i><?php echo $is_edit ? 'Edit webinar' : 'Add webinar'; ?></h5>
					<p class="mb-0">Save will write to Firestore collection <strong>Webinars</strong>.</p>
				</div>
				<div class="ca-card-body">
					<form method="post" action="<?php echo $action; ?>" enctype="multipart/form-data">
						<div class="mb-3">
							<label class="form-label">Title</label>
							<input class="form-control" name="title" required value="<?php echo htmlspecialchars(isset($w['title']) ? $w['title'] : ''); ?>">
						</div>

						<div class="row g-3">
							<div class="col-md-6">
								<label class="form-label">Date</label>
								<input class="form-control" type="date" name="date" required value="<?php echo htmlspecialchars(isset($w['date']) ? $w['date'] : ''); ?>">
							</div>
							<div class="col-md-6">
								<label class="form-label">Time</label>
								<input class="form-control" type="time" name="time" required value="<?php echo htmlspecialchars(isset($w['time']) ? $w['time'] : ''); ?>">
							</div>
						</div>

						<div class="row g-3 mt-0">
							<div class="col-md-6">
								<label class="form-label">Language</label>
								<select class="form-select" name="language">
									<?php $lang = isset($w['language']) ? (string) $w['language'] : ''; ?>
									<option value="" <?php echo ($lang === '') ? 'selected' : ''; ?>>Select language</option>
									<option value="English" <?php echo ($lang === 'English') ? 'selected' : ''; ?>>English</option>
									<option value="Spanish" <?php echo ($lang === 'Spanish') ? 'selected' : ''; ?>>Spanish</option>
									<option value="Portuguese" <?php echo ($lang === 'Portuguese') ? 'selected' : ''; ?>>Portuguese</option>
									<option value="German" <?php echo ($lang === 'German') ? 'selected' : ''; ?>>German</option>
									<option value="Italian" <?php echo ($lang === 'Italian') ? 'selected' : ''; ?>>Italian</option>
									<option value="Dutch" <?php echo ($lang === 'Dutch') ? 'selected' : ''; ?>>Dutch</option>
									<option value="Russian" <?php echo ($lang === 'Russian') ? 'selected' : ''; ?>>Russian</option>
									<option value="Turkish" <?php echo ($lang === 'Turkish') ? 'selected' : ''; ?>>Turkish</option>
									<option value="Japanese" <?php echo ($lang === 'Japanese') ? 'selected' : ''; ?>>Japanese</option>
									<option value="Korean" <?php echo ($lang === 'Korean') ? 'selected' : ''; ?>>Korean</option>
									<option value="Chinese" <?php echo ($lang === 'Chinese') ? 'selected' : ''; ?>>Chinese</option>
									<option value="Thai" <?php echo ($lang === 'Thai') ? 'selected' : ''; ?>>Thai</option>
									<option value="Vietnamese" <?php echo ($lang === 'Vietnamese') ? 'selected' : ''; ?>>Vietnamese</option>
									<option value="Indonesian" <?php echo ($lang === 'Indonesian') ? 'selected' : ''; ?>>Indonesian</option>
									<option value="Malay" <?php echo ($lang === 'Malay') ? 'selected' : ''; ?>>Malay</option>
									<option value="Filipino" <?php echo ($lang === 'Filipino') ? 'selected' : ''; ?>>Filipino</option>
									<option value="Hebrew" <?php echo ($lang === 'Hebrew') ? 'selected' : ''; ?>>Hebrew</option>
									<option value="Arabic" <?php echo ($lang === 'Arabic') ? 'selected' : ''; ?>>Arabic</option>
									<option value="Hindi" <?php echo ($lang === 'Hindi') ? 'selected' : ''; ?>>Hindi</option>

									<option value="French" <?php echo ($lang === 'French') ? 'selected' : ''; ?>>French</option>
									<option value="Other" <?php echo ($lang === 'Other') ? 'selected' : ''; ?>>Other</option>
								</select>
							</div>
							<div class="col-md-6">
								<label class="form-label">Duration</label>
								<input class="form-control" name="duration" placeholder="e.g. 60 minutes" value="<?php echo htmlspecialchars(isset($w['duration']) ? $w['duration'] : ''); ?>">
							</div>
						</div>

						<div class="mt-3">
							<label class="form-label">Description</label>
							<textarea class="form-control" name="description" rows="4" placeholder="Webinar details..."><?php echo htmlspecialchars(isset($w['description']) ? $w['description'] : ''); ?></textarea>
						</div>

						<hr class="my-4">

						<div class="row g-3">
							<div class="col-md-6">
								<label class="form-label">Speaker name</label>
								<input class="form-control" name="speakerName" value="<?php echo htmlspecialchars(isset($w['speakerName']) ? $w['speakerName'] : ''); ?>">
							</div>
							<div class="col-md-6">
								<label class="form-label">Speaker position</label>
								<input class="form-control" name="speakerPosition" value="<?php echo htmlspecialchars(isset($w['speakerPosition']) ? $w['speakerPosition'] : ''); ?>">
							</div>
						</div>

					
						<div class="row g-3 mt-0">
							<div class="col-md-6">
								<label class="form-label">Status</label>
								<select class="form-select" name="isActive">
									<option value="1" <?php echo !empty($w['isActive']) ? 'selected' : ''; ?>>Published</option>
									<option value="0" <?php echo empty($w['isActive']) ? 'selected' : ''; ?>>Unpublished</option>
								</select>
							</div>
						</div>

						<hr class="my-4">

						<div class="row g-3">
							<div class="col-md-6">
								<label class="form-label">Cover image</label>
								<input class="form-control" type="file" name="image" accept="image/*" <?php echo $is_edit ? '' : ''; ?>>
								<div class="form-text aoust-muted">Upload to Firebase Storage; URL is saved in Firestore.</div>
							</div>
							<div class="col-md-6">
								<label class="form-label">Speaker image</label>
								<input class="form-control" type="file" name="speakerImage" accept="image/*">
							</div>
						</div>

						<div class="d-flex gap-2 mt-4">
							<a class="btn btn-light border" href="<?php echo base_url('aoust_webinars'); ?>">Cancel</a>
							<button class="btn btn-primary" type="submit"><?php echo $is_edit ? 'Save changes' : 'Create webinar'; ?></button>
							<?php if ($is_edit): ?>
								<a class="btn btn-outline-danger ms-auto" href="<?php echo base_url('aoust_webinars/delete/' . rawurlencode($id)); ?>" onclick="return confirm('Delete this webinar?');">Delete</a>
							<?php endif; ?>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div class="col-lg-4">
			<div class="ca-card mb-4">
				<div class="ca-card-header">
					<h5 class="ca-card-title mb-1"><i class="fa-regular fa-image me-2 text-success"></i>Preview</h5>
					<p class="mb-0">Existing images (if saved).</p>
				</div>
				<div class="ca-card-body">
					<div class="mb-3">
						<div class="fw-semibold mb-2">Cover</div>
						<?php if (!empty($w['image'])): ?>
							<img class="aoust-preview" src="<?php echo htmlspecialchars($w['image']); ?>" alt="">
						<?php else: ?>
							<div class="aoust-muted small">No cover image yet.</div>
						<?php endif; ?>
					</div>
					<div>
						<div class="fw-semibold mb-2">Speaker</div>
						<?php if (!empty($w['speakerImage'])): ?>
							<img class="aoust-preview aoust-preview--square" src="<?php echo htmlspecialchars($w['speakerImage']); ?>" alt="">
						<?php else: ?>
							<div class="aoust-muted small">No speaker image yet.</div>
						<?php endif; ?>
					</div>
				</div>
			</div>

			<?php if ($is_edit): ?>
			<div class="ca-card">
				<div class="ca-card-header">
					<h5 class="ca-card-title mb-1"><i class="fa-solid fa-circle-info me-2 text-success"></i>Metadata</h5>
					<p class="mb-0">Record info.</p>
				</div>
				<div class="ca-card-body">
					<div class="aoust-muted small">Document ID</div>
					<div class="fw-semibold mb-3"><?php echo htmlspecialchars($id); ?></div>
					<div class="aoust-muted small">Status</div>
					<div class="mb-3">
						<?php if (!empty($w['isActive'])): ?>
							<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; ?>
					</div>
				</div>
			</div>
			<?php endif; ?>
		</div>
	</div>
</div>

