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.

1750 lines
66 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 Failed</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 : ${settlementrefundfailed}">
  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 Failed</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 : ${refundfailedcancelledbookings}">
  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 Failed</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 : ${refundfailedrejectedbookings}">
  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>
  411. <th
  412. style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
  413. Actual refundable Amount:</th>
  414. <td class="fw-semibold amount-cell"
  415. style="padding: 0.45rem 0.45rem; color: green;" id="td_settel_amt">0
  416. </td>
  417. </tr>
  418. </table>
  419. </div>
  420. </div>
  421. <!-- DD detail -->
  422. <div id="challonTableContainer"></div>
  423. <div id="ddTableContainer" style=" margin-top: -16px;"></div>
  424. <div class="mb-12">
  425. <label class="form-label">Reject Reason:<span class="text-danger"></span></label>
  426. <textarea class="form-control" name="reason" id="reason" style="width: 100%;"
  427. required></textarea>
  428. </div>
  429. </div>
  430. <div class="block-content block-content-full text-end bg-body" id="mbutton2">
  431. <button type="button" class="btn btn-sm btn-primary" id="generatechallon">Generate
  432. Challan</button>
  433. <button type="button" class="btn btn-sm btn-primary" id="uploadchallon"
  434. th:onclick="uploadChallon()">Upload Challan</button>
  435. <button type="button" class="btn btn-sm btn-alt-success" id="approvebutton"
  436. th:onclick="accept()">Approve</button>
  437. <button type="button" class="btn btn-sm btn-alt-secondary"
  438. data-bs-dismiss="modal">Close</button>
  439. <button type="submit" class="btn btn-sm btn-primary">Reject</button>
  440. <a id="downloadLink" style="display: none;"></a>
  441. </div>
  442. </div>
  443. </form>
  444. </div>
  445. </div>
  446. </div>
  447. <!-- Cancellation booking Details-->
  448. <div class="modal fade backdrop" id="cancelledBookingForm" data-backdrop="static" tabindex="-1" role="dialog"
  449. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  450. <div class="modal-dialog modal-lg" role="document">
  451. <div class="modal-content">
  452. <form id="ownform">
  453. <div class="block block-rounded block-themed block-transparent mb-0">
  454. <div class="block-header bg-primary-dark">
  455. <h3 class="block-title" id="2mtitle">Booking Information</h3>
  456. <div class="block-options">
  457. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  458. aria-label="Close">
  459. <i class="fa fa-fw fa-times"></i>
  460. </button>
  461. </div>
  462. </div>
  463. <div class="block-content row">
  464. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  465. <input type="hidden" class="form-control text-center" name="booksid" id="booksId"
  466. disabled />
  467. <div class="card-body">
  468. <table>
  469. <tr>
  470. <th colspan="10" style="background-color: #f2f2f2;">User Details</th>
  471. </tr>
  472. <tr>
  473. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
  474. </th>
  475. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="username">
  476. </td>
  477. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
  478. </th>
  479. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="mobileno">
  480. </td>
  481. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
  482. </th>
  483. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="usertype">
  484. </td>
  485. </tr>
  486. <tr>
  487. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
  488. </th>
  489. <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  490. id="useraddress"></td>
  491. </tr>
  492. </table>
  493. </div>
  494. </div>
  495. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  496. <div class="card-body">
  497. <table>
  498. <tr>
  499. <th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
  500. </tr>
  501. <tr>
  502. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
  503. </th>
  504. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  505. id="hallname"></td>
  506. </tr>
  507. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
  508. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  509. id="halladdress"></td>
  510. </tr>
  511. <tr>
  512. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  513. Name:</th>
  514. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  515. id="caretakername"></td>
  516. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  517. Mobile Number:</th>
  518. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  519. id="caretakermobileNumber"></td>
  520. </tr>
  521. </table>
  522. </div>
  523. </div>
  524. <div class="col-md-12 col-lg-12 col-sm-12">
  525. <div class="card-body">
  526. <table>
  527. <tr>
  528. <th colspan="4" style="background-color: #f2f2f2;">Booking
  529. Details (Booking Id:-<span id="bookid" style="color:blue"></span>)
  530. </th>
  531. </tr>
  532. <tr>
  533. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
  534. </th>
  535. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  536. id="bookingDate"></td>
  537. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Status:
  538. </th>
  539. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  540. id="bookingStatus"></td>
  541. </tr>
  542. <tr>
  543. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
  544. </th>
  545. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  546. id="startDate"></td>
  547. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
  548. Amount:</th>
  549. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  550. id="depositeAmount"></td>
  551. </tr>
  552. <tr>
  553. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END
  554. Date:</th>
  555. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="endDate">
  556. </td>
  557. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
  558. </th>
  559. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  560. id="hallAmount"></td>
  561. </tr>
  562. <tr>
  563. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
  564. </th>
  565. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  566. id="startingSlot"></td>
  567. <th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
  568. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  569. id="gst"></td>
  570. </tr>
  571. <tr>
  572. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
  573. </th>
  574. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  575. id="endingSlot"></td>
  576. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
  577. </th>
  578. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  579. id="totalAmount"></td>
  580. </tr>
  581. </table>
  582. </div>
  583. </div>
  584. <div class="col-sm-12">
  585. <!--<label class="form-label">Documents:<span class="text-danger"></span></label>-->
  586. <div class="documents" id="documents"></div>
  587. </div>
  588. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  589. <input type="hidden" class="form-control text-center" name="bookingid"
  590. id="bookingid" disabled />
  591. <div class="card-body">
  592. <table>
  593. <tr>
  594. <th colspan="10" style="background-color: #f2f2f2;">Booking Payment
  595. Details</th>
  596. </tr>
  597. <tr>
  598. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
  599. ID:</th>
  600. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  601. id="transactionId"></td>
  602. </tr>
  603. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount Received:
  604. </th>
  605. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  606. id="payamountReceived"></td>
  607. </tr>
  608. <tr>
  609. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
  610. Status:</th>
  611. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  612. id="paymentStatus"></td>
  613. </tr>
  614. </table>
  615. </div>
  616. </div>
  617. </div>
  618. </div>
  619. <div class="block-content block-content-full text-end bg-body" id="mbutton2">
  620. <button type="button" class="btn btn-sm btn-alt-secondary"
  621. data-bs-dismiss="modal">Close</button>
  622. <button id="approvedButton" type="button" class="btn btn-sm btn-primary"
  623. th:onclick="approverefund()">Approve</button>
  624. </div>
  625. </form>
  626. </div>
  627. </div>
  628. </div>
  629. <!-- end of Cancellation booking details-->
  630. <div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
  631. aria-hidden="true">
  632. <div class="modal-dialog modal-lg" role="document">
  633. <div class="modal-content">
  634. <div class="modal-header">
  635. <h5 class="modal-title" id="fileModalLabel">File Preview</h5>
  636. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
  637. <span aria-hidden="true">&times;</span>
  638. </button>
  639. </div>
  640. <div class="modal-body">
  641. <embed id="filePreview" src="" width="100%" height="600px">
  642. </div>
  643. <div class="modal-footer">
  644. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  645. </div>
  646. </div>
  647. </div>
  648. </div>
  649. </div>
  650. <!-- challon Model-->
  651. <div class="modal fade" id="challonDetails" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  652. <div class="modal-dialog modal-lg">
  653. <div class="modal-content">
  654. <div class="modal-header">
  655. <h5 class="modal-title" id="exampleModalLabel">Challan Details</h5>
  656. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  657. </div>
  658. <div class="modal-body">
  659. <form id="challonDetailsForm" novalidate>
  660. <div class="row">
  661. <div class="col-sm-12 mb-3">
  662. <input type="checkbox" id="ddDetailsCheckbox">
  663. <label for="ddDetailsCheckbox">Include DD Details</label>
  664. </div>
  665. </div>
  666. <div class="row dd-details" style="display: none;">
  667. <div class="col-sm-4 mb-3">
  668. <label class="form-label" for="ddnumber">DD Number:*</label>
  669. <input type="text" class="form-control text-center" name="ddnumber" id="ddnumber"
  670. minlength="6" maxlength="10"
  671. oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);" />
  672. <div class="invalid-feedback">Please enter a valid DD number.</div>
  673. </div>
  674. <div class="col-sm-4 mb-3">
  675. <label class="form-label" for="dddate">DD Date:*</label>
  676. <input type="date" class="form-control text-center" name="dddate" id="dddate" />
  677. <div class="invalid-feedback">Please enter a valid DD date.</div>
  678. </div>
  679. <div class="col-sm-4 mb-3">
  680. <label class="form-label" for="ddamount">DD Amount:*</label>
  681. <input type="text" class="form-control text-center" name="ddamount" id="ddamount"
  682. minlength="6" maxlength="10"
  683. oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);" />
  684. <div class="invalid-feedback">Please enter a valid DD amount.</div>
  685. </div>
  686. </div>
  687. <div class="row">
  688. <div class="col-sm-4 mb-3">
  689. <label class="form-label" for="challonnumber">Challan Number:*</label>
  690. <input type="text" class="form-control text-center" name="challonnumber"
  691. id="challonnumber" minlength="6" maxlength="10"
  692. oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);" required />
  693. <div class="invalid-feedback">Please enter a valid Challan number.</div>
  694. </div>
  695. <div class="col-sm-4 mb-3">
  696. <label class="form-label" for="challonamount">Challan Amount:*</label>
  697. <input type="text" class="form-control text-center" name="challonamount"
  698. id="challonamount" minlength="6" maxlength="10"
  699. oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);" required />
  700. <div class="invalid-feedback">Please enter a valid Challan amount.</div>
  701. </div>
  702. <div class="col-sm-4 mb-3">
  703. <label class="form-label" for="challonimage">Upload Challan:*</label>
  704. <input type="file" class="form-control text-center" name="challonimage"
  705. id="challonimage" required />
  706. <div class="invalid-feedback">Please upload a valid Challan image.</div>
  707. </div>
  708. </div>
  709. </form>
  710. </div>
  711. <div class="modal-footer">
  712. <button type="button" class="btn btn-primary" id="submitChallonDetails">Submit</button>
  713. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  714. </div>
  715. </div>
  716. </div>
  717. </div>
  718. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  719. <!-- End modal for pending -->
  720. <!-- Scripts -->
  721. <div th:replace="~{fragments/resetpassword :: div}"></div>
  722. <script th:replace="~{fragments/loginscript :: script}"></script>
  723. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  724. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  725. <script>
  726. $(document).ready(function () {
  727. // DataTables buttons configuration
  728. var buttons = [
  729. {
  730. extend: 'pageLength',
  731. className: 'btn btn-primary'
  732. },
  733. {
  734. title: 'Data export',
  735. extend: 'copyHtml5',
  736. text: 'Copy',
  737. className: 'btn btn-primary',
  738. id: 'copyBtn'
  739. },
  740. {
  741. extend: 'excelHtml5',
  742. text: 'Excel',
  743. className: 'btn btn-primary',
  744. id: 'excelBtn'
  745. },
  746. {
  747. extend: 'csvHtml5',
  748. text: 'CSV',
  749. className: 'btn btn-primary',
  750. id: 'csvBtn'
  751. },
  752. {
  753. extend: 'pdfHtml5',
  754. text: 'PDF',
  755. className: 'btn btn-primary',
  756. id: 'pdfBtn'
  757. }
  758. ];
  759. // Initialize DataTable for each tab on tab shown event
  760. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  761. var targetTable = $(e.target).attr('href'); // activated tab
  762. $(targetTable).find('.dataTable').DataTable().columns.adjust();
  763. });
  764. // Initialize DataTable for Settlement Approved tab
  765. $('#SettlementApprovedListTable').DataTable({
  766. dom: 'Bftip',
  767. columnDefs: [
  768. {targets: 'no-sort', orderable: false}
  769. ],
  770. lengthMenu: [
  771. [50, 100, 200, 500, -1],
  772. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  773. ],
  774. buttons: buttons,
  775. responsive: true,
  776. searching: true,
  777. select: false,
  778. processing: false,
  779. // Set width to 100%
  780. "autoWidth": true
  781. });
  782. // Initialize DataTable for Cancelled Bookings Approved tab
  783. $('#cancelledApprovedListTable').DataTable({
  784. dom: 'Bftip',
  785. columnDefs: [
  786. {targets: 'no-sort', orderable: false}
  787. ],
  788. lengthMenu: [
  789. [50, 100, 200, 500, -1],
  790. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  791. ],
  792. buttons: buttons,
  793. responsive: true,
  794. searching: true,
  795. select: false,
  796. processing: false,
  797. // Set width to 100%
  798. "autoWidth": true
  799. });
  800. // Initialize DataTable for GCC Blocked/Rejected Approved tab
  801. $('#rejectedApprovedListTable').DataTable({
  802. dom: 'Bftip',
  803. columnDefs: [
  804. {targets: 'no-sort', orderable: false}
  805. ],
  806. lengthMenu: [
  807. [50, 100, 200, 500, -1],
  808. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  809. ],
  810. buttons: buttons,
  811. responsive: true,
  812. searching: true,
  813. select: false,
  814. processing: false,
  815. // Set width to 100%
  816. "autoWidth": true
  817. });
  818. });
  819. function pending(settlementId) {
  820. $.ajax({
  821. type: "GET",
  822. url: '/communityhall/api/officer/getSettlementList',
  823. data: {
  824. 'settlementsid': settlementId
  825. },
  826. success: function (x) {
  827. showSettlementInfo(x)
  828. showDamageDetails(x);
  829. }
  830. });
  831. }
  832. function showSettlementInfo(list) {
  833. // console.log(list); // Log the damageList array
  834. // console.log(list.damageList[0]);
  835. $('#pendingSettlementForm').modal({
  836. backdrop: 'static',
  837. keyboard: false
  838. });
  839. $('#pendingSettlementForm').modal('show');
  840. document.getElementById("settlementid").value = list.settlement.settlementId;
  841. document.getElementById("td_userName").innerHTML = list.users.name;
  842. document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
  843. document.getElementById("td_usertype").innerHTML = list.users.usertype;
  844. var userDetails = list.users;
  845. var userDetailsString =
  846. userDetails.doorNo + ", " +
  847. userDetails.street + ", " +
  848. userDetails.area + ", " +
  849. userDetails.location + " ,Chennai- " +
  850. userDetails.pinCode;
  851. document.getElementById("td_useraddress").innerHTML = userDetailsString;
  852. document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
  853. var hallDetails = list.hallDetails;
  854. var hallDetailsString =
  855. hallDetails.doorNo + ", " +
  856. hallDetails.street + ", " +
  857. hallDetails.area + ", " +
  858. hallDetails.city + "- " +
  859. hallDetails.pinCode;
  860. document.getElementById("td_halladdress").innerHTML = hallDetailsString;
  861. document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
  862. document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
  863. document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
  864. document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  865. document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
  866. // Calculate GST and total amount
  867. var gstAmount = (parseFloat(list.hallAmount) * (list.hallDetails.gst / 100)).toFixed(2);
  868. var totalAmount = parseFloat(list.amountReceived).toFixed(2);
  869. document.getElementById("td_gst").innerHTML = '₹ ' + gstAmount;
  870. document.getElementById("td_totalAmount").innerHTML = '₹ ' + totalAmount;
  871. document.getElementById("td_startDate").innerHTML = list.startDate;
  872. document.getElementById("td_endDate").innerHTML = list.endDate;
  873. document.getElementById("booking_id").innerHTML = list.bookingId;
  874. function getTimeSlot(slotValue) {
  875. var timeSlot;
  876. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  877. if (trimmedSlotValue === '1') {
  878. timeSlot = 'Morning';
  879. } else if (trimmedSlotValue === '2') {
  880. timeSlot = 'Evening';
  881. } else {
  882. timeSlot = 'Unknown';
  883. }
  884. return timeSlot;
  885. }
  886. document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
  887. document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
  888. document.getElementById("td_EBNumber").innerHTML = list.hallDetails.ebNumber;
  889. document.getElementById("td_startingReading").innerHTML = list.ebDetails.startingReading;
  890. document.getElementById("td_endingReading").innerHTML = list.ebDetails.endingReading;
  891. document.getElementById("td_usedunit").innerHTML = list.ebDetails.usedUnit;
  892. document.getElementById("td_ebamountperunit").innerHTML = '₹ ' + parseFloat(list.hallDetails.ebCostPerUnit).toFixed(2);
  893. document.getElementById("td_depositeamountforrefund").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  894. document.getElementById("td_electricityamount").innerHTML = '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2);
  895. document.getElementById("td_ebAmount").innerHTML = '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2);
  896. document.getElementById("td_damage").innerHTML = '₹ ' + parseFloat(list.settlement.damageAmount).toFixed(2);
  897. var eb_amt = parseFloat(list.ebDetails.ebAmount).toFixed(2);
  898. var deposit_amt = parseFloat(list.depositAmount).toFixed(2);
  899. var tem_total = (deposit_amt - eb_amt).toFixed(2);
  900. $("#td_settel_amt").html(tem_total);
  901. }
  902. function showDamageDetails(data) {
  903. var damageFieldContainer = $('#damageDetails');
  904. damageFieldContainer.empty();
  905. // Create a div for table responsiveness
  906. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '0px');
  907. // Create table with similar classes and styles to the modal table
  908. var table = $('<table>').addClass('table table-bordered table-striped').css({'width': '97%', 'border-color': 'black', 'border-top-color': 'white'});
  909. var thead = $('<thead>').addClass('thead-light');
  910. var tbody = $('<tbody>');
  911. // Create Damage Details header row
  912. var headerRow = $('<tr>').appendTo(thead);
  913. $('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
  914. 'padding': '0.45rem 0.45rem',
  915. 'background-color': '#f2f2f2',
  916. 'font-weight': 'bold',
  917. 'color': 'black',
  918. }).appendTo(headerRow);
  919. // Create table header row
  920. var columnHeadersRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  921. $('<th>').text('S.No').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  922. $('<th>').text('Asset Name').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  923. $('<th>').text('Damage Img').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  924. $('<th>').text('Cost').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  925. $('<th>').text('Qty').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  926. $('<th>').text('Amount').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
  927. var totalAmount = 0;
  928. // Check if damageList is empty
  929. if (data.damageList.length === 0) {
  930. var row = $('<tr>').appendTo(tbody);
  931. $('<td>').attr('colspan', '6').text('No Damaged Items').css({
  932. 'padding': '0.45rem 0.45rem',
  933. 'text-align': 'center',
  934. 'font-weight': 'bold',
  935. 'background-color': '#f2f2f2'
  936. }).appendTo(row);
  937. } else {
  938. $.each(data.damageList, function (index, detail) {
  939. var row = $('<tr>').appendTo(tbody);
  940. $('<td>').text(index + 1).css({
  941. 'padding': '0.45rem 0.45rem',
  942. 'text-align': 'center'
  943. }).appendTo(row);
  944. $('<td>').text(detail.assetName).css({
  945. 'padding': '0.45rem 0.45rem',
  946. 'text-align': 'center'
  947. }).appendTo(row);
  948. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
  949. showDamageImage(detail.damageImageUrl);
  950. });
  951. $('<td>').css({
  952. 'padding': '0.45rem 0.45rem',
  953. 'text-align': 'center'
  954. }).append(viewLink).appendTo(row);
  955. var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
  956. $('<td>').text('₹ ' + assetamt).css({
  957. 'padding': '0.45rem 0.45rem',
  958. 'text-align': 'center'
  959. }).appendTo(row);
  960. $('<td>').text(detail.quantity).css({
  961. 'padding': '0.45rem 0.45rem',
  962. 'text-align': 'center'
  963. }).appendTo(row);
  964. var amount = detail.assetAmount;
  965. totalAmount += amount;
  966. $('<td>').text('₹ ' + amount.toFixed(2)).css({
  967. 'padding': '0.45rem 0.45rem',
  968. 'text-align': 'right'
  969. }).appendTo(row);
  970. });
  971. // Add row for total amount
  972. var totalRow = $('<tr>').appendTo(tbody);
  973. $('<td>').attr('colspan', '5').text('Total Amount').css({
  974. 'padding': '0.45rem 0.45rem',
  975. 'font-weight': 'bold',
  976. 'background-color': '#f2f2f2'
  977. }).appendTo(totalRow);
  978. $('<td>').text('₹ ' + totalAmount.toFixed(2)).css({
  979. 'padding': '0.45rem 0.45rem',
  980. 'text-align': 'right'
  981. }).appendTo(totalRow);
  982. $("#td_dam_amt").html('₹ ' + totalAmount.toFixed(2));
  983. }
  984. // Append the table elements to the container div
  985. table.append(thead, tbody);
  986. tableResponsiveDiv.append(table);
  987. damageFieldContainer.append(tableResponsiveDiv);
  988. var temp_total = parseFloat($("#td_settel_amt").html());
  989. var settleAmount = temp_total - totalAmount;
  990. var refundStatus = data.refundStatus;
  991. if (settleAmount < 0) {
  992. // console.log(settleAmount);
  993. $("#td_settel_amt").html(0.00);
  994. $("#pendingcolumn").show();
  995. $("#td_pending_amt").html('₹ ' + Math.abs(settleAmount).toFixed(2));
  996. $("#td_pending_amt").css("color", "red");
  997. $("#generatechallon").show();
  998. $("#uploadchallon").show();
  999. $("#approvebutton").prop("disabled", true);
  1000. $("#rejectbutton").show();
  1001. } else {
  1002. $("#td_settel_amt").html('₹ ' + settleAmount.toFixed(2));
  1003. $("#pendingcolumn").hide();
  1004. $("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
  1005. $("#generatechallon").hide();
  1006. $("#uploadchallon").hide();
  1007. }
  1008. if (data.settlement.challonamount) {
  1009. // Show the table containing ddnumber and challan image
  1010. var challonTableContainer = $("#challonTableContainer"); // Assuming you have a div with this ID for the table
  1011. challonTableContainer.empty(); // Clear any existing content
  1012. challonTableContainer.show(); // Ensure the container is visible
  1013. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
  1014. // Create table with similar classes and styles to the modal table
  1015. var table = $('<table>').addClass('table table-bordered table-striped').css({'width': '100%', 'border-color': 'black', 'border-top-color': 'white'});
  1016. var thead = $('<thead>').addClass('thead-light');
  1017. var tbody = $('<tbody>');
  1018. var headerRow = $('<tr>').appendTo(thead);
  1019. $('<th>').attr('colspan', '6').text('Challan Details').css({
  1020. 'padding': '0.45rem 0.45rem',
  1021. 'background-color': '#f2f2f2',
  1022. 'font-weight': 'bold',
  1023. 'color': 'black',
  1024. }).appendTo(headerRow);
  1025. var columnRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  1026. //$('<th>').text('DD Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1027. //$('<th>').text('DD Date').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1028. $('<th>').text('Challan Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1029. $('<th>').text('Challan Amount').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1030. $('<th>').text('Challan Image').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1031. var row = $('<tr>').appendTo(tbody);
  1032. //$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1033. //$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1034. $('<td>').text(data.settlement.challonnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1035. $('<td>').text(data.settlement.challonamount).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. var challanImgLink = $('<a>').attr('href', 'javascript:void(0)').text('View Image').on('click', function () {
  1038. showchallonimage(data.settlement.challon);
  1039. });
  1040. $('<td>').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).append(challanImgLink).appendTo(row);
  1041. table.append(thead, tbody);
  1042. challonTableContainer.append(table);
  1043. // Hide all buttons
  1044. $("#generatechallon").hide();
  1045. $("#uploadchallon").hide();
  1046. $("#approvebutton").prop("disabled", false);
  1047. } else {
  1048. // Hide the ddTableContainer if ddnumber is not present
  1049. $("#challonTableContainer").hide();
  1050. }
  1051. if (data.settlement.ddnumber) {
  1052. // Show the table containing ddnumber and challan image
  1053. var ddTableContainer = $("#ddTableContainer"); // Assuming you have a div with this ID for the table
  1054. ddTableContainer.empty(); // Clear any existing content
  1055. ddTableContainer.show(); // Ensure the container is visible
  1056. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
  1057. // Create table with similar classes and styles to the modal table
  1058. var table = $('<table>').addClass('table table-bordered table-striped').css({'width': '100%', 'border-color': 'black', 'border-top-color': 'white'});
  1059. var thead = $('<thead>').addClass('thead-light');
  1060. var tbody = $('<tbody>');
  1061. var headerRow = $('<tr>').appendTo(thead);
  1062. $('<th>').attr('colspan', '6').text('DD Details').css({
  1063. 'padding': '0.45rem 0.45rem',
  1064. 'background-color': '#f2f2f2',
  1065. 'font-weight': 'bold',
  1066. 'color': 'black',
  1067. }).appendTo(headerRow);
  1068. var columnRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  1069. $('<th>').text('DD Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1070. $('<th>').text('DD Amount').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1071. $('<th>').text('DD Date').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1072. var row = $('<tr>').appendTo(tbody);
  1073. $('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1074. $('<td>').text(data.settlement.ddamount).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1075. $('<td>').text(data.settlement.dddate).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1076. table.append(thead, tbody);
  1077. ddTableContainer.append(table);
  1078. // Hide all buttons
  1079. $("#generatechallon").hide();
  1080. $("#uploadchallon").hide();
  1081. $("#approvebutton").prop("disabled", false);
  1082. } else {
  1083. // Hide the ddTableContainer if ddnumber is not present
  1084. $("#ddTableContainer").hide();
  1085. }
  1086. }
  1087. function showDamageImage(damageImageUrl) {
  1088. document.getElementById('filePreview').src = damageImageUrl;
  1089. $('#fileModal').modal('show');
  1090. }
  1091. function showchallonimage(challanImgLink){
  1092. document.getElementById('filePreview').src = challanImgLink;
  1093. $('#fileModal').modal('show');
  1094. }
  1095. function uploadChallon() {
  1096. $('#challonDetails').modal('show');
  1097. }
  1098. $(document).ready(function () {
  1099. $("#submitChallonDetails").click(function (event) {
  1100. // Prevent default form submission
  1101. event.preventDefault();
  1102. // Get the checkbox state and the input values
  1103. let ddDetailsSelected = $("#ddDetailsCheckbox").prop("checked");
  1104. let settlementId = $("#settlementid").val();
  1105. let ddNumber = $("#ddnumber").val();
  1106. let ddDate = $("#dddate").val();
  1107. let ddamount = $("#ddamount").val();
  1108. let challonnumber = $("#challonnumber").val();
  1109. let challonamount = $("#challonamount").val();
  1110. let challonimage = $("#challonimage")[0].files[0];
  1111. // Validate DD fields if the checkbox is selected
  1112. let isValid = true;
  1113. if (ddDetailsSelected) {
  1114. if (!ddNumber || !ddDate || !ddamount) {
  1115. isValid = false;
  1116. $("#ddnumber").addClass("is-invalid");
  1117. $("#dddate").addClass("is-invalid");
  1118. $("#ddamount").addClass("is-invalid");
  1119. } else {
  1120. $("#ddnumber").removeClass("is-invalid");
  1121. $("#dddate").removeClass("is-invalid");
  1122. $("#ddamount").removeClass("is-invalid");
  1123. }
  1124. }
  1125. // Validate Challan fields
  1126. if (!challonnumber || !challonamount || !challonimage) {
  1127. isValid = false;
  1128. $("#challonnumber").addClass("is-invalid");
  1129. $("#challonamount").addClass("is-invalid");
  1130. $("#challonimage").addClass("is-invalid");
  1131. } else {
  1132. $("#challonnumber").removeClass("is-invalid");
  1133. $("#challonamount").removeClass("is-invalid");
  1134. $("#challonimage").removeClass("is-invalid");
  1135. }
  1136. // If the form is valid, proceed with AJAX call
  1137. if (isValid) {
  1138. // Create FormData object
  1139. let formData = new FormData();
  1140. formData.append("ddNumber", ddNumber);
  1141. formData.append("ddDate", ddDate);
  1142. formData.append("challonimage", challonimage);
  1143. formData.append("challonnumber", challonnumber);
  1144. formData.append("challonamount", challonamount);
  1145. formData.append("ddamount", ddamount);
  1146. // AJAX call to upload the data
  1147. $.ajax({
  1148. type: "POST",
  1149. url: "/communityhall/api/officer/uploadChallonDetails/" + settlementId,
  1150. data: formData,
  1151. processData: false, // Prevent jQuery from automatically transforming the data into a query string
  1152. contentType: false, // Let jQuery know that we're sending FormData
  1153. success: function (response) {
  1154. $('#challonDetails').modal('hide');
  1155. location.reload();
  1156. },
  1157. error: function (xhr, status, error) {
  1158. // Handle error
  1159. }
  1160. });
  1161. } else {
  1162. // Optionally, focus on the first invalid field
  1163. $(".is-invalid:first").focus();
  1164. }
  1165. });
  1166. });
  1167. function accept() {
  1168. let id = document.getElementById("settlementid").value;
  1169. const acceptButton = document.getElementById("approvebutton"); // Add an ID to your button in the HTML
  1170. Swal.fire({
  1171. title: 'Do you want to Approve this Settlement?',
  1172. showDenyButton: true,
  1173. showCancelButton: true,
  1174. confirmButtonText: 'YES',
  1175. denyButtonText: 'NO',
  1176. }).then((result) => {
  1177. if (result.isConfirmed) {
  1178. // Disable the button to prevent multiple clicks
  1179. acceptButton.disabled = true;
  1180. // Show the loading screen
  1181. const loadingSwal = Swal.fire({
  1182. title: 'Processing...',
  1183. text: 'Please wait while we approve the settlement.',
  1184. allowOutsideClick: false, // Prevent closing the popup
  1185. didOpen: () => {
  1186. Swal.showLoading(); // Show the loading spinner
  1187. },
  1188. showConfirmButton: false, // Hide the confirm button during loading
  1189. });
  1190. $.ajax({
  1191. type: "POST",
  1192. url: '/communityhall/api/officer/updateApprovedSettlementStatus/' + id,
  1193. data: {
  1194. 'status': 'APPROVED',
  1195. 'comments': 'Accepted',
  1196. 'settlementId': id
  1197. },
  1198. success: function (data, textStatus, xhr) {
  1199. loadingSwal.close(); // Close the loading popup
  1200. if (xhr.status === 200) {
  1201. Swal.fire(
  1202. 'Done',
  1203. 'Successfully Accepted to the ID: ' + id,
  1204. 'success'
  1205. ).then(() => {
  1206. location.reload(); // Reload the page after success
  1207. });
  1208. } else {
  1209. Swal.fire(
  1210. 'Error',
  1211. 'Failed to accept the user',
  1212. 'error'
  1213. );
  1214. }
  1215. },
  1216. error: function (xhr, textStatus, errorThrown) {
  1217. loadingSwal.close(); // Close the loading popup
  1218. Swal.fire(
  1219. 'Error',
  1220. 'Failed to accept the user',
  1221. 'error'
  1222. );
  1223. },
  1224. complete: function() {
  1225. // Re-enable the button after request completes (success or error)
  1226. acceptButton.disabled = false;
  1227. }
  1228. });
  1229. } else if (result.isDenied) {
  1230. Swal.fire('Changes are not saved', '', 'info');
  1231. }
  1232. });
  1233. }
  1234. function rejectsubmit() {
  1235. let id = document.getElementById("settlementid").value;
  1236. let reason = $("#reason").val();
  1237. Swal.fire({
  1238. title: 'Do you want to Reject this Settlement ?',
  1239. showDenyButton: true,
  1240. showCancelButton: true,
  1241. confirmButtonText: 'YES',
  1242. denyButtonText: 'NO',
  1243. }).then((result) => {
  1244. /* Read more about isConfirmed, isDenied below */
  1245. if (result.isConfirmed) {
  1246. // console.log("Submitting rejection...");
  1247. $.ajax({
  1248. type: "POST",
  1249. url: '/communityhall/api/officer/updateRejectSettlementStatus/' + id,
  1250. data: {
  1251. 'status': 'REJECTED',
  1252. 'comments': reason,
  1253. 'settlementId': id
  1254. },
  1255. success: function (data, textStatus, xhr) {
  1256. // console.log("Rejection successful");
  1257. if (xhr.status === 200) { // Check if the response status is OK
  1258. Swal.fire(
  1259. 'Done',
  1260. 'Successfully Rejected to the ID:' + id,
  1261. 'success'
  1262. ).then(() => {
  1263. location.reload();
  1264. });
  1265. } else {
  1266. Swal.fire(
  1267. 'Error',
  1268. 'Failed to reject the user',
  1269. 'error'
  1270. );
  1271. }
  1272. },
  1273. error: function (xhr, textStatus, errorThrown) {
  1274. console.error("Error:", errorThrown);
  1275. Swal.fire(
  1276. 'Error',
  1277. 'Failed to reject the user',
  1278. 'error'
  1279. );
  1280. }
  1281. });
  1282. } else if (result.isDenied) {
  1283. Swal.fire('Changes are not saved', '', 'info')
  1284. }
  1285. });
  1286. return false; // Prevent form submission
  1287. }
  1288. $(document).ready(function () {
  1289. $("#generatechallon").click(function () {
  1290. // Generate plain text content (replace with your actual content generation logic)
  1291. let textContent = "This is the content of the text file.";
  1292. // Create a Blob containing the text
  1293. let blob = new Blob([textContent], {type: "text/plain"});
  1294. // Create URL for the Blob
  1295. let url = URL.createObjectURL(blob);
  1296. // Get the download link element
  1297. let downloadLink = $("#downloadLink");
  1298. if (downloadLink.length === 0) {
  1299. console.error("Download link element not found");
  1300. return;
  1301. }
  1302. // Set download link attributes
  1303. downloadLink.attr({
  1304. href: url,
  1305. download: "challon.txt" // Specify the filename for download
  1306. });
  1307. // Simulate click on the download link
  1308. downloadLink[0].click();
  1309. // Clean up
  1310. URL.revokeObjectURL(url);
  1311. });
  1312. });
  1313. function cancelledbooking(bookingId) {
  1314. $.ajax({
  1315. type: "GET",
  1316. url: '/communityhall/api/officer/getBookingDetails',
  1317. data: {
  1318. 'bookingsId': bookingId
  1319. },
  1320. success: function (x) {
  1321. // console.log(x);
  1322. showcancelledbookingDetails(x);
  1323. }
  1324. });
  1325. }
  1326. function rejectedbooking(bookingId) {
  1327. $.ajax({
  1328. type: "GET",
  1329. url: '/communityhall/api/officer/getBookingDetails',
  1330. data: {
  1331. 'bookingsId': bookingId
  1332. },
  1333. success: function (x) {
  1334. // console.log(x);
  1335. showcancelledbookingDetails(x);
  1336. }
  1337. });
  1338. }
  1339. function showcancelledbookingDetails(list) {
  1340. $('#cancelledBookingForm').modal({
  1341. backdrop: 'static',
  1342. keyboard: false
  1343. });
  1344. $('#cancelledBookingForm').modal('show');
  1345. document.getElementById("username").innerHTML = list.users.name;
  1346. document.getElementById("mobileno").innerHTML = list.users.mobileNo;
  1347. document.getElementById("usertype").innerHTML = list.users.usertype;
  1348. document.getElementById("booksId").value = list.bookingId;
  1349. var userDetails = list.users;
  1350. var userDetailsString =
  1351. userDetails.doorNo + ", " +
  1352. userDetails.street + ", " +
  1353. userDetails.area + ", " +
  1354. userDetails.location + "- " +
  1355. userDetails.pinCode;
  1356. document.getElementById("useraddress").innerHTML = userDetailsString;
  1357. document.getElementById("hallname").innerHTML = list.hallDetails.hallName;
  1358. var hallDetails = list.hallDetails;
  1359. var hallDetailsString =
  1360. hallDetails.doorNo + ", " +
  1361. hallDetails.street + ", " +
  1362. hallDetails.area + ", " +
  1363. hallDetails.city + "- " +
  1364. hallDetails.pinCode;
  1365. document.getElementById("halladdress").innerHTML = hallDetailsString;
  1366. document.getElementById("caretakername").innerHTML = list.hallDetails.hallInchargeName;
  1367. document.getElementById("caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
  1368. document.getElementById("bookingDate").innerHTML = list.bookingDate;
  1369. document.getElementById("depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  1370. document.getElementById("hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
  1371. document.getElementById("totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2);
  1372. var gstcl = (list.hallAmount * (list.hallDetails.gst / 100));
  1373. var formattedGst = gstcl.toFixed(2);
  1374. document.getElementById("gst").innerHTML = '₹ ' + formattedGst;
  1375. document.getElementById("startDate").innerHTML = list.startDate;
  1376. document.getElementById("endDate").innerHTML = list.endDate;
  1377. document.getElementById("bookid").innerHTML = list.bookingId;
  1378. function getTimeSlot(slotValue) {
  1379. // console.log("Slot Value in getTimeSlot function:", slotValue);
  1380. var timeSlot;
  1381. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  1382. if (trimmedSlotValue === '1') {
  1383. timeSlot = 'Morning';
  1384. } else if (trimmedSlotValue === '2') {
  1385. timeSlot = 'Evening';
  1386. } else {
  1387. timeSlot = 'Unknown';
  1388. }
  1389. // console.log("Time Slot:", timeSlot);
  1390. return timeSlot;
  1391. }
  1392. document.getElementById("startingSlot").innerHTML = getTimeSlot(list.startingSlot);
  1393. document.getElementById("endingSlot").innerHTML = getTimeSlot(list.endingSlot);
  1394. document.getElementById("bookingStatus").innerHTML = list.bookingStatus;
  1395. document.getElementById("transactionId").innerHTML = list.payments.transactionId;
  1396. document.getElementById("payamountReceived").innerHTML = '₹ ' + list.payments.amountReceived;
  1397. document.getElementById("paymentStatus").innerHTML = list.payments.paymentStatus;
  1398. showReasonDocuments(list);
  1399. }
  1400. function showReasonDocuments(list) {
  1401. $.ajax({
  1402. type: "GET",
  1403. url: '/communityhall/api/officer/getReasonByName',
  1404. data: {
  1405. 'reasonName': list.reason
  1406. },
  1407. success: function (x) {
  1408. // console.log(x);
  1409. showReasonWithDocument(x, list);
  1410. }
  1411. });
  1412. }
  1413. // Display booking documents
  1414. function showReasonWithDocument(reasonData, list) {
  1415. var reasonDocumentData = reasonData.reasonDocumentMasterList;
  1416. var bookingDocumentsList = list.bookingDocumentsList;
  1417. const reasonFieldsContainer = $('#documents');
  1418. reasonFieldsContainer.empty();
  1419. // Create a responsive table container
  1420. var tableResponsiveDiv = $('<div>').addClass('table-responsive');
  1421. // Create the table with Bootstrap classes and custom styles
  1422. var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
  1423. 'width': '100%',
  1424. 'height': 'auto',
  1425. 'border': '1px solid black'
  1426. });
  1427. // Create the table header (thead)
  1428. var thead = $('<thead>').appendTo(table);
  1429. var headerRow = $('<tr>').appendTo(thead);
  1430. $('<th>').attr('colspan', '3').text('Document Details').css({
  1431. 'color': 'black',
  1432. 'font-weight': 'bold',
  1433. 'background-color': '#f2f2f2',
  1434. 'padding': '0.45rem 0.45rem'
  1435. }).appendTo(headerRow);
  1436. // Create header row for columns
  1437. var columnHeadersRow = $('<tr>').appendTo(thead);
  1438. $('<th>').text('S.No').appendTo(columnHeadersRow);
  1439. $('<th>').text('Required Info').appendTo(columnHeadersRow);
  1440. $('<th>').text('Required Documents').appendTo(columnHeadersRow);
  1441. // Create the table body (tbody)
  1442. var tbody = $('<tbody>').appendTo(table);
  1443. // Iterate through the documents list and populate rows
  1444. for (var i = 0; i < bookingDocumentsList.length; i++) {
  1445. (function (index) {
  1446. var row = $('<tr>').appendTo(tbody);
  1447. $('<td>').text(index + 1).appendTo(row);
  1448. $('<td>').text(reasonDocumentData[index].fieldName + ': ' + bookingDocumentsList[index].name).appendTo(row);
  1449. // Create a link to view document image
  1450. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
  1451. showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
  1452. });
  1453. $('<td>').append(viewLink).appendTo(row);
  1454. })(i);
  1455. }
  1456. // Append table to the responsive container
  1457. tableResponsiveDiv.append(table);
  1458. // Append table to the container in the DOM
  1459. reasonFieldsContainer.append(tableResponsiveDiv);
  1460. }
  1461. function showDocumentImage(fileURL) {
  1462. //console.log(fileURL);
  1463. openFileModal(fileURL);
  1464. }
  1465. // Event delegation for dynamically added elements
  1466. $(document).on('click', '.view-document', function () {
  1467. const fileURL = $(this).data('url');
  1468. openFileModal(fileURL);
  1469. });
  1470. function openFileModal(fileURL) {
  1471. $('#filePreview').attr('src', fileURL);
  1472. $('#fileModal').modal('show');
  1473. }
  1474. function approverefund() {
  1475. let id = document.getElementById("booksId").value;
  1476. const approveButton = document.getElementById("approvedButton");
  1477. Swal.fire({
  1478. title: 'Do you want to Approve this Settlement?',
  1479. showDenyButton: true,
  1480. showCancelButton: true,
  1481. confirmButtonText: 'YES',
  1482. denyButtonText: 'NO',
  1483. }).then((result) => {
  1484. if (result.isConfirmed) {
  1485. // Disable the button after user confirms
  1486. approveButton.disabled = true;
  1487. // Show the loading popup
  1488. const loadingSwal = Swal.fire({
  1489. title: 'Processing...',
  1490. text: 'Please wait while we approve the settlement.',
  1491. allowOutsideClick: false, // Prevent closing the popup
  1492. didOpen: () => {
  1493. Swal.showLoading(); // Show the loading spinner
  1494. },
  1495. showConfirmButton: false, // Hide the confirm button during loading
  1496. });
  1497. $.ajax({
  1498. type: "POST",
  1499. url: '/communityhall/api/officer/approveCancelledBookingRefund/' + id,
  1500. data: {
  1501. 'status': 'APPROVED',
  1502. },
  1503. success: function (data, textStatus, xhr) {
  1504. loadingSwal.close(); // Close the loading popup
  1505. if (xhr.status === 200) {
  1506. Swal.fire(
  1507. 'Done',
  1508. 'Successfully Accepted to the ID:' + id,
  1509. 'success'
  1510. ).then(() => {
  1511. location.reload(); // Reload page after success
  1512. });
  1513. } else {
  1514. Swal.fire(
  1515. 'Error',
  1516. 'Failed to Approve the Refund',
  1517. 'error'
  1518. );
  1519. }
  1520. },
  1521. error: function (xhr, textStatus, errorThrown) {
  1522. loadingSwal.close(); // Close the loading popup
  1523. Swal.fire(
  1524. 'Error',
  1525. 'Failed to Approve the Refund',
  1526. 'error'
  1527. );
  1528. },
  1529. complete: function() {
  1530. // Re-enable the button after request completes (success or error)
  1531. approveButton.disabled = false;
  1532. }
  1533. });
  1534. } else if (result.isDenied) {
  1535. Swal.fire('Changes are not saved', '', 'info');
  1536. }
  1537. });
  1538. }
  1539. document.addEventListener('DOMContentLoaded', function () {
  1540. var ddDetailsCheckbox = document.getElementById('ddDetailsCheckbox');
  1541. var ddDetailsFields = document.querySelectorAll('.dd-details input');
  1542. var ddDetailsContainer = document.querySelector('.dd-details');
  1543. var challonDetailsForm = document.getElementById('challonDetailsForm');
  1544. var submitButton = document.getElementById('submitChallonDetails');
  1545. // Toggle DD Details visibility and required status based on checkbox state
  1546. ddDetailsCheckbox.addEventListener('change', function () {
  1547. if (ddDetailsCheckbox.checked) {
  1548. ddDetailsContainer.style.display = 'flex';
  1549. ddDetailsFields.forEach(function (field) {
  1550. field.setAttribute('required', 'required');
  1551. });
  1552. } else {
  1553. ddDetailsContainer.style.display = 'none';
  1554. ddDetailsFields.forEach(function (field) {
  1555. field.removeAttribute('required');
  1556. field.value = ''; // Optionally clear the fields
  1557. field.classList.remove('is-invalid'); // Remove invalid class if any
  1558. });
  1559. }
  1560. });
  1561. // Handle form submission
  1562. submitButton.addEventListener('click', function () {
  1563. var isValid = challonDetailsForm.checkValidity();
  1564. if (isValid) {
  1565. // Form is valid, proceed with submission (e.g., via AJAX)
  1566. // Custom submission code here
  1567. } else {
  1568. // Trigger browser's validation messages
  1569. challonDetailsForm.classList.add('was-validated');
  1570. }
  1571. });
  1572. // Prevent form submission on Enter key
  1573. challonDetailsForm.addEventListener('submit', function (event) {
  1574. event.preventDefault();
  1575. event.stopPropagation();
  1576. });
  1577. });
  1578. $('#challonDetails').on('hidden.bs.modal', function () {
  1579. // Clear all input fields
  1580. $(this).find('form')[0].reset();
  1581. // Optionally, reset any custom styling or classes
  1582. $(this).find('input').removeClass('is-valid is-invalid');
  1583. });
  1584. </script>
  1585. </body>
  1586. </html>