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.

1241 lines
50 KiB

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