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.
1872 lines
67 KiB
1872 lines
67 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>GCC Green Committee</title>
|
|
<meta name="description" content="">
|
|
<meta name="keywords" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<base th:href="${baseURL}" />
|
|
<link rel="icon" th:href="@{images/favicon.ico}" type="image/x-icon" />
|
|
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" th:href="@{assets/node_modules/bootstrap/dist/css/bootstrap.min.css}">
|
|
<link rel="stylesheet" type="text/css" th:href="@{assets/node_modules/select2/dist/css/select2.min.css}">
|
|
<link rel="stylesheet" type="text/css" th:href="@{assets/node_modules/sweetalert2/sweetalert2.min.css}">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
|
|
|
|
<style>
|
|
/* Header Styling */
|
|
.header {
|
|
background-color: #1d495a;
|
|
padding: 10px 20px;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.header .logo img {
|
|
height: 50px;
|
|
}
|
|
|
|
.header .center-text {
|
|
text-align: center;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.header .menu-btn {
|
|
background-color: transparent;
|
|
border: none;
|
|
font-size: 24px;
|
|
color: white;
|
|
}
|
|
|
|
.header .menu-btn:hover {
|
|
color: #ccc;
|
|
}
|
|
|
|
/* Menu Dropdown */
|
|
.menu-dropdown {
|
|
position: absolute;
|
|
top: 60px;
|
|
right: 20px;
|
|
background-color: #1d495a;
|
|
padding: 10px;
|
|
display: none;
|
|
flex-direction: column;
|
|
z-index: 1000;
|
|
/* Add z-index to bring the menu above other elements */
|
|
}
|
|
|
|
.menu-dropdown a {
|
|
color: white;
|
|
margin-bottom: 5px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.menu-dropdown a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Mobile Specific Styling */
|
|
@media (max-width: 768px) {
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.center-text {
|
|
font-size: 18px !important;
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.menu-dropdown {
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
/* Add z-index to bring the menu above other elements */
|
|
}
|
|
}
|
|
|
|
/*css for map in step2*/
|
|
#googleMap {
|
|
height: 300px;
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* #pac-input {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 300px;
|
|
z-index: 5;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
background-color: white;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#search-container {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1000;
|
|
width: 500px;
|
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
|
background-color: white;
|
|
border-radius: 4px;
|
|
padding: 0;
|
|
} */
|
|
|
|
#pac-input {
|
|
|
|
width: 100%;
|
|
padding: 10px;
|
|
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
|
|
font-size: 15px;
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#search-box {
|
|
width: 100%;
|
|
/* Ensures the input takes up the entire width of the container */
|
|
padding: 5px;
|
|
font-size: 16px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
/* Rounded corners matching the container */
|
|
box-sizing: border-box;
|
|
/* Makes sure padding is considered in width */
|
|
}
|
|
|
|
/* #suggestions {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
margin-top: 5px;
|
|
background-color: white;
|
|
display: none;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#suggestions ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#suggestions ul li {
|
|
padding: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#suggestions ul li:hover {
|
|
background-color: #f0f0f0;
|
|
} */
|
|
|
|
#suggestions {
|
|
|
|
width: 100%;
|
|
|
|
display: none;
|
|
|
|
background: #fff;
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
border-top: none;
|
|
|
|
max-height: 220px;
|
|
|
|
overflow-y: auto;
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
|
|
}
|
|
|
|
#suggestions ul {
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
#suggestions li {
|
|
|
|
padding: 10px 12px;
|
|
|
|
cursor: pointer;
|
|
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
#suggestions li:hover {
|
|
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
#search-container {
|
|
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
width: 420px;
|
|
|
|
z-index: 1000;
|
|
}
|
|
|
|
.multi-select-dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-checkbox-menu {
|
|
position: absolute;
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
width: 100%;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
display: none;
|
|
z-index: 999;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.otp-input-box {
|
|
/*display: flex;
|
|
justify-content: space-between;*/
|
|
width: 100%;
|
|
}
|
|
|
|
.otp-input {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* Better card look */
|
|
.card {
|
|
border-radius: 12px;
|
|
border: none;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Section title */
|
|
.section-header h5 {
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #1d495a;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Form labels */
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #1d495a;
|
|
}
|
|
|
|
/* Form inputs */
|
|
.form-control {
|
|
height: 45px;
|
|
border-radius: 7px !important;
|
|
border: 1px solid #c7c7c7;
|
|
transition: 0.2s ease-in-out;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #1d495a;
|
|
box-shadow: 0 0 5px rgba(29, 73, 90, 0.3);
|
|
}
|
|
|
|
/* Textarea styling */
|
|
textarea.form-control {
|
|
min-height: 40px;
|
|
resize: vertical;
|
|
}
|
|
|
|
/* OTP button alignment */
|
|
#sendOtpButton {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Map container rounded & shadow */
|
|
#mapContainer {
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Search bar inside map */
|
|
/* #pac-input {
|
|
width: 80% !important;
|
|
max-width: 350px;
|
|
border-radius: 8px !important;
|
|
} */
|
|
|
|
/* Multi-select dropdown box */
|
|
.multi-select-dropdown .form-control {
|
|
background: #f8f9fa;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Dropdown list */
|
|
.dropdown-checkbox-menu {
|
|
border-radius: 8px;
|
|
border-color: #aaa;
|
|
background: #fefefe;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* File inputs */
|
|
#img_container input {
|
|
height: 53px !important;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Submit button */
|
|
#submitBtn {
|
|
width: 180px;
|
|
height: 45px;
|
|
font-size: 16px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Back button */
|
|
#backBtn {
|
|
border-radius: 8px;
|
|
padding: 10px 25px;
|
|
}
|
|
|
|
/* Improved spacing on mobile */
|
|
@media (max-width: 768px) {
|
|
.row {
|
|
row-gap: 15px;
|
|
}
|
|
|
|
#sendOtpButton {
|
|
margin-top: 10px !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body style="background-color: #f1f3f4;">
|
|
|
|
<!-- Header Start-->
|
|
<header>
|
|
<div class="header d-flex justify-content-between align-items-center">
|
|
<!-- Left: Logo -->
|
|
<div class="logo">
|
|
<img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Logo">
|
|
</div>
|
|
|
|
<!-- Center: Text -->
|
|
<div class="center-text">
|
|
GREATER CHENNAI CORPORATION
|
|
</div>
|
|
|
|
<!-- Right: Button for Menu -->
|
|
<div class="menu">
|
|
<button class="menu-btn" onclick="toggleMenu()">
|
|
☰ <!-- Unicode for hamburger menu icon -->
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dropdown Menu -->
|
|
<div class="menu-dropdown" id="menuDropdown">
|
|
<a href="https://chennaicorporation.gov.in/gcc/">Home</a>
|
|
<a href="https://chennaicorporation.gov.in/gcc/about-GCC/">About GCC</a>
|
|
<a href="https://chennaicorporation.gov.in/gcc/who-is-who/index_data.jsp">Who's Who</a>
|
|
<a href="https://chennaicorporation.gov.in/gcc/council/about-council/">Council</a>
|
|
<a href="https://chennaicorporation.gov.in/gcc/tender/">Tender</a>
|
|
<a href="https://chennaicorporation.gov.in/gcc/department/">Departments</a>
|
|
<a href="https://chennaicorporation.gov.in/gcc/online-services/">Online Services</a>
|
|
<a href="https://gccservices.in/gcc/login">Official Login</a>
|
|
</div>
|
|
|
|
</header>
|
|
<!-- Header End-->
|
|
|
|
<main class="container mt-4">
|
|
|
|
<div class="p-4">
|
|
<form id="publicform" enctype="multipart/form-data">
|
|
<div class="section-header text-center">
|
|
<h5>GREEN COMMITTEE CITIZEN FORM (PUBLIC)</h5>
|
|
</div>
|
|
<div class="row mb-3 mt-2">
|
|
<div class="col-md-4">
|
|
<label class="form-label">Petitioner Name<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="pname" name="name"
|
|
oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" placeholder="Enter Name"
|
|
required>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Mobile Number<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="mobile_no" name="mobile_no"
|
|
oninput="validatePhoneNumber(this)" placeholder="Enter Mobile Number" required>
|
|
</div>
|
|
<div class="col-md-2" id="otpbeforeverified">
|
|
<button type="button" class="btn btn-primary" id="sendOtpButton" style="margin-top: 32px;">Send
|
|
OTP</button>
|
|
</div>
|
|
<div class="col-md-2" id="otpafterverified" style="display: none;">
|
|
<i class="fa-solid fa-circle-check"
|
|
style="margin-top: 40px;font-size: x-large;color: green;"></i>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row mb-4">
|
|
<div class="col-md-4">
|
|
<label class="form-label">Gender<span class="text-danger">*</span></label><br>
|
|
<input type="radio" name="gender" value="M" required="required"> Male
|
|
<input type="radio" name="gender" value="F" class="ms-3 ml-3"> Female
|
|
<input type="radio" name="gender" value="T" class="ms-3 ml-3"> Transgender
|
|
</div>
|
|
<!--<div class="col-md-8">
|
|
<label class="form-label">Tree Land Location (Also click the street in Map)<span
|
|
class="text-danger">*</span></label>
|
|
<textarea class="form-control" id="address" name="address" maxlength="255"
|
|
placeholder="Type Tree Address Here" required></textarea>
|
|
</div>-->
|
|
</div>
|
|
<!-- <div class="row mb-3">
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label">Gender<span class="text-danger">*</span></label><br>
|
|
<input type="radio" name="gender" value="M" required="required"> Male
|
|
<input type="radio" name="gender" value="F" class="ms-3 ml-4"> Female
|
|
<input type="radio" name="gender" value="T" class="ms-3 ml-4"> Transgender
|
|
</div>
|
|
</div> -->
|
|
<!-- <div class="row mb-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Tree Land Location (Also click the street in Map)<span class="text-danger">*</span></label>
|
|
<textarea class="form-control" id="address" name="address" maxlength="255" placeholder="Type Tree Address Here" required ></textarea>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div id="mapContainer" style="position: relative; height: 300px;">
|
|
<div id="search-container">
|
|
<input id="pac-input" class="controls" type="text" placeholder="Search location - please enter minimum of 5 characters">
|
|
<!-- <input type="text" id="search-box" placeholder="Search for a location..."> -->
|
|
<div id="suggestions"></div>
|
|
</div>
|
|
<div id="googleMap" style="height: 100%; width: 100%;"></div>
|
|
</div>
|
|
|
|
|
|
<div class="row mb-3 mt-4" style="row-gap:10px;">
|
|
<div class="col-md-3">
|
|
<label for="latitude">Latitude<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="latitude" name="latitude" readonly>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="longitude">Longitude<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="longitude" name="longitude" readonly>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="streetName">Street<span class="text-danger">*</span></label>
|
|
<select id="streetName" name="streetName" class="form-control" required>
|
|
<option value="">Select Street</option>
|
|
</select>
|
|
</div>
|
|
<!-- <div class="col-md-3">
|
|
<label for="zone">Zone<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="zone" name="zone" required readonly>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="ward">Ward<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="ward" name="ward" required readonly>
|
|
</div>-->
|
|
|
|
</div>
|
|
|
|
<!-- <div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label">Details of Complaint<span class="text-danger">*</span></label>
|
|
|
|
|
|
|
|
|
|
<div class="multi-select-dropdown">
|
|
<div id="dropdownToggle" class="form-control" style="cursor:pointer;" required>
|
|
Select Options
|
|
</div>
|
|
<small class="text-danger">
|
|
<strong>Note:</strong> Only one complaint can be selected.
|
|
</small>
|
|
|
|
|
|
<div id="compnature_checkbox_list" class="dropdown-checkbox-menu"></div>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
<div class="row mb-3">
|
|
<input type="hidden" id="streetId" name="streetId">
|
|
<!-- <div class="col-md-3">
|
|
|
|
<label for="streetId">Street Id</label>
|
|
<input type="text" class="form-control" id="streetId" readonly>
|
|
</div>-->
|
|
<div class="col-md-3">
|
|
<label for="zone">Zone<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="zone" name="zone" readonly>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label for="ward">Ward<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="ward" name="ward" readonly>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row mb-3">
|
|
|
|
<!-- Left Side -->
|
|
<div class="col-md-4">
|
|
<label class="form-label">
|
|
Request Type<span class="text-danger">*</span>
|
|
</label>
|
|
<select id="complaintDropdown" class="form-control" required>
|
|
<option value="">Select Complaint</option>
|
|
</select>
|
|
|
|
<div class="text-danger mt-2">
|
|
<strong>Note:</strong> Only one complaint can be selected.
|
|
</div>
|
|
|
|
|
|
<!-- <div class="multi-select-dropdown">
|
|
<div id="dropdownToggle" class="form-control" style="cursor:pointer;" required>
|
|
Select Options
|
|
</div>
|
|
<div class="text-danger mt-2">
|
|
<strong>Note:</strong> Only one complaint can be selected.
|
|
</div>-->
|
|
|
|
<!-- <small class="text-danger">
|
|
<strong>Note:</strong> Only one complaint can be selected.
|
|
</small>-->
|
|
|
|
<!--- <div id="compnature_checkbox_list" class="dropdown-checkbox-menu"></div>
|
|
</div>-->
|
|
</div>
|
|
|
|
<!-- Right Side -->
|
|
<!--<div class="col-md-8">
|
|
<div class="alert alert-info mb-0 py-2">
|
|
<strong>Instructions:</strong><br>
|
|
|
|
<strong>NOTE: </strong>For tree pruning complaints, please raise your complaint through the
|
|
PGR portal
|
|
<strong>Complaint Type:</strong> Park and Playground
|
|
<br>
|
|
|
|
<strong>Complaint Sub-Type:</strong> Obstruction of Trees
|
|
<br>
|
|
|
|
<a href="https://gccservices.in/pgr/registercomplaints" target="_blank">
|
|
Click here to raise the complaint
|
|
</a>
|
|
</div>
|
|
</div>-->
|
|
|
|
</div>
|
|
|
|
<!-- Dynamic input rows -->
|
|
<div id="naturecontainer"></div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="address">Location of Tree<span class="text-danger">*</span></label>
|
|
<!-- <input type="text" class="form-control" id="address" name="address" placeholder="Enter Address"
|
|
required>-->
|
|
<textarea class="form-control" id="address" name="address" placeholder="Type Tree Address Here"
|
|
required></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Remarks<span class="text-danger">*</span></label>
|
|
<textarea class="form-control" id="remarks" name="remarks" maxlength="255"
|
|
placeholder="Enter Remarks" required></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3" id="img_container">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Upload Image 1 (jpg/jpeg)<span class="text-danger">*</span></label>
|
|
<input type="file" class="form-control" id="c1image" accept=".jpg,.jpeg," name="c1image"
|
|
required="required">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Upload Image 2 (jpg/jpeg)<span class="text-danger">*</span></label>
|
|
<input type="file" class="form-control" id="c2image" accept=".jpg,.jpeg," name="c2image"
|
|
required="required">
|
|
</div>
|
|
</div>
|
|
<span>OTP validation is mandatory for submitting the form.<span class="text-danger">*</span></span>
|
|
<div class="text-center mt-4">
|
|
|
|
<button type="submit" class="btn btn-success" name="submitBtn" id="submitBtn"
|
|
disabled>Submit</button>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
<div class="mt-4">
|
|
<button class="btn btn-secondary" id="backBtn">Back</button>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
<div class="modal fade" id="otpForm" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<form action="#" th:action="@{/otpForm}" th:object="${otpForm}" method="post"
|
|
onsubmit="return verifyOtp();">
|
|
<div class="modal-header">
|
|
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP Login</h6>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
|
|
style="color:black;border: white;background-color: white;">
|
|
<span aria-hidden="true" style="font-size: larger;">×</span>
|
|
</button>
|
|
</div><!--end modal-header-->
|
|
<div class="modal-body">
|
|
<div class="row ">
|
|
<div class="mb-3" style="text-align: center;">
|
|
<img th:src="@{images/otp.png}" width="50%" alt="Mobileotp">
|
|
</div>
|
|
</div><!--end row-->
|
|
|
|
<div class="row d-flex justify-content-center align-items-center">
|
|
<div class="mb-0">
|
|
<h4>OTP Verification</h4>
|
|
<p class="text-mute">Enter the OTP sent to <b class="text-info" id="mobilenotxt"></b>
|
|
</p>
|
|
<p class="text-danger text-center" id="otperror"></p>
|
|
</div>
|
|
</div><!--end row-->
|
|
<div class="row d-flex justify-content-center align-items-center">
|
|
<div class="mb-3 ">
|
|
<div class="otp-input-box">
|
|
<input type="text" maxlength="1" class="otp-input" id="otp1" required />
|
|
<input type="text" maxlength="1" class="otp-input" id="otp2" required />
|
|
<input type="text" maxlength="1" class="otp-input" id="otp3" required />
|
|
<input type="text" maxlength="1" class="otp-input" id="otp4" required />
|
|
<input type="text" maxlength="1" class="otp-input" id="otp5" required />
|
|
</div>
|
|
</div>
|
|
</div><!--end row-->
|
|
<div class="row d-flex justify-content-center align-items-center">
|
|
<div class="mb-3">
|
|
<div id="resend-containers">
|
|
<p class="mb-0">Didn't receive OTP?</p>
|
|
<p class="mb-0 mt-2 text-info text-center" id="resend-link"></p>
|
|
</div>
|
|
</div>
|
|
</div><!--end row-->
|
|
|
|
</div><!--end modal-body-->
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-primary" id="but">Verify OTP</button>
|
|
</div><!--end modal-footer-->
|
|
|
|
|
|
</form>
|
|
</div><!--end modal-content-->
|
|
</div><!--end modal-dialog-->
|
|
</div>
|
|
|
|
<div id="pageLoader"
|
|
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;">
|
|
<div style="position: relative; top: 50%; transform: translateY(-50%);">
|
|
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
<!-- Add the 'Please wait' text below the spinner -->
|
|
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript" th:src="@{assets/node_modules/jquery/dist/jquery.min.js}"></script>
|
|
<script type="text/javascript" th:src="@{assets/node_modules/bootstrap/dist/js/bootstrap.min.js}"></script>
|
|
<script type="text/javascript" th:src="@{assets/node_modules/select2/dist/js/select2.min.js}"></script>
|
|
<script type="text/javascript" th:src="@{assets/node_modules/sweetalert2/sweetalert2.min.js}"></script>
|
|
<script sync defer
|
|
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCi7N6uW5MZaSkd50Kzw7ax2GkMN1vjE-E&callback=myMap&libraries=places">
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
let mobile_valid = false;
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
/*let checkboxList = $("#compnature_checkbox_list");
|
|
let natureContainer = $("#naturecontainer");
|
|
|
|
// Toggle dropdown on click
|
|
$("#dropdownToggle").on("click", function () {
|
|
checkboxList.toggle();
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
$(document).click(function (e) {
|
|
if (!$(e.target).closest(".multi-select-dropdown").length) {
|
|
checkboxList.hide();
|
|
}
|
|
});*/
|
|
|
|
// Fetch API data
|
|
fetch('/greencommittee/api/getcompnatureforpublic')
|
|
.then(res => res.json())
|
|
.then(result => {
|
|
if (result.status !== "success") return;
|
|
|
|
let list = result.data;
|
|
let dropdown = $("#complaintDropdown");
|
|
|
|
list.forEach(function (d) {
|
|
dropdown.append(
|
|
`<option value="${d.id}" data-name="${d.name}">
|
|
${d.name}
|
|
</option>`
|
|
);
|
|
});
|
|
|
|
/*list.forEach(d => {
|
|
checkboxList.append(`
|
|
<div class="form-check">
|
|
<input type="checkbox"
|
|
class="form-check-input nature-check"
|
|
id="nature_${d.id}"
|
|
data-id="${d.id}"
|
|
data-name="${d.name}">
|
|
<label class="form-check-label" for="nature_${d.id}">
|
|
${d.name}
|
|
</label>
|
|
</div>
|
|
`);
|
|
});*/
|
|
});
|
|
|
|
// Handle checkbox selection
|
|
/*$(document).on("change", ".nature-check", function () {
|
|
|
|
let id = $(this).data("id");
|
|
let name = $(this).data("name");
|
|
|
|
updateDropdownLabel(); // update selected names on the dropdown
|
|
|
|
// If checked → add column box
|
|
if ($(this).is(":checked")) {
|
|
|
|
// Create the row ONCE
|
|
if ($("#treeRow").length === 0) {
|
|
$("#naturecontainer").append(`<div class="row" id="treeRow"></div>`);
|
|
}
|
|
|
|
let html = `
|
|
<div class="col-md-4 mb-3 tree-input-box" id="col_${id}">
|
|
<label class="form-label">No. of Trees - ${name}<span class="text-danger">*</span></label>
|
|
<input type="number" min="0" class="form-control"
|
|
id="trees_${id}" placeholder="Enter count" required="required">
|
|
</div>
|
|
`;
|
|
|
|
$("#treeRow").append(html);
|
|
}
|
|
else {
|
|
// Remove column on uncheck
|
|
$("#col_" + id).remove();
|
|
|
|
// If all unchecked → remove row
|
|
if ($(".tree-input-box").length === 0) {
|
|
$("#treeRow").remove();
|
|
}
|
|
}
|
|
});*/
|
|
|
|
$(document).on("change", "#complaintDropdown", function () {
|
|
|
|
$("#treeRow").remove();
|
|
|
|
let id = $(this).val();
|
|
let name = $("#complaintDropdown option:selected").data("name");
|
|
if (!name) {
|
|
|
|
// Nothing selected
|
|
$("#c2image").closest(".col-md-6").show();
|
|
$("#c2image").prop("required", true);
|
|
|
|
$("#address").closest(".col-md-6").hide();
|
|
$("#address").prop("required", false).val("");
|
|
|
|
} else if (name.toLowerCase() === "pruning") {
|
|
|
|
// Pruning selected
|
|
$("#c2image").closest(".col-md-6").hide();
|
|
$("#c2image").prop("required", false).val("");
|
|
|
|
$("#address").closest(".col-md-6").hide();
|
|
$("#address").prop("required", false).val("");
|
|
|
|
} else {
|
|
|
|
// Any complaint other than pruning
|
|
$("#c2image").closest(".col-md-6").show();
|
|
$("#c2image").prop("required", true);
|
|
|
|
$("#address").closest(".col-md-6").show();
|
|
$("#address").prop("required", true);
|
|
}
|
|
|
|
/* if (name && name.toLowerCase() === "pruning") {
|
|
|
|
|
|
// Hide second image
|
|
$("#c2image").closest(".col-md-6").hide();
|
|
|
|
// Remove required validation
|
|
$("#c2image").prop("required", false).val("");
|
|
$("#address").closest(".col-md-6").hide();
|
|
$("#address").prop("required", false).val("");
|
|
|
|
} else {
|
|
|
|
// Show second image
|
|
$("#c2image").closest(".col-md-6").show();
|
|
|
|
// Existing workflow
|
|
$("#c2image").prop("required", true);
|
|
$("#address").closest(".col-md-6").show();
|
|
$("#address").prop("required", true);
|
|
}*/
|
|
|
|
if (!id) {
|
|
return;
|
|
}
|
|
|
|
$("#naturecontainer").html(`
|
|
<div class="row" id="treeRow">
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label">
|
|
No. of Trees - ${name}
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
|
|
<input type="number"
|
|
class="form-control"
|
|
id="trees_${id}"
|
|
value="1"
|
|
disabled>
|
|
</div>
|
|
</div>
|
|
`);
|
|
});
|
|
// Handle Complaint Selection (Only One Selection Allowed)
|
|
/*$(document).on("change", ".nature-check", function () {
|
|
|
|
// If checked, uncheck all others
|
|
if ($(this).is(":checked")) {
|
|
$(".nature-check").not(this).prop("checked", false);
|
|
}
|
|
|
|
// Remove previous tree input
|
|
$("#treeRow").remove();
|
|
|
|
let checked = $(".nature-check:checked");
|
|
|
|
if (checked.length > 0) {
|
|
|
|
let id = checked.data("id");
|
|
let name = checked.data("name");
|
|
|
|
$("#naturecontainer").html(`
|
|
<div class="row" id="treeRow">
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label">
|
|
No. of Trees - ${name}
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<input type="number"
|
|
class="form-control"
|
|
id="trees_${id}"
|
|
value="1"
|
|
disabled>
|
|
</div>
|
|
</div>
|
|
`);
|
|
}
|
|
|
|
updateDropdownLabel();
|
|
});*/
|
|
|
|
// Update dropdown text with selected names
|
|
/*function updateDropdownLabel() {
|
|
let selected = [];
|
|
|
|
$(".nature-check:checked").each(function () {
|
|
selected.push($(this).data("name"));
|
|
});
|
|
|
|
if (selected.length === 0) {
|
|
$("#dropdownToggle").text("Select Options");
|
|
} else {
|
|
$("#dropdownToggle").text(selected.join(", "));
|
|
}
|
|
}*/ /* function updateDropdownLabel() {
|
|
|
|
let checked = $(".nature-check:checked");
|
|
|
|
if (checked.length === 0) {
|
|
$("#dropdownToggle").text("Select Complaint");
|
|
} else {
|
|
$("#dropdownToggle").text(checked.data("name"));
|
|
}
|
|
}*/
|
|
|
|
|
|
|
|
});
|
|
|
|
document.getElementById("backBtn").addEventListener("click", function () {
|
|
window.location.href = "/greencommittee/home";
|
|
});
|
|
|
|
|
|
|
|
//Maximum file size (10 MB)
|
|
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes
|
|
|
|
// Apply to all file inputs inside the form
|
|
$("#publicform input[type='file']").on("change", function () {
|
|
const fileInput = this;
|
|
console.log(" cehcking");
|
|
|
|
if (fileInput.files.length > 0) {
|
|
let file = fileInput.files[0];
|
|
|
|
if (file.size > MAX_FILE_SIZE) {
|
|
|
|
Swal.fire({
|
|
icon: "error",
|
|
title: "File too large!",
|
|
text: "Maximum allowed file size is 10 MB.",
|
|
});
|
|
|
|
// Clear file input
|
|
$(fileInput).val('');
|
|
}
|
|
}
|
|
});
|
|
|
|
function toggleMenu() {
|
|
var dropdown = document.getElementById("menuDropdown");
|
|
if (dropdown.style.display === "flex") {
|
|
dropdown.style.display = "none";
|
|
} else {
|
|
dropdown.style.display = "flex";
|
|
}
|
|
}
|
|
function validatePhoneNumber(input) {
|
|
input.value = input.value.replace(/[^0-9]/g, '').slice(0, 10);
|
|
}
|
|
//Script For Map
|
|
|
|
function myMap() {
|
|
const defaultCenter = { lat: 13.0827, lng: 80.2707 };
|
|
const map = new google.maps.Map(document.getElementById("googleMap"), {
|
|
center: defaultCenter,
|
|
zoom: 14
|
|
});
|
|
|
|
let marker = null;
|
|
let streetsList = []; // Define globally inside myMap
|
|
const infowindow = new google.maps.InfoWindow();
|
|
|
|
// Initialize the SearchBox
|
|
/* const input = document.getElementById('pac-input');
|
|
const searchBox = new google.maps.places.SearchBox(input);
|
|
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
|
|
|
|
map.addListener('bounds_changed', function () {
|
|
searchBox.setBounds(map.getBounds());
|
|
});
|
|
|
|
searchBox.addListener('places_changed', function () {
|
|
const places = searchBox.getPlaces();
|
|
if (places.length === 0) return;
|
|
|
|
if (marker) marker.setMap(null);
|
|
const place = places[0];
|
|
if (!place.geometry) return;
|
|
|
|
marker = new google.maps.Marker({
|
|
map: map,
|
|
position: place.geometry.location
|
|
});
|
|
|
|
const lat = place.geometry.location.lat().toFixed(6);
|
|
const lng = place.geometry.location.lng().toFixed(6);
|
|
document.getElementById("latitude").value = lat;
|
|
document.getElementById("longitude").value = lng;
|
|
|
|
map.setCenter(place.geometry.location);
|
|
map.setZoom(15);
|
|
|
|
infowindow.setContent(`Latitude: ${lat}<br>Longitude: ${lng}`);
|
|
infowindow.open(map, marker);
|
|
|
|
fetchStreets(lat, lng);
|
|
}); */
|
|
|
|
const input = document.getElementById("pac-input");
|
|
const suggestions = document.getElementById("suggestions");
|
|
|
|
const autocompleteService = new google.maps.places.AutocompleteService();
|
|
const placesService = new google.maps.places.PlacesService(map);
|
|
|
|
let debounceTimer = null;
|
|
|
|
input.addEventListener("input", function () {
|
|
|
|
clearTimeout(debounceTimer);
|
|
|
|
const query = this.value.trim();
|
|
|
|
// Hide suggestions
|
|
if (query.length < 5) {
|
|
|
|
suggestions.style.display = "none";
|
|
suggestions.innerHTML = "";
|
|
|
|
return;
|
|
}
|
|
|
|
debounceTimer = setTimeout(function () {
|
|
|
|
autocompleteService.getPlacePredictions({
|
|
|
|
input: query,
|
|
bounds: map.getBounds()
|
|
|
|
}, showPredictions);
|
|
|
|
}, 500);
|
|
|
|
});
|
|
|
|
function showPredictions(predictions, status) {
|
|
|
|
suggestions.innerHTML = "";
|
|
|
|
if (
|
|
status !== google.maps.places.PlacesServiceStatus.OK ||
|
|
!predictions ||
|
|
predictions.length === 0
|
|
) {
|
|
|
|
suggestions.style.display = "none";
|
|
return;
|
|
}
|
|
|
|
const ul = document.createElement("ul");
|
|
|
|
predictions.forEach(function (prediction) {
|
|
|
|
const li = document.createElement("li");
|
|
|
|
li.innerHTML = prediction.description;
|
|
|
|
li.onclick = function () {
|
|
|
|
input.value = prediction.description;
|
|
|
|
suggestions.style.display = "none";
|
|
|
|
loadPlace(prediction.place_id);
|
|
|
|
};
|
|
|
|
ul.appendChild(li);
|
|
|
|
});
|
|
|
|
suggestions.appendChild(ul);
|
|
|
|
suggestions.style.display = "block";
|
|
|
|
}
|
|
|
|
function loadPlace(placeId) {
|
|
|
|
placesService.getDetails({
|
|
|
|
placeId: placeId,
|
|
fields: [
|
|
"geometry",
|
|
"formatted_address",
|
|
"name"
|
|
]
|
|
|
|
}, function (place, status) {
|
|
|
|
if (status !== google.maps.places.PlacesServiceStatus.OK)
|
|
return;
|
|
|
|
if (marker)
|
|
marker.setMap(null);
|
|
|
|
marker = new google.maps.Marker({
|
|
|
|
map: map,
|
|
position: place.geometry.location
|
|
|
|
});
|
|
|
|
const lat = place.geometry.location.lat().toFixed(6);
|
|
const lng = place.geometry.location.lng().toFixed(6);
|
|
|
|
document.getElementById("latitude_field").value = lat;
|
|
document.getElementById("longitude_field").value = lng;
|
|
|
|
map.setCenter(place.geometry.location);
|
|
map.setZoom(15);
|
|
|
|
infowindow.setContent(
|
|
"Latitude : " + lat +
|
|
"<br>Longitude : " + lng
|
|
);
|
|
|
|
infowindow.open(map, marker);
|
|
|
|
fetchStreets(lat, lng);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
document.addEventListener("click", function (e) {
|
|
|
|
if (
|
|
!suggestions.contains(e.target) &&
|
|
e.target !== input
|
|
) {
|
|
|
|
suggestions.style.display = "none";
|
|
|
|
}
|
|
|
|
});
|
|
|
|
map.addListener("click", function (event) {
|
|
const clickedLatLng = event.latLng;
|
|
if (marker) marker.setMap(null);
|
|
|
|
marker = new google.maps.Marker({
|
|
position: clickedLatLng,
|
|
map: map
|
|
});
|
|
|
|
const lat = clickedLatLng.lat().toFixed(6);
|
|
const lng = clickedLatLng.lng().toFixed(6);
|
|
|
|
document.getElementById("latitude").value = lat;
|
|
document.getElementById("longitude").value = lng;
|
|
|
|
infowindow.setContent(`Latitude: ${lat}<br>Longitude: ${lng}`);
|
|
infowindow.open(map, marker);
|
|
|
|
fetchStreets(lat, lng);
|
|
});
|
|
|
|
function fetchStreets(lat, lng) {
|
|
const encodedGeometry = encodeURIComponent(JSON.stringify({ y: lat, x: lng }));
|
|
//const url = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/EDPMobile2025/
|
|
//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`;
|
|
|
|
const url = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/EDPMobile2025/FeatureServer/0/query?` +
|
|
`where=&objectIds=&time=&geometry=${encodedGeometry}` +
|
|
`&geometryType=esriGeometryPoint&inSR=4326&defaultSR=4326&spatialRel=esriSpatialRelIntersects&distance=25` +
|
|
`&units=esriSRUnit_Meter&relationParam=&outFields=region%2Cnew_zone%2C+new_ward%2Croad_id%2C+road_name%2Cgis_id%2Ctype` +
|
|
`&returnGeometry=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&gdbVersion=&historicMoment=` +
|
|
`&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=` +
|
|
`&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=xyFootprint&resultOffset=` +
|
|
`&resultRecordCount=&returnTrueCurves=false&returnExceededLimitFeatures=false&quantizationParameters=&returnCentroid=false` +
|
|
`&timeReferenceUnknownClient=false&maxRecordCountFactor=&sqlFormat=none&resultType=&featureEncoding=esriDefault` +
|
|
`&datumTransformation=&f=geojson`;
|
|
|
|
|
|
//console.log(url);
|
|
|
|
fetch(url)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
|
|
console.log("GIS API Response:", data);
|
|
|
|
const features = data.features;
|
|
if (features.length > 0) {
|
|
const props = features[0].properties;
|
|
const zone = props.new_zone;
|
|
const ward = props.new_ward;
|
|
|
|
|
|
console.log("Zone:", zone, "Ward:", ward);
|
|
// 👉 You can update form fields or DOM elements here
|
|
document.getElementById("zone").value = zone;
|
|
document.getElementById("ward").value = ward;
|
|
} else {
|
|
console.warn("No zone/ward found for this location.");
|
|
document.getElementById("zone").value = '';
|
|
document.getElementById("ward").value = '';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Error fetching zone/ward:", error);
|
|
});
|
|
|
|
|
|
const streetSelect = document.getElementById("streetName");
|
|
streetSelect.innerHTML = "";
|
|
|
|
const defaultOption = document.createElement("option");
|
|
defaultOption.value = "";
|
|
defaultOption.text = "-- Select Street --";
|
|
streetSelect.appendChild(defaultOption);
|
|
|
|
document.getElementById("streetId").value = "";
|
|
|
|
// Timeout mechanism: 1 seconds
|
|
const timeout = new Promise((_, reject) =>
|
|
setTimeout(() => reject(new Error("Request timed out")), 1000)
|
|
);
|
|
|
|
// Actual fetch
|
|
const fetchRequest = fetch(url).then(res => res.json());
|
|
|
|
Promise.race([fetchRequest, timeout])
|
|
.then(data => {
|
|
const features = data.features;
|
|
if (!features || features.length === 0) {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'No Street Found',
|
|
text: 'Please select the nearby street.',
|
|
});
|
|
return;
|
|
}
|
|
|
|
streetsList = features.map(f => f.properties); //Save for use in dropdown
|
|
streetsList.forEach((props, index) => {
|
|
const option = document.createElement("option");
|
|
option.value = index;
|
|
option.text = props.road_name;
|
|
streetSelect.appendChild(option);
|
|
});
|
|
})
|
|
.catch(err => {
|
|
console.error("Error fetching street:", err);
|
|
Swal.fire("Failed to load street data", '', 'error');
|
|
});
|
|
|
|
}
|
|
|
|
document.getElementById("streetName").addEventListener("change", function () {
|
|
const selectedIndex = this.value;
|
|
console.log("heck")
|
|
console.log(selectedIndex);
|
|
|
|
|
|
if (selectedIndex !== "") {
|
|
const selectedStreet = streetsList[selectedIndex];
|
|
console.log(selectedStreet);
|
|
|
|
document.getElementById("streetId").value = selectedStreet.road_id;
|
|
|
|
|
|
|
|
console.log("Selected street:", selectedStreet);
|
|
} else {
|
|
document.getElementById("streetId").value = "";
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
$('#publicform').submit(function (e) {
|
|
e.preventDefault();
|
|
$('#pageLoader').show();
|
|
|
|
let formData = new FormData(this);
|
|
$('#submitBtn').prop('disabled', true).text('Submitting...');
|
|
|
|
const mobnumber = $('#mobile_no').val().trim();
|
|
if (mobnumber) {
|
|
// Rule 1: Must be exactly 10 digits & must not start with 0
|
|
if (!/^[1-9][0-9]{9}$/.test(mobnumber)) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Invalid Mobile Number',
|
|
text: 'Mobile number must be 10 digits and cannot start with 0.'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Rule 2: Reject sequential numbers like 1234567890
|
|
if (mobnumber === "1234567890") {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Invalid Mobile Number',
|
|
text: 'Sequential numbers like 1234567890 are not allowed.'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Rule 3: Reject all digits same (1111111111, 2222222222, etc.)
|
|
if (/^(\d)\1{9}$/.test(mobnumber)) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
Swal.fire({
|
|
|
|
icon: 'warning',
|
|
title: 'Invalid Mobile Number',
|
|
text: 'All digits cannot be the same.'
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
const latitude = $('#latitude').val().trim();
|
|
const longitute = $('#longitude').val().trim();
|
|
if (!latitude) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Missing latitude',
|
|
text: 'Please Mark or search in street Map.'
|
|
});
|
|
return;
|
|
}
|
|
if (!longitude) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Missing longitude',
|
|
text: 'Please Mark or search in street Map.'
|
|
});
|
|
return;
|
|
}
|
|
|
|
const zone = $('#zone').val().trim();
|
|
const ward = $('#ward').val().trim();
|
|
|
|
if (!zone) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Missing Zone',
|
|
text: 'Please Mark or search in street Map.'
|
|
});
|
|
return;
|
|
}
|
|
if (!ward) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Missing Ward',
|
|
text: 'Please Mark or search in street Map..'
|
|
});
|
|
return;
|
|
}
|
|
|
|
const name = $('#pname').val();
|
|
const streetName = $('#streetName option:selected').text();
|
|
const street_id = $('#streetId').val();
|
|
// console.log("cfefefef");
|
|
console.log(streetName);
|
|
console.log("Streetid");
|
|
console.log(street_id);
|
|
// const streetName = $('#streetName').val();
|
|
|
|
|
|
const c1image = $('#c1image')[0];
|
|
const c2image = $('#c2image')[0];
|
|
|
|
let compDetailsList = [];
|
|
let invalidCount = false;
|
|
|
|
|
|
let id = $("#complaintDropdown").val();
|
|
|
|
if (id) {
|
|
let count = $("#trees_" + id).val();
|
|
|
|
if (!count || Number(count) <= 0) {
|
|
invalidCount = true;
|
|
}
|
|
|
|
compDetailsList.push({
|
|
id: id,
|
|
count: 1
|
|
});
|
|
}
|
|
|
|
/*$(".nature-check:checked").each(function () {
|
|
// let id = $(this).data("id");
|
|
let count = $("#trees_" + id).val();
|
|
|
|
// Validate invalid count (empty OR zero-like OR negative)
|
|
if (!count || Number(count) <= 0) {
|
|
invalidCount = true;
|
|
}
|
|
|
|
|
|
//for default one tree by ak
|
|
let id = $("#complaintDropdown").val();
|
|
|
|
|
|
if (id) {
|
|
compDetailsList.push({
|
|
id: id,
|
|
count: 1
|
|
});
|
|
}
|
|
});*/
|
|
if (compDetailsList.length === 0) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Missing',
|
|
text: 'Details of Complaint.'
|
|
});
|
|
return;
|
|
}
|
|
// If any count = 0
|
|
if (invalidCount) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Invalid Count',
|
|
text: 'Please enter a valid count for all selected complaint Details.'
|
|
});
|
|
return;
|
|
}
|
|
formData.append("ph_no", mobnumber);
|
|
|
|
formData.append("p_name", name);
|
|
formData.append("source", "1");
|
|
//formData.append("address", streetName)
|
|
formData.set("streetName", streetName);
|
|
let address = $("#address").val().trim();
|
|
// formData.append("address", address)
|
|
|
|
|
|
formData.append("c1image", c1image);
|
|
formData.append("c2image", c2image);
|
|
formData.append("comp_details", JSON.stringify(compDetailsList));
|
|
let complaintName = $("#complaintDropdown option:selected").data("name");
|
|
let apiUrl = "/greencommittee/api/savepublicform";
|
|
if (complaintName &&
|
|
complaintName.trim().toLowerCase() === "pruning") {
|
|
if (name.length > 31) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
|
|
Swal.fire({
|
|
icon: "warning",
|
|
title: "Invalid Petitioner Name",
|
|
text: "Petitioner name cannot exceed 31 characters."
|
|
});
|
|
return; // Stop form submission
|
|
}
|
|
const file = $("#c1image")[0].files[0];
|
|
|
|
if (!file) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
|
|
Swal.fire({
|
|
icon: "warning",
|
|
title: "Image Required",
|
|
text: "Please upload Image 1."
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Allow only JPG, JPEG, PNG
|
|
const allowedTypes = ["image/jpeg", "image/jpg", "image/png"];
|
|
|
|
if (!allowedTypes.includes(file.type)) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
|
|
Swal.fire({
|
|
icon: "warning",
|
|
title: "Invalid File",
|
|
text: "Only JPG, JPEG and PNG images are allowed."
|
|
});
|
|
$("#c1image").val("");
|
|
return;
|
|
}
|
|
|
|
// Maximum size: 1 MB
|
|
if (file.size > (1 * 1024 * 1024)) {
|
|
$('#pageLoader').hide();
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
|
|
Swal.fire({
|
|
icon: "warning",
|
|
title: "File Too Large",
|
|
text: "Image size should not exceed 1 MB."
|
|
});
|
|
$("#c1image").val("");
|
|
return;
|
|
}
|
|
|
|
|
|
apiUrl = "/greencommittee/api/savepruningform";
|
|
formData.append("StreetId", street_id);
|
|
|
|
// Only one image for pruning
|
|
formData.delete("c2image");
|
|
}
|
|
console.log(formData);
|
|
|
|
|
|
$.ajax({
|
|
url: apiUrl,
|
|
method: "POST",
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function (response) {
|
|
$('#pageLoader').hide();
|
|
/*if (response.status) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
title: 'Details are Saved Successfully',
|
|
html: 'Reference ID: <b>' + response.ref_id + '</b>'
|
|
}).then(() => {
|
|
window.location.href = "/greencommittee/home";
|
|
});
|
|
|
|
}*/
|
|
if (response.status) {
|
|
|
|
if (complaintName &&
|
|
complaintName.trim().toLowerCase() === "pruning") {
|
|
|
|
Swal.fire({
|
|
icon: 'success',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
title: 'Complaint Registered Successfully',
|
|
html: 'Complaint Number: <b>' + response.complaintNumber + '</b>'
|
|
}).then(() => {
|
|
window.location.href = "/greencommittee/home";
|
|
});
|
|
|
|
} else {
|
|
|
|
Swal.fire({
|
|
icon: 'success',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
title: 'Details are Saved Successfully',
|
|
html: 'Reference ID: <b>' + response.ref_id + '</b>'
|
|
}).then(() => {
|
|
window.location.href = "/greencommittee/home";
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
else {
|
|
$('#pageLoader').hide();
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Save Failed',
|
|
text: response.description || 'Something went wrong!'
|
|
});
|
|
}
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
},
|
|
error: function () {
|
|
$('#pageLoader').hide();
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Submission Error',
|
|
text: 'Something went wrong while submitting the form.'
|
|
});
|
|
$('#submitBtn').prop('disabled', false).text('Submit');
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
<script>
|
|
|
|
|
|
|
|
//make sure these variables are in a scope accessible to both handlers
|
|
var resendTimeout = null;
|
|
var timeleft = 0;
|
|
|
|
// helper to start the resend countdown (creates the countdown span and updates it every second)
|
|
function startResendCountdown(seconds) {
|
|
// clear any previous interval
|
|
if (resendTimeout) {
|
|
clearInterval(resendTimeout);
|
|
resendTimeout = null;
|
|
}
|
|
|
|
timeleft = seconds;
|
|
|
|
// Insert the "Please wait.. <span id='countdown'>60</span>s" into the existing container.
|
|
// We keep the same container id (#resend-link) that you already have in HTML,
|
|
// but we avoid creating duplicate ids later.
|
|
$("#resend-link").html('Please wait..<span id="countdown">' + timeleft + '</span>s');
|
|
|
|
// Now get the countdown element AFTER it's been added to DOM
|
|
var $countdown = $("#countdown");
|
|
|
|
// start interval
|
|
resendTimeout = setInterval(function () {
|
|
timeleft--;
|
|
// only update if the element exists
|
|
if ($countdown.length) $countdown.text(timeleft);
|
|
|
|
if (timeleft <= 0) {
|
|
clearInterval(resendTimeout);
|
|
resendTimeout = null;
|
|
// replace the content with an anchor that calls the global sendOTP() function
|
|
// note: we deliberately DO NOT reuse id "resend-link" for the anchor (to avoid duplicate ids)
|
|
// but we put it inside the same container so existing CSS/placement remains unchanged
|
|
$("#resend-link").html('<a href="#" class="text-info resend-anchor" onclick="return sendOTP();">Resend OTP</a>');
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
// global function used by the generated "Resend OTP" anchor
|
|
window.sendOTP = function () {
|
|
// read the mobile number currently shown in the modal or the input
|
|
// prefer reading from mobilenotxt (displayed) so flow remains same
|
|
var mobileNumber = $("#mobilenotxt").text() || $("#mobile_no").val();
|
|
|
|
if (!mobileNumber || mobileNumber.length !== 10) {
|
|
alert("Please enter a valid 10-digit mobile number.");
|
|
return false; // prevent anchor default
|
|
}
|
|
|
|
// Optional: disable the anchor while sending (prevents double-click)
|
|
$(".resend-anchor").prop("disabled", true);
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/greencommittee/api/sendOTP',
|
|
data: { 'mobileNo': mobileNumber },
|
|
dataType: 'json',
|
|
success: function (response) {
|
|
/* if (response === "Error: This number is not registered.") {
|
|
alert("This number is not registered.");
|
|
// restore the container content (or you could keep it as a simple text)
|
|
$("#resend-link").text("Didn't receive OTP?");
|
|
} */ if (response !== "Error") {
|
|
// Re-show the modal (if it was hidden) and restart countdown
|
|
|
|
$(".otp-input").val('');
|
|
$("#otperror").html("");
|
|
|
|
$('#otpForm').modal({
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
$('#otpForm').modal('show');
|
|
|
|
// restart countdown for 60s
|
|
startResendCountdown(60);
|
|
} else {
|
|
alert("OTP not sent. Please try again.");
|
|
}
|
|
},
|
|
error: function () {
|
|
alert("Issue in OTP");
|
|
},
|
|
complete: function () {
|
|
// re-enable the anchor if it exists
|
|
$(".resend-anchor").prop("disabled", false);
|
|
}
|
|
});
|
|
|
|
return false; // prevent anchor default navigation
|
|
};
|
|
|
|
//For OTP input box
|
|
$('.otp-input').on('keyup', function (e) {
|
|
var $this = $(this);
|
|
if ($this.val().length === 1) {
|
|
$this.next('.otp-input').focus();
|
|
}
|
|
if ($this.val().length === 0) {
|
|
$this.prev('.otp-input').focus();
|
|
}
|
|
});
|
|
|
|
//verify otp
|
|
function verifyOtp() {
|
|
var otpInputs = $('.otp-input');
|
|
var otpValue = '';
|
|
|
|
otpInputs.each(function () {
|
|
otpValue += $(this).val();
|
|
});
|
|
|
|
//console.log("otpValue="+otpValue);
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/greencommittee/api/verifyOTP',
|
|
data: { 'otp': otpValue },
|
|
dataType: 'text',
|
|
success: function (bodyMessage) {
|
|
if (bodyMessage.trim() === "Success") {
|
|
$('#otpForm').modal('hide');
|
|
//console.log("OTP is Verified!!!");
|
|
mobile_valid = true;
|
|
if (mobile_valid) {
|
|
$("#submitBtn").prop("disabled", false);
|
|
}
|
|
Swal.fire({
|
|
icon: "success",
|
|
title: "Success",
|
|
text: "OTP Verified Successfully",
|
|
});
|
|
//location.reload();
|
|
// Proceeds to save form or next action
|
|
$('#otpbeforeverified').hide();
|
|
$('#otpafterverified').show();
|
|
|
|
} else {
|
|
$("#otperror").html("OTP is Incorrect!!!");
|
|
}
|
|
},
|
|
error: function () {
|
|
console.log("Error");
|
|
}
|
|
});
|
|
|
|
return false;
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$("#address").closest(".col-md-6").hide();
|
|
$("#address").prop("required", false);
|
|
$('#sendOtpButton').click(function () {
|
|
|
|
// Get the entered mobile number
|
|
const mobileNumber = $('#mobile_no').val();
|
|
|
|
// Basic check to ensure mobile number is entered
|
|
if (mobileNumber.length === 10) {
|
|
// Display the mobile number in the OTP modal
|
|
$("#mobilenotxt").html(mobileNumber);
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/greencommittee/api/sendOTP',
|
|
data: { 'mobileNo': mobileNumber }, // Pass mobile number and purpose
|
|
dataType: 'json',
|
|
success: function (response) {
|
|
|
|
/* if (response === "Error: This number is not registered.") {
|
|
alert("This number is not registered.");
|
|
} */ if (response !== "Error") {
|
|
// Open OTP Modal
|
|
|
|
$(".otp-input").val('');
|
|
$("#otperror").html("");
|
|
|
|
$('#otpForm').modal({
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
$('#otpForm').modal('show');
|
|
|
|
|
|
// Start countdown for resend OTP (60 seconds)
|
|
startResendCountdown(60);
|
|
} else {
|
|
alert("OTP not sent. Please try again.");
|
|
}
|
|
},
|
|
error: function () {
|
|
alert("Issue in OTP");
|
|
}
|
|
});
|
|
} else {
|
|
//alert("Please enter a valid 10-digit mobile number.");
|
|
Swal.fire({
|
|
icon: "warning",
|
|
title: "Validation",
|
|
text: "Please enter a valid 10-digit mobile number.",
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|