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.

1761 lines
66 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/head-admin :: 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-admin :: nav}"></nav>
  41. <!-- END Sidebar -->
  42. <!-- Header -->
  43. <header th:replace="~{fragments/header-admin :: header}"></header>
  44. <!-- END Header -->
  45. <!-- Main Container -->
  46. <main id="main-container" class="container mt-5">
  47. <ul class="nav nav-tabs" id="myTab" role="tablist">
  48. <li class="nav-item" role="presentation">
  49. <a class="nav-link active" id="settlement-tab" data-toggle="tab" href="#settlement" role="tab"
  50. aria-controls="settlement" aria-selected="true">Settlement Refund</a>
  51. </li>
  52. <li class="nav-item" role="presentation">
  53. <a class="nav-link" id="cancel-tab" data-toggle="tab" href="#cancel" role="tab"
  54. aria-controls="cancel" aria-selected="false">Cancelled Bookings Refund</a>
  55. </li>
  56. <li class="nav-item" role="presentation">
  57. <a class="nav-link" id="gcc-tab" data-toggle="tab" href="#gcc" role="tab" aria-controls="gcc"
  58. aria-selected="false">GCC Blocked/Rejected Refund</a>
  59. </li>
  60. </ul>
  61. <div class="tab-content" id="myTabContent">
  62. <!-- Settlement Approval Tab -->
  63. <div class="tab-pane fade show active" id="settlement" role="tabpanel" aria-labelledby="settlement-tab">
  64. <div class="block-header block-header-default">
  65. <h3 class="block-title">List of Settlement Refund Failed</h3>
  66. </div>
  67. <div class="block-content p-0">
  68. <div class="p-sm-4 p-0">
  69. <div class="table-responsive">
  70. <table class="table table-bordered table-striped table-vcenter js-dataTable-responsive" id="SettlementApprovedListTable">
  71. <thead class="thead-light">
  72. <tr>
  73. <th>S.no</th>
  74. <th>Zone</th>
  75. <th>Division</th>
  76. <th>Hall Name</th>
  77. <th>Booking Id</th>
  78. <th>Booking Date</th>
  79. <th>Settlement Id</th>
  80. <th>Settlement raised Date</th>
  81. <th>Deposit Amount</th>
  82. <th>Collection Pending</th>
  83. <th>Refund Amount</th>
  84. <th>Status</th>
  85. <th>Action</th>
  86. </tr>
  87. </thead>
  88. <tbody>
  89. <tr th:each="settlement, rowStat : ${settlementrefundfailed}">
  90. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  91. <td class="text-center" th:text="${settlement.hallDetails.zone}"></td>
  92. <td class="text-center" th:text="${settlement.hallDetails.division}"></td>
  93. <td class="text-center" th:text="${settlement.hallDetails.hallName}"></td>
  94. <td class="text-center" th:text="${settlement.bookingId}"></td>
  95. <td class="text-center" th:text="${settlement.bookingDate}"></td>
  96. <td class="text-center" th:text="${settlement.settlement.settlementId}">
  97. </td>
  98. <td class="text-center" th:text="${settlement.settlement.cdate}"></td>
  99. <td class="text-center" th:text="${settlement.depositAmount}"></td>
  100. <td class="text-center"
  101. th:text="${settlement.settlement.collectionPending}"></td>
  102. <td class="text-center" th:text="${settlement.settlement.refundedAmount}">
  103. </td>
  104. <td class="text-center" th:text="${settlement.refundStatus}"></td>
  105. <td>
  106. <p>
  107. <span class="badge bg-warning" style="cursor: pointer;"
  108. th:onclick="pending([[${settlement.settlement.settlementId}]])">Approve</span>
  109. </p>
  110. </td>
  111. </tr>
  112. </tbody>
  113. </table>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. <!-- CancelBooking Tab -->
  119. <div class="tab-pane fade" id="cancel" role="tabpanel" aria-labelledby="cancel-tab">
  120. <div class="block-header block-header-default">
  121. <h3 class="block-title">Cancelled Bookings with Refund Failed</h3>
  122. </div>
  123. <div class="block-content p-0">
  124. <div class="p-sm-4 p-0">
  125. <div class="table-responsive">
  126. <table class="table table-bordered table-striped table-vcenter js-dataTable-responsive" id="cancelledApprovedListTable">
  127. <thead class="thead-light">
  128. <tr>
  129. <th>S.no</th>
  130. <th>Booking Id</th>
  131. <th>Booking Date</th>
  132. <th>Hall Name</th>
  133. <th>User Name</th>
  134. <th>User type</th>
  135. <th>Reason for Booking</th>
  136. <th>Refund Amount</th>
  137. <th>Action</th>
  138. </tr>
  139. </thead>
  140. <tbody>
  141. <tr th:each="cancelledbookings, rowStat : ${refundfailedcancelledbookings}">
  142. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  143. <td class="text-center" th:text="${cancelledbookings.bookingId}"></td>
  144. <td class="text-center" th:text="${cancelledbookings.bookingDate}"></td>
  145. <td class="text-center" th:text="${cancelledbookings.hallDetails.hallName}">
  146. </td>
  147. <td class="text-center" th:text="${cancelledbookings.users.name}"></td>
  148. <td class="text-center" th:text="${cancelledbookings.users.usertype}"></td>
  149. <td class="text-center" th:text="${cancelledbookings.reason}"></td>
  150. <td class="text-center"
  151. th:text="${cancelledbookings.depositAmount}"></td>
  152. <td>
  153. <p>
  154. <span class="badge bg-warning" style="cursor: pointer;"
  155. th:onclick="cancelledbooking([[${cancelledbookings.bookingId}]])">Approve</span>
  156. </p>
  157. </td>
  158. </tr>
  159. </tbody>
  160. </table>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. <!-- GCC Blocked/Rejected Approved Tab -->
  166. <div class="tab-pane fade" id="gcc" role="tabpanel" aria-labelledby="gcc-tab">
  167. <div class="block-header block-header-default">
  168. <h3 class="block-title">GCC Blocked/Rejected Bookings with Refund Failed</h3>
  169. </div>
  170. <div class="block-content p-0">
  171. <div class="p-sm-4 p-0">
  172. <div class="table-responsive">
  173. <table class="table table-bordered table-striped table-vcenter js-dataTable-responsive" id="rejectedApprovedListTable">
  174. <thead class="thead-light">
  175. <tr>
  176. <th>S.no</th>
  177. <th>Booking Id</th>
  178. <th>Booking Date</th>
  179. <th>Hall Name</th>
  180. <th>User Name</th>
  181. <th>User type</th>
  182. <th>Reason for Booking</th>
  183. <th>Reason for Rejection</th>
  184. <th>Refund Amount</th>
  185. <th>Action</th>
  186. </tr>
  187. </thead>
  188. <tbody>
  189. <tr th:each="rejectedbookings, rowStat : ${refundfailedrejectedbookings}">
  190. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  191. <td class="text-center" th:text="${rejectedbookings.bookingId}"></td>
  192. <td class="text-center" th:text="${rejectedbookings.bookingDate}"></td>
  193. <td class="text-center" th:text="${rejectedbookings.hallDetails.hallName}">
  194. </td>
  195. <td class="text-center" th:text="${rejectedbookings.users.name}"></td>
  196. <td class="text-center" th:text="${rejectedbookings.users.usertype}"></td>
  197. <td class="text-center" th:text="${rejectedbookings.reason}"></td>
  198. <td class="text-center" th:text="${rejectedbookings.comments}"></td>
  199. <td class="text-center" th:text="${rejectedbookings.amountReceived}"></td>
  200. <td>
  201. <p>
  202. <span class="badge bg-warning" style="cursor: pointer;"
  203. th:onclick="rejectedbooking([[${rejectedbookings.bookingId}]])">Approve</span>
  204. </p>
  205. </td>
  206. </tr>
  207. </tbody>
  208. </table>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. </main>
  215. <!-- End User Details Modal-->
  216. <!-- END Main Container -->
  217. <!-- Modal for Pending -->
  218. <div class="modal fade backdrop" id="pendingSettlementForm" data-backdrop="static" tabindex="-1" role="dialog"
  219. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  220. <div class="modal-dialog modal-lg" role="document">
  221. <div class="modal-content">
  222. <form id="ownform" onsubmit="return rejectsubmit();">
  223. <div class="block block-rounded block-themed block-transparent mb-0">
  224. <div class="block-header bg-primary-dark">
  225. <h3 class="block-title" id="2mtitle">Settlement Information</h3>
  226. <div class="block-options">
  227. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  228. aria-label="Close">
  229. <i class="fa fa-fw fa-times"></i>
  230. </button>
  231. </div>
  232. </div>
  233. <div class="block-content row">
  234. <div class="col-md-12 col-lg-12 col-sm-12">
  235. <input type="hidden" class="form-control text-center" name="settlementid"
  236. id="settlementid" disabled />
  237. <div class="card-body">
  238. <table>
  239. <tr>
  240. <th colspan="10" style="background-color: #f2f2f2;">User Details</th>
  241. </tr>
  242. <tr>
  243. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
  244. </th>
  245. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  246. id="td_userName"></td>
  247. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
  248. </th>
  249. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  250. id="td_mobileNumber"></td>
  251. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
  252. </th>
  253. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  254. id="td_usertype"></td>
  255. </tr>
  256. <tr>
  257. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
  258. </th>
  259. <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  260. id="td_useraddress"></td>
  261. </tr>
  262. <input type="hidden" class="form-control text-center" name="bookingid"
  263. id="bookingid" disabled />
  264. <tr>
  265. <th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
  266. </tr>
  267. <tr>
  268. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
  269. </th>
  270. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  271. id="td_hallName"></td>
  272. </tr>
  273. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
  274. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  275. id="td_halladdress"></td>
  276. </tr>
  277. <tr>
  278. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  279. Name:</th>
  280. <td colspan="2" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  281. id="td_caretakername"></td>
  282. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  283. Mobile Number:</th>
  284. <td colspan="2" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  285. id="td_caretakermobileNumber"></td>
  286. </tr>
  287. </table>
  288. </div>
  289. </div>
  290. <div class="col-md-12 col-lg-12 col-sm-12">
  291. <input type="hidden" class="form-control text-center" name="settlementid"
  292. id="settlementid" disabled />
  293. <div class="card-body">
  294. <table>
  295. <tr>
  296. <th colspan="4" style="background-color: #f2f2f2;">Booking
  297. Details (Booking Id:-<span id="booking_id"
  298. style="color:blue"></span>)</th>
  299. </tr>
  300. <tr>
  301. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
  302. </th>
  303. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  304. id="td_bookingDate"></td>
  305. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
  306. Amount:</th>
  307. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  308. id="td_depositeAmount"></td>
  309. </tr>
  310. <tr>
  311. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
  312. </th>
  313. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  314. id="td_startDate"></td>
  315. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
  316. </th>
  317. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  318. id="td_hallAmount"></td>
  319. </tr>
  320. <tr>
  321. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END
  322. Date:</th>
  323. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  324. id="td_endDate"></td>
  325. <th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
  326. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  327. id="td_gst"></td>
  328. </tr>
  329. <tr>
  330. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
  331. </th>
  332. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  333. id="td_startingSlot"></td>
  334. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
  335. </th>
  336. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  337. id="td_totalAmount"></td>
  338. </tr>
  339. <tr>
  340. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
  341. </th>
  342. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  343. id="td_endingSlot"></td>
  344. </tr>
  345. <tr>
  346. <th colspan="4" style="background-color: #f2f2f2;">EB
  347. Details</th>
  348. </tr>
  349. <tr>
  350. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Consumer Number:</th>
  351. <td class="fw-semibold"
  352. style="padding: 0.45rem 0.45rem; text-align:center"
  353. id="td_EBNumber"></td>
  354. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount Per
  355. Unit:</th>
  356. <td class="fw-semibold"
  357. style="padding: 0.45rem 0.45rem;text-align:right"
  358. id="td_ebamountperunit"></td>
  359. </tr>
  360. <tr>
  361. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Reading:
  362. </th>
  363. <td class="fw-semibold"
  364. style="padding: 0.45rem 0.45rem;text-align:center"
  365. id="td_startingReading"></td>
  366. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Unit Consumed:
  367. </th>
  368. <td class="fw-semibold"
  369. style="padding: 0.45rem 0.45rem;text-align:right" id="td_usedunit">
  370. </td>
  371. </tr>
  372. <tr>
  373. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END Reading:
  374. </th>
  375. <td class="fw-semibold"
  376. style="padding: 0.45rem 0.45rem;text-align:center"
  377. id="td_endingReading"></td>
  378. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
  379. <td class="fw-semibold"
  380. style="padding: 0.45rem 0.45rem;text-align:right"
  381. id="td_electricityamount"></td>
  382. </tr>
  383. </table>
  384. </div>
  385. </div>
  386. <div id="damageDetails" style="margin-bottom: -17px;"></div>
  387. <div class="col-md-12 col-lg-12 col-sm-12">
  388. <div class="card-body">
  389. <table>
  390. <tr>
  391. <th colspan="2" style="background-color: #f2f2f2;font-weight: normal">
  392. Amount to be Refunded</th>
  393. </tr>
  394. <tr>
  395. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
  396. Amount:</th>
  397. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  398. id="td_depositeamountforrefund">0</td>
  399. </tr>
  400. <tr>
  401. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
  402. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  403. id="td_ebAmount"></td>
  404. </tr>
  405. <tr>
  406. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Damage Amount:
  407. </th>
  408. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  409. id="td_damage"></td>
  410. </tr>
  411. <tr id="pendingcolumn">
  412. <th id="th_settel_label"
  413. style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
  414. Collection Pending Amount:</th>
  415. <td class="fw-semibold amount-cell"
  416. style="padding: 0.45rem 0.45rem; color: green;" id="td_pending_amt">
  417. 0</td>
  418. </tr>
  419. <tr>
  420. <th
  421. style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
  422. Actual refundable Amount:</th>
  423. <td class="fw-semibold amount-cell"
  424. style="padding: 0.45rem 0.45rem; color: green;" id="td_settel_amt">0
  425. </td>
  426. </tr>
  427. </table>
  428. </div>
  429. </div>
  430. <!-- DD detail -->
  431. <div id="challonTableContainer"></div>
  432. <div id="ddTableContainer" style=" margin-top: -16px;"></div>
  433. <div class="mb-12">
  434. <label class="form-label">Reject Reason:<span class="text-danger"></span></label>
  435. <textarea class="form-control" name="reason" id="reason" style="width: 100%;"
  436. required></textarea>
  437. </div>
  438. </div>
  439. <div class="block-content block-content-full text-end bg-body" id="mbutton2">
  440. <button type="button" class="btn btn-sm btn-primary" id="generatechallon">Generate
  441. Challan</button>
  442. <button type="button" class="btn btn-sm btn-primary" id="uploadchallon"
  443. th:onclick="uploadChallon()">Upload Challan</button>
  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. <!-- challon Model-->
  660. <div class="modal fade" id="challonDetails" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  661. <div class="modal-dialog modal-lg">
  662. <div class="modal-content">
  663. <div class="modal-header">
  664. <h5 class="modal-title" id="exampleModalLabel">Challan Details</h5>
  665. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  666. </div>
  667. <div class="modal-body">
  668. <form id="challonDetailsForm" novalidate>
  669. <div class="row">
  670. <div class="col-sm-12 mb-3">
  671. <input type="checkbox" id="ddDetailsCheckbox">
  672. <label for="ddDetailsCheckbox">Include DD Details</label>
  673. </div>
  674. </div>
  675. <div class="row dd-details" style="display: none;">
  676. <div class="col-sm-4 mb-3">
  677. <label class="form-label" for="ddnumber">DD Number:*</label>
  678. <input type="text" class="form-control text-center" name="ddnumber" id="ddnumber"
  679. minlength="6" maxlength="10"
  680. oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);" />
  681. <div class="invalid-feedback">Please enter a valid DD number.</div>
  682. </div>
  683. <div class="col-sm-4 mb-3">
  684. <label class="form-label" for="dddate">DD Date:*</label>
  685. <input type="date" class="form-control text-center" name="dddate" id="dddate" />
  686. <div class="invalid-feedback">Please enter a valid DD date.</div>
  687. </div>
  688. <div class="col-sm-4 mb-3">
  689. <label class="form-label" for="ddamount">DD Amount:*</label>
  690. <input type="text" class="form-control text-center" name="ddamount" id="ddamount"
  691. minlength="6" maxlength="10"
  692. oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);" />
  693. <div class="invalid-feedback">Please enter a valid DD amount.</div>
  694. </div>
  695. </div>
  696. <div class="row">
  697. <div class="col-sm-4 mb-3">
  698. <label class="form-label" for="challonnumber">Challan Number:*</label>
  699. <input type="text" class="form-control text-center" name="challonnumber"
  700. id="challonnumber" minlength="6" maxlength="10"
  701. oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);" required />
  702. <div class="invalid-feedback">Please enter a valid Challan number.</div>
  703. </div>
  704. <div class="col-sm-4 mb-3">
  705. <label class="form-label" for="challonamount">Challan Amount:*</label>
  706. <input type="text" class="form-control text-center" name="challonamount"
  707. id="challonamount" minlength="6" maxlength="10"
  708. oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);" required />
  709. <div class="invalid-feedback">Please enter a valid Challan amount.</div>
  710. </div>
  711. <div class="col-sm-4 mb-3">
  712. <label class="form-label" for="challonimage">Upload Challan:*</label>
  713. <input type="file" class="form-control text-center" name="challonimage"
  714. id="challonimage" required />
  715. <div class="invalid-feedback">Please upload a valid Challan image.</div>
  716. </div>
  717. </div>
  718. </form>
  719. </div>
  720. <div class="modal-footer">
  721. <button type="button" class="btn btn-primary" id="submitChallonDetails">Submit</button>
  722. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  723. </div>
  724. </div>
  725. </div>
  726. </div>
  727. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  728. <!-- End modal for pending -->
  729. <!-- Scripts -->
  730. <div th:replace="~{fragments/resetpassword :: div}"></div>
  731. <script th:replace="~{fragments/loginscript :: script}"></script>
  732. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  733. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  734. <script>
  735. $(document).ready(function () {
  736. // DataTables buttons configuration
  737. var buttons = [
  738. {
  739. extend: 'pageLength',
  740. className: 'btn btn-primary'
  741. },
  742. {
  743. title: 'Data export',
  744. extend: 'copyHtml5',
  745. text: 'Copy',
  746. className: 'btn btn-primary',
  747. id: 'copyBtn'
  748. },
  749. {
  750. extend: 'excelHtml5',
  751. text: 'Excel',
  752. className: 'btn btn-primary',
  753. id: 'excelBtn'
  754. },
  755. {
  756. extend: 'csvHtml5',
  757. text: 'CSV',
  758. className: 'btn btn-primary',
  759. id: 'csvBtn'
  760. },
  761. {
  762. extend: 'pdfHtml5',
  763. text: 'PDF',
  764. className: 'btn btn-primary',
  765. id: 'pdfBtn'
  766. }
  767. ];
  768. // Initialize DataTable for each tab on tab shown event
  769. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  770. var targetTable = $(e.target).attr('href'); // activated tab
  771. $(targetTable).find('.dataTable').DataTable().columns.adjust();
  772. });
  773. // Initialize DataTable for Settlement Approved tab
  774. $('#SettlementApprovedListTable').DataTable({
  775. dom: 'Bftip',
  776. columnDefs: [
  777. {targets: 'no-sort', orderable: false}
  778. ],
  779. lengthMenu: [
  780. [50, 100, 200, 500, -1],
  781. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  782. ],
  783. buttons: buttons,
  784. responsive: true,
  785. searching: true,
  786. select: false,
  787. processing: false,
  788. // Set width to 100%
  789. "autoWidth": true
  790. });
  791. // Initialize DataTable for Cancelled Bookings Approved tab
  792. $('#cancelledApprovedListTable').DataTable({
  793. dom: 'Bftip',
  794. columnDefs: [
  795. {targets: 'no-sort', orderable: false}
  796. ],
  797. lengthMenu: [
  798. [50, 100, 200, 500, -1],
  799. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  800. ],
  801. buttons: buttons,
  802. responsive: true,
  803. searching: true,
  804. select: false,
  805. processing: false,
  806. // Set width to 100%
  807. "autoWidth": true
  808. });
  809. // Initialize DataTable for GCC Blocked/Rejected Approved tab
  810. $('#rejectedApprovedListTable').DataTable({
  811. dom: 'Bftip',
  812. columnDefs: [
  813. {targets: 'no-sort', orderable: false}
  814. ],
  815. lengthMenu: [
  816. [50, 100, 200, 500, -1],
  817. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  818. ],
  819. buttons: buttons,
  820. responsive: true,
  821. searching: true,
  822. select: false,
  823. processing: false,
  824. // Set width to 100%
  825. "autoWidth": true
  826. });
  827. });
  828. function pending(settlementId) {
  829. $.ajax({
  830. type: "GET",
  831. url: '/communityhall/api/officer/getSettlementList',
  832. data: {
  833. 'settlementsid': settlementId
  834. },
  835. success: function (x) {
  836. showSettlementInfo(x)
  837. showDamageDetails(x);
  838. }
  839. });
  840. }
  841. function showSettlementInfo(list) {
  842. // console.log(list); // Log the damageList array
  843. // console.log(list.damageList[0]);
  844. $('#pendingSettlementForm').modal({
  845. backdrop: 'static',
  846. keyboard: false
  847. });
  848. $('#pendingSettlementForm').modal('show');
  849. document.getElementById("settlementid").value = list.settlement.settlementId;
  850. document.getElementById("td_userName").innerHTML = list.users.name;
  851. document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
  852. document.getElementById("td_usertype").innerHTML = list.users.usertype;
  853. var userDetails = list.users;
  854. var userDetailsString =
  855. userDetails.doorNo + ", " +
  856. userDetails.street + ", " +
  857. userDetails.area + ", " +
  858. userDetails.location + " ,Chennai- " +
  859. userDetails.pinCode;
  860. document.getElementById("td_useraddress").innerHTML = userDetailsString;
  861. document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
  862. var hallDetails = list.hallDetails;
  863. var hallDetailsString =
  864. hallDetails.doorNo + ", " +
  865. hallDetails.street + ", " +
  866. hallDetails.area + ", " +
  867. hallDetails.city + "- " +
  868. hallDetails.pinCode;
  869. document.getElementById("td_halladdress").innerHTML = hallDetailsString;
  870. document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
  871. document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
  872. document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
  873. document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  874. document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
  875. // Calculate GST and total amount
  876. var gstAmount = (parseFloat(list.hallAmount) * (list.hallDetails.gst / 100)).toFixed(2);
  877. var totalAmount = parseFloat(list.amountReceived).toFixed(2);
  878. document.getElementById("td_gst").innerHTML = '₹ ' + gstAmount;
  879. document.getElementById("td_totalAmount").innerHTML = '₹ ' + totalAmount;
  880. document.getElementById("td_startDate").innerHTML = list.startDate;
  881. document.getElementById("td_endDate").innerHTML = list.endDate;
  882. document.getElementById("booking_id").innerHTML = list.bookingId;
  883. function getTimeSlot(slotValue) {
  884. var timeSlot;
  885. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  886. if (trimmedSlotValue === '1') {
  887. timeSlot = 'Morning';
  888. } else if (trimmedSlotValue === '2') {
  889. timeSlot = 'Evening';
  890. } else {
  891. timeSlot = 'Unknown';
  892. }
  893. return timeSlot;
  894. }
  895. document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
  896. document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
  897. document.getElementById("td_EBNumber").innerHTML = list.hallDetails.ebNumber;
  898. document.getElementById("td_startingReading").innerHTML = list.ebDetails.startingReading;
  899. document.getElementById("td_endingReading").innerHTML = list.ebDetails.endingReading;
  900. document.getElementById("td_usedunit").innerHTML = list.ebDetails.usedUnit;
  901. document.getElementById("td_ebamountperunit").innerHTML = '₹ ' + parseFloat(list.hallDetails.ebCostPerUnit).toFixed(2);
  902. document.getElementById("td_depositeamountforrefund").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  903. document.getElementById("td_electricityamount").innerHTML = '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2);
  904. document.getElementById("td_ebAmount").innerHTML = '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2);
  905. document.getElementById("td_damage").innerHTML = '₹ ' + parseFloat(list.settlement.damageAmount).toFixed(2);
  906. var eb_amt = parseFloat(list.ebDetails.ebAmount).toFixed(2);
  907. var deposit_amt = parseFloat(list.depositAmount).toFixed(2);
  908. var tem_total = (deposit_amt - eb_amt).toFixed(2);
  909. $("#td_settel_amt").html(tem_total);
  910. }
  911. function showDamageDetails(data) {
  912. var damageFieldContainer = $('#damageDetails');
  913. damageFieldContainer.empty();
  914. // Create a div for table responsiveness
  915. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '0px');
  916. // Create table with similar classes and styles to the modal table
  917. var table = $('<table>').addClass('table table-bordered table-striped').css({'width': '97%', 'border-color': 'black', 'border-top-color': 'white'});
  918. var thead = $('<thead>').addClass('thead-light');
  919. var tbody = $('<tbody>');
  920. // Create Damage Details header row
  921. var headerRow = $('<tr>').appendTo(thead);
  922. $('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
  923. 'padding': '0.45rem 0.45rem',
  924. 'background-color': '#f2f2f2',
  925. 'font-weight': 'bold',
  926. 'color': 'black',
  927. }).appendTo(headerRow);
  928. // Create table header row
  929. var columnHeadersRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  930. $('<th>').text('S.No').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  931. $('<th>').text('Asset Name').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  932. $('<th>').text('Damage Img').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  933. $('<th>').text('Cost').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  934. $('<th>').text('Qty').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  935. $('<th>').text('Amount').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  936. var totalAmount = 0;
  937. // Check if damageList is empty
  938. if (data.damageList.length === 0) {
  939. var row = $('<tr>').appendTo(tbody);
  940. $('<td>').attr('colspan', '6').text('No Damaged Items').css({
  941. 'padding': '0.45rem 0.45rem',
  942. 'text-align': 'center',
  943. 'font-weight': 'bold',
  944. 'background-color': '#f2f2f2'
  945. }).appendTo(row);
  946. } else {
  947. $.each(data.damageList, function (index, detail) {
  948. var row = $('<tr>').appendTo(tbody);
  949. $('<td>').text(index + 1).css({
  950. 'padding': '0.45rem 0.45rem',
  951. 'text-align': 'center'
  952. }).appendTo(row);
  953. $('<td>').text(detail.assetName).css({
  954. 'padding': '0.45rem 0.45rem',
  955. 'text-align': 'center'
  956. }).appendTo(row);
  957. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
  958. showDamageImage(detail.damageImageUrl);
  959. });
  960. $('<td>').css({
  961. 'padding': '0.45rem 0.45rem',
  962. 'text-align': 'center'
  963. }).append(viewLink).appendTo(row);
  964. var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
  965. $('<td>').text('₹ ' + assetamt).css({
  966. 'padding': '0.45rem 0.45rem',
  967. 'text-align': 'center'
  968. }).appendTo(row);
  969. $('<td>').text(detail.quantity).css({
  970. 'padding': '0.45rem 0.45rem',
  971. 'text-align': 'center'
  972. }).appendTo(row);
  973. var amount = detail.assetAmount;
  974. totalAmount += amount;
  975. $('<td>').text('₹ ' + amount.toFixed(2)).css({
  976. 'padding': '0.45rem 0.45rem',
  977. 'text-align': 'right'
  978. }).appendTo(row);
  979. });
  980. // Add row for total amount
  981. var totalRow = $('<tr>').appendTo(tbody);
  982. $('<td>').attr('colspan', '5').text('Total Amount').css({
  983. 'padding': '0.45rem 0.45rem',
  984. 'font-weight': 'bold',
  985. 'background-color': '#f2f2f2'
  986. }).appendTo(totalRow);
  987. $('<td>').text('₹ ' + totalAmount.toFixed(2)).css({
  988. 'padding': '0.45rem 0.45rem',
  989. 'text-align': 'right'
  990. }).appendTo(totalRow);
  991. $("#td_dam_amt").html('₹ ' + totalAmount.toFixed(2));
  992. }
  993. // Append the table elements to the container div
  994. table.append(thead, tbody);
  995. tableResponsiveDiv.append(table);
  996. damageFieldContainer.append(tableResponsiveDiv);
  997. var temp_total = parseFloat($("#td_settel_amt").html());
  998. var settleAmount = temp_total - totalAmount;
  999. var refundStatus = data.refundStatus;
  1000. if (settleAmount < 0) {
  1001. // console.log(settleAmount);
  1002. $("#td_settel_amt").html(0.00);
  1003. $("#pendingcolumn").show();
  1004. $("#td_pending_amt").html('₹ ' + Math.abs(settleAmount).toFixed(2));
  1005. $("#td_pending_amt").css("color", "red");
  1006. $("#generatechallon").show();
  1007. $("#uploadchallon").show();
  1008. $("#approvebutton").prop("disabled", true);
  1009. $("#rejectbutton").show();
  1010. } else {
  1011. $("#td_settel_amt").html('₹ ' + settleAmount.toFixed(2));
  1012. $("#pendingcolumn").hide();
  1013. $("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
  1014. $("#generatechallon").hide();
  1015. $("#uploadchallon").hide();
  1016. }
  1017. if (data.settlement.challonamount) {
  1018. // Show the table containing ddnumber and challan image
  1019. var challonTableContainer = $("#challonTableContainer"); // Assuming you have a div with this ID for the table
  1020. challonTableContainer.empty(); // Clear any existing content
  1021. challonTableContainer.show(); // Ensure the container is visible
  1022. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
  1023. // Create table with similar classes and styles to the modal table
  1024. var table = $('<table>').addClass('table table-bordered table-striped').css({'width': '100%', 'border-color': 'black', 'border-top-color': 'white'});
  1025. var thead = $('<thead>').addClass('thead-light');
  1026. var tbody = $('<tbody>');
  1027. var headerRow = $('<tr>').appendTo(thead);
  1028. $('<th>').attr('colspan', '6').text('Challan Details').css({
  1029. 'padding': '0.45rem 0.45rem',
  1030. 'background-color': '#f2f2f2',
  1031. 'font-weight': 'bold',
  1032. 'color': 'black',
  1033. }).appendTo(headerRow);
  1034. var columnRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  1035. //$('<th>').text('DD Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1036. //$('<th>').text('DD Date').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1037. $('<th>').text('Challan Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1038. $('<th>').text('Challan Amount').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1039. $('<th>').text('Challan Image').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1040. var row = $('<tr>').appendTo(tbody);
  1041. //$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1042. //$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1043. $('<td>').text(data.settlement.challonnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1044. $('<td>').text(data.settlement.challonamount).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1045. //$('<td>').text(data.settlement.dddate).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1046. var challanImgLink = $('<a>').attr('href', 'javascript:void(0)').text('View Image').on('click', function () {
  1047. showchallonimage(data.settlement.challon);
  1048. });
  1049. $('<td>').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).append(challanImgLink).appendTo(row);
  1050. table.append(thead, tbody);
  1051. challonTableContainer.append(table);
  1052. // Hide all buttons
  1053. $("#generatechallon").hide();
  1054. $("#uploadchallon").hide();
  1055. $("#approvebutton").prop("disabled", false);
  1056. } else {
  1057. // Hide the ddTableContainer if ddnumber is not present
  1058. $("#challonTableContainer").hide();
  1059. }
  1060. if (data.settlement.ddnumber) {
  1061. // Show the table containing ddnumber and challan image
  1062. var ddTableContainer = $("#ddTableContainer"); // Assuming you have a div with this ID for the table
  1063. ddTableContainer.empty(); // Clear any existing content
  1064. ddTableContainer.show(); // Ensure the container is visible
  1065. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
  1066. // Create table with similar classes and styles to the modal table
  1067. var table = $('<table>').addClass('table table-bordered table-striped').css({'width': '100%', 'border-color': 'black', 'border-top-color': 'white'});
  1068. var thead = $('<thead>').addClass('thead-light');
  1069. var tbody = $('<tbody>');
  1070. var headerRow = $('<tr>').appendTo(thead);
  1071. $('<th>').attr('colspan', '6').text('DD Details').css({
  1072. 'padding': '0.45rem 0.45rem',
  1073. 'background-color': '#f2f2f2',
  1074. 'font-weight': 'bold',
  1075. 'color': 'black',
  1076. }).appendTo(headerRow);
  1077. var columnRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  1078. $('<th>').text('DD Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1079. $('<th>').text('DD Amount').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1080. $('<th>').text('DD Date').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1081. var row = $('<tr>').appendTo(tbody);
  1082. $('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1083. $('<td>').text(data.settlement.ddamount).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1084. $('<td>').text(data.settlement.dddate).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1085. table.append(thead, tbody);
  1086. ddTableContainer.append(table);
  1087. // Hide all buttons
  1088. $("#generatechallon").hide();
  1089. $("#uploadchallon").hide();
  1090. $("#approvebutton").prop("disabled", false);
  1091. } else {
  1092. // Hide the ddTableContainer if ddnumber is not present
  1093. $("#ddTableContainer").hide();
  1094. }
  1095. }
  1096. function showDamageImage(damageImageUrl) {
  1097. document.getElementById('filePreview').src = damageImageUrl;
  1098. $('#fileModal').modal('show');
  1099. }
  1100. function showchallonimage(challanImgLink){
  1101. document.getElementById('filePreview').src = challanImgLink;
  1102. $('#fileModal').modal('show');
  1103. }
  1104. function uploadChallon() {
  1105. $('#challonDetails').modal('show');
  1106. }
  1107. $(document).ready(function () {
  1108. $("#submitChallonDetails").click(function (event) {
  1109. // Prevent default form submission
  1110. event.preventDefault();
  1111. // Get the checkbox state and the input values
  1112. let ddDetailsSelected = $("#ddDetailsCheckbox").prop("checked");
  1113. let settlementId = $("#settlementid").val();
  1114. let ddNumber = $("#ddnumber").val();
  1115. let ddDate = $("#dddate").val();
  1116. let ddamount = $("#ddamount").val();
  1117. let challonnumber = $("#challonnumber").val();
  1118. let challonamount = $("#challonamount").val();
  1119. let challonimage = $("#challonimage")[0].files[0];
  1120. // Validate DD fields if the checkbox is selected
  1121. let isValid = true;
  1122. if (ddDetailsSelected) {
  1123. if (!ddNumber || !ddDate || !ddamount) {
  1124. isValid = false;
  1125. $("#ddnumber").addClass("is-invalid");
  1126. $("#dddate").addClass("is-invalid");
  1127. $("#ddamount").addClass("is-invalid");
  1128. } else {
  1129. $("#ddnumber").removeClass("is-invalid");
  1130. $("#dddate").removeClass("is-invalid");
  1131. $("#ddamount").removeClass("is-invalid");
  1132. }
  1133. }
  1134. // Validate Challan fields
  1135. if (!challonnumber || !challonamount || !challonimage) {
  1136. isValid = false;
  1137. $("#challonnumber").addClass("is-invalid");
  1138. $("#challonamount").addClass("is-invalid");
  1139. $("#challonimage").addClass("is-invalid");
  1140. } else {
  1141. $("#challonnumber").removeClass("is-invalid");
  1142. $("#challonamount").removeClass("is-invalid");
  1143. $("#challonimage").removeClass("is-invalid");
  1144. }
  1145. // If the form is valid, proceed with AJAX call
  1146. if (isValid) {
  1147. // Create FormData object
  1148. let formData = new FormData();
  1149. formData.append("ddNumber", ddNumber);
  1150. formData.append("ddDate", ddDate);
  1151. formData.append("challonimage", challonimage);
  1152. formData.append("challonnumber", challonnumber);
  1153. formData.append("challonamount", challonamount);
  1154. formData.append("ddamount", ddamount);
  1155. // AJAX call to upload the data
  1156. $.ajax({
  1157. type: "POST",
  1158. url: "/communityhall/api/officer/uploadChallonDetails/" + settlementId,
  1159. data: formData,
  1160. processData: false, // Prevent jQuery from automatically transforming the data into a query string
  1161. contentType: false, // Let jQuery know that we're sending FormData
  1162. success: function (response) {
  1163. $('#challonDetails').modal('hide');
  1164. location.reload();
  1165. },
  1166. error: function (xhr, status, error) {
  1167. // Handle error
  1168. }
  1169. });
  1170. } else {
  1171. // Optionally, focus on the first invalid field
  1172. $(".is-invalid:first").focus();
  1173. }
  1174. });
  1175. });
  1176. function accept() {
  1177. let id = document.getElementById("settlementid").value;
  1178. const acceptButton = document.getElementById("approvebutton"); // Add an ID to your button in the HTML
  1179. Swal.fire({
  1180. title: 'Do you want to Approve this Settlement?',
  1181. showDenyButton: true,
  1182. showCancelButton: true,
  1183. confirmButtonText: 'YES',
  1184. denyButtonText: 'NO',
  1185. }).then((result) => {
  1186. if (result.isConfirmed) {
  1187. // Disable the button to prevent multiple clicks
  1188. acceptButton.disabled = true;
  1189. // Show the loading screen
  1190. const loadingSwal = Swal.fire({
  1191. title: 'Processing...',
  1192. text: 'Please wait while we approve the settlement.',
  1193. allowOutsideClick: false, // Prevent closing the popup
  1194. didOpen: () => {
  1195. Swal.showLoading(); // Show the loading spinner
  1196. },
  1197. showConfirmButton: false, // Hide the confirm button during loading
  1198. });
  1199. $.ajax({
  1200. type: "POST",
  1201. url: '/communityhall/api/officer/updateApprovedSettlementStatus/' + id,
  1202. data: {
  1203. 'status': 'APPROVED',
  1204. 'comments': 'Accepted',
  1205. 'settlementId': id
  1206. },
  1207. success: function (data, textStatus, xhr) {
  1208. loadingSwal.close(); // Close the loading popup
  1209. if (xhr.status === 200) {
  1210. Swal.fire(
  1211. 'Done',
  1212. 'Successfully Accepted to the ID: ' + id,
  1213. 'success'
  1214. ).then(() => {
  1215. location.reload(); // Reload the page after success
  1216. });
  1217. } else {
  1218. Swal.fire(
  1219. 'Error',
  1220. 'Failed to accept the user',
  1221. 'error'
  1222. );
  1223. }
  1224. },
  1225. error: function (xhr, textStatus, errorThrown) {
  1226. loadingSwal.close(); // Close the loading popup
  1227. Swal.fire(
  1228. 'Error',
  1229. 'Failed to accept the user',
  1230. 'error'
  1231. );
  1232. },
  1233. complete: function() {
  1234. // Re-enable the button after request completes (success or error)
  1235. acceptButton.disabled = false;
  1236. }
  1237. });
  1238. } else if (result.isDenied) {
  1239. Swal.fire('Changes are not saved', '', 'info');
  1240. }
  1241. });
  1242. }
  1243. function rejectsubmit() {
  1244. let id = document.getElementById("settlementid").value;
  1245. let reason = $("#reason").val();
  1246. Swal.fire({
  1247. title: 'Do you want to Reject this Settlement ?',
  1248. showDenyButton: true,
  1249. showCancelButton: true,
  1250. confirmButtonText: 'YES',
  1251. denyButtonText: 'NO',
  1252. }).then((result) => {
  1253. /* Read more about isConfirmed, isDenied below */
  1254. if (result.isConfirmed) {
  1255. // console.log("Submitting rejection...");
  1256. $.ajax({
  1257. type: "POST",
  1258. url: '/communityhall/api/officer/updateRejectSettlementStatus/' + id,
  1259. data: {
  1260. 'status': 'REJECTED',
  1261. 'comments': reason,
  1262. 'settlementId': id
  1263. },
  1264. success: function (data, textStatus, xhr) {
  1265. // console.log("Rejection successful");
  1266. if (xhr.status === 200) { // Check if the response status is OK
  1267. Swal.fire(
  1268. 'Done',
  1269. 'Successfully Rejected to the ID:' + id,
  1270. 'success'
  1271. ).then(() => {
  1272. location.reload();
  1273. });
  1274. } else {
  1275. Swal.fire(
  1276. 'Error',
  1277. 'Failed to reject the user',
  1278. 'error'
  1279. );
  1280. }
  1281. },
  1282. error: function (xhr, textStatus, errorThrown) {
  1283. console.error("Error:", errorThrown);
  1284. Swal.fire(
  1285. 'Error',
  1286. 'Failed to reject the user',
  1287. 'error'
  1288. );
  1289. }
  1290. });
  1291. } else if (result.isDenied) {
  1292. Swal.fire('Changes are not saved', '', 'info')
  1293. }
  1294. });
  1295. return false; // Prevent form submission
  1296. }
  1297. $(document).ready(function () {
  1298. $("#generatechallon").click(function () {
  1299. // Generate plain text content (replace with your actual content generation logic)
  1300. let textContent = "This is the content of the text file.";
  1301. // Create a Blob containing the text
  1302. let blob = new Blob([textContent], {type: "text/plain"});
  1303. // Create URL for the Blob
  1304. let url = URL.createObjectURL(blob);
  1305. // Get the download link element
  1306. let downloadLink = $("#downloadLink");
  1307. if (downloadLink.length === 0) {
  1308. console.error("Download link element not found");
  1309. return;
  1310. }
  1311. // Set download link attributes
  1312. downloadLink.attr({
  1313. href: url,
  1314. download: "challon.txt" // Specify the filename for download
  1315. });
  1316. // Simulate click on the download link
  1317. downloadLink[0].click();
  1318. // Clean up
  1319. URL.revokeObjectURL(url);
  1320. });
  1321. });
  1322. function cancelledbooking(bookingId) {
  1323. $.ajax({
  1324. type: "GET",
  1325. url: '/communityhall/api/officer/getBookingDetails',
  1326. data: {
  1327. 'bookingsId': bookingId
  1328. },
  1329. success: function (x) {
  1330. // console.log(x);
  1331. showcancelledbookingDetails(x);
  1332. }
  1333. });
  1334. }
  1335. function rejectedbooking(bookingId) {
  1336. $.ajax({
  1337. type: "GET",
  1338. url: '/communityhall/api/officer/getBookingDetails',
  1339. data: {
  1340. 'bookingsId': bookingId
  1341. },
  1342. success: function (x) {
  1343. // console.log(x);
  1344. showcancelledbookingDetails(x);
  1345. }
  1346. });
  1347. }
  1348. function showcancelledbookingDetails(list) {
  1349. $('#cancelledBookingForm').modal({
  1350. backdrop: 'static',
  1351. keyboard: false
  1352. });
  1353. $('#cancelledBookingForm').modal('show');
  1354. document.getElementById("username").innerHTML = list.users.name;
  1355. document.getElementById("mobileno").innerHTML = list.users.mobileNo;
  1356. document.getElementById("usertype").innerHTML = list.users.usertype;
  1357. document.getElementById("booksId").value = list.bookingId;
  1358. var userDetails = list.users;
  1359. var userDetailsString =
  1360. userDetails.doorNo + ", " +
  1361. userDetails.street + ", " +
  1362. userDetails.area + ", " +
  1363. userDetails.location + "- " +
  1364. userDetails.pinCode;
  1365. document.getElementById("useraddress").innerHTML = userDetailsString;
  1366. document.getElementById("hallname").innerHTML = list.hallDetails.hallName;
  1367. var hallDetails = list.hallDetails;
  1368. var hallDetailsString =
  1369. hallDetails.doorNo + ", " +
  1370. hallDetails.street + ", " +
  1371. hallDetails.area + ", " +
  1372. hallDetails.city + "- " +
  1373. hallDetails.pinCode;
  1374. document.getElementById("halladdress").innerHTML = hallDetailsString;
  1375. document.getElementById("caretakername").innerHTML = list.hallDetails.hallInchargeName;
  1376. document.getElementById("caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
  1377. document.getElementById("bookingDate").innerHTML = list.bookingDate;
  1378. document.getElementById("depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  1379. document.getElementById("hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
  1380. document.getElementById("totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2);
  1381. var gstcl = (list.hallAmount * (list.hallDetails.gst / 100));
  1382. var formattedGst = gstcl.toFixed(2);
  1383. document.getElementById("gst").innerHTML = '₹ ' + formattedGst;
  1384. document.getElementById("startDate").innerHTML = list.startDate;
  1385. document.getElementById("endDate").innerHTML = list.endDate;
  1386. document.getElementById("bookid").innerHTML = list.bookingId;
  1387. function getTimeSlot(slotValue) {
  1388. // console.log("Slot Value in getTimeSlot function:", slotValue);
  1389. var timeSlot;
  1390. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  1391. if (trimmedSlotValue === '1') {
  1392. timeSlot = 'Morning';
  1393. } else if (trimmedSlotValue === '2') {
  1394. timeSlot = 'Evening';
  1395. } else {
  1396. timeSlot = 'Unknown';
  1397. }
  1398. // console.log("Time Slot:", timeSlot);
  1399. return timeSlot;
  1400. }
  1401. document.getElementById("startingSlot").innerHTML = getTimeSlot(list.startingSlot);
  1402. document.getElementById("endingSlot").innerHTML = getTimeSlot(list.endingSlot);
  1403. document.getElementById("bookingStatus").innerHTML = list.bookingStatus;
  1404. document.getElementById("transactionId").innerHTML = list.payments.transactionId;
  1405. document.getElementById("payamountReceived").innerHTML = '₹ ' + list.payments.amountReceived;
  1406. document.getElementById("paymentStatus").innerHTML = list.payments.paymentStatus;
  1407. showReasonDocuments(list);
  1408. }
  1409. function showReasonDocuments(list) {
  1410. $.ajax({
  1411. type: "GET",
  1412. url: '/communityhall/api/officer/getReasonByName',
  1413. data: {
  1414. 'reasonName': list.reason
  1415. },
  1416. success: function (x) {
  1417. // console.log(x);
  1418. showReasonWithDocument(x, list);
  1419. }
  1420. });
  1421. }
  1422. // Display booking documents
  1423. function showReasonWithDocument(reasonData, list) {
  1424. var reasonDocumentData = reasonData.reasonDocumentMasterList;
  1425. var bookingDocumentsList = list.bookingDocumentsList;
  1426. const reasonFieldsContainer = $('#documents');
  1427. reasonFieldsContainer.empty();
  1428. // Create a responsive table container
  1429. var tableResponsiveDiv = $('<div>').addClass('table-responsive');
  1430. // Create the table with Bootstrap classes and custom styles
  1431. var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
  1432. 'width': '100%',
  1433. 'height': 'auto',
  1434. 'border': '1px solid black'
  1435. });
  1436. // Create the table header (thead)
  1437. var thead = $('<thead>').appendTo(table);
  1438. var headerRow = $('<tr>').appendTo(thead);
  1439. $('<th>').attr('colspan', '3').text('Document Details').css({
  1440. 'color': 'black',
  1441. 'font-weight': 'bold',
  1442. 'background-color': '#f2f2f2',
  1443. 'padding': '0.45rem 0.45rem'
  1444. }).appendTo(headerRow);
  1445. // Create header row for columns
  1446. var columnHeadersRow = $('<tr>').appendTo(thead);
  1447. $('<th>').text('S.No').appendTo(columnHeadersRow);
  1448. $('<th>').text('Required Info').appendTo(columnHeadersRow);
  1449. $('<th>').text('Required Documents').appendTo(columnHeadersRow);
  1450. // Create the table body (tbody)
  1451. var tbody = $('<tbody>').appendTo(table);
  1452. // Iterate through the documents list and populate rows
  1453. for (var i = 0; i < bookingDocumentsList.length; i++) {
  1454. (function (index) {
  1455. var row = $('<tr>').appendTo(tbody);
  1456. $('<td>').text(index + 1).appendTo(row);
  1457. $('<td>').text(reasonDocumentData[index].fieldName + ': ' + bookingDocumentsList[index].name).appendTo(row);
  1458. // Create a link to view document image
  1459. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
  1460. showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
  1461. });
  1462. $('<td>').append(viewLink).appendTo(row);
  1463. })(i);
  1464. }
  1465. // Append table to the responsive container
  1466. tableResponsiveDiv.append(table);
  1467. // Append table to the container in the DOM
  1468. reasonFieldsContainer.append(tableResponsiveDiv);
  1469. }
  1470. function showDocumentImage(fileURL) {
  1471. //console.log(fileURL);
  1472. openFileModal(fileURL);
  1473. }
  1474. // Event delegation for dynamically added elements
  1475. $(document).on('click', '.view-document', function () {
  1476. const fileURL = $(this).data('url');
  1477. openFileModal(fileURL);
  1478. });
  1479. function openFileModal(fileURL) {
  1480. $('#filePreview').attr('src', fileURL);
  1481. $('#fileModal').modal('show');
  1482. }
  1483. function approverefund() {
  1484. let id = document.getElementById("booksId").value;
  1485. const approveButton = document.getElementById("approvedButton");
  1486. Swal.fire({
  1487. title: 'Do you want to Approve this Settlement?',
  1488. showDenyButton: true,
  1489. showCancelButton: true,
  1490. confirmButtonText: 'YES',
  1491. denyButtonText: 'NO',
  1492. }).then((result) => {
  1493. if (result.isConfirmed) {
  1494. // Disable the button after user confirms
  1495. approveButton.disabled = true;
  1496. // Show the loading popup
  1497. const loadingSwal = Swal.fire({
  1498. title: 'Processing...',
  1499. text: 'Please wait while we approve the settlement.',
  1500. allowOutsideClick: false, // Prevent closing the popup
  1501. didOpen: () => {
  1502. Swal.showLoading(); // Show the loading spinner
  1503. },
  1504. showConfirmButton: false, // Hide the confirm button during loading
  1505. });
  1506. $.ajax({
  1507. type: "POST",
  1508. url: '/communityhall/api/officer/approveCancelledBookingRefund/' + id,
  1509. data: {
  1510. 'status': 'APPROVED',
  1511. },
  1512. success: function (data, textStatus, xhr) {
  1513. loadingSwal.close(); // Close the loading popup
  1514. if (xhr.status === 200) {
  1515. Swal.fire(
  1516. 'Done',
  1517. 'Successfully Accepted to the ID:' + id,
  1518. 'success'
  1519. ).then(() => {
  1520. location.reload(); // Reload page after success
  1521. });
  1522. } else {
  1523. Swal.fire(
  1524. 'Error',
  1525. 'Failed to Approve the Refund',
  1526. 'error'
  1527. );
  1528. }
  1529. },
  1530. error: function (xhr, textStatus, errorThrown) {
  1531. loadingSwal.close(); // Close the loading popup
  1532. Swal.fire(
  1533. 'Error',
  1534. 'Failed to Approve the Refund',
  1535. 'error'
  1536. );
  1537. },
  1538. complete: function() {
  1539. // Re-enable the button after request completes (success or error)
  1540. approveButton.disabled = false;
  1541. }
  1542. });
  1543. } else if (result.isDenied) {
  1544. Swal.fire('Changes are not saved', '', 'info');
  1545. }
  1546. });
  1547. }
  1548. document.addEventListener('DOMContentLoaded', function () {
  1549. var ddDetailsCheckbox = document.getElementById('ddDetailsCheckbox');
  1550. var ddDetailsFields = document.querySelectorAll('.dd-details input');
  1551. var ddDetailsContainer = document.querySelector('.dd-details');
  1552. var challonDetailsForm = document.getElementById('challonDetailsForm');
  1553. var submitButton = document.getElementById('submitChallonDetails');
  1554. // Toggle DD Details visibility and required status based on checkbox state
  1555. ddDetailsCheckbox.addEventListener('change', function () {
  1556. if (ddDetailsCheckbox.checked) {
  1557. ddDetailsContainer.style.display = 'flex';
  1558. ddDetailsFields.forEach(function (field) {
  1559. field.setAttribute('required', 'required');
  1560. });
  1561. } else {
  1562. ddDetailsContainer.style.display = 'none';
  1563. ddDetailsFields.forEach(function (field) {
  1564. field.removeAttribute('required');
  1565. field.value = ''; // Optionally clear the fields
  1566. field.classList.remove('is-invalid'); // Remove invalid class if any
  1567. });
  1568. }
  1569. });
  1570. // Handle form submission
  1571. submitButton.addEventListener('click', function () {
  1572. var isValid = challonDetailsForm.checkValidity();
  1573. if (isValid) {
  1574. // Form is valid, proceed with submission (e.g., via AJAX)
  1575. // Custom submission code here
  1576. } else {
  1577. // Trigger browser's validation messages
  1578. challonDetailsForm.classList.add('was-validated');
  1579. }
  1580. });
  1581. // Prevent form submission on Enter key
  1582. challonDetailsForm.addEventListener('submit', function (event) {
  1583. event.preventDefault();
  1584. event.stopPropagation();
  1585. });
  1586. });
  1587. $('#challonDetails').on('hidden.bs.modal', function () {
  1588. // Clear all input fields
  1589. $(this).find('form')[0].reset();
  1590. // Optionally, reset any custom styling or classes
  1591. $(this).find('input').removeClass('is-valid is-invalid');
  1592. });
  1593. </script>
  1594. </body>
  1595. </html>