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.

719 lines
26 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/head-admin :: head}"></head>
  4. <style>
  5. .card-body table {
  6. width: 100%;
  7. padding: 100px;
  8. }
  9. .card-body th,
  10. td {
  11. padding: 8px;
  12. text-align: left;
  13. }
  14. .amount-cell {
  15. text-align: right;
  16. padding-right: 1rem;
  17. /* Adjust padding as needed */
  18. }
  19. .table {
  20. width: 100% !important;
  21. }
  22. </style>
  23. <body>
  24. <!-- Page Container -->
  25. <div id="page-container"
  26. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  27. <!-- Sidebar Nav-->
  28. <aside th:replace="~{fragments/aside-right :: aside}"></aside>
  29. <!-- END Side Overlay (right)-->
  30. <!-- Sidebar Nav-->
  31. <nav th:replace="~{fragments/nav-admin :: nav}"></nav>
  32. <!-- END Sidebar -->
  33. <!-- Header -->
  34. <header th:replace="~{fragments/header-admin :: header}"></header>
  35. <!-- END Header -->
  36. <!-- Main Container -->
  37. <main id="main-container">
  38. <div class="content">
  39. <div class="block block-rounded">
  40. <div class="block-header block-header-default" >
  41. <h3 class="block-title">List of Approved Bookings</h3>
  42. </div>
  43. <div class="block-content p-0">
  44. <div class="p-sm-4 p-0">
  45. <div class="table-responsive">
  46. <table class="table table-bordered table-striped table-vcenter js-dataTable-responsive" id="bookingapprovedtable">
  47. <thead class="thead-light">
  48. <tr>
  49. <th class="text-center no-sort">S.No</th>
  50. <th class="text-center">Booking Id</th>
  51. <th class="text-center">Zone</th>
  52. <th class="text-center">Division</th>
  53. <th class="text-center" width="20%">Hall Name</th>
  54. <th class="text-center">User Name</th>
  55. <th class="text-center">User type</th>
  56. <th class="text-center" width="10%">Booking Date</th>
  57. <th class="text-center">Number of days</th>
  58. <th class="text-center">Reason for Booking</th>
  59. <th class="text-center">Caretaker Name/MobileNumber</th>
  60. <th class="text-center">Action</th>
  61. </tr>
  62. </thead>
  63. <tbody>
  64. <tr th:each="booking, rowStat : ${bookingList}">
  65. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  66. <td class="text-center" th:text="${booking.bookingId}"></td>
  67. <td class="text-center" th:text="${booking.hallDetails.zone}"></td>
  68. <td class="text-center" th:text="${booking.hallDetails.division}"></td>
  69. <td class="text-center" th:text="${booking.hallDetails.hallName}"></td>
  70. <td class="text-center" th:text="${booking.users.name}"></td>
  71. <td class="text-center" th:text="${booking.users.usertype}"></td>
  72. <td class="text-center" th:text="${booking.bookingDate}"></td>
  73. <td class="text-center" th:text="${booking.noOfDays}"></td>
  74. <td class="text-center" th:text="${booking.reason}"></td>
  75. <td class="text-center"
  76. th:text="${booking.hallDetails.hallInchargeName} + ' / ' + ${booking.hallDetails.hallInchargeMobno}">
  77. </td>
  78. <td>
  79. <p>
  80. <span class="badge bg-warning" style="cursor: pointer;"
  81. th:onclick="pendingbooking([[${booking.bookingId}]])">Approved</span>
  82. </p>
  83. </td>
  84. </tr>
  85. </tbody>
  86. </table>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. </main>
  93. <!-- END Main Container -->
  94. <!--modal for pening-->
  95. <div class="modal fade backdrop" id="pendingBookingForm" data-backdrop="static" tabindex="-1" role="dialog"
  96. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  97. <div class="modal-dialog modal-lg" role="document">
  98. <div class="modal-content">
  99. <form id="ownform" onsubmit="return rejectsubmit();">
  100. <div class="block block-rounded block-themed block-transparent mb-0">
  101. <div class="block-header bg-primary-dark">
  102. <h3 class="block-title" id="2mtitle">Booking Information</h3>
  103. <div class="block-options">
  104. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  105. aria-label="Close">
  106. <i class="fa fa-fw fa-times"></i>
  107. </button>
  108. </div>
  109. </div>
  110. <div class="block-content row">
  111. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  112. <input type="hidden" class="form-control text-center" name="bookingid"
  113. id="bookingid" disabled />
  114. <div class="card-body">
  115. <table>
  116. <tr>
  117. <th colspan="10" style="background-color: #f2f2f2;">User Details</th>
  118. </tr>
  119. <tr>
  120. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
  121. </th>
  122. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  123. id="td_userName"></td>
  124. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
  125. </th>
  126. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  127. id="td_mobileNumber"></td>
  128. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
  129. </th>
  130. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  131. id="td_usertype"></td>
  132. </tr>
  133. <tr>
  134. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
  135. </th>
  136. <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  137. id="td_useraddress"></td>
  138. </tr>
  139. </table>
  140. </div>
  141. </div>
  142. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  143. <input type="hidden" class="form-control text-center" name="bookingid"
  144. id="bookingid" disabled />
  145. <div class="card-body">
  146. <table>
  147. <tr>
  148. <th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
  149. </tr>
  150. <tr>
  151. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
  152. </th>
  153. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  154. id="td_hallName"></td>
  155. </tr>
  156. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
  157. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  158. id="td_halladdress"></td>
  159. </tr>
  160. <tr>
  161. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  162. Name:</th>
  163. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  164. id="td_caretakername"></td>
  165. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  166. Mobile Number:</th>
  167. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  168. id="td_caretakermobileNumber"></td>
  169. </tr>
  170. </table>
  171. </div>
  172. </div>
  173. <div class="col-md-12 col-lg-12 col-sm-12">
  174. <input type="hidden" class="form-control text-center" name="settlementid"
  175. id="settlementid" disabled />
  176. <div class="card-body">
  177. <table>
  178. <tr>
  179. <th colspan="4" style="background-color: #f2f2f2;">Booking
  180. Details (Booking Id:-<span id="booking_id"
  181. style="color:blue"></span>)</th>
  182. </tr>
  183. <tr>
  184. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
  185. </th>
  186. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  187. id="td_bookingDate"></td>
  188. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Status:
  189. </th>
  190. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  191. id="td_bookingStatus"></td>
  192. </tr>
  193. <tr>
  194. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
  195. </th>
  196. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  197. id="td_startDate"></td>
  198. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
  199. Amount:</th>
  200. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  201. id="td_depositeAmount"></td>
  202. </tr>
  203. <tr>
  204. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END
  205. Date:</th>
  206. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  207. id="td_endDate"></td>
  208. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
  209. </th>
  210. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  211. id="td_hallAmount"></td>
  212. </tr>
  213. <tr>
  214. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
  215. </th>
  216. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  217. id="td_startingSlot"></td>
  218. <th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
  219. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  220. id="td_gst"></td>
  221. </tr>
  222. <tr>
  223. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
  224. </th>
  225. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  226. id="td_endingSlot"></td>
  227. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
  228. </th>
  229. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  230. id="td_totalAmount"></td>
  231. </tr>
  232. </table>
  233. </div>
  234. </div>
  235. <div class="col-sm-12">
  236. <!--<label class="form-label">Documents:<span class="text-danger"></span></label>-->
  237. <div class="documents" id="documents"></div>
  238. </div>
  239. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  240. <input type="hidden" class="form-control text-center" name="bookingid"
  241. id="bookingid" disabled />
  242. <div class="card-body">
  243. <table>
  244. <tr>
  245. <th colspan="10" style="background-color: #f2f2f2;">Booking Payment
  246. Details</th>
  247. </tr>
  248. <tr>
  249. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
  250. ID:</th>
  251. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  252. id="td_transactionId"></td>
  253. </tr>
  254. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount Received:
  255. </th>
  256. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  257. id="td_payamountReceived"></td>
  258. </tr>
  259. <tr>
  260. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
  261. Status:</th>
  262. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  263. id="td_paymentStatus"></td>
  264. </tr>
  265. </table>
  266. </div>
  267. </div>
  268. <div class="row" id="reasondetails">
  269. <div class="col-md-6 mb-2">
  270. <label class="form-label">Reason type :<span class="text-danger">*</span></label>
  271. <select class="form-control" id="reasontype">
  272. <option value="0" >Select Reason type</option>
  273. <option value="1">Illegal</option>
  274. <option value="2">Others</option>
  275. </select>
  276. </div>
  277. <div class="col-md-6 mb-2">
  278. <label class="form-label">Reason:<span class="text-danger">*</span></label>
  279. <textarea class="form-control " name="reason" id="reason" required style="height: 9px;"></textarea>
  280. <div id="reasonValidationText" class="text-danger small mt-1" style="display:none">
  281. Reason is required.</div>
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. <div class="block-content block-content-full text-end bg-body" id="mbutton2">
  287. <button type="button" class="btn btn-sm btn-alt-secondary"
  288. data-bs-dismiss="modal">Close</button>
  289. <button type="button" class="btn btn-sm btn-primary" id="rejectbutton"
  290. th:onclick="rejectsubmit()">Reject</button>
  291. </div>
  292. </form>
  293. </div>
  294. </div>
  295. </div>
  296. <!-- End Modal User -->
  297. <!-- Footer -->
  298. <div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel" aria-hidden="true">
  299. <div class="modal-dialog modal-lg" role="document">
  300. <div class="modal-content">
  301. <div class="modal-header">
  302. <h5 class="modal-title" id="fileModalLabel">File Preview</h5>
  303. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
  304. <span aria-hidden="true">&times;</span>
  305. </button>
  306. </div>
  307. <div class="modal-body">
  308. <embed id="filePreview" src="" width="100%" height="600px">
  309. </div>
  310. <div class="modal-footer">
  311. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  312. </div>
  313. </div>
  314. </div>
  315. </div>
  316. <div th:replace="~{fragments/resetpassword :: div}"></div>
  317. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  318. <script th:replace="~{fragments/loginscript :: script}"></script>
  319. <script>
  320. //script to open pending form
  321. function pendingbooking(bookingId) {
  322. $.ajax({
  323. type: "GET",
  324. url: '/victoriahallbooking/api/officer/getBookingDetails',
  325. data: {
  326. 'bookingsId': bookingId
  327. },
  328. success: function (x) {
  329. //console.log(x);
  330. showBookingInfo(x);
  331. }
  332. });
  333. }
  334. function showBookingInfo(list) {
  335. $('#pendingBookingForm').modal({
  336. backdrop: 'static',
  337. keyboard: false
  338. });
  339. $('#pendingBookingForm').modal('show');
  340. document.getElementById("td_userName").innerHTML = list.users.name;
  341. document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
  342. document.getElementById("td_usertype").innerHTML = list.users.usertype;
  343. document.getElementById("bookingid").value = list.bookingId;
  344. var userDetails = list.users;
  345. var userDetailsString =
  346. userDetails.doorNo + ", " +
  347. userDetails.street + ", " +
  348. userDetails.area + ", " +
  349. userDetails.location + "- " +
  350. userDetails.pinCode;
  351. document.getElementById("td_useraddress").innerHTML = userDetailsString;
  352. document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
  353. var hallDetails = list.hallDetails;
  354. var hallDetailsString =
  355. hallDetails.doorNo + ", " +
  356. hallDetails.street + ", " +
  357. hallDetails.area + ", " +
  358. hallDetails.city + "- " +
  359. hallDetails.pinCode;
  360. document.getElementById("td_halladdress").innerHTML = hallDetailsString;
  361. document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
  362. document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
  363. document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
  364. document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  365. document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
  366. document.getElementById("td_totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2);
  367. var gstcl = (list.hallAmount * (list.hallDetails.gst/100));
  368. var formattedGst = gstcl.toFixed(2);
  369. document.getElementById("td_gst").innerHTML = '₹ ' + formattedGst;
  370. document.getElementById("td_startDate").innerHTML = list.startDate;
  371. document.getElementById("td_endDate").innerHTML = list.endDate;
  372. document.getElementById("booking_id").innerHTML = list.bookingId;
  373. function getTimeSlot(slotValue) {
  374. //console.log("Slot Value in getTimeSlot function:", slotValue);
  375. var timeSlot;
  376. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  377. if (trimmedSlotValue === '1') {
  378. timeSlot = 'Morning';
  379. } else if (trimmedSlotValue === '2') {
  380. timeSlot = 'Evening';
  381. } else {
  382. timeSlot = 'Unknown';
  383. }
  384. //console.log("Time Slot:", timeSlot);
  385. return timeSlot;
  386. }
  387. document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
  388. document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
  389. document.getElementById("td_bookingStatus").innerHTML = list.bookingStatus;
  390. document.getElementById("td_transactionId").innerHTML = list.payments && list.payments.transactionId ? list.payments.transactionId : "NA";
  391. // Check if amountReceived is not null, otherwise set to "NA"
  392. document.getElementById("td_payamountReceived").innerHTML = list.payments && list.payments.amountReceived ? '₹ ' + list.payments.amountReceived : "NA";
  393. // Check if paymentStatus is not null, otherwise set to "NA"
  394. document.getElementById("td_paymentStatus").innerHTML = list.payments && list.payments.paymentStatus ? list.payments.paymentStatus : "NA";
  395. showReasonDocuments(list);
  396. if (list.reason === 'State Govt Event' || list.reason === 'Central Govt Event' || list.reason === 'Commercial & Others') {
  397. // Disable the reject button
  398. document.getElementById('rejectbutton').disabled = true;
  399. // Hide the reasondetails div
  400. $('#reasondetails').hide();
  401. } else {
  402. // Enable the reject button
  403. document.getElementById('rejectbutton').disabled = false;
  404. // Show the reasondetails div (if it was hidden before)
  405. $('#reasondetails').show();
  406. }
  407. var todaydate = new Date().toISOString().split('T')[0];
  408. // Convert startDate to YYYY-MM-DD format if needed
  409. var startDate = new Date(list.startDate).toISOString().split('T')[0]; // Ensure this is in the correct format
  410. if (startDate > todaydate) {
  411. $('#reasondetails').show();
  412. $('#rejectbutton').show();
  413. } else {
  414. $('#reasondetails').hide();
  415. $('#rejectbutton').hide();
  416. }
  417. }
  418. function showReasonDocuments(list) {
  419. $.ajax({
  420. type: "GET",
  421. url: '/victoriahallbooking/api/officer/getReasonByName',
  422. data: {
  423. 'reasonName': list.reason
  424. },
  425. success: function (x) {
  426. // console.log(x);
  427. showReasonWithDocument(x, list);
  428. }
  429. });
  430. }
  431. // Display booking documents
  432. function showReasonWithDocument(reasonData, list) {
  433. var reasonDocumentData = reasonData.reasonDocumentMasterList;
  434. var bookingDocumentsList = list.bookingDocumentsList;
  435. const reasonFieldsContainer = $('#documents');
  436. reasonFieldsContainer.empty();
  437. // Create a responsive table container
  438. var tableResponsiveDiv = $('<div>').addClass('table-responsive');
  439. // Create the table with Bootstrap classes and custom styles
  440. var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
  441. 'width': '100%',
  442. 'height': 'auto',
  443. 'border': '1px solid black'
  444. });
  445. // Create the table header (thead)
  446. var thead = $('<thead>').appendTo(table);
  447. var headerRow = $('<tr>').appendTo(thead);
  448. $('<th>').attr('colspan', '3').text('Document Details').css({
  449. 'color': 'black',
  450. 'font-weight': 'bold',
  451. 'background-color': '#f2f2f2',
  452. 'padding': '0.45rem 0.45rem'
  453. }).appendTo(headerRow);
  454. // Create header row for columns
  455. var columnHeadersRow = $('<tr>').appendTo(thead);
  456. $('<th>').text('S.No').appendTo(columnHeadersRow);
  457. $('<th>').text('Required Info').appendTo(columnHeadersRow);
  458. $('<th>').text('Required Documents').appendTo(columnHeadersRow);
  459. // Create the table body (tbody)
  460. var tbody = $('<tbody>').appendTo(table);
  461. // Iterate through the documents list and populate rows
  462. for (var i = 0; i < bookingDocumentsList.length; i++) {
  463. (function (index) {
  464. var row = $('<tr>').appendTo(tbody);
  465. $('<td>').text(index + 1).appendTo(row);
  466. // Determine the text content for the second cell
  467. var name = bookingDocumentsList[index].name ? bookingDocumentsList[index].name : ''; // Empty string if name is null or undefined
  468. var fieldText = reasonDocumentData[index].fieldName;
  469. var fullText = name ? fieldText + ': ' + name : fieldText; // Include colon only if name is not empty
  470. $('<td>').text(fullText).appendTo(row);
  471. // Create a link to view document image
  472. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
  473. showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
  474. });
  475. $('<td>').append(viewLink).appendTo(row);
  476. })(i);
  477. }
  478. // Append table to the responsive container
  479. tableResponsiveDiv.append(table);
  480. // Append table to the container in the DOM
  481. reasonFieldsContainer.append(tableResponsiveDiv);
  482. }
  483. function showDocumentImage(fileURL) {
  484. //console.log(fileURL);
  485. openFileModal(fileURL);
  486. }
  487. // Event delegation for dynamically added elements
  488. $(document).on('click', '.view-document', function () {
  489. const fileURL = $(this).data('url');
  490. openFileModal(fileURL);
  491. });
  492. function openFileModal(fileURL) {
  493. $('#filePreview').attr('src', fileURL);
  494. $('#fileModal').modal('show');
  495. }
  496. function accept() {
  497. let id = document.getElementById("bookingid").value;
  498. Swal.fire({
  499. title: 'Do you want to Accept this User ?',
  500. showDenyButton: true,
  501. showCancelButton: true,
  502. confirmButtonText: 'YES',
  503. denyButtonText: 'NO',
  504. }).then((result) => {
  505. /* Read more about isConfirmed, isDenied below */
  506. if (result.isConfirmed) {
  507. $.ajax({
  508. type: "POST",
  509. url: '/victoriahallbooking/api/officer/updateBookingApproved/' + id,
  510. data: {
  511. 'status': 'APPROVED',
  512. 'comments': 'Accepted',
  513. 'bookingId': id
  514. },
  515. success: function (data, textStatus, xhr) {
  516. if (xhr.status === 200) { // Check if the response status is OK
  517. Swal.fire(
  518. 'Done',
  519. 'Successfully Accepted to the ID:' + id,
  520. 'success'
  521. ).then(() => {
  522. location.reload();
  523. });
  524. } else {
  525. Swal.fire(
  526. 'Error',
  527. 'Failed to accept the user',
  528. 'error'
  529. );
  530. }
  531. },
  532. error: function (xhr, textStatus, errorThrown) {
  533. Swal.fire(
  534. 'Error',
  535. 'Failed to accept the user',
  536. 'error'
  537. );
  538. }
  539. });
  540. } else if (result.isDenied) {
  541. Swal.fire('Changes are not saved', '', 'info')
  542. }
  543. });
  544. }
  545. function rejectsubmit() {
  546. let id = document.getElementById("bookingid").value;
  547. let reason = document.getElementById("reason").value.trim();
  548. let reasontype = document.getElementById("reasontype").value;
  549. // Check if reason is empty only when rejecting
  550. if (reason === "" || reason.length === 0) {
  551. document.getElementById("reasonValidationText").style.display = "block";
  552. return false; // Prevent form submission
  553. } else {
  554. document.getElementById("reasonValidationText").style.display = "none";
  555. }
  556. Swal.fire({
  557. title: 'Do you want to Reject this User?',
  558. showDenyButton: true,
  559. showCancelButton: true,
  560. confirmButtonText: 'YES',
  561. denyButtonText: 'NO',
  562. }).then((result) => {
  563. if (result.isConfirmed) {
  564. // Show loading popup
  565. const loadingSwal = Swal.fire({
  566. title: 'Processing...',
  567. text: 'Please wait while we process the rejection.',
  568. allowOutsideClick: false, // Prevent closing the popup
  569. didOpen: () => {
  570. Swal.showLoading(); // Show the loading spinner
  571. },
  572. showConfirmButton: false, // Hide the confirm button during loading
  573. });
  574. $.ajax({
  575. type: "POST",
  576. url: '/victoriahallbooking/api/officer/updateBookingReject/' + id,
  577. data: {
  578. 'status': 'REJECTED',
  579. 'comments': reason,
  580. 'bookingId': id,
  581. 'reasontype': reasontype
  582. },
  583. success: function (data, textStatus, xhr) {
  584. loadingSwal.close(); // Close the loading popup
  585. if (xhr.status === 200) {
  586. Swal.fire(
  587. 'Done',
  588. 'Successfully Rejected to the ID: ' + id,
  589. 'success'
  590. ).then(() => {
  591. location.reload(); // Reload page after success
  592. });
  593. } else {
  594. Swal.fire(
  595. 'Error',
  596. 'Failed to reject the user',
  597. 'error'
  598. );
  599. }
  600. },
  601. error: function (xhr, textStatus, errorThrown) {
  602. loadingSwal.close(); // Close the loading popup
  603. Swal.fire(
  604. 'Error',
  605. 'Failed to reject the user',
  606. 'error'
  607. );
  608. }
  609. });
  610. } else if (result.isDenied) {
  611. Swal.fire('Changes are not saved', '', 'info');
  612. }
  613. });
  614. return false; // Prevent form submission
  615. }
  616. $(document).ready(
  617. function () {
  618. var buttons = [{
  619. extend: 'pageLength',
  620. className: 'btn btn-primary'
  621. }, {
  622. title: 'Data export',
  623. extend: 'copyHtml5',
  624. text: 'Copy',
  625. className: 'btn btn-primary',
  626. id: 'copyBtn'
  627. }, {
  628. extend: 'excelHtml5',
  629. text: 'Excel',
  630. className: 'btn btn-primary',
  631. id: 'excelBtn'
  632. }, {
  633. extend: 'csvHtml5',
  634. text: 'CSV',
  635. className: 'btn btn-primary',
  636. id: 'csvBtn'
  637. }, {
  638. extend: 'pdfHtml5',
  639. text: 'PDF',
  640. className: 'btn btn-primary',
  641. id: 'pdfBtn'
  642. },
  643. ];
  644. $('#bookingapprovedtable').DataTable(
  645. {
  646. dom: 'Bftip',
  647. columnDefs: [{
  648. targets: 'no-sort',
  649. orderable: false
  650. }],
  651. lengthMenu: [
  652. [50, 100, 200, 500, -1],
  653. ['50 rows', '100 rows', '200 rows',
  654. '500 rows', 'Show all']],
  655. scrollY: '50vh',
  656. fixedColumns: {
  657. left: 1,
  658. right: 1
  659. },
  660. buttons: [buttons],
  661. responsive: true,
  662. searching: true, // Enable search
  663. select: false,
  664. processing: false,
  665. });
  666. // Link the search input to DataTable
  667. $('#searchInput').on('keyup', function () {
  668. dataTable.search(this.value).draw();
  669. });
  670. });
  671. </script>
  672. </body>
  673. </html>