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.

740 lines
26 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/head-admin :: head}"></head>
  4. <meta charset="ISO-8859-1">
  5. <!-- Include DataTables CSS -->
  6. </head>
  7. <style>
  8. .block-content {
  9. padding-bottom: 10px;
  10. }
  11. .small-input {
  12. width: 150px;
  13. /* Adjust the width as needed */
  14. }
  15. .small-table th,
  16. .small-table td {
  17. font-size: 14px;
  18. /* Adjust font size as needed */
  19. }
  20. /* Reduce padding for table cells */
  21. .small-table td,
  22. .small-table th {
  23. padding: 5px;
  24. /* Adjust padding as needed */
  25. }
  26. .card-body table {
  27. width: 100%;
  28. padding: 100px;
  29. }
  30. .card-body th,
  31. td {
  32. padding: 8px;
  33. text-align: left;
  34. }
  35. .amount-cell {
  36. text-align: right;
  37. padding-right: 1rem;
  38. /* Adjust padding as needed */
  39. }
  40. </style>
  41. <body>
  42. <div id="page-container"
  43. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  44. <aside th:replace="~{fragments/aside-right :: aside}"></aside>
  45. <nav th:replace="~{fragments/nav-caretaker :: nav}"></nav>
  46. <header th:replace="~{fragments/header-caretaker :: header}"></header>
  47. <div class="content" style="margin-top: 77px;">
  48. <div class="block block-rounded">
  49. <div class="block-header bg-info text-white" style="background-color: #2c726c !important">
  50. <h3 class="block-title">Settlement List</h3>
  51. </div>
  52. <div class="block-content">
  53. <div class="table-responsive">
  54. <table id="settlementListTable" class="table table-bordered table-vcenter">
  55. <thead>
  56. <tr>
  57. <th>S.No</th>
  58. <th>Zone</th>
  59. <th>Division</th>
  60. <th>Booking Id</th>
  61. <th>Booking Date</th>
  62. <th>Settlement id</th>
  63. <th>Settlement Raised Date</th>
  64. <th>Deposit Amount</th>
  65. <th>Collection Pending(if any)</th>
  66. <th>Refund Amount</th>
  67. <th>Refund Status</th>
  68. <th>View Details</th>
  69. </tr>
  70. </thead>
  71. <tbody>
  72. <!-- Iterate over past bookings and display them -->
  73. <tr th:each="settlemetList,rowStat : ${collectionPendingList}"
  74. th:if="${settlemetList.settlement != null}">
  75. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  76. <td class="text-center" th:text="${settlemetList.hallDetails.zone}"></td>
  77. <td class="text-center" th:text="${settlemetList.hallDetails.division}"></td>
  78. <td class="text-center" th:text="${settlemetList.bookingId}"></td>
  79. <td class="text-center" th:text="${settlemetList.bookingDate}"></td>
  80. <td class="text-center" th:text="${settlemetList.settlement.settlementId}"></td>
  81. <td class="text-center" th:text="${settlemetList.settlement.cdate}"></td>
  82. <td class="text-center" th:text="${settlemetList.settlement.depositAmount}"></td>
  83. <td class="text-center" th:text="${settlemetList.settlement.collectionPending}">
  84. </td>
  85. <td class="text-center" th:text="${settlemetList.settlement.refundedAmount}"></td>
  86. <td class="text-center" th:text="${settlemetList.refundStatus}"></td>
  87. <td>
  88. <span class="badge bg-primary" style="cursor:pointer"
  89. th:onclick="approve([[${settlemetList.settlement.settlementId}]])">View</span>
  90. <!-- <span class="badge bg-warning" style="cursor: pointer;"
  91. th:if="${#strings.trim(settlemetList.RefundStatus) == 'REJECTED'}"
  92. th:onclick="settleTheAmount([[${settlemetList.bookingId}]])">Raise
  93. Again</span> -->
  94. <span class="badge bg-warning" style="cursor: pointer;"
  95. th:if="${settlemetList.settlement.collectionPending > 0} and ${settlemetList.settlement.collectionStatus != 'paid'}"
  96. th:onclick="|fetchQRCode(${settlemetList.bookingId})|">QR
  97. </span>
  98. </td>
  99. </tr>
  100. </tbody>
  101. </table>
  102. </div>
  103. </div>
  104. </div>
  105. </div><br>
  106. <br>
  107. <br>
  108. <br>
  109. </div>
  110. <!--modal for pending-->
  111. <div class="modal fade backdrop" id="settlementinformation" data-backdrop="static" tabindex="-1" role="dialog"
  112. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  113. <div class="modal-dialog modal-lg" role="document">
  114. <div class="modal-content">
  115. <form id="ownform">
  116. <div class="block block-rounded block-themed block-transparent mb-0">
  117. <div class="block-header bg-primary-dark">
  118. <h3 class="block-title" id="2mtitle">Settlement Information</h3>
  119. <div class="block-options">
  120. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  121. aria-label="Close">
  122. <i class="fa fa-fw fa-times"></i>
  123. </button>
  124. </div>
  125. </div>
  126. <div class="block-content row">
  127. <div class="col-md-12 col-lg-12 col-sm-12">
  128. <input type="hidden" class="form-control text-center" name="settlementid"
  129. id="settlementid" disabled />
  130. <div class="card-body">
  131. <table>
  132. <tr>
  133. <th colspan="10" style="background-color: #f2f2f2;">User Details</th>
  134. </tr>
  135. <tr>
  136. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:</th>
  137. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_userName">
  138. </td>
  139. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
  140. </th>
  141. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  142. id="td_mobileNumber"></td>
  143. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:</th>
  144. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_usertype">
  145. </td>
  146. </tr>
  147. <tr>
  148. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:</th>
  149. <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  150. id="td_useraddress"></td>
  151. </tr>
  152. </table>
  153. </div>
  154. </div>
  155. <div class="col-md-12 col-lg-12 col-sm-12">
  156. <input type="hidden" class="form-control text-center" name="settlementid"
  157. id="settlementid" disabled />
  158. <div class="card-body">
  159. <table>
  160. <tr>
  161. <th colspan="4" style="background-color: #f2f2f2;">Booking
  162. Details(Booking Id:-<span id="booking_id" style="color:blue"></span>)
  163. </th>
  164. </tr>
  165. <tr>
  166. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:</th>
  167. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  168. id="td_bookingDate"></td>
  169. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit Amount:
  170. </th>
  171. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  172. id="td_depositeAmount"></td>
  173. </tr>
  174. <tr>
  175. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:</th>
  176. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_startDate">
  177. </td>
  178. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:</th>
  179. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  180. id="td_hallAmount"></td>
  181. </tr>
  182. <tr>
  183. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END
  184. Date:</th>
  185. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_endDate">
  186. </td>
  187. <th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
  188. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  189. id="td_gst"></td>
  190. </tr>
  191. <tr>
  192. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:</th>
  193. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  194. id="td_startingSlot"></td>
  195. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:</th>
  196. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  197. id="td_totalAmount"></td>
  198. </tr>
  199. <tr>
  200. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:</th>
  201. <td colspan="3" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  202. id="td_endingSlot"></td>
  203. </tr>
  204. </table>
  205. </div>
  206. </div>
  207. <div class="col-md-12 col-lg-12 col-sm-12">
  208. <div class="card-body">
  209. <table>
  210. <tr>
  211. <th colspan="6" style="background-color: #f2f2f2;">EB Details</th>
  212. </tr>
  213. <tr>
  214. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Consumer Number:
  215. </th>
  216. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_EBNumber">
  217. </td>
  218. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount Per Unit:
  219. </th>
  220. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  221. id="td_ebamountperunit"></td>
  222. <th style="padding: 0.45rem 0.45rem;font-weight: normal">MF DT Unit:</th>
  223. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  224. id="td_mfDtUnit"></td>
  225. </tr>
  226. <tr>
  227. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Reading:</th>
  228. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  229. id="td_startingReading"></td>
  230. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END Reading:</th>
  231. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  232. id="td_endingReading"></td>
  233. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Unit Consumed:</th>
  234. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  235. id="td_usedunit"></td>
  236. </tr>
  237. <tr>
  238. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
  239. <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  240. id="td_electricityamount"></td>
  241. </tr>
  242. </table>
  243. </div>
  244. </div>
  245. <div id="damageDetails" style="margin-bottom: -17px;"></div>
  246. <div class="col-md-12 col-lg-12 col-sm-12">
  247. <div class="card-body">
  248. <table>
  249. <tr>
  250. <th colspan="2" style="background-color: #f2f2f2;">Amount
  251. to be Refunded</th>
  252. </tr>
  253. <tr>
  254. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit Amount:
  255. </th>
  256. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  257. id="td_depositeamountforrefund">0</td>
  258. </tr>
  259. <tr>
  260. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
  261. <td class="fw-semibold amount-cell"
  262. style="padding: 0.45rem 0.45rem;color:red" id="td_ebAmount">0</td>
  263. </tr>
  264. <tr>
  265. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Damage(if any):
  266. </th>
  267. <td class="fw-semibold amount-cell"
  268. style="padding: 0.45rem 0.45rem;color:red" id="td_damage">0</td>
  269. </tr>
  270. <tr id="pendingcolumn">
  271. <th id="th_settel_label"
  272. style="padding: 0.45rem 0.45rem;font-weight: normal">Collection Pending
  273. Amount:</th>
  274. <td class="fw-semibold amount-cell"
  275. style="padding: 0.45rem 0.45rem; color: green;" id="td_pending_amt">0
  276. </td>
  277. </tr>
  278. <tr id="collectionstatuscolumn">
  279. <th id="label" style="padding: 0.45rem 0.45rem;font-weight: normal">
  280. Collection Pending Status
  281. :</th>
  282. <td class="fw-semibold amount-cell"
  283. style="padding: 0.45rem 0.45rem; color: green;"
  284. id="td_collection_status">
  285. </td>
  286. </tr>
  287. <tr>
  288. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Actual refundable
  289. Amount:</th>
  290. <td class="fw-semibold amount-cell"
  291. style="padding: 0.45rem 0.45rem; color: green;" id="td_settel_amt">0
  292. </td>
  293. </tr>
  294. </table>
  295. </div>
  296. </div>
  297. <!-- End damage detail -->
  298. </div>
  299. <div class="block-content block-content-full text-end bg-body" id="mbutton2">
  300. <button type="button" class="btn btn-sm btn-alt-secondary"
  301. data-bs-dismiss="modal">Close</button>
  302. <a id="downloadLink" style="display: none;"></a>
  303. </div>
  304. </div>
  305. </form>
  306. </div>
  307. </div>
  308. </div>
  309. <div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
  310. aria-hidden="true">
  311. <div class="modal-dialog modal-lg" role="document">
  312. <div class="modal-content">
  313. <div class="modal-header">
  314. <h5 class="modal-title" id="fileModalLabel">File Preview</h5>
  315. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
  316. <span aria-hidden="true">&times;</span>
  317. </button>
  318. </div>
  319. <div class="modal-body">
  320. <embed id="filePreview" src="" width="100%" height="600px">
  321. </div>
  322. <div class="modal-footer">
  323. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  324. </div>
  325. </div>
  326. </div>
  327. </div>
  328. <div class="modal fade" id="qrview" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel" aria-hidden="true">
  329. <div class="modal-dialog modal-sm" role="document">
  330. <div class="modal-content">
  331. <div class="modal-header">
  332. <h5 class="modal-title" id="qrview">QR Code for Collection Pending</h5>
  333. </div>
  334. <div class="modal-body">
  335. <div>
  336. <img style="border:4px solid #15455D;width: 256px; height: 260px;border-radius:10px;"
  337. id="qrCodeImage" alt="QR Code">
  338. </div>
  339. </div>
  340. <div class="modal-footer">
  341. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  342. </div>
  343. </div>
  344. </div>
  345. </div>
  346. <div th:replace="~{fragments/resetpassword :: div}"></div>
  347. <script th:replace="~{fragments/script :: script}"></script>
  348. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  349. <script th:replace="~{fragments/loginscript :: script}"></script>
  350. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  351. <script>
  352. $(document).ready(
  353. function () {
  354. // DataTables buttons configuration
  355. var buttons = [{
  356. extend: 'pageLength',
  357. className: 'btn btn-primary'
  358. }, {
  359. title: 'Data export',
  360. extend: 'copyHtml5',
  361. text: 'Copy',
  362. className: 'btn btn-primary',
  363. id: 'copyBtn'
  364. }, {
  365. extend: 'excelHtml5',
  366. text: 'Excel',
  367. className: 'btn btn-primary',
  368. id: 'excelBtn'
  369. }, {
  370. extend: 'csvHtml5',
  371. text: 'CSV',
  372. className: 'btn btn-primary',
  373. id: 'csvBtn'
  374. }, {
  375. extend: 'pdfHtml5',
  376. text: 'PDF',
  377. className: 'btn btn-primary',
  378. id: 'pdfBtn'
  379. },
  380. ];
  381. $('#settlementListTable').DataTable(
  382. {
  383. dom: 'Bftip',
  384. columnDefs: [{
  385. targets: 'no-sort',
  386. orderable: false
  387. }],
  388. lengthMenu: [
  389. [50, 100, 200, 500, -1],
  390. ['50 rows', '100 rows', '200 rows',
  391. '500 rows', 'Show all']],
  392. scrollY: '50vh',
  393. fixedColumns: {
  394. left: 1,
  395. right: 1
  396. },
  397. buttons: [buttons],
  398. responsive: true,
  399. searching: true, // Enable search
  400. select: false,
  401. processing: false,
  402. });
  403. // Link the search input to DataTable
  404. $('#searchInput').on('keyup', function () {
  405. dataTable.search(this.value).draw();
  406. });
  407. });
  408. function showDamageImage(imageUrl) {
  409. document.getElementById('filePreview').src = imageUrl;
  410. $('#fileModal').modal('show');
  411. }
  412. function settleTheAmount(bookingId) {
  413. window.location.href = '/communityhall/caretaker/caretakerpage?bookingId=' + bookingId;
  414. }
  415. function approve(settlementId) {
  416. $.ajax({
  417. type: "GET",
  418. url: '/communityhall/api/officer/getSettlementList',
  419. data: {
  420. 'settlementsid': settlementId
  421. },
  422. success: function (x) {
  423. showSettlementInfo(x)
  424. showDamageDetails(x);
  425. }
  426. });
  427. }
  428. function showSettlementInfo(list) {
  429. $('#settlementinformation').modal({
  430. backdrop: 'static',
  431. keyboard: false
  432. });
  433. $('#settlementinformation').modal('show');
  434. document.getElementById("settlementid").value = list.settlement.settlementId;
  435. document.getElementById("td_userName").innerHTML = list.users.name;
  436. document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
  437. document.getElementById("td_usertype").innerHTML = list.users.usertype;
  438. var userDetails = list.users;
  439. var userDetailsString =
  440. userDetails.doorNo + ", " +
  441. userDetails.street + ", " +
  442. userDetails.area + ", " +
  443. userDetails.location + " ,Chennai- " +
  444. userDetails.pinCode;
  445. document.getElementById("td_useraddress").innerHTML = userDetailsString;
  446. document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
  447. document.getElementById("td_depositeAmount").innerHTML = "₹ " + parseFloat(list.depositAmount).toFixed(2);
  448. document.getElementById("td_hallAmount").innerHTML = "₹ " + parseFloat(list.hallAmount).toFixed(2);
  449. document.getElementById("td_totalAmount").innerHTML = "₹ " + parseFloat(list.amountReceived).toFixed(2);
  450. var gstcl = (list.hallAmount * (list.hallDetails.gst / 100));
  451. var formattedGst = gstcl.toFixed(2);
  452. document.getElementById("td_gst").innerHTML = "₹ " + formattedGst;
  453. document.getElementById("td_startDate").innerHTML = list.startDate;
  454. document.getElementById("td_endDate").innerHTML = list.endDate;
  455. document.getElementById("booking_id").innerHTML = list.bookingId;
  456. function getTimeSlot(slotValue) {
  457. var timeSlot;
  458. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  459. if (trimmedSlotValue === '1') {
  460. timeSlot = 'Morning';
  461. } else if (trimmedSlotValue === '2') {
  462. timeSlot = 'Evening';
  463. } else {
  464. timeSlot = 'Unknown';
  465. }
  466. return timeSlot;
  467. }
  468. document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
  469. document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
  470. document.getElementById("td_EBNumber").innerHTML = list.hallDetails.ebNumber;
  471. document.getElementById("td_startingReading").innerHTML = list.ebDetails.startingReading;
  472. document.getElementById("td_endingReading").innerHTML = list.ebDetails.endingReading;
  473. document.getElementById("td_usedunit").innerHTML = list.ebDetails.usedUnit;
  474. document.getElementById("td_ebamountperunit").innerHTML = "₹ " + parseFloat(list.hallDetails.ebCostPerUnit).toFixed(2);
  475. document.getElementById("td_mfDtUnit").innerHTML = "₹ " + parseFloat(list.hallDetails.mfDtUnit).toFixed(2);
  476. document.getElementById("td_depositeamountforrefund").innerHTML = "₹ " + parseFloat(list.depositAmount).toFixed(2);
  477. document.getElementById("td_ebAmount").innerHTML = "₹ " + parseFloat(list.ebDetails.ebAmount).toFixed(2);
  478. document.getElementById("td_electricityamount").innerHTML = "₹ " + parseFloat(list.ebDetails.ebAmount).toFixed(2);
  479. document.getElementById("td_damage").innerHTML = "₹ " + parseFloat(list.settlement.damageAmount).toFixed(2);
  480. var eb_amt = list.ebDetails.ebAmount;
  481. var deposit_amt = list.depositAmount;
  482. var tem_total = deposit_amt - eb_amt;
  483. $("#td_settel_amt").html('');
  484. $("#td_settel_amt").html(tem_total);
  485. }
  486. function showDamageDetails(data) {
  487. var damageFieldContainer = $('#damageDetails');
  488. damageFieldContainer.empty();
  489. // Create a div for table responsiveness
  490. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
  491. // Create table with similar classes and styles to the modal table
  492. var table = $('<table>').addClass('table table-bordered table-striped').css({ 'width': '97%', 'border-color': 'black', 'border-top-color': 'white' });
  493. var thead = $('<thead>').addClass('thead-light');
  494. var tbody = $('<tbody>');
  495. // Create Damage Details header row
  496. var headerRow = $('<tr>').appendTo(thead);
  497. $('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
  498. 'padding': '0.45rem 0.45rem',
  499. 'background-color': '#f2f2f2',
  500. 'font-weight': 'bold',
  501. 'color': 'black',
  502. }).appendTo(headerRow);
  503. // Create table header row
  504. var columnHeadersRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  505. $('<th>').text('S.No').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  506. $('<th>').text('Asset Name').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  507. $('<th>').text('Damage Img').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  508. $('<th>').text('Cost').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  509. $('<th>').text('Qty').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  510. $('<th>').text('Amount').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  511. var totalAmount = 0;
  512. // Check if damageList is empty
  513. if (data.damageList.length === 0) {
  514. var row = $('<tr>').appendTo(tbody);
  515. $('<td>').attr('colspan', '6').text('No Damaged Items').css({
  516. 'padding': '0.45rem 0.45rem',
  517. 'text-align': 'center',
  518. 'font-weight': 'bold',
  519. 'background-color': '#f2f2f2'
  520. }).appendTo(row);
  521. } else {
  522. $.each(data.damageList, function (index, detail) {
  523. var row = $('<tr>').appendTo(tbody);
  524. $('<td>').text(index + 1).css({
  525. 'padding': '0.45rem 0.45rem',
  526. 'text-align': 'center'
  527. }).appendTo(row);
  528. $('<td>').text(detail.assetName).css({
  529. 'padding': '0.45rem 0.45rem',
  530. 'text-align': 'center'
  531. }).appendTo(row);
  532. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
  533. showDamageImage(detail.damageImageUrl);
  534. });
  535. $('<td>').css({
  536. 'padding': '0.45rem 0.45rem',
  537. 'text-align': 'center'
  538. }).append(viewLink).appendTo(row);
  539. var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
  540. $('<td>').text('₹ ' + assetamt).css({
  541. 'padding': '0.45rem 0.45rem',
  542. 'text-align': 'center'
  543. }).appendTo(row);
  544. $('<td>').text(detail.quantity).css({
  545. 'padding': '0.45rem 0.45rem',
  546. 'text-align': 'center'
  547. }).appendTo(row);
  548. var amount = detail.assetAmount;
  549. totalAmount += amount;
  550. $('<td>').text('₹ ' + amount.toFixed(2)).css({
  551. 'padding': '0.45rem 0.45rem',
  552. 'text-align': 'right'
  553. }).appendTo(row);
  554. });
  555. // Add row for total amount
  556. var totalRow = $('<tr>').appendTo(tbody);
  557. $('<td>').attr('colspan', '5').text('Total Amount').css({
  558. 'padding': '0.45rem 0.45rem',
  559. 'font-weight': 'bold',
  560. 'background-color': '#f2f2f2'
  561. }).appendTo(totalRow);
  562. $('<td>').text('₹ ' + totalAmount.toFixed(2)).css({
  563. 'padding': '0.45rem 0.45rem',
  564. 'text-align': 'right'
  565. }).appendTo(totalRow);
  566. $("#td_dam_amt").html('₹ ' + totalAmount.toFixed(2));
  567. }
  568. // Append the table elements to the container div
  569. table.append(thead, tbody);
  570. tableResponsiveDiv.append(table);
  571. damageFieldContainer.append(tableResponsiveDiv);
  572. var temp_total = parseFloat($("#td_settel_amt").html());
  573. var settleAmount = temp_total - totalAmount;
  574. if (settleAmount < 0) {
  575. var pendingstatus = data.settlement.collectionStatus;
  576. $("#td_settel_amt").html(0);
  577. $("#pendingcolumn").show();
  578. $("#collectionstatuscolumn").show();
  579. $('#td_collection_status').html(pendingstatus);
  580. $("#td_pending_amt").html(Math.abs(settleAmount).toFixed(2));
  581. $("#td_pending_amt").css("color", "red");
  582. $("#approvebutton").show();
  583. $("#rejectbutton").show();
  584. } else {
  585. $("#td_settel_amt").html('₹ ' + settleAmount.toFixed(2));
  586. $("#pendingcolumn").hide();
  587. $("#collectionstatuscolumn").hide();
  588. $("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
  589. $("#approvebutton").hide();
  590. $("#rejectbutton").hide();
  591. }
  592. }
  593. function showDamageImage(damageImageUrl) {
  594. document.getElementById('filePreview').src = damageImageUrl;
  595. $('#fileModal').modal('show');
  596. }
  597. function accept() {
  598. let id = document.getElementById("settlementid").value;
  599. Swal.fire({
  600. title: 'Do you want to Approve this Settlement ?',
  601. showDenyButton: true,
  602. showCancelButton: true,
  603. confirmButtonText: 'YES',
  604. denyButtonText: 'NO',
  605. }).then((result) => {
  606. /* Read more about isConfirmed, isDenied below */
  607. if (result.isConfirmed) {
  608. $.ajax({
  609. type: "POST",
  610. url: '/communityhall/api/officer/updateApprovedSettlementStatus/' + id,
  611. data: {
  612. 'status': 'COMPLETED',
  613. 'comments': 'Accepted',
  614. 'settlementId': id
  615. },
  616. success: function (data, textStatus, xhr) {
  617. if (xhr.status === 200) { // Check if the response status is OK
  618. Swal.fire(
  619. 'Done',
  620. 'Successfully Accepted to the ID:' + id,
  621. 'success'
  622. ).then(() => {
  623. location.reload();
  624. });
  625. } else {
  626. Swal.fire(
  627. 'Error',
  628. 'Failed to accept the user',
  629. 'error'
  630. );
  631. }
  632. },
  633. error: function (xhr, textStatus, errorThrown) {
  634. Swal.fire(
  635. 'Error',
  636. 'Failed to accept the user',
  637. 'error'
  638. );
  639. }
  640. });
  641. } else if (result.isDenied) {
  642. Swal.fire('Changes are not saved', '', 'info')
  643. }
  644. });
  645. }
  646. function fetchQRCode(bookingId) {
  647. $.ajax({
  648. url: '/communityhall/careTaker/api/generateQRCode',
  649. type: 'GET',
  650. data: { bookingId: bookingId },
  651. success: function (data) {
  652. // Set the QR code image source
  653. $('#qrview').modal('show');
  654. $('#qrCodeImage').attr('src', 'data:image/png;base64,' + data);
  655. // console.log(data);
  656. },
  657. error: function (jqXHR, textStatus, errorThrown) {
  658. console.error('Error fetching QR code:', textStatus, errorThrown);
  659. }
  660. });
  661. }
  662. </script>
  663. </body>
  664. </html>