GCC_Officer_Portal/target/classes/templates/modules/nulm/nulm-payment.html

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

<head th:replace="~{fragments/modules/base/head :: head}">
	<style>
		label {
			font-weight: 700;
			color: #2d5263;
		}



		.checkbox-label {
			display: block;
			margin-bottom: 10px;
			font-size: 16px;
		}

		
		.custom-file-upload {
			position: relative;
			display: flex;
			align-items: center;
			border: 1px solid #d9dde4;
			border-radius: 5px;
			padding: 5px;
			background-color: #f9fafb;
			cursor: pointer;
			margin-top: 5px;
		}

		.custom-file-upload input[type="file"] {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
		}

		.custom-file-upload label {
			display: flex;
			justify-content: space-between;
			width: 100%;
			align-items: center;
		}

		.upload-icon i {
			color: #a6adb5;
			font-size: 18px;
		}

		.file-name {
			margin-left: 10px;
			color: #414f69;
			font-size: 14px;
		}

		#upload-text {
			color: #a7adb5;

		}
	</style>
</head>

<body>
	<!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

	<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">
						<div class="row align-items-end">
							<div class="col-lg-6">
								<div class="page-header-title">
									<i class="ik ik-thumbs-up bg-blue"></i>
									<div class="d-inline">
										<h5>NULM STAFF</h5>
										<span>NULM Payment</span>
									</div>
								</div>
							</div>
							<div class="col-lg-6">
								<nav class="breadcrumb-container" aria-label="breadcrumb">
									<ol class="breadcrumb">
										<li class="breadcrumb-item">
											<a href="/index"><i class="ik ik-home"></i></a>
										</li>
										<li class="breadcrumb-item active" aria-current="page">NULM Payment</li>
									</ol>
								</nav>
							</div>
						</div>
					</div>

					<hr>
					<div class="row align-items-center justify-content-center"
						style="color: white;background-color:#414f69 ;padding: 10px;">
						<h3 class="title resizable-content">NULM Payment</h3>
					</div>
					<!-- Add the resizable-content class to the card sections -->
					<div class="card mb-3 mt-4 resizable-content">
						<!--<div class="card-header text-white" style="background-color: #414f69;">Personal Information's
                                </div>-->
                                
						<div class="card-body">								
							
							<div class="row">						
								<div class="col-md-12 d-flex justify-content-between align-items-center">
								    <label style="font-size: large;font-weight: 700;color: #414f69;">Name:</label>
								    <div class="col-md-6" style="margin-right: 32%;">
								    <input type="text" id="staff-name-input" class="form-control" placeholder="Enter Name..." style="font-size: large;margin-bottom: 15px;">
								</div>
								</div>
						</div>						
						
							
							<div class="row">		
								<div class="col-md-12 d-flex justify-content-between align-items-center">
								    <label style="font-size: large;font-weight: 700;color: #414f69;">Mobile Number:</label>
								    <div class="col-md-6" style="margin-right: 32%;">
								    <input type="text" id="mobile-number" class="form-control" placeholder="Enter Mobile Number..." style="font-size: large;margin-bottom: 15px;">
								</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 d-flex justify-content-between align-items-center">
								    <label style="font-size: large;font-weight: 700;color: #414f69;">Type of Fine Category:</label>
								    <div class="col-md-6" style="margin-right: 32%;">
								    <input type="text" id="category" class="form-control" placeholder="Enter Fine Category..." style="font-size: large;margin-bottom: 15px;">
								</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 d-flex justify-content-between align-items-center">
								    <label style="font-size: large;font-weight: 700;color: #414f69;">Category Fine Amount:</label>
								    <div class="col-md-6" style="margin-right: 32%;">
								    <input type="text" id="amount" class="form-control" placeholder="Enter the Category Fine Amount..." style="font-size: large;margin-bottom: 15px;" pattern="\d{10}" maxlength="10" minlength="10">
								</div>	
								</div>							
							</div>

								<!-- Update other input fields similarly -->
				
							</div>							
	
								
								<div class="d-flex justify-content-center">
							<button class="btn"
								style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
								id="staffenroll">
								Payment
							</button>
						</div>						
							

						</div>
						

					</div>


				</div>


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

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

	<script th:replace="~{fragments/modules/base/script :: script}"></script>
	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
<script th:inline="javascript">
	
	$(document).ready(function() {
			$("#staffenroll").click(function() {
				// Get input values
				let name = $("#staff-name-input").val().trim();
				let mobileNumber = $("#mobile-number").val().trim();
				let category = $("#category").val().trim();
				let amount = $("#amount").val().trim();

				// Check if any of the required fields are empty
				if (name === "" || mobileNumber === "" || category === "") {
					Swal.fire({
						icon: 'warning',
						title: 'Warning',
						text: 'Category fine amount is not entered!'
					});
				} else if (amount === "") {
					Swal.fire({
						icon: 'warning',
						title: 'Warning',
						text: 'Please enter the Category Fine Amount.'
					});
				} else {
					// Simulate AJAX success response
					$.ajax({
						type: "POST",
						url: "#", // No actual API endpoint
						data: {
							name: name,
							mobileNumber: mobileNumber,
							category: category,
							amount: amount
						},
						success: function() {
							Swal.fire({
								icon: 'success',
								title: 'Success',
								text: 'Category fine amount updated successfully!'
							});
						}
					});
				}
			});
		});
  


</script>


</body>

</html>