hariprasaths
/
green_committe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
public and department staff can fill the form for green committee and check the status
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.
7 Commits
1 Branch
0 Tags
21 MiB
Tree: 91166a787d
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '91166a787d'
${ noResults }
green_committe/src/main/resources/templates/modules/public/form.html

1871 lines
67 KiB
Raw Normal View History

first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in map script in both dept and public form
2 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in map script in both dept and public form
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
Changes in map script in both dept and public form
2 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in map script in both dept and public form
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
​
​
​
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
emhancement for treee pruning module
3 months ago
​
​
​
implemented public section like pgr complaint
3 months ago
emhancement for treee pruning module
3 months ago
​
first commit
4 months ago
​
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
first commit
4 months ago
​
​
​
​
emhancement for treee pruning module
3 months ago
​
​
Changes in map script in both dept and public form
2 months ago
emhancement for treee pruning module
3 months ago
​
​
Changes in map script in both dept and public form
2 months ago
​
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
implemented public section like pgr complaint
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
implemented department side and enhancement for public form
2 months ago
​
​
emhancement for treee pruning module
3 months ago
​
​
implemented department side and enhancement for public form
2 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
implemented public section like pgr complaint
3 months ago
first commit
4 months ago
emhancement for treee pruning module
3 months ago
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
implemented department side and enhancement for public form
2 months ago
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
​
​
​
​
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
first commit
4 months ago
emhancement for treee pruning module
3 months ago
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
implemented department side and enhancement for public form
2 months ago
implemented public section like pgr complaint
3 months ago
implemented department side and enhancement for public form
2 months ago
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
implemented department side and enhancement for public form
2 months ago
​
​
​
implemented public section like pgr complaint
3 months ago
​
implemented department side and enhancement for public form
2 months ago
​
​
implemented public section like pgr complaint
3 months ago
​
implemented department side and enhancement for public form
2 months ago
implemented public section like pgr complaint
3 months ago
​
implemented department side and enhancement for public form
2 months ago
​
​
implemented public section like pgr complaint
3 months ago
first commit
4 months ago
implemented department side and enhancement for public form
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
first commit
4 months ago
​
​
emhancement for treee pruning module
3 months ago
​
​
​
​
Changes in map script in both dept and public form
2 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
implemented department side and enhancement for public form
2 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
Changes in map script in both dept and public form
2 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
Changes in map script in both dept and public form
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
emhancement for treee pruning module
3 months ago
implemented public section like pgr complaint
3 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
emhancement for treee pruning module
3 months ago
​
​
​
implemented public section like pgr complaint
3 months ago
​
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
implemented public section like pgr complaint
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
​
implemented department side and enhancement for public form
2 months ago
implemented public section like pgr complaint
3 months ago
​
​
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
implemented department side and enhancement for public form
2 months ago
​
​
handled null value for strett name for both public and department
2 months ago
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
implemented public section like pgr complaint
3 months ago
​
​
​
implemented department side and enhancement for public form
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
​
​
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
​
implemented public section like pgr complaint
3 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
implemented public section like pgr complaint
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
​
​
​
emhancement for treee pruning module
3 months ago
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
first commit
4 months ago
​
​
emhancement for treee pruning module
3 months ago
first commit
4 months ago
​
​
​
​
​
emhancement for treee pruning module
3 months ago
first commit
4 months ago
​
​
​
​
​
​
emhancement for treee pruning module
3 months ago
​
​
​
first commit
4 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
4 months ago
emhancement for treee pruning module
3 months ago
​
implemented department side and enhancement for public form
2 months ago
​
emhancement for treee pruning module
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in map script in both dept and public form
2 months ago
​
emhancement for treee pruning module
3 months ago
first commit
4 months ago
emhancement for treee pruning module
3 months ago
first commit
4 months ago
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5. <meta charset="utf-8">
  6. <title>GCC Green Committee</title>
  7. <meta name="description" content="">
  8. <meta name="keywords" content="">
  9. <meta name="viewport" content="width=device-width, initial-scale=1">
  10. <base th:href="${baseURL}" />
  11. <link rel="icon" th:href="@{images/favicon.ico}" type="image/x-icon" />
  12. <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  13. <link rel="stylesheet" type="text/css" th:href="@{assets/node_modules/bootstrap/dist/css/bootstrap.min.css}">
  14. <link rel="stylesheet" type="text/css" th:href="@{assets/node_modules/select2/dist/css/select2.min.css}">
  15. <link rel="stylesheet" type="text/css" th:href="@{assets/node_modules/sweetalert2/sweetalert2.min.css}">
  16. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  19. <style>
  20. /* Header Styling */
  21. .header {
  22. background-color: #1d495a;
  23. padding: 10px 20px;
  24. color: white;
  25. font-family: Arial, sans-serif;
  26. }
  28. .header .logo img {
  29. height: 50px;
  30. }
  32. .header .center-text {
  33. text-align: center;
  34. font-size: 24px;
  35. }
  37. .header .menu-btn {
  38. background-color: transparent;
  39. border: none;
  40. font-size: 24px;
  41. color: white;
  42. }
  44. .header .menu-btn:hover {
  45. color: #ccc;
  46. }
  48. /* Menu Dropdown */
  49. .menu-dropdown {
  50. position: absolute;
  51. top: 60px;
  52. right: 20px;
  53. background-color: #1d495a;
  54. padding: 10px;
  55. display: none;
  56. flex-direction: column;
  57. z-index: 1000;
  58. /* Add z-index to bring the menu above other elements */
  59. }
  61. .menu-dropdown a {
  62. color: white;
  63. margin-bottom: 5px;
  64. text-decoration: none;
  65. }
  67. .menu-dropdown a:hover {
  68. text-decoration: underline;
  69. }
  71. /* Mobile Specific Styling */
  72. @media (max-width: 768px) {
  73. .header {
  74. display: flex;
  75. justify-content: space-between;
  76. align-items: center;
  77. }
  79. .center-text {
  80. font-size: 18px !important;
  81. flex-grow: 1;
  82. text-align: center;
  84. }
  86. .menu-dropdown {
  87. right: 0;
  88. left: 0;
  89. z-index: 1000;
  90. /* Add z-index to bring the menu above other elements */
  91. }
  92. }
  94. /*css for map in step2*/
  95. #googleMap {
  96. height: 300px;
  97. width: 100%;
  98. position: relative;
  99. overflow: hidden;
  100. max-width: 100%;
  101. }
  103. /* #pac-input {
  104. position: absolute;
  105. top: 10px;
  106. left: 50%;
  107. transform: translateX(-50%);
  108. width: 300px;
  109. z-index: 5;
  110. padding: 10px;
  111. border: 1px solid #ccc;
  112. background-color: white;
  113. border-radius: 4px;
  114. }
  116. #search-container {
  117. position: absolute;
  118. top: 10px;
  119. left: 50%;
  120. transform: translateX(-50%);
  121. z-index: 1000;
  122. width: 500px;
  123. box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  124. background-color: white;
  125. border-radius: 4px;
  126. padding: 0;
  127. } */
  129. #pac-input {
  131. width: 100%;
  132. padding: 10px;
  134. border: 1px solid #ccc;
  135. border-radius: 4px;
  137. font-size: 15px;
  139. box-sizing: border-box;
  140. }
  142. #search-box {
  143. width: 100%;
  144. /* Ensures the input takes up the entire width of the container */
  145. padding: 5px;
  146. font-size: 16px;
  147. border: 1px solid #ccc;
  148. border-radius: 4px;
  149. /* Rounded corners matching the container */
  150. box-sizing: border-box;
  151. /* Makes sure padding is considered in width */
  152. }
  154. /* #suggestions {
  155. border: 1px solid #ccc;
  156. border-radius: 4px;
  157. max-height: 200px;
  158. overflow-y: auto;
  159. margin-top: 5px;
  160. background-color: white;
  161. display: none;
  162. width: 100%;
  163. box-sizing: border-box;
  164. }
  166. #suggestions ul {
  167. list-style: none;
  168. padding: 0;
  169. margin: 0;
  170. }
  172. #suggestions ul li {
  173. padding: 5px;
  174. cursor: pointer;
  175. }
  177. #suggestions ul li:hover {
  178. background-color: #f0f0f0;
  179. } */
  181. #suggestions {
  183. width: 100%;
  185. display: none;
  187. background: #fff;
  189. border: 1px solid #ccc;
  191. border-top: none;
  193. max-height: 220px;
  195. overflow-y: auto;
  197. box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  198. }
  200. #suggestions ul {
  202. margin: 0;
  203. padding: 0;
  204. list-style: none;
  205. }
  207. #suggestions li {
  209. padding: 10px 12px;
  211. cursor: pointer;
  213. border-bottom: 1px solid #eee;
  214. }
  216. #suggestions li:hover {
  218. background: #f5f5f5;
  219. }
  221. #search-container {
  223. position: absolute;
  224. top: 10px;
  225. left: 50%;
  226. transform: translateX(-50%);
  228. width: 420px;
  230. z-index: 1000;
  231. }
  233. .multi-select-dropdown {
  234. position: relative;
  235. }
  237. .dropdown-checkbox-menu {
  238. position: absolute;
  239. background: #fff;
  240. border: 1px solid #ccc;
  241. width: 100%;
  242. max-height: 200px;
  243. overflow-y: auto;
  244. display: none;
  245. z-index: 999;
  246. padding: 10px;
  247. border-radius: 5px;
  248. }
  250. .otp-input-box {
  251. /*display: flex;
  252. justify-content: space-between;*/
  253. width: 100%;
  254. }
  256. .otp-input {
  257. width: 30px;
  258. height: 30px;
  259. border: 1px solid #ccc;
  260. border-radius: 5px;
  261. text-align: center;
  262. font-size: 16px;
  263. margin-right: 10px;
  264. }
  266. /* Better card look */
  267. .card {
  268. border-radius: 12px;
  269. border: none;
  270. box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  271. }
  273. /* Section title */
  274. .section-header h5 {
  275. font-weight: 600;
  276. letter-spacing: 1px;
  277. padding-bottom: 10px;
  278. border-bottom: 2px solid #1d495a;
  279. display: inline-block;
  280. }
  282. /* Form labels */
  283. .form-label {
  284. font-weight: 600;
  285. color: #1d495a;
  286. }
  288. /* Form inputs */
  289. .form-control {
  290. height: 45px;
  291. border-radius: 7px !important;
  292. border: 1px solid #c7c7c7;
  293. transition: 0.2s ease-in-out;
  294. }
  296. .form-control:focus {
  297. border-color: #1d495a;
  298. box-shadow: 0 0 5px rgba(29, 73, 90, 0.3);
  299. }
  301. /* Textarea styling */
  302. textarea.form-control {
  303. min-height: 40px;
  304. resize: vertical;
  305. }
  307. /* OTP button alignment */
  308. #sendOtpButton {
  309. width: 100%;
  310. }
  312. /* Map container rounded & shadow */
  313. #mapContainer {
  314. border-radius: 10px;
  315. overflow: hidden;
  316. box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  317. }
  319. /* Search bar inside map */
  320. /* #pac-input {
  321. width: 80% !important;
  322. max-width: 350px;
  323. border-radius: 8px !important;
  324. } */
  326. /* Multi-select dropdown box */
  327. .multi-select-dropdown .form-control {
  328. background: #f8f9fa;
  329. cursor: pointer;
  330. }
  332. /* Dropdown list */
  333. .dropdown-checkbox-menu {
  334. border-radius: 8px;
  335. border-color: #aaa;
  336. background: #fefefe;
  337. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  338. }
  340. /* File inputs */
  341. #img_container input {
  342. height: 53px !important;
  343. padding: 10px;
  344. border-radius: 6px;
  345. }
  347. /* Submit button */
  348. #submitBtn {
  349. width: 180px;
  350. height: 45px;
  351. font-size: 16px;
  352. border-radius: 8px;
  353. }
  355. /* Back button */
  356. #backBtn {
  357. border-radius: 8px;
  358. padding: 10px 25px;
  359. }
  361. /* Improved spacing on mobile */
  362. @media (max-width: 768px) {
  363. .row {
  364. row-gap: 15px;
  365. }
  367. #sendOtpButton {
  368. margin-top: 10px !important;
  369. }
  370. }
  371. </style>
  373. </head>
  375. <body style="background-color: #f1f3f4;">
  377. <!-- Header Start-->
  378. <header>
  379. <div class="header d-flex justify-content-between align-items-center">
  380. <!-- Left: Logo -->
  381. <div class="logo">
  382. <img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Logo">
  383. </div>
  385. <!-- Center: Text -->
  386. <div class="center-text">
  387. GREATER CHENNAI CORPORATION
  388. </div>
  390. <!-- Right: Button for Menu -->
  391. <div class="menu">
  392. <button class="menu-btn" onclick="toggleMenu()">
  393. &#9776; <!-- Unicode for hamburger menu icon -->
  394. </button>
  395. </div>
  396. </div>
  398. <!-- Dropdown Menu -->
  399. <div class="menu-dropdown" id="menuDropdown">
  400. <a href="https://chennaicorporation.gov.in/gcc/">Home</a>
  401. <a href="https://chennaicorporation.gov.in/gcc/about-GCC/">About GCC</a>
  402. <a href="https://chennaicorporation.gov.in/gcc/who-is-who/index_data.jsp">Who's Who</a>
  403. <a href="https://chennaicorporation.gov.in/gcc/council/about-council/">Council</a>
  404. <a href="https://chennaicorporation.gov.in/gcc/tender/">Tender</a>
  405. <a href="https://chennaicorporation.gov.in/gcc/department/">Departments</a>
  406. <a href="https://chennaicorporation.gov.in/gcc/online-services/">Online Services</a>
  407. <a href="https://gccservices.in/gcc/login">Official Login</a>
  408. </div>
  410. </header>
  411. <!-- Header End-->
  413. <main class="container mt-4">
  415. <div class="p-4">
  416. <form id="publicform" enctype="multipart/form-data">
  417. <div class="section-header text-center">
  418. <h5>GREEN COMMITTEE CITIZEN FORM (PUBLIC)</h5>
  419. </div>
  420. <div class="row mb-3 mt-2">
  421. <div class="col-md-4">
  422. <label class="form-label">Petitioner Name<span class="text-danger">*</span></label>
  423. <input type="text" class="form-control" id="pname" name="name"
  424. oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" placeholder="Enter Name"
  425. required>
  426. </div>
  427. <div class="col-md-3">
  428. <label class="form-label">Mobile Number<span class="text-danger">*</span></label>
  429. <input type="text" class="form-control" id="mobile_no" name="mobile_no"
  430. oninput="validatePhoneNumber(this)" placeholder="Enter Mobile Number" required>
  431. </div>
  432. <div class="col-md-2" id="otpbeforeverified">
  433. <button type="button" class="btn btn-primary" id="sendOtpButton" style="margin-top: 32px;">Send
  434. OTP</button>
  435. </div>
  436. <div class="col-md-2" id="otpafterverified" style="display: none;">
  437. <i class="fa-solid fa-circle-check"
  438. style="margin-top: 40px;font-size: x-large;color: green;"></i>
  439. </div>
  441. </div>
  442. <div class="row mb-4">
  443. <div class="col-md-4">
  444. <label class="form-label">Gender<span class="text-danger">*</span></label><br>
  445. <input type="radio" name="gender" value="M" required="required"> Male
  446. <input type="radio" name="gender" value="F" class="ms-3 ml-3"> Female
  447. <input type="radio" name="gender" value="T" class="ms-3 ml-3"> Transgender
  448. </div>
  449. <!--<div class="col-md-8">
  450. <label class="form-label">Tree Land Location (Also click the street in Map)<span
  451. class="text-danger">*</span></label>
  452. <textarea class="form-control" id="address" name="address" maxlength="255"
  453. placeholder="Type Tree Address Here" required></textarea>
  454. </div>-->
  455. </div>
  456. <!-- <div class="row mb-3">
  458. <div class="col-md-6">
  459. <label class="form-label">Gender<span class="text-danger">*</span></label><br>
  460. <input type="radio" name="gender" value="M" required="required"> Male
  461. <input type="radio" name="gender" value="F" class="ms-3 ml-4"> Female
  462. <input type="radio" name="gender" value="T" class="ms-3 ml-4"> Transgender
  463. </div>
  464. </div> -->
  465. <!-- <div class="row mb-3">
  466. <div class="col-md-12">
  467. <label class="form-label">Tree Land Location (Also click the street in Map)<span class="text-danger">*</span></label>
  468. <textarea class="form-control" id="address" name="address" maxlength="255" placeholder="Type Tree Address Here" required ></textarea>
  469. </div>
  470. </div> -->
  472. <div id="mapContainer" style="position: relative; height: 300px;">
  473. <div id="search-container">
  474. <input id="pac-input" class="controls" type="text" placeholder="Search location - please enter minimum of 5 characters">
  475. <!-- <input type="text" id="search-box" placeholder="Search for a location..."> -->
  476. <div id="suggestions"></div>
  477. </div>
  478. <div id="googleMap" style="height: 100%; width: 100%;"></div>
  479. </div>
  482. <div class="row mb-3 mt-4" style="row-gap:10px;">
  483. <div class="col-md-3">
  484. <label for="latitude">Latitude<span class="text-danger">*</span></label>
  485. <input type="text" class="form-control" id="latitude" name="latitude" readonly>
  486. </div>
  487. <div class="col-md-3">
  488. <label for="longitude">Longitude<span class="text-danger">*</span></label>
  489. <input type="text" class="form-control" id="longitude" name="longitude" readonly>
  490. </div>
  491. <div class="col-md-6">
  492. <label for="streetName">Street<span class="text-danger">*</span></label>
  493. <select id="streetName" name="streetName" class="form-control" required>
  494. <option value="">Select Street</option>
  495. </select>
  496. </div>
  497. <!-- <div class="col-md-3">
  498. <label for="zone">Zone<span class="text-danger">*</span></label>
  499. <input type="text" class="form-control" id="zone" name="zone" required readonly>
  500. </div>
  501. <div class="col-md-3">
  502. <label for="ward">Ward<span class="text-danger">*</span></label>
  503. <input type="text" class="form-control" id="ward" name="ward" required readonly>
  504. </div>-->
  506. </div>
  508. <!-- <div class="row mb-3">
  509. <div class="col-md-4">
  510. <label class="form-label">Details of Complaint<span class="text-danger">*</span></label>
  515. <div class="multi-select-dropdown">
  516. <div id="dropdownToggle" class="form-control" style="cursor:pointer;" required>
  517. Select Options
  518. </div>
  519. <small class="text-danger">
  520. <strong>Note:</strong> Only one complaint can be selected.
  521. </small>
  524. <div id="compnature_checkbox_list" class="dropdown-checkbox-menu"></div>
  525. </div>
  526. </div>
  527. </div>-->
  528. <div class="row mb-3">
  529. <input type="hidden" id="streetId" name="streetId">
  530. <!-- <div class="col-md-3">
  532. <label for="streetId">Street Id</label>
  533. <input type="text" class="form-control" id="streetId" readonly>
  534. </div>-->
  535. <div class="col-md-3">
  536. <label for="zone">Zone<span class="text-danger">*</span></label>
  537. <input type="text" class="form-control" id="zone" name="zone" readonly>
  538. </div>
  540. <div class="col-md-3">
  541. <label for="ward">Ward<span class="text-danger">*</span></label>
  542. <input type="text" class="form-control" id="ward" name="ward" readonly>
  543. </div>
  545. </div>
  546. <div class="row mb-3">
  548. <!-- Left Side -->
  549. <div class="col-md-4">
  550. <label class="form-label">
  551. Request Type<span class="text-danger">*</span>
  552. </label>
  553. <select id="complaintDropdown" class="form-control" required>
  554. <option value="">Select Complaint</option>
  555. </select>
  557. <div class="text-danger mt-2">
  558. <strong>Note:</strong> Only one complaint can be selected.
  559. </div>
  562. <!-- <div class="multi-select-dropdown">
  563. <div id="dropdownToggle" class="form-control" style="cursor:pointer;" required>
  564. Select Options
  565. </div>
  566. <div class="text-danger mt-2">
  567. <strong>Note:</strong> Only one complaint can be selected.
  568. </div>-->
  570. <!-- <small class="text-danger">
  571. <strong>Note:</strong> Only one complaint can be selected.
  572. </small>-->
  574. <!--- <div id="compnature_checkbox_list" class="dropdown-checkbox-menu"></div>
  575. </div>-->
  576. </div>
  578. <!-- Right Side -->
  579. <!--<div class="col-md-8">
  580. <div class="alert alert-info mb-0 py-2">
  581. <strong>Instructions:</strong><br>
  583. <strong>NOTE: </strong>For tree pruning complaints, please raise your complaint through the
  584. PGR portal
  585. <strong>Complaint Type:</strong> Park and Playground
  586. <br>
  588. <strong>Complaint Sub-Type:</strong> Obstruction of Trees
  589. <br>
  591. <a href="https://gccservices.in/pgr/registercomplaints" target="_blank">
  592. Click here to raise the complaint
  593. </a>
  594. </div>
  595. </div>-->
  597. </div>
  599. <!-- Dynamic input rows -->
  600. <div id="naturecontainer"></div>
  601. <div class="row mb-3">
  602. <div class="col-md-6">
  603. <label for="address">Location of Tree<span class="text-danger">*</span></label>
  604. <!-- <input type="text" class="form-control" id="address" name="address" placeholder="Enter Address"
  605. required>-->
  606. <textarea class="form-control" id="address" name="address" placeholder="Type Tree Address Here"
  607. required></textarea>
  608. </div>
  609. </div>
  611. <div class="row mb-3">
  612. <div class="col-md-12">
  613. <label class="form-label">Remarks<span class="text-danger">*</span></label>
  614. <textarea class="form-control" id="remarks" name="remarks" maxlength="255"
  615. placeholder="Enter Remarks" required></textarea>
  616. </div>
  617. </div>
  619. <div class="row mb-3" id="img_container">
  620. <div class="col-md-6">
  621. <label class="form-label">Upload Image 1 (jpg/jpeg)<span class="text-danger">*</span></label>
  622. <input type="file" class="form-control" id="c1image" accept=".jpg,.jpeg," name="c1image"
  623. required="required">
  624. </div>
  625. <div class="col-md-6">
  626. <label class="form-label">Upload Image 2 (jpg/jpeg)<span class="text-danger">*</span></label>
  627. <input type="file" class="form-control" id="c2image" accept=".jpg,.jpeg," name="c2image"
  628. required="required">
  629. </div>
  630. </div>
  631. <span>OTP validation is mandatory for submitting the form.<span class="text-danger">*</span></span>
  632. <div class="text-center mt-4">
  634. <button type="submit" class="btn btn-success" name="submitBtn" id="submitBtn"
  635. disabled>Submit</button>
  637. </div>
  639. </form>
  640. <div class="mt-4">
  641. <button class="btn btn-secondary" id="backBtn">Back</button>
  642. </div>
  643. </div>
  645. </main>
  648. <div class="modal fade" id="otpForm" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true">
  649. <div class="modal-dialog" role="document">
  650. <div class="modal-content">
  651. <form action="#" th:action="@{/otpForm}" th:object="${otpForm}" method="post"
  652. onsubmit="return verifyOtp();">
  653. <div class="modal-header">
  654. <h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP Login</h6>
  655. <button type="button" class="close" data-dismiss="modal" aria-label="Close"
  656. style="color:black;border: white;background-color: white;">
  657. <span aria-hidden="true" style="font-size: larger;">&times;</span>
  658. </button>
  659. </div><!--end modal-header-->
  660. <div class="modal-body">
  661. <div class="row ">
  662. <div class="mb-3" style="text-align: center;">
  663. <img th:src="@{images/otp.png}" width="50%" alt="Mobileotp">
  664. </div>
  665. </div><!--end row-->
  667. <div class="row d-flex justify-content-center align-items-center">
  668. <div class="mb-0">
  669. <h4>OTP Verification</h4>
  670. <p class="text-mute">Enter the OTP sent to <b class="text-info" id="mobilenotxt"></b>
  671. </p>
  672. <p class="text-danger text-center" id="otperror"></p>
  673. </div>
  674. </div><!--end row-->
  675. <div class="row d-flex justify-content-center align-items-center">
  676. <div class="mb-3 ">
  677. <div class="otp-input-box">
  678. <input type="text" maxlength="1" class="otp-input" id="otp1" required />
  679. <input type="text" maxlength="1" class="otp-input" id="otp2" required />
  680. <input type="text" maxlength="1" class="otp-input" id="otp3" required />
  681. <input type="text" maxlength="1" class="otp-input" id="otp4" required />
  682. <input type="text" maxlength="1" class="otp-input" id="otp5" required />
  683. </div>
  684. </div>
  685. </div><!--end row-->
  686. <div class="row d-flex justify-content-center align-items-center">
  687. <div class="mb-3">
  688. <div id="resend-containers">
  689. <p class="mb-0">Didn't receive OTP?</p>
  690. <p class="mb-0 mt-2 text-info text-center" id="resend-link"></p>
  691. </div>
  692. </div>
  693. </div><!--end row-->
  695. </div><!--end modal-body-->
  696. <div class="modal-footer">
  697. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  698. <button type="submit" class="btn btn-primary" id="but">Verify OTP</button>
  699. </div><!--end modal-footer-->
  702. </form>
  703. </div><!--end modal-content-->
  704. </div><!--end modal-dialog-->
  705. </div>
  707. <div id="pageLoader"
  708. style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
  709. <div style="position: relative; top: 50%; transform: translateY(-50%);">
  710. <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
  711. <span class="sr-only">Loading...</span>
  712. </div>
  713. <!-- Add the 'Please wait' text below the spinner -->
  714. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
  715. </div>
  716. </div>
  719. <script type="text/javascript" th:src="@{assets/node_modules/jquery/dist/jquery.min.js}"></script>
  720. <script type="text/javascript" th:src="@{assets/node_modules/bootstrap/dist/js/bootstrap.min.js}"></script>
  721. <script type="text/javascript" th:src="@{assets/node_modules/select2/dist/js/select2.min.js}"></script>
  722. <script type="text/javascript" th:src="@{assets/node_modules/sweetalert2/sweetalert2.min.js}"></script>
  723. <script sync defer
  724. src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCi7N6uW5MZaSkd50Kzw7ax2GkMN1vjE-E&callback=myMap&libraries=places">
  725. </script>
  728. <script type="text/javascript">
  730. let mobile_valid = false;
  733. $(document).ready(function () {
  735. /*let checkboxList = $("#compnature_checkbox_list");
  736. let natureContainer = $("#naturecontainer");
  738. // Toggle dropdown on click
  739. $("#dropdownToggle").on("click", function () {
  740. checkboxList.toggle();
  741. });
  743. // Close dropdown when clicking outside
  744. $(document).click(function (e) {
  745. if (!$(e.target).closest(".multi-select-dropdown").length) {
  746. checkboxList.hide();
  747. }
  748. });*/
  750. // Fetch API data
  751. fetch('/greencommittee/api/getcompnatureforpublic')
  752. .then(res => res.json())
  753. .then(result => {
  754. if (result.status !== "success") return;
  756. let list = result.data;
  757. let dropdown = $("#complaintDropdown");
  759. list.forEach(function (d) {
  760. dropdown.append(
  761. `<option value="${d.id}" data-name="${d.name}">
  762. ${d.name}
  763. </option>`
  764. );
  765. });
  767. /*list.forEach(d => {
  768. checkboxList.append(`
  769. <div class="form-check">
  770. <input type="checkbox"
  771. class="form-check-input nature-check"
  772. id="nature_${d.id}"
  773. data-id="${d.id}"
  774. data-name="${d.name}">
  775. <label class="form-check-label" for="nature_${d.id}">
  776. ${d.name}
  777. </label>
  778. </div>
  779. `);
  780. });*/
  781. });
  783. // Handle checkbox selection
  784. /*$(document).on("change", ".nature-check", function () {
  786. let id = $(this).data("id");
  787. let name = $(this).data("name");
  789. updateDropdownLabel(); // update selected names on the dropdown
  791. // If checked → add column box
  792. if ($(this).is(":checked")) {
  794. // Create the row ONCE
  795. if ($("#treeRow").length === 0) {
  796. $("#naturecontainer").append(`<div class="row" id="treeRow"></div>`);
  797. }
  799. let html = `
  800. <div class="col-md-4 mb-3 tree-input-box" id="col_${id}">
  801. <label class="form-label">No. of Trees - ${name}<span class="text-danger">*</span></label>
  802. <input type="number" min="0" class="form-control"
  803. id="trees_${id}" placeholder="Enter count" required="required">
  804. </div>
  805. `;
  807. $("#treeRow").append(html);
  808. }
  809. else {
  810. // Remove column on uncheck
  811. $("#col_" + id).remove();
  813. // If all unchecked → remove row
  814. if ($(".tree-input-box").length === 0) {
  815. $("#treeRow").remove();
  816. }
  817. }
  818. });*/
  820. $(document).on("change", "#complaintDropdown", function () {
  822. $("#treeRow").remove();
  824. let id = $(this).val();
  825. let name = $("#complaintDropdown option:selected").data("name");
  826. if (!name) {
  828. // Nothing selected
  829. $("#c2image").closest(".col-md-6").show();
  830. $("#c2image").prop("required", true);
  832. $("#address").closest(".col-md-6").hide();
  833. $("#address").prop("required", false).val("");
  835. } else if (name.toLowerCase() === "pruning") {
  837. // Pruning selected
  838. $("#c2image").closest(".col-md-6").hide();
  839. $("#c2image").prop("required", false).val("");
  841. $("#address").closest(".col-md-6").hide();
  842. $("#address").prop("required", false).val("");
  844. } else {
  846. // Any complaint other than pruning
  847. $("#c2image").closest(".col-md-6").show();
  848. $("#c2image").prop("required", true);
  850. $("#address").closest(".col-md-6").show();
  851. $("#address").prop("required", true);
  852. }
  854. /* if (name && name.toLowerCase() === "pruning") {
  857. // Hide second image
  858. $("#c2image").closest(".col-md-6").hide();
  860. // Remove required validation
  861. $("#c2image").prop("required", false).val("");
  862. $("#address").closest(".col-md-6").hide();
  863. $("#address").prop("required", false).val("");
  865. } else {
  867. // Show second image
  868. $("#c2image").closest(".col-md-6").show();
  870. // Existing workflow
  871. $("#c2image").prop("required", true);
  872. $("#address").closest(".col-md-6").show();
  873. $("#address").prop("required", true);
  874. }*/
  876. if (!id) {
  877. return;
  878. }
  880. $("#naturecontainer").html(`
  881. <div class="row" id="treeRow">
  882. <div class="col-md-4 mb-3">
  883. <label class="form-label">
  884. No. of Trees - ${name}
  885. <span class="text-danger">*</span>
  886. </label>
  888. <input type="number"
  889. class="form-control"
  890. id="trees_${id}"
  891. value="1"
  892. disabled>
  893. </div>
  894. </div>
  895. `);
  896. });
  897. // Handle Complaint Selection (Only One Selection Allowed)
  898. /*$(document).on("change", ".nature-check", function () {
  900. // If checked, uncheck all others
  901. if ($(this).is(":checked")) {
  902. $(".nature-check").not(this).prop("checked", false);
  903. }
  905. // Remove previous tree input
  906. $("#treeRow").remove();
  908. let checked = $(".nature-check:checked");
  910. if (checked.length > 0) {
  912. let id = checked.data("id");
  913. let name = checked.data("name");
  915. $("#naturecontainer").html(`
  916. <div class="row" id="treeRow">
  917. <div class="col-md-4 mb-3">
  918. <label class="form-label">
  919. No. of Trees - ${name}
  920. <span class="text-danger">*</span>
  921. </label>
  922. <input type="number"
  923. class="form-control"
  924. id="trees_${id}"
  925. value="1"
  926. disabled>
  927. </div>
  928. </div>
  929. `);
  930. }
  932. updateDropdownLabel();
  933. });*/
  935. // Update dropdown text with selected names
  936. /*function updateDropdownLabel() {
  937. let selected = [];
  939. $(".nature-check:checked").each(function () {
  940. selected.push($(this).data("name"));
  941. });
  943. if (selected.length === 0) {
  944. $("#dropdownToggle").text("Select Options");
  945. } else {
  946. $("#dropdownToggle").text(selected.join(", "));
  947. }
  948. }*/ /* function updateDropdownLabel() {
  950. let checked = $(".nature-check:checked");
  952. if (checked.length === 0) {
  953. $("#dropdownToggle").text("Select Complaint");
  954. } else {
  955. $("#dropdownToggle").text(checked.data("name"));
  956. }
  957. }*/
  961. });
  963. document.getElementById("backBtn").addEventListener("click", function () {
  964. window.location.href = "/greencommittee/home";
  965. });
  969. //Maximum file size (10 MB)
  970. const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes
  972. // Apply to all file inputs inside the form
  973. $("#publicform input[type='file']").on("change", function () {
  974. const fileInput = this;
  975. console.log(" cehcking");
  977. if (fileInput.files.length > 0) {
  978. let file = fileInput.files[0];
  980. if (file.size > MAX_FILE_SIZE) {
  982. Swal.fire({
  983. icon: "error",
  984. title: "File too large!",
  985. text: "Maximum allowed file size is 10 MB.",
  986. });
  988. // Clear file input
  989. $(fileInput).val('');
  990. }
  991. }
  992. });
  994. function toggleMenu() {
  995. var dropdown = document.getElementById("menuDropdown");
  996. if (dropdown.style.display === "flex") {
  997. dropdown.style.display = "none";
  998. } else {
  999. dropdown.style.display = "flex";
  1000. }
  1001. }
  1002. function validatePhoneNumber(input) {
  1003. input.value = input.value.replace(/[^0-9]/g, '').slice(0, 10);
  1004. }
  1005. //Script For Map
  1007. function myMap() {
  1008. const defaultCenter = { lat: 13.0827, lng: 80.2707 };
  1009. const map = new google.maps.Map(document.getElementById("googleMap"), {
  1010. center: defaultCenter,
  1011. zoom: 14
  1012. });
  1014. let marker = null;
  1015. let streetsList = []; // Define globally inside myMap
  1016. const infowindow = new google.maps.InfoWindow();
  1018. // Initialize the SearchBox
  1019. /* const input = document.getElementById('pac-input');
  1020. const searchBox = new google.maps.places.SearchBox(input);
  1021. //map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  1023. map.addListener('bounds_changed', function () {
  1024. searchBox.setBounds(map.getBounds());
  1025. });
  1027. searchBox.addListener('places_changed', function () {
  1028. const places = searchBox.getPlaces();
  1029. if (places.length === 0) return;
  1031. if (marker) marker.setMap(null);
  1032. const place = places[0];
  1033. if (!place.geometry) return;
  1035. marker = new google.maps.Marker({
  1036. map: map,
  1037. position: place.geometry.location
  1038. });
  1040. const lat = place.geometry.location.lat().toFixed(6);
  1041. const lng = place.geometry.location.lng().toFixed(6);
  1042. document.getElementById("latitude").value = lat;
  1043. document.getElementById("longitude").value = lng;
  1045. map.setCenter(place.geometry.location);
  1046. map.setZoom(15);
  1048. infowindow.setContent(`Latitude: ${lat}<br>Longitude: ${lng}`);
  1049. infowindow.open(map, marker);
  1051. fetchStreets(lat, lng);
  1052. }); */
  1054. const input = document.getElementById("pac-input");
  1055. const suggestions = document.getElementById("suggestions");
  1057. const autocompleteService = new google.maps.places.AutocompleteService();
  1058. const placesService = new google.maps.places.PlacesService(map);
  1060. let debounceTimer = null;
  1062. input.addEventListener("input", function () {
  1064. clearTimeout(debounceTimer);
  1066. const query = this.value.trim();
  1068. // Hide suggestions
  1069. if (query.length < 5) {
  1071. suggestions.style.display = "none";
  1072. suggestions.innerHTML = "";
  1074. return;
  1075. }
  1077. debounceTimer = setTimeout(function () {
  1079. autocompleteService.getPlacePredictions({
  1081. input: query,
  1082. bounds: map.getBounds()
  1084. }, showPredictions);
  1086. }, 500);
  1088. });
  1090. function showPredictions(predictions, status) {
  1092. suggestions.innerHTML = "";
  1094. if (
  1095. status !== google.maps.places.PlacesServiceStatus.OK ||
  1096. !predictions ||
  1097. predictions.length === 0
  1098. ) {
  1100. suggestions.style.display = "none";
  1101. return;
  1102. }
  1104. const ul = document.createElement("ul");
  1106. predictions.forEach(function (prediction) {
  1108. const li = document.createElement("li");
  1110. li.innerHTML = prediction.description;
  1112. li.onclick = function () {
  1114. input.value = prediction.description;
  1116. suggestions.style.display = "none";
  1118. loadPlace(prediction.place_id);
  1120. };
  1122. ul.appendChild(li);
  1124. });
  1126. suggestions.appendChild(ul);
  1128. suggestions.style.display = "block";
  1130. }
  1132. function loadPlace(placeId) {
  1134. placesService.getDetails({
  1136. placeId: placeId,
  1137. fields: [
  1138. "geometry",
  1139. "formatted_address",
  1140. "name"
  1141. ]
  1143. }, function (place, status) {
  1145. if (status !== google.maps.places.PlacesServiceStatus.OK)
  1146. return;
  1148. if (marker)
  1149. marker.setMap(null);
  1151. marker = new google.maps.Marker({
  1153. map: map,
  1154. position: place.geometry.location
  1156. });
  1158. const lat = place.geometry.location.lat().toFixed(6);
  1159. const lng = place.geometry.location.lng().toFixed(6);
  1161. document.getElementById("latitude_field").value = lat;
  1162. document.getElementById("longitude_field").value = lng;
  1164. map.setCenter(place.geometry.location);
  1165. map.setZoom(15);
  1167. infowindow.setContent(
  1168. "Latitude : " + lat +
  1169. "<br>Longitude : " + lng
  1170. );
  1172. infowindow.open(map, marker);
  1174. fetchStreets(lat, lng);
  1176. });
  1178. }
  1180. document.addEventListener("click", function (e) {
  1182. if (
  1183. !suggestions.contains(e.target) &&
  1184. e.target !== input
  1185. ) {
  1187. suggestions.style.display = "none";
  1189. }
  1191. });
  1193. map.addListener("click", function (event) {
  1194. const clickedLatLng = event.latLng;
  1195. if (marker) marker.setMap(null);
  1197. marker = new google.maps.Marker({
  1198. position: clickedLatLng,
  1199. map: map
  1200. });
  1202. const lat = clickedLatLng.lat().toFixed(6);
  1203. const lng = clickedLatLng.lng().toFixed(6);
  1205. document.getElementById("latitude").value = lat;
  1206. document.getElementById("longitude").value = lng;
  1208. infowindow.setContent(`Latitude: ${lat}<br>Longitude: ${lng}`);
  1209. infowindow.open(map, marker);
  1211. fetchStreets(lat, lng);
  1212. });
  1214. function fetchStreets(lat, lng) {
  1215. const encodedGeometry = encodeURIComponent(JSON.stringify({ y: lat, x: lng }));
  1216. //const url = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/EDPMobile2025/
  1217. //FeatureServer/2/query?where=&objectIds=&time=&geometry={encodedGeometry}&geometryType=esriGeometryPoint&inSR=4326&defaultSR=4326&spatialRel=esriSpatialRelIntersects&distance=1&units=esriSRUnit_Meter&outFields=zone,ward&returnGeometry=false&f=geojson`;
  1219. const url = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/EDPMobile2025/FeatureServer/0/query?` +
  1220. `where=&objectIds=&time=&geometry=${encodedGeometry}` +
  1221. `&geometryType=esriGeometryPoint&inSR=4326&defaultSR=4326&spatialRel=esriSpatialRelIntersects&distance=25` +
  1222. `&units=esriSRUnit_Meter&relationParam=&outFields=region%2Cnew_zone%2C+new_ward%2Croad_id%2C+road_name%2Cgis_id%2Ctype` +
  1223. `&returnGeometry=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&gdbVersion=&historicMoment=` +
  1224. `&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=` +
  1225. `&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=xyFootprint&resultOffset=` +
  1226. `&resultRecordCount=&returnTrueCurves=false&returnExceededLimitFeatures=false&quantizationParameters=&returnCentroid=false` +
  1227. `&timeReferenceUnknownClient=false&maxRecordCountFactor=&sqlFormat=none&resultType=&featureEncoding=esriDefault` +
  1228. `&datumTransformation=&f=geojson`;
  1231. //console.log(url);
  1233. fetch(url)
  1234. .then(response => {
  1235. if (!response.ok) {
  1236. throw new Error(`HTTP error! Status: ${response.status}`);
  1237. }
  1238. return response.json();
  1239. })
  1240. .then(data => {
  1242. console.log("GIS API Response:", data);
  1244. const features = data.features;
  1245. if (features.length > 0) {
  1246. const props = features[0].properties;
  1247. const zone = props.new_zone;
  1248. const ward = props.new_ward;
  1251. console.log("Zone:", zone, "Ward:", ward);
  1252. // 👉 You can update form fields or DOM elements here
  1253. document.getElementById("zone").value = zone;
  1254. document.getElementById("ward").value = ward;
  1255. } else {
  1256. console.warn("No zone/ward found for this location.");
  1257. document.getElementById("zone").value = '';
  1258. document.getElementById("ward").value = '';
  1259. }
  1260. })
  1261. .catch(error => {
  1262. console.error("Error fetching zone/ward:", error);
  1263. });
  1266. const streetSelect = document.getElementById("streetName");
  1267. streetSelect.innerHTML = "";
  1269. const defaultOption = document.createElement("option");
  1270. defaultOption.value = "";
  1271. defaultOption.text = "-- Select Street --";
  1272. streetSelect.appendChild(defaultOption);
  1274. document.getElementById("streetId").value = "";
  1276. // Timeout mechanism: 1 seconds
  1277. const timeout = new Promise((_, reject) =>
  1278. setTimeout(() => reject(new Error("Request timed out")), 1000)
  1279. );
  1281. // Actual fetch
  1282. const fetchRequest = fetch(url).then(res => res.json());
  1284. Promise.race([fetchRequest, timeout])
  1285. .then(data => {
  1286. const features = data.features;
  1287. if (!features || features.length === 0) {
  1288. Swal.fire({
  1289. icon: 'warning',
  1290. title: 'No Street Found',
  1291. text: 'Please select the nearby street.',
  1292. });
  1293. return;
  1294. }
  1296. streetsList = features.map(f => f.properties); //Save for use in dropdown
  1297. streetsList.forEach((props, index) => {
  1298. const option = document.createElement("option");
  1299. option.value = index;
  1300. option.text = props.road_name;
  1301. streetSelect.appendChild(option);
  1302. });
  1303. })
  1304. .catch(err => {
  1305. console.error("Error fetching street:", err);
  1306. Swal.fire("Failed to load street data", '', 'error');
  1307. });
  1309. }
  1311. document.getElementById("streetName").addEventListener("change", function () {
  1312. const selectedIndex = this.value;
  1313. console.log("heck")
  1314. console.log(selectedIndex);
  1317. if (selectedIndex !== "") {
  1318. const selectedStreet = streetsList[selectedIndex];
  1319. console.log(selectedStreet);
  1321. document.getElementById("streetId").value = selectedStreet.road_id;
  1325. console.log("Selected street:", selectedStreet);
  1326. } else {
  1327. document.getElementById("streetId").value = "";
  1329. }
  1330. });
  1331. }
  1333. $('#publicform').submit(function (e) {
  1334. e.preventDefault();
  1335. $('#pageLoader').show();
  1337. let formData = new FormData(this);
  1338. $('#submitBtn').prop('disabled', true).text('Submitting...');
  1340. const mobnumber = $('#mobile_no').val().trim();
  1341. if (mobnumber) {
  1342. // Rule 1: Must be exactly 10 digits & must not start with 0
  1343. if (!/^[1-9][0-9]{9}$/.test(mobnumber)) {
  1344. $('#pageLoader').hide();
  1345. $('#submitBtn').prop('disabled', false).text('Submit');
  1346. Swal.fire({
  1347. icon: 'warning',
  1348. title: 'Invalid Mobile Number',
  1349. text: 'Mobile number must be 10 digits and cannot start with 0.'
  1350. });
  1351. return;
  1352. }
  1354. // Rule 2: Reject sequential numbers like 1234567890
  1355. if (mobnumber === "1234567890") {
  1356. $('#pageLoader').hide();
  1357. $('#submitBtn').prop('disabled', false).text('Submit');
  1358. Swal.fire({
  1359. icon: 'warning',
  1360. title: 'Invalid Mobile Number',
  1361. text: 'Sequential numbers like 1234567890 are not allowed.'
  1362. });
  1363. return;
  1364. }
  1366. // Rule 3: Reject all digits same (1111111111, 2222222222, etc.)
  1367. if (/^(\d)\1{9}$/.test(mobnumber)) {
  1368. $('#pageLoader').hide();
  1369. $('#submitBtn').prop('disabled', false).text('Submit');
  1370. Swal.fire({
  1372. icon: 'warning',
  1373. title: 'Invalid Mobile Number',
  1374. text: 'All digits cannot be the same.'
  1375. });
  1376. return;
  1377. }
  1378. }
  1381. const latitude = $('#latitude').val().trim();
  1382. const longitute = $('#longitude').val().trim();
  1383. if (!latitude) {
  1384. $('#pageLoader').hide();
  1385. $('#submitBtn').prop('disabled', false).text('Submit');
  1386. Swal.fire({
  1387. icon: 'warning',
  1388. title: 'Missing latitude',
  1389. text: 'Please Mark or search in street Map.'
  1390. });
  1391. return;
  1392. }
  1393. if (!longitude) {
  1394. $('#pageLoader').hide();
  1395. $('#submitBtn').prop('disabled', false).text('Submit');
  1396. Swal.fire({
  1397. icon: 'warning',
  1398. title: 'Missing longitude',
  1399. text: 'Please Mark or search in street Map.'
  1400. });
  1401. return;
  1402. }
  1404. const zone = $('#zone').val().trim();
  1405. const ward = $('#ward').val().trim();
  1407. if (!zone) {
  1408. $('#pageLoader').hide();
  1409. $('#submitBtn').prop('disabled', false).text('Submit');
  1410. Swal.fire({
  1411. icon: 'warning',
  1412. title: 'Missing Zone',
  1413. text: 'Please Mark or search in street Map.'
  1414. });
  1415. return;
  1416. }
  1417. if (!ward) {
  1418. $('#pageLoader').hide();
  1419. $('#submitBtn').prop('disabled', false).text('Submit');
  1420. Swal.fire({
  1421. icon: 'warning',
  1422. title: 'Missing Ward',
  1423. text: 'Please Mark or search in street Map..'
  1424. });
  1425. return;
  1426. }
  1428. const name = $('#pname').val();
  1429. const streetName = $('#streetName option:selected').text();
  1430. const street_id = $('#streetId').val();
  1431. // console.log("cfefefef");
  1432. console.log(streetName);
  1433. console.log("Streetid");
  1434. console.log(street_id);
  1435. // const streetName = $('#streetName').val();
  1438. const c1image = $('#c1image')[0];
  1439. const c2image = $('#c2image')[0];
  1441. let compDetailsList = [];
  1442. let invalidCount = false;
  1445. let id = $("#complaintDropdown").val();
  1447. if (id) {
  1448. let count = $("#trees_" + id).val();
  1450. if (!count || Number(count) <= 0) {
  1451. invalidCount = true;
  1452. }
  1454. compDetailsList.push({
  1455. id: id,
  1456. count: 1
  1457. });
  1458. }
  1460. /*$(".nature-check:checked").each(function () {
  1461. // let id = $(this).data("id");
  1462. let count = $("#trees_" + id).val();
  1464. // Validate invalid count (empty OR zero-like OR negative)
  1465. if (!count || Number(count) <= 0) {
  1466. invalidCount = true;
  1467. }
  1470. //for default one tree by ak
  1471. let id = $("#complaintDropdown").val();
  1474. if (id) {
  1475. compDetailsList.push({
  1476. id: id,
  1477. count: 1
  1478. });
  1479. }
  1480. });*/
  1481. if (compDetailsList.length === 0) {
  1482. $('#pageLoader').hide();
  1483. $('#submitBtn').prop('disabled', false).text('Submit');
  1484. Swal.fire({
  1485. icon: 'warning',
  1486. title: 'Missing',
  1487. text: 'Details of Complaint.'
  1488. });
  1489. return;
  1490. }
  1491. // If any count = 0
  1492. if (invalidCount) {
  1493. $('#pageLoader').hide();
  1494. $('#submitBtn').prop('disabled', false).text('Submit');
  1496. Swal.fire({
  1497. icon: 'error',
  1498. title: 'Invalid Count',
  1499. text: 'Please enter a valid count for all selected complaint Details.'
  1500. });
  1501. return;
  1502. }
  1503. formData.append("ph_no", mobnumber);
  1505. formData.append("p_name", name);
  1506. formData.append("source", "1");
  1507. //formData.append("address", streetName)
  1508. formData.set("streetName", streetName);
  1509. let address = $("#address").val().trim();
  1510. // formData.append("address", address)
  1513. formData.append("c1image", c1image);
  1514. formData.append("c2image", c2image);
  1515. formData.append("comp_details", JSON.stringify(compDetailsList));
  1516. let complaintName = $("#complaintDropdown option:selected").data("name");
  1517. let apiUrl = "/greencommittee/api/savepublicform";
  1518. if (complaintName &&
  1519. complaintName.trim().toLowerCase() === "pruning") {
  1520. if (name.length > 31) {
  1521. $('#pageLoader').hide();
  1522. $('#submitBtn').prop('disabled', false).text('Submit');
  1524. Swal.fire({
  1525. icon: "warning",
  1526. title: "Invalid Petitioner Name",
  1527. text: "Petitioner name cannot exceed 31 characters."
  1528. });
  1529. return; // Stop form submission
  1530. }
  1531. const file = $("#c1image")[0].files[0];
  1533. if (!file) {
  1534. $('#pageLoader').hide();
  1535. $('#submitBtn').prop('disabled', false).text('Submit');
  1537. Swal.fire({
  1538. icon: "warning",
  1539. title: "Image Required",
  1540. text: "Please upload Image 1."
  1541. });
  1542. return;
  1543. }
  1545. // Allow only JPG, JPEG, PNG
  1546. const allowedTypes = ["image/jpeg", "image/jpg", "image/png"];
  1548. if (!allowedTypes.includes(file.type)) {
  1549. $('#pageLoader').hide();
  1550. $('#submitBtn').prop('disabled', false).text('Submit');
  1552. Swal.fire({
  1553. icon: "warning",
  1554. title: "Invalid File",
  1555. text: "Only JPG, JPEG and PNG images are allowed."
  1556. });
  1557. $("#c1image").val("");
  1558. return;
  1559. }
  1561. // Maximum size: 1 MB
  1562. if (file.size > (1 * 1024 * 1024)) {
  1563. $('#pageLoader').hide();
  1564. $('#submitBtn').prop('disabled', false).text('Submit');
  1566. Swal.fire({
  1567. icon: "warning",
  1568. title: "File Too Large",
  1569. text: "Image size should not exceed 1 MB."
  1570. });
  1571. $("#c1image").val("");
  1572. return;
  1573. }
  1576. apiUrl = "/greencommittee/api/savepruningform";
  1577. formData.append("StreetId", street_id);
  1579. // Only one image for pruning
  1580. formData.delete("c2image");
  1581. }
  1582. console.log(formData);
  1585. $.ajax({
  1586. url: apiUrl,
  1587. method: "POST",
  1588. data: formData,
  1589. processData: false,
  1590. contentType: false,
  1591. success: function (response) {
  1592. $('#pageLoader').hide();
  1593. /*if (response.status) {
  1594. Swal.fire({
  1595. icon: 'success',
  1596. allowOutsideClick: false,
  1597. allowEscapeKey: false,
  1598. title: 'Details are Saved Successfully',
  1599. html: 'Reference ID: <b>' + response.ref_id + '</b>'
  1600. }).then(() => {
  1601. window.location.href = "/greencommittee/home";
  1602. });
  1604. }*/
  1605. if (response.status) {
  1607. if (complaintName &&
  1608. complaintName.trim().toLowerCase() === "pruning") {
  1610. Swal.fire({
  1611. icon: 'success',
  1612. allowOutsideClick: false,
  1613. allowEscapeKey: false,
  1614. title: 'Complaint Registered Successfully',
  1615. html: 'Complaint Number: <b>' + response.complaintNumber + '</b>'
  1616. }).then(() => {
  1617. window.location.href = "/greencommittee/home";
  1618. });
  1620. } else {
  1622. Swal.fire({
  1623. icon: 'success',
  1624. allowOutsideClick: false,
  1625. allowEscapeKey: false,
  1626. title: 'Details are Saved Successfully',
  1627. html: 'Reference ID: <b>' + response.ref_id + '</b>'
  1628. }).then(() => {
  1629. window.location.href = "/greencommittee/home";
  1630. });
  1632. }
  1634. }
  1635. else {
  1636. $('#pageLoader').hide();
  1637. Swal.fire({
  1638. icon: 'error',
  1639. title: 'Save Failed',
  1640. text: response.description || 'Something went wrong!'
  1641. });
  1642. }
  1643. $('#submitBtn').prop('disabled', false).text('Submit');
  1644. },
  1645. error: function () {
  1646. $('#pageLoader').hide();
  1647. Swal.fire({
  1648. icon: 'error',
  1649. title: 'Submission Error',
  1650. text: 'Something went wrong while submitting the form.'
  1651. });
  1652. $('#submitBtn').prop('disabled', false).text('Submit');
  1653. }
  1654. });
  1656. });
  1657. </script>
  1658. <script>
  1662. //make sure these variables are in a scope accessible to both handlers
  1663. var resendTimeout = null;
  1664. var timeleft = 0;
  1666. // helper to start the resend countdown (creates the countdown span and updates it every second)
  1667. function startResendCountdown(seconds) {
  1668. // clear any previous interval
  1669. if (resendTimeout) {
  1670. clearInterval(resendTimeout);
  1671. resendTimeout = null;
  1672. }
  1674. timeleft = seconds;
  1676. // Insert the "Please wait.. <span id='countdown'>60</span>s" into the existing container.
  1677. // We keep the same container id (#resend-link) that you already have in HTML,
  1678. // but we avoid creating duplicate ids later.
  1679. $("#resend-link").html('Please wait..<span id="countdown">' + timeleft + '</span>s');
  1681. // Now get the countdown element AFTER it's been added to DOM
  1682. var $countdown = $("#countdown");
  1684. // start interval
  1685. resendTimeout = setInterval(function () {
  1686. timeleft--;
  1687. // only update if the element exists
  1688. if ($countdown.length) $countdown.text(timeleft);
  1690. if (timeleft <= 0) {
  1691. clearInterval(resendTimeout);
  1692. resendTimeout = null;
  1693. // replace the content with an anchor that calls the global sendOTP() function
  1694. // note: we deliberately DO NOT reuse id "resend-link" for the anchor (to avoid duplicate ids)
  1695. // but we put it inside the same container so existing CSS/placement remains unchanged
  1696. $("#resend-link").html('<a href="#" class="text-info resend-anchor" onclick="return sendOTP();">Resend OTP</a>');
  1697. }
  1698. }, 1000);
  1699. }
  1701. // global function used by the generated "Resend OTP" anchor
  1702. window.sendOTP = function () {
  1703. // read the mobile number currently shown in the modal or the input
  1704. // prefer reading from mobilenotxt (displayed) so flow remains same
  1705. var mobileNumber = $("#mobilenotxt").text() || $("#mobile_no").val();
  1707. if (!mobileNumber || mobileNumber.length !== 10) {
  1708. alert("Please enter a valid 10-digit mobile number.");
  1709. return false; // prevent anchor default
  1710. }
  1712. // Optional: disable the anchor while sending (prevents double-click)
  1713. $(".resend-anchor").prop("disabled", true);
  1715. $.ajax({
  1716. type: "GET",
  1717. url: '/greencommittee/api/sendOTP',
  1718. data: { 'mobileNo': mobileNumber },
  1719. dataType: 'json',
  1720. success: function (response) {
  1721. /* if (response === "Error: This number is not registered.") {
  1722. alert("This number is not registered.");
  1723. // restore the container content (or you could keep it as a simple text)
  1724. $("#resend-link").text("Didn't receive OTP?");
  1725. } */ if (response !== "Error") {
  1726. // Re-show the modal (if it was hidden) and restart countdown
  1728. $(".otp-input").val('');
  1729. $("#otperror").html("");
  1731. $('#otpForm').modal({
  1732. backdrop: 'static',
  1733. keyboard: false
  1734. });
  1735. $('#otpForm').modal('show');
  1737. // restart countdown for 60s
  1738. startResendCountdown(60);
  1739. } else {
  1740. alert("OTP not sent. Please try again.");
  1741. }
  1742. },
  1743. error: function () {
  1744. alert("Issue in OTP");
  1745. },
  1746. complete: function () {
  1747. // re-enable the anchor if it exists
  1748. $(".resend-anchor").prop("disabled", false);
  1749. }
  1750. });
  1752. return false; // prevent anchor default navigation
  1753. };
  1755. //For OTP input box
  1756. $('.otp-input').on('keyup', function (e) {
  1757. var $this = $(this);
  1758. if ($this.val().length === 1) {
  1759. $this.next('.otp-input').focus();
  1760. }
  1761. if ($this.val().length === 0) {
  1762. $this.prev('.otp-input').focus();
  1763. }
  1764. });
  1766. //verify otp
  1767. function verifyOtp() {
  1768. var otpInputs = $('.otp-input');
  1769. var otpValue = '';
  1771. otpInputs.each(function () {
  1772. otpValue += $(this).val();
  1773. });
  1775. //console.log("otpValue="+otpValue);
  1777. $.ajax({
  1778. type: "GET",
  1779. url: '/greencommittee/api/verifyOTP',
  1780. data: { 'otp': otpValue },
  1781. dataType: 'text',
  1782. success: function (bodyMessage) {
  1783. if (bodyMessage.trim() === "Success") {
  1784. $('#otpForm').modal('hide');
  1785. //console.log("OTP is Verified!!!");
  1786. mobile_valid = true;
  1787. if (mobile_valid) {
  1788. $("#submitBtn").prop("disabled", false);
  1789. }
  1790. Swal.fire({
  1791. icon: "success",
  1792. title: "Success",
  1793. text: "OTP Verified Successfully",
  1794. });
  1795. //location.reload();
  1796. // Proceeds to save form or next action
  1797. $('#otpbeforeverified').hide();
  1798. $('#otpafterverified').show();
  1800. } else {
  1801. $("#otperror").html("OTP is Incorrect!!!");
  1802. }
  1803. },
  1804. error: function () {
  1805. console.log("Error");
  1806. }
  1807. });
  1809. return false;
  1810. }
  1812. $(document).ready(function () {
  1813. $("#address").closest(".col-md-6").hide();
  1814. $("#address").prop("required", false);
  1815. $('#sendOtpButton').click(function () {
  1817. // Get the entered mobile number
  1818. const mobileNumber = $('#mobile_no').val();
  1820. // Basic check to ensure mobile number is entered
  1821. if (mobileNumber.length === 10) {
  1822. // Display the mobile number in the OTP modal
  1823. $("#mobilenotxt").html(mobileNumber);
  1825. $.ajax({
  1826. type: "GET",
  1827. url: '/greencommittee/api/sendOTP',
  1828. data: { 'mobileNo': mobileNumber }, // Pass mobile number and purpose
  1829. dataType: 'json',
  1830. success: function (response) {
  1832. /* if (response === "Error: This number is not registered.") {
  1833. alert("This number is not registered.");
  1834. } */ if (response !== "Error") {
  1835. // Open OTP Modal
  1837. $(".otp-input").val('');
  1838. $("#otperror").html("");
  1840. $('#otpForm').modal({
  1841. backdrop: 'static',
  1842. keyboard: false
  1843. });
  1844. $('#otpForm').modal('show');
  1847. // Start countdown for resend OTP (60 seconds)
  1848. startResendCountdown(60);
  1849. } else {
  1850. alert("OTP not sent. Please try again.");
  1851. }
  1852. },
  1853. error: function () {
  1854. alert("Issue in OTP");
  1855. }
  1856. });
  1857. } else {
  1858. //alert("Please enter a valid 10-digit mobile number.");
  1859. Swal.fire({
  1860. icon: "warning",
  1861. title: "Validation",
  1862. text: "Please enter a valid 10-digit mobile number.",
  1863. });
  1864. }
  1865. });
  1866. });
  1869. </script>
  1870. </body>
  1872. </html>