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.

1121 lines
42 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  4. <style>
  5. /* .modal-body {
  6. max-height: 70vh;
  7. overflow-y: auto;
  8. overflow-x: hidden;
  9. padding-right: 15px;
  10. } */
  11. .request-box {
  12. border: 1px solid #ddd;
  13. background: white;
  14. padding: 15px;
  15. margin-bottom: 15px;
  16. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  17. width: 100%;
  18. }
  19. .request-info {
  20. width: 100%;
  21. }
  22. table {
  23. width: 100%;
  24. border-collapse: collapse;
  25. table-layout: fixed; /* Ensures equal column spacing */
  26. }
  27. td {
  28. padding: 12px;
  29. border: 1px solid #ddd;
  30. text-align: left;
  31. white-space: nowrap;
  32. }
  33. /* Ensure status button aligns with table width */
  34. .status-container {
  35. display: flex;
  36. justify-content: flex-end; /* Aligns button to the right */
  37. padding: 10px;
  38. }
  39. .status-btn {
  40. padding: 10px 20px;
  41. border: none;
  42. border-radius: 5px;
  43. font-size: 14px;
  44. cursor: pointer;
  45. width: 150px;
  46. text-align: center;
  47. }
  48. .pending {
  49. background-color: #004085;
  50. color: white;
  51. }
  52. .completed {
  53. background-color: green;
  54. color: white;
  55. }
  56. /* Make sure the container adjusts to screen size */
  57. @media ( min-width : 768px) {
  58. .col-md-12 {
  59. flex: 0 0 100%;
  60. max-width: 100%;
  61. }
  62. }
  63. td {
  64. word-wrap: break-word;
  65. white-space: normal;
  66. }
  67. </style>
  68. <body>
  69. <!--[if lt IE 8]>
  70. <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>
  71. <![endif]-->
  72. <div class="wrapper">
  73. <!-- header top menu Start -->
  74. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  75. <!-- header top menu end -->
  76. <div class="page-wrap">
  77. <!--=============== Left Menu side Start ================-->
  78. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  79. <!--=============== Left side End ================-->
  80. <div class="main-content">
  81. <div class="container-fluid">
  82. <div class="page-header mb-2">
  83. <div class="row align-items-end">
  84. <div class="col-lg-8">
  85. <div class="page-header-title">
  86. <i class="fa fa-list-alt bg-blue"></i>
  87. <div class="d-inline">
  88. <h5>Officer</h5>
  89. <span>C&D Management System</span>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="col-lg-4">
  94. <nav class="breadcrumb-container" aria-label="breadcrumb">
  95. <ol class="breadcrumb">
  96. <li class="breadcrumb-item"><a href="/gcc/index"><i
  97. class="ik ik-home"></i></a></li>
  98. <li class="breadcrumb-item" aria-current="page">C&D
  99. Management System</li>
  100. <li class="breadcrumb-item active" aria-current="page">Officer</li>
  101. </ol>
  102. </nav>
  103. </div>
  104. </div>
  105. </div>
  106. <h4 class="h4 text-right text-mute" style="font-size: 12px;">
  107. Auto refresh in <font id="refresh-countdown">00</font> seconds
  108. </h4>
  109. <div class="row">
  110. <div class="col-md-12">
  111. <div class="card">
  112. <div class="card-body">
  113. <div class="page-header-title"
  114. style="background-color: black; color: white; padding: 10px; border-radius: 5px;">
  115. <h5 style="margin: 0; font-weight: bold;">Request
  116. Information</h5>
  117. </div>
  118. <div class="container mt-5">
  119. <div>
  120. <h5 style="margin: 0; font-weight: bold;">Find the
  121. Request Details</h5>
  122. <hr>
  123. </div>
  124. <!-- Phone -->
  125. <div class="row mb-3">
  126. <div class="col-md-6">
  127. <label class="form-label" for="searchInput">Mobile
  128. No / Ref ID<span class="text-danger">*</span>
  129. </label> <input type="text" id="searchInput" class="form-control"
  130. placeholder="Enter Mobile No or Ref ID">
  131. </div>
  132. <div class="col-md-2 d-flex align-items-end">
  133. <button class="btn btn-primary w-100" id="searchButton">Search</button>
  134. </div>
  135. <div class="col-md-2 d-flex align-items-end">
  136. <button class="btn btn-secondary w-100" id="resetButton">Reset</button>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. <div class="col-md-12" style="display: none;" id="infocard">
  144. <div class="card">
  145. <div class="card-block">
  146. <div class="page-header-title"
  147. style="background-color: black; color: white; padding: 10px; border-radius: 5px;">
  148. <h5 style="margin: 0; font-weight: bold;">Public
  149. Information</h5>
  150. <hr>
  151. </div>
  152. <div class="container mt-5">
  153. <!-- List of Array -->
  154. <div class="row mb-3">
  155. <div id="requestContainer"></div>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  165. </div>
  166. </div>
  167. <!-- Modal -->
  168. <div class="modal fade" id="returnretrieddetailsModal" tabindex="-1"
  169. role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true"
  170. data-bs-backdrop="static" data-bs-keyboard="false">
  171. <div class="modal-dialog modal-lg" role="document">
  172. <div class="modal-content">
  173. <div class="modal-header">
  174. <h5 class="modal-title" id="detailsModalLabel">
  175. Public Information (<span id="modalEmployeeCode"></span>)
  176. </h5>
  177. <input type="hidden" id="wastetypehidden">
  178. <button type="button" class="close" data-bs-dismiss="modal"
  179. aria-label="Close">
  180. <span aria-hidden="true">&times;</span>
  181. </button>
  182. </div>
  183. <div class="modal-body">
  184. <div class="row">
  185. <!-- requester Name-->
  186. <div class="col-md-6">
  187. <label for="publicName" class="form-label fw-bold">Name</label> <input
  188. type="text" id="publicName" class="form-control" readonly>
  189. </div>
  190. <!-- Phone Number -->
  191. <div class="col-md-6">
  192. <label for="contactNumber" class="form-label fw-bold">Phone
  193. Number</label> <input type="number" id="contactNumber"
  194. class="form-control" readonly>
  195. </div>
  196. <!-- waste Selection -->
  197. <div class="col-md-6">
  198. <label for="wasteSelection" class="form-label fw-bold">Waste
  199. Selection</label> <input type="text" id="wasteSelection"
  200. class="form-control" readonly>
  201. </div>
  202. <!-- vehicle Selection -->
  203. <div class="col-md-6">
  204. <label for="vehicleSelection" class="form-label fw-bold">Vehicle
  205. Selection </label> <input type="text" id="vehicleSelection"
  206. class="form-control" readonly>
  207. </div>
  208. </div>
  209. <!-- Left Side Form -->
  210. <hr>
  211. <div class="container">
  212. <div class="row">
  213. <!-- Left Side - Actual Weight -->
  214. <div class="col-md-6">
  215. <label for="actualWeight" class="form-label">Enter the
  216. actual weight (In Kg) <span class="text-danger">*</span>
  217. </label> <input type="number" class="form-control mb-2"
  218. id="actualWeight" min="0" step="0.01" placeholder="Enter Here"
  219. oninput="recalculateCharges()" />
  220. </div>
  221. <!-- Right Side - Payment Type -->
  222. <div class="col-md-6">
  223. <label class="form-label">Select the payment type <span
  224. class="text-danger">*</span></label>
  225. <div class="d-flex gap-2 mt-2">
  226. <div
  227. class="form-check flex-fill border rounded p-2 text-center">
  228. <input class="form-check-input me-2" type="radio"
  229. name="paymentType" id="generateLink" value="generateLink"
  230. onchange="toggleMobileInput()"> <label
  231. class="form-check-label" for="generateLink">Generate
  232. link</label>
  233. </div>
  234. <div
  235. class="form-check flex-fill border rounded p-2 text-center">
  236. <input class="form-check-input me-2" type="radio"
  237. name="paymentType" id="generateQR" value="generateQR"
  238. onchange="toggleMobileInput()"> <label
  239. class="form-check-label" for="generateQR">Generate QR
  240. Code</label>
  241. </div>
  242. </div>
  243. <!-- Mobile Number -->
  244. <div class="col-md-6" id="mobileNumberContainer"
  245. style="display: none;">
  246. <label for="payment_mobile_no" class="form-label">Enter
  247. Mobile Number <span class="text-danger">*</span>
  248. </label> <input type="text" class="form-control" id="payment_mobile_no"
  249. placeholder="Enter mobile number"
  250. oninput="validatePhoneNumber(this)">
  251. </div>
  252. </div>
  253. </div>
  254. <!-- <div class="row"> -->
  255. <!-- Payment Details Card -->
  256. <div
  257. class="col-md-6 mt-3 payment-details border rounded p-3 shadow-sm bg-light">
  258. <h6>Payment Details</h6>
  259. <hr />
  260. <p id="processingCharges">
  261. <strong>Processing Charges:</strong> Rs - <span
  262. id="processingAmount"></span>
  263. </p>
  264. <p id="wasteCharges" style="display: none;">
  265. <strong>Waste Collection Charges:</strong> Rs - <span
  266. id="wasteAmount"></span>
  267. </p>
  268. <hr>
  269. <p id="totalCharges" style="display: none;">
  270. <strong>Total Charges:</strong> Rs - <span id="totalAmount"></span>
  271. </p>
  272. </div>
  273. <!-- Buttons -->
  274. <div class="col-md-12 text-center mt-4">
  275. <button type="button" class="btn btn-primary me-3"
  276. onclick="savePaymentDetailsFromModal()" id="submitbutton">Submit</button>
  277. <button type="button" class="btn btn-outline-secondary"
  278. data-bs-dismiss="modal">Cancel</button>
  279. </div>
  280. <!-- </div> -->
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. <!-- Modal box for Completed -->
  287. <div class="modal fade" id="completeddetailsModal" tabindex="-1"
  288. role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true"
  289. data-bs-backdrop="static" data-bs-keyboard="false">
  290. <div class="modal-dialog modal-lg" role="document">
  291. <div class="modal-content">
  292. <div class="modal-header">
  293. <h5 class="modal-title" id="detailsModalLabel">
  294. Public Information (<span id="modalEmployeeCodes"></span>)
  295. </h5>
  296. <button type="button" class="close" data-bs-dismiss="modal"
  297. aria-label="Close">
  298. <span aria-hidden="true">&times;</span>
  299. </button>
  300. </div>
  301. <div class="modal-body">
  302. <div class="row">
  303. <!-- requester Name-->
  304. <div class="col-md-6">
  305. <label for="publicNames" class="form-label fw-bold">Name</label>
  306. <input type="text" id="publicNames" class="form-control" readonly>
  307. </div>
  308. <!-- Phone Number -->
  309. <div class="col-md-6">
  310. <label for="contactNumbers" class="form-label fw-bold">Phone
  311. Number</label> <input type="number" id="contactNumbers"
  312. class="form-control" readonly>
  313. </div>
  314. <!-- waste Selection -->
  315. <div class="col-md-6">
  316. <label for="wasteSelections" class="form-label fw-bold">Waste
  317. Selection</label> <input type="text" id="wasteSelections"
  318. class="form-control" readonly>
  319. </div>
  320. <!-- vehicle Selection -->
  321. <div class="col-md-6">
  322. <label for="vehicleSelections" class="form-label fw-bold">Vehicle
  323. Selection </label> <input type="text" id="vehicleSelections"
  324. class="form-control" readonly>
  325. </div>
  326. <!-- Request Date -->
  327. <div class="col-md-6">
  328. <label for="requestDates" class="form-label fw-bold">Request
  329. Date </label> <input type="text" id="requestDates" class="form-control"
  330. readonly>
  331. </div>
  332. </div>
  333. <!-- Left Side Form -->
  334. <hr>
  335. <div class="container">
  336. <div class="row">
  337. <!-- Left Side - Actual Weight -->
  338. <div class="col-md-6">
  339. <label for="completed_actualWeight" class="form-label">Enter the
  340. actual weight (In ton) <span class="text-danger">*</span>
  341. </label> <input type="number" class="form-control mb-2"
  342. id="completed_actualWeight" placeholder="Enter Here"
  343. oninput="recalculateCharges()" / readonly>
  344. </div>
  345. <!-- Right Side - Payment Type -->
  346. <div class="col-md-6">
  347. <label class="form-label">Select the payment type <span
  348. class="text-danger">*</span></label>
  349. <div class="d-flex gap-2 mt-2">
  350. <div
  351. class="form-check flex-fill border rounded p-2 text-center">
  352. <input class="form-check-input me-2" type="radio"
  353. name="paymentTypes" id="completed_generateLinks" readonly> <label
  354. class="form-check-label" for="completed_generateLinks">Generate
  355. link</label>
  356. </div>
  357. <div
  358. class="form-check flex-fill border rounded p-2 text-center">
  359. <input class="form-check-input me-2" type="radio"
  360. name="paymentTypes" id="completed_generateQRs" readonly> <label
  361. class="form-check-label" for="completed_generateQRs">Generate
  362. QR Code</label>
  363. </div>
  364. </div>
  365. </div>
  366. </div>
  367. <!-- Payment Details Card -->
  368. <div
  369. class="col-md-6 mt-3 payment-details border rounded p-3 shadow-sm bg-light">
  370. <h6>Payment Details</h6>
  371. <hr />
  372. <p id="processingChargess">
  373. <strong>Processing Charges:</strong> Rs - <span
  374. id="processingAmounts"></span>
  375. </p>
  376. <p id="wasteChargess" style="display: none;">
  377. <strong>Waste Collection Charges:</strong> Rs - <span
  378. id="wasteAmounts"></span>
  379. </p>
  380. <p id="totalChargess" style="display: none;">
  381. <strong>Total Charges:</strong> Rs - <span id="totalAmounts"></span>
  382. </p>
  383. </div>
  384. <!-- Buttons -->
  385. <div class="col-md-12 text-center mt-4">
  386. <button type="button" class="btn btn-primary me-3"
  387. onclick="downloadAcknowledgementViaAjax()" id="ACKDownloadbutton">
  388. Download Acknowledgement</button>
  389. <button type="button" class="btn btn-outline-secondary"
  390. data-bs-dismiss="modal">Cancel</button>
  391. </div>
  392. </div>
  393. </div>
  394. </div>
  395. </div>
  396. </div>
  397. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  398. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  399. <!-- <script
  400. src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script> -->
  401. <script
  402. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  403. <script type="text/javascript">
  404. $(document).ready(function () {
  405. // Initially hide the info card and request container
  406. $("#requestContainer").hide();
  407. $('#infocard').hide();
  408. function handleSearch() {
  409. const inputValue = $("#searchInput").val().trim();
  410. if (inputValue === "") {
  411. Swal.fire({
  412. icon: "warning",
  413. title: "Input Required",
  414. text: "Please enter a Mobile Number or Ref ID.",
  415. backdrop: true,
  416. allowOutsideClick: false
  417. });
  418. return;
  419. }
  420. // Determine if it's a mobile number (only digits, usually 10-digit) or refId
  421. const isMobileNo = /^[6-9]\d{9}$/.test(inputValue); // Basic mobile number check
  422. const queryParams = {};
  423. if (isMobileNo) {
  424. queryParams.mobileNo = inputValue;
  425. } else {
  426. queryParams.refId = inputValue;
  427. }
  428. $.ajax({
  429. url: "/gcc/api/dumpregistration/wastecollectorlist",
  430. type: "GET",
  431. data: queryParams,
  432. dataType: "json",
  433. success: function (data) {
  434. console.log("registerdetails", data);
  435. if (Array.isArray(data) && data.length > 0) {
  436. renderRequests(data);
  437. $("#requestContainer").show();
  438. $("#infocard").show();
  439. } else {
  440. Swal.fire({
  441. icon: "warning",
  442. title: "No Data Found",
  443. text: "Mobile No or Refernce Id is Not Availble",
  444. allowOutsideClick: false, // Disable clicking outside the modal to close it
  445. allowEscapeKey: false, // Disable escape key to close the modal
  446. allowEnterKey: false, // Disable enter key to close the modal
  447. });
  448. $("#requestContainer").hide();
  449. $("#infocard").hide();
  450. }
  451. },
  452. error: function () {
  453. Swal.fire({
  454. icon: "error",
  455. title: "Server Error",
  456. text: "Failed to fetch data. Please try again later.",
  457. allowOutsideClick: false, // Disable clicking outside the modal to close it
  458. allowEscapeKey: false, // Disable escape key to close the modal
  459. allowEnterKey: false, // Disable enter key to close the modal
  460. });
  461. $("#requestContainer").hide();
  462. $("#infocard").hide();
  463. }
  464. });
  465. }
  466. // Button click
  467. $("#searchButton").click(handleSearch);
  468. // Enter key support
  469. $("#searchInput").on("keydown", function (e) {
  470. if (e.key === "Enter" || e.keyCode === 13) {
  471. handleSearch();
  472. }
  473. });
  474. // Reset button
  475. $("#resetButton").click(function () {
  476. $("#searchInput").val("");
  477. $("#requestContainer").hide();
  478. $("#infocard").hide();
  479. });
  480. // Click Event for Search Button
  481. $("#searchButton").click(handleSearch);
  482. // Enter Key Event on Input Field
  483. $("#phoneNumber").on("keydown", function (e) {
  484. if (e.key === "Enter" || e.keyCode === 13) {
  485. handleSearch();
  486. }
  487. });
  488. function renderRequests(data) {
  489. const container = $("#requestContainer");
  490. container.html(""); // Clear previous results
  491. data.forEach(request => {
  492. const requestCard = `
  493. <div class="request-box mb-3 p-3 border rounded shadow-sm">
  494. <div class="request-info">
  495. <table class="table table-bordered" style="table-layout: fixed; width: 100%;">
  496. <tr>
  497. <td><strong>Reference ID :</strong> ${request.refid}</td>
  498. <td><strong>Name :</strong> ${request.name}</td>
  499. </tr>
  500. <tr>
  501. <td><strong>Zone :</strong> ${request.zone}</td>
  502. <td><strong>Phone No :</strong> ${request.mobile_no}</td>
  503. </tr>
  504. <tr>
  505. <td><strong>Quantity :</strong> ${request.quantity}</td>
  506. <td><strong>Waste Type :</strong> ${request.waste_type}</td>
  507. </tr>
  508. <tr>
  509. <td><strong>Request Date :</strong> ${request.request_date}</td>
  510. <td><strong>Dump Location :</strong> ${request.location}</td>
  511. </tr>
  512. <tr>
  513. <td><strong>Vehicle Selection :</strong> ${request.vehicle_name}</td>
  514. <td><strong>Payment Status :</strong> ${request.payment_status}</td>
  515. </tr>
  516. </table>
  517. </div>
  518. <div class="status-container text-end">
  519. <button class="btn btn-sm ${getStatusClass(request.payment_status)} status-btn" data-id="${request.refid}">
  520. ${request.payment_status}
  521. </button>
  522. </div>
  523. </div>
  524. `;
  525. container.append(requestCard);
  526. });
  527. }
  528. // Helper to assign status class based on payment status
  529. function getStatusClass(status) {
  530. switch (status.toUpperCase()) {
  531. case "COMPLETED": return "btn-success";
  532. case "PENDING": return "btn-warning";
  533. case "FAILED": return "btn-danger";
  534. default: return "btn-secondary";
  535. }
  536. }
  537. // Reset Button Action
  538. $("#resetButton").click(function () {
  539. location.href = "/gcc/dumpregistration/officer";
  540. });
  541. });
  542. $(document).ready(function () {
  543. $(document).on('click', '.status-btn', function () {
  544. const status = $(this).text().trim();
  545. const refId = $(this).data("id");
  546. if (status === "PENDING") {
  547. fetchRequestDetails(refId); // Show modal inside this
  548. }
  549. if (status === "COMPLETED") {
  550. fetchCompletedRequestDetails(refId); // Show modal inside this
  551. }
  552. });
  553. // Close buttons
  554. $('.close, #back').click(function () {
  555. $('#completeddetailsModal').modal('hide');
  556. });
  557. });
  558. $('#returnretrieddetailsModal').on('show.bs.modal', function () {
  559. $('#actualWeight').val(''); // Clear the value
  560. // Clear text-based fields (charges display)
  561. $('#processingAmount').text('');
  562. $('#wasteAmount').text('');
  563. $('#totalAmount').text('');
  564. // Optionally hide the charges sections too (for fresh view)
  565. $('#processingCharges').hide();
  566. $('#wasteCharges').hide();
  567. $('#totalCharges').hide();
  568. });
  569. // charge of process and waste
  570. function fetchRequestDetails(refId) {
  571. console.log("refId", refId);
  572. $.ajax({
  573. url: '/gcc/api/dumpregistration/wastecollectorlist',
  574. type: 'GET',
  575. data: { refId: refId },
  576. dataType: "json",
  577. allowOutsideClick: false, // Disable clicking outside the modal to close it
  578. allowEscapeKey: false, // Disable escape key to close the modal
  579. allowEnterKey: false, // Disable enter key to close the modal
  580. success: function (response) {
  581. if (response && response.length > 0) {
  582. const details = response[0];
  583. console.log("response:", details);
  584. console.log("details.waste_type.."+details.waste_type);
  585. $('#publicName').val(details.name);
  586. $('#contactNumber').val(details.mobile_no);
  587. $('#wasteSelection').val(details.quantity);
  588. $('#vehicleSelection').val(details.vehicle_name);
  589. $('#modalEmployeeCode').text(details.refid);
  590. $('#wastetypehidden').val(details.waste_type.trim());
  591. console.log("hidden waste type"+ $('#wastetypehidden').val().trim());
  592. // Fetch charges and calculate totals
  593. $.ajax({
  594. url: '/gcc/api/dumpregistration/getallcharges',
  595. type: 'GET',
  596. dataType: 'json',
  597. success: function (charges) {
  598. let processingRate = 0;
  599. let wasteRate = 0;
  600. let mixedWasteRate = 0;
  601. charges.forEach(charge => {
  602. if (charge.amount_type === "Processing Charges per ton") {
  603. processingRate = charge.amount;
  604. } else if (charge.amount_type === "Waste Collection Charges per ton") {
  605. wasteRate = charge.amount;
  606. } else if (charge.amount_type === "Mixed Waste Charges per ton") {
  607. mixedWasteRate = charge.amount;
  608. }
  609. });
  610. const vehicleType = details.vehicle_id;
  611. const wasteType = details.waste_type;
  612. const actualWeight = parseFloat($('#actualWeight').val() || 0); // Default to 0 if empty
  613. const processingTotal = (processingRate * actualWeight)/1000;
  614. const wasteTotal = (wasteRate * actualWeight)/1000;
  615. const totalAmount = (processingTotal + wasteTotal) ;
  616. if (wasteType === "Mixed Waste") {
  617. const mixedWasteTotal = (mixedWasteRate * actualWeight) / 1000;
  618. $('#processingCharges').hide(); // Hide processing
  619. $('#wasteCharges').show(); // Show as waste
  620. $('#wasteAmount').text(`${mixedWasteRate} x ${actualWeight} (/1000 In ton) = Rs ${mixedWasteTotal.toFixed(2)}`);
  621. $('#totalAmount').text(`Rs ${mixedWasteTotal.toFixed(2)}`);
  622. $('#totalCharges').show();
  623. $('#returnretrieddetailsModal').modal('show');
  624. return; // Exit early to skip rest of the logic
  625. }
  626. if (vehicleType === 4) {
  627. $('#processingCharges').show();
  628. $('#wasteCharges').show();
  629. $('#processingAmount').text(`${processingRate} x ${actualWeight} (/1000 In ton) = Rs ${processingTotal.toFixed(2)}`);
  630. $('#wasteAmount').text(`${wasteRate} x ${actualWeight} (/1000 In ton) = Rs ${wasteTotal.toFixed(2)}`);
  631. $('#totalAmount').text(`Rs ${totalAmount.toFixed(2)}`);
  632. } else {
  633. $('#processingCharges').show();
  634. $('#wasteCharges').hide();
  635. $('#processingAmount').text(`${processingRate} x ${actualWeight} (/1000 In ton) = Rs ${processingTotal.toFixed(2)}`);
  636. $('#totalAmount').text(`Rs ${processingTotal.toFixed(2)}`);
  637. }
  638. $('#totalCharges').show(); // Make sure it's visible
  639. $('#returnretrieddetailsModal').modal('show');
  640. },
  641. error: function () {
  642. Swal.fire("Error", "Failed to fetch charge amounts.", "error");
  643. }
  644. });
  645. } else {
  646. Swal.fire({
  647. icon: 'info',
  648. title: 'No Data',
  649. text: 'No details found for the selected employee.',
  650. confirmButtonText: 'OK',
  651. allowOutsideClick: false, // Disable clicking outside the modal to close it
  652. allowEscapeKey: false, // Disable escape key to close the modal
  653. allowEnterKey: false, // Disable enter key to close the modal
  654. });
  655. }
  656. },
  657. error: function () {
  658. Swal.fire({
  659. icon: 'error',
  660. title: 'Error',
  661. text: 'Failed to fetch employee details. Please try again.',
  662. confirmButtonText: 'OK',
  663. allowOutsideClick: false, // Disable clicking outside the modal to close it
  664. allowEscapeKey: false, // Disable escape key to close the modal
  665. allowEnterKey: false, // Disable enter key to close the modal
  666. });
  667. }
  668. });
  669. }
  670. function recalculateCharges() {
  671. const refId = $('#modalEmployeeCode').text();
  672. if (refId) {
  673. fetchRequestDetails(refId); // Recalculate with new weight
  674. }
  675. }
  676. function savePaymentDetailsFromModal() {
  677. const submitBtn = document.getElementById("submitbutton");
  678. submitBtn.disabled = true; // Disable on first click
  679. const refId = $("#modalEmployeeCode").text().trim();
  680. if (!refId) {
  681. Swal.fire("Error", "Reference ID missing. Cannot proceed.", "error");
  682. return;
  683. }
  684. savePaymentDetails(refId);
  685. }
  686. function toggleMobileInput() {
  687. const selectedType = $("input[name='paymentType']:checked").val();
  688. if (selectedType === "generateLink") {
  689. $("#mobileNumberContainer").show();
  690. } else {
  691. $("#mobileNumberContainer").hide();
  692. $("#payment_mobile_no").val(""); // Optional: clear input if not needed
  693. }
  694. }
  695. $(document).ready(function () {
  696. $("input[name='paymentType']").change(function () {
  697. const selectedId = $(this).attr("id");
  698. if (selectedId === "generateLink") {
  699. $("#mobileNumberContainer").show();
  700. } else {
  701. $("#mobileNumberContainer").hide();
  702. $("#payment_mobile_no").val(""); // Clear mobile number if QR selected
  703. }
  704. });
  705. });
  706. function savePaymentDetails(refId) {
  707. const submitBtn = document.getElementById("submitbutton");
  708. const actualWeight = parseFloat($("#actualWeight").val());
  709. const paymentType = $("input[name='paymentType']:checked").val();
  710. const wasteType = $('#wastetypehidden').val(); // Read stored value
  711. console.log("wasteType",wasteType);
  712. let paymentMobileNo = "";
  713. const processingCharge = parseFloat(
  714. ($("#processingAmount").text().split("Rs")[1] || "").trim()
  715. );
  716. const wasteChargeText = $("#wasteAmount").text();
  717. const wasteCharge = wasteChargeText ? parseFloat((wasteChargeText.split("Rs")[1] || "").trim()) : 0;
  718. const totalCharge = parseFloat(
  719. ($("#totalAmount").text().split("Rs")[1] || "").trim()
  720. );
  721. if (isNaN(actualWeight) || actualWeight <= 0) {
  722. Swal.fire("Invalid Weight", "Please enter a valid positive actual weight.", "warning");
  723. submitBtn.disabled = false;
  724. return;
  725. }
  726. if (!paymentType) {
  727. Swal.fire("Missing Payment Type", "Please select a payment type.", "warning");
  728. submitBtn.disabled = false;
  729. return;
  730. }
  731. if (paymentType === "generateLink") {
  732. paymentMobileNo = $("#payment_mobile_no").val();
  733. console.log("Input Value Raw:", document.getElementById("payment_mobile_no").value);
  734. const mobileRegex = /^[6-9]\d{9}$/;
  735. if (!mobileRegex.test(paymentMobileNo)) {
  736. Swal.fire("Invalid Mobile Number", "Please enter a valid 10-digit mobile number.", "warning");
  737. submitBtn.disabled = false;
  738. return;
  739. }
  740. }
  741. // Modified validation for charges
  742. if (wasteType != "Mixed Waste") {
  743. if (isNaN(processingCharge) || isNaN(wasteCharge) || isNaN(totalCharge)) {
  744. Swal.fire("Missing Charges", "Processing or waste charges are missing.", "warning");
  745. submitBtn.disabled = false;
  746. return;
  747. }
  748. }
  749. submitBtn.disabled = true;
  750. const payload = {
  751. refId: refId, // should be a valid actual value, not ${request.refid}
  752. actualWeight: actualWeight,
  753. paymentType: paymentType,
  754. paymentMobileNo: paymentMobileNo,
  755. processingCharge: processingCharge,
  756. wasteCharge: wasteCharge,
  757. totalCharge: totalCharge
  758. };
  759. console.log("saved data ", payload);
  760. fetch("/gcc/api/dumpregistration/saveWasteRequest", {
  761. method: "POST",
  762. headers: {
  763. "Content-Type": "application/json"
  764. },
  765. body: JSON.stringify(payload)
  766. })
  767. .then(response => {
  768. if (!response.ok) throw new Error("Network error");
  769. return response.text();
  770. })
  771. .then(result => {
  772. Swal.fire({
  773. title: "Success",
  774. text: "Details saved successfully!",
  775. icon: "success",
  776. allowOutsideClick: false,
  777. allowEscapeKey: false,
  778. confirmButtonText: "OK"
  779. }).then(() => {
  780. if (paymentType === "generateQR") {
  781. const url = `https://gccservices.in/dumpregistration/paymentform?requestId=${refId}`;
  782. //const url = `http://localhost:8077/dumpregistration/paymentform?requestId=${refId}`;
  783. window.open(url, '_blank');
  784. }
  785. location.reload();
  786. });
  787. })
  788. .catch(error => {
  789. console.error("Save failed:", error);
  790. Swal.fire("Error", "Something went wrong while saving!", "error");
  791. submitBtn.disabled = false;
  792. });
  793. }
  794. function validatePhoneNumber(input) {
  795. // Remove any non-numeric characters using regex
  796. input.value = input.value.replace(/[^0-9]/g, '');
  797. // Limit the input to 10 digits
  798. if (input.value.length > 10) {
  799. input.value = input.value.slice(0, 10);
  800. }
  801. }
  802. $("#actualWeight").on("input", function () {
  803. if (this.value < 0) this.value = "";
  804. });
  805. // Handle submit button click
  806. /* $(document).ready(function () {
  807. $('#submitbutton').click(function () {
  808. const refId = $('#modalEmployeeCode').text().trim();
  809. if (!refId) {
  810. Swal.fire("Missing Reference ID", "Employee code is missing.", "warning");
  811. return;
  812. }
  813. savePaymentDetails(refId);
  814. });
  815. }); */
  816. function fetchCompletedRequestDetails(refId) {
  817. console.log("refId", refId);
  818. $.ajax({
  819. url: '/gcc/api/dumpregistration/wastecollectorlist',
  820. type: 'GET',
  821. data: { refId: refId },
  822. dataType: "json",
  823. success: function (response) {
  824. if (response && response.length > 0) {
  825. const details = response[0];
  826. console.log("response:", details);
  827. $('#publicNames').val(details.name);
  828. $('#contactNumbers').val(details.mobile_no);
  829. $('#wasteSelections').val(details.quantity);
  830. $('#vehicleSelections').val(details.vehicle_name);
  831. $('#requestDates').val(details.request_date);
  832. $('#completed_actualWeight').val(details.actual_weight);
  833. $('#modalEmployeeCodes').text(details.refid);
  834. // ✅ Set refId to modal here
  835. $('#completeddetailsModal').data('refId', details.refid);
  836. $.ajax({
  837. url: '/gcc/api/dumpregistration/getallcharges',
  838. type: 'GET',
  839. dataType: 'json',
  840. success: function (charges) {
  841. let processingRate = 0;
  842. let wasteRate = 0;
  843. charges.forEach(charge => {
  844. if (charge.amount_type === "Processing Charges per ton") {
  845. processingRate = charge.amount;
  846. } else if (charge.amount_type === "Waste Collection Charges per ton") {
  847. wasteRate = charge.amount;
  848. }
  849. });
  850. const vehicleType = details.vehicle_id;
  851. const actualWeight = parseFloat(details.actual_weight || 0);
  852. const processingTotal = (processingRate * actualWeight)/1000;
  853. const wasteTotal = (wasteRate * actualWeight)/1000;
  854. const totalAmount = processingTotal + wasteTotal;
  855. // Display the values
  856. $('#processingChargess').show();
  857. $('#processingAmounts').text(`${processingRate} x ${actualWeight} (/1000 In ton) = Rs ${processingTotal.toFixed(2)}`);
  858. if (vehicleType === 4) {
  859. $('#wasteChargess').show();
  860. $('#wasteAmounts').text(`${wasteRate} x ${actualWeight} (/1000 In ton) = Rs ${wasteTotal.toFixed(2)}`);
  861. $('#totalChargess').show();
  862. $('#totalAmounts').text(`Rs ${totalAmount.toFixed(2)}`);
  863. } else {
  864. $('#wasteChargess').hide();
  865. $('#totalChargess').show();
  866. $('#totalAmounts').text(`Rs ${processingTotal.toFixed(2)}`);
  867. }
  868. },
  869. error: function () {
  870. Swal.fire("Error", "Failed to fetch charge amounts.", "error");
  871. }
  872. });
  873. // Set payment type radio as readonly and checked
  874. const paymentType = details.payment_type.toUpperCase();
  875. if (paymentType === 'GENERATELINK' || paymentType === 'LINK') {
  876. $('#completed_generateLinks').prop('checked', true).prop('disabled', true);
  877. $('#completed_generateQRs').prop('checked', false).prop('disabled', true);
  878. } else if (paymentType === 'GENERATEQR' || paymentType === 'QR') {
  879. $('#completed_generateQRs').prop('checked', true).prop('disabled', true);
  880. $('#completed_generateLinks').prop('checked', false).prop('disabled', true);
  881. }
  882. // Disable actual weight and hide action button if payment completed
  883. if (details.payment_status === 'COMPLETED') {
  884. $('#completed_actualWeight').prop('readonly', true);
  885. $('input[name="paymentType"]').prop('disabled', true);
  886. $('.btn.btn-outline-secondary').text('Close'); // Change Cancel to Close
  887. } else {
  888. $('#actualWeight').prop('readonly', false);
  889. $('input[name="paymentType"]').prop('disabled', false);
  890. $('.btn.btn-primary').show(); // Show Submit
  891. $('.btn.btn-outline-secondary').text('Cancel');
  892. }
  893. $('#completeddetailsModal').modal('show');
  894. } else {
  895. Swal.fire({
  896. icon: 'info',
  897. title: 'No Data',
  898. text: 'No details found for the selected employee.',
  899. confirmButtonText: 'OK'
  900. });
  901. }
  902. },
  903. error: function () {
  904. Swal.fire({
  905. icon: 'error',
  906. title: 'Error',
  907. text: 'Failed to fetch employee details. Please try again.',
  908. confirmButtonText: 'OK'
  909. });
  910. }
  911. });
  912. }
  913. function downloadAcknowledgementViaAjax() {
  914. const modal = $('#completeddetailsModal');
  915. // Retrieve the stored refId from the modal's data
  916. const requestId = modal.data('refId');
  917. console.log("Modal refId:", requestId); // ✅ Debugging
  918. const link = document.createElement('a');
  919. link.href = `https://gccservices.in/dumpregistration/paymentform?requestId=${requestId}`; // remove the `;` at the end
  920. // link.href = `http://localhost:8077/dumpregistration/paymentform?requestId=${requestId}`;
  921. link.target = "_blank";
  922. document.body.appendChild(link);
  923. link.click();
  924. document.body.removeChild(link);
  925. }
  926. </script>
  927. </body>
  928. </html>