Election_TNELA2026/target/classes/templates/modules/dataentry_admin_mob/batches.html

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

</style>
</head>
<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-8">
								<div class="page-header-title">
									<!-- <i class="far fa-calendar-plus bg-blue"></i> -->
									<div class="d-inline">
										<h5>Create New Batch for Micro-Observer</h5>
										<span>Create a new batch for application bundle intake (micro-observer)</span>
									</div>
								</div>
							</div>

						</div>
					</div>

					<div class="row">
					
						<div class="col-md-12">
							<div class="card" style="margin-top: 15px;">
								<div class="col-lg-8" style="margin-top: 25px;">
									<h3>Micro-Observer Batch Information</h3>
									<span>Fill in the details for the new micro-observer application batch</span>
								</div>
								<div class="card-body">

									<input type="hidden" id="loginUserId" th:value="${loginUserId}">
									 
					                    <div class="form-group">
					                    	<div class="row">
					                    		<div class="col-sm-12 col-md-6">
							                        <label class="form-label" for="receivedate">Receiving Date<span
													class="text-danger">*</span></label> 
													<input type="date" class="form-control" id="receivedate" onclick="this.showPicker()" required>
					                    		</div>
					                    	
					                           <!-- Department -->

												<div class="col-sm-12 col-md-6">
												    <label class="form-label" for="department">Department
												        <span class="text-danger">*</span>
												    </label>
												    <select class="form-control" id="department" required>
												        <option value=""> Select Department </option>
												    </select>
												</div>
					                     		<!-- Office Name -->

												<div class="col-sm-12 col-md-6" style="margin-top: 15px;">
												    <label class="form-label" for="officename">Office Name
												        <span class="text-danger">*</span>
												    </label>
												    <select class="form-control" id="officename" required>
												        <option value="">Select Office Name </option>
												    </select>
												</div>
											
												<div class="col-sm-12 col-md-6" style="margin-top: 15px;">
													<label class="form-label" for="noofapplication">Number of Applications<span class="text-danger">*</span></label>
													<input type="text"  class="form-control"  id="noofapplication"  oninput="this.value=this.value.replace(/[^0-9]/g,'')"/>
												</div>
					                    	</div>
										</div>


									<div class="form-group text-center">
					                        <button type="submit" class="btn btn-primary " id="createdBtn">Create Batch</button>
					                        <button type="reset" class="btn btn-secondary ml-2" id="resetBtn">Reset</button></div>
									</div>

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

					<!--  Batch List Table  -->

					<div class="row">
						<div class="col-12">
							<div class="card">
								<div class="card-header">
									<h3><b>All Micro-Observer Batches</b></h3>
								</div>

								<div class="card-body">

									<table id="batchDatatable" 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">Batch ID</th>
											<th class="text-center">Receiving Date</th>
											<th class="text-center">Department</th>
											<th class="text-center">Office Name</th>
											<th class="text-center">No Of Application</th>
											<th class="text-center">Completed</th>
											<th class="text-center">Pending</th>
											<th class="text-center">Action</th>
										</tr>
										</thead>
										<tbody style="text-align:center;">

										</tbody>


									</table>


								</div>

							</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 th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>

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



<!-- modal box -->


<div class="modal fade" id="editBatchModal" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">

			<div class="modal-header">
				<h5 class="modal-title">Update Micro-Observer Batch Details</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">
						<input type="hidden" id="edit_batch_id">

						<div class="col-md-6 mb-4">
							<label class="form-label">Receive Date</label>
							<input type="date" class="form-control" id="edit_receivedate" readonly>
						</div>

						<div class="col-md-6 mb-4">
							<label class="form-label">Department</label>
							<input type="text" class="form-control" id="edit_department" readonly>
						</div>

						<div class="col-md-12 mb-4">
							<label class="form-label">Office Name</label>
							<input type="text" class="form-control" id="edit_officename" readonly>
						</div>

						<div class="col-md-6">
							<label class="form-label" for="edit_noofapplication">Number of Applications <span class="text-danger">*</span></label>
							<input type="text" class="form-control" id="edit_noofapplication" oninput="this.value=this.value.replace(/[^0-9]/g,'')"/>
						</div>

					</div>
				</div>

			<div class="row mb-2 mt-2">
				<div class="col-md-12 d-flex justify-content-center">
					<button type="button" class="btn btn-primary mx-2" onclick="updateBatch()">Update</button>
				</div>
			</div>

		</div>
	</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();
	});

	// ✅ Disable Future Dates
	document.addEventListener("DOMContentLoaded", function () {
		var today = new Date().toISOString().split('T')[0];
		document.getElementById("receivedate").setAttribute("max", today);
	});

	$(document).ready(function () {

		// ✅✅✅ SINGLE & CORRECT DataTable Initialization
		var batchTable = $('#batchDatatable').DataTable({
			dom: 'Bftip',

			autoWidth: false,
			responsive: false,
			scrollX: true,
			scrollY: '80vh',
			scrollCollapse: true,
			fixedHeader: true,

			lengthMenu: [
				[50, 100, 200, 500, -1],
				['50 rows', '100 rows', '200 rows', 'Show all']
			],

			buttons: [
				{ extend: 'pageLength', className: 'btn btn-warning' },
				{ extend: 'copyHtml5', className: 'btn btn-secondary' },
				{ extend: 'excelHtml5', className: 'btn btn-secondary' },
				{ extend: 'csvHtml5', className: 'btn btn-secondary' },
				{ extend: 'pdfHtml5', className: 'btn btn-secondary' }
			],

			ajax: {
				url: "/election/api/dataentryadmin_mob/getallbatches",
				type: "GET",
				dataSrc: ""
			},

			columns: [
				{
					data: null,
					className: "text-center",
					render: (d, t, r, m) => m.row + 1
				},
				{ data: "id", className: "text-center" },
				{ data: "rec_date", className: "text-center" },
				{ data: "dept_name", className: "text-center" },
				{
				    data: null,
				    className: "text-center",
				    render: function (data, type, row) {

				        let address = '';

				        if (row.address1) address += row.address1;
				        if (row.address2) address += (address ? ', ' : '') + row.address2;

				        return `
				            <div>
				                <span>${row.office_name}</span><br>
				                <span class="text-muted">${address || '-'}</span>
				            </div>
				        `;
				    }
				},

				{ data: "noof_application", className: "text-center" },
				{ data: "completed",  className: 'text-center' },
				{ data: "pending",  className: 'text-center' },
				{
					data: "id",
					className: "text-center",
					render: d => `<button class="btn btn-primary btn-sm" onclick="editBatch(${d})">Edit</button>`
				}
			],

			columnDefs: [
				{ targets: "_all", className: "text-center" }
			]
		});

		// ✅ Load Departments with searchable dropdown
		$.ajax({

			url: "/election/api/dataentryadmin/getalldepartments",
			method: "GET",
			success: function (data) {

				let department = $("#department");
				department.empty().append('<option value="">-- Select Department --</option>');

				data.forEach(dept => {
					department.append(
							`<option value="${dept.dept_id}">${dept.dept_name}</option>`
					);
				});

				// ✅ Enable search inside dropdown
				department.select2({
					placeholder: "Select Department",
					allowClear: true,
					width: '100%'

				});
			}
		});

	});

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

		let deptId = $(this).val();
		let office = $("#officename");

		// Reset office dropdown
		office.empty().append('<option value="">-- Select Office Name --</option>');
		//office.select2('destroy'); // ✅ important

		if (deptId !== "") {
			$.ajax({
				url: "/election/api/dataentryadmin/getallofficenames",
				method: "GET",
				data: { deptId: deptId },
				success: function (data) {

					data.forEach(o => {
						office.append(
								`<option value="${o.id}">${o.office_full_address}</option>`
						);
					});

					// ✅ Enable searchable dropdown
					office.select2({
						placeholder: "Select Office Name",
						allowClear: true,
						width: '100%'
					});
				}
			});
		}
	});

	// ✅ Create Batch
	$("#createdBtn").click(function () {

		const $btn = $(this);   // cache button

		let receivedate = $("#receivedate").val();
		let department = $("#department").val();
		let officename = $("#officename").val();
		let noofapplication = $("#noofapplication").val();
		let loginUserId = $("#loginUserId").val();

		if (!receivedate || !department || !officename || !noofapplication || noofapplication <= 0) {
			Swal.fire("Validation Error", "All fields are mandatory and must be valid.", "warning");
			return;
		}

		// ✅ Disable button immediately
		$btn.prop("disabled", true).text("Saving...");

		$.ajax({
			url: "/election/api/dataentryadmin_mob/savebatchdeatils",
			type: "POST",
			data: {
				receivedate,
				department,
				officename,
				noofapplication,
				userid: loginUserId
			},
			success: function (response) {

				Swal.fire({
					icon: "success",
					title: "Batch Created Successfully!",
					text: "Reference ID is: " + response
				}).then(() => location.reload());

			},
			error: function (xhr) {
				Swal.fire("Error", "Failed to save data: " + xhr.responseText, "error");

				// ❌ Re-enable button only if error occurs
				$btn.prop("disabled", false).text("Create");
			}
		});

	});

	// ✅ Load Edit Modal
	function editBatch(batchId) {
		$.ajax({
			url: "/election/api/dataentryadmin_mob/getbatchbyId",
			type: "GET",
			data: { id: batchId },
			success: function (data) {
				
				let officeFullName = [
				    data.office_name,
				    data.address1,
				    data.address2
				].filter(v => v && v.trim() !== "").join(" ");

				$("#edit_batch_id").val(data.id);
				$("#edit_receivedate").val(data.rec_date);
				$("#edit_department").val(data.dept_name);
				$("#edit_officename").val(officeFullName);

				// ✅ Set value + store counts for validation
				$("#edit_noofapplication")
						.val(data.noof_application)
						.data("oldCount", data.noof_application)
						.data("completed", data.completed);

				$("#editBatchModal").modal('show');
			},
			error: function () {
				Swal.fire("Error!", "Unable to load batch details", "error");
			}
		});
	}
	/*function editBatch(batchId) {
		$.ajax({
			url: "/election/api/dataentryadmin/getbatchbyId",
			type: "GET",
			data: { id: batchId },
			success: function (data) {

				$("#edit_batch_id").val(data.id);
				$("#edit_receivedate").val(data.rec_date);
				$("#edit_department").val(data.dept_name);
				$("#edit_officename").val(data.office_name);
				$("#edit_noofapplication").val(data.noof_application);

				// ✅ Store existing count for validation
				$("#edit_noofapplication").data("oldCount", data.noof_application);

				$("#editBatchModal").modal('show');
			},
			error: function () {
				Swal.fire("Error!", "Unable to load batch details", "error");
			}
		});
	}*/

	// ✅ Update Batch

	function updateBatch() {

		let id = $("#edit_batch_id").val();
		let userId = $("#loginUserId").val();

		let newCount = Number($("#edit_noofapplication").val());
		let completed = Number($("#edit_noofapplication").data("completed"));

		// Basic validation
		if (!newCount || newCount <= 0) {
			Swal.fire("Validation Error", "Enter a valid number of applications", "warning");
			return;
		}

		// ❌ Prevent reducing below completed count
		if (newCount < completed) {
			Swal.fire({
				icon: "warning",
				title: "Invalid Update",
				text: `Number of applications cannot be less than completed count (${completed})`,
				confirmButtonText: "OK"
			});
			return;
		}

		$.ajax({
			url: "/election/api/dataentryadmin_mob/updatebatch",
			type: "POST",
			data: {
				id,
				noofapplication: newCount,
				userId
			},
			success: function () {
				Swal.fire("Success", "Batch Updated Successfully", "success").then(() => {
					$("#editBatchModal").modal("hide");
					$('#batchDatatable').DataTable().ajax.reload(null, false);
				});
			},
			error: function () {
				Swal.fire("Error", "Failed to update batch", "error");
			}
		});
	}
	/*function updateBatch() {

		let id = $("#edit_batch_id").val();
		// let noof_application = $("#edit_noofapplication").val();
		let userId = $("#loginUserId").val();


		let newCount = Number($("#edit_noofapplication").val());
		let oldCount = Number($("#edit_noofapplication").data("oldCount"));

		if (!newCount || newCount <= 0) {
			Swal.fire("Validation Error", "Enter a valid number of applications", "warning");

			return;
		}



		$.ajax({
			url: "/election/api/dataentryadmin/updatebatch",
			type: "POST",
			data: {
				id,
				noofapplication: newCount,
				userId
			},
			success: function () {

				Swal.fire("Success", "Batch Updated Successfully", "success").then(() => {
					$("#editBatchModal").modal("hide");
					$('#batchDatatable').DataTable().ajax.reload(null, false);
				});

			},
			error: function () {
				Swal.fire("Error", "Failed to update batch", "error");
			}
		});
	}*/

</script>


</body>
</html>