<style>
form label.error, #secNameerr {
	color : red;
}
</style>
<main class="wraper responsive-width" id="main">

	<!----admin template section---->
	<div class="admin_tempblock">
		<div class="admin_tempsec">
			<div class="admin_sec">

				<form action="<?php echo base_url() ?>admin/ae-section/<?php echo $id ?>"  method="post" id="sectionForm">

					<?php if($id == 0) {?>


						<div class="subsec_sec">
							<div class="subject_l subject_l_full_width">
								<div class="subject_lsec">
									<div class="subject_lhead"><?php echo $title ?></div>
									<div class="subject_lformarea">
										<div class="form-group">
											<label for="">Section Name<span class="text-danger font-weight-bold">*</span></label>

											<input type="text" name="section_name" class="form-control" placeholder="Name of the section">
											<label id="secNameerr" style="display : none"></label>
										</div>

										<div class="form-group">
											<label for="">Status<span class="text-danger font-weight-bold">*</span></label>
											<select name="is_active" class="form-control">
												<option selected disable value="">Choose section status</option>
												<option value="yes">Yes</option>
												<option value="no">No</option>
											</select>
										</div>

										<input type="submit" class="subject_addbtn" value="Save">
										<a href="<?= base_url(); ?>admin/section"><button type="button" class="subject_addbtn bg-dark ml-2">Back</button></a>
									</div>
								</div>
							</div>

						</div>
					</form>

				<?php } else { ?>

					<div class="subsec_sec">
						<div class="subject_l subject_l_full_width">
							<div class="subject_lsec">
								<div class="subject_lhead"><?php echo $title ?></div>
								<div class="subject_lformarea">
									<div class="form-group">
										<label for="">Section <span class="text-danger font-weight-bold">*</span></label>
										<input type="text" name="section_name" value="<?php echo $result['section_name'] ?>" class="form-control" placeholder="Name of the section">
										<label id="secNameerr" style="display : none"></label>
									</div>


									<div class="form-group">
										<label for="">Status<span class="text-danger font-weight-bold">*</span></label>
										<select name="is_active" class="form-control">
											<option selected value="<?php echo $result['is_active'] ?>"><?php echo $result['is_active'] ?></option>
											<?php if($result['is_active'] == 'yes') { ?>
												<option value="no">no</option>
											<?php } else {?>
												<option value="yes">yes</option>
											<?php } ?>
										</select>
									</div>

									<input type="submit" class="subject_addbtn" value="Update">
									<a href="<?= base_url(); ?>admin/section"><button type="button" class="subject_addbtn bg-dark ml-2">Back</button></a>
								</div>
							</div>
						</div>

					</div>
				</form>

			<?php } ?>
		</div>
	</div>
</div>
<!----admin template section end---->
</main>
<!--End right-top side-->


<script>
	$(document).on('keypress', function(e){
		if(e.which==13)
		{
			$('form').submit();
		}
	});
	$(document).ready(function(){
		let url = window.location.pathname.split( '/' );
		

		let sectionId = url[4];

		jQuery.validator.addMethod("alphanumeric", function(value, element) {
			return this.optional(element) || /^[a-z0-9\-\s]+$/i.test(value);
		}, "Please enter alphanumeric Characters only");


		$("#sectionForm").validate({

			rules: {
				section_name: {
					required: true,
					minlength: 1,
					alphanumeric : true
				},
				is_active : "required"
			},
			messages: {

				section_name: {
					required: "Please provide a section name",
					minlength : "Please enter more than 4 Characters"
				},
				is_active :  'Please select the status of section'

			},
			submitHandler: function(form) {

				var inputValue = $("input[name='section_name']",form).val();
				inputValue = inputValue.toLowerCase();

				let flag = false;
				
				$.ajax({
					url : '<?php echo base_url() ?>' + 'admin/validateSectionName',
					data : {
						value : inputValue,
						id : <?php echo $id ?>
					},
					type : 'POST',
					async : false,
					success: function(data){
						console.log(data);
						if(data == 'success'){
							flag = true
						}

					}
				});


				if(flag) {
					form.submit();
				} else {
					$('#secNameerr').show();
					$('#secNameerr').text('This section name already exists.');
				}
				

			}
		});

	});
</script>