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
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
VictoriaHallBooking_V1/target/classes/templates/user/hallbookingform.html

3496 lines
168 KiB
Raw Permalink Normal View History

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