You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

884 lines
35 KiB

2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
2 years ago
2 years ago
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" dir="">
  3. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  5. <style>
  6. .required{
  7. color: red;
  8. }
  9. #modalBody h4 {
  10. font-weight: bold;
  11. margin-top: 15px;
  12. margin-bottom: 10px;
  13. }
  14. #modalBody p {
  15. margin: 5px 0;
  16. }
  17. #modalBody hr {
  18. margin: 15px 0;
  19. }
  20. .comment {
  21. margin-bottom: 20px;
  22. }
  23. .comment p {
  24. margin: 0;
  25. }
  26. hr {
  27. border: 1px solid #ccc;
  28. margin-top: 20px;
  29. margin-bottom: 20px;
  30. }
  31. h5 {
  32. font-size: bold;
  33. }
  34. /* Limit the height of the dropdown menu and make it scrollable */
  35. .dropdown-menu {
  36. max-height: 200px; /* Adjust this value as needed */
  37. overflow-y: auto;
  38. }
  39. .col-4 {
  40. font-weight: bold;
  41. text-align: right;
  42. }
  43. .col-8 {
  44. padding-left: 20px;
  45. }
  46. .comment {
  47. padding: 10px 0;
  48. }
  49. .comment .text-muted {
  50. font-size: 0.9em;
  51. color: #6c757d;
  52. }
  53. .comment hr {
  54. border-top: 1px solid #ccc;
  55. }
  56. .comment .btn-link {
  57. font-size: 0.9em;
  58. text-decoration: underline;
  59. color: #007bff;
  60. }
  61. /* Make the modal body scrollable */
  62. #detailsModal .modal-body {
  63. max-height: 70vh; /* Limit the height to 70% of the viewport */
  64. overflow-y: auto; /* Enable vertical scrolling */
  65. }
  66. .card-box {
  67. border-radius: 20px;
  68. box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
  69. }
  70. #followupCard {
  71. transition: transform 0.2s ease; /* Smooth scaling transition */
  72. cursor: pointer; /* Default cursor change */
  73. }
  74. #followupCard:hover {
  75. transform: scale(1.05); /* Slightly scale up on hover */
  76. cursor: pointer; /* Change cursor to hand symbol */
  77. }
  78. .card-block {
  79. padding: 20px;
  80. }
  81. .form-label {
  82. margin-bottom: 0.5rem;
  83. }
  84. input.form-control {
  85. padding: 10px;
  86. }
  87. .form-select {
  88. padding: 10px;
  89. height: 40px;
  90. }
  91. #employeeCard label{
  92. padding-top: 2%;
  93. }
  94. .is-invalid {
  95. border: 1px solid red;
  96. }
  97. </style>
  98. <body>
  99. <!--[if lt IE 8]>
  100. <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>
  101. <![endif]-->
  102. <div class="wrapper">
  103. <!-- header top menu Start -->
  104. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  105. <!-- header top menu end -->
  106. <div class="page-wrap">
  107. <!--=============== Left Menu side Start ================-->
  108. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  109. <!--=============== Left side End ================-->
  110. <div class="main-content">
  111. <div class="container-fluid">
  112. <div class="page-header mb-2">
  113. <div class="row align-items-end">
  114. <div class="col-lg-8">
  115. <div class="page-header-title">
  116. <i class="fa fa-list-alt bg-blue"></i>
  117. <div class="d-inline">
  118. <h5>Department Entries</h5>
  119. <span>Provisional Pension</span>
  120. </div>
  121. </div>
  122. </div>
  123. <div class="col-lg-4">
  124. <nav class="breadcrumb-container" aria-label="breadcrumb">
  125. <ol class="breadcrumb">
  126. <li class="breadcrumb-item"><a href="/gcc/index"><i class="ik ik-home"></i></a></li>
  127. <li class="breadcrumb-item" aria-current="page">Department Entries</li>
  128. <li class="breadcrumb-item" aria-current="page">NewEntry</li>
  129. <li class="breadcrumb-item active" aria-current="page">Provisional Pension</li>
  130. </ol>
  131. </nav>
  132. </div>
  133. </div>
  134. </div>
  135. <div class="row mt-4" >
  136. <div class="col-md-12">
  137. <div class="card">
  138. <div class="card-block">
  139. <h5 style="font-weight:bold;"> <span th:text="${deptname}" id="deptname"></span>&nbsp;Department</h5><span th:text="${filecategory}" id="filecategory" style="display:none"></span>
  140. <h5 style="font-weight:bold;"><span th:text="${deptId}" id="deptId" style="display:none"></span> New Entry - Provisional Pension</h5>
  141. <span th:text="${userId}" id="userId" style="display:none"></span>
  142. <div class="row mb-4">
  143. <div class="col-md-4" >
  144. <label for="empCode" class="form-label fw-bold">Search by Employee No <span class="text-danger">*</span></label>
  145. <div class="dropdown">
  146. <input type="number" id="empCode" class="form-control" pattern="^[A-Za-z0-9]+$" placeholder="Enter Employee No" required>
  147. <small id="employeenoHelp" class="form-text text-muted">Only numeric characters (numbers) are allowed.</small>
  148. </div>
  149. </div>
  150. <div class="col-md-4 mt-20">
  151. <button id="searchButton" class="btn btn-primary mt-2" Style="height:38px;">Search</button>
  152. <!-- <button id="resetButton" class="btn btn-secondary mt-2">Reset</button> -->
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. <div class="row mb-4" id="employeeCard" style="display: none;">
  160. <div class="col-md-12">
  161. <div class="card">
  162. <div class="card-block">
  163. <h5 style="font-weight:bold;">New Entry - Provisional Pension - <span id="EmployeeCode"></span></h5>
  164. <hr>
  165. <div class="row">
  166. <!-- Employee No -->
  167. <div class="col-md-6">
  168. <label for="employeeno" class="form-label fw-bold">Employee No <span class="text-danger">*</span></label>
  169. <div class="dropdown">
  170. <input type="number" id="employeeno" class="form-control" readonly>
  171. </div>
  172. </div>
  173. <!-- Employee Name -->
  174. <div class="col-md-6">
  175. <label for="employeename" class="form-label fw-bold">Employee Name <span class="text-danger">*</span></label>
  176. <div class="dropdown">
  177. <input type="text" id="employeename" class="form-control" readonly>
  178. </div>
  179. </div>
  180. <div class="col-md-6">
  181. <label for="Department" class="form-label fw-bold">Department <span class="text-danger">*</span></label>
  182. <div class="dropdown">
  183. <input type="text" id="department" class="form-control" readonly>
  184. </div>
  185. </div>
  186. <div class="col-md-6">
  187. <label for="Designation" class="form-label fw-bold">Designation<span class="text-danger">*</span></label>
  188. <div class="dropdown">
  189. <input type="text" id="designation" class="form-control" readonly>
  190. </div>
  191. </div>
  192. <div class="col-md-6">
  193. <label for="classes" class="form-label fw-bold">Class<span class="text-danger">*</span></label>
  194. <div class="dropdown" >
  195. <input type="text" id="classes" class="form-control" readonly>
  196. </div>
  197. </div>
  198. <div class="col-sm-6">
  199. <label for="retirementdate" class="form-label fw-bold">Retirement Date <span class="text-danger">*</span></label>
  200. <input type="date" id="retirementdate" class="form-control" readonly>
  201. </div>
  202. <div class="col-sm-6">
  203. <label for="retirement" class="form-label fw-bold">Type Of Retirement<span class="text-danger">*</span></label>
  204. <select id="retirement" class="form-select" style="width: 100%;" required>
  205. <option value="" selected>-- Select Option --</option>
  206. </select>
  207. </div>
  208. <div class="col-sm-6">
  209. <label for="reason" class="form-label fw-bold">Reason For Provisional Pension Given<span class="text-danger">*</span></label>
  210. <select id="reason" class="form-select" style="width: 100%;" required>
  211. <option value="" selected>-- Select Option --</option>
  212. </select>
  213. <div id="otherReasonDiv" style="display: none; margin-top: 10px;">
  214. <label for="otherReason" class="form-label">Please specify for selecting others reason:</label>
  215. <input type="text" id="otherReason" class="form-control" placeholder="Enter reason">
  216. </div>
  217. </div>
  218. <div class="col-md-6">
  219. <label for="Audit File" class="form-label fw-bold">
  220. Date file sent to Pension Section <span class="text-danger">*</span>
  221. </label>
  222. <div class="dropdown">
  223. <input type="text" id="filesentdate" class="form-control" readonly>
  224. </div>
  225. </div>
  226. <div class="col-md-6">
  227. <label for="pendingDuration" class="form-label fw-bold">Pending Duration <span class="text-danger">*</span></label>
  228. <div class="d-flex align-items-center">
  229. <div class="form-check" style="padding-right:10px;">
  230. <input type="radio" id="yespen" name="pendingDuration" value="Yes" class="form-check-input" onclick="toggleInputField(this)">
  231. <label for="yespen" class="form-check-label">Yes</label>
  232. </div>
  233. <div class="form-check">
  234. <input type="radio" id="nopen" name="pendingDuration" value="No" class="form-check-input" onclick="toggleInputField(this)">
  235. <label for="nopen" class="form-check-label">No</label>
  236. </div>
  237. </div>
  238. <div id="clickyesdiv" style="display: none; margin-top: 10px;">
  239. <label for="clickyes" class="form-label">Please specify:<span class="text-danger">*</span></label>
  240. <input type="text" id="Clickyes" class="form-control" placeholder="Enter reason">
  241. </div>
  242. </div>
  243. <div class="col-md-6">
  244. <label for="DP" class="form-label fw-bold">DP<span class="text-danger">*</span></label>
  245. <div class="d-flex align-items-center">
  246. <div class="form-check " style="padding-right:10px;">
  247. <input type="radio" id="yes" name="DP" value="yes" class="form-check-input">
  248. <label for="yes" class="form-check-label">yes</label>
  249. </div>
  250. <br>
  251. <div class="form-check" >
  252. <input type="radio" id="No" name="DP" value="no" class="form-check-input">
  253. <label for="No" class="form-check-label">no</label>
  254. </div>
  255. </div>
  256. </div>
  257. <div class="col-md-12">
  258. <label for="Remarks" class="form-label fw-bold">Comments/Remarks <span class="text-danger">*</span></label>
  259. <div class="dropdown">
  260. <textarea id="remarks" class="form-control" rows="4" placeholder="Enter your remarks here" required></textarea>
  261. </div>
  262. </div>
  263. </div>
  264. <div class="row mt-4">
  265. <div class="col-12 d-flex justify-content-center">
  266. <button id="submitButton" class="btn btn-primary mt-2 mx-2">Mark as Forward to Pension</button>
  267. <button id="cancelButton" class="btn btn-secondary mt-2">Cancel</button>
  268. </div>
  269. </div>
  270. </div>
  271. </div>
  272. </div>
  273. </div>
  274. </div>
  275. </div>
  276. <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;">
  277. <div style="position: relative; top: 50%; transform: translateY(-50%);">
  278. <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
  279. <span class="sr-only">Loading...</span>
  280. </div>
  281. <!-- Add the 'Please wait' text below the spinner -->
  282. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
  283. </div>
  284. </div>
  285. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  286. </div>
  287. </div>
  288. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  289. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  290. <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
  291. <!-- Bootstrap 5 JS -->
  292. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  293. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  294. <script>
  295. $(document).ready(function (){
  296. // Handle Search button click
  297. $('#searchButton').on('click', function () {
  298. const empCode = $('#empCode').val();
  299. console.log("empCode",empCode);
  300. if (empCode) {
  301. $('#pageLoader').show();
  302. document.getElementById("employeeCard").style.display = "block";
  303. }else{
  304. Swal.fire({
  305. icon: "warning", // Display a warning icon
  306. title: "Missing Employee Number",
  307. text: "Please enter an employee number to proceed.",
  308. confirmButtonText: "OK",
  309. customClass: {
  310. confirmButton: "btn btn-primary" // Optional styling for the button
  311. }
  312. });
  313. //document.getElementById("newemployeeCard").style.display = "block";
  314. return;
  315. }
  316. // Format dates to dd-MM-yyyy
  317. $('#pageLoader').show();
  318. $('#employeeCard').hide();
  319. $('#newemployeeCard').hide();
  320. $('#retirement').val('');
  321. $('#reason').val('');
  322. $('#otherReason').val('');
  323. // $('#filesentdate').val('');
  324. $('#remarks').val('');
  325. $('input[name="pendingDuration"]').prop('checked', false); // Clear "pendingDuration" radio buttons
  326. $('input[name="DP"]').prop('checked', false); // Clear "DP" radio buttons
  327. // Step 1: Check if employee exists in the database and fetch employee details if not
  328. $('#pageLoader').show(); // Show loader before starting AJAX requests
  329. $.ajax({
  330. url: '/gcc/api/department/newentry/prexists', // Endpoint to check existence
  331. type: 'GET',
  332. data: { empCode: empCode },
  333. success: function (existsResponse) {
  334. console.log("Exists API Response:", existsResponse);
  335. $('#pageLoader').hide(); // Hide loader after the first API response
  336. if (existsResponse && existsResponse.exists) {
  337. console.log(`Employee Code ${empCode} exists in the database.`);
  338. Swal.fire({
  339. icon: "warning",
  340. title: "Already Exists",
  341. text: "This employee number already exists.",
  342. confirmButtonText: "OK",
  343. customClass: {
  344. confirmButton: "btn btn-primary"
  345. }
  346. });
  347. return; // Exit if employee already exists
  348. }
  349. // If employee does not exist, proceed to fetch details
  350. $('#pageLoader').show(); // Show loader for the second API call
  351. $.ajax({
  352. url: '/gcc/api/department/newentry/employeedetails', // Correct API URL
  353. type: 'GET',
  354. data: { empCode: empCode },
  355. success: function (response) {
  356. $('#pageLoader').hide(); // Hide loader after the second API response
  357. console.log("Employee Details API Response:", response.list);
  358. if (response.list && response.list.length > 0) {
  359. // Extract employee details
  360. let employeeDetails = response.list[0];
  361. console.log("Employee Details:", employeeDetails);
  362. const loggedInDeptId = $('#deptId').text().trim(); // Get logged-in deptId dynamically
  363. // Validate department ID
  364. if (employeeDetails.ID_DEPT !== loggedInDeptId) {
  365. Swal.fire({
  366. icon: "error",
  367. title: "Access Denied",
  368. text: "This employee does not belong to your department. Please try again with a valid employee code.",
  369. confirmButtonText: "OK",
  370. customClass: {
  371. confirmButton: "btn btn-danger"
  372. }
  373. });
  374. return; // Exit if the department does not match
  375. }
  376. // Function to handle radio button state based on retirement date
  377. function handlePendingDurationState() {
  378. const currentDate = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
  379. const retirementDate = employeeDetails.RETIREMENT_DATE; // Assuming this comes in YYYY-MM-DD format
  380. const yesRadio = document.getElementById("yespen");
  381. const noRadio = document.getElementById("nopen");
  382. const inputFieldDiv = document.getElementById('clickyesdiv');
  383. if (retirementDate <= currentDate) {
  384. // If retirement date is less than or equal to current date, disable 'Yes' option
  385. yesRadio.checked = true;
  386. inputFieldDiv.style.display = 'block';
  387. noRadio.disabled = true; // Default to 'No'
  388. } else {
  389. // If retirement date is greater than current date, disable 'No' option
  390. noRadio.checked = true;
  391. yesRadio.disabled = true; // Default to 'Yes'
  392. }
  393. }
  394. // Call the function after fetching `employeeDetails`
  395. handlePendingDurationState();
  396. // Populate employee details in the form
  397. $('#employeeno').val(employeeDetails.EMPLOYEE_CODE);
  398. $('#employeename').val(employeeDetails.EMPLOYEE_NAME);
  399. $('#department').val(employeeDetails.DEPARTMENT);
  400. $('#designation').val(employeeDetails.DESIGNATION);
  401. $('#classes').val(employeeDetails.GROUP_TYPE);
  402. $('#retirementdate').val(employeeDetails.RETIREMENT_DATE);
  403. $('#EmployeeCode').text(empCode);
  404. // Show the employee card
  405. $('#employeeCard').show();
  406. } else {
  407. // No details found for the employee
  408. Swal.fire({
  409. icon: "warning",
  410. title: "No Data Found",
  411. text: "No details found for this employee number.",
  412. confirmButtonText: "OK",
  413. customClass: {
  414. confirmButton: "btn btn-primary"
  415. }
  416. });
  417. document.getElementById("newemployeeCard").style.display = "block"; // Show the new employee card
  418. }
  419. },
  420. error: function () {
  421. $('#pageLoader').hide(); // Hide loader on error
  422. Swal.fire({
  423. icon: "error",
  424. title: "Error",
  425. text: "An error occurred while fetching data. Please try again.",
  426. confirmButtonText: "OK",
  427. });
  428. }
  429. });
  430. },
  431. error: function () {
  432. $('#pageLoader').hide(); // Hide loader on error
  433. Swal.fire({
  434. icon: "error",
  435. title: "Error",
  436. text: "An error occurred while checking the employee. Please try again.",
  437. confirmButtonText: "OK",
  438. });
  439. }
  440. });
  441. });
  442. })
  443. // Attach event listener to the submit button
  444. /* document.getElementById('submitButton').addEventListener('click', function () {
  445. saveEntryDetails(); // Trigger save function when clicked
  446. }); */
  447. //$('#submitButton').one('click', saveEntryDetails);
  448. $('#submitButton').off('click').on('click', saveEntryDetails);
  449. document.addEventListener("DOMContentLoaded", function() {
  450. // Get today's date
  451. const today = new Date();
  452. // Format the date as DD-MM-YYYY for display
  453. const day = String(today.getDate()).padStart(2, '0');
  454. const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-based
  455. const year = today.getFullYear();
  456. // Combine into DD-MM-YYYY format for display
  457. const formattedDateDisplay = `${day}-${month}-${year}`;
  458. // Set the value of the input field to the current date (in DD-MM-YYYY format for display)
  459. document.getElementById("filesentdate").value = formattedDateDisplay;
  460. });
  461. function convertDateFormat(dateString) {
  462. if (!dateString) return '';
  463. let [day, month, year] = dateString.split('-');
  464. return `${year}-${month}-${day}`;
  465. }
  466. // Dropdown for Type of Retriment
  467. $(document).ready(function () {
  468. function loadRetirementTypes() {
  469. $.ajax({
  470. url: "/gcc/api/getRetrimentTypes",
  471. type: "GET",
  472. success: function (data) {
  473. var dropdown = $("#retirement");
  474. dropdown.empty();
  475. dropdown.append('<option value="" selected>-- Select Option --</option>');
  476. $.each(data, function (key, entry) {
  477. dropdown.append($('<option></option>').attr('value', entry.retriment_type).text(entry.retriment_type));
  478. });
  479. },
  480. error: function () {
  481. console.log("Error loading dropdown data.");
  482. }
  483. });
  484. }
  485. // Call function on page load
  486. loadRetirementTypes();
  487. });
  488. //Dropdown for Reason of Provisional
  489. $(document).ready(function () {
  490. function loadRetirementReasonTypes() {
  491. $.ajax({
  492. url: "/gcc/api/getProvisionalReasonTypes",
  493. type: "GET",
  494. success: function (data) {
  495. var dropdown = $("#reason");
  496. dropdown.empty();
  497. dropdown.append('<option value="" selected>-- Select Option --</option>');
  498. $.each(data, function (key, entry) {
  499. dropdown.append($('<option></option>').attr('value', entry.provisional_reason).text(entry.provisional_reason));
  500. });
  501. },
  502. error: function () {
  503. console.log("Error loading dropdown data.");
  504. }
  505. });
  506. }
  507. // Call function on page load
  508. loadRetirementReasonTypes();
  509. });
  510. document.getElementById('reason').addEventListener('change', function () {
  511. const otherReasonDiv = document.getElementById('otherReasonDiv'); // Get the div to show/hide
  512. if (this.value === 'Others') {
  513. otherReasonDiv.style.display = 'block'; // Show the input field if "Others" is selected
  514. } else {
  515. otherReasonDiv.style.display = 'none'; // Hide the input field otherwise
  516. document.getElementById('otherReason').value = ''; // Clear the input field
  517. }
  518. });
  519. function toggleInputField(radio) {
  520. const inputFieldDiv = document.getElementById('clickyesdiv');
  521. if (radio.value === "Yes") {
  522. inputFieldDiv.style.display = 'block';
  523. } else {
  524. inputFieldDiv.style.display = 'none';
  525. document.getElementById('Clickyes').value = ''; // Clear the input field
  526. }
  527. }
  528. // Trigger search on pressing Enter key
  529. $('#empCode').on('keydown', function (event) {
  530. if (event.key === 'Enter') {
  531. event.preventDefault(); // Prevent default form submission or page reload
  532. const empCode = $('#empCode').val(); // Get the value of empCode
  533. if (!empCode) {
  534. // Show Swal alert if the employee number is missing
  535. Swal.fire({
  536. icon: "warning", // Display a warning icon
  537. title: "Missing Employee Number",
  538. text: "Please enter an employee number to proceed.",
  539. confirmButtonText: "OK",
  540. customClass: {
  541. confirmButton: "btn btn-primary" // Optional styling for the button
  542. }
  543. });
  544. return; // Stop further execution
  545. }
  546. $('#searchButton').click(); // Trigger the click event of the search button
  547. }
  548. });
  549. // Handle close button click
  550. $('#cancelButton').click(function () {
  551. // Clear the input field value
  552. $('#empCode').val('');
  553. document.getElementById('otherReasonDiv').style.display = 'none';
  554. // Hide the card
  555. $('#employeeCard').hide();
  556. });
  557. // Handle close button click
  558. $('#cancelButtonnew').click(function () {
  559. // Clear the input field value
  560. $('#empCode').val('');
  561. $('#newemployeeCard').hide();
  562. });
  563. function saveEntryDetails() {
  564. let selectedDPValue = $('input[name="DP"]:checked').val();
  565. let selectedPendingDurationValue = $('input[name="pendingDuration"]:checked').val();
  566. let selectedReasonValue = $('#reason').val();
  567. let selectedOtherReason = null;
  568. let selectedReasonPending = null;
  569. // Check for "Others" in Reason of Pension
  570. if (selectedReasonValue === 'Others') {
  571. selectedOtherReason = $('#otherReason').val()?.trim() || null;
  572. if (!selectedOtherReason) {
  573. Swal.fire({
  574. icon: 'warning',
  575. title: 'Validation Error',
  576. text: 'Please specify the reason for selecting "Others".',
  577. confirmButtonText: 'OK'
  578. });
  579. return;
  580. }
  581. }
  582. // Check for "Yes" in Pending Duration
  583. if (selectedPendingDurationValue === 'Yes') {
  584. selectedReasonPending = $('#Clickyes').val()?.trim() || null;
  585. if (!selectedReasonPending) {
  586. Swal.fire({
  587. icon: 'warning',
  588. title: 'Validation Error',
  589. text: 'Please specify the reason for selecting "Yes" for Pending Duration.',
  590. confirmButtonText: 'OK'
  591. });
  592. return;
  593. }
  594. }
  595. // Create the entryDetails object
  596. let entryDetails = {
  597. empNo: $('#employeeno').val()?.trim(),
  598. empName: $('#employeename').val()?.trim(),
  599. deptName: $('#department').val()?.trim(),
  600. designation: $('#designation').val()?.trim(),
  601. retirementClass: $('#classes').val()?.trim(),
  602. retirementDate: $('#retirementdate').val()?.trim(),
  603. typeOfRetirement: $('#retirement').val()?.trim(),
  604. ReasonofPension: selectedReasonValue || null,
  605. // Convert DD-MM-YYYY to YYYY-MM-DD
  606. dateToAudit: convertDateFormat($('#filesentdate').val()?.trim()),
  607. //dateToAudit: $('#filesentdate').val()?.trim(),
  608. pendingDuration: selectedPendingDurationValue,
  609. reasonofPending: selectedReasonPending || null,
  610. dp: selectedDPValue,
  611. otherReason: selectedOtherReason,
  612. remarks: $('#remarks').val()?.trim(),
  613. deptId: $('#deptId').text()?.trim(),
  614. filemovedby: $('#userId').text()?.trim(),
  615. filecategory: $('#filecategory').text()?.trim()
  616. };
  617. // Validate each required field separately
  618. if (!entryDetails.typeOfRetirement) {
  619. Swal.fire({
  620. icon: 'warning',
  621. title: 'Validation Error!',
  622. text: 'Type of Retirement is required.',
  623. confirmButtonText: 'OK'
  624. });
  625. console.warn("Validation error: Missing Type of Retirement");
  626. return;
  627. }
  628. if (!entryDetails.ReasonofPension) {
  629. Swal.fire({
  630. icon: 'warning',
  631. title: 'Validation Error!',
  632. text: 'Reason of Pension is required.',
  633. confirmButtonText: 'OK'
  634. });
  635. console.warn("Validation error: Missing Reason of Pension");
  636. return;
  637. }
  638. if (!entryDetails.pendingDuration) {
  639. Swal.fire({
  640. icon: 'warning',
  641. title: 'Validation Error!',
  642. text: 'Pending Duration is required.',
  643. confirmButtonText: 'OK'
  644. });
  645. console.warn("Validation error: Missing Pending Duration");
  646. return;
  647. }
  648. if (!entryDetails.dp) {
  649. Swal.fire({
  650. icon: 'warning',
  651. title: 'Validation Error!',
  652. text: 'DP is required.',
  653. confirmButtonText: 'OK'
  654. });
  655. console.warn("Validation error: Missing DP");
  656. return;
  657. }
  658. if (!entryDetails.remarks) {
  659. Swal.fire({
  660. icon: 'warning',
  661. title: 'Validation Error!',
  662. text: 'Remarks are required.',
  663. confirmButtonText: 'OK'
  664. });
  665. console.warn("Validation error: Missing Remarks");
  666. return;
  667. }
  668. console.log("entryDetails==", entryDetails);
  669. // Disable the button to prevent multiple submissions
  670. $('#submitButton').prop('disabled', true).text('Processing...');
  671. // Make AJAX POST request
  672. $.ajax({
  673. url: '/gcc/api/department/newentry/saveEmployeeDetailsProvisionalretirement',
  674. type: 'POST',
  675. contentType: 'application/json',
  676. data: JSON.stringify(entryDetails),
  677. success: function (response) {
  678. $('#submitButton').prop('disabled', false).text('Mark as Forward to Pension');
  679. Swal.fire({
  680. icon: 'success',
  681. title: 'Success',
  682. text: response,
  683. allowOutsideClick: false,
  684. allowEscapeKey: false,
  685. allowEnterKey: false,
  686. confirmButtonText: 'OK'
  687. }).then((result) => {
  688. if (result.isConfirmed) {
  689. window.location.href = "/gcc/department/newentry/provisionalretirement";
  690. }
  691. });
  692. },
  693. error: function (xhr, status, error) {
  694. $('#submitButton').prop('disabled', false).text('Mark as Forward to Pension');
  695. Swal.fire({
  696. icon: 'error',
  697. title: 'Error',
  698. text: 'Failed to save details. Please try again.',
  699. confirmButtonText: 'OK'
  700. });
  701. console.error('Error:', xhr.responseText);
  702. }
  703. });
  704. }
  705. </script>
  706. </body>
  707. </html>