Victoria Hall Booking for Events
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.

1244 lines
50 KiB

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