GCC_Officer_Portal/target/classes/templates/modules/school/studentdetails.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="~{fragments/modules/base/head :: head}"></head>
<style>
	body {
		background-color: #f8f9fa;
		/*  font-family: Arial, sans-serif;*/
	}



	.header {
		font-size: 22px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.table {
		border: 1px solid #dee2e6;
	}

	.table th,
	.table td {
		border: 1px solid #dee2e6;
		padding: 10px;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-top: 20px;
		border-bottom: 2px solid #007bff;
		padding-bottom: 5px;
	}

	.form-group {
		margin-top: 15px;
	}

	.radio-group {
		display: flex;
		gap: 20px;
		margin-top: 10px;
	}

	.info-table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
	}

	.info-table td,
	.info-table th {
		border: 1px solid #ddd;
		padding: 10px;
		vertical-align: middle;
	}

	.info-table td:first-child {
		font-weight: bold;
		width: 50%;
	}

	.info-table td:last-child {
		color: #555;
	}

	.btn-gap {
		margin-left: 1rem;
		/* or any value you like */
	}
</style>

<body>
	<div class="wrapper">
		<header th:replace="~{fragments/modules/base/header :: header}"></header>
		<div class="page-wrap">
			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
			<div class="card">
				<div class="main-content" style="background-color: white;">
					<!--  <div class="container">

						
						<div>
							 <div style="padding: 0px;margin-top:-58px;margin-left: -233px;width:120%;">
	





							
								<div class="row" style="    padding: 15px;">
									<div class="col-md-6 form-group">
										<label>Total No of Students <span class="text-danger">*</span></label>
										<input type="text" class="form-control" placeholder="Enter the value"
											id="total_students" required />
									</div>
									

								</div>
								<div class="row" style="    padding: 15px;">

									<div class="col-md-4 form-group">
										<label>No of Boys <span class="text-danger">*</span></label>
										<input type="text" class="form-control" placeholder="Enter the value"
											id="total_boys" required />
									</div>
									<div class="col-md-4 form-group">
										<label>No of Girls <span class="text-danger">*</span></label>
										<input type="text" class="form-control" placeholder="Enter the value"
											id="total_girls" required />
									</div>
									<div class="col-md-4 form-group">
										<label>Others <span class="text-danger">*</span></label>
										<input type="text" class="form-control" placeholder="Enter the value"
											id="others" required />
									</div>
								</div>



								<div class="card-footer text-center" >
									<button type="submit" class="btn btn-primary" id="StudentSubmitBtn"><i
											class="ik ik-save"></i>Submit
									</button>
									<button type="reset" class="btn btn-secondary mr-2" id="StudentresetButton"><i
											class="ik ik-refresh-cw"></i>Reset
									</button>

								</div>
							</div>-->
							<div style="padding: 0px;margin-top:-58px;margin-left: -186px;width:120%;">
						<div class="card-header d-flex justify-content-between align-items-center">
							<b>Student Details</b>

						</div>

						<!-- Read-only View -->
						<div id="studentReadOnlyView" style="display: none;">
							<table class="info-table">
								<tr>
									<td>Total No of Students</td>
									<td id="readonly_total_students">-</td>
								</tr>
								<tr>
									<td>No of Boys</td>
									<td id="readonly_total_boys">-</td>
								</tr>
								<tr>
									<td>No of Girls</td>
									<td id="readonly_total_girls">-</td>
								</tr>
								<tr>
									<td>Transgender</td>
									<td id="readonly_others">-</td>
								</tr>
							</table>
							<br>
							<div class=" text-center">
								<button type="button" class="btn btn-primary" id="processupdate"
									style="display:none;">Update</button>

							</div>
						</div>

						<!-- Editable Form -->
						<div id="studentEntryForm" style="display: none;">
							<div class="row p-3">
								<div class="col-md-6 form-group">
									<label>Total No of Student <span class="text-danger">*</span></label>
									<input type="text" class="form-control" id="total_students" required />
								</div>
							</div>
							<div class="row p-3">
								<div class="col-md-4 form-group">
									<label>No of Boys <span class="text-danger">*</span></label>
									<input type="text" class="form-control" id="total_boys" required />
								</div>
								<div class="col-md-4 form-group">
									<label>No of Girls <span class="text-danger">*</span></label>
									<input type="text" class="form-control" id="total_girls" required />
								</div>
								<div class="col-md-4 form-group">
									<label>Transgender <span class="text-danger">*</span></label>
									<input type="text" class="form-control" id="others" required />
								</div>
							</div>
							<div class="card-footer text-center">
								<button type="submit" class="btn btn-primary" id="StudentSubmitBtn"><i
										class="ik ik-save"></i> Submit</button>
								<button type="reset" class="btn btn-secondary" id="StudentresetButton"><i
										class="ik ik-refresh-cw"></i> Reset</button>
							</div>
						</div>

						<!-- Modal for Update -->
						<div class="modal fade" id="studentUpdateModal" tabindex="-1">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title">Update Student Details</h5>
										<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body">
										<div class="form-group"><label>Total Students *</label><input
												id="modal_total_students" class="form-control"></div>
										<div class="form-group"><label>No of Boys *</label><input id="modal_total_boys"
												class="form-control"></div>
										<div class="form-group"><label>No of Girls *</label><input
												id="modal_total_girls" class="form-control"></div>
										<div class="form-group"><label>Transgender *</label><input id="modal_others"
												class="form-control"></div>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-primary" id="saveModalUpdate">Save
											Changes</button>
										<button type="button" class="btn btn-secondary"
											data-bs-dismiss="modal">Close</button>
									</div>
								</div>
							</div>
						</div>
					</div>


					<div id="pageLoader"
						style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
						<div style="position: relative; top: 50%; transform: translateY(-50%);">
							<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
								<span class="sr-only">Loading...</span>
							</div>
							<!-- Add the 'Please wait' text below the spinner -->
							<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
						</div>
					</div>

				</div>

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

	<script th:replace="~{fragments/modules/base/script :: script}"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
	<script type="text/javascript">

		$(document).ready(function () {
			const urlParams = new URLSearchParams(window.location.search);
			const schoolId = urlParams.get("schoolId");





			document.getElementById('total_students').addEventListener('input', function () {
				this.value = this.value.replace(/[^0-9]/g, '');
				if (parseInt(this.value) < 0) {
					this.value = '';
				}
			});

			document.getElementById('total_boys').addEventListener('input', function () {
				this.value = this.value.replace(/[^0-9]/g, '');
				if (parseInt(this.value) < 0) {
					this.value = '';
				}
			});

			document.getElementById('total_girls').addEventListener('input', function () {
				this.value = this.value.replace(/[^0-9]/g, '');
				if (parseInt(this.value) < 0) {
					this.value = '';
				}
			});

			document.getElementById('others').addEventListener('input', function () {
				this.value = this.value.replace(/[^0-9]/g, '');
				if (parseInt(this.value) < 0) {
					this.value = '';
				}
			});
			document.getElementById('modal_total_students').addEventListener('input', function () {
				this.value = this.value.replace(/[^0-9]/g, '');
				if (parseInt(this.value) < 0) {
					this.value = '';
				}
			});

			document.getElementById('modal_total_boys').addEventListener('input', function () {
				this.value = this.value.replace(/[^0-9]/g, '');
				if (parseInt(this.value) < 0) {
					this.value = '';
				}
			});

			document.getElementById('modal_total_girls').addEventListener('input', function () {
				this.value = this.value.replace(/[^0-9]/g, '');
				if (parseInt(this.value) < 0) {
					this.value = '';
				}
			});

			document.getElementById('modal_others').addEventListener('input', function () {
				this.value = this.value.replace(/[^0-9]/g, '');
				if (parseInt(this.value) < 0) {
					this.value = '';
				}
			});

			/* $.ajax({
						url: '/gcc/api/gccschool/buildingasset/getStudentStrengthBySchoolId',
						type: 'GET',
						data: {schoolId},
						success: function (response) {
							console.log(response);
						 if (response.status === 'OK') {
								if(response.studentStrength.length > 0){
										  const data = response.studentStrength[0]; // Get the first object from the array
			
										  // Show the update button (assuming it's an ID, use #)
										  $('#processupdate').show();
									//$('.card-footer').hide();
									 $('#StudentSubmitBtn').hide();
									 $('#StudentresetButton').hide();
									   $('#refreshButton').show();
										  
										  // Populate values into the respective HTML elements
										  $('#total_students').val(data.total_students || 0);
										  $('#total_boys').val(data.total_boys || 0);
										  $('#total_girls').val(data.total_girls || 0);
										  $('#others').val(data.others || 0);
									}else
									{
										// Optional: handle the case where studentStrength is empty
										$('#total_students').text('');
										$('#total_boys').text('');
										$('#total_girls').text('');
										$('#others').text('');
										$('#processupdate').hide(); // hide update button if no data
								    
								}
						}
						   else if(response.status==='NEW'){
					   
							   $('#processupdate').hide();
							 $('#refreshButton').hide();
							 $('.card-footer').show();
				   }
						}
			 });*/
			$.ajax({
				url: '/gcc/api/gccschool/buildingasset/getStudentStrengthBySchoolId',
				type: 'GET',
				data: {schoolId},
				success: function (response) {
					if (response.status === 'OK' && response.studentStrength.length > 0) {
						const data = response.studentStrength[0];
						$('#readonly_total_students').text(data.total_students || 0);
						$('#readonly_total_boys').text(data.total_boys || 0);
						$('#readonly_total_girls').text(data.total_girls || 0);
						$('#readonly_others').text(data.others || 0);

						$('#studentReadOnlyView').show();
						$('#studentEntryForm').hide();
						$('#processupdate').show();
						$('#refreshButton').show();
					} else {
						$('#studentReadOnlyView').hide();
						$('#studentEntryForm').show();
						$('.card-footer').show();
						$('#processupdate').hide();
						$('#refreshButton').hide();
					}
				}
			});

			$('#processupdate').on('click', function () {
				$('#modal_total_students').val($('#readonly_total_students').text());
				$('#modal_total_boys').val($('#readonly_total_boys').text());
				$('#modal_total_girls').val($('#readonly_total_girls').text());
				$('#modal_others').val($('#readonly_others').text());
				$('#studentUpdateModal').modal('show');
			});

			$('#saveModalUpdate').on('click', function () {
				let requestData = {
					total_students: parseInt($('#modal_total_students').val()) || 0,
					total_boys: parseInt($('#modal_total_boys').val()) || 0,
					total_girls: parseInt($('#modal_total_girls').val()) || 0,
					others: parseInt($('#modal_others').val()) || 0,
					school_id: schoolId
				};
				if (!$('#modal_total_students').val().trim()) {
					Swal.fire({
						icon: 'warning',
						title: 'Validation Error',
						text: 'Please enter Total No of Students.',
						allowOutsideClick: false,
						allowEscapeKey: false,
						allowEnterKey: false,
						showConfirmButton: true
					});
					return;
				}

				if (!$('#modal_total_boys').val().trim()) {
					Swal.fire({
						icon: 'warning',
						title: 'Validation Error',
						text: 'Please enter No of Boys.',
						allowOutsideClick: false,
						allowEscapeKey: false,
						allowEnterKey: false,
						showConfirmButton: true
					});
					return;
				}

				if (!$('#modal_total_girls').val().trim()) {
					Swal.fire({
						icon: 'warning',
						title: 'Validation Error',
						text: 'Please enter No of Girls.',
						allowOutsideClick: false,
						allowEscapeKey: false,
						allowEnterKey: false,
						showConfirmButton: true
					});
					return;
				}

				if (!$('#modal_others').val().trim()) {
					Swal.fire({
						icon: 'warning',
						title: 'Validation Error',
						text: 'Please enter No of Transgender.',
						allowOutsideClick: false,
						allowEscapeKey: false,
						allowEnterKey: false,
						showConfirmButton: true
					});
					return;
				}

				if (requestData.total_students !== (requestData.total_boys + requestData.total_girls + requestData.others)) {
					Swal.fire('Validation Error', 'Total should equal Boys + Girls + Transgender.', 'warning');
					return;
				}

				$('#pageLoader').show();
				$.ajax({
					url: '/gcc/api/gccschool/schoolproperty/updateStudentDetails',
					type: 'POST',
					contentType: 'application/x-www-form-urlencoded', // important
					data: $.param(requestData), // flatten the object correctly
					success: function (res) {
						console.log("res:" + res);
						$('#pageLoader').hide();
						$('#studentUpdateModal').modal('hide');
						// Swal.fire('Updated!', res, 'success').then(() => location.reload());
						Swal.fire({
							title: 'Updated!',
							text: 'Student strength details updated successfully!',
							icon: 'success',
							allowOutsideClick: false,
							allowEscapeKey: false,
							allowEnterKey: false,
							showConfirmButton: true
						}).then(() => location.reload());

					},
					error: function (err) {
						$('#pageLoader').hide();
						Swal.fire({
							title: 'Error',
							text: err.responseText,
							icon: 'error',
							allowOutsideClick: false,
							allowEscapeKey: false,
							allowEnterKey: false,
							showConfirmButton: true
						});

						// Swal.fire('Error', err.responseText, 'error');
					}
				});
			});





			$(document).on('click', '#StudentSubmitBtn', function () {

				//parseInt($('#tot_staff').val()) || 0;
				let total_students = parseInt($('#total_students').val()) || 0;
				let total_boys = parseInt($('#total_boys').val()) || 0;
				let total_girls = parseInt($('#total_girls').val()) || 0;
				let others = parseInt($('#others').val()) || 0;
				//let school_id = 1;

				console.log("total_students=", total_students);
				console.log("total_boys=", total_boys);
				console.log("total_girls=", total_girls);
				console.log("others=", others);
				console.log("school_id=", schoolId);
				if (!$('#total_students').val().trim()) {
					Swal.fire({
						icon: 'warning',
						title: 'Validation Error',
						text: 'Please enter Total No of Students.',
						allowOutsideClick: false,
						allowEscapeKey: false,
						allowEnterKey: false,
						showConfirmButton: true
					});
					return;
				}

				if (!$('#total_boys').val().trim()) {
					Swal.fire({
						icon: 'warning',
						title: 'Validation Error',
						text: 'Please enter No of Boys.',
						allowOutsideClick: false,
						allowEscapeKey: false,
						allowEnterKey: false,
						showConfirmButton: true
					});
					return;
				}

				if (!$('#total_girls').val().trim()) {
					Swal.fire({
						icon: 'warning',
						title: 'Validation Error',
						text: 'Please enter No of Girls.',
						allowOutsideClick: false,
						allowEscapeKey: false,
						allowEnterKey: false,
						showConfirmButton: true
					});
					return;
				}

				if (!$('#others').val().trim()) {
					Swal.fire({
						icon: 'warning',
						title: 'Validation Error',
						text: 'Please enter No of Transgender.',
						allowOutsideClick: false,
						allowEscapeKey: false,
						allowEnterKey: false,
						showConfirmButton: true
					});
					return;
				}


				// Validate inputs
				let fields = {
					"Total No of Students": total_students,
					"No of Boys": total_boys,
					"No of Girls": total_girls,
					"Others": others,
				};


				/*for (let key in fields) {
					if (!fields[key] || isNaN(fields[key])) {
						Swal.fire({
							icon: 'info',
							title: 'Validation Error',
							text: `Please enter ${key}` + " , IF No means Enter 0",
							confirmButtonText: 'OK'
						});
						return; // Stop execution if validation fails
					}
				}*/

				if (total_students !== (total_boys + total_girls + others)) {
					Swal.fire({
						icon: 'warning',
						title: 'Validation Error',
						text: 'Total Students must be equal to the sum of No of Boys, No of Girls, and Transgender.',
						allowOutsideClick: false, // Disable clicking outside the modal to close it
						allowEscapeKey: false, // Disable escape key to close the modal
						allowEnterKey: false, // Disable enter key to close the modal	                   
						showConfirmButton: true
					});
					return;
				}


				// Prepare Data for AJAX
				let requestData = {
					total_students: total_students,
					total_boys: total_boys,
					total_girls: total_girls,
					school_id: schoolId,
					others: others
				};

				$('#StudentSubmitBtn').prop('disabled', true).text('Processing...');
				$('#pageLoader').show();
				$.ajax({
					url: '/gcc/api/gccschool/schoolproperty/saveStudentStrength',
					type: 'POST',
					contentType: 'application/x-www-form-urlencoded',
					data: $.param(requestData),
					success: function (response) {
						$('#pageLoader').hide();
						$('#StudentSubmitBtn').prop('disabled', false).text('Submit');
						Swal.fire({
							icon: 'success',
							title: 'Success',
							text: response,
							allowOutsideClick: false,
							allowEscapeKey: false,
							allowEnterKey: false,
							confirmButtonText: 'OK'
						}).then((result) => {
							if (result.isConfirmed) {
								$('#StudentSubmitBtn').prop('disabled', false).text('Submit');
								location.reload();
							}
						});
					},
					error: function (xhr, status, error) {
						$('#pageLoader').hide();
						$('#StudentSubmitBtn').prop('disabled', false).text('Submit');
						let errorMessage = xhr.responseText;

						Swal.fire({
							icon: 'error',
							title: 'Error',
							text: errorMessage,
							confirmButtonText: 'OK'
						});
						console.error('Error:', xhr.responseText);
					}
				});



			});

			function resetStudentFields() {
				console.log("Reset button clicked");
				$('#total_students, #total_boys, #total_girls, #others').val('');
			}

			// Event Listener for Reset Button
			$(document).on('click', '#StudentresetButton', function (event) {
				event.preventDefault();
				resetStudentFields();
			});
			$('#refreshButton').on('click', function (e) {
				e.preventDefault(); // prevent default reset behavior, optional
				location.reload();
			});
		});
	</script>
</body>

</html>