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.

1175 lines
43 KiB

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