Integrated Whatsapp message for volunteer registration

src/main/java/com/volunteersregistration/controller/ApiController.java

@@ -86,11 +86,25 @@ public class ApiController {
         LocalDateTime now = LocalDateTime.now();
         System.out.println(dtf.format(now));
 
-        String generatedToken = "Welcome to GCC "+otp+" is your OTP for gcc QR System";
+//        String generatedToken = "OTP for Volunteer ";
 //        String key="qxg4mklD";
-        String key="pfTEYN6H";
-        String urlString= appConfig.getGetOtpUrl()+"from=GCCCRP&key="+key+"&sender=GCCCRP&to="+MobileNo+"&body="+generatedToken+"&entityid=1401572690000011081&templateid=1407168250479102852";
+//        String key="pfTEYN6H";
+        //String urlString= appConfig.getGetOtpUrl()+"from=GCCCRP&key="+key+"&sender=GCCCRP&to="+MobileNo+"&body="+generatedToken+"&entityid=1401572690000011081&templateid=1407168250479102852";
+//        String urlString = "https://tmegov.onex-aura.com/api/sms?key=pfTEYN6H&to=" + MobileNo
+//                + "&from=GCCCRP&body=OTP for Volunteer Registration " + otp
+//                + "\r\n- GCC&entityid=1401572690000011081&templateid=1407176491887361640";
 //        String urlString=appConfig.getGetOtpUrl()+"user=GCCtrans&authkey=92kOC1RBGBIws&sender=GCCCRP&mobile="+MobileNo+"&text="+generatedToken+"&rpt=1&summary=1&output=json&entityid=1401572690000011081&templateid=1407168250479102852";
+        
+        String key = "pfTEYN6H";
+        String entityId = "1401572690000011081";
+        String templateId = "1407175765770900925";
+        String appName = "Volunteer Registration";
+        
+        String generatedMessage = "Welcome to GCC! Your OTP for " + appName + " is " + otp + ".";
+        String urlString = appConfig.getGetOtpUrl() + "from=GCCCRP" + "&key=" + key + "&sender=GCCCRP" + "&to="
+                + MobileNo + "&body="
+                + generatedMessage + "&entityid=" + entityId + "&templateid=" + templateId;
+        
         System.out.print("\n urlString---:  "+urlString);
         String bodyMessage = "";
         try {

src/main/java/com/volunteersregistration/controller/VolunteerController.java

@@ -38,14 +38,42 @@ public class VolunteerController {
 	@Autowired
 	public VolunteerRegistrationService volunteerRegistrationService;
 
+	@GetMapping("/web")
+	public String registerweb(@RequestParam(required = false) String ref, Model model) {
+		System.out.println("indesx page....." + ref);
+		model.addAttribute("ref", ref);
+		
+		
+		return "webindex";
+	}
+	
+	@GetMapping("/webtamil")
+	public String registerwebtamil(@RequestParam(required = false) String ref, Model model) {
+		System.out.println("indesx page....." + ref);
+		model.addAttribute("ref", ref);
+		
+		
+		return "webindex_tamil";
+	}
+	
 	@GetMapping(value = { "/", "", "/index" })
-	public String register(@RequestParam(required = false) String ref, Model model) {
+	public String MobileViewregister(@RequestParam(required = false) String ref, Model model) {
 		System.out.println("indesx page....." + ref);
 		model.addAttribute("ref", ref);
 		
 		
 		return "index";
 	}
+	
+	@GetMapping(value = {"/index_tamil" })
+	public String MobileViewtamilregister(@RequestParam(required = false) String ref, Model model) {
+		System.out.println("indesx page....." + ref);
+		model.addAttribute("ref", ref);
+		
+		
+		return "index_tamil";
+	}
+	
 
 	
 	 // Check session and redirect to login if user is not logged in

src/main/java/com/volunteersregistration/service/VolunteerRegistrationService.java

@@ -9,6 +9,10 @@ import com.volunteersregistration.repository.VolunteerRegistrationRepo;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
 import java.time.LocalDate;
 import java.time.LocalDateTime;
 import java.util.ArrayList;
@@ -53,6 +57,10 @@ public class VolunteerRegistrationService {
                     volun.setPreferred_zones(zones.toString());
                 }
                 volun= volunteerRegistrationRepo.save(volun);
+                
+                sendWhatsappMsgENG(volun.getVolunteer_id(),volun.getMobile_no(),"GCC-VOL-");
+                sendWhatsappMsgTam(volun.getVolunteer_id(),volun.getMobile_no(),"GCC-VOL-");
+                
                 return "VOL-"+String.format("%05d",volun.getVolunteer_id());
             } else {
                 return "Not Saved";
@@ -63,6 +71,83 @@ public class VolunteerRegistrationService {
         }
         return "error";
     }
+    
+    private String sendWhatsappMsgTam(int id, Long mob_no,String prefix) {
+		String urlString = "";
+		
+		
+		try {
+			
+			String placeholders =
+	                URLEncoder.encode(
+	                		 String.valueOf(prefix+id),
+	                        StandardCharsets.UTF_8.toString());
+			
+			 String mobile =
+		                URLEncoder.encode(
+		                		String.valueOf(mob_no),
+		                        StandardCharsets.UTF_8.toString());
+			 
+			 urlString="https://sendapiv1.pinbot.ai/pinwa/sendMessage?apikey=5c995535-6244-11f0-98fc-02c8a5e042bd&from=919445061913&to="+mobile+"&templateid=3688889&type=template&placeholders="+placeholders;
+			 
+			
+			String res = hitURL(urlString);
+			return res;
+			
+		} catch (Exception e) {
+			e.printStackTrace();
+	        return "";
+		}
+		
+	}
+    
+    private String sendWhatsappMsgENG(int id, Long mob_no,String prefix) {
+		String urlString = "";
+		
+		
+		try {
+			
+			String placeholders =
+	                URLEncoder.encode(
+	                		 String.valueOf(prefix+id),
+	                        StandardCharsets.UTF_8.toString());
+			
+			 String mobile =
+		                URLEncoder.encode(
+		                		String.valueOf(mob_no),
+		                        StandardCharsets.UTF_8.toString());
+			 
+			 urlString="https://sendapiv1.pinbot.ai/pinwa/sendMessage?apikey=5c995535-6244-11f0-98fc-02c8a5e042bd&from=919445061913&to="+mobile+"&templateid=3688885&type=template&placeholders="+placeholders;
+			 
+			
+			String res = hitURL(urlString);
+			return res;
+			
+		} catch (Exception e) {
+			e.printStackTrace();
+	        return "";
+		}
+		
+	}
+
+	private String hitURL(String urlString) {
+		String response = "";
+		try {
+			URL url = new URL(urlString);
+			HttpURLConnection connection = (HttpURLConnection) url.openConnection();
+			connection.setRequestMethod("GET");
+
+			int responseCode = connection.getResponseCode();
+			response = String.valueOf(responseCode);
+			System.out.println("Response Code for URL: " + urlString + " is " + responseCode);
+
+		} catch (Exception e) {
+			e.printStackTrace();
+		}
+		System.out.println("response=" + response);
+		return response;
+	}
+    
 
     public String registerAsNgo(NgoInformation ngo) {
 
@@ -87,6 +172,10 @@ public class VolunteerRegistrationService {
                     ngo.setPreferred_zones(zones.toString());
                 }
                 ngo= ngoInfoRepo.save(ngo);
+                
+                sendWhatsappMsgENG(ngo.getNgo_id(),ngo.getMobileNo(),"GCC-NGO_VOL-");
+                sendWhatsappMsgTam(ngo.getNgo_id(),ngo.getMobileNo(),"GCC-NGO_VOL-");
+                
                 return "NGO_VOL-"+String.format("%05d",ngo.getNgo_id());
             } else {
                 return "Not Saved";
@@ -120,6 +209,10 @@ public class VolunteerRegistrationService {
                     cop.setPreferred_zones(zones.toString());
                 }
                 cop= companyInfoRepo.save(cop);
+                
+                sendWhatsappMsgENG(cop.getCop_id(),cop.getContactPerMobile(),"GCC-COR_VOL-");
+                sendWhatsappMsgTam(cop.getCop_id(),cop.getContactPerMobile(),"GCC-COR_VOL-");
+                
                 return "COR_VOL-"+String.format("%05d",cop.getCop_id());
             } else {
                 return "Not Saved";

src/main/resources/templates/index.html

@@ -20,6 +20,7 @@
 	<!-- SweetAlert JS (optional if you plan to use it) -->
 	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
+
 	<style>
 		/*for radio button style*/
 		.radio-group {
@@ -60,7 +61,10 @@
 			cursor: pointer;
 			text-align: center;
 			width: 100%;
+			height:80px;
 		}
+		
+		
 
 		.zone-checkbox {
 			margin-right: 10px;
@@ -74,7 +78,7 @@
 
 		.form-check-input {
 			transform: scale(1.5);
-		}
+		}		
 
 		/*checkbox style*/
 		label {
@@ -82,7 +86,7 @@
 		}
 
 		/* Header Styling */
-		.header {
+		/* .header {
 			background-color: #1d495a;
 			padding: 10px 20px;
 			display: flex;
@@ -118,7 +122,7 @@
 
 		.header .menu a:hover {
 			text-decoration: underline;
-		}
+		} */
 
 		.req {
 			color: red;
@@ -170,6 +174,54 @@
 			border-left: 0;
 			/* Remove left border of the button */
 		}
+		
+		@media (max-width: 768px) {
+		.zone-checkbox-label {
+			font-size: 14px;
+			}
+		}
+		
+		.volunteer-header {
+    position: relative;
+    color: #1d4859;
+    min-height: 58px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.volunteer-title {
+    margin: 0;
+    text-align: center;
+}
+
+.language-buttons {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    display: flex;
+    gap: 5px;
+}
+.language-buttons .btn {
+    border-color: #1d4859;
+    color: #1d4859;
+}
+
+.language-buttons .btn:hover {
+    background-color: #1d4859;
+    color: white;
+}
+
+.language-buttons .btn.active,
+.language-buttons .btn-primary {
+    background-color: #1d4859;
+    border-color: #1d4859;
+    color: white;
+}
+		
 	</style>
 </head>
 
@@ -180,15 +232,15 @@
 	<h1 style="display: none;">Volunteers </h1>
 
 
-	<!-- Header Section -->
+	<!--
 	<div class="header">
-		<!-- Left Logo -->
+		
 		<div class="logo">
 			<img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Greater Chennai Corporation Logo">
 			<span class="ml-2">GREATER CHENNAI CORPORATION</span>
 		</div>
 
-		<!-- Center Menu -->
+		
 		<div class="menu">
 			<a href="https://chennaicorporation.gov.in/gcc/">Home</a>
 			<a href="https://chennaicorporation.gov.in/gcc/about-GCC/">About GCC</a>
@@ -199,7 +251,14 @@
 			<a href="https://chennaicorporation.gov.in/gcc/online-services/">Online Services</a>
 		</div>
 	</div>
-	<div class="container mt-5">
+	 -->
+	 
+	 <!-- Header Start-->
+
+	
+	
+	
+	<div class="container-fluid mt-5">
 		<div id="loader" style="display: none; text-align: center;">
 			<img src="/images/Thin broken ring.gif" alt="Loading..." />
 		</div>
@@ -212,13 +271,36 @@
 
 			<!-- Bootstrap Card for displaying uploaded details -->
 			<div class="card" style="background-color: white;">
-				<div class="card-header text-center" style="color: #1d4859;">
-					<h3>Volunteer Information</h3>
+			
+				<div class="card-header volunteer-header">
+
+				    <!-- <h3 class="volunteer-title">
+				        Volunteer Information
+				    </h3> -->
+				
+				    <div class="language-buttons">
+				    
+				    <a href="/volunteer"
+				           class="btn btn-sm btn-primary">
+				            English
+				        </a>
+				        
+				        <a href="/volunteer/index_tamil"
+				           class="btn btn-sm btn-outline-primary">
+				            தமிழ்
+				        </a>
+				
+				        
+				    </div>
+			
 				</div>
+					
+				
+				
 				<div class="card-body">
 
 					<div class="form-row mb-4">
-						<div class="col-lg-6 col-md-12 mb-3">
+						<div class="col-lg-12 col-md-12 mb-3">
 							<label for="category">Choose Category<span class="req">*</span></label>
 							<select class="form-control" id="category" onchange="handleCategoryChange()">
 							<!-- <option value="-1">Select</option>
@@ -228,7 +310,7 @@
 							</select>
 							<span class="text-danger" id="categoryError"></span>
 						</div>
-						<div class="col-lg-6 col-md-12 mb-3">
+						<div class="col-lg-12 col-md-12 mb-3">
 							<label for="subcategory">Choose Sub Category<span class="req">*</span></label>
 							<select class="form-control" id="subcategory">
 								<!-- <option value="-1">Select</option> -->
@@ -244,12 +326,12 @@
 
 						<h3>Contact Details</h3>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="name">Name<span class="req">*</span></label>
 								<input type="text" class="form-control" id="name" placeholder="Enter Name">
 								<span class="text-danger" id="nameError"></span>
 							</div>
-							<!-- <div class="col-lg-6 col-md-12 mb-3">
+							<!-- <div class="col-lg-12 col-md-12 mb-3">
 								<label for="aadhar">Aadhar Number<span class="req">*</span></label>
 								<input type="text" class="form-control" id="aadhar" maxlength="12"
 									placeholder="Enter Aadhar No... " oninput="validateAadhar()">
@@ -258,13 +340,13 @@
 
 						</div>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="email">Email</label>
 								<input type="text" class="form-control" id="email" placeholder="Enter Email">
 							</div>
 
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="dob">DOB <span class="req">*</span></label>
 								<input type="date" class="form-control" id="dob" onchange="validateAge()">
 								<span class="text-danger" id="dobError"></span>
@@ -272,7 +354,7 @@
 							</div>
 						</div>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="gender">Gender<span class="req">*</span></label>
 								<div class="radio-group">
 									<div class="radio-item">
@@ -292,7 +374,7 @@
 							</div>
 
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="mobile">Mobile<span class="req">*</span></label>
 								<div class="input-group mb-3">
 									<div class="input-group-prepend">
@@ -313,7 +395,7 @@
 
 						</div>
 						<div class="form-row mb-4">
-							<!-- <div class="col-lg-6 col-md-12 mb-3">
+							<!-- <div class="col-lg-12 col-md-12 mb-3">
 								<label for="phone">Phone</label>
 								<div class="input-group mb-3">
 									<div class="input-group-prepend">
@@ -326,21 +408,21 @@
 								</div>
 
 							</div> -->
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="district">District</label>
 								<input type="text" class="form-control" id="district" value="Chennai" disabled>
 							</div>
 
 						</div>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="address">Address<span class="req">*</span></label>
 								<input type="text" class="form-control" id="address" placeholder="Enter Address...">
 								<span class="text-danger" id="addressError"></span>
 							</div>
 
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="pincode">Pincode<span class="req">*</span></label>
 								<input type="text" class="form-control" minlength="6" maxlength="6" pattern="[0-9]{6}"
 									id="pincode" placeholder="Enter Pincode...">
@@ -350,7 +432,7 @@
 						</div>
 
 						<!-- <div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="bloodgroup">Blood Group<span class="req">*</span></label>
 								<select class="form-control" id="bloodgroup" name="bloodgroup">
 									<option value="-1">Select Blood Group</option>
@@ -373,7 +455,7 @@
 
 						<!-- <h3>Education Qualification Details</h3>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="edu">Qualification<span class="req">*</span></label>
 								<input type="text" class="form-control" id="edu"
 									placeholder="Enter Highest Qualification Obtained">
@@ -381,7 +463,7 @@
 							</div>
 
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="college">College/Institution Name<span class="req">*</span></label>
 								<input type="text" class="form-control" id="college" placeholder="Enter College Name ">
 								<span class="text-danger" id="collegeError"></span>
@@ -391,7 +473,7 @@
 
 
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="nss">NSS Cadet<span class="req">*</span></label>
 								<div class="radio-group">
 									<div class="radio-item">
@@ -407,7 +489,7 @@
 								<span class="text-danger" id="nssError"></span>
 							</div>
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="ncc">NCC Cadet<span class="req">*</span></label>
 								<div class="radio-group">
 									<div class="radio-item">
@@ -427,14 +509,14 @@
 
 						<!-- <h3>Employment Details</h3>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="occupation">Company/NGO Name (Enter NA if not working)</label>
 								<input type="text" class="form-control" id="occupation"
 									placeholder="Enter company/NGO...">
 							</div>
 
 
-							<div class="col-lg-6 col-md-12 mb-3" style="display:none;">
+							<div class="col-lg-12 col-md-12 mb-3" style="display:none;">
 								<label for="designation">Designation</label>
 								<input type="text" class="form-control" id="designation"
 									placeholder="Enter Designation...">
@@ -444,13 +526,13 @@
 
 						<!-- <h3>Other Information</h3> -->
 						<div class="form-row mb-4">
-							<!-- <div class="col-lg-6 col-md-12 mb-3">
+							<!-- <div class="col-lg-12 col-md-12 mb-3">
 								<label for="ngoAny">Company/NGO you are associated with,if any(NA otherwise)<span
 										class="req">*</span></label>
 								<input type="text" class="form-control" id="ngoAny" placeholder="">
 								<span class="text-danger" id="ngoAnyError"></span>
 							</div> -->
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="prevol"><strong>Have you previously Volunteered In any Emergency Situation?</strong><span
 										class="req">*</span></label>
 								<div class="radio-group">
@@ -479,14 +561,14 @@
 
 						<h3>Contact Details</h3>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmpName">Company Name<span class="req">*</span></label>
 								<input type="text" class="form-control" id="cmpName" placeholder="Enter Company Name">
 								<span class="text-danger" id="cmpNameError"></span>
 							</div>
 
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmpEmail">Company Email ID</label>
 								<input type="text" class="form-control" id="cmpEmail"
 									placeholder="Enter Company Email ID">
@@ -497,7 +579,7 @@
 
 						</div>
 						<div class="form-row mb-4" style="display:none;">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmpLandline">Phone</label>
 								<div class="input-group mb-3">
 									<div class="input-group-prepend">
@@ -509,7 +591,7 @@
 								</div>
 							</div>
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmpMobile">Mobile</label>
 								<div class="input-group mb-3">
 									<div class="input-group-prepend">
@@ -526,21 +608,21 @@
 						</div>
 						<div class="form-row mb-4">
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmpDistrict">District</label>
 								<input type="text" class="form-control" id="cmpDistrict" value="Chennai" disabled>
 							</div>
 
 						</div>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmpAddress">Address<span class="req">*</span></label>
 								<input type="text" class="form-control" id="cmpAddress" placeholder="Enter Address...">
 								<span class="text-danger" id="cmpAddressError"></span>
 							</div>
 
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmpPincode">Pincode<span class="req">*</span></label>
 								<input type="text" class="form-control" id="cmpPincode" minlength="6" maxlength="6"
 									pattern="[0-9]{6}" placeholder="Enter Pincode...">
@@ -552,19 +634,19 @@
 
 						<h4 class="">No of volunteers from your Company<span class="req">*</span></h4>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<input type="number" class="form-control" id="cmpNov">
 								<span class="text-danger" id="cmpNovError"></span>
 							</div>
 						</div>
 						<h4>Point of Contact</h4>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmpPoc">Name<span class="req">*</span></label>
 								<input type="text" class="form-control" id="cmpPoc">
 								<span class="text-danger" id="cmpPocError"></span>
 							</div>
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmdPod">Designation<span class="req">*</span></label>
 								<input type="text" class="form-control" id="cmdPod" placeholder="Enter Designation...">
 								<span class="text-danger" id="cmdPodError"></span>
@@ -572,14 +654,14 @@
 						</div>
 						<div class="form-row mb-4">
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmdPoE">Email ID<span class="req">*</span></label>
 								<input type="text" class="form-control" id="cmdPoE" placeholder="Enter Email ID...">
 								<span class="text-danger" id="cmdPoEError"></span>
 
 							</div>
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="cmdPom">Phone No<span class="req">*</span></label>
 								<input type="number" class="form-control" id="cmdPom" placeholder="Enter Mobile No...">
 								<span class="text-danger" id="cmdPomError"></span>
@@ -589,7 +671,7 @@
 
 						<div class="form-row mb-4">
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="comprevol">Has your Company previously Volunteered In any Emergency
 									Situation?
 									*</label>
@@ -618,14 +700,14 @@
 
 						<h3>Contact Details</h3>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 col-sm-12 mb-3">
+							<div class="col-lg-12 col-md-12 col-sm-12 mb-3">
 								<label for="ngoOrgName">Organization Name<span class="req">*</span></label>
 								<input type="text" class="form-control" id="ngoOrgName" placeholder="Enter Name">
 								<span class="text-danger" id="ngoOrgNameError"></span>
 							</div>
 
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="ngoOrgEmail">Company Email ID</label>
 								<input type="text" class="form-control" id="ngoOrgEmail" placeholder="Enter Email ID">
 
@@ -635,7 +717,7 @@
 
 						</div>
 						<div class="form-row mb-4" style="display:none;">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="oLandline">Phone</label>
 								<div class="input-group mb-3">
 
@@ -648,7 +730,7 @@
 								</div>
 							</div>
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="oMobile">Mobile</label>
 								<div class="input-group mb-3">
 									<div class="input-group-prepend">
@@ -664,21 +746,21 @@
 						</div>
 						<div class="form-row mb-4">
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="oDistrict">District</label>
 								<input type="text" class="form-control" id="oDistrict" value="Chennai" disabled>
 							</div>
 
 						</div>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="oAddress">Address<span class="req">*</span></label>
 								<input type="text" class="form-control" id="oAddress" placeholder="Enter Address...">
 								<span class="text-danger" id="oAddressError"></span>
 							</div>
 
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="oPincode">Pincode<span class="req">*</span></label>
 								<input type="picode" class="form-control" id="oPincode" minlength="6" maxlength="6"
 									pattern="[0-9]{6}" placeholder="Enter Pincode...">
@@ -690,33 +772,33 @@
 
 						<h4 class="volorg">No of volunteers from your Organization<span class="req">*</span></h4>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<input type="number" class="form-control" id="oNvol">
 								<span class="text-danger" id="oNvolError"></span>
 							</div>
 						</div>
 						<h4>Point of Contact</h4>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="oPoc">Name<span class="req">*</span></label>
 								<input type="text" class="form-control" id="oPoc" placeholder="Person Name">
 								<span class="text-danger" id="oPocError"></span>
 							</div>
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="oPod">Designation<span class="req">*</span></label>
 								<input type="text" class="form-control" id="oPod" placeholder="Enter Designation...">
 								<span class="text-danger" id="oPodError"></span>
 							</div>
 						</div>
 						<div class="form-row mb-4">
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="oPoe">Email ID<span class="req">*</span></label>
 								<input type="text" class="form-control" id="oPoE" placeholder="Enter Email ID...">
 								<span class="text-danger" id="oPoeError"></span>
 							</div>
 
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="oPom">Phone No<span class="req">*</span></label>
 								<input type="number" class="form-control" id="oPom" placeholder="Enter Phone No...">
 								<span class="text-danger" id="oPomError"></span>
@@ -725,7 +807,7 @@
 
 						<div class="form-row mb-4">
 
-							<div class="col-lg-6 col-md-12 mb-3">
+							<div class="col-lg-12 col-md-12 mb-3">
 								<label for="oPvolY">Has your Organization previously Volunteered In any Emergency
 									Situation?<span class="req">*</span></label>
 								<div class="radio-group">
@@ -760,121 +842,121 @@
 					<div class="container mt-5">
 						<!-- First Row of Zones -->
 						<div class="form-row">
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone1"
 										name="zone1" value="1-Thiruvottiyur" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone1">Zone 1 (Thiruvottiyur)</label>
+									<label class="zone-checkbox-label" for="zone1">Zone 1 <br> (Thiruvottiyur)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone2"
 										name="zone2" value="2-Manali" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone2">Zone 2 (Manali)</label>
+									<label class="zone-checkbox-label" for="zone2">Zone 2 <br> (Manali)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone3"
 										name="zone3" value="3-Madhavaram" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone3">Zone 3 (Madhavaram)</label>
+									<label class="zone-checkbox-label" for="zone3">Zone 3 <br>(Madhavaram)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone4"
 										name="zone4" value="4-Tondiarpet" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone4">Zone 4 (Tondiarpet)</label>
+									<label class="zone-checkbox-label" for="zone4">Zone 4 <br>(Tondiarpet)</label>
 								</div>
 							</div>
 						</div>
 
 						<!-- Second Row of Zones -->
 						<div class="form-row mt-2">
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone5"
 										name="zone5" value="5-Royapuram" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone5">Zone 5 (Royapuram)</label>
+									<label class="zone-checkbox-label" for="zone5">Zone 5<br> (Royapuram)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone6"
 										name="zone6" value="6-ThiruViKa Nagar" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone6">Zone 6 (Thiru-Vi-Ka Nagar)</label>
+									<label class="zone-checkbox-label" for="zone6">Zone 6 <br>(Thiru-Vi-Ka Nagar)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone7"
 										name="zone7" value="7-Ambattur" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone7">Zone 7 (Ambattur)</label>
+									<label class="zone-checkbox-label" for="zone7">Zone 7<br> (Ambattur)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone8"
 										name="zone8" value="8-Anna Nagar" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone8">Zone 8 (Anna Nagar)</label>
+									<label class="zone-checkbox-label" for="zone8">Zone 8<br> (Anna Nagar)</label>
 								</div>
 							</div>
 						</div>
 
 						<!-- Third Row of Zones -->
 						<div class="form-row mt-2">
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone9"
 										name="zone9" value="9-Teynampet" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone9">Zone 9 (Teynampet)</label>
+									<label class="zone-checkbox-label" for="zone9">Zone 9 <br>(Teynampet)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone10"
 										name="zone10" value="10-Kodambakkam" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone10">Zone 10 (Kodambakkam)</label>
+									<label class="zone-checkbox-label" for="zone10">Zone 10<br> (Kodambakkam)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone11"
 										name="zone11" value="11-Valasarvakkam" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone11">Zone 11 (Valasarvakkam)</label>
+									<label class="zone-checkbox-label" for="zone11">Zone 11<br> (Valasarvakkam)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone12"
 										name="zone12" value="12-Alandur" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone12">Zone 12 (Alandur)</label>
+									<label class="zone-checkbox-label" for="zone12">Zone 12<br> (Alandur)</label>
 								</div>
 							</div>
 						</div>
 
 						<!-- Fourth Row of Zones -->
 						<div class="form-row mt-2">
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone13"
 										name="zone13" value="13-Adyar" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone13">Zone 13 (Adyar)</label>
+									<label class="zone-checkbox-label" for="zone13">Zone 13<br> (Adyar)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone14"
 										name="zone14" value="14-Perungudi" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone14">Zone 14 (Perungudi)</label>
+									<label class="zone-checkbox-label" for="zone14">Zone 14<br> (Perungudi)</label>
 								</div>
 							</div>
-							<div class="col-3">
+							<div class="col-6">
 								<div class="form-check">
 									<input class="form-check-input zone-checkbox" type="checkbox" id="zone15"
 										name="zone15" value="15-Sholinganallur" onclick="checkAnyArea()">
-									<label class="zone-checkbox-label" for="zone15">Zone 15 (Sholinganallur)</label>
+									<label class="zone-checkbox-label" for="zone15">Zone 15 <br>(Sholinganallur)</label>
 								</div>
 							</div>
 						</div>
@@ -889,6 +971,17 @@
 			</div>
 		</form>
 	</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>
 
 	<!-- OTP Modal -->
 	<div class="modal fade" id="otpForm" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true">
@@ -961,8 +1054,10 @@
 
 
 
-
 	<script>
+	
+	
+	
 		document.querySelector('.individual-form').style.display = 'none';
 		document.querySelector('.corporate-form').style.display = 'none';
 		document.querySelector('.ngo-form').style.display = 'none';
@@ -1009,8 +1104,14 @@
 					let categoryDropdown = $('#category');
 					categoryDropdown.append(`<option value="-1">Select</option>`);
 					categories.forEach(function (cat) {
-						categoryDropdown.append(`<option value="${cat.id}">${cat.category}</option>`);
-					});
+
+				        $('<option>', {
+				            value: cat.id,
+				            text: cat.category
+				        }).attr('data-category', cat.category)
+				          .appendTo(categoryDropdown);
+
+				    });
 				}
 			});
 		});
@@ -1026,16 +1127,26 @@
 			subcategory.empty().append('<option value="-1">Select</option>');
 
 			// Determine form visibility based on selected category name
-			let selectedText = $('#category option:selected').text();
+			//let selectedText = $('#category option:selected').text();
+			let selectedText = $('#category').val();
 
-			if (selectedText === "Individual") {
+			/* if (selectedText === "Individual") {
 				$('.individual-form').show();
 			} else if (selectedText === "Corporate") {
 				$('.corporate-form').show();
 			} else if (selectedText === "NGO/Other Associations") {
 				$('.ngo-form').show();
+			} */
+			if (selectedText === "1") {
+				$('.individual-form').show();
+			} else if (selectedText === "2") {
+				$('.corporate-form').show();
+			} else if (selectedText === "3") {
+				$('.ngo-form').show();
 			}
-
+			
+			
+			
 			// Fetch subcategories
 			if (categoryId !== "-1") {
 				$.ajax({
@@ -1044,8 +1155,14 @@
 					data: { category_id: categoryId },
 					success: function (subcategories) {
 						subcategories.forEach(function (sub) {
-							subcategory.append(`<option value="${sub.id}">${sub.sub_category}</option>`);
-						});
+
+					        $('<option>', {
+					            value: sub.id,
+					            text: sub.sub_category
+					        }).attr('data-sub-category', sub.sub_category)
+					          .appendTo(subcategory);
+
+					    });
 					}
 				});
 			}
@@ -1080,21 +1197,25 @@
 				};
 			});
 			var category = document.getElementById("category");
-			var selectedTextcategory = category.options[category.selectedIndex].text;
+			//var selectedTextcategory = category.options[category.selectedIndex].text;
+			var selectedTextcategory = $('#category').val();
+			
 			//console.log("selectedTextcategory=="+selectedTextcategory);
-			if (selectedTextcategory === "Select") {
+			if (selectedTextcategory === "Select" || selectedTextcategory === "-1" || selectedTextcategory === "") {
 				$("#categoryError").text("Please Select Category");
 				isValid = false;
 			}
 			var subcategory = document.getElementById("subcategory");
 			var selectedTextsubcategory = subcategory.options[subcategory.selectedIndex].text;
+			var selectedTextsubcategory = $('#subcategory').val();
+			
 			//console.log("selectedTextsubcategory=="+selectedTextsubcategory);
-			if (selectedTextsubcategory === "Select") {
+			if (selectedTextsubcategory === "Select" || selectedTextsubcategory === "-1" || selectedTextsubcategory === "") {
 				$("#subcategoryError").text("Please Select SubCategory !");
 				isValid = false;
 			}
 			
-			if (selectedTextcategory === "Individual") {
+			if (selectedTextcategory === "1") {
 				
 				var name = document.getElementById("name").value = document.getElementById("name").value.trim();
 				var email = document.getElementById("email").value = document.getElementById("email").value.trim();
@@ -1199,7 +1320,7 @@
 				}
 				return false;
 			}
-			else if (selectedTextcategory === "Corporate") {
+			else if (selectedTextcategory === "2") {
 				var cmpName = document.getElementById("cmpName").value = document.getElementById("cmpName").value.trim();
 				var cmpEmail = document.getElementById("cmpEmail").value = document.getElementById("cmpEmail").value.trim();
 				var cmpLandline = document.getElementById("cmpLandline").value = document.getElementById("cmpLandline").value.trim();
@@ -1259,7 +1380,7 @@
 				return false;
 			}
 
-			else if (selectedTextcategory === "NGO/Other Associations") {
+			else if (selectedTextcategory === "3") {
 				var cmpName = document.getElementById("ngoOrgName").value = document.getElementById("ngoOrgName").value.trim();
 				var ngoOrgEmail = document.getElementById("ngoOrgEmail").value = document.getElementById("ngoOrgEmail").value.trim();
 				var cmpLandline = document.getElementById("oLandline").value = document.getElementById("oLandline").value.trim();
@@ -1329,8 +1450,8 @@
 
 			// Create JSON object with form data
 			var volunteerData = {
-				category: $("#category option:selected").text(),
-				subCategory: $("#subcategory option:selected").text(),
+				category:$("#category option:selected").data("category"),
+				subCategory: $("#subcategory option:selected").data("sub-category"),
 				name: $("#name").val(),
 				email: $("#email").val(),
 				dob: $("#dob").val(),
@@ -1362,6 +1483,9 @@
 				url: "/volunteer/api/register",
 				contentType: "application/json",
 				data: JSON.stringify(volunteerData),
+				beforeSend: function() {
+		            $("#pageLoader").show();
+		        },
 				success: function (response) {
 					$('#loader').hide();
 					successPopup(response);
@@ -1375,6 +1499,7 @@
 				complete: function () {
 					// Re-enable the submit button after completion (either success or error)
 					$("#submitBtn").prop("disabled", true);
+					$("#pageLoader").hide();
 				}
 			});
 			return false;
@@ -1386,8 +1511,8 @@
 				preferredAreas.push($(this).val());
 			});
 			var copInfo = {
-				category: $("#category option:selected").text(),
-				subCategory: $("#subcategory option:selected").text(),
+				category:$("#category option:selected").data("category"),
+				subCategory: $("#subcategory option:selected").data("sub-category"),
 				compName: $("#cmpName").val(),
 				compEmail: $("#cmpEmail").val(),
 				landline: $("#cmpLandline").val(),
@@ -1410,6 +1535,9 @@
 				url: "/volunteer/api/registerAsCorporate",
 				contentType: "application/json",
 				data: JSON.stringify(copInfo),
+				beforeSend: function() {
+		            $("#pageLoader").show();
+		        },
 				success: function (response) {
 					$('#loader').hide();
 					successPopup(response);
@@ -1422,6 +1550,7 @@
 				complete: function () {
 					// Re-enable the submit button after completion (either success or error)
 					$("#submitBtn").prop("disabled", true);
+					$("#pageLoader").hide();
 				},
 				
 			});
@@ -1436,8 +1565,8 @@
 				preferredAreas.push($(this).val());
 			});
 			var ngoInfo = {
-				category: $("#category option:selected").text(),
-				subCategory: $("#subcategory option:selected").text(),
+				category:$("#category option:selected").data("category"),
+				subCategory: $("#subcategory option:selected").data("sub-category"),
 				orgName: $("#ngoOrgName").val(),
 				orgEmail: $("#ngoOrgEmail").val(),
 				/* landline: $("#oLandline").val(),
@@ -1461,6 +1590,9 @@
 				url: "/volunteer/api/registerAsNgo",
 				contentType: "application/json",
 				data: JSON.stringify(ngoInfo),
+				beforeSend: function() {
+		            $("#pageLoader").show();
+		        },
 				success: function (response) {
 					$('#loader').hide();
 					successPopup(response);
@@ -1473,6 +1605,7 @@
 				complete: function () {
 					// Re-enable the submit button after completion (either success or error)
 					$("#submitBtn").prop("disabled", true);
+					$("#pageLoader").hide();
 				},
 			});
 			return false;