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.

855 lines
44 KiB

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