kanimozhi
/
VictoriaHallBooking_V1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Victoria Hall Booking for Events
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
0 Tags
98 MiB
Tree: dd132f0fa8
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'dd132f0fa8'
${ noResults }
VictoriaHallBooking_V1/target/classes/templates/counter/counter-booking_copy2403202...

3475 lines
104 KiB
Raw Normal View History

VPH hall booking initial commit
9 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/head :: head}">
  5. </head>
  7. <style>
  8. .card {
  9. margin-top: -16px;
  10. margin-right: -116px;
  11. margin-left: -116px;
  12. }
  14. .ui-datepicker-container {
  15. width: 100%
  16. }
  20. .highlight-greens .ui-state-default {
  21. background: green !important;
  22. color: #FFF !important;
  23. }
  25. .highlight-yellow .ui-state-default {
  26. background: yellow !important;
  27. color: #000 !important;
  28. }
  30. .highlight-violet .ui-state-default {
  31. background: #a93da9 !important;
  32. color: #000 !important;
  33. }
  35. .highlight-pink .ui-state-default {
  36. background: red !important;
  37. color: #000 !important;
  38. }
  41. .btn-square-md {
  42. width: 16px !important;
  43. max-width: 100% !important;
  44. max-height: 50% !important;
  45. height: 30px !important;
  46. text-align: center;
  47. padding: 0px;
  48. font-size: 2px;
  49. }
  51. .disabled {
  52. pointer-events: none;
  53. opacity: 1;
  54. /* Example: reduce opacity to indicate disabled state */
  55. }
  59. .ui-datepicker {
  60. width: 100%;
  61. background-color: #333;
  62. /* Dark background color */
  63. }
  65. .ui-datepicker-header {
  66. background-color: #f0f0f0;
  67. /* Light gray background for header */
  68. border: none;
  69. border-radius: 5px 5px 0 0;
  70. }
  72. .ui-datepicker-title {
  73. font-size: 1.2em;
  74. margin: 0;
  75. padding: 10px;
  76. text-align: center;
  77. }
  79. .ui-datepicker-calendar {
  80. margin: 0;
  81. padding: 0;
  82. color: white;
  83. /* Text color for dates */
  84. font-weight: bold;
  85. /* Bold font for dates */
  86. }
  88. .ui-datepicker-calendar th,
  89. .ui-datepicker-calendar td {
  90. text-align: center;
  91. }
  95. .ui-datepicker-week-end {
  96. color: yellow;
  97. font-weight: bold;
  98. }
  101. /* Style for the label */
  102. .date-label {
  103. display: block;
  104. margin-bottom: 6px;
  105. font-weight: bold;
  106. }
  108. .highlight-current-date a {
  109. background-color: green;
  110. /* Current date highlight color */
  111. color: white;
  112. }
  114. .highlight-greens a {
  115. background-color: green;
  116. color: white;
  117. }
  119. .highlight-yellow a {
  120. background-color: yellow;
  121. color: black;
  122. /* Change text color for visibility */
  123. }
  125. .highlight-pink a,
  126. input[type=button]:disabled {
  127. background-color: pink;
  128. /* Pink highlight for disabled or booked dates */
  129. color: white;
  130. }
  132. .highlight-orange a {
  133. background-color: orange;
  134. /* Orange highlight color */
  135. color: white;
  136. }
  138. input[type=button]:disabled {
  139. background: red;
  140. }
  142. .hidden {
  143. display: none;
  144. }
  146. #selecthall.select2-container--default .select2-selection--single {
  147. height: 35px;
  148. border: 1px solid #ddd;
  149. padding-left: 10px;
  150. }
  152. .select2-container--default .select2-selection--single .select2-selection__rendered {
  153. color: #444;
  154. line-height: 28px;
  155. margin-top: -8px;
  156. }
  158. #hallDetailsContainer {
  159. display: flex;
  160. flex-direction: column;
  161. align-items: center;
  162. /* Center items horizontally */
  163. justify-content: center;
  164. /* Center items vertically */
  165. border: 1px solid #ccc;
  166. border-radius: 5px;
  167. padding: 20px;
  168. margin-top: 20px;
  169. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  170. background-color: #fff;
  172. }
  175. /* Style for the image */
  176. #hallImagesCarousel {
  177. margin-bottom: 20px;
  178. }
  180. .row {
  181. display: flex;
  182. flex-wrap: wrap;
  183. margin-right: 0px;
  184. margin-left: 0px;
  185. }
  187. .col-md-6 {
  188. width: 50%;
  189. padding: 0 10px;
  190. /* Optional: Add padding to columns */
  191. }
  193. @media (max-width: 768px) {
  194. .col-md-6 {
  195. width: 100%;
  196. /* Full width on smaller screens */
  197. }
  198. }
  200. #hallDetailsContainer p {
  201. margin: 0;
  202. padding: 5px 0;
  203. }
  205. #hallDetailsContainer p:nth-child(even) {
  206. background-color: #f9f9f9;
  207. }
  209. /* CSS styles for the amount details container */
  210. #amountDetailsContainer {
  211. border: 1px solid #ccc;
  212. border-radius: 5px;
  213. padding: 20px;
  214. margin-top: 20px;
  215. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  216. background-color: #fff;
  217. }
  219. #amountDetailsContainer h4 {
  220. margin-top: 0;
  221. margin-bottom: 10px;
  222. }
  224. #amountDetailsContainer div {
  225. list-style: none;
  226. padding: 0;
  227. }
  229. #amountDetailsContainer p {
  230. margin-bottom: 10px;
  231. }
  233. #amountDetailsContainer p span {
  234. font-weight: bold;
  235. }
  237. #amountDetailsContainer p:nth-child(even) {
  238. background-color: #f9f9f9;
  239. }
  241. /* Style for the image container */
  242. #hallImagesCarousel {
  243. display: flex;
  244. justify-content: center;
  245. /* Center content horizontally */
  246. align-items: center;
  247. /* Center content vertically */
  248. margin-bottom: 20px;
  249. 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. }
  270. .content-container {
  271. padding: 20px;
  272. }
  275. .otp-input {
  276. width: 30px;
  277. height: 30px;
  278. border: 1px solid #ccc;
  279. border-radius: 5px;
  280. text-align: center;
  281. font-size: 16px;
  282. margin-right: 10px;
  284. }
  286. /* Ensures content within these classes is centered */
  287. .modal-header,
  288. .modal-body,
  289. .modal-footer,
  290. #resend-container {
  291. text-align: center;
  292. }
  294. /* Center content with Flexbox if needed */
  295. .center-flex {
  296. display: flex;
  297. justify-content: center;
  298. align-items: center;
  299. flex-direction: column;
  300. /* Stack elements vertically */
  301. }
  303. /* Adjust the margin of the otp-input-box for better alignment */
  304. .otp-input-box {
  305. justify-content: center;
  306. margin: 0 auto;
  307. /* Centers the box horizontally */
  308. align-items: center;
  309. /* Align items in the center for flex containers */
  310. width: 100%;
  311. }
  313. .center-content {
  314. display: flex;
  315. justify-content: center;
  316. align-items: center;
  317. height: 100%;
  318. /* Or set a specific height */
  319. flex-direction: column;
  320. /* Stack children vertically */
  321. }
  323. /* To ensure the form takes up the necessary width */
  324. .form-group {
  325. width: 100%;
  326. /* Adjust based on your layout's needs */
  327. }
  329. /* Custom styles for the jQuery UI Dialog */
  330. .custom-dialog .ui-dialog-content {
  331. background-color: #fff;
  332. color: #333;
  333. padding: 20px;
  334. }
  336. .custom-dialog .ui-dialog-titlebar {
  337. background: #007bff;
  338. color: #ffffff;
  339. }
  341. .custom-dialog .ui-dialog-buttonpane {
  342. background-color: #f1f1f1;
  343. }
  345. .custom-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
  346. background-color: #007bff;
  347. color: #ffffff;
  348. border-color: #007bff;
  349. }
  351. .custom-dialog a {
  352. color: #007bff;
  353. text-decoration: none;
  354. }
  356. .custom-dialog a:hover {
  357. text-decoration: underline;
  358. }
  360. table {
  361. width: 100%;
  362. border-collapse: collapse;
  363. }
  365. th,
  366. td {
  367. border: 1px solid black;
  368. padding: 8px;
  369. text-align: center;
  370. }
  372. .date-box {
  373. border: 1px solid #ccc;
  374. padding: 10px;
  375. margin: 5px;
  376. text-align: center;
  377. background-color: #f8f9fa;
  378. border-radius: 5px;
  379. }
  381. .checkbox-label {
  382. display: block;
  383. margin-top: 5px;
  384. }
  386. #calendar {
  387. margin-top: 20px;
  388. padding: 20px;
  389. border: 1px solid #ccc;
  390. border-radius: 5px;
  391. background-color: #f8f9fa;
  392. }
  394. /* Style for date checkboxes */
  395. .date-checkboxes {
  396. margin-top: 10px;
  397. }
  399. /* Style for checkbox labels */
  400. label {
  401. margin-right: 10px;
  402. }
  405. .ui-datepicker-container {
  406. width: 100%
  407. }
  409. .fixedcontainer {
  410. width: 250%;
  411. margin: -332px 0;
  412. }
  414. .ui-widget {
  415. width: 40%
  416. }
  418. .ui-datepicker {
  419. padding: 3px;
  420. margin: 372px 0;
  421. border: 1px solid #ccc;
  422. border-radius: 5px;
  423. background-color: white;
  424. left: 29.1418px;
  425. }
  427. .ui-datepicker-header {
  428. background-color: #f0f0f0;
  429. border: none;
  430. border-radius: 5px 5px 0 0;
  431. }
  433. .ui-datepicker-title {
  434. font-size: 1.2em;
  435. margin: 0;
  436. padding: 10px;
  437. text-align: center;
  438. }
  440. .ui-datepicker-calendar {
  441. margin: 0;
  442. padding: 0;
  443. font-weight: bold;
  444. /* Bold font for dates */
  445. }
  447. .ui-datepicker-calendar th,
  448. .ui-datepicker-calendar td {
  449. padding: 5px;
  450. text-align: center;
  451. }
  453. .ui-datepicker-calendar .ui-state-default {
  454. cursor: pointer;
  455. width: 100%;
  456. height: 100%;
  457. display: flex;
  458. justify-content: center;
  459. align-items: center;
  460. }
  462. .ui-datepicker-week-end {
  463. color: black;
  464. font-weight: bold;
  465. }
  467. .ui-datepicker-calendar th span {
  468. color: black;
  469. font-weight: bold;
  470. }
  472. .booking-form-container {
  473. margin: 20px auto;
  474. padding: 20px;
  475. border: 1px solid #ddd;
  476. border-radius: 8px;
  477. background-color: #f9f9f9;
  478. max-width: 960px;
  479. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  480. }
  482. .booking-form-container label {
  483. font-weight: bold;
  484. }
  486. .booking-form-container .form-control {
  487. margin-bottom: 10px;
  488. }
  490. .booking-form-container .btn-primary {
  491. background-color: #017bff;
  492. }
  494. .white-background {
  495. background-color: white;
  496. /* Set the background color as needed */
  497. border: 1px solid #ccc;
  498. /* Optional: Add border for better visualization */
  499. padding: 20px;
  500. margin-bottom: 20px;
  501. overflow: hidden;
  502. /* Hide overflow content during animation */
  503. position: relative;
  504. }
  506. /* Example styling for animation */
  507. .slide-left {
  508. animation: slideLeft 0.5s ease both;
  509. }
  511. .slide-right {
  512. animation: slideRight 0.5s ease both;
  513. }
  515. @keyframes slideLeft {
  516. 0% {
  517. transform: translateX(0);
  518. }
  520. 100% {
  521. transform: translateX(-100%);
  522. opacity: 0;
  523. }
  524. }
  526. @keyframes slideRight {
  527. 0% {
  528. transform: translateX(-100%);
  529. opacity: 0;
  530. }
  532. 100% {
  533. transform: translateX(0);
  534. opacity: 1;
  535. }
  536. }
  538. /* Apply styles to the booking-section container */
  539. .booking-section {
  540. margin: 20px auto;
  541. padding: 20px;
  542. border: 1px solid #ddd;
  543. border-radius: 8px;
  544. background-color: #f9f9f9;
  545. max-width: 960px;
  546. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  547. }
  549. .booking-section label {
  550. font-weight: bold;
  551. }
  553. .booking-section .form-control {
  554. margin-bottom: 10px;
  555. }
  557. .booking-section .btn-primary {
  558. background-color: #017bff;
  559. }
  561. /* Apply white background to the booking-section */
  562. #reasonforbookingSection {
  563. background-color: #ffffff;
  564. /* White background color */
  565. padding: 20px;
  566. /* Optional: Add padding for spacing */
  567. }
  569. body {
  570. font-family: Arial, sans-serif;
  571. margin: 0;
  572. padding: 0;
  573. }
  575. .progressbar {
  576. display: flex;
  577. margin-bottom: 20px;
  578. }
  582. .progress-step {
  583. width: 100%;
  584. height: 9px;
  585. background-color: #e0e0e0;
  586. /* Light gray background */
  587. border-radius: 10px;
  588. /* Rounded corners */
  589. margin-right: 10px;
  590. }
  592. .progress-step-active {
  593. background-color: #4caf50;
  594. /* Green active step */
  595. color: white;
  596. /* White text color */
  597. font-weight: bold;
  598. /* Bold font for active step */
  599. }
  601. .progress {
  602. width: 100%;
  603. height: 10px;
  604. background-color: #ddd;
  605. position: relative;
  606. }
  610. .progress-step::before {
  611. content: attr(data-title);
  612. display: block;
  613. position: absolute;
  614. top: 20px;
  615. left: 50%;
  616. transform: translateX(-50%);
  617. font-size: 12px;
  618. color: #888;
  619. }
  622. .form {
  623. margin-bottom: 20px;
  624. }
  626. .form-step {
  627. display: none;
  628. margin-bottom: 20px;
  629. }
  631. .form-step-active {
  632. display: block;
  633. }
  635. .btn-prev,
  636. .btn-next {
  637. padding: 10px 20px;
  638. font-size: 14px;
  639. cursor: pointer;
  640. border: none;
  641. background-color: #337ab7;
  642. color: #fff;
  643. }
  645. .btn-prev {
  646. margin-right: 10px;
  647. }
  649. /* Media Query for small screens */
  650. @media (max-width: 768px) {
  651. .progress-step::before {
  652. display: none;
  653. /* Hide step titles on small screens */
  654. }
  655. }
  657. #container {
  658. max-width: 1000px;
  659. }
  661. .step-container {
  662. position: relative;
  663. text-align: center;
  664. transform: translateY(-60%);
  665. }
  667. .step-circle {
  668. width: 30px;
  669. height: 30px;
  670. line-height: 29px;
  671. text-align: center;
  672. border-radius: 50%;
  673. cursor: pointer;
  674. background-color: #016d6f;
  675. color: white;
  676. border: 2px solid #016d6f;
  677. }
  679. .step-circle.active {
  680. background-color: #FFFFFF;
  681. color: #016d6f;
  682. }
  684. .step-line {
  685. position: absolute;
  686. top: 16px;
  687. left: 50px;
  688. width: calc(100% - 100px);
  689. height: 2px;
  690. background-color: #FFFFFF;
  691. /* Set the line color here */
  692. z-index: -1;
  693. }
  695. #multi-step-form {
  696. overflow-x: hidden;
  697. }
  699. body {
  700. font-family: Arial, sans-serif;
  701. margin: 0;
  702. padding: 0;
  703. }
  705. .custom-container {
  706. padding: 20px;
  707. border-radius: 8px;
  708. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  709. background-color: #FFFFFF;
  710. border: 1px solid #CCCCCC;
  711. overflow: auto;
  713. }
  715. .header {
  716. z-index: 1000;
  717. margin-bottom: 20px;
  718. }
  720. .logo-img {
  721. height: 30px;
  722. position: absolute;
  723. left: 10px;
  724. top: 10px;
  725. }
  727. .header h6 {
  728. color: white;
  729. text-align: center;
  730. margin: 0;
  731. line-height: 2.1;
  732. }
  734. .invoice-details h3 {
  735. margin: 5px 0;
  736. }
  738. .invoice-details p {
  739. margin: 5px 0;
  740. /* Adjusted margin for <p> tags */
  741. }
  743. .total-section {
  744. margin-top: 20px;
  745. text-align: right;
  746. }
  748. .step-content p {
  749. display: inline-block;
  750. margin-right: 20px;
  751. margin-bottom: 20px;
  752. }
  754. .error {
  755. border: 1px solid red;
  756. }
  758. .error-message {
  759. color: red;
  760. font-size: 12px;
  761. padding-top: 5px;
  762. }
  764. /* Style for small thumbnail images */
  765. .thumbnail-img {
  766. width: 44px;
  767. /* Adjust the width as needed */
  768. height: 35px;
  769. /* Adjust the height as needed */
  770. cursor: pointer;
  771. /* Show cursor as pointer on hover */
  772. margin-right: 10px;
  773. /* Optional margin between images */
  774. }
  776. .large-image-container {
  777. position: fixed;
  778. top: 10%;
  779. left: 34%;
  780. width: 36%;
  781. height: 72%;
  782. background-color: slategrey;
  783. z-index: 1050;
  784. /* High z-index to ensure it's on top of other content */
  785. padding: 25px;
  786. box-sizing: border-box;
  787. overflow: hidden;
  788. /* Prevents scrollbars from iframe from appearing outside the container */
  789. }
  792. #largeImage {
  793. max-width: 90%;
  794. /* Limit maximum width of large image */
  795. max-height: 90vh;
  796. /* Limit maximum height of large image */
  797. display: block;
  798. /* Ensure it behaves as a block element */
  799. margin: 0 auto;
  800. /* Center horizontally */
  801. }
  803. .btn-square-md {
  804. width: 72px !important;
  805. max-width: 100% !important;
  806. max-height: 50% !important;
  807. height: 18px !important;
  808. text-align: center;
  809. padding: 0px;
  810. font-size: 2px;
  811. }
  813. .close-button {
  814. position: absolute;
  815. top: 5px;
  816. right: 5px;
  817. z-index: 1051;
  818. /* Ensure close button is above the iframe */
  819. }
  821. iframe {
  822. width: 100%;
  823. height: 100%;
  824. /* Take full size of the container minus any paddings if necessary */
  825. border: none;
  826. }
  828. #uploadedDocsList {
  829. list-style-type: none;
  830. /* Removes the bullet points */
  831. padding: 0;
  832. /* Removes padding */
  833. margin: 0;
  834. /* Removes margin */
  835. }
  837. #uploadedDocsList li {
  838. margin-bottom: 10px;
  839. /* Adds space between items */
  840. }
  842. #termsModal .table td,
  843. #termsModal .table th {
  844. padding: 0.5rem;
  845. /* Reducing padding */
  846. font-size: 0.8rem;
  847. /* Smaller font size */
  848. }
  850. .table-wrap td {
  851. white-space: normal;
  852. word-wrap: break-word;
  853. }
  855. .swal2-container {
  856. z-index: 9999999999999 !important;
  857. /* Adjust this value if needed */
  858. }
  859. </style>
  861. <body>
  862. <div id="page-container"
  863. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  864. <aside th:replace="~{fragments/aside-right :: aside}"></aside>
  865. <nav th:replace="~{fragments/nav-counter :: nav}"></nav>
  866. <header th:replace="~{fragments/header-counter :: header}"></header>
  867. <main id="main-container">
  868. <div class="container mt-5" id="container">
  869. <div class="card">
  870. <div class="block block-rounded block-themed block-transparent mb-0">
  871. <div class="block-header bg-primary-dark">
  872. <h3 class="block-title" id="2mtitle">User Information</h3>
  873. </div>
  874. </div>
  875. <div class="card-body">
  876. <form id="userInfoForm">
  877. <div class="col col-lg-3 col-md-3 col-sm-3">
  878. <label for="userType" class="form-label">User Type</label>
  879. <select id="usertypes" class="form-select" onchange="handleUserTypeChange()">
  880. <option value="select">Select</option>
  881. <option value="public">Public</option>
  882. </select>
  883. </div>
  884. <div id="mobileNoContainer" class="col col-lg-3 col-md-3 col-sm-3" style="display: none;">
  885. <label for="mobileNumber" class="form-label">Mobile No</label>
  886. <div class="input-group">
  887. <input type="text" id="mobileNumber" name="mobileNumber" pattern="[0-9]{10}"
  888. minlength="10" maxlength="10" class="form-control">
  890. </div>
  891. <div>
  892. <button type="button" class="btn btn-info" id="sendOTPButton">Send OTP</button>
  893. </div>
  894. </div>
  896. <br>
  897. </form>
  898. </div>
  899. </div>
  900. </div>
  901. <!--OTP Form-->
  902. <div class="modal fade" id="otpForm" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel"
  903. aria-hidden="true">
  904. <div class="modal-dialog" role="document">
  905. <div class="modal-content">
  906. <form action="#" th:action="@{/otpForm}" th:object="${otpForm}" method="post"
  907. onsubmit="return verifyOtp(); ">
  908. <div class="modal-header">
  909. <h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP Login</h6>
  910. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
  911. style="color:black;border: white;background-color: white;">
  912. <span aria-hidden="true">&times;</span></button>
  913. </div><!--end modal-header-->
  914. <div class="modal-body">
  915. <div class="row">
  916. <div class="mb-3 text-center">
  917. <img src="media/images/mobileotp.png" width="50%" alt="Mobileotp">
  918. </div>
  919. <div class="mb-0 text-center">
  920. <h4>OTP Verification</h4>
  921. <p class="text-mute">Enter the OTP sent to <b class="text-info"
  922. id="mobilenotxt"></b>
  923. </p>
  924. <p class="text-danger" id="otperror"></p>
  925. </div>
  926. <div class="mb-3 text-center">
  927. <div class="otp-input-box">
  928. <input type="text" maxlength="1" class="otp-input" id="otp1" required />
  929. <input type="text" maxlength="1" class="otp-input" id="otp2" required />
  930. <input type="text" maxlength="1" class="otp-input" id="otp3" required />
  931. <input type="text" maxlength="1" class="otp-input" id="otp4" required />
  932. <input type="text" maxlength="1" class="otp-input" id="otp5" required />
  933. </div>
  934. </div>
  935. <div class="mb-3 text-center">
  936. <div id="resend-containers">
  937. <p class="mb-0">Didn't receive OTP?</p>
  938. <p class="mb-0 text-info" id="resendlink"></p>
  939. </div>
  940. </div>
  941. </div><!--end row-->
  942. </div><!--end modal-body-->
  943. <div class="modal-footer">
  944. <button type="button" class="btn btn-de-secondary btn-sm"
  945. data-bs-dismiss="modal">Close</button>
  946. <button type="submit" class="btn btn-primary btn-sm" id="but">Verify OTP</button>
  947. </div><!--end modal-footer-->
  948. </form>
  949. </div><!--end modal-content-->
  950. </div><!--end modal-dialog-->
  951. </div>
  953. <!-- Registration Modal -->
  954. <div class="modal fade" id="registrationModal" tabindex="-1" aria-labelledby="registrationModalLabel"
  955. aria-hidden="true">
  956. <div class="modal-dialog modal-lg">
  957. <div class="modal-content">
  958. <div class="modal-header">
  959. <h5 class="modal-title" id="registrationModalLabel">Register</h5>
  960. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  961. </div>
  962. <div class="modal-body">
  963. <div class="tab-pane fade show active" id="register" role="tabpanel"
  964. aria-labelledby="register-tab">
  965. <form id="counterform" method="post" name="counterform"
  966. onsubmit="return validateUserType();" enctype="multipart/form-data">
  967. <!-- Registration Form Fields -->
  968. <div class="row">
  969. <div class="col-sm-4">
  970. <div class="form-group">
  971. <label for="name">Name:<span class="required-field">*</span></label>
  972. <input type="text" class="form-control" id="name" name="name"
  973. placeholder="First Name" required>
  974. </div>
  975. </div>
  976. <div class="col-sm-4">
  977. <div class="form-group">
  978. <label for="mobileno">Mobile Number:<span
  979. class="required-field">*</span></label>
  980. <input type="text" class="form-control" id="mobileno" name="mobileNo"
  981. placeholder="Mobile No" minlength="10" maxlength="10"
  982. pattern="[0-9]{10}"
  983. onkeypress="return event.charCode >= 48 && event.charCode <= 57"
  984. required>
  985. </div>
  986. </div>
  987. <div class="col-sm-4">
  988. <div class="form-group">
  989. <label for="userPhoto">Profile Photo:</label>
  990. <input type="file" class="form-control hall-image file-upload-field"
  991. id="userPhoto" name="userPhoto"
  992. accept="image/jpeg, image/png, image/gif">
  993. </div>
  994. </div>
  995. </div>
  996. <div class="row">
  997. <div class="col-sm-4">
  998. <div class="form-group">
  999. <label for="email">Mail:</label>
  1000. <input type="email" class="form-control" id="email" name="email"
  1001. placeholder="email" maxlength="255">
  1002. </div>
  1003. </div>
  1004. <div class="col-sm-4">
  1005. <div class="form-group">
  1006. <label for="doorNo">Door No:<span
  1007. class="required-field">*</span></label>
  1008. <input type="text" class="form-control" id="doorNo" name="doorNo"
  1009. placeholder="doorNo" required>
  1010. </div>
  1011. </div>
  1012. <div class="col-sm-4">
  1013. <div class="form-group">
  1014. <label for="street">Street:<span class="required-field">*</span></label>
  1015. <input type="text" class="form-control" id="street" name="street"
  1016. placeholder="street" required>
  1017. </div>
  1018. </div>
  1019. </div>
  1020. <div class="row">
  1021. <div class="col-sm-4">
  1022. <div class="form-group">
  1023. <label for="area">Area:<span class="required-field">*</span></label>
  1024. <input type="area" class="form-control" id="area" name="area"
  1025. placeholder="area" required>
  1026. </div>
  1027. </div>
  1028. <div class="col-sm-4">
  1029. <div class="form-group">
  1030. <label for="location">Location:<span
  1031. class="required-field">*</span></label>
  1032. <input type="text" class="form-control" id="location" name="location"
  1033. placeholder="location" required>
  1034. </div>
  1035. </div>
  1036. <div class="col-sm-4">
  1037. <div class="form-group">
  1038. <label for="pincode">Pincode:<span
  1039. class="required-field">*</span></label>
  1040. <input type="text" class="form-control" id="pincode" name="pinCode"
  1041. placeholder="pincode" minlength="6" maxlength="6" pattern="[0-9]{6}"
  1042. onkeypress="return event.charCode >= 48 && event.charCode <= 57"
  1043. required>
  1044. </div>
  1045. </div>
  1046. </div>
  1047. <div class="row">
  1048. <div class="col-sm-4" style="margin-left:0%">
  1049. <div class="form-group">
  1050. <label for="userType">User Type:<span
  1051. class="required-field">*</span></label>
  1052. <select class="form-control" id="userType" name="usertype"
  1053. placeholder="User Type">
  1054. <option value="PUBLIC">General Public</option>
  1055. </select>
  1056. </div>
  1057. </div>
  1058. <div class="hidden" id="employeeFields" style="display:none">
  1059. <div class="row">
  1060. <div class="col-sm-3">
  1061. <div class="form-group">
  1062. <label for="employeeId">Employee ID<span
  1063. class="required">*</span>:</label>
  1064. <input type="text" class="form-control" id="employeeId"
  1065. name="employeeId" placeholder="Employee ID">
  1066. </div>
  1067. </div>
  1068. <div class="col-sm-3">
  1069. <div class="form-group">
  1070. <label for="employeename">Employee Name<span
  1071. class="required">*</span>:</label>
  1072. <input type="text" class="form-control" id="employeename"
  1073. name="employeename" placeholder="Employee Name">
  1074. </div>
  1075. </div>
  1076. </div>
  1077. </div>
  1078. <div class="hidden" id="pensionerFields" style="display:none">
  1079. <div class="row">
  1080. <div class="col-sm-6">
  1081. <label for="pensionerId">Pensioner ID<span
  1082. class="required">*</span>:</label>
  1083. <input type="text" class="form-control" id="pensionerId"
  1084. name="pensionerId" placeholder="Pensioner ID">
  1085. </div>
  1086. <div class="col-sm-6">
  1087. <label for="pensionername">Pensioner Name<span
  1088. class="required">*</span>:</label>
  1089. <input type="text" class="form-control" id="pensionername"
  1090. name="pensionername" placeholder="Pensioner Name" disabled>
  1091. </div>
  1092. </div>
  1093. <div id="validationResult"></div>
  1094. </div>
  1095. <div class="hidden" id="familypensionerFields" style="display:none">
  1096. <div class="row">
  1097. <div class="col-sm-6">
  1098. <label for="familypensionerId">Pensioner ID<span
  1099. class="required">*</span>:</label>
  1100. <input type="text" class="form-control" id="familypensionerId"
  1101. name="pensionerId" placeholder="Pensioner ID">
  1102. </div>
  1103. <div class="col-sm-6">
  1104. <label for="familypensionername">Pensioner Name<span
  1105. class="required">*</span>:</label>
  1106. <input type="text" class="form-control" id="familypensionername"
  1107. name="familypensionername" placeholder="Pensioner Name"
  1108. disabled>
  1109. </div>
  1110. </div>
  1111. <div id="validationResult"></div>
  1112. </div>
  1113. </div>
  1114. <div class="form-row">
  1115. <div class="col text-center">
  1116. <button type="submit" class="btn btn-primary"
  1117. style="background-color: #2c726c !important">Submit</button>
  1118. </div>
  1119. </div>
  1120. </form>
  1121. </div>
  1122. </div>
  1123. </div>
  1124. </div>
  1125. </div>
  1126. <!--Profile modal-->
  1127. <div class="card" id="profileCard" tabindex="-1" aria-labelledby="profileCardLabel"
  1128. style="display: none; margin-top: 35px; margin-left: 25px; margin-right: 25px;" aria-hidden="true">
  1129. <div class="block-header bg-primary-dark">
  1130. <h5 class="modal-title" id="profileCardLabel" style="color: white;">User Details</h5>
  1131. </div>
  1132. <div class="card-body">
  1133. <div class="row">
  1134. <div class="col-sm-4">
  1135. <div
  1136. style="border-radius: 50%; overflow: hidden; width: 110px; height: 110px; margin: 0 auto; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);">
  1137. <img id="p_image_card" name="p_image_card" style="width: 100%; height: 100%;" alt="-">
  1138. </div>
  1139. </div>
  1140. <div class="col-sm-8">
  1141. <div class="row">
  1142. <div class="col-sm-6">
  1143. <label for="p_name_card">Name:</label>
  1144. <input type="text" class="form-control" id="p_name_card" readonly>
  1145. </div>
  1146. <div class="col-sm-6">
  1147. <label for="p_email_card">Email:</label>
  1148. <input type="text" class="form-control" id="p_email_card" readonly>
  1149. </div>
  1150. <div class="col-sm-6">
  1151. <label for="p_mobnum_card">Mobile No:</label>
  1152. <input type="text" class="form-control" id="p_mobnum_card" readonly>
  1153. </div>
  1154. <div class="col-sm-6">
  1155. <label for="p_doornum_card">Door no:</label>
  1156. <input type="text" class="form-control" id="p_doornum_card" readonly>
  1157. </div>
  1158. <div class="col-sm-6">
  1159. <label for="p_area_card">Area:</label>
  1160. <input type="text" class="form-control" id="p_area_card" readonly>
  1161. </div>
  1162. <div class="col-sm-6">
  1163. <label for="p_location_card">Location:</label>
  1164. <input type="text" class="form-control" id="p_location_card" readonly>
  1165. </div>
  1166. <div class="col-sm-6">
  1167. <label for="p_pincode_card">Pincode:</label>
  1168. <input type="text" class="form-control" id="p_pincode_card" readonly>
  1169. </div>
  1170. <div class="col-sm-6">
  1171. <label for="p_userstatus_card">User Status:</label>
  1172. <input type="text" class="form-control" id="p_userstatus_card" readonly>
  1173. </div>
  1174. </div>
  1175. </div>
  1176. </div>
  1177. <div class="row mt-3">
  1178. <div class="col-sm-6">
  1179. <button type="button" class="btn btn-secondary" id="backButton">Back</button>
  1180. </div>
  1181. <div class="col-sm-6 text-end">
  1182. <button type="button" class="btn btn-primary" id="nextButton">Next</button>
  1183. </div>
  1184. </div>
  1185. </div>
  1186. </div>
  1187. <!--Hallbooking Form-->
  1188. <div class="card" id="nextPageCard" tabindex="-1" aria-labelledby="nextPageCardLabel"
  1189. style="display: none; margin-top: 35px; margin-left: 25px; margin-right: 25px;" aria-hidden="true">
  1191. <div class="block-header bg-primary-dark">
  1192. <h5 class="modal-title" id="nextPageCardLabel" style="color:white">Hall Booking Details</h5>
  1193. </div>
  1194. <div class="card-body">
  1195. <br>
  1196. <div class="progress px-1" style="height: 3px;">
  1197. <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0"
  1198. aria-valuemin="0" aria-valuemax="100">
  1199. </div>
  1200. </div>
  1201. <div class="step-container d-flex justify-content-between">
  1202. <div class="step-circle" onclick="displayStep(1)">1</div>
  1203. <div class="step-circle" onclick="displayStep(2)">2</div>
  1204. <div class="step-circle" onclick="displayStep(3)">3</div>
  1205. <div class="step-circle" onclick="displayStep(4)">4</div>
  1206. </div>
  1207. </br>
  1208. <form action="javascript:void(0);" id="booking" method="post" enctype="multipart/form-data"
  1209. onsubmit="return saveCounterBooking()">
  1211. <div class="step step-1">
  1212. <div class="container custom-container"
  1213. style="padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;overflow-x: hidden;">
  1214. <!-- Updated inline styles -->
  1215. <div class="row justify-content-center">
  1216. <div class="col-sm-6 col-md-6 col-lg-6">
  1217. <label class="form-check-label" for="selecthall">Select Hall:</label>
  1218. <select id="selecthall" class="form-control" name="hallId" required
  1219. onchange="toggleHallDetailsContainer()">
  1220. <option value="">Select a hall</option>
  1221. </select>
  1222. </div>
  1223. </div>
  1224. <br>
  1225. <!-- Main content row -->
  1226. <div id="hallDetailsContainer" style="display: none;">
  1227. <!-- Initially hidden -->
  1228. <div class="row">
  1229. <!-- Hall Images Carousel -->
  1230. <div class="col-md-6 col-lg-6 col-sm-6">
  1231. <h6>Hall Images:</h6>
  1232. <br>
  1233. <div id="hallImagesCarousel" class="carousel slide" data-ride="carousel">
  1234. <div class="carousel-inner">
  1235. <div class="carousel-item active">
  1236. <img id="hallImage" class="d-block w-100" alt="Hall Image">
  1237. </div>
  1238. </div>
  1239. <a class="carousel-control-prev" href="#hallImagesCarousel"
  1240. role="button" data-slide="prev">
  1241. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  1242. <span class="sr-only">Previous</span>
  1243. </a>
  1244. <a class="carousel-control-next" href="#hallImagesCarousel"
  1245. role="button" data-slide="next">
  1247. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  1249. <span class="sr-only">Next</span>
  1251. </a>
  1253. </div>
  1254. </div>
  1255. <div class="col-md-6 col-lg-6 col-sm-6">
  1256. <div id="datepicker-container" class="fixedcontainer"></div>
  1257. <div class="row">
  1258. <div class="col col-lg-2 col-sm-2 col-md-2">
  1259. <button type="button" class="btn btn-primary btn-square-md"
  1260. style="background-color:#008000;"></button>
  1261. <span style="margin-left: 21px;">Day<br>
  1262. (Available)</span>
  1263. </div>
  1264. <div class="col col-lg-2 col-sm-2 col-md-2">
  1265. <button type="button" class="btn btn-primary btn-square-md"
  1266. style="background-color: #ac2bac;"></button>
  1267. <span style="margin-left: 14px;">Morning <br>
  1268. &nbsp;&nbsp;(Available)</span>
  1269. </div>
  1270. <div class="col col-lg-2 col-sm-2 col-md-2">
  1271. <button type="button" class="btn btn-primary btn-square-md"
  1272. style="background-color:#FFEA00;"></button>
  1273. <span style="margin-left: 14px;">Evening<br>
  1274. &nbsp;&nbsp;(Available)</span>
  1275. </div>
  1276. <div class="col col-lg-2 col-sm-2 col-md-2">
  1277. <button type="button" class="btn btn-primary btn-square-md"
  1278. style="background-color: red;"></button>
  1279. <span style="margin-left: 14px;">Not Available</span>
  1280. </div>
  1281. </div>
  1282. </div>
  1283. <br>
  1284. <!-- Hall Details -->
  1285. <div class="col-md-6 col-lg-6 col-sm-6">
  1286. <div id="hallDetails">
  1287. <br>
  1288. <h6>Hall Details:</h6>
  1289. <p>Zone: <span id="zone"></span></p>
  1290. <p>Division: <span id="division"></span>
  1291. </p>
  1292. <p>Address: <span id="address"></span>
  1293. </p>
  1294. <p>Landmark: <span id="landmark"></span>
  1295. </p>
  1296. <p>Seating Capacity: <span id="seatingCapacity"></span></p>
  1297. <p>CareTaker Number: <span id="caretakerNumber"></span></p>
  1298. </div>
  1299. </div>
  1300. <br>
  1301. <!-- Amount Details -->
  1302. <div class="col-md-6 col-lg-6 col-sm-6">
  1303. <div id="amountDetails">
  1304. <br>
  1305. <h6>Amount Details:</h6>
  1306. <p>Security Deposit: Rs <span id="rentAmount"></span></p>
  1307. <p>Full Day Rent: Rs <span id="fullDayAmount"></span></p>
  1308. <p>Half Day Rent: Rs <span id="halfDayAmount"></span></p>
  1309. <p>GST: <span id="gst"></span>%</p>
  1310. <p>EB for 1 Unit: Rs <span id="ebunit"></span></p>
  1311. <input type="hidden" id="depositAmount" name="depositamount"
  1312. value="100">
  1313. <input type="hidden" id="hallamount" name="hallamount" value="100">
  1314. </div>
  1316. </div>
  1317. </div>
  1318. <div class="row">
  1319. <div class="col-md-12 col-sm-12 col-lg-12">
  1320. <!-- Center align the button -->
  1321. <button type="button" class="btn btn-primary next-step"
  1322. style="background-color: #016d6f; color: white;float: right;">Book
  1323. & Continue</button>
  1324. </div>
  1325. </div>
  1326. </div>
  1327. </div>
  1328. </div>
  1329. <div class="step step-2">
  1330. <div class="container custom-container"
  1331. style=" padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;">
  1332. <!-- Updated inline styles -->
  1333. <div class="mb-3">
  1334. <div class="row">
  1335. <div class="col-md-12 col-lg-12 col-sm-12">
  1336. <table class="table table-bordered">
  1337. <tbody>
  1338. <tr>
  1339. <td><strong>Hall Name:</strong>
  1340. <span id="hallNameDisplayStep2"></span>
  1341. </td>
  1342. <td><strong>Zone: </strong>
  1343. <span id="zoneStep2"></span>
  1344. </td>
  1345. <td><strong>Division: </strong>
  1346. <span id="divisionStep2"></span>
  1347. </td>
  1348. </tr>
  1349. </tbody>
  1350. </table>
  1351. </div>
  1352. <div class="row">
  1353. <div class="col col-lg-3 col-md-3 col-sm-3" style="display: flex; ">
  1354. <button type="button" class="btn btn-primary btn-square-md"
  1355. style="background-color:#008000;"></button>
  1356. <span style="margin-left: 10px;">Day(Available)</span>
  1357. </div>
  1358. <div class="col col-lg-3 col-md-3 col-sm-3" style="display: flex; ">
  1359. <button type="button" class="btn btn-primary btn-square-md"
  1360. style="background-color: #ac2bac;"></button>
  1361. <span style="margin-left: 10px;">Morning(Available)</span>
  1362. </div>
  1363. <div class="col col-lg-3 col-md-3 col-sm-3" style="display: flex; ">
  1364. <button type="button" class="btn btn-primary btn-square-md"
  1365. style="background-color:#FFEA00;"></button>
  1366. <span style="margin-left: 10px;">Evening(Available)</span>
  1367. </div>
  1368. <div class="col col-lg-3 col-md-3 col-sm-3" style="display: flex; ">
  1369. <button type="button" class="btn btn-primary btn-square-md"
  1370. style="background-color: red;"></button>
  1371. <span style="margin-left: 26px;">Not Available <br>
  1372. </span>
  1373. </div>
  1374. </div>
  1375. <div class="col-sm-4 col-lg-4 col-md-4">
  1376. <label for="startDateInput">Start Date:</label>
  1377. <!-- Input field for start date -->
  1378. <input type="text" id="startDateInput" name="startDate"
  1379. class="date-input form-control" style="background-color:white" readonly
  1380. required>
  1381. </div>
  1383. <div class="col-sm-4 col-lg-4 col-md-4">
  1384. <label for="endDateInput">End Date:</label>
  1385. <select id="endDateInput" name="endDate" class="form-control" disabled>
  1386. <option value="0">Select</option>
  1387. </select>
  1388. </div>
  1389. <div class="col-sm-4 col-lg-4 col-md-4">
  1390. <label for="numDaysCount">Number of
  1391. Days:</label>
  1393. <input class="form-control" id="numDaysCount" name="days" value=""
  1394. style="background-color: white;" readonly>
  1395. </div>
  1396. <div class="col-sm-4 col-lg-4 col-md-4">
  1397. <label for="startPeriodDropdown">Start
  1398. Period:</label>
  1399. <select id="startPeriodDropdown" name="startingSlot" class="form-control"
  1400. required>
  1401. <option value="0">select</option>
  1402. <option value="1">Morning (6:00
  1403. AM)</option>
  1404. <option value="2">Evening (2:00
  1405. PM)</option>
  1406. </select>
  1407. </div>
  1408. <div class="col-sm-4 col-lg-4 col-md-4">
  1409. <label>End
  1410. Period:</label>
  1411. <select id="endPeriodDropdown" name="endingSlot" class="form-control"
  1412. required>
  1413. <option value="0">select</option>
  1414. <option value="1">Morning (2:00
  1415. PM)</option>
  1416. <option value="2">Evening (10:00
  1417. PM)</option>
  1418. </select>
  1419. </div>
  1420. </div>
  1422. <br>
  1424. <div class="row">
  1425. <div class="col-md-12 col-lg-12 col-sm-12 text-center">
  1426. <!-- Center align the button -->
  1427. <button type="button" class="btn btn-primary prev-step"
  1428. style="background-color: #016d6f; color: white;float: left;">Previous</button>
  1429. <button type="button" class="btn btn-warning reset-step"
  1430. style=" background-color: orangered; color: white; margin: auto;">Reset</button>
  1432. <button type="button" class="btn btn-primary next-step"
  1433. style="background-color: #016d6f; color: white; float: right;">Next</button>
  1434. </div>
  1435. </div>
  1436. </div>
  1437. </div>
  1438. </div>
  1439. <div class="step step-3">
  1440. <!-- Step 3 form fields here -->
  1441. <div class="container custom-container"
  1442. style="padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;">
  1443. <div class="mb-3">
  1444. <div class="block-content block-content-full ">
  1445. <div class="card-body">
  1446. <div class="col-md-12 col-sm-12 col-lg-12">
  1447. <table class="table table-bordered">
  1448. <tbody>
  1449. <tr>
  1450. <td><strong>Hall
  1451. Name:</strong><span
  1452. id="hallNameDisplayStep3"></span>
  1453. </td>
  1454. <td><strong>Zone:
  1455. </strong><span id="zoneStep3"></span>
  1456. </td>
  1457. <td><strong>Division:
  1458. </strong><span id="divisionStep3"></span>
  1459. </td>
  1460. </tr>
  1461. </tbody>
  1462. </table>
  1464. <input type="hidden" id="userId" name="userId">
  1465. <div class="col-sm-4 col-lg-4 col-md-4">
  1466. <label class="form-check-label" for="reasonforbooking">Reason
  1467. for
  1468. Booking</label>
  1469. <select type="text" class="form-control" id="reasonforbooking"
  1470. name="reasonId" required>
  1471. </select>
  1472. </div>
  1473. <br>
  1474. <div id="reasonFieldsContainer">
  1475. </div>
  1476. <input type="hidden" name="bookingId" id="bookingId" value="0">
  1477. </div>
  1478. </div>
  1479. <div class="row">
  1480. <div class="col-md-12 col-lg-12 col-sm-12 text-center">
  1481. <!-- Center align the button -->
  1482. <button type="button" class="btn btn-primary prev-step"
  1483. style="background-color: #016d6f; color: white; float: left;">Previous</button>
  1484. <button type="button" class="btn btn-warning reset-step"
  1485. style="background-color: orangered; color: white; margin: auto;">Reset</button>
  1487. <button type="submit" class="btn btn-primary next-step"
  1488. style="background-color: #016d6f; color: white; float: right;">Next</button>
  1489. <!--<button type="button"
  1490. class="btn btn-secondary cancel-step">Cancel</button>-->
  1491. </div>
  1492. </div>
  1493. </div>
  1494. </div>
  1495. </div>
  1496. </div>
  1497. <div class="step step-4">
  1498. <div class="container custom-container">
  1499. <div class="header" style="background-color: rgb(21,69,93); position: relative;">
  1500. <img src="media/images/logo-sm.png" alt="Logo"
  1501. style="position: absolute; left: 10px; top: 7px; height: 30px;">
  1502. <h6 style="color: white; text-align: center; line-height: 3.1;">
  1503. Payment Confirmation Receipt</h6>
  1504. </div>
  1505. <div class="col-md-12">
  1506. <table class="table table-bordered">
  1507. <tbody>
  1508. <tr>
  1509. <td><strong>Full Name:</strong> <span id="name_td"></span></td>
  1510. <td><strong>MobileNumber:</strong> <span id="mobileno_td"></span></td>
  1511. <td><strong>User Type:</strong> <span id="usertype_td"></span></td>
  1512. </tr>
  1513. </tbody>
  1514. </table>
  1515. </div>
  1517. <div class="row">
  1518. <div class="col-md-6">
  1519. <table class="table table-bordered">
  1520. <tbody>
  1521. <tr>
  1522. <td><strong>Hall Name:</strong></td>
  1523. <td><span id="selecthall_td"></span>
  1524. </td>
  1525. </tr>
  1527. <tr>
  1528. <td><strong>No. of Days:</strong>
  1529. </td>
  1530. <td><span id="numDaysCount_td"></span>
  1531. </td>
  1532. </tr>
  1533. <tr>
  1534. <td><strong>Start Date:</strong>
  1535. </td>
  1536. <td><span id="startDateInput_td"></span>
  1537. </td>
  1538. </tr>
  1539. <tr>
  1540. <td><strong>End Date:</strong></td>
  1541. <td><span id="endDateInput_td"></span>
  1542. </td>
  1543. </tr>
  1544. <tr>
  1545. <td><strong>Startinng Slot & Ending Slot</strong></td>
  1546. <td><span id="startingslot_td"></span>
  1547. </td>
  1548. </tr>
  1549. <tr>
  1550. <td><strong>Uploaded
  1551. Documents:</strong></td>
  1552. <td>
  1553. <!-- List to display uploaded docs with small images and names -->
  1554. <div id="uploadedDocsList" class="uploaded-docs-list">
  1555. <!-- Each item in the list will have a small image and name -->
  1556. </div>
  1557. </td>
  1558. </tr>
  1560. <div id="largeImageContainer" class="large-image-container"
  1561. style="display: none;">
  1562. <button id="closeButton" type="button" class="close-button">
  1563. <i class="fa fa-times"></i>
  1564. </button>
  1565. <img id="largeImage" src="" alt="Large Image">
  1566. </div>
  1570. </tbody>
  1571. </table>
  1572. </div>
  1573. <div class="col-md-6">
  1574. <table class="table table-bordered">
  1575. <tbody>
  1577. <tr>
  1578. <td><strong>ReasonforBooking:</strong>
  1579. </td>
  1580. <td><span id="reasonforbooking_td"></span>
  1581. </td>
  1582. </tr>
  1583. <tr>
  1584. <td><strong>Hall Amount:</strong>
  1585. </td>
  1586. <td><span id="hallAmount_td">Rs</span>
  1587. </td>
  1588. </tr>
  1589. <tr>
  1590. <td><strong>GST:</strong></td>
  1591. <td><span id="gst_td">Rs</span></td>
  1592. </tr>
  1593. <tr>
  1594. <td><strong>Refundable
  1595. Deposit:</strong></td>
  1596. <td><span id="depositAmount_td">Rs</span>
  1597. </td>
  1598. </tr>
  1599. <tr>
  1600. <td><strong>Discount:</strong></td>
  1601. <td><span id="discount_td">0%</span>
  1602. </td>
  1603. </tr>
  1604. <tr>
  1605. <td><strong>Total Amount:</strong>
  1606. </td>
  1607. <td><span id="totalAmount_td">Rs</span>
  1608. </td>
  1609. </tr>
  1610. </tbody>
  1611. </table>
  1612. </div>
  1613. </div>
  1614. <div class="row">
  1615. <div class="col-md-12 text-center">
  1616. <!-- Center align the button -->
  1617. <button type="button" class="btn btn-primary prev-step"
  1618. style="background-color: #016d6f; color: white;float: left;">Previous</button>
  1619. </div>
  1620. </div>
  1621. <div align="center">
  1622. <label data-toggle="tooltip" data-placement="top"
  1623. title="Check community hall list for Terms and Conditions">
  1624. <input type="checkbox" id="checkin" onchange="togglePaymentButton(this)" />
  1625. <a href="#" id="termsLink">I agree to the Terms and Conditions</a>
  1626. </label>
  1627. <button type="button" id="confirmPaymentBtn" class="btn btn-success"
  1628. onclick="paymentForCounter()" disabled>Confirm Payment</button>
  1629. <input type="hidden" id="btnSubmit"></input>
  1630. </div>
  1632. </div>
  1633. </div>
  1634. <!--<div class="row mt-3">
  1635. <div class="col-sm-6">
  1636. <button type="button" class="btn btn-secondary" id="backToProfileButton">Back</button>
  1637. </div>
  1638. </div>-->
  1639. </form>
  1640. </div>
  1641. </div>
  1645. <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
  1646. <div class="modal-dialog modal-lg">
  1647. <div class="modal-content">
  1648. <div class="modal-header">
  1649. <h5 class="modal-title" id="termsModalLabel">Terms and Conditions</h5>
  1650. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1651. </div>
  1652. <div class="modal-body">
  1653. <div class="table-responsive">
  1654. <table class="table table-bordered table-wrap">
  1655. <tbody>
  1656. <tr>
  1657. <td>1</td>
  1658. <td>Community center shall be booked on daily rental basis for religious,
  1659. social,
  1660. and cultural purposes only. Political based functions, against the
  1661. Government
  1662. Policy and illegal programmes shall not be allowed.</td>
  1663. </tr>
  1664. <tr>
  1665. <td>2</td>
  1666. <td><b>Address proof</b> of the applicant should be furnished with filled in
  1667. application in two copies.</td>
  1668. </tr>
  1669. <tr>
  1670. <td>3</td>
  1671. <td>For marriage, <b>bride and bridegroom photos</b> and age proof should be
  1672. furnished in two copies. (21 years should be completed for men and 18
  1673. years
  1674. should be completed for women)</td>
  1675. </tr>
  1676. <tr>
  1677. <td>4</td>
  1678. <td>For Reception bride and bridegroom photos (two copies) should be
  1679. furnished.</td>
  1680. </tr>
  1681. <tr>
  1682. <td>5</td>
  1683. <td>For Birthday/Ear boring/Puberty/Betrothal/Upanayanam and seemantham
  1684. functions
  1685. photo of the individual should be furnished.</td>
  1686. </tr>
  1687. <tr>
  1688. <td>6</td>
  1689. <td>Separate application to be made for the other than family functions with
  1690. <b>No
  1691. Objection Certificate from the Police Department</b> concerned
  1692. jurisdiction
  1693. of the community hall.</td>
  1694. </tr>
  1695. <tr>
  1696. <td>7</td>
  1697. <td>Those who have applied with required documents and necessary payment
  1698. will be
  1699. given first priority (First come, first served basis)</td>
  1700. </tr>
  1701. <tr>
  1702. <td>8</td>
  1703. <td>Order shall not be transferred to any reason. No permission shall be
  1704. given any
  1705. one to perform the function other than allotted person.</td>
  1706. </tr>
  1707. <tr>
  1708. <td>9</td>
  1709. <td>No permission shall be given to perform function other than mentioned in
  1710. the
  1711. allotment order.</td>
  1712. </tr>
  1713. <tr>
  1714. <td>10</td>
  1715. <td>In case of essentiality for Greater Chennai Corporation for the purpose
  1716. of
  1717. meetings, relief measures on natural calamities and election period
  1718. permission
  1719. order will be cancelled with short intimation.</td>
  1720. </tr>
  1721. <tr>
  1722. <td>11</td>
  1723. <td>Emblem and Name of the Greater Chennai Corporation shall not be
  1724. permitted to be
  1725. displayed or to be used in any other manner.</td>
  1726. </tr>
  1727. <tr>
  1728. <td>12</td>
  1729. <td>Function should be performed without stigma of Greater Chennai
  1730. Corporation.</td>
  1731. </tr>
  1732. <tr>
  1733. <td>13</td>
  1734. <td>After finishing the function, all materials other than Corporation
  1735. should be
  1736. removed from the community center.</td>
  1737. </tr>
  1738. <tr>
  1739. <td>14</td>
  1740. <td>Cooking should be done only in the kitchen or place provided for the
  1741. purpose.
  1742. </td>
  1743. </tr>
  1744. <tr>
  1745. <td>15</td>
  1746. <td>The Corporation will not be responsible for any theft or loss of motor
  1747. vehicles,
  1748. properties or any damages which occur to the parties.</td>
  1749. </tr>
  1750. <tr>
  1751. <td>16</td>
  1752. <td>Vessels, furniture and other materials of the Corporation should not be
  1753. taken
  1754. out from the community center, and no nails, posters, stickers and
  1755. notices fixed
  1756. in the walls.</td>
  1757. </tr>
  1758. <tr>
  1759. <td>17</td>
  1760. <td>The electricity consumption charge has to be deducted from the amount
  1761. deposit if
  1762. any additional electrical illuminations of decorations have to be done
  1763. prior
  1764. approval of the Electrical Engineer, Corporation of Chennai has to be
  1765. obtained.
  1766. </td>
  1767. </tr>
  1768. <tr>
  1769. <td>18</td>
  1770. <td>No nuisance like spitting, throwing leaves and other materials on the
  1771. neighborhood premises etc.</td>
  1772. </tr>
  1773. <tr>
  1774. <td>19</td>
  1775. <td>Permission order will be given only to the applicant.</td>
  1776. </tr>
  1777. <tr>
  1778. <td>20</td>
  1779. <td>The Commissioner is empowered to grant permission or reject the
  1780. application
  1781. without assigning any reasons therefor.</td>
  1782. </tr>
  1783. <tr>
  1784. <td>21</td>
  1785. <td>If vessels and other materials, chair, table of the Corporation received
  1786. for the
  1787. function, it has to be returned safely after the function is over. If
  1788. any
  1789. damages or loss of material, programmer is responsible and should pay
  1790. the
  1791. charges.</td>
  1792. </tr>
  1793. <tr>
  1794. <td>22</td>
  1795. <td>Monitoring the rules and regulations and maintenance of the community
  1796. hall/auditorium has to be continued by the Zonal Offices concerned.</td>
  1797. </tr>
  1798. </tbody>
  1799. </table>
  1800. <div class="container">
  1801. <div class="text-end">
  1802. Commissioner<br>
  1803. Greater Chennai Corporation.
  1804. </div>
  1805. </div>
  1806. </div>
  1807. </div>
  1808. <div class="modal-footer">
  1809. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  1810. </div>
  1811. </div>
  1812. </div>
  1813. </div>
  1816. <div class="modal fade backdrop" id="ddDetailsModal" data-backdrop="static" tabindex="-1" role="dialog"
  1817. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  1818. <div class="modal-dialog modal-lg" role="document">
  1819. <div class="modal-content">
  1820. <form action="/counter/saveDDdetails" id="ddform" method="post" onsubmit="return submitForm()"
  1821. enctype="multipart/form-data">
  1822. <div class="block block-rounded block-themed block-transparent mb-0">
  1823. <div class="block-header bg-primary-dark">
  1824. <h3 class="block-title" id="mtitle">Add Demand Draft Number</h3>
  1825. <div class="block-options">
  1826. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  1827. aria-label="Close">
  1828. <i class="fa fa-fw fa-times"></i>
  1829. </button>
  1830. </div>
  1831. </div>
  1832. <div class="block-content row">
  1833. <!-- Existing form fields -->
  1834. <div class="col-md-4">
  1835. <div class="form-group">
  1836. <label for="bankName">Bank Name:</label>
  1837. <input type="text" class="form-control" id="bankName" name="bankName"
  1838. placeholder="Bank Name" pattern="[A-Za-z\s-]+" required>
  1839. </div>
  1840. </div>
  1841. <div class="col-md-4">
  1842. <div class="form-group">
  1843. <label for="bankAccNo">Bank Account Number:</label>
  1844. <input type="text" class="form-control" id="bankAccNo" name="bankAccNo"
  1845. placeholder="Bank Account No" minlength="6" maxlength="24" pattern="\d+"
  1846. required>
  1847. </div>
  1848. </div>
  1849. <div class="col-md-4">
  1850. <div class="form-group">
  1851. <label for="ddNumber">Demand Draft Number:</label>
  1852. <input type="text" class="form-control" id="ddNumber" name="ddNumber"
  1853. placeholder="DD No" minlength="6" maxlength="10" pattern="\d+" required>
  1854. </div>
  1855. </div>
  1856. <div class="col-md-4">
  1857. <div class="form-group">
  1858. <label for="totalamount">Total Amount:</label>
  1859. <input type="text" class="form-control" id="totalamount" name="totalamount"
  1860. readonly>
  1861. </div>
  1862. </div>
  1863. <div class="col-4">
  1864. <div class="form-group">
  1865. <lable for="amountReceived">DD Amount:</lable>
  1866. <input type="text" class="form-control" id="amountReceived"
  1867. name="amountReceived" required="required" pattern="[0-9]">
  1868. </div>
  1869. </div>
  1870. <div class="col-md-4">
  1871. <input type="hidden" id="bookingId" name="bookingId">
  1872. </div>
  1873. <div class="row">
  1874. <div class="col">
  1875. <p class="p1 text-center"><strong>DOCUMENTS DETAILS</strong></p>
  1876. </div>
  1877. </div>
  1878. <div class="row" id="photoInputs">
  1879. <div class="col-md-8">
  1880. <div class="form-group">
  1881. <label for="counterddphoto" style="color:red;">Photo 1: Only (.JPEG,
  1882. .JPG, .PDF)
  1883. then uploading File size should not exceed above 1mb</label>
  1884. <input type="file" class="form-control dd-image" id="counterddphoto"
  1885. name="counterddphoto" accept="image/jpeg, image/jpg, image/pdf"
  1886. required>
  1887. </div>
  1888. </div>
  1889. </div>
  1890. </div>
  1891. </div>
  1892. <div class="block-content block-content-full text-end bg-body" id="mbutton">
  1893. <button type="button" class="btn btn-sm btn-alt-secondary"
  1894. data-bs-dismiss="modal">Close</button>
  1895. <button type="submit" class="btn btn-sm btn-primary">Submit</button>
  1896. </div>
  1897. </form>
  1898. </div>
  1899. </div>
  1900. </div>
  1904. </main>
  1905. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  1906. </div>
  1908. <script th:replace="~{fragments/script :: script}"></script>
  1909. <script th:replace="~{fragments/PaymentScript :: script}"></script>
  1911. <script>
  1912. $('.carousel').carousel({
  1913. interval: 6000
  1914. });
  1915. var currentStep = 1;
  1916. var updateProgressBar;
  1917. var userId;
  1918. var bookingId;
  1919. let selectedHallName = '';
  1920. let selectedZone = '';
  1923. function toggleNextButton(step) {
  1924. var nextButton = document.querySelector('.step-' + step + ' .next-step');
  1925. var fields = document.querySelectorAll('.step-' + step + ' [required]');
  1928. var allFieldsFilled = true;
  1929. fields.forEach(function (field) {
  1930. if (!field.value) {
  1931. allFieldsFilled = false;
  1932. }
  1933. });
  1935. if (allFieldsFilled) {
  1936. nextButton.disabled = false; // Enable the button
  1937. } else {
  1938. nextButton.disabled = true; // Disable the button
  1939. }
  1940. }
  1942. // Call the function for Step 1 when the page loads
  1943. document.addEventListener('DOMContentLoaded', function () {
  1944. // toggleNextButton(1);
  1945. toggleNextButton(2);
  1946. toggleNextButton(3);
  1947. });
  1949. // Attach event listeners for each step's form fields
  1950. /* document.querySelectorAll('.step-1 [required]').forEach(function(field) {
  1951. field.addEventListener('input', function() {
  1952. toggleNextButton(1);
  1953. });
  1954. });*/
  1956. document.querySelectorAll('.step-2 [required]').forEach(function (field) {
  1957. field.addEventListener('input', function () {
  1958. toggleNextButton(2);
  1959. });
  1960. });
  1961. document.querySelectorAll('.step-3 [required]').forEach(function (field) {
  1962. field.addEventListener('input', function () {
  1963. toggleNextButton(3);
  1964. });
  1965. });
  1967. function fetchReasonDocumentDetails(reasonId) {
  1968. $.ajax({
  1969. url: '/victoriahallbooking/admin/api/getReasonDocumentDetails',
  1970. type: 'GET',
  1971. dataType: 'json',
  1972. data: {reasonId: reasonId}
  1973. })
  1974. .done(function (data) {
  1975. const reasonFieldsContainer = $('#reasonFieldsContainer');
  1976. reasonFieldsContainer.empty();
  1977. const rowDiv = $('<div class="row"></div>');
  1978. $.each(data, function (index, detail) {
  1979. if (detail.addTextField == true) {
  1980. const fieldDiv = $('<div class="col-sm-4 form-group"></div>');
  1981. const label = $('<label>' + detail.fieldName + '</label>');
  1982. const input = $('<input type="text" class="form-control" name="' + detail.fieldName + '" required>');
  1984. // Add event listener for input validation
  1985. input.on('input', function () {
  1986. // Replace any non-letter characters with an empty string
  1987. this.value = this.value.replace(/[^a-zA-Z]/g, '');
  1988. });
  1990. fieldDiv.append(label);
  1991. fieldDiv.append(input);
  1992. rowDiv.append(fieldDiv);
  1993. }
  1995. if (detail.addDocumentField == true) {
  1996. const fieldDiv2 = $('<div class="col-sm-4 form-group"></div>');
  1997. fieldDiv2.append('<label>' + detail.docFieldName + '</label><input type="file" class="form-control file-upload-field" name="' + detail.docFieldName + '" required accept=".jpg,.jpeg, .pdf">');
  1998. rowDiv.append(fieldDiv2);
  1999. }
  2000. });
  2001. reasonFieldsContainer.append(rowDiv);
  2003. // File upload field validation for size and error display
  2004. $('.file-upload-field').on('change', function () {
  2005. const file = this.files[0];
  2006. if (file && file.size > 2097152) { // size is in bytes
  2007. $(this).addClass('error'); // Add error class
  2008. $(this).after('<div class="error-message">File size should not exceed 2 MB</div>'); // Display error message
  2009. this.value = ''; // Reset the file input
  2010. } else {
  2011. $(this).removeClass('error'); // Remove error class
  2012. $(this).next('.error-message').remove(); // Remove error message if present
  2013. }
  2014. });
  2016. })
  2017. .fail(function (xhr, status, error) {
  2018. console.error('Error fetching reason document details:', error);
  2019. });
  2020. }
  2024. // Call the function to fetch reasons and populate the dropdown when the document is ready
  2025. $(document).ready(function () {
  2026. fetchReasonsAndPopulateDropdown();
  2028. $('#reasonforbooking').change(function () {
  2029. const selectedReasonId = parseInt($(this).val()); // Convert the value to an integer
  2030. fetchReasonDocumentDetails(selectedReasonId);
  2031. });
  2033. });
  2035. var ch = 0;
  2037. function saveCounterBooking() {
  2038. // console.log("saveCounterBooking called");
  2040. $("#startPeriodDropdown").prop("disabled", false);
  2041. $("#endPeriodDropdown").prop("disabled", false);
  2043. var form = document.getElementById('booking');
  2044. var formData = new FormData(form);
  2046. console.log(formData);
  2048. $.ajax({
  2049. url: '../victoriahallbooking/user/api/counter-booking',
  2050. type: 'POST',
  2051. data: formData,
  2052. processData: false,
  2053. contentType: false,
  2054. success: function (response) {
  2055. // console.log("response=", response);
  2056. // Update the UI with the response data
  2057. $("#bookingId").val(response.bookingId);
  2058. $("#userId").val(response.userId);
  2059. $("#selecthall_td").html(response.hallName);
  2060. $("#numDaysCount_td").html(response.noOfDays);
  2061. $("#startDateInput_td").html(response.startDate);
  2062. $("#endDateInput_td").html(response.endDate);
  2063. function getTimeOfDay(slot) {
  2064. if (slot === 1) {
  2065. return "Morning";
  2066. } else if (slot === 2) {
  2067. return "Evening";
  2068. } else {
  2069. return "Invalid slot";
  2070. }
  2071. }
  2073. $("#startingslot_td").html(getTimeOfDay(response.startingSlot) + " to " + getTimeOfDay(response.endingSlot));
  2075. $("#reasonforbooking_td").html(response.reason);
  2076. $("#hallAmount_td").html(response.hallAmount);
  2077. $("#gst_td").html(response.gst);
  2078. $("#depositAmount_td").html(response.depositAmount);
  2079. $("#discount_td").html(response.discount + "%")
  2080. $("#totalAmount_td").html(response.totalAmount);
  2081. $("#name_td").html(response.username);
  2082. $("#mobileno_td").html(response.mobileNo);
  2083. $("#usertype_td").html(response.userType);
  2085. displayDocumentDetails(response.uploadedDocs);
  2087. // Set the onclick event for the confirmPaymentBtn to include the bookingId
  2088. //$('#confirmPaymentBtn').attr('onclick', 'addnewdd(' + response.bookingId + ')');
  2089. // Enable the button to ensure it can be clicked
  2090. //$('#confirmPaymentBtn').prop('disabled', false);
  2091. },
  2092. error: function (xhr, status, error) {
  2093. console.error('Error saving booking details:', error);
  2094. }
  2095. });
  2096. }
  2098. function addnewdd(bookingId) {
  2099. // console.log("bookingId==", bookingId);
  2100. $('#ddDetailsModal').modal('show');
  2101. // Set the bookingId value in the hidden input field
  2102. $('#ddform #bookingId').val(bookingId);
  2104. // Make an AJAX request to fetch booking details
  2105. $.ajax({
  2106. url: '/victoriahallbooking/user/api/getBooking',
  2107. type: 'GET',
  2108. data: {bookingId: bookingId},
  2109. success: function (response) {
  2110. // Assuming the response contains the booking details
  2111. console.log("Booking details: ", response);
  2112. // Display the amountReceived field in the modal's readonly input field
  2113. $('#totalamount').val(response.amountReceived); // Adjust according to your response structure
  2114. },
  2115. error: function (error) {
  2116. // console.log("Error fetching booking details: ", error);
  2117. }
  2118. });
  2119. }
  2121. function submitForm() {
  2122. var bookingId = $('#ddform #bookingId').val();
  2123. if (!bookingId) {
  2124. alert("Booking ID is missing!");
  2125. return false;
  2126. }
  2127. // console.log("Submitting form with bookingId=", bookingId);
  2128. return true;
  2129. }
  2135. function displayDocumentDetails(uploadedDocs) {
  2136. const uploadedDocsList = $("#uploadedDocsList");
  2137. uploadedDocsList.empty(); // Clear existing items
  2138. uploadedDocs.forEach(function (doc) {
  2139. const listItem = $('<li>');
  2140. const thumbnail = $('<img>').addClass('thumbnail-img');
  2142. if (doc.bookingDocUrl.endsWith('.pdf')) {
  2143. thumbnail.attr('src', doc.bookingDocUrl);
  2144. listItem.append(thumbnail).append(' ' + doc.documentName);
  2145. thumbnail.on('click', function () {
  2146. const pdfViewer = $('<iframe>').attr({
  2147. src: doc.bookingDocUrl
  2148. });
  2149. $('#largeImage').hide();
  2150. $('#largeImageContainer').find('iframe').remove();
  2151. $('#largeImageContainer').append(pdfViewer);
  2152. $('#largeImageContainer').show();
  2153. });
  2154. } else {
  2155. thumbnail.attr('src', doc.bookingDocUrl);
  2156. listItem.append(thumbnail).append(' ' + doc.documentName);
  2157. thumbnail.on('click', function () {
  2158. $('#largeImageContainer iframe').remove();
  2159. $('#largeImage').attr('src', doc.bookingDocUrl).show();
  2160. $('#largeImageContainer').show();
  2161. });
  2162. }
  2164. uploadedDocsList.append(listItem);
  2165. });
  2166. }
  2167. $("#closeButton").on('click', function () {
  2168. $('#largeImageContainer').hide(); // Hide the large image container
  2169. $('#largeImage').attr('src', '').hide(); // Reset and hide image
  2170. $('#largeImageContainer iframe').remove(); // Remove iframe if present
  2171. });
  2174. function fetchReasonsAndPopulateDropdown() {
  2175. // Make an AJAX call to fetch all reasons
  2176. $.ajax({
  2177. url: '/victoriahallbooking/admin/api/getReasons',
  2178. type: 'GET',
  2179. dataType: 'json'
  2180. })
  2181. .done(function (data) {
  2182. const reasonDropdown = $('#reasonforbooking');
  2183. reasonDropdown.empty();
  2184. reasonDropdown.append($('<option selected value="0"></option>').text('Select a reason'));
  2185. $.each(data, function (index, reason) {
  2186. reasonDropdown.append($('<option></option>').attr('value', reason.reasonId).text(reason.reason));
  2187. });
  2188. })
  2189. .fail(function (xhr, status, error) {
  2190. console.error('Error fetching reasons:', error);
  2191. });
  2192. }
  2194. function togglePaymentButton(checkbox) {
  2195. var confirmPaymentBtn = document.getElementById('confirmPaymentBtn');
  2196. confirmPaymentBtn.disabled = !checkbox.checked;
  2197. }
  2199. document.getElementById('termsLink').addEventListener('click', function (event) {
  2200. event.preventDefault();
  2201. $('#termsModal').modal('show');
  2202. });
  2204. function togglePaymentButton(checkbox) {
  2205. document.getElementById('confirmPaymentBtn').disabled = !checkbox.checked;
  2206. }
  2207. function displayStep(stepNumber) {
  2208. // console.log(stepNumber);
  2210. if (stepNumber >= 1 && stepNumber <= 4) {
  2212. if (validateStep(currentStep)) {
  2213. /* console.log(currentStep);*/
  2214. $(".step-" + currentStep).hide();
  2215. $(".step-" + stepNumber).show();
  2216. currentStep = stepNumber;
  2217. updateProgressBar();
  2219. // Populate hallName, zone, and division in Step 2 and Step 3
  2220. if (stepNumber === 2 || stepNumber === 3) {
  2221. $('#hallNameDisplayStep2').text(selectedHallName);
  2222. $('#hallNameDisplayStep3').text(selectedHallName);
  2223. $('#zoneStep2').text(zone);
  2224. $('#zoneStep3').text(zone);
  2225. $('#divisionStep2').text('');
  2226. $('#divisionStep3').text('');
  2228. $('#selecthall_td').text(selectedHallName);
  2229. }
  2231. // Handle displaying the SweetAlert in Step 3
  2233. } else {
  2234. //alert("Please fill in all required fields before proceeding.");
  2235. }
  2236. }
  2237. }
  2240. function validateStep(stepNumber) {
  2242. }
  2244. $(document).ready(function () {
  2245. $('.step').hide();
  2246. $('.step-1').show();
  2247. var currentStep = 1; // Assuming you have this variable defined somewhere in your code
  2249. // Function to validate step 3
  2250. // Function to validate step 3
  2251. // Function to validate step 3
  2252. function validateStep3() {
  2253. let isValid = true;
  2254. let selectedReason = $('#reasonforbooking').val();
  2256. // Check if a reason is selected
  2257. if (!selectedReason) {
  2258. isValid = false;
  2259. } else {
  2260. // Iterate through each input associated with the selected reason
  2261. $(`#reasonFieldsContainer .${selectedReason} input[type="text"], #reasonFieldsContainer .${selectedReason} input[type="file"]`).each(function () {
  2262. if ($(this).prop('required') && !$(this).val()) {
  2263. isValid = false;
  2264. return false; // Exit the loop early if any required field is empty
  2265. }
  2266. });
  2267. }
  2269. // Enable/disable the next button based on validation
  2270. $('.next-step').prop('disabled', !isValid);
  2271. }
  2274. // Event listener for reason dropdown change
  2275. $('#reasonforbooking').change(function () {
  2276. let selectedReason = $(this).val();
  2278. // Show/hide fields based on selected reason
  2279. $('#reasonFieldsContainer').children().hide();
  2280. if (selectedReason) {
  2281. $(`#reasonFieldsContainer .${selectedReason}`).show();
  2282. }
  2284. // Validate the fields for the selected reason
  2285. validateStep3();
  2286. });
  2288. // Event listener for input changes within reason fields
  2289. $('#reasonFieldsContainer').on('change', 'input, select', function () {
  2290. validateStep3();
  2291. });
  2293. $(".next-step").click(function () {
  2294. var valid = true;
  2296. // Validate all required text inputs and file fields in Step 3
  2297. if (currentStep === 3) {
  2298. $('.step-3 input[required], .step-3 select[required]').each(function () {
  2299. if ($(this).val() === '') {
  2300. $(this).addClass('error'); // Add error class
  2301. valid = false;
  2302. return false; // Break the loop
  2303. } else {
  2304. $(this).removeClass('error'); // Remove error class if valid
  2305. }
  2306. });
  2308. $('.step-3 input[type="file"][required]').each(function () {
  2309. if ($(this)[0].files.length === 0) {
  2310. $(this).addClass('error'); // Add error class
  2311. valid = false;
  2312. return false; // Break the loop
  2313. } else {
  2314. $(this).removeClass('error'); // Remove error class if valid
  2315. }
  2316. });
  2317. }
  2319. if (!valid) {
  2320. return; // Stop if validation fails
  2321. }
  2322. if (currentStep < 4) {
  2323. $(".step-" + currentStep).fadeOut(500, function () {
  2324. if (currentStep === 4) {
  2325. $(".step-" + currentStep).fadeIn(500);
  2326. // console.log(currentStep);
  2327. updateProgressBar();
  2328. return "";
  2329. } else {
  2330. currentStep++;
  2331. $(".step-" + currentStep).fadeIn(500);
  2332. updateProgressBar();
  2333. }
  2334. });
  2335. }
  2336. });
  2338. $(".prev-step").click(function () {
  2339. if (currentStep > 1) {
  2340. $(".step-" + currentStep).fadeOut(500, function () {
  2341. currentStep--;
  2342. $(".step-" + currentStep).fadeIn(500);
  2343. updateProgressBar();
  2344. });
  2345. }
  2346. });
  2348. $(".step-2 .reset-step").click(function () {
  2349. $('.step-2 input[type="text"], .step-2 select').val(function () {
  2350. return this.defaultValue;
  2351. });
  2353. $('.step-2 input[type="checkbox"], .step-2 input[type="radio"]').prop('checked', false);
  2354. $('#endDateInput').prop('disabled', true).val('0');
  2355. $('#startPeriodDropdown').val('0');
  2356. $('#endPeriodDropdown').val('0');
  2357. $('#numDaysCount').val(''); // Reset the number of days input
  2358. $('.step-2 .error-message').hide();
  2359. toggleNextButton(2); // Ensure button state reflects field values after reset
  2360. });
  2362. $(".step-3 .reset-step").click(function () {
  2363. // Reset input fields and selects, excluding #reasonforbooking
  2364. $('.step-3 input[type="text"], input[type="file"], .step-3 select').each(function () {
  2365. $(".step-3 .next-step").prop("disabled", true);
  2366. // Check if element is not #reasonforbooking
  2367. if (!$(this).is('#reasonforbooking')) {
  2368. $(this).val(this.defaultValue);
  2369. }
  2370. });
  2372. // Hide error messages and validate step 3
  2373. $('.step-3 .error-message').hide();
  2374. validateStep3();
  2375. });
  2377. $(".step-2 .next-step").click(function () {
  2378. var reasonforbooking = $("#reasonforbooking").val();
  2379. if (reasonforbooking !== "0") {
  2380. $(".step-3 .next-step").prop("disabled", false);
  2381. } else {
  2382. $(".step-3 .next-step").prop("disabled", true);
  2383. };
  2384. });
  2387. $(".cancel-step").click(function () {
  2388. // Redirect to the cancel page or handle cancellation logic here
  2389. window.location.href = "/dashboard";
  2390. });
  2392. updateProgressBar = function () {
  2393. var progressPercentage = ((currentStep - 1) / 3) * 100;
  2394. $(".progress-bar").css("width", progressPercentage + "%");
  2395. };
  2397. // File upload field validation for size and error display
  2398. $('.file-upload-field').on('change', function () {
  2399. const file = this.files[0];
  2400. if (file && file.size > 20480) { // size is in bytes
  2401. $(this).addClass('error'); // Add error class
  2402. $(this).after('<div class="error-message">File size should not exceed 20 KB</div>'); // Display error message
  2403. this.value = ''; // Reset the file input
  2404. } else {
  2405. $(this).removeClass('error'); // Remove error class
  2406. $(this).next('.error-message').remove(); // Remove error message if present
  2407. }
  2408. });
  2410. // Initial validation check for step 3
  2411. validateStep3();
  2413. // Log statement to ensure the button is being enabled
  2414. // console.log("Enabling the button...");
  2415. $('.step-1 .next-step').prop('disabled', false);
  2416. });
  2420. $(document).ready(function () {
  2421. // Function to show/hide fields based on the selected User Type
  2422. $("#userType").change(function () {
  2423. var selectedUserType = $(this).val();
  2424. // Hide all fields initially
  2425. $("#employeeFields, #pensionerFields, #familypensionerFields").hide();
  2426. if (selectedUserType === "PUBLIC") {
  2427. $("#pensionerFields").hide();
  2428. $("#familypensionerFields").hide();
  2429. $("#employeeFields").hide();
  2430. }
  2431. else if (selectedUserType === "GCC_EMPLOYEE") {
  2432. $("#employeeFields").show();
  2433. } else if (selectedUserType === "PENSIONER") {
  2434. $("#pensionerFields").show();
  2435. } else if (selectedUserType == "FAMILYPENSIONER") {
  2436. $("#familypensionerFields").show();
  2437. }
  2438. });
  2440. // Validation for alphanumeric input
  2441. $("#employeeId, #pensionerId").on("input", function () {
  2442. var inputValue = $(this).val();
  2443. if (!/^[a-zA-Z0-9]*$/.test(inputValue)) {
  2444. alert("Please enter alphanumeric characters only.");
  2445. $(this).val("");
  2446. }
  2447. });
  2449. // Validation for numeric input
  2450. $("#wardNo").on("input", function () {
  2451. var inputValue = $(this).val();
  2452. if (!/^\d*$/.test(inputValue)) {
  2453. alert("Please enter numeric characters only for Ward No.");
  2454. $(this).val("");
  2455. }
  2456. });
  2457. });
  2459. // Function to toggle hall details container and fetch hall details
  2460. function toggleHallDetailsContainer() {
  2461. var selectBox = document.getElementById("selecthall");
  2462. var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  2463. var hallDetailsContainer = document.getElementById("hallDetailsContainer");
  2465. if (selectedValue !== "") {
  2466. hallDetailsContainer.style.display = "block"; // Show hall details container if a hall is selected
  2468. // Get the selected hall ID
  2469. var hallId = selectBox.options[selectBox.selectedIndex].value;
  2470. getHallDetails(hallId); // Fetch hall details
  2472. // Other code for displaying selected details
  2473. } else {
  2474. hallDetailsContainer.style.display = "none"; // Hide hall details container if no hall is selected
  2476. // Clear the selected details in Step 2 and Step 3
  2477. $('#hallNameDisplayStep2').text('');
  2478. $('#hallNameDisplayStep3').text('');
  2479. $('#zoneStep2').text('');
  2480. $('#zoneStep3').text('');
  2481. $('#divisionStep2').text('');
  2482. $('#divisionStep3').text('');
  2485. // Clear other details if needed
  2486. }
  2487. }
  2490. var index = 0;
  2491. var hall;
  2494. $(function () {
  2495. $("#selecthall").select2();
  2496. });
  2497. $.ajax({
  2498. type: 'GET',
  2499. url: '/victoriahallbooking/user/api/gethallnames',
  2500. success: function (response) {
  2501. // Populate the dropdown options with the received hall names
  2503. var selectHallDropdown = $('#selecthall');
  2504. $.each(response, function (index, hall) {
  2505. // console.log("response==", response);
  2506. // console.log("halls", hall);
  2507. var hallId = 0;
  2508. if (hallId == hall.hallId) {
  2509. selectHallDropdown.append($('<option></option>').attr('value', hall.hallId).text(hall.hallName));
  2510. selectHallDropdown.find('option[value="' + hall.hallId + '"]').prop('selected', true);
  2512. } else {
  2513. selectHallDropdown.append($('<option></option>').attr('value', hall.hallId).text(hall.hallName));
  2514. }
  2515. });
  2516. },
  2517. error: function (xhr, status, error) {
  2518. console.error('Error fetching hall names:', error);
  2519. }
  2520. });
  2522. $(document).ready(function () {
  2523. $('#selecthall').change(function () {
  2524. var selectedHallId = $(this).val();
  2525. // console.log('Selected hall ID:', selectedHallId);
  2526. // Call the getHallDetails function with the selected hall ID
  2527. getHallDetails(selectedHallId);
  2528. });
  2529. });
  2531. // Function to retrieve hall details based on hallId
  2532. function getHallDetails(hallId) {
  2533. $.ajax({
  2534. type: 'GET',
  2535. url: '/victoriahallbooking/user/api/gethalldetails/' + hallId,
  2536. success: function (response) {
  2537. // console.log(response);
  2539. // Display the container
  2540. $('#hallDetailsContainer').show();
  2541. // Set hall details
  2542. $('#zone').text(response.zone);
  2543. $('#division').text(response.division);
  2544. $('#address').text(response.doorNo + ', ' + response.street + ', ' + response.area + ', ' + response.city + ', ' + response.pinCode);
  2545. $('#landmark').text(response.landMark);
  2546. $('#seatingCapacity').text(response.seatingCapacity);
  2547. $('#caretakerNumber').text(response.hallInchargeMobno);
  2548. $('#rentAmount').text(response.depositAmount);
  2549. // Set amount details
  2550. $('#gst').text(response.gst);
  2551. $('#fullDayAmount').text(response.fullDayRent);
  2552. $('#halfDayAmount').text(response.halfDayRent);
  2553. $('#ebunit').text(response.ebCostPerUnit);
  2555. // Set hall images
  2556. var carouselInner = $('#hallImagesCarousel .carousel-inner');
  2557. carouselInner.empty(); // Clear existing images
  2559. $.each(response.hallImagesList, function (index, image) {
  2560. var itemClass = (index === 0) ? 'carousel-item active' : 'carousel-item';
  2561. var img = $('<img>').addClass('d-block w-100').attr('src', image.hallImage).attr('alt', 'Hall Image');
  2562. var carouselItem = $('<div>').addClass(itemClass).append(img);
  2563. carouselInner.append(carouselItem);
  2564. });
  2566. // Initialize ViewerJS on the carousel after images are loaded
  2567. var viewer = new Viewer(document.getElementById('hallImagesCarousel'), {
  2568. inline: false,
  2569. viewed: function () {
  2570. viewer.zoomTo(0.5); // Adjust the zoom level here
  2571. },
  2572. toolbar: {
  2573. zoomIn: 4,
  2574. zoomOut: 4,
  2575. oneToOne: 4,
  2576. reset: 4,
  2577. prev: 4,
  2578. play: {
  2579. show: 4,
  2580. size: 'large',
  2581. },
  2582. next: 4,
  2583. rotateLeft: 4,
  2584. rotateRight: 4,
  2585. flipHorizontal: 4,
  2586. flipVertical: 4,
  2587. },
  2588. });
  2591. getBookingCalendar(hallId);
  2593. // Set hall details in Step 2 and Step 3
  2594. $('#hallNameDisplayStep2').text(response.hallName);
  2595. $('#hallNameDisplayStep3').text(response.hallName);
  2596. $('#zoneStep2').text(response.zone);
  2597. $('#zoneStep3').text(response.zone);
  2598. $('#divisionStep2').text(response.division);
  2599. $('#divisionStep3').text(response.division);
  2600. },
  2601. error: function (xhr, status, error) {
  2602. console.error('Error fetching hall details:', error);
  2603. }
  2604. });
  2605. }
  2606. function getBookingCalendar(hall_id) {
  2607. // Make an AJAX call to fetch booking data
  2608. $.ajax({
  2609. type: 'GET',
  2610. url: '/victoriahallbooking/user/api/getPastData',
  2611. data: {
  2612. hall_id: hall_id
  2613. },
  2614. success: function (response) {
  2615. window.bookingResponse = {};
  2616. if (response && Array.isArray(response)) {
  2617. $("#startDateInput").datepicker("destroy");
  2619. for (var i = 0; i < response.length; i++) {
  2620. var dateString = datepickerFormat(response[i].bdate);
  2621. window.bookingResponse[dateString] = [response[i].morningSlot, response[i].eveningSlot];
  2622. }
  2623. initializeDatepickerWithColors(hall_id);
  2624. if (response.length == 0) {
  2625. initializeDatepickerWithColors(hall_id);
  2626. }
  2627. } else {
  2628. console.error('Invalid or empty response data.');
  2629. }
  2630. },
  2631. error: function (xhr, status, error) {
  2632. console.error('Error fetching hall details:', error);
  2633. }
  2634. });
  2635. }
  2637. // Function to update the end date and slot availability
  2638. function updateEndDate() {
  2639. var startDate = new Date(document.getElementById("startDateInput").value);
  2640. var formatStartDate = formatDate(startDate);
  2642. var endDateInput = document.getElementById("endDateInput");
  2643. endDateInput.innerHTML = '<option value="0">Select</option>';
  2644. endDateInput.disabled = true;
  2646. // Add options for next 7 days from the selected start date
  2647. for (var i = 0; i < 7; i++) {
  2648. var date = new Date(startDate);
  2649. date.setDate(startDate.getDate() + i);
  2651. var formattedDate = formatDate(date);
  2653. if (isNaN(date.getTime())) {
  2654. console.error("Invalid date:", date);
  2655. continue;
  2656. }
  2657. var bookingStatus = window.bookingResponse[formattedDate];
  2658. if (bookingStatus) {
  2659. if (bookingStatus[0] && bookingStatus[1]) {
  2660. break;
  2661. }
  2662. else if (bookingStatus[0]) {
  2663. if (formatStartDate == formattedDate) {
  2664. var option = document.createElement('option');
  2665. option.value = formattedDate;
  2666. option.text = formattedDate;
  2667. endDateInput.appendChild(option);
  2668. } else {
  2669. break;
  2670. }
  2671. }
  2672. else if (bookingStatus[1]) {
  2673. var option = document.createElement('option');
  2674. option.value = formattedDate;
  2675. option.text = formattedDate;
  2676. endDateInput.appendChild(option);
  2677. break;
  2678. } else {
  2679. var option = document.createElement('option');
  2680. option.value = formattedDate;
  2681. option.text = formattedDate;
  2682. endDateInput.appendChild(option);
  2683. }
  2685. } else {
  2686. var option = document.createElement('option');
  2687. option.value = formattedDate;
  2688. option.text = formattedDate;
  2689. endDateInput.appendChild(option);
  2690. }
  2691. }
  2692. endDateInput.disabled = false;
  2694. }
  2696. // Utility function to format date as yyyy-mm-dd
  2697. function formatDate(date) {
  2698. var year = date.getFullYear();
  2699. var month = ("0" + (date.getMonth() + 1)).slice(-2);
  2700. var day = ("0" + date.getDate()).slice(-2);
  2701. return year + "-" + month + "-" + day;
  2702. }
  2706. function calculateNumDays() {
  2707. if (document.getElementById("endDateInput").value == 0) {
  2708. return true;
  2709. }
  2710. var startDate = new Date(document.getElementById("startDateInput").value);
  2711. var endDate = new Date(document.getElementById("endDateInput").value);
  2712. var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
  2713. var numDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
  2714. numDays += 1;
  2716. document.getElementById("numDaysCount").value = numDays;
  2717. }
  2723. // Event listener for when the end date is selected
  2724. document.getElementById("endDateInput").addEventListener("change", function () {
  2725. calculateNumDays();
  2726. $("#endPeriodDropdown").val(0).prop("disabled", false);
  2727. var bookingStatus = window.bookingResponse[$("#endDateInput").val()];
  2728. if (bookingStatus) {
  2729. if (bookingStatus[0]) {
  2730. // console.log("hi1", bookingStatus[0]);
  2731. $("#endPeriodDropdown").val(2);
  2732. $("#endPeriodDropdown").prop("disabled", true);
  2733. }
  2734. else if (bookingStatus[1]) {
  2735. // console.log("hi2", bookingStatus[1]);
  2736. $("#endPeriodDropdown").val(1)
  2737. $("#endPeriodDropdown").prop("disabled", true);
  2738. }
  2739. } else {
  2740. $("#endPeriodDropdown").prop("disabled", false);
  2741. }
  2742. });
  2744. function initializeDatepickerWithColors(hallId) {
  2745. // console.log("Initializing Datepicker with hallId:", hallId); // Confirm hallId is passed here
  2746. $("#datepicker-container").datepicker("destroy");
  2747. $("#startDateInput,#datepicker-container").datepicker({
  2748. dateFormat: "yy-mm-dd",
  2749. minDate: "+7D",
  2750. maxDate: "+6M",
  2751. beforeShowDay: function (eDate) {
  2753. var dateString = $.datepicker.formatDate("yy-mm-dd", eDate);
  2754. var bookingStatus = window.bookingResponse[dateString];
  2756. if (bookingStatus) {
  2758. if (bookingStatus[0] === false && bookingStatus[1] === false) {
  2759. return [true, "highlight-greens", "Slot Available"];
  2760. } else if (bookingStatus[0] === true && bookingStatus[1] === true) {
  2761. return [true, "highlight-pink disabled", "Slot Occuiped"];
  2762. } else if (bookingStatus[0] === true && bookingStatus[1] === false) {
  2763. return [true, "highlight-yellow", "Evening Slot Available"];
  2764. }
  2765. else if (bookingStatus[0] === false && bookingStatus[1] === true) {
  2766. return [true, "highlight-violet", "Only Morning Slot Available"];
  2767. }
  2768. }
  2770. return [true, "highlight-greens", "Slot Available"];
  2772. },
  2773. });
  2775. $('#selecthall').on('click', function () {
  2776. $('#datepicker-container').datepicker('show');
  2778. });
  2781. $("#startDateInput").on("change", function () {
  2782. var selectedDate = $(this).val();
  2783. var endDate = $("#endDateInput").val();
  2784. $("#startPeriodDropdown").val(0).prop("disabled", false);
  2785. $("#endPeriodDropdown").val(0).prop("disabled", false);
  2786. var startPeriod = $("#startPeriodDropdown").val();
  2787. var endPeriod = $("#endPeriodDropdown").val();
  2788. if (endDate !== "0" && startPeriod !== "0" && endPeriod !== "0") {
  2789. $(".next-step").prop("disabled", false);
  2790. } else {
  2791. $(".next-step").prop("disabled", true);
  2792. }
  2793. var bookingStatus = window.bookingResponse[selectedDate];
  2794. if (bookingStatus) {
  2795. if (bookingStatus[0]) {
  2796. // console.log("hi3", bookingStatus[0]);
  2797. $("#startPeriodDropdown").val(2);
  2798. $("#startPeriodDropdown").prop("disabled", true);
  2799. } else if (bookingStatus[1]) {
  2800. // console.log("hi4", bookingStatus[1]);
  2801. $("#startPeriodDropdown").val(1);
  2802. $("#startPeriodDropdown").prop("disabled", true);
  2803. }
  2804. } else {
  2805. $("#startPeriodDropdown").prop("disabled", false);
  2806. }
  2807. updateEndDate(selectedDate);
  2808. });
  2809. }
  2811. function datepickerFormat(dateString) {
  2812. var dateObject = new Date(dateString);
  2813. var year = dateObject.getFullYear();
  2814. var month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
  2815. var day = dateObject.getDate().toString().padStart(2, "0");
  2816. return `${year}-${month}-${day}`;
  2817. }
  2819. // Update the event listeners to include date inputs
  2820. $("#endDateInput").on("change", function () {
  2821. var starting = $("#startPeriodDropdown").val();
  2822. var ending = $("#endPeriodDropdown").val();
  2823. var startDate = $("#startDateInput").val();
  2824. var endDate = $("#endDateInput").val();
  2826. // Call validateSlot with updated parameters
  2827. validateSlot(starting, ending, startDate, endDate);
  2828. validateForm();
  2829. });
  2831. // Event listener for changes in startPeriodDropdown
  2832. $("#startPeriodDropdown").on("change", function () {
  2833. var starting = $(this).val();
  2834. var ending = $("#endPeriodDropdown").val();
  2835. var startDate = $("#startDateInput").val();
  2836. var endDate = $("#endDateInput").val();
  2838. // Call validateSlot with updated parameters
  2839. validateSlot(starting, ending, startDate, endDate);
  2840. validateForm();
  2841. });
  2843. // Event listener for changes in endPeriodDropdown
  2844. $("#endPeriodDropdown").on("change", function () {
  2845. var starting = $("#startPeriodDropdown").val();
  2846. var ending = $(this).val();
  2847. var startDate = $("#startDateInput").val();
  2848. var endDate = $("#endDateInput").val();
  2850. // Call validateSlot with updated parameters
  2851. // console.log("hiiii");
  2852. validateSlot(starting, ending, startDate, endDate);
  2853. validateForm();
  2854. });
  2856. function validateSlot(starting, ending, startDate, endDate) {
  2857. // Check if startDate is equal to endDate and starting is 2 and ending is 1
  2858. if (startDate === endDate && starting == 2 && ending == 1) {
  2859. Swal.fire({
  2860. icon: 'error',
  2861. title: 'Oops!',
  2862. text: "The starting slot cannot be set to Evening if the ending slot is Morning when the dates are the same.",
  2863. }).then(() => {
  2864. $("#startPeriodDropdown").val(1); // Reset startPeriodDropdown to 1
  2865. });
  2866. }
  2867. validateForm(); // Call validateForm to update form validation status
  2868. }
  2870. function validateForm() {
  2871. var startDate = $("#startDateInput").val();
  2872. var endDate = $("#endDateInput").val();
  2873. var startPeriod = $("#startPeriodDropdown").val();
  2874. var endPeriod = $("#endPeriodDropdown").val();
  2875. var reasonforbooking = $("#reasonforbooking").val();
  2877. if (startDate && endDate && startPeriod !== "0" && endPeriod !== "0") {
  2878. $(".next-step").prop("disabled", false);
  2879. } else {
  2880. $(".next-step").prop("disabled", true);
  2881. }
  2882. }
  2885. // Function to toggle visibility of mobileNoContainer based on usertypes selection
  2886. function handleUserTypeChange() {
  2887. const usertypes = document.getElementById('usertypes').value;
  2888. const mobileNoContainer = document.getElementById('mobileNoContainer');
  2889. if (usertypes === 'public') {
  2890. mobileNoContainer.style.display = 'block';
  2891. } else {
  2892. mobileNoContainer.style.display = 'none';
  2893. }
  2894. }
  2895. function reloadUserInformationForm() {
  2896. // Reset the user type dropdown to 'select'
  2897. $("#usertypes").val("select");
  2899. // Hide the mobile number container
  2900. $("#mobileNoContainer").hide();
  2901. document.getElementById("userInfoForm").reset();
  2902. }
  2904. // Function to handle initial page load and browser back navigation
  2905. document.addEventListener('DOMContentLoaded', function () {
  2906. handleUserTypeChange(); // Call to initially hide/show mobileNoContainer based on usertypes
  2907. });
  2909. // Add event listener for sendOTPButton click
  2910. document.getElementById('sendOTPButton').addEventListener('click', function (event) {
  2911. event.preventDefault();
  2912. checkMobileNo();
  2913. });
  2916. function checkMobileNo() {
  2917. var mobileNo = $("#mobileNumber").val().trim(); // Get and trim the mobile number input value
  2919. // Validate the length of the mobile number
  2920. if (mobileNo.length !== 10) {
  2921. Swal.fire({
  2922. title: "Invalid Mobile Number",
  2923. text: "Please enter a 10-digit mobile number.",
  2924. icon: "error",
  2925. confirmButtonText: "OK",
  2926. });
  2927. return; // Exit function if length is not valid
  2928. }
  2930. $.ajax({
  2931. type: "GET",
  2932. url: '/victoriahallbooking/user/api/counterbookinglimit',
  2933. data: {mobileNo: mobileNo},
  2934. success: function (statusResponse) {
  2935. // console.log("hiiii", statusResponse);
  2936. if (statusResponse === "deactive") {
  2937. Swal.fire({
  2938. title: "Account Deactivated",
  2939. text: "Please contact Admin to active.",
  2940. icon: "info",
  2941. showCancelButton: false,
  2942. confirmButtonText: "OK",
  2943. });
  2944. }
  2945. else if (statusResponse === "bookinglimitreached") {
  2946. // User status is pending, show SweetAlert
  2947. Swal.fire({
  2948. title: "Booking Limitation Reached",
  2949. text: "Sorry, you have reached your booking limit. You are allowed to book up to two times in a year.",
  2950. icon: "info",
  2951. showCancelButton: false,
  2952. confirmButtonText: "OK",
  2953. });
  2954. } else if (statusResponse === "checkmobilenoexists") {
  2955. // User status is not pending, proceed to check mobile number existence
  2956. // console.log("statusResponse===", statusResponse);
  2957. $.ajax({
  2958. type: "GET",
  2959. url: '/victoriahallbooking/user/api/checkMobileExits',
  2960. data: {mobileno: mobileNo},
  2961. success: function (mobileResponse) {
  2962. if (mobileResponse === "success") {
  2963. sendOTP(mobileNo);
  2964. } else {
  2965. var alertMessage = "This Mobile Number Is Not Registered! Please register.";
  2966. $('#otpForm').modal('hide'); // Hide OTP form modal
  2967. $('#loginModal').modal('hide');
  2968. Swal.fire({
  2969. title: "Registration Required",
  2970. html: alertMessage,
  2971. icon: "info",
  2972. showCancelButton: true,
  2973. confirmButtonText: "REGISTER",
  2974. customClass: {
  2975. container: 'custom-swal-container', // Add a custom class to the container
  2976. },
  2977. backdrop: true, // Enable backdrop to prevent clicks on the main popup
  2978. }).then((result) => {
  2979. if (result.isConfirmed) {
  2980. $("#registrationModal").modal('show')
  2981. }
  2982. });
  2983. }
  2984. },
  2985. error: function (errortxt) {
  2986. console.error(errortxt);
  2987. }
  2988. });
  2989. }
  2990. },
  2991. error: function (errortxt) {
  2992. console.error(errortxt);
  2993. }
  2994. });
  2995. }
  2998. function sendOTP(mobileNum) {
  2999. if (mobileNum != "" || mobileNum != undefined || mobileNum != null) {
  3000. mobileNo = mobileNum;
  3001. $("#mobilenotxt").html(mobileNo);
  3002. $.ajax({
  3003. type: "GET",
  3004. url: '/victoriahallbooking/user/api/sendOTP',
  3005. data: {'mobileNo': mobileNo, 'purpose': 'New User'},
  3006. success: function (bodyMessage) {
  3007. if (bodyMessage != "Error") {
  3008. $('#otpForm').modal({
  3009. backdrop: 'static',
  3010. keyboard: false
  3011. });
  3012. $('#otpForm').modal('show');
  3013. startCountdown();
  3014. } else {
  3015. alert("OTP Not Send!!!");
  3016. }
  3017. }
  3018. });
  3019. }
  3020. return false;
  3021. }
  3023. function startCountdown() {
  3024. var resendTimeout;
  3025. $("#resendlink").html('Please wait..<span id="countdown">60</span>s');
  3026. var countdown = $("#countdown");
  3028. var timeleft = 60;
  3029. countdown.text(timeleft);
  3031. resendTimeout = setInterval(function () {
  3032. timeleft--;
  3033. countdown.text(timeleft);
  3035. if (timeleft <= 0) {
  3036. clearInterval(resendTimeout);
  3037. $("#resendlink").html('<a href="#" id="resend-link" class="text-info" onclick="return sendOTP(mobileNo);">Resend OTP</a>');
  3038. }
  3039. }, 1000);
  3040. }
  3042. document.getElementById("backButton").addEventListener("click", function () {
  3043. document.getElementById("profileCard").style.display = "none";
  3044. document.getElementById("container").style.display = "block";
  3046. // Reload the user information form
  3047. reloadUserInformationForm();
  3048. });
  3050. document.getElementById("nextButton").addEventListener("click", function () {
  3051. document.getElementById("profileCard").style.display = "none";
  3052. document.getElementById("nextPageCard").style.display = "block";
  3053. });
  3055. /* document.getElementById("backToProfileButton").addEventListener("click", function () {
  3056. document.getElementById("nextPageCard").style.display = "none";
  3057. document.getElementById("profileCard").style.display = "block";
  3058. });*/
  3061. var verifyLogin = "";
  3063. function verifyOtp() {
  3064. var otpInputs = $('.otp-input');
  3065. var otpValue = '';
  3066. otpInputs.each(function () {
  3067. otpValue += $(this).val();
  3068. });
  3069. var mobileNoValue = $("#mobileNumber").val();
  3071. $.ajax({
  3072. type: "GET",
  3073. url: '/victoriahallbooking/user/api/verifyOTP',
  3074. data: {
  3075. 'otp': otpValue,
  3076. 'mobileNo': mobileNoValue
  3077. },
  3078. dataType: 'text',
  3079. success: function (bodyMessage) {
  3080. if (bodyMessage.trim() == "Success") {
  3081. // console.log("OTP is Verified!!!");
  3082. $('#otpForm').modal('hide');
  3083. if (verifyLogin == "new") {
  3085. var formData = new FormData();
  3086. formData.append('mobileNo', mobileNoValue);
  3087. formData.append('name', $('#name').val());
  3088. formData.append('email', $('#email').val());
  3089. formData.append('doorNo', $('#doorNo').val());
  3090. formData.append('street', $('#street').val());
  3091. formData.append('area', $('#area').val());
  3092. formData.append('location', $('#location').val());
  3093. formData.append('pinCode', $('#pincode').val());
  3095. var photoFile = $('#userPhoto')[0].files[0];
  3096. if (photoFile) {
  3097. formData.append('userPhoto', photoFile);
  3098. }
  3100. $.ajax({
  3101. type: "POST",
  3102. url: '/victoriahallbooking/user/api/newcounterregistrationform',
  3103. data: formData,
  3104. processData: false,
  3105. contentType: false,
  3106. success: function (response) {
  3107. // console.log("Registration successful:", response);
  3108. // alert(response.message);
  3109. showProfileDetailsInCard();
  3110. document.getElementById("profileCard").style.display = "block";
  3111. document.getElementById("container").style.display = "none";
  3112. },
  3113. error: function (jqXHR, textStatus, errorThrown) {
  3114. // console.log("Error registering user:", textStatus, errorThrown);
  3115. alert("Registration failed. Please try again.");
  3116. }
  3117. });
  3118. } else {
  3119. // If already logged in, retrieve user details and display them
  3120. $.ajax({
  3121. type: "GET",
  3122. url: '/victoriahallbooking/user/api/getUserDetails',
  3123. data: {'mobileNo': mobileNoValue},
  3124. success: function (userDetails) {
  3125. // console.log("User details retrieved:", userDetails);
  3126. showexistedProfileDetailsInCard(userDetails); // Pass the user details to the function
  3127. },
  3128. error: function (jqXHR, textStatus, errorThrown) {
  3129. // console.log("Error retrieving user details:", textStatus, errorThrown);
  3130. }
  3131. });
  3132. }
  3133. } else {
  3134. $("#otperror").html("OTP is Incorrect!!!");
  3135. }
  3136. },
  3138. error: function () {
  3139. // console.log("Error verifying OTP");
  3140. }
  3141. });
  3142. return false;
  3143. }
  3147. $('.otp-input').on('keyup', function (e) {
  3148. var $this = $(this);
  3149. if ($this.val().length === 1) {
  3150. $this.next('.otp-input').focus();
  3151. }
  3152. if ($this.val().length === 0) {
  3153. $this.prev('.otp-input').focus();
  3154. }
  3155. });
  3157. function validatePensioner() {
  3158. var pensionerId = $('#pensionerId').val();
  3159. var pensionerName = $('#pensionername').val();
  3160. var mobileNo = $('#mobileno').val();
  3161. var pinCode = $('#pincode').val();
  3163. // Validate mobile number
  3164. if (!/^\d+$/.test(mobileNo) || mobileNo.length !== 10) {
  3165. alert("Mobile number must be a 10-digit number.");
  3166. return false;
  3167. }
  3169. // Validate pincode
  3170. if (!/^\d+$/.test(pinCode) || pinCode.length !== 6) {
  3171. alert("Pincode must be a 6-digit number.");
  3172. return false;
  3173. }
  3175. $.ajax({
  3176. url: 'https://erp.chennaicorporation.gov.in/pgr/external/mobileservice',
  3177. type: 'GET',
  3178. data: {
  3179. serviceId: 'getPensionerDetailsList',
  3180. pensionerId: pensionerId
  3181. },
  3182. success: function (response) {
  3183. // Assuming response is in JSON format
  3184. var pensionerDetails = response.PensionerDetailsResult;
  3185. var message = response.Message;
  3187. // Check if the pensioner details match the entered data
  3188. var isValid = false;
  3189. for (var i = 0; i < pensionerDetails.length; i++) {
  3190. if (pensionerDetails[i].Pensioner_Code === pensionerId && pensionerDetails[i].Name === pensionerName) {
  3191. isValid = true;
  3192. break;
  3193. }
  3194. }
  3196. if (isValid) {
  3197. $('#validationResult').html('Pensioner validated successfully.');
  3198. } else {
  3199. $('#validationResult').html('Invalid pensioner ID or name.');
  3200. }
  3201. },
  3202. error: function (xhr, status, error) {
  3203. console.error('Error:', error);
  3204. $('#validationResult').html('Failed to validate pensioner. Please try again later.');
  3205. }
  3206. });
  3207. }
  3210. document.addEventListener("DOMContentLoaded", function () {
  3211. // Function to fetch employee data from the URL
  3212. function fetchEmployeeData() {
  3213. const url = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=getEmployeeDetail&EmployeeID=731650";
  3215. fetch(url)
  3216. .then(response => response.json())
  3217. .then(data => {
  3218. // Get input field values
  3219. const employeeId = document.getElementById("employeeId").value;
  3220. const employeeName = document.getElementById("employeename").value;
  3221. const department = document.getElementById("department").value;
  3222. const designation = document.getElementById("designation").value;
  3224. // Compare fetched data with input field values
  3225. if (data.EmployeeID === employeeId && data.EmployeeName === employeeName && data.Department === department && data.Designation === designation) {
  3226. alert("Data validated successfully!");
  3227. } else {
  3228. alert("Error: Data validation failed!");
  3229. }
  3230. })
  3231. .catch(error => {
  3232. console.error("Error fetching employee data:", error);
  3233. alert("Error: Unable to fetch employee data. Please try again later.");
  3234. });
  3235. }
  3237. // Add event listener for button click
  3238. // document.getElementById("validateButton").addEventListener("click", fetchEmployeeData);
  3239. });
  3241. function validateUserType() {
  3242. var usertype = $("#userType").val();
  3243. if (usertype == "PUBLIC") {
  3244. validateNumber();
  3245. return false;
  3246. }
  3247. else if (usertype == "GCC_EMPLOYEE") {
  3248. var employeeId = $("#employeeId").val();
  3249. // console.log(employeeId);
  3250. $.ajax({
  3251. type: "GET",
  3252. url: '/victoriahallbooking/user/api/EmployeeDetails',
  3253. data: {'employeeId': $("#employeeId").val()},
  3254. success: function (response) {
  3255. // console.log(response);
  3256. if (response.ResultStatus == false) {
  3257. var alertMessage = "The Employee Id Not Found! " + employeeId;
  3258. Swal.fire({
  3259. title: "Oops",
  3260. html: alertMessage,
  3261. icon: "info",
  3262. showCancelButton: false,
  3263. confirmButtonText: "Ok"
  3264. });
  3265. return false;
  3266. } else if (response.ResultStatus) {
  3267. $("#employeename").val(response.EmployeeDetailsResult[0].name);
  3268. validateNumber();
  3269. }
  3270. },
  3271. error: function () {
  3272. // console.log("Error");
  3273. }
  3274. });
  3275. return false;
  3276. }
  3277. else if (usertype == "FAMILYPENSIONER") {
  3278. $.ajax({
  3279. type: "GET",
  3280. url: '/victoriahallbooking/user/api/FamilyPensionerDetails',
  3281. data: {'id': $("#familypensionerId").val()},
  3282. success: function (response) {
  3283. if (response.mobileNo) {
  3284. $("#mobileno").val(response.mobileNo);
  3285. validateNumber();
  3286. } else {
  3287. var alertMessage = "The Pensioner Id Not Found!";
  3288. Swal.fire({
  3289. title: "Oops",
  3290. html: alertMessage,
  3291. icon: "info",
  3292. showCancelButton: false,
  3293. confirmButtonText: "Ok"
  3294. });
  3295. }
  3296. },
  3297. error: function (xhr, status, error) {
  3298. console.error(xhr.responseText);
  3299. }
  3300. });
  3301. return false;
  3302. }
  3303. else if (usertype == "PENSIONER") {
  3304. $.ajax({
  3305. type: "GET",
  3306. url: '/victoriahallbooking/user/api/PensionerDetails',
  3307. data: {'id': $("#pensionerId").val()},
  3308. success: function (response) {
  3309. if (response.mobileNo) {
  3310. $("#mobileno").val(response.mobileNo);
  3311. validateNumber();
  3312. } else {
  3313. var alertMessage = "The Pensioner Id Not Found!";
  3314. Swal.fire({
  3315. title: "Oops",
  3316. html: alertMessage,
  3317. icon: "info",
  3318. showCancelButton: false,
  3319. confirmButtonText: "Ok"
  3320. });
  3321. }
  3322. },
  3323. error: function (xhr, status, error) {
  3324. console.error(xhr.responseText);
  3325. }
  3326. });
  3327. return false;
  3328. }
  3329. return false;
  3330. }
  3332. function validateNumber() {
  3333. var mobileNo = $("#mobileno").val();
  3334. $.ajax({
  3335. type: "GET",
  3336. url: '/victoriahallbooking/user/api/checkMobileExits',
  3337. data: {'mobileno': mobileNo},
  3338. success: function (bodyMessage) {
  3339. if (bodyMessage == "success") {
  3340. var alertMessage = "This Mobile Number Is Already Registered!</a>";
  3341. $('#otpForm').modal('hide');
  3342. //$('#registrationModal').modal('show');
  3343. Swal.fire({
  3344. title: "Mobile Number exist",
  3345. html: alertMessage,
  3346. icon: "info",
  3347. showCancelButton: false,
  3348. confirmButtonText: "Ok"
  3349. });
  3350. return false;
  3351. } else {
  3352. $('#registrationModal').modal('hide');
  3353. verifyLogin = "new";
  3354. sendOTP(mobileNo);
  3355. return false;
  3356. }
  3357. },
  3358. error: function (errortxt) {
  3359. console.error(errortxt);
  3360. }
  3361. });
  3362. return false;
  3363. }
  3367. function showProfileDetailsInCard() {
  3368. $.ajax({
  3369. url: '/victoriahallbooking/user/api/getuserforcounter',
  3370. type: 'GET',
  3371. data: {
  3372. 'userId': 0 // Use session user ID if not provided
  3373. },
  3374. success: function (response) {
  3375. // Check if the response contains expected user details
  3376. if (response && response.name) {
  3377. $('#p_name_card').val(response.name);
  3378. $('#p_email_card').val(response.email);
  3379. $('#p_mobnum_card').val(response.mobileNo);
  3380. $('#p_doornum_card').val(response.doorNo);
  3381. $('#p_area_card').val(response.area);
  3382. $('#p_location_card').val(response.location);
  3383. $('#p_pincode_card').val(response.pinCode);
  3384. $('#p_userstatus_card').val(response.userstatus);
  3385. $('#p_image_card').attr('src', response.profilephoto);
  3386. $('#profileCard').show(); // Show the profile card
  3387. $('#container').hide(); // Hide the container
  3388. } else {
  3389. console.error("Profile details not found in response.");
  3390. // Optionally, you can show an error message to the user
  3391. }
  3392. },
  3393. error: function (xhr, status, error) {
  3394. console.error("Error occurred while fetching user details:", xhr.responseText);
  3395. // Optionally, you can show an error message to the user
  3396. }
  3397. });
  3398. }
  3402. function showexistedProfileDetailsInCard(userDetails) {
  3403. // Check if user details are provided
  3404. if (userDetails && userDetails.name) {
  3405. $('#p_name_card').val(userDetails.name);
  3406. $('#p_email_card').val(userDetails.email);
  3407. $('#p_mobnum_card').val(userDetails.mobileNo);
  3408. $('#p_doornum_card').val(userDetails.doorNo);
  3409. $('#p_area_card').val(userDetails.area);
  3410. $('#p_location_card').val(userDetails.location);
  3411. $('#p_pincode_card').val(userDetails.pinCode);
  3412. $('#p_userstatus_card').val(userDetails.userstatus);
  3413. $('#p_image_card').attr('src', userDetails.profilephoto);
  3414. $('#profileCard').show(); // Show the profile card
  3415. $('#container').hide(); // Hide the container
  3416. } else {
  3417. console.error("Profile details not found in response.");
  3418. // Optionally, you can show an error message to the user
  3419. }
  3420. }
  3425. // Attach CSS styles for error messages dynamically
  3426. $('head').append('<style>.error-message { color: red; font-size: 12px; margin-top: 5px; }</style>');
  3428. $('.file-upload-field').on('change', function () {
  3429. const file = this.files[0];
  3430. if (file && file.size > 2097152) { // size is in bytes
  3431. $(this).addClass('error'); // Add error class
  3432. $(this).after('<div class="error-message">File size should not exceed 2 MB</div>').next('.error-message').addClass('error-text'); // Display error message with error-text class
  3433. this.value = ''; // Reset the file input
  3434. } else {
  3435. $(this).removeClass('error'); // Remove error class
  3436. $(this).next('.error-message').remove(); // Remove error message if present
  3437. }
  3438. });
  3440. document.getElementById("bankAccNo").addEventListener("input", function (e) {
  3441. var value = e.target.value;
  3442. if (!/^\d*$/.test(value)) {
  3443. e.target.setCustomValidity("Please enter only Numbers without space.");
  3444. } else {
  3445. e.target.setCustomValidity("");
  3446. }
  3447. });
  3449. document.getElementById("ddNumber").addEventListener("input", function (e) {
  3450. var value = e.target.value;
  3451. if (!/^\d*$/.test(value)) {
  3452. e.target.setCustomValidity("Please enter only Numbers without space.");
  3453. } else {
  3454. e.target.setCustomValidity("");
  3455. }
  3456. });
  3458. document.getElementById("bankName").addEventListener("input", function (e) {
  3459. var value = e.target.value;
  3460. if (!/^[A-Za-z\s-]*$/.test(value)) {
  3461. e.target.setCustomValidity("Please enter only Alphabets letters.");
  3462. } else {
  3463. e.target.setCustomValidity("");
  3464. }
  3465. });
  3466. function paymentForCounter() {
  3468. var userId = document.getElementById("userId").value;
  3469. var bookingId = document.getElementById("bookingId").value;
  3470. paymentStart(userId, bookingId, true);
  3471. }
  3473. </script>
  3474. </body>
  3476. </html>