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.

1506 lines
55 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/head-headquarters :: head}"></head>
  4. <style>
  5. .card-body table {
  6. width: 100%;
  7. padding: 100px;
  8. }
  9. .card-body th,
  10. td {
  11. padding: 8px;
  12. text-align: left;
  13. }
  14. .amount-cell {
  15. text-align: right;
  16. padding-right: 1rem;
  17. /* Adjust padding as needed */
  18. }
  19. .table {
  20. width: 100% !important;
  21. }
  22. </style>
  23. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  24. integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  25. crossorigin="anonymous"></script>
  26. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
  27. integrity="sha384-vUDzXQ+PSziH/FUbe0YVEv7qEoRJRT5D02B1RWZC1yyP3+n6K8N7q0clmKf3nDOJ"
  28. crossorigin="anonymous"></script>
  29. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  30. integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  31. crossorigin="anonymous"></script>
  32. <body>
  33. <!-- Page Container -->
  34. <div id="page-container"
  35. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  36. <!-- Side Overlay aside (right)-->
  37. <aside th:replace="~{fragments/aside-right :: aside}"></aside>
  38. <!-- END Side Overlay (right)-->
  39. <!-- Sidebar Nav-->
  40. <nav th:replace="~{fragments/nav-headquarters :: nav}"></nav>
  41. <!-- END Sidebar -->
  42. <!-- Header -->
  43. <header th:replace="~{fragments/header-headquarters :: header}"></header>
  44. <!-- Main Container -->
  45. <main id="main-container" class="container mt-5">
  46. <ul class="nav nav-tabs" id="myTab" role="tablist">
  47. <li class="nav-item" role="presentation">
  48. <a class="nav-link active" id="settlement-tab" data-toggle="tab" href="#settlement" role="tab"
  49. aria-controls="settlement" aria-selected="true">Settlement Refund</a>
  50. </li>
  51. <li class="nav-item" role="presentation">
  52. <a class="nav-link" id="cancel-tab" data-toggle="tab" href="#cancel" role="tab"
  53. aria-controls="cancel" aria-selected="false">Cancelled Bookings Refund</a>
  54. </li>
  55. <li class="nav-item" role="presentation">
  56. <a class="nav-link" id="gcc-tab" data-toggle="tab" href="#gcc" role="tab" aria-controls="gcc"
  57. aria-selected="false">GCC Blocked/Rejected Refund</a>
  58. </li>
  59. </ul>
  60. <div class="tab-content" id="myTabContent">
  61. <!-- Settlement Approval Tab -->
  62. <div class="tab-pane fade show active" id="settlement" role="tabpanel" aria-labelledby="settlement-tab">
  63. <div class="block-header block-header-default">
  64. <h3 class="block-title">List of Settlement Refund Pending</h3>
  65. </div>
  66. <div class="block-content p-0">
  67. <div class="p-sm-4 p-0">
  68. <div class="table-responsive">
  69. <table class="table table-bordered table-striped table-vcenter js-dataTable-responsive" id="SettlementApprovedListTable">
  70. <thead class="thead-light">
  71. <tr>
  72. <th>S.no</th>
  73. <th>Zone</th>
  74. <th>Division</th>
  75. <th>Hall Name</th>
  76. <th>Booking Id</th>
  77. <th>Booking Date</th>
  78. <th>Settlement Id</th>
  79. <th>Settlement raised Date</th>
  80. <th>Deposit Amount</th>
  81. <th>Collection Pending</th>
  82. <th>Refund Amount</th>
  83. <th>Status</th>
  84. <th>Action</th>
  85. </tr>
  86. </thead>
  87. <tbody>
  88. <tr th:each="settlement, rowStat : ${settlementlist}">
  89. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  90. <td class="text-center" th:text="${settlement.hallDetails.zone}"></td>
  91. <td class="text-center" th:text="${settlement.hallDetails.division}"></td>
  92. <td class="text-center" th:text="${settlement.hallDetails.hallName}"></td>
  93. <td class="text-center" th:text="${settlement.bookingId}"></td>
  94. <td class="text-center" th:text="${settlement.bookingDate}"></td>
  95. <td class="text-center" th:text="${settlement.settlement.settlementId}">
  96. </td>
  97. <td class="text-center" th:text="${settlement.settlement.cdate}"></td>
  98. <td class="text-center" th:text="${settlement.depositAmount}"></td>
  99. <td class="text-center"
  100. th:text="${settlement.settlement.collectionPending}"></td>
  101. <td class="text-center" th:text="${settlement.settlement.refundedAmount}">
  102. </td>
  103. <td class="text-center" th:text="${settlement.refundStatus}"></td>
  104. <td>
  105. <p>
  106. <span class="badge bg-warning" style="cursor: pointer;"
  107. th:onclick="pending([[${settlement.settlement.settlementId}]])">Approve</span>
  108. </p>
  109. </td>
  110. </tr>
  111. </tbody>
  112. </table>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. <!-- CancelBooking Tab -->
  118. <div class="tab-pane fade" id="cancel" role="tabpanel" aria-labelledby="cancel-tab">
  119. <div class="block-header block-header-default">
  120. <h3 class="block-title">Cancelled Bookings with Refund Pending</h3>
  121. </div>
  122. <div class="block-content p-0">
  123. <div class="p-sm-4 p-0">
  124. <div class="table-responsive">
  125. <table class="table table-bordered table-striped table-vcenter js-dataTable-responsive" id="cancelledApprovedListTable">
  126. <thead class="thead-light">
  127. <tr>
  128. <th>S.no</th>
  129. <th>Booking Id</th>
  130. <th>Booking Date</th>
  131. <th>Hall Name</th>
  132. <th>User Name</th>
  133. <th>User type</th>
  134. <th>Reason for Booking</th>
  135. <th>Refund Amount</th>
  136. <th>Action</th>
  137. </tr>
  138. </thead>
  139. <tbody>
  140. <tr th:each="cancelledbookings, rowStat : ${cancelledbookings}">
  141. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  142. <td class="text-center" th:text="${cancelledbookings.bookingId}"></td>
  143. <td class="text-center" th:text="${cancelledbookings.bookingDate}"></td>
  144. <td class="text-center" th:text="${cancelledbookings.hallDetails.hallName}">
  145. </td>
  146. <td class="text-center" th:text="${cancelledbookings.users.name}"></td>
  147. <td class="text-center" th:text="${cancelledbookings.users.usertype}"></td>
  148. <td class="text-center" th:text="${cancelledbookings.reason}"></td>
  149. <td class="text-center"
  150. th:text="${cancelledbookings.depositAmount}"></td>
  151. <td>
  152. <p>
  153. <span class="badge bg-warning" style="cursor: pointer;"
  154. th:onclick="cancelledbooking([[${cancelledbookings.bookingId}]])">Approve</span>
  155. </p>
  156. </td>
  157. </tr>
  158. </tbody>
  159. </table>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. <!-- GCC Blocked/Rejected Approved Tab -->
  165. <div class="tab-pane fade" id="gcc" role="tabpanel" aria-labelledby="gcc-tab">
  166. <div class="block-header block-header-default">
  167. <h3 class="block-title">GCC Blocked/Rejected Bookings with Refund Pending</h3>
  168. </div>
  169. <div class="block-content p-0">
  170. <div class="p-sm-4 p-0">
  171. <div class="table-responsive">
  172. <table class="table table-bordered table-striped table-vcenter js-dataTable-responsive" id="rejectedApprovedListTable">
  173. <thead class="thead-light">
  174. <tr>
  175. <th>S.no</th>
  176. <th>Booking Id</th>
  177. <th>Booking Date</th>
  178. <th>Hall Name</th>
  179. <th>User Name</th>
  180. <th>User type</th>
  181. <th>Reason for Booking</th>
  182. <th>Reason for Rejection</th>
  183. <th>Refund Amount</th>
  184. <th>Action</th>
  185. </tr>
  186. </thead>
  187. <tbody>
  188. <tr th:each="rejectedbookings, rowStat : ${rejectedbookings}">
  189. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  190. <td class="text-center" th:text="${rejectedbookings.bookingId}"></td>
  191. <td class="text-center" th:text="${rejectedbookings.bookingDate}"></td>
  192. <td class="text-center" th:text="${rejectedbookings.hallDetails.hallName}">
  193. </td>
  194. <td class="text-center" th:text="${rejectedbookings.users.name}"></td>
  195. <td class="text-center" th:text="${rejectedbookings.users.usertype}"></td>
  196. <td class="text-center" th:text="${rejectedbookings.reason}"></td>
  197. <td class="text-center" th:text="${rejectedbookings.comments}"></td>
  198. <td class="text-center" th:text="${rejectedbookings.amountReceived}"></td>
  199. <td>
  200. <p>
  201. <span class="badge bg-warning" style="cursor: pointer;"
  202. th:onclick="rejectedbooking([[${rejectedbookings.bookingId}]])">Approve</span>
  203. </p>
  204. </td>
  205. </tr>
  206. </tbody>
  207. </table>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </main>
  214. <!-- End User Details Modal-->
  215. <!-- END Main Container -->
  216. <!-- Modal for Pending -->
  217. <div class="modal fade backdrop" id="pendingSettlementForm" data-backdrop="static" tabindex="-1" role="dialog"
  218. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  219. <div class="modal-dialog modal-lg" role="document">
  220. <div class="modal-content">
  221. <form id="ownform" onsubmit="return rejectsubmit();">
  222. <div class="block block-rounded block-themed block-transparent mb-0">
  223. <div class="block-header bg-primary-dark">
  224. <h3 class="block-title" id="2mtitle">Settlement Information</h3>
  225. <div class="block-options">
  226. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  227. aria-label="Close">
  228. <i class="fa fa-fw fa-times"></i>
  229. </button>
  230. </div>
  231. </div>
  232. <div class="block-content row">
  233. <div class="col-md-12 col-lg-12 col-sm-12">
  234. <input type="hidden" class="form-control text-center" name="settlementid"
  235. id="settlementid" disabled />
  236. <div class="card-body">
  237. <table>
  238. <tr>
  239. <th colspan="10" style="background-color: #f2f2f2;">User Details</th>
  240. </tr>
  241. <tr>
  242. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
  243. </th>
  244. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  245. id="td_userName"></td>
  246. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
  247. </th>
  248. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  249. id="td_mobileNumber"></td>
  250. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
  251. </th>
  252. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  253. id="td_usertype"></td>
  254. </tr>
  255. <tr>
  256. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
  257. </th>
  258. <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  259. id="td_useraddress"></td>
  260. </tr>
  261. <input type="hidden" class="form-control text-center" name="bookingid"
  262. id="bookingid" disabled />
  263. <tr>
  264. <th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
  265. </tr>
  266. <tr>
  267. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
  268. </th>
  269. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  270. id="td_hallName"></td>
  271. </tr>
  272. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
  273. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  274. id="td_halladdress"></td>
  275. </tr>
  276. <tr>
  277. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  278. Name:</th>
  279. <td colspan="2" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  280. id="td_caretakername"></td>
  281. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  282. Mobile Number:</th>
  283. <td colspan="2" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  284. id="td_caretakermobileNumber"></td>
  285. </tr>
  286. </table>
  287. </div>
  288. </div>
  289. <div class="col-md-12 col-lg-12 col-sm-12">
  290. <input type="hidden" class="form-control text-center" name="settlementid"
  291. id="settlementid" disabled />
  292. <div class="card-body">
  293. <table>
  294. <tr>
  295. <th colspan="4" style="background-color: #f2f2f2;">Booking
  296. Details (Booking Id:-<span id="booking_id"
  297. style="color:blue"></span>)</th>
  298. </tr>
  299. <tr>
  300. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
  301. </th>
  302. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  303. id="td_bookingDate"></td>
  304. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
  305. Amount:</th>
  306. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  307. id="td_depositeAmount"></td>
  308. </tr>
  309. <tr>
  310. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
  311. </th>
  312. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  313. id="td_startDate"></td>
  314. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
  315. </th>
  316. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  317. id="td_hallAmount"></td>
  318. </tr>
  319. <tr>
  320. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END
  321. Date:</th>
  322. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  323. id="td_endDate"></td>
  324. <th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
  325. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  326. id="td_gst"></td>
  327. </tr>
  328. <tr>
  329. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
  330. </th>
  331. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  332. id="td_startingSlot"></td>
  333. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
  334. </th>
  335. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  336. id="td_totalAmount"></td>
  337. </tr>
  338. <tr>
  339. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
  340. </th>
  341. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  342. id="td_endingSlot"></td>
  343. </tr>
  344. <tr>
  345. <th colspan="4" style="background-color: #f2f2f2;">EB
  346. Details</th>
  347. </tr>
  348. <tr>
  349. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Consumer Number:</th>
  350. <td class="fw-semibold"
  351. style="padding: 0.45rem 0.45rem; text-align:center"
  352. id="td_EBNumber"></td>
  353. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount Per
  354. Unit:</th>
  355. <td class="fw-semibold"
  356. style="padding: 0.45rem 0.45rem;text-align:right"
  357. id="td_ebamountperunit"></td>
  358. </tr>
  359. <tr>
  360. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Reading:
  361. </th>
  362. <td class="fw-semibold"
  363. style="padding: 0.45rem 0.45rem;text-align:center"
  364. id="td_startingReading"></td>
  365. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Unit Consumed:
  366. </th>
  367. <td class="fw-semibold"
  368. style="padding: 0.45rem 0.45rem;text-align:right" id="td_usedunit">
  369. </td>
  370. </tr>
  371. <tr>
  372. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END Reading:
  373. </th>
  374. <td class="fw-semibold"
  375. style="padding: 0.45rem 0.45rem;text-align:center"
  376. id="td_endingReading"></td>
  377. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
  378. <td class="fw-semibold"
  379. style="padding: 0.45rem 0.45rem;text-align:right"
  380. id="td_electricityamount"></td>
  381. </tr>
  382. </table>
  383. </div>
  384. </div>
  385. <div id="damageDetails" style="margin-bottom: -17px;"></div>
  386. <div class="col-md-12 col-lg-12 col-sm-12">
  387. <div class="card-body">
  388. <table>
  389. <tr>
  390. <th colspan="2" style="background-color: #f2f2f2;font-weight: normal">
  391. Amount to be Refunded</th>
  392. </tr>
  393. <tr>
  394. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
  395. Amount:</th>
  396. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  397. id="td_depositeamountforrefund">0</td>
  398. </tr>
  399. <tr>
  400. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
  401. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  402. id="td_ebAmount"></td>
  403. </tr>
  404. <tr>
  405. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Damage Amount:
  406. </th>
  407. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  408. id="td_damage"></td>
  409. </tr>
  410. <tr id="pendingcolumn">
  411. <th id="th_settel_label"
  412. style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
  413. Collection Pending Amount:</th>
  414. <td class="fw-semibold amount-cell"
  415. style="padding: 0.45rem 0.45rem; color: green;" id="td_pending_amt">
  416. 0</td>
  417. </tr>
  418. <tr id="collectionstatuscolumn">
  419. <th id="label"
  420. style="padding: 0.45rem 0.45rem;font-weight: normal">Collection Pending Status
  421. :</th>
  422. <td class="fw-semibold amount-cell"
  423. style="padding: 0.45rem 0.45rem; color: green;" id="td_collection_status">
  424. </td>
  425. </tr>
  426. <tr>
  427. <th
  428. style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
  429. Actual refundable Amount:</th>
  430. <td class="fw-semibold amount-cell"
  431. style="padding: 0.45rem 0.45rem; color: green;" id="td_settel_amt">0
  432. </td>
  433. </tr>
  434. </table>
  435. </div>
  436. </div>
  437. <div class="mb-12">
  438. <label class="form-label">Reject Reason:<span class="text-danger"></span></label>
  439. <textarea class="form-control" name="reason" id="reason" style="width: 100%;"
  440. required></textarea>
  441. </div>
  442. </div>
  443. <div class="block-content block-content-full text-end bg-body" id="mbutton2">
  444. <button type="button" class="btn btn-sm btn-alt-success" id="approvebutton"
  445. th:onclick="accept()">Approve</button>
  446. <button type="button" class="btn btn-sm btn-alt-secondary"
  447. data-bs-dismiss="modal">Close</button>
  448. <button type="submit" class="btn btn-sm btn-primary">Reject</button>
  449. <a id="downloadLink" style="display: none;"></a>
  450. </div>
  451. </div>
  452. </form>
  453. </div>
  454. </div>
  455. </div>
  456. <!-- Cancellation booking Details-->
  457. <div class="modal fade backdrop" id="cancelledBookingForm" data-backdrop="static" tabindex="-1" role="dialog"
  458. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  459. <div class="modal-dialog modal-lg" role="document">
  460. <div class="modal-content">
  461. <form id="ownform">
  462. <div class="block block-rounded block-themed block-transparent mb-0">
  463. <div class="block-header bg-primary-dark">
  464. <h3 class="block-title" id="2mtitle">Booking Information</h3>
  465. <div class="block-options">
  466. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  467. aria-label="Close">
  468. <i class="fa fa-fw fa-times"></i>
  469. </button>
  470. </div>
  471. </div>
  472. <div class="block-content row">
  473. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  474. <input type="hidden" class="form-control text-center" name="booksid" id="booksId"
  475. disabled />
  476. <div class="card-body">
  477. <table>
  478. <tr>
  479. <th colspan="10" style="background-color: #f2f2f2;">User Details</th>
  480. </tr>
  481. <tr>
  482. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
  483. </th>
  484. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="username">
  485. </td>
  486. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
  487. </th>
  488. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="mobileno">
  489. </td>
  490. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
  491. </th>
  492. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="usertype">
  493. </td>
  494. </tr>
  495. <tr>
  496. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
  497. </th>
  498. <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  499. id="useraddress"></td>
  500. </tr>
  501. </table>
  502. </div>
  503. </div>
  504. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  505. <div class="card-body">
  506. <table>
  507. <tr>
  508. <th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
  509. </tr>
  510. <tr>
  511. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
  512. </th>
  513. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  514. id="hallname"></td>
  515. </tr>
  516. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
  517. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  518. id="halladdress"></td>
  519. </tr>
  520. <tr>
  521. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  522. Name:</th>
  523. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  524. id="caretakername"></td>
  525. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  526. Mobile Number:</th>
  527. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  528. id="caretakermobileNumber"></td>
  529. </tr>
  530. </table>
  531. </div>
  532. </div>
  533. <div class="col-md-12 col-lg-12 col-sm-12">
  534. <div class="card-body">
  535. <table>
  536. <tr>
  537. <th colspan="4" style="background-color: #f2f2f2;">Booking
  538. Details (Booking Id:-<span id="bookid" style="color:blue"></span>)
  539. </th>
  540. </tr>
  541. <tr>
  542. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
  543. </th>
  544. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  545. id="bookingDate"></td>
  546. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Status:
  547. </th>
  548. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  549. id="bookingStatus"></td>
  550. </tr>
  551. <tr>
  552. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
  553. </th>
  554. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  555. id="startDate"></td>
  556. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
  557. Amount:</th>
  558. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  559. id="depositeAmount"></td>
  560. </tr>
  561. <tr>
  562. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END
  563. Date:</th>
  564. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="endDate">
  565. </td>
  566. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
  567. </th>
  568. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  569. id="hallAmount"></td>
  570. </tr>
  571. <tr>
  572. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
  573. </th>
  574. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  575. id="startingSlot"></td>
  576. <th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
  577. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  578. id="gst"></td>
  579. </tr>
  580. <tr>
  581. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
  582. </th>
  583. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  584. id="endingSlot"></td>
  585. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
  586. </th>
  587. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  588. id="totalAmount"></td>
  589. </tr>
  590. </table>
  591. </div>
  592. </div>
  593. <div class="col-sm-12">
  594. <!--<label class="form-label">Documents:<span class="text-danger"></span></label>-->
  595. <div class="documents" id="documents"></div>
  596. </div>
  597. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  598. <input type="hidden" class="form-control text-center" name="bookingid"
  599. id="bookingid" disabled />
  600. <div class="card-body">
  601. <table>
  602. <tr>
  603. <th colspan="10" style="background-color: #f2f2f2;">Booking Payment
  604. Details</th>
  605. </tr>
  606. <tr>
  607. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
  608. ID:</th>
  609. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  610. id="transactionId"></td>
  611. </tr>
  612. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount Received:
  613. </th>
  614. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  615. id="payamountReceived"></td>
  616. </tr>
  617. <tr>
  618. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
  619. Status:</th>
  620. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  621. id="paymentStatus"></td>
  622. </tr>
  623. </table>
  624. </div>
  625. </div>
  626. </div>
  627. </div>
  628. <div class="block-content block-content-full text-end bg-body" id="mbutton2">
  629. <button type="button" class="btn btn-sm btn-alt-secondary"
  630. data-bs-dismiss="modal">Close</button>
  631. <button id="approvedButton" type="button" class="btn btn-sm btn-primary"
  632. th:onclick="approverefund()">Approve</button>
  633. </div>
  634. </form>
  635. </div>
  636. </div>
  637. </div>
  638. <!-- end of Cancellation booking details-->
  639. <div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
  640. aria-hidden="true">
  641. <div class="modal-dialog modal-lg" role="document">
  642. <div class="modal-content">
  643. <div class="modal-header">
  644. <h5 class="modal-title" id="fileModalLabel">File Preview</h5>
  645. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
  646. <span aria-hidden="true">&times;</span>
  647. </button>
  648. </div>
  649. <div class="modal-body">
  650. <embed id="filePreview" src="" width="100%" height="600px">
  651. </div>
  652. <div class="modal-footer">
  653. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  654. </div>
  655. </div>
  656. </div>
  657. </div>
  658. </div>
  659. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  660. <!-- End modal for pending -->
  661. <div th:replace="~{fragments/resetpassword :: div}"></div>
  662. <script th:replace="~{fragments/loginscript :: script}"></script>
  663. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  664. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  665. <script>
  666. $(document).ready(function () {
  667. var buttons = [
  668. {
  669. extend: 'pageLength',
  670. className: 'btn btn-primary'
  671. },
  672. {
  673. title: 'Data export',
  674. extend: 'copyHtml5',
  675. text: 'Copy',
  676. className: 'btn btn-primary',
  677. id: 'copyBtn'
  678. },
  679. {
  680. extend: 'excelHtml5',
  681. text: 'Excel',
  682. className: 'btn btn-primary',
  683. id: 'excelBtn'
  684. },
  685. {
  686. extend: 'csvHtml5',
  687. text: 'CSV',
  688. className: 'btn btn-primary',
  689. id: 'csvBtn'
  690. },
  691. {
  692. extend: 'pdfHtml5',
  693. text: 'PDF',
  694. className: 'btn btn-primary',
  695. id: 'pdfBtn'
  696. }
  697. ];
  698. // Initialize DataTable for each tab on tab shown event
  699. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  700. var targetTable = $(e.target).attr('href'); // activated tab
  701. $(targetTable).find('.dataTable').DataTable().columns.adjust();
  702. });
  703. // Initialize DataTable for Settlement Approved tab
  704. $('#SettlementApprovedListTable').DataTable({
  705. dom: 'Bftip',
  706. columnDefs: [
  707. {targets: 'no-sort', orderable: false}
  708. ],
  709. lengthMenu: [
  710. [50, 100, 200, 500, -1],
  711. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  712. ],
  713. buttons: buttons,
  714. responsive: true,
  715. searching: true,
  716. select: false,
  717. processing: false,
  718. // Set width to 100%
  719. "autoWidth": true
  720. });
  721. // Initialize DataTable for Cancelled Bookings Approved tab
  722. $('#cancelledApprovedListTable').DataTable({
  723. dom: 'Bftip',
  724. columnDefs: [
  725. {targets: 'no-sort', orderable: false}
  726. ],
  727. lengthMenu: [
  728. [50, 100, 200, 500, -1],
  729. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  730. ],
  731. buttons: buttons,
  732. responsive: true,
  733. searching: true,
  734. select: false,
  735. processing: false,
  736. // Set width to 100%
  737. "autoWidth": true
  738. });
  739. // Initialize DataTable for GCC Blocked/Rejected Approved tab
  740. $('#rejectedApprovedListTable').DataTable({
  741. dom: 'Bftip',
  742. columnDefs: [
  743. {targets: 'no-sort', orderable: false}
  744. ],
  745. lengthMenu: [
  746. [50, 100, 200, 500, -1],
  747. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  748. ],
  749. buttons: buttons,
  750. responsive: true,
  751. searching: true,
  752. select: false,
  753. processing: false,
  754. // Set width to 100%
  755. "autoWidth": true
  756. });
  757. });
  758. function pending(settlementId) {
  759. $.ajax({
  760. type: "GET",
  761. url: '/communityhall/api/officer/getSettlementList',
  762. data: {
  763. 'settlementsid': settlementId
  764. },
  765. success: function (x) {
  766. showSettlementInfo(x)
  767. showDamageDetails(x);
  768. }
  769. });
  770. }
  771. function showSettlementInfo(list) {
  772. // console.log(list); // Log the damageList array
  773. // console.log(list.damageList[0]);
  774. $('#pendingSettlementForm').modal({
  775. backdrop: 'static',
  776. keyboard: false
  777. });
  778. $('#pendingSettlementForm').modal('show');
  779. document.getElementById("settlementid").value = list.settlement.settlementId;
  780. document.getElementById("td_userName").innerHTML = list.users.name;
  781. document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
  782. document.getElementById("td_usertype").innerHTML = list.users.usertype;
  783. var userDetails = list.users;
  784. var userDetailsString =
  785. userDetails.doorNo + ", " +
  786. userDetails.street + ", " +
  787. userDetails.area + ", " +
  788. userDetails.location + " ,Chennai- " +
  789. userDetails.pinCode;
  790. document.getElementById("td_useraddress").innerHTML = userDetailsString;
  791. document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
  792. var hallDetails = list.hallDetails;
  793. var hallDetailsString =
  794. hallDetails.doorNo + ", " +
  795. hallDetails.street + ", " +
  796. hallDetails.area + ", " +
  797. hallDetails.city + "- " +
  798. hallDetails.pinCode;
  799. document.getElementById("td_halladdress").innerHTML = hallDetailsString;
  800. document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
  801. document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
  802. document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
  803. document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  804. document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
  805. // Calculate GST and total amount
  806. var gstAmount = (parseFloat(list.hallAmount) * (list.hallDetails.gst / 100)).toFixed(2);
  807. var totalAmount = parseFloat(list.amountReceived).toFixed(2);
  808. document.getElementById("td_gst").innerHTML = '₹ ' + gstAmount;
  809. document.getElementById("td_totalAmount").innerHTML = '₹ ' + totalAmount;
  810. document.getElementById("td_startDate").innerHTML = list.startDate;
  811. document.getElementById("td_endDate").innerHTML = list.endDate;
  812. document.getElementById("booking_id").innerHTML = list.bookingId;
  813. function getTimeSlot(slotValue) {
  814. var timeSlot;
  815. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  816. if (trimmedSlotValue === '1') {
  817. timeSlot = 'Morning';
  818. } else if (trimmedSlotValue === '2') {
  819. timeSlot = 'Evening';
  820. } else {
  821. timeSlot = 'Unknown';
  822. }
  823. return timeSlot;
  824. }
  825. document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
  826. document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
  827. document.getElementById("td_EBNumber").innerHTML = list.hallDetails.ebNumber;
  828. document.getElementById("td_startingReading").innerHTML = list.ebDetails.startingReading;
  829. document.getElementById("td_endingReading").innerHTML = list.ebDetails.endingReading;
  830. document.getElementById("td_usedunit").innerHTML = list.ebDetails.usedUnit;
  831. document.getElementById("td_ebamountperunit").innerHTML = '₹ ' + parseFloat(list.hallDetails.ebCostPerUnit).toFixed(2);
  832. document.getElementById("td_depositeamountforrefund").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  833. document.getElementById("td_electricityamount").innerHTML = '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2);
  834. document.getElementById("td_ebAmount").innerHTML = '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2);
  835. document.getElementById("td_damage").innerHTML = '₹ ' + parseFloat(list.settlement.damageAmount).toFixed(2);
  836. var eb_amt = parseFloat(list.ebDetails.ebAmount).toFixed(2);
  837. var deposit_amt = parseFloat(list.depositAmount).toFixed(2);
  838. var tem_total = (deposit_amt - eb_amt).toFixed(2);
  839. $("#td_settel_amt").html(tem_total);
  840. }
  841. function showDamageDetails(data) {
  842. var damageFieldContainer = $('#damageDetails');
  843. damageFieldContainer.empty();
  844. // Create a div for table responsiveness
  845. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '0px');
  846. // Create table with similar classes and styles to the modal table
  847. var table = $('<table>').addClass('table table-bordered table-striped').css({'width': '97%', 'border-color': 'black', 'border-top-color': 'white'});
  848. var thead = $('<thead>').addClass('thead-light');
  849. var tbody = $('<tbody>');
  850. // Create Damage Details header row
  851. var headerRow = $('<tr>').appendTo(thead);
  852. $('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
  853. 'padding': '0.45rem 0.45rem',
  854. 'background-color': '#f2f2f2',
  855. 'font-weight': 'bold',
  856. 'color': 'black',
  857. }).appendTo(headerRow);
  858. // Create table header row
  859. var columnHeadersRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  860. $('<th>').text('S.No').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  861. $('<th>').text('Asset Name').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  862. $('<th>').text('Damage Img').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  863. $('<th>').text('Cost').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  864. $('<th>').text('Qty').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  865. $('<th>').text('Amount').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  866. var totalAmount = 0;
  867. // Check if damageList is empty
  868. if (data.damageList.length === 0) {
  869. var row = $('<tr>').appendTo(tbody);
  870. $('<td>').attr('colspan', '6').text('No Damaged Items').css({
  871. 'padding': '0.45rem 0.45rem',
  872. 'text-align': 'center',
  873. 'font-weight': 'bold',
  874. 'background-color': '#f2f2f2'
  875. }).appendTo(row);
  876. } else {
  877. $.each(data.damageList, function (index, detail) {
  878. var row = $('<tr>').appendTo(tbody);
  879. $('<td>').text(index + 1).css({
  880. 'padding': '0.45rem 0.45rem',
  881. 'text-align': 'center'
  882. }).appendTo(row);
  883. $('<td>').text(detail.assetName).css({
  884. 'padding': '0.45rem 0.45rem',
  885. 'text-align': 'center'
  886. }).appendTo(row);
  887. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
  888. showDamageImage(detail.damageImageUrl);
  889. });
  890. $('<td>').css({
  891. 'padding': '0.45rem 0.45rem',
  892. 'text-align': 'center'
  893. }).append(viewLink).appendTo(row);
  894. var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
  895. $('<td>').text('₹ ' + assetamt).css({
  896. 'padding': '0.45rem 0.45rem',
  897. 'text-align': 'center'
  898. }).appendTo(row);
  899. $('<td>').text(detail.quantity).css({
  900. 'padding': '0.45rem 0.45rem',
  901. 'text-align': 'center'
  902. }).appendTo(row);
  903. var amount = detail.assetAmount;
  904. totalAmount += amount;
  905. $('<td>').text('₹ ' + amount.toFixed(2)).css({
  906. 'padding': '0.45rem 0.45rem',
  907. 'text-align': 'right'
  908. }).appendTo(row);
  909. });
  910. // Add row for total amount
  911. var totalRow = $('<tr>').appendTo(tbody);
  912. $('<td>').attr('colspan', '5').text('Total Amount').css({
  913. 'padding': '0.45rem 0.45rem',
  914. 'font-weight': 'bold',
  915. 'background-color': '#f2f2f2'
  916. }).appendTo(totalRow);
  917. $('<td>').text('₹ ' + totalAmount.toFixed(2)).css({
  918. 'padding': '0.45rem 0.45rem',
  919. 'text-align': 'right'
  920. }).appendTo(totalRow);
  921. $("#td_dam_amt").html('₹ ' + totalAmount.toFixed(2));
  922. }
  923. // Append the table elements to the container div
  924. table.append(thead, tbody);
  925. tableResponsiveDiv.append(table);
  926. damageFieldContainer.append(tableResponsiveDiv);
  927. var temp_total = parseFloat($("#td_settel_amt").html());
  928. var settleAmount = temp_total - totalAmount;
  929. var refundStatus = data.refundStatus;
  930. var pendingstatus=data.settlement.collectionStatus
  931. if (settleAmount < 0) {
  932. // console.log(settleAmount);
  933. $("#td_settel_amt").html(0.00);
  934. $("#pendingcolumn").show();
  935. $("#collectionstatuscolumn").show();
  936. $('#td_collection_status').html(pendingstatus);
  937. $("#td_pending_amt").html('₹ ' + Math.abs(settleAmount).toFixed(2));
  938. $("#td_pending_amt").css("color", "red");
  939. $("#approvebutton").prop("disabled", true);
  940. $("#rejectbutton").show();
  941. } else {
  942. $("#td_settel_amt").html('₹ ' + settleAmount.toFixed(2));
  943. $("#pendingcolumn").hide();
  944. $("#collectionstatuscolumn").hide();
  945. $("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
  946. $("#approvebutton").prop("disabled", false);
  947. }
  948. }
  949. function showDamageImage(damageImageUrl) {
  950. document.getElementById('filePreview').src = damageImageUrl;
  951. $('#fileModal').modal('show');
  952. }
  953. function accept() {
  954. let id = document.getElementById("settlementid").value;
  955. const acceptButton = document.getElementById("approvebutton"); // Add an ID to your button in the HTML
  956. Swal.fire({
  957. title: 'Do you want to Approve this Settlement?',
  958. showDenyButton: true,
  959. showCancelButton: true,
  960. confirmButtonText: 'YES',
  961. denyButtonText: 'NO',
  962. }).then((result) => {
  963. if (result.isConfirmed) {
  964. // Disable the button to prevent multiple clicks
  965. acceptButton.disabled = true;
  966. // Show the loading screen
  967. const loadingSwal = Swal.fire({
  968. title: 'Processing...',
  969. text: 'Please wait while we approve the settlement.',
  970. allowOutsideClick: false, // Prevent closing the popup
  971. didOpen: () => {
  972. Swal.showLoading(); // Show the loading spinner
  973. },
  974. showConfirmButton: false, // Hide the confirm button during loading
  975. });
  976. $.ajax({
  977. type: "POST",
  978. url: '/communityhall/api/officer/updateApprovedSettlementStatus/' + id,
  979. data: {
  980. 'status': 'APPROVED',
  981. 'comments': 'Accepted',
  982. 'settlementId': id
  983. },
  984. success: function (data, textStatus, xhr) {
  985. loadingSwal.close(); // Close the loading popup
  986. if (xhr.status === 200) {
  987. Swal.fire(
  988. 'Done',
  989. 'Successfully Accepted to the ID: ' + id,
  990. 'success'
  991. ).then(() => {
  992. location.reload(); // Reload the page after success
  993. });
  994. } else {
  995. Swal.fire(
  996. 'Error',
  997. 'Failed to accept the user',
  998. 'error'
  999. );
  1000. }
  1001. },
  1002. error: function (xhr, textStatus, errorThrown) {
  1003. loadingSwal.close(); // Close the loading popup
  1004. Swal.fire(
  1005. 'Error',
  1006. 'Failed to accept the user',
  1007. 'error'
  1008. );
  1009. },
  1010. complete: function() {
  1011. // Re-enable the button after request completes (success or error)
  1012. acceptButton.disabled = false;
  1013. }
  1014. });
  1015. } else if (result.isDenied) {
  1016. Swal.fire('Changes are not saved', '', 'info');
  1017. }
  1018. });
  1019. }
  1020. function rejectsubmit() {
  1021. let id = document.getElementById("settlementid").value;
  1022. let reason = $("#reason").val();
  1023. Swal.fire({
  1024. title: 'Do you want to Reject this Settlement ?',
  1025. showDenyButton: true,
  1026. showCancelButton: true,
  1027. confirmButtonText: 'YES',
  1028. denyButtonText: 'NO',
  1029. }).then((result) => {
  1030. /* Read more about isConfirmed, isDenied below */
  1031. if (result.isConfirmed) {
  1032. // console.log("Submitting rejection...");
  1033. $.ajax({
  1034. type: "POST",
  1035. url: '/communityhall/api/officer/updateRejectSettlementStatus/' + id,
  1036. data: {
  1037. 'status': 'REJECTED',
  1038. 'comments': reason,
  1039. 'settlementId': id
  1040. },
  1041. success: function (data, textStatus, xhr) {
  1042. // console.log("Rejection successful");
  1043. if (xhr.status === 200) { // Check if the response status is OK
  1044. Swal.fire(
  1045. 'Done',
  1046. 'Successfully Rejected to the ID:' + id,
  1047. 'success'
  1048. ).then(() => {
  1049. location.reload();
  1050. });
  1051. } else {
  1052. Swal.fire(
  1053. 'Error',
  1054. 'Failed to reject the user',
  1055. 'error'
  1056. );
  1057. }
  1058. },
  1059. error: function (xhr, textStatus, errorThrown) {
  1060. console.error("Error:", errorThrown);
  1061. Swal.fire(
  1062. 'Error',
  1063. 'Failed to reject the user',
  1064. 'error'
  1065. );
  1066. }
  1067. });
  1068. } else if (result.isDenied) {
  1069. Swal.fire('Changes are not saved', '', 'info')
  1070. }
  1071. });
  1072. return false; // Prevent form submission
  1073. }
  1074. $(document).ready(function () {
  1075. $("#generatechallon").click(function () {
  1076. // Generate plain text content (replace with your actual content generation logic)
  1077. let textContent = "This is the content of the text file.";
  1078. // Create a Blob containing the text
  1079. let blob = new Blob([textContent], {type: "text/plain"});
  1080. // Create URL for the Blob
  1081. let url = URL.createObjectURL(blob);
  1082. // Get the download link element
  1083. let downloadLink = $("#downloadLink");
  1084. if (downloadLink.length === 0) {
  1085. console.error("Download link element not found");
  1086. return;
  1087. }
  1088. // Set download link attributes
  1089. downloadLink.attr({
  1090. href: url,
  1091. download: "challon.txt" // Specify the filename for download
  1092. });
  1093. // Simulate click on the download link
  1094. downloadLink[0].click();
  1095. // Clean up
  1096. URL.revokeObjectURL(url);
  1097. });
  1098. });
  1099. function cancelledbooking(bookingId) {
  1100. $.ajax({
  1101. type: "GET",
  1102. url: '/communityhall/api/officer/getBookingDetails',
  1103. data: {
  1104. 'bookingsId': bookingId
  1105. },
  1106. success: function (x) {
  1107. // console.log(x);
  1108. showcancelledbookingDetails(x);
  1109. }
  1110. });
  1111. }
  1112. function rejectedbooking(bookingId) {
  1113. $.ajax({
  1114. type: "GET",
  1115. url: '/communityhall/api/officer/getBookingDetails',
  1116. data: {
  1117. 'bookingsId': bookingId
  1118. },
  1119. success: function (x) {
  1120. // console.log(x);
  1121. showcancelledbookingDetails(x);
  1122. }
  1123. });
  1124. }
  1125. function showcancelledbookingDetails(list) {
  1126. $('#cancelledBookingForm').modal({
  1127. backdrop: 'static',
  1128. keyboard: false
  1129. });
  1130. $('#cancelledBookingForm').modal('show');
  1131. document.getElementById("username").innerHTML = list.users.name;
  1132. document.getElementById("mobileno").innerHTML = list.users.mobileNo;
  1133. document.getElementById("usertype").innerHTML = list.users.usertype;
  1134. document.getElementById("booksId").value = list.bookingId;
  1135. var userDetails = list.users;
  1136. var userDetailsString =
  1137. userDetails.doorNo + ", " +
  1138. userDetails.street + ", " +
  1139. userDetails.area + ", " +
  1140. userDetails.location + "- " +
  1141. userDetails.pinCode;
  1142. document.getElementById("useraddress").innerHTML = userDetailsString;
  1143. document.getElementById("hallname").innerHTML = list.hallDetails.hallName;
  1144. var hallDetails = list.hallDetails;
  1145. var hallDetailsString =
  1146. hallDetails.doorNo + ", " +
  1147. hallDetails.street + ", " +
  1148. hallDetails.area + ", " +
  1149. hallDetails.city + "- " +
  1150. hallDetails.pinCode;
  1151. document.getElementById("halladdress").innerHTML = hallDetailsString;
  1152. document.getElementById("caretakername").innerHTML = list.hallDetails.hallInchargeName;
  1153. document.getElementById("caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
  1154. document.getElementById("bookingDate").innerHTML = list.bookingDate;
  1155. document.getElementById("depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  1156. document.getElementById("hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
  1157. document.getElementById("totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2);
  1158. var gstcl = (list.hallAmount * (list.hallDetails.gst / 100));
  1159. var formattedGst = gstcl.toFixed(2);
  1160. document.getElementById("gst").innerHTML = '₹ ' + formattedGst;
  1161. document.getElementById("startDate").innerHTML = list.startDate;
  1162. document.getElementById("endDate").innerHTML = list.endDate;
  1163. document.getElementById("bookid").innerHTML = list.bookingId;
  1164. function getTimeSlot(slotValue) {
  1165. // console.log("Slot Value in getTimeSlot function:", slotValue);
  1166. var timeSlot;
  1167. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  1168. if (trimmedSlotValue === '1') {
  1169. timeSlot = 'Morning';
  1170. } else if (trimmedSlotValue === '2') {
  1171. timeSlot = 'Evening';
  1172. } else {
  1173. timeSlot = 'Unknown';
  1174. }
  1175. // console.log("Time Slot:", timeSlot);
  1176. return timeSlot;
  1177. }
  1178. document.getElementById("startingSlot").innerHTML = getTimeSlot(list.startingSlot);
  1179. document.getElementById("endingSlot").innerHTML = getTimeSlot(list.endingSlot);
  1180. document.getElementById("bookingStatus").innerHTML = list.bookingStatus;
  1181. document.getElementById("transactionId").innerHTML = list.payments.transactionId;
  1182. document.getElementById("payamountReceived").innerHTML = '₹ ' + list.payments.amountReceived;
  1183. document.getElementById("paymentStatus").innerHTML = list.payments.paymentStatus;
  1184. showReasonDocuments(list);
  1185. }
  1186. function showReasonDocuments(list) {
  1187. $.ajax({
  1188. type: "GET",
  1189. url: '/communityhall/api/officer/getReasonByName',
  1190. data: {
  1191. 'reasonName': list.reason
  1192. },
  1193. success: function (x) {
  1194. // console.log(x);
  1195. showReasonWithDocument(x, list);
  1196. }
  1197. });
  1198. }
  1199. // Display booking documents
  1200. function showReasonWithDocument(reasonData, list) {
  1201. var reasonDocumentData = reasonData.reasonDocumentMasterList;
  1202. var bookingDocumentsList = list.bookingDocumentsList;
  1203. const reasonFieldsContainer = $('#documents');
  1204. reasonFieldsContainer.empty();
  1205. // Create a responsive table container
  1206. var tableResponsiveDiv = $('<div>').addClass('table-responsive');
  1207. // Create the table with Bootstrap classes and custom styles
  1208. var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
  1209. 'width': '100%',
  1210. 'height': 'auto',
  1211. 'border': '1px solid black'
  1212. });
  1213. // Create the table header (thead)
  1214. var thead = $('<thead>').appendTo(table);
  1215. var headerRow = $('<tr>').appendTo(thead);
  1216. $('<th>').attr('colspan', '3').text('Document Details').css({
  1217. 'color': 'black',
  1218. 'font-weight': 'bold',
  1219. 'background-color': '#f2f2f2',
  1220. 'padding': '0.45rem 0.45rem'
  1221. }).appendTo(headerRow);
  1222. // Create header row for columns
  1223. var columnHeadersRow = $('<tr>').appendTo(thead);
  1224. $('<th>').text('S.No').appendTo(columnHeadersRow);
  1225. $('<th>').text('Required Info').appendTo(columnHeadersRow);
  1226. $('<th>').text('Required Documents').appendTo(columnHeadersRow);
  1227. // Create the table body (tbody)
  1228. var tbody = $('<tbody>').appendTo(table);
  1229. // Iterate through the documents list and populate rows
  1230. for (var i = 0; i < bookingDocumentsList.length; i++) {
  1231. (function (index) {
  1232. var row = $('<tr>').appendTo(tbody);
  1233. $('<td>').text(index + 1).appendTo(row);
  1234. $('<td>').text(reasonDocumentData[index].fieldName + ': ' + bookingDocumentsList[index].name).appendTo(row);
  1235. // Create a link to view document image
  1236. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
  1237. showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
  1238. });
  1239. $('<td>').append(viewLink).appendTo(row);
  1240. })(i);
  1241. }
  1242. // Append table to the responsive container
  1243. tableResponsiveDiv.append(table);
  1244. // Append table to the container in the DOM
  1245. reasonFieldsContainer.append(tableResponsiveDiv);
  1246. }
  1247. function showDocumentImage(fileURL) {
  1248. //console.log(fileURL);
  1249. openFileModal(fileURL);
  1250. }
  1251. // Event delegation for dynamically added elements
  1252. $(document).on('click', '.view-document', function () {
  1253. const fileURL = $(this).data('url');
  1254. openFileModal(fileURL);
  1255. });
  1256. function openFileModal(fileURL) {
  1257. $('#filePreview').attr('src', fileURL);
  1258. $('#fileModal').modal('show');
  1259. }
  1260. function approverefund() {
  1261. let id = document.getElementById("booksId").value;
  1262. const approveButton = document.getElementById("approvedButton");
  1263. Swal.fire({
  1264. title: 'Do you want to Approve this Settlement?',
  1265. showDenyButton: true,
  1266. showCancelButton: true,
  1267. confirmButtonText: 'YES',
  1268. denyButtonText: 'NO',
  1269. }).then((result) => {
  1270. if (result.isConfirmed) {
  1271. // Disable the button after user confirms
  1272. approveButton.disabled = true;
  1273. // Show the loading popup
  1274. const loadingSwal = Swal.fire({
  1275. title: 'Processing...',
  1276. text: 'Please wait while we approve the settlement.',
  1277. allowOutsideClick: false, // Prevent closing the popup
  1278. didOpen: () => {
  1279. Swal.showLoading(); // Show the loading spinner
  1280. },
  1281. showConfirmButton: false, // Hide the confirm button during loading
  1282. });
  1283. $.ajax({
  1284. type: "POST",
  1285. url: '/communityhall/api/officer/approveCancelledBookingRefund/' + id,
  1286. data: {
  1287. 'status': 'APPROVED',
  1288. },
  1289. success: function (data, textStatus, xhr) {
  1290. loadingSwal.close(); // Close the loading popup
  1291. if (xhr.status === 200) {
  1292. Swal.fire(
  1293. 'Done',
  1294. 'Successfully Accepted to the ID:' + id,
  1295. 'success'
  1296. ).then(() => {
  1297. location.reload(); // Reload page after success
  1298. });
  1299. } else {
  1300. Swal.fire(
  1301. 'Error',
  1302. 'Failed to Approve the Refund',
  1303. 'error'
  1304. );
  1305. }
  1306. },
  1307. error: function (xhr, textStatus, errorThrown) {
  1308. loadingSwal.close(); // Close the loading popup
  1309. Swal.fire(
  1310. 'Error',
  1311. 'Failed to Approve the Refund',
  1312. 'error'
  1313. );
  1314. },
  1315. complete: function() {
  1316. // Re-enable the button after request completes (success or error)
  1317. approveButton.disabled = false;
  1318. }
  1319. });
  1320. } else if (result.isDenied) {
  1321. Swal.fire('Changes are not saved', '', 'info');
  1322. }
  1323. });
  1324. }
  1325. document.addEventListener('DOMContentLoaded', function () {
  1326. var ddDetailsCheckbox = document.getElementById('ddDetailsCheckbox');
  1327. var ddDetailsFields = document.querySelectorAll('.dd-details input');
  1328. var ddDetailsContainer = document.querySelector('.dd-details');
  1329. var challonDetailsForm = document.getElementById('challonDetailsForm');
  1330. var submitButton = document.getElementById('submitChallonDetails');
  1331. // Toggle DD Details visibility and required status based on checkbox state
  1332. ddDetailsCheckbox.addEventListener('change', function () {
  1333. if (ddDetailsCheckbox.checked) {
  1334. ddDetailsContainer.style.display = 'flex';
  1335. ddDetailsFields.forEach(function (field) {
  1336. field.setAttribute('required', 'required');
  1337. });
  1338. } else {
  1339. ddDetailsContainer.style.display = 'none';
  1340. ddDetailsFields.forEach(function (field) {
  1341. field.removeAttribute('required');
  1342. field.value = ''; // Optionally clear the fields
  1343. field.classList.remove('is-invalid'); // Remove invalid class if any
  1344. });
  1345. }
  1346. });
  1347. // Handle form submission
  1348. submitButton.addEventListener('click', function () {
  1349. var isValid = challonDetailsForm.checkValidity();
  1350. if (isValid) {
  1351. // Form is valid, proceed with submission (e.g., via AJAX)
  1352. // Custom submission code here
  1353. } else {
  1354. // Trigger browser's validation messages
  1355. challonDetailsForm.classList.add('was-validated');
  1356. }
  1357. });
  1358. // Prevent form submission on Enter key
  1359. challonDetailsForm.addEventListener('submit', function (event) {
  1360. event.preventDefault();
  1361. event.stopPropagation();
  1362. });
  1363. });
  1364. $('#challonDetails').on('hidden.bs.modal', function () {
  1365. // Clear all input fields
  1366. $(this).find('form')[0].reset();
  1367. // Optionally, reset any custom styling or classes
  1368. $(this).find('input').removeClass('is-valid is-invalid');
  1369. });
  1370. </script>
  1371. </body>
  1372. </html>