kanimozhi
/
communityhallv22
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
4 Commits
1 Branch
0 Tags
244 MiB
Tree: 50e6b8813e
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '50e6b8813e'
${ noResults }
communityhallv22/src/main/resources/templates/user/viewhallform.html

1676 lines
56 KiB
Raw Normal View History

first
2 years ago
​
​
​
​
​
Enhancement added and Bugs fixed
2 years ago
​
​
​
first
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Enhancement added and Bugs fixed
2 years ago
​
​
​
​
​
​
​
​
​
​
first
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Server Date, Amount mismatch and Unique Id duplicate entry refund, unpkg source moved to local
2 years ago
first
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Enhancement added and Bugs fixed
2 years ago
first
2 years ago
​
​
​
Enhancement added and Bugs fixed
2 years ago
first
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Enhancement added and Bugs fixed
2 years ago
first
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Enhancement added and Bugs fixed
2 years ago
first
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Enhancement added and Bugs fixed
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first
2 years ago
​
​
Enhancement added and Bugs fixed
2 years ago
first
2 years ago
Enhancement added and Bugs fixed
2 years ago
Server Date, Amount mismatch and Unique Id duplicate entry refund, unpkg source moved to local
2 years ago
​
​
​
​
​
​
Enhancement added and Bugs fixed
2 years ago
first
2 years ago
​
Server Date, Amount mismatch and Unique Id duplicate entry refund, unpkg source moved to local
2 years ago
​
first
2 years ago
Enhancement added and Bugs fixed
2 years ago
​
first
2 years ago
Server Date, Amount mismatch and Unique Id duplicate entry refund, unpkg source moved to local
2 years ago
​
Enhancement added and Bugs fixed
2 years ago
first
2 years ago
Enhancement added and Bugs fixed
2 years ago
Server Date, Amount mismatch and Unique Id duplicate entry refund, unpkg source moved to local
2 years ago
first
2 years ago
​
​
Server Date, Amount mismatch and Unique Id duplicate entry refund, unpkg source moved to local
2 years ago
Enhancement added and Bugs fixed
2 years ago
​
​
​
​
Server Date, Amount mismatch and Unique Id duplicate entry refund, unpkg source moved to local
2 years ago
​
​
Enhancement added and Bugs fixed
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first
2 years ago
​
​
Enhancement added and Bugs fixed
2 years ago
first
2 years ago
​
​
Enhancement added and Bugs fixed
2 years ago
​
first
2 years ago
​
​
Enhancement added and Bugs fixed
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Server Date, Amount mismatch and Unique Id duplicate entry refund, unpkg source moved to local
2 years ago
Enhancement added and Bugs fixed
2 years ago
Server Date, Amount mismatch and Unique Id duplicate entry refund, unpkg source moved to local
2 years ago
Enhancement added and Bugs fixed
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  3. <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
  5. <head th:replace="~{fragments/head :: head}"></head>
  6. <script src="https://cdn.jsdelivr.net/npm/compressorjs@5.0.3/dist/compressor.js"></script>
  8. <script src="https://cdn.jsdelivr.net/npm/sockjs-client"></script>
  9. <!--<script src="https://cdn.jsdelivr.net/npm/stompjs"></script>-->
  10. <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
  11. <style>
  12. .table-align {
  13. width: 100%;
  14. }
  16. .td-align {
  17. padding: 8px;
  18. border: 1px solid #ddd;
  19. }
  21. @media (max-width: 600px) {
  22. .td-align {
  23. display: block;
  24. width: 100%;
  25. box-sizing: border-box;
  26. }
  27. }
  29. .center-table {
  30. justify-content: center;
  31. align-items: center;
  32. }
  34. .highlight-blue .ui-state-default {
  35. background: blue !important;
  36. color: #FFF !important;
  37. }
  39. .highlight-greens .ui-state-default {
  40. background: green !important;
  41. color: #FFF !important;
  42. }
  44. .highlight-yellow .ui-state-default {
  45. background: yellow !important;
  46. color: #000 !important;
  47. }
  49. .highlight-violet .ui-state-default {
  50. background: #a93da9 !important;
  51. color: #000 !important;
  52. }
  54. .highlight-pink .ui-state-default {
  55. background: red !important;
  56. color: #000 !important;
  57. }
  59. .highlight-lightpink .ui-state-default {
  60. background: lightpink !important;
  61. color: #FFF !important;
  62. }
  64. .btn-square-md {
  65. width: 16px !important;
  66. max-width: 100% !important;
  67. max-height: 50% !important;
  68. height: 30px !important;
  69. text-align: center;
  70. padding: 0px;
  71. font-size: 2px;
  72. }
  74. .disabled {
  75. pointer-events: none;
  76. opacity: 1;
  77. /* Example: reduce opacity to indicate disabled state */
  78. }
  80. .ui-datepicker {
  81. width: 100%;
  82. background-color: #333;
  83. }
  85. .ui-datepicker-header {
  86. background-color: #f0f0f0;
  87. /* Light gray background for header */
  88. border: none;
  89. border-radius: 5px 5px 0 0;
  90. }
  92. .ui-datepicker-title {
  93. font-size: 1.2em;
  94. margin: 0;
  95. padding: 10px;
  96. text-align: center;
  97. }
  99. .ui-datepicker-calendar {
  100. margin: 0;
  101. padding: 0;
  102. color: white;
  103. /* Text color for dates */
  104. font-weight: bold;
  105. /* Bold font for dates */
  106. }
  108. .ui-datepicker-calendar th,
  109. .ui-datepicker-calendar td {
  110. text-align: center;
  111. }
  113. .ui-datepicker-week-end {
  114. color: yellow;
  115. font-weight: bold;
  116. }
  118. /* Style for the label */
  119. .date-label {
  120. display: block;
  121. margin-bottom: 6px;
  122. font-weight: bold;
  123. }
  125. .highlight-current-date a {
  126. background-color: green;
  127. /* Current date highlight color */
  128. color: white;
  129. }
  132. .highlight-greens a {
  133. background-color: green;
  134. color: white;
  135. }
  137. .highlight-blue a {
  138. background-color: blue;
  139. color: white;
  141. }
  143. .highlight-yellow a {
  144. background-color: yellow;
  145. color: black;
  146. /* Change text color for visibility */
  147. }
  149. .highlight-pink a,
  150. input[type=button]:disabled {
  151. background-color: pink;
  152. /* Pink highlight for disabled or booked dates */
  153. color: white;
  154. }
  156. .highlight-lightpink a,
  157. input[type=button]:disabled {
  158. background-color: lightpink;
  159. color: white;
  161. }
  163. .highlight-orange a {
  164. background-color: orange;
  165. /* Orange highlight color */
  166. color: white;
  167. }
  169. input[type=button]:disabled {
  170. background: red;
  171. }
  173. .hidden {
  174. display: none;
  175. }
  177. #selecthall.select2-container--default .select2-selection--single {
  178. height: 35px;
  179. border: 1px solid #ddd;
  180. padding-left: 10px;
  181. }
  183. .select2-container--default .select2-selection--single .select2-selection__rendered {
  184. color: #444;
  185. line-height: 28px;
  186. margin-top: -8px;
  187. }
  189. #hallDetailsContainer {
  190. display: flex;
  191. flex-direction: column;
  192. align-items: center;
  193. /* Center items horizontally */
  194. justify-content: center;
  195. /* Center items vertically */
  196. border: 1px solid #ccc;
  197. border-radius: 5px;
  198. padding: 20px;
  199. margin-top: 20px;
  200. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  201. background-color: #fff;
  202. }
  204. /* Style for the image */
  205. #hallImagesCarousel {
  206. margin-bottom: 20px;
  207. }
  209. .row {
  210. display: flex;
  211. flex-wrap: wrap;
  212. margin-right: 0px;
  213. margin-left: 0px;
  214. }
  216. .col-md-6 {
  217. width: 50%;
  218. padding: 0 10px;
  219. /* Optional: Add padding to columns */
  220. }
  222. @media (max-width: 768px) {
  223. .col-md-6 {
  224. width: 100%;
  225. /* Full width on smaller screens */
  226. }
  227. }
  229. #hallDetailsContainer p {
  230. margin: 0;
  231. padding: 5px 0;
  232. }
  234. #hallDetailsContainer p:nth-child(even) {
  235. background-color: #f9f9f9;
  236. }
  238. /* CSS styles for the amount details container */
  239. #amountDetailsContainer {
  240. border: 1px solid #ccc;
  241. border-radius: 5px;
  242. padding: 20px;
  243. margin-top: 20px;
  244. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  245. background-color: #fff;
  246. }
  248. #amountDetailsContainer h4 {
  249. margin-top: 0;
  250. margin-bottom: 10px;
  251. }
  253. #amountDetailsContainer div {
  254. list-style: none;
  255. padding: 0;
  256. }
  258. #amountDetailsContainer p {
  259. margin-bottom: 10px;
  260. }
  262. #amountDetailsContainer p span {
  263. font-weight: bold;
  264. }
  266. #amountDetailsContainer p:nth-child(even) {
  267. background-color: #f9f9f9;
  268. }
  270. /* Style for the image container */
  271. #hallImagesCarousel {
  272. display: flex;
  273. justify-content: center;
  274. /* Center content horizontally */
  275. align-items: center;
  276. /* Center content vertically */
  277. margin-bottom: 20px;
  278. position: relative;
  279. }
  281. /* Style for the images inside the carousel */
  282. .carousel-item img {
  283. max-width: 100%;
  284. /* Ensure image does not exceed container width */
  285. min-height: 9%;
  286. /* Maintain aspect ratio */
  287. display: block;
  288. /* Ensure image is block-level element */
  289. max-width: 100%;
  290. max-height: 100%;
  291. display: block;
  292. margin: 0 auto;
  293. /* Center the image horizontally */
  294. }
  296. .content-container {
  297. padding: 20px;
  298. }
  300. .otp-input {
  301. width: 30px;
  302. height: 30px;
  303. border: 1px solid #ccc;
  304. border-radius: 5px;
  305. text-align: center;
  306. font-size: 16px;
  307. margin-right: 10px;
  308. }
  310. /* Ensures content within these classes is centered */
  311. .modal-header,
  312. .modal-body,
  313. .modal-footer,
  314. #resend-container {
  315. text-align: center;
  316. }
  318. /* Center content with Flexbox if needed */
  319. .center-flex {
  320. display: flex;
  321. justify-content: center;
  322. align-items: center;
  323. flex-direction: column;
  324. /* Stack elements vertically */
  325. }
  327. /* Adjust the margin of the otp-input-box for better alignment */
  328. .otp-input-box {
  329. justify-content: center;
  330. margin: 0 auto;
  331. /* Centers the box horizontally */
  332. align-items: center;
  333. /* Align items in the center for flex containers */
  334. width: 100%;
  335. }
  337. .center-content {
  338. display: flex;
  339. justify-content: center;
  340. align-items: center;
  341. height: 100%;
  342. /* Or set a specific height */
  343. flex-direction: column;
  344. /* Stack children vertically */
  345. }
  347. /* To ensure the form takes up the necessary width */
  348. .form-group {
  349. width: 100%;
  350. /* Adjust based on your layout's needs */
  351. }
  353. /* Custom styles for the jQuery UI Dialog */
  354. .custom-dialog .ui-dialog-content {
  355. background-color: #fff;
  356. color: #333;
  357. padding: 20px;
  358. }
  360. .custom-dialog .ui-dialog-titlebar {
  361. background: #007bff;
  362. color: #ffffff;
  363. }
  365. .custom-dialog .ui-dialog-buttonpane {
  366. background-color: #f1f1f1;
  367. }
  369. .custom-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
  370. background-color: #007bff;
  371. color: #ffffff;
  372. border-color: #007bff;
  373. }
  375. .custom-dialog a {
  376. color: #007bff;
  377. text-decoration: none;
  378. }
  380. .custom-dialog a:hover {
  381. text-decoration: underline;
  382. }
  384. table {
  385. width: 100%;
  386. border-collapse: collapse;
  387. }
  389. th,
  390. td {
  391. border: 1px solid black;
  392. padding: 8px;
  393. text-align: center;
  394. }
  396. .date-box {
  397. border: 1px solid #ccc;
  398. padding: 10px;
  399. margin: 5px;
  400. text-align: center;
  401. background-color: #f8f9fa;
  402. border-radius: 5px;
  403. }
  405. .checkbox-label {
  406. display: block;
  407. margin-top: 5px;
  408. }
  410. #calendar {
  411. margin-top: 20px;
  412. padding: 20px;
  413. border: 1px solid #ccc;
  414. border-radius: 5px;
  415. background-color: #f8f9fa;
  416. }
  418. /* Style for date checkboxes */
  419. .date-checkboxes {
  420. margin-top: 10px;
  421. }
  423. label {
  424. margin-right: 10px;
  425. }
  427. .ui-datepicker-container {
  428. width: 100%
  429. }
  431. .fixedcontainer {
  432. width: 250%;
  433. margin: 40px 0;
  434. }
  436. .ui-widget {
  437. width: 40%
  438. }
  440. .ui-datepicker {
  441. padding: 3px;
  442. border: 1px solid #ccc;
  443. border-radius: 5px;
  444. background-color: white;
  445. left: 29.1418px;
  446. }
  448. .ui-datepicker-header {
  449. background-color: #f0f0f0;
  450. border: none;
  451. border-radius: 5px 5px 0 0;
  452. }
  454. .ui-datepicker-title {
  455. font-size: 1.2em;
  456. margin: 0;
  457. padding: 10px;
  458. text-align: center;
  459. }
  461. .ui-datepicker-calendar {
  462. margin: 0;
  463. padding: 0;
  464. font-weight: bold;
  465. /* Bold font for dates */
  466. }
  468. .ui-datepicker-calendar th,
  469. .ui-datepicker-calendar td {
  470. padding: 5px;
  471. text-align: center;
  472. }
  474. .ui-datepicker-calendar .ui-state-default {
  475. cursor: pointer;
  476. width: 100%;
  477. height: 100%;
  478. display: flex;
  479. justify-content: center;
  480. align-items: center;
  481. }
  483. .ui-datepicker-week-end {
  484. color: black;
  485. font-weight: bold;
  486. }
  488. .ui-datepicker-calendar th span {
  489. color: black;
  490. font-weight: bold;
  491. }
  493. .booking-form-container {
  494. margin: 20px auto;
  495. padding: 20px;
  496. border: 1px solid #ddd;
  497. border-radius: 8px;
  498. background-color: #f9f9f9;
  499. max-width: 960px;
  500. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  501. }
  503. .booking-form-container label {
  504. font-weight: bold;
  505. }
  507. .booking-form-container .form-control {
  508. margin-bottom: 10px;
  509. }
  511. .booking-form-container .btn-primary {
  512. background-color: #017bff;
  513. }
  515. .white-background {
  516. background-color: white;
  517. /* Set the background color as needed */
  518. border: 1px solid #ccc;
  519. /* Optional: Add border for better visualization */
  520. padding: 20px;
  521. margin-bottom: 20px;
  522. overflow: hidden;
  523. /* Hide overflow content during animation */
  524. position: relative;
  525. }
  527. .slide-left {
  528. animation: slideLeft 0.5s ease both;
  529. }
  531. .slide-right {
  532. animation: slideRight 0.5s ease both;
  533. }
  535. @keyframes slideLeft {
  536. 0% {
  537. transform: translateX(0);
  538. }
  540. 100% {
  541. transform: translateX(-100%);
  542. opacity: 0;
  543. }
  544. }
  546. @keyframes slideRight {
  547. 0% {
  548. transform: translateX(-100%);
  549. opacity: 0;
  550. }
  552. 100% {
  553. transform: translateX(0);
  554. opacity: 1;
  555. }
  556. }
  558. /* Apply styles to the booking-section container */
  559. .booking-section {
  560. margin: 20px auto;
  561. padding: 20px;
  562. border: 1px solid #ddd;
  563. border-radius: 8px;
  564. background-color: #f9f9f9;
  565. max-width: 960px;
  566. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  567. }
  569. .booking-section label {
  570. font-weight: bold;
  571. }
  573. .booking-section .form-control {
  574. margin-bottom: 10px;
  575. }
  577. .booking-section .btn-primary {
  578. background-color: #017bff;
  579. }
  581. /* Apply white background to the booking-section */
  582. #reasonforbookingSection {
  583. background-color: #ffffff;
  584. /* White background color */
  585. padding: 20px;
  586. /* Optional: Add padding for spacing */
  587. }
  589. body {
  590. font-family: Arial, sans-serif;
  591. margin: 0;
  592. padding: 0;
  593. }
  595. .progressbar {
  596. display: flex;
  597. margin-bottom: 20px;
  598. }
  600. .progress-step {
  601. width: 100%;
  602. height: 9px;
  603. background-color: #e0e0e0;
  604. /* Light gray background */
  605. border-radius: 10px;
  606. /* Rounded corners */
  607. margin-right: 10px;
  608. }
  610. .progress-step-active {
  611. background-color: #4caf50;
  612. /* Green active step */
  613. color: white;
  614. /* White text color */
  615. font-weight: bold;
  616. /* Bold font for active step */
  617. }
  619. .progress {
  620. width: 100%;
  621. height: 10px;
  622. background-color: #ddd;
  623. position: relative;
  624. }
  626. .progress-step::before {
  627. content: attr(data-title);
  628. display: block;
  629. position: absolute;
  630. top: 20px;
  631. left: 50%;
  632. transform: translateX(-50%);
  633. font-size: 12px;
  634. color: #888;
  635. }
  637. .form {
  638. margin-bottom: 20px;
  639. }
  641. .form-step {
  642. display: none;
  643. margin-bottom: 20px;
  644. }
  646. .form-step-active {
  647. display: block;
  648. }
  650. .btn-prev,
  651. .btn-next {
  652. padding: 10px 20px;
  653. font-size: 14px;
  654. cursor: pointer;
  655. border: none;
  656. background-color: #337ab7;
  657. color: #fff;
  658. }
  660. .btn-prev {
  661. margin-right: 10px;
  662. }
  664. /* Media Query for small screens */
  665. @media (max-width: 768px) {
  666. .progress-step::before {
  667. display: none;
  668. /* Hide step titles on small screens */
  669. }
  670. }
  672. #container {
  673. max-width: 1183px;
  674. }
  676. .step-container {
  677. position: relative;
  678. text-align: center;
  679. transform: translateY(-60%);
  680. }
  682. .step-circle {
  683. width: 30px;
  684. height: 30px;
  685. line-height: 29px;
  686. text-align: center;
  687. border-radius: 50%;
  688. cursor: pointer;
  689. background-color: #016d6f;
  690. color: white;
  691. border: 2px solid #016d6f;
  692. }
  694. .step-circle.active {
  695. background-color: #FFFFFF;
  696. color: #016d6f;
  697. }
  699. .step-line {
  700. position: absolute;
  701. top: 16px;
  702. left: 50px;
  703. width: calc(100% - 100px);
  704. height: 2px;
  705. background-color: #FFFFFF;
  706. /* Set the line color here */
  707. z-index: -1;
  708. }
  710. #multi-step-form {
  711. overflow-x: hidden;
  713. }
  715. body {
  716. font-family: Arial, sans-serif;
  717. margin: 0;
  718. padding: 0;
  719. }
  721. .custom-container {
  722. padding: 20px;
  723. border-radius: 8px;
  724. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  725. background-color: #FFFFFF;
  726. border: 1px solid #CCCCCC;
  727. overflow: auto;
  728. }
  730. .header {
  731. z-index: 1000;
  732. margin-bottom: 20px;
  733. }
  735. .logo-img {
  736. height: 30px;
  737. position: absolute;
  738. left: 10px;
  739. top: 10px;
  740. }
  742. .header h6 {
  743. color: white;
  744. text-align: center;
  745. margin: 0;
  746. line-height: 2.1;
  747. }
  749. .invoice-details h3 {
  750. margin: 5px 0;
  752. }
  754. .invoice-details p {
  755. margin: 5px 0;
  756. /* Adjusted margin for <p> tags */
  757. }
  759. .total-section {
  760. margin-top: 20px;
  761. text-align: right;
  762. }
  764. .step-content p {
  765. display: inline-block;
  766. margin-right: 20px;
  767. margin-bottom: 20px;
  768. }
  770. .error {
  771. border: 1px solid red;
  772. }
  774. .error-message {
  775. color: red;
  776. font-size: 12px;
  777. padding-top: 5px;
  778. }
  780. /* Style for small thumbnail images */
  781. .thumbnail-img {
  782. width: 44px;
  783. /* Adjust the width as needed */
  784. height: 35px;
  785. /* Adjust the height as needed */
  786. cursor: pointer;
  787. /* Show cursor as pointer on hover */
  788. margin-right: 10px;
  789. /* Optional margin between images */
  790. }
  792. .large-image-container {
  793. position: fixed;
  794. top: 10%;
  795. left: 34%;
  796. width: 36%;
  797. height: 72%;
  798. background-color: slategrey;
  799. z-index: 1050;
  800. /* High z-index to ensure it's on top of other content */
  801. padding: 25px;
  802. box-sizing: border-box;
  803. overflow: hidden;
  804. /* Prevents scrollbars from iframe from appearing outside the container */
  805. }
  807. #largeImage {
  808. max-width: 90%;
  809. /* Limit maximum width of large image */
  810. max-height: 90vh;
  811. /* Limit maximum height of large image */
  812. display: block;
  813. /* Ensure it behaves as a block element */
  814. margin: 0 auto;
  815. /* Center horizontally */
  816. }
  818. .btn-square-md {
  819. width: 72px !important;
  820. max-width: 100% !important;
  821. max-height: 50% !important;
  822. height: 18px !important;
  823. text-align: center;
  824. padding: 0px;
  825. font-size: 2px;
  826. }
  828. .close-button {
  829. position: absolute;
  830. top: 5px;
  831. right: 5px;
  832. z-index: 1051;
  833. /* Ensure close button is above the iframe */
  834. }
  836. iframe {
  837. width: 100%;
  838. height: 100%;
  839. /* Take full size of the container minus any paddings if necessary */
  840. border: none;
  841. }
  843. #uploadedDocsList {
  844. list-style-type: none;
  845. /* Removes the bullet points */
  846. padding: 0;
  847. /* Removes padding */
  848. margin: 0;
  849. /* Removes margin */
  850. }
  852. #uploadedDocsList li {
  853. margin-bottom: 10px;
  854. text-wrap: balance;
  855. /* Adds space between items */
  856. }
  858. #termsModal .table td,
  859. #termsModal .table th {
  860. padding: 0.5rem;
  861. /* Reducing padding */
  862. font-size: 0.8rem;
  863. /* Smaller font size */
  864. }
  866. .table-wrap td {
  867. white-space: normal;
  868. word-wrap: break-word;
  869. }
  871. .swal2-container {
  872. z-index: 9999999999999 !important;
  873. /* Adjust this value if needed */
  874. }
  876. #ui-datepicker-div {
  877. width: 40%;
  878. }
  880. /* Media query for mobile screens */
  881. @media (max-width: 768px) {
  882. #ui-datepicker-div {
  883. width: 72%;
  884. }
  885. }
  887. .highlight-disabled {
  888. cursor: default !important;
  889. /* Default cursor for disabled dates */
  890. }
  892. .form-check-label {
  893. padding-left: 0px
  894. }
  896. h5 {
  897. margin-left: 10px;
  898. }
  900. .table-bordered {
  901. border: 1px solid black;
  902. /* Set the border color to black */
  903. }
  905. .table-bordered td,
  906. .table-bordered th {
  907. border-color: black;
  908. /* Ensure that all table cells and headers have a black border */
  909. }
  911. .sand-clock::before {
  912. content: "\231B";
  913. /* Unicode for hourglass icon */
  914. display: inline-block;
  915. animation: move 1.5s infinite;
  916. font-size: 1.2em;
  917. /* Adjust size as needed */
  918. }
  920. /* Animation keyframes */
  921. @keyframes move {
  922. 0% {
  923. transform: translateY(0);
  924. }
  926. 50% {
  927. transform: translateY(-5px);
  928. }
  930. 100% {
  931. transform: translateY(0);
  932. }
  933. }
  935. .snackbar {
  936. visibility: hidden;
  937. min-width: 250px;
  938. margin-left: -125px;
  939. background-color: #333;
  940. color: #fff;
  941. text-align: center;
  942. border-radius: 5px;
  943. padding: 16px;
  944. position: fixed;
  945. z-index: 1;
  946. left: 50%;
  947. bottom: 30px;
  948. font-size: 17px;
  949. }
  951. .snackbar.show {
  952. visibility: visible;
  953. animation: fadeInOut 0.5s, fadeOut 0.5s 2.5s;
  954. }
  956. @keyframes fadeInOut {
  957. from {
  958. bottom: 0;
  959. opacity: 0;
  960. }
  961. to {
  962. bottom: 30px;
  963. opacity: 1;
  964. }
  965. }
  967. @keyframes fadeOut {
  968. from {
  969. bottom: 30px;
  970. opacity: 1;
  971. }
  972. to {
  973. bottom: 0;
  974. opacity: 0;
  975. }
  976. }
  978. .highlight-blue .ui-state-default {
  979. background: blue !important;
  980. color: #FFF !important;
  981. }
  983. .highlight-blue a {
  984. background-color: blue;
  985. color: white;
  987. }
  988. </style>
  990. <body>
  991. <!-- Pre-loader start-->
  992. <div class="theme-loader">
  993. <div class="ball-scale">
  994. <div class='contain'>
  995. <div class="ring">
  996. <div class="frame"></div>
  997. </div>
  998. <div class="ring">
  999. <div class="frame"></div>
  1000. </div>
  1001. <div class="ring">
  1002. <div class="frame"></div>
  1003. </div>
  1004. <div class="ring">
  1005. <div class="frame"></div>
  1006. </div>
  1007. <div class="ring">
  1008. <div class="frame"></div>
  1009. </div>
  1010. <div class="ring">
  1011. <div class="frame"></div>
  1012. </div>
  1013. <div class="ring">
  1014. <div class="frame"></div>
  1015. </div>
  1016. <div class="ring">
  1017. <div class="frame"></div>
  1018. </div>
  1019. <div class="ring">
  1020. <div class="frame"></div>
  1021. </div>
  1022. <div class="ring">
  1023. <div class="frame"></div>
  1024. </div>
  1025. </div>
  1026. </div>
  1027. </div>
  1028. <!--Pre-loader end\-->
  1029. <div id="pcoded" class="pcoded">
  1030. <div class="pcoded-container">
  1031. <!-- Menu header end ;-->
  1032. <div class="pcoded-main-container">
  1033. <!--Menu header start-->
  1034. <nav th:replace="~{fragments/nav-user :: nav}"></nav>
  1035. <!-- Menu header end-->
  1036. <div class="pcoded-main-container">
  1037. <nav th:replace="~{fragments/nav-usermenu :: nav}"></nav>
  1038. <div class="pcoded-wrapper">
  1039. <div class="pcoded-content">
  1040. <div class="pcoded-inner-content">
  1041. <div class="page-header m-t-20">
  1042. </div>
  1043. <!--Page-header end-->
  1044. <!--Page body start -->
  1045. <div class="page-body">
  1046. <div class="row">
  1047. <div class="col-sm-12">
  1048. <!--Register your self card start -->
  1049. <div>
  1050. <div id="container" class="container mt-5">
  1052. <div class="step step-1">
  1053. <!--<h5>Step:1</h5>-->
  1054. <div class="container custom-container"
  1055. style="border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;overflow-x: hidden;">
  1056. <!-- Updated inline styles -->
  1057. <div class="row justify-content-center">
  1058. <div class="col-sm-6 col-md-6 col-lg-6">
  1059. <label class="form-check-label"
  1060. for="selecthall">Select Hall:</label>
  1062. <select id="selecthall" class="form-control"
  1063. name="hallId" required
  1064. onchange="toggleHallDetailsContainer()">
  1065. <option value="">Select a hall</option>
  1066. </select>
  1067. </div>
  1068. </div>
  1069. <br>
  1070. <!-- Main content row-->
  1071. <div id="hallDetailsContainer" style="display: none;">
  1072. <!-- Initially hidden-->
  1073. <div class="row">
  1074. <input type="hidden" id="serverDate" th:value=${serverDate}>
  1075. <!--Hall Images Carousel -->
  1076. <div class="col-md-6 col-lg-6 col-sm-6">
  1077. <h6>Hall Images:</h6>
  1078. <br>
  1079. <div id="hallImagesCarousel"
  1080. class="carousel slide" data-ride="carousel">
  1081. <div class="carousel-inner">
  1082. <div class="carousel-item active">
  1083. <img id="hallImage"
  1084. class="d-block w-100"
  1085. alt="Hall Image">
  1086. </div>
  1087. </div>
  1088. <a class="carousel-control-prev"
  1089. href="#hallImagesCarousel" role="button"
  1090. data-slide="prev">
  1091. <span class="carousel-control-prev-icon"
  1092. aria-hidden="true"></span>
  1093. <span class="sr-only">Previous</span>
  1094. </a>
  1095. <a class="carousel-control-next"
  1096. href="#hallImagesCarousel" role="button"
  1097. data-slide="next">
  1098. <span class="carousel-control-next-icon"
  1099. aria-hidden="true"></span>
  1100. <span class="sr-only">Next</span>
  1101. </a>
  1102. </div>
  1103. </div>
  1104. <div class="col-md-6 col-lg-6 col-sm-6">
  1105. <div id="datepicker-container"
  1106. class="fixedcontainer"></div>
  1107. <div class="row">
  1108. <div class="col col-lg-2 col-sm-2 col-md-2">
  1109. <button type="button"
  1110. class="btn btn-primary btn-square-md"
  1111. style="background-color:#008000;"></button>
  1112. <span style="margin-left: 21px;">Day<br>
  1113. (Available)</span>
  1114. </div>
  1117. <div class="col col-lg-2 col-sm-2 col-md-2">
  1118. <button type="button"
  1119. class="btn btn-primary btn-square-md"
  1120. style="background-color: #ac2bac;"></button>
  1121. <span style="margin-left: 14px;">Morning <br>
  1122. (Available)</span>
  1123. </div>
  1124. <div class="col col-lg-2 col-sm-2 col-md-2">
  1125. <button type="button"
  1126. class="btn btn-primary btn-square-md"
  1127. style="background-color:#FFEA00;"></button>
  1128. <span style="margin-left: 14px;">Evening<br>
  1129. (Available)</span>
  1130. </div>
  1131. <div class="col col-lg-2 col-sm-2 col-md-2">
  1132. <button type="button"
  1133. class="btn btn-primary btn-square-md"
  1134. style="background-color: red;"></button>
  1135. <span style="margin-left: 14px;">Not
  1136. Available</span>
  1137. </div>
  1139. <div class="col col-lg-2 col-sm-2 col-md-2">
  1140. <button type="button"
  1141. class="btn btn-primary btn-square-md"
  1142. style="background-color: blue;"></button>
  1143. <span style="margin-left: 14px;">Gcc
  1144. Blocked</span>
  1145. </div>
  1146. <!--<div class="col col-lg-2 col-sm-2 col-md-2">
  1147. <button type="button"
  1148. class="btn btn-primary btn-square-md"
  1149. style="background-color: lightpink"></button>
  1150. <span style="margin-left:-2px;">Temporary Blocked</span>
  1151. </div>-->
  1152. </div>
  1153. </div>
  1154. <br>
  1155. <!-- Hall Details -->
  1156. <div class="col-md-6 col-lg-6 col-sm-6">
  1157. <div id="hallDetails">
  1158. <br>
  1159. <h6><b>Hall Details:</b></h6>
  1160. <p>Zone: <span id="zone"></span></p>
  1161. <p>Address: <span id="address"></span></p>
  1162. <p>Landmark: <span id="landmark"></span></p>
  1163. <p>Total Area: <span
  1164. id="hallareainsqft"></span></p>
  1165. <p>Seating Capacity: <span
  1166. id="seatingCapacity"></span></p>
  1167. <p>Parking Capacity: <span
  1168. id="parkingCapacity"></span></p>
  1169. <input type="hidden" id="statichallId">
  1170. </div>
  1171. </div>
  1172. <br>
  1173. <!--&lt;!&ndash; Amount Details &ndash;&gt;-->
  1174. <div class="col-md-6 col-lg-6 col-sm-6">
  1175. <div id="amountDetails">
  1176. <br>
  1177. <h6><b>Amount Details:</b></h6>
  1178. <p>Security Deposit: Rs <span
  1179. id="rentAmount"></span></p>
  1180. <p>Full Day Rent: Rs <span
  1181. id="fullDayAmount"></span></p>
  1182. <p>Half Day Rent: Rs <span
  1183. id="halfDayAmount"></span></p>
  1184. <p>GST: <span id="gst"></span>%</p>
  1185. <p>EB for 1 Unit:* Rs <span
  1186. id="ebunit"></span></p>
  1187. <p>CareTaker Number: <span
  1188. id="caretakerNumber"></span></p>
  1189. <input type="hidden" id="depositAmount"
  1190. name="depositamount" value="100">
  1191. <input type="hidden" id="hallamount"
  1192. name="hallamount" value="100">
  1193. </div>
  1194. </div>
  1195. </div>
  1196. <div
  1197. class="row d-flex justify-content-center align-items-center">
  1199. <button type="button"
  1200. class="btn btn-primary details-btn"
  1201. id="hallrent" onclick="calculatehallrent()">
  1202. Calculate Hall Rent
  1203. </button>
  1205. </div>
  1206. </div>
  1207. </div>
  1208. </div>
  1211. </div>
  1213. </div>
  1214. </div>
  1215. <!--&lt;!&ndash; Page body end &ndash;&gt;-->
  1216. </div>
  1217. </div>
  1218. <!--&lt;!&ndash; Main-body end &ndash;&gt;-->
  1219. </div>
  1220. </div>
  1221. </div>
  1222. </div>
  1223. <!--Modal HTML for Bootstrap 5-->
  1224. <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
  1225. <div class="modal-dialog modal-lg">
  1226. <div class="modal-content">
  1227. <div class="modal-header">
  1228. <h5 class="modal-title" id="termsModalLabel">Terms and Conditions</h5>
  1229. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1230. </div>
  1231. <div class="modal-content" style="height: 100vh;">
  1232. <iframe src="media/images/CC Rules & Regulations for Online _Tamil.pdf" width="100%"
  1233. height="600px"></iframe>
  1234. </div>
  1236. </div>
  1237. </div>
  1238. </div>
  1240. </div>
  1241. </div>
  1242. </div>
  1243. <div th:replace="~{fragments/loginreg :: div}"></div>
  1246. <script th:replace="~{fragments/script :: script}"></script>
  1247. <script th:replace="~{fragments/logRegiOtpScript :: script}"></script>
  1248. <script th:replace="~{fragments/PaymentScript :: script}"></script>
  1249. <script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>
  1252. <script>
  1253. var hallIdDuplicate;
  1254. const urlParams = new URLSearchParams(window.location.search);
  1255. const hallId = urlParams.get('hallId');
  1256. $(document).ready(function () {
  1257. if (hallId != null) {
  1258. getHallDetails(hallId);
  1259. hallIdDuplicate = hallId;
  1260. $("#selecthall").val(hallId);
  1261. }
  1262. });
  1265. var index = 0;
  1266. var hall;
  1268. // Initialize select2 with closeOnSelect option
  1269. $("#selecthall").select2({
  1270. closeOnSelect: true // Ensures dropdown closes on selecting an option
  1271. });
  1273. // Force close dropdown on change (fallback for any conflict)
  1274. $('#selecthall').on('change', function () {
  1275. $(this).select2('close');
  1276. });
  1278. $.ajax({
  1279. type: 'GET',
  1280. url: '/communityhall/user/api/gethallnames',
  1281. success: function (response) {
  1282. // Populate the dropdown options with the received hall names
  1283. var selectHallDropdown = $('#selecthall');
  1284. $.each(response, function (index, hall) {
  1285. if (hallId == hall.hallId) {
  1286. selectHallDropdown.append($('<option></option>').attr('value', hall.hallId).text(hall.hallName));
  1287. selectHallDropdown.find('option[value="' + hall.hallId + '"]').prop('selected', true);
  1288. } else {
  1289. selectHallDropdown.append($('<option></option>').attr('value', hall.hallId).text(hall.hallName));
  1290. }
  1291. });
  1292. },
  1293. error: function (xhr, status, error) {
  1294. console.error('Error fetching hall names:', error);
  1295. }
  1296. });
  1298. $(document).ready(function () {
  1299. $('#selecthall').change(function () {
  1300. var selectedHallId = $(this).val();
  1301. // Call the getHallDetails function with the selected hall ID
  1302. // urlParams.set('hallId', selectedHallId);
  1303. hallIdDuplicate = selectedHallId;
  1304. getHallDetails(selectedHallId);
  1305. });
  1306. });
  1308. // Function to retrieve hall details based on hallId
  1309. function getHallDetails(hallId) {
  1310. $.ajax({
  1311. type: 'GET',
  1312. url: '/communityhall/user/api/gethalldetails/' + hallId,
  1313. success: function (response) {
  1314. console.log(response);
  1315. // Display the container
  1316. $('#hallDetailsContainer').show();
  1318. // Set hall details
  1319. $('#zone').html('<strong>' + response.zone + '</strong>&nbsp;&nbsp;&nbsp;&nbsp; Division: <strong>' + response.division + '</strong>');
  1320. $('#address').html('<strong>' + response.doorNo + ', ' + response.street + ', ' + response.area + ', ' + response.city + ', ' + response.pinCode + '</strong>');
  1321. $('#landmark').html('<strong>' + response.landMark + '</strong>');
  1322. $('#seatingCapacity').html('<strong>' + response.seatingCapacity + '</strong>');
  1323. var parkingCapacity = response.parkingCapacity;
  1324. var parkingAvailability = parkingCapacity > 0 ? "Yes" : "No";
  1325. $('#parkingCapacity').html('<strong>' + parkingAvailability + '</strong>');
  1326. $('#caretakerNumber').html('<strong>' + response.hallInchargeMobno + '</strong>');
  1327. $('#rentAmount').html('<strong>' + response.depositAmount + '</strong>');
  1328. $('#gst').html('<strong>' + response.gst + '</strong>');
  1329. $('#fullDayAmount').html('<strong>' + response.fullDayRent + '</strong>');
  1330. $('#halfDayAmount').html('<strong>' + response.halfDayRent + '</strong>');
  1331. $('#ebunit').html('<strong>' + response.ebCostPerUnit + '</strong>');
  1332. $('#statichallId').val(response.hallId);
  1334. // Set hall images
  1335. var carouselInner = $('#hallImagesCarousel .carousel-inner');
  1336. carouselInner.empty(); // Clear existing images
  1338. $.each(response.hallImagesList, function (index, image) {
  1339. var itemClass = (index === 0) ? 'carousel-item active' : 'carousel-item';
  1340. var img = $('<img>').addClass('d-block w-100').attr('src', image.hallImage).attr('alt', 'Hall Image');
  1341. var carouselItem = $('<div>').addClass(itemClass).append(img);
  1342. carouselInner.append(carouselItem);
  1343. });
  1345. // Clear existing floor details to prevent duplicates
  1346. $('#hallareainsqft').empty();
  1348. // Use a Set to store unique floor details
  1349. var uniqueFloorDetails = new Set();
  1351. $.each(response.floorDetailsList, function (index, hallarea) {
  1353. // Construct the text for each floor's details
  1354. var floorDetailText = hallarea.floor + " - " + hallarea.hallarea + " Sq.ft ,";
  1356. // Add to the Set if it's not a duplicate
  1357. if (!uniqueFloorDetails.has(floorDetailText)) {
  1358. uniqueFloorDetails.add(floorDetailText);
  1359. // Append the floor details to the target element
  1360. $('#hallareainsqft').append('<strong>' + floorDetailText + '</strong>');
  1361. }
  1362. });
  1364. // Initialize ViewerJS on the carousel after images are loaded
  1365. initializeViewerJS();
  1367. getBookingCalendar(hallId);
  1368. //connectToWebSocket(hallId);
  1370. // Set hall details in Step 2 and Step 3
  1371. $('#hallNameDisplayStep2').text(response.hallName);
  1372. $('#hallNameDisplayStep3').text(response.hallName);
  1373. $('#zoneStep2').text(response.zone);
  1374. $('#zoneStep3').text(response.zone);
  1375. $('#divisionStep2').text(response.division);
  1376. $('#divisionStep3').text(response.division);
  1377. },
  1379. error: function (xhr, status, error) {
  1380. console.error('Error fetching hall details:', error);
  1381. }
  1382. });
  1383. }
  1386. function initializeViewerJS() {
  1387. // Ensure ViewerJS initialization after images are added to the DOM
  1388. var carouselInner = document.querySelector('#hallImagesCarousel .carousel-inner');
  1389. var floordetails = document.querySelector('#hallareainsqft');
  1391. // Destroy existing viewer instance if it exists
  1392. if (carouselInner.viewer) {
  1393. carouselInner.viewer.destroy();
  1394. }
  1395. if (floordetails.viewer) {
  1396. floordetails.viewer.destroy();
  1397. }
  1398. // Initialize ViewerJS
  1399. var viewer = new Viewer(carouselInner, {
  1400. inline: false,
  1401. viewed: function () {
  1402. viewer.zoomTo(0.5); // Adjust the zoom level here
  1403. },
  1404. toolbar: {
  1405. zoomIn: 4,
  1406. zoomOut: 4,
  1407. oneToOne: 4,
  1408. reset: 4,
  1409. prev: 4,
  1410. play: {
  1411. show: 4,
  1412. size: 'large',
  1413. },
  1415. next: 4,
  1416. rotateLeft: 4,
  1417. rotateRight: 4,
  1418. flipHorizontal: 4,
  1419. flipVertical: 4,
  1420. },
  1421. });
  1422. carouselInner.viewer = viewer;
  1423. }
  1426. function getBookingCalendar(hall_id) {
  1427. // Make an AJAX call to fetch booking data
  1428. $.ajax({
  1429. type: 'GET',
  1430. url: '/communityhall/user/api/getPastData',
  1431. data: {
  1432. hall_id: hall_id
  1433. },
  1434. success: function (response) {
  1435. console.log(response);
  1436. window.bookingResponse = {};
  1437. if (response && Array.isArray(response)) {
  1438. $("#startDateInput").datepicker("destroy");
  1439. for (var i = 0; i < response.length; i++) {
  1440. var dateString = datepickerFormat(response[i].bdate);
  1441. window.bookingResponse[dateString] = [response[i].morningSlot, response[i].eveningSlot, response[i].is_blocked];
  1442. }
  1444. initializeDatepickerWithColors(hall_id);
  1445. if (response.length == 0) {
  1446. initializeDatepickerWithColors(hall_id);
  1447. }
  1448. } else {
  1449. console.error('Invalid or empty response data.');
  1450. }
  1451. },
  1452. error: function (xhr, status, error) {
  1453. console.error('Error fetching hall details:', error);
  1454. }
  1455. });
  1456. }
  1459. /*function connectToWebSocket(hall_id) {
  1460. //console.log("Connecting to WebSocket for hall_id:", hall_id);
  1461. const socket = new SockJS('/ws');
  1462. const stompClient = Stomp.over(socket);
  1464. stompClient.connect({}, function () {
  1465. //console.log("Connected to WebSocket");
  1467. // Subscribe to the topic specific to the hall_id
  1468. const topic = `/topic/bookingCalendar/${hall_id}`;
  1469. stompClient.subscribe(topic, function (message) {
  1470. try {
  1471. const response = JSON.parse(message.body); // Parse the response
  1472. processBookingData(response, hall_id); // Process and update the calendar
  1473. } catch (error) {
  1474. console.error("Failed to parse message body: ", error);
  1475. }
  1476. });
  1478. // Request initial data for the hall
  1479. requestBookingData(hall_id, stompClient);
  1480. }, function (error) {
  1481. // console.error("WebSocket connection failed: ", error);
  1482. });
  1483. }
  1485. function requestBookingData(hall_id, stompClient) {
  1486. //console.log("Requesting booking data for hall_id:", hall_id);
  1488. // Send hall_id as a JSON object
  1489. stompClient.send('/app/getPastData', {}, JSON.stringify({hall_id: hall_id}));
  1490. }
  1492. function processBookingData(response, hall_id) {
  1493. //console.log("Processing booking data for hall_id:", hall_id);
  1494. //console.log("Response: ", response);
  1496. window.bookingResponse = {};
  1497. if (response && Array.isArray(response)) {
  1498. $("#startDateInput").datepicker("destroy");
  1499. for (let i = 0; i < response.length; i++) {
  1500. const dateString = datepickerFormat(response[i].bdate);
  1501. window.bookingResponse[dateString] = [
  1502. response[i].morningSlot,
  1503. response[i].eveningSlot,
  1504. response[i].is_blocked,
  1505. response[i].temp_blocked,
  1506. ];
  1507. }
  1509. initializeDatepickerWithColors(hall_id);
  1510. } else {
  1511. console.error("Invalid or empty response data.");
  1512. }
  1513. }*/
  1517. // Function to update the end date and slot availability
  1519. function initializeDatepickerWithColors(hallId) {
  1520. // Destroy existing datepicker to avoid duplicate initialization
  1521. $("#datepicker-container").datepicker("destroy");
  1523. const serverDate =new Date($("#serverDate").val() + "T00:00:00")
  1524. console.log("serverDate:", serverDate);
  1526. const maxDate = new Date(serverDate);
  1527. maxDate.setMonth(maxDate.getMonth() + 6);
  1528. console.log("Max Date: "+maxDate);
  1530. // Initialize the datepicker
  1531. $("#startDateInput,#datepicker-container").datepicker({
  1532. dateFormat: "yy-mm-dd",
  1533. minDate: serverDate,
  1534. maxDate: maxDate,
  1535. beforeShowDay: function (eDate) {
  1536. const dateString = $.datepicker.formatDate("yy-mm-dd", eDate);
  1537. const bookingStatus = window.bookingResponse[dateString] || {};
  1539. // const currentDate = new Date();
  1540. serverDate.setHours(0, 0, 0, 0); // Normalize current date to midnight
  1541. eDate.setHours(0, 0, 0, 0); // Normalize selected date to midnight
  1543. // Logic for other dates
  1544. if (eDate < serverDate) {
  1545. return [false, "highlight-disabled", "Slot not Available"];
  1546. }
  1548. const isToday = eDate.getTime() === serverDate.getTime();
  1549. const currentHour = new Date().getHours();
  1550. const isBefore6AM = currentHour < 6;
  1551. const isAfter2PM = currentHour >= 14;
  1553. // Block 3-day logic for specific event types
  1554. // const today = new Date();
  1555. const blockedDate = new Date(serverDate);
  1556. blockedDate.setDate(serverDate.getDate() + 2);
  1558. if (eDate <= blockedDate && window.isThreeDayBlock) {
  1559. return [false, "highlight-disabled", "Blocked due to event type"];
  1560. }
  1562. // Logic for today
  1563. if (isToday) {
  1564. if (isBefore6AM) {
  1565. // Before 6 AM: Allow full-day booking or adjust based on booking status
  1566. return handleBookingStatus(bookingStatus, "Full Day Available");
  1567. } else if (isAfter2PM) {
  1568. // After 2 PM: Block all bookings
  1569. return handleAfter2PM(bookingStatus);
  1570. } else {
  1571. // Between 6 AM and 2 PM: Check status and disable morning slots
  1572. return handleMorningSlots(bookingStatus);
  1573. }
  1574. }
  1576. return handleBookingStatus(bookingStatus, "Slot Available");
  1577. },
  1578. });
  1580. // Show datepicker when hall is selected
  1581. $('#selecthall').off('click').on('click', function () {
  1582. $('#datepicker-container').datepicker('show');
  1583. });
  1585. // Handle changes in the start date input
  1586. $("#startDateInput").on("change", function () {
  1587. const selectedDate = $(this).val();
  1588. const bookingStatus = window.bookingResponse[selectedDate] || {};
  1589. const currentDate = new Date();
  1590. const currentHours = currentDate.getHours();
  1591. const currentDateString = currentDate.toISOString().split("T")[0];
  1593. $("#startPeriodDropdown").val(0).prop("disabled", false);
  1594. $("#endPeriodDropdown").val(0).prop("disabled", false);
  1595. $("#numDaysCount").val('');
  1596. validateForm();
  1598. if (selectedDate === currentDateString && currentHours >= 6) {
  1599. $("#startPeriodDropdown").val(2).prop("disabled", true);
  1600. } else if (bookingStatus[0]) {
  1601. $("#startPeriodDropdown").val(2).prop("disabled", true);
  1602. } else if (bookingStatus[1]) {
  1603. $("#startPeriodDropdown").val(1).prop("disabled", true);
  1604. }
  1605. updateEndDate(selectedDate);
  1606. });
  1608. // Event type change logic
  1609. $("#reasonforbooking").on("change", function () {
  1610. const selectedEventType = $(this).find("option:selected").text().trim();
  1611. window.isThreeDayBlock = ["Commercial", "State Govt Event", "Central Govt Event"].includes(selectedEventType);
  1612. $("#datepicker-container").datepicker("refresh");
  1613. });
  1614. }
  1616. function handleBookingStatus(bookingStatus, defaultMessage) {
  1617. if (bookingStatus[2]) {
  1618. return [true, "highlight-blue disabled", "GCC Blocked"];
  1619. } /*else if (bookingStatus[3]) {
  1620. return [true, "highlight-lightpink disabled", "Temporary Blocked"];
  1621. } */else if (bookingStatus[0] && bookingStatus[1]) {
  1622. return [true, "highlight-pink disabled", "Slot Occupied"];
  1623. } else if (bookingStatus[0] && !bookingStatus[1]) {
  1624. return [true, "highlight-yellow", "Evening Slot Available"];
  1625. } else if (!bookingStatus[0] && bookingStatus[1]) {
  1626. return [true, "highlight-violet", "Only Morning Slot Available"];
  1627. }
  1628. return [true, "highlight-greens", defaultMessage];
  1629. }
  1631. // Helper function: Handles logic after 2 PM
  1632. function handleAfter2PM(bookingStatus) {
  1633. if (bookingStatus[2]) {
  1634. return [true, "highlight-blue disabled", "GCC Blocked"];
  1635. } else if (bookingStatus[0] || bookingStatus[1]) {
  1636. return [true, "highlight-pink disabled", "Slot Occupied"];
  1637. }
  1638. return [false, "highlight-disabled", "Not Allowed to Book"];
  1639. }
  1641. // Helper function: Handles morning slots between 6 AM and 2 PM
  1642. function handleMorningSlots(bookingStatus) {
  1643. if (bookingStatus[2]) {
  1644. return [true, "highlight-blue disabled", "GCC Blocked"];
  1645. } else if (bookingStatus[0] && bookingStatus[1]) {
  1646. return [false, "highlight-pink disabled", "Slot Occupied"];
  1647. } else if (bookingStatus[0] && !bookingStatus[1]) {
  1648. return [true, "highlight-yellow", "Evening Slot Available"];
  1649. } else if (!bookingStatus[0] && bookingStatus[1]) {
  1650. return [false, "highlight-disabled", "Slot Occupied"];
  1651. }
  1652. return [true, "highlight-yellow", "Evening Slot Available"];
  1653. }
  1655. function datepickerFormat(dateString) {
  1656. var dateObject = new Date(dateString);
  1657. var year = dateObject.getFullYear();
  1658. var month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
  1659. var day = dateObject.getDate().toString().padStart(2, "0");
  1660. return `${year}-${month}-${day}`;
  1661. }
  1663. function calculatehallrent() {
  1664. window.location.href = "/communityhall/hallAmountCalculation?hallId=" + hallIdDuplicate;
  1665. }
  1667. </script>
  1669. </body>
  1671. </html>