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.

1449 lines
54 KiB

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