<script src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/ckeditor.js"></script>

<div class="col-md-8 info">
	<center>

	<?php if($saved){
	 if($success>0){ ?>
		<center>&#9432; Course added</center>
	 <?php }else{ ?>
	 <center>&#xf071; Failed.Try again!  </center>
	<?php }} ?>

	</center>
</div>
	<header id="page-header"><h1>Add a New Course </h1></header>
	<div class="panel-body">

<form class="validate" action="addcourse" method="post" enctype="multipart/form-data" data-success="Sent! Thank you!" data-toastr-position="top-right" novalidate="novalidate">
	<fieldset>
		<!-- required [php action request] -->
	

		<div class="row">
			<div class="form-group">
				<div class="col-md-8 col-sm-12">
					<label>Course Category *</label>
					<select name="category" id="demo-category" class="form-control pointer" required>
						<option value="">- Select Category -</option>
	                    <?php foreach($cats as $cat):?>
						<option value=<?php echo $cat['facultyID'];   ?>><?php echo $cat['facultyName'];   ?></option>
	                    <?php endforeach; ?>
	                </select>
				</div>
			</div>
		</div>


		<div class="row">
			<div class="form-group">
				<div class="col-md-6 col-sm-6">
					
					<input type="text" name="coursename" id="demo-name" value="" placeholder="Course Name" required class="form-control required">
				</div>
			</div>
		</div>

		<div class="row">
			<div class="form-group">
				<div class="col-md-12">
					<label>Image</label>
					<div class="fancy-file-upload fancy-file-success">
						<i class="fa fa-upload"></i>
						<input type="file" class="form-control" name="image" onchange="jQuery(this).next('input').val(this.value);">
						<input type="text" class="form-control" placeholder="no file selected" readonly="">
						<span class="button">Choose File</span>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="form-group">
				<div class="col-md-12 col-sm-12">
					<label>Content/Description *</label>
					<textarea name="introtext" rows="4" id="editor" class="form-control  required" placeholder="Course content here..."></textarea>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="form-group">
				<div class="col-md-6 col-sm-6">
					
					<input type="text" name="duration" value="" class="form-control required" placeholder="Duration">
				</div>
				<div class="col-md-6 col-sm-6">
					
					<select name="durationtype" id="demo-category" class="form-control" required>
						<option value="">- Duration in -</option>
						<option value="1">Days</option>
						<option value="2">Weeks</option>
						<option value="3">Months</option>
						<option value="4">Years</option>
					</select>
				</div>
			</div>
		</div>


		<div class="row">
			<div class="form-group">
				<div class="col-md-6 col-sm-4">
					<input type="text" name="feekshs" id="demo-name" value="" placeholder="Fee in Kshs" class="form-control" required />
				</div>
				<div class="col-md-6 col-sm-4">
					<input type="text" name="feeusd" id="demo-name" value="" placeholder="Fee in USD" class="form-control" required />
				</div>
			</div>
		</div>

		<div class="row">
			<div class="form-group">
				<div class="col-md-6 col-sm-4">
					<textarea name="meta_keywords" class="form-control" placeholder="Keywords"></textarea>
				</div>
				<div class="col-md-6 col-sm-4">
					<textarea name="meta_desc" class="form-control" placeholder="Meta Description"></textarea>
				</div>
			</div>
		</div>									

	</fieldset>

	<div class="row">
		<div class="col-md-12">
			<button type="submit" class="btn btn-3d btn-teal btn-xlg btn-block margin-top-30">
				Add Course
			</button>
		</div>
	</div>
</form>
</div>
<script>
    ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .then( editor => {
                    console.log( editor );
            } )
            .catch( error => {
                    console.error( error );
            } );
</script>