Election_TNELA2026/target/classes/templates/modules/dataentry_admin/training.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head>
<style>

</style>

<body>

<div class="wrapper">
	<!-- header top menu Start -->
		<header th:replace="~{fragments/modules/base/header :: header}"></header>
		<!-- header top menu end -->
		<div class="page-wrap">
			<!--=============== Left Menu side Start ================-->
			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
			<!--=============== Left side End ================-->
			<div class="main-content">
				<div class="container-fluid">
					<div class="page-header mb-2">
						<div class="row align-items-end">
							<div class="col-lg-12">
								<div class="page-header-title d-flex justify-content-between align-items-center ">
									<!-- <i class="far fa-calendar-plus bg-blue"></i> -->
									<div class="">
										<h5 >Training Management</h5>
										<span>Manage training centres, halls, and sessions</span>
									</div>

									<div class="form-group ">
										<button type="submit" class="btn btn-primary " id="createBtn">Create New Training</button>

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

						</div>
					</div>


					<!--			searching card		-->

					<div class="row">

						<div class="col-md-12">
							<div class="card" style="margin-top: 15px;">

								<div class="card-body">

									<input type="hidden" id="loginUserId" th:value="${loginUserId}">

									<div class="form-group">
										<div class="row">
											<!-- Training Centre -->

											<div class="col-sm-12 col-md-4">
												<label class="form-label" for="trainingCentre">Training Centre</label>
												<select class="form-control" id="trainingCentre" >
													<option value=""> Select Centre </option>
												</select>
											</div>
											<div class="col-sm-12 col-md-4 mt-4 d-flex align-items-end">

											<button type="submit" class="btn btn-primary " id="searchBtn">Search</button>
											<button type="reset" class="btn btn-secondary ml-2" id="resetBtn">Reset</button>
											</div>
										</div>
									</div>


								</div>

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

					<div class="row">
						<div class="col-12">
							<div class="card">
								<div class="card-header">
									<h3><b>All Training Centre</b></h3>
								</div>

								<div class="card-body">

									<table id="trainingDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
										<thead class="thead-dark" >
										<tr role="row">
											<th class="text-center">S.No</th>
											<th class="text-center">Training Centre</th>
											<th class="text-center">Address</th>
											<th class="text-center">Capacity</th>
										</tr>
										</thead>
										<tbody style="text-align:center;">

										</tbody>
									</table>
								</div>

							</div>
						</div>

					</div>

				
				
				</div>
			</div>

		<!-- create training modal box -->


		<div class="modal fade" id="createTrainingModal" tabindex="-1">
			<div class="modal-dialog modal-xl">
				<div class="modal-content">

					<div class="modal-header">
						<h5 class="modal-title">Create Training Hall</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>

					<div class="modal-body">
						<div class="row ">

							<!--<div class="col-sm-12 col-md-4 mt-2">
								<label class="form-label" for="selectConstituency">Select Constituency <span class="text-danger">*</span></label>
								<select class="form-control" id="selectConstituency" required>

								</select>
							</div>-->

							<div class="col-sm-12 col-md-4 mt-2">
								<label class="form-label" for="tCentre">Training Centre <span class="text-danger">*</span></label>
								<select class="form-control" id="tCentre" required>
								</select>
							</div>



							<div class="col-sm-12 col-md-4 mt-2">
								<label class="form-label" for="hall">No of Hall <span class="text-danger">*</span></label>
								<input type="text" class="form-control" id="hall" oninput="this.value=this.value.replace(/[^0-9]/g,'')"/>
							</div>


							<div class="col-sm-12 col-md-4 mt-2">
								<label class="form-label " for="capacity">Capacity Per Hall <span class="text-danger">*</span></label>
								<input type="text" class="form-control" id="capacity" oninput="this.value=this.value.replace(/[^0-9]/g,'')"/>
							</div>

							<div class="col-sm-12 col-md-4 mt-2">
								<label class="form-label " for="totalcapacity">Total Capacity <span class="text-danger">*</span></label>
								<input type="text" class="form-control" id="totalcapacity" readonly>
							</div>

							<div class="col-sm-12 col-md-8  mt-2">
								<label class="form-label" for="centreAddress">Centre Address <span class="text-danger">*</span></label>
								<input type="text" class="form-control" id="centreAddress"  readonly>
							</div>



							<!--<div class="col-sm-12 col-md-4 mt-2">
								<label class="form-label" for="sessionDate">Session Date <span class="text-danger">*</span></label>
								<input type="date" class="form-control" id="sessionDate" required>
							</div>

							&lt;!&ndash; FROM TIME &ndash;&gt;
							<div class="col-sm-12 col-md-4 mt-2">
								<label class="form-label">From Time <span class="text-danger">*</span></label>
								<select class="form-control" id="fromTime" required>
									<option value="">&#45;&#45;:&#45;&#45; &#45;&#45;</option>
								</select>
							</div>

							&lt;!&ndash; TO TIME &ndash;&gt;
							<div class="col-sm-12 col-md-4 mt-2">
								<label class="form-label">To Time <span class="text-danger">*</span></label>
								<select class="form-control" id="toTime" required>
									<option value="">&#45;&#45;:&#45;&#45; &#45;&#45;</option>
								</select>
							</div>



							<div class="col-sm-12 col-md-4 mt-2">
								<label class="form-label" for="category">Category<span class="text-danger">*</span></label>
								<select class="form-control" id="category" required>

								</select>
							</div>-->

						</div>
					</div>

					<div class="form-group text-center">
						<button type="submit" class="btn btn-primary " id="createdBtn">Create Hall</button>
						<button type="reset" class="btn btn-secondary ml-2" id="modalresetbtn">Reset</button>
					</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>

			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
		</div>
</div>

<script th:replace="~{fragments/modules/base/script :: script}"></script>
<script type="text/javascript">

	//  Reset Button
	document.getElementById('resetBtn').addEventListener('click', function (e) {
		e.preventDefault();
		location.reload();
	});

	// Load training Modal
	document.getElementById("createBtn").addEventListener("click", function () {
		$("#createTrainingModal").modal("show");
	});


// 		datatable initially loaded


	$(document).ready(function() {

		var table = $('#trainingDatatable').DataTable({
			dom: 'Bftip',
			columnDefs: [
				{ targets: 'no-sort', orderable: false }
			],
			lengthMenu: [
				[50, 100, 200, 500, -1],
				['50 rows', '100 rows', '200 rows', 'Show all']
			],
			scrollY: '80vh',
			scrollX: true,

			buttons: [
				{
					extend: 'pageLength',
					className: 'btn btn-warning'
				},
				{
					title: 'Data export',
					extend: 'copyHtml5',
					text: 'Copy',
					className: 'btn btn-secondary',
					id: 'copyBtn'
				},
				{
					extend: 'excelHtml5',
					text: 'Excel',
					className: 'btn btn-secondary',
					id: 'excelBtn'
				},
				{
					extend: 'csvHtml5',
					text: 'CSV',
					className: 'btn btn-secondary',
					id: 'csvBtn'
				},
				{
					extend: 'pdfHtml5',
					text: 'PDF',
					className: 'btn btn-secondary',
					id: 'pdfBtn'
				}
			],
			fixedHeader: false,
			autoWidth: false,
			responsive: false,
			searching: true,
			select: false,
			processing: false,


			columns: [
				{
					data: null,
					render: function (data, type, row, meta) {
						return meta.row + 1; // Auto S.No
					}
				},
				{ data: "C_NAME" },
				{ data: "C_ADDRESS" },
				{ data: "TOT_CAPT" }
			]
		});


		// ✅ Load data on page load
		loadTrainingDetails();




		// 	dropdown for training centre and address


		$.ajax({
			url: "/election/api/trainingadmin/getAllCentre",
			type: "GET",
			success: function (data) {
				console.log("data",data)

				let centreDropdown = $("#tCentre");
				console.log("centreDropdown",centreDropdown)

				centreDropdown.empty().append('<option value="">-- Select Training Centre --</option>');

				data.forEach(function (obj) {
					centreDropdown.append(
							`<option value="${obj.c_code}">${obj.c_name}</option>`
					);
				});
			},
			error: function () {
				Swal.fire("Error", "Failed to load training centres", "error");
			}
		});

		loadConstituency();
		loadCategory();




		$.ajax({
			url: "/election/api/trainingadmin/getAllCentre",
			type: "GET",
			success: function (data) {

				let searchDropdown = $("#trainingCentre");
				searchDropdown.empty().append('<option value="">-- Select Centre --</option>');

				data.forEach(obj => {
					searchDropdown.append(
							`<option value="${obj.c_name}">${obj.c_name}</option>`
					);
				});
			}
		});



	});


	$("#tCentre").on("change", function () {

		let centreCode = $(this).val();

		// Clear address if nothing selected
		if (!centreCode) {
			$("#centreAddress").val("");
			return;
		}

		$.ajax({
			url: "/election/api/trainingadmin/getAddressByCode",
			type: "GET",
			data: { code: centreCode },
			success: function (data) {

				if (data.length > 0) {
					$("#centreAddress").val(data[0].c_address);
				} else {
					$("#centreAddress").val("Address not found");
				}
			},
			error: function () {
				Swal.fire("Error", "Failed to load centre address", "error");
			}
		});

	});



// 	constituency function
	function loadConstituency() {

		$("#selectConstituency")
				.empty()
				.append('<option value="">-- Select Constituency --</option>');

		$.ajax({
			url: "/election/api/trainingadmin/getAllConstituency",  // ✅ NO PARAMS
			type: "GET",

			success: function (data) {
				console.log("Constituency List:", data);

				data.forEach(function (obj) {
					$("#selectConstituency").append(
							`<option value="${obj.ac_no}">${obj.ac_name}</option>`
					);
				});
			},

			error: function () {
				Swal.fire({
					icon: 'error',
					title: 'Error',
					text: 'Failed to load constituency list',
					confirmButtonText: 'OK'
				});
			}
		});
	}

	// loaded categories

	function loadCategory() {

		$("#category")
				.empty()
				.append('<option value="">-- Select Category --</option>');

		$.ajax({
			url: "/election/api/trainingadmin/getAllCategory",  // ✅ NO PARAMS
			type: "GET",

			success: function (data) {
				console.log("Category List:", data);

				data.forEach(function (obj) {
					$("#category").append(
							`<option value="${obj.category}">${obj.category}</option>`
					);
				});
			},

			error: function () {
				Swal.fire({
					icon: 'error',
					title: 'Error',
					text: 'Failed to load constituency list',
					confirmButtonText: 'OK'
				});
			}
		});
	}


	$("#hall, #capacity").on("input", function () {
		let hall = parseInt($("#hall").val()) || 0;
		let cap = parseInt($("#capacity").val()) || 0;
		$("#totalcapacity").val(hall * cap);
	});



	$(document).on("click", "#createdBtn", function () {


		let centerId = $("#tCentre").val();
		let centerName = $("#tCentre option:selected").text();
		let noOfHall = $("#hall").val();
		let hallCapacity = $("#capacity").val();
		let totalCapacity = $("#totalcapacity").val();

		if (!centerName || !noOfHall || !hallCapacity || !totalCapacity) {
			Swal.fire("Warning", "All fields are required", "warning");
			return;
		}

		$.ajax({
			url: "/election/api/trainingadmin/saveTrainingCenter",
			type: "POST",
			data: {
				center_id: centerId,
				center_name: centerName,
				noofHall: noOfHall,
				hallCapacity: hallCapacity,
				totalCapacity: totalCapacity
			},
			success: function (response) {

				if (response.Data === "Success") {
					Swal.fire({
						icon: "success",
						title: "Success",
						text: "Training Hall Created Successfully!",
						confirmButtonText: "OK"
					}).then(() => {
						$("#createTrainingModal").modal("hide");
						location.reload();
					});
				} else {
					Swal.fire("Error", "Something went wrong!", "error");
				}
			},
			error: function () {
				Swal.fire("Error", "Server Error", "error");
			}
		});
	});



// 	data table


	function loadTrainingDetails() {
		var table = $('#trainingDatatable').DataTable();
		table.clear().draw();

		$.ajax({
			url: "/election/api/trainingadmin/getTrainingDetails",
			type: "GET",
			success: function (data) {
				console.log("Training Data:", data);

				data.forEach(function (obj) {
					table.row.add(obj).draw();
				});
			},
			error: function () {
				Swal.fire("Error", "Failed to load training data", "error");
			}
		});
	}



	$("#searchBtn").on("click", function () {

		let centreName = $("#trainingCentre").val();
		let table = $('#trainingDatatable').DataTable();

		if (!centreName) {
			Swal.fire("Warning", "Please select a training centre", "warning");
			return;
		}

		// 🔍 Filter Training Centre column
		table.column(1).search(centreName).draw();
	});




	$("#modalresetbtn").on("click", function () {

		// Clear text & number inputs
		$("#createTrainingModal input[type='text']").val("");

		// Clear dropdowns
		$("#createTrainingModal select").val("");

		// Explicitly clear calculated / readonly fields
		$("#totalcapacity").val("");
		$("#centreAddress").val("");

	});



</script>
</body>
</html>