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.

932 lines
43 KiB

3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!doctype html>
  2. <html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta charset="UTF-8">
  6. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
  7. integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  8. <script src="assets/js/lib/jquery.min.js"></script>
  9. <title>Community Hall Availability</title>
  10. <style>
  11. body {
  12. background-color: #f8f9fa;
  13. }
  14. .card {
  15. border-radius: 15px;
  16. box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  17. }
  18. .community-hall-title {
  19. color: #007bff;
  20. }
  21. /* Add your custom styles here */
  22. @media (max-width: 576px) {
  23. /* Small devices (576px and down) */
  24. .community-hall-title {
  25. font-size: 1.5rem;
  26. }
  27. }
  28. .custom-select {
  29. position: relative;
  30. display: inline-block;
  31. }
  32. .custom-select select {
  33. appearance: none;
  34. -webkit-appearance: none;
  35. -moz-appearance: none;
  36. padding: 8px;
  37. border: 1px solid #ccc;
  38. border-radius: 4px;
  39. width: 200px; /* Adjust the width as needed */
  40. cursor: pointer;
  41. }
  42. .custom-select:after {
  43. content: '\25BC'; /* Unicode character for down arrow */
  44. position: absolute;
  45. top: 50%;
  46. right: 10px;
  47. transform: translateY(-50%);
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div class="container mt-3">
  53. <div class="card">
  54. <div class="card-body">
  55. <form>
  56. <h3 class="community-hall-title-sub">Select Your Community Hall:</h3>
  57. <div class="row">
  58. <div class="col-sm-6 " id="zoneSection">
  59. <label class="form-label" for="zone">Select Zone<span class="text-danger">*</span></label>
  60. <select class="form-control text-center" name="zone" id="zone" onchange="getdivision()" required>
  61. <option value="0">....Select zone.... </option>
  62. <option value="01">01_Thiruvottyur </option>
  63. <option value="02">02-Manali</option>
  64. <option value="03">03-Madhavaram</option>
  65. <option value="04">04-Tondiarpet</option>
  66. <option value="05">05-Royapuram</option>
  67. <option value="06">06-Thiru-vi-ka</option>
  68. <option value="07">07-Ambttur</option>
  69. <option value="08">08-Anna Nagar</option>
  70. <option value="09">09-teynampet</option>
  71. <option value="10">10-Kodambakkam</option>
  72. <option value="11">11-Valasaravakkam</option>
  73. <option value="12">12-Alandaur</option>
  74. <option value="13">13-Adyar</option>
  75. <option value="14">14-perungudi</option>
  76. <option value="15">15-Sholiganallur</option>
  77. </select>
  78. </div>
  79. <div class="col-12 col-md-6" >
  80. <label for="divs" class="form-label">Division</label>
  81. <select id="divs" name="divs" class="form-control text-center" onchange="getHall()" required>
  82. <option value="01">....select division....</option>
  83. <!-- Your options go here -->
  84. </select>
  85. </div>
  86. </div>
  87. <div class="row mt-3">
  88. <div class="col-12 col-md-6" id="divisionSection">
  89. <label for="hall" class="form-label"> Community Hall *</label>
  90. <select id="hall" name="hall" class="form-control text-center" onchange="changediv()" required>
  91. <option value="">Select Community Hall *:</option>
  92. <!-- Your options go here -->
  93. </select>
  94. </div>
  95. </div>
  96. <div class="row mt-3">
  97. <div class="col-12">
  98. <label class="form-label">Select month and Year *</label>
  99. <select id="month" class="form-control text-center" size="1" tabindex="2" required>
  100. <option value="">....Select Month....</option>
  101. <option value="1">January </option>
  102. <option value="2">February</option>
  103. <option value="3">March</option>
  104. <option value="4">April</option>
  105. <option value="5">May</option>
  106. <option value="6">June</option>
  107. <option value="7">July</option>
  108. <option value="8">August</option>
  109. <option value="9">September</option>
  110. <option value="10">October</option>
  111. <option value="11">November</option>
  112. <option value="12">December</option>
  113. </select>
  114. <br>
  115. <select id="sel_year" class="form-control text-center" size="1" tabindex="3" required>
  116. <option value="">.....Select Year...</option>
  117. </select>
  118. </div>
  119. </div>
  120. <br>
  121. <div class="row mt-3 justify-content-end">
  122. <div class="col-12">
  123. <a class="nav-link" href="/assets/media/images/Community_Centers_list.pdf"
  124. target="Gcc-Community Centers"> List Of Community Centres - Details Of Rent, Gst And
  125. Security Deposit </a>
  126. <input type="button" value="Check" onclick="chk_code()" name="B1" tabindex="5"
  127. class="btn btn-primary" id="Button1" />
  128. </div>
  129. </div>
  130. </form>
  131. </div>
  132. </div>
  133. <div id="DETAILS" style="display: none;">
  134. <div class="row">
  135. <div class="col-12">
  136. <div id="legend1" class="textContent">
  137. <p>
  138. <img src="/assets/media/images/booked.png"> - Blocked,
  139. <img src="/assets/media/images/Not-booked.png"> - Not Booked,
  140. <img src="/assets/media/images/resgister.png"> - Registered,
  141. <input class="avail-date-icon" type="checkbox" disabled=""> - Available<br>
  142. Mor - Morning, Eve - Evening<br><br>
  143. For a full day, select both "Mor" (Morning slot) and "Eve" (Evening Slot).
  144. </p>
  145. </div>
  146. </div>
  147. </div>
  148. <div class="row">
  149. <div class="col-12">
  150. <div align="center" id="" class="table-responsive">
  151. <table width="80%" border="0" cellpadding="4" cellspacing="0" class="tableBorder">
  152. <tbody>
  153. <tr>
  154. <td class="tableRow" width="20%">
  155. <div align="center">
  156. <b>
  157. <font size="3+">1</font>
  158. </b><br>
  159. <input type="checkbox" id="morningHalf01" name="chkbox2m30" class="checkbox">&nbsp;&nbsp;&nbsp;
  160. <input type="checkbox" id="eveningHalf01" name="chkbox2e30"class="checkbox"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  161. </div>
  162. </td>
  163. <td class="tableRow" width="20%">
  164. <div align="center">
  165. <b>
  166. <font size="3+">2</font>
  167. </b><br><input type="checkbox" id="morningHalf02" name="chkbox2m30" class="checkbox">&nbsp;&nbsp;&nbsp;<input
  168. type="checkbox" id="eveningHalf02" name="chkbox2e30" class="checkbox"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  169. </div>
  170. </td>
  171. <td class="tableRow" width="20%">
  172. <div align="center">
  173. <b>
  174. <font size="3+">3</font>
  175. </b><br><input type="checkbox" id="morningHalf03" name="chkbox3m30" class="checkbox">&nbsp;&nbsp;&nbsp;<input
  176. type="checkbox" id="eveningHalf03" name="chkbox3e30" class="checkbox"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  177. </div>
  178. </td>
  179. </tr>
  180. <tr>
  181. <td class="tableRow" width="20%">
  182. <div align="center">
  183. <b>
  184. <font size="3+">4</font>
  185. </b><br><input type="checkbox" id="morningHalf04" name="chkbox4m30" class="checkbox">&nbsp;&nbsp;&nbsp;<input
  186. type="checkbox" id="eveningHalf04" name="chkbox4e30" class="checkbox"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  187. </div>
  188. </td>
  189. <td class="tableRow" width="20%">
  190. <div align="center">
  191. <b>
  192. <font size="3+">5</font>
  193. </b><br><input type="checkbox" id="morningHalf05" name="chkbox5m30" class="checkbox">&nbsp;&nbsp;&nbsp;<input
  194. type="checkbox" id="eveningHalf05" name="chkbox5e30" ><br>Mor&nbsp;&nbsp;&nbsp;Eve
  195. </div>
  196. </td>
  197. <td class="tableRow" width="20%">
  198. <div align="center">
  199. <b>
  200. <font size="3+">6</font>
  201. </b><br><input type="checkbox" id="morningHalf06" name="chkbox6m30">&nbsp;&nbsp;&nbsp;<input
  202. type="checkbox" id="eveningHalf06" name="chkbox6e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  203. </div>
  204. </td>
  205. <tr>
  206. <td class="tableRow" width="20%">
  207. <div align="center">
  208. <b>
  209. <font size="3+">7</font>
  210. </b><br><input type="checkbox" id="morningHalf07" name="chkbox7m30">&nbsp;&nbsp;&nbsp;<input
  211. type="checkbox" id="eveningHalf07" name="chkbox7e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  212. </div>
  213. </td>
  214. <td class="tableRow" width="20%">
  215. <div align="center">
  216. <b>
  217. <font size="3+">8</font>
  218. </b><br><input type="checkbox" id="morningHalf08" name="chkbox8m30">&nbsp;&nbsp;&nbsp;<input
  219. type="checkbox" id="eveningHalf08" name="chkbox8e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  220. </div>
  221. </td>
  222. <td class="tableRow" width="20%">
  223. <div align="center">
  224. <b>
  225. <font size="3+">9</font>
  226. </b><br><input type="checkbox" id="morningHalf09" name="chkbox9m30">&nbsp;&nbsp;&nbsp;<input
  227. type="checkbox" id="eveningHalf09" name="chkbox9e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  228. </div>
  229. </td>
  230. </tr>
  231. <tr>
  232. <td class="tableRow" width="20%">
  233. <div align="center">
  234. <b>
  235. <font size="3+">10</font>
  236. </b><br><input type="checkbox" id="morningHalf10" name="chkbox10m30">&nbsp;&nbsp;&nbsp;<input
  237. type="checkbox" id="eveningHalf10" name="chkbox10e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  238. </div>
  239. </td>
  240. <td class="tableRow" width="20%">
  241. <div align="center">
  242. <b>
  243. <font size="3+">11</font>
  244. </b><br><input type="checkbox" id="morningHalf11" name="chkbox11m30">&nbsp;&nbsp;&nbsp;<input
  245. type="checkbox" id="eveningHalf11" name="chkbox11e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  246. </div>
  247. </td>
  248. <td class="tableRow" width="20%">
  249. <div align="center">
  250. <b>
  251. <font size="3+">12</font>
  252. </b><br><input type="checkbox" id="morningHalf12" name="chkbox12m30">&nbsp;&nbsp;&nbsp;<input
  253. type="checkbox" id="eveningHalf12" name="chkbox12e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  254. </div>
  255. </td>
  256. </tr>
  257. <tr>
  258. <td class="tableRow" width="20%">
  259. <div align="center">
  260. <b>
  261. <font size="3+">13</font>
  262. </b><br><input type="checkbox" id="morningHalf13" name="chkbox13m30">&nbsp;&nbsp;&nbsp;<input
  263. type="checkbox" id="eveningHalf13" name="chkbox13e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  264. </div>
  265. </td>
  266. <td class="tableRow" width="20%">
  267. <div align="center">
  268. <b>
  269. <font size="3+">14</font>
  270. </b><br><input type="checkbox" id="morningHalf14" name="chkbox14m30">&nbsp;&nbsp;&nbsp;<input
  271. type="checkbox" id="eveningHalf14" name="chkbox14e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  272. </div>
  273. </td>
  274. <td class="tableRow" width="20%">
  275. <div align="center">
  276. <b>
  277. <font size="3+">15</font>
  278. </b><br><input type="checkbox" id="morningHalf15" name="chkbox15m30">&nbsp;&nbsp;&nbsp;<input
  279. type="checkbox" id="eveningHalf15" name="chkbox15e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  280. </div>
  281. </td>
  282. </tr>
  283. <tr>
  284. <td class="tableRow" width="20%">
  285. <div align="center">
  286. <b>
  287. <font size="3+">16</font>
  288. </b><br><input type="checkbox" id="morningHalf16" name="chkbox16m30">&nbsp;&nbsp;&nbsp;<input
  289. type="checkbox" id="eveningHalf16" name="chkbox16e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  290. </div>
  291. </td>
  292. <td class="tableRow" width="20%">
  293. <div align="center">
  294. <b>
  295. <font size="3+">17</font>
  296. </b><br><input type="checkbox" id="morningHalf17" name="chkbox17m30">&nbsp;&nbsp;&nbsp;<input
  297. type="checkbox" id="eveningHalf17" name="chkbox17e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  298. </div>
  299. </td>
  300. <td class="tableRow" width="20%">
  301. <div align="center">
  302. <b>
  303. <font size="3+">18</font>
  304. </b><br><input type="checkbox" id="morningHalf18" name="chkbox18m30">&nbsp;&nbsp;&nbsp;<input
  305. type="checkbox" id="eveningHalf18" name="chkbox18e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  306. </div>
  307. </td>
  308. </tr>
  309. <tr>
  310. <td class="tableRow" width="20%">
  311. <div align="center">
  312. <b>
  313. <font size="3+">19</font>
  314. </b><br><input type="checkbox" id="morningHalf19" name="chkbox19m30">&nbsp;&nbsp;&nbsp;<input
  315. type="checkbox" id="eveningHalf19" name="chkbox19e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  316. </div>
  317. </td>
  318. <td class="tableRow" width="20%">
  319. <div align="center">
  320. <b>
  321. <font size="3+">20</font>
  322. </b><br><input type="checkbox" id="morningHalf20" name="chkbox20m30">&nbsp;&nbsp;&nbsp;<input
  323. type="checkbox" id="eveningHalf20" name="chkbox20e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  324. </div>
  325. </td>
  326. <td class="tableRow" width="20%">
  327. <div align="center">
  328. <b>
  329. <font size="3+">21</font>
  330. </b><br><input type="checkbox" id="morningHalf21" name="chkbox21m30">&nbsp;&nbsp;&nbsp;
  331. <input type="checkbox" id="eveningHalf21" name="chkbox21e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  332. </div>
  333. </td>
  334. </tr>
  335. <tr>
  336. <td class="tableRow" width="20%">
  337. <div align="center">
  338. <b>
  339. <font size="3+">22</font>
  340. </b><br><input type="checkbox" id="morningHalf22" name="chkbo22m30">&nbsp;&nbsp;&nbsp;<input
  341. type="checkbox" id="eveningHalf22" name="chkbox22e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  342. </div>
  343. </td>
  344. <td class="tableRow" width="20%">
  345. <div align="center">
  346. <b>
  347. <font size="3+">23</font>
  348. </b><br><input type="checkbox" id="morningHalf23" name="chkbox23m30">&nbsp;&nbsp;&nbsp;<input
  349. type="checkbox" id="eveningHalf23" name="chkbox23e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  350. </div>
  351. </td>
  352. <td class="tableRow" width="20%">
  353. <div align="center">
  354. <b>
  355. <font size="3+">24</font>
  356. </b><br><input type="checkbox" id="morningHalf24" name="chkbox24m30">&nbsp;&nbsp;&nbsp;<input
  357. type="checkbox" id="eveningHalf24" name="chkbox24e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  358. </div>
  359. </td>
  360. </tr>
  361. <tr>
  362. <td class="tableRow" width="20%">
  363. <div align="center">
  364. <b>
  365. <font size="3+">25</font>
  366. </b><br><input type="checkbox" id="morningHalf25" name="chkbox25m30">&nbsp;&nbsp;&nbsp;<input
  367. type="checkbox" id="eveningHalf25" name="chkbox25e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  368. </div>
  369. </td>
  370. <td class="tableRow" width="20%">
  371. <div align="center">
  372. <b>
  373. <font size="3+">26</font>
  374. </b><br><input type="checkbox" id="morningHalf26" name="chkbox26m30">&nbsp;&nbsp;&nbsp;<input
  375. type="checkbox" id="eveningHalf26" name="chkbox26e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve </div>
  376. </td>
  377. <td class="tableRow" width="20%">
  378. <div align="center">
  379. <b>
  380. <font size="3+">27</font>
  381. </b><br><input type="checkbox" id="morningHalf27" name="chkbox27m30">&nbsp;&nbsp;&nbsp;<input
  382. type="checkbox" id="eveningHalf27" name="chkbox27e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  383. </div>
  384. </td>
  385. </tr>
  386. <tr>
  387. <td class="tableRow" width="20%">
  388. <div align="center">
  389. <b>
  390. <font size="3+">28</font>
  391. </b><br><input type="checkbox" id="morningHalf28" name="chkbox28m30">&nbsp;&nbsp;&nbsp;<input
  392. type="checkbox" id="eveningHalf28" name="chkbox28e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  393. </div>
  394. </td>
  395. <td class="tableRow" width="40%" id="row29">
  396. <div align="center">
  397. <b>
  398. <font size="3+">29</font>
  399. </b><br><input type="checkbox" id="morningHalf29" name="chkbox29m30">&nbsp;&nbsp;&nbsp;<input
  400. type="checkbox" id="eveningHalf29" name="chkbox29e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  401. </div>
  402. </td>
  403. <td class="tableRow" width="40%" id="row30">
  404. <div align="center">
  405. <b>
  406. <font size="3+">30</font>
  407. </b><br><input type="checkbox" id="morningHalf30" name="chkbox30m30">&nbsp;&nbsp;&nbsp;<input
  408. type="checkbox" id="eveningHalf30" name="chkbox30e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  409. </div>
  410. </td>
  411. </tr>
  412. <tr id="row31">
  413. <td class="tableRow" width="40%">
  414. <div align="center">
  415. <b>
  416. <font size="3+">31</font>
  417. </b><br><input type="checkbox" id="morningHalf31" name="chkbox31m30">&nbsp;&nbsp;&nbsp;<input
  418. type="checkbox" id="eveningHalf31" name="chkbox31e30"><br>Mor&nbsp;&nbsp;&nbsp;Eve
  419. </div>
  420. </td>
  421. </tr>
  422. </tr>
  423. </tbody>
  424. </table>
  425. <!-- Your table with checkboxes goes here -->
  426. </div>
  427. </div>
  428. </div>
  429. <div class="row">
  430. <div class="col-12">
  431. <div align="center" id="availTab" class="table-responsive">
  432. <table class="table tableBorder">
  433. <tbody>
  434. <tr>
  435. <td align="left" valign="top" class="tableRow"><strong>Community Hall Details
  436. </strong>
  437. </td>
  438. </tr>
  439. <tr>
  440. <td align="right" valign="top" class="tableRow">
  441. <table border="0" cellpadding="4" cellspacing="0">
  442. <tbody>
  443. <tr>
  444. <td width="23%">HALF DAY RATE</td>
  445. <td width="30%">:
  446. <input type="text" name="halfdayamt" id="halfdayamt" class="bgListTextArea" readonly="true" size="12" fdprocessedid="tekels" value="800.0">
  447. </td>
  448. </tr>
  449. <tr>
  450. <td width="18%">SURCHARGES</td>
  451. <td width="29%">:
  452. <input type="text" name="halfdaysurcharge" id="halfdaysurcharge"
  453. class="bgListTextArea" readonly="true" size="12"
  454. fdprocessedid="2nghg">
  455. </td>
  456. </tr>
  457. <tr>
  458. <td>FULL DAY RATE</td>
  459. <td>:
  460. <input type="text" name="fulldayamt" id="fulldayamt"
  461. class="bgListTextArea" readonly="true" size="12"
  462. fdprocessedid="vinum" value="1500.0">
  463. </td>
  464. </tr>
  465. <tr>
  466. <td>SURCHARGES</td>
  467. <td>:
  468. <input type="text" name="fulldaysurcharge" id="fulldaysurcharge"
  469. class="bgListTextArea" readonly="true" size="12"
  470. fdprocessedid="6uydm9">
  471. </td>
  472. </tr>
  473. <tr>
  474. <td>ADVANCE</td>
  475. <td>:
  476. <input type="text" name="advanceamt" id="advanceamt"
  477. class="bgListTextArea" readonly="true" size="12"
  478. fdprocessedid="7799zc" value="0.0">
  479. </td>
  480. </tr>
  481. <tr>
  482. <td>DEPOSIT</td>
  483. <td>:
  484. <input type="text" name="depositeamt" id="depositeamt"
  485. class="bgListTextArea" readonly="true" size="12"
  486. fdprocessedid="td0q6q" value="1500.0">
  487. </td>
  488. </tr>
  489. <tr>
  490. <td>CAPACITY</td>
  491. <td>:
  492. <input name="capacity" type="text" id="capacity" class="bgListTextArea"
  493. size="12" readonly="true" fdprocessedid="esnsa9"
  494. value="300 Seats">
  495. </td>
  496. </tr>
  497. <tr>
  498. <td>RENTAL</td>
  499. <td>:<input name="rental" type="text" id="rental" class="bgListTextArea"
  500. size="12" readonly="true" fdprocessedid="2o3ddc" value="0">
  501. </td>
  502. </tr>
  503. <tr>
  504. <td>GST</td>
  505. <td>:
  506. <input name="servicetax" type="text" class="bgListTextArea"
  507. size="12" readonly="true" fdprocessedid="1ba8jj" value="0">
  508. </td>
  509. </tr>
  510. <tr>
  511. <td>&nbsp;</td>
  512. <td>&nbsp;</td>
  513. </tr>
  514. <tr>
  515. <td>FULL DAY EB , CLEANING AND PA SYSTEM CHARGES</td>
  516. <td>:
  517. <input name="eb_pa_full_amt" id="eb_pa_full_amt" type="text"
  518. class="bgListTextArea" size="12" readonly="true"
  519. fdprocessedid="gbcxpd" value="0">
  520. </td>
  521. </tr>
  522. <tr>
  523. <td>&nbsp;GST</td>
  524. <td>&nbsp; <input name="eb_pa_full_serv" id="eb_pa_full_serv"
  525. type="text" class="bgListTextArea" size="12" readonly="true"
  526. fdprocessedid="ujdozo" value="0"></td>
  527. </tr>
  528. <tr>
  529. <td>HALF DAY EB , CLEANING AND PA SYSTEM CHARGES</td>
  530. <td>:
  531. <input name="eb_pa_half_amt" id="eb_pa_half_amt" type="text"
  532. class="bgListTextArea" size="12" readonly="true"
  533. fdprocessedid="i7hpg" value="0">
  534. </td>
  535. </tr>
  536. <tr>
  537. <td>&nbsp;GST</td>
  538. <td>&nbsp; <input name="eb_pa_halft_serv" id="eb_pa_halft_serv"
  539. type="text" class="bgListTextArea" size="12" readonly="true"
  540. fdprocessedid="0tnm04" value="0"></td>
  541. </tr>
  542. </tbody>
  543. </table>
  544. </td>
  545. </tr>
  546. </tbody>
  547. </table>
  548. </div>
  549. </div>
  550. </div>
  551. </div>
  552. </div>
  553. </div>
  554. </form>
  555. <script>
  556. function chk_code() {
  557. // var z = document.getElementById("zone").value;
  558. var h =document.getElementById("hall").value;
  559. var y =document.getElementById("sel_year").value;
  560. var m =document.getElementById("month").value;
  561. var len = m.length;
  562. var ld=getDaysInMonth(y,m);
  563. if(len<2){
  564. m="0"+m;
  565. }
  566. var fromdate = y+"-"+m+"-01";
  567. var todate = y+"-"+m+"-"+ld;
  568. $.ajax({
  569. url: '/community/api/getHallByMonthAndYear', // Replace with the actual URL to retrieve division data
  570. method: 'GET',
  571. data: {
  572. hallId:h,
  573. fromDay: fromdate ,
  574. toDay: todate,
  575. },
  576. success: function (data) {
  577. setCalendarStatus(data);
  578. displayCheckboxes(ld);
  579. },
  580. error: function (error) {
  581. }
  582. });
  583. document.getElementById("DETAILS").style.display = "block";
  584. }
  585. function setCalendarStatus(data) {
  586. console.log(data);
  587. // Create an object to store status information
  588. var statusInformation = {};
  589. for (var i = 0; i < data.length; i++) {
  590. var currentDate = data[i].date;
  591. var morningHalfValue = data[i].morningHalf;
  592. var eveningHalfValue = data[i].eveningHalf;
  593. console.log(data[i].date);
  594. // Set the status for morningHalf
  595. var morningHalfCheckbox = document.getElementById("morningHalf" + currentDate);
  596. morningHalfCheckbox.checked = morningHalfValue === 1;
  597. morningHalfCheckbox.disabled = morningHalfValue === 1;
  598. // Set the status for eveningHalf
  599. var eveningHalfCheckbox = document.getElementById("eveningHalf" + currentDate);
  600. eveningHalfCheckbox.checked = eveningHalfValue === 1;
  601. eveningHalfCheckbox.disabled = eveningHalfValue === 1;
  602. // Store the status information in the object
  603. statusInformation[currentDate] = {
  604. morningHalf: morningHalfValue,
  605. eveningHalf: eveningHalfValue
  606. };
  607. }
  608. // console.log(statusInformation);
  609. }
  610. </script>
  611. <script>
  612. function getDaysInMonth(year, month) {
  613. // Adjust the month to be 0-based if your calendar starts with December
  614. const adjustedMonth = (month + 11) % 12;
  615. const isLeap = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
  616. const daysInMonth = new Date(year, adjustedMonth + 1, 0).getDate();
  617. if (adjustedMonth === 1 && isLeap) {
  618. return 29; // February has 29 days in a leap year
  619. } else {
  620. return daysInMonth;
  621. }
  622. }
  623. function populateYears() {
  624. var currentYear = new Date().getFullYear();
  625. var string="";
  626. for (let i=0;i<2;i++) {
  627. string = string + "<option value=" + currentYear + ">" + currentYear + "</option>";
  628. currentYear=currentYear+1;
  629. }
  630. document.getElementById("sel_year").innerHTML = string;
  631. }
  632. // Call the functions to populate months and years
  633. populateYears();
  634. function getdivision(zone) {
  635. var z = document.getElementById("zone").value;
  636. $.ajax({
  637. url: '/community/api/getHall', // Replace with the actual URL to retrieve division data
  638. method: 'GET',
  639. data: { zone: z },
  640. success: function (data) {
  641. setDivisionAndHall(data)
  642. },
  643. error: function (error) {
  644. console.error('Error fetching division data:', error);
  645. }
  646. });
  647. }
  648. var hallIndex=0;
  649. var hallInfo;
  650. function setDivisionAndHall(data) {
  651. var string = "";
  652. hallInfo=data;
  653. console.log(data);
  654. string= string + "<option value=''>" + "</option>";
  655. for (let i = 0; i < data.length; i++) {
  656. string = string + "<option value=" + data[i].COMMUNITYHALLDIVID + ">" + data[i].COMMUNITYHALLDIVID + "</option>";
  657. }
  658. document.getElementById("divs").innerHTML = string;
  659. var hallName = "";
  660. hallName= hallName + "<option value=''>" + "</option>";
  661. for (let i = 0; i < data.length; i++) {
  662. hallName = hallName + "<option value=" + data[i].COMMUNITYHALLCODE + ">" + data[i].COMMUNITYHALLPLACE + "</option>";
  663. }
  664. document.getElementById("hall").innerHTML = hallName;
  665. }
  666. function getHall() {
  667. var z = document.getElementById("zone").value;
  668. var d = document.getElementById("divs").value;
  669. for(let i=0;i<hallInfo.length;i++){
  670. if(hallInfo[i].COMMUNITYHALLDIVID==d)
  671. {
  672. document.getElementById("hall").value=hallInfo[i].COMMUNITYHALLCODE;
  673. setHallAmount(i);
  674. hallIndex=i;
  675. break;
  676. }
  677. }
  678. }
  679. function changediv() {
  680. var hallValue = document.getElementById("hall").value;
  681. for (let i = 0; i <hallInfo.length; i++) {
  682. if (hallInfo[i].COMMUNITYHALLCODE == hallValue) {
  683. document.getElementById("divs").value = hallInfo[i].COMMUNITYHALLDIVID;
  684. setHallAmount(i);
  685. hallIndex=i;
  686. break;
  687. }
  688. }
  689. }
  690. var count = 0;
  691. $(document).ready(function () {
  692. var lastClickedIndex = null;
  693. $(":checkbox").click(function () {
  694. if (!$(this).is(':disabled')) {
  695. var currentIndex = $(":checkbox:enabled").index(this);
  696. if ($(this).prop("checked")) {
  697. count++;
  698. IncrementOrDecHallAmt();
  699. } else {
  700. count--;
  701. IncrementOrDecHallAmt();
  702. }
  703. if (lastClickedIndex === null || isConsecutive(currentIndex, lastClickedIndex)) {
  704. if ($(":checkbox:checked:enabled").length > 14) {
  705. alert("You can only select checkboxes in sequence.");
  706. $(this).prop("checked", false);
  707. } else {
  708. lastClickedIndex = currentIndex;
  709. }
  710. } else {
  711. alert("Please select checkboxes in sequences of 14 Days.");
  712. $(this).prop("checked", false);
  713. }
  714. }
  715. });
  716. function isConsecutive(currentIndex, lastClickedIndex) {
  717. return Math.abs(currentIndex - lastClickedIndex) === 1;
  718. }
  719. function showRemoveConfirmation(currentIndex) {
  720. if (confirm("Do you want to remove this checkbox and uncheck subsequent checkboxes?")) {
  721. // Uncheck subsequent checkboxes
  722. $(":checkbox:enabled:gt(" + currentIndex + "):checked").prop("checked", false);
  723. // Enable previous checkboxes to be unchecked
  724. $(":checkbox:enabled:lt(" + currentIndex + ")").prop("disabled", false);
  725. } else {
  726. // Revert the checkbox state to checked if the user cancels the removal
  727. $(":checkbox:enabled:eq(" + currentIndex + ")").prop("checked", true);
  728. }
  729. }
  730. });
  731. function setHallAmount(i){
  732. let fa =hallInfo[i].COMMUNITYHALLFULLDAYRATE;
  733. let ha =hallInfo[i].COMMUNITYHALLHALFDAYRATE;
  734. let fs =hallInfo[i].COMMUNITYHALLFULLSURCHARGE;
  735. let hs =hallInfo[i].COMMUNITYHALLHALFSURCHARGE;
  736. let hd =hallInfo[i].COMMUNITYHALLDEPOSIT;
  737. let had =hallInfo[i].COMMUNITYHALLADVANCE;
  738. let hc =hallInfo[i].COMMUNITYHALLCAPACITY;
  739. let eb =hallInfo[i].EB_FULL;
  740. let eh =hallInfo[i].EB_HALF;
  741. let cf =hallInfo[i].CLEAN_CHRG_FULL;
  742. let ch =hallInfo[i].CLEAN_CHRG_HALF;
  743. let r =hallInfo[i].COMMUNITYHALLHALFDAYRATE;
  744. document.getElementById("fulldayamt").value=fa;
  745. document.getElementById("halfdayamt").value=ha;
  746. document.getElementById("fulldaysurcharge").value=fs;
  747. document.getElementById("halfdaysurcharge").value=fs;
  748. document.getElementById("depositeamt").value=hd;
  749. document.getElementById("advanceamt").value=had;
  750. document.getElementById("capacity").value=hc;
  751. document.getElementById("eb_pa_full_amt").value=eb;
  752. document.getElementById("eb_pa_half_amt").value=eh;
  753. document.getElementById("eb_pa_full_serv").value=cf;
  754. document.getElementById("eb_pa_halft_serv").value=ch;
  755. document.getElementById("rental").value=0;
  756. }
  757. function IncrementOrDecHallAmt() {
  758. let l = hallInfo[hallIndex].COMMUNITYHALLFULLSURCHARGE;
  759. let f = hallInfo[hallIndex].COMMUNITYHALLFULLDAYRATE;
  760. let m = hallInfo[hallIndex].COMMUNITYHALLHALFDAYRATE;
  761. let n = hallInfo[hallIndex].COMMUNITYHALLHALFSURCHARGE;
  762. let r = hallInfo[hallIndex].COMMUNITYHALLFULLDAYRATE;
  763. if(count>=0)
  764. if(count%2==0){
  765. document.getElementById("rental").value =[f * (count / 2)+f * (count / 2)]/2 // Set to 0 if count is 0 or odd
  766. }
  767. else if(count%2==1){
  768. document.getElementById("rental").value =f*Math.floor(count/2)+m; // Set to 0 if count is 0 or odd
  769. }
  770. }
  771. /* if (count % 2 === 0 && count !== 0) {
  772. document.getElementById("fulldayamt").value = f * (count / 2);
  773. } else {
  774. document.getElementById("fulldayamt").value =[f * (count / 2)+f * (count / 2)]/2 // Set to 0 if count is 0 or odd
  775. }
  776. document.getElementById("fulldaysurcharge").value = l * (count / 2);
  777. document.getElementById("rental").value =[f * (count / 2)+f * (count / 2)]/2 // Set to 0 if count is 0 or odd
  778. if (count % 2 === 0 && count !== 0) {
  779. document.getElementById("halfdayamt").value =m * (count / 2);
  780. } else {
  781. document.getElementById("halfdayamt").value =[m * (count / 2)+ m * (count/2)]/2 ; // Set to 0 if count is 0 or odd
  782. }
  783. document.getElementById("halfdaysurcharge").value = n * (count / 2);
  784. */
  785. function getDaysInMonth(year, month) {
  786. return new Date(year, month, 0).getDate();
  787. }
  788. function displayCheckboxes(ld) {
  789. for (var i = 1; i <= 31; i++) {
  790. var morningHalf31 = "morningHalf" + i;
  791. var eveningHalf31 = "eveningHalf" + i;
  792. var rowId = "row" + i;
  793. // Check if the current day exceeds the last day of the month
  794. if (i > ld) {
  795. // If it does, hide the checkboxes
  796. $("#" + morningHalf31).hide();
  797. $("#" + eveningHalf31).hide();
  798. } else {
  799. // If it doesn't, show the checkboxes
  800. $("#" + morningHalf31).show();
  801. $("#" + eveningHalf31).show();
  802. }
  803. if (ld === 28) {
  804. $("#row29").hide();
  805. $("#row30").hide();
  806. $("#row31").hide();
  807. } else {
  808. $("#row29").show();
  809. $("#row30").show();
  810. $("#row31").show();
  811. }
  812. // Show or hide the 31st row based on whether the last day is 31
  813. $("#row31").toggle(ld === 31);
  814. }
  815. }
  816. </script>
  817. </body>
  818. </html>