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.
14 Commits
1 Branch
0 Tags
244 MiB
Tree: 68890cb68f
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '68890cb68f'
${ noResults }
communityhallv22/target/classes/templates/user/hallbookingform.html

3337 lines
150 KiB
Raw Normal View History

scheduler flag
1 year 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>
  7. <style>
  8. .table-align {
  9. width: 100%;
  10. }
  12. .td-align {
  13. padding: 8px;
  14. border: 1px solid #ddd;
  15. }
  17. @media (max-width: 600px) {
  18. .td-align {
  19. display: block;
  20. width: 100%;
  21. box-sizing: border-box;
  22. }
  23. }
  25. .center-table {
  26. justify-content: center;
  27. align-items: center;
  28. }
  30. .highlight-greens .ui-state-default {
  31. background: green !important;
  32. color: #FFF !important;
  33. }
  35. .highlight-yellow .ui-state-default {
  36. background: yellow !important;
  37. color: #000 !important;
  38. }
  40. .highlight-violet .ui-state-default {
  41. background: #a93da9 !important;
  42. color: #000 !important;
  43. }
  45. .highlight-pink .ui-state-default {
  46. background: red !important;
  47. color: #000 !important;
  48. }
  50. .btn-square-md {
  51. width: 16px !important;
  52. max-width: 100% !important;
  53. max-height: 50% !important;
  54. height: 30px !important;
  55. text-align: center;
  56. padding: 0px;
  57. font-size: 2px;
  58. }
  60. .disabled {
  61. pointer-events: none;
  62. opacity: 1;
  63. /* Example: reduce opacity to indicate disabled state */
  64. }
  66. .ui-datepicker {
  67. width: 100%;
  68. background-color: #333;
  69. }
  71. .ui-datepicker-header {
  72. background-color: #f0f0f0;
  73. /* Light gray background for header */
  74. border: none;
  75. border-radius: 5px 5px 0 0;
  76. }
  78. .ui-datepicker-title {
  79. font-size: 1.2em;
  80. margin: 0;
  81. padding: 10px;
  82. text-align: center;
  83. }
  85. .ui-datepicker-calendar {
  86. margin: 0;
  87. padding: 0;
  88. color: white;
  89. /* Text color for dates */
  90. font-weight: bold;
  91. /* Bold font for dates */
  92. }
  94. .ui-datepicker-calendar th,
  95. .ui-datepicker-calendar td {
  96. text-align: center;
  97. }
  99. .ui-datepicker-week-end {
  100. color: yellow;
  101. font-weight: bold;
  102. }
  104. /* Style for the label */
  105. .date-label {
  106. display: block;
  107. margin-bottom: 6px;
  108. font-weight: bold;
  109. }
  111. .highlight-current-date a {
  112. background-color: green;
  113. /* Current date highlight color */
  114. color: white;
  115. }
  117. .highlight-greens a {
  118. background-color: green;
  119. color: white;
  120. }
  122. .highlight-yellow a {
  123. background-color: yellow;
  124. color: black;
  125. /* Change text color for visibility */
  126. }
  128. .highlight-pink a,
  129. input[type=button]:disabled {
  130. background-color: pink;
  131. /* Pink highlight for disabled or booked dates */
  132. color: white;
  133. }
  135. .highlight-orange a {
  136. background-color: orange;
  137. /* Orange highlight color */
  138. color: white;
  139. }
  141. input[type=button]:disabled {
  142. background: red;
  143. }
  145. .hidden {
  146. display: none;
  147. }
  149. #selecthall.select2-container--default .select2-selection--single {
  150. height: 35px;
  151. border: 1px solid #ddd;
  152. padding-left: 10px;
  153. }
  155. .select2-container--default .select2-selection--single .select2-selection__rendered {
  156. color: #444;
  157. line-height: 28px;
  158. margin-top: -8px;
  159. }
  161. #hallDetailsContainer {
  162. display: flex;
  163. flex-direction: column;
  164. align-items: center;
  165. /* Center items horizontally */
  166. justify-content: center;
  167. /* Center items vertically */
  168. border: 1px solid #ccc;
  169. border-radius: 5px;
  170. padding: 20px;
  171. margin-top: 20px;
  172. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  173. background-color: #fff;
  174. }
  176. /* Style for the image */
  177. #hallImagesCarousel {
  178. margin-bottom: 20px;
  179. }
  181. .row {
  182. display: flex;
  183. flex-wrap: wrap;
  184. margin-right: 0px;
  185. margin-left: 0px;
  186. }
  188. .col-md-6 {
  189. width: 50%;
  190. padding: 0 10px;
  191. /* Optional: Add padding to columns */
  192. }
  194. @media (max-width: 768px) {
  195. .col-md-6 {
  196. width: 100%;
  197. /* Full width on smaller screens */
  198. }
  199. }
  201. #hallDetailsContainer p {
  202. margin: 0;
  203. padding: 5px 0;
  204. }
  206. #hallDetailsContainer p:nth-child(even) {
  207. background-color: #f9f9f9;
  208. }
  210. /* CSS styles for the amount details container */
  211. #amountDetailsContainer {
  212. border: 1px solid #ccc;
  213. border-radius: 5px;
  214. padding: 20px;
  215. margin-top: 20px;
  216. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  217. background-color: #fff;
  218. }
  220. #amountDetailsContainer h4 {
  221. margin-top: 0;
  222. margin-bottom: 10px;
  223. }
  225. #amountDetailsContainer div {
  226. list-style: none;
  227. padding: 0;
  228. }
  230. #amountDetailsContainer p {
  231. margin-bottom: 10px;
  232. }
  234. #amountDetailsContainer p span {
  235. font-weight: bold;
  236. }
  238. #amountDetailsContainer p:nth-child(even) {
  239. background-color: #f9f9f9;
  240. }
  242. /* Style for the image container */
  243. #hallImagesCarousel {
  244. display: flex;
  245. justify-content: center;
  246. /* Center content horizontally */
  247. align-items: center;
  248. /* Center content vertically */
  249. margin-bottom: 20px;
  250. position: relative;
  251. }
  253. /* Style for the images inside the carousel */
  254. .carousel-item img {
  255. max-width: 100%;
  256. /* Ensure image does not exceed container width */
  257. min-height: 9%;
  258. /* Maintain aspect ratio */
  259. display: block;
  260. /* Ensure image is block-level element */
  261. max-width: 100%;
  262. max-height: 100%;
  263. display: block;
  264. margin: 0 auto;
  265. /* Center the image horizontally */
  266. }
  268. .content-container {
  269. padding: 20px;
  270. }
  272. .otp-input {
  273. width: 30px;
  274. height: 30px;
  275. border: 1px solid #ccc;
  276. border-radius: 5px;
  277. text-align: center;
  278. font-size: 16px;
  279. margin-right: 10px;
  280. }
  282. /* Ensures content within these classes is centered */
  283. .modal-header,
  284. .modal-body,
  285. .modal-footer,
  286. #resend-container {
  287. text-align: center;
  288. }
  290. /* Center content with Flexbox if needed */
  291. .center-flex {
  292. display: flex;
  293. justify-content: center;
  294. align-items: center;
  295. flex-direction: column;
  296. /* Stack elements vertically */
  297. }
  299. /* Adjust the margin of the otp-input-box for better alignment */
  300. .otp-input-box {
  301. justify-content: center;
  302. margin: 0 auto;
  303. /* Centers the box horizontally */
  304. align-items: center;
  305. /* Align items in the center for flex containers */
  306. width: 100%;
  307. }
  309. .center-content {
  310. display: flex;
  311. justify-content: center;
  312. align-items: center;
  313. height: 100%;
  314. /* Or set a specific height */
  315. flex-direction: column;
  316. /* Stack children vertically */
  317. }
  319. /* To ensure the form takes up the necessary width */
  320. .form-group {
  321. width: 100%;
  322. /* Adjust based on your layout's needs */
  323. }
  325. /* Custom styles for the jQuery UI Dialog */
  326. .custom-dialog .ui-dialog-content {
  327. background-color: #fff;
  328. color: #333;
  329. padding: 20px;
  330. }
  332. .custom-dialog .ui-dialog-titlebar {
  333. background: #007bff;
  334. color: #ffffff;
  335. }
  337. .custom-dialog .ui-dialog-buttonpane {
  338. background-color: #f1f1f1;
  339. }
  341. .custom-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
  342. background-color: #007bff;
  343. color: #ffffff;
  344. border-color: #007bff;
  345. }
  347. .custom-dialog a {
  348. color: #007bff;
  349. text-decoration: none;
  350. }
  352. .custom-dialog a:hover {
  353. text-decoration: underline;
  354. }
  356. table {
  357. width: 100%;
  358. border-collapse: collapse;
  359. }
  361. th,
  362. td {
  363. border: 1px solid black;
  364. padding: 8px;
  365. text-align: center;
  366. }
  368. .date-box {
  369. border: 1px solid #ccc;
  370. padding: 10px;
  371. margin: 5px;
  372. text-align: center;
  373. background-color: #f8f9fa;
  374. border-radius: 5px;
  375. }
  377. .checkbox-label {
  378. display: block;
  379. margin-top: 5px;
  380. }
  382. #calendar {
  383. margin-top: 20px;
  384. padding: 20px;
  385. border: 1px solid #ccc;
  386. border-radius: 5px;
  387. background-color: #f8f9fa;
  388. }
  390. /* Style for date checkboxes */
  391. .date-checkboxes {
  392. margin-top: 10px;
  393. }
  395. label {
  396. margin-right: 10px;
  397. }
  399. .ui-datepicker-container {
  400. width: 100%
  401. }
  403. .fixedcontainer {
  404. width: 250%;
  405. margin: 40px 0;
  406. }
  408. .ui-widget {
  409. width: 40%
  410. }
  412. .ui-datepicker {
  413. padding: 3px;
  414. border: 1px solid #ccc;
  415. border-radius: 5px;
  416. background-color: white;
  417. left: 29.1418px;
  418. }
  420. .ui-datepicker-header {
  421. background-color: #f0f0f0;
  422. border: none;
  423. border-radius: 5px 5px 0 0;
  424. }
  426. .ui-datepicker-title {
  427. font-size: 1.2em;
  428. margin: 0;
  429. padding: 10px;
  430. text-align: center;
  431. }
  433. .ui-datepicker-calendar {
  434. margin: 0;
  435. padding: 0;
  436. font-weight: bold;
  437. /* Bold font for dates */
  438. }
  440. .ui-datepicker-calendar th,
  441. .ui-datepicker-calendar td {
  442. padding: 5px;
  443. text-align: center;
  444. }
  446. .ui-datepicker-calendar .ui-state-default {
  447. cursor: pointer;
  448. width: 100%;
  449. height: 100%;
  450. display: flex;
  451. justify-content: center;
  452. align-items: center;
  453. }
  455. .ui-datepicker-week-end {
  456. color: black;
  457. font-weight: bold;
  458. }
  460. .ui-datepicker-calendar th span {
  461. color: black;
  462. font-weight: bold;
  463. }
  465. .booking-form-container {
  466. margin: 20px auto;
  467. padding: 20px;
  468. border: 1px solid #ddd;
  469. border-radius: 8px;
  470. background-color: #f9f9f9;
  471. max-width: 960px;
  472. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  473. }
  475. .booking-form-container label {
  476. font-weight: bold;
  477. }
  479. .booking-form-container .form-control {
  480. margin-bottom: 10px;
  481. }
  483. .booking-form-container .btn-primary {
  484. background-color: #017bff;
  485. }
  487. .white-background {
  488. background-color: white;
  489. /* Set the background color as needed */
  490. border: 1px solid #ccc;
  491. /* Optional: Add border for better visualization */
  492. padding: 20px;
  493. margin-bottom: 20px;
  494. overflow: hidden;
  495. /* Hide overflow content during animation */
  496. position: relative;
  497. }
  499. .slide-left {
  500. animation: slideLeft 0.5s ease both;
  501. }
  503. .slide-right {
  504. animation: slideRight 0.5s ease both;
  505. }
  507. @keyframes slideLeft {
  508. 0% {
  509. transform: translateX(0);
  510. }
  512. 100% {
  513. transform: translateX(-100%);
  514. opacity: 0;
  515. }
  516. }
  518. @keyframes slideRight {
  519. 0% {
  520. transform: translateX(-100%);
  521. opacity: 0;
  522. }
  524. 100% {
  525. transform: translateX(0);
  526. opacity: 1;
  527. }
  528. }
  530. /* Apply styles to the booking-section container */
  531. .booking-section {
  532. margin: 20px auto;
  533. padding: 20px;
  534. border: 1px solid #ddd;
  535. border-radius: 8px;
  536. background-color: #f9f9f9;
  537. max-width: 960px;
  538. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  539. }
  541. .booking-section label {
  542. font-weight: bold;
  543. }
  545. .booking-section .form-control {
  546. margin-bottom: 10px;
  547. }
  549. .booking-section .btn-primary {
  550. background-color: #017bff;
  551. }
  553. /* Apply white background to the booking-section */
  554. #reasonforbookingSection {
  555. background-color: #ffffff;
  556. /* White background color */
  557. padding: 20px;
  558. /* Optional: Add padding for spacing */
  559. }
  561. body {
  562. font-family: Arial, sans-serif;
  563. margin: 0;
  564. padding: 0;
  565. }
  567. .progressbar {
  568. display: flex;
  569. margin-bottom: 20px;
  570. }
  572. .progress-step {
  573. width: 100%;
  574. height: 9px;
  575. background-color: #e0e0e0;
  576. /* Light gray background */
  577. border-radius: 10px;
  578. /* Rounded corners */
  579. margin-right: 10px;
  580. }
  582. .progress-step-active {
  583. background-color: #4caf50;
  584. /* Green active step */
  585. color: white;
  586. /* White text color */
  587. font-weight: bold;
  588. /* Bold font for active step */
  589. }
  591. .progress {
  592. width: 100%;
  593. height: 10px;
  594. background-color: #ddd;
  595. position: relative;
  596. }
  598. .progress-step::before {
  599. content: attr(data-title);
  600. display: block;
  601. position: absolute;
  602. top: 20px;
  603. left: 50%;
  604. transform: translateX(-50%);
  605. font-size: 12px;
  606. color: #888;
  607. }
  609. .form {
  610. margin-bottom: 20px;
  611. }
  613. .form-step {
  614. display: none;
  615. margin-bottom: 20px;
  616. }
  618. .form-step-active {
  619. display: block;
  620. }
  622. .btn-prev,
  623. .btn-next {
  624. padding: 10px 20px;
  625. font-size: 14px;
  626. cursor: pointer;
  627. border: none;
  628. background-color: #337ab7;
  629. color: #fff;
  630. }
  632. .btn-prev {
  633. margin-right: 10px;
  634. }
  636. /* Media Query for small screens */
  637. @media (max-width: 768px) {
  638. .progress-step::before {
  639. display: none;
  640. /* Hide step titles on small screens */
  641. }
  642. }
  644. #container {
  645. max-width: 1183px;
  646. }
  648. .step-container {
  649. position: relative;
  650. text-align: center;
  651. transform: translateY(-60%);
  652. }
  654. .step-circle {
  655. width: 30px;
  656. height: 30px;
  657. line-height: 29px;
  658. text-align: center;
  659. border-radius: 50%;
  660. cursor: pointer;
  661. background-color: #016d6f;
  662. color: white;
  663. border: 2px solid #016d6f;
  664. }
  666. .step-circle.active {
  667. background-color: #FFFFFF;
  668. color: #016d6f;
  669. }
  671. .step-line {
  672. position: absolute;
  673. top: 16px;
  674. left: 50px;
  675. width: calc(100% - 100px);
  676. height: 2px;
  677. background-color: #FFFFFF;
  678. /* Set the line color here */
  679. z-index: -1;
  680. }
  682. #multi-step-form {
  683. overflow-x: hidden;
  685. }
  687. body {
  688. font-family: Arial, sans-serif;
  689. margin: 0;
  690. padding: 0;
  691. }
  693. .custom-container {
  694. padding: 20px;
  695. border-radius: 8px;
  696. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  697. background-color: #FFFFFF;
  698. border: 1px solid #CCCCCC;
  699. overflow: auto;
  700. }
  702. .header {
  703. z-index: 1000;
  704. margin-bottom: 20px;
  705. }
  707. .logo-img {
  708. height: 30px;
  709. position: absolute;
  710. left: 10px;
  711. top: 10px;
  712. }
  714. .header h6 {
  715. color: white;
  716. text-align: center;
  717. margin: 0;
  718. line-height: 2.1;
  719. }
  721. .invoice-details h3 {
  722. margin: 5px 0;
  724. }
  726. .invoice-details p {
  727. margin: 5px 0;
  728. /* Adjusted margin for <p> tags */
  729. }
  731. .total-section {
  732. margin-top: 20px;
  733. text-align: right;
  734. }
  736. .step-content p {
  737. display: inline-block;
  738. margin-right: 20px;
  739. margin-bottom: 20px;
  740. }
  742. .error {
  743. border: 1px solid red;
  744. }
  746. .error-message {
  747. color: red;
  748. font-size: 12px;
  749. padding-top: 5px;
  750. }
  752. /* Style for small thumbnail images */
  753. .thumbnail-img {
  754. width: 44px;
  755. /* Adjust the width as needed */
  756. height: 35px;
  757. /* Adjust the height as needed */
  758. cursor: pointer;
  759. /* Show cursor as pointer on hover */
  760. margin-right: 10px;
  761. /* Optional margin between images */
  762. }
  764. .large-image-container {
  765. position: fixed;
  766. top: 10%;
  767. left: 34%;
  768. width: 36%;
  769. height: 72%;
  770. background-color: slategrey;
  771. z-index: 1050;
  772. /* High z-index to ensure it's on top of other content */
  773. padding: 25px;
  774. box-sizing: border-box;
  775. overflow: hidden;
  776. /* Prevents scrollbars from iframe from appearing outside the container */
  777. }
  779. #largeImage {
  780. max-width: 90%;
  781. /* Limit maximum width of large image */
  782. max-height: 90vh;
  783. /* Limit maximum height of large image */
  784. display: block;
  785. /* Ensure it behaves as a block element */
  786. margin: 0 auto;
  787. /* Center horizontally */
  788. }
  790. .btn-square-md {
  791. width: 72px !important;
  792. max-width: 100% !important;
  793. max-height: 50% !important;
  794. height: 18px !important;
  795. text-align: center;
  796. padding: 0px;
  797. font-size: 2px;
  798. }
  800. .close-button {
  801. position: absolute;
  802. top: 5px;
  803. right: 5px;
  804. z-index: 1051;
  805. /* Ensure close button is above the iframe */
  806. }
  808. iframe {
  809. width: 100%;
  810. height: 100%;
  811. /* Take full size of the container minus any paddings if necessary */
  812. border: none;
  813. }
  815. #uploadedDocsList {
  816. list-style-type: none;
  817. /* Removes the bullet points */
  818. padding: 0;
  819. /* Removes padding */
  820. margin: 0;
  821. /* Removes margin */
  822. }
  824. #uploadedDocsList li {
  825. margin-bottom: 10px;
  826. text-wrap: balance;
  827. /* Adds space between items */
  828. }
  830. #termsModal .table td,
  831. #termsModal .table th {
  832. padding: 0.5rem;
  833. /* Reducing padding */
  834. font-size: 0.8rem;
  835. /* Smaller font size */
  836. }
  838. .table-wrap td {
  839. white-space: normal;
  840. word-wrap: break-word;
  841. }
  843. .swal2-container {
  844. z-index: 9999999999999 !important;
  845. /* Adjust this value if needed */
  846. }
  848. #ui-datepicker-div {
  849. width: 40%;
  850. }
  852. /* Media query for mobile screens */
  853. @media (max-width: 768px) {
  854. #ui-datepicker-div {
  855. width: 72%;
  856. }
  857. }
  859. .highlight-disabled {
  860. cursor: default !important;
  861. /* Default cursor for disabled dates */
  862. }
  864. .form-check-label {
  865. padding-left: 0px
  866. }
  868. h5 {
  869. margin-left: 10px;
  870. }
  872. .table-bordered {
  873. border: 1px solid black;
  874. /* Set the border color to black */
  875. }
  877. .table-bordered td,
  878. .table-bordered th {
  879. border-color: black;
  880. /* Ensure that all table cells and headers have a black border */
  881. }
  883. .sand-clock::before {
  884. content: "\231B";
  885. /* Unicode for hourglass icon */
  886. display: inline-block;
  887. animation: move 1.5s infinite;
  888. font-size: 1.2em;
  889. /* Adjust size as needed */
  890. }
  892. /* Animation keyframes */
  893. @keyframes move {
  894. 0% {
  895. transform: translateY(0);
  896. }
  898. 50% {
  899. transform: translateY(-5px);
  900. }
  902. 100% {
  903. transform: translateY(0);
  904. }
  905. }
  907. .snackbar {
  908. visibility: hidden;
  909. min-width: 250px;
  910. margin-left: -125px;
  911. background-color: #333;
  912. color: #fff;
  913. text-align: center;
  914. border-radius: 5px;
  915. padding: 16px;
  916. position: fixed;
  917. z-index: 1;
  918. left: 50%;
  919. bottom: 30px;
  920. font-size: 17px;
  921. }
  923. .snackbar.show {
  924. visibility: visible;
  925. animation: fadeInOut 0.5s, fadeOut 0.5s 2.5s;
  926. }
  928. @keyframes fadeInOut {
  929. from {
  930. bottom: 0;
  931. opacity: 0;
  932. }
  933. to {
  934. bottom: 30px;
  935. opacity: 1;
  936. }
  937. }
  939. @keyframes fadeOut {
  940. from {
  941. bottom: 30px;
  942. opacity: 1;
  943. }
  944. to {
  945. bottom: 0;
  946. opacity: 0;
  947. }
  948. }
  950. .highlight-blue .ui-state-default {
  951. background: blue !important;
  952. color: #FFF !important;
  953. }
  955. .highlight-blue a {
  956. background-color: blue;
  957. color: white;
  959. }
  960. </style>
  962. <body>
  963. <!-- Pre-loader start -->
  964. <div class="theme-loader">
  965. <div class="ball-scale">
  966. <div class='contain'>
  967. <div class="ring">
  968. <div class="frame"></div>
  969. </div>
  970. <div class="ring">
  971. <div class="frame"></div>
  972. </div>
  973. <div class="ring">
  974. <div class="frame"></div>
  975. </div>
  976. <div class="ring">
  977. <div class="frame"></div>
  978. </div>
  979. <div class="ring">
  980. <div class="frame"></div>
  981. </div>
  982. <div class="ring">
  983. <div class="frame"></div>
  984. </div>
  985. <div class="ring">
  986. <div class="frame"></div>
  987. </div>
  988. <div class="ring">
  989. <div class="frame"></div>
  990. </div>
  991. <div class="ring">
  992. <div class="frame"></div>
  993. </div>
  994. <div class="ring">
  995. <div class="frame"></div>
  996. </div>
  997. </div>
  998. </div>
  999. </div>
  1000. <!-- Pre-loader end -->
  1001. <div id="pcoded" class="pcoded">
  1002. <div class="pcoded-container">
  1003. <!-- Menu header end -->
  1004. <div class="pcoded-main-container">
  1005. <!-- Menu header start -->
  1006. <nav th:replace="~{fragments/nav-user :: nav}"></nav>
  1007. <!-- Menu header end -->
  1008. <div class="pcoded-main-container">
  1009. <nav th:replace="~{fragments/nav-usermenu :: nav}"></nav>
  1010. <div class="pcoded-wrapper">
  1011. <div class="pcoded-content">
  1012. <div class="pcoded-inner-content">
  1013. <div class="page-header m-t-20">
  1014. </div>
  1015. <!-- Page-header end -->
  1016. <!-- Page body start -->
  1017. <div class="page-body">
  1018. <div class="row">
  1019. <!--<div class="col-sm-12">-->
  1020. <!-- Register your self card start -->
  1021. <div>
  1022. <div id="container" class="container mt-5">
  1023. <div class="progress px-1" style="height: 3px;">
  1024. <div class="progress-bar" role="progressbar" style="width: 0%;"
  1025. aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  1026. </div>
  1027. </div>
  1028. <div class="step-container d-flex justify-content-between">
  1029. <div class="step-circle" onclick="displayStep(1)">1</div>
  1030. <div class="step-circle" onclick="displayStep(2)">2</div>
  1031. <div class="step-circle" onclick="displayStep(3)">3</div>
  1032. <div class="step-circle" onclick="displayStep(4)">4</div>
  1033. </div>
  1034. <form action="javascript:saveBookingDetails()" id="booking"
  1035. method="post" enctype="multipart/form-data"
  1036. onsubmit="return handleSaveAndContinueStep3()">
  1037. <input type="hidden" id="serverDate" th:value=${serverDate}>
  1038. <div class="step step-1">
  1039. <h5>Step:1</h5>
  1040. <div class="container custom-container"
  1041. 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;">
  1042. <!-- Updated inline styles -->
  1043. <div class="row justify-content-center">
  1044. <div class="col-sm-6 col-md-6 col-lg-6">
  1045. <label class="form-check-label"
  1046. for="selecthall">Select Hall:</label>
  1048. <select id="selecthall" class="form-control"
  1049. name="hallId" required
  1050. onchange="toggleHallDetailsContainer()">
  1051. <option value="">Select a hall</option>
  1052. </select>
  1053. </div>
  1054. </div>
  1055. <br>
  1056. <!-- Main content row -->
  1057. <div id="hallDetailsContainer" style="display: none;">
  1058. <!-- Initially hidden -->
  1059. <div class="row">
  1060. <!-- Hall Images Carousel -->
  1061. <div class="col-md-6 col-lg-6 col-sm-6">
  1062. <h6>Hall Images:</h6>
  1063. <br>
  1064. <div id="hallImagesCarousel"
  1065. class="carousel slide" data-ride="carousel">
  1066. <div class="carousel-inner">
  1067. <div class="carousel-item active">
  1068. <img id="hallImage"
  1069. class="d-block w-100"
  1070. alt="Hall Image">
  1071. </div>
  1072. </div>
  1073. <a class="carousel-control-prev"
  1074. href="#hallImagesCarousel" role="button"
  1075. data-slide="prev">
  1076. <span class="carousel-control-prev-icon"
  1077. aria-hidden="true"></span>
  1078. <span class="sr-only">Previous</span>
  1079. </a>
  1080. <a class="carousel-control-next"
  1081. href="#hallImagesCarousel" role="button"
  1082. data-slide="next">
  1083. <span class="carousel-control-next-icon"
  1084. aria-hidden="true"></span>
  1085. <span class="sr-only">Next</span>
  1086. </a>
  1087. </div>
  1088. </div>
  1089. <div class="col-md-6 col-lg-6 col-sm-6">
  1090. <div id="datepicker-container"
  1091. class="fixedcontainer"></div>
  1092. <div class="row">
  1093. <div class="col col-lg-2 col-sm-2 col-md-2">
  1094. <button type="button"
  1095. class="btn btn-primary btn-square-md"
  1096. style="background-color:#008000;"></button>
  1097. <span style="margin-left: 21px;">Day<br>
  1098. (Available)</span>
  1099. </div>
  1100. <div class="col col-lg-2 col-sm-2 col-md-2">
  1101. <button type="button"
  1102. class="btn btn-primary btn-square-md"
  1103. style="background-color: #ac2bac;"></button>
  1104. <span style="margin-left: 14px;">Morning
  1105. <br>
  1106. &nbsp;&nbsp;(Available)</span>
  1107. </div>
  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:#FFEA00;"></button>
  1112. <span
  1113. style="margin-left: 14px;">Evening<br>
  1114. &nbsp;&nbsp;(Available)</span>
  1115. </div>
  1116. <div class="col col-lg-2 col-sm-2 col-md-2">
  1117. <button type="button"
  1118. class="btn btn-primary btn-square-md"
  1119. style="background-color: red;"></button>
  1120. <span style="margin-left: 14px;">Not
  1121. Available</span>
  1122. </div>
  1123. <div class="col col-lg-2 col-sm-2 col-md-2">
  1124. <button type="button"
  1125. class="btn btn-primary btn-square-md"
  1126. style="background-color: blue"></button>
  1127. <span style="margin-left: 14px;">Gcc
  1128. Blocked</span>
  1129. </div>
  1130. </div>
  1131. </div>
  1132. <br>
  1133. <!-- Hall Details -->
  1134. <div class="col-md-6 col-lg-6 col-sm-6">
  1135. <div id="hallDetails">
  1136. <br>
  1137. <h6><b>Hall Details:</b></h6>
  1138. <p>Zone: <span id="zone"></span></p>
  1139. <p>Address: <span id="address"></span></p>
  1140. <p>Landmark: <span id="landmark"></span></p>
  1141. <p>Total Area: <span
  1142. id="hallareainsqft"></span></p>
  1143. <p>Seating Capacity: <span
  1144. id="seatingCapacity"></span></p>
  1145. <p>Parking Capacity: <span
  1146. id="parkingCapacity"></span></p>
  1147. <input type="hidden" id="statichallId">
  1148. </div>
  1149. </div>
  1150. <br>
  1151. <!-- Amount Details -->
  1152. <div class="col-md-6 col-lg-6 col-sm-6">
  1153. <div id="amountDetails">
  1154. <br>
  1155. <h6><b>Amount Details:</b></h6>
  1156. <p>Security Deposit: Rs <span
  1157. id="rentAmount"></span></p>
  1158. <p>Full Day Rent: Rs <span
  1159. id="fullDayAmount"></span></p>
  1160. <p>Half Day Security Deposit: Rs <span
  1161. id="halfrentAmount"></span></p>
  1162. <p>Half Day Rent: Rs <span
  1163. id="halfDayAmount"></span></p>
  1164. <p>GST: <span id="gst"></span>%</p>
  1165. <p>EB for 1 Unit:* Rs <span
  1166. id="ebunit"></span></p>
  1167. <p>CareTaker Number: <span
  1168. id="caretakerNumber"></span></p>
  1169. <input type="hidden" id="depositAmount"
  1170. name="depositamount" value="100">
  1171. <input type="hidden" id="hallamount"
  1172. name="hallamount" value="100">
  1173. </div>
  1174. </div>
  1175. </div>
  1176. <div
  1177. class="row d-flex justify-content-center align-items-center">
  1178. <div
  1179. class="col-md-12 col-sm-12 col-lg-12 d-flex justify-content-center">
  1180. <!-- Center align the button -->
  1181. <button type="button"
  1182. class="btn btn-primary next-step"
  1183. id="bookandcontinue"
  1184. style="background-color: #016d6f; color: white;">
  1185. Book
  1186. & Continue
  1187. </button>
  1188. </div>
  1189. </div>
  1190. </div>
  1191. </div>
  1192. </div>
  1193. <div class="step step-2">
  1194. <!-- Step 2 form fields here -->
  1195. <h4 style="margin-left:10px">Step 2</h4>
  1196. <div class="container custom-container"
  1197. style="padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;">
  1198. <!-- Updated inline styles -->
  1199. <div class="mb-3">
  1200. <div class="row">
  1201. <div class=" row col-md-12 col-lg-12 col-sm-12">
  1202. <table
  1203. class="table table-bordered table-align center-table">
  1204. <tbody>
  1205. <tr>
  1206. <td class="td-align" style="word-wrap: break-word;
  1207. white-space: normal;"><strong>Hall
  1208. Name:</strong>
  1209. <span
  1210. id="hallNameDisplayStep2"></span>
  1211. </td>
  1212. <td class="td-align"><strong>Zone:
  1213. </strong>
  1214. <span id="zoneStep2"></span>
  1215. </td>
  1216. <td class="td-align">
  1217. <strong>Division: </strong>
  1218. <span id="divisionStep2"></span>
  1219. </td>
  1220. </tr>
  1221. </tbody>
  1222. </table>
  1223. </div>
  1224. <div class="row">
  1225. <div class="col col-lg-2 col-sm-2 col-md-2">
  1226. <button type="button"
  1227. class="btn btn-primary btn-square-md"
  1228. style="background-color:#008000;"></button>
  1229. <p style="margin-left: -7px;">Day(Available)</p>
  1230. </div>
  1231. <div class="col col-lg-2 col-sm-2 col-md-2">
  1232. <button type="button"
  1233. class="btn btn-primary btn-square-md"
  1234. style="background-color: #ac2bac;"></button>
  1235. <p style="margin-left: -7px;;">
  1236. &nbsp;&nbsp;Morning(Available)</p>
  1237. </div>
  1238. <div class="col col-lg-2 col-sm-2 col-md-2">
  1239. <button type="button"
  1240. class="btn btn-primary btn-square-md"
  1241. style="background-color:#FFEA00;"></button>
  1242. <p
  1243. style="margin-left: -8px;">
  1244. Evening(Available)</p>
  1245. </div>
  1246. <div class="col col-lg-2 col-sm-2 col-md-2">
  1247. <button type="button"
  1248. class="btn btn-primary btn-square-md"
  1249. style="background-color: red;"></button>
  1250. <P style="margin-left: -4px;">
  1251. Not(Available)</P>
  1252. </div>
  1254. <div class="col col-lg-2 col-sm-2 col-md-2">
  1255. <button type="button"
  1256. class="btn btn-primary btn-square-md"
  1257. style="background-color: blue"></button>
  1258. <p style="margin-left:-1px;">Gcc
  1259. Blocked</p>
  1260. </div>
  1262. <!--<div class="col col-lg-2 col-sm-2 col-md-2">
  1263. <button type="button"
  1264. class="btn btn-primary btn-square-md"
  1265. style="background-color: lightpink"></button>
  1266. <p style="margin-left: 6px;">Temporary
  1267. Blocked</p>
  1268. </div>-->
  1270. </div>
  1271. <br>
  1272. <br>
  1273. <div class="col-sm-4 col-lg-6 col-md-4">
  1274. <label>Relationship of the Functionary:*</label>
  1275. <select id="relation" name="relation"
  1276. class="form-control"
  1277. onchange="validateForm()" required>
  1278. <option value="0">Select</option>
  1279. <option value="self">Self</option>
  1280. <option value="son">Son</option>
  1281. <option value="daughter">Daughter</option>
  1282. <option value="granddaughter">GrandDaughter
  1283. </option>
  1284. <option value="grandson">GrandSon</option>
  1285. <option value="sister">Sister</option>
  1286. <option value="brother">Brother</option>
  1287. </select>
  1288. </div>
  1289. <!--edit code-->
  1290. <input type="hidden" id="reasonMaxDates">
  1291. <div class="col-sm-4 col-lg-6 col-md-4">
  1292. <label>Reason for
  1293. Booking:*</label>
  1294. <select type="text" class="form-control"
  1295. id="reasonforbooking" name="reasonId"
  1296. required>
  1297. </select>
  1298. </div>
  1299. <br>
  1300. <br>
  1301. <br>
  1302. <br>
  1304. <!--end of edit code-->
  1305. <div class="col-sm-4 col-lg-6 col-md-4">
  1306. <label for="startDateInput">Start Date:*</label>
  1307. <!-- Input field for start date -->
  1308. <input type="text" id="startDateInput"
  1309. name="startDate"
  1310. class="date-input form-control"
  1311. style="background-color:white" readonly
  1312. required>
  1313. </div>
  1314. <div class="col-sm-4 col-lg-6 col-md-4">
  1315. <label for="endDateInput">End Date:*</label>
  1316. <select id="endDateInput" name="endDate"
  1317. class="form-control" disabled>
  1318. <option value="0">Select</option>
  1319. </select>
  1320. </div>
  1321. <br>
  1322. <br>
  1323. <br>
  1324. <br>
  1325. <input type="hidden" id="numDaysCount" val=""
  1326. name="days">
  1327. <input type="hidden" id="noofdaysbetweenstartend"
  1328. val="" name="daysrange">
  1329. <div class="col-sm-4 col-lg-6 col-md-4">
  1331. <label for="startPeriodDropdown">Start
  1332. Period:*</label>
  1334. <select id="startPeriodDropdown"
  1335. name="startingSlot" class="form-control"
  1336. required>
  1337. <option value="0">Select</option>
  1338. <option value="1">Morning (6:00
  1339. AM)
  1340. </option>
  1341. <option value="2">Afternoon (2:00
  1342. PM)
  1343. </option>
  1344. </select>
  1345. </div>
  1346. <div class="col-sm-4 col-lg-6 col-md-4">
  1347. <label>End
  1348. Period:*</label>
  1349. <select id="endPeriodDropdown" name="endingSlot"
  1350. class="form-control" required>
  1351. <option value="0">Select</option>
  1352. <option value="1">Afternoon (2:00
  1353. PM)
  1354. </option>
  1355. <option value="2">Evening (10:00
  1356. PM)
  1357. </option>
  1358. </select>
  1359. </div>
  1360. <br>
  1361. <br>
  1362. <br>
  1363. <br>
  1365. <div class="col-sm-4 col-lg-6 col-md-4">
  1366. <label for="numDaysCountDisplay">Selected
  1367. Slots:</label>
  1368. <textarea type="text" id="numDaysCountDisplay"
  1369. class="form-control" readonly
  1370. style="background-color:white"></textarea>
  1371. </div>
  1372. <div class="col-sm-4 col-lg-6 col-md-4">
  1373. <h4>Booking Summary:</h4>
  1374. <p id="summary" val=""></p>
  1375. </div>
  1377. </div>
  1378. <br>
  1379. <div class="row">
  1380. <div
  1381. class="col-md-12 col-lg-12 col-sm-12 text-center">
  1382. <!-- Center align the button -->
  1383. <button type="button"
  1384. class="btn btn-primary prev-step"
  1385. style="background-color: #016d6f; color: white;float: left;">
  1386. Previous
  1387. </button>
  1388. <button type="button"
  1389. class="btn btn-warning reset-step"
  1390. style=" background-color: orangered; color: white; margin: auto;">
  1391. Reset
  1392. </button>
  1393. <button type="button"
  1394. class="btn btn-primary next-step"
  1395. style="background-color: #016d6f; color: white; float: right;">
  1396. Next
  1397. </button>
  1398. </div>
  1399. </div>
  1400. </div>
  1401. </div>
  1402. </div>
  1403. <div class="step step-3">
  1404. <!-- Step 3 form fields here -->
  1405. <h4 style=" margin-left: 10px;">Step 3</h4>
  1406. <div class="container custom-container"
  1407. style="padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;">
  1408. <div>
  1409. <div class="card-body">
  1410. <div class="col-md-12 col-sm-12 col-lg-12">
  1411. <table
  1412. class="table table-bordered table-align center-table">
  1413. <tbody>
  1414. <tr>
  1415. <td class="td-align" style="word-wrap: break-word;
  1416. white-space: normal;"><strong>Hall
  1417. Name:</strong><span
  1418. id="hallNameDisplayStep3"></span>
  1419. </td>
  1420. <td class="td-align"><strong>Zone:
  1421. </strong><span
  1422. id="zoneStep3"></span>
  1423. </td>
  1424. <td class="td-align">
  1425. <strong>Division:
  1426. </strong><span
  1427. id="divisionStep3"></span>
  1428. </td>
  1429. </tr>
  1430. </tbody>
  1431. </table>
  1432. </div>
  1433. <div class="col-sm-4 col-lg-4 col-md-4">
  1434. <input type="hidden" id="userId" name="userId">
  1435. <label class="form-check-label"
  1436. for="uploadDocument">Upload Document for
  1437. Booking:*</label>
  1438. <input type="text" id="showReasonLabel" readonly
  1439. class="form-control"
  1440. style="background-color:white">
  1441. <!-- <div class="col-sm-4 col-lg-4 col-md-4">
  1442. <label class="form-check-label"
  1443. for="reasonforbooking">Reason for Booking:*</label>
  1444. <select type="text" class="form-control"
  1445. id="reasonforbooking" name="reasonId"
  1446. required>
  1447. </select>
  1448. </div> -->
  1449. </div>
  1450. <br>
  1451. <div id="reasonFieldsContainer">
  1452. </div>
  1453. <input type="hidden" name="bookingId" id="bookingId"
  1454. value="0">
  1455. </div>
  1456. </div>
  1457. <div class="row">
  1458. <div class="col-md-12 col-lg-12 col-sm-12 text-center">
  1459. <!-- Center align the button -->
  1460. <button type="button"
  1461. class="btn btn-primary prev-step"
  1462. style="background-color: #016d6f; color: white; float: left;">
  1463. Previous
  1464. </button>
  1465. <button type="button"
  1466. class="btn btn-warning reset-step"
  1467. style="background-color: orangered; color: white; margin: auto;">
  1468. Reset
  1469. </button>
  1470. <button type="submit"
  1471. class="btn btn-primary next-step"
  1472. style="background-color: #016d6f; color: white; float: right;"
  1473. disabled>Next
  1474. </button>
  1475. </div>
  1476. </div>
  1477. </div>
  1478. </div>
  1479. </form>
  1480. <div class="step step-4">
  1481. <h4 style="margin-left:166px">Step 4</h4>
  1482. <div class="container custom-container">
  1483. <div class="header"
  1484. style="background-color: rgb(21,69,93); position: relative;">
  1485. <img src="media/images/logo-sm.png" alt="Logo"
  1486. style="position: absolute; left: 10px; top: 7px; height: 30px;">
  1487. <h6 style="color: white; text-align: center; line-height: 3.1;">
  1488. Payment Details for Confirmation
  1489. <span id="timer"
  1490. style="display: inline; float:right;margin-right:10px;">
  1491. <span class="sand-clock"></span> <!-- Hourglass icon -->
  1492. <span id="timerText">Payment Closes in 15:00</span>
  1493. <!-- Timer text -->
  1494. </span>
  1495. </h6>
  1496. </div>
  1497. <div class="col-md-12">
  1498. <table class="table table-bordered center-table table-align">
  1499. <tbody>
  1500. <tr>
  1501. <td class="td-align"><strong>Full Name:</strong>
  1502. <span id="name_td"></span>
  1503. </td>
  1504. <td class="td-align">
  1505. <strong>Mobile Number:</strong> <span
  1506. id="mobileno_td"></span>
  1507. </td>
  1508. <td class="td-align"><strong>User Type:</strong>
  1509. <span id="usertype_td"></span>
  1510. </td>
  1511. </tr>
  1512. </tbody>
  1513. </table>
  1514. </div>
  1515. <div class="row">
  1516. <div class="col-md-6">
  1517. <table
  1518. class="table table-bordered center-table table-align">
  1519. <tbody>
  1520. <tr>
  1521. <td class="td-align"><strong>Hall
  1522. Name:</strong></td>
  1523. <td class="td-align" style="text-wrap:wrap;">
  1524. <span id="selecthall_td"></span>
  1525. </td>
  1526. </tr>
  1527. <tr>
  1528. <td class="td-align"><strong>No. of
  1529. Days:</strong>
  1530. </td>
  1531. <td class="td-align"><span
  1532. id="numDaysCount_td"></span>
  1533. </td>
  1534. </tr>
  1535. <tr>
  1536. <td class="td-align"><strong>Start
  1537. Date:</strong>
  1538. </td>
  1539. <td class="td-align"><span
  1540. id="startDateInput_td"></span>
  1541. </td>
  1542. </tr>
  1543. <tr>
  1544. <td class="td-align"><strong>End
  1545. Date:</strong></td>
  1546. <td class="td-align"><span
  1547. id="endDateInput_td"></span>
  1548. </td>
  1549. </tr>
  1550. <tr>
  1551. <td class="td-align"><strong>Starting Slot &
  1552. Ending Slot:</strong>
  1553. </td>
  1554. <td class="td-align"><span
  1555. id="startingslot_td"></span>
  1556. </td>
  1557. </tr>
  1558. <tr>
  1559. <td class="td-align"><strong>Uploaded
  1560. Documents:</strong></td>
  1561. <td class="td-align">
  1562. <!-- List to display uploaded docs with small images and names -->
  1563. <div id="uploadedDocsList"
  1564. class="uploaded-docs-list">
  1565. <!-- Each item in the list will have a small image and name -->
  1566. </div>
  1567. </td>
  1568. </tr>
  1569. <div>
  1570. <div id="largeImageContainer"
  1571. class="large-image-container"
  1572. style="display: none;">
  1573. <button id="closeButton" type="button"
  1574. class="close-button">
  1575. <i class="fa fa-times"></i>
  1576. </button>
  1577. <img id="largeImage" src=""
  1578. alt="Large Image">
  1579. </div>
  1580. </div>
  1581. </tbody>
  1582. </table>
  1583. </div>
  1584. <div class="col-md-6">
  1585. <table
  1586. class="table table-bordered center-table table-align">
  1587. <tbody>
  1588. <tr>
  1589. <td class="td-align"><strong>Reason for
  1590. Booking:</strong>
  1591. </td>
  1592. <td class="td-align"><span
  1593. id="reasonforbooking_td"></span>
  1594. </td>
  1595. </tr>
  1596. <tr>
  1597. <td class="td-align"><strong> Hall
  1598. Amount:</strong>
  1599. </td>
  1600. <td><span id="actualhallAmount_td">Rs</span>
  1601. </td>
  1602. </tr>
  1603. <tr>
  1604. <td class="td-align">
  1605. <strong>Discount:</strong>
  1606. </td>
  1607. <td><span id="discount_td">0%</span>
  1608. </td>
  1609. </tr>
  1610. <tr id="additionalcharges" style="display:none">
  1611. <td class="td-align">
  1612. <strong>Rent Amount:</strong>
  1613. </td>
  1614. <td><span id="rentamount_td">0</span></td>
  1615. </tr>
  1616. <tr id="additionalcharges_tr" style="display:none">
  1617. <td class="td-align">
  1618. <strong>Additional charges (Cleaning + P.A.
  1619. System + E.B):</strong>
  1620. </td>
  1621. <td><span id="additionalcharges_td">0</span>
  1622. </td>
  1623. </tr>
  1625. <tr>
  1626. <td class="td-align"><strong>Net
  1627. Amount:</strong>
  1628. </td>
  1629. <td><span id="hallAmount_td">Rs</span>
  1630. </td>
  1631. </tr>
  1632. <tr>
  1633. <td class="td-align"><strong>GST
  1634. Amount:</strong></td>
  1635. <td><span id="gst_td">Rs</span></td>
  1636. </tr>
  1637. <tr>
  1638. <td class="td-align"><strong>Deposit
  1639. Amount:</strong></td>
  1640. <td><span id="depositAmount_td">Rs</span>
  1641. </td>
  1642. </tr>
  1643. <tr>
  1644. <td class="td-align"><strong>Total
  1645. Amount:</strong>
  1646. </td>
  1647. <td><span id="totalAmount_td">Rs</span>
  1648. </td>
  1649. </tr>
  1650. </tbody>
  1651. </table>
  1652. </div>
  1653. </div>
  1654. <div class="row">
  1655. <div class="col-md-12 text-center">
  1656. <!-- Center align the button -->
  1657. <button type="button" class="btn btn-primary prev-step"
  1658. style="background-color: #016d6f; color: white;">
  1659. Previous
  1660. </button>
  1661. </div>
  1662. </div>
  1663. <div align="center">
  1664. <label data-toggle="tooltip" data-placement="top"
  1665. title="Click To View">
  1666. <input type="checkbox" id="checkin"
  1667. onchange="togglePaymentButton(this)"/>
  1668. <a href="#" id="termsLink">I agree to the Terms and
  1669. Conditions</a>
  1670. </label>
  1671. <button type="button" id="confirmPaymentBtn"
  1672. class="btn btn-success" onclick="paymentStart()"
  1673. disabled>Confirm Payment
  1674. </button>
  1675. <input type="hidden" id="btnSubmit"></input>
  1676. </div>
  1677. </div>
  1678. </div>
  1679. </div>
  1680. </div>
  1681. <!-- Page body end -->
  1682. </div>
  1683. </div>
  1684. <!-- Main-body end -->
  1685. </div>
  1686. </div>
  1687. </div>
  1688. </div>
  1689. </div>
  1690. </div>
  1691. </div>
  1692. <!-- Modal HTML for Bootstrap 5 -->
  1693. <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
  1694. <div class="modal-dialog modal-lg">
  1695. <div class="modal-content">
  1696. <div class="modal-header">
  1697. <h5 class="modal-title" id="termsModalLabel">Terms and Conditions</h5>
  1698. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1699. </div>
  1700. <div class="modal-content" style="height: 100vh;">
  1701. <iframe src="media/images/CC Rules & Regulations for Online _Tamil.pdf" width="100%"
  1702. height="600px"></iframe>
  1703. </div>
  1704. <div class="modal-footer">
  1705. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  1706. </div>
  1707. </div>
  1708. </div>
  1709. </div>
  1710. <div th:replace="~{fragments/loginreg :: div}"></div>
  1711. <script th:replace="~{fragments/script :: script}"></script>
  1712. <script th:replace="~{fragments/logRegiOtpScript :: script}"></script>
  1713. <script th:replace="~{fragments/PaymentScript :: script}"></script>
  1714. <script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>
  1716. <!-- Payment script end-->
  1717. <script>
  1718. let reasonMaxData = new Map(); // in beginning
  1719. let reasonLabelData = new Map();
  1720. let reasoncode = new Map();
  1722. document.getElementById('termsLink').addEventListener('click', function (event) {
  1723. event.preventDefault();
  1724. $('#termsModal').modal('show');
  1725. });
  1727. function togglePaymentButton(checkbox) {
  1728. document.getElementById('confirmPaymentBtn').disabled = !checkbox.checked;
  1729. }
  1731. const urlParams = new URLSearchParams(window.location.search);
  1732. const hallId = urlParams.get('hallId');
  1733. $(document).ready(function () {
  1734. if (hallId != null) {
  1735. getHallDetails(hallId);
  1736. $("#selecthall").val(hallId);
  1737. }
  1738. });
  1739. var countdown; // Global variable to hold the interval
  1740. var totalTime = 15 * 60; // 15 minutes in seconds
  1741. // var totalTime = 1 * 60; // for testing
  1742. var timerElement = document.getElementById("timerText");
  1743. var confirmPaymentBtn = document.getElementById("confirmPaymentBtn");
  1744. var checkInCheckbox = document.getElementById("checkin");
  1745. var startTime; // Variable to hold the start timestamp
  1747. // Function to format time in MM:SS
  1748. function formatTime(seconds) {
  1749. var minutes = Math.floor(seconds / 60);
  1750. var seconds = seconds % 60;
  1751. return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
  1752. }
  1754. // Function to start or restart the timer
  1755. function startTimer() {
  1756. if (countdown) {
  1757. clearInterval(countdown); // Clear existing interval if any
  1758. }
  1760. // Record the start time in milliseconds
  1761. startTime = Date.now();
  1763. // Function to update the timer
  1764. function updateTimer() {
  1765. // Calculate the elapsed time in seconds
  1766. var elapsed = Math.floor((Date.now() - startTime) / 1000);
  1767. var timeLeft = totalTime - elapsed;
  1769. if (timeLeft <= 0) {
  1770. clearInterval(countdown);
  1771. confirmPaymentBtn.disabled = true; // Disable the Confirm Payment button when time is up
  1772. checkInCheckbox.disabled = true; // Disable the Check-in checkbox when time is up
  1773. timerElement.innerHTML = "Time expired"; // Optionally update the message
  1774. } else {
  1775. timerElement.innerHTML = "Payment Closes in " + formatTime(timeLeft);
  1776. confirmPaymentBtn.disabled = !checkInCheckbox.checked;
  1777. checkInCheckbox.disabled = false; // Keep checkbox enabled until time is up
  1778. }
  1779. }
  1781. // Display initial time
  1782. timerElement.innerHTML = "Payment Closes in " + formatTime(totalTime);
  1784. // Update the timer every second
  1785. countdown = setInterval(updateTimer, 1000); // 1 second interval
  1786. }
  1788. // Function to reset the timer
  1789. function resetTimer() {
  1790. startTime = Date.now(); // Reset the start time to now
  1791. startTimer();
  1792. }
  1794. var currentStep = 1;
  1795. var updateProgressBar;
  1796. var userId;
  1797. var bookingId;
  1798. let selectedHallName = '';
  1799. let selectedZone = '';
  1801. // Assume userLoggedIn is a variable indicating the user's login status
  1802. function toggleNextButton(step) {
  1803. var nextButton = document.querySelector('.step-' + step + ' .next-step');
  1804. var fields = document.querySelectorAll('.step-' + step + ' [required]');
  1805. var allFieldsFilled = true;
  1806. fields.forEach(function (field) {
  1807. if (!field.value) {
  1808. allFieldsFilled = false;
  1809. }
  1810. });
  1812. if (allFieldsFilled) {
  1813. nextButton.disabled = false; // Enable the button
  1814. } else {
  1815. nextButton.disabled = true; // Disable the buttonn
  1816. }
  1817. }
  1819. // Call the function for Step 1 when the page loads
  1820. document.addEventListener('DOMContentLoaded', function () {
  1821. // toggleNextButton(1);
  1822. toggleNextButton(2);
  1823. toggleNextButton(3);
  1824. });
  1826. document.querySelectorAll('.step-2 [required]').forEach(function (field) {
  1827. field.addEventListener('input', function () {
  1828. toggleNextButton(2);
  1829. });
  1830. });
  1832. document.querySelectorAll('.step-3 [required]').forEach(function (field) {
  1833. field.addEventListener('input', function () {
  1834. toggleNextButton(3);
  1835. });
  1836. });
  1838. function handleSaveAndContinueStep3() {
  1839. if (isLogin) {
  1840. CheckBookingLimitation(function (isAllowed) {
  1841. if (isAllowed) {
  1842. saveBookingDetails();
  1843. }
  1844. });
  1845. } else {
  1846. showAlertForLogin();
  1847. }
  1848. return false;
  1849. }
  1852. // Function to show SweetAlert for login
  1853. function showAlertForLogin() {
  1854. Swal.fire({
  1855. title: 'Mobile Number Not Registered!',
  1856. text: 'Please log in to proceed.',
  1857. icon: 'info',
  1858. showCancelButton: true,
  1859. confirmButtonText: 'Login',
  1860. cancelButtonText: 'Cancel',
  1861. }).then((result) => {
  1862. if (result.isConfirmed) {
  1863. $('#loginModal').modal('show');
  1864. }
  1865. });
  1866. }
  1868. document.querySelector(".step-3 .next-step").addEventListener("click", function () {
  1869. displayStep(3);
  1870. });
  1872. function fetchReasonsAndPopulateDropdown() {
  1873. // Make an AJAX call to fetch all reasons
  1874. $.ajax({
  1875. url: '/communityhall/admin/api/getReasons',
  1876. type: 'GET',
  1877. dataType: 'json'
  1878. })
  1879. .done(function (data) {
  1880. const reasonDropdown = $('#reasonforbooking');
  1881. reasonDropdown.empty();
  1882. reasonDropdown.append($('<option selected value="0"></option>').text('Select a reason'));
  1884. // Populate the dropdown and store reason metadata
  1885. $.each(data, function (index, reason) {
  1886. reasonDropdown.append($('<option></option>').attr('value', reason.reasonId).text(reason.reason));
  1887. reasonMaxData.set(reason.reasonId, reason.maxdays);
  1888. reasonLabelData.set(reason.reasonId, reason.reason);
  1889. reasoncode.set(reason.reasonId, reason.reasoncode);
  1890. });
  1892. // Add change event listener to the dropdown
  1893. reasonDropdown.change(function () {
  1894. const selectedReasonId = $(this).val();
  1895. const selectedReasonCode = reasoncode.get(parseInt(selectedReasonId));
  1896. const selectedHallId = document.getElementById("statichallId").value; // Getting the selected hall ID
  1898. // Make another AJAX call to get hall details based on the selected hall ID
  1899. $.ajax({
  1900. type: 'GET',
  1901. url: '/communityhall/user/api/gethalldetails/' + selectedHallId,
  1902. success: function (response) {
  1903. // console.log(response);
  1904. const isSGE = response.sge; // Fetch SGE status from the response
  1905. const isCGE = response.cge; // Fetch CGE status from the response
  1907. // Check for State Government Event (SGE)
  1908. if (selectedReasonCode === 'SGE' && !isSGE) {
  1909. // Show popup for State govt event
  1910. Swal.fire({
  1911. title: 'Government Event',
  1912. text: 'Shenoy Nagar Community Center (Auditorium) full Mandapam (Amma Arangam) is available for state government events.',
  1913. icon: 'info',
  1914. confirmButtonText: 'OK'
  1915. }).then((result) => {
  1916. if (result.isConfirmed && !isSGE) {
  1917. window.location.href = '/communityhall/hallbookingform';
  1918. }
  1919. });
  1920. }
  1921. // Check for Central Government Event (CGE)
  1922. else if (selectedReasonCode === 'CGE' && !isCGE) {
  1923. // Show popup for Central govt event
  1924. Swal.fire({
  1925. title: 'Government Event',
  1926. text: 'Shenoy Nagar Community Center (Auditorium) full Mandapam (Amma Arangam) is available for central government events.',
  1927. icon: 'info',
  1928. confirmButtonText: 'OK'
  1929. }).then((result) => {
  1930. if (result.isConfirmed && !isCGE) {
  1931. // Redirect only if hallId is not 3
  1932. window.location.href = '/communityhall/hallbookingform';
  1933. }
  1934. });
  1935. }
  1936. },
  1937. error: function (xhr, status, error) {
  1938. console.error('Error fetching hall details:', error);
  1939. }
  1940. });
  1941. });
  1942. })
  1943. .fail(function (xhr, status, error) {
  1944. console.error('Error fetching reasons:', error);
  1945. });
  1946. }
  1948. var ch = 0;
  1950. function saveBookingDetails() {
  1951. //alert("saveBookingDetails call:-"+ch++);
  1952. $("#startPeriodDropdown").prop("disabled", false);
  1953. $("#endPeriodDropdown").prop("disabled", false);
  1954. var form = document.getElementById('booking');
  1955. var formData = new FormData(form);
  1956. // Debugging: Log each FormData entry
  1957. for (var pair of formData.entries()) {
  1958. //console.log(pair[0] + ', ', pair[1]);
  1959. }
  1960. $.ajax({
  1961. url: '/communityhall/user/api/saveTheRequest2',
  1962. type: 'POST',
  1963. data: formData,
  1964. processData: false,
  1965. contentType: false,
  1966. success: function (response) {
  1967. // console.log("response:--" + response.status);
  1969. if (response.status === 'slotOccupied') {
  1970. Swal.fire({
  1971. icon: 'error',
  1972. title: 'Slot Occupied',
  1973. text: 'The selected slot is already occupied. Please choose a different slot.',
  1974. confirmButtonText: 'OK'
  1975. }).then(function () {
  1976. location.reload(); // Example: reload the page
  1977. });
  1978. } else {
  1979. userId = response.userId;
  1980. bookingId = response.bookingId;
  1981. $("#bookingId").val(response.bookingId);
  1982. $("#userId").val(response.userId);
  1983. $("#selecthall_td").html(response.hallName);
  1984. $("#numDaysCount_td").html(response.NoOfDay);
  1985. $("#startDateInput_td").html(response.startDate);
  1986. $("#endDateInput_td").html(response.endDate);
  1987. $("#reasonforbooking_td").html(response.reason);
  1988. $("#hallAmount_td").html(response.hallAmount);
  1990. function getTimeOfDay(slot) {
  1991. if (slot === 1) {
  1992. return "Morning";
  1993. } else if (slot === 2) {
  1994. return "Evening";
  1995. } else {
  1996. return "Invalid slot";
  1997. }
  1998. }
  2000. $("#startingslot_td").html(getTimeOfDay(response.startingSlot) + " to " + getTimeOfDay(response.endingSlot));
  2001. /*$("#gst_td").html(response.gst);
  2002. $("#depositAmount_td").html(response.depositAmount);
  2003. $("#discount_td").html(response.discount + "%");
  2004. $("#actualhallAmount_td").html(response.actualhallamount);
  2005. $("#totalAmount_td").html(response.totalAmount);*/
  2006. $("#name_td").html(response.username);
  2007. $("#mobileno_td").html(response.mobileNo);
  2008. $("#usertype_td").html(response.userType);
  2009. /*if (response.reasoncode === 'SGE') {
  2010. document.getElementById("additionalcharges").style.display = 'table-row'; // Show row
  2011. document.getElementById("additionalcharges_tr").style.display = 'table-row'
  2012. $("#additionalcharges_td").html(response.additionalcharges);
  2013. $("#rentamount_td").html(0);
  2014. $("#actualhallAmount_td").html(response.actualhallamount);
  2015. $("#hallAmount_td").html(response.additionalcharges);
  2016. $("#totalAmount_td").html(response.totalAmount);
  2017. } else {
  2018. document.getElementById("additionalcharges").style.display = 'none'; // Hide row
  2019. document.getElementById("additionalcharges_tr").style.display = 'none'; // Hide row
  2020. }*/
  2022. if (response.reasoncode === 'SGE') {
  2023. document.getElementById("additionalcharges").style.display = 'table-row'; // Show row
  2024. document.getElementById("additionalcharges_tr").style.display = 'table-row'
  2025. $("#additionalcharges_td").html(response.additionalcharges);
  2026. $("#rentamount_td").html(0);
  2027. $("#actualhallAmount_td").html(response.actualhallamount);
  2028. $("#hallAmount_td").html(response.additionalcharges);
  2029. $("#totalAmount_td").html(response.totalAmount);
  2030. $("#hallAmount_td").html(response.hallAmount);
  2031. $("#gst_td").html(response.gst);
  2032. $("#depositAmount_td").html(response.depositAmount);
  2033. $("#discount_td").html(response.discount + "%");
  2035. } else if (response.reasoncode === 'CGE') {
  2036. document.getElementById("additionalcharges").style.display = 'table-row'; // Show row
  2037. document.getElementById("additionalcharges_tr").style.display = 'table-row'
  2038. $("#additionalcharges_td").html(response.additionalcharges);
  2039. $("#hallAmount_td").html(response.hallAmount)
  2040. $("#rentamount_td").html(response.rentAmount);
  2041. $("#actualhallAmount_td").html(response.actualhallamount);
  2042. $("#hallAmount_td").html(response.netAmount);
  2043. $("#gst_td").html(response.gstAmount);
  2044. $("#depositAmount_td").html(response.depositAmount);
  2045. $("#discount_td").html(response.discount + "%");
  2046. $("#totalAmount_td").html(response.totalAmount);
  2048. } else {
  2049. document.getElementById("additionalcharges").style.display = 'none'; // Hide row
  2050. document.getElementById("additionalcharges_tr").style.display = 'none'; // Hide row
  2051. $("#gst_td").html(response.gst);
  2052. $("#depositAmount_td").html(response.depositAmount);
  2053. $("#discount_td").html(response.discount + "%");
  2054. $("#actualhallAmount_td").html(response.actualhallamount);
  2055. $("#totalAmount_td").html(response.totalAmount);
  2056. }
  2057. displayDocumentDetails(response.uploadedDocs);
  2058. resetTimer();
  2059. }
  2060. },
  2061. error: function (xhr, status, error) {
  2062. console.error('Error fetching hall names:', error);
  2063. }
  2064. });
  2065. $("#startPeriodDropdown").prop("disabled", true);
  2066. $("#endPeriodDropdown").prop("disabled", true);
  2067. }
  2070. function displayDocumentDetails(uploadedDocs) {
  2071. const uploadedDocsList = $("#uploadedDocsList");
  2072. uploadedDocsList.empty(); // Clear existing items
  2074. uploadedDocs.forEach(function (doc) {
  2075. const listItem = $('<li>');
  2076. const thumbnail = $('<img>').addClass('thumbnail-img');
  2078. // Function to truncate the document name
  2079. function truncateName(name, maxLength) {
  2080. if (name.length <= maxLength) {
  2081. return name;
  2082. }
  2084. const extIndex = name.lastIndexOf('.');
  2085. const ext = name.substring(extIndex);
  2086. const truncatedName = name.substring(0, maxLength - ext.length - 3) + '...' + ext;
  2087. return truncatedName;
  2088. }
  2090. const truncatedName = truncateName(doc.documentName, 10); // Adjust the maxLength as needed
  2092. if (doc.bookingDocUrl.endsWith('.pdf')) {
  2093. // Set the thumbnail to a default image for PDFs
  2094. const defaultPdfThumbnail = 'media/images/pdf.jpg'; // Replace with your default thumbnail image path
  2095. thumbnail.attr('src', defaultPdfThumbnail);
  2096. listItem.append(thumbnail).append(' ' + truncatedName);
  2098. thumbnail.on('click', function () {
  2099. // Create an iframe to display the PDF
  2100. const pdfViewer = $('<iframe>').attr({
  2101. src: doc.bookingDocUrl,
  2102. width: '100%',
  2103. height: '600px' // Adjust as needed
  2104. });
  2106. // Hide the image and show the PDF viewer
  2107. $('#largeImage').hide();
  2108. $('#largeImageContainer').find('iframe').remove();
  2109. $('#largeImageContainer').append(pdfViewer);
  2110. $('#largeImageContainer').show();
  2111. });
  2112. } else {
  2113. // For other document types, show the actual image as thumbnail
  2114. thumbnail.attr('src', doc.bookingDocUrl);
  2115. listItem.append(thumbnail).append(' ' + truncatedName);
  2117. thumbnail.on('click', function () {
  2118. $('#largeImageContainer iframe').remove();
  2119. $('#largeImage').attr('src', doc.bookingDocUrl).show();
  2120. $('#largeImageContainer').show();
  2121. });
  2122. }
  2124. uploadedDocsList.append(listItem);
  2125. });
  2126. }
  2129. $("#closeButton").on('click', function () {
  2130. $('#largeImageContainer').hide(); // Hide the large image container
  2131. $('#largeImage').attr('src', '').hide(); // Reset and hide image
  2132. $('#largeImageContainer iframe').remove(); // Remove iframe if present
  2133. });
  2135. function fetchReasonDocumentDetails(reasonId) {
  2136. $('#reasonMaxDates').val(reasonMaxData.get(reasonId));
  2137. $('#showReasonLabel').val(reasonLabelData.get(reasonId));
  2138. $.ajax({
  2139. url: '/communityhall/admin/api/getReasonDocumentDetails',
  2140. type: 'GET',
  2141. dataType: 'json',
  2142. data: {reasonId: reasonId}
  2143. })
  2144. .done(function (data) {
  2145. validateForm();
  2147. const reasonFieldsContainer = $('#reasonFieldsContainer');
  2148. reasonFieldsContainer.empty();
  2149. const rowDiv = $('<div class="row"></div>');
  2150. $.each(data, function (index, detail) {
  2151. if (detail.addTextField === true) {
  2152. const fieldDiv = $('<div class="col-sm-4 form-group"></div>');
  2153. const label = $('<label>' + detail.fieldName + ' *</label>');
  2154. const input = $('<input type="text" class="form-control" name="' + detail.fieldName + '" required>');
  2155. // Add event listener for input validation
  2156. input.on('input', function () {
  2157. // Replace any non-letter characters with an empty string
  2158. //this.value = this.value.replace(/[^a-zA-Z]/g, '');
  2159. });
  2161. fieldDiv.append(label);
  2162. fieldDiv.append(input);
  2163. rowDiv.append(fieldDiv);
  2164. }
  2166. if (detail.addDocumentField === true) {
  2167. const fieldDiv2 = $('<div class="col-sm-4 form-group"></div>');
  2168. const fileInput = $('<input type="file" class="form-control file-upload-field" id="upload" name="' + detail.docFieldName + '" required accept=".jpg, .jpeg, .pdf">');
  2169. fieldDiv2.append('<label>' + detail.docFieldName + '*</label>').append(fileInput);
  2170. rowDiv.append(fieldDiv2);
  2171. }
  2172. });
  2173. reasonFieldsContainer.append(rowDiv);
  2174. })
  2176. .fail(function (xhr, status, error) {
  2177. console.error('Error fetching reason document details:', error);
  2178. });
  2179. }
  2181. // Call the function to fetch reasons and populate the dropdown when the document is ready
  2182. $(document).ready(function () {
  2183. fetchReasonsAndPopulateDropdown();
  2184. $('#reasonforbooking').change(function () {
  2185. const selectedReasonId = parseInt($(this).val()); // Convert the value to an integer
  2186. fetchReasonDocumentDetails(selectedReasonId);
  2187. });
  2188. });
  2190. // Function to toggle hall details container and fetch hall details
  2191. function toggleHallDetailsContainer() {
  2192. var selectBox = document.getElementById("selecthall");
  2193. var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  2194. var hallDetailsContainer = document.getElementById("hallDetailsContainer");
  2195. if (selectedValue !== "") {
  2196. hallDetailsContainer.style.display = "block"; // Show hall details container if a hall is selected
  2197. // Get the selected hall ID
  2198. var hallId = selectBox.options[selectBox.selectedIndex].value;
  2199. getHallDetails(hallId); // Fetch hall details
  2200. // Other code for displaying selected details
  2201. } else {
  2202. hallDetailsContainer.style.display = "none"; // Hide hall details container if no hall is selected
  2203. // Clear the selected details in Step 2 and Step 3
  2204. $('#hallNameDisplayStep2').text('');
  2205. $('#hallNameDisplayStep3').text('');
  2206. $('#zoneStep2').text('');
  2207. $('#zoneStep3').text('');
  2208. $('#divisionStep2').text('');
  2209. $('#divisionStep3').text('');
  2211. // Clear other details if needed
  2212. }
  2213. }
  2215. function togglePaymentButton(checkbox) {
  2216. var confirmPaymentBtn = document.getElementById('confirmPaymentBtn');
  2217. confirmPaymentBtn.disabled = !checkbox.checked;
  2218. }
  2220. // Update the displayStep function to pass hallName to Step 4
  2221. function displayStep(stepNumber) {
  2222. if (stepNumber >= 1 && stepNumber <= 4) {
  2223. if (validateStep(currentStep)) {
  2224. $(".step-" + currentStep).hide();
  2225. $(".step-" + stepNumber).show();
  2226. currentStep = stepNumber;
  2227. updateProgressBar();
  2229. // Populate hallName, zone, and division in Step 2 and Step 3
  2230. if (stepNumber === 2 || stepNumber === 3) {
  2231. $('#hallNameDisplayStep2').text(selectedHallName);
  2232. $('#hallNameDisplayStep3').text(selectedHallName);
  2233. $('#zoneStep2').text(zone);
  2234. $('#zoneStep3').text(zone);
  2235. $('#divisionStep2').text('');
  2236. $('#divisionStep3').text('');
  2238. $('#selecthall_td').text(selectedHallName);
  2239. }
  2241. // Handle displaying the SweetAlert in Step 3
  2242. } else {
  2243. //alert("Please fill in all required fields before proceeding.");
  2244. }
  2245. }
  2246. }
  2249. function validateStep(stepNumber) {
  2250. }
  2252. $(document).ready(function () {
  2253. $('.step').hide();
  2254. $('.step-1').show();
  2255. var currentStep = 1; // Assuming you have this variable defined somewhere in your code
  2257. // Function to validate step 3
  2258. function validateStep3() {
  2259. let isValid = true;
  2260. let selectedReason = $('#reasonforbooking').val();
  2261. // Check if a reason is selected
  2262. if (!selectedReason) {
  2263. isValid = false;
  2264. } else {
  2265. // Iterate through each input associated with the selected reason
  2266. $(`#reasonFieldsContainer .${selectedReason} input[type="text"], #reasonFieldsContainer .${selectedReason} input[type="file"]`).each(function () {
  2267. if ($(this).prop('required') && !$(this).val()) {
  2268. isValid = false;
  2269. return false; // Exit the loop early if any required field is empty
  2270. }
  2271. });
  2272. }
  2274. // Enable/disable the next button based on validation
  2275. $('.next-step').prop('disabled', !isValid);
  2276. }
  2278. // Event listener for reason dropdown change
  2279. $('#reasonforbooking').change(function () {
  2280. let selectedReason = $(this).val();
  2281. $("#startDateInput").val('');
  2282. $("#endDateInput").val(0);
  2283. $("#startPeriodDropdown").val(0).prop("disabled", false);
  2284. $("#endPeriodDropdown").val(0).prop("disabled", false);
  2285. $("#numDaysCount").val('');
  2286. $("#numDaysCountDisplay").val('');
  2287. $('#summary').html('');
  2288. // Show/hide fields based on selected reason
  2289. $('#reasonFieldsContainer').children().hide();
  2290. if (selectedReason) {
  2291. $(`#reasonFieldsContainer .${selectedReason}`).show();
  2292. }
  2293. // Validate the fields for the selected reason
  2294. validateStep3();
  2295. });
  2297. // Event listener for input changes within reason fields in Step 3
  2298. $('#reasonFieldsContainer').on('change', 'input, select', function () {
  2299. validateStep3();
  2300. });
  2302. $(".next-step").click(function () {
  2303. var valid = true;
  2305. // Validate all required text inputs and file fields in Step 3
  2306. if (currentStep === 3) {
  2307. $('.step-3 input[required], .step-3 select[required]').each(function () {
  2308. if ($(this).val() === '') {
  2309. $(this).addClass('error'); // Add error class
  2310. valid = false;
  2311. return false; // Break the loop
  2312. } else {
  2313. $(this).removeClass('error'); // Remove error class if valid
  2314. }
  2315. });
  2317. $('.step-3 input[type="file"][required]').each(function () {
  2318. if ($(this)[0].files.length === 0) {
  2319. $(this).addClass('error'); // Add error class
  2320. valid = false;
  2321. return false; // Break the loop
  2322. } else {
  2323. $(this).removeClass('error'); // Remove error class if valid
  2324. }
  2325. });
  2326. }
  2328. if (!valid) {
  2329. return; // Stop if validation fails
  2330. }
  2332. if (currentStep < 4) {
  2333. $(".step-" + currentStep).fadeOut(500, function () {
  2334. if (currentStep === 3 && isLogin === false) {
  2335. $(".step-" + currentStep).fadeIn(500);
  2336. updateProgressBar();
  2337. return "";
  2338. } else {
  2339. currentStep++;
  2340. $(".step-" + currentStep).fadeIn(500);
  2341. updateProgressBar();
  2342. }
  2343. });
  2344. }
  2345. });
  2347. $(".prev-step").click(function () {
  2348. $('#bookandcontinue').prop('disabled', false);
  2349. if (currentStep > 1) {
  2350. $(".step-" + currentStep).fadeOut(500, function () {
  2351. currentStep--;
  2352. $(".step-" + currentStep).fadeIn(500);
  2354. updateProgressBar();
  2355. clearInterval(countdown);
  2356. });
  2357. }
  2358. });
  2359. $("#bookandcontinue").click(function () {
  2360. $('#startDateInput').val('');
  2361. $('#endDateInput').prop('disabled', true).val('0');
  2362. $('#startPeriodDropdown').val('0');
  2363. $('#endPeriodDropdown').val('0');
  2364. $('#numDaysCount').val(''); // Reset the number of days input
  2365. $('#numDaysCountDisplay').val('');
  2366. $('#summary').html('');
  2367. $('#relation').val('0');
  2368. $('#reasonforbooking').val(0);
  2369. });
  2371. $(".step-2 .reset-step").click(function () {
  2372. $('.step-2 input[type="text"], .step-2 select').val(function () {
  2373. return this.defaultValue;
  2374. });
  2376. $('.step-2 input[type="checkbox"], .step-2 input[type="radio"]').prop('checked', false);
  2377. $('#endDateInput').prop('disabled', true).val('0');
  2378. $('#startPeriodDropdown').val('0');
  2379. $('#endPeriodDropdown').val('0');
  2380. $('#numDaysCount').val(''); // Reset the number of days input
  2381. $('#numDaysCountDisplay').val('');
  2382. $('#summary').html('');
  2383. $('#relation').val('0');
  2384. $('#reasonforbooking').val(0);
  2385. $('.step-2 .error-message').hide();
  2386. toggleNextButton(2); // Ensure button state reflects field values after reset
  2387. });
  2389. $(".step-3 .reset-step").click(function () {
  2390. // Reset all input fields and select elements to their default values
  2391. $('.step-3 input[type="text"]:not(#showReasonLabel), .step-3 input[type="file"]').val(function () {
  2392. return this.defaultValue;
  2393. });
  2394. //$('.step-3 .error-message').hide();
  2395. //$('.step-3 .form-control').parent().hide();
  2396. //$('#reasonforbooking').parent().show();
  2397. validateStep3();
  2398. });
  2400. $(".step-2 .next-step").click(function () {
  2401. var reasonforbooking = $("#reasonforbooking").val();
  2402. if (reasonforbooking !== "0") {
  2403. $(".step-3 .next-step").prop("disabled", false);
  2404. } else {
  2405. $(".step-3 .next-step").prop("disabled", true);
  2406. }
  2407. ;
  2408. var relationship = $("#relation").val();
  2409. if (relationship !== "0") {
  2410. $(".step-2 .next-step").prop("disabled", false);
  2411. } else {
  2412. $(".step-2 .next-step").prop("disabled", true);
  2413. }
  2414. ;
  2415. });
  2417. $(".cancel-step").click(function () {
  2418. // Redirect to the cancel page or handle cancellation logic here
  2419. window.location.href = "/dashboard";
  2420. });
  2422. updateProgressBar = function () {
  2423. var progressPercentage = ((currentStep - 1) / 3) * 100;
  2424. $(".progress-bar").css("width", progressPercentage + "%");
  2425. };
  2427. // State variable to track compression status
  2428. let isCompressing = false;
  2430. // Attach the validation function to file input change event
  2431. $(document).on('change', '.file-upload-field', function () {
  2432. validateFile(this);
  2433. });
  2435. function validateFile(fileInput) {
  2436. const allowedExtensions = /(\.jpg|\.jpeg|\.pdf)$/i;
  2437. const file = fileInput.files[0];
  2438. const filePath = fileInput.value;
  2439. let errorMessage = '';
  2441. // Clear any previous error message
  2442. clearError(fileInput);
  2444. // Check for duplicate files
  2445. if (isDuplicateFile(file.name, fileInput)) {
  2446. errorMessage = 'This file has already been selected. Please choose a different file.';
  2447. fileInput.value = ''; // Clear the file input
  2448. displayError(fileInput, errorMessage);
  2449. return;
  2450. }
  2452. // Validate file type
  2453. if (!allowedExtensions.exec(filePath)) {
  2454. errorMessage = 'Only JPG, JPEG, and PDF files are allowed.';
  2455. fileInput.value = ''; // Clear the file input
  2456. displayError(fileInput, errorMessage);
  2457. }
  2458. // Handle image files separately
  2459. else if (/(\.jpg|\.jpeg)$/i.test(filePath) && file.size > 2097152) {
  2460. compressImage(file).then(compressedFile => {
  2461. const dataTransfer = new DataTransfer();
  2462. dataTransfer.items.add(compressedFile);
  2463. fileInput.files = dataTransfer.files;
  2465. // Validate file size after compression
  2466. validateFileSize(fileInput);
  2467. }).catch(error => {
  2468. errorMessage = 'Error compressing image.';
  2469. displayError(fileInput, errorMessage);
  2470. });
  2471. }
  2472. // Directly validate PDF file size
  2473. else if (/(\.pdf)$/i.test(filePath) && file.size > 2097152) {
  2474. errorMessage = 'PDF file size exceeds the 2MB limit.';
  2475. fileInput.value = ''; // Clear the file input
  2476. displayError(fileInput, errorMessage);
  2477. } else {
  2478. // console.log('File size is within limit:', file.size, 'bytes');
  2479. clearError(fileInput);
  2480. }
  2481. }
  2484. function isDuplicateFile(fileName, currentInput) {
  2485. const fileInputs = document.querySelectorAll('.file-upload-field');
  2486. for (let input of fileInputs) {
  2487. if (input !== currentInput && input.files.length > 0 && input.files[0].name === fileName) {
  2488. return true;
  2489. }
  2490. }
  2491. return false;
  2492. }
  2494. function clearError(fileInput) {
  2495. const errorElements = fileInput.parentNode.getElementsByClassName('error-message');
  2496. while (errorElements.length > 0) {
  2497. errorElements[0].remove();
  2498. }
  2499. }
  2501. // Function to compress image using canvas
  2502. function compressImage(file) {
  2503. return new Promise((resolve, reject) => {
  2504. const reader = new FileReader();
  2505. reader.onload = function (event) {
  2506. const img = new Image();
  2507. img.onload = function () {
  2508. const canvas = document.createElement('canvas');
  2509. const ctx = canvas.getContext('2d');
  2510. const maxSize = 2097152; // 2MB in bytes
  2511. let scale = 1;
  2512. if (file.size > maxSize) {
  2513. scale = Math.sqrt(maxSize / file.size);
  2514. }
  2515. canvas.width = img.width * scale;
  2516. canvas.height = img.height * scale;
  2517. ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  2519. // Convert canvas content to blob
  2520. canvas.toBlob(blob => {
  2521. resolve(new File([blob], file.name, {
  2522. type: 'image/jpeg',
  2523. lastModified: Date.now()
  2524. }));
  2525. }, 'image/jpeg', 0.7); // Adjust JPEG quality as needed (0.7 is 70% quality)
  2526. };
  2527. img.src = event.target.result;
  2528. };
  2529. reader.readAsDataURL(file);
  2530. });
  2531. }
  2533. // Function to validate file size after compression
  2534. function validateFileSize(fileInput) {
  2535. const file = fileInput.files[0];
  2536. if (file && file.size > 2097152) {
  2537. //console.log('File size is still greater than 2MB after compression.');
  2538. // Handle the situation where the file size is still greater than 2MB
  2539. displayError(fileInput, 'File size is still greater than 2MB after compression.');
  2540. fileInput.value = ''; // Clear the file input
  2541. } else {
  2542. //console.log('File size is within limit after compression.');
  2543. // Handle the situation where the file size is within the limit
  2544. }
  2545. }
  2547. // Function to display error messages
  2548. function displayError(fileInput, errorMessage) {
  2549. // Example implementation: show error message near the file input
  2550. let errorContainer = fileInput.nextElementSibling;
  2551. if (!errorContainer || !errorContainer.classList.contains('error-message')) {
  2552. errorContainer = document.createElement('div');
  2553. errorContainer.classList.add('error-message');
  2554. fileInput.parentNode.insertBefore(errorContainer, fileInput.nextSibling);
  2555. }
  2556. errorContainer.textContent = errorMessage;
  2557. }
  2559. // Initial validation check for step 3
  2560. validateStep3();
  2562. // Log statement to ensure the button is being enabled
  2563. //console.log("Enabling the button...");
  2564. $('.step-1 .next-step').prop('disabled', false);
  2565. });
  2567. var index = 0;
  2568. var hall;
  2570. $(function () {
  2571. $("#selecthall").select2();
  2572. });
  2573. $.ajax({
  2574. type: 'GET',
  2575. url: '/communityhall/user/api/gethallnames',
  2576. success: function (response) {
  2577. // Populate the dropdown options with the received hall names
  2578. var selectHallDropdown = $('#selecthall');
  2579. $.each(response, function (index, hall) {
  2580. if (hallId == hall.hallId) {
  2581. selectHallDropdown.append($('<option></option>').attr('value', hall.hallId).text(hall.hallName));
  2582. selectHallDropdown.find('option[value="' + hall.hallId + '"]').prop('selected', true);
  2583. } else {
  2584. selectHallDropdown.append($('<option></option>').attr('value', hall.hallId).text(hall.hallName));
  2585. }
  2586. });
  2587. },
  2588. error: function (xhr, status, error) {
  2589. console.error('Error fetching hall names:', error);
  2590. }
  2591. });
  2593. $(document).ready(function () {
  2594. $('#selecthall').change(function () {
  2595. var selectedHallId = $(this).val();
  2596. // Call the getHallDetails function with the selected hall ID
  2597. getHallDetails(selectedHallId);
  2598. });
  2599. });
  2601. // Function to retrieve hall details based on hallId
  2602. function getHallDetails(hallId) {
  2603. $.ajax({
  2604. type: 'GET',
  2605. url: '/communityhall/user/api/gethalldetails/' + hallId,
  2606. success: function (response) {
  2607. // console.log(response);
  2608. // Display the container
  2609. $('#hallDetailsContainer').show();
  2611. // Set hall details
  2612. $('#zone').html('<strong>' + response.zone + '</strong>&nbsp;&nbsp;&nbsp;&nbsp; Division: <strong>' + response.division + '</strong>');
  2613. $('#address').html('<strong>' + response.doorNo + ', ' + response.street + ', ' + response.area + ', ' + response.city + ', ' + response.pinCode + '</strong>');
  2614. $('#landmark').html('<strong>' + response.landMark + '</strong>');
  2615. $('#seatingCapacity').html('<strong>' + response.seatingCapacity + '</strong>');
  2616. var parkingCapacity = response.parkingCapacity;
  2617. var parkingAvailability = parkingCapacity > 0 ? "Yes" : "No";
  2618. $('#parkingCapacity').html('<strong>' + parkingAvailability + '</strong>');
  2619. $('#caretakerNumber').html('<strong>' + response.hallInchargeMobno + '</strong>');
  2620. $('#rentAmount').html('<strong>' + response.depositAmount + '</strong>');
  2621. $('#gst').html('<strong>' + response.gst + '</strong>');
  2622. $('#fullDayAmount').html('<strong>' + response.fullDayRent + '</strong>');
  2623. $('#halfrentAmount').html('<strong>' + response.halfDepositAmount + '</strong>');
  2624. $('#halfDayAmount').html('<strong>' + response.halfDayRent + '</strong>');
  2625. $('#ebunit').html('<strong>' + response.ebCostPerUnit + '</strong>');
  2626. $('#statichallId').val(response.hallId);
  2628. // Set hall images
  2629. var carouselInner = $('#hallImagesCarousel .carousel-inner');
  2630. carouselInner.empty(); // Clear existing images
  2632. $.each(response.hallImagesList, function (index, image) {
  2633. var itemClass = (index === 0) ? 'carousel-item active' : 'carousel-item';
  2634. var img = $('<img>').addClass('d-block w-100').attr('src', image.hallImage).attr('alt', 'Hall Image');
  2635. var carouselItem = $('<div>').addClass(itemClass).append(img);
  2636. carouselInner.append(carouselItem);
  2637. });
  2639. // Clear existing floor details to prevent duplicates
  2640. $('#hallareainsqft').empty();
  2642. // Use a Set to store unique floor details
  2643. var uniqueFloorDetails = new Set();
  2645. $.each(response.floorDetailsList, function (index, hallarea) {
  2647. // Construct the text for each floor's details
  2648. var floorDetailText = hallarea.floor + " - " + hallarea.hallarea + " Sq.ft ,";
  2650. // Add to the Set if it's not a duplicate
  2651. if (!uniqueFloorDetails.has(floorDetailText)) {
  2652. uniqueFloorDetails.add(floorDetailText);
  2653. // Append the floor details to the target element
  2654. $('#hallareainsqft').append('<strong>' + floorDetailText + '</strong>');
  2655. }
  2656. });
  2658. // Initialize ViewerJS on the carousel after images are loaded
  2659. initializeViewerJS();
  2661. getBookingCalendar(hallId);
  2663. // Set hall details in Step 2 and Step 3
  2664. $('#hallNameDisplayStep2').text(response.hallName);
  2665. $('#hallNameDisplayStep3').text(response.hallName);
  2666. $('#zoneStep2').text(response.zone);
  2667. $('#zoneStep3').text(response.zone);
  2668. $('#divisionStep2').text(response.division);
  2669. $('#divisionStep3').text(response.division);
  2670. },
  2672. error: function (xhr, status, error) {
  2673. console.error('Error fetching hall details:', error);
  2674. }
  2675. });
  2676. }
  2679. function initializeViewerJS() {
  2680. // Ensure ViewerJS initialization after images are added to the DOM
  2681. var carouselInner = document.querySelector('#hallImagesCarousel .carousel-inner');
  2682. var floordetails = document.querySelector('#hallareainsqft');
  2684. // Destroy existing viewer instance if it exists
  2685. if (carouselInner.viewer) {
  2686. carouselInner.viewer.destroy();
  2687. }
  2688. if (floordetails.viewer) {
  2689. floordetails.viewer.destroy();
  2690. }
  2691. // Initialize ViewerJS
  2692. var viewer = new Viewer(carouselInner, {
  2693. inline: false,
  2694. viewed: function () {
  2695. viewer.zoomTo(0.5); // Adjust the zoom level here
  2696. },
  2697. toolbar: {
  2698. zoomIn: 4,
  2699. zoomOut: 4,
  2700. oneToOne: 4,
  2701. reset: 4,
  2702. prev: 4,
  2703. play: {
  2704. show: 4,
  2705. size: 'large',
  2706. },
  2708. next: 4,
  2709. rotateLeft: 4,
  2710. rotateRight: 4,
  2711. flipHorizontal: 4,
  2712. flipVertical: 4,
  2713. },
  2714. });
  2715. carouselInner.viewer = viewer;
  2716. }
  2718. function showBookingDetails() {
  2719. var bookingDetailsDiv = document.getElementById('bookingdetails');
  2720. // Toggle the display property (show/hide)
  2721. if (bookingDetailsDiv.style.display === 'none') {
  2722. bookingDetailsDiv.style.display = 'block';
  2723. } else {
  2724. bookingDetailsDiv.style.display = 'none';
  2725. }
  2726. }
  2728. function previewImage(event) {
  2729. const userphoto = event.target;
  2730. const preview = document.getElementById('preview');
  2731. const reader = new FileReader();
  2732. reader.onload = function () {
  2733. preview.src = reader.result;
  2734. };
  2735. reader.readAsDataURL(userphoto.files[0]);
  2736. }
  2738. function getBookingCalendar(hall_id) {
  2739. // Make an AJAX call to fetch booking data
  2740. $.ajax({
  2741. type: 'GET',
  2742. url: '/communityhall/user/api/getPastData',
  2743. data: {
  2744. hall_id: hall_id
  2745. },
  2746. success: function (response) {
  2747. window.bookingResponse = {};
  2748. if (response && Array.isArray(response)) {
  2749. $("#startDateInput").datepicker("destroy");
  2750. for (var i = 0; i < response.length; i++) {
  2751. var dateString = datepickerFormat(response[i].bdate);
  2752. window.bookingResponse[dateString] = [response[i].morningSlot, response[i].eveningSlot, response[i].is_blocked];
  2753. }
  2755. initializeDatepickerWithColors(hall_id);
  2756. if (response.length == 0) {
  2757. initializeDatepickerWithColors(hall_id);
  2758. }
  2759. } else {
  2760. console.error('Invalid or empty response data.');
  2761. }
  2762. },
  2763. error: function (xhr, status, error) {
  2764. console.error('Error fetching hall details:', error);
  2765. }
  2766. });
  2767. }
  2769. // Function to update the end date and slot availability
  2770. function updateEndDate() {
  2771. var startDate = new Date(document.getElementById("startDateInput").value);
  2772. var formatStartDate = formatDate(startDate);
  2773. var endDateInput = document.getElementById("endDateInput");
  2774. endDateInput.innerHTML = '<option value="0">Select</option>';
  2775. endDateInput.disabled = true;
  2777. var maxdays = $('#reasonMaxDates').val();
  2778. // alert("maxdays:--- "+maxdays);
  2780. // Add options for next 7 days from the selected start date
  2781. for (var i = 0; i < maxdays; i++) {
  2782. var date = new Date(startDate);
  2783. date.setDate(startDate.getDate() + i);
  2784. var formattedDate = formatDate(date);
  2786. if (isNaN(date.getTime())) {
  2787. console.error("Invalid date:", date);
  2788. continue;
  2789. }
  2791. var bookingStatus = window.bookingResponse[formattedDate];
  2792. if (bookingStatus) {
  2793. if (bookingStatus[0] && bookingStatus[1]) {
  2794. //alert("slot fulled");
  2795. break;
  2796. } else if (bookingStatus[0]) {
  2797. if (formatStartDate == formattedDate) {
  2798. var option = document.createElement('option');
  2799. option.value = formattedDate;
  2800. option.text = formattedDate;
  2801. endDateInput.appendChild(option);
  2802. } else {
  2803. break;
  2804. }
  2805. } else if (bookingStatus[1]) {
  2806. var option = document.createElement('option');
  2807. option.value = formattedDate;
  2808. option.text = formattedDate;
  2809. endDateInput.appendChild(option);
  2810. break;
  2811. } else {
  2812. var option = document.createElement('option');
  2813. option.value = formattedDate;
  2814. option.text = formattedDate;
  2815. endDateInput.appendChild(option);
  2816. }
  2818. } else {
  2819. var option = document.createElement('option');
  2820. option.value = formattedDate;
  2821. option.text = formattedDate;
  2822. endDateInput.appendChild(option);
  2823. }
  2824. }
  2825. endDateInput.disabled = false;
  2826. }
  2828. // Utility function to format date as yyyy-mm-dd
  2829. function formatDate(date) {
  2830. var year = date.getFullYear();
  2831. var month = ("0" + (date.getMonth() + 1)).slice(-2);
  2832. var day = ("0" + date.getDate()).slice(-2);
  2833. return year + "-" + month + "-" + day;
  2834. }
  2836. // Function to calculate number of days based on start and end dates
  2837. // Function to calculate number of days based on start and end dates
  2838. function calculateNumDays() {
  2839. var startDateStr = document.getElementById("startDateInput").value;
  2840. var endDateStr = document.getElementById("endDateInput").value;
  2842. // Parse dates
  2843. var startDate = new Date(startDateStr);
  2844. var endDate = new Date(endDateStr);
  2846. // Check if dates are valid
  2847. if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
  2848. console.error("Invalid date format.");
  2849. return;
  2850. }
  2852. // Calculate the difference in days
  2853. var timeDiff = endDate.getTime() - startDate.getTime();
  2854. var numDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
  2855. // Adjust numDays to handle same-day selection
  2856. if (numDays === 0) {
  2857. numDays = 1; // Default to 1 day for same-day booking
  2858. } else if (numDays < 0) {
  2859. numDays = 0; // Handle case where end date is before start date
  2860. } else {
  2861. numDays += 1; // Add one day to include both start and end days
  2862. }
  2863. // Cap numDays between 1 and 7
  2864. numDays = Math.min(Math.max(numDays, 1), 7);
  2865. document.getElementById("numDaysCount").value = numDays;
  2866. // Recalculate days after slots if both dates are selected
  2867. if (startDateStr && endDateStr) {
  2868. calculatenoofdaysafterslots();
  2869. }
  2870. }
  2872. function getEndPeriodValue() {
  2873. const endPeriodDropdown = document.getElementById("endPeriodDropdown");
  2874. return endPeriodDropdown.disabled ? endPeriodDropdown.getAttribute("data-value") : endPeriodDropdown.value;
  2875. }
  2877. function setEndPeriodDataValue() {
  2878. const endPeriodDropdown = document.getElementById("endPeriodDropdown");
  2879. if (endPeriodDropdown.disabled) {
  2880. endPeriodDropdown.setAttribute("data-value", endPeriodDropdown.value);
  2881. }
  2882. }
  2884. function calculatenoofdaysafterslots() {
  2885. const startDateStr = document.getElementById("startDateInput").value;
  2886. const endDateStr = document.getElementById("endDateInput").value;
  2887. const startPeriod = parseInt(document.getElementById("startPeriodDropdown").value);
  2888. const endPeriod = parseInt(getEndPeriodValue()); // Use getEndPeriodValue here
  2890. const periodText = {
  2891. 0: {text: "select", time: ""},
  2892. 1: {text: "Morning", time: "6:00 AM"},
  2893. 2: {text: "Afternoon", time: "2:00 PM"}
  2894. };
  2896. const endPeriodText = {
  2897. 0: {text: "select", time: ""},
  2898. 1: {text: "Afternoon", time: "2:00 PM"},
  2899. 2: {text: "Evening", time: "10:00 PM"}
  2900. };
  2902. const startDate = new Date(startDateStr);
  2903. const endDate = new Date(endDateStr);
  2905. const timeDiff = endDate.getTime() - startDate.getTime();
  2906. let numDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
  2908. if (numDays === 0 && startDate.toDateString() === endDate.toDateString()) {
  2909. if (startPeriod === 1 && endPeriod === 1) {
  2910. numDays = 0.5; // Morning to morning is half day
  2911. } else if (startPeriod === 2 && endPeriod === 2) {
  2912. numDays = 0.5; // Evening to evening is half day
  2913. } else if (startPeriod === 1 && endPeriod === 2) {
  2914. numDays = 1; // Morning to evening is one full day
  2915. } else {
  2916. numDays = 1; // Default to one full day for any other case
  2917. }
  2918. } else {
  2919. if (startPeriod === 1 && endPeriod === 1) {
  2920. numDays += 0.5; // Morning to morning adds half a day
  2921. } else if (startPeriod === 2 && endPeriod === 2) {
  2922. numDays += 0.5; // Evening to evening adds half a day
  2923. } else if (startPeriod === 1 && endPeriod === 2) {
  2924. numDays += 1; // Morning to evening adds one full day
  2925. } else if (startPeriod === 2 && endPeriod === 1) {
  2926. // If the period spans over two days, evening to morning should be counted as one full day
  2927. numDays -= 0;
  2928. } else {
  2929. numDays += 1; // Default case for any other scenario
  2930. }
  2931. }
  2933. //else if (startPeriod === "2" && endPeriod === "2") {
  2934. // amount = fullDayAmount * (numDays - 1) + halfDayAmount;
  2935. //}
  2936. numDays = Math.min(Math.max(numDays, 0), 7);
  2938. const startPeriodText = periodText[startPeriod].text + " (" + periodText[startPeriod].time + ")";
  2939. const endPeriodFullText = endPeriodText[endPeriod].text + " (" + endPeriodText[endPeriod].time + ")";
  2940. const numDaysText = `${startDateStr} (${startPeriodText}) to ${endDateStr} (${endPeriodFullText})`;
  2942. document.getElementById("numDaysCountDisplay").value = numDaysText;
  2943. document.getElementById("numDaysCount").value = numDays;
  2944. }
  2946. function showSummary() {
  2947. const startDate = new Date(document.getElementById("startDateInput").value);
  2948. const endDate = new Date(document.getElementById("endDateInput").value);
  2949. const startPeriod = document.getElementById("startPeriodDropdown").value;
  2950. const endPeriod = getEndPeriodValue(); // Use getEndPeriodValue here
  2952. const startPeriods = {
  2953. "1": "Morning 6:00 AM",
  2954. "2": "Afternoon 2:00 PM"
  2955. };
  2957. const endPeriods = {
  2958. "1": "Afternoon 2:00 PM",
  2959. "2": "Evening 10:00 PM"
  2960. };
  2961. const numofdaysrange = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
  2962. document.getElementById("noofdaysbetweenstartend").value = numofdaysrange;
  2963. const numDays = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
  2964. let summaryText = `You booked for ${numDays} day(s) with the following slots:\n`;
  2966. let currentDate = new Date(startDate);
  2968. while (currentDate <= endDate) {
  2969. const currentDay = currentDate.toISOString().split('T')[0];
  2970. let currentStartPeriod;
  2971. let currentEndPeriod;
  2973. if (currentDate.getTime() === startDate.getTime()) {
  2974. currentStartPeriod = startPeriod;
  2975. } else {
  2976. currentStartPeriod = "1"; // Default to Morning for subsequent days
  2977. }
  2979. if (currentDate.getTime() === endDate.getTime()) {
  2980. currentEndPeriod = endPeriod;
  2981. } else {
  2982. currentEndPeriod = "2"; // Default to Evening for all days except the last
  2983. }
  2985. summaryText += `${currentDay}: ${startPeriods[currentStartPeriod]} to ${endPeriods[currentEndPeriod]}\n`;
  2987. currentDate.setDate(currentDate.getDate() + 1);
  2988. }
  2990. document.getElementById("summary").innerText = summaryText;
  2991. }
  2993. // Add event listeners to update the summary when dropdowns change
  2994. document.getElementById("startDateInput").addEventListener("change", function () {
  2995. calculatenoofdaysafterslots();
  2996. showSummary();
  2997. });
  2999. document.getElementById("endDateInput").addEventListener("change", function () {
  3000. calculatenoofdaysafterslots();
  3001. $("#endPeriodDropdown").val(0).prop("disabled", false);
  3002. $(".step-2 .next-step").prop("disabled", true);
  3004. const bookingStatus = window.bookingResponse[$("#endDateInput").val()];
  3005. if (bookingStatus) {
  3006. if (bookingStatus[0]) {
  3007. $("#endPeriodDropdown").val(2);
  3008. $("#endPeriodDropdown").prop("disabled", true);
  3009. setEndPeriodDataValue();
  3010. } else if (bookingStatus[1]) {
  3011. $("#endPeriodDropdown").val(1);
  3012. $("#endPeriodDropdown").prop("disabled", true);
  3013. setEndPeriodDataValue();
  3014. }
  3015. } else {
  3016. $("#endPeriodDropdown").prop("disabled", false);
  3017. }
  3019. calculatenoofdaysafterslots();
  3020. if ($("#endDateInput").val() == "0") {
  3021. $('#summary').html('');
  3022. } else {
  3023. showSummary();
  3024. }
  3026. });
  3028. document.getElementById("startPeriodDropdown").addEventListener("change", function () {
  3029. calculatenoofdaysafterslots();
  3030. showSummary();
  3031. });
  3033. document.getElementById("endPeriodDropdown").addEventListener("change", function () {
  3034. calculatenoofdaysafterslots();
  3035. showSummary();
  3036. });
  3038. function initializeDatepickerWithColors(hallId) {
  3039. // Destroy existing datepicker to avoid duplicate initialization
  3040. $("#datepicker-container").datepicker("destroy");
  3041. const serverDate = new Date($("#serverDate").val() + "T00:00:00")
  3043. const maxDate = new Date(serverDate);
  3044. maxDate.setMonth(maxDate.getMonth() + 6);
  3045. // console.log(" hall booking form Max Date: "+maxDate);
  3047. // Initialize the datepicker
  3048. $("#startDateInput,#datepicker-container").datepicker({
  3049. dateFormat: "yy-mm-dd",
  3050. minDate: serverDate,
  3051. maxDate: maxDate,
  3052. beforeShowDay: function (eDate) {
  3053. const dateString = $.datepicker.formatDate("yy-mm-dd", eDate);
  3054. const bookingStatus = window.bookingResponse[dateString] || {};
  3056. // const currentDate = new Date();
  3057. serverDate.setHours(0, 0, 0, 0); // Normalize current date to midnight
  3058. eDate.setHours(0, 0, 0, 0); // Normalize selected date to midnight
  3060. // Logic for other dates
  3061. if (eDate < serverDate) {
  3062. return [false, "highlight-disabled", "Slot not Available"];
  3063. }
  3065. const isToday = eDate.getTime() === serverDate.getTime();
  3066. const currentHour = new Date().getHours();
  3067. const isBefore6AM = currentHour < 6;
  3068. const isAfter2PM = currentHour >= 14;
  3070. // Block 3-day logic for specific event types
  3071. // const today = new Date();
  3072. const blockedDate = new Date(serverDate);
  3073. blockedDate.setDate(serverDate.getDate() + 2);
  3075. if (eDate <= blockedDate && window.isThreeDayBlock) {
  3076. return [false, "highlight-disabled", "Blocked due to event type"];
  3077. }
  3079. // Logic for today
  3080. if (isToday) {
  3081. if (isBefore6AM) {
  3082. // Before 6 AM: Allow full-day booking or adjust based on booking status
  3083. return handleBookingStatus(bookingStatus, "Full Day Available");
  3084. } else if (isAfter2PM) {
  3085. // After 2 PM: Block all bookings
  3086. return handleAfter2PM(bookingStatus);
  3087. } else {
  3088. // Between 6 AM and 2 PM: Check status and disable morning slots
  3089. return handleMorningSlots(bookingStatus);
  3090. }
  3091. }
  3093. return handleBookingStatus(bookingStatus, "Slot Available");
  3094. },
  3095. });
  3097. // Show datepicker when hall is selected
  3098. $('#selecthall').off('click').on('click', function () {
  3099. $('#datepicker-container').datepicker('show');
  3100. });
  3102. // Handle changes in the start date input
  3103. $("#startDateInput").on("change", function () {
  3104. const selectedDate = $(this).val();
  3105. const bookingStatus = window.bookingResponse[selectedDate] || {};
  3106. // const currentDate = new Date();
  3107. const currentHours = new Date().getHours();
  3108. const currentDateString = $("#serverDate").val();
  3110. $("#startPeriodDropdown option").prop("disabled", false); //newly added after server date changes
  3112. $("#startPeriodDropdown").val(0).prop("disabled", false);
  3113. $("#endPeriodDropdown").val(0).prop("disabled", false);
  3114. $("#numDaysCount").val('');
  3115. validateForm();
  3117. if ((selectedDate === currentDateString && currentHours >= 6 )|| bookingStatus[0]) {
  3118. $("#startPeriodDropdown option[value='1']").prop("disabled", true);
  3119. }else if (bookingStatus[1]) {
  3120. $("#startPeriodDropdown option[value='2']").prop("disabled", true);
  3121. }
  3122. updateEndDate(selectedDate);
  3123. });
  3125. // Event type change logic
  3126. $("#reasonforbooking").on("change", function () {
  3127. const selectedEventType = $(this).find("option:selected").text().trim();
  3128. window.isThreeDayBlock = ["Commercial", "State Govt Event", "Central Govt Event"].includes(selectedEventType);
  3129. $("#datepicker-container").datepicker("refresh");
  3130. });
  3131. }
  3133. function handleBookingStatus(bookingStatus, defaultMessage) {
  3134. if (bookingStatus[2]) {
  3135. return [true, "highlight-blue disabled", "GCC Blocked"];
  3136. } /*else if (bookingStatus[3]) {
  3137. return [true, "highlight-lightpink disabled", "Temporary Blocked"];
  3138. } */ else if (bookingStatus[0] && bookingStatus[1]) {
  3139. return [true, "highlight-pink disabled", "Slot Occupied"];
  3140. } else if (bookingStatus[0] && !bookingStatus[1]) {
  3141. return [true, "highlight-yellow", "Evening Slot Available"];
  3142. } else if (!bookingStatus[0] && bookingStatus[1]) {
  3143. return [true, "highlight-violet", "Only Morning Slot Available"];
  3144. }
  3145. return [true, "highlight-greens", defaultMessage];
  3146. }
  3148. // Helper function: Handles logic after 2 PM
  3149. function handleAfter2PM(bookingStatus) {
  3150. if (bookingStatus[2]) {
  3151. return [true, "highlight-blue disabled", "GCC Blocked"];
  3152. } else if (bookingStatus[0] || bookingStatus[1]) {
  3153. return [true, "highlight-pink disabled", "Slot Occupied"];
  3154. }
  3155. return [false, "highlight-disabled", "Not Allowed to Book"];
  3156. }
  3158. // Helper function: Handles morning slots between 6 AM and 2 PM
  3159. function handleMorningSlots(bookingStatus) {
  3160. if (bookingStatus[2]) {
  3161. return [true, "highlight-blue disabled", "GCC Blocked"];
  3162. } else if (bookingStatus[0] && bookingStatus[1]) {
  3163. return [true, "highlight-pink disabled", "Slot Occupied"];
  3164. } else if (bookingStatus[0] && !bookingStatus[1]) {
  3165. return [true, "highlight-yellow", "Evening Slot Available"];
  3166. } else if (!bookingStatus[0] && bookingStatus[1]) {
  3167. return [false, "highlight-disabled", "Slot Occupied"];
  3168. }
  3169. return [true, "highlight-yellow", "Evening Slot Available"];
  3170. }
  3173. function datepickerFormat(dateString) {
  3174. var dateObject = new Date(dateString);
  3175. var year = dateObject.getFullYear();
  3176. var month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
  3177. var day = dateObject.getDate().toString().padStart(2, "0");
  3178. return `${year}-${month}-${day}`;
  3179. }
  3181. //snackbars
  3182. $("#reasonforbooking").on("click", function () {
  3183. var relationship = $("#relation").val();
  3184. if (relationship == 0) {
  3185. var relationField = $("#relation")[0];
  3186. relationField.setCustomValidity("Relationship for Booking is Missing. Please select.");
  3187. relationField.reportValidity();
  3188. return; // Exit early if relationship is not provided
  3189. } else {
  3190. $("#relation")[0].setCustomValidity(""); // Clear custom validity if valid
  3191. }
  3192. });
  3194. $("#relation").on("change", function () {
  3195. // Clear custom validity when a valid value is selected
  3196. this.setCustomValidity("");
  3197. });
  3199. $("#startDateInput").on("click", function () {
  3200. var reason = $("#reasonforbooking").val();
  3201. if (reason == 0) {
  3202. var reasonField = $("#reasonforbooking")[0];
  3203. reasonField.setCustomValidity("Reason for booking is missed. Please select a reason.");
  3204. reasonField.reportValidity();
  3205. return; // Exit early if reason is not provided
  3206. } else {
  3207. $("#reasonforbooking")[0].setCustomValidity(""); // Clear custom validity if valid
  3208. }
  3209. });
  3210. $("#endDateInput").on("click", function () {
  3211. var reason = $("#reasonforbooking").val();
  3212. var startDate = $("#startDateInput").val();
  3213. if (reason == 0) {
  3214. var reasonField = $("#reasonforbooking")[0];
  3215. reasonField.setCustomValidity("Reason for booking is missed. Please select a reason.");
  3216. reasonField.reportValidity();
  3217. return; // Exit early if reason is not provided
  3218. } else {
  3219. $("#reasonforbooking")[0].setCustomValidity(""); // Clear custom validity if valid
  3220. }
  3221. if (startDate == "") {
  3222. var startDate = $("#startDateInput")[0];
  3223. startDateInput.setCustomValidity("Start Date missed. Please select a Start Date.");
  3224. startDateInput.reportValidity();
  3225. return; // Exit early if reason is not provided
  3226. } else {
  3227. $("#startDateInput")[0].setCustomValidity(""); // Clear custom validity if valid
  3228. }
  3229. });
  3231. $("#reasonforbooking").on("change", function () {
  3232. // Clear custom validity when a valid value is selected
  3233. this.setCustomValidity("");
  3234. });
  3236. // Snackbar function
  3237. function showSnackbar(message) {
  3238. var snackbar = $("<div>")
  3239. .addClass("snackbar")
  3240. .text(message)
  3241. .appendTo("body");
  3243. // Add animation classes for showing and hiding
  3244. snackbar.addClass("show");
  3246. // Remove the snackbar after 3 seconds
  3247. setTimeout(function () {
  3248. snackbar.removeClass("show");
  3249. snackbar.remove();
  3250. }, 3000);
  3251. }
  3253. // Update the event listeners to include date inputs
  3254. $("#endDateInput").on("change", function () {
  3255. var starting = $("#startPeriodDropdown").val();
  3256. var ending = $("#endPeriodDropdown").val();
  3257. var startDate = $("#startDateInput").val();
  3258. var endDate = $("#endDateInput").val();
  3260. // Call validateSlot with updated parameters
  3261. validateSlot(starting, ending, startDate, endDate);
  3262. validateForm();
  3263. });
  3265. // Event listener for changes in startPeriodDropdown
  3266. $("#startPeriodDropdown").on("change", function () {
  3267. var starting = $(this).val();
  3268. var ending = $("#endPeriodDropdown").val();
  3269. var startDate = $("#startDateInput").val();
  3270. var endDate = $("#endDateInput").val();
  3272. // Call validateSlot with updated parameters
  3273. validateSlot(starting, ending, startDate, endDate);
  3274. validateForm();
  3275. showSummary();
  3276. });
  3278. // Event listener for changes in endPeriodDropdown
  3279. $("#endPeriodDropdown").on("change", function () {
  3280. var starting = $("#startPeriodDropdown").val();
  3281. var ending = $(this).val();
  3282. var startDate = $("#startDateInput").val();
  3283. var endDate = $("#endDateInput").val();
  3284. validateSlot(starting, ending, startDate, endDate);
  3285. validateForm();
  3286. calculatenoofdaysafterslots();
  3287. showSummary();
  3288. });
  3290. function validateSlot(starting, ending, startDate, endDate) {
  3291. // Check if startDate is equal to endDate and starting is 2 and ending is 1
  3292. if (startDate === endDate && starting == 2 && ending == 1) {
  3293. Swal.fire({
  3294. icon: 'error',
  3295. title: 'Oops!',
  3296. text: "The starting slot cannot be set to Evening if the ending slot is Morning when the dates are the same.",
  3297. }).then(() => {
  3298. // Reset endPeriodDropdown to 0
  3299. $("#endPeriodDropdown").val(0);
  3300. validateForm();
  3301. });
  3302. }
  3303. validateForm(); // Call validateForm to update form validation status
  3304. }
  3306. function validateForm() {
  3307. var startDate = $("#startDateInput").val();
  3308. var endDate = $("#endDateInput").val();
  3309. var startPeriod = $("#startPeriodDropdown").val();
  3310. var endPeriod = $("#endPeriodDropdown").val();
  3311. var reasonforbooking = $("#reasonforbooking").val();
  3312. var relationship = $("#relation").val();
  3313. if (startDate && endDate !== "0" && startPeriod !== "0" && endPeriod !== "0" && relationship !== "0" && reasonforbooking) {
  3314. $(".next-step").prop("disabled", false);
  3315. } else {
  3316. $(".next-step").prop("disabled", true);
  3317. }
  3318. }
  3320. // Confirm Payment button click event
  3321. $("#confirmPaymentBtn").on('click', function () {
  3322. // Disable the payment button
  3323. $('#confirmPaymentBtn').prop('disabled', true);
  3325. stopTimer();
  3327. });
  3329. function stopTimer() {
  3330. if (countdown) {
  3331. clearInterval(countdown);
  3332. countdown = null; // Clear the countdown reference
  3333. }
  3334. timerElement.innerHTML = "Timer Stopped"; // Optionally update the message
  3335. }
  3336. </script>
  3337. </body>
  3338. </html>