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

2847 lines
155 KiB
Raw Normal View History

scheduler flag
1 year 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. </style>
  509. <body>
  510. <!-- Pre-loader start -->
  511. <div class="theme-loader">
  512. <div class="ball-scale">
  513. <div class='contain'>
  514. <div class="ring">
  515. <div class="frame"></div>
  516. </div>
  517. <div class="ring">
  518. <div class="frame"></div>
  519. </div>
  520. <div class="ring">
  521. <div class="frame"></div>
  522. </div>
  523. <div class="ring">
  524. <div class="frame"></div>
  525. </div>
  526. <div class="ring">
  527. <div class="frame"></div>
  528. </div>
  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>
  545. </div>
  546. </div>
  547. <!-- Pre-loader end -->
  549. <div id="pcoded" class="pcoded">
  550. <div class="pcoded-container">
  551. <!-- Menu header start -->
  552. <nav th:replace="~{fragments/nav-user :: nav}"></nav>
  554. <!-- Menu header end -->
  555. <div class="pcoded-main-container">
  556. <nav th:replace="~{fragments/nav-usermenu :: nav}"></nav>
  557. <div class="pcoded-wrapper">
  558. <div class="pcoded-content">
  559. <div class="pcoded-inner-content">
  561. <!-- Main-body start -->
  562. <div class="main-body" style="background-color: white">
  563. <div class="page-wrapper" style="padding: 0;">
  564. <!-- Page-header start -->
  565. <div class="page-header m-t-50">
  567. </div>
  568. <div id="futureEventsContainer" class="page-body" style="display: none;"></div>
  569. <div class="card">
  570. <div class="card-header">
  571. <h5>Hall Booking Details</h5>
  572. <button type="button" class="btn btn-primary btn-square-md"
  573. th:if="${userBookingspast.size() > 0}"
  574. th:onclick="'transactionHistory(' + ${userBookingspast[0].users_user_id} + ')'">
  575. Transaction History
  576. </button>
  577. </div>
  579. <div class="card-block">
  580. <div class="table-responsive">
  581. <table
  582. class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
  583. id="detailstable" style="width: 100%">
  584. <thead class="thead-light">
  585. <tr>
  586. <th class="text-center no-sort" width="10%">S.No</th>
  587. <th>Booking Id</th>
  588. <th>Booking date</th>
  589. <th>Hall Name</th>
  590. <th>Starting Date</th>
  591. <th>Ending Date</th>
  592. <th>Starting Period</th>
  593. <th>Ending Period</th>
  594. <th>Reason for booking</th>
  595. <th>Booking Status</th>
  596. <th>Payment Status</th>
  597. <th>Event Status</th>
  598. <th class="text-center no-sort" width="10%">Action</th>
  599. <th>View</th>
  600. </tr>
  601. </thead>
  602. <tbody>
  603. <tr th:each="booking, i : ${userBookingspast}"
  604. class="${userBookingspast}">
  605. <td th:text="${i.count}"></td>
  606. <td th:text="${booking.booking_id}"></td>
  607. <td th:text="${booking.booking_date}"></td>
  608. <td th:text="${booking.hall_name}"></td>
  609. <td th:text="${booking.start_date}"></td>
  610. <td th:text="${booking.end_date}"></td>
  611. <td
  612. th:text="${booking.starting_slot == 1 ? 'morning' : (booking.starting_slot == 2 ? 'evening' : '')}">
  613. </td>
  614. <td
  615. th:text="${booking.ending_slot == 1 ? 'morning' : (booking.ending_slot == 2 ? 'evening' : '')}">
  616. </td>
  617. <td th:text="${booking.reason}"></td>
  618. <td
  619. th:text="${#strings.replace(booking.booking_status, '_', ' ')}">
  620. </td>
  621. <td
  622. th:text="${booking.payment_status != null ? booking.payment_status : 'NA'}">
  623. </td>
  624. <td>
  625. <span th:if="${booking.booking_status == 'APPROVED'}">
  626. <span th:switch="${booking.event_category}">
  627. <span th:case="'Current'">Current Event</span>
  628. <span th:case="'Past'">Completed Event</span>
  629. <span th:case="'Future'">Upcoming Event</span>
  630. <span th:case="'Reschedule'">Upcoming
  631. Event</span>
  632. <span th:case="'noaction'">Govt Event</span>
  633. </span>
  634. </span>
  635. <span th:if="${booking.booking_status == 'COMPLETED'}">
  636. <span>Refund Completed Event</span>
  637. </span>
  638. <span th:if="${booking.booking_status == 'CANCELED'}">
  639. <span>User Canceled Event</span>
  640. </span>
  641. <span th:if="${booking.booking_status == 'REJECTED'}">
  642. <span>GCC Rejected Event</span>
  643. </span>
  644. <span
  645. th:if="${booking.booking_status == 'GCC_BLOCKED'}">
  646. <span>GCC Blocked Event</span>
  647. </span>
  648. <span
  649. th:if="${booking.booking_status == 'WAITING_FOR_NOC'}">
  650. <span>Waiting For NOC Document</span>
  651. </span>
  652. <span
  653. th:if="${booking.booking_status == 'WAITING_FOR_NOC_APPROVAL'}">
  654. <span>Waiting For Admin Approval</span>
  655. </span>
  656. </td>
  657. <td th:switch="${booking.event_category}">
  659. <p th:case="'Future'">
  660. <a class="view-button"
  661. th:if="${booking.booking_status == 'APPROVED'}">
  662. <span class="badge bg-danger"
  663. style="cursor: pointer;"
  664. th:onclick="cancelBooking([[${booking.booking_id}]], [[${booking.mobile_no}]], [[${booking.booking_type}]])">Cancel
  665. Booking</span>
  666. </a>
  667. </p>
  668. <p th:case="'waitingfornoc'">
  669. <a class="view-button"
  670. th:if="${booking.booking_status == 'WAITING_FOR_NOC'}">
  671. <span class="badge bg-danger"
  672. style="cursor: pointer;"
  673. data-bs-toggle="modal"
  674. data-bs-target="#uploadNocModal"
  675. th:attr="data-booking-id=${booking.booking_id}">Upload
  676. NOC</span>
  677. </a>
  679. <a class="view-button"
  680. th:if="${booking.booking_status == 'WAITING_FOR_NOC'}">
  681. <span class="badge bg-danger"
  682. style="cursor: pointer;"
  683. th:onclick="cancelBooking([[${booking.booking_id}]], [[${booking.mobile_no}]], [[${booking.booking_type}]])">Cancel
  684. Booking</span>
  685. </a>
  687. <!--<a class="reschedule-button"
  688. th:if="${booking.booking_status == 'WAITING_FOR_NOC' and booking.schedule_count < 1}">
  689. &lt;!&ndash;th:if="${booking.booking_status == 'WAITING_FOR_NOC'}">&ndash;&gt;
  690. <span class="badge bg-danger"
  691. style="cursor: pointer;"
  692. th:onclick="openRescheduleModal([[${booking.booking_id}]], [[${booking.start_date}]], [[${booking.end_date}]],[[${booking.no_of_days}]],
  693. [[${booking.hall_details_hall_id}]],[[${booking.starting_slot}]],[[${booking.ending_slot}]],[[${booking.reason}]])">Reschedule
  694. Booking</span>
  695. </a>-->
  696. </p>
  698. <p th:case="'waitingfornocapproval'">
  699. <a class="view-button"
  700. th:if="${booking.booking_status == 'WAITING_FOR_NOC_APPROVAL'}">
  701. <span class="badge bg-danger"
  702. style="cursor: pointer;"
  703. th:onclick="cancelBooking([[${booking.booking_id}]], [[${booking.mobile_no}]], [[${booking.booking_type}]])">Cancel
  704. Booking</span>
  705. </a>
  706. </p>
  707. <!--<p th:case="'noaction'">
  708. <a class="view-button">
  709. <span>&#45;&#45;No Action&#45;&#45;</span>
  710. </a>
  711. </p>-->
  713. <p th:case="'noaction'">
  714. <a class="view-button">
  715. <a class="view-button"
  716. th:if="${booking.booking_status == 'APPROVED'}">
  717. <span class="badge bg-danger"
  718. style="cursor: pointer;"
  719. th:onclick="cancelBooking([[${booking.booking_id}]], [[${booking.mobile_no}]], [[${booking.booking_type}]])">Cancel
  720. Booking</span>
  721. </a>
  722. </a>
  723. </p>
  724. <p th:case="'noaction'">
  725. <a class="view-button">
  726. <span>--No Action--</span>
  727. </a>
  728. </p>
  729. <p th:case="'Reschedule'">
  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 class="reschedule-button"
  738. th:if="${booking.booking_status == 'APPROVED'}">
  739. <span class="badge bg-danger"
  740. style="cursor: pointer;"
  741. th:onclick="openRescheduleModal([[${booking.booking_id}]], [[${booking.start_date}]], [[${booking.end_date}]],[[${booking.no_of_days}]],
  742. [[${booking.hall_details_hall_id}]],[[${booking.starting_slot}]],[[${booking.ending_slot}]],[[${booking.reason}]])">Reschedule
  743. Booking</span>
  744. </a>
  745. <a class="reschedule-button"
  746. th:if="${booking.booking_status == 'WAITING_FOR_NOC'}">
  747. <span class="badge bg-danger"
  748. style="cursor: pointer;"
  749. th:onclick="openRescheduleModal([[${booking.booking_id}]], [[${booking.start_date}]], [[${booking.end_date}]],[[${booking.no_of_days}]],
  750. [[${booking.hall_details_hall_id}]],[[${booking.starting_slot}]],[[${booking.ending_slot}]],[[${booking.reason}]])">Reschedule
  751. Booking</span>
  752. </a>
  754. </p>
  756. </td>
  757. <td>
  758. <a class="view-button">
  759. <span class="badge bg-primary"
  760. style="cursor: pointer;"
  761. th:onclick="showBookingDetails([[${booking.booking_id}]])">View</span>
  762. </a>
  763. <!--<a class="view-button">
  764. <span class="badge bg-primary"
  765. style="cursor: pointer;"
  766. th:onclick="trackBooking([[${booking.booking_id}]])">Track</span>
  767. </a>-->
  768. </td>
  769. </tr>
  770. </tbody>
  771. </table>
  772. </div>
  773. </div>
  775. </div>
  777. <input type="hidden" id="serverDate" th:value=${serverDate}>
  778. <div class="modal fade backdrop" id="showBookingDetails" data-backdrop="static"
  779. tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel"
  780. aria-hidden="true">
  781. <div class="modal-dialog modal-lg" role="document">
  782. <div class="modal-content" id="printableContent">
  784. <form id="regform" onsubmit="return rejectsubmit();">
  785. <div
  786. class="block block-rounded block-themed block-transparent mb-0">
  788. <div class="block-header bg-primary-dark">
  789. <h3 class="block-title" id="2mtitle">Booking
  790. Information</h3>
  791. <div class="block-options">
  792. <button type="button" class="btn-block-option"
  793. data-bs-dismiss="modal" aria-label="Close">
  794. <i class="fa fa-fw fa-times"></i>
  795. </button>
  796. </div>
  797. </div>
  799. <div class="block-content row"
  800. style="margin-right:0px;margin:0;padding:0;">
  801. <div class="col-md-12 col-lg-12 col-sm-12">
  802. <div class="card-body">
  803. <table>
  804. <tr>
  805. <th colspan="10"
  806. style="background-color: lightgrey;">
  807. User Details
  808. </th>
  809. </tr>
  810. <tr>
  811. <th
  812. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  813. User Name:
  814. </th>
  815. <td class="fw-semibold"
  816. style="padding: 0.45rem 0.45rem;"
  817. id="td_userName"></td>
  818. <th
  819. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  820. Mobile Number:
  821. </th>
  822. <td class="fw-semibold"
  823. style="padding: 0.45rem 0.45rem;"
  824. id="td_mobileNumber"></td>
  826. <th
  827. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  828. User Type:
  829. </th>
  830. <td class="fw-semibold"
  831. style="padding: 0.45rem 0.45rem;"
  832. id="td_usertype"></td>
  834. </tr>
  835. <tr>
  836. <th
  837. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  838. User Address:
  839. </th>
  840. <td colspan="5" class="fw-semibold"
  841. style="padding: 0.45rem 0.45rem;text-wrap: pretty;"
  842. id="td_useraddress"></td>
  844. </tr>
  845. <input type="hidden"
  846. class="form-control text-center"
  847. name="bookingid" id="bookingid" disabled/>
  848. <tr>
  849. <th colspan="10"
  850. style="background-color: lightgrey;">
  851. Hall Details
  852. </th>
  853. </tr>
  855. <tr>
  856. <th
  857. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  858. Hall Name:
  859. </th>
  860. <td colspan="10" class="fw-semibold"
  861. style="padding: 0.45rem 0.45rem;text-wrap:pretty;"
  862. id="td_hallName"></td>
  864. </tr>
  865. <th
  866. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  867. Hall Address:
  868. </th>
  869. <td colspan="10" class="fw-semibold"
  870. style="padding: 0.45rem 0.45rem;text-wrap: pretty;"
  871. id="td_halladdress"></td>
  873. </tr>
  874. <tr>
  875. <th
  876. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  877. Caretaker Name:
  878. </th>
  879. <td colspan="2" class="fw-semibold"
  880. style="padding: 0.45rem 0.45rem;"
  881. id="td_caretakername"></td>
  882. <th
  883. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  884. Caretaker Mobile Number:
  885. </th>
  886. <td colspan="2" class="fw-semibold"
  887. style="padding: 0.45rem 0.45rem;"
  888. id="td_caretakermobileNumber"></td>
  890. </tr>
  891. <tr>
  892. <th colspan="10"
  893. style="background-color: lightgrey;">
  894. Booking
  895. Details (Booking Id:-<span
  896. id="booking_id"
  897. style="color:blue"></span>)
  898. </th>
  899. </tr>
  900. <tr>
  901. <th
  902. style="padding: 0.45rem 0.45rem;font-weight: normal">
  903. Booking Date:
  904. </th>
  905. <td colspan="2" class="fw-semibold"
  906. style="padding: 0.45rem 0.45rem;"
  907. id="td_bookingDate"></td>
  908. <th
  909. style="padding: 0.45rem 0.45rem;font-weight: normal">
  910. Deposit Amount (in Rs):
  911. </th>
  912. <td colspan="2"
  913. class="fw-semibold amount-cell"
  914. style="padding: 0.45rem 0.45rem;"
  915. id="td_depositeAmount"></td>
  916. </tr>
  917. <tr>
  918. <th
  919. style="padding: 0.45rem 0.45rem;font-weight: normal">
  920. Start Date:
  921. </th>
  922. <td colspan="2" class="fw-semibold"
  923. style="padding: 0.45rem 0.45rem;"
  924. id="td_startDate"></td>
  925. <th
  926. style="padding: 0.45rem 0.45rem;font-weight: normal">
  927. Hall Amount (in Rs):
  928. </th>
  929. <td colspan="2"
  930. class="fw-semibold amount-cell"
  931. style="padding: 0.45rem 0.45rem;"
  932. id="td_hallAmount"></td>
  933. </tr>
  934. <tr>
  935. <th
  936. style="padding: 0.45rem 0.45rem;font-weight: normal">
  937. END Date:
  938. </th>
  939. <td colspan="2" class="fw-semibold"
  940. style="padding: 0.45rem 0.45rem;"
  941. id="td_endDate"></td>
  942. <th
  943. style="padding: 0.45rem 0.45rem;font-weight: normal">
  944. GST @18% (in Rs):
  945. </th>
  946. <td colspan="2"
  947. class="fw-semibold amount-cell"
  948. style="padding: 0.45rem 0.45rem;"
  949. id="td_gst"></td>
  950. </tr>
  951. <tr>
  952. <th
  953. style="padding: 0.45rem 0.45rem;font-weight: normal">
  954. Starting Slot:
  955. </th>
  956. <td colspan="2" class="fw-semibold"
  957. style="padding: 0.45rem 0.45rem;"
  958. id="td_startingSlot"></td>
  959. <th
  960. style="padding: 0.45rem 0.45rem;font-weight: normal">
  961. Total Amount (in Rs):
  962. </th>
  963. <td colspan="2"
  964. class="fw-semibold amount-cell"
  965. style="padding: 0.45rem 0.45rem;"
  966. id="td_totalAmount"></td>
  967. </tr>
  968. <tr>
  969. <th
  970. style="padding: 0.45rem 0.45rem;font-weight: normal">
  971. Ending Slot:
  972. </th>
  973. <td colspan="2" class="fw-semibold"
  974. style="padding: 0.45rem 0.45rem;"
  975. id="td_endingSlot"></td>
  976. <!--<th style="display:none;padding: 0.45rem 0.45rem;border:none"
  977. id="rejectionreasondiv">Rejection
  978. Reason:</th>
  979. <td class="fw-semibold"
  980. style="padding: 0.45rem 0.45rem;"
  981. id="reasonforrejection"></td>-->
  983. <th
  984. style="padding: 0.45rem 0.45rem;border:none">
  985. Booking Status:
  986. </th>
  987. <td colspan="2" class="fw-semibold"
  988. style="padding: 0.45rem 0.45rem;text-wrap: pretty;"
  989. id="bookingstatus_td"></td>
  990. </tr>
  991. <tr>
  992. <th style="display:none;padding: 0.45rem 0.45rem;border:none"
  993. id="rejectionreasondiv">Rejection
  994. Reason:
  995. </th>
  996. <td class="fw-semibold"
  997. style="padding: 0.45rem 0.45rem;text-wrap: pretty;"
  998. id="reasonforrejection"></td>
  999. </tr>
  1000. </table>
  1001. </div>
  1002. </div>
  1003. <div class="row col-md-12 col-lg-12 col-sm-12"
  1004. style="margin-left:6px;margin-top:-21px">
  1005. <div class="documents" id="documents"></div>
  1006. </div>
  1007. <div class="col-md-12 col-lg-12 col-sm-12 mb-2"
  1008. id="paymentsdetails"
  1009. style="display:none; margin-top: -26px;">
  1010. <div class="card-body">
  1011. <table>
  1012. <tr>
  1013. <th colspan="10"
  1014. style="background-color: lightgrey;">
  1015. Booking Payment Details
  1016. </th>
  1017. </tr>
  1018. <tr>
  1019. <th
  1020. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  1021. Transaction ID:
  1022. </th>
  1023. <td colspan="10" class="fw-semibold"
  1024. style="padding: 0.45rem 0.45rem;"
  1025. id="td_transactionId"></td>
  1027. </tr>
  1028. <th
  1029. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  1030. Amount Received (in Rs):
  1031. </th>
  1032. <td colspan="10" class="fw-semibold"
  1033. style="padding: 0.45rem 0.45rem;"
  1034. id="td_payamountReceived"></td>
  1036. </tr>
  1037. <tr>
  1038. <th
  1039. style="padding: 0.45rem 0.45rem;font-weight: normal;">
  1040. Transaction Status:
  1041. </th>
  1042. <td class="fw-semibold"
  1043. style="padding: 0.45rem 0.45rem;"
  1044. id="td_paymentStatus"></td>
  1045. </tr>
  1046. </table>
  1047. </div>
  1048. </div>
  1049. <div class="row col-md-12 col-lg-12 col-sm-12"
  1050. id="ebdetails"
  1051. style="display:none;margin-left: 0px;margin-top: -49px">
  1052. <div class="card-body">
  1053. <table>
  1054. <tr>
  1055. <th colspan="4"
  1056. style="background-color: lightgrey;">EB
  1057. Details
  1058. </th>
  1059. </tr>
  1060. <tr>
  1061. <th
  1062. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1063. Consumer Number:
  1064. </th>
  1065. <td class="fw-semibold"
  1066. style="padding: 0.45rem 0.45rem;"
  1067. id="td_EBNumber"></td>
  1068. <th
  1069. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1070. EB Amount Per Unit (in Rs):
  1071. </th>
  1072. <td class="fw-semibold"
  1073. style="padding: 0.45rem 0.45rem;"
  1074. id="td_ebamountperunit"></td>
  1075. </tr>
  1076. <tr>
  1077. <th
  1078. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1079. Start Reading:
  1080. </th>
  1081. <td class="fw-semibold"
  1082. style="padding: 0.45rem 0.45rem;"
  1083. id="td_startingReading"></td>
  1084. <th
  1085. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1086. Unit Consumed:
  1087. </th>
  1088. <td class="fw-semibold"
  1089. style="padding: 0.45rem 0.45rem;"
  1090. id="td_usedunit"></td>
  1091. </tr>
  1092. <tr>
  1093. <th
  1094. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1095. END Reading:
  1096. </th>
  1097. <td class="fw-semibold"
  1098. style="padding: 0.45rem 0.45rem;"
  1099. id="td_endingReading"></td>
  1100. <th
  1101. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1102. EB Amount (in Rs):
  1103. </th>
  1104. <td class="fw-semibold"
  1105. style="padding: 0.45rem 0.45rem;"
  1106. id="td_electricityamount"></td>
  1107. </tr>
  1108. </tbody>
  1109. </table>
  1110. </div>
  1111. </div>
  1112. <div class="row col-md-12 col-lg-12 col-sm-12"
  1113. id="damagelist" style="disaply:none">
  1114. <div id="damageDetails"></div>
  1115. </div>
  1117. <div class="col-md-12 col-lg-12 col-sm-12"
  1118. id="refunddetails" style="margin-top:-41px">
  1119. <div class="card-body">
  1120. <table>
  1121. <tr>
  1122. <th colspan="2"
  1123. style="background-color: lightgrey;">
  1124. Amount to be Refunded (in Rs)
  1125. </th>
  1126. </tr>
  1127. <tr>
  1128. <th
  1129. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1130. Deposit Amount:
  1131. </th>
  1132. <td class="fw-semibold amount-cell"
  1133. style="padding: 0.45rem 0.45rem;"
  1134. id="td_depositeamountforrefund">0
  1135. </td>
  1136. </tr>
  1137. <tr>
  1138. <th
  1139. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1140. EB Amount:
  1141. </th>
  1142. <td class="fw-semibold amount-cell"
  1143. style="padding: 0.45rem 0.45rem;"
  1144. id="td_ebAmount"></td>
  1145. </tr>
  1146. <tr>
  1147. <th
  1148. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1149. Damage Amount:
  1150. </th>
  1151. <td class="fw-semibold amount-cell"
  1152. style="padding: 0.45rem 0.45rem;"
  1153. id="td_damage"></td>
  1154. </tr>
  1155. <tr id="pendingcolumn">
  1156. <th id="th_settel_label"
  1157. style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
  1158. Collection Pending Amount:
  1159. </th>
  1160. <td class="fw-semibold amount-cell"
  1161. style="padding: 0.45rem 0.45rem; color: green;"
  1162. id="td_pending_amt">0
  1163. </td>
  1164. </tr>
  1165. <tr id="collectionstatuscolumn">
  1166. <th id="label"
  1167. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1168. Collection Pending Status
  1169. :
  1170. </th>
  1171. <td class="fw-semibold amount-cell"
  1172. style="padding: 0.45rem 0.45rem; color: green;"
  1173. id="td_collection_status">
  1174. </td>
  1175. </tr>
  1176. <tr>
  1177. <th
  1178. style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
  1179. Actual refundable Amount:
  1180. </th>
  1181. <td class="fw-semibold amount-cell"
  1182. style="padding: 0.45rem 0.45rem; color: green;"
  1183. id="td_settel_amt">0
  1184. </td>
  1185. </tr>
  1186. </table>
  1187. </div>
  1188. </div>
  1189. <div class="row col-md-12 col-lg-12 col-sm-12"
  1190. id="refundamountDetails"
  1191. style="display:none;margin-left: 0px;margin-top: -49px">
  1192. <div class="card-body">
  1193. <table>
  1194. <tr>
  1195. <th colspan="4"
  1196. style="background-color: lightgrey;">
  1197. Refund Details
  1198. </th>
  1199. </tr>
  1200. <tr>
  1201. <th
  1202. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1203. Booking Status:
  1204. </th>
  1205. <td class="fw-semibold"
  1206. style="padding: 0.45rem 0.45rem;"
  1207. id="td_bookingStatus"></td>
  1208. <th
  1209. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1210. Refund Status:
  1211. </th>
  1212. <td class="fw-semibold"
  1213. style="padding: 0.45rem 0.45rem;"
  1214. id="td_refundStatus"></td>
  1215. </tr>
  1216. <tr>
  1217. <th
  1218. style="padding: 0.45rem 0.45rem;font-weight: normal;text-wrap: pretty;">
  1219. Refund amount:
  1220. </th>
  1221. <td class="fw-semibold" colspan="5"
  1222. style="padding: 0.45rem 0.45rem;"
  1223. id="td_refundamount"></td>
  1224. </tr>
  1225. </tbody>
  1226. </table>
  1227. </div>
  1228. </div>
  1229. <div id="refundMessage" style="display: none;">
  1230. <h1 id="refundText"
  1231. style="font-size: 17px;margin-left: 20px;color: darkgreen;">
  1232. </h1>
  1233. </div>
  1234. <div id="rejectrefundMessage" style="display: none;">
  1235. <h1 id="rejectrefundText"
  1236. style="font-size: 17px;margin-left: 20px;color: darkgreen;">
  1237. </h1>
  1238. </div>
  1239. <div id="blockedrefundMessage" style="display: none;">
  1240. <h1 id="blockedrefundText"
  1241. style="font-size: 17px;margin-left: 20px;color: darkgreen;">
  1242. </h1>
  1243. </div>
  1244. <!--Newly added for Reschedule Details-->
  1245. <!--<div class="row col-md-12 col-lg-12 col-sm-12"
  1246. id="rescheduleDetails"
  1247. style="display:none;margin-left: 0px;margin-top: -49px">
  1248. <div class="card-body">
  1249. <table>
  1250. <tr>
  1251. <th colspan="4"
  1252. style="background-color: lightgrey;">
  1253. Reschedule Details
  1254. </th>
  1255. </tr>
  1256. <tr>
  1257. <th
  1258. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1259. Event Start Date:
  1260. </th>
  1261. <td class="fw-semibold"
  1262. style="padding: 0.45rem 0.45rem;"
  1263. id="td_res_start_date"></td>
  1264. <th
  1265. style="padding: 0.45rem 0.45rem;font-weight: normal">
  1266. Event End Date:
  1267. </th>
  1268. <td class="fw-semibold"
  1269. style="padding: 0.45rem 0.45rem;"
  1270. id="td_res_end_date"></td>
  1271. </tr>
  1272. <tr>
  1273. <th
  1274. style="padding: 0.45rem 0.45rem;font-weight: normal;text-wrap: pretty;">
  1275. Rescheduled Date:</th>
  1276. <td class="fw-semibold" colspan="5"
  1277. style="padding: 0.45rem 0.45rem;"
  1278. id="td_res_date"></td>
  1279. </tr>
  1280. </tbody>
  1281. </table>
  1282. </div>
  1283. </div>-->
  1284. </div>
  1286. </div>
  1287. <div class="block-content block-content-full text-end bg-body"
  1288. id="mbutton">
  1289. <button class="btn btn-success"
  1290. onclick="downloadAcknowledgment(event)"
  1291. style="background: #FB6340;">View
  1292. Acknowledgement
  1293. </button>
  1294. <button type="button"
  1295. style="background-color: rgb(21,69,93);color: white;"
  1296. class="btn btn-sm btn-alt-secondary"
  1297. data-bs-dismiss="modal">Close
  1298. </button>
  1299. </div>
  1300. </form>
  1301. </div>
  1302. </div>
  1303. </div>
  1304. </div>
  1305. <br>
  1306. </div>
  1307. </div>
  1308. <div class="modal fade" id="fileModal" tabindex="-1" role="dialog"
  1309. aria-labelledby="fileModalLabel" aria-hidden="true">
  1310. <div class="modal-dialog modal-lg" role="document">
  1311. <div class="modal-content">
  1312. <div class="modal-header">
  1313. <h5 class="modal-title" id="fileModalLabel">File Preview</h5>
  1314. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
  1315. style="border: 1px solid black; padding: 5px;
  1316. display: inline-flex; align-items: center; justify-content: center;
  1317. background-color: transparent; color: black; font-size: 20px;">
  1318. <span aria-hidden="true">&times;</span>
  1319. </button>
  1320. </div>
  1321. <div class="modal-body">
  1322. <embed id="filePreview" src="" width="100%" height="600px">
  1323. </div>
  1324. <div class="modal-footer">
  1325. <button type="button" class="btn btn-secondary"
  1326. data-bs-dismiss="modal">Close
  1327. </button>
  1328. </div>
  1329. </div>
  1330. </div>
  1331. </div>
  1332. </div>
  1333. <div class="modal fade" id="bookingRescheduleModal" tabindex="-1"
  1334. aria-labelledby="bookingModalLabel" aria-hidden="true">
  1335. <div class="modal-dialog modal-dialog-centered modal-lg">
  1336. <div class="modal-content">
  1337. <!-- Modal Header -->
  1338. <div class="modal-header" style="color:black">
  1339. <h5 class="modal-title" id="bookingModalLabel" style="color:black">Booking
  1340. Reschedule</h5>
  1341. <br>
  1342. <br>
  1343. <div style="margin-bottom: -59px; margin-left: -185px;">
  1344. <!-- Adding margin-top for separation -->
  1345. <p style="font-size: 14px; color: #6c757d;">Note: Only the Start Date can be
  1346. changed.</p>
  1347. </div>
  1348. <button type="button" class="btn-close" data-bs-dismiss="modal"
  1349. aria-label="Close"></button>
  1350. </div>
  1352. <!-- Modal Body -->
  1353. <div class="modal-body">
  1354. <div class="container-fluid">
  1355. <div class="row">
  1356. <!-- Datepicker and Availability Buttons Column -->
  1357. <div id="datepicker-container" class="fixedcontainer"></div>
  1359. <!-- Start Date, End Date, Number of Days Inputs Column -->
  1360. <div class="col">
  1361. <input type="hidden" class="form-control" id="bookingId"
  1362. name="bookingId" required>
  1363. <label for="startDateInput" class="form-label">Start Date:</label>
  1364. <input type="text" class="form-control" id="startDateInput"
  1365. name="startDateInput" required readonly>
  1366. <input type="hidden" class="form-control" id="startDatetext"
  1367. name="startDatetext" required>
  1368. </div>
  1369. <div class="col">
  1370. <label for="endDateInput" class="form-label">End Date:</label>
  1371. <input type="date" class="form-control" id="endDateInput"
  1372. name="endDateInput" readonly>
  1373. </div>
  1374. <div class="col">
  1375. <label for="noOfDaysInput" class="form-label">Number of Days:</label>
  1376. <input type="number" class="form-control" id="noOfDaysInput"
  1377. name="noOfDaysInput" readonly>
  1378. </div>
  1379. </div>
  1380. <div class="row">
  1381. <div class="col">
  1382. <input type="hidden" id="daysDiff">
  1383. <label for="startingSlot" class="form-label">Starting Slot:</label>
  1384. <input type="text" class="form-control" id="startingSlotText"
  1385. name="startingSlot" readonly>
  1386. <input type="hidden" class="form-control" id="startingSlot"
  1387. name="startingSlot" required>
  1388. </div>
  1389. <div class="col">
  1390. <label for="endingSlot" class="form-label">Ending Slot:</label>
  1391. <input type="text" class="form-control" id="endingSlotText"
  1392. name="endDateInput" readonly>
  1393. <input type="hidden" class="form-control" id="endingSlot"
  1394. name="endDateInput" readonly>
  1395. </div>
  1396. </div>
  1397. <div class="row" style="margin-top: 39px;">
  1398. <div class="col col-lg-2 col-sm-2 col-md-2">
  1399. <button type="button" class="btn btn-primary btn-square-md"
  1400. style="background-color:#008000;"></button>
  1401. <p style="margin-left: 14px;">Day<br>(Available)</p>
  1402. </div>
  1403. <div class="col col-lg-2 col-sm-2 col-md-2">
  1404. <button type="button" class="btn btn-primary btn-square-md"
  1405. style="background-color: #ac2bac;"></button>
  1406. <p style="margin-left: 14px;">Morning<br>(Available)</p>
  1407. </div>
  1408. <div class="col col-lg-2 col-sm-2 col-md-2">
  1409. <button type="button" class="btn btn-primary btn-square-md"
  1410. style="background-color:#FFEA00;"></button>
  1411. <p style="margin-left: 14px;">Evening<br>(Available)</p>
  1412. </div>
  1413. <div class="col col-lg-2 col-sm-2 col-md-2">
  1414. <button type="button" class="btn btn-primary btn-square-md"
  1415. style="background-color: red;"></button>
  1416. <p style="margin-left: 14px;">Not Available</p>
  1417. </div>
  1418. <div class="col col-lg-2 col-sm-2 col-md-2">
  1419. <button type="button" class="btn btn-primary btn-square-md"
  1420. style="background-color: blue;"></button>
  1421. <p style="margin-left: 14px;">GCC Blocked</p>
  1422. </div>
  1423. <!--<div class="col col-lg-2 col-sm-2 col-md-2">
  1424. <button type="button" class="btn btn-primary btn-square-md"
  1425. style="background-color: lightpink;"></button>
  1426. <p style="margin-left: 14px;">Temporary Blocked</p>
  1427. </div>-->
  1428. </div>
  1429. </div>
  1430. </div>
  1431. <!-- Modal Footer -->
  1432. <div class="modal-footer">
  1433. <button type="button" class="btn btn-secondary"
  1434. data-bs-dismiss="modal">Close
  1435. </button>
  1436. <button type="button" class="btn btn-primary" onclick="Reschedule()">Save
  1437. Changes
  1438. </button>
  1439. </div>
  1440. </div>
  1441. </div>
  1442. </div>
  1444. <!-- Tracking Log Modal -->
  1445. <!-- Tracking Modal -->
  1446. <div class="modal fade" id="trackingModal" tabindex="-1" aria-labelledby="trackingModalLabel"
  1447. aria-hidden="true">
  1448. <div class="modal-dialog modal-lg">
  1449. <div class="modal-content">
  1450. <div class="modal-header">
  1451. <h4 class="modal-title">Booking Tracking</h4>
  1452. <button type="button" class="btn-close" data-bs-dismiss="modal"
  1453. aria-label="Close"></button>
  1454. </div>
  1455. <div class="modal-body">
  1456. <div class="tracking-container">
  1457. <ul id="trackingList" class="tracking-steps list-unstyled">
  1458. <!-- Steps will be dynamically appended here -->
  1459. </ul>
  1460. </div>
  1461. </div>
  1462. </div>
  1463. </div>
  1464. </div>
  1466. <!-- Modal -->
  1467. <div class="modal fade" id="uploadNocModal" tabindex="-1" aria-labelledby="uploadNocModalLabel"
  1468. aria-hidden="true">
  1469. <div class="modal-dialog">
  1470. <div class="modal-content">
  1471. <div class="modal-header">
  1472. <h5 class="modal-title" id="uploadNocModalLabel">Upload NOC</h5>
  1473. <button type="button" class="btn-close" data-bs-dismiss="modal"
  1474. aria-label="Close"></button>
  1475. </div>
  1476. <div class="modal-body">
  1477. <div class="mb-3">
  1478. <label for="nocFile" class="form-label">Select NOC File</label>
  1479. <input type="file" class="form-control nocfile" id="nocFile" name="nocFile"
  1480. required>
  1481. <input type="hidden" id="bookingssId" name="bookingssId">
  1482. </div>
  1483. </div>
  1484. <div class="modal-footer">
  1485. <button type="button" class="btn btn-secondary"
  1486. data-bs-dismiss="modal">Close
  1487. </button>
  1488. <button type="button" class="btn btn-primary" id="submitNocButton">Submit</button>
  1489. </div>
  1490. </div>
  1491. </div>
  1492. </div>
  1494. <!-- Modal -->
  1495. <div class="modal fade" id="transactionHistoryModal" tabindex="-1"
  1496. aria-labelledby="transactionHistoryModalLabel" aria-hidden="true">
  1497. <div class="modal-dialog modal-lg" id="transactionmodel"> <!-- modal-lg makes it larger -->
  1498. <div class="modal-content">
  1499. <div class="modal-header">
  1500. <h5 class="modal-title" id="transactionHistoryModalLabel">Transaction History</h5>
  1501. <button type="button" class="btn-close" data-bs-dismiss="modal"
  1502. aria-label="Close"></button>
  1503. </div>
  1504. <div class="modal-body">
  1505. <!-- Scrollable Table -->
  1506. <div class="table-responsive"> <!-- Make the table scrollable if too large -->
  1507. <table class="table table-bordered" id="transactionTable">
  1508. <thead>
  1509. <tr>
  1510. <th>S.NO</th>
  1511. <th>Booking ID</th>
  1512. <th>Amount</th>
  1513. <th>Date</th>
  1514. <th>Transaction ID</th>
  1515. <th>Status</th>
  1516. </tr>
  1517. </thead>
  1518. <tbody>
  1519. <!-- Data will be populated dynamically here -->
  1520. </tbody>
  1521. </table>
  1522. </div>
  1523. <div class="table-responsive" id="refunddetails" style="display: none;">
  1524. <h2>Refund Details</h2>
  1525. <table class="table table-bordered" id="refunddetailsTable">
  1526. <thead>
  1527. <tr>
  1528. <th>S.NO</th>
  1529. <th>Booking ID</th>
  1530. <th>Amount</th>
  1531. <th>Date</th>
  1532. <th>Transaction ID</th>
  1533. <th>Refund Amount</th>
  1534. </tr>
  1535. </thead>
  1536. <tbody>
  1537. <!-- Data will be populated dynamically here -->
  1538. </tbody>
  1539. </table>
  1540. </div>
  1542. </div>
  1543. <div class="modal-footer">
  1544. <button type="button" class="btn btn-secondary"
  1545. data-bs-dismiss="modal">Close
  1546. </button>
  1547. </div>
  1548. </div>
  1549. </div>
  1550. </div>
  1551. <footer th:replace="~{fragments/footer :: footer}"></footer>
  1552. </div>
  1553. </div>
  1554. </div>
  1556. <!--otp form-->
  1557. <div th:replace="~{fragments/loginreg :: div}"></div>
  1558. <!--otp form-->
  1559. <script src="js/html2pdf.bundle.min.js"></script>
  1560. <script th:replace="~{fragments/script :: script}"></script>
  1561. <script th:replace="~{fragments/logRegiOtpScript :: script}"></script>
  1562. <script type="text/javascript" src="https://www.paynimo.com/paynimocheckout/server/lib/checkout.js"></script>
  1563. <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
  1564. <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
  1565. <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
  1566. <script type="text/javascript">
  1567. $(document).ready(function () {
  1568. $('#detailstable').DataTable({
  1569. responsive: true,
  1570. pageLength: 10,
  1571. ordering: true,
  1572. columnDefs: [{
  1573. targets: 'no-sort',
  1574. orderable: false
  1575. }],
  1576. dom: 'Bfrtip',
  1577. buttons: [
  1578. {
  1579. extend: 'excelHtml5',
  1580. text: 'Export to Excel',
  1581. className: 'btn btn-primary'
  1582. }
  1583. ]
  1584. });
  1585. });
  1586. $(document).ready(function () {
  1587. $('#submitNocButton').on('click', function (e) {
  1588. e.preventDefault();
  1590. // Get the form data
  1591. var formData = new FormData();
  1592. var fileInput = $('#nocFile')[0].files[0]; // Get the selected file
  1593. var bookingssId = $('#bookingssId').val(); // Get the bookingId
  1595. // Check if a file is selected
  1596. if (!fileInput) {
  1597. Swal.fire({
  1598. icon: 'warning',
  1599. title: 'No File Selected',
  1600. text: 'Please select a file to upload.',
  1601. });
  1602. return;
  1603. }
  1605. // Append file and bookingId to formData
  1606. formData.append('nocFile', fileInput);
  1607. formData.append('bookingssId', bookingssId);
  1609. // Perform Ajax request
  1610. $.ajax({
  1611. url: '/communityhall/user/api/uploaddocs', // API endpoint
  1612. type: 'POST',
  1613. data: formData,
  1614. contentType: false,
  1615. processData: false,
  1616. success: function (response) {
  1617. // Show success message and refresh the page
  1618. Swal.fire({
  1619. icon: 'success',
  1620. title: 'Success',
  1621. text: 'NOC uploaded successfully!',
  1622. }).then(() => {
  1623. $('#uploadNocModal').modal('hide'); // Close the modal
  1624. location.reload(); // Refresh the page
  1625. });
  1626. },
  1627. error: function (xhr, status, error) {
  1628. // Show error message
  1629. Swal.fire({
  1630. icon: 'error',
  1631. title: 'Upload Failed',
  1632. text: 'Failed to upload NOC: ' + error,
  1633. });
  1634. }
  1635. });
  1636. });
  1638. // Populate bookingId when opening the modal
  1639. $('#uploadNocModal').on('show.bs.modal', function (event) {
  1640. var button = $(event.relatedTarget); // Button that triggered the modal
  1641. var bookingId = button.data('booking-id'); // Extract bookingId from the button
  1642. $('#bookingssId').val(bookingId); // Set the bookingId in the hidden input field
  1643. });
  1644. });
  1647. // Function to track booking
  1648. function trackBooking(bookingId) {
  1649. $.ajax({
  1650. url: '/communityhall/user/api/trackBooking',
  1651. method: 'GET',
  1652. data: {bookingId: bookingId}, // Send booking ID to the server
  1653. success: function (data) {
  1654. // console.log("Received tracking data:", data);
  1656. // Clear the list initially before appending steps
  1657. $('#trackingList').empty();
  1659. if (Array.isArray(data) && data.length > 0) {
  1660. // Show the modal first
  1661. $('#trackingModal').modal('show');
  1663. // Create a Set to track seen statuses
  1664. const seenStatuses = new Set();
  1666. // Append steps one by one
  1667. data.forEach((event) => {
  1668. // Append each step if it hasn't been seen before
  1669. if (!seenStatuses.has(event.status)) {
  1670. seenStatuses.add(event.status); // Add status to Set
  1671. appendStep(event); // Call to append the event step
  1672. }
  1673. });
  1674. } else {
  1675. // Show a message when no tracking events are available
  1676. $('#trackingList').append('<li class="no-events">No tracking events available.</li>');
  1677. }
  1678. },
  1679. error: function (xhr, status, error) {
  1680. console.error("Failed to fetch booking details:", status, error);
  1681. alert('Failed to fetch booking details. Please try again later.');
  1682. }
  1683. });
  1684. }
  1687. function appendStep(event) {
  1688. const formattedDate = moment(event.dateTime).isValid()
  1689. ? moment(event.dateTime).format('MMM DD, YYYY, h:mm A') // Format date using Moment.js
  1690. : 'Invalid date';
  1692. const statusClass = getStatusClass(event.status); // Get CSS class for the status
  1693. const statusIcon = getStatusIcon(event.status); // Get icon for the status
  1695. // Create and append a step element for each event
  1696. const stepElement = `
  1697. <li class="tracking-step ${statusClass}">
  1698. <div class="step-icon">
  1699. <i class="fas ${statusIcon}"></i> <!-- Add the icon -->
  1700. </div>
  1701. <div class="step-content">
  1702. <h5>${event.description || 'No Description Available'}</h5> <!-- Event description -->
  1703. <p class="step-date">${formattedDate}</p> <!-- Formatted date -->
  1704. </div>
  1705. </li>
  1706. `;
  1708. // Append the element to the list
  1709. $('#trackingList').append(stepElement);
  1710. }
  1712. function getStatusClass(status) {
  1713. switch (status) {
  1714. case 'PAYMENT_SUCCESS':
  1715. case 'APPROVED':
  1716. case 'EVENT_COMPLETED':
  1717. case 'COMPLETED':
  1718. return 'completed'; // Returns 'completed' class for these statuses
  1719. case 'SETTLEMENT_RAISING':
  1720. return 'waiting';
  1721. case 'CANCELED':
  1722. return 'cancelled';
  1723. case 'REJECTED':
  1724. return 'rejected';
  1725. case 'GCC_BLOCKED':
  1726. return 'gcc-blocked';
  1727. default:
  1728. return 'pending'; // Default class if status is unknown
  1729. }
  1730. }
  1732. function getStatusIcon(status) {
  1733. switch (status) {
  1734. case 'PAYMENT_SUCCESS':
  1735. return 'fa-check-circle'; // Icon for payment success
  1736. case 'APPROVED':
  1737. return 'fa-thumbs-up';
  1738. case 'EVENT_COMPLETED':
  1739. return 'fa-calendar-check';
  1740. case 'CANCELED':
  1741. return 'fa-ban';
  1742. case 'REJECTED':
  1743. return 'fa-times-circle';
  1744. case 'GCC_BLOCKED':
  1745. return 'fa-lock';
  1746. default:
  1747. return 'fa-clock'; // Default icon for pending steps
  1748. }
  1749. }
  1752. function showFutureEvents() {
  1753. document.getElementById('futureEventsContainer').style.display = 'block';
  1754. }
  1756. function downloadAcknowledgment(event) {
  1757. event.preventDefault();
  1758. var bookingId = document.getElementById("booking_id").innerHTML;
  1760. // Redirect to the acknowledgment URL in the same tab
  1761. window.location.href = '/communityhall/user/acknowledgement?bookingId=' + encodeURIComponent(bookingId);
  1762. }
  1764. function getTimeSlot(slotValue) {
  1765. var timeSlot;
  1766. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  1767. if (trimmedSlotValue === '1') {
  1768. timeSlot = 'Morning';
  1769. } else if (trimmedSlotValue === '2') {
  1770. timeSlot = 'Evening';
  1771. } else {
  1772. timeSlot = 'Unknown';
  1773. }
  1774. return timeSlot;
  1775. }
  1777. function showBookingDetails(bookingId) {
  1778. $.ajax({
  1779. url: '/communityhall/user/api/viewAllBookingDetails',
  1780. method: 'GET',
  1781. data: {bookingId: bookingId},
  1782. success: function (response) {
  1783. document.getElementById("td_userName").innerHTML = response.users.name;
  1784. document.getElementById("td_mobileNumber").innerHTML = response.users.mobileNo;
  1785. document.getElementById("td_usertype").innerHTML = response.users.usertype;
  1786. var userDetails = response.users;
  1787. var userDetailsString =
  1788. userDetails.doorNo + ", " +
  1789. userDetails.street + ", " +
  1790. userDetails.area + ", " +
  1791. userDetails.location + " ,Chennai- " +
  1792. userDetails.pinCode;
  1793. document.getElementById("td_useraddress").innerHTML = userDetailsString;
  1794. document.getElementById("td_hallName").innerHTML = response.hallDetails.hallName;
  1795. var hallDetails = response.hallDetails;
  1796. var hallDetailsString =
  1797. hallDetails.doorNo + ", " +
  1798. hallDetails.street + ", " +
  1799. hallDetails.area + ", " +
  1800. hallDetails.city + "- " +
  1801. hallDetails.pinCode;
  1802. document.getElementById("td_halladdress").innerHTML = hallDetailsString;
  1803. document.getElementById("td_caretakername").innerHTML = response.hallDetails.hallInchargeName;
  1804. document.getElementById("td_caretakermobileNumber").innerHTML = response.hallDetails.hallInchargeMobno;
  1805. document.getElementById("td_bookingDate").innerHTML = response.bookingDate;
  1806. document.getElementById("td_depositeAmount").innerHTML = parseFloat(response.depositAmount).toFixed(2);
  1807. document.getElementById("td_hallAmount").innerHTML = parseFloat(response.hallAmount).toFixed(2);
  1808. // Calculate GST and total amount
  1809. var gstAmount = (parseFloat(response.hallAmount) * (response.hallDetails.gst / 100)).toFixed(2);
  1810. var totalAmount = parseFloat(response.amountReceived).toFixed(2);
  1812. document.getElementById("td_gst").innerHTML = gstAmount;
  1813. document.getElementById("td_totalAmount").innerHTML = totalAmount;
  1815. document.getElementById("td_startDate").innerHTML = response.startDate;
  1816. document.getElementById("td_endDate").innerHTML = response.endDate;
  1817. document.getElementById("booking_id").innerHTML = response.bookingId;
  1820. function getTimeSlot(slotValue) {
  1821. var timeSlot;
  1822. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  1823. if (trimmedSlotValue === '1') {
  1824. timeSlot = 'Morning';
  1825. } else if (trimmedSlotValue === '2') {
  1826. timeSlot = 'Evening';
  1827. } else {
  1828. timeSlot = 'Unknown';
  1829. }
  1830. return timeSlot;
  1831. }
  1833. document.getElementById("td_startingSlot").innerHTML = getTimeSlot(response.startingSlot);
  1834. document.getElementById("td_endingSlot").innerHTML = getTimeSlot(response.endingSlot);
  1835. document.getElementById("bookingstatus_td").innerHTML = response.bookingStatus;
  1837. console.log("before comments user view history...");
  1838. console.log("Comments..."+response.comments);
  1840. if (response.bookingStatus === 'REJECTED' && response.comments) {
  1841. document.getElementById("rejectionreasondiv").style.display = "block";
  1842. const rejectionCell = document.getElementById("reasonforrejection");
  1843. rejectionCell.innerHTML = response.comments;
  1844. } else {
  1845. document.getElementById("rejectionreasondiv").style.display = "none";
  1846. document.getElementById("reasonforrejection").style.display = "none";
  1847. }
  1848. showReasonDocuments(response);
  1850. if (response.payments) {
  1851. document.getElementById("paymentsdetails").style.display = "block";
  1852. document.getElementById("td_transactionId").innerHTML = response.payments.transactionId;
  1853. document.getElementById("td_payamountReceived").innerHTML = response.payments.amountReceived;
  1854. document.getElementById("td_paymentStatus").innerHTML = response.payments.paymentStatus;
  1855. } else {
  1856. document.getElementById("paymentsdetails").style.display = "none";
  1857. }
  1858. if (response.ebDetails) {
  1859. document.getElementById("ebdetails").style.display = "block";
  1860. document.getElementById("td_EBNumber").innerHTML = response.hallDetails.ebNumber;
  1861. document.getElementById("td_startingReading").innerHTML = response.ebDetails.startingReading;
  1862. document.getElementById("td_endingReading").innerHTML = response.ebDetails.endingReading;
  1863. document.getElementById("td_usedunit").innerHTML = response.ebDetails.usedUnit;
  1864. document.getElementById("td_ebamountperunit").innerHTML = parseFloat(response.hallDetails.ebCostPerUnit).toFixed(2);
  1865. document.getElementById("td_electricityamount").innerHTML = parseFloat(response.ebDetails.ebAmount).toFixed(2);
  1867. } else {
  1868. document.getElementById("ebdetails").style.display = "none";
  1869. }
  1870. if (response.damageList && response.damageList.length > 0) {
  1871. document.getElementById("damagelist").style.display = "block";
  1873. } else {
  1874. document.getElementById("damagelist").style.display = "none";
  1875. }
  1876. if (response.settlement) {
  1877. document.getElementById("refunddetails").style.display = "block";
  1878. document.getElementById("td_depositeamountforrefund").innerHTML = parseFloat(response.depositAmount).toFixed(2);
  1879. document.getElementById("td_electricityamount").innerHTML = parseFloat(response.ebDetails.ebAmount).toFixed(2);
  1880. document.getElementById("td_ebAmount").innerHTML = parseFloat(response.ebDetails.ebAmount).toFixed(2);
  1881. document.getElementById("td_damage").innerHTML = parseFloat(response.settlement.damageAmount).toFixed(2);
  1883. var eb_amt = parseFloat(response.ebDetails.ebAmount).toFixed(2);
  1884. var deposit_amt = parseFloat(response.depositAmount).toFixed(2);
  1885. var tem_total = (deposit_amt - eb_amt).toFixed(2);
  1886. $("#td_settel_amt").html(tem_total);
  1887. } else {
  1888. document.getElementById("refunddetails").style.display = "none";
  1889. }
  1891. showDamageDetails(response);
  1892. if (response.bookingStatus === 'CANCELED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus)) {
  1893. 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`;
  1894. document.getElementById("refundamountDetails").style.display = "block";
  1895. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  1896. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  1897. } else if (response.bookingStatus === 'CANCELED' && response.refundStatus === 'COMPLETED') {
  1898. document.getElementById("td_refundamount").innerHTML = `Deposit amount of ₹ ${parseFloat(response.depositAmount).toFixed(2)} refunded successfully`;
  1899. document.getElementById("refundamountDetails").style.display = "block";
  1900. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  1901. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  1902. } else if (response.bookingStatus === 'REJECTED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus) && response.amountReceived == 0) {
  1903. document.getElementById("refundamountDetails").style.display = "none";
  1904. } else if (response.bookingStatus === 'REJECTED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus)) {
  1905. document.getElementById("td_refundamount").innerHTML = `Your booking has been Rejected by GCC. Full amount of ₹ ${parseFloat(response.amountReceived).toFixed(2)} will be refunded shortly`;
  1906. document.getElementById("refundamountDetails").style.display = "block";
  1907. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  1908. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  1909. } else if (response.bookingStatus === 'REJECTED' && response.refundStatus === 'COMPLETED') {
  1910. document.getElementById("td_refundamount").innerHTML = `Full amount of ₹${parseFloat(response.amountReceived).toFixed(2)} refunded successfully`;
  1911. document.getElementById("refundamountDetails").style.display = "block";
  1912. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  1913. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  1914. } else if (response.bookingStatus === 'REJECTED' && response.refundStatus === 'NA') {
  1915. document.getElementById("td_refundamount").innerHTML = `Your Booking has been rejected by GCC`;
  1916. document.getElementById("refundamountDetails").style.display = "block";
  1917. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  1918. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  1919. } else if (response.bookingStatus === 'GCC_BLOCKED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus)) {
  1920. document.getElementById("td_refundamount").innerHTML = `Your booking has been Blocked by GCC. Full amount of ₹ ${parseFloat(response.amountReceived).toFixed(2)} will be refunded shortly`;
  1921. document.getElementById("refundamountDetails").style.display = "block";
  1922. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  1923. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  1924. } else if (response.bookingStatus === 'GCC_BLOCKED' && response.refundStatus === 'COMPLETED') {
  1925. document.getElementById("td_refundamount").innerHTML = `Full amount of ₹${parseFloat(response.amountReceived).toFixed(2)} refunded successfully`;
  1926. document.getElementById("refundamountDetails").style.display = "block";
  1927. document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
  1928. document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
  1929. } /*else if(response.scheduleCount === 1){
  1930. document.getElementById("rescheduleDetails").style.display = "block";
  1931. document.getElementById("td_res_start_date").innerHTML = response.startDate;
  1932. document.getElementById("td_res_end_date").innerHTML = response.endDate;
  1933. document.getElementById("td_res_date").innerHTML = response.updatedDate;
  1934. }*/ else {
  1935. document.getElementById("refundamountDetails").style.display = "none";
  1936. }
  1937. // Show the modal
  1938. $('#showBookingDetails').modal('show');
  1939. },
  1940. error: function () {
  1941. console.error("An error occurred while fetching booking details.");
  1942. }
  1943. });
  1944. }
  1946. function showDamageDetails(data) {
  1947. var damageFieldContainer = $('#damageDetails');
  1948. damageFieldContainer.empty();
  1950. // Create a div for table responsiveness
  1951. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css({
  1952. 'margin-top': '-19px',
  1953. 'margin-left': '19px'
  1954. });
  1955. ;
  1957. // Create table with similar classes and styles to the modal table
  1958. var table = $('<table>').addClass('table table-bordered table-striped').css({
  1959. 'width': '97%',
  1960. 'border-color': 'black',
  1961. 'border-top-color': 'white',
  1962. 'width': ' 730px'
  1963. });
  1964. var thead = $('<thead>').addClass('thead-light');
  1965. var tbody = $('<tbody>');
  1967. // Create Damage Details header row
  1968. var headerRow = $('<tr>').appendTo(thead);
  1969. $('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
  1970. 'padding': '0.45rem 0.45rem',
  1971. 'background-color': 'lightgrey',
  1972. 'font-weight': 'bold',
  1973. 'color': 'black',
  1974. }).appendTo(headerRow);
  1976. // Create table header row
  1977. var columnHeadersRow = $('<tr>').css('background-color', 'white').appendTo(thead);
  1978. $('<th>').text('S.No').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  1979. $('<th>').text('Asset Name').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  1980. $('<th>').text('Damage Img').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  1981. $('<th>').text('Cost').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  1982. $('<th>').text('Qty').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  1983. $('<th>').text('Amount').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
  1985. var totalAmount = 0;
  1986. $.each(data.damageList, function (index, detail) {
  1987. var row = $('<tr>').appendTo(tbody);
  1988. $('<td>').text(index + 1).css('padding', '0.45rem 0.45rem').appendTo(row);
  1989. $('<td>').text(detail.assetName).css('padding', '0.45rem 0.45rem').appendTo(row);
  1990. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
  1991. showDamageImage(detail.damageImageUrl);
  1992. });
  1993. var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
  1994. $('<td>').css('padding', '0.45rem 0.45rem').append(viewLink).appendTo(row);
  1995. $('<td>').text(assetamt).css('padding', '0.45rem 0.45rem').appendTo(row);
  1996. $('<td>').text(detail.quantity).css('padding', '0.45rem 0.45rem').appendTo(row);
  1997. var amount = detail.assetAmount;
  1998. totalAmount += amount;
  1999. $('<td>').text(amount.toFixed(2)).css('padding', '0.45rem 0.45rem').appendTo(row);
  2000. $("#td_dam_amt").html(totalAmount.toFixed(2));
  2001. });
  2002. // Add row for total amount
  2003. var totalRow = $('<tr>').appendTo(tbody);
  2004. $('<td>').attr('colspan', '5').text('Total Amount').css('padding', '0.45rem 0.45rem; font-weight: bold; background-color: #f2f2f2').appendTo(totalRow);
  2005. $('<td>').text(totalAmount.toFixed(2)).css('padding', '0.45rem 0.45rem').appendTo(totalRow);
  2007. // Append the table elements to the container div
  2008. table.append(thead, tbody);
  2009. tableResponsiveDiv.append(table);
  2010. damageFieldContainer.append(tableResponsiveDiv);
  2012. var temp_total = parseFloat($("#td_settel_amt").html());
  2013. var settleAmount = temp_total - totalAmount;
  2014. if (settleAmount < 0) {
  2015. var pendingstatus = data.settlement.collectionStatus
  2016. $("#td_settel_amt").html(0.00);
  2017. $("#pendingcolumn").show();
  2018. $("#collectionstatuscolumn").show();
  2019. $('#td_collection_status').html(pendingstatus);
  2020. $("#td_pending_amt").html(Math.abs(settleAmount).toFixed(2));
  2021. $("#td_pending_amt").css("color", "red");
  2022. } else {
  2023. $("#td_settel_amt").html(settleAmount.toFixed(2));
  2024. $("#pendingcolumn").hide();
  2025. $("#collectionstatuscolumn").hide();
  2026. $("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
  2027. }
  2028. }
  2031. function showDamageImage(damageImageUrl) {
  2032. document.getElementById('filePreview').src = damageImageUrl;
  2033. $('#fileModal').modal('show');
  2034. }
  2036. function showchallonimage(challanImgLink) {
  2037. document.getElementById('filePreview').src = challanImgLink;
  2038. $('#fileModal').modal('show');
  2039. }
  2041. function showReasonDocuments(list) {
  2042. $.ajax({
  2043. type: "GET",
  2044. url: '/communityhall/api/officer/getReasonByName',
  2045. data: {
  2046. 'reasonName': list.reason
  2047. },
  2048. success: function (x) {
  2049. showReasonWithDocument(x, list);
  2050. }
  2051. });
  2052. }
  2054. // Display booking documents
  2055. function showReasonWithDocument(reasonData, list) {
  2056. var reasonDocumentData = reasonData.reasonDocumentMasterList;
  2057. var bookingDocumentsList = list.bookingDocumentsList;
  2059. const reasonFieldsContainer = $('#documents');
  2060. reasonFieldsContainer.empty();
  2062. // Create a responsive table container
  2063. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css({
  2064. 'width': '729px',
  2065. 'border': '1px solid black'
  2066. });
  2068. // Create the table with Bootstrap classes and custom styles
  2069. var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
  2070. 'width': '100%',
  2071. 'height': 'auto',
  2072. 'border': '1px solid black'
  2073. });
  2075. // Create the table header (thead)
  2076. var thead = $('<thead>').appendTo(table);
  2077. var headerRow = $('<tr>').appendTo(thead);
  2078. $('<th>').attr('colspan', '3').text('Document Details').css({
  2079. 'color': 'black',
  2080. 'background-color': 'lightgrey',
  2081. 'padding': '0.45rem 0.45rem'
  2082. }).appendTo(headerRow);
  2084. // Create header row for columns
  2085. var columnHeadersRow = $('<tr>').appendTo(thead);
  2086. $('<th>').text('S.No').appendTo(columnHeadersRow);
  2087. $('<th>').text('Required Info').appendTo(columnHeadersRow);
  2088. $('<th>').text('Required Documents').appendTo(columnHeadersRow);
  2090. // Create the table body (tbody)
  2091. var tbody = $('<tbody>').appendTo(table);
  2093. // Iterate through the documents list and populate rows
  2094. for (var i = 0; i < bookingDocumentsList.length; i++) {
  2095. (function (index) {
  2096. var row = $('<tr>').appendTo(tbody);
  2097. $('<td>').text(index + 1).appendTo(row);
  2099. // Determine the text content for the second cell
  2100. var name = bookingDocumentsList[index].name ? bookingDocumentsList[index].name : ''; // Empty string if name is null or undefined
  2101. var fieldText = reasonDocumentData[index].fieldName;
  2102. var fullText = name ? fieldText + ': ' + name : fieldText; // Include colon only if name is not empty
  2104. $('<td>').text(fullText).appendTo(row);
  2106. // Create a link to view document image
  2107. var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
  2108. showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
  2109. });
  2110. $('<td>').append(viewLink).appendTo(row);
  2111. })(i);
  2112. }
  2113. // Append table to the responsive container
  2114. tableResponsiveDiv.append(table);
  2116. // Append table to the container in the DOM
  2117. reasonFieldsContainer.append(tableResponsiveDiv);
  2118. }
  2121. function showDocumentImage(fileURL) {
  2122. openFileModal(fileURL);
  2123. }
  2125. // Event delegation for dynamically added elements
  2126. $(document).on('click', '.view-document', function () {
  2127. const fileURL = $(this).data('url');
  2128. openFileModal(fileURL);
  2129. });
  2131. function openFileModal(fileURL) {
  2132. $('#filePreview').attr('src', fileURL);
  2133. $('#fileModal').modal('show');
  2134. }
  2136. // For OTP input box
  2137. $('.otp-input').on('keyup', function (e) {
  2138. var $this = $(this);
  2139. if ($this.val().length === 1) {
  2140. $this.next('.otp-input').focus();
  2141. }
  2142. if ($this.val().length === 0) {
  2143. $this.prev('.otp-input').focus();
  2144. }
  2145. });
  2147. function cancelBooking(bookingId, mobileNo, bookingType) {
  2148. var mobileNum = mobileNo;
  2149. var bookingId = bookingId;
  2151. // Check if the booking type is OFFLINE
  2152. if (bookingType === "OFFLINE") {
  2153. Swal.fire({
  2154. title: 'Cancellation Not Available',
  2155. text: 'Cancellation is not available for offline bookings.',
  2156. icon: 'error'
  2157. });
  2158. } else {
  2159. Swal.fire({
  2160. title: 'Are you sure?',
  2161. text: 'Once canceled, this action can\'t be undo. Only the deposit Amount will be refunded within 3 to 15 days.',
  2162. icon: 'warning',
  2163. showCancelButton: true,
  2164. confirmButtonColor: '#3085d6',
  2165. cancelButtonColor: '#d33',
  2166. confirmButtonText: 'Yes, cancel it!',
  2167. cancelButtonText: 'Close',
  2168. }).then((result) => {
  2169. if (result.isConfirmed) {
  2170. // If user confirms, show OTP form
  2171. mobileNumberForCancel = mobileNum;
  2172. cancelBookingId = bookingId;
  2173. cancelBookingLogin = true;
  2174. sendOTP(mobileNum);
  2175. }
  2176. });
  2177. }
  2178. }
  2180. function openRescheduleModal(bookingId, startDate, endDate, noOfDays, hallId, startingSlot, endingSlot, reason) {
  2181. // Function to map slot values to their text representation
  2182. function getSlotText(slot) {
  2183. return slot === 1 ? 'Morning' : 'Evening';
  2184. }
  2186. // Populate modal inputs
  2187. const start = new Date(startDate);
  2188. const end = new Date(endDate);
  2189. const timeDiff = end - start;
  2191. // Convert time difference from milliseconds to days
  2192. const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
  2194. // Set values for inputs
  2195. document.getElementById("bookingId").value = bookingId;
  2196. document.getElementById("startDateInput").value = startDate;
  2197. document.getElementById("endDateInput").value = endDate;
  2198. document.getElementById("noOfDaysInput").value = noOfDays;
  2199. document.getElementById("startingSlot").value = startingSlot;
  2200. document.getElementById("endingSlot").value = endingSlot;
  2201. document.getElementById("daysDiff").value = daysDiff;
  2203. // Display slot text in the modal
  2204. document.getElementById("startDatetext").value = startDate;
  2205. document.getElementById("startingSlotText").value = getSlotText(startingSlot);
  2206. document.getElementById("endingSlotText").value = getSlotText(endingSlot);
  2208. // Optionally, fetch and update calendar or availability based on hallId
  2209. getBookingCalendar(hallId, reason);
  2211. // Show the modal
  2212. $('#bookingRescheduleModal').modal('show');
  2213. }
  2216. function getBookingCalendar(hall_id, reason) {
  2217. // Make an AJAX call to fetch booking data
  2218. $.ajax({
  2219. type: 'GET',
  2220. url: '/communityhall/user/api/getPastData',
  2221. data: {
  2222. hall_id: hall_id
  2223. },
  2225. success: function (response) {
  2226. window.bookingResponse = {};
  2227. if (response && Array.isArray(response)) {
  2228. $("#startDateInput").datepicker("destroy");
  2229. for (var i = 0; i < response.length; i++) {
  2230. var dateString = datepickerFormat(response[i].bdate);
  2231. window.bookingResponse[dateString] = [response[i].morningSlot, response[i].eveningSlot];
  2232. }
  2234. initializeDatepickerWithColors(hall_id, reason);
  2235. if (response.length == 0) {
  2236. initializeDatepickerWithColors(hall_id, reason);
  2237. }
  2238. } else {
  2239. console.error('Invalid or empty response data.');
  2240. }
  2241. },
  2242. error: function (xhr, status, error) {
  2243. console.error('Error fetching hall details:', error);
  2244. }
  2245. });
  2246. }
  2248. function initializeDatepickerWithColors(hallId, reason) { // Confirm hallId is passed here
  2249. $("#datepicker-container").datepicker("destroy");
  2250. const serverDate = new Date($("#serverDate").val() + "T00:00:00")
  2251. // console.log(" view history Date:", serverDate);
  2253. const maxDate = new Date(serverDate);
  2254. maxDate.setMonth(maxDate.getMonth() + 6);
  2255. // console.log("View History: "+maxDate);
  2257. $("#startDateInput,#datepicker-container").datepicker({
  2258. dateFormat: "yy-mm-dd",
  2259. minDate: serverDate,
  2260. maxDate: maxDate,
  2261. beforeShowDay: function (eDate) {
  2263. const dateString = $.datepicker.formatDate("yy-mm-dd", eDate);
  2264. const bookingStatus = window.bookingResponse[dateString] || {};
  2266. // const currentDate = new Date();
  2267. serverDate.setHours(0, 0, 0, 0); // Normalize current date to midnight
  2268. eDate.setHours(0, 0, 0, 0); // Normalize selected date to midnight
  2270. // Logic for other dates
  2271. if (eDate < serverDate) {
  2272. return [false, "highlight-disabled", "Slot not Available"];
  2273. }
  2275. const isToday = eDate.getTime() === serverDate.getTime();
  2276. const currentHour = new Date().getHours();
  2277. const isBefore6AM = currentHour < 6;
  2278. const isAfter2PM = currentHour >= 14;
  2280. // Block 3-day logic for specific event types
  2281. // const today = new Date();
  2282. const blockedDate = new Date(serverDate);
  2283. blockedDate.setDate(serverDate.getDate() + 2);
  2285. const isThreeDayBlock = ["Commercial", "State Govt Event", "Central Govt Event"].includes(reason);
  2286. if (eDate <= blockedDate && isThreeDayBlock) {
  2287. return [false, "highlight-disabled", "Blocked due to event type"];
  2288. }
  2290. // Logic for currentdate
  2291. if (isToday) {
  2292. if (isBefore6AM) {
  2293. // Before 6 AM: Allow full-day booking or adjust based on booking status
  2294. return handleBookingStatus(bookingStatus, "Full Day Available");
  2295. } else if (isAfter2PM) {
  2296. // After 2 PM: Block all bookings
  2297. return handleAfter2PM(bookingStatus);
  2298. } else {
  2299. // Between 6 AM and 2 PM: Check status and disable morning slots
  2300. return handleMorningSlots(bookingStatus);
  2301. }
  2302. }
  2304. return handleBookingStatus(bookingStatus, "Slot Available");
  2305. },
  2306. });
  2308. $("#startDateInput").on("change", function () {
  2309. var selectedDate = $(this).val();
  2310. var noOfDays = document.getElementById('noOfDaysInput').value;
  2311. var startingSlot = document.getElementById("startingSlot").value;
  2312. var endingSlot = document.getElementById("endingSlot").value;
  2313. var noofdays = document.getElementById("noOfDaysInput").value;
  2314. updateEndDate(selectedDate, noofdays, startingSlot, endingSlot);
  2315. });
  2317. }
  2319. function handleBookingStatus(bookingStatus, defaultMessage) {
  2320. if (bookingStatus[2]) {
  2321. return [true, "highlight-blue disabled", "GCC Blocked"];
  2322. } /*else if (bookingStatus[3]) {
  2323. return [true, "highlight-lightpink disabled", "Temporary Blocked"];
  2324. }*/ else if (bookingStatus[0] && bookingStatus[1]) {
  2325. return [true, "highlight-pink disabled", "Slot Occupied"];
  2326. } else if (bookingStatus[0] && !bookingStatus[1]) {
  2327. return [true, "highlight-yellow", "Evening Slot Available"];
  2328. } else if (!bookingStatus[0] && bookingStatus[1]) {
  2329. return [true, "highlight-violet", "Only Morning Slot Available"];
  2330. }
  2331. return [true, "highlight-greens", defaultMessage];
  2332. }
  2334. // Helper function: Handles logic after 2 PM
  2335. function handleAfter2PM(bookingStatus) {
  2336. if (bookingStatus[2]) {
  2337. return [true, "highlight-blue disabled", "GCC Blocked"];
  2338. } else if (bookingStatus[0] || bookingStatus[1]) {
  2339. return [true, "highlight-pink disabled", "Slot Occupied"];
  2340. }
  2341. return [false, "highlight-disabled", "Not Allowed to Book"];
  2342. }
  2344. // Helper function: Handles morning slots between 6 AM and 2 PM
  2345. function handleMorningSlots(bookingStatus) {
  2346. if (bookingStatus[2]) {
  2347. return [true, "highlight-blue disabled", "GCC Blocked"];
  2348. } else if (bookingStatus[0] && bookingStatus[1]) {
  2349. return [true, "highlight-pink disabled", "Slot Occupied"];
  2350. } else if (bookingStatus[0] && !bookingStatus[1]) {
  2351. return [true, "highlight-yellow", "Evening Slot Available"];
  2352. } else if (!bookingStatus[0] && bookingStatus[1]) {
  2353. return [false, "highlight-disabled", "Slot Occupied"];
  2354. }
  2355. return [true, "highlight-yellow", "Evening Slot Available"];
  2356. }
  2358. function updateEndDate(startDate, noofdays, startingSlot, endingSlot) {
  2359. if (startDate && noofdays !== undefined) {
  2360. var start = new Date(startDate);
  2361. var startFormatted = start.toISOString().split('T')[0];
  2362. var bookingStatus = window.bookingResponse[startFormatted] || [false, false];
  2363. var morningAvailable = !bookingStatus[0]; // false means available
  2364. var eveningAvailable = !bookingStatus[1]; // false means available
  2365. var endDate;
  2366. var isValid = true; // Flag to determine if all slots are available
  2368. // Convert noofdays to a number for accurate calculations
  2369. noofdays = parseFloat(noofdays);
  2371. // Handle slot availability and combinations
  2372. if (startingSlot === "2" && endingSlot === "2") { // Evening to Evening
  2373. //console.log("Handling Evening to Evening slot.");
  2374. if (noofdays === 0.5) {
  2375. if (eveningAvailable) {
  2376. endDate = new Date(start);
  2377. endDate.setDate(start.getDate() + Math.ceil(noofdays) - 1);
  2378. endDate = endDate.toISOString().split('T')[0];
  2379. document.getElementById('endDateInput').value = endDate;
  2380. //console.log("End Date (Evening to Evening):", endDate);
  2381. } else {
  2382. Swal.fire({
  2383. title: 'Evening Slot Not Available',
  2384. text: 'The evening slot is not available for the selected date range.',
  2385. icon: 'warning',
  2386. confirmButtonText: 'OK'
  2387. });
  2388. document.getElementById('endDateInput').value = "";
  2389. //console.log("Evening slot not available for", noofdays, "days.");
  2390. }
  2391. } else if (noofdays === 1.5) {
  2392. // Special handling for 2 days
  2393. let endDateCandidate = new Date(start);
  2394. endDateCandidate.setDate(start.getDate() + 1);
  2395. let endDateFormattedCandidate = endDateCandidate.toISOString().split('T')[0];
  2396. let endDateStatusCandidate = window.bookingResponse[endDateFormattedCandidate] || [false, false];
  2397. let morningAvailableOnEndDate = !endDateStatusCandidate[0]; // false means available
  2398. let eveningAvailableOnEndDate = !endDateStatusCandidate[1]; // false means available
  2400. if (eveningAvailable && morningAvailableOnEndDate && eveningAvailableOnEndDate) {
  2401. endDate = endDateCandidate.toISOString().split('T')[0];
  2402. document.getElementById('endDateInput').value = endDate;
  2403. //console.log("End Date (Morning to Evening with 2 days):", endDate);
  2404. } else {
  2405. Swal.fire({
  2406. title: 'Slot Not Available',
  2407. text: 'The Morning slots are not available for the selected date range.',
  2408. icon: 'warning',
  2409. confirmButtonText: 'OK'
  2410. });
  2411. document.getElementById('endDateInput').value = "";
  2412. //console.log("Morning or Evening slot not available for 2 days.");
  2413. }
  2414. } else {
  2415. //console.log("Unsupported duration for Evening to Evening slot.");
  2416. Swal.fire({
  2417. title: 'Invalid Selection',
  2418. text: 'The selected duration for the evening slot is not supported.',
  2419. icon: 'error',
  2420. confirmButtonText: 'OK'
  2421. });
  2422. document.getElementById('endDateInput').value = "";
  2423. }
  2424. } else if (startingSlot === "1" && endingSlot === "1") { // Morning to Morning
  2425. //console.log("Handling Morning to Morning slot.");
  2426. if (noofdays === 0.5) {
  2427. if (morningAvailable) {
  2428. endDate = new Date(start);
  2429. endDate.setDate(start.getDate() + Math.ceil(noofdays) - 1);
  2430. endDate = endDate.toISOString().split('T')[0];
  2431. document.getElementById('endDateInput').value = endDate;
  2432. //console.log("End Date (morning to morning):", endDate);
  2433. } else {
  2434. Swal.fire({
  2435. title: 'Morning Slot Not Available',
  2436. text: 'The Morning slot is not available for the selected date range.',
  2437. icon: 'warning',
  2438. confirmButtonText: 'OK'
  2439. });
  2440. document.getElementById('endDateInput').value = "";
  2441. //console.log("Evening slot not available for", noofdays, "days.");
  2442. }
  2443. } else if (noofdays === 1.5) {
  2444. // Special handling for 2 days
  2445. let endDateCandidate = new Date(start);
  2446. endDateCandidate.setDate(start.getDate() + 1);
  2447. let endDateFormattedCandidate = endDateCandidate.toISOString().split('T')[0];
  2448. let endDateStatusCandidate = window.bookingResponse[endDateFormattedCandidate] || [false, false];
  2449. let morningAvailableOnEndDate = !endDateStatusCandidate[0]; // false means available
  2450. let eveningAvailableOnEndDate = !endDateStatusCandidate[1]; // false means available
  2452. if (morningAvailable && eveningAvailable && morningAvailableOnEndDate) {
  2453. endDate = endDateCandidate.toISOString().split('T')[0];
  2454. document.getElementById('endDateInput').value = endDate;
  2455. //console.log("End Date (Morning to Evening with 2 days):", endDate);
  2456. } else {
  2457. Swal.fire({
  2458. title: 'Slot Not Available',
  2459. text: 'The evening slots are not available for the selected date range.',
  2460. icon: 'warning',
  2461. confirmButtonText: 'OK'
  2462. });
  2463. document.getElementById('endDateInput').value = "";
  2464. //console.log("Morning or Evening slot not available for 2 days.");
  2465. }
  2466. } else {
  2467. //console.log("Unsupported duration for Morning to Morning slot.");
  2468. Swal.fire({
  2469. title: 'Invalid Selection',
  2470. text: 'The selected duration for the morning slot is not supported.',
  2471. icon: 'error',
  2472. confirmButtonText: 'OK'
  2473. });
  2474. document.getElementById('endDateInput').value = "";
  2475. }
  2476. } else if (startingSlot === "1" && endingSlot === "2") { // Morning to Evening
  2477. //console.log("Handling Morning to Evening slot.");
  2478. if (noofdays === 1) {
  2479. if (morningAvailable && eveningAvailable) {
  2480. endDate = new Date(start);
  2481. endDate.setDate(start.getDate() + Math.ceil(noofdays) - 1);
  2482. endDate = endDate.toISOString().split('T')[0];
  2483. document.getElementById('endDateInput').value = endDate;
  2484. //console.log("End Date (Morning to Evening):", endDate);
  2485. } else {
  2486. Swal.fire({
  2487. title: ' Slot Not Available',
  2488. text: 'The Selected slot is not available for the selected date range.',
  2489. icon: 'warning',
  2490. confirmButtonText: 'OK'
  2491. });
  2492. document.getElementById('endDateInput').value = "";
  2493. //console.log("Evening slot not available for", noofdays, "days.");
  2494. }
  2495. } else if (noofdays === 2) {
  2496. // Special handling for 2 days
  2497. let endDateCandidate = new Date(start);
  2498. endDateCandidate.setDate(start.getDate() + 1);
  2499. let endDateFormattedCandidate = endDateCandidate.toISOString().split('T')[0];
  2500. let endDateStatusCandidate = window.bookingResponse[endDateFormattedCandidate] || [false, false];
  2501. let morningAvailableOnEndDate = !endDateStatusCandidate[0]; // false means available
  2502. let eveningAvailableOnEndDate = !endDateStatusCandidate[1]; // false means available
  2504. if (morningAvailable && eveningAvailable && morningAvailableOnEndDate && eveningAvailableOnEndDate) {
  2505. endDate = endDateCandidate.toISOString().split('T')[0];
  2506. document.getElementById('endDateInput').value = endDate;
  2507. //console.log("End Date (Morning to Evening with 2 days):", endDate);
  2508. } else {
  2509. Swal.fire({
  2510. title: 'Slot Not Available',
  2511. text: 'The morning and/or evening slots are not available for the selected date range.',
  2512. icon: 'warning',
  2513. confirmButtonText: 'OK'
  2514. });
  2515. document.getElementById('endDateInput').value = "";
  2516. //console.log("Morning or Evening slot not available for 2 days.");
  2517. }
  2518. } else {
  2519. //console.log("Unsupported duration for Morning to Evening slot.");
  2520. Swal.fire({
  2521. title: 'Invalid Selection',
  2522. text: 'The selected duration for the morning to evening slot is not supported.',
  2523. icon: 'error',
  2524. confirmButtonText: 'OK'
  2525. });
  2526. document.getElementById('endDateInput').value = "";
  2527. }
  2528. } else if (startingSlot === "2" && endingSlot === "1") { // Evening to Morning
  2529. //console.log("Handling Evening to Morning slot.");
  2530. if (noofdays === 1) {
  2531. if (eveningAvailable) { // Check if evening slot is available
  2532. let nextDay = new Date(start);
  2533. nextDay.setDate(start.getDate() + 1);
  2534. let nextDayFormatted = nextDay.toISOString().split('T')[0];
  2535. let nextDayStatus = window.bookingResponse[nextDayFormatted] || [false, false];
  2536. let nextDayMorningAvailable = !nextDayStatus[0]; // false means available
  2538. if (nextDayMorningAvailable) {
  2539. endDate = nextDay.toISOString().split('T')[0];
  2540. document.getElementById('endDateInput').value = endDate;
  2541. //console.log("End Date (Evening to Morning):", endDate);
  2542. } else {
  2543. Swal.fire({
  2544. title: 'Morning Slot Not Available',
  2545. text: 'The morning slot is not available for the next day.',
  2546. icon: 'warning',
  2547. confirmButtonText: 'OK'
  2548. });
  2549. document.getElementById('endDateInput').value = "";
  2550. //console.log("Morning slot not available for the next day.");
  2551. }
  2552. } else {
  2553. Swal.fire({
  2554. title: 'Evening Slot Not Available',
  2555. text: 'The evening slot is not available for the selected date.',
  2556. icon: 'warning',
  2557. confirmButtonText: 'OK'
  2558. });
  2559. document.getElementById('endDateInput').value = "";
  2560. //console.log("Evening slot not available for", startDate);
  2561. }
  2562. } else {
  2563. //console.log("Unsupported duration for Evening to Morning slot.");
  2564. Swal.fire({
  2565. title: 'Invalid Selection',
  2566. text: 'The selected duration for the evening to morning slot is not supported.',
  2567. icon: 'error',
  2568. confirmButtonText: 'OK'
  2569. });
  2570. document.getElementById('endDateInput').value = "";
  2571. }
  2572. } else {
  2573. //console.log("Unsupported slot combination or duration.");
  2574. Swal.fire({
  2575. title: 'Invalid Slot Combination',
  2576. text: 'The selected slot combination or duration is not supported.',
  2577. icon: 'error',
  2578. confirmButtonText: 'OK'
  2579. });
  2580. document.getElementById('endDateInput').value = "";
  2581. }
  2582. } else {
  2583. //console.log("Start Date or Number of Days not provided.");
  2584. Swal.fire({
  2585. title: 'Invalid Input',
  2586. text: 'Please provide a valid start date and number of days.',
  2587. icon: 'error',
  2588. confirmButtonText: 'OK'
  2589. });
  2590. document.getElementById('endDateInput').value = "";
  2591. }
  2592. }
  2594. function datepickerFormat(dateString) {
  2595. var dateObject = new Date(dateString);
  2596. var year = dateObject.getFullYear();
  2597. var month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
  2598. var day = dateObject.getDate().toString().padStart(2, "0");
  2599. return `${year}-${month}-${day}`;
  2600. }
  2602. function printTables() {
  2603. // Get the printable content
  2604. var printableContent = document.getElementById('printableContent').innerHTML;
  2605. // Open a print window
  2606. var printWindow = window.open('', '', 'height=400,width=600');
  2607. // Write the printable content to the print window
  2608. printWindow.document.write('<html><head><title>Print</title></head><body>' + printableContent + '</body></html>');
  2610. // Close the print window after printing
  2611. printWindow.document.close();
  2612. printWindow.print();
  2613. printWindow.close();
  2614. }
  2616. function Reschedule() {
  2617. // Retrieve values from modal inputs
  2618. var bookingId = document.getElementById("bookingId").value;
  2619. var startDate = document.getElementById("startDateInput").value;
  2620. var endDate = document.getElementById("endDateInput").value;
  2621. var originalStartDate = document.getElementById("startDatetext").value;
  2623. // Check if the rescheduled start date is the same as the original booked start date
  2624. if (startDate === originalStartDate) {
  2625. Swal.fire({
  2626. icon: 'warning',
  2627. title: 'Warning',
  2628. text: 'Your Rescheduled Start Date is the same as Your booking Start Date. Please change the date.',
  2629. showConfirmButton: true
  2630. });
  2631. return;
  2632. }
  2633. if (!endDate) {
  2634. Swal.fire({
  2635. icon: 'error',
  2636. title: 'Error',
  2637. text: 'End Date is Empty! Please check your Start Date', // Error message from backend
  2638. showConfirmButton: true
  2639. });
  2640. return;
  2641. }
  2643. // Ajax POST request
  2644. $.ajax({
  2645. type: "POST",
  2646. url: "/communityhall/user/api/reschedule-dates",
  2647. data: {
  2648. bookingId: bookingId,
  2649. startDate: startDate,
  2650. endDate: endDate
  2651. },
  2652. success: function (response) {
  2653. // Handle success response
  2654. Swal.fire({
  2655. icon: 'success',
  2656. title: 'Success',
  2657. text: response, // Success message from backend
  2658. showConfirmButton: false,
  2659. timer: 1500
  2660. }).then(function () {
  2661. // Optionally reload page or update UI
  2662. location.reload(); // Example: reload the page
  2663. });
  2664. },
  2665. error: function (xhr, status, error) {
  2666. if (xhr.responseText.includes("Dates are already occupied")) {
  2667. Swal.fire({
  2668. icon: 'error',
  2669. title: 'Error',
  2670. text: 'Dates are already occupied. Please select another date.', // Error message from backend
  2671. showConfirmButton: true
  2672. });
  2673. } else {
  2674. Swal.fire({
  2675. icon: 'error',
  2676. title: 'Error',
  2677. text: 'An error occurred while rescheduling your booking. Please try again.', // General error message
  2678. showConfirmButton: true
  2679. });
  2680. }
  2681. }
  2682. });
  2683. }
  2685. $(document).ready(function () {
  2686. // DataTables buttons configuration
  2687. var buttons = [
  2688. {
  2689. extend: 'pageLength',
  2690. className: 'btn btn-primary'
  2691. }
  2692. ];
  2693. $('#simpletable').DataTable({
  2694. dom: 'Bftip',
  2695. columnDefs: [
  2696. {targets: 'no-sort', orderable: false}
  2697. ],
  2698. lengthMenu: [
  2699. [5, 10, 20, 50, -1],
  2700. ['5 rows', '10 rows', '20 rows', '50 rows', 'Show all']
  2701. ],
  2702. scrollY: '50vh',
  2703. fixedColumns: {
  2704. left: 1,
  2705. right: 1
  2706. },
  2707. buttons: [buttons],
  2708. responsive: true,
  2709. searching: true, // Enable search
  2710. select: false,
  2711. processing: false,
  2712. });
  2715. $('#searchInput').on('keyup', function () {
  2716. dataTable.search(this.value).draw();
  2717. });
  2718. });
  2719. $(document).on('change', '.nocfile', function () {
  2720. validateFile(this);
  2721. });
  2723. function transactionHistory(userId) {
  2724. $.ajax({
  2725. type: "GET",
  2726. url: '/communityhall/user/api/getTransactionDetails',
  2727. data: {'userId': userId},
  2728. success: function (data) {
  2729. // console.log("Full response:", data);
  2730. // console.log("Refund Details:", data.refundDetails);
  2733. const transactions = data.transactions || [];
  2734. const refundDetails = data.refundDetails || [];
  2736. populateTransactionTable(transactions);
  2737. populateRefundDetailsTable(refundDetails);
  2739. $('#transactionHistoryModal').modal('show'); // Show the modal
  2740. },
  2741. error: function (error) {
  2742. console.error("Error fetching transaction details", error);
  2743. }
  2744. });
  2745. }
  2747. function populateTransactionTable(transactions) {
  2748. const tableBody = $('#transactionTable tbody');
  2749. tableBody.empty(); // Clear any existing rows
  2751. transactions.forEach((transaction, index) => {
  2752. const paymentStatus = (transaction.statusCode === "0300" && transaction.response?.includes("success"))
  2753. ? "Success"
  2754. : "Payment Failed";
  2756. const row = `
  2757. <tr>
  2758. <td>${index + 1}</td>
  2759. <td>${transaction.bookingId}</td>
  2760. <td>${transaction.amount || '-'}</td>
  2761. <td>${transaction.date || '-'}</td>
  2762. <td>${transaction.txansactionId || '-'}</td>
  2763. <td>${paymentStatus}</td>
  2764. </tr>
  2765. `;
  2766. tableBody.append(row); // Append the row to the table body
  2767. });
  2768. }
  2770. function populateRefundDetailsTable(refundDetails) {
  2771. const refundTable = $('#refunddetails');
  2772. const tableBody = $('#refunddetailsTable tbody');
  2773. tableBody.empty(); // Clear any existing rows
  2775. if (refundDetails.length > 0) {
  2776. refundTable.show(); // Show the refund details table
  2778. refundDetails.forEach((refund, index) => {
  2779. const row = `
  2780. <tr>
  2781. <td>${index + 1}</td>
  2782. <td>${refund.bookingId}</td>
  2783. <td>${refund.amount}</td>
  2784. <td>${refund.date}</td>
  2785. <td>${refund.txansactionId}</td>
  2786. <td>${refund.refundAmount}</td>
  2787. </tr>
  2788. `;
  2789. tableBody.append(row);
  2790. });
  2791. } else {
  2792. refundTable.hide(); // Hide the refund details table
  2793. }
  2794. }
  2797. // Toggle Chat Box
  2798. function toggleChat() {
  2799. const chatBox = document.getElementById('chat-box');
  2800. chatBox.style.display = (chatBox.style.display === 'block') ? 'none' : 'block';
  2801. }
  2803. // Send Message
  2804. function sendMessage() {
  2805. const userInput = document.getElementById('userInput');
  2806. const message = userInput.value.trim();
  2808. if (message) {
  2809. // Create message element
  2810. const chatBody = document.getElementById('chat-body');
  2811. const userMessage = document.createElement('div');
  2812. userMessage.className = 'user-message';
  2813. userMessage.textContent = message;
  2815. chatBody.appendChild(userMessage);
  2816. chatBody.scrollTop = chatBody.scrollHeight; // Auto-scroll to bottom
  2818. // Send message to the server (Spring Boot API)
  2819. fetch('/communityhall/admin/api/send', {
  2820. method: 'POST',
  2821. headers: {
  2822. 'Content-Type': 'application/json',
  2823. },
  2824. body: JSON.stringify({message}),
  2825. })
  2826. .then(response => response.json())
  2827. .then(data => {
  2828. // Add response message to chat
  2829. const responseMessage = document.createElement('div');
  2830. responseMessage.className = 'bot-message';
  2831. responseMessage.textContent = data.response;
  2833. chatBody.appendChild(responseMessage);
  2834. chatBody.scrollTop = chatBody.scrollHeight;
  2835. });
  2837. userInput.value = ''; // Clear input field
  2838. }
  2839. }
  2841. </script>
  2843. </div>
  2844. </div>
  2845. </div>
  2846. </body>
  2848. </html>