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.
 
 
 
 
 

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()">
&#9776; <!-- 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;">&times;</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>