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.

837 lines
42 KiB

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