worked for coworkpace project based on build id
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.

852 lines
27 KiB

11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
  3. <head th:replace="~{fragments/user-head :: head}">
  4. <!-- DataTables CSS -->
  5. <link rel="stylesheet"
  6. href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
  8. </head>
  9. <style>
  10. .otp-input-box {
  11. /*display: flex;
  12. justify-content: space-between;*/
  13. width: 100%;
  14. }
  15. .otp-input {
  16. width: 30px;
  17. height: 30px;
  18. border: 1px solid #ccc;
  19. border-radius: 5px;
  20. text-align: center;
  21. font-size: 16px;
  22. margin-right: 10px;
  23. }
  24. /* Align the DataTables search box to the right */
  25. .dataTables_filter {
  26. text-align: right;
  27. }
  28. /* Ensure the table container has responsive behavior */
  29. .table-container {
  30. width: 100%;
  31. overflow-x: auto;
  32. /* Allows horizontal scroll when needed */
  33. }
  34. /* Ensure the table adjusts with screen size */
  35. .table {
  36. width: 100%;
  37. table-layout: auto;
  38. /* Adjust column width based on content */
  39. }
  40. /* Make the table scrollable on smaller devices */
  41. @media ( max-width : 768px) {
  42. .table {
  43. font-size: 12px;
  44. /* Reduce font size for smaller devices */
  45. }
  46. .btn-sm {
  47. font-size: 10px;
  48. /* Adjust button size */
  49. }
  50. th, td {
  51. white-space: nowrap;
  52. /* Prevent wrapping of text in cells */
  53. }
  54. }
  55. .input-group-text {
  56. background-color: #ffffff; /* Match input background color */
  57. border: none; /* Remove border from icon area */
  58. border-right: 1px solid #ced4da; /* Add right border to match input */
  59. color: #007bff; /* Icon color */
  60. font-size: 1.5rem; /* Adjust icon size */
  61. padding-left: 10px; /* Adjust padding to position icon */
  62. padding-right: 10px;
  63. }
  64. .modal-xl-custom {
  65. max-width: 95%; /* or any size you prefer */
  66. }
  67. #mobileNo {
  68. border-left: none; /* Remove left border to merge with icon */
  69. font-size: 1rem; /* Adjust font size */
  70. height: 40px; /* Set input height for better alignment */
  71. }
  72. .input-group {
  73. border: 1px solid #ced4da; /* Outer border to unify icon and input */
  74. border-radius: 5px; /* Rounded corners */
  75. overflow: hidden; /* Ensure seamless appearance */
  76. }
  77. </style>
  78. <body>
  79. <!-- Pre-loader start -->
  80. <div th:replace="~{fragments/preloader :: div}"></div>
  81. <!-- Pre-loader end -->
  82. <div id="pcoded" class="pcoded">
  83. <div class="pcoded-container">
  84. <!-- Menu header start -->
  85. <nav th:replace="~{fragments/user-nav :: nav}"></nav>
  86. <!-- Menu header end -->
  87. <div class="pcoded-main-container">
  88. <nav th:replace="~{fragments/user-navmenu :: nav}"></nav>
  89. <div class="pcoded-wrapper">
  90. <div class="pcoded-content">
  91. <div class="pcoded-inner-content">
  92. <!-- Main-body start -->
  93. <div class="main-body">
  94. <div class="page-wrapper">
  95. <div class="page-body" style="padding-top: 5%;">
  96. <!-- Page-header start -->
  97. <div class="page-header">
  98. <div class="row align-items-end">
  99. <div class="col-lg-8">
  100. <div class="page-header-title">
  101. <div class="d-inline">
  102. <h4>My Bookings</h4>
  103. <span>Manage and Track all your bookings.</span>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="col-lg-4">
  108. <div class="page-header-breadcrumb">
  109. <ul class="breadcrumb-title">
  110. <li class="breadcrumb-item"><a href="home"> <i
  111. class="feather icon-home"></i>
  112. </a></li>
  113. <li class="breadcrumb-item"><a href="#!">Booking
  114. Details</a></li>
  115. </ul>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. <!-- otp form -->
  121. <div class="container my-4" id="mobilenumberotp">
  122. <div class="row justify-content-center">
  123. <div class="col-lg-6 col-md-8 col-sm-12">
  124. <!-- Card Start -->
  125. <div class="card shadow-sm rounded p-4">
  126. <div class="text-center mb-3">
  127. <i class="bi bi-alarm" style="font-size: 2rem;"></i>
  128. <h5 class="mt-2 mb-0">OTP Verification</h5>
  129. </div>
  130. <!-- Mobile Number Input -->
  131. <div class="form-group text-center">
  132. <label for="mobileNo" class="font-weight-bold">Mobile Number</label>
  133. <div class="input-group justify-content-center" style="max-width: 300px; margin: 0 auto;">
  134. <div class="input-group-prepend">
  135. <span class="input-group-text" id="mobile-addon">
  136. <i class="fa fa-mobile-alt"></i>
  137. </span>
  138. </div>
  139. <input type="text" id="mobileNo" name="mobileNo" class="form-control"
  140. placeholder="Enter 10-digit number" maxlength="10" minlength="10"
  141. aria-describedby="mobile-addon">
  142. </div>
  143. </div>
  144. <!-- Send OTP Button -->
  145. <div class="text-center mt-3">
  146. <button class="btn btn-primary" id="sendOtpButton">
  147. <i class="fa fa-mobile-phone"></i> Send OTP
  148. </button>
  149. </div>
  150. <!-- OTP Input -->
  151. <div class="form-group text-center mt-4" id="otpSection" style="display: none;">
  152. <label for="otp" class="font-weight-bold">Enter OTP</label>
  153. <input type="text" id="otp" class="form-control mx-auto text-center" style="max-width: 200px;"
  154. placeholder="Enter OTP" maxlength="6">
  155. <button class="btn btn-success mt-3" id="verifyOtpButton">
  156. <i class="fa fa-check-circle"></i> Verify OTP
  157. </button>
  158. </div>
  159. </div>
  160. <!-- Card End -->
  161. </div>
  162. </div>
  163. </div>
  164. <!-- Page-header end -->
  165. <div class="row" >
  166. <i class="bi bi-alarm" style="font-size: 2rem;"></i>
  167. <div class="col-sm-12 col-lg-12">
  168. <!-- Zero config.table start -->
  169. <div class="card" id="datatablecard" style="display:none;">
  170. <div>
  171. <i class="bi bi-card-list" style="font-size: 2rem;"></i></div>
  172. <div class="card-block" >
  173. <div class="card-table table-container mt-2"
  174. id="nameinclusiontable">
  175. <table id="nameinclusion" class="table table-bordered ">
  176. <thead style="background-color: #195970; color: white;">
  177. <tr role="row">
  178. <th>S.No</th>
  179. <th>Booking ID</th>
  180. <th>Building</th>
  181. <th>Type</th>
  182. <th>Duration</th>
  183. <th>Date</th>
  184. <th>Check In</th>
  185. <th>Check Out</th>
  186. <th>No of Seat</th>
  187. <th>Amount</th>
  188. <th>Status</th>
  189. </tr>
  190. </thead>
  191. <tbody id="bookingHistoryBody">
  192. <!-- <tr th:each="list, i : ${bookinghistorylist}">
  193. <td th:text="${i.count}">0</td>
  194. <td th:text="${list.booking_id}"></td>
  195. <td th:text="${list.buildingname}"></td>
  196. <td th:text="${list.type_name}"></td>
  197. <td th:text="${list.duration}"></td>
  198. <td th:text="${list.from_date + ' / ' + list.to_date}"></td>
  199. <td th:text="${list.checkin}"></td>
  200. <td th:text="${list.checkout}"></td>
  201. <td th:text="${list.no_of_person}"></td>
  202. <td th:text="${list.amount}"></td>
  203. <td><span th:text="${list.status}"
  204. th:classappend="${list.status == 'Completed' ? 'badge bg-success' : 'badge bg-warning'}"
  205. th:onclick="'openBookingDetails(' + ${list.booking_id} + ')'"
  206. style="cursor: pointer;"> </span> <span
  207. th:text="view"
  208. th:classappend="${list.status == 'Completed' ? 'badge bg-success' : 'badge bg-warning'}"
  209. th:onclick="'openBookingDetails(' + ${list.booking_id} + ')'"
  210. style="cursor: pointer;">
  211. </span> -->
  212. <!-- <span class="open-booking-modal"
  213. style="font-size: 1.2rem; margin-left: 8px; cursor: pointer;"
  214. th:attr="data-booking-id=${list.booking_id},
  215. data-mobile=${list.mobile},
  216. data-username=${list.user_name}">
  217. 📋
  218. </span> -->
  219. <!-- <span style="font-size: 1.2rem; margin-left: 8px; cursor: pointer;"
  220. th:onclick="'showBookingModal(' + ${list.booking_id} + ', \'' + ${list.mobile} + '\', \'' + ${list.user_name} + '\')'">
  221. 📋
  222. </span> -->
  223. </td>
  224. </tr>
  225. </tbody>
  226. </table>
  227. </div>
  228. </div>
  229. </div>
  230. <!-- Zero config.table end -->
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235. </div>
  236. <!-- Main-body end -->
  237. </div>
  238. </div>
  239. </div>
  240. <!--<footer th:replace="~{fragments/footer :: footer}"></footer>-->
  241. </div>
  242. </div>
  243. </div>
  244. <!-- Modal -->
  245. <!-- Modal -->
  246. <div id="myModal" class="modal" style="display: none;">
  247. <div class="modal-content">
  248. <span class="close">&times;</span>
  249. <iframe id="qrIframe" width="100%" height="400px"></iframe>
  250. </div>
  251. </div>
  252. <div class="modal fade" id="bookingDetailsModal" tabindex="-2"
  253. role="dialog" aria-labelledby="myModalLabel" data-bs-backdrop="static"
  254. aria-hidden="true">
  255. <!-- <div class="modal-dialog modal-lg"
  256. role="document">-->
  257. <div class="modal-dialog modal-xl-custom" role="document">
  258. <div class="modal-content">
  259. <div class="modal-header">
  260. <h5>Booking details</h5>
  261. <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="close_modal('#bookingDetailsModal')"><span aria-hidden="true">&times;</span> -->
  262. <button type="button" class="btn-close" data-bs-dismiss="modal"
  263. aria-label="Close">&times;</button>
  264. </div>
  265. <div class="modal-body">
  266. <iframe id="bookingDetailsIframe" src="" width="100%" height="500px" style="border: none;"></iframe>
  267. </div>
  268. <div class="modal-footer text-center">
  269. <button type="button" class="btn book-now-btn" data-dismiss="modal"
  270. style="margin-right: 10px;"
  271. onclick="close_modal('#bookingDetailsModal')">Close</button>
  272. </div>
  273. </div>
  274. </div>
  275. </div>
  276. <!--OTP 2 start-->
  277. <div class="modal fade" id="otpForm" tabindex="-1" role="dialog"
  278. aria-labelledby="otpFormLabel" aria-hidden="true">
  279. <div class="modal-dialog" role="document">
  280. <div class="modal-content">
  281. <form action="#" th:action="@{/otpForm}" th:object="${otpForm}"
  282. method="post" onsubmit="return verifyOtp();">
  283. <div class="modal-header">
  284. <h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP
  285. Login</h6>
  286. <button type="button" class="close" data-bs-dismiss="modal"
  287. aria-label="Close"
  288. style="color: black; border: white; background-color: white;">
  289. <span aria-hidden="true">&times;</span>
  290. </button>
  291. </div>
  292. <!--end modal-header-->
  293. <div class="modal-body">
  294. <div class="row ">
  295. <div class="mb-3" style="text-align: center;">
  296. <img src="/co-workspaceDocuments/otp.png" width="50%"
  297. alt="Mobileotp">
  298. </div>
  299. </div>
  300. <!--end row-->
  301. <div class="row d-flex justify-content-center align-items-center">
  302. <div class="mb-0">
  303. <h4>OTP Verification</h4>
  304. <p class="text-mute">
  305. Enter the OTP sent to <b class="text-info" id="mobilenotxt"></b>
  306. </p>
  307. <p class="text-danger" id="otperror"></p>
  308. </div>
  309. </div>
  310. <!--end row-->
  311. <div class="row d-flex justify-content-center align-items-center">
  312. <div class="mb-3 ">
  313. <div class="otp-input-box">
  314. <input type="text" maxlength="1" class="otp-input" id="otp1"
  315. required /> <input type="text" maxlength="1"
  316. class="otp-input" id="otp2" required /> <input type="text"
  317. maxlength="1" class="otp-input" id="otp3" required /> <input
  318. type="text" maxlength="1" class="otp-input" id="otp4" required />
  319. <input type="text" maxlength="1" class="otp-input" id="otp5"
  320. required />
  321. </div>
  322. </div>
  323. </div>
  324. <!--end row-->
  325. <div class="row d-flex justify-content-center align-items-center">
  326. <div class="mb-3">
  327. <div id="resend-containers">
  328. <p class="mb-0">Didn't receive OTP?</p>
  329. <p class="mb-0 text-info" id="resendlink"></p>
  330. </div>
  331. </div>
  332. </div>
  333. <!--end row-->
  334. </div>
  335. <!--end modal-body-->
  336. <div class="modal-footer">
  337. <button type="button" class="btn btn-secondary"
  338. data-bs-dismiss="modal">Close</button>
  339. <button type="submit" class="btn btn-primary btn-sm" id="but">Verify
  340. OTP</button>
  341. </div>
  342. <!--end modal-footer-->
  343. </form>
  344. </div>
  345. <!--end modal-content-->
  346. </div>
  347. <!--end modal-dialog-->
  348. </div>
  349. <div class="modal fade" id="complaintDetailsModal" tabindex="-1" aria-labelledby="bookingDetailsLabel" aria-hidden="true">
  350. <div class="modal-dialog modal-dialog-centered modal-lg">
  351. <div class="modal-content">
  352. <div class="modal-header">
  353. <h5 class="modal-title" id="bookingDetailsLabel">Complaint Details</h5>
  354. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  355. </div>
  356. <div class="modal-body">
  357. <form>
  358. <input id="modalBookingId" class="form-control-plaintext" type="hidden">
  359. <div class="mb-3">
  360. <label for="modalMobile" class="form-label"><strong>Mobile Number:</strong></label>
  361. <input type="text" id="modalMobile" class="form-control" readonly>
  362. </div>
  363. <div class="mb-3">
  364. <label for="modalName" class="form-label"><strong>Enter your name:</strong></label>
  365. <input type="text" id="modalName" class="form-control" readonly>
  366. </div>
  367. <div class="mb-3">
  368. <label for="remarks" class="form-label"><strong>Remarks:</strong></label>
  369. <textarea id="remarks" class="form-control" placeholder="Enter your remarks" rows="3"></textarea>
  370. </div>
  371. <div class="mb-3" id="uploadedImageContainer" style="display: none;">
  372. <label class="form-label"><strong>Uploaded Image:</strong></label><br>
  373. <img id="uploadedImage" src="" alt="Uploaded Image" style="max-width: 100%; height: auto; border: 1px solid #ccc; padding: 5px;">
  374. </div>
  375. <div class="mb-3" id="fileUpload">
  376. <label for="fileUpload" class="form-label"><strong>Upload file:</strong></label>
  377. <input type="file" id="fileUpload" class="form-control">
  378. </div>
  379. </form>
  380. </div>
  381. <div class="modal-footer">
  382. <button type="submit" class="btn btn-primary btn-sm" id="submitform">Submit</button>
  383. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  384. </div>
  385. </div>
  386. </div>
  387. </div>
  388. <!--OTP 2 End-->
  389. <script th:replace="~{fragments/user-script :: script}"></script>
  390. <!-- DataTables JS -->
  391. <script
  392. src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
  393. <script
  394. src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
  395. <script
  396. src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  397. <script>
  398. $(document).ready(
  399. function() {
  400. //$('#nameinclusion').DataTable();
  401. document.getElementById('mobileNo').addEventListener(
  402. 'input', function(e) {
  403. // Remove all characters except digits
  404. this.value = this.value.replace(/[^0-9]/g, '');
  405. });
  406. });
  407. function showBookingModal(bookingId, mobile, user_name) {
  408. // Set form values
  409. document.getElementById("modalBookingId").value = bookingId;
  410. document.getElementById("modalMobile").value = mobile;
  411. document.getElementById("modalName").value = user_name;
  412. // Reset form
  413. $('#remarks').val('');
  414. $('#fileUpload').val('');
  415. $('#remarks').prop('readonly', false);
  416. $('#fileUpload').prop('disabled', false);
  417. $('#submitform').show();
  418. $('#uploadedImageContainer').hide(); // hide image container
  419. // Fetch complaint details if already submitted
  420. $.ajax({
  421. url: '/muthalvarpadaippagam/book/api/getComplaint',
  422. type: 'GET',
  423. data: { bookingId: bookingId },
  424. success: function (data) {
  425. if (data && data.remarks) {
  426. $('#remarks').val(data.remarks).prop('readonly', true);
  427. $('#submitform').hide();
  428. $('#fileUpload').hide();
  429. // Show uploaded image
  430. if (data.upload_photo_url) {
  431. const fullUrl = `${window.location.origin}${data.upload_photo_url}`;
  432. $('#uploadedImage').attr('src', fullUrl);
  433. $('#uploadedImageContainer').show();
  434. }
  435. }
  436. },
  437. error: function () {
  438. console.log("No previous complaint found or error occurred.");
  439. }
  440. });
  441. // Show the modal
  442. $('#complaintDetailsModal').modal('show');
  443. }
  444. /* function showBookingModal(bookingId,mobile,user_name) {
  445. // Set the booking ID into the modal content
  446. document.getElementById("modalBookingId").value = bookingId;
  447. document.getElementById("modalMobile").value= mobile;
  448. document.getElementById("modalName").value= user_name;
  449. // You can also dynamically load more booking data via AJAX here
  450. // Clear previous form fields
  451. $('#remarks').val('');
  452. $('#fileUpload').val('');
  453. $('#remarks').prop('readonly', false);
  454. $('#fileUpload').prop('disabled', false);
  455. $('#submitform').show();
  456. // Show the modal
  457. //var myModal = new bootstrap.Modal(document.getElementById('complaintDetailsModal'));
  458. //myModal.show();
  459. //Check if complaint already exists
  460. $.ajax({
  461. url: '/muthalvarpadaippagam/book/api/getComplaint', // your GET API
  462. type: 'GET',
  463. data: { bookingId: bookingId },
  464. success: function (data) {
  465. if (data && data.remarks) {
  466. // Complaint already submitted, populate fields in read-only mode
  467. $('#remarks').val(data.remarks).prop('readonly', true);
  468. $('#submitform').hide(); // hide submit button
  469. $('#fileUpload').prop('disabled', true);
  470. }
  471. },
  472. error: function () {
  473. console.log("No previous complaint found or error occurred.");
  474. }
  475. });
  476. // Show the modal
  477. $('#complaintDetailsModal').modal('show');
  478. } */
  479. document.querySelectorAll('.open-booking-modal').forEach(span => {
  480. span.addEventListener('click', function () {
  481. const bookingId = this.dataset.bookingId;
  482. const mobile = this.dataset.mobile;
  483. const userName = this.dataset.username; // camelCase here
  484. console.log(userName);
  485. console.log(mobile);
  486. showBookingModal(bookingId, mobile, userName);
  487. });
  488. });
  489. $(document)
  490. .ready(
  491. function() {
  492. // Event listener for Send OTP button
  493. $('#sendOtpButton')
  494. .click(
  495. function() {
  496. // Get the entered mobile number
  497. const mobileNumber = $(
  498. '#mobileNo').val();
  499. // Basic check to ensure mobile number is entered
  500. if (mobileNumber.length === 10) {
  501. // Display the mobile number in the OTP modal
  502. $("#mobilenotxt").html(
  503. mobileNumber);
  504. $
  505. .ajax({
  506. type : "GET",
  507. url : '/muthalvarpadaippagam/book/api/sendOTP',
  508. data : {
  509. 'mobileNo' : mobileNumber,
  510. 'purpose' : 'New User'
  511. }, // Pass mobile number and purpose
  512. dataType : 'json',
  513. success : function(
  514. response) {
  515. if (response === "Error: This number is not registered.") {
  516. // Show an alert if the number is not registered
  517. alert("This number is not registered.");
  518. } else if (response !== "Error") {
  519. // Open OTP Modal
  520. $(
  521. '#otpForm')
  522. .modal(
  523. {
  524. backdrop : 'static',
  525. keyboard : false
  526. });
  527. $(
  528. '#otpForm')
  529. .modal(
  530. 'show');
  531. // Start countdown for resend OTP
  532. var timeleft = 60;
  533. var resendTimeout;
  534. var countdown = $("#countdown");
  535. // Display countdown
  536. $(
  537. "#resend-link")
  538. .html(
  539. 'Please wait..<span id="countdown">60</span>s');
  540. resendTimeout = setInterval(
  541. function() {
  542. timeleft--;
  543. countdown
  544. .text(timeleft);
  545. // When countdown finishes, enable Resend OTP link
  546. if (timeleft <= 0) {
  547. clearInterval(resendTimeout);
  548. $(
  549. "#resend-link")
  550. .html(
  551. '<a href="#" id="resend-link" class="text-info" onclick="return sendOTP();">Resend OTP</a>');
  552. }
  553. },
  554. 1000);
  555. } else {
  556. alert("OTP not sent. Please try again.");
  557. }
  558. },
  559. error : function() {
  560. alert("No Data found!. This number is not registered.");
  561. }
  562. });
  563. } else {
  564. alert("Please enter a valid 10-digit mobile number.");
  565. }
  566. });
  567. });
  568. // For OTP input box
  569. $('.otp-input').on('keyup', function(e) {
  570. var $this = $(this);
  571. if ($this.val().length === 1) {
  572. $this.next('.otp-input').focus();
  573. }
  574. if ($this.val().length === 0) {
  575. $this.prev('.otp-input').focus();
  576. }
  577. });
  578. //verify otp
  579. function verifyOtp() {
  580. var otpInputs = $('.otp-input');
  581. var otpValue = '';
  582. otpInputs.each(function() {
  583. otpValue += $(this).val();
  584. });
  585. $.ajax({
  586. type : "GET",
  587. url : '/muthalvarpadaippagam/book/api/verifyOTP',
  588. data : {
  589. 'otp' : otpValue
  590. },
  591. dataType : 'json',
  592. success : function(response) {
  593. if (response.status === "Success") {
  594. console.log("OTP is Verified!!!");
  595. //location.reload();
  596. $('#otpForm').modal('hide');
  597. $('#datatablecard').show();
  598. $('#mobilenumberotp').hide();
  599. // Proceeds to save form or next action
  600. loadBookingHistoryTable();
  601. } else {
  602. $("#otperror").html("OTP is Incorrect!!!");
  603. }
  604. },
  605. error : function() {
  606. console.log("Error during OTP verification.");
  607. $("#otperror").html("Something went wrong. Please try again.");
  608. }
  609. });
  610. return false;
  611. }
  612. function loadBookingHistoryTable() {
  613. $.get("/muthalvarpadaippagam/book/api/bookinghistory", function (data) {
  614. const tbody = $('#bookingHistoryBody');
  615. tbody.empty();
  616. if (!Array.isArray(data) || data.length === 0) {
  617. tbody.append(`<tr><td colspan="11" class="text-center">No booking history found.</td></tr>`);
  618. } else {
  619. data.forEach((item, index) => {
  620. const row = `<tr>
  621. <td>${index + 1}</td>
  622. <td>${item.booking_id || ''}</td>
  623. <td>${item.buildingname || ''}</td>
  624. <td>${item.type_name || ''}</td>
  625. <td>${item.duration || ''}</td>
  626. <td>${item.from_date || ''} / ${item.to_date || ''}</td>
  627. <td>${item.checkin || ''}</td>
  628. <td>${item.checkout || ''}</td>
  629. <td>${item.no_of_person || ''}</td>
  630. <td>${item.amount || ''}</td>
  631. <td>
  632. <span class="badge ${item.status === 'Completed' ? 'bg-success' : 'bg-warning'}"
  633. style="cursor:pointer"
  634. onclick="openBookingDetails('${item.booking_id}')">
  635. ${item.status || 'N/A'}
  636. </span>
  637. <!-- View badge -->
  638. <!-- View badge (always says "view") -->
  639. <span class="badge bg-primary"
  640. style="cursor:pointer"
  641. onclick="openBookingDetails('${item.booking_id}')">
  642. view
  643. </span>
  644. </td>
  645. </tr>`;
  646. tbody.append(row);
  647. });
  648. }
  649. // Reinitialize or initialize the DataTable
  650. if ($.fn.DataTable.isDataTable('#nameinclusion')) {
  651. $('#nameinclusion').DataTable().destroy();
  652. }
  653. $('#nameinclusion').DataTable({
  654. responsive: true
  655. });
  656. });
  657. }
  658. function openBookingDetails(bookingId) {
  659. const iframe = document.getElementById('bookingDetailsIframe');
  660. iframe.src = `/muthalvarpadaippagam/bookingQRCode?booking_id=${bookingId}`;
  661. $('#bookingDetailsModal').modal('show');
  662. }
  663. function close_modal(modalid) {
  664. $(modalid).modal('hide');
  665. }
  666. $('#otpForm').on('hidden.bs.modal', function () {
  667. // Clear all OTP input fields
  668. $('.otp-input').val('');
  669. $('#mobileNo').val('');
  670. });
  671. /* $('#submitform').click(function (e) {
  672. e.preventDefault(); // Prevent default form submission if inside a form
  673. // Gather form values
  674. const bookingId = $('#modalBookingId').val();
  675. const mobile = $('#modalMobile').val();
  676. const userName = $('#modalName').val();
  677. const remarks = $('#remarks').val();
  678. const file = $('#fileUpload')[0].files[0]; // Get the first selected file
  679. // Debug log (optional)
  680. console.log("Booking ID:", bookingId);
  681. console.log("Mobile:", mobile);
  682. console.log("User Name:", userName);
  683. console.log("Remarks:", remarks);
  684. console.log("File:", file);
  685. // Optional: Validation
  686. if (!remarks) {
  687. alert("Please enter remarks.");
  688. return;
  689. }
  690. // Example: Send data to server via AJAX (FormData used for file)
  691. const formData = new FormData();
  692. formData.append("bookingId", bookingId);
  693. formData.append("mobileNumber", mobile);
  694. formData.append("userName", userName);
  695. formData.append("remarks", remarks);
  696. if (file) {
  697. formData.append("uploadPhotoUrl", file);
  698. }
  699. $.ajax({
  700. url: '/muthalvarpadaippagam/book/api/add',
  701. type: 'POST',
  702. data: formData,
  703. contentType: false,
  704. processData: false,
  705. success: function (response) {
  706. alert("Submitted successfully!");
  707. $('#complaintDetailsModal').modal('hide');
  708. // Optionally refresh the page or update table
  709. // Clear fields after successful submission
  710. $('#remarks').val('');
  711. $('#fileUpload').val('');
  712. },
  713. error: function (xhr, status, error) {
  714. console.error("Submission error:", error);
  715. alert("There was a problem submitting the form.");
  716. }
  717. });
  718. }); */
  719. </script>
  720. </body>
  721. </html>