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

3233 lines
180 KiB
Raw Normal View History

VPH hall booking initial commit
9 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
  4. <head th:replace="~{fragments/head :: head}">
  5. </head>
  6. <!--datatables-->
  7. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
  8. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
  9. <style>
  10. .card-body table {
  11. width: 100%;
  12. padding: 100px;
  13. }
  15. .card-body th,
  16. td {
  17. padding: 8px;
  18. text-align: left;
  19. }
  21. .amount-cell {
  22. text-align: right;
  23. padding-right: 1rem;
  24. /* Adjust padding as needed */
  25. }
  27. .ui-datepicker-container {
  28. width: 100%;
  29. }
  31. .fixedcontainer {
  32. width: 250%;
  33. margin: 40px 0;
  34. display: none
  35. }
  37. .disabled {
  38. pointer-events: none;
  39. opacity: 1;
  40. }
  42. .ui-widget {
  43. width: 40%
  44. }
  46. .ui-datepicker {
  47. padding: 3px;
  48. border: 1px solid #ccc;
  49. border-radius: 5px;
  50. background-color: white;
  51. left: 29.1418px;
  52. }
  54. .ui-datepicker-header {
  55. background-color: #f0f0f0;
  56. border: none;
  57. border-radius: 5px 5px 0 0;
  58. }
  60. .ui-datepicker-title {
  61. font-size: 1.2em;
  62. margin: 0;
  63. padding: 10px;
  64. text-align: center;
  65. }
  67. .ui-datepicker-calendar {
  68. margin: 0;
  69. padding: 0;
  70. font-weight: bold;
  71. }
  73. .ui-datepicker-calendar th,
  74. .ui-datepicker-calendar td {
  75. padding: 5px;
  76. text-align: center;
  77. }
  79. .ui-datepicker-calendar .ui-state-default {
  80. cursor: pointer;
  81. width: 100%;
  82. height: 100%;
  83. display: flex;
  84. justify-content: center;
  85. align-items: center;
  86. }
  88. .ui-datepicker-week-end {
  89. color: black;
  90. font-weight: bold;
  91. }
  93. .ui-datepicker-calendar th span {
  94. color: black;
  95. font-weight: bold;
  96. }
  98. .highlight-greens .ui-state-default {
  99. background: green !important;
  100. color: #FFF !important;
  101. }
  103. .highlight-yellow .ui-state-default {
  104. background: yellow !important;
  105. color: #000 !important;
  106. }
  108. .highlight-violet .ui-state-default {
  109. background: #a93da9 !important;
  110. color: #000 !important;
  111. }
  113. .highlight-pink .ui-state-default {
  114. background: red !important;
  115. color: #000 !important;
  116. }
  118. .form-control[readonly] {
  119. background-color: white;
  120. }
  122. .modal {
  123. overflow-y: auto;
  124. }
  126. .stepper-wrapper {
  127. display: flex;
  128. justify-content: space-between;
  129. margin-bottom: 20px;
  130. position: relative;
  131. }
  133. .stepper-item {
  134. display: flex;
  135. flex-direction: column;
  136. position: relative;
  137. width: 100%;
  138. z-index: 1;
  139. }
  141. .stepper-item::before {
  142. content: '';
  143. position: absolute;
  144. top: 15px;
  145. left: 50%;
  146. height: 4px;
  147. background-color: #dcdcdc;
  148. /* Default grey line */
  149. z-index: -1;
  150. }
  152. .stepper-item:first-child::before {
  153. left: 50%;
  154. width: 0;
  155. }
  157. .stepper-item:last-child::before {
  158. content: none;
  159. }
  161. .stepper-item.completed:not(:last-child)::after {
  162. content: '';
  163. position: absolute;
  164. top: 15px;
  165. left: 50%;
  166. width: calc(100% - 30px);
  167. height: 4px;
  168. background-color: #28a745;
  169. z-index: -1;
  170. transform: translateX(-50%);
  171. }
  173. .step-counter {
  174. width: 30px;
  175. height: 30px;
  176. border-radius: 50%;
  177. background-color: #dcdcdc;
  178. display: flex;
  179. justify-content: center;
  180. align-items: center;
  181. font-weight: bold;
  182. color: white;
  183. }
  185. .step-name {
  186. margin-top: 10px;
  187. font-size: 11px;
  188. }
  190. .stepper-item.completed .step-counter {
  191. background-color: #28a745;
  192. }
  194. .stepper-item.completed .step-name {
  195. font-weight: bold;
  196. }
  198. .tracking-container {
  199. padding: 10px;
  200. background: #f9f9f9;
  201. border-radius: 8px;
  202. overflow: hidden;
  203. max-height: 500px;
  204. }
  206. .tracking-steps {
  207. list-style: none;
  208. padding: 0;
  209. margin: 0;
  210. position: relative;
  211. }
  213. .tracking-steps::before {
  214. content: '';
  215. position: absolute;
  216. top: 0;
  217. left: 8px;
  218. width: 4px;
  219. height: 100%;
  220. background: yellowgreen;
  221. z-index: 0;
  222. }
  224. .tracking-step {
  225. display: flex;
  226. align-items: flex-start;
  227. margin-bottom: 20px;
  228. position: relative;
  229. padding-left: 40px;
  230. text-align: center;
  231. border-bottom: 1px solid #ddd;
  232. transition: background-color 0.3s ease-in-out;
  233. background-color: #fff;
  234. /* White background for steps */
  235. border-radius: 5px;
  236. /* Optional rounded corners */
  237. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  238. }
  240. /* Line adjustments between steps */
  241. .tracking-step::before {
  242. width: 100%;
  243. height: 5px;
  244. background: yellowgreen;
  245. /* Line color */
  246. position: absolute;
  247. top: 10px;
  248. /* Adjust position to connect icons */
  249. left: 8px;
  250. /* Aligns with step icons */
  251. margin: 0;
  252. }
  254. .tracking-step:first-child::before {
  255. background: none;
  256. /* No line before the first step */
  257. }
  259. /* Step icon styling */
  260. .step-icon {
  261. flex-shrink: 0;
  262. font-size: 1.5em;
  263. margin-right: 15px;
  264. position: absolute;
  265. left: 0;
  266. top: 0;
  267. width: 20px;
  268. height: 20px;
  269. border-radius: 50%;
  270. display: flex;
  271. justify-content: center;
  272. align-items: center;
  273. background: #ccc;
  274. /* Default icon background */
  275. border: 4px solid #ccc;
  276. /* Default border */
  277. color: #eee;
  278. font-size: 14px;
  279. line-height: 20px;
  280. z-index: 1;
  281. font-family: "Ionicons";
  282. /* Icon font */
  283. }
  285. /* Completed step icon and line color */
  286. .tracking-step.completed .step-icon {
  287. background: #56B500;
  288. /* Green for completed */
  289. border-color: #56B500;
  290. color: #fff;
  291. }
  293. .tracking-step.completed::before {
  294. background: #56B500;
  295. /* Green line for completed steps */
  296. }
  298. .tracking-step.completed {
  299. background-color: #e6ffe6;
  300. }
  302. /* Waiting step icon and line color */
  303. .tracking-step.waiting .step-icon {
  304. background: #ffeb3b;
  305. /* Yellow for waiting */
  306. border-color: #ffeb3b;
  307. }
  309. .tracking-step.waiting {
  310. background-color: #fff3cd;
  311. }
  313. /* Initiated step icon and line color */
  314. .tracking-step.initiated .step-icon {
  315. background: #03a9f4;
  316. /* Blue for initiated */
  317. border-color: #03a9f4;
  318. }
  320. .tracking-step.initiated {
  321. background-color: #cce5ff;
  322. }
  324. /* Pending step icon and line color */
  325. .tracking-step.pending .step-icon {
  326. background: #9e9e9e;
  327. /* Grey for pending */
  328. border-color: #9e9e9e;
  329. }
  331. /* Cancelled step icon and line color */
  332. .tracking-step.cancelled .step-icon {
  333. background: #dc3545 !important;
  334. /* Red for cancelled */
  335. border-color: #dc3545 !important;
  336. color: #fff !important;
  337. }
  339. .tracking-step.cancelled::before {
  340. background: #dc3545 !important;
  341. /* Red line for cancelled steps */
  342. }
  344. .tracking-step.cancelled {
  345. background-color: #fdecea;
  346. /* Light red background for cancelled steps */
  347. }
  349. /* Rejected step icon and line color */
  350. .tracking-step.rejected .step-icon {
  351. background: #ff0000;
  352. /* Dark red for rejected */
  353. border-color: #ff0000;
  354. color: #fff;
  355. }
  357. .tracking-step.rejected {
  358. background-color: #ffe6e6;
  359. }
  361. .tracking-step.rejected::before {
  362. background: #ff0000;
  363. /* Dark red line for rejected steps */
  364. }
  366. /* GCC Blocked step icon and line color */
  367. .tracking-step.gcc-blocked .step-icon {
  368. background: #ff6600;
  369. /* Orange for GCC blocked */
  370. border-color: #ff6600;
  371. color: #fff;
  372. }
  374. .tracking-step.gcc-blocked {
  375. background-color: #ffe0cc;
  376. }
  378. .tracking-step.gcc-blocked::before {
  379. background: #ff6600;
  380. /* Orange line for GCC blocked steps */
  381. }
  383. /* Step content styling */
  384. .step-content {
  385. padding: 2px 15px;
  386. background: #fff;
  387. border: 1px solid #ddd;
  388. border-radius: 5px;
  389. width: 100%;
  390. flex-grow: 1;
  391. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  392. }
  394. .step-content h5 {
  395. margin: 0 0 5px;
  396. font-size: 16px;
  397. font-weight: bold;
  398. }
  400. .step-date {
  401. color: #666;
  402. font-size: 14px;
  403. }
  405. /* Icon color customization */
  406. .fas,
  407. .fa-solid {
  408. font-weight: 900;
  409. color: white;
  410. }
  412. #transactionmodel {
  413. max-width: 90%;
  414. /* Make modal wider */
  415. }
  417. .table-responsive {
  418. max-height: 400px;
  419. /* Adjust the table's maximum height */
  420. overflow-y: auto;
  421. /* Enable vertical scrolling if needed */
  422. }
  424. body {
  425. font-family: Arial, sans-serif;
  426. }
  428. .chat-icon {
  429. position: fixed;
  430. bottom: 20px;
  431. right: 20px;
  432. width: 60px;
  433. height: 60px;
  434. background-color: #007bff;
  435. border-radius: 50%;
  436. cursor: pointer;
  437. display: flex;
  438. align-items: center;
  439. justify-content: center;
  440. }
  442. .chat-icon img {
  443. width: 30px;
  444. height: 30px;
  445. }
  447. .chat-notification {
  448. position: absolute;
  449. top: -10px;
  450. right: -10px;
  451. background-color: red;
  452. color: white;
  453. border-radius: 50%;
  454. padding: 5px;
  455. font-size: 12px;
  456. }
  458. .chat-box {
  459. position: fixed;
  460. bottom: 90px;
  461. right: 20px;
  462. width: 300px;
  463. height: 400px;
  464. background-color: white;
  465. border: 1px solid #ccc;
  466. display: none;
  467. flex-direction: column;
  468. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  469. }
  471. .chat-header {
  472. background-color: #007bff;
  473. color: white;
  474. padding: 10px;
  475. display: flex;
  476. justify-content: space-between;
  477. align-items: center;
  478. }
  480. .chat-body {
  481. flex-grow: 1;
  482. padding: 10px;
  483. overflow-y: scroll;
  484. border-top: 1px solid #ccc;
  485. border-bottom: 1px solid #ccc;
  486. }
  488. .chat-footer {
  489. display: flex;
  490. padding: 10px;
  491. }
  493. .chat-footer input {
  494. flex-grow: 1;
  495. padding: 5px;
  496. margin-right: 10px;
  497. }
  499. .chat-footer button {
  500. background-color: #007bff;
  501. color: white;
  502. border: none;
  503. padding: 5px 10px;
  504. cursor: pointer;
  505. }
  507. .otp-input-box {
  508. display: flex;
  509. justify-content: center;
  510. gap: 10px;
  511. margin: 20px 0;
  512. }
  514. .otp-input-box .otp-input {
  515. width: 40px;
  516. height: 40px;
  517. text-align: center;
  518. font-size: 16px;
  519. border: 1px solid #ccc;
  520. border-radius: 5px;
  521. }
  522. </style>
  524. <body>
  525. <!-- Pre-loader start -->
  526. <div class="theme-loader">
  527. <div class="ball-scale">
  528. <div class='contain'>
  529. <div class="ring">
  530. <div class="frame"></div>
  531. </div>
  532. <div class="ring">
  533. <div class="frame"></div>
  534. </div>
  535. <div class="ring">
  536. <div class="frame"></div>
  537. </div>
  538. <div class="ring">
  539. <div class="frame"></div>
  540. </div>
  541. <div class="ring">
  542. <div class="frame"></div>
  543. </div>
  544. <div class="ring">
  545. <div class="frame"></div>
  546. </div>
  547. <div class="ring">
  548. <div class="frame"></div>
  549. </div>
  550. <div class="ring">
  551. <div class="frame"></div>
  552. </div>
  553. <div class="ring">
  554. <div class="frame"></div>
  555. </div>
  556. <div class="ring">
  557. <div class="frame"></div>
  558. </div>
  559. </div>
  560. </div>
  561. </div>
  562. <!-- Pre-loader end -->
  564. <div id="pcoded" class="pcoded">
  565. <div class="pcoded-container">
  566. <!-- Menu header start -->
  567. <nav th:replace="~{fragments/nav-user :: nav}"></nav>
  569. <!-- Menu header end -->
  570. <div class="pcoded-main-container">
  571. <nav th:replace="~{fragments/nav-usermenu :: nav}"></nav>
  572. <div class="pcoded-wrapper">
  573. <div class="pcoded-content">
  574. <div class="pcoded-inner-content">
  576. <!-- Main-body start -->
  577. <div class="main-body" style="background-color: white">
  578. <div class="page-wrapper" style="padding: 0;">
  579. <!-- Page-header start -->
  580. <div class="page-header m-t-50">
  582. </div>
  583. <div id="futureEventsContainer" class="page-body" style="display: none;"></div>
  584. <div class="card">
  585. <div class="card-header">
  586. <h5>Hall Booking Details</h5>
  587. <button type="button" class="btn btn-primary btn-square-md"
  588. th:if="${userBookingspast.size() > 0}"
  589. th:onclick="'transactionHistory(' + ${userBookingspast[0].users_user_id} + ')'">
  590. Transaction History
  591. </button>
  592. </div>
  594. <div class="card-block">
  595. <div class="table-responsive">
  596. <table
  597. class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
  598. id="detailstable" style="width: 100%">
  599. <thead class="thead-light">
  600. <tr>
  601. <th class="text-center no-sort" width="10%">S.No</th>
  602. <th>Booking Id</th>
  603. <th>Booking date</th>
  604. <th>Hall Name</th>
  605. <th>Starting Date</th>
  606. <th>Ending Date</th>
  607. <th>Starting Period</th>
  608. <th>Ending Period</th>
  609. <th>Reason for booking</th>
  610. <th>Booking Status</th>
  611. <th>Payment Status</th>
  612. <th>Event Status</th>
  613. <th class="text-center no-sort" width="10%">Action</th>
  614. <th>View</th>
  615. </tr>
  616. </thead>
  617. <tbody>
  618. <tr th:each="booking, i : ${userBookingspast}"
  619. class="${userBookingspast}">
  620. <td th:text="${i.count}"></td>
  621. <td th:text="${booking.booking_id}"></td>
  622. <td th:text="${booking.booking_date}"></td>
  623. <td th:text="${booking.hall_name}"></td>
  624. <td th:text="${booking.start_date}"></td>
  625. <td th:text="${booking.end_date}"></td>
  626. <td
  627. th:text="${booking.starting_slot == 1 ? 'morning' : (booking.starting_slot == 2 ? 'evening' : '')}">
  628. </td>
  629. <td
  630. th:text="${booking.ending_slot == 1 ? 'morning' : (booking.ending_slot == 2 ? 'evening' : '')}">
  631. </td>
  632. <td th:text="${booking.reason}"></td>
  633. <td
  634. th:text="${#strings.replace(booking.booking_status, '_', ' ')}">
  635. </td>
  636. <td
  637. th:text="${booking.payment_status != null ? booking.payment_status : 'NA'}">
  638. </td>
  639. <td>
  640. <span th:if="${booking.booking_status == 'APPROVED'}">
  641. <span th:switch="${booking.event_category}">
  642. <span th:case="'Current'">Current Event</span>
  643. <span th:case="'Past'">Completed Event</span>
  644. <span th:case="'Future'">Upcoming Event</span>
  645. <span th:case="'Reschedule'">Upcoming
  646. Event</span>
  647. <span th:case="'noaction'">Govt Event</span>
  648. </span>
  649. </span>
  650. <span th:if="${booking.booking_status == 'COMPLETED'}">
  651. <span>Refund Completed Event</span>
  652. </span>
  653. <span th:if="${booking.booking_status == 'CANCELED'}">
  654. <span>User Canceled Event</span>
  655. </span>
  656. <span th:if="${booking.booking_status == 'REJECTED'}">
  657. <span>GCC Rejected Event</span>
  658. </span>
  659. <span
  660. th:if="${booking.booking_status == 'GCC_BLOCKED'}">
  661. <span>GCC Blocked Event</span>
  662. </span>
  663. <span
  664. th:if="${booking.booking_status == 'WAITING_FOR_NOC'}">
  665. <span>Waiting For NOC Document</span>
  666. </span>
  667. <span
  668. th:if="${booking.booking_status == 'WAITING_FOR_NOC_APPROVAL'}">
  669. <span>Waiting For Admin Approval</span>
  670. </span>
  671. </td>
  672. <td th:switch="${booking.event_category}">
  674. <p th:case="'Future'">
  675. <a class="view-button"
  676. th:if="${booking.booking_status == 'APPROVED'}">
  677. <span class="badge bg-danger"
  678. style="cursor: pointer;"
  679. th:onclick="cancelBooking([[${booking.booking_id}]], [[${booking.mobile_no}]], [[${booking.booking_type}]])">Cancel
  680. Booking</span>
  681. </a>
  682. </p>
  683. <p th:case="'waitingfornoc'">
  684. <a class="view-button"
  685. th:if="${booking.booking_status == 'WAITING_FOR_NOC'}">
  686. <span class="badge bg-danger"
  687. style="cursor: pointer;"
  688. data-bs-toggle="modal"
  689. data-bs-target="#uploadNocModal"
  690. th:attr="data-booking-id=${booking.booking_id}">Upload
  691. NOC</span>
  692. </a>
  694. <a class="view-button"
  695. th:if="${booking.booking_status == 'WAITING_FOR_NOC'}">
  696. <span class="badge bg-danger"
  697. style="cursor: pointer;"
  698. th:onclick="cancelBooking([[${booking.booking_id}]], [[${booking.mobile_no}]], [[${booking.booking_type}]])">Cancel
  699. Booking</span>
  700. </a>
  702. <!--<a class="reschedule-button"
  703. th:if="${booking.booking_status == 'WAITING_FOR_NOC' and booking.schedule_count < 1}">
  704. &lt;!&ndash;th:if="${booking.booking_status == 'WAITING_FOR_NOC'}">&ndash;&gt;
  705. <span class="badge bg-danger"
  706. style="cursor: pointer;"
  707. th:onclick="openRescheduleModal([[${booking.booking_id}]], [[${booking.start_date}]], [[${booking.end_date}]],[[${booking.no_of_days}]],
  708. [[${booking.hall_details_hall_id}]],[[${booking.starting_slot}]],[[${booking.ending_slot}]],[[${booking.reason}]])">Reschedule
  709. Booking</span>
  710. </a>-->
  711. </p>
  713. <p th:case="'waitingfornocapproval'">
  714. <a class="view-button"
  715. th:if="${booking.booking_status == 'WAITING_FOR_NOC_APPROVAL'}">
  716. <span class="badge bg-danger"
  717. style="cursor: pointer;"
  718. th:onclick="cancelBooking([[${booking.booking_id}]], [[${booking.mobile_no}]], [[${booking.booking_type}]])">Cancel
  719. Booking</span>
  720. </a>
  721. </p>
  722. <!--<p th:case="'noaction'">
  723. <a class="view-button">
  724. <span>&#45;&#45;No Action&#45;&#45;</span>
  725. </a>
  726. </p>-->
  728. <p th:case="'noaction'">
  729. <a class="view-button">
  730. <a class="view-button"
  731. th:if="${booking.booking_status == 'APPROVED'}">
  732. <span class="badge bg-danger"
  733. style="cursor: pointer;"
  734. th:onclick="cancelBooking([[${booking.booking_id}]], [[${booking.mobile_no}]], [[${booking.booking_type}]])">Cancel
  735. Booking</span>
  736. </a>
  737. </a>
  738. </p>
  739. <p th:case="'noaction'">
  740. <a class="view-button">
  741. <span>--No Action--</span>
  742. </a>
  743. </p>
  744. <p th:case="'Reschedule'">
  745. <a class="view-button"
  746. th:if="${booking.booking_status == 'APPROVED'}">
  747. <span class="badge bg-danger"
  748. style="cursor: pointer;"
  749. th:onclick="cancelBooking([[${booking.booking_id}]], [[${booking.mobile_no}]], [[${booking.booking_type}]])">Cancel
  750. Booking</span>
  751. </a>
  752. <a class="reschedule-button"
  753. th:if="${booking.booking_status == 'APPROVED'}">
  754. <span class="badge bg-danger"
  755. style="cursor: pointer;"
  756. th:onclick="openRescheduleModal([[${booking.booking_id}]], [[${booking.start_date}]], [[${booking.end_date}]],[[${booking.no_of_days}]],
  757. [[${booking.hall_details_hall_id}]],[[${booking.starting_slot}]],[[${booking.ending_slot}]],[[${booking.reason}]])">Reschedule
  758. Booking</span>
  759. </a>
  760. <a class="reschedule-button"
  761. th:if="${booking.booking_status == 'WAITING_FOR_NOC'}">
  762. <span class="badge bg-danger"
  763. style="cursor: pointer;"
  764. th:onclick="openRescheduleModal([[${booking.booking_id}]], [[${booking.start_date}]], [[${booking.end_date}]],[[${booking.no_of_days}]],
  765. [[${booking.hall_details_hall_id}]],[[${booking.starting_slot}]],[[${booking.ending_slot}]],[[${booking.reason}]])">Reschedule
  766. Booking</span>
  767. </a>
  769. </p>
  771. </td>
  774. <td>
  775. <a class="view-button">
  776. <!-- <span class="badge bg-primary"
  777. style="cursor: pointer;"
  778. th:onclick="showBookingDetails([[${booking.booking_id}]])">View</span>-->
  779. <span class="badge bg-primary"
  780. style="cursor: pointer;"
  781. th:onclick="showBookingDetails([[${booking.booking_id}]], [[${bookingRefIds[booking.booking_id]}]])">
  782. View
  783. </span>
  785. </a>
  786. <!--<a class="view-button">
  787. <span class="badge bg-primary"
  788. style="cursor: pointer;"
  789. th:onclick="trackBooking([[${booking.booking_id}]])">Track</span>
  790. </a>-->
  791. </td>
  792. </tr>
  793. </tbody>
  794. </table>
  795. </div>
  796. </div>
  798. </div>
  800. <input type="hidden" id="serverDate" th:value=${serverDate}>
  807. <div class="modal fade backdrop" id="showBookingDetails" data-backdrop="static"
  808. tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel"
  809. aria-hidden="true">
  813. <div class="modal-dialog modal-lg" role="document">
  814. <div class="modal-content" id="printableContent">
  816. <form id="regform" onsubmit="return rejectsubmit();">
  817. <!--ak-->
  818. <!-- Add these -->
  819. <input type="hidden" id="modalBookingId">
  820. <input type="hidden" id="modalRefId">
  821. <div
  822. class="block block-rounded block-themed block-transparent mb-0">
  824. <div class="block-header bg-primary-dark">
  825. <h3 class="block-title" id="2mtitle">Booking
  826. Information</h3>
  827. <div class="block-options">
  828. <button type="button" class="btn-block-option"
  829. data-bs-dismiss="modal" aria-label="Close">
  830. <i class="fa fa-fw fa-times"></i>
  831. </button>
  832. </div>
  833. </div>
  835. <div class="block-content row"
  836. style="margin-right:0px;margin:0;padding:0;">
  837. <div class="col-md-12 col-lg-12 col-sm-12">
  838. <div class="card-body">
  839. <table>
  840. <tr>
  841. <th colspan="10"
  842. style="background-color: lightgrey;">
  843. User Details
  844. </th>
  845. </tr>
  846. <tr>
  847. <th
  848. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  849. User Name:
  850. </th>
  851. <td class="fw-semibold"
  852. style="padding: 0.45rem 0.45rem;"
  853. id="td_userName"></td>
  854. <th
  855. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  856. Mobile Number:
  857. </th>
  858. <td class="fw-semibold"
  859. style="padding: 0.45rem 0.45rem;"
  860. id="td_mobileNumber"></td>
  862. <th
  863. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  864. User Type:
  865. </th>
  866. <td class="fw-semibold"
  867. style="padding: 0.45rem 0.45rem;"
  868. id="td_usertype"></td>
  870. </tr>
  871. <tr>
  872. <th
  873. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  874. User Address:
  875. </th>
  876. <td colspan="5" class="fw-semibold"
  877. style="padding: 0.45rem 0.45rem;text-wrap: pretty;"
  878. id="td_useraddress"></td>
  880. </tr>
  881. <input type="hidden"
  882. class="form-control text-center"
  883. name="bookingid" id="bookingid" disabled />
  884. <tr>
  885. <th colspan="10"
  886. style="background-color: lightgrey;">
  887. Hall Details
  888. </th>
  889. </tr>
  891. <tr>
  892. <th
  893. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  894. Hall Name:
  895. </th>
  896. <td colspan="10" class="fw-semibold"
  897. style="padding: 0.45rem 0.45rem;text-wrap:pretty;"
  898. id="td_hallName"></td>
  900. </tr>
  901. <th
  902. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  903. Hall Address:
  904. </th>
  905. <td colspan="10" class="fw-semibold"
  906. style="padding: 0.45rem 0.45rem;text-wrap: pretty;"
  907. id="td_halladdress"></td>
  909. </tr>
  910. <tr>
  911. <th
  912. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  913. Caretaker Name:
  914. </th>
  915. <td colspan="2" class="fw-semibold"
  916. style="padding: 0.45rem 0.45rem;"
  917. id="td_caretakername"></td>
  918. <th
  919. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  920. Caretaker Mobile Number:
  921. </th>
  922. <td colspan="2" class="fw-semibold"
  923. style="padding: 0.45rem 0.45rem;"
  924. id="td_caretakermobileNumber"></td>
  926. </tr>
  927. <tr>
  928. <th colspan="10"
  929. style="background-color: lightgrey;">
  930. Booking
  931. Details (Booking Id:-<span
  932. id="booking_id"
  933. style="color:blue"></span>)
  934. </th>
  935. </tr>
  936. <tr>
  937. <th
  938. style="padding: 0.45rem 0.45rem;font-weight: normal">
  939. Booking Date:
  940. </th>
  941. <td colspan="2" class="fw-semibold"
  942. style="padding: 0.45rem 0.45rem;"
  943. id="td_bookingDate"></td>
  944. <th
  945. style="padding: 0.45rem 0.45rem;font-weight: normal">
  946. Deposit Amount (in Rs):
  947. </th>
  948. <td colspan="2"
  949. class="fw-semibold amount-cell"
  950. style="padding: 0.45rem 0.45rem;"
  951. id="td_depositeAmount"></td>
  952. </tr>
  953. <tr>
  954. <th
  955. style="padding: 0.45rem 0.45rem;font-weight: normal">
  956. Start Date:
  957. </th>
  958. <td colspan="2" class="fw-semibold"
  959. style="padding: 0.45rem 0.45rem;"
  960. id="td_startDate"></td>
  961. <th
  962. style="padding: 0.45rem 0.45rem;font-weight: normal">
  963. Hall Amount (in Rs):
  964. </th>
  965. <td colspan="2"
  966. class="fw-semibold amount-cell"
  967. style="padding: 0.45rem 0.45rem;"
  968. id="td_hallAmount"></td>
  969. </tr>
  970. <tr>
  971. <th
  972. style="padding: 0.45rem 0.45rem;font-weight: normal">
  973. END Date:
  974. </th>
  975. <td colspan="2" class="fw-semibold"
  976. style="padding: 0.45rem 0.45rem;"
  977. id="td_endDate"></td>
  978. <th
  979. style="padding: 0.45rem 0.45rem;font-weight: normal">
  980. GST @18% (in Rs):
  981. </th>
  982. <td colspan="2"
  983. class="fw-semibold amount-cell"
  984. style="padding: 0.45rem 0.45rem;"
  985. id="td_gst"></td>
  986. </tr>
  987. <tr>
  988. <th
  989. style="padding: 0.45rem 0.45rem;font-weight: normal">
  990. Starting Slot:
  991. </th>
  992. <td colspan="2" class="fw-semibold"
  993. style="padding: 0.45rem 0.45rem;"
  994. id="td_startingSlot"></td>
  995. <th
  996. style="padding: 0.45rem 0.45rem;font-weight: normal">
  997. Total Amount (in Rs):
  998. </th>
  999. <td colspan="2"
  1000. class="fw-semibold amount-cell"
  1001. style="padding: 0.45rem 0.45rem;"
  1002. id="td_totalAmount"></td>
  1003. </tr>
  1004. <tr>
  1005. <th
  1006. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1007. Ending Slot:
  1008. </th>
  1009. <td colspan="2" class="fw-semibold"
  1010. style="padding: 0.45rem 0.45rem;"
  1011. id="td_endingSlot"></td>
  1012. <!--<th style="display:none;padding: 0.45rem 0.45rem;border:none"
  1013. id="rejectionreasondiv">Rejection
  1014. Reason:</th>
  1015. <td class="fw-semibold"
  1016. style="padding: 0.45rem 0.45rem;"
  1017. id="reasonforrejection"></td>-->
  1019. <th
  1020. style="padding: 0.45rem 0.45rem;border:none">
  1021. Booking Status:
  1022. </th>
  1023. <td colspan="2" class="fw-semibold"
  1024. style="padding: 0.45rem 0.45rem;text-wrap: pretty;"
  1025. id="bookingstatus_td"></td>
  1026. </tr>
  1027. <tr>
  1028. <th style="display:none;padding: 0.45rem 0.45rem;border:none"
  1029. id="rejectionreasondiv">Rejection
  1030. Reason:
  1031. </th>
  1032. <td class="fw-semibold"
  1033. style="padding: 0.45rem 0.45rem;text-wrap: pretty;"
  1034. id="reasonforrejection"></td>
  1035. </tr>
  1036. </table>
  1037. </div>
  1038. </div>
  1039. <div class="row col-md-12 col-lg-12 col-sm-12"
  1040. style="margin-left:6px;margin-top:-21px">
  1041. <div class="documents" id="documents"></div>
  1042. </div>
  1043. <div class="col-md-12 col-lg-12 col-sm-12 mb-2"
  1044. id="paymentsdetails"
  1045. style="display:none; margin-top: -26px;">
  1046. <div class="card-body">
  1047. <table>
  1048. <tr>
  1049. <th colspan="10"
  1050. style="background-color: lightgrey;">
  1051. Booking Payment Details
  1052. </th>
  1053. </tr>
  1054. <tr>
  1055. <th
  1056. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  1057. Transaction ID:
  1058. </th>
  1059. <td colspan="10" class="fw-semibold"
  1060. style="padding: 0.45rem 0.45rem;"
  1061. id="td_transactionId"></td>
  1063. </tr>
  1064. <th
  1065. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  1066. Amount Received (in Rs):
  1067. </th>
  1068. <td colspan="10" class="fw-semibold"
  1069. style="padding: 0.45rem 0.45rem;"
  1070. id="td_payamountReceived"></td>
  1072. </tr>
  1073. <tr>
  1074. <th
  1075. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  1076. Transaction Status:
  1077. </th>
  1078. <td class="fw-semibold"
  1079. style="padding: 0.45rem 0.45rem;"
  1080. id="td_paymentStatus"></td>
  1081. </tr>
  1082. </table>
  1083. </div>
  1084. </div>
  1085. <div class="row col-md-12 col-lg-12 col-sm-12"
  1086. id="ebdetails"
  1087. style="display:none;margin-left: 0px;margin-top: -49px">
  1088. <div class="card-body">
  1089. <table>
  1090. <tr>
  1091. <th colspan="4"
  1092. style="background-color: lightgrey;">EB
  1093. Details
  1094. </th>
  1095. </tr>
  1096. <tr>
  1097. <th
  1098. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1099. Consumer Number:
  1100. </th>
  1101. <td class="fw-semibold"
  1102. style="padding: 0.45rem 0.45rem;"
  1103. id="td_EBNumber"></td>
  1104. <th
  1105. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1106. EB Amount Per Unit (in Rs):
  1107. </th>
  1108. <td class="fw-semibold"
  1109. style="padding: 0.45rem 0.45rem;"
  1110. id="td_ebamountperunit"></td>
  1111. </tr>
  1112. <tr>
  1113. <th
  1114. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1115. Start Reading:
  1116. </th>
  1117. <td class="fw-semibold"
  1118. style="padding: 0.45rem 0.45rem;"
  1119. id="td_startingReading"></td>
  1120. <th
  1121. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1122. Unit Consumed:
  1123. </th>
  1124. <td class="fw-semibold"
  1125. style="padding: 0.45rem 0.45rem;"
  1126. id="td_usedunit"></td>
  1127. </tr>
  1128. <tr>
  1129. <th
  1130. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1131. END Reading:
  1132. </th>
  1133. <td class="fw-semibold"
  1134. style="padding: 0.45rem 0.45rem;"
  1135. id="td_endingReading"></td>
  1136. <th
  1137. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1138. EB Amount (in Rs):
  1139. </th>
  1140. <td class="fw-semibold"
  1141. style="padding: 0.45rem 0.45rem;"
  1142. id="td_electricityamount"></td>
  1143. </tr>
  1144. </tbody>
  1145. </table>
  1146. </div>
  1147. </div>
  1148. <div class="row col-md-12 col-lg-12 col-sm-12"
  1149. id="damagelist" style="disaply:none">
  1150. <div id="damageDetails"></div>
  1151. </div>
  1153. <div class="col-md-12 col-lg-12 col-sm-12"
  1154. id="refunddetails" style="margin-top:-41px">
  1155. <div class="card-body">
  1156. <table>
  1157. <tr>
  1158. <th colspan="2"
  1159. style="background-color: lightgrey;">
  1160. Amount to be Refunded (in Rs)
  1161. </th>
  1162. </tr>
  1163. <tr>
  1164. <th
  1165. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1166. Deposit Amount:
  1167. </th>
  1168. <td class="fw-semibold amount-cell"
  1169. style="padding: 0.45rem 0.45rem;"
  1170. id="td_depositeamountforrefund">0
  1171. </td>
  1172. </tr>
  1173. <tr>
  1174. <th
  1175. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1176. EB Amount:
  1177. </th>
  1178. <td class="fw-semibold amount-cell"
  1179. style="padding: 0.45rem 0.45rem;"
  1180. id="td_ebAmount"></td>
  1181. </tr>
  1182. <tr>
  1183. <th
  1184. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1185. Damage Amount:
  1186. </th>
  1187. <td class="fw-semibold amount-cell"
  1188. style="padding: 0.45rem 0.45rem;"
  1189. id="td_damage"></td>
  1190. </tr>
  1191. <tr id="pendingcolumn">
  1192. <th id="th_settel_label"
  1193. style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
  1194. Collection Pending Amount:
  1195. </th>
  1196. <td class="fw-semibold amount-cell"
  1197. style="padding: 0.45rem 0.45rem; color: green;"
  1198. id="td_pending_amt">0
  1199. </td>
  1200. </tr>
  1201. <tr id="collectionstatuscolumn">
  1202. <th id="label"
  1203. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1204. Collection Pending Status
  1205. :
  1206. </th>
  1207. <td class="fw-semibold amount-cell"
  1208. style="padding: 0.45rem 0.45rem; color: green;"
  1209. id="td_collection_status">
  1210. </td>
  1211. </tr>
  1212. <tr>
  1213. <th
  1214. style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
  1215. Actual refundable Amount:
  1216. </th>
  1217. <td class="fw-semibold amount-cell"
  1218. style="padding: 0.45rem 0.45rem; color: green;"
  1219. id="td_settel_amt">0
  1220. </td>
  1221. </tr>
  1222. </table>
  1223. </div>
  1224. </div>
  1225. <div class="row col-md-12 col-lg-12 col-sm-12"
  1226. id="refundamountDetails"
  1227. style="display:none;margin-left: 0px;margin-top: -49px">
  1228. <div class="card-body">
  1229. <table>
  1230. <tr>
  1231. <th colspan="4"
  1232. style="background-color: lightgrey;">
  1233. Refund Details
  1234. </th>
  1235. </tr>
  1236. <tr>
  1237. <th
  1238. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1239. Booking Status:
  1240. </th>
  1241. <td class="fw-semibold"
  1242. style="padding: 0.45rem 0.45rem;"
  1243. id="td_bookingStatus"></td>
  1244. <th
  1245. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1246. Refund Status:
  1247. </th>
  1248. <td class="fw-semibold"
  1249. style="padding: 0.45rem 0.45rem;"
  1250. id="td_refundStatus"></td>
  1251. </tr>
  1252. <tr>
  1253. <th
  1254. style="padding: 0.45rem 0.45rem;font-weight: normal;text-wrap: pretty;">
  1255. Refund amount:
  1256. </th>
  1257. <td class="fw-semibold" colspan="5"
  1258. style="padding: 0.45rem 0.45rem;"
  1259. id="td_refundamount"></td>
  1260. </tr>
  1261. </tbody>
  1262. </table>
  1263. </div>
  1264. </div>
  1265. <div id="refundMessage" style="display: none;">
  1266. <h1 id="refundText"
  1267. style="font-size: 17px;margin-left: 20px;color: darkgreen;">
  1268. </h1>
  1269. </div>
  1270. <div id="rejectrefundMessage" style="display: none;">
  1271. <h1 id="rejectrefundText"
  1272. style="font-size: 17px;margin-left: 20px;color: darkgreen;">
  1273. </h1>
  1274. </div>
  1275. <div id="blockedrefundMessage" style="display: none;">
  1276. <h1 id="blockedrefundText"
  1277. style="font-size: 17px;margin-left: 20px;color: darkgreen;">
  1278. </h1>
  1279. </div>
  1280. <!--Newly added for Reschedule Details-->
  1281. <!--<div class="row col-md-12 col-lg-12 col-sm-12"
  1282. id="rescheduleDetails"
  1283. style="display:none;margin-left: 0px;margin-top: -49px">
  1284. <div class="card-body">
  1285. <table>
  1286. <tr>
  1287. <th colspan="4"
  1288. style="background-color: lightgrey;">
  1289. Reschedule Details
  1290. </th>
  1291. </tr>
  1292. <tr>
  1293. <th
  1294. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1295. Event Start Date:
  1296. </th>
  1297. <td class="fw-semibold"
  1298. style="padding: 0.45rem 0.45rem;"
  1299. id="td_res_start_date"></td>
  1300. <th
  1301. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1302. Event End Date:
  1303. </th>
  1304. <td class="fw-semibold"
  1305. style="padding: 0.45rem 0.45rem;"
  1306. id="td_res_end_date"></td>
  1307. </tr>
  1308. <tr>
  1309. <th
  1310. style="padding: 0.45rem 0.45rem;font-weight: normal;text-wrap: pretty;">
  1311. Rescheduled Date:</th>
  1312. <td class="fw-semibold" colspan="5"
  1313. style="padding: 0.45rem 0.45rem;"
  1314. id="td_res_date"></td>
  1315. </tr>
  1316. </tbody>
  1317. </table>
  1318. </div>
  1319. </div>-->
  1320. </div>
  1322. </div>
  1323. <div class="block-content block-content-full text-end bg-body"
  1324. id="mbutton">
  1325. <button class="btn btn-success"
  1326. onclick="downloadAcknowledgment(event)"
  1327. style="background: #FB6340;">View
  1328. Acknowledgement
  1329. </button>
  1330. <button type="button"
  1331. style="background-color: rgb(21,69,93);color: white;"
  1332. class="btn btn-sm btn-alt-secondary"
  1333. data-bs-dismiss="modal">Close
  1334. </button>
  1335. </div>
  1336. </form>
  1337. </div>
  1338. </div>
  1339. </div>
  1340. </div>
  1341. <br>
  1342. </div>
  1343. </div>
  1344. <div class="modal fade" id="fileModal" tabindex="-1" role="dialog"
  1345. aria-labelledby="fileModalLabel" aria-hidden="true">
  1346. <div class="modal-dialog modal-lg" role="document">
  1347. <div class="modal-content">
  1348. <div class="modal-header">
  1349. <h5 class="modal-title" id="fileModalLabel">File Preview</h5>
  1350. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
  1351. style="border: 1px solid black; padding: 5px;
  1352. display: inline-flex; align-items: center; justify-content: center;
  1353. background-color: transparent; color: black; font-size: 20px;">
  1354. <span aria-hidden="true">&times;</span>
  1355. </button>
  1356. </div>
  1357. <div class="modal-body">
  1358. <embed id="filePreview" src="" width="100%" height="600px">
  1359. </div>
  1360. <div class="modal-footer">
  1361. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
  1362. </button>
  1363. </div>
  1364. </div>
  1365. </div>
  1366. </div>
  1367. </div>
  1368. <div class="modal fade" id="bookingRescheduleModal" tabindex="-1"
  1369. aria-labelledby="bookingModalLabel" aria-hidden="true">
  1370. <div class="modal-dialog modal-dialog-centered modal-lg">
  1371. <div class="modal-content">
  1372. <!-- Modal Header -->
  1373. <div class="modal-header" style="color:black">
  1374. <h5 class="modal-title" id="bookingModalLabel" style="color:black">Booking
  1375. Reschedule</h5>
  1376. <br>
  1377. <br>
  1378. <div style="margin-bottom: -59px; margin-left: -185px;">
  1379. <!-- Adding margin-top for separation -->
  1380. <p style="font-size: 14px; color: #6c757d;"> the Start Date can be
  1381. changed.</p>
  1382. </div>
  1383. <button type="button" class="btn-close" data-bs-dismiss="modal"
  1384. aria-label="Close"></button>
  1385. </div>
  1387. <!-- Modal Body -->
  1388. <div class="modal-body">
  1389. <div class="container-fluid">
  1390. <div class="row">
  1391. <!-- Datepicker and Availability Buttons Column -->
  1392. <div id="datepicker-container" class="fixedcontainer"></div>
  1394. <!-- Start Date, End Date, Number of Days Inputs Column -->
  1395. <div class="col">
  1396. <input type="hidden" class="form-control" id="bookingId"
  1397. name="bookingId" required>
  1398. <label for="startDateInput" class="form-label">Start Date:</label>
  1399. <input type="text" class="form-control" id="startDateInput"
  1400. name="startDateInput" required readonly>
  1401. <input type="hidden" class="form-control" id="startDatetext"
  1402. name="startDatetext" required>
  1403. </div>
  1404. <div class="col">
  1405. <label for="endDateInput" class="form-label">End Date:</label>
  1406. <input type="date" class="form-control" id="endDateInput"
  1407. name="endDateInput" readonly>
  1408. </div>
  1409. <div class="col">
  1410. <label for="noOfDaysInput" class="form-label">Number of Days:</label>
  1411. <input type="number" class="form-control" id="noOfDaysInput"
  1412. name="noOfDaysInput" readonly>
  1413. </div>
  1414. </div>
  1415. <div class="row">
  1416. <div class="col">
  1417. <input type="hidden" id="daysDiff">
  1418. <label for="startingSlot" class="form-label">Starting Slot:</label>
  1419. <input type="text" class="form-control" id="startingSlotText"
  1420. name="startingSlot" readonly>
  1421. <input type="hidden" class="form-control" id="startingSlot"
  1422. name="startingSlot" required>
  1423. </div>
  1424. <div class="col">
  1425. <label for="endingSlot" class="form-label">Ending Slot:</label>
  1426. <input type="text" class="form-control" id="endingSlotText"
  1427. name="endDateInput" readonly>
  1428. <input type="hidden" class="form-control" id="endingSlot"
  1429. name="endDateInput" readonly>
  1430. </div>
  1431. </div>
  1432. <div class="row" style="margin-top: 39px;">
  1433. <div class="col col-lg-2 col-sm-2 col-md-2">
  1434. <button type="button" class="btn btn-primary btn-square-md"
  1435. style="background-color:#008000;"></button>
  1436. <p style="margin-left: 14px;">Day<br>(Available)</p>
  1437. </div>
  1438. <div class="col col-lg-2 col-sm-2 col-md-2">
  1439. <button type="button" class="btn btn-primary btn-square-md"
  1440. style="background-color: #ac2bac;"></button>
  1441. <p style="margin-left: 14px;">Morning<br>(Available)</p>
  1442. </div>
  1443. <div class="col col-lg-2 col-sm-2 col-md-2">
  1444. <button type="button" class="btn btn-primary btn-square-md"
  1445. style="background-color:#FFEA00;"></button>
  1446. <p style="margin-left: 14px;">Evening<br>(Available)</p>
  1447. </div>
  1448. <div class="col col-lg-2 col-sm-2 col-md-2">
  1449. <button type="button" class="btn btn-primary btn-square-md"
  1450. style="background-color: red;"></button>
  1451. <p style="margin-left: 14px;">Not Available</p>
  1452. </div>
  1453. <div class="col col-lg-2 col-sm-2 col-md-2">
  1454. <button type="button" class="btn btn-primary btn-square-md"
  1455. style="background-color: blue;"></button>
  1456. <p style="margin-left: 14px;">GCC Blocked</p>
  1457. </div>
  1458. <!--<div class="col col-lg-2 col-sm-2 col-md-2">
  1459. <button type="button" class="btn btn-primary btn-square-md"
  1460. style="background-color: lightpink;"></button>
  1461. <p style="margin-left: 14px;">Temporary Blocked</p>
  1462. </div>-->
  1463. </div>
  1464. </div>
  1465. </div>
  1466. <!-- Modal Footer -->
  1467. <div class="modal-footer">
  1468. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
  1469. </button>
  1470. <button type="button" class="btn btn-primary" onclick="Reschedule()">Save
  1471. Changes
  1472. </button>
  1473. </div>
  1474. </div>
  1475. </div>
  1476. </div>
  1478. <!-- Reschedule OTP Verification Modal -->
  1479. <div class="modal fade" id="rescheduleOtpModal" tabindex="-1" role="dialog"
  1480. aria-labelledby="rescheduleOtpModalLabel" aria-hidden="true">
  1481. <div class="modal-dialog" role="document">
  1482. <div class="modal-content">
  1483. <div class="modal-header">
  1484. <h6 class="modal-title m-0" id="rescheduleOtpModalLabel">Reschedule Verification
  1485. </h6>
  1486. <button type="button" class="btn-close" data-bs-dismiss="modal"
  1487. aria-label="Close"></button>
  1488. </div>
  1489. <div class="modal-body">
  1490. <div class="row">
  1491. <div class="mb-3 text-center">
  1492. <img src="media/images/mobileotp.png" width="50%" alt="Mobileotp">
  1493. </div>
  1494. <div class="mb-0 text-center">
  1495. <h4>OTP Verification</h4>
  1496. <p class="text-mute">Enter the OTP sent to <b class="text-info"
  1497. id="rescheduleMobileTxt"></b></p>
  1498. <p class="text-danger" id="rescheduleOtpError"></p>
  1499. </div>
  1500. <div class="mb-3 text-center">
  1501. <div class="otp-input-box">
  1502. <input type="text" maxlength="1" class="otp-input" id="rescheduleOtp1"
  1503. required />
  1504. <input type="text" maxlength="1" class="otp-input" id="rescheduleOtp2"
  1505. required />
  1506. <input type="text" maxlength="1" class="otp-input" id="rescheduleOtp3"
  1507. required />
  1508. <input type="text" maxlength="1" class="otp-input" id="rescheduleOtp4"
  1509. required />
  1510. <input type="text" maxlength="1" class="otp-input" id="rescheduleOtp5"
  1511. required />
  1512. </div>
  1513. </div>
  1514. <div class="mb-3 text-center">
  1515. <div id="rescheduleResendContainer">
  1516. <p class="mb-0">Didn't receive OTP?</p>
  1517. <p class="mb-0 text-info" id="rescheduleResendLink">Please wait..<span
  1518. id="rescheduleCountdown">60</span>s</p>
  1519. </div>
  1520. </div>
  1521. </div>
  1522. </div>
  1523. <div class="modal-footer">
  1524. <button type="button" class="btn btn-secondary btn-sm"
  1525. data-bs-dismiss="modal">Close</button>
  1526. <button type="button" class="btn btn-primary btn-sm"
  1527. onclick="verifyRescheduleOtp()">Verify OTP</button>
  1528. </div>
  1529. </div>
  1530. </div>
  1531. </div>
  1533. <!-- Tracking Log Modal -->
  1534. <!-- Tracking Modal -->
  1535. <div class="modal fade" id="trackingModal" tabindex="-1" aria-labelledby="trackingModalLabel"
  1536. aria-hidden="true">
  1537. <div class="modal-dialog modal-lg">
  1538. <div class="modal-content">
  1539. <div class="modal-header">
  1540. <h4 class="modal-title">Booking Tracking</h4>
  1541. <button type="button" class="btn-close" data-bs-dismiss="modal"
  1542. aria-label="Close"></button>
  1543. </div>
  1544. <div class="modal-body">
  1545. <div class="tracking-container">
  1546. <ul id="trackingList" class="tracking-steps list-unstyled">
  1547. <!-- Steps will be dynamically appended here -->
  1548. </ul>
  1549. </div>
  1550. </div>
  1551. </div>
  1552. </div>
  1553. </div>
  1555. <!-- Modal -->
  1556. <div class="modal fade" id="uploadNocModal" tabindex="-1" aria-labelledby="uploadNocModalLabel"
  1557. aria-hidden="true">
  1558. <div class="modal-dialog">
  1559. <div class="modal-content">
  1560. <div class="modal-header">
  1561. <h5 class="modal-title" id="uploadNocModalLabel">Upload NOC</h5>
  1562. <button type="button" class="btn-close" data-bs-dismiss="modal"
  1563. aria-label="Close"></button>
  1564. </div>
  1565. <div class="modal-body">
  1566. <div class="mb-3">
  1567. <label for="nocFile" class="form-label">Select NOC File</label>
  1568. <input type="file" class="form-control nocfile" id="nocFile" name="nocFile"
  1569. required>
  1570. <input type="hidden" id="bookingssId" name="bookingssId">
  1571. </div>
  1572. </div>
  1573. <div class="modal-footer">
  1574. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
  1575. </button>
  1576. <button type="button" class="btn btn-primary" id="submitNocButton">Submit</button>
  1577. </div>
  1578. </div>
  1579. </div>
  1580. </div>
  1582. <!-- Modal -->
  1583. <div class="modal fade" id="transactionHistoryModal" tabindex="-1"
  1584. aria-labelledby="transactionHistoryModalLabel" aria-hidden="true">
  1585. <div class="modal-dialog modal-lg" id="transactionmodel"> <!-- modal-lg makes it larger -->
  1586. <div class="modal-content">
  1587. <div class="modal-header">
  1588. <h5 class="modal-title" id="transactionHistoryModalLabel">Transaction History</h5>
  1589. <button type="button" class="btn-close" data-bs-dismiss="modal"
  1590. aria-label="Close"></button>
  1591. </div>
  1592. <div class="modal-body">
  1593. <!-- Scrollable Table -->
  1594. <div class="table-responsive"> <!-- Make the table scrollable if too large -->
  1595. <table class="table table-bordered" id="transactionTable">
  1596. <thead>
  1597. <tr>
  1598. <th>S.NO</th>
  1599. <th>Booking ID</th>
  1600. <th>Amount</th>
  1601. <th>Date</th>
  1602. <th>Transaction ID</th>
  1603. <th>Status</th>
  1604. </tr>
  1605. </thead>
  1606. <tbody>
  1607. <!-- Data will be populated dynamically here -->
  1608. </tbody>
  1609. </table>
  1610. </div>
  1611. <div class="table-responsive" id="refunddetails" style="display: none;">
  1612. <h2>Refund Details</h2>
  1613. <table class="table table-bordered" id="refunddetailsTable">
  1614. <thead>
  1615. <tr>
  1616. <th>S.NO</th>
  1617. <th>Booking ID</th>
  1618. <th>Amount</th>
  1619. <th>Date</th>
  1620. <th>Transaction ID</th>
  1621. <th>Refund Amount</th>
  1622. </tr>
  1623. </thead>
  1624. <tbody>
  1625. <!-- Data will be populated dynamically here -->
  1626. </tbody>
  1627. </table>
  1628. </div>
  1630. </div>
  1631. <div class="modal-footer">
  1632. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
  1633. </button>
  1634. </div>
  1635. </div>
  1636. </div>
  1637. </div>
  1638. <footer th:replace="~{fragments/footer :: footer}"></footer>
  1639. </div>
  1640. </div>
  1641. </div>
  1643. <!--otp form-->
  1644. <div th:replace="~{fragments/loginreg :: div}"></div>
  1645. <!--otp form-->
  1646. <script src="js/html2pdf.bundle.min.js"></script>
  1647. <script th:replace="~{fragments/script :: script}"></script>
  1648. <script th:replace="~{fragments/logRegiOtpScript :: script}"></script>
  1649. <script type="text/javascript" src="https://www.paynimo.com/paynimocheckout/server/lib/checkout.js"></script>
  1650. <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
  1651. <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
  1652. <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
  1653. <script type="text/javascript">
  1654. // Reschedule variables
  1655. var rescheduleBookingId = null;
  1656. var rescheduleStartDate = null;
  1657. var rescheduleEndDate = null;
  1658. var rescheduleMobileNumber = null;
  1659. var rescheduleHallId = null;
  1660. var rescheduleStartingSlot = null;
  1661. var rescheduleEndingSlot = null;
  1662. var rescheduleReason = null;
  1664. $(document).ready(function () {
  1665. $('#detailstable').DataTable({
  1666. responsive: true,
  1667. pageLength: 10,
  1668. ordering: true,
  1669. columnDefs: [{
  1670. targets: 'no-sort',
  1671. orderable: false
  1672. }],
  1673. dom: 'Bfrtip',
  1674. buttons: [
  1675. {
  1676. extend: 'excelHtml5',
  1677. text: 'Export to Excel',
  1678. className: 'btn btn-primary'
  1679. }
  1680. ]
  1681. });
  1682. });
  1683. $(document).ready(function () {
  1684. $('#submitNocButton').on('click', function (e) {
  1685. e.preventDefault();
  1687. // Get the form data
  1688. var formData = new FormData();
  1689. var fileInput = $('#nocFile')[0].files[0]; // Get the selected file
  1690. var bookingssId = $('#bookingssId').val(); // Get the bookingId
  1692. // Check if a file is selected
  1693. if (!fileInput) {
  1694. Swal.fire({
  1695. icon: 'warning',
  1696. title: 'No File Selected',
  1697. text: 'Please select a file to upload.',
  1698. });
  1699. return;
  1700. }
  1702. // Append file and bookingId to formData
  1703. formData.append('nocFile', fileInput);
  1704. formData.append('bookingssId', bookingssId);
  1706. // Perform Ajax request
  1707. $.ajax({
  1708. url: '/victoriahallbooking/user/api/uploaddocs', // API endpoint
  1709. type: 'POST',
  1710. data: formData,
  1711. contentType: false,
  1712. processData: false,
  1713. success: function (response) {
  1714. // Show success message and refresh the page
  1715. Swal.fire({
  1716. icon: 'success',
  1717. title: 'Success',
  1718. text: 'NOC uploaded successfully!',
  1719. }).then(() => {
  1720. $('#uploadNocModal').modal('hide'); // Close the modal
  1721. location.reload(); // Refresh the page
  1722. });
  1723. },
  1724. error: function (xhr, status, error) {
  1725. // Show error message
  1726. Swal.fire({
  1727. icon: 'error',
  1728. title: 'Upload Failed',
  1729. text: 'Failed to upload NOC: ' + error,
  1730. });
  1731. }
  1732. });
  1733. });
  1735. // Populate bookingId when opening the modal
  1736. $('#uploadNocModal').on('show.bs.modal', function (event) {
  1737. var button = $(event.relatedTarget); // Button that triggered the modal
  1738. var bookingId = button.data('booking-id'); // Extract bookingId from the button
  1739. $('#bookingssId').val(bookingId); // Set the bookingId in the hidden input field
  1740. });
  1741. });
  1744. // Function to track booking
  1745. function trackBooking(bookingId) {
  1746. $.ajax({
  1747. url: '/victoriahallbooking/user/api/trackBooking',
  1748. method: 'GET',
  1749. data: { bookingId: bookingId }, // Send booking ID to the server
  1750. success: function (data) {
  1751. // console.log("Received tracking data:", data);
  1753. // Clear the list initially before appending steps
  1754. $('#trackingList').empty();
  1756. if (Array.isArray(data) && data.length > 0) {
  1757. // Show the modal first
  1758. $('#trackingModal').modal('show');
  1760. // Create a Set to track seen statuses
  1761. const seenStatuses = new Set();
  1763. // Append steps one by one
  1764. data.forEach((event) => {
  1765. // Append each step if it hasn't been seen before
  1766. if (!seenStatuses.has(event.status)) {
  1767. seenStatuses.add(event.status); // Add status to Set
  1768. appendStep(event); // Call to append the event step
  1769. }
  1770. });
  1771. } else {
  1772. // Show a message when no tracking events are available
  1773. $('#trackingList').append('<li class="no-events">No tracking events available.</li>');
  1774. }
  1775. },
  1776. error: function (xhr, status, error) {
  1777. console.error("Failed to fetch booking details:", status, error);
  1778. alert('Failed to fetch booking details. Please try again later.');
  1779. }
  1780. });
  1781. }
  1784. function appendStep(event) {
  1785. const formattedDate = moment(event.dateTime).isValid()
  1786. ? moment(event.dateTime).format('MMM DD, YYYY, h:mm A') // Format date using Moment.js
  1787. : 'Invalid date';
  1789. const statusClass = getStatusClass(event.status); // Get CSS class for the status
  1790. const statusIcon = getStatusIcon(event.status); // Get icon for the status
  1792. // Create and append a step element for each event
  1793. const stepElement = `
  1794. <li class="tracking-step ${statusClass}">
  1795. <div class="step-icon">
  1796. <i class="fas ${statusIcon}"></i> <!-- Add the icon -->
  1797. </div>
  1798. <div class="step-content">
  1799. <h5>${event.description || 'No Description Available'}</h5> <!-- Event description -->
  1800. <p class="step-date">${formattedDate}</p> <!-- Formatted date -->
  1801. </div>
  1802. </li>
  1803. `;
  1805. // Append the element to the list
  1806. $('#trackingList').append(stepElement);
  1807. }
  1809. function getStatusClass(status) {
  1810. switch (status) {
  1811. case 'PAYMENT_SUCCESS':
  1812. case 'APPROVED':
  1813. case 'EVENT_COMPLETED':
  1814. case 'COMPLETED':
  1815. return 'completed'; // Returns 'completed' class for these statuses
  1816. case 'SETTLEMENT_RAISING':
  1817. return 'waiting';
  1818. case 'CANCELED':
  1819. return 'cancelled';
  1820. case 'REJECTED':
  1821. return 'rejected';
  1822. case 'GCC_BLOCKED':
  1823. return 'gcc-blocked';
  1824. default:
  1825. return 'pending'; // Default class if status is unknown
  1826. }
  1827. }
  1829. function getStatusIcon(status) {
  1830. switch (status) {
  1831. case 'PAYMENT_SUCCESS':
  1832. return 'fa-check-circle'; // Icon for payment success
  1833. case 'APPROVED':
  1834. return 'fa-thumbs-up';
  1835. case 'EVENT_COMPLETED':
  1836. return 'fa-calendar-check';
  1837. case 'CANCELED':
  1838. return 'fa-ban';
  1839. case 'REJECTED':
  1840. return 'fa-times-circle';
  1841. case 'GCC_BLOCKED':
  1842. return 'fa-lock';
  1843. default:
  1844. return 'fa-clock'; // Default icon for pending steps
  1845. }
  1846. }
  1849. function showFutureEvents() {
  1850. document.getElementById('futureEventsContainer').style.display = 'block';
  1851. }
  1853. function downloadAcknowledgment(event) {
  1854. event.preventDefault();
  1855. var bookingId = document.getElementById("booking_id").innerHTML;
  1856. var refId = document.getElementById("modalRefId").value;
  1858. // Redirect to the acknowledgment URL in the same tab
  1859. window.location.href = '/victoriahallbooking/user/acknowledgement?bookingId=' + encodeURIComponent(bookingId);
  1860. // var refId = document.getElementById("ref_" + bookingId).value;
  1861. console.log("Ref ID: " + refId);
  1863. window.location.href = '/victoriahallbooking/user/acknowledgement?ref_id=' + encodeURIComponent(refId);
  1864. }
  1866. function getTimeSlot(slotValue) {
  1867. var timeSlot;
  1868. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  1869. if (trimmedSlotValue === '1') {
  1870. timeSlot = 'Morning';
  1871. } else if (trimmedSlotValue === '2') {
  1872. timeSlot = 'Evening';
  1873. } else {
  1874. timeSlot = 'Unknown';
  1875. }
  1876. return timeSlot;
  1877. }
  1879. // function showBookingDetails(bookingId) {
  1880. function showBookingDetails(bookingId, refId) {
  1881. $.ajax({
  1882. url: '/victoriahallbooking/user/api/viewAllBookingDetails',
  1883. method: 'GET',
  1884. data: { bookingId: bookingId },
  1885. success: function (response) {
  1886. document.getElementById("td_userName").innerHTML = response.users.name;
  1887. document.getElementById("td_mobileNumber").innerHTML = response.users.mobileNo;
  1888. document.getElementById("td_usertype").innerHTML = response.users.usertype;
  1889. var userDetails = response.users;
  1890. var userDetailsString =
  1891. userDetails.doorNo + ", " +
  1892. userDetails.street + ", " +
  1893. userDetails.area + ", " +
  1894. userDetails.location + " ,Chennai- " +
  1895. userDetails.pinCode;
  1896. document.getElementById("td_useraddress").innerHTML = userDetailsString;
  1897. document.getElementById("td_hallName").innerHTML = response.hallDetails.hallName;
  1898. var hallDetails = response.hallDetails;
  1899. var hallDetailsString =
  1900. hallDetails.doorNo + ", " +
  1901. hallDetails.street + ", " +
  1902. hallDetails.area + ", " +
  1903. hallDetails.city + "- " +
  1904. hallDetails.pinCode;
  1905. document.getElementById("td_halladdress").innerHTML = hallDetailsString;
  1906. document.getElementById("td_caretakername").innerHTML = response.hallDetails.hallInchargeName;
  1907. document.getElementById("td_caretakermobileNumber").innerHTML = response.hallDetails.hallInchargeMobno;
  1908. document.getElementById("td_bookingDate").innerHTML = response.bookingDate;
  1909. document.getElementById("td_depositeAmount").innerHTML = parseFloat(response.depositAmount).toFixed(2);
  1910. document.getElementById("td_hallAmount").innerHTML = parseFloat(response.hallAmount).toFixed(2);
  1911. // Calculate GST and total amount
  1912. var gstAmount = (parseFloat(response.hallAmount) * (response.hallDetails.gst / 100)).toFixed(2);
  1913. var totalAmount = parseFloat(response.amountReceived).toFixed(2);
  1915. document.getElementById("td_gst").innerHTML = gstAmount;
  1916. document.getElementById("td_totalAmount").innerHTML = totalAmount;
  1918. document.getElementById("td_startDate").innerHTML = response.startDate;
  1919. document.getElementById("td_endDate").innerHTML = response.endDate;
  1920. document.getElementById("booking_id").innerHTML = response.bookingId;
  1923. function getTimeSlot(slotValue) {
  1924. var timeSlot;
  1925. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  1926. if (trimmedSlotValue === '1') {
  1927. timeSlot = 'Morning';
  1928. } else if (trimmedSlotValue === '2') {
  1929. timeSlot = 'Evening';
  1930. } else {
  1931. timeSlot = 'Unknown';
  1932. }
  1933. return timeSlot;
  1934. }
  1936. document.getElementById("td_startingSlot").innerHTML = getTimeSlot(response.startingSlot);
  1937. document.getElementById("td_endingSlot").innerHTML = getTimeSlot(response.endingSlot);
  1938. document.getElementById("bookingstatus_td").innerHTML = response.bookingStatus;
  1940. console.log("before comments user view history...");
  1941. console.log("Comments..." + response.comments);
  1943. if (response.bookingStatus === 'REJECTED' && response.comments) {
  1944. document.getElementById("rejectionreasondiv").style.display = "block";
  1945. const rejectionCell = document.getElementById("reasonforrejection");
  1946. rejectionCell.innerHTML = response.comments;
  1947. } else {
  1948. document.getElementById("rejectionreasondiv").style.display = "none";
  1949. document.getElementById("reasonforrejection").style.display = "none";
  1950. }
  1951. showReasonDocuments(response);
  1953. if (response.payments) {
  1954. document.getElementById("paymentsdetails").style.display = "block";
  1955. document.getElementById("td_transactionId").innerHTML = response.payments.transactionId;
  1956. document.getElementById("td_payamountReceived").innerHTML = response.payments.amountReceived;
  1957. document.getElementById("td_paymentStatus").innerHTML = response.payments.paymentStatus;
  1958. } else {
  1959. document.getElementById("paymentsdetails").style.display = "none";
  1960. }
  1961. if (response.ebDetails) {
  1962. document.getElementById("ebdetails").style.display = "block";
  1963. document.getElementById("td_EBNumber").innerHTML = response.hallDetails.ebNumber;
  1964. document.getElementById("td_startingReading").innerHTML = response.ebDetails.startingReading;
  1965. document.getElementById("td_endingReading").innerHTML = response.ebDetails.endingReading;
  1966. document.getElementById("td_usedunit").innerHTML = response.ebDetails.usedUnit;
  1967. document.getElementById("td_ebamountperunit").innerHTML = parseFloat(response.hallDetails.ebCostPerUnit).toFixed(2);
  1968. document.getElementById("td_electricityamount").innerHTML = parseFloat(response.ebDetails.ebAmount).toFixed(2);
  1970. } else {
  1971. document.getElementById("ebdetails").style.display = "none";
  1972. }
  1973. if (response.damageList && response.damageList.length > 0) {
  1974. document.getElementById("damagelist").style.display = "block";
  1976. } else {
  1977. document.getElementById("damagelist").style.display = "none";
  1978. }
  1979. if (response.settlement) {
  1980. document.getElementById("refunddetails").style.display = "block";
  1981. document.getElementById("td_depositeamountforrefund").innerHTML = parseFloat(response.depositAmount).toFixed(2);
  1982. document.getElementById("td_electricityamount").innerHTML = parseFloat(response.ebDetails.ebAmount).toFixed(2);
  1983. document.getElementById("td_ebAmount").innerHTML = parseFloat(response.ebDetails.ebAmount).toFixed(2);
  1984. document.getElementById("td_damage").innerHTML = parseFloat(response.settlement.damageAmount).toFixed(2);
  1986. var eb_amt = parseFloat(response.ebDetails.ebAmount).toFixed(2);
  1987. var deposit_amt = parseFloat(response.depositAmount).toFixed(2);
  1988. var tem_total = (deposit_amt - eb_amt).toFixed(2);
  1989. $("#td_settel_amt").html(tem_total);
  1990. } else {
  1991. document.getElementById("refunddetails").style.display = "none";
  1992. }
  1994. showDamageDetails(response);
  1995. if (response.bookingStatus === 'CANCELED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus)) {
  1996. document.getElementById("td_refundamount").innerHTML = `Your booking has been cancelled. Deposit amount of ₹ ${parseFloat(response.depositAmount).toFixed(2)} will be refund 3 to 15 Days`;
  1997. document.getElementById("refundamountDetails").style.display = "block";
  1998. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  1999. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  2000. } else if (response.bookingStatus === 'CANCELED' && response.refundStatus === 'COMPLETED') {
  2001. document.getElementById("td_refundamount").innerHTML = `Deposit amount of ₹ ${parseFloat(response.depositAmount).toFixed(2)} refunded successfully`;
  2002. document.getElementById("refundamountDetails").style.display = "block";
  2003. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  2004. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  2005. } else if (response.bookingStatus === 'REJECTED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus) && response.amountReceived == 0) {
  2006. document.getElementById("refundamountDetails").style.display = "none";
  2007. } else if (response.bookingStatus === 'REJECTED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus)) {
  2008. document.getElementById("td_refundamount").innerHTML = `Your booking has been Rejected by GCC. Full amount of ₹ ${parseFloat(response.amountReceived).toFixed(2)} will be refunded shortly`;
  2009. document.getElementById("refundamountDetails").style.display = "block";
  2010. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  2011. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  2012. } else if (response.bookingStatus === 'REJECTED' && response.refundStatus === 'COMPLETED') {
  2013. document.getElementById("td_refundamount").innerHTML = `Full amount of ₹${parseFloat(response.amountReceived).toFixed(2)} refunded successfully`;
  2014. document.getElementById("refundamountDetails").style.display = "block";
  2015. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  2016. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  2017. } else if (response.bookingStatus === 'REJECTED' && response.refundStatus === 'NA') {
  2018. document.getElementById("td_refundamount").innerHTML = `Your Booking has been rejected by GCC`;
  2019. document.getElementById("refundamountDetails").style.display = "block";
  2020. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  2021. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  2022. } else if (response.bookingStatus === 'GCC_BLOCKED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus)) {
  2023. document.getElementById("td_refundamount").innerHTML = `Your booking has been Blocked by GCC. Full amount of ₹ ${parseFloat(response.amountReceived).toFixed(2)} will be refunded shortly`;
  2024. document.getElementById("refundamountDetails").style.display = "block";
  2025. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  2026. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  2027. } else if (response.bookingStatus === 'GCC_BLOCKED' && response.refundStatus === 'COMPLETED') {
  2028. document.getElementById("td_refundamount").innerHTML = `Full amount of ₹${parseFloat(response.amountReceived).toFixed(2)} refunded successfully`;
  2029. document.getElementById("refundamountDetails").style.display = "block";
  2030. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  2031. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  2032. } /*else if(response.scheduleCount === 1){
  2033. document.getElementById("rescheduleDetails").style.display = "block";
  2034. document.getElementById("td_res_start_date").innerHTML = response.startDate;
  2035. document.getElementById("td_res_end_date").innerHTML = response.endDate;
  2036. document.getElementById("td_res_date").innerHTML = response.updatedDate;
  2037. }*/ else {
  2038. document.getElementById("refundamountDetails").style.display = "none";
  2039. }
  2040. // Show the modal
  2041. document.getElementById("modalBookingId").value = bookingId;
  2042. document.getElementById("modalRefId").value = refId;
  2043. $('#showBookingDetails').modal('show');
  2044. },
  2045. error: function () {
  2046. console.error("An error occurred while fetching booking details.");
  2047. }
  2048. });
  2049. }
  2051. function showDamageDetails(data) {
  2052. var damageFieldContainer = $('#damageDetails');
  2053. damageFieldContainer.empty();
  2055. // Create a div for table responsiveness
  2056. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css({
  2057. 'margin-top': '-19px',
  2058. 'margin-left': '19px'
  2059. });
  2060. ;
  2062. // Create table with similar classes and styles to the modal table
  2063. var table = $('<table>').addClass('table table-bordered table-striped').css({
  2064. 'width': '97%',
  2065. 'border-color': 'black',
  2066. 'border-top-color': 'white',
  2067. 'width': ' 730px'
  2068. });
  2069. var thead = $('<thead>').addClass('thead-light');
  2070. var tbody = $('<tbody>');
  2072. // Create Damage Details header row
  2073. var headerRow = $('<tr>').appendTo(thead);
  2074. $('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
  2075. 'padding': '0.45rem 0.45rem',
  2076. 'background-color': 'lightgrey',
  2077. 'font-weight': 'bold',
  2078. 'color': 'black',
  2079. }).appendTo(headerRow);
  2081. // Create table header row
  2082. var columnHeadersRow = $('<tr>').css('background-color', 'white').appendTo(thead);
  2083. $('<th>').text('S.No').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  2084. $('<th>').text('Asset Name').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  2085. $('<th>').text('Damage Img').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  2086. $('<th>').text('Cost').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  2087. $('<th>').text('Qty').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  2088. $('<th>').text('Amount').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  2090. var totalAmount = 0;
  2091. $.each(data.damageList, function (index, detail) {
  2092. var row = $('<tr>').appendTo(tbody);
  2093. $('<td>').text(index + 1).css('padding', '0.45rem 0.45rem').appendTo(row);
  2094. $('<td>').text(detail.assetName).css('padding', '0.45rem 0.45rem').appendTo(row);
  2095. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
  2096. showDamageImage(detail.damageImageUrl);
  2097. });
  2098. var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
  2099. $('<td>').css('padding', '0.45rem 0.45rem').append(viewLink).appendTo(row);
  2100. $('<td>').text(assetamt).css('padding', '0.45rem 0.45rem').appendTo(row);
  2101. $('<td>').text(detail.quantity).css('padding', '0.45rem 0.45rem').appendTo(row);
  2102. var amount = detail.assetAmount;
  2103. totalAmount += amount;
  2104. $('<td>').text(amount.toFixed(2)).css('padding', '0.45rem 0.45rem').appendTo(row);
  2105. $("#td_dam_amt").html(totalAmount.toFixed(2));
  2106. });
  2107. // Add row for total amount
  2108. var totalRow = $('<tr>').appendTo(tbody);
  2109. $('<td>').attr('colspan', '5').text('Total Amount').css('padding', '0.45rem 0.45rem; font-weight: bold; background-color: #f2f2f2').appendTo(totalRow);
  2110. $('<td>').text(totalAmount.toFixed(2)).css('padding', '0.45rem 0.45rem').appendTo(totalRow);
  2112. // Append the table elements to the container div
  2113. table.append(thead, tbody);
  2114. tableResponsiveDiv.append(table);
  2115. damageFieldContainer.append(tableResponsiveDiv);
  2117. var temp_total = parseFloat($("#td_settel_amt").html());
  2118. var settleAmount = temp_total - totalAmount;
  2119. if (settleAmount < 0) {
  2120. var pendingstatus = data.settlement.collectionStatus
  2121. $("#td_settel_amt").html(0.00);
  2122. $("#pendingcolumn").show();
  2123. $("#collectionstatuscolumn").show();
  2124. $('#td_collection_status').html(pendingstatus);
  2125. $("#td_pending_amt").html(Math.abs(settleAmount).toFixed(2));
  2126. $("#td_pending_amt").css("color", "red");
  2127. } else {
  2128. $("#td_settel_amt").html(settleAmount.toFixed(2));
  2129. $("#pendingcolumn").hide();
  2130. $("#collectionstatuscolumn").hide();
  2131. $("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
  2132. }
  2133. }
  2136. function showDamageImage(damageImageUrl) {
  2137. document.getElementById('filePreview').src = damageImageUrl;
  2138. $('#fileModal').modal('show');
  2139. }
  2141. function showchallonimage(challanImgLink) {
  2142. document.getElementById('filePreview').src = challanImgLink;
  2143. $('#fileModal').modal('show');
  2144. }
  2146. function showReasonDocuments(list) {
  2147. $.ajax({
  2148. type: "GET",
  2149. url: '/victoriahallbooking/api/officer/getReasonByName',
  2150. data: {
  2151. 'reasonName': list.reason
  2152. },
  2153. success: function (x) {
  2154. showReasonWithDocument(x, list);
  2155. }
  2156. });
  2157. }
  2159. // Display booking documents
  2160. function showReasonWithDocument(reasonData, list) {
  2161. var reasonDocumentData = reasonData.reasonDocumentMasterList;
  2162. var bookingDocumentsList = list.bookingDocumentsList;
  2164. const reasonFieldsContainer = $('#documents');
  2165. reasonFieldsContainer.empty();
  2167. // Create a responsive table container
  2168. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css({
  2169. 'width': '729px',
  2170. 'border': '1px solid black'
  2171. });
  2173. // Create the table with Bootstrap classes and custom styles
  2174. var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
  2175. 'width': '100%',
  2176. 'height': 'auto',
  2177. 'border': '1px solid black'
  2178. });
  2180. // Create the table header (thead)
  2181. var thead = $('<thead>').appendTo(table);
  2182. var headerRow = $('<tr>').appendTo(thead);
  2183. $('<th>').attr('colspan', '3').text('Document Details').css({
  2184. 'color': 'black',
  2185. 'background-color': 'lightgrey',
  2186. 'padding': '0.45rem 0.45rem'
  2187. }).appendTo(headerRow);
  2189. // Create header row for columns
  2190. var columnHeadersRow = $('<tr>').appendTo(thead);
  2191. $('<th>').text('S.No').appendTo(columnHeadersRow);
  2192. $('<th>').text('Required Info').appendTo(columnHeadersRow);
  2193. $('<th>').text('Required Documents').appendTo(columnHeadersRow);
  2195. // Create the table body (tbody)
  2196. var tbody = $('<tbody>').appendTo(table);
  2198. // Iterate through the documents list and populate rows
  2199. for (var i = 0; i < bookingDocumentsList.length; i++) {
  2200. (function (index) {
  2201. var row = $('<tr>').appendTo(tbody);
  2202. $('<td>').text(index + 1).appendTo(row);
  2204. // Determine the text content for the second cell
  2205. var name = bookingDocumentsList[index].name ? bookingDocumentsList[index].name : ''; // Empty string if name is null or undefined
  2206. var fieldText = reasonDocumentData[index].fieldName;
  2207. var fullText = name ? fieldText + ': ' + name : fieldText; // Include colon only if name is not empty
  2209. $('<td>').text(fullText).appendTo(row);
  2211. // Create a link to view document image
  2212. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
  2213. showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
  2214. });
  2215. $('<td>').append(viewLink).appendTo(row);
  2216. })(i);
  2217. }
  2218. // Append table to the responsive container
  2219. tableResponsiveDiv.append(table);
  2221. // Append table to the container in the DOM
  2222. reasonFieldsContainer.append(tableResponsiveDiv);
  2223. }
  2226. function showDocumentImage(fileURL) {
  2227. openFileModal(fileURL);
  2228. }
  2230. // Event delegation for dynamically added elements
  2231. $(document).on('click', '.view-document', function () {
  2232. const fileURL = $(this).data('url');
  2233. openFileModal(fileURL);
  2234. });
  2236. function openFileModal(fileURL) {
  2237. $('#filePreview').attr('src', fileURL);
  2238. $('#fileModal').modal('show');
  2239. }
  2241. // For OTP input box
  2242. $('.otp-input').on('keyup', function (e) {
  2243. var $this = $(this);
  2244. if ($this.val().length === 1) {
  2245. $this.next('.otp-input').focus();
  2246. }
  2247. if ($this.val().length === 0) {
  2248. $this.prev('.otp-input').focus();
  2249. }
  2250. });
  2252. function cancelBooking(bookingId, mobileNo, bookingType) {
  2253. var mobileNum = mobileNo;
  2254. var bookingId = bookingId;
  2256. // Check if the booking type is OFFLINE
  2257. if (bookingType === "OFFLINE") {
  2258. Swal.fire({
  2259. title: 'Cancellation Not Available',
  2260. text: 'Cancellation is not available for offline bookings.',
  2261. icon: 'error'
  2262. });
  2263. } else {
  2264. Swal.fire({
  2265. title: 'Are you sure?',
  2266. text: 'Once canceled, this action can\'t be undo. Only the deposit Amount will be refunded within 3 to 15 days.',
  2267. icon: 'warning',
  2268. showCancelButton: true,
  2269. confirmButtonColor: '#3085d6',
  2270. cancelButtonColor: '#d33',
  2271. confirmButtonText: 'Yes, cancel it!',
  2272. cancelButtonText: 'Close',
  2273. }).then((result) => {
  2274. if (result.isConfirmed) {
  2275. // If user confirms, show OTP form
  2276. mobileNumberForCancel = mobileNum;
  2277. cancelBookingId = bookingId;
  2278. cancelBookingLogin = true;
  2279. sendOTP(mobileNum);
  2280. }
  2281. });
  2282. }
  2283. }
  2285. function resetRescheduleOTPSection() {
  2286. // Hide OTP section
  2287. var otpSection = document.getElementById("otpSection");
  2288. if (otpSection) {
  2289. otpSection.style.display = "none";
  2290. }
  2292. // Show reschedule button and hide verify button
  2293. var rescheduleBtn = document.getElementById("rescheduleBtn");
  2294. var verifyOtpBtn = document.getElementById("verifyOtpBtn");
  2296. if (rescheduleBtn) {
  2297. rescheduleBtn.style.display = "inline-block";
  2298. }
  2299. if (verifyOtpBtn) {
  2300. verifyOtpBtn.style.display = "none";
  2301. }
  2303. // Clear OTP input fields
  2304. for (let i = 1; i <= 6; i++) {
  2305. var otpField = document.getElementById("otp" + i);
  2306. if (otpField) {
  2307. otpField.value = "";
  2308. }
  2309. }
  2311. // Reset variables
  2312. rescheduleBookingId = null;
  2313. rescheduleStartDate = null;
  2314. rescheduleEndDate = null;
  2315. rescheduleMobileNumber = null;
  2316. rescheduleHallId = null;
  2317. rescheduleStartingSlot = null;
  2318. rescheduleEndingSlot = null;
  2319. rescheduleReason = null;
  2320. }
  2322. function openRescheduleModal(bookingId, startDate, endDate, noOfDays, hallId, startingSlot, endingSlot, reason) {
  2323. // Function to map slot values to their text representation
  2324. function getSlotText(slot) {
  2325. return slot === 1 ? 'Morning' : 'Evening';
  2326. }
  2328. // Populate modal inputs
  2329. const start = new Date(startDate);
  2330. const end = new Date(endDate);
  2331. const timeDiff = end - start;
  2333. // Convert time difference from milliseconds to days
  2334. const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
  2336. // Set values for inputs
  2337. document.getElementById("bookingId").value = bookingId;
  2338. document.getElementById("startDateInput").value = startDate;
  2339. document.getElementById("endDateInput").value = endDate;
  2340. document.getElementById("noOfDaysInput").value = noOfDays;
  2341. document.getElementById("startingSlot").value = startingSlot;
  2342. document.getElementById("endingSlot").value = endingSlot;
  2343. document.getElementById("daysDiff").value = daysDiff;
  2345. // Display slot text in the modal
  2346. document.getElementById("startDatetext").value = startDate;
  2347. document.getElementById("startingSlotText").value = getSlotText(startingSlot);
  2348. document.getElementById("endingSlotText").value = getSlotText(endingSlot);
  2350. // Store booking details for OTP verification
  2351. rescheduleBookingId = bookingId;
  2352. rescheduleStartDate = startDate;
  2353. rescheduleEndDate = endDate;
  2354. rescheduleHallId = hallId;
  2355. rescheduleStartingSlot = startingSlot;
  2356. rescheduleEndingSlot = endingSlot;
  2357. rescheduleReason = reason;
  2359. // Optionally, fetch and update calendar or availability based on hallId
  2360. getBookingCalendar(hallId, reason);
  2362. // Show the date change modal
  2363. $('#bookingRescheduleModal').modal('show');
  2364. }
  2367. function getBookingCalendar(hall_id, reason) {
  2368. // Make an AJAX call to fetch booking data
  2369. $.ajax({
  2370. type: 'GET',
  2371. url: '/victoriahallbooking/user/api/getPastData',
  2372. data: {
  2373. hall_id: hall_id
  2374. },
  2376. success: function (response) {
  2377. window.bookingResponse = {};
  2378. if (response && Array.isArray(response)) {
  2379. $("#startDateInput").datepicker("destroy");
  2380. for (var i = 0; i < response.length; i++) {
  2381. var dateString = datepickerFormat(response[i].bdate);
  2382. window.bookingResponse[dateString] = [response[i].morningSlot, response[i].eveningSlot];
  2383. }
  2385. initializeDatepickerWithColors(hall_id, reason);
  2386. if (response.length == 0) {
  2387. initializeDatepickerWithColors(hall_id, reason);
  2388. }
  2389. } else {
  2390. console.error('Invalid or empty response data.');
  2391. }
  2392. },
  2393. error: function (xhr, status, error) {
  2394. console.error('Error fetching hall details:', error);
  2395. }
  2396. });
  2397. }
  2399. function initializeDatepickerWithColors(hallId, reason) { // Confirm hallId is passed here
  2400. $("#datepicker-container").datepicker("destroy");
  2401. const serverDate = new Date($("#serverDate").val() + "T00:00:00");
  2403. const minDate = new Date(serverDate);
  2404. minDate.setDate(minDate.getDate() + 30);
  2406. const maxDate = new Date(minDate);
  2407. maxDate.setDate(maxDate.getDate() + 30);
  2408. // console.log("View History: "+maxDate);
  2410. $("#startDateInput,#datepicker-container").datepicker({
  2411. dateFormat: "yy-mm-dd",
  2412. minDate: serverDate,
  2413. maxDate: maxDate,
  2414. beforeShowDay: function (eDate) {
  2416. const day = eDate.getDay(); // 0=Sun, 5=Fri, 6=Sat
  2418. if (![0, 5, 6].includes(day)) {
  2419. return [false, "highlight-disabled", "Bookings allowed only on Fri, Sat & Sun"];
  2420. }
  2422. const dateString = $.datepicker.formatDate("yy-mm-dd", eDate);
  2423. const bookingStatus = window.bookingResponse[dateString] || {};
  2425. // const currentDate = new Date();
  2426. serverDate.setHours(0, 0, 0, 0); // Normalize current date to midnight
  2427. eDate.setHours(0, 0, 0, 0); // Normalize selected date to midnight
  2429. // Logic for other dates
  2430. if (eDate < serverDate) {
  2431. return [false, "highlight-disabled", "Slot not Available"];
  2432. }
  2434. const isToday = eDate.getTime() === serverDate.getTime();
  2435. const currentHour = new Date().getHours();
  2436. const isBefore6AM = currentHour < 6;
  2437. const isAfter2PM = currentHour >= 14;
  2439. // Block 3-day logic for specific event types
  2440. // const today = new Date();
  2441. const blockedDate = new Date(serverDate);
  2442. blockedDate.setDate(serverDate.getDate() + 2);
  2444. const isThreeDayBlock = ["Commercial", "State Govt Event", "Central Govt Event"].includes(reason);
  2445. if (eDate <= blockedDate && isThreeDayBlock) {
  2446. return [false, "highlight-disabled", "Blocked due to event type"];
  2447. }
  2449. // Logic for currentdate
  2450. if (isToday) {
  2451. if (isBefore6AM) {
  2452. // Before 6 AM: Allow full-day booking or adjust based on booking status
  2453. return handleBookingStatus(bookingStatus, "Full Day Available");
  2454. } else if (isAfter2PM) {
  2455. // After 2 PM: Block all bookings
  2456. return handleAfter2PM(bookingStatus);
  2457. } else {
  2458. // Between 6 AM and 2 PM: Check status and disable morning slots
  2459. return handleMorningSlots(bookingStatus);
  2460. }
  2461. }
  2463. return handleBookingStatus(bookingStatus, "Slot Available");
  2464. },
  2465. });
  2467. $("#startDateInput").on("change", function () {
  2468. var selectedDate = $(this).val();
  2469. var noOfDays = document.getElementById('noOfDaysInput').value;
  2470. var startingSlot = document.getElementById("startingSlot").value;
  2471. var endingSlot = document.getElementById("endingSlot").value;
  2472. var noofdays = document.getElementById("noOfDaysInput").value;
  2473. updateEndDate(selectedDate, noofdays, startingSlot, endingSlot);
  2474. });
  2476. }
  2478. function handleBookingStatus(bookingStatus, defaultMessage) {
  2479. if (bookingStatus[2]) {
  2480. return [true, "highlight-blue disabled", "GCC Blocked"];
  2481. } /*else if (bookingStatus[3]) {
  2482. return [true, "highlight-lightpink disabled", "Temporary Blocked"];
  2483. }*/ else if (bookingStatus[0] && bookingStatus[1]) {
  2484. return [true, "highlight-pink disabled", "Slot Occupied"];
  2485. } else if (bookingStatus[0] && !bookingStatus[1]) {
  2486. return [true, "highlight-pink disabled", "Slot Occupied"];
  2487. } else if (!bookingStatus[0] && bookingStatus[1]) {
  2488. return [true, "highlight-violet", "Only Morning Slot Available"];
  2489. }
  2490. return [true, "highlight-greens", defaultMessage];
  2491. }
  2493. // Helper function: Handles logic after 2 PM
  2494. function handleAfter2PM(bookingStatus) {
  2495. if (bookingStatus[2]) {
  2496. return [true, "highlight-blue disabled", "GCC Blocked"];
  2497. } else if (bookingStatus[0] || bookingStatus[1]) {
  2498. return [true, "highlight-pink disabled", "Slot Occupied"];
  2499. }
  2500. return [false, "highlight-disabled", "Not Allowed to Book"];
  2501. }
  2503. // Helper function: Handles morning slots between 6 AM and 2 PM
  2504. function handleMorningSlots(bookingStatus) {
  2505. if (bookingStatus[2]) {
  2506. return [true, "highlight-blue disabled", "GCC Blocked"];
  2507. } else if (bookingStatus[0] && bookingStatus[1]) {
  2508. return [true, "highlight-pink disabled", "Slot Occupied"];
  2509. } else if (bookingStatus[0] && !bookingStatus[1]) {
  2510. return [true, "highlight-pink disabled", "Slot Occupied"];
  2511. } else if (!bookingStatus[0] && bookingStatus[1]) {
  2512. return [false, "highlight-disabled", "Slot Occupied"];
  2513. }
  2514. return [true, "highlight-pink disabled", "Slot Occupied"];
  2515. }
  2517. function updateEndDate(startDate, noofdays, startingSlot, endingSlot) {
  2518. if (startDate && noofdays !== undefined) {
  2519. var start = new Date(startDate);
  2520. var startFormatted = start.toISOString().split('T')[0];
  2521. var bookingStatus = window.bookingResponse[startFormatted] || [false, false];
  2522. var morningAvailable = !bookingStatus[0]; // false means available
  2523. var eveningAvailable = !bookingStatus[1]; // false means available
  2524. var endDate;
  2525. var isValid = true; // Flag to determine if all slots are available
  2527. // Convert noofdays to a number for accurate calculations
  2528. noofdays = parseFloat(noofdays);
  2530. // Handle slot availability and combinations
  2531. if (startingSlot === "2" && endingSlot === "2") { // Evening to Evening
  2532. //console.log("Handling Evening to Evening slot.");
  2533. if (noofdays === 0.5) {
  2534. if (eveningAvailable) {
  2535. endDate = new Date(start);
  2536. endDate.setDate(start.getDate() + Math.ceil(noofdays) - 1);
  2537. endDate = endDate.toISOString().split('T')[0];
  2538. document.getElementById('endDateInput').value = endDate;
  2539. //console.log("End Date (Evening to Evening):", endDate);
  2540. } else {
  2541. Swal.fire({
  2542. title: 'Evening Slot Not Available',
  2543. text: 'The evening slot is not available for the selected date range.',
  2544. icon: 'warning',
  2545. confirmButtonText: 'OK'
  2546. });
  2547. document.getElementById('endDateInput').value = "";
  2548. //console.log("Evening slot not available for", noofdays, "days.");
  2549. }
  2550. } else if (noofdays === 1.5) {
  2551. // Special handling for 2 days
  2552. let endDateCandidate = new Date(start);
  2553. endDateCandidate.setDate(start.getDate() + 1);
  2554. let endDateFormattedCandidate = endDateCandidate.toISOString().split('T')[0];
  2555. let endDateStatusCandidate = window.bookingResponse[endDateFormattedCandidate] || [false, false];
  2556. let morningAvailableOnEndDate = !endDateStatusCandidate[0]; // false means available
  2557. let eveningAvailableOnEndDate = !endDateStatusCandidate[1]; // false means available
  2559. if (eveningAvailable && morningAvailableOnEndDate && eveningAvailableOnEndDate) {
  2560. endDate = endDateCandidate.toISOString().split('T')[0];
  2561. document.getElementById('endDateInput').value = endDate;
  2562. //console.log("End Date (Morning to Evening with 2 days):", endDate);
  2563. } else {
  2564. Swal.fire({
  2565. title: 'Slot Not Available',
  2566. text: 'The Morning slots are not available for the selected date range.',
  2567. icon: 'warning',
  2568. confirmButtonText: 'OK'
  2569. });
  2570. document.getElementById('endDateInput').value = "";
  2571. //console.log("Morning or Evening slot not available for 2 days.");
  2572. }
  2573. } else {
  2574. //console.log("Unsupported duration for Evening to Evening slot.");
  2575. Swal.fire({
  2576. title: 'Invalid Selection',
  2577. text: 'The selected duration for the evening slot is not supported.',
  2578. icon: 'error',
  2579. confirmButtonText: 'OK'
  2580. });
  2581. document.getElementById('endDateInput').value = "";
  2582. }
  2583. } else if (startingSlot === "1" && endingSlot === "1") { // Morning to Morning
  2584. //console.log("Handling Morning to Morning slot.");
  2585. if (noofdays === 0.5) {
  2586. if (morningAvailable) {
  2587. endDate = new Date(start);
  2588. endDate.setDate(start.getDate() + Math.ceil(noofdays) - 1);
  2589. endDate = endDate.toISOString().split('T')[0];
  2590. document.getElementById('endDateInput').value = endDate;
  2591. //console.log("End Date (morning to morning):", endDate);
  2592. } else {
  2593. Swal.fire({
  2594. title: 'Morning Slot Not Available',
  2595. text: 'The Morning slot is not available for the selected date range.',
  2596. icon: 'warning',
  2597. confirmButtonText: 'OK'
  2598. });
  2599. document.getElementById('endDateInput').value = "";
  2600. //console.log("Evening slot not available for", noofdays, "days.");
  2601. }
  2602. } else if (noofdays === 1.5) {
  2603. // Special handling for 2 days
  2604. let endDateCandidate = new Date(start);
  2605. endDateCandidate.setDate(start.getDate() + 1);
  2606. let endDateFormattedCandidate = endDateCandidate.toISOString().split('T')[0];
  2607. let endDateStatusCandidate = window.bookingResponse[endDateFormattedCandidate] || [false, false];
  2608. let morningAvailableOnEndDate = !endDateStatusCandidate[0]; // false means available
  2609. let eveningAvailableOnEndDate = !endDateStatusCandidate[1]; // false means available
  2611. if (morningAvailable && eveningAvailable && morningAvailableOnEndDate) {
  2612. endDate = endDateCandidate.toISOString().split('T')[0];
  2613. document.getElementById('endDateInput').value = endDate;
  2614. //console.log("End Date (Morning to Evening with 2 days):", endDate);
  2615. } else {
  2616. Swal.fire({
  2617. title: 'Slot Not Available',
  2618. text: 'The evening slots are not available for the selected date range.',
  2619. icon: 'warning',
  2620. confirmButtonText: 'OK'
  2621. });
  2622. document.getElementById('endDateInput').value = "";
  2623. //console.log("Morning or Evening slot not available for 2 days.");
  2624. }
  2625. } else {
  2626. //console.log("Unsupported duration for Morning to Morning slot.");
  2627. Swal.fire({
  2628. title: 'Invalid Selection',
  2629. text: 'The selected duration for the morning slot is not supported.',
  2630. icon: 'error',
  2631. confirmButtonText: 'OK'
  2632. });
  2633. document.getElementById('endDateInput').value = "";
  2634. }
  2635. } else if (startingSlot === "1" && endingSlot === "2") { // Morning to Evening
  2636. //console.log("Handling Morning to Evening slot.");
  2637. if (noofdays === 1) {
  2638. if (morningAvailable && eveningAvailable) {
  2639. endDate = new Date(start);
  2640. endDate.setDate(start.getDate() + Math.ceil(noofdays) - 1);
  2641. endDate = endDate.toISOString().split('T')[0];
  2642. document.getElementById('endDateInput').value = endDate;
  2643. //console.log("End Date (Morning to Evening):", endDate);
  2644. } else {
  2645. Swal.fire({
  2646. title: ' Slot Not Available',
  2647. text: 'The Selected slot is not available for the selected date range.',
  2648. icon: 'warning',
  2649. confirmButtonText: 'OK'
  2650. });
  2651. document.getElementById('endDateInput').value = "";
  2652. //console.log("Evening slot not available for", noofdays, "days.");
  2653. }
  2654. } else if (noofdays === 2) {
  2655. // Special handling for 2 days
  2656. let endDateCandidate = new Date(start);
  2657. endDateCandidate.setDate(start.getDate() + 1);
  2658. let endDateFormattedCandidate = endDateCandidate.toISOString().split('T')[0];
  2659. let endDateStatusCandidate = window.bookingResponse[endDateFormattedCandidate] || [false, false];
  2660. let morningAvailableOnEndDate = !endDateStatusCandidate[0]; // false means available
  2661. let eveningAvailableOnEndDate = !endDateStatusCandidate[1]; // false means available
  2663. if (morningAvailable && eveningAvailable && morningAvailableOnEndDate && eveningAvailableOnEndDate) {
  2664. endDate = endDateCandidate.toISOString().split('T')[0];
  2665. document.getElementById('endDateInput').value = endDate;
  2666. //console.log("End Date (Morning to Evening with 2 days):", endDate);
  2667. } else {
  2668. Swal.fire({
  2669. title: 'Slot Not Available',
  2670. text: 'The morning and/or evening slots are not available for the selected date range.',
  2671. icon: 'warning',
  2672. confirmButtonText: 'OK'
  2673. });
  2674. document.getElementById('endDateInput').value = "";
  2675. //console.log("Morning or Evening slot not available for 2 days.");
  2676. }
  2677. } else {
  2678. //console.log("Unsupported duration for Morning to Evening slot.");
  2679. Swal.fire({
  2680. title: 'Invalid Selection',
  2681. text: 'The selected duration for the morning to evening slot is not supported.',
  2682. icon: 'error',
  2683. confirmButtonText: 'OK'
  2684. });
  2685. document.getElementById('endDateInput').value = "";
  2686. }
  2687. } else if (startingSlot === "2" && endingSlot === "1") { // Evening to Morning
  2688. //console.log("Handling Evening to Morning slot.");
  2689. if (noofdays === 1) {
  2690. if (eveningAvailable) { // Check if evening slot is available
  2691. let nextDay = new Date(start);
  2692. nextDay.setDate(start.getDate() + 1);
  2693. let nextDayFormatted = nextDay.toISOString().split('T')[0];
  2694. let nextDayStatus = window.bookingResponse[nextDayFormatted] || [false, false];
  2695. let nextDayMorningAvailable = !nextDayStatus[0]; // false means available
  2697. if (nextDayMorningAvailable) {
  2698. endDate = nextDay.toISOString().split('T')[0];
  2699. document.getElementById('endDateInput').value = endDate;
  2700. //console.log("End Date (Evening to Morning):", endDate);
  2701. } else {
  2702. Swal.fire({
  2703. title: 'Morning Slot Not Available',
  2704. text: 'The morning slot is not available for the next day.',
  2705. icon: 'warning',
  2706. confirmButtonText: 'OK'
  2707. });
  2708. document.getElementById('endDateInput').value = "";
  2709. //console.log("Morning slot not available for the next day.");
  2710. }
  2711. } else {
  2712. Swal.fire({
  2713. title: 'Evening Slot Not Available',
  2714. text: 'The evening slot is not available for the selected date.',
  2715. icon: 'warning',
  2716. confirmButtonText: 'OK'
  2717. });
  2718. document.getElementById('endDateInput').value = "";
  2719. //console.log("Evening slot not available for", startDate);
  2720. }
  2721. } else {
  2722. //console.log("Unsupported duration for Evening to Morning slot.");
  2723. Swal.fire({
  2724. title: 'Invalid Selection',
  2725. text: 'The selected duration for the evening to morning slot is not supported.',
  2726. icon: 'error',
  2727. confirmButtonText: 'OK'
  2728. });
  2729. document.getElementById('endDateInput').value = "";
  2730. }
  2731. } else {
  2732. //console.log("Unsupported slot combination or duration.");
  2733. Swal.fire({
  2734. title: 'Invalid Slot Combination',
  2735. text: 'The selected slot combination or duration is not supported.',
  2736. icon: 'error',
  2737. confirmButtonText: 'OK'
  2738. });
  2739. document.getElementById('endDateInput').value = "";
  2740. }
  2741. } else {
  2742. //console.log("Start Date or Number of Days not provided.");
  2743. Swal.fire({
  2744. title: 'Invalid Input',
  2745. text: 'Please provide a valid start date and number of days.',
  2746. icon: 'error',
  2747. confirmButtonText: 'OK'
  2748. });
  2749. document.getElementById('endDateInput').value = "";
  2750. }
  2751. }
  2753. function datepickerFormat(dateString) {
  2754. var dateObject = new Date(dateString);
  2755. var year = dateObject.getFullYear();
  2756. var month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
  2757. var day = dateObject.getDate().toString().padStart(2, "0");
  2758. return `${year}-${month}-${day}`;
  2759. }
  2761. function printTables() {
  2762. // Get the printable content
  2763. var printableContent = document.getElementById('printableContent').innerHTML;
  2764. // Open a print window
  2765. var printWindow = window.open('', '', 'height=400,width=600');
  2766. // Write the printable content to the print window
  2767. printWindow.document.write('<html><head><title>Print</title></head><body>' + printableContent + '</body></html>');
  2769. // Close the print window after printing
  2770. printWindow.document.close();
  2771. printWindow.print();
  2772. printWindow.close();
  2773. }
  2775. function Reschedule() {
  2776. // Get mobile number and show OTP modal for verification
  2777. $.ajax({
  2778. type: "GET",
  2779. url: '/victoriahallbooking/user/api/viewAllBookingDetails',
  2780. data: { bookingId: rescheduleBookingId },
  2781. success: function (response) {
  2782. rescheduleMobileNumber = response.users.mobileNo;
  2784. // Show mobile number in OTP modal
  2785. document.getElementById("rescheduleMobileTxt").textContent = rescheduleMobileNumber;
  2787. // Clear any previous OTP errors
  2788. document.getElementById("rescheduleOtpError").textContent = "";
  2790. // Clear OTP inputs
  2791. for (let i = 1; i <= 5; i++) {
  2792. document.getElementById("rescheduleOtp" + i).value = "";
  2793. }
  2795. // Close date change modal and show OTP modal
  2796. $('#bookingRescheduleModal').modal('hide');
  2797. $('#rescheduleOtpModal').modal('show');
  2799. // Send OTP immediately
  2800. sendRescheduleOTP(rescheduleMobileNumber);
  2801. },
  2802. error: function () {
  2803. Swal.fire({
  2804. icon: 'error',
  2805. title: 'Error',
  2806. text: 'Failed to get booking details. Please try again.',
  2807. showConfirmButton: true
  2808. });
  2809. }
  2810. });
  2811. }
  2813. function sendRescheduleOTP(mobileNumber) {
  2814. $.ajax({
  2815. type: "GET",
  2816. url: "/victoriahallbooking/user/api/sendOTP",
  2817. data: {
  2818. mobileNo: mobileNumber,
  2819. purpose: "reschedule"
  2820. },
  2821. success: function (response) {
  2822. // Start countdown timer
  2823. startRescheduleCountdown();
  2824. },
  2825. error: function () {
  2826. Swal.fire({
  2827. icon: 'error',
  2828. title: 'Error',
  2829. text: 'Failed to send OTP. Please try again.',
  2830. showConfirmButton: true
  2831. });
  2832. }
  2833. });
  2834. }
  2836. function startRescheduleCountdown() {
  2837. var resendTimeout;
  2838. var resendLink = $("#rescheduleResendLink");
  2839. $("#rescheduleResendLink").html('<a href="#" id="rescheduleResendLink" class="text-info" onclick="return resendRescheduleOTP();">Resend OTP</a>');
  2840. var countdown = $("#rescheduleCountdown");
  2842. function startCountdown() {
  2843. var timeleft = 60;
  2844. countdown.text(timeleft);
  2846. resendTimeout = setInterval(function () {
  2847. timeleft--;
  2848. countdown.text(timeleft);
  2850. if (timeleft <= 0) {
  2851. clearInterval(resendTimeout);
  2852. $("#rescheduleResendLink").html('<a href="#" id="rescheduleResendLink" class="text-info" onclick="return sendRescheduleOTP(' + rescheduleMobileNumber + ');">Resend OTP</a>');
  2853. }
  2854. }, 1000);
  2855. }
  2857. startCountdown();
  2858. }
  2860. function resendRescheduleOTP() {
  2861. if (rescheduleMobileNumber) {
  2862. sendRescheduleOTP(rescheduleMobileNumber);
  2863. // Restart countdown timer after resending OTP
  2864. startRescheduleCountdown();
  2865. }
  2866. }
  2868. function verifyRescheduleOtp() {
  2869. // Get all the input fields with class `otp-input`
  2870. var otpInputs = $('.otp-input');
  2872. // Get the OTP value as a string
  2873. var otpValue = '';
  2874. otpInputs.each(function () {
  2875. otpValue += $(this).val();
  2876. });
  2878. if (otpValue.length !== 5) {
  2879. document.getElementById("rescheduleOtpError").textContent = "Please enter complete OTP";
  2880. return false;
  2881. }
  2883. // Verify OTP
  2884. $.ajax({
  2885. type: "GET",
  2886. url: "/victoriahallbooking/user/api/verifyofficialOTP",
  2887. data: {
  2888. otp: otpValue
  2889. },
  2890. dataType: 'text',
  2891. success: function (response) {
  2892. if (response.trim() === "Success") {
  2893. // OTP verified successfully, close OTP modal and proceed with reschedule
  2894. $('#rescheduleOtpModal').modal('hide');
  2895. validateDatesAndReschedule();
  2896. } else {
  2897. document.getElementById("rescheduleOtpError").textContent = "OTP is Incorrect!!!";
  2898. // Clear OTP inputs
  2899. for (let i = 1; i <= 5; i++) {
  2900. document.getElementById("rescheduleOtp" + i).value = "";
  2901. }
  2902. }
  2903. },
  2904. error: function () {
  2905. document.getElementById("rescheduleOtpError").textContent = "Error verifying OTP. Please try again.";
  2906. }
  2907. });
  2909. return false;
  2910. }
  2916. function proceedWithReschedule() {
  2917. // Debug: Log the data being sent
  2918. console.log('Reschedule data:', {
  2919. bookingId: rescheduleBookingId,
  2920. startDate: rescheduleStartDate,
  2921. endDate: rescheduleEndDate
  2922. });
  2924. $.ajax({
  2925. type: "POST",
  2926. url: "/victoriahallbooking/user/api/reschedule-dates",
  2927. data: {
  2928. bookingId: rescheduleBookingId,
  2929. startDate: rescheduleStartDate,
  2930. endDate: rescheduleEndDate
  2931. },
  2932. success: function (response) {
  2933. Swal.fire({
  2934. icon: 'success',
  2935. title: 'Success',
  2936. text: 'Booking rescheduled successfully!',
  2937. showConfirmButton: true
  2938. }).then((result) => {
  2939. if (result.isConfirmed) {
  2940. // Close modal and reload page
  2941. $('#bookingRescheduleModal').modal('hide');
  2942. location.reload();
  2943. }
  2944. });
  2945. },
  2946. error: function (xhr, status, error) {
  2947. console.error('Reschedule API Error:', {
  2948. status: xhr.status,
  2949. statusText: xhr.statusText,
  2950. responseText: xhr.responseText,
  2951. error: error
  2952. });
  2954. let errorMessage = 'Failed to reschedule booking. Please try again.';
  2956. if (xhr.responseText) {
  2957. try {
  2958. const errorData = JSON.parse(xhr.responseText);
  2959. errorMessage = errorData.message || errorData.error || errorMessage;
  2960. } catch (e) {
  2961. errorMessage = xhr.responseText || errorMessage;
  2962. }
  2963. }
  2965. Swal.fire({
  2966. icon: 'error',
  2967. title: 'Error',
  2968. text: errorMessage,
  2969. showConfirmButton: true
  2970. });
  2971. }
  2972. });
  2973. }
  2975. function validateDatesAndReschedule() {
  2976. // Retrieve values from modal inputs
  2978. var startDate = document.getElementById("startDateInput").value;
  2979. var endDate = document.getElementById("endDateInput").value;
  2980. var originalStartDate = document.getElementById("startDatetext").value;
  2982. // Debug: Log the retrieved dates
  2983. console.log('Retrieved dates:', {
  2984. startDate: startDate,
  2985. endDate: endDate,
  2986. originalStartDate: originalStartDate
  2987. });
  2989. // Check if the rescheduled start date is the same as the original booked start date
  2990. if (startDate === originalStartDate) {
  2991. Swal.fire({
  2992. icon: 'warning',
  2993. title: 'Warning',
  2994. text: 'Your Rescheduled Start Date is the same as Your booking Start Date. Please change the date.',
  2995. showConfirmButton: true
  2996. });
  2997. return;
  2998. }
  2999. if (!endDate) {
  3000. Swal.fire({
  3001. icon: 'error',
  3002. title: 'Error',
  3003. text: 'End Date is Empty! Please check your Start Date',
  3004. showConfirmButton: true
  3005. });
  3006. return;
  3007. }
  3009. // Store the validated dates
  3010. rescheduleStartDate = startDate;
  3011. rescheduleEndDate = endDate;
  3013. // Debug: Log the final dates being sent
  3014. console.log('Final reschedule dates:', {
  3015. startDate: rescheduleStartDate,
  3016. endDate: rescheduleEndDate,
  3017. bookingId: rescheduleBookingId
  3048. });
  3050. // Proceed with reschedule
  3051. proceedWithReschedule();
  3052. }
  3054. $(document).ready(function () {
  3055. // DataTables buttons configuration
  3056. var buttons = [
  3057. {
  3058. extend: 'pageLength',
  3059. className: 'btn btn-primary'
  3060. }
  3061. ];
  3062. $('#simpletable').DataTable({
  3063. dom: 'Bftip',
  3064. columnDefs: [
  3065. { targets: 'no-sort', orderable: false }
  3066. ],
  3067. lengthMenu: [
  3068. [5, 10, 20, 50, -1],
  3069. ['5 rows', '10 rows', '20 rows', '50 rows', 'Show all']
  3070. ],
  3071. scrollY: '50vh',
  3072. fixedColumns: {
  3073. left: 1,
  3074. right: 1
  3075. },
  3076. buttons: [buttons],
  3077. responsive: true,
  3078. searching: true, // Enable search
  3079. select: false,
  3080. processing: false,
  3081. });
  3084. $('#searchInput').on('keyup', function () {
  3085. dataTable.search(this.value).draw();
  3086. });
  3087. });
  3088. $(document).on('change', '.nocfile', function () {
  3089. validateFile(this);
  3090. });
  3092. function transactionHistory(userId) {
  3093. $.ajax({
  3094. type: "GET",
  3095. url: '/victoriahallbooking/user/api/getTransactionDetails',
  3096. data: { 'userId': userId },
  3097. success: function (data) {
  3098. // console.log("Full response:", data);
  3099. // console.log("Refund Details:", data.refundDetails);
  3102. const transactions = data.transactions || [];
  3103. const refundDetails = data.refundDetails || [];
  3105. populateTransactionTable(transactions);
  3106. populateRefundDetailsTable(refundDetails);
  3108. $('#transactionHistoryModal').modal('show'); // Show the modal
  3109. },
  3110. error: function (error) {
  3111. console.error("Error fetching transaction details", error);
  3112. }
  3113. });
  3114. }
  3116. function populateTransactionTable(transactions) {
  3117. const tableBody = $('#transactionTable tbody');
  3118. tableBody.empty(); // Clear any existing rows
  3120. transactions.forEach((transaction, index) => {
  3121. const paymentStatus = (transaction.statusCode === "0300" && transaction.response?.includes("success"))
  3122. ? "Success"
  3123. : "Payment Failed";
  3125. const row = `
  3126. <tr>
  3127. <td>${index + 1}</td>
  3128. <td>${transaction.bookingId}</td>
  3129. <td>${transaction.amount || '-'}</td>
  3130. <td>${transaction.date || '-'}</td>
  3131. <td>${transaction.txansactionId || '-'}</td>
  3132. <td>${paymentStatus}</td>
  3133. </tr>
  3134. `;
  3135. tableBody.append(row); // Append the row to the table body
  3136. });
  3137. }
  3139. function populateRefundDetailsTable(refundDetails) {
  3140. const refundTable = $('#refunddetails');
  3141. const tableBody = $('#refunddetailsTable tbody');
  3142. tableBody.empty(); // Clear any existing rows
  3144. if (refundDetails.length > 0) {
  3145. refundTable.show(); // Show the refund details table
  3147. refundDetails.forEach((refund, index) => {
  3148. const row = `
  3149. <tr>
  3150. <td>${index + 1}</td>
  3151. <td>${refund.bookingId}</td>
  3152. <td>${refund.amount}</td>
  3153. <td>${refund.date}</td>
  3154. <td>${refund.txansactionId}</td>
  3155. <td>${refund.refundAmount}</td>
  3156. </tr>
  3157. `;
  3158. tableBody.append(row);
  3159. });
  3160. } else {
  3161. refundTable.hide(); // Hide the refund details table
  3162. }
  3163. }
  3166. // Toggle Chat Box
  3167. function toggleChat() {
  3168. const chatBox = document.getElementById('chat-box');
  3169. chatBox.style.display = (chatBox.style.display === 'block') ? 'none' : 'block';
  3170. }
  3172. // Send Message
  3173. function sendMessage() {
  3174. const userInput = document.getElementById('userInput');
  3175. const message = userInput.value.trim();
  3177. if (message) {
  3178. // Create message element
  3179. const chatBody = document.getElementById('chat-body');
  3180. const userMessage = document.createElement('div');
  3181. userMessage.className = 'user-message';
  3182. userMessage.textContent = message;
  3184. chatBody.appendChild(userMessage);
  3185. chatBody.scrollTop = chatBody.scrollHeight; // Auto-scroll to bottom
  3187. // Send message to the server (Spring Boot API)
  3188. fetch('/victoriahallbooking/admin/api/send', {
  3189. method: 'POST',
  3190. headers: {
  3191. 'Content-Type': 'application/json',
  3192. },
  3193. body: JSON.stringify({ message }),
  3194. })
  3195. .then(response => response.json())
  3196. .then(data => {
  3197. // Add response message to chat
  3198. const responseMessage = document.createElement('div');
  3199. responseMessage.className = 'bot-message';
  3200. responseMessage.textContent = data.response;
  3202. chatBody.appendChild(responseMessage);
  3203. chatBody.scrollTop = chatBody.scrollHeight;
  3204. });
  3206. userInput.value = ''; // Clear input field
  3207. }
  3208. }
  3210. // OTP input navigation for reschedule modal
  3211. $('.otp-input').on('keyup', function (e) {
  3212. var $this = $(this);
  3213. if ($this.val().length === 1) {
  3214. $this.next('.otp-input').focus();
  3215. }
  3216. if ($this.val().length === 0) {
  3217. $this.prev('.otp-input').focus();
  3218. }
  3219. });
  3221. // Clear OTP inputs when OTP modal is shown
  3222. $('#rescheduleOtpModal').on('shown.bs.modal', function () {
  3223. $('.otp-input').val('');
  3224. $('#rescheduleOtpError').text('');
  3225. });
  3227. </script>
  3229. </div>
  3230. </div>
  3231. </div>
  3232. </body>
  3234. </html>