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.

1496 lines
54 KiB

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