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.

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