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.

1044 lines
38 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/head-headquarters :: head}"></head>
  4. <style>
  5. .card-body table {
  6. width: 100%;
  7. padding: 100px;
  8. }
  9. .card-body th,
  10. td {
  11. padding: 8px;
  12. text-align: left;
  13. }
  14. .amount-cell {
  15. text-align: right;
  16. padding-right: 1rem;
  17. /* Adjust padding as needed */
  18. }
  19. .table {
  20. width: 100% !important;
  21. }
  22. </style>
  23. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  24. integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  25. crossorigin="anonymous"></script>
  26. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
  27. integrity="sha384-vUDzXQ+PSziH/FUbe0YVEv7qEoRJRT5D02B1RWZC1yyP3+n6K8N7q0clmKf3nDOJ"
  28. crossorigin="anonymous"></script>
  29. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  30. integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  31. crossorigin="anonymous"></script>
  32. <body>
  33. <!-- Page Container -->
  34. <div id="page-container"
  35. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  36. <!-- Side Overlay aside (right)-->
  37. <aside th:replace="~{fragments/aside-right :: aside}"></aside>
  38. <!-- END Side Overlay (right)-->
  39. <!-- Sidebar Nav-->
  40. <nav th:replace="~{fragments/nav-headquarters :: nav}"></nav>
  41. <!-- END Sidebar -->
  42. <!-- Header -->
  43. <header th:replace="~{fragments/header-headquarters :: header}"></header>
  44. <!-- END Header -->
  45. <!-- Main Container -->
  46. <main id="main-container">
  47. <div class="content">
  48. <ul class="nav nav-tabs" id="myTab" role="tablist">
  49. <li class="nav-item">
  50. <a class="nav-link active" id="settlement-approved-tab" data-toggle="tab"
  51. href="#settlement-approved" role="tab" aria-controls="settlement-approved"
  52. aria-selected="true">Present Events</a>
  53. </li>
  54. <li class="nav-item">
  55. <a class="nav-link" id="cancelled-bookings-tab" data-toggle="tab" href="#cancelled-bookings"
  56. role="tab" aria-controls="cancelled-bookings" aria-selected="false">Past Bookings</a>
  57. </li>
  58. <li class="nav-item">
  59. <a class="nav-link" id="gcc-blocked-tab" data-toggle="tab" href="#gcc-blocked" role="tab"
  60. aria-controls="gcc-blocked" aria-selected="false">Future Events</a>
  61. </li>
  62. </ul>
  63. <div class="tab-content" id="myTabContent">
  64. <!-- Tab pane for Settlement Approved -->
  65. <div class="tab-pane fade show active" id="settlement-approved" role="tabpanel"
  66. aria-labelledby="settlement-approved-tab">
  67. <div class="block block-rounded">
  68. <div class="block-header block-header-default">
  69. <h3 class="block-title">Present Events</h3>
  70. </div>
  71. <div class="block-content p-0">
  72. <div class="p-sm-4 p-0">
  73. <div class="table-responsive">
  74. <table id="SettlementApprovedListTable"
  75. class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
  76. <thead class="thead-light">
  77. <tr>
  78. <!--<th class="text-center no-sort">S.No</th>
  79. <th class="text-center">Zone</th>
  80. <th class="text-center">Division</th>
  81. <th class="text-center" width="20%">Hall Name</th>
  82. <th class="text-center">User Name</th>
  83. <th class="text-center">User type</th>
  84. <th class="text-center" width="10%">Booking Date</th>
  85. <th class="text-center">Number of days</th>
  86. <th class="text-center">Reason for Booking</th>
  87. <th class="text-center">Caretaker Name/MobileNumber</th>
  88. <th class="text-center">Action</th>-->
  89. <th>Hall Name</th>
  90. <th>Booking Id</th>
  91. <th>Start Date</th>
  92. <th>End Date</th>
  93. <th>No of Days</th>
  94. <th>Starting Period</th>
  95. <th>Ending Period</th>
  96. <th>Actions</th>
  97. </tr>
  98. </thead>
  99. <tbody>
  100. <!-- Populate rows with Thymeleaf -->
  101. <tr th:each="booking, rowStat : ${presenteventslist}">
  102. <!--<td class="text-center" th:text="${rowStat.index + 1}"></td>
  103. <td class="text-center" th:text="${booking.hallDetails.zone}"></td>
  104. <td class="text-center" th:text="${booking.hallDetails.division}"></td>
  105. <td class="text-center" th:text="${booking.hallDetails.hallName}"></td>
  106. <td class="text-center" th:text="${booking.users.name}"></td>
  107. <td class="text-center" th:text="${booking.users.usertype}"></td>
  108. <td class="text-center" th:text="${booking.bookingDate}"></td>
  109. <td class="text-center" th:text="${booking.noOfDays}"></td>
  110. <td class="text-center" th:text="${booking.reason}"></td>
  111. <td class="text-center"
  112. th:text="${booking.hallDetails.hallInchargeName} + ' / ' + ${booking.hallDetails.hallInchargeMobno}">
  113. </td>-->
  114. <td th:text="${booking.hallDetails.hallName}"></td>
  115. <td th:text="${booking.bookingId}"></td>
  116. <td th:text="${booking.startDate}"></td>
  117. <td th:text="${booking.endDate}"></td>
  118. <td th:text="${booking.noOfDays}"></td>
  119. <td th:text="${booking.startingSlot == 1 ? 'Morning' : 'Evening'}"></td>
  120. <td th:text="${booking.endingSlot == 1 ? 'Morning' : 'Evening'}"></td>
  121. <td>
  122. <p>
  123. <span class="badge bg-warning" style="cursor: pointer;"
  124. th:onclick="pendingbooking([[${booking.bookingId}]])">View</span>
  125. </p>
  126. <p>
  127. <span type="button" class="btn btn-primary settlement"
  128. th:if="${booking.ebDetails != null and booking.settlement == null}"
  129. th:onclick="settleTheAmount([[${booking.bookingId}]])">Settlement</button>
  130. </p>
  131. <button type="button" class="btn btn-primary" th:if="${booking.ebDetails==null}"
  132. th:onclick="enterStartingReading([[${booking.bookingId}]], '[[${booking.hallDetails.ebNumber}]]')"
  133. id="ebDetails">EB</button>
  134. </td>
  135. </tr>
  136. </tbody>
  137. </table>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. <!-- Tab pane for Cancelled Bookings Approved -->
  144. <div class="tab-pane fade" id="cancelled-bookings" role="tabpanel"
  145. aria-labelledby="cancelled-bookings-tab">
  146. <!-- Repeat similar structure for Cancelled Bookings Approved -->
  147. <div class="block block-rounded">
  148. <div class="block-header block-header-default">
  149. <h3 class="block-title">Past Events</h3>
  150. </div>
  151. <div class="block-content p-0">
  152. <div class="p-sm-4 p-0">
  153. <div class="table-responsive">
  154. <table id="cancelledApprovedListTable"
  155. class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
  156. <thead class="thead-light">
  157. <tr>
  158. <!--<th class="text-center no-sort">S.No</th>
  159. <th class="text-center">Zone</th>
  160. <th class="text-center">Division</th>
  161. <th class="text-center" width="20%">Hall Name</th>
  162. <th class="text-center">User Name</th>
  163. <th class="text-center">User type</th>
  164. <th class="text-center" width="10%">Booking Date</th>
  165. <th class="text-center">Number of days</th>
  166. <th class="text-center">Reason for Booking</th>
  167. <th class="text-center">Caretaker Name/MobileNumber</th>
  168. <th class="text-center">Action</th>-->
  169. <th>Hall Name</th>
  170. <th>Booking Id</th>
  171. <th>Start Date</th>
  172. <th>End Date</th>
  173. <th>No of Days</th>
  174. <th>Starting Period</th>
  175. <th>Ending Period</th>
  176. <th>Actions</th>
  177. </tr>
  178. </thead>
  179. <tbody>
  180. <!-- Populate rows with Thymeleaf -->
  181. <tr th:each="booking, rowStat : ${pasteventslist}">
  182. <!--<td class="text-center" th:text="${rowStat.index + 1}"></td>
  183. <td class="text-center" th:text="${booking.hallDetails.zone}"></td>
  184. <td class="text-center" th:text="${booking.hallDetails.division}"></td>
  185. <td class="text-center" th:text="${booking.hallDetails.hallName}"></td>
  186. <td class="text-center" th:text="${booking.users.name}"></td>
  187. <td class="text-center" th:text="${booking.users.usertype}"></td>
  188. <td class="text-center" th:text="${booking.bookingDate}"></td>
  189. <td class="text-center" th:text="${booking.noOfDays}"></td>
  190. <td class="text-center" th:text="${booking.reason}"></td>
  191. <td class="text-center"
  192. th:text="${booking.hallDetails.hallInchargeName} + ' / ' + ${booking.hallDetails.hallInchargeMobno}">
  193. </td>-->
  194. <td th:text="${booking.hallDetails.hallName}"></td>
  195. <td th:text="${booking.bookingId}"></td>
  196. <td th:text="${booking.startDate}"></td>
  197. <td th:text="${booking.endDate}"></td>
  198. <td th:text="${booking.noOfDays}"></td>
  199. <td th:text="${booking.startingSlot == 1 ? 'Morning' : 'Evening'}"></td>
  200. <td th:text="${booking.endingSlot == 1 ? 'Morning' : 'Evening'}"></td>
  201. <td>
  202. <p>
  203. <span class="badge bg-warning" style="cursor: pointer;"
  204. th:onclick="pendingbooking([[${booking.bookingId}]])">View</span>
  205. </p>
  206. <p>
  207. <span type="button" class="btn btn-primary settlement"
  208. th:if="${booking.ebDetails != null and booking.settlement == null}"
  209. th:onclick="settleTheAmount([[${booking.bookingId}]])">Settlement</button>
  210. </p>
  211. <button type="button" class="btn btn-primary" th:if="${booking.ebDetails==null}"
  212. th:onclick="enterStartingReading([[${booking.bookingId}]], '[[${booking.hallDetails.ebNumber}]]')"
  213. id="ebDetails">EB</button>
  214. </td>
  215. </tr>
  216. </tbody>
  217. </table>
  218. </div>
  219. </div>
  220. </div>
  221. </div>
  222. </div>
  223. <!-- Tab pane for GCC Blocked/Rejected Approved -->
  224. <div class="tab-pane fade" id="gcc-blocked" role="tabpanel" aria-labelledby="gcc-blocked-tab">
  225. <!-- Repeat similar structure for GCC Blocked/Rejected Approved -->
  226. <div class="block block-rounded">
  227. <div class="block-header block-header-default">
  228. <h3 class="block-title">Future Events(Last two Days)</h3>
  229. </div>
  230. <div class="block-content p-0">
  231. <div class="p-sm-4 p-0">
  232. <div class="table-responsive">
  233. <table id="rejectedApprovedListTable"
  234. class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
  235. <thead class="thead-light">
  236. <tr>
  237. <!--<th class="text-center no-sort">S.No</th>
  238. <th class="text-center">Zone</th>
  239. <th class="text-center">Division</th>
  240. <th class="text-center" width="20%">Hall Name</th>
  241. <th class="text-center">User Name</th>
  242. <th class="text-center">User type</th>
  243. <th class="text-center" width="10%">Booking Date</th>
  244. <th class="text-center">Number of days</th>
  245. <th class="text-center">Reason for Booking</th>
  246. <th class="text-center">Caretaker Name/MobileNumber</th>
  247. <th class="text-center">Action</th>-->
  248. <th>Hall Name</th>
  249. <th>Booking Id</th>
  250. <th>Start Date</th>
  251. <th>End Date</th>
  252. <th>No of Days</th>
  253. <th>Starting Period</th>
  254. <th>Ending Period</th>
  255. <th>Actions</th>
  256. </tr>
  257. </thead>
  258. <tbody>
  259. <!-- Populate rows with Thymeleaf -->
  260. <tr th:each="booking, rowStat : ${futureeventslist}">
  261. <!--<td class="text-center" th:text="${rowStat.index + 1}"></td>
  262. <td class="text-center" th:text="${booking.hallDetails.zone}"></td>
  263. <td class="text-center" th:text="${booking.hallDetails.division}"></td>
  264. <td class="text-center" th:text="${booking.hallDetails.hallName}"></td>
  265. <td class="text-center" th:text="${booking.users.name}"></td>
  266. <td class="text-center" th:text="${booking.users.usertype}"></td>
  267. <td class="text-center" th:text="${booking.bookingDate}"></td>
  268. <td class="text-center" th:text="${booking.noOfDays}"></td>
  269. <td class="text-center" th:text="${booking.reason}"></td>
  270. <td class="text-center"
  271. th:text="${booking.hallDetails.hallInchargeName} + ' / ' + ${booking.hallDetails.hallInchargeMobno}">
  272. </td>-->
  273. <td th:text="${booking.hallDetails.hallName}"></td>
  274. <td th:text="${booking.bookingId}"></td>
  275. <td th:text="${booking.startDate}"></td>
  276. <td th:text="${booking.endDate}"></td>
  277. <td th:text="${booking.noOfDays}"></td>
  278. <td th:text="${booking.startingSlot == 1 ? 'Morning' : 'Evening'}"></td>
  279. <td th:text="${booking.endingSlot == 1 ? 'Morning' : 'Evening'}"></td>
  280. <td>
  281. <p>
  282. <span class="badge bg-warning" style="cursor: pointer;"
  283. th:onclick="pendingbooking([[${booking.bookingId}]])">View</span>
  284. </p>
  285. </td>
  286. </tr>
  287. </tbody>
  288. </table>
  289. </div>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. </main>
  297. <!-- END Main Container -->
  298. <!-- Approved Bookingform-->
  299. <div class="modal fade backdrop" id="pendingBookingForm" data-backdrop="static" tabindex="-1" role="dialog"
  300. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  301. <div class="modal-dialog modal-lg" role="document">
  302. <div class="modal-content">
  303. <form id="ownform" onsubmit="return rejectsubmit();">
  304. <div class="block block-rounded block-themed block-transparent mb-0">
  305. <div class="block-header bg-primary-dark">
  306. <h3 class="block-title" id="2mtitle">Booking Information</h3>
  307. <div class="block-options">
  308. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  309. aria-label="Close">
  310. <i class="fa fa-fw fa-times"></i>
  311. </button>
  312. </div>
  313. </div>
  314. <div class="block-content row">
  315. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  316. <input type="hidden" class="form-control text-center" name="bookingid"
  317. id="bookingid" disabled />
  318. <div class="card-body">
  319. <table>
  320. <tr>
  321. <th colspan="10" style="background-color: #f2f2f2;">User Details</th>
  322. </tr>
  323. <tr>
  324. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
  325. </th>
  326. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  327. id="td_userName"></td>
  328. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
  329. </th>
  330. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  331. id="td_mobileNumber"></td>
  332. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
  333. </th>
  334. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  335. id="td_usertype"></td>
  336. </tr>
  337. <tr>
  338. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
  339. </th>
  340. <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  341. id="td_useraddress"></td>
  342. </tr>
  343. </table>
  344. </div>
  345. </div>
  346. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  347. <input type="hidden" class="form-control text-center" name="bookingid"
  348. id="bookingid" disabled />
  349. <div class="card-body">
  350. <table>
  351. <tr>
  352. <th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
  353. </tr>
  354. <tr>
  355. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
  356. </th>
  357. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  358. id="td_hallName"></td>
  359. </tr>
  360. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
  361. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  362. id="td_halladdress"></td>
  363. </tr>
  364. <tr>
  365. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  366. Name:</th>
  367. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  368. id="td_caretakername"></td>
  369. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  370. Mobile Number:</th>
  371. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  372. id="td_caretakermobileNumber"></td>
  373. </tr>
  374. </table>
  375. </div>
  376. </div>
  377. <div class="col-md-12 col-lg-12 col-sm-12">
  378. <input type="hidden" class="form-control text-center" name="settlementid"
  379. id="settlementid" disabled />
  380. <div class="card-body">
  381. <table>
  382. <tr>
  383. <th colspan="4" style="background-color: #f2f2f2;">Booking
  384. Details (Booking Id:-<span id="booking_id"
  385. style="color:blue"></span>)</th>
  386. </tr>
  387. <tr>
  388. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
  389. </th>
  390. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  391. id="td_bookingDate"></td>
  392. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Status:
  393. </th>
  394. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  395. id="td_bookingStatus"></td>
  396. </tr>
  397. <tr>
  398. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
  399. </th>
  400. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  401. id="td_startDate"></td>
  402. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
  403. Amount:</th>
  404. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  405. id="td_depositeAmount"></td>
  406. </tr>
  407. <tr>
  408. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END
  409. Date:</th>
  410. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  411. id="td_endDate"></td>
  412. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
  413. </th>
  414. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  415. id="td_hallAmount"></td>
  416. </tr>
  417. <tr>
  418. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
  419. </th>
  420. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  421. id="td_startingSlot"></td>
  422. <th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
  423. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  424. id="td_gst"></td>
  425. </tr>
  426. <tr>
  427. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
  428. </th>
  429. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  430. id="td_endingSlot"></td>
  431. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
  432. </th>
  433. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  434. id="td_totalAmount"></td>
  435. </tr>
  436. </table>
  437. </div>
  438. </div>
  439. <div class="col-sm-12">
  440. <!--<label class="form-label">Documents:<span class="text-danger"></span></label>-->
  441. <div class="documents" id="documents"></div>
  442. </div>
  443. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  444. <input type="hidden" class="form-control text-center" name="bookingid"
  445. id="bookingid" disabled />
  446. <div class="card-body">
  447. <table>
  448. <tr>
  449. <th colspan="10" style="background-color: #f2f2f2;">Booking Payment
  450. Details</th>
  451. </tr>
  452. <tr>
  453. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
  454. ID:</th>
  455. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  456. id="td_transactionId"></td>
  457. </tr>
  458. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount Received:
  459. </th>
  460. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  461. id="td_payamountReceived"></td>
  462. </tr>
  463. <tr>
  464. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
  465. Status:</th>
  466. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  467. id="td_paymentStatus"></td>
  468. </tr>
  469. </table>
  470. </div>
  471. </div>
  472. </div>
  473. </div>
  474. <div class="block-content block-content-full text-end bg-body" id="mbutton2">
  475. <button type="button" class="btn btn-sm btn-alt-secondary"
  476. data-bs-dismiss="modal">Close</button>
  477. </div>
  478. </form>
  479. </div>
  480. </div>
  481. </div>
  482. <div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
  483. aria-hidden="true">
  484. <div class="modal-dialog modal-lg" role="document">
  485. <div class="modal-content">
  486. <div class="modal-header">
  487. <h5 class="modal-title" id="fileModalLabel">File Preview</h5>
  488. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
  489. <span aria-hidden="true">&times;</span>
  490. </button>
  491. </div>
  492. <div class="modal-body">
  493. <embed id="filePreview" src="" width="100%" height="600px">
  494. </div>
  495. <div class="modal-footer">
  496. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  497. </div>
  498. </div>
  499. </div>
  500. </div>
  501. <div class="modal fade backdrop" id="EBdestailsModal" tabindex="-1" role="dialog"
  502. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  503. <div class="modal-dialog modal-lg" role="document">
  504. <div class="modal-content">
  505. <div class="block block-rounded block-themed block-transparent mb-0">
  506. <div class="block-header bg-primary-dark">
  507. <h3 class="block-title">EB Details</h3>
  508. <div class="block-options">
  509. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  510. aria-label="Close">
  511. <i class="fa fa-fw fa-times"></i>
  512. </button>
  513. </div>
  514. </div>
  515. <div class="block-content row">
  516. <input type="hidden" class="form-control text-center" id="bookingId" name="bookingId"
  517. readonly>
  518. <div class="col-sm-6">
  519. <div class="form-group">
  520. <label for="ebNumber">Consumer Number<span class="required">*</span>:</label>
  521. <input type="text" class="form-control text-center" id="ebNumber" name="ebNumber"
  522. placeholder="EB Number" readonly>
  523. </div>
  524. </div>
  525. <div class="col-sm-6">
  526. <div class="form-group">
  527. <label for="startingReading">Starting Reading<span
  528. class="required">*</span>:</label>
  529. <input type="text" class="form-control text-center" id="startingReading"
  530. name="startingReading">
  531. </div>
  532. </div>
  533. <div class="col-sm-6">
  534. <div class="form-group">
  535. <label for="startingReadingimage">Starting Reading Image<span
  536. class="required"></span>:</label>
  537. <input type="file" class="form-control text-center startreading-image" id="startingReadingimage"
  538. name="startingReadingimage">
  539. </div>
  540. </div>
  541. </div>
  542. </div><br><br>
  543. <div class="modal-footer">
  544. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  545. <button type="button" class="btn btn-primary" id="submitEbDetails">Submit</button>
  546. </div>
  547. </div>
  548. </div>
  549. </div>
  550. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  551. <!-- END Footer -->
  552. </div>
  553. <div th:replace="~{fragments/resetpassword :: div}"></div>
  554. <script th:replace="~{fragments/loginscript :: script}"></script>
  555. <script>
  556. $(document).ready(function () {
  557. $('#myTab a').on('click', function (e) {
  558. e.preventDefault();
  559. $(this).tab('show');
  560. });
  561. })
  562. $(document).ready(function () {
  563. // DataTables buttons configuration
  564. var buttons = [
  565. {
  566. extend: 'pageLength',
  567. className: 'btn btn-primary'
  568. },
  569. {
  570. title: 'Data export',
  571. extend: 'copyHtml5',
  572. text: 'Copy',
  573. className: 'btn btn-primary',
  574. id: 'copyBtn'
  575. },
  576. {
  577. extend: 'excelHtml5',
  578. text: 'Excel',
  579. className: 'btn btn-primary',
  580. id: 'excelBtn'
  581. },
  582. {
  583. extend: 'csvHtml5',
  584. text: 'CSV',
  585. className: 'btn btn-primary',
  586. id: 'csvBtn'
  587. },
  588. {
  589. extend: 'pdfHtml5',
  590. text: 'PDF',
  591. className: 'btn btn-primary',
  592. id: 'pdfBtn'
  593. }
  594. ];
  595. // Initialize DataTable for each tab on tab shown event
  596. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  597. var targetTable = $(e.target).attr('href'); // activated tab
  598. $(targetTable).find('.dataTable').DataTable().columns.adjust();
  599. });
  600. // Initialize DataTable for Settlement Approved tab
  601. $('#SettlementApprovedListTable').DataTable({
  602. dom: 'Bftip',
  603. columnDefs: [
  604. {targets: 'no-sort', orderable: false}
  605. ],
  606. lengthMenu: [
  607. [50, 100, 200, 500, -1],
  608. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  609. ],
  610. buttons: buttons,
  611. responsive: true,
  612. searching: true,
  613. select: false,
  614. processing: false,
  615. // Set width to 100%
  616. "autoWidth": true
  617. });
  618. // Initialize DataTable for Cancelled Bookings Approved tab
  619. $('#cancelledApprovedListTable').DataTable({
  620. dom: 'Bftip',
  621. columnDefs: [
  622. {targets: 'no-sort', orderable: false}
  623. ],
  624. lengthMenu: [
  625. [50, 100, 200, 500, -1],
  626. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  627. ],
  628. buttons: buttons,
  629. responsive: true,
  630. searching: true,
  631. select: false,
  632. processing: false,
  633. // Set width to 100%
  634. "autoWidth": true
  635. });
  636. // Initialize DataTable for GCC Blocked/Rejected Approved tab
  637. $('#rejectedApprovedListTable').DataTable({
  638. dom: 'Bftip',
  639. columnDefs: [
  640. {targets: 'no-sort', orderable: false}
  641. ],
  642. lengthMenu: [
  643. [50, 100, 200, 500, -1],
  644. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  645. ],
  646. buttons: buttons,
  647. responsive: true,
  648. searching: true,
  649. select: false,
  650. processing: false,
  651. // Set width to 100%
  652. "autoWidth": true
  653. });
  654. });
  655. function pendingbooking(bookingId) {
  656. $.ajax({
  657. type: "GET",
  658. url: '/communityhall/api/officer/getBookingDetails',
  659. data: {
  660. 'bookingsId': bookingId
  661. },
  662. success: function (x) {
  663. //console.log(x);
  664. showBookingInfo(x);
  665. }
  666. });
  667. }
  668. function showBookingInfo(list) {
  669. $('#pendingBookingForm').modal({
  670. backdrop: 'static',
  671. keyboard: false
  672. });
  673. $('#pendingBookingForm').modal('show');
  674. var todaydate = new Date().toISOString().split('T')[0];
  675. // Convert startDate to YYYY-MM-DD format if needed
  676. var startDate = new Date(list.startDate).toISOString().split('T')[0]; // Ensure this is in the correct format
  677. if (startDate > todaydate) {
  678. $('#reasondetails').show();
  679. $('#rejectbutton').show();
  680. } else {
  681. $('#reasondetails').hide();
  682. $('#rejectbutton').hide();
  683. }
  684. document.getElementById("td_userName").innerHTML = list.users.name;
  685. document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
  686. document.getElementById("td_usertype").innerHTML = list.users.usertype;
  687. document.getElementById("bookingid").value = list.bookingId;
  688. var userDetails = list.users;
  689. var userDetailsString =
  690. userDetails.doorNo + ", " +
  691. userDetails.street + ", " +
  692. userDetails.area + ", " +
  693. userDetails.location + "- " +
  694. userDetails.pinCode;
  695. document.getElementById("td_useraddress").innerHTML = userDetailsString;
  696. document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
  697. var hallDetails = list.hallDetails;
  698. var hallDetailsString =
  699. hallDetails.doorNo + ", " +
  700. hallDetails.street + ", " +
  701. hallDetails.area + ", " +
  702. hallDetails.city + "- " +
  703. hallDetails.pinCode;
  704. document.getElementById("td_halladdress").innerHTML = hallDetailsString;
  705. document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
  706. document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
  707. document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
  708. document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  709. document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
  710. document.getElementById("td_totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2);
  711. var gstcl = (list.hallAmount * (list.hallDetails.gst/100));
  712. var formattedGst = gstcl.toFixed(2);
  713. document.getElementById("td_gst").innerHTML = '₹ ' + formattedGst;
  714. document.getElementById("td_startDate").innerHTML = list.startDate;
  715. document.getElementById("td_endDate").innerHTML = list.endDate;
  716. document.getElementById("booking_id").innerHTML = list.bookingId;
  717. function getTimeSlot(slotValue) {
  718. //console.log("Slot Value in getTimeSlot function:", slotValue);
  719. var timeSlot;
  720. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  721. if (trimmedSlotValue === '1') {
  722. timeSlot = 'Morning';
  723. } else if (trimmedSlotValue === '2') {
  724. timeSlot = 'Evening';
  725. } else {
  726. timeSlot = 'Unknown';
  727. }
  728. //console.log("Time Slot:", timeSlot);
  729. return timeSlot;
  730. }
  731. document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
  732. document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
  733. document.getElementById("td_bookingStatus").innerHTML = list.bookingStatus;
  734. document.getElementById("td_transactionId").innerHTML = list.payments.transactionId;
  735. document.getElementById("td_payamountReceived").innerHTML = '₹ ' + list.payments.amountReceived;
  736. document.getElementById("td_paymentStatus").innerHTML = list.payments.paymentStatus;
  737. showReasonDocuments(list);
  738. }
  739. function showReasonDocuments(list) {
  740. $.ajax({
  741. type: "GET",
  742. url: '/communityhall/api/officer/getReasonByName',
  743. data: {
  744. 'reasonName': list.reason
  745. },
  746. success: function (x) {
  747. //console.log(x);
  748. showReasonWithDocument(x, list);
  749. }
  750. });
  751. }
  752. // Display booking documents
  753. function showReasonWithDocument(reasonData, list) {
  754. var reasonDocumentData = reasonData.reasonDocumentMasterList;
  755. var bookingDocumentsList = list.bookingDocumentsList;
  756. const reasonFieldsContainer = $('#documents');
  757. reasonFieldsContainer.empty();
  758. // Create a responsive table container
  759. var tableResponsiveDiv = $('<div>').addClass('table-responsive');
  760. // Create the table with Bootstrap classes and custom styles
  761. var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
  762. 'width': '100%',
  763. 'height': 'auto',
  764. 'border': '1px solid black'
  765. });
  766. // Create the table header (thead)
  767. var thead = $('<thead>').appendTo(table);
  768. var headerRow = $('<tr>').appendTo(thead);
  769. $('<th>').attr('colspan', '3').text('Document Details').css({
  770. 'color': 'black',
  771. 'font-weight': 'bold',
  772. 'background-color': '#f2f2f2',
  773. 'padding': '0.45rem 0.45rem'
  774. }).appendTo(headerRow);
  775. // Create header row for columns
  776. var columnHeadersRow = $('<tr>').appendTo(thead);
  777. $('<th>').text('S.No').appendTo(columnHeadersRow);
  778. $('<th>').text('Required Info').appendTo(columnHeadersRow);
  779. $('<th>').text('Required Documents').appendTo(columnHeadersRow);
  780. // Create the table body (tbody)
  781. var tbody = $('<tbody>').appendTo(table);
  782. // Iterate through the documents list and populate rows
  783. for (var i = 0; i < bookingDocumentsList.length; i++) {
  784. (function (index) {
  785. var row = $('<tr>').appendTo(tbody);
  786. $('<td>').text(index + 1).appendTo(row);
  787. $('<td>').text(reasonDocumentData[index].fieldName + ': ' + bookingDocumentsList[index].name).appendTo(row);
  788. // Create a link to view document image
  789. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
  790. showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
  791. });
  792. $('<td>').append(viewLink).appendTo(row);
  793. })(i);
  794. }
  795. // Append table to the responsive container
  796. tableResponsiveDiv.append(table);
  797. // Append table to the container in the DOM
  798. reasonFieldsContainer.append(tableResponsiveDiv);
  799. }
  800. function showDocumentImage(fileURL) {
  801. //console.log(fileURL);
  802. openFileModal(fileURL);
  803. }
  804. // Event delegation for dynamically added elements
  805. $(document).on('click', '.view-document', function () {
  806. const fileURL = $(this).data('url');
  807. openFileModal(fileURL);
  808. });
  809. function openFileModal(fileURL) {
  810. $('#filePreview').attr('src', fileURL);
  811. $('#fileModal').modal('show');
  812. }
  813. function accept() {
  814. let id = document.getElementById("bookingid").value;
  815. Swal.fire({
  816. title: 'Do you want to Accept this User ?',
  817. showDenyButton: true,
  818. showCancelButton: true,
  819. confirmButtonText: 'YES',
  820. denyButtonText: 'NO',
  821. }).then((result) => {
  822. /* Read more about isConfirmed, isDenied below */
  823. if (result.isConfirmed) {
  824. $.ajax({
  825. type: "POST",
  826. url: '/communityhall/api/officer/updateBookingApproved/' + id,
  827. data: {
  828. 'status': 'APPROVED',
  829. 'comments': 'Accepted',
  830. 'bookingId': id
  831. },
  832. success: function (data, textStatus, xhr) {
  833. if (xhr.status === 200) { // Check if the response status is OK
  834. Swal.fire(
  835. 'Done',
  836. 'Successfully Accepted to the ID:' + id,
  837. 'success'
  838. ).then(() => {
  839. location.reload();
  840. });
  841. } else {
  842. Swal.fire(
  843. 'Error',
  844. 'Failed to accept the user',
  845. 'error'
  846. );
  847. }
  848. },
  849. error: function (xhr, textStatus, errorThrown) {
  850. Swal.fire(
  851. 'Error',
  852. 'Failed to accept the user',
  853. 'error'
  854. );
  855. }
  856. });
  857. } else if (result.isDenied) {
  858. Swal.fire('Changes are not saved', '', 'info')
  859. }
  860. });
  861. }
  862. function rejectsubmit() {
  863. let id = document.getElementById("bookingid").value;
  864. let reason = document.getElementById("reason").value.trim();
  865. let reasontype = document.getElementById("reasontype").value;
  866. // Check if reason is empty only when rejecting
  867. if (reason === "" || reason.length === 0) {
  868. document.getElementById("reasonValidationText").style.display = "block";
  869. return false; // Prevent form submission
  870. } else {
  871. document.getElementById("reasonValidationText").style.display = "none";
  872. }
  873. Swal.fire({
  874. title: 'Do you want to Reject this User ?',
  875. showDenyButton: true,
  876. showCancelButton: true,
  877. confirmButtonText: 'YES',
  878. denyButtonText: 'NO',
  879. }).then((result) => {
  880. /* Read more about isConfirmed, isDenied below */
  881. if (result.isConfirmed) {
  882. $.ajax({
  883. type: "POST",
  884. url: '/communityhall/api/officer/updateBookingReject/' + id,
  885. data: {
  886. 'status': 'REJECTED',
  887. 'comments': reason,
  888. 'bookingId': id,
  889. 'reasontype': reasontype
  890. },
  891. success: function (data, textStatus, xhr) {
  892. //console.log("Rejection successful");
  893. if (xhr.status === 200) { // Check if the response status is OK
  894. Swal.fire(
  895. 'Done',
  896. 'Successfully Rejected to the ID:' + id,
  897. 'success'
  898. ).then(() => {
  899. location.reload();
  900. });
  901. } else {
  902. Swal.fire(
  903. 'Error',
  904. 'Failed to reject the user',
  905. 'error'
  906. );
  907. }
  908. },
  909. error: function (xhr, textStatus, errorThrown) {
  910. console.error("Error:", errorThrown);
  911. Swal.fire(
  912. 'Error',
  913. 'Failed to reject the user',
  914. 'error'
  915. );
  916. }
  917. });
  918. } else if (result.isDenied) {
  919. Swal.fire('Changes are not saved', '', 'info')
  920. }
  921. });
  922. return false; // Prevent form submission
  923. }
  924. function enterStartingReading(bookingId, ebNumber) {
  925. $('#bookingId').val(bookingId);
  926. $('#ebNumber').val(ebNumber);
  927. $('#EBdestailsModal').modal('show');
  928. }
  929. $(document).ready(function () {
  930. $("#submitEbDetails").click(function () {
  931. var bookid = parseInt($("#bookingId").val());
  932. var startingReading = $("#startingReading").val();
  933. var startingReadingimage = $("#startingReadingimage")[0].files[0]; // Get the file
  934. var formData = new FormData();
  935. formData.append("bookingId", bookid);
  936. formData.append("startingReading", startingReading);
  937. formData.append("startingReadingimage", startingReadingimage);
  938. $.ajax({
  939. type: "POST",
  940. url: "/communityhall/careTaker/api/saveEbDetails",
  941. data: formData,
  942. contentType: false, // Prevent jQuery from setting content type
  943. processData: false, // Prevent jQuery from processing the data
  944. success: function (response) {
  945. $("#EBdestailsModal").modal('hide');
  946. // Show SweetAlert success message
  947. Swal.fire({
  948. title: 'Success!',
  949. text: 'EB details saved successfully.',
  950. icon: 'success',
  951. confirmButtonText: 'OK'
  952. }).then(function() {
  953. // Reload the page after the alert is dismissed
  954. location.reload();
  955. });
  956. },
  957. error: function (xhr, status, error) {
  958. console.error(xhr.responseText);
  959. alert("Error occurred while saving EbDetails.");
  960. }
  961. });
  962. });
  963. });
  964. document.getElementById('EBdetailsModal').addEventListener('hide.bs.modal', function () {
  965. // Clear the startingReading input field
  966. document.getElementById('startingReading').value = '';
  967. // Clear the startingReadingimage file input field
  968. document.getElementById('startingReadingimage').value = '';
  969. });
  970. function settleTheAmount(bookingId) {
  971. window.location.href = '/communityhall/admin/raisesettlement?bookingId=' + bookingId;
  972. }
  973. </script>
  974. </body>
  975. </html>