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.

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