<div class="container-fluid">
	<div class="row column_title">
		<div class="col-md-12">
			<div class="page_title">
				<h2><?= ($mode === 'edit') ? 'Edit Course' : 'Add Course' ?></h2>
			</div>
		</div>
	</div>

	<div class="card shadow mb-4">
		<div class="card-body">
			<form method="post" enctype="multipart/form-data" action="<?= ($mode === 'edit') ? base_url('courses/update/' . $courseId) : base_url('courses/store') ?>">
				<div class="row">
					<div class="col-md-6">
						<div class="form-group">
							<label>Category</label>
							<?php
								$categoryValue = ($course && isset($course['category'])) ? (string)$course['category'] : 'Basic';
							?>
							<select name="category" class="form-control" required>
								<option value="Basic" <?= ($categoryValue === 'Basic') ? 'selected' : '' ?>>Basic</option>
								<option value="Intermediate" <?= ($categoryValue === 'Intermediate') ? 'selected' : '' ?>>Intermediate</option>
								<option value="Pro" <?= ($categoryValue === 'Pro') ? 'selected' : '' ?>>Pro</option>
							</select>
						</div>
					</div>

					<div class="col-md-6">
						<div class="form-group">
							<label>Title</label>
							<input type="text" name="title" class="form-control" required
								value="<?= ($course && isset($course['title'])) ? html_escape($course['title']) : '' ?>">
						</div>
					</div>

					<div class="col-md-12">
						<div class="form-group">
							<label>Description</label>
							<textarea name="description" rows="4" class="form-control" required><?= ($course && isset($course['description'])) ? html_escape($course['description']) : '' ?></textarea>
						</div>
					</div>

					<div class="col-md-6">
						<div class="form-group">
							<label>Duration (minutes)</label>
							<input type="number" name="duration" class="form-control" min="0" required
								value="<?= ($course && isset($course['duration'])) ? (int)$course['duration'] : 0 ?>">
						</div>
					</div>

					<div class="col-md-6">
						<div class="form-group">
							<label>Price</label>
							<input type="text" name="price" class="form-control" required
								value="<?= ($course && isset($course['price'])) ? html_escape((string)$course['price']) : '' ?>"
								placeholder="200">
						</div>
					</div>

					<div class="col-md-4 d-none">
						<div class="form-group">
							<label>User ID</label>
							<?php
								$userIdValue = '';
								if ($course && isset($course['userId'])) {
									$userIdValue = (string)$course['userId'];
								} elseif (isset($currentUserId)) {
									$userIdValue = (string)$currentUserId;
								}
							?>
							<input type="text" name="userId" class="form-control" readonly
								value="<?= html_escape($userIdValue) ?>"
								placeholder="5LLHaAUqqvfLEl1506FdldvOt533">
						</div>
					</div>

					<div class="col-md-12">
						<div class="form-group">
							<label>Thumbnail (Upload Image)</label>
							<input type="hidden" name="thumbnail" value="<?= ($course && isset($course['thumbnail'])) ? html_escape((string)$course['thumbnail']) : '' ?>">
							<input type="file" name="thumbnail_file" id="thumbnail_file" class="form-control" accept="image/*">
							<div class="mt-2">
								<img
									id="thumbnailPreview"
									class="img-thumbnail"
									src="<?= ($course && !empty($course['thumbnail'])) ? html_escape((string)$course['thumbnail']) : '' ?>"
									style="height:120px;width:120px;<?= ($course && !empty($course['thumbnail'])) ? '' : 'display:none;' ?>"
								>
							</div>
						</div>
					</div>
				</div>

				<div class="mt-3">
					<button type="submit" class="btn btn-primary"><?= ($mode === 'edit') ? 'Update Course' : 'Create Course' ?></button>
					<a class="btn btn-secondary" href="<?= base_url('courses') ?>">Back</a>
				</div>
			</form>

			<script>
				(function () {
					const fileInput = document.getElementById('thumbnail_file');
					const preview = document.getElementById('thumbnailPreview');
					if (!fileInput || !preview) return;

					fileInput.addEventListener('change', function () {
						const file = fileInput.files && fileInput.files[0];
						if (!file) return;
						const url = URL.createObjectURL(file);
						preview.src = url;
						preview.style.display = '';
					});
				})();
			</script>
		</div>
	</div>
</div>

