VictoriaHallBooking_V1/target/classes/templates/headquarters/approval-history.html

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

<head th:replace="~{fragments/head-headquarters :: head}"></head>
<style>
	.toggle-button {
		position: relative;
		display: flex;
		align-items: center;
		width: 91px;
		height: 33px;
		padding: 5px;
		border-radius: 25px;
		cursor: pointer;
		font-size: 14px;
		color: white;
		background-color: #f44336;
		transition: background-color 0.4s;
	}

	.toggle-button.active {
		background-color: #4CAF50;
	}

	.toggle-thumb {
		position: absolute;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: white;
		transition: transform 0.4s;
	}

	.toggle-text {
		flex-grow: 1;
		text-align: center;
		transition: transform 0.4s;
	}

	.toggle-button.active .toggle-thumb {
		transform: translateX(55px);
	}

	.toggle-button.active .toggle-text {
		transform: translateX(-16px);
	}

	.toggle-button.inactive .toggle-text {
		transform: translateX(14px);
	}
</style>

<body>
	<!-- Page Container -->
	<div id="page-container"
		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
		<!-- Sidebar Nav-->
		<aside th:replace="~{fragments/aside-right :: aside}"></aside>
		<!-- END Side Overlay (right)-->
		<!-- Sidebar Nav-->
		<nav th:replace="~{fragments/nav-headquarters :: nav}"></nav>
		<!-- END Sidebar -->
		<!-- Header -->
		<header th:replace="~{fragments/header-headquarters :: header}"></header>
		<!-- END Header -->
		<!-- Main Container -->
		<main id="main-container">
			<!-- Hero -->
			<!-- END Hero -->
			<div class="content">
				<div class="block block-rounded">
					<div class="block-header block-header-default">
						<h3 class="block-title"> List of User Approval</h3>
					</div>
					<div class="block-content p-0">
						<div class="p-sm-4 p-0">
							<div class="table-responsive">
								<table id="userPendingTable"
									class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
									<thead class="thead-light">
										<tr>
											<th>S.no</th>
											<th>Usertype</th>
											<th>Name</th>
											<th>Mobile Number</th>
											<th>E-Mail ID</th>
											<th>Area</th>
											<th>Pincode</th>
											<th>Action</th>
										</tr>
									</thead>
									<tbody>
										<!--<tbody th:each="registration, i : ${registrations}">-->
										<!--<tr>-->
										<tr th:each="users, rowStat : ${pendinglist}">
											<!--<td class="text-center" th:text="${i.index + 1}"></td>-->
											<td class="text-center" th:text="${rowStat.index + 1}"></td>
											<td class="text-center" th:text="${users.usertype}"></td>
											<td class="text-center" th:text="${users.name}"></td>
											<td class="text-center" th:text="${users.mobileNo}"></td>
											<td class="text-center" th:text="${users.email}"></td>
											<td class="text-center" th:text="${users.area}"></td>
											<td class="text-center" th:text="${users.pinCode}"></td>

											<td>
												<p>

													<span class="badge bg-warning" style="cursor: pointer;"
														th:onclick="pending([[${users.userId}]])">pending</span>

												</p>


											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</main>

		<!-- END Main Container -->
		<!--modal for pening-->
		<div class="modal fade backdrop" id="pendingForm" data-backdrop="static" tabindex="-1" role="dialog"
			aria-labelledby="staticBackdropLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<form id="ownform" onsubmit="return rejectsubmit();">
						<div class="block block-rounded block-themed block-transparent mb-0">
							<div class="block-header bg-primary-dark">
								<h3 class="block-title" id="2mtitle">User Information</h3>
								<div class="block-options">
									<button type="button" class="btn-block-option" data-bs-dismiss="modal"
										aria-label="Close">
										<i class="fa fa-fw fa-times"></i>
									</button>
								</div>
							</div>
							<div class="block-content row">
								<!-- <div class="col-sm-4"> -->
								<!-- <label class="form-label">Pet ID:<span class="text-danger">*</span></label> -->
								<input type="hidden" class="form-control text-center" name="userid" id="userid"
									disabled />
								<!--<input type="hidden" class="form-control text-center" name="Mobii" id="Mobii"
									disabled />-->

								<!-- </div> -->
								<div class="col-sm-4">
									<label class="form-label">Name:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="name" id="name"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label">Mobile No:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="mobile" id="mobile"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label">E-Mail ID:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="email" id="email"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label">Street:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="street" id="street"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label">Area:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="area" id="area"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label">Location:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="location" id="location"
										readonly />
								</div>

								<div class="col-sm-4">
									<label class="form-label">Pincode:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="pincode" id="pincode"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label">User Type:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="usertype" id="usertype"
										readonly />
								</div>
								<div class="col-sm-4" style="display:none" id="idField">
									<label class="form-label">User Type Id:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="governmentId" id="governmentId"
										readonly />
								</div>
								<div class="col-sm-4" style="display:none" id="departmentField">
									<label class="form-label">Department:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="department" id="department"
										readonly />
								</div>
								<div class="mb-4">
									<label class="form-label">Reason:<span class="text-danger"></span></label>
									<textarea class="form-control " name="reason" id="reason" required></textarea>
								</div>

							</div>
						</div>
						<div class="block-content block-content-full text-end bg-body" id="mbutton2">
							<button type="button" class="btn btn-sm btn-alt-success"
								th:onclick="accept()">Accept</button>
							<button type="button" class="btn btn-sm btn-alt-secondary"
								data-bs-dismiss="modal">Close</button>
							<button type="submit" class="btn btn-sm btn-primary">Reject</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<div th:replace="~{fragments/resetpassword :: div}"></div>
		<footer th:replace="~{fragments/footer2 :: footer}"></footer>

		<!-- END Footer -->

	</div>

	<script th:replace="~{fragments/loginscript :: script}"></script>

	<script>
		$(document).ready(
			function () {

				// DataTables buttons configuration
				var buttons = [{
					extend: 'pageLength',
					className: 'btn btn-primary'
				}, {
					title: 'Data export',
					extend: 'copyHtml5',
					text: 'Copy',
					className: 'btn btn-primary',
					id: 'copyBtn'
				}, {
					extend: 'excelHtml5',
					text: 'Excel',
					className: 'btn btn-primary',
					id: 'excelBtn'
				}, {
					extend: 'csvHtml5',
					text: 'CSV',
					className: 'btn btn-primary',
					id: 'csvBtn'
				}, {
					extend: 'pdfHtml5',
					text: 'PDF',
					className: 'btn btn-primary',
					id: 'pdfBtn'
				},

				];

				$('#userPendingTable').DataTable(
					{
						dom: 'Bftip',
						columnDefs: [{
							targets: 'no-sort',
							orderable: false
						}],
						lengthMenu: [
							[50, 100, 200, 500, -1],
							['50 rows', '100 rows', '200 rows',
								'500 rows', 'Show all']],
						scrollY: '50vh',
						fixedColumns: {
							left: 1,
							right: 1
						},
						buttons: [buttons],
						responsive: true,
						searching: true, // Enable search
						select: false,
						processing: false,
					});

				// Link the search input to DataTable
				$('#searchInput').on('keyup', function () {
					dataTable.search(this.value).draw();
				});

			});
		//script to open pending form
		function pending(userId) {
			$.ajax({
				type: "GET",
				url: '/victoriahallbooking/api/officer/getUserDetails',
				data: {
					'usersid': userId
				},
				success: function (x) {
					//console.log(x);
					showUserInfo(x)
				}
			});

		}

		function showUserInfo(list) {
			$('#pendingForm').modal({
				backdrop: 'static',
				keyboard: false
			});
			$('#pendingForm').modal('show');
			document.getElementById("userid").value = list.userId;
			document.getElementById("name").value = list.name;
			document.getElementById("mobile").value = list.mobileNo;
			document.getElementById("email").value = list.email;
			document.getElementById("street").value = list.street;
			document.getElementById("area").value = list.area;
			document.getElementById("location").value = list.location;
			document.getElementById("pincode").value = list.pinCode;
			document.getElementById("usertype").value = list.usertype;
			document.getElementById("governmentId").value=list.governmentId
			document.getElementById("department").value=list.department
			if (list.usertype === 'GCC_EMPLOYEE' || list.usertype === 'PENSIONER') {
		        idField.style.display = 'block';
		        departmentField.style.display = 'block';
		    } else {
		        idField.style.display = 'none';
		        departmentField.style.display = 'none';
		    }
		}

		function accept() {
			let id = document.getElementById("userid").value;

			Swal.fire({
				title: 'Do you want to Accept this User ?',
				showDenyButton: true,
				showCancelButton: true,
				confirmButtonText: 'YES',
				denyButtonText: `NO`,
			}).then((result) => {
				/* Read more about isConfirmed, isDenied below */
				if (result.isConfirmed) {
					$.ajax({
						type: "POST",
						url: '/victoriahallbooking/api/officer/updateApprovedStatus/' + id,
						data: {
							'status': 'APPROVED',
							'comments': 'Accepted',
							'userId': id
						},
						success: function (data, textStatus, xhr) {
							if (xhr.status === 200) { // Check if the response status is OK
								Swal.fire(
									'Done',
									'Successfully Accepted to the ID:' + id,
									'success'
								).then(() => {
									location.reload();
								});
							} else {
								Swal.fire(
									'Error',
									'Failed to accept the user',
									'error'
								);
							}
						},
						error: function (xhr, textStatus, errorThrown) {
							Swal.fire(
								'Error',
								'Failed to accept the user',
								'error'
							);
						}
					});
				} else if (result.isDenied) {
					Swal.fire('Changes are not saved', '', 'info')
				}
			});
		}

		function rejectsubmit() {
			let id = document.getElementById("userid").value;
			let reason = $("#reason").val();

			Swal.fire({
				title: 'Do you want to Reject this User ?',
				showDenyButton: true,
				showCancelButton: true,
				confirmButtonText: 'YES',
				denyButtonText: `NO`,
			}).then((result) => {
				/* Read more about isConfirmed, isDenied below */
				if (result.isConfirmed) {
					//console.log("Submitting rejection...");

					$.ajax({
						type: "POST",
						url: '/victoriahallbooking/api/officer/updateRejectStatus/' + id,
						data: {
							'status': 'REJECTED',
							'comments': reason,
							'userId': id
						},
						success: function (data, textStatus, xhr) {
							//console.log("Rejection successful");
							if (xhr.status === 200) { // Check if the response status is OK
								Swal.fire(
									'Done',
									'Successfully Rejected to the ID:' + id,
									'success'
								).then(() => {
									location.reload();
								});
							} else {
								Swal.fire(
									'Error',
									'Failed to reject the user',
									'error'
								);
							}
						},
						error: function (xhr, textStatus, errorThrown) {
							console.error("Error:", errorThrown);
							Swal.fire(
								'Error',
								'Failed to reject the user',
								'error'
							);
						}
					});
				} else if (result.isDenied) {
					Swal.fire('Changes are not saved', '', 'info')
				}
			});

			return false; // Prevent form submission
		}
	</script>
</body>

</html>