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.

961 lines
32 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/head-counter :: head}"></head>
  4. <style>
  5. #showBookingDetails table {
  6. width: 100%;
  7. padding: 100px;
  8. }
  9. #showBookingDetails th,
  10. td {
  11. padding: 8px;
  12. text-align: left;
  13. word-wrap: break-word;
  14. /* Break long words */
  15. white-space: normal;
  16. /* Allow text to wrap */
  17. }
  18. .otp-input {
  19. width: 30px;
  20. height: 30px;
  21. border: 1px solid #ccc;
  22. border-radius: 5px;
  23. text-align: center;
  24. font-size: 16px;
  25. margin-right: 10px;
  26. }
  27. .otp-input-box {
  28. justify-content: center;
  29. margin: 0 auto;
  30. /* Centers the box horizontally */
  31. align-items: center;
  32. /* Align items in the center for flex containers */
  33. width: 100%;
  34. }
  35. </style>
  36. <body>
  37. <!-- Page Container -->
  38. <div id="page-container"
  39. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  40. <!-- Side Overlay aside (right)-->
  41. <!-- <aside th:replace="~{fragments/aside-right :: aside}"></aside> -->
  42. <!-- END Side Overlay (right)-->
  43. <!-- Sidebar Nav-->
  44. <nav th:replace="~{fragments/nav-counter :: nav}"></nav>
  45. <!-- END Sidebar -->
  46. <!-- Header -->
  47. <header th:replace="~{fragments/header-counter :: header}"></header>
  48. <!-- END Header -->
  49. <!-- Main Container -->
  50. <main id="main-container">
  51. <!-- Page Content -->
  52. <div class="content">
  53. <div class="block block-rounded">
  54. <div class="block-header block-header-default">
  55. <h3 class="block-title"> List of Counter Bookings</h3>
  56. </div>
  57. <div class="block-content p-0">
  58. <div class="p-sm-4 p-0">
  59. <div class="table-responsive">
  60. <table id="BookingdetailsList"
  61. class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
  62. <thead class="thead-light">
  63. <tr class="table-bordered">
  64. <th class="text-center no-sort">S.No</th>
  65. <th class="text-center">Booking Id</th>
  66. <th class="text-center">Hall Zone/Div</th>
  67. <th class="text-center">Booking date</th>
  68. <th class="text-center">Starting Date</th>
  69. <th class="text-center">Ending Date</th>
  70. <th class="text-center">No of Days</th>
  71. <th class="text-center">Booking Status</th>
  72. <th class="text-center">Reason for booking</th>
  73. <th class="text-center">Booking Type</th>
  74. <th class="text-center">View</th>
  75. </tr>
  76. </thead>
  77. <tbody>
  78. <tr th:each="list, i : ${bookinglist}" class="${bookinglist}" id="ddRow">
  79. <td th:text="${i.count}">0</td>
  80. <td class="text-center" th:text="${list['booking_id']}"></td>
  81. <td class="text-center"
  82. th:text="${list['hall_zone']} + '/' + ${list['hall_division']}"></td>
  83. <td class="text-center" th:text="${list['booking_date']}"></td>
  84. <td class="text-center" th:text="${list['start_date']}"></td>
  85. <td class="text-center" th:text="${list['end_date']}"></td>
  86. <td class="text-center" th:text="${list['no_of_days']}"></td>
  87. <td class="text-center" th:text="${list['booking_status']}"></td>
  88. <td class="text-center" th:text="${list['reason']}"></td>
  89. <td th:switch="${list['event_category']}">
  90. <p th:case="'Current'">
  91. <span class="badge bg-primary">Current</span>
  92. </p>
  93. <p th:case="'Past'">
  94. <span class="badge bg-info">Past</span>
  95. </p>
  96. <!-- <p th:case="'Pay'">
  97. <a class="view-button" th:if="${list['booking_status'] == 'PENDING'}"
  98. th:onclick="'openDDForm(' + ${list['booking_id']} + ');'">
  99. <span class="badge bg-warning" style="cursor: pointer;">Pay</span>
  100. </a>
  101. </p>-->
  102. <p th:case="'Future'">
  103. <span class="badge bg-success">Future</span>
  104. <a class="view-button"
  105. th:if="${list['booking_status'] == 'APPROVED'}">
  106. <span class="badge bg-danger" style="cursor: pointer;"
  107. th:onclick="cancelBooking([[${list['booking_id']}]], [[${list['mobile_no']}]], [[${list['booking_type']}]])">
  108. Cancel Booking
  109. </span>
  110. </a>
  111. </p>
  112. </td>
  113. <td>
  114. <a class="view-button">
  115. <span class="badge bg-primary" style="cursor: pointer;"
  116. th:onclick="showBookingDetails([[${list['booking_id']}]] )">View</span>
  117. </a>
  118. </td>
  119. </tr>
  120. </tbody>
  121. </table>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. <!-- END Page Content -->
  128. </main>
  129. <!-- END Main Container -->
  130. <!-- Modal for DD Details -->
  131. <div class="modal fade backdrop" id="ddDetailsModal" data-backdrop="static" tabindex="-1" role="dialog"
  132. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  133. <div class="modal-dialog modal-lg" role="document">
  134. <div class="modal-content">
  135. <form action="/counter/saveDDdetails" id="ddform" method="post" onsubmit="return submitForm()"
  136. enctype="multipart/form-data">
  137. <div class="block block-rounded block-themed block-transparent mb-0">
  138. <div class="block-header bg-primary-dark">
  139. <h3 class="block-title" id="mtitle">Add Demand Draft Number</h3>
  140. <div class="block-options">
  141. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  142. aria-label="Close">
  143. <i class="fa fa-fw fa-times"></i>
  144. </button>
  145. </div>
  146. </div>
  147. <div class="block-content row">
  148. <!-- Existing form fields -->
  149. <div class="col-md-4">
  150. <div class="form-group">
  151. <label for="bankName">Bank Name:</label>
  152. <input type="text" class="form-control" id="bankName" name="bankName"
  153. placeholder="Bank Name" pattern="[A-Za-z\s'-]+" required>
  154. </div>
  155. </div>
  156. <div class="col-md-4">
  157. <div class="form-group">
  158. <label for="bankAccNo">Bank Account Number:</label>
  159. <input type="number" class="form-control" id="bankAccNo" name="bankAccNo"
  160. placeholder="Bank Account No" minlength="8" maxlength="17" pattern="[0-9]"
  161. required>
  162. </div>
  163. </div>
  164. <div class="col-md-4">
  165. <div class="form-group">
  166. <label for="ddNumber">Demand Draft Number:</label>
  167. <input type="number" class="form-control" id="ddNumber" name="ddNumber"
  168. placeholder="DD No" minlength="6" maxlength="10" pattern="[0-9]" required>
  169. </div>
  170. </div>
  171. <div class="col-md-4">
  172. <div class="form-group">
  173. <label for="totalamount">Total Amount:</label>
  174. <input type="number" class="form-control" id="totalamount" name="totalamount"
  175. readonly>
  176. </div>
  177. </div>
  178. <div class="col-4">
  179. <div class="form-group">
  180. <lable for="amountReceived">Cheque Amount:</lable>
  181. <input type="number" class="form-control" id="amountReceived"
  182. name="amountReceived" required="required" pattern="[0-9]">
  183. </div>
  184. </div>
  185. <div class="col-md-4">
  186. <input type="hidden" id="bookingId" name="bookingId">
  187. </div>
  188. <div class="row">
  189. <div class="col">
  190. <p class="p1 text-center"><strong>DOCUMENTS DETAILS</strong></p>
  191. </div>
  192. </div>
  193. <div class="row" id="photoInputs">
  194. <div class="col-md-8">
  195. <div class="form-group">
  196. <label for="counterddphoto" style="color:red;">Photo 1: Only (.JPEG, .JPG,
  197. .PDF)
  198. then uploading File size should not exceed above 1mb</label>
  199. <input type="file" class="form-control dd-image" id="counterddphoto"
  200. name="counterddphoto" accept="image/jpeg, image/jpg, image/pdf"
  201. required>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <div class="block-content block-content-full text-end bg-body" id="mbutton">
  208. <button type="button" class="btn btn-sm btn-alt-secondary"
  209. data-bs-dismiss="modal">Close</button>
  210. <button type="submit" class="btn btn-sm btn-primary">Submit</button>
  211. </div>
  212. </form>
  213. </div>
  214. </div>
  215. </div>
  216. <!-- Modal -->
  217. <div class="modal fade backdrop" id="refundcounterModal" data-backdrop="static" tabindex="-1" role="dialog"
  218. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  219. <div class="modal-dialog modal-lg" role="document">
  220. <div class="modal-content">
  221. <form id="docsform" enctype="multipart/form-data">
  222. <input type="hidden" id="counterId" name="counterId" />
  223. <div class="block block-rounded block-themed block-transparent mb-0">
  224. <div class="block-header bg-primary-dark">
  225. <h3 class="block-title" id="mtitle">Upload Documents</h3>
  226. <div class="block-options">
  227. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  228. aria-label="Close">
  229. <i class="fa fa-fw fa-times"></i>
  230. </button>
  231. </div>
  232. </div>
  233. <div class="block-content row">
  234. <div class="col-md-6">
  235. <div class="form-group">
  236. <label for="photo1">Upload Letter : Only .JPEG, .JPG, .PDF </label>
  237. <input type="file" class="form-control" id="photo1" name="uploadLetter"
  238. accept="image/jpeg, image/jpg, application/pdf" required>
  239. <small class="text-danger file-size-message"></small>
  240. </div>
  241. </div>
  242. <div class="col-md-6">
  243. <div class="form-group">
  244. <label for="reason">Reason for Cancelling</label>
  245. <input type="text" class="form-control" id="reason" name="reason" required>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250. <div class="block-content block-content-full text-end bg-body" id="mbutton">
  251. <button type="button" class="btn btn-danger" onclick="reset()">Reset</button>
  252. <button type="button" class="btn btn-sm btn-alt-secondary"
  253. data-bs-dismiss="modal">Close</button>
  254. <button type="submit" class="btn btn-sm btn-primary">Submit</button>
  255. </div>
  256. </form>
  257. </div>
  258. </div>
  259. </div>
  260. <!--showBookingDetails-->
  261. <div class="modal fade backdrop" id="showBookingDetails" data-backdrop="static" tabindex="-1" role="dialog"
  262. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  263. <div class="modal-dialog modal-lg" role="document">
  264. <div class="modal-content" id="printableContent">
  265. <form id="regform" onsubmit="return rejectsubmit();">
  266. <div class="block block-rounded block-themed block-transparent mb-0">
  267. <div class="block-header bg-primary-dark">
  268. <h3 class="block-title" id="2mtitle">Booking
  269. Information</h3>
  270. <div class="block-options">
  271. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  272. aria-label="Close">
  273. <i class="fa fa-fw fa-times"></i>
  274. </button>
  275. </div>
  276. </div>
  277. <div class="block-content row" style="margin: 0px;">
  278. <div class="col-md-12 col-lg-12 col-sm-12" style="margin: 0px;">
  279. <table>
  280. <tr>
  281. <th colspan="4" style="background-color: #f2f2f2; color: red;"><b>User
  282. Details</b></th>
  283. </tr>
  284. <tr>
  285. <th style="padding: 0.45rem 0.45rem;">Name:</th>
  286. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="name"></td>
  287. </tr>
  288. <tr>
  289. <th style="padding: 0.45rem 0.45rem;">Mobile
  290. Number:</th>
  291. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="mobileno">
  292. </td>
  293. </tr>
  294. <tr>
  295. <th style="padding: 0.45rem 0.45rem;">Email:</th>
  296. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="email"></td>
  297. </tr>
  298. <tr>
  299. <th style="padding: 0.45rem 0.45rem;">User type:
  300. </th>
  301. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="usertype">
  302. </td>
  303. </tr>
  304. <tr>
  305. <th style="padding: 0.45rem 0.45rem;">User Address:</th>
  306. <td class="fw-semibold" style="text-wrap: pretty; padding: 0.45rem 0.45rem;"
  307. id="userAddress"></td>
  308. </tr>
  309. </table>
  310. </div>
  311. <div class="col-md-12 col-lg-12 col-sm-12">
  312. <input type="hidden" class="form-control text-center" name="bookingid"
  313. id="bookingid" disabled />
  314. <table>
  315. <tr>
  316. <th colspan="4" style="background-color: #f2f2f2; color: red;"><b>Booking
  317. Details</b></th>
  318. </tr>
  319. <tr>
  320. <th style="padding: 0.45rem 0.45rem;">No of Days
  321. Booked:</th>
  322. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="noofdays">
  323. </td>
  324. <th style="padding: 0.45rem 0.45rem;">Booking
  325. Reason:</th>
  326. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  327. id="reasonforbooking"></td>
  328. </tr>
  329. <tr>
  330. <th style="padding: 0.45rem 0.45rem;">Booking
  331. Deposit Amount:</th>
  332. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  333. id="depositeamount">
  334. </td>
  335. <th style="padding: 0.45rem 0.45rem;">Hall
  336. Amount:</th>
  337. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="hallamount">
  338. </td>
  339. </tr>
  340. <tr>
  341. <th style="padding: 0.45rem 0.45rem;">Amount
  342. Received:</th>
  343. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  344. id="amountreceived">
  345. </td>
  346. <th style="padding: 0.45rem 0.45rem;">Booking
  347. Status:</th>
  348. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  349. id="bookingstatus">
  350. </td>
  351. </tr>
  352. <tr>
  353. <th style="padding: 0.45rem 0.45rem;">Start Date:
  354. </th>
  355. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="startingdate">
  356. </td>
  357. <th style="padding: 0.45rem 0.45rem;">End Date:</th>
  358. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="endingdate">
  359. </td>
  360. </tr>
  361. <tr>
  362. <th style="padding: 0.45rem 0.45rem;">Starting slot:</th>
  363. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="startingslot">
  364. </td>
  365. <th style="padding: 0.45rem 0.45rem;">Ending slot:</th>
  366. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="endingslot">
  367. </td>
  368. </tr>
  369. </table>
  370. </div>
  371. <div class="col-md-12 col-lg-12 col-sm-12" id="paymentsdetails" style="display:none">
  372. <table>
  373. <tr>
  374. <th colspan="4" style="background-color: #f2f2f2; color: red;"><b>Payment
  375. Details</b></th>
  376. </tr>
  377. <tr>
  378. <th style="padding: 0.45rem 0.45rem;">
  379. Bank Name:</th>
  380. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="banknames">
  381. </td>
  382. </tr>
  383. <tr>
  384. <th style="padding: 0.45rem 0.45rem;">Bant Account Number:</th>
  385. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  386. id="bankaccountNumber"></td>
  387. </tr>
  388. <tr>
  389. <th style="padding: 0.45rem 0.45rem;">DD
  390. Number:</th>
  391. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="ddnumbers">
  392. </td>
  393. </tr>
  394. <tr>
  395. <th style="padding: 0.45rem 0.45rem;">Amount
  396. Received:</th>
  397. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  398. id="ddamountReceived">
  399. </td>
  400. </tr>
  401. </table>
  402. </div>
  403. <div class="col-md-12 col-lg-12 col-sm-12">
  404. <table>
  405. <tr>
  406. <th colspan="4" style="background-color: #f2f2f2; color: red;"><b>Hall
  407. Details</b></th>
  408. </tr>
  409. <tr>
  410. <th style="padding: 0.45rem 0.45rem;">Hall
  411. Details:</th>
  412. <td class="fw-semibold" style="text-wrap: pretty; padding: 0.45rem 0.45rem;"
  413. id="hallname"></td>
  414. </tr>
  415. <tr>
  416. <th style="padding: 0.45rem 0.45rem;">CareTaker
  417. Name:</th>
  418. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  419. id="hallInchargeName"></td>
  420. </tr>
  421. <tr>
  422. <th style="padding: 0.45rem 0.45rem;">CareTaker
  423. PhoneNo:</th>
  424. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  425. id="hallInchargeMobno"></td>
  426. </tr>
  427. </table>
  428. </div>
  429. </div>
  430. <div class="block-content block-content-full text-end bg-body" id="mbutton">
  431. <button class="btn btn-success" onclick="printTables()"
  432. style="background: #FB6340;">Print</button>
  433. <button type="button" style="background-color: rgb(21, 69, 93); color: white;"
  434. class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
  435. </div>
  436. </div>
  437. </form>
  438. </div>
  439. </div>
  440. </div>
  441. <!--OTP Form-->
  442. <div class="modal fade" id="otpForm" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel"
  443. aria-hidden="true">
  444. <div class="modal-dialog" role="document">
  445. <div class="modal-content">
  446. <form action="#" th:action="@{/otpForm}" th:object="${otpForm}" method="post"
  447. onsubmit="return verifyOtp(); ">
  448. <div class="modal-header">
  449. <h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP Login</h6>
  450. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
  451. style="color:black;border: white;background-color: white;">
  452. <span aria-hidden="true">&times;</span></button>
  453. </div><!--end modal-header-->
  454. <div class="modal-body">
  455. <div class="row">
  456. <div class="mb-3 text-center">
  457. <img src="media/images/mobileotp.png" width="50%" alt="Mobileotp">
  458. </div>
  459. <div class="mb-0 text-center">
  460. <h4>OTP Verification</h4>
  461. <p class="text-mute">Enter the OTP sent to <b class="text-info"
  462. id="mobilenotxt"></b>
  463. </p>
  464. <p class="text-danger" id="otperror"></p>
  465. </div>
  466. <div class="mb-3 text-center">
  467. <div class="otp-input-box">
  468. <input type="text" maxlength="1" class="otp-input" id="otp1" required />
  469. <input type="text" maxlength="1" class="otp-input" id="otp2" required />
  470. <input type="text" maxlength="1" class="otp-input" id="otp3" required />
  471. <input type="text" maxlength="1" class="otp-input" id="otp4" required />
  472. <input type="text" maxlength="1" class="otp-input" id="otp5" required />
  473. </div>
  474. </div>
  475. <div class="mb-3 text-center">
  476. <div id="resend-containers">
  477. <p class="mb-0">Didn't receive OTP?</p>
  478. <p class="mb-0 text-info" id="resendlink"></p>
  479. </div>
  480. </div>
  481. </div><!--end row-->
  482. </div><!--end modal-body-->
  483. <div class="modal-footer">
  484. <button type="button" class="btn btn-de-secondary btn-sm"
  485. data-bs-dismiss="modal">Close</button>
  486. <button type="submit" class="btn btn-primary btn-sm" id="but">Verify OTP</button>
  487. </div><!--end modal-footer-->
  488. </form>
  489. </div><!--end modal-content-->
  490. </div><!--end modal-dialog-->
  491. </div>
  492. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  493. <!-- END Footer -->
  494. </div>
  495. <!-- END Page Container -->
  496. <script th:replace="~{fragments/loginscript :: script}"></script>
  497. <script type="text/javascript">
  498. // Define the buttons for exporting data
  499. $(document).ready(
  500. function () {
  501. var buttons = [{
  502. extend: 'pageLength',
  503. className: 'btn btn-primary'
  504. }, {
  505. title: 'Data export',
  506. extend: 'copyHtml5',
  507. text: 'Copy',
  508. className: 'btn btn-primary',
  509. id: 'copyBtn'
  510. }, {
  511. extend: 'excelHtml5',
  512. text: 'Excel',
  513. className: 'btn btn-primary',
  514. id: 'excelBtn'
  515. }, {
  516. extend: 'csvHtml5',
  517. text: 'CSV',
  518. className: 'btn btn-primary',
  519. id: 'csvBtn'
  520. }, {
  521. extend: 'pdfHtml5',
  522. text: 'PDF',
  523. className: 'btn btn-primary',
  524. id: 'pdfBtn'
  525. },
  526. ];
  527. $('#BookingdetailsList').DataTable(
  528. {
  529. dom: 'Bftip',
  530. columnDefs: [{
  531. targets: 'no-sort',
  532. orderable: false
  533. }],
  534. lengthMenu: [
  535. [50, 100, 200, 500, -1],
  536. ['50 rows', '100 rows', '200 rows',
  537. '500 rows', 'Show all']],
  538. scrollY: '50vh',
  539. fixedColumns: {
  540. left: 1,
  541. right: 1
  542. },
  543. buttons: [buttons],
  544. responsive: true,
  545. searching: true, // Enable search
  546. select: false,
  547. processing: false,
  548. });
  549. // Link the search input to DataTable
  550. $('#searchInput').on('keyup', function () {
  551. dataTable.search(this.value).draw();
  552. });
  553. });
  554. //function to get the slot value
  555. function getTimeSlot(slotValue) {
  556. // console.log("Slot Value in getTimeSlot function:", slotValue);
  557. var timeSlot;
  558. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  559. if (trimmedSlotValue === '1') {
  560. timeSlot = 'Morning';
  561. } else if (trimmedSlotValue === '2') {
  562. timeSlot = 'Evening';
  563. } else {
  564. timeSlot = 'Unknown';
  565. }
  566. // console.log("Time Slot:", timeSlot);
  567. return timeSlot;
  568. }
  569. //Perform an ajax call to view booking details with the booking id
  570. function showBookingDetails(bookingId) {
  571. $.ajax({
  572. url: '/victoriahallbooking/user/api/viewAllBookingDetails',
  573. method: 'GET',
  574. data: {bookingId: bookingId},
  575. success: function (response) {
  576. // console.log("response=", response);
  577. document.getElementById("name").innerHTML = response.users.name;
  578. document.getElementById("mobileno").innerHTML = response.users.mobileNo;
  579. document.getElementById("email").innerHTML = response.users.email;
  580. document.getElementById("usertype").innerHTML = response.users.usertype;
  581. var userDetailsAddress = "Street:-" + response.users.street +
  582. " Area:-" + response.users.area +
  583. " Location:-" + response.users.location +
  584. " Pincode:-" + response.users.pinCode;
  585. document.getElementById("userAddress").innerHTML = userDetailsAddress
  586. document.getElementById("noofdays").innerHTML = response.noOfDays;
  587. document.getElementById("reasonforbooking").innerHTML = response.reason;
  588. document.getElementById("depositeamount").innerHTML = response.depositAmount;
  589. document.getElementById("hallamount").innerHTML = response.hallAmount;
  590. document.getElementById("amountreceived").innerHTML = response.amountReceived;
  591. document.getElementById("bookingstatus").innerHTML = response.bookingStatus;
  592. document.getElementById("startingdate").innerHTML = response.startDate;
  593. document.getElementById("endingdate").innerHTML = response.endDate;
  594. document.getElementById("startingslot").innerHTML = getTimeSlot(response.startingSlot);
  595. document.getElementById("endingslot").innerHTML = getTimeSlot(response.endingSlot);
  596. var hallDetailsString = "Hall Name: " + response.hallDetails.hallName +
  597. "Door No: " + response.hallDetails.doorNo +
  598. "Street: " + response.hallDetails.street +
  599. "<br>" + // Add an extra <br> to break the line after "Street"
  600. "Area: " + response.hallDetails.area +
  601. "Zone: " + response.hallDetails.zone +
  602. "Division: " + response.hallDetails.division;
  603. document.getElementById("hallname").innerHTML = hallDetailsString;
  604. document.getElementById("hallInchargeName").innerHTML = response.hallDetails.hallInchargeName;
  605. document.getElementById("hallInchargeMobno").innerHTML = response.hallDetails.hallInchargeMobno;
  606. if (response.counterDetails) {
  607. document.getElementById("paymentsdetails").style.display = "block";
  608. document.getElementById("banknames").innerHTML = response.counterDetails.bankName;
  609. document.getElementById("bankaccountNumber").innerHTML = response.counterDetails.bankAccNo;
  610. document.getElementById("ddnumbers").innerHTML = response.counterDetails.ddNumber;
  611. document.getElementById("ddamountReceived").innerHTML = response.counterDetails.amountReceived;
  612. }
  613. // Show the modal
  614. $('#showBookingDetails').modal('show');
  615. },
  616. error: function () {
  617. }
  618. });
  619. }
  620. //function to take print
  621. function printTables() {
  622. // Get the printable content
  623. var printableContent = document.getElementById('printableContent').innerHTML;
  624. // Open a print window
  625. var printWindow = window.open('', '', 'height=400,width=600');
  626. // Write the printable content to the print window
  627. printWindow.document.write('<html><head><title>Print</title></head><body>' + printableContent + '</body></html>');
  628. // Close the print window after printing
  629. printWindow.document.close();
  630. printWindow.print();
  631. printWindow.close();
  632. }
  633. // Function to cancel the booking
  634. function cancelBooking(booking, mobileNo, bookingType) {
  635. var bookingId = booking;
  636. var mobileNum = mobileNo;
  637. // console.log("mobileNumber", mobileNum);
  638. // console.log("bookingId", bookingId);
  639. // Check if the booking type is OFFLINE
  640. if (bookingType === "ONLINE") {
  641. Swal.fire({
  642. title: 'Cancellation Not Available',
  643. text: 'Cancellation is not available for online bookings.',
  644. icon: 'error'
  645. });
  646. } else {
  647. Swal.fire({
  648. title: 'Are you sure?',
  649. text: 'Once canceled, you cannot undo this action!',
  650. icon: 'warning',
  651. showCancelButton: true,
  652. confirmButtonColor: '#3085d6',
  653. cancelButtonColor: '#d33',
  654. confirmButtonText: 'Yes, cancel it!'
  655. }).then((result) => {
  656. if (result.isConfirmed) {
  657. // If user confirms, show OTP form
  658. mobileNumberForCancel = mobileNum;
  659. cancelBookingId = bookingId;
  660. cancelBookingLogin = true;
  661. sendOTP(mobileNum);
  662. }
  663. });
  664. }
  665. }
  666. $('.otp-input').on('keyup', function (e) {
  667. var $this = $(this);
  668. if ($this.val().length === 1) {
  669. $this.next('.otp-input').focus();
  670. }
  671. if ($this.val().length === 0) {
  672. $this.prev('.otp-input').focus();
  673. }
  674. });
  675. // Function to send OTP
  676. function sendOTP(mobileNum) {
  677. if (mobileNum != "" || mobileNum != undefined || mobileNum != null) {
  678. mobileNo = mobileNum;
  679. $("#mobilenotxt").html(mobileNo);
  680. $.ajax({
  681. type: "GET",
  682. url: '/victoriahallbooking/user/api/sendOTP',
  683. data: {'mobileNo': mobileNo, 'purpose': 'New User'},
  684. success: function (bodyMessage) {
  685. if (bodyMessage != "Error") {
  686. $('#otpForm').modal({
  687. backdrop: 'static',
  688. keyboard: false
  689. });
  690. $('#otpForm').modal('show');
  691. // Resend OTP Link function
  692. var resendTimeout;
  693. $("#resendlink").html('Please wait..<span id="countdown">60</span>s');
  694. var countdown = $("#countdown");
  695. // Function to start the countdown timer
  696. function startCountdown() {
  697. var timeleft = 60;
  698. countdown.text(timeleft);
  699. resendTimeout = setInterval(function () {
  700. timeleft--;
  701. countdown.text(timeleft);
  702. if (timeleft <= 0) {
  703. clearInterval(resendTimeout);
  704. $("#resendlink").html('<a href="#" id="resend-link" class="text-info" onclick="return sendOTP(mobileNo);">Resend OTP</a>');
  705. }
  706. }, 1000);
  707. }
  708. startCountdown(); // Start Resend OTP count
  709. } else {
  710. alert("OTP Not Send!!!");
  711. }
  712. }
  713. });
  714. } else {
  715. mobileNo = $("#mobileNumber").val(); // Assuming mobile number input field has ID "mobileNumber"
  716. $("#mobile").val(mobileNo); // Set final mobile number after request otp
  717. $.ajax({
  718. type: "GET",
  719. url: '/victoriahallbooking/user/api/sendOTP',
  720. data: {'mobileNo': mobileNo, 'purpose': 'New User'},
  721. dataType: 'json',
  722. success: function (bodyMessage) {
  723. return false;
  724. }
  725. });
  726. }
  727. return false;
  728. }
  729. function verifyOtp() {
  730. // console.log("cancel booking hhjjjh" + cancelBookingLogin);
  731. var otpInputs = $('.otp-input');
  732. var otpValue = '';
  733. otpInputs.each(function () {
  734. otpValue += $(this).val();
  735. });
  736. var mobileNoValue = 0;
  737. if (cancelBookingLogin) {
  738. mobileNoValue = mobileNumberForCancel;
  739. bookingId = cancelBookingId;
  740. } else {
  741. mobileNoValue = $("#mobileNumber").val(); // Add your logic to get the mobile number value here
  742. }
  743. $.ajax({
  744. type: "GET",
  745. url: '/victoriahallbooking/user/api/verifyOTP',
  746. data: {
  747. 'otp': otpValue,
  748. 'mobileNo': mobileNoValue
  749. },
  750. dataType: 'text',
  751. success: function (bodyMessage) {
  752. if (bodyMessage.trim() == "Success") {
  753. // console.log("OTP is Verified!!!");
  754. $('#otpForm').modal('hide'); // Hide OTP form modal
  755. $.ajax({
  756. type: "GET",
  757. url: '/victoriahallbooking/user/api/cancelBookingbyId',
  758. data: {
  759. bookingId: bookingId,
  760. status: 'CANCELED',
  761. comments: 'user cancelled'
  762. },
  763. success: function (response) {
  764. // console.log(response);
  765. if (response.trim() === "success") {
  766. Swal.fire(
  767. 'Cancelled!',
  768. 'Your booking has been cancelled.',
  769. 'success'
  770. ).then((result) => {
  771. if (result.isConfirmed) {
  772. location.reload();
  773. }
  774. });
  775. }
  776. else {
  777. Swal.fire(
  778. 'Error!',
  779. 'Contact Admin for cancelling.',
  780. 'error'
  781. );
  782. }
  783. },
  784. error: function () {
  785. Swal.fire(
  786. 'Error!',
  787. 'An error occurred while cancelling the booking. Please try again.',
  788. 'error'
  789. );
  790. }
  791. });
  792. // Enable the "Select Hall" button upon successful OTP verification
  793. $('#selectHallButton').prop('disabled', false); // Change to false to enable
  794. } else {
  795. $("#otperror").html("OTP is Incorrect!!!");
  796. }
  797. },
  798. error: function () {
  799. // console.log("Error verifying OTP");
  800. }
  801. });
  802. return false;
  803. }
  804. function newPinCall() {
  805. $('#otpForm').modal({
  806. backdrop: 'static',
  807. keyboard: false
  808. });
  809. $('#otpForm').modal('hide');
  810. return false;
  811. }
  812. $("#sendOTPButton").click(function (event) {
  813. event.preventDefault();
  814. checkMobileNo(); // Call the checkMobileNo() function first
  815. });
  816. //handling the submission form to save a cancellation
  817. $(document).ready(function () {
  818. $('#docsform').on('submit', function (event) {
  819. event.preventDefault(); // Prevent default form submission
  820. var formData = new FormData(this);
  821. var counterId = $('#counterId').val();
  822. // console.log("counterId: " + counterId);
  823. $.ajax({
  824. url: '/victoriahallbooking/user/api/saveCancellation',
  825. type: 'POST',
  826. data: formData,
  827. processData: false,
  828. contentType: false,
  829. success: function (response) {
  830. Swal.fire(
  831. 'Cancelled!',
  832. 'Your booking has been cancelled.',
  833. 'success'
  834. ).then((result) => {
  835. if (result.isConfirmed) {
  836. location.reload(); // Reload the page
  837. }
  838. });
  839. $('#refundcounterModal').modal('hide');
  840. $('#docsform')[0].reset();
  841. },
  842. error: function (response) {
  843. Swal.fire(
  844. 'Error!',
  845. 'There was an error cancelling your booking.',
  846. 'error'
  847. );
  848. }
  849. });
  850. });
  851. });
  852. function openDDForm(bookingId) {
  853. // Set the booking ID in the hidden input field
  854. document.getElementById('bookingId').value = bookingId;
  855. $.ajax({
  856. url: '/victoriahallbooking/user/api/viewAllBookingDetails',
  857. type: 'GET',
  858. data: {bookingId: bookingId},
  859. success: function (response) {
  860. $('#ddDetailsModal').modal('show');
  861. $('#totalamount').val(response.amountReceived); // Adjust according to your response structure
  862. },
  863. error: function (error) {
  864. // console.log("Error fetching booking details: ", error);
  865. }
  866. });
  867. }
  868. //function for submit the form
  869. function submitForm() {
  870. var bookingId = $('#ddform #bookingId').val();
  871. if (!bookingId) {
  872. alert("Booking ID is missing!");
  873. return false;
  874. }
  875. // console.log("Submitting form with bookingId=", bookingId);
  876. return true;
  877. }
  878. </script>
  879. </body>
  880. </html>