EVOLUTION-NINJA

Edit File: add_new_course_admin.php

<?php echo view('includes/admin_header.php') ?>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('public/assets/website_assets/css/timepicki.css'); ?>" />
<link href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('public/assets/sumoselect/sumoselect.css'); ?>" />

</head> -->

<body>

<section class="add_course">
		<div class="container ">
			<h3 style="padding-bottom:10px;border-bottom:2px dashed #468662;margin-bottom:20px; font-weight: bold;">ADD CHAPTER</h3>
			<a href="javascript:history.back()" class="btn btn-primary" style="float: right;">Back</a>
			<br>
			<br>
			<form class="form-horizontal" id="course_form">

<input type="hidden" class="form-control col-sm-8" name="login_id" value="<?php echo session()->get('login_id') ?>">

<div class="form-group">
					<label class="col-sm-3">Add Category</label>
					<div class="col-sm-3">
						
						<select class="form-control" id="catagory" name="domain_id" required>
							<option value="">Select</option>
							<?php
							foreach ($categories as $key => $value) {
							?>
								<option value="<?php echo $value->domain_id; ?>"><?php echo $value->domain_name; ?></option>
							<?php
							}
							?>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3">Add Sub Category</label>
					<div class="col-sm-3">
						
						<select class="form-control sub_cate_div" name="sub_domain_id" required>

</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3">Course Title</label>
					<div class="col-sm-3">
						<select class="form-control course_title" name="course_title" required>
						</select>
					</div>
				</div>

<div class="form-group ">
					<label class="col-sm-3">Chapter Name</label>
					<div class="col-sm-3">
						<input type="text" class="form-control" name="chapter_name0[]" required>
					</div>

<div class="form-inline">
						<label class="col-sm-2">Duration (in hrs)</label>
						<div class="col-sm-2">
							<input type="text" class="form-control timepicker1" name="session_time0[]" required>
						</div>
						<div class="col-sm-2">
							<button type="button" class="btn btn-success btn-dgreen add-topic" number="0" style="margin-left:25px;">ADD MORE TOPIC</button>
						</div>
					</div>
				</div>

<div class="form-group">
					<label class="col-sm-3">Topic</label>
					<div class="col-sm-3">

<div class="form-group">
					<button type="button" class="btn btn-success btn-dgreen add-chapter">ADD CHAPTER</button>
				</div>
				<div class="form-group">
					<div class="col-sm-6" style="text-align:center; margin-left: 20%;">
						<button type="submit" class="btn btn-success btn-dgreen submit">Submit</button>
					</div>
				</div>
			</form>

</div>
	</section>

</body>

</html>

</style>

$(".global_variable").val(global_variable);

$('.timepicker1').timepicki({
		start_time: ["00", "00"],
		show_meridian: false
	});

$(".add-chapter").click(function() {

var content = '';
		content += '<div class="chapter_div_' + global_chapter + '">';
		content += '<div class="row form-group">';
		content += '<div class="col-sm-3">';
		content += '<label>Chapter Name</label>';
		content += '</div>';
		content += '<div class="col-sm-3">';
		content += '<input type="text" class="form-control" name="chapter_name' + global_chapter + '[]" required>';
		content += '</div>';
		content += '<div class="form-inline">';
		content += '<label class="col-sm-2">Duration (in hrs)</label>';
		content += '<div class="col-sm-2">';
		content += '<input type="text" class="form-control timepicker1" name="session_time' + global_chapter + '[]" required>';
		content += '</div>';
		content += '<div class="col-sm-2">';
		content += '<button type="button" id="topic_id_' + global_chapter + '" number="' + global_chapter + '" class="btn btn-success btn-dgreen add-topic" style="margin-left:25px;">ADD MORE TOPIC</button>';
		content += '<a href="javascript:void(0);" number="' + global_chapter + '" class="remove_chapter"><span style="margin-left:10px;" class="glyphicon glyphicon-remove"></span></a>';
		content += '</div>';
		content += '</div>';
		content += '</div>';
		content += '<div class="row form-group">';
		content += '<div class="col-sm-3">';
		content += '<label>Topic</label>';
		content += '</div>';
		content += '<div class="col-sm-3">';
		content += '<input type="text" class="form-control" name="topic' + global_chapter + '[]" required>';
		content += '</div>';
		content += '</div>';
		content += '<hr style="border-top: 1px dashed #e48d86ed;">';
		content += '<div id="chapter_topic_div_' + global_chapter + '"></div>';
		
		content += '</div>';

global_chapter++;

$(".multiple_chapter_div").append(content);
		$(".multiple_chapter_div").css('padding', '20px 0px');
		$('.timepicker1').timepicki({
			start_time: ["00", "00"],
			show_meridian: false
		});

$(".remove_fields").click(function() {
			$(this).closest('.amp1').remove();
			$(".multiple_chapter_div").css('padding', '0px');
		});

global_variable++;
		$(".global_variable").val(global_variable);
	});

$(document).on('click', '.add-topic', function() {

var number = $(this).attr('number');

var content = '';

content += '<div class="topic_div_' + global_chapter + '">';
		content += '<div class="row form-group">';

content += '<div class="col-sm-3">';
		content += '<label>Topic</label>';
		content += '</div>';
		content += '<div class="col-sm-3">';
		content += '<input type="text" class="form-control" name="topic' + number + '[]" required>';
		content += '</div>';
		content += '<div class="col-sm-3">';
		content += '<a href="javascript:void(0);" number="' + global_chapter + '" class="remove_fields"><span style="margin-left:10px;" class="glyphicon glyphicon-remove"></span></a>';
		content += '</div>';
		content += '</div>';
		content += '<div class="row form-group">';
		content += '</div>';
		content += '<hr style="border-top: 1px dashed #e48d86ed;">';
		content += '</div>';

$("#chapter_topic_div_" + number).append(content);
	});

$(document).on('click', '.remove_fields', function() {

var number = $(this).attr('number');
		$(this).closest('.topic_div_' + number).remove();

});

$(document).on('click', '.remove_chapter', function() {

var number = $(this).attr('number');
		$(this).closest('.chapter_div_' + number).remove();
		global_variable--;
		$(".global_variable").val(global_variable);
	});

// This section handles changes in the "Add Category" dropdown
	var global_chapter = 1;
	var global_variable = 0;
	// Trigger the change event on the sub-category dropdown to populate course titles
	$('#catagory').closest('.form-group').next().find('select.sub_cate_div').trigger('change');

// This section handles changes in the "Add Category" dropdown
	$("#catagory").change(function() {
		var domain_id = $(this).val();

// Send an AJAX request to fetch sub-categories based on the selected category
		$.ajax({
			url: "<?php echo site_url('get_sub_domain') ?>",
			type: "POST",
			data: {
				'domain_id': domain_id
			},
			async: true,
			dataType: "json",
			success: function(response) {
				if (response.result == 1) {
					var content = '<option value="">Select</option>';
					$.each(response.message, function(idx, vx) {
						content += '<option value="' + vx.sub_domain_id + '">' + vx.sub_domain + '</option>';
					});

// Update the sub-category dropdown
					$('#catagory').closest('.form-group').next().find('select').html(content);

// Trigger the change event on the sub-category dropdown to populate course titles
					$('#catagory').closest('.form-group').next().find('select').trigger('change');
				} else {
					// Handle the case where no sub-categories are found
					$('#catagory').closest('.form-group').next().find('select').html('<option value="">Select</option>');
				}
			}
		});
	});

$(document).on('change', '.sub_cate_div', function() {
		// Send an AJAX request to fetch course titles based on the selected sub-category
		var domain_id = $("#catagory").val();
		var sub_domain_id = $(this).val();

$.ajax({
			url: "<?= base_url('get_sub_domain_courses') ?>",
			type: "POST",
			data: {
				'domain_id': domain_id,
				'sub_domain_id': sub_domain_id
			},
			dataType: "json",
			success: function(response) {
				console.log(response);
				if (response.result === 1) {
					var content = '<option value="">Select</option>';
					$.each(response.data, function(idx, vx) {
						content += '<option value="' + vx.course_id + '">' + vx.course_title + '</option>';
					});

// Update the course title dropdown
					$('.course_title').html(content);
				} else {
					// Handle the case where no course titles are found
					$('.course_title').html('<option value="">Select</option>');
				}
			},
			error: function(xhr, textStatus, errorThrown) {
				console.error("AJAX Error:", textStatus, errorThrown);
			}
		});
	});

// Handle form submission
	$('#course_form').submit(function(e) {
		e.preventDefault();

var formdata = new FormData($(this)[0]);

$(".submit").attr('disabled', 'disabled');
		$(".submit").text("Submitting...");

$.ajax({
			type: 'post',
			url: '<?php echo site_url("add_new_course") ?>',
			data: formdata,
			contentType: false,
			processData: false,
			success: function(response) {
				response = jQuery.parseJSON(response);
				console.log(response);

if (response.result == 1) {
					toastr["success"](response.message);
					$('#course_form')[0].reset();
					$(".submit").text("Submit");
					$(".submit").removeAttr('disabled');
				} else if (response.result == 2) {
					toastr["error"](response.message);
					$(".submit").text("Submit");
					$(".submit").removeAttr('disabled');
				} else {
					toastr["error"](response.message);
					$(".submit").text("Submit");
					$(".submit").removeAttr('disabled');
				}
			}
		});
	});

</script>
<style>
	.container {
		width: 85%;
		margin-left: 245px;
	}

.form-control {
		border-radius: 5px;
	}
</style>
<?php echo  view('includes/admin_footer.php') ?>