Ajith
/
Coworkspace_live
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.
6 Commits
1 Branch
0 Tags
40 MiB
Tree: 1b1c74fed6
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1b1c74fed6'
${ noResults }
Coworkspace_live/src/main/resources/templates/user/book-workdesk.html

1342 lines
68 KiB
Raw Normal View History

firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
​
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
firt commit
11 months ago
​
​
​
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
building id dynamically and live issue fixed (wrong build & category) booking by user & fixed the changes officerdashboard page for caretaker2
9 months ago
​
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
building id dynamically and live issue fixed (wrong build & category) booking by user & fixed the changes officerdashboard page for caretaker2
9 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
implemented building dynamically upto 13 buildings
7 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
implemented building dynamically upto 13 buildings
7 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
firt commit
11 months ago
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
firt commit
11 months ago
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
firt commit
11 months ago
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
implemented building dynamically upto 13 buildings
7 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
building id dynamically and live issue fixed (wrong build & category) booking by user & fixed the changes officerdashboard page for caretaker2
9 months ago
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
building id dynamically and live issue fixed (wrong build & category) booking by user & fixed the changes officerdashboard page for caretaker2
9 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
firt commit
11 months ago
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
implemented building dynamically upto 13 buildings
7 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
implemented building dynamically upto 13 buildings
7 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
implemented building dynamically upto 13 buildings
7 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
building id dynamically and live issue fixed (wrong build & category) booking by user & fixed the changes officerdashboard page for caretaker2
9 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
building id dynamically and live issue fixed (wrong build & category) booking by user & fixed the changes officerdashboard page for caretaker2
9 months ago
​
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
implemented building dynamically upto 13 buildings
7 months ago
​
​
​
​
​
​
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
firt commit
11 months ago
added new files to hide the urls dynamically getting pages without switch case
11 months ago
firt commit
11 months ago
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
  4. <head th:replace="~{fragments/user-head :: head}"></head>
  5. <header th:replace="~{user/razor-pay :: header}"></header>
  7. <style>
  8. .radio-button-group {
  9. display: flex;
  10. }
  12. .radio-button-group input[type="radio"] {
  13. display: none;
  14. }
  16. .radio-button {
  17. padding: 10px 20px;
  18. margin: 5px;
  19. /* Adds space between buttons */
  20. border: 1px solid #007bff;
  21. border-radius: 5px;
  22. cursor: pointer;
  23. background-color: #f0f0f0;
  24. color: #007bff;
  25. transition: background-color 0.3s, color 0.3s;
  26. }
  28. .radio-button:hover {
  29. background-color: #E29D25;
  30. color: white;
  31. }
  33. .radio-button-group input[type="radio"]:checked+.radio-button {
  34. background-color: #E29D25;
  35. color: white;
  36. }
  38. .carousel-inner img {
  39. height: 500px;
  40. object-fit: cover;
  41. }
  43. .time-slot-box {
  44. /*width: 100px;
  45. height: 50px;*/
  46. margin: 10px;
  47. border: 2px solid green;
  48. display: flex;
  49. justify-content: center;
  50. align-items: center;
  51. border-radius: 10px;
  52. cursor: pointer;
  53. background-color: #f0f0f0;
  54. padding: 10px;
  55. }
  57. .time-slot-box.booked {
  58. border-color: red;
  59. color: red;
  60. cursor: not-allowed;
  61. }
  63. .time-slot-box.available {
  64. border-color: green;
  65. color: green;
  66. }
  68. .time-slot-box input[type="radio"] {
  69. display: none;
  70. }
  72. .time-slot-box:hover {
  73. background-color: #e0e0e0;
  74. }
  76. #timeSlots {
  77. display: flex;
  78. flex-wrap: wrap;
  79. }
  81. .book-now-btn {
  82. background-color: #2c3e50;
  83. color: white;
  84. border: none;
  85. padding: 10px;
  86. border-radius: 5px;
  87. cursor: pointer;
  88. transition: background-color 0.3s ease;
  89. align-self: center;
  90. /* Centers the button horizontally */
  91. margin-bottom: 5px;
  92. /* Pushes the button to the bottom of the .card */
  93. }
  95. .book-now-btn:hover {
  96. background-color: #E29D25;
  97. }
  99. .reset-now-btn {
  100. background-color: #868e96;
  101. color: white;
  102. border: none;
  103. padding: 10px;
  104. border-radius: 5px;
  105. cursor: pointer;
  106. transition: background-color 0.3s ease;
  107. align-self: center;
  108. /* Centers the button horizontally */
  109. margin-bottom: 5px;
  110. /* Pushes the button to the bottom of the .card */
  111. }
  113. .reset-now-btn:hover {
  114. background-color: #E29D25;
  115. }
  117. .btn-primary2 {
  118. background-color: #FFF;
  119. border-color: green;
  120. color: gray;
  121. cursor: pointer;
  122. -webkit-transition: all ease-in 0.3s;
  123. transition: all ease-in 0.3s;
  124. }
  126. .btn-primary2.active {
  127. background-color: #E29D25 !important;
  128. color: #FFF;
  129. border-color: green !important;
  130. }
  132. .scrolling-text {
  133. overflow: hidden;
  134. white-space: nowrap;
  135. position: relative;
  136. width: 100%;
  137. }
  139. .scrolling-text span {
  140. display: inline-block;
  141. font-size: 24px;
  142. font-weight: bold;
  143. color: #E29D25;
  144. will-change: transform;
  145. animation: scroll-text 20s linear infinite;
  146. }
  148. .scrolling-text span:hover {
  149. animation-play-state: paused;
  150. }
  152. @keyframes scroll-text {
  153. 0% {
  154. transform: translateX(100%);
  155. }
  157. 100% {
  158. transform: translateX(-100%);
  159. }
  160. }
  161. </style>
  163. <body>
  164. <!-- Pre-loader start -->
  165. <div th:replace="~{fragments/preloader :: div}"></div>
  166. <!-- Pre-loader end -->
  167. <div id="pcoded" class="pcoded">
  168. <div class="pcoded-container">
  169. <!-- Menu header start -->
  170. <nav th:replace="~{fragments/user-nav :: nav}"></nav>
  171. <!-- Menu header end -->
  172. <div class="pcoded-main-container">
  173. <nav th:replace="~{fragments/user-navmenu :: nav}"></nav>
  174. <div class="pcoded-content">
  175. <div class="pcoded-inner-content">
  176. <!-- Main-body start -->
  177. <div class="main-body">
  178. <div class="page-wrapper">
  179. <div class="page-body" style="padding-top: 5%;">
  180. <!-- Page-header start -->
  181. <div class="page-header">
  182. <div class="row align-items-end">
  183. <div class="col-lg-8">
  184. <div class="page-header-title">
  185. <div class="d-inline">
  186. <h4 style="font-weight:bold;">Book Desk Space</h4>
  187. <!--<span class="address">Jeganathan street, Agaram, Chennai - 600082</span>-->
  188. <span class="address" th:text="${buildingAddress}">Address not
  189. available</span>
  190. </div>
  191. </div>
  192. </div>
  194. <div class="col-lg-4">
  195. <div class="page-header-breadcrumb">
  196. <ul class="breadcrumb-title">
  197. <li class="breadcrumb-item">
  198. <a href="#"> <i class="feather icon-home"></i> </a>
  199. </li>
  200. <li class="breadcrumb-item"><a href="#">Desk Space</a>
  201. </li>
  202. </ul>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <!-- Page-header end -->
  209. <!--
  210. <div class="row">
  211. <div class="col-sm-6 col-lg-6">
  213. <div class="photo-text mt-3">
  214. <h4 style="font-weight:bold;">Learning Centre</h4>
  215. <div class="rating">
  216. <span class="address">Jeganathan street, Agaram, Chennai - 600082</span>
  217. </div>
  218. </div>
  219. </div>
  220. </div> -->
  221. <hr>
  223. <div class="scrolling-text"><span>Loading announcement...</span></div>
  225. <input type="hidden" id="buildingId" th:value="${buildingId}">
  226. <input type="hidden" id="categoryId" th:value="${categoryId}">
  227. <input type="hidden" id="subId" th:value="${subId}">
  230. <div class="row" id="conferenceHallDiv" style="border-radius: 10px; margin:0px;">
  231. <div class="col-lg-12 col-sm-12">
  232. <div
  233. style="border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 20px; margin-top: 20px;">
  234. <form id="conferenceHallForm">
  235. <div class="row">
  236. <div class="col-lg-6 col-sm-0" style="padding:0px;">
  237. <!--photo grid start-->
  238. <div id="carouselExampleIndicators" class="carousel slide"
  239. data-ride="carousel">
  240. <ol class="carousel-indicators">
  241. <!-- <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  242. <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  243. <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> -->
  244. <li th:each="homeImg, iterStat : ${homeImg}"
  245. class=""
  246. th:classappend="${iterStat.index == 0} ? ' active'"
  247. data-target="#carouselExampleIndicators"
  248. th:data-slide-to="${iterStat.index}">
  249. </li>
  250. </ol>
  251. <div class="carousel-inner">
  252. <div th:each="homeImg, iterStat : ${homeImg}"
  253. class="carousel-item"
  254. th:classappend="${iterStat.index == 0} ? ' active'">
  255. <img style="border-radius:15px;"
  256. class="d-block w-100"
  257. th:src="${homeImg.imageurl}" width="100%"
  258. alt="Slide Image">
  259. </div>
  260. <!-- <div class="carousel-caption">
  261. Welcome to Desk Space
  262. </div> -->
  263. </div>
  264. <a class="carousel-control-prev"
  265. href="#carouselExampleIndicators" role="button"
  266. data-slide="prev">
  267. <span class="carousel-control-prev-icon"
  268. aria-hidden="true"></span>
  269. <span class="sr-only">Previous</span>
  270. </a>
  271. <a class="carousel-control-next"
  272. href="#carouselExampleIndicators" role="button"
  273. data-slide="next">
  274. <span class="carousel-control-next-icon"
  275. aria-hidden="true"></span>
  276. <span class="sr-only">Next</span>
  277. </a>
  278. </div>
  279. <!-- Photo Grid End-->
  280. </div>
  281. <div
  282. class="col-lg-6 col-sm-12 justify-content-center align-items-center">
  283. <!-- Enter Details -->
  285. <!-- <h5 class="mb-3" style="color:#E29D25">Select Your Preference: <button id="backBtn" class="btn btn-sm btn-outline-primary">Back </button></h5> -->
  286. <div
  287. class="d-flex justify-content-between align-items-center mb-3">
  288. <h5 class="mb-0" style="color:#E29D25">Select Your
  289. Preference:</h5>
  291. <button id="backBtn2" onclick="history.back()"
  292. class="btn btn-primary">Back</button>
  293. </div>
  297. <div class="mb-3 row">
  298. <label style="font-weight:bold;" for="numSeats"
  299. class="col-sm-12 col-md-4 col-form-label"><strong>Number
  300. of Seats :</strong></label>
  301. <div class="col-sm-6 col-md-6">
  302. <select class="form-control" id="numSeats">
  303. <option value="1">1 Seat</option>
  304. <option value="2">2 Seats</option>
  305. <option value="3">3 Seats</option>
  306. <option value="4">4 Seats</option>
  307. <option value="5">5 Seats</option>
  308. </select>
  309. </div>
  313. </div>
  314. <!-- <div class="mb-3 row">
  315. <label style="font-weight:bold;" for="buildingname" class="col-sm-4 col-form-label text-end fw-semibold">
  316. Building name:
  317. </label>
  318. <div class="col-sm-8">
  319. <input type="text" id="buildingname" class="form-control"
  320. th:value="${buildingName}" readonly>
  321. </div>
  322. </div>-->
  323. <div class="mb-3 row align-items-center">
  324. <label for="buildingname"
  325. class="col-sm-4 col-form-label text-end fw-semibold"
  326. style="font-weight:bold;">
  327. Location :
  328. </label>
  329. <div class="col-sm-6 d-flex align-items-center">
  330. <input type="text" id="buildingname"
  331. class="form-control" th:value="${buildingName}"
  332. readonly> <br>
  334. </div>
  335. <button type="button" id="viewBuildingBtn"
  336. class="btn btn-primary">Change</button>
  337. </div>
  340. <!-- Date Picker -->
  341. <div class="row mb-3">
  342. <label style="font-weight:bold;" for="selectDate"
  343. class="col-sm-4 col-form-label text-end">Select Date
  344. :</label>
  345. <div class="col-sm-6">
  346. <!-- <input type="date" class="form-control" id="selectDate" onchange="loadTimeSlots()"> -->
  347. <input class="form-control" id="selectDate"
  348. type="text" placeholder="Select a date "
  349. readonly>
  350. </div>
  351. </div>
  353. <!-- Time Slots -->
  354. <div class="row mb-3">
  355. <label style="font-weight:bold;"
  356. class="col-sm-4 col-form-label text-end">Seat
  357. required for :</label>
  358. <div class="col-sm-8">
  359. <div id="seatfor" class="d-flex flex-wrap">
  360. <div class="btn-group" data-toggle="buttons">
  361. <label class="btn btn-primary2 me-2 mb-2"
  362. style="margin: 5px;">
  363. <input type="radio" name="booking_type"
  364. id="halfDay" autocomplete="off"
  365. value=""> Half Day
  366. </label>
  367. <label class="btn btn-primary2 me-2 mb-2"
  368. style="margin: 5px;">
  369. <input type="radio" name="booking_type"
  370. id="fullDay" autocomplete="off"
  371. value=""> Full Day
  372. </label>
  373. <label class="btn btn-primary2 mb-2"
  374. style="margin: 5px;">
  375. <input type="radio" name="booking_type"
  376. id="month" autocomplete="off"
  377. value=""> Month
  378. </label>
  379. </div>
  381. </div>
  382. </div>
  383. </div>
  385. <!-- Time Slots -->
  386. <div class="row mb-3">
  387. <label style="font-weight:bold;"
  388. class="col-sm-4 col-form-label text-end">Available
  389. Time Slot :</label>
  390. <div class="col-sm-8">
  391. <div id="timeSlots" class="d-flex flex-wrap">
  392. <!-- Time slots will be generated here dynamically -->
  393. </div>
  394. <div id="seatAvailabilityMsg" style="margin-top:5px; font-size:13px; color:red;"></div>
  395. </div>
  396. </div>
  398. <!-- Selected Time Slot
  399. <div class="row mb-3">
  400. <label style="font-weight:bold;" class="col-sm-4 col-form-label text-end">Selected Time Slot</label>
  401. <div class="col-sm-6">-->
  402. <input type="hidden" id="selectedSlot" class="form-control"
  403. readonly>
  404. <!-- </div>
  405. </div> -->
  407. <div class="row mb-3">
  408. <label style="font-weight:bold;" for="selectType"
  409. class="col-sm-4 col-form-label text-end">Select Type
  410. :</label>
  411. <div class="col-sm-6">
  412. <select class="form-control" id="selectType">
  413. <option value="Individual">Individual</option>
  414. <option value="Corporate">Corporate</option>
  415. </select>
  416. </div>
  417. </div>
  419. <div class="row mb-3">
  420. <label style="font-weight:bold;" for="personName"
  421. class="col-sm-4 col-form-label text-end">Name
  422. :</label>
  423. <div class="col-sm-6">
  424. <input type="text" class="form-control"
  425. id="personName">
  426. </div>
  427. </div>
  429. <div class="row mb-3">
  430. <label style="font-weight:bold;" for="personPhone"
  431. class="col-sm-4 col-form-label text-end">Mobile
  432. Number :</label>
  433. <div class="col-sm-6">
  434. <input type="text" class="form-control"
  435. id="personPhone"
  436. placeholder="Enter mobile number"
  437. pattern="^\d{10}$" maxlength="10" minlength="10"
  438. required>
  439. </div>
  440. </div>
  442. <!-- Total Payable Amount -->
  445. <!-- Action Buttons -->
  446. <div class="d-flex justify-content-center">
  447. <button type="button" style="width:100px;"
  448. class="reset-now-btn mr-1"
  449. onclick="resetForm()">Reset</button>
  450. <button type="button" style="width:100px;"
  451. class="book-now-btn" onclick="saveBooking()">Book
  452. Now</button>
  453. </div>
  454. <div style="margin-top: 10px">
  455. <center>
  456. <!-- <h5 onclick="showTour(1,3);" class="scroll-link" style="font-size:14px;text-decoration: none; color:#1a73e8;font-weight: normal;cursor:pointer;">
  457. <img src="/co-workspaceDocuments/360.png" width="200px" title="Click here to view Virtual Tour">
  458. </h5> -->
  459. </center>
  460. </div>
  461. </div>
  462. <!-- <div class="col-lg-2 col-sm-0"></div> -->
  463. </div>
  464. </form>
  465. <!-- </div>
  467. </div>
  468. </div>
  470. <div class="row" id="conferenceHallDiv2" style="border-radius: 10px; margin:0px;">
  472. <div class="col-lg-12 col-sm-12">
  473. <div style="border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 20px; margin-top: 20px;">-->
  474. <br>
  475. <hr>
  476. <br>
  477. <div class="row">
  478. <div class="col-lg-6 col-sm-0" style="padding:0px;">
  479. <h4 style="font-weight: bold;">Timing Details</h4>
  480. <div class="row">
  481. <!-- First Column -->
  482. <div class="col-lg-6 col-sm-6">
  483. <ul class="list-unstyled">
  484. <li style="margin-bottom: 21px;"><img
  485. src="/co-workspaceDocuments/icons/cal.png"
  486. class="mr-1" width="25px;"> Available days:
  487. S M T W T F S </li>
  488. <li style="margin-bottom: 21px;"><img
  489. src="/co-workspaceDocuments/icons/clo.png"
  490. class="mr-1" width="25px;"> Available time :
  491. 09:00 AM to 09:00 PM</li>
  492. </ul>
  493. </div>
  494. </div>
  495. <hr>
  496. <h4 style="font-weight: bold;margin-bottom: 27px;">Amenities
  497. </h4>
  498. <div class="row">
  499. <!-- First Column -->
  500. <div class="col-lg-4 col-sm-4">
  501. <ul class="list-unstyled">
  502. <li style="margin-bottom: 21px;"><img
  503. src="/co-workspaceDocuments/icons/1.png"
  504. class="mr-1" width="15px;"> Wifi / Internet
  505. </li>
  506. <li style="margin-bottom: 21px;"><img
  507. src="/co-workspaceDocuments/icons/2.png"
  508. class="mr-1" width="15px;"> 24/7 Security
  509. </li>
  510. <li style="margin-bottom: 21px;"><img
  511. src="/co-workspaceDocuments/icons/3.png"
  512. class="mr-1" width="15px;"> Housekeeping
  513. </li>
  514. </ul>
  515. </div>
  517. <!-- Second Column -->
  518. <div class="col-lg-4 col-sm-4">
  519. <ul class="list-unstyled">
  520. <li style="margin-bottom: 21px;"><img
  521. src="/co-workspaceDocuments/icons/4.png"
  522. class="mr-1" width="15px;"> Vehicle Parking
  523. </li>
  524. <li style="margin-bottom: 21px;"><img
  525. src="/co-workspaceDocuments/icons/5.png"
  526. class="mr-1" width="15px;"> Reception</li>
  527. <li style="margin-bottom: 21px;"><img
  528. src="/co-workspaceDocuments/icons/6.png"
  529. class="mr-1" width="15px;"> Tea / Coffee
  530. </li>
  531. </ul>
  532. </div>
  534. <!-- Third Column -->
  535. <div class="col-lg-4 col-sm-4">
  536. <ul class="list-unstyled">
  537. <li style="margin-bottom: 21px;"><img
  538. src="/co-workspaceDocuments/icons/7.png"
  539. class="mr-1" width="15px;"> Comfy
  540. Workstations</li>
  541. <li style="margin-bottom: 21px;"><img
  542. src="/co-workspaceDocuments/icons/8.png"
  543. class="mr-1" width="15px;"> Air Conditioning
  544. </li>
  545. <li style="margin-bottom: 21px;"><img
  546. src="/co-workspaceDocuments/icons/9.png"
  547. class="mr-1" width="15px;"> ⁠Informal Collab
  548. Area</li>
  549. </ul>
  550. </div>
  551. </div>
  552. </div>
  553. <div
  554. class="col-lg-6 col-sm-12 justify-content-center align-items-center">
  555. <h4 style="font-weight: bold;">Muthalvar Padaippagam Location
  556. </h4>
  557. <div class="locationmap">
  558. <iframe
  559. th:src="'https://www.google.com/maps?q=' + ${latitude} + ',' + ${longitude} + '&hl=en&z=14&output=embed'"
  560. width="100%" height="450" style="border:0;"
  561. allowfullscreen loading="lazy"
  562. referrerpolicy="no-referrer-when-downgrade">
  563. </iframe>
  564. <!--- <iframe src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3885.7981508771118!2d80.232587!3d13.111970000000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMTPCsDA2JzQzLjEiTiA4MMKwMTMnNTcuMyJF!5e0!3m2!1sen!2sin!4v1730288154721!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>-->
  565. <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5919.7511602058585!2d80.22612333567244!3d13.112778597995147!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a52644d2af36f2f%3A0xab9239a0f5506f51!2sChennai%20Corporation%20Office!5e1!3m2!1sen!2sin!4v1729756217765!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> -->
  566. </div>
  567. </div>
  568. </div>
  570. </div>
  571. </div>
  572. </div>
  574. </div>
  575. </div>
  576. <!-- Main-body end -->
  577. </div>
  578. </div>
  579. </div>
  580. <footer th:replace="~{fragments/footer :: footer}"></footer>
  581. </div>
  582. <div class="modal fade" id="visitTourModal" tabindex="-1" aria-labelledby="visitTourModalLabel"
  583. aria-hidden="true">
  584. <div class="modal-dialog modal-lg">
  585. <div class="modal-content">
  586. <div class="modal-header">
  587. <h5 class="modal-title" id="visitTourModalLabel">Virtual Tour</h5>
  588. <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
  589. </div>
  590. <div class="modal-body">
  591. <iframe id="visitTourIframe" src=""
  592. style="width: 100%; height: 500px; border: none;"></iframe>
  593. </div>
  594. </div>
  595. </div>
  596. </div>
  597. <!-- modal for confrim booking -->
  598. <div class="modal fade" id="ackModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  599. aria-hidden="true">
  600. <div class="modal-dialog modal-md" role="document">
  601. <div class="modal-content">
  602. <div class="modal-header">
  603. <h5>Review and confirm your booking details.</h5>
  604. </div>
  605. <div class="modal-body">
  606. <table class="table table-bordered">
  607. <tbody>
  608. <tr>
  609. <th scope="row">Booking Type:</th>
  610. <td>Desk Space</td>
  611. </tr>
  612. <tr>
  613. <th scope="row">Name:</th>
  614. <td><span class="name"></span></td>
  615. </tr>
  616. <tr>
  617. <th scope="row">Mobile:</th>
  618. <td><span class="mnum"></span></td>
  619. </tr>
  620. <tr>
  621. <th scope="row">Selected Date:</th>
  622. <td><span class="date"></span></td>
  623. </tr>
  624. <tr>
  625. <th scope="row">Selected Slot:</th>
  626. <td><span class="slot"></span></td>
  627. </tr>
  628. <tr>
  629. <th scope="row">Number of Seats:</th>
  630. <td><span class="adultcount"></span></td>
  631. </tr>
  632. <!-- <tr>
  633. <th scope="row">Seat required for:</th>
  634. <td><span class="seatfor"></span></td>
  635. </tr> -->
  636. <tr>
  637. <th scope="row">Amount:</th>
  638. <td><span class="amounttxt"></span></td>
  639. </tr>
  640. </tbody>
  641. </table>
  642. </div>
  644. <div class="modal-footer text-center">
  645. <div style="text-align: center;" id="paynow"></div>
  646. </div>
  647. </div>
  648. </div>
  649. </div>
  650. </div>
  651. <script th:replace="~{fragments/user-script :: script}"></script>
  652. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  653. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  654. <script>
  655. //ak
  656. document.addEventListener('DOMContentLoaded', () => {
  657. const viewBuildingBtn = document.getElementById('viewBuildingBtn');
  659. if (viewBuildingBtn) {
  660. viewBuildingBtn.addEventListener('click', () => {
  661. window.location.href = '/muthalvarpadaippagam';
  662. });
  663. }
  665. });
  667. $(document).on('click', '#backBtn', function () {
  668. //window.location.href = '/muthalvarpadaippagam/home';
  669. });
  672. fetch('/muthalvarpadaippagam/book/api/marquee')
  673. .then(response => response.json())
  674. .then(data => {
  675. const marqueeContainer = document.querySelector(".scrolling-text span");
  676. if (marqueeContainer && data.content) {
  677. marqueeContainer.textContent = data.content;
  678. }
  679. })
  680. .catch(error => console.error("Failed to load marquee:", error));
  682. //let catId=2;
  683. //let subId =2;
  684. //let buildId= 1;
  687. // Extract query parameters from the URL
  688. // const urlParams = new URLSearchParams(window.location.search);
  689. // const catId = urlParams.get('categoryId');
  690. // const buildId = urlParams.get('buildingId');
  691. // let subId = urlParams.get('subId');
  693. // console.log("Category ID:", catId);
  694. // console.log("Building ID:", buildId);
  695. // console.log("Sub ID:", subId);
  697. // Optional: fallback if parameters missing
  699. const buildId = document.getElementById("#buildingId")
  700. const catId = document.getElementById("#categoryId")
  701. let subId = document.getElementById("#subId")
  703. console.log("Category ID:", catId);
  704. console.log("Building ID:", buildId);
  705. console.log("Sub ID:", subId);
  710. let slots = [];
  711. let timeSlots = [];
  712. let selectedSeatType = 4; // default to 4 seater
  713. let ratePerHour = 150; // default rate for 4 seater
  714. const bookedSlots = ['9:00 AM', '6:00 PM', '8:00 PM']; // Sample booked slots, will show in red
  716. // Load available time slots
  717. // Global variable to store selected slots
  718. let selectedSlots = [];
  719. async function loadSlots(scid) {
  720. timeSlots = []; // Clear previous slots
  721. subId = scid;
  723. try {
  724. const response = await $.ajax({
  725. url: '/muthalvarpadaippagam/api/getSlotBySid',
  726. type: 'GET',
  727. data: { scid: scid }
  728. });
  729. timeSlots = response; // Populate timeSlots after response
  730. console.log("Slots loaded:", timeSlots);
  731. } catch (error) {
  732. console.error('Error loading slots:', error);
  733. }
  734. }
  735. //ak dynamic
  736. async function assignScidToStaticRadios() {
  738. let catId = $('#categoryId').val();
  740. try {
  741. const response = await $.ajax({
  742. url: '/muthalvarpadaippagam/api/getSubCategoryByCid',
  743. type: 'GET',
  744. data: { cid: catId }
  745. });
  747. response.forEach(function(item) {
  749. if (item.display_name.toLowerCase().includes("half")) {
  750. $('#halfDay').val(item.scid);
  751. }
  752. else if (item.display_name.toLowerCase().includes("full")) {
  753. $('#fullDay').val(item.scid);
  754. }
  755. else if (item.display_name.toLowerCase().includes("month")) {
  756. $('#month').val(item.scid);
  757. }
  759. });
  761. } catch (error) {
  762. console.error("Error assigning scid:", error);
  763. }
  764. }
  766. function loadTimeSlots(selectedDate) {
  768. const timeSlotsDiv = document.getElementById('timeSlots');
  769. timeSlotsDiv.innerHTML = ''; // Clear previous slots
  771. const currentTime = new Date();
  772. let endDate = currentTime;
  773. let day = String(endDate.getDate()).padStart(2, '0');
  774. let month = String(endDate.getMonth() + 1).padStart(2, '0');
  775. let year = endDate.getFullYear();
  776. toDate = year + "-" + month + "-" + day;
  778. const hours = String(currentTime.getHours()).padStart(2, '0');
  779. const minutes = String(currentTime.getMinutes()).padStart(2, '0');
  780. const formattedTime = `${hours}:${minutes}`;
  782. timeSlots.forEach(slot => {
  784. if (selectedDate == toDate) {
  785. if (slot.end_time > formattedTime) {
  786. const isBooked = bookedSlots.includes(slot.value); // Use slot value to check if it's booked
  787. const slotDiv = `
  788. <label class="time-slot-box ${isBooked ? 'booked' : 'available'}">
  789. <input type="radio" name="timeSlot" id="${slot.slotid}" value="${slot.slotid}"
  790. ${isBooked ? 'disabled' : ''} onclick="selectTimeSlot(this)">
  791. ${slot.name} <!-- Display time here -->
  792. </label>`;
  793. timeSlotsDiv.insertAdjacentHTML('beforeend', slotDiv);
  794. }
  795. }
  796. else {
  797. const isBooked = bookedSlots.includes(slot.value); // Use slot value to check if it's booked
  798. const slotDiv = `
  799. <label class="time-slot-box ${isBooked ? 'booked' : 'available'}">
  800. <input type="radio" name="timeSlot" id="${slot.slotid}" value="${slot.slotid}"
  801. ${isBooked ? 'disabled' : ''} onclick="selectTimeSlot(this)">
  802. ${slot.name} <!-- Display time here -->
  803. </label>`;
  804. timeSlotsDiv.insertAdjacentHTML('beforeend', slotDiv);
  805. }
  806. });
  807. }
  808. $('#numSeats').change(function () {
  810. document.getElementById('timeSlots').innerHTML = '';
  811. document.getElementById('selectDate').value = '';
  815. // clear availability text
  816. $('#seatAvailabilityMsg').text('');
  818. console.log("Slots reset because number of seats changed");
  819. });
  820. $('input[name="booking_type"]').change(function () {
  822. // clear seat availability message
  823. $('#seatAvailabilityMsg').text('');
  825. // optional: reset selected slot
  828. });
  829. function selectTimeSlot(element) {
  831. slots = [];
  833. let slotId = element.value;
  834. let bid = $('#buildingId').val();
  835. let cid = $('#categoryId').val();
  836. let scid = $('#subId').val();
  837. let bDate = $('#selectDate').val();
  838. let noOfPerson = $('#numSeats').val();
  840. $.ajax({
  841. url: '/muthalvarpadaippagam/book/api/checkAvailslots',
  842. type: 'GET',
  843. data: {
  844. bid: bid,
  845. cid: cid,
  846. bDate: bDate,
  847. scid: scid,
  848. slotId: slotId
  849. },
  850. success: function (availableSeats) {
  852. // show message below slots
  853. $('#seatAvailabilityMsg').text("Available Seats : " + availableSeats);
  855. if (availableSeats == 0) {
  857. $('#seatAvailabilityMsg').text("Slot Full");
  860. // show slot as selected
  861. document.querySelectorAll('input[name="timeSlot"]').forEach(slot => {
  862. slot.parentElement.style.backgroundColor = '';
  863. slot.parentElement.style.color = '';
  864. });
  866. element.parentElement.style.backgroundColor = '#E29D25';
  867. element.parentElement.style.color = '#FFF';
  869. return;
  870. }
  872. if (parseInt(noOfPerson) > availableSeats) {
  874. $('#seatAvailabilityMsg').text("Only " + availableSeats + " seats available");
  876. // still store selected slot
  877. document.getElementById('selectedSlot').value =
  878. element.nextSibling.nodeValue.trim();
  880. slots.push(slotId);
  882. document.querySelectorAll('input[name="timeSlot"]').forEach(slot => {
  883. slot.parentElement.style.backgroundColor = '';
  884. slot.parentElement.style.color = '';
  885. });
  887. element.parentElement.style.backgroundColor = '#E29D25';
  888. element.parentElement.style.color = '#FFF';
  890. return;
  891. }
  892. document.getElementById('selectedSlot').value =
  893. element.nextSibling.nodeValue.trim();
  895. slots.push(slotId);
  897. console.log("Selected slots:", slots);
  899. // reset colors
  900. document.querySelectorAll('input[name="timeSlot"]').forEach(slot => {
  901. slot.parentElement.style.backgroundColor = '';
  902. slot.parentElement.style.color = '';
  903. });
  905. if (element.checked) {
  906. element.parentElement.style.backgroundColor = '#E29D25';
  907. element.parentElement.style.color = '#FFF';
  908. }
  909. }
  910. });
  911. }
  912. //exisisting
  914. /* function selectTimeSlot(element) {
  915. slots = [];
  916. document.getElementById('selectedSlot').value = element.nextSibling.nodeValue.trim(); // Get the displayed time
  917. slots.push(element.value);
  918. console.log("Selected slots:", slots);
  920. // Reset background color for all time slot radio buttons
  921. document.querySelectorAll('input[name="timeSlot"]').forEach(slot => {
  922. slot.parentElement.style.backgroundColor = ''; // Reset background color
  923. slot.parentElement.style.color = ''; // Reset background color
  924. });
  926. // Set background color to red for the selected radio button's parent element
  927. if (element.checked) {
  928. element.parentElement.style.backgroundColor = '#E29D25';
  929. element.parentElement.style.color = '#FFF';
  930. }
  931. }*/
  933. // Calculate Total Payable Amount
  935. // Reset the form
  936. function resetForm() {
  937. document.getElementById('conferenceHallForm').reset(); // Reset the form fields
  938. document.getElementById('timeSlots').innerHTML = ''; // Clear the time slots
  939. document.getElementById('selectedSlot').value = ''; // Clear selected slot
  940. document.getElementById('totalAmount').value = 'Rs. 0.00'; // Reset total amount
  941. $('#seatAvailabilityMsg').text(''); // Clear seat availability message
  942. }
  944. // Booking Action
  946. function validatePersonName() {
  947. const personName = $('#personName').val();
  948. const isValid = /^[a-zA-Z\s]+$/.test(personName); // Only letters and spaces
  950. if (isValid && personName.trim() !== "") {
  951. $('#personName').css('border-color', ''); // Clear any error styling
  952. } else {
  953. $('#personName').css('border-color', 'red'); // Highlight the field with error styling
  954. }
  955. return isValid;
  956. }
  958. function validateMobileNumber() {
  959. const mobileNumber = $('#personPhone').val();
  960. const isValid = /^\d{10}$/.test(mobileNumber); // Checks if it's exactly 10 digits
  962. if (isValid) {
  963. $('#personPhone').css('border-color', ''); // Clear any error styling
  964. } else {
  965. $('#personPhone').css('border-color', 'red'); // Highlight the field with error styling
  966. }
  967. return isValid;
  968. }
  969. // Validate Select Date (yy-mm-dd format)
  970. function validateSelectDate() {
  971. const selectDate = $('#selectDate').val();
  972. const isValid = /^\d{4}-\d{2}-\d{2}$/.test(selectDate); // Regex for yy-mm-dd format
  974. if (isValid) {
  975. $('#selectDate').css('border-color', ''); // Clear any error styling
  976. } else {
  977. $('#selectDate').css('border-color', 'red'); // Highlight the field with error styling
  978. }
  979. return isValid;
  980. }
  982. // Validate Selected Slot (Radio Button)
  983. function validateSelectedSlot() {
  984. const selectedSlot = $('#selectedSlot').val(); // Checks if any radio button is selected
  985. const isValid = !!selectedSlot;
  987. if (isValid) {
  988. $('input[name="selectedSlot"]').parent().css('border-color', ''); // Clear any error styling
  989. } else {
  990. $('input[name="selectedSlot"]').parent().css('border-color', 'red'); // Highlight the field with error styling
  991. }
  992. return isValid;
  993. }
  995. // Validate Number of Seats (Dropdown)
  996. function validateNumSeats() {
  997. const numSeats = $('#numSeats').val();
  998. const isValid = numSeats !== "default"; // Assumes 'default' is the value for unselected dropdown option
  1000. if (isValid) {
  1001. $('#numSeats').css('border-color', ''); // Clear any error styling
  1002. } else {
  1003. $('#numSeats').css('border-color', 'red'); // Highlight the field with error styling
  1004. }
  1005. return isValid;
  1006. }
  1008. function validateBookingType() {
  1009. const isBookingTypeSelected = $('input[name="booking_type"]:checked').length > 0;
  1010. const isValid = !!isBookingTypeSelected;
  1012. if (isValid) {
  1013. $('input[name="selectedSlot"]').parent().css('border-color', ''); // Clear any error styling
  1014. } else {
  1015. $('input[name="selectedSlot"]').parent().css('border-color', 'red'); // Highlight the field with error styling
  1016. }
  1017. return isValid;
  1018. }
  1020. function saveBooking() {
  1021. let msg = $('#seatAvailabilityMsg').text();
  1023. if (msg.includes("Only")) {
  1024. // alert(msg);
  1025. swal.fire({
  1026. title: "Seat Availability",
  1027. text: msg,
  1028. icon: "warning",
  1029. button: "OK",
  1030. });
  1031. return;
  1032. }
  1034. if (msg.includes("Slot Full")) {
  1035. swal.fire({
  1036. title: "Slot Full",
  1037. text: "This slot is full. Please select another slot.",
  1038. icon: "error",
  1039. button: "OK",
  1040. });
  1041. return;
  1042. }
  1044. // console.log(catId);
  1045. // console.log(buildId);
  1046. // console.log(subId);
  1047. //console.log(from_date);
  1048. //e.preventDefault(); // Prevent form submission for this example
  1050. const isMobileValid = validateMobileNumber();
  1051. const isNameValid = validatePersonName();
  1052. const isDateValid = validateSelectDate();
  1053. const isBookingTypeValid = validateBookingType();
  1054. const isSlotValid = validateSelectedSlot();
  1055. const isSeatsValid = validateNumSeats();
  1056. //alert(isMobileValid +" - "+ isNameValid +" - "+ isDateValid +" - "+ isSlotValid +" - "+ isSeatsValid );
  1057. if (isMobileValid && isNameValid && isDateValid && isBookingTypeValid && isSlotValid && isSeatsValid) {
  1058. // Proceed with form submission
  1059. //alert("Form is valid!");
  1060. } else {
  1061. // alert("Please correct the errors in the form.");
  1062. swal.fire({
  1063. title: "Form Validation",
  1064. text: "Please correct the errors in the form.",
  1065. icon: "error",
  1066. button: "OK",
  1067. });
  1068. return false;
  1069. }
  1071. // Populate the input values
  1072. let name = $('#personName').val();
  1073. let phone = $('#personPhone').val();
  1074. let fromDate = $('#selectDate').val(); // Ensure this is a different element
  1075. let subId = $('input[name="booking_type"]:checked').val();
  1076. //let subId = $('#subId').val();
  1077. let buildId = $('#buildingId').val();
  1078. let catId = $('#categoryId').val();
  1079. console.log(subId);
  1080. let toDate = fromDate; // Ensure this is a different element
  1081. if (subId == 4 || subId==12 || subId==24) {
  1082. //toDate = convertDateFormat(toDate);
  1083. let endDate = new Date(fromDate);
  1084. endDate.setDate(endDate.getDate() + 30);
  1085. let day = String(endDate.getDate()).padStart(2, '0');
  1086. let month = String(endDate.getMonth() + 1).padStart(2, '0');
  1087. let year = endDate.getFullYear();
  1089. toDate = year + "-" + month + "-" + day;
  1090. }
  1091. let selectedSlot = $('#selectedSlot').val();
  1092. let noOfPeople = $('#numSeats').val();
  1094. // Populate the span elements with the retrieved values
  1095. $('.name').text(name);
  1096. $('.mnum').text(phone);
  1097. $('.date').text(`${fromDate} to ${toDate}`);
  1098. $('.adultcount').text(noOfPeople);
  1099. $('.slot').text(selectedSlot);
  1100. $(".noOfPeoplecount").text(noOfPeople);
  1103. $.ajax({
  1104. url: '/muthalvarpadaippagam/book/api/saveInTemp',
  1105. type: 'POST',
  1106. data: {
  1107. catId: catId,
  1108. buildId: buildId,
  1109. subId: subId,
  1110. noOfPeople: noOfPeople, // Use dynamic value from the input
  1111. fromDate: fromDate,
  1112. toDate: toDate,
  1113. userName: name,
  1114. userMobile: phone,
  1115. slots: slots // Ensure this is defined and populated
  1116. },
  1117. success: function (response) {
  1118. //console.log("Akg Response:"+response);
  1119. if (response) {
  1120. let tempId = response.tempBookId;
  1121. $(".amount").text(response.amount);
  1122. let finalAmount = response.amount;
  1124. $(".amounttxt").text("Rs. " + finalAmount);
  1126. // Update the modal with a dynamic Pay Now button
  1127. $('#paynow').html(
  1128. '<button type="button" class="btn book-now-btn" data-bs-dismiss="modal" style="margin-right:10px;">Close</button>' +
  1129. '<button style="" class="btn book-now-btn" onclick="paymentStart(' + tempId + ',' + finalAmount + ')">Pay Now (Rs. ' + finalAmount + ')</button>' +
  1130. ''
  1131. );
  1133. // Open the modal
  1134. $('#ackModal').modal('show');
  1135. }
  1136. },
  1137. /*error: function (xhr, status, error) {
  1138. alert("Please select another slot. The selected slot is now full.");
  1139. console.log('Error sending data:', error);
  1140. console.log('Response text:', xhr.responseText); // Log response text for debugging
  1141. }*/
  1142. error: function (xhr) {
  1144. let msg = "Booking failed. Please try again.";
  1146. if (xhr.responseJSON && xhr.responseJSON.message) {
  1147. msg = xhr.responseJSON.message;
  1148. }
  1150. // alert(msg);
  1151. swal.fire({
  1152. title: "Booking Failed",
  1153. text: msg,
  1154. icon: "error",
  1155. button: "OK",
  1156. });
  1157. }
  1158. });
  1159. }
  1161. //date valisdation
  1162. $(document).ready(function () {
  1163. $("#selectDate").datepicker({
  1164. minDate: 0, // Current date
  1165. maxDate: 60, // Next 60 days
  1166. dateFormat: 'yy-mm-dd'
  1167. //dateFormat: 'dd-mm-yy'
  1168. });
  1169. /* $(document).ready(function () {
  1171. $("#selectDate").attr("readonly", true); // prevent manual edit
  1173. $("#selectDate").datepicker({
  1174. minDate: 0,
  1175. maxDate: 60,
  1176. dateFormat: 'yy-mm-dd',
  1177. onSelect: function(dateText) {
  1178. $("#selectDate").val(dateText);
  1179. }
  1180. });
  1182. // Block typing and pasting
  1183. $("#selectDate").on("keydown paste", function(e){
  1184. e.preventDefault();
  1185. return false;
  1186. });
  1188. // Allow opening datepicker on click
  1189. $("#selectDate").on("click", function () {
  1190. $(this).datepicker("show");
  1191. });*/
  1196. /* $("#selectDate").datepicker({
  1197. minDate: 0, // Prevent past dates
  1198. maxDate: 60, // Allow next 60 days
  1199. dateFormat: 'yy-mm-dd',
  1200. onSelect: function(dateText) {
  1201. $(this).attr("readonly", true); // Make the field read-only after selection
  1202. }
  1203. });
  1205. // Block manual typing or pasting
  1206. $("#selectDate").on("keydown paste", function(e){
  1207. e.preventDefault();
  1208. return false;
  1209. });
  1211. // Allow reopening the datepicker on click even after readonly
  1212. $("#selectDate").on("click", function () {
  1213. $(this).datepicker("show");
  1214. });*/
  1216. // Function to load available time slots
  1218. //ak dynamic
  1219. assignScidToStaticRadios();
  1223. $('#selectDate').on('change', async function () {
  1224. //alert('Date changed');
  1225. // const bookingType = document.querySelector('input[name="booking_type"]:checked').value;
  1226. // const scid = bookingType; // Retrieve scid dynamically if needed
  1227. const selectedRadio = document.querySelector('input[name="booking_type"]:checked');
  1228. $('#seatAvailabilityMsg').text('');
  1230. if (!selectedRadio || !selectedRadio.value) {
  1231. console.log("Invalid scid. Skipping slot load.");
  1232. return;
  1233. }
  1235. const scid = selectedRadio.value;
  1237. const selectedDate = $("#selectDate").val();
  1238. let catId = $('#categoryId').val();
  1240. console.log("cat")
  1241. console.log(catId);
  1244. console.log("sleted")
  1245. console.log(scid);
  1246. if (scid) {
  1247. await loadSlots(scid);
  1248. loadTimeSlots(selectedDate);
  1249. }
  1250. $('#selectedSlot').val('');
  1251. });
  1253. $('input[name="booking_type"]').on('change', async function () {
  1254. const selectedRadio = document.querySelector('input[name="booking_type"]:checked');
  1256. if (!selectedRadio || !selectedRadio.value) {
  1257. console.log("Invalid scid. Skipping slot load.");
  1258. return;
  1259. }
  1261. const scid = selectedRadio.value;
  1262. // const bookingType = document.querySelector('input[name="booking_type"]:checked').value;
  1263. // const scid = bookingType; // Retrieve scid dynamically if needed
  1264. // const scid = $('#subId').val();
  1265. let catId = $('#categoryId').val();
  1266. console.log("cat12")
  1267. console.log(catId);
  1269. const selectedDate = $("#selectDate").val();
  1270. await loadSlots(scid);
  1271. loadTimeSlots(selectedDate);
  1272. $('#selectedSlot').val('');
  1273. });
  1274. });
  1276. document.getElementById('personPhone').addEventListener('input', function (e) {
  1277. const value = e.target.value;
  1278. // Allow only digits and limit to 10 characters
  1279. e.target.value = value.replace(/\D/g, '').slice(0, 10);
  1281. // Display an error message if necessary
  1282. if (value.length < 10 && value.length > 0) {
  1283. e.target.setCustomValidity("Please enter a 10-digit mobile number.");
  1284. } else {
  1285. e.target.setCustomValidity(""); // Clear any error message
  1286. }
  1287. });
  1288. </script>
  1289. <script>
  1290. function showTour(buildingId, categoryId) {
  1291. console.log("Visit Tour Triggered - Bid:", buildingId, "Cid:", categoryId);
  1293. let url = "";
  1294. let modalId = "";
  1296. // Ensure categoryId is parsed correctly
  1297. categoryId = parseInt(categoryId);
  1299. // Determine the URL and modal ID based on the categoryId
  1300. if (categoryId === 1) {
  1301. url = "https://my.matterport.com/show/?m=gKmjwFBqnwa";
  1302. modalId = "visitTourModal";
  1303. } else if (categoryId === 3) {
  1304. url = "https://my.matterport.com/show/?m=2n8cHdtUfs8";
  1305. modalId = "visitTourModal";
  1306. } else {
  1307. // alert("No tour available for this category."); // Fallback for other cases
  1308. swal.fire({
  1309. title: "No Tour Available",
  1310. text: "No tour available for this category.",
  1311. icon: "info",
  1312. button: "OK",
  1313. });
  1314. return;
  1315. }
  1317. console.log("Resolved URL:", url, "Modal ID:", modalId);
  1319. // Dynamically set the iframe source
  1320. const iframeId = modalId === "visitTourModal" ? "visitTourIframe" : "visitTourIframe1";
  1321. document.getElementById(iframeId).src = url;
  1323. // Open the appropriate modal
  1324. const modalElement = document.getElementById(modalId);
  1325. const modalInstance = new bootstrap.Modal(modalElement);
  1326. modalInstance.show();
  1328. console.log("Modal Displayed:", modalId);
  1329. }
  1331. function showTourPopup1(link) {
  1332. const iframe = document.getElementById('visitTourIframe1');
  1333. iframe.src = link;
  1335. // Show the modal
  1336. const modal = new bootstrap.Modal(document.getElementById('visitTourModal1'));
  1337. modal.show();
  1338. }
  1339. </script>
  1340. </div>
  1341. </body>
  1343. </html>