Victoria Hall Booking for Events
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1584 lines
57 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
  3. <head th:replace="~{fragments/head :: head}"></head>
  4. <!--<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  5. <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  6. <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
  7. <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
  8. <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>-->
  9. <!--datatables-->
  10. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
  11. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
  12. <!-- Stylesheets -->
  13. <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css" />
  14. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css" />
  15. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />-->
  16. <!-- JavaScript -->
  17. <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
  18. <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js"></script>-->
  19. <!-- Stylesheets -->
  20. <link rel="stylesheet" type="text/css" href="css\MarkerCluster.css">
  21. <link rel="stylesheet" type="text/css" href="css\MarkerCluster.Default.css">
  22. <link rel="stylesheet" type="text/css" href="css\leaflet.css">
  23. <!-- JavaScript -->
  24. <script type="text/javascript" src="js\leaflet.js"></script>
  25. <script type="text/javascript" src="js\leaflet.markercluster.js"></script>
  26. <style>
  27. /* Hide button and div2 on small screens */
  28. @media only screen and (max-width: 768px) {
  29. #toggleButton {
  30. display: none;
  31. }
  32. #div2 {
  33. display: none;
  34. }
  35. .table-container {
  36. height: 300px;
  37. /* Adjust height as needed */
  38. overflow-y: auto;
  39. }
  40. }
  41. /* Optional CSS styling */
  42. .thumbnail {
  43. cursor: pointer;
  44. }
  45. .modal-dialog {
  46. margin: 30px auto;
  47. }
  48. .carousel-item img {
  49. width: 100%;
  50. height: auto;
  51. }
  52. /* Custom CSS to change the color of carousel controls */
  53. .carousel-control-prev,
  54. .carousel-control-next {
  55. color: black;
  56. }
  57. #enteredDetails {
  58. display: none
  59. }
  60. .card {
  61. max-height: 75%;
  62. }
  63. #scrollToTopBtn {
  64. display: none;
  65. position: fixed;
  66. bottom: 20px;
  67. right: 30px;
  68. height: 45px;
  69. width: 45px;
  70. z-index: 99;
  71. border: none;
  72. outline: none;
  73. background-color: #FA7F08;
  74. color: white;
  75. cursor: pointer;
  76. padding: 15px;
  77. border-radius: 50%;
  78. opacity: 50%;
  79. }
  80. #scrollToTopBtn:hover {
  81. background-color: #22BABB;
  82. opacity: 100%;
  83. }
  84. .required-field {
  85. color: red;
  86. }
  87. #amounttable {
  88. border-collapse: separate;
  89. border-spacing: 5px;
  90. /* Set cell spacing */
  91. margin-bottom: 5px;
  92. /* margin-left:30px; */
  93. }
  94. #amounttable th {
  95. padding: 2px;
  96. /* Set cell padding */
  97. border: none;
  98. text-align: center;
  99. padding: 0px 1px;
  100. width: 65%;
  101. font-size: 12px;
  102. }
  103. #amounttable td {
  104. padding: 2px;
  105. /* Set cell padding */
  106. border: none;
  107. text-align: left;
  108. width: 35%;
  109. font-size: 12px;
  110. }
  111. .swal2-container {
  112. z-index: 9999999999999 !important;
  113. /* Adjust this value if needed */
  114. }
  115. .image-container {
  116. overflow: hidden;
  117. white-space: nowrap;
  118. }
  119. .image-container img {
  120. display: inline-block;
  121. margin-right: 10px;
  122. /* Adjust as needed */
  123. animation: scrollImages 5s linear infinite;
  124. /* Adjust duration and timing function as needed */
  125. }
  126. @keyframes scrollImages {
  127. 0% {
  128. transform: translateX(0);
  129. }
  130. 100% {
  131. transform: translateX(-100%);
  132. }
  133. }
  134. #map {
  135. height: 700px;
  136. /* Adjust height as needed */
  137. width: 100%;
  138. position: relative;
  139. overflow: hidden;
  140. max-width: 100%;
  141. /* Ensure the map doesn't overflow its container */
  142. }
  143. .border-primary {
  144. border-left: white;
  145. }
  146. .swal2-container {
  147. z-index: 9999999999999 !important;
  148. /* Adjust this value if needed */
  149. }
  150. .carousel-inner img {
  151. object-fit: cover;
  152. /* Ensures images scale uniformly */
  153. height: 250px;
  154. /* Fixed height */
  155. width: 300px;
  156. /* Fixed width */
  157. margin: auto;
  158. /* Centers the image */
  159. margin-top: 20px;
  160. }
  161. .carousel {
  162. display: flex;
  163. justify-content: center;
  164. /* Center the carousel itself */
  165. }
  166. .carousel-image {
  167. max-height: 300px;
  168. /* Adjust height as needed */
  169. width: auto;
  170. margin: 0 auto;
  171. /* Center the image horizontally */
  172. }
  173. </style>
  174. <body>
  175. <!-- Pre-loader start -->
  176. <div class="theme-loader">
  177. <div class="ball-scale">
  178. <div class='contain'>
  179. <div class="ring">
  180. <div class="frame"></div>
  181. </div>
  182. <div class="ring">
  183. <div class="frame"></div>
  184. </div>
  185. <div class="ring">
  186. <div class="frame"></div>
  187. </div>
  188. <div class="ring">
  189. <div class="frame"></div>
  190. </div>
  191. <div class="ring">
  192. <div class="frame"></div>
  193. </div>
  194. <div class="ring">
  195. <div class="frame"></div>
  196. </div>
  197. <div class="ring">
  198. <div class="frame"></div>
  199. </div>
  200. <div class="ring">
  201. <div class="frame"></div>
  202. </div>
  203. <div class="ring">
  204. <div class="frame"></div>
  205. </div>
  206. <div class="ring">
  207. <div class="frame"></div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. <!-- Pre-loader end -->
  213. <div id="pcoded" class="pcoded">
  214. <div class="pcoded-container">
  215. <!-- Menu header start -->
  216. <nav th:replace="~{fragments/nav-user :: nav}"></nav>
  217. <!-- Menu header end -->
  218. <div class="pcoded-main-container">
  219. <nav th:replace="~{fragments/nav-usermenu :: nav}"></nav>
  220. <div class="pcoded-wrapper">
  221. <div class="pcoded-content">
  222. <div class="pcoded-inner-content">
  223. <!-- Main-body start -->
  224. <div class="main-body">
  225. <div class="page-wrapper">
  226. <!-- Page body start -->
  227. <div class="page-body" style="padding-top: 3%;">
  228. <div id="map" style="display:none;"><br></div>
  229. <div th:if="${newnotification != null && !newnotification.isEmpty()}"
  230. id="notification">
  231. <marquee width="100%" direction="left" height="auto" style="color:red"
  232. onmouseover="this.stop();" onmouseout="this.start();">
  233. <i class="fas fa-bell"></i> * <span th:text="${newnotification}"></span>
  234. *
  235. </marquee>
  236. </div>
  237. <div class="row" id="dashboardbody">
  238. <div class="col-sm-12">
  239. <!-- <div class="card">
  240. Check Availability Start
  241. <div class="z-depth-0">
  242. <div class="card border-dark mb-3">
  243. <div class="card-body">
  244. <div class="form-row col-sm-12 col-md-12 col-lg-12"
  245. id="formrow">
  246. <div class="col-sm-2">
  247. <label for="fromdate">From Date:<span
  248. class="required-field">*</span></label>
  249. <input class="form-control"
  250. th:value="${fromDate}" name="fromdate"
  251. type="date" id="fromdate"
  252. placeholder="dd-mm-yyyy">
  253. </div>
  254. <div class="col-sm-2">
  255. <label for="todate">To Date:<span
  256. class="required-field">*</span></label>
  257. <select class="form-control" name="todate"
  258. id="todate">
  259. <option th:value="${toDate}"
  260. th:text="${toDate}" selected></option>
  261. </select>
  262. </div>
  263. <div class="col-sm-2">
  264. <label for="startingslot">Starting Slot:<span
  265. class="required-field">*</span></label>
  266. <select class="form-control" id="startingslot"
  267. name="startingslot"
  268. aria-label="Starting Slot">
  269. <option value="0"
  270. th:selected="${startingSlot == 'Select'}">
  271. Select</option>
  272. <option value="1"
  273. th:selected="${startingSlot == 'Morning'}">
  274. Morning</option>
  275. <option value="2"
  276. th:selected="${startingSlot == 'Evening'}">
  277. Evening</option>
  278. </select>
  279. </div>
  280. <div class="col-sm-2">
  281. <label for="endingslot">Ending Slot:<span
  282. class="required-field">*</span></label>
  283. <select class="form-control" id="endingslot"
  284. name="endingslot" aria-label="Ending Slot">
  285. <option value="0"
  286. th:selected="${endingSlot == 'Select'}">
  287. Select</option>
  288. <option value="1"
  289. th:selected="${endingSlot == 'Morning'}">
  290. Morning</option>
  291. <option value="2"
  292. th:selected="${endingSlot == 'Evening'}">
  293. Evening</option>
  294. </select>
  295. </div>
  296. <div style="margin-top: 29px;">
  297. <div class="input-group-append">
  298. <button class="btn btn-outline-secondary"
  299. type="button" id="filterIcon">
  300. <i class="fas fa-filter"></i>
  301. </button>
  302. </div>
  303. </div>
  304. <div style="padding-top: 28px;display:none;margin-left:9px;"
  305. id="resetbutton">
  306. <button type="button" class="btn btn-grd-danger"
  307. onclick="resetDate()">Reset</button>
  308. </div>
  309. <div class="col-sm-2" style="padding-top: 28px;">
  310. <button type="button"
  311. class="btn btn-grd-primary"
  312. onclick="displayHallDetails()">Check
  313. Now</button>
  314. </div>
  315. <div class="col-sm-10" style="padding-top:28px;">
  316. <a
  317. href="javascript:initializeMapAndFetchCoordinates()">
  318. <i class="fas fa-map-marker-alt"></i> Click
  319. here to view Map Centers
  320. </a>
  321. </div><br><br>
  322. </div>
  323. </div>
  324. </div>
  325. </div>
  326. </div> -->
  327. <!-- <button id="toggleButton"
  328. class="btn btn-inverse btn-outline-inverse btn-icon">
  329. <i class="icofont icofont-exchange" data-toggle="tooltip"
  330. data-placement="left" title="Table/Grid View"></i>
  331. </button> -->
  332. <br>
  333. <!-- Toggle button end-->
  334. <!--Grid View start-->
  335. <br>
  336. <!-- <div id="div2" style="display: none;">
  337. Zero config.table start
  338. <div class="card">
  339. <div class="card-header">
  340. <h5>Community Hall Details</h5>
  341. </div>
  342. <div class="card-block">
  343. <div class="block-content p-0">
  344. <div class="p-sm-4 p-0">
  345. <div class="table-responsive">
  346. <table
  347. class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
  348. id="simpletable">
  349. <thead class="thead-light responsive"
  350. style="background-color: rgb(21,69,93);color: white;">
  351. <tr class="table-bordered ">
  352. <th class="text-center no-sort"
  353. width="10%">S.No</th>
  354. <th class="text-center" width="10%">
  355. Hall
  356. Name
  357. </th>
  358. <th class="text-center" width="10%">
  359. Address
  360. </th>
  361. <th class="text-center" width="10%">
  362. Landmark</th>
  363. <th class="text-center" width="10%">
  364. Seating
  365. Capacity
  366. </th>
  367. <th class="text-center" width="10%">
  368. Deposit
  369. Amount
  370. </th>
  371. <th class="text-center" width="10%">
  372. Full Day
  373. Amount
  374. </th>
  375. <th class="text-center" width="10%">
  376. Half Day
  377. Amount
  378. </th>
  379. <th>View Images</th>
  380. <th>Book Now</th>
  381. </tr>
  382. </thead>
  383. <tbody>
  384. <tr th:each="hall, i : ${halls}"
  385. class="${halls}">
  386. <td th:text="${i.count}"></td>
  387. <td th:text="${hall.hallName}"></td>
  388. <td th:text="${hall.area}"></td>
  389. <td th:text="${hall.city}"></td>
  390. <td
  391. th:text="${hall.seatingCapacity}">
  392. </td>
  393. <td th:text="${hall.depositAmount}">
  394. </td>
  395. <td th:text="${hall.fullDayRent}">
  396. </td>
  397. <td th:text="${hall.halfDayRent}">
  398. </td>
  399. <td>
  400. <a class="view-button"><span
  401. class="badge bg-primary"
  402. style="cursor: pointer;"
  403. th:onclick="viewHallImages([[${hall.hallId}]])">View</span></a>
  404. </td>
  405. <td><a href="javascript:void(0);"><span
  406. class="badge bg-success"
  407. th:onclick="return checkLoginedIn('book',[[${hall.hallId}]]);"
  408. style="cursor: pointer;">Book</span></a>
  409. </td>
  410. </tr>
  411. </tbody>
  412. </table>
  413. </div>
  414. </div>
  415. </div>
  416. </div>
  417. </div>
  418. </div> -->
  419. <div id="div2" style="display: none;">
  420. <!-- Zero config.table start -->
  421. <div class="card">
  422. <div class="card-header">
  423. <h5>Community Hall Details</h5>
  424. </div>
  425. <div class="card-block">
  426. <div class="block-content p-0">
  427. <div class="p-sm-4 p-0">
  428. <div class="table-responsive">
  429. <table
  430. class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
  431. id="simpletable">
  432. <thead class="thead-light responsive"
  433. style="background-color: rgb(21,69,93);color: white;">
  434. <tr class="table-bordered ">
  435. <th class="text-center no-sort"
  436. width="10%">S.No</th>
  437. <th class="text-center" width="10%">
  438. Hall
  439. Name
  440. </th>
  441. <th class="text-center" width="10%">
  442. Address
  443. </th>
  444. <th class="text-center" width="10%">
  445. Landmark</th>
  446. <th class="text-center" width="10%">
  447. Seating
  448. Capacity
  449. </th>
  450. <th class="text-center" width="10%">
  451. Deposit
  452. Amount
  453. </th>
  454. <th class="text-center" width="10%">
  455. Full Day
  456. Amount
  457. </th>
  458. <th class="text-center" width="10%">
  459. Half Day
  460. Amount
  461. </th>
  462. <th>View Images</th>
  463. <th>Book Now</th>
  464. </tr>
  465. </thead>
  466. <tbody>
  467. <tr th:each="hall, i : ${halls}"
  468. class="${halls}">
  469. <td th:text="${i.count}"></td>
  470. <td th:text="${hall.hallName}"></td>
  471. <td th:text="${hall.area}"></td>
  472. <td th:text="${hall.city}"></td>
  473. <td
  474. th:text="${hall.seatingCapacity}">
  475. </td>
  476. <td th:text="${hall.depositAmount}">
  477. </td>
  478. <td th:text="${hall.fullDayRent}">
  479. </td>
  480. <td th:text="${hall.halfDayRent}">
  481. </td>
  482. <td>
  483. <a class="view-button"><span
  484. class="badge bg-primary"
  485. style="cursor: pointer;"
  486. th:onclick="viewHallImages([[${hall.hallId}]])">View</span></a>
  487. </td>
  488. <td><a href="javascript:void(0);"><span
  489. class="badge bg-success"
  490. th:onclick="return checkLoginedIn('book',[[${hall.hallId}]]);"
  491. style="cursor: pointer;">Book</span></a>
  492. </td>
  493. </tr>
  494. </tbody>
  495. </table>
  496. </div>
  497. </div>
  498. </div>
  499. </div>
  500. </div>
  501. </div>
  502. </div>
  503. <!-- Zero config.table end -->
  504. <div class="modal fade" id="exampleModal" tabindex="-1"
  505. aria-labelledby="exampleModalLabel" aria-hidden="true">
  506. <div class="modal-dialog" style="width:auto;">
  507. <div class="modal-content">
  508. <div class="modal-header">
  509. <h5 class="modal-title" id="exampleModalLabel">Hall Image
  510. </h5>
  511. <button type="button" class="btn-close"
  512. data-bs-dismiss="modal" aria-label="Close"></button>
  513. </div>
  514. <div class="modal-body"
  515. style="height: 350px; overflow: hidden;">
  516. <div id="carouselExample" class="carousel slide"
  517. data-bs-ride="carousel1">
  518. <div class="carousel-inner1"
  519. style="height:auto; width:auto;">
  520. <!-- Slides will be dynamically inserted here -->
  521. </div>
  522. </div>
  523. </div>
  524. <div class="modal-footer">
  525. <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>-->
  526. </div>
  527. </div>
  528. </div>
  529. </div>
  530. <!--Image view model END-->
  531. </div>
  532. <div id="div1" style="align-items: center;">
  533. <div style="align-items: center;">
  534. <div th:each="hall : ${halls}"
  535. class="col-lg-3 col-md-6 default-grid-item"
  536. style="align-items: center;">
  537. <div class="card">
  538. <div class="masonry-media">
  539. <!--<div style="height:250px;width:300px"
  540. id="hallImagesCarousel" class="carousel slide"
  541. data-ride="carousel">
  542. <div class="carousel-inner">
  543. <img th:if="${hall.hallImagesList != null && !hall.hallImagesList.isEmpty()}"
  544. th:src="@{${hall.hallImagesList[0].hallImage}}"
  545. th:onclick="viewHallImages([[${hall.hallId}]])"
  546. class="d-block w-100 carousel-image"
  547. alt="Hall Image">
  548. </div>
  549. </div>-->
  550. <div style="height:250px;width:300px"
  551. id="hallImagesCarousel" class="carousel slide"
  552. data-ride="carousel">
  553. <div class="carousel-inner">
  554. <img th:if="${hall.hallImagesList != null && !hall.hallImagesList.isEmpty()}"
  555. th:src="@{${hall.hallImagesList[0].hallImage}}"
  556. th:onclick="viewHallImages([[${hall.hallId}]])"
  557. class="d-block carousel-image" alt="Hall Image">
  558. </div>
  559. </div>
  560. </div>
  561. <div class="card-block" id="cardblock">
  562. <h6 class="job-card-desc"><span
  563. th:text="${hall.hallName}"></span></h6>
  564. <table id="amounttable">
  565. <tr>
  566. <th class="text-muted"> Rent:</th>
  567. <td th:text="${hall.fullDayRent}"
  568. class="text-muted"></td>
  569. </tr>
  570. <!-- <tr>
  571. <th class="text-muted">Half day Rent:</th>
  572. <td th:text="${hall.halfDayRent}"
  573. class="text-muted"></td>
  574. </tr> -->
  575. <tr>
  576. <th class="text-muted"> Security
  577. Deposit:
  578. </th>
  579. <td th:text="${hall.depositAmount}"
  580. class="text-muted"></td>
  581. </tr>
  582. <!-- <tr>
  583. <th class="text-muted">Half Day Security
  584. Deposit:
  585. </th>
  586. <td th:text="${hall.halfDepositAmount}"
  587. class="text-muted"></td>
  588. </tr> -->
  589. </table>
  590. <div class="job-meta-data"><i
  591. class="icofont icofont-location-arrow"></i>
  592. <a th:attr="data-latitude=${hall.latitude}, data-longitude=${hall.longitude}"
  593. th:onclick="showHall(this)"
  594. style="cursor: pointer;">
  595. <span th:text="${hall.doorNo}"></span>,
  596. <span th:text="${hall.street}"></span>,
  597. <span th:text="${hall.area}"></span>,
  598. <br>
  599. <span th:text="${hall.city}"></span> -
  600. <span th:text="${hall.pinCode}"></span>
  601. </a>
  602. </div>
  603. <div class="job-meta-data"><i
  604. class="icofont icofont-university"></i>Capacity:
  605. <span th:text="${hall.seatingCapacity}"></span>
  606. </div>
  607. </div>
  608. <div class="row">
  609. <div class="col-md-12">
  610. <a href="javascript:void(0);"
  611. class="btn btn-primary book-button"
  612. th:onclick="return checkLoginedIn('book',[[${hall.hallId}]]);">
  613. Book
  614. </a>
  615. </div>
  616. <!-- <div class="col-md-6">
  617. <a th:href="'/victoriahallbooking/viewhallform?hallId=' + ${hall.hallId}"
  618. class="btn btn-primary book-button">View</a>
  619. </div> -->
  620. </div>
  621. </div>
  622. </div>
  623. <br>
  624. </div>
  625. </div>
  626. </div>
  627. </div>
  628. </div>
  629. </div>
  630. <a onclick="topFunction()" id="scrollToTopBtn" title="Go to top"><i
  631. class="icofont icofont-circled-up"></i></a>
  632. <footer th:replace="~{fragments/footer :: footer}"></footer>
  633. </div>
  634. </div>
  635. </div>
  636. </div>
  637. <input type="hidden" id="serverDate" th:value=${serverDate}>
  638. <div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  639. aria-hidden="true">
  640. <div class="modal-dialog modal-lg" role="document">
  641. <div class="modal-content">
  642. <div class="modal-header">
  643. <h5 class="modal-title" id="exampleModalLabel">Filter Options</h5>
  644. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
  645. style="color:black">
  646. <span aria-hidden="true">&times;</span>
  647. </button>
  648. </div>
  649. <div class="modal-body">
  650. <div class="row">
  651. <div class="col-sm-6">
  652. <label for="selectedStartDate">Selected Start Date:<span
  653. class="required-field">*</span></label>
  654. <input type="date" class="form-control" id="selectedStartDate">
  655. </div>
  656. <div class="col-sm-6">
  657. <label for="selectedEndDate">Selected End Date:<span
  658. class="required-field">*</span></label>
  659. <select class="form-control" id="selectedEndDate"></select>
  660. </div>
  661. <div class="col-sm-6">
  662. <label for="selectedMorningSlot">Selected Starting Slot:<span
  663. class="required-field">*</span></label>
  664. <select class="form-control" id="selectedMorningSlot">
  665. <option value="0">Select</option>
  666. <option value="1">Morning</option>
  667. <option value="2">Evening</option>
  668. </select>
  669. </div>
  670. <div class="col-sm-6">
  671. <label for="selectedEveningSlot">Selected Ending Slot:<span
  672. class="required-field">*</span></label>
  673. <select class="form-control" id="selectedEveningSlot">
  674. <option value="0">Select</option>
  675. <option value="1">Morning</option>
  676. <option value="2">Evening</option>
  677. </select>
  678. </div>
  679. <div class="col-sm-6">
  680. <label for="zone">Zone:</label>
  681. <select class="form-control" id="zone" name="zone" placeholder="zone"
  682. onclick="getDivision(this),loadHallsbyzone(this)" aria-label="Select Zone">
  683. <option value="">Select a Zone</option>
  684. </select>
  685. </div>
  686. <div class="col-sm-6">
  687. <label for="zone">Division:</label>
  688. <select class="form-control" id="division" name="division"
  689. onchange="loadHallsbydivision(this)" placeholder="division"
  690. aria-label="Select Division">
  691. <option value="">Select a Division</option>
  692. </select>
  693. </div>
  694. <div class="col-sm-6">
  695. <label for="selecthall">Select Hall:</label>
  696. <select class="form-control" id="selecthall" name="selecthall" aria-label="Select Hall">
  697. <option value="">Select a Hall</option>
  698. </select>
  699. </div>
  700. </div>
  701. </div>
  702. <div class="modal-footer">
  703. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  704. <button type="button" class="btn btn-primary" onclick="displayHallDetailswithFilters()">Apply
  705. Filters</button>
  706. </div>
  707. </div>
  708. </div>
  709. </div>
  710. <!-- MOdel for Map-->
  711. <div class="modal fade" id="hallDetailsModal" tabindex="-1" aria-labelledby="hallDetailsModalLabel"
  712. aria-hidden="true">
  713. <div class="modal-dialog modal-md">
  714. <div class="modal-content">
  715. <div class="modal-header">
  716. <h5 class="modal-title" id="hallDetailsModalLabel">Hall Details</h5>
  717. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
  718. style="color:black">
  719. <span aria-hidden="true">&times;</span>
  720. </button>
  721. </div>
  722. <div class="modal-body">
  723. <div id="modalContent"></div>
  724. </div>
  725. <div class="modal-footer">
  726. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  727. <button type="button" class="btn btn-primary booknow">Book Now</button>
  728. </div>
  729. </div>
  730. </div>
  731. </div><!-- end of Model Map-->
  732. </div>
  733. <div th:replace="~{fragments/loginreg :: div}"></div>
  734. <script th:replace="~{fragments/script :: script}"></script>
  735. <script th:replace="~{fragments/logRegiOtpScript :: script}"></script>
  736. <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
  737. <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
  738. <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
  739. <script>
  740. // $('.carousel').carousel({
  741. // interval: 6000
  742. // })
  743. </script>
  744. <script>
  745. $(document).ready(function () {
  746. $('#simpletable').DataTable({
  747. responsive: true,
  748. pageLength: 10,
  749. ordering: true,
  750. columnDefs: [{
  751. targets: 'no-sort',
  752. orderable: false
  753. }],
  754. dom: 'Bfrtip',
  755. buttons: [
  756. {
  757. extend: 'excelHtml5',
  758. text: 'Export to Excel',
  759. className: 'btn btn-primary'
  760. }
  761. ]
  762. });
  763. });
  764. </script>
  765. <!--Model Script End-->
  766. <!--script to show next seven days from selected from from date-->
  767. <script>
  768. $(document).ready(function () {
  769. const serverDate = new Date($("#serverDate").val() + "T00:00:00")
  770. // console.log("serverDate:", serverDate);
  771. // Get today's date
  772. var today = serverDate;
  773. var sixMonthsFromNow = new Date(serverDate);
  774. sixMonthsFromNow.setMonth(serverDate.getMonth() + 6);
  775. // console.log("sixMonthsFromNow:", sixMonthsFromNow);
  776. const day = serverDate.getDate();
  777. // If the new month has fewer days, adjust the date
  778. if (sixMonthsFromNow.getDate() !== day) {
  779. sixMonthsFromNow.setDate(0); // Moves to the last valid day of the previous month
  780. }
  781. // Set the 'min' and 'max' attributes for input fields
  782. const minDateStr = formatDateForValue(serverDate); // YYYY-MM-DD format
  783. const maxDateStr = formatDateForValue(sixMonthsFromNow);
  784. // console.log("minDateStr:", minDateStr);
  785. // console.log("maxDateStr:", maxDateStr);
  786. $("#fromdate, #todate, #selectedStartDate, #selectedEndDate").attr("min", minDateStr);
  787. $("#fromdate, #todate, #selectedStartDate, #selectedEndDate").attr("max", maxDateStr);
  788. // Populate 'todate' options based on 'fromdate'
  789. // Function to format date as dd-mm-yyyy
  790. function formatDateForText(date) {
  791. var day = ("0" + date.getDate()).slice(-2);
  792. var month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are zero-based
  793. var year = date.getFullYear();
  794. return day + '-' + month + '-' + year;
  795. }
  796. // Function to format date as yyyy-mm-dd
  797. function formatDateForValue(date) {
  798. var day = ("0" + date.getDate()).slice(-2);
  799. var month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are zero-based
  800. var year = date.getFullYear();
  801. return year + '-' + month + '-' + day;
  802. }
  803. // Handle change event for #fromdate
  804. $('#fromdate').change(function () {
  805. var fromDate = new Date($(this).val());
  806. var toDateSelect = $('#todate');
  807. toDateSelect.empty();
  808. for (var i = 0; i <= 1; i++) {
  809. var toDate = new Date(fromDate);
  810. toDate.setDate(fromDate.getDate() + i);
  811. var dateText = formatDateForText(toDate);
  812. var dateValue = formatDateForValue(toDate);
  813. toDateSelect.append($('<option>', {
  814. value: dateValue,
  815. text: dateText
  816. }));
  817. }
  818. });
  819. // Handle change event for #selectedStartDate
  820. $('#selectedStartDate').change(function () {
  821. var selectedStartDate = new Date($(this).val());
  822. var selectedEndDateSelect = $('#selectedEndDate');
  823. selectedEndDateSelect.empty();
  824. for (var i = 0; i <= 1; i++) {
  825. var selectedEndDate = new Date(selectedStartDate);
  826. selectedEndDate.setDate(selectedStartDate.getDate() + i);
  827. var dateText = formatDateForText(selectedEndDate);
  828. var dateValue = formatDateForValue(selectedEndDate);
  829. selectedEndDateSelect.append($('<option>', {
  830. value: dateValue,
  831. text: dateText
  832. }));
  833. }
  834. });
  835. // Show modal with selected values
  836. $('#filterIcon').click(function () {
  837. getZone();
  838. var fromDate = $('#fromdate').val();
  839. var toDate = $('#todate').val();
  840. var startingSlot = $('#startingslot option:selected').val();
  841. var endingSlot = $('#endingslot option:selected').val();
  842. $('#selectedStartDate').val(fromDate);
  843. // Here, we need to manually trigger the change event to ensure selectedEndDate options are populated
  844. $('#selectedStartDate').trigger('change');
  845. // Setting the selected end date after options are populated
  846. setTimeout(() => {
  847. $('#selectedEndDate').val(toDate);
  848. }, 100);
  849. $('#selectedMorningSlot').val(startingSlot);
  850. $('#selectedEveningSlot').val(endingSlot);
  851. $('#filterModal').modal({
  852. backdrop: 'static',
  853. keyboard: false
  854. });
  855. $('#filterModal').modal('show');
  856. });
  857. });
  858. function toggleButtonClicked() {
  859. var div1 = document.getElementById('div1');
  860. var div2 = document.getElementById('div2');
  861. if (div1.style.display === 'none') {
  862. div1.style.display = 'block';
  863. div2.style.display = 'none';
  864. } else {
  865. div1.style.display = 'none';
  866. div2.style.display = 'block';
  867. }
  868. }
  869. // document.getElementById('toggleButton').addEventListener('click', toggleButtonClicked);
  870. </script>
  871. <script>
  872. window.dataLayer = window.dataLayer || [];
  873. function gtag() { dataLayer.push(arguments); }
  874. gtag('js', new Date());
  875. gtag('config', 'UA-23581568-13');
  876. /*const serverDate =new Date($("#serverDate").val() + "T00:00:00")
  877. console.log("serverDate:", serverDate);
  878. // Get today's date
  879. var today = serverDate;
  880. var sixMonthsFromNow = new Date(serverDate);
  881. sixMonthsFromNow.setMonth(serverDate.getMonth() + 6);
  882. console.log("sixMonthsFromNow:", sixMonthsFromNow);
  883. const day = serverDate.getDate();
  884. // If the new month has fewer days, adjust the date
  885. if (sixMonthsFromNow.getDate() !== day) {
  886. sixMonthsFromNow.setDate(0); // Moves to the last valid day of the previous month
  887. }
  888. // Set the 'min' and 'max' attributes for input fields
  889. const minDateStr = serverDate.toISOString().split('T')[0]; // YYYY-MM-DD format
  890. const maxDateStr = sixMonthsFromNow.toISOString().split('T')[0];
  891. $("#fromdate, #todate, #selectedStartDate, #selectedEndDate").attr("min", minDateStr);
  892. $("#fromdate, #todate, #selectedStartDate, #selectedEndDate").attr("max", maxDateStr);*/
  893. // Calculate the date 6 months from now
  894. // var sixMonthsFromNow = new Date(today.getFullYear(), today.getMonth() + 6, today.getDate()+1);
  895. // Set the 'min' and 'max' attributes of the input fields to limit the date selection
  896. /*document.getElementById("fromdate").setAttribute("min", today.toISOString().split('T')[0]);
  897. document.getElementById("fromdate").setAttribute("max", sixMonthsFromNow.toISOString().split('T')[0]);
  898. document.getElementById("todate").setAttribute("min", today.toISOString().split('T')[0]);
  899. document.getElementById("todate").setAttribute("max", sixMonthsFromNow.toISOString().split('T')[0]);
  900. document.getElementById("selectedStartDate").setAttribute("min", today.toISOString().split('T')[0]);
  901. document.getElementById("selectedStartDate").setAttribute("max", sixMonthsFromNow.toISOString().split('T')[0]);
  902. document.getElementById("selectedEndDate").setAttribute("min", today.toISOString().split('T')[0]);
  903. document.getElementById("selectedEndDate").setAttribute("max", sixMonthsFromNow.toISOString().split('T')[0]);*/
  904. //Function for toggle button
  905. function toggleButtonClicked() {
  906. var hallDetailsVisible = document.getElementById('hallDetails').style.display !== 'none';
  907. // Toggle visibility of hallDetails and div4
  908. document.getElementById('hallDetails').style.display = hallDetailsVisible ? 'none' : 'block';
  909. document.getElementById('div4').style.display = hallDetailsVisible ? 'block' : 'none';
  910. }
  911. // Function to display hall details
  912. function displayHallDetails() {
  913. var fromdate = $("#fromdate").val();
  914. var todate = $("#todate").val();
  915. var startingSlot = $("#startingslot").val();
  916. var endingSlot = $("#endingslot").val();
  917. var hallId = $("#selecthall").val();
  918. if (fromdate == "" || fromdate == undefined || todate == "" || todate == undefined || startingSlot == "0" || endingSlot == "0") {
  919. Swal.fire({
  920. icon: 'error',
  921. title: 'Missing Information',
  922. text: 'Please ensure that all date and slot fields are selected.',
  923. });
  924. }
  925. else {
  926. window.location.href = '/victoriahallbooking/user/checkAvail?fromDate=' + fromdate + '&toDate=' + todate + '&starting=' + startingSlot + '&ending=' + endingSlot;
  927. $("#notification").css("display", "none");
  928. }
  929. }
  930. function checkResetButtonVisibility() {
  931. // Get the current URL
  932. var currentUrl = window.location.pathname; // Use pathname to get the path only
  933. var urlPattern = "/victoriahallbooking/user/dashboard";
  934. // Check if the current URL is exactly the pattern
  935. if (currentUrl === urlPattern) {
  936. // Hide the resetButton if the URL matches the pattern exactly
  937. document.getElementById("resetbutton").style.display = "none";
  938. } else {
  939. // Show the resetButton if the URL does not match the pattern exactly
  940. // document.getElementById("resetbutton").style.display = "block";
  941. }
  942. }
  943. // Call the function on page load
  944. window.onload = checkResetButtonVisibility;
  945. function displayHallDetailswithFilters() {
  946. var fromdate = $("#selectedStartDate").val();
  947. var todate = $("#selectedEndDate").val();
  948. var startingSlot = $("#selectedMorningSlot").val();
  949. var endingSlot = $("#selectedEveningSlot").val();
  950. var zone = $("#zone").val();
  951. var division = $("#division").val();
  952. var hallId = $("#selecthall").val();
  953. if (fromdate == "" || fromdate == undefined || todate == "" || todate == undefined || startingSlot == "0" || endingSlot == "0") {
  954. Swal.fire({
  955. icon: 'error',
  956. title: 'Missing Information',
  957. text: 'Please ensure that all date and slot fields are selected.',
  958. });
  959. }
  960. else {
  961. window.location.href = '/victoriahallbooking/user/checkAvail?fromDate=' + fromdate + '&toDate=' + todate + '&starting=' + startingSlot + '&ending=' + endingSlot + '&hallId=' + hallId + '&zone=' + zone;
  962. }
  963. }
  964. function viewHallImages(hallId) {
  965. $.ajax({
  966. type: "GET",
  967. url: '/victoriahallbooking/admin/api/getImageById',
  968. data: {
  969. 'hallId': hallId
  970. },
  971. success: function (res) {
  972. getHallImagesById(res);
  973. }
  974. });
  975. }
  976. function getHallImagesById(images) {
  977. const modalSlidesContainer = document.querySelector('.carousel-inner1');
  978. modalSlidesContainer.innerHTML = '';
  979. // Loop through the images and create thumbnail elements dynamically
  980. images.forEach((image, index) => {
  981. const slide = document.createElement('div');
  982. slide.classList.add('carousel-item');
  983. if (index === 0) {
  984. slide.classList.add('active');
  985. }
  986. const img = document.createElement('img');
  987. img.src = image.hallImage;
  988. img.alt = `Slide ${image.hallImageId}`; // Corrected this line to properly set the alt text
  989. slide.appendChild(img);
  990. modalSlidesContainer.appendChild(slide);
  991. });
  992. $('#exampleModal').modal('show'); // Show Bootstrap modal
  993. }
  994. function loadHallsbydivision(x) {
  995. var division = x.value;
  996. // Make an AJAX request to fetch halls based on the selected zone and division
  997. $.ajax({
  998. url: '/victoriahallbooking/user/api/hallsbydivision', // Replace 'backend_url' with the actual backend endpoint
  999. method: 'GET',
  1000. data: { division: division },
  1001. success: function (response) {
  1002. // Clear existing options
  1003. $('#selecthall').empty();
  1004. var selectHallDropdown = $('#selecthall'); // Select the select hall dropdown
  1005. selectHallDropdown.empty(); // Clear existing options
  1006. // Add the default "Select Hall" option
  1007. selectHallDropdown.append('<option value="" selected>Select Hall</option>');
  1008. response.forEach(function (hall) {
  1009. $('#selecthall').append('<option value="' + hall.hallId + '">' + hall.hallName + '</option>');
  1010. });
  1011. },
  1012. error: function (xhr, status, error) {
  1013. console.error('Error loading halls:', error);
  1014. }
  1015. });
  1016. }
  1017. function loadHallsbyzone(x) {
  1018. var zone = x.value;
  1019. // Make an AJAX request to fetch halls based on the selected zone and division
  1020. $.ajax({
  1021. url: '/victoriahallbooking/user/api/findhallsbyzone', // Replace 'backend_url' with the actual backend endpoint
  1022. method: 'GET',
  1023. data: { zone: zone },
  1024. success: function (response) {
  1025. // Clear existing options
  1026. $('#selecthall').empty();
  1027. var selectHallDropdown = $('#selecthall'); // Select the select hall dropdown
  1028. selectHallDropdown.empty(); // Clear existing options
  1029. // Add the default "Select Hall" option
  1030. selectHallDropdown.append('<option value="" selected>Select Hall</option>');
  1031. response.forEach(function (hall) {
  1032. $('#selecthall').append('<option value="' + hall.hallId + '">' + hall.hallName + '</option>');
  1033. });
  1034. },
  1035. error: function (xhr, status, error) {
  1036. console.error('Error loading halls:', error);
  1037. }
  1038. });
  1039. }
  1040. window.onscroll = function () { scrollFunction() };
  1041. function scrollFunction() {
  1042. if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
  1043. document.getElementById("scrollToTopBtn").style.display = "block";
  1044. } else {
  1045. document.getElementById("scrollToTopBtn").style.display = "none";
  1046. }
  1047. }
  1048. // When the user clicks on the button, scroll to the top of the document
  1049. function topFunction() {
  1050. document.body.scrollTop = 0;
  1051. document.documentElement.scrollTop = 0;
  1052. }
  1053. //Filter option date block
  1054. function setMinDate() {
  1055. var today = new Date();
  1056. var dd = String(today.getDate()).padStart(2, '0');
  1057. var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
  1058. var yyyy = today.getFullYear();
  1059. today = yyyy + '-' + mm + '-' + dd;
  1060. document.getElementById("selectedStartDate").setAttribute("min", today);
  1061. }
  1062. document.addEventListener("DOMContentLoaded", function () {
  1063. setMinDate(); // Set minimum date for selectedStartDate input on page load
  1064. // document.getElementById('filterIcon').addEventListener('click', function () {
  1065. // // Populate selectedStartDate and selectedEndDate inputs with values from regular form
  1066. // document.getElementById('selectedStartDate').value = document.getElementById('fromdate').value;
  1067. // document.getElementById('selectedEndDate').value = document.getElementById('todate').value;
  1068. // document.getElementById('selectedMorningSlot').value = document.getElementById('startingslot').value;
  1069. // document.getElementById('selectedEveningSlot').value = document.getElementById('endingslot').value;
  1070. // $('#filterModal').modal({
  1071. // backdrop: 'static',
  1072. // keyboard: false
  1073. // });
  1074. // $('#filterModal').modal('show');
  1075. // });
  1076. document.getElementById('selectedStartDate').addEventListener('change', function () {
  1077. var selectedStartDate = new Date($(this).val());
  1078. var selectedEndDate = document.getElementById('selectedEndDate');
  1079. selectedEndDate.innerHTML = ''; // Clear previous options
  1080. for (var i = 1; i <= 7; i++) {
  1081. var endDate = new Date(selectedStartDate);
  1082. endDate.setDate(selectedStartDate.getDate() + i);
  1083. var dateString = endDate.toISOString().split('T')[0];
  1084. selectedEndDate.innerHTML += '<option value="' + dateString + '">' + dateString + '</option>';
  1085. }
  1086. });
  1087. });
  1088. //filter option date end
  1089. var zoneAndDivision;
  1090. function getZone() {
  1091. $.ajax({
  1092. type: "GET",
  1093. url: '/victoriahallbooking/user/api/getZone',
  1094. success: function (data) {
  1095. zoneAndDivision = data;
  1096. const uniqueZones = [...new Set(data.map(item => item.zone))];
  1097. // Get the select element
  1098. const selectElement = document.getElementById('zone');
  1099. // Populate the select element with options
  1100. uniqueZones.forEach(zone => {
  1101. const option = document.createElement('option');
  1102. option.value = zone;
  1103. option.textContent = zone;
  1104. selectElement.appendChild(option);
  1105. });
  1106. //alert(reszone);
  1107. //$('#zone').val(reszone.zone);
  1108. }
  1109. });
  1110. }
  1111. function getDivision(x) {
  1112. const selectedZone = x.value;
  1113. const divisionSelect = document.getElementById('division');
  1114. // Clear existing options in division select
  1115. divisionSelect.innerHTML = '';
  1116. // Add the default "Select Division" option
  1117. const defaultOption = document.createElement('option');
  1118. defaultOption.value = '';
  1119. defaultOption.textContent = 'Select Division';
  1120. divisionSelect.appendChild(defaultOption);
  1121. // Filter data to get divisions for the selected zone
  1122. const divisions = [...new Set(zoneAndDivision.filter(item => item.zone === selectedZone).map(item => item.division))];
  1123. // Populate the division select element with options
  1124. divisions.forEach(division => {
  1125. const option = document.createElement('option');
  1126. option.value = division;
  1127. option.textContent = division;
  1128. divisionSelect.appendChild(option);
  1129. });
  1130. }
  1131. // document.getElementById('fromdate').addEventListener('change', checkDates);
  1132. // document.getElementById('todate').addEventListener('change', checkDates);
  1133. // document.getElementById('startingslot').addEventListener('change', checkSlots);
  1134. // document.getElementById('selectedStartDate').addEventListener('change', checkfilterDates);
  1135. // document.getElementById('selectedEndDate').addEventListener('change', checkfilterDates);
  1136. // document.getElementById('selectedMorningSlot').addEventListener('change', checkfilterSlots);
  1137. function checkDates() {
  1138. var fromDate = document.getElementById('fromdate').value;
  1139. var toDate = document.getElementById('todate').value;
  1140. var endingSlot = document.getElementById('endingslot');
  1141. if (fromDate && toDate && fromDate === toDate) {
  1142. var startingSlot = document.getElementById('startingslot').value;
  1143. if (startingSlot === '2') { // Evening
  1144. endingSlot.value = '2'; // Set Ending Slot to Evening
  1145. document.getElementById('endingslot').disabled = true;
  1146. endingSlot.getElementsByTagName('option')[1].disabled = true; // Disable Morning option
  1147. } else {
  1148. document.getElementById('endingslot').disabled = false;
  1149. endingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1150. }
  1151. } else {
  1152. document.getElementById('endingslot').disabled = false;
  1153. endingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1154. }
  1155. }
  1156. function checkfilterDates() {
  1157. var filterfromDate = document.getElementById('selectedStartDate').value;
  1158. var filtertoDate = document.getElementById('selectedEndDate').value;
  1159. var filterendingSlot = document.getElementById('selectedEveningSlot');
  1160. if (filterfromDate && filtertoDate && filterfromDate === filtertoDate) {
  1161. var filterstartingSlot = document.getElementById('selectedMorningSlot').value;
  1162. if (filterstartingSlot === '2') { // Evening
  1163. filterendingSlot.value = '2'; // Set Ending Slot to Evening
  1164. document.getElementById('selectedEveningSlot').disabled = true;
  1165. filterendingSlot.getElementsByTagName('option')[1].disabled = true; // Disable Morning option
  1166. } else {
  1167. document.getElementById('selectedEveningSlot').disabled = false;
  1168. filterendingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1169. }
  1170. } else {
  1171. document.getElementById('selectedEveningSlot').disabled = false;
  1172. filterendingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1173. }
  1174. }
  1175. function checkfilterSlots() {
  1176. var filterfromDate = document.getElementById('selectedStartDate').value;
  1177. var filtertoDate = document.getElementById('selectedEndDate').value;
  1178. var filterendingSlot = document.getElementById('selectedEveningSlot');
  1179. var filterstartingSlot = document.getElementById('selectedMorningSlot').value;
  1180. if (filterfromDate && filtertoDate && filterfromDate === filtertoDate) {
  1181. if (filterstartingSlot === '2') { // Evening
  1182. filterendingSlot.value = '2'; // Set Ending Slot to Evening
  1183. document.getElementById('selectedEveningSlot').disabled = true;
  1184. filterendingSlot.getElementsByTagName('option')[1].disabled = true; // Disable Morning option
  1185. } else {
  1186. document.getElementById('selectedEveningSlot').disabled = false;
  1187. filterendingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1188. }
  1189. } else {
  1190. document.getElementById('selectedEveningSlot').disabled = false;
  1191. filterendingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1192. }
  1193. }
  1194. function checkSlots() {
  1195. var fromDate = document.getElementById('fromdate').value;
  1196. var toDate = document.getElementById('todate').value;
  1197. var startingSlot = document.getElementById('startingslot').value;
  1198. var endingSlot = document.getElementById('endingslot');
  1199. if (fromDate && toDate && fromDate === toDate) {
  1200. if (startingSlot === '2') { // Evening
  1201. endingSlot.value = '2'; // Set Ending Slot to Evening
  1202. document.getElementById('endingslot').disabled = true;
  1203. endingSlot.getElementsByTagName('option')[1].disabled = true; // Disable Morning option
  1204. } else {
  1205. document.getElementById('endingslot').disabled = false;
  1206. endingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1207. }
  1208. } else {
  1209. document.getElementById('endingslot').disabled = false;
  1210. endingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1211. }
  1212. }
  1213. var map;
  1214. var mapInitialized = false;
  1215. function initializeMapAndFetchCoordinates() {
  1216. var mapElement = document.getElementById("map");
  1217. var dashboardBody = document.getElementById("dashboardbody");
  1218. if (mapElement.style.display === "none") {
  1219. mapElement.style.display = "block";
  1220. dashboardBody.style.display = "none";
  1221. } else {
  1222. mapElement.style.display = "none";
  1223. dashboardBody.style.display = "block";
  1224. }
  1225. mapElement.style.display = 'block';
  1226. if (!mapInitialized) {
  1227. mapInitialized = true;
  1228. setTimeout(() => {
  1229. map = L.map('map', { attributionControl: false }).setView([13.0827, 80.2707], 9);
  1230. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  1231. attributionControl: false,
  1232. maxZoom: 19
  1233. }).addTo(map);
  1234. var markers = L.markerClusterGroup();
  1235. $.ajax({
  1236. url: '/victoriahallbooking/user/api/getallhallcoordinates',
  1237. type: 'GET',
  1238. success: function (data) {
  1239. if (data.length === 0) {
  1240. console.warn('No data returned from the API');
  1241. return;
  1242. }
  1243. data.forEach(function (coord) {
  1244. var marker = L.marker([parseFloat(coord.latitude), parseFloat(coord.longitude)], /{icon: customIcon}/);
  1245. var hallImageHtml = '';
  1246. if (coord.hallImage && Array.isArray(coord.hallImage) && coord.hallImage.length > 0) {
  1247. hallImageHtml = `
  1248. <div id="hallImageCarousel" class="carousel slide" data-ride="carousel">
  1249. <div class="carousel-inner">
  1250. ${coord.hallImage.map((image, index) => `
  1251. <div class="carousel-item ${index === 0 ? 'active' : ''}">
  1252. <img src="${image.hallImage}" class="d-block w-100 fixed-size-image" alt="Hall Image">
  1253. </div>
  1254. `).join('')}
  1255. </div>
  1256. <a class="carousel-control-prev" href="#hallImageCarousel" role="button" data-slide="prev">
  1257. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  1258. <span class="sr-only">Previous</span>
  1259. </a>
  1260. <a class="carousel-control-next" href="#hallImageCarousel" role="button" data-slide="next">
  1261. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  1262. <span class="sr-only">Next</span>
  1263. </a>
  1264. </div>
  1265. `;
  1266. } else {
  1267. console.warn('coord.hallImage is either undefined, not an array, or empty.');
  1268. }
  1269. //console.log(hallImageHtml); // Log the final HTML for debugging purposes
  1270. var modalContent = `
  1271. <div class="card border-primary">
  1272. <div class="imagecontainer">${hallImageHtml}</div>
  1273. <div class="card-body bg-light" style="text-align:left">
  1274. <p class="card-text">Hall Name: <strong>${coord.hallName}</strong></p>
  1275. <p class="card-text">Address: <strong>${coord.doorNo}, ${coord.area}, ${coord.street}, ${coord.landMark}</strong></p>
  1276. <p class="card-text">Seating Capacity: <strong>${coord.seatingCapacity}</strong></p>
  1277. <p class="card-text">Parking Capacity: <strong>${coord.parkingCapacity}</strong></p>
  1278. <p class="card-text">Deposit Amount: <strong>Rs. ${coord.depositAmount}</strong></p>
  1279. <p class="card-text">Full Day Rent: <strong>Rs. ${coord.fullDayRent}</strong></p>
  1280. <p class="card-text">Half Day Rent: <strong>Rs. ${coord.halfDayRent}</strong></p>
  1281. <p class="card-text">Hall Area: <strong>${coord.hallArea} (sq.ft)</strong></p>
  1282. </div>
  1283. </div>`;
  1284. marker.on('click', function () {
  1285. $('#modalContent').html(modalContent);
  1286. $('#hallDetailsModal').modal('show');
  1287. $('#hallDetailsModal').on('click', '.booknow', function () {
  1288. redirectToPage(coord.hallId);
  1289. });
  1290. });
  1291. var tooltipContent = `<p class="card-text">Hall Name: <strong>${coord.hallName}</strong></p>`;
  1292. marker.bindTooltip(tooltipContent, {
  1293. direction: 'top',
  1294. permanent: false,
  1295. className: 'custom-tooltip'
  1296. });
  1297. markers.addLayer(marker);
  1298. });
  1299. map.addLayer(markers);
  1300. },
  1301. error: function (xhr, status, error) {
  1302. console.error('Error fetching locations:', error);
  1303. }
  1304. });
  1305. }, 100); // Delay to ensure the map container is rendered
  1306. }
  1307. // Call anotherFunction after the map is shown
  1308. anotherFunction();
  1309. }
  1310. function redirectToPage(hallId) {
  1311. alert(hallId);
  1312. window.location.href = '/victoriahallbooking/hallbookingform?hallId=' + hallId;
  1313. }
  1314. function anotherFunction() {
  1315. //console.log('Another function called');
  1316. }
  1317. function resetDate() {
  1318. window.location.href = "/victoriahallbooking/user/dashboard";
  1319. }
  1320. function showHall(element) {
  1321. const latitude = element.getAttribute('data-latitude');
  1322. const longitude = element.getAttribute('data-longitude');
  1323. var mapElement = document.getElementById("map");
  1324. var dashboardBody = document.getElementById("dashboardbody");
  1325. if (mapElement.style.display === "none") {
  1326. mapElement.style.display = "block";
  1327. dashboardBody.style.display = "none";
  1328. } else {
  1329. mapElement.style.display = "none";
  1330. dashboardBody.style.display = "block";
  1331. }
  1332. mapElement.style.display = 'block';
  1333. //console.log('Map container made visible');
  1334. if (!mapInitialized) {
  1335. mapInitialized = true;
  1336. setTimeout(() => {
  1337. map = L.map('map', { attributionControl: false }).setView([latitude, longitude], 18);
  1338. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  1339. attributionControl: false,
  1340. maxZoom: 19
  1341. }).addTo(map);
  1342. var markers = L.markerClusterGroup();
  1343. $.ajax({
  1344. url: '/victoriahallbooking/user/api/getallhallcoordinates',
  1345. type: 'GET',
  1346. success: function (data) {
  1347. if (data.length === 0) {
  1348. console.warn('No data returned from the API');
  1349. return;
  1350. }
  1351. data.forEach(function (coord) {
  1352. var marker = L.marker([parseFloat(coord.latitude), parseFloat(coord.longitude)], /{icon: customIcon}/);
  1353. if (coord.hallImage && Array.isArray(coord.hallImage) && coord.hallImage.length > 0) {
  1354. hallImageHtml = `
  1355. <div id="hallImageCarousel" class="carousel slide" data-ride="carousel">
  1356. <div class="carousel-inner">
  1357. ${coord.hallImage.map((image, index) => `
  1358. <div class="carousel-item ${index === 0 ? 'active' : ''}">
  1359. <img src="${image.hallImage}" class="d-block w-100 fixed-size-image" alt="Hall Image">
  1360. </div>
  1361. `).join('')}
  1362. </div>
  1363. <a class="carousel-control-prev" href="#hallImageCarousel" role="button" data-slide="prev">
  1364. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  1365. <span class="sr-only">Previous</span>
  1366. </a>
  1367. <a class="carousel-control-next" href="#hallImageCarousel" role="button" data-slide="next">
  1368. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  1369. <span class="sr-only">Next</span>
  1370. </a>
  1371. </div>
  1372. `;
  1373. } else {
  1374. console.warn('coord.hallImage is either undefined, not an array, or empty.');
  1375. }
  1376. var modalContent = `
  1377. <div class="card border-primary">
  1378. <div class="imagecontainer">${hallImageHtml}</div>
  1379. <div class="card-body bg-light" style="text-align:left">
  1380. <p class="card-text">Hall Name: <strong>${coord.hallName}</strong></p>
  1381. <p class="card-text">Address: <strong>${coord.doorNo}, ${coord.area}, ${coord.street}, ${coord.landMark}</strong></p>
  1382. <p class="card-text">Seating Capacity: <strong>${coord.seatingCapacity}</strong></p>
  1383. <p class="card-text">Parking Capacity: <strong>${coord.parkingCapacity}</strong></p>
  1384. <p class="card-text">Deposit Amount: <strong>Rs. ${coord.depositAmount}</strong></p>
  1385. <p class="card-text">Full Day Rent: <strong>Rs. ${coord.fullDayRent}</strong></p>
  1386. <p class="card-text">Half Day Rent: <strong>Rs. ${coord.halfDayRent}</strong></p>
  1387. <p class="card-text">Hall Area: <strong>${coord.hallArea} (sq.ft)</strong></p>
  1388. </div>
  1389. </div>`;
  1390. marker.on('click', function () {
  1391. $('#modalContent').html(modalContent);
  1392. $('#hallDetailsModal').modal('show');
  1393. $('#hallDetailsModal').on('click', '.booknow', function () {
  1394. redirectToPage(coord.hallId);
  1395. });
  1396. });
  1397. var tooltipContent = `<p class="card-text">Hall Name: <strong>${coord.hallName}</strong></p>`;
  1398. marker.bindTooltip(tooltipContent, {
  1399. direction: 'top',
  1400. permanent: false,
  1401. className: 'custom-tooltip'
  1402. });
  1403. markers.addLayer(marker);
  1404. });
  1405. map.addLayer(markers);
  1406. },
  1407. error: function (xhr, status, error) {
  1408. console.error('Error fetching locations:', error);
  1409. }
  1410. });
  1411. }, 100); // Delay to ensure the map container is rendered
  1412. }
  1413. }
  1414. </script>
  1415. </body>
  1416. </html>