EVOLUTION-NINJA

Edit File: syllabus.php

<?php echo view('includes/admin_header.php') ?>

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/jqgrid/css/ui.jqgrid.css'); ?>" />

<div class="content-wrapper">
	
	<section class="content-header">
		<h1 style="padding-bottom:10px;border-bottom:2px dashed #468662;margin-bottom:20px; font-weight: bold;">
			SYLLABUS
			<small></small>
		</h1>

</section>
	
	<section class="content">
	<a href="javascript:history.back()" class="btn btn-primary" style="float: right;">Back</a>

<button type="button" class="btn btn-primary btn-sm access_add_btn" data-toggle="modal" data-target="#myModal">
			Add Syllabus
		</button>

<div id="jaytab" style="margin-top:3%; margin-left:5%;" class="grid">
			<table id="list2"></table>
			<div id="pager2"></div>
			<div id="dialogSelectRow" title="Warning" style="display:none">
				<p>Please select row</p>
			</div>
		</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">Add Syllabus</h4>
					</div>
					<div class="modal-body">
						<form id="land_owner" class="form-inline syllabus_form" enctype="multipart/form-data">
							<input type="hidden" class="form-control col-sm-8" name="login_id" value="<?php echo session()->get('login_id'); ?>">
							<input type="hidden" class="form-control col-sm-8" name="user_type_id" value="<?php echo session()->get('user_type_id'); ?>">

<div class="form-group col-xs-12 col-sm-12 col-md-12 chapter_name">
									<label class="col-sm-3 col-xs-12">Chapter Name</label>
									<input type="text" class="form-control col-xs-10 col-sm-7" pattern="^[^\s]+.*$" Placeholder="Chapter Name" name="chapter_name[]" required="required">
									<div class="form-group col-xs-2 col-sm-2 col-md-2 add_field">
										<button type="button" class="btn btn-default center-block add_fields">Add</button>
									</div>
								</div>

</div>

<div class="row land_owner_a">
					<div class="col-sm-4 col-md-4"></div>
					<div class="col-sm-4 col-md-4">
						<div class="cato_but">
						<div class="row"></div>	
						<div class="col-sm-6">
						<button type="submit" class="btn btn-primary center-block submit submit_1">Submit</button>							
						</div>
					
						</div>
					</div>
					<div class="col-sm-4 col-md-4"></div>													
				</div>

</form>
					</div>

</div>
			</div>
		</div>

<div class="modal fade" id="edit_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">Update Syllabus</h4>
					</div>
					<div class="modal-body">
						<form id="land_owner" class="form-inline update_form" enctype="multipart/form-data">
							<input type="hidden" class="form-control col-sm-8" name="login_id" value="<?php echo session()->get('login_id'); ?>">
							<input type="hidden" class="form-control col-sm-8" name="user_type_id" value="<?php echo session()->get('user_type_id'); ?>">

<div class="form-group col-xs-12 col-sm-12 col-md-12 add_sub_category">
										<label class="col-sm-3 col-xs-12">Sub Category</label>
										<select class="form-control col-xs-10 col-sm-7 sub_category" name="sub_category" required>
											<option value="">Select</option>
											<?php foreach ($sub_domain as $value) { ?>
												<option value="<?php echo $value->sub_domain_id; ?>"><?php echo $value->sub_domain; ?></option>
												<?php } ?>?
										</select>
										<div class="form-group col-xs-2 col-sm-2 col-md-2 add_field">
											<button type="button" class="btn btn-default center-block add_edit_field">Add</button>
										</div>
									</div>

</div>

</div>

<div class="row land_owner_a">
									<div class="col-sm-4 col-md-4"></div>
									<div class="col-sm-4 col-md-4">
										<button type="submit" class="btn btn-primary center-block update">Update</button>
									</div>
									<div class="col-sm-4 col-md-4"></div>
								</div>

</form>
					</div>

</div>
			</div>
		</div>

</section>

</div>

CallGrid();
		function CallGrid(access_rights_global, access_result_global) {
			jQuery("#list2").jqGrid({

url: "<?php echo site_url('get_syllabus_list') ?>",
				mtype: "get",
				datatype: "json",
				colNames: ['ID', 'Sub domain id', 'Category', 'Subject'],
				colModel: [{
						name: 'syllabus_id',
						index: 'syllabus_id',
						width: 20,
						hidden: true,
						editable: false,
						key: true
					},
					{
						name: 'sub_domain_id',
						index: 'sub_domain_id',
						width: 40,
						hidden: true,
						editable: false
					},
					{
						name: 'domain_name',
						index: 'domain_name',
						editable: false,
						width: 450
					},
					{
						name: 'sub_domain',
						index: 'sub_domain',
						editable: false,
						width: 450
					},
				],

rowNum: 20,
				rowTotal: 2000,
				rowList: [20, 30],
				rownumbers: true,
				//rownumWidth: 60,
				pager: "#pager2",
				sortname: 'id',
				viewrecords: true,
				gridview: true,
				//autowidth: true,
				sortorder: "asc",
				shrinkToFit: true,
				loadonce: true,
				caption: "Syllabus List",

subGrid: true,

subGridRowExpanded: function(subgrid_id, row_id) {
					var sub_domain_id = $('#list2').jqGrid('getCell', row_id, 'sub_domain_id');
					var subgrid_table_id;
					subgrid_table_id = subgrid_id + "_t";
					jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");

// CallQuestionGrid(row_id);
					jQuery("#" + subgrid_table_id).jqGrid({
						url: "<?php echo site_url('get_subject_wise_syllabus_list'); ?>/" + sub_domain_id,
						datatype: "json",
						colNames: ['SI', 'Action', 'Chapter', 'Added By', 'Edited By', 'Added Date'],
						colModel: [{
								name: 'chapter_id',
								index: 'chapter_id',
								width: 50,
								hidden: true,
								editable: false,
								key: true
							},
							{
								name: '',
								index: '',
								search: false,
								width: 40,
								editable: false,
								formatter: function(cellvalue, options, rowObject) {
									var retVal = "";
									var retVal = '<a data-toggle="tooltip" title="Edit" class="edit" onclick="fun_edit(' + rowObject.chapter_id + ',' + rowObject.syllabus_id + ')" material_id="' + rowObject.chapter_id + '" href="javascript:void(0);"><span class="glyphicon glyphicon-edit"></span></a> <a data-toggle="tooltip" title="Delete" class="delete" onclick="fun_del(' + rowObject.chapter_id + ')"; class="delete' + rowObject.chapter_id + '" href="javascript:void(0);"><span class="glyphicon glyphicon-trash"></span></a>';
									return retVal;
								}
							},
							{
								name: "chapter_names",
								index: "chapter_names",
								width: 150
							},
							{
								name: "username",
								index: "username",
								width: 65
							},
							{
								name: "updated_by",
								index: "updated_by",
								width: 65
							},
							{
								name: "created_at",
								index: "created_at",
								width: 60
							},
						],
						height: 'auto',
						autowidth: true,
						shrinkToFit: true,
						rowNum: 2000,
						sortname: 'num',
						sortorder: "asc",
						//   loadonce: true,

}).navGrid('#' + subgrid_table_id + '', {
						edit: false,
						add: false,
						del: false,
						search: false
					});
				}

});
			$("#list2").jqGrid("setLabel", "rn", "SL");
			$("#list2").jqGrid('filterToolbar', {
				searchOperators: false,
				stringResult: true,
				searchOnEnter: false,
				defaultSearch: "cn"
			}); //for multisearch code,remove if not required

$("#list2").jqGrid('navGrid', '#pager2', {
					edit: false,
					add: false,
					del: false,
					search: false,
					refreshstate: "current"
				}, {}, {}, {}, {
					sopt: ['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
					closeOnEscape: true,
					multipleSearch: true,
					closeAfterSearch: true,
					closeAfterDelete: true,
					closeAfterEdit: true
				},
			);
		}

$('.add_fields').click(function(e) {

$('.multiple_fields').append('<div class="row land_owner_a chapter_name"><div class="form-group col-xs-12 col-sm-12 col-md-12"><label class="col-xs-12 col-sm-3">Chapter Name</label><input type="text" class="form-control col-xs-10 col-sm-7" pattern="^[^\s]+.*$" name="chapter_name[]" required="required" placeholder="Chapter Name"><div class="form-group col-xs-2 col-sm-2 col-md-2 remove_field"><a href="javascript:void(0);" class="remove_fields"><span class="glyphicon glyphicon-remove"></span></a></div></div></div>');

$(".remove_fields").click(function() {
				$(this).closest('.row').remove();
			});
		});

$('.syllabus_form').submit(function(e) {
			e.preventDefault();

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

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

$.ajax({

type: 'post',
				url: '<?php echo site_url("add_syllabus") ?>',
				data: formdata,
				contentType: false,
				processData: false,

success: function(response) {
					//   response=jQuery.parseJSON(response);
					console.log(response);

if (response.result == 1) {
						$("#myModal").modal("hide");
						$(".multiple_fields").empty();
						toastr["success"](response.message);
						$('.syllabus_form')[0].reset();
						$(".submit").text("Submit");
						$(".submit").removeAttr('disabled');
						$("#list2").setGridParam({
							datatype: 'json',
							page: 1
						}).trigger('reloadGrid');
					} else {
						$('.syllabus_form')[0].reset();
						toastr["error"](response.message);
						$(".submit").text("Submit");
						$(".submit").removeAttr('disabled');
					}
				}
			});
		});

$('.update_form').submit(function(e) {
			e.preventDefault();

var chapter_name = $(".edit_multiple_fields").text();
			var chapter_fields_val = $(".chapter_names").text();
			if (chapter_name != '' || chapter_fields_val != '')

{
				formdata = new FormData($(this)[0]);
				$(".update").attr('disabled', 'disabled');
				$(".update").text("Updating...");

$.ajax({
					type: 'post',
					url: '<?php echo site_url("update_syllabus") ?>',
					data: formdata,
					contentType: false,
					processData: false,

success: function(response) {
						// response = jQuery.parseJSON(response);
						console.log(response);

if (response.result == 1) {
							$("#edit_modal").modal("hide");
							toastr["success"](response.message);
							$('.update_form')[0].reset();
							$(".update").text("Submit");
							$(".update").removeAttr('disabled');
							$("#list2").setGridParam({
								datatype: 'json',
								page: 1
							}).trigger('reloadGrid');
						} else {
							toastr["error"](response.message);
							$(".update").text("Update");
							$(".update").removeAttr('disabled');
						}
					}
				});
			} else {
				toastr["error"]('Please enter the chapter name');
			}
		});
	});

function fun_edit(id, syllabus_id) {
		$('.edit_multiple_fields').empty();

var type = "post";
		$(".chapter_id").val(id);
		$(".syllabus_id").val(syllabus_id);
		$.ajax({
			type: type,
			url: "<?php echo site_url('edit_syllabus_details'); ?>",
			data: {
				'id': id
			},
			success: function(response) {
				// response = jQuery.parseJSON(response);
				console.log(response);
				if (response.result == 1) {
					$(".sub_category").val(response.message.syllabus.sub_domain_id);
					var chapter = "";
					var i = 0;

chapter += '<div class="form-group col-xs-12 col-sm-12 col-md-12 chapter" style="margin-top:1%">';
					chapter += '<label class="col-sm-3 col-xs-12">Chapter Name</label>';
					chapter += '<input type="text" class="form-control col-xs-10 col-sm-7" pattern="^[^\\s]+.*$" Placeholder="Chapter Name" name="chapter_name[]" value="' + response.message.syllabus.chapter_name + '" required="required" pattern="^[^\s]+.*$">';
					chapter += '</div>';
					chapter += '</div>';

$('.chapter_names').html(chapter);
					$(".remove_fields").click(function() {
						$(this).closest('.chapter').remove();
						var id = $(this).attr('id');
						swal({
								title: "Are you sure?",
								text: "You will not be able to recover this chapter !",
								type: "warning",
								showCancelButton: true,
								confirmButtonColor: "#DD6B55",
								confirmButtonText: "Yes, delete it!",
								cancelButtonText: "No, cancel plz!",
								closeOnConfirm: false,
								closeOnCancel: false
							},
							function(isConfirm) {

if (isConfirm) {

$(".sweet-alert").hide();
									$(".sweet-overlay").hide();
									$.ajax({
										type: type,
										url: "<?php echo site_url('delete_chapter'); ?>",
										data: {
											'id': id
										},
										success: function(response) {
											// response = jQuery.parseJSON(response);
											console.log(response);
											if (response.result == 1) {}
										}
									});

} else {
									$(".sweet-alert").hide();
									$(".sweet-overlay").hide();
								}
							});
					});

$("#edit_modal").modal('show');
				} else {
					toastr["error"](response.message);
				}
			}
		});
	}

function fun_del(id) {
		var type = "post";

$.ajax({
			type: type,
			url: "<?php echo site_url('check_material_training'); ?>",
			data: {
				'id': id
			},
			success: function(response) {
				// response = jQuery.parseJSON(response);
				console.log(response);
				if (response.result == 1) {

swal({
							title: "Are you sure?",
							text: "You will not be able to recover this chapter !",
							type: "warning",
							showCancelButton: true,
							confirmButtonColor: "#DD6B55",
							confirmButtonText: "Yes, delete it!",
							cancelButtonText: "No, cancel plz!",
							closeOnConfirm: false,
							closeOnCancel: false
						},
						function(isConfirm) {

if (isConfirm) {

$(".sweet-alert").hide();
								$(".sweet-overlay").hide();
								$.ajax({
									type: type,
									url: "<?php echo site_url('delete_syllabus'); ?>",
									data: {
										'id': id
									},
									success: function(response) {
										response = jQuery.parseJSON(response);
										console.log(response);
										if (response.result == 1) {

toastr["success"](response.message);
											$("#list2").setGridParam({
												datatype: 'json',
												page: 1
											}).trigger('reloadGrid');
										}
									}
								});

} else {
								$(".sweet-alert").hide();
								$(".sweet-overlay").hide();
							}
						});
				} else {
					// toastr["error"](response.message);
					swal({

title: "Are you sure?",
							text: "Do you want to delete material is added to this chapter!",
							type: "warning",
							showCancelButton: true,
							confirmButtonColor: "#DD6B55",
							confirmButtonText: "Yes, delete it!",
							cancelButtonText: "No, cancel plz!",
							closeOnConfirm: false,
							closeOnCancel: false
						},
						function(isConfirm) {

if (isConfirm) {

toastr["success"](response.message);
											swal(response.message);
											$("#list2").setGridParam({
												datatype: 'json',
												page: 1
											}).trigger('reloadGrid');
										}

}
								});

} else {
								$(".sweet-alert").hide();
								$(".sweet-overlay").hide();
							}
						});
				}
			}
		});
	}

$('.add_edit_field').click(function(e) {

$('.edit_multiple_fields').append('<div class="row land_owner_a chapter_name"><div class="form-group col-xs-12 col-sm-12 col-md-12"><label class="col-sm-3 col-xs-12">Chapter Name</label><input type="text" class="form-control col-xs-10 col-sm-7 chapter_fields" name="chapter_name[]" required="required" placeholder="Chapter Name"><div class="form-group col-xs-2 col-sm-2 col-md-2 remove_edit_fields"><a href="javascript:void(0);" class="remove_fields"><span class="glyphicon glyphicon-remove"></span></a></div></div></div>');

$(".remove_fields").click(function() {
			$(this).closest('.row').remove();
		});
	});

const cancelButton = document.getElementById("cancel");

// Add a click event listener to the cancel button
cancelButton.addEventListener("click", function() {
  // Clear the form data
  document.forms[0].reset();
});

</script>

<?php echo view('includes/admin_footer.php') ?>
<style>
	#FrmGrid_list2 {
		width: 100% !important;
	}

.ui-jqdialog .ui-jqdialog-titlebar {
		height: 29px !important;
		background-color: #001a00;
		color: white;
		padding-left: 10px;
	}

.fm-button {
		height: 21px !important;
		padding: 1px;
		margin-right: 10px !important;
		height: 21px !important;
		width: 43%;
		margin-top: -7px !important;
	}

.ui-jqdialog-content td.navButton {
		padding-top: 12px !important;
	}

.ui-jqgrid .ui-jqgrid-titlebar {
		height: 27px !important;
		color: white !important;
	}

.ui-jqgrid-bdiv {
		height: auto !important;

}

.ui-widget-overlay {
		z-index: 0 !important;
	}

.ui-jqgrid-hdiv ui-state-default {
		cursor: default !important
	}

ui-state-highlight,
	.ui-widget-content .ui-state-highlight,
	.ui-widget-header .ui-state-highlight {
		border: 1px solid #fed22f;
		background: #ffe45c;
	}

.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default {
		font-weight: bold;
		color: black;
	}

#jaytab {
		width: auto !important;
		/* overflow-x: scroll !important; */
	}

.form-control {
		border-radius: 5px;
	}

@media only screen and (min-width:320px) and (max-width:640px) {
		#jaytab {
			width: auto !important;
			overflow-x: scroll !important;
		}

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
			width: 900px !important;
		}

.ui-jqgrid-view {
			width: 900px !important;
		}

.ui-jqgrid-hdiv {
			width: 900px !important;
		}

.ui-jqgrid-htable {
			width: 900px !important;
		}

.ui-jqgrid-bdiv {
			width: 900px !important;
		}

#list2 {
			width: 900px !important;
		}

#pager2 {
			width: 900px !important;
		}
	}

@media only screen and (min-width:641px) and (max-width:991px) {
		#jaytab {
			width: auto !important;
			overflow-x: scroll !important;
		}

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
			width: 900px !important;
		}

.ui-jqgrid-view {
			width: 900px !important;
		}

.ui-jqgrid-hdiv {
			width: 900px !important;
		}

.ui-jqgrid-htable {
			width: 900px !important;
		}

.ui-jqgrid-bdiv {
			width: 900px !important;
		}

#list2 {
			width: 900px !important;
		}

#pager2 {
			width: 900px !important;
		}
	}
</style>

.content-wrapper{
		background-image: url(public/assets/website_assets/images/banner.png);
		background-size:cover;
	}

.chapter input,
	.chapter_name input,
	.add_sub_category select {
		width: 55% !important;
	}

.edit_remove {
		margin-left: 3%;
		margin-top: 3%;
	}

.remove_edit_fields {
		margin-left: 18px;
		margin-top: 3%;
	}
	.remove_field {
		margin-left: 3%;
	}

.chapter_name {
		margin-top: 1%;
	}

@media only screen and (min-width:320px) and (max-width:640px) {

.chapter input,
		.chapter_name input,
		.add_sub_category select {
			width: 75% !important;
		}
	}
</style>