diff --git a/src/main/java/com/gcc/crslogs/controller/ApiController.java b/src/main/java/com/gcc/crslogs/controller/ApiController.java
index 36f6e97..208f730 100644
--- a/src/main/java/com/gcc/crslogs/controller/ApiController.java
+++ b/src/main/java/com/gcc/crslogs/controller/ApiController.java
@@ -258,7 +258,7 @@ public ResponseEntity<?> fetchDeathCertificateSecurely(@RequestBody Map<String,
     if (dod == null || dod.isEmpty() || sex == null || sex.isEmpty()) {
         Map<String, Object> error = new HashMap<>();
         error.put("status", false);
-        error.put("message", "DOB and Sex are mandatory.");
+        error.put("message", "dod and Sex are mandatory.");
         return ResponseEntity.badRequest().body(error);
     }
 
diff --git a/src/main/java/com/gcc/crslogs/service/BirthAndDeathDetailsService.java b/src/main/java/com/gcc/crslogs/service/BirthAndDeathDetailsService.java
index aeb2073..56ca299 100644
--- a/src/main/java/com/gcc/crslogs/service/BirthAndDeathDetailsService.java
+++ b/src/main/java/com/gcc/crslogs/service/BirthAndDeathDetailsService.java
@@ -30,25 +30,21 @@ import com.fasterxml.jackson.databind.ObjectMapper;
 
 @Service
 public class BirthAndDeathDetailsService {
-	
-	
-	
-	@Autowired
+
+    @Autowired
     private final RestTemplate restTemplate;
-	
-	
-	@Autowired
+
+    @Autowired
     private JdbcTemplate jdbcTemplate;
-	
-	public BirthAndDeathDetailsService(RestTemplateBuilder builder) {
+
+    public BirthAndDeathDetailsService(RestTemplateBuilder builder) {
         this.restTemplate = builder.build();
     }
-	
-	
-	
-	//using for live
-	
-	public Map<String, Object> fetchBirthCertificate(String dob, String sex, String regno, String childName, String fatherName, String motherName) throws Exception {
+
+    // using for live
+
+    public Map<String, Object> fetchBirthCertificate(String dob, String sex, String regno, String childName,
+            String fatherName, String motherName) throws Exception {
         Map<String, String> params = new LinkedHashMap(); // keep order
         params.put("regno", regno != null ? regno : "");
         params.put("sex", sex);
@@ -61,10 +57,11 @@ public class BirthAndDeathDetailsService {
         String serviceInput = mapper.writeValueAsString(params);
 
         // Final raw URL — NOT encoded
-        String BirthCertificateapiUrl = "https://chennaicorporation.gov.in/gcc/Api/BirthCertificate_json.jsp?serviceinput=" + serviceInput;
+        String BirthCertificateapiUrl = "https://chennaicorporation.gov.in/gcc/Api/BirthCertificate_json.jsp?serviceinput="
+                + serviceInput;
 
-        //System.out.println("⏩ Raw JSON: " + serviceInput);
-        //System.out.println("🌐 FINAL RAW URL: " + BirthCertificateapiUrl);
+        // System.out.println("⏩ Raw JSON: " + serviceInput);
+        // System.out.println("🌐 FINAL RAW URL: " + BirthCertificateapiUrl);
 
         HttpHeaders headers = new HttpHeaders();
         headers.set("User-Agent", "Mozilla/5.0");
@@ -72,128 +69,125 @@ public class BirthAndDeathDetailsService {
         HttpEntity<String> entity = new HttpEntity<>(headers);
 
         RestTemplate restTemplate = new RestTemplate();
-        ResponseEntity<String> response = restTemplate.exchange(BirthCertificateapiUrl, HttpMethod.GET, entity, String.class);
-       
+        ResponseEntity<String> response = restTemplate.exchange(BirthCertificateapiUrl, HttpMethod.GET, entity,
+                String.class);
+
         String rawJson = response.getBody();
         String cleanJson = sanitizeJsonResponse(rawJson);
 
-        
-        //System.out.println("✅ API Raw Response: " + cleanJson);
+        // System.out.println("✅ API Raw Response: " + cleanJson);
 
-        return mapper.readValue(cleanJson, new TypeReference<Map<String, Object>>() {});
+        return mapper.readValue(cleanJson, new TypeReference<Map<String, Object>>() {
+        });
     }
-	
-
 
-// to created our external api from restservices 
-	
- public Map<String, Object> fetchLocalBirthCertificate(
-        String dob, String fatherName, String motherName, String childName, String sex) throws Exception {
+    // to created our external api from restservices
 
-    String apiUrl = "https://gccservices.chennaicorporation.gov.in/gccrestservices/api/birth-certificate/by-detailsnewforWeb";
+    public Map<String, Object> fetchLocalBirthCertificate(
+            String dob, String fatherName, String motherName, String childName, String sex) throws Exception {
 
-    MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
-    params.add("incident_date", dob);   // yyyy-MM-dd
-    params.add("gender", sex);
+        String apiUrl = "https://gccservices.chennaicorporation.gov.in/gccrestservices/api/birth-certificate/by-detailsnewforWeb";
 
-    // 🔹 Pass optional values if provided (converted to UPPERCASE, DB expects this)
-    if (fatherName != null && !fatherName.trim().isEmpty()) {
-        params.add("father_name", fatherName.trim().toUpperCase());
-    }
-    if (motherName != null && !motherName.trim().isEmpty()) {
-        params.add("mother_name", motherName.trim().toUpperCase());
-    }
-    if (childName != null && !childName.trim().isEmpty()) {
-        params.add("child_name", childName.trim().toUpperCase());
-    }
+        // String apiUrl =
+        // "http://localhost:8077/gccrestservices/api/birth-certificate/by-detailsnewforWeb";
 
-    HttpHeaders headers = new HttpHeaders();
-    headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
+        MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
+        params.add("incident_date", dob); // yyyy-MM-dd
+        params.add("gender", sex);
 
-    HttpEntity<MultiValueMap<String, String>> entity = new HttpEntity<>(params, headers);
+        // 🔹 Pass optional values if provided (converted to UPPERCASE, DB expects this)
+        if (fatherName != null && !fatherName.trim().isEmpty()) {
+            params.add("father_name", fatherName.trim().toUpperCase());
+        }
+        if (motherName != null && !motherName.trim().isEmpty()) {
+            params.add("mother_name", motherName.trim().toUpperCase());
+        }
+        if (childName != null && !childName.trim().isEmpty()) {
+            params.add("child_name", childName.trim().toUpperCase());
+        }
 
-    ResponseEntity<String> response = restTemplate.postForEntity(apiUrl, entity, String.class);
+        HttpHeaders headers = new HttpHeaders();
+        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
 
-    String rawJson = response.getBody();
-    ObjectMapper mapper = new ObjectMapper();
-    Map<String, Object> result = mapper.readValue(rawJson, new TypeReference<Map<String, Object>>() {});
+        HttpEntity<MultiValueMap<String, String>> entity = new HttpEntity<>(params, headers);
 
-    // ✅ Only keep records that actually have a PDF link
-    if (result.containsKey("certificate_details")) {
-        List<Map<String, Object>> details = (List<Map<String, Object>>) result.get("certificate_details");
+        ResponseEntity<String> response = restTemplate.postForEntity(apiUrl, entity, String.class);
 
-        List<Map<String, Object>> filtered = details.stream()
-                .filter(row -> row.get("pdf_url") != null && !row.get("pdf_url").toString().trim().isEmpty())
-                .toList();
+        String rawJson = response.getBody();
+        ObjectMapper mapper = new ObjectMapper();
+        Map<String, Object> result = mapper.readValue(rawJson, new TypeReference<Map<String, Object>>() {
+        });
 
-        result.put("certificate_details", filtered);
-    }
-
-    return result;
-}
+        // ✅ Only keep records that actually have a PDF link
+        if (result.containsKey("certificate_details")) {
+            List<Map<String, Object>> details = (List<Map<String, Object>>) result.get("certificate_details");
 
+            List<Map<String, Object>> filtered = details.stream()
+                    .filter(row -> row.get("pdf_url") != null && !row.get("pdf_url").toString().trim().isEmpty())
+                    .toList();
 
+            result.put("certificate_details", filtered);
+        }
 
+        return result;
+    }
 
+    // to created our external api from restservices
 
+    public Map<String, Object> fetchLocalDeathCertificate(
+            String dod, String fatherName, String motherName, String personName, String sex) throws Exception {
 
+        String apiUrl = "https://gccservices.chennaicorporation.gov.in/gccrestservices/api/death-certificate/by-detailsnewforWeb";
 
-// to created our external api from restservices 
-	
- public Map<String, Object> fetchLocalDeathCertificate(
-        String dod, String fatherName, String motherName, String personName, String sex) throws Exception {
+        // String apiUrl =
+        // "http://localhost:8077/gccrestservices/api/death-certificate/by-detailsnewforWeb";
 
-    String apiUrl = "https://gccservices.chennaicorporation.gov.in/gccrestservices/api/death-certificate/by-detailsnewforWeb";
+        MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
+        params.add("incident_date", dod); // yyyy-MM-dd
+        params.add("gender", sex);
 
-    MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
-    params.add("incident_date", dod);   // yyyy-MM-dd
-    params.add("gender", sex);
+        // 🔹 Pass optional values if provided (converted to UPPERCASE, DB expects this)
+        if (fatherName != null && !fatherName.trim().isEmpty()) {
+            params.add("father_name", fatherName.trim().toUpperCase());
+        }
+        if (motherName != null && !motherName.trim().isEmpty()) {
+            params.add("mother_name", motherName.trim().toUpperCase());
+        }
+        if (personName != null && !personName.trim().isEmpty()) {
+            params.add("person_name", personName.trim().toUpperCase());
+        }
 
-    // 🔹 Pass optional values if provided (converted to UPPERCASE, DB expects this)
-    if (fatherName != null && !fatherName.trim().isEmpty()) {
-        params.add("father_name", fatherName.trim().toUpperCase());
-    }
-    if (motherName != null && !motherName.trim().isEmpty()) {
-        params.add("mother_name", motherName.trim().toUpperCase());
-    }
-    if (personName != null && !personName.trim().isEmpty()) {
-        params.add("person_name", personName.trim().toUpperCase());
-    }
+        HttpHeaders headers = new HttpHeaders();
+        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
 
-    HttpHeaders headers = new HttpHeaders();
-    headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
+        HttpEntity<MultiValueMap<String, String>> entity = new HttpEntity<>(params, headers);
 
-    HttpEntity<MultiValueMap<String, String>> entity = new HttpEntity<>(params, headers);
+        ResponseEntity<String> response = restTemplate.postForEntity(apiUrl, entity, String.class);
 
-    ResponseEntity<String> response = restTemplate.postForEntity(apiUrl, entity, String.class);
+        String rawJson = response.getBody();
+        ObjectMapper mapper = new ObjectMapper();
+        Map<String, Object> result = mapper.readValue(rawJson, new TypeReference<Map<String, Object>>() {
+        });
+        // ✅ Only keep records that actually have a PDF link
+        if (result.containsKey("certificate_details")) {
+            List<Map<String, Object>> details = (List<Map<String, Object>>) result.get("certificate_details");
 
-    String rawJson = response.getBody();
-    ObjectMapper mapper = new ObjectMapper();
-    Map<String, Object> result = mapper.readValue(rawJson, new TypeReference<Map<String, Object>>() {});
-    //✅ Only keep records that actually have a PDF link
-    if (result.containsKey("certificate_details")) {
-        List<Map<String, Object>> details = (List<Map<String, Object>>) result.get("certificate_details");
+            List<Map<String, Object>> filtered = details.stream()
+                    .filter(row -> row.get("pdf_url") != null && !row.get("pdf_url").toString().trim().isEmpty())
+                    .toList();
 
-        List<Map<String, Object>> filtered = details.stream()
-                .filter(row -> row.get("pdf_url") != null && !row.get("pdf_url").toString().trim().isEmpty())
-                .toList();
+            result.put("certificate_details", filtered);
+        }
 
-        result.put("certificate_details", filtered);
+        return result;
     }
 
-    return result;
-}
-
-
-
+    // using in live
 
-
-	
-	//using in live
-	
-	public Map<String, Object> fetchDeathCertificate(String dod, String sex, String regno, String personName, String fatherName, String motherName) throws Exception {
+    public Map<String, Object> fetchDeathCertificate(String dod, String sex, String regno, String personName,
+            String fatherName, String motherName) throws Exception {
         @SuppressWarnings("rawtypes")
-		Map<String, String> params = new LinkedHashMap(); // keep order
+        Map<String, String> params = new LinkedHashMap(); // keep order
         params.put("regno", regno != null ? regno : "");
         params.put("sex", sex);
         params.put("dod", dod);
@@ -205,10 +199,11 @@ public class BirthAndDeathDetailsService {
         String serviceInput = mapper.writeValueAsString(params);
 
         // Final raw URL — NOT encoded
-        String DeathCertificateapiUrl = "https://chennaicorporation.gov.in/gcc/Api/DeathCertificate_json.jsp?serviceinput=" + serviceInput;
+        String DeathCertificateapiUrl = "https://chennaicorporation.gov.in/gcc/Api/DeathCertificate_json.jsp?serviceinput="
+                + serviceInput;
 
-        //System.out.println("⏩ Raw JSON: " + serviceInput);
-        //System.out.println("🌐 FINAL RAW URL: " + DeathCertificateapiUrl);
+        // System.out.println("⏩ Raw JSON: " + serviceInput);
+        // System.out.println("🌐 FINAL RAW URL: " + DeathCertificateapiUrl);
 
         HttpHeaders headers = new HttpHeaders();
         headers.set("User-Agent", "Mozilla/5.0");
@@ -216,86 +211,76 @@ public class BirthAndDeathDetailsService {
         HttpEntity<String> entity = new HttpEntity<>(headers);
 
         RestTemplate restTemplate = new RestTemplate();
-        ResponseEntity<String> response = restTemplate.exchange(DeathCertificateapiUrl, HttpMethod.GET, entity, String.class);
+        ResponseEntity<String> response = restTemplate.exchange(DeathCertificateapiUrl, HttpMethod.GET, entity,
+                String.class);
 
-        //System.out.println("✅ API Raw Response: " + response.getBody());
+        // System.out.println("✅ API Raw Response: " + response.getBody());
         String rawJson = response.getBody();
         String cleanJson = sanitizeJsonResponse(rawJson);
 
-        return mapper.readValue(cleanJson, new TypeReference<Map<String, Object>>() {});
+        return mapper.readValue(cleanJson, new TypeReference<Map<String, Object>>() {
+        });
     }
 
+    private String sanitizeJsonResponse(String rawJson) {
+        if (rawJson == null)
+            return "";
+
+        // Remove quote before parenthesis (fixes: "NAME" : "ABC "(LATE)")
+        String fixed = rawJson.replaceAll("\"\\s*\\(([^)]*)\\)\"", " ($1)\"");
+
+        // Remove parenthesis and content outside of quotes (fixes: ... "ABC" (LATE) ...
+        // → ... "ABC" ...)
+        fixed = fixed.replaceAll("\"\\s*\\([^)]*\\)", "\"");
+
+        return fixed
+                .replace("\\", "\\\\") // Escape backslashes
+                .replaceAll("[\\p{Cntrl}&&[^\r\n\t]]", "") // Remove non-printable control characters
+                .replaceAll("\t", "") // Remove tab characters
+                .replaceAll("\\s*:\\s*\n\\s*\"", ":\"") // Fix broken key-value splits
+                .replaceAll("\r", "") // Remove carriage return
+                .replaceAll("\n", "") // Remove newlines
+                .replaceAll(",\\s*\\[", "[") // Remove comma before array start
+                .replaceAll("\\[\\s*,", "[") // Remove comma after array start
+                .replaceAll(",\\s*\\]", "]") // Remove trailing comma in array
+                .replaceAll("\"\"\"", "\"\"") // fix triple quotes
+                .replaceAll("\"{3,}", "\"") // collapse 3+ quotes to 1
+                .replaceAll(":(\\s*)\"{2,}\"", ":\"\""); // handle `:"""` to `:""`
+    }
 
+    @Transactional
+    public ResponseEntity<?> saveNewUser(String user_name, String user_address, String user_mobile) {
+        Map<String, Object> result = new HashMap();
+        String sql = "INSERT INTO users (user_name, user_address, user_mobile) VALUES (?, ?, ?)";
+        try {
+            jdbcTemplate.update(sql, user_name, user_address, user_mobile);
+            result.put("message", "New User Saved Sucessfully");
+            result.put("data", "Success");
+            return ResponseEntity.ok(result);
+        } catch (Exception e) {
+            e.printStackTrace();
+            result.put("message", "Error");
+            result.put("Error", "Failed to save new user: " + e.getMessage());
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(result);
+        }
+    }
 
+    public boolean isUserRegistered(String mobile) {
+        String sql = "SELECT COUNT(*) FROM users WHERE user_mobile = ?";
+        Integer count = jdbcTemplate.queryForObject(sql, new Object[] { mobile }, Integer.class);
+        return count != null && count > 0;
+    }
 
+    public ResponseEntity<?> saveCertificateLogs(String regNo, String eventDate, String url, String service,
+            int userid) {
+        String sql = "Insert into certificate_logs (regno, event_date, english_url, service, user_id) VALUES (?, ?, ?, ?, ?)";
+        Integer count = jdbcTemplate.update(sql, regNo, eventDate, url, service, userid);
+        return count != null && count > 0 ? ResponseEntity.ok(count) : ResponseEntity.notFound().build();
+    }
 
-	private String sanitizeJsonResponse(String rawJson) {
-    if (rawJson == null) return "";
-
-    // Remove quote before parenthesis (fixes: "NAME" : "ABC "(LATE)")
-    String fixed = rawJson.replaceAll("\"\\s*\\(([^)]*)\\)\"", " ($1)\"");
-
-    // Remove parenthesis and content outside of quotes (fixes: ... "ABC" (LATE) ... → ... "ABC" ...)
-    fixed = fixed.replaceAll("\"\\s*\\([^)]*\\)", "\"");
-
-    return fixed
-        .replace("\\", "\\\\")                           // Escape backslashes
-        .replaceAll("[\\p{Cntrl}&&[^\r\n\t]]", "")       // Remove non-printable control characters
-        .replaceAll("\t", "")                            // Remove tab characters
-        .replaceAll("\\s*:\\s*\n\\s*\"", ":\"")          // Fix broken key-value splits
-        .replaceAll("\r", "")                            // Remove carriage return
-        .replaceAll("\n", "")                            // Remove newlines
-        .replaceAll(",\\s*\\[", "[")                     // Remove comma before array start
-        .replaceAll("\\[\\s*,", "[")                     // Remove comma after array start
-        .replaceAll(",\\s*\\]", "]")                     // Remove trailing comma in array
-        .replaceAll("\"\"\"", "\"\"")                    // fix triple quotes
-        .replaceAll("\"{3,}", "\"")                      // collapse 3+ quotes to 1
-        .replaceAll(":(\\s*)\"{2,}\"", ":\"\"");         // handle `:"""` to `:""`
-}
-	
-	
-	
-	
-	
-	@Transactional
-	public ResponseEntity<?> saveNewUser(String user_name, String user_address, String user_mobile) {
-		Map<String, Object> result = new HashMap();
-		 String sql = "INSERT INTO users (user_name, user_address, user_mobile) VALUES (?, ?, ?)";
-		try {
-			jdbcTemplate.update(sql, user_name, user_address, user_mobile);
-			result.put("message", "New User Saved Sucessfully");
-	        result.put("data", "Success");
-	        return ResponseEntity.ok(result);
-		} catch (Exception e) {
-			e.printStackTrace();
-			result.put("message", "Error");
-	        result.put("Error", "Failed to save new user: " + e.getMessage());
-	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(result);
-		}
-	}
-	
-
-	
-	 public boolean isUserRegistered(String mobile) {
-	        String sql = "SELECT COUNT(*) FROM users WHERE user_mobile = ?";
-	        Integer count = jdbcTemplate.queryForObject(sql, new Object[]{mobile}, Integer.class);
-	        return count != null && count > 0;
-	    }
-	
-	 
-	 
-	 
-	 public ResponseEntity<?> saveCertificateLogs(String regNo, String eventDate, String url, String service, int userid) {
-	        String sql = "Insert into certificate_logs (regno, event_date, english_url, service, user_id) VALUES (?, ?, ?, ?, ?)";
-	        Integer count = jdbcTemplate.update(sql, regNo, eventDate, url, service, userid);
-	        return count != null && count > 0 ? ResponseEntity.ok(count) : ResponseEntity.notFound().build();
-	    }
-
-	    public Map<String,Object> getUserDetails(String mobNo) {
-	        String sql = "Select * from users where user_mobile = ?";
-	        return jdbcTemplate.queryForMap(sql, mobNo);
-	    }
-	
-	
+    public Map<String, Object> getUserDetails(String mobNo) {
+        String sql = "Select * from users where user_mobile = ?";
+        return jdbcTemplate.queryForMap(sql, mobNo);
+    }
 
 }
diff --git a/src/main/resources/templates/modules/crslogspages/birthloginpage.html b/src/main/resources/templates/modules/crslogspages/birthloginpage.html
index 7183351..eec0bc2 100644
--- a/src/main/resources/templates/modules/crslogspages/birthloginpage.html
+++ b/src/main/resources/templates/modules/crslogspages/birthloginpage.html
@@ -1,826 +1,828 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
+
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>GCC - Birth And Death</title>
-
-<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
-
-
-<!-- Include Bootstrap Icons CDN in <head> if not already -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
-
-
-<!-- <link th:href="@{/styles/loginpage.css}" rel="stylesheet" /> -->
-<style>
-
-/* Header Styling */
-.header {
-    background-color: #134356;
-    padding: 10px 20px;
-    color: rgb(255, 255, 255);
-    font-family: Arial, sans-serif;
-}
-
-.header .logo img {
-    height: 60px;
-}
-
-.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: 80px;
-    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;
-}
-
-
-/* otp*/
-.otp-input-box {
-	display: flex;
-	justify-content: center;
-	gap: 10px;
-	/* Adjust spacing between the inputs */
-}
-
-.otp-input {
-	width: 50px;
-	/* Width for a square input */
-	height: 50px;
-	/* Height for a square input */
-	font-size: 24px;
-	/* Make the digits larger */
-	text-align: center;
-	/* Center the digit inside the box */
-	border: 1px solid #ccc;
-	/* Optional: add a border */
-	border-radius: 5px;
-	/* Optional: rounded corners */
-	outline: none;
-	/* Remove default focus outline */
-	transition: border-color 0.3s ease;
-}
-
-.otp-input:focus {
-	border-color: #007bff;
-	/* Change border color on focus */
-}
-
-/* otp*/
-
-/*send otp styles*/
-.input-group .form-control {
-	border-right: 0;
-	/* Remove right border of the input to blend with the button */
-}
-
-.input-group-append .btn {
-	border-left: 0;
-	/* Remove left border of the button */
-}
-
-.bottom-container {
-	margin-bottom: 50px; /* Adjust as needed */
-}
-
-
-
-
-
-/* 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 */
-    }
-     
-}
-
-
-
-
-.button-wrapper {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px; /* adds space from the top */
-}
-
-#registersubmit {
-  background-color: #0c4f63;
-  border: none;
-  width: 150px; /* optional: set fixed width */
-}
-
-#submitBtn {
-  background-color: #0c4f63;
-  border: none;
-  width: 150px; /* optional: set fixed width */
-}
-
-
-</style>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>GCC - Birth And Death</title>
+
+	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
+
+
+	<!-- Include Bootstrap Icons CDN in <head> if not already -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
+
+	<!-- <link th:href="@{/styles/loginpage.css}" rel="stylesheet" /> -->
+	<style>
+		/* Header Styling */
+		.header {
+			background-color: #134356;
+			padding: 10px 20px;
+			color: rgb(255, 255, 255);
+			font-family: Arial, sans-serif;
+		}
+
+		.header .logo img {
+			height: 60px;
+		}
+
+		.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: 80px;
+			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;
+		}
+
+
+		/* otp*/
+		.otp-input-box {
+			display: flex;
+			justify-content: center;
+			gap: 10px;
+			/* Adjust spacing between the inputs */
+		}
+
+		.otp-input {
+			width: 50px;
+			/* Width for a square input */
+			height: 50px;
+			/* Height for a square input */
+			font-size: 24px;
+			/* Make the digits larger */
+			text-align: center;
+			/* Center the digit inside the box */
+			border: 1px solid #ccc;
+			/* Optional: add a border */
+			border-radius: 5px;
+			/* Optional: rounded corners */
+			outline: none;
+			/* Remove default focus outline */
+			transition: border-color 0.3s ease;
+		}
+
+		.otp-input:focus {
+			border-color: #007bff;
+			/* Change border color on focus */
+		}
+
+		/* otp*/
+
+		/*send otp styles*/
+		.input-group .form-control {
+			border-right: 0;
+			/* Remove right border of the input to blend with the button */
+		}
+
+		.input-group-append .btn {
+			border-left: 0;
+			/* Remove left border of the button */
+		}
+
+		.bottom-container {
+			margin-bottom: 50px;
+			/* Adjust as needed */
+		}
+
+
+
+
+
+		/* 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 */
+			}
+
+		}
+
+
+
+
+		.button-wrapper {
+			display: flex;
+			justify-content: center;
+			margin-top: 20px;
+			/* adds space from the top */
+		}
+
+		#registersubmit {
+			background-color: #0c4f63;
+			border: none;
+			width: 150px;
+			/* optional: set fixed width */
+		}
+
+		#submitBtn {
+			background-color: #0c4f63;
+			border: none;
+			width: 150px;
+			/* optional: set fixed width */
+		}
+	</style>
 </head>
+
 <body style="background-color: #ebf1fa;">
 
-<!-- Header Start-->
-<header>
-<div class="header d-flex justify-content-between align-items-center">
-    <!-- Left: Logo -->
-    <div class="logo">
-        <a href="https://chennaicorporation.gov.in/gcc/" >
-    <img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Logo">
-  </a>
-        
-    </div>
-
-    <!-- Center: Text -->
-    <div class="center-text">
-        GREATER CHENNAI 
-        CORPORATION
-    </div>
-    
-    
-    
-<div class="center">
-   <a href="https://chennaicorporation.gov.in/gcc/" >
-    <i class="bi bi-house-fill" style="font-size: 40px; color:#93adc8"></i>
-  </a>
-</div>
-
-</div>
-
-
-
-</header>
-<!-- Header End-->
-
-
-<main class="container mt-4">
-    <!-- First Card -->
-    <!-- Register Card -->  
-<!-- Register Card -->
-<div class="card  register-card mx-auto mt-5" style="max-width: 400px; background-color: rgba(44, 84, 103, 0.1); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid #ffffff40; display:none;">
-    <div class="card-body ">
-      <h4 class="text-center mb-4" style="color: #004865;"><strong>Registration of Birth Certificate Download</strong></h4>
-  <hr>
-      <!-- Name -->
-      <div class="form-group">
-        <label for="name">Name</label><span class="text-danger">*</span>
-        <input type="text" class="form-control " id="name" placeholder="Enter your name" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
-      </div>
-  
-      <!-- Phone -->
-      <div class="form-group">
-        <label for="phone">Mobile No</label><span class="text-danger">*</span>
-        <input type="text" class="form-control" id="phone" placeholder="Enter Mobile number"  oninput="validatePhoneNumber(this)">
-      </div>
-  
-      <!-- Address -->
-<!--       <div class="form-group">
+	<!-- Header Start-->
+	<header>
+		<div class="header d-flex justify-content-between align-items-center">
+			<!-- Left: Logo -->
+			<div class="logo">
+				<a href="https://chennaicorporation.gov.in/gcc/">
+					<img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Logo">
+				</a>
+
+			</div>
+
+			<!-- Center: Text -->
+			<div class="center-text">
+				GREATER CHENNAI
+				CORPORATION
+			</div>
+
+
+
+			<div class="center">
+				<a href="https://chennaicorporation.gov.in/gcc/">
+					<i class="bi bi-house-fill" style="font-size: 40px; color:#93adc8"></i>
+				</a>
+			</div>
+
+		</div>
+
+
+
+	</header>
+	<!-- Header End-->
+
+
+	<main class="container mt-4">
+		<!-- First Card -->
+		<!-- Register Card -->
+		<!-- Register Card -->
+		<div class="card  register-card mx-auto mt-5"
+			style="max-width: 400px; background-color: rgba(44, 84, 103, 0.1); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid #ffffff40; display:none;">
+			<div class="card-body ">
+				<h4 class="text-center mb-4" style="color: #004865;"><strong>Registration of Birth Certificate
+						Download</strong></h4>
+				<hr>
+				<!-- Name -->
+				<div class="form-group">
+					<label for="name">Name</label><span class="text-danger">*</span>
+					<input type="text" class="form-control " id="name" placeholder="Enter your name"
+						oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
+				</div>
+
+				<!-- Phone -->
+				<div class="form-group">
+					<label for="phone">Mobile No</label><span class="text-danger">*</span>
+					<input type="text" class="form-control" id="phone" placeholder="Enter Mobile number"
+						oninput="validatePhoneNumber(this)">
+				</div>
+
+				<!-- Address -->
+				<!--       <div class="form-group">
         <label for="address">Address</label><span class="text-danger">*</span>
         <textarea class="form-control" id="address" rows="2" placeholder="Enter your Address"></textarea>
       </div> -->
-  
 
- 
-  <div class="button-wrapper">
-		  <button type="submit" class="btn btn-primary" id="registersubmit">Register</button>
+
+
+				<div class="button-wrapper">
+					<button type="submit" class="btn btn-primary" id="registersubmit">Register</button>
+				</div>
+
+
+
+				<div class="text-center mt-3 mb-2">
+
+					<label>
+						If you already have an account,
+						<a href="#" id="showLoginCardBtn">click here to login</a>.
+					</label>
+
+				</div>
+
+
+			</div>
 		</div>
 
 
 
-<div class="text-center mt-3 mb-2">
-
-	     <label>
-	         If you already have an account,
-	         <a href="#" id="showLoginCardBtn">click here to login</a>.
-	     </label>
-
-</div>
-  
-      
-    </div>
-  </div>
-  
-  
-
-<div class="card login-card mx-auto mt-5" style="max-width: 400px; background-color: rgba(44, 84, 103, 0.1); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid #ffffff40; " >
-    <div class="card-body ">
-      <h4 class="text-center mb-4" style="color: #004865;"><strong>Birth  Certificate Download</strong></h4>
-<hr>
-      <!-- Phone -->
-      <div class="form-group">
-        <label for="phone">Mobile No</label>
-        <span class="text-danger">*</span>
-	        <input type="text"
-			id="phoneNumber" class="form-control"
-			placeholder="Enter Registered Mobile number"
-			oninput="validatePhoneNumber(this)">
-      </div>
-  
-
- 
-  <div class="button-wrapper">
-		  <button type="submit" class="btn btn-primary" id="submitBtn">Login</button>
-	  </div>
-
-
-<div class="text-center mt-3 mb-2">
-	     <label>
-	         If you don't have an account,
-	         <a href="#" id="showRegisterCardBtn">click here to Register</a>.
-	     </label>
-	 </div>
-
-    </div>
-  </div>
-
-</main>
-
-
-
-<!-- OTP Modal -->
-
-<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="" onsubmit="return verifyOtp(1); "> <!--1 mentioned for existing user login  -->
-	            <div class="modal-header">
-	                <h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP
-	                    Login</h6>
-	                <button type="button" class="close" data-bs-dismiss="modal"
-	                    aria-label="Close"
-	                    style="color: black; border: white; background-color: white;">
-	                    <span aria-hidden="true">&times;</span>
-	                </button>
-	            </div>
-	            <div class="modal-body">
-	                <div class="row ">
-	                    <div class="mb-3" style="text-align: center;">
-	                        <img src="https://gccservices.in/gcc/files/c_d/otp.png"
-	                            width="50%" alt="Mobileotp">
-	                    </div>
-	                </div>
-	
-	                <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" id="otperror"></p>
-	                    </div>
-	                </div>
-	                <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>
-	                <div class="mb-3 text-center">
-	                    <div id="resend-containers">
-	                        <p class="mb-0">Didn't receive OTP?</p>
-	                        <p class="mb-0 text-info" id="resendlink"></p>
-	                    </div>
-	                </div>
-	
-	
-	            </div>
-	            <div class="modal-footer">
-	                <button type="button" class="btn btn-secondary"
-	                    data-bs-dismiss="modal">Close</button>
-	                <button type="submit" class="btn btn-primary" id="but">Verify
-	                    OTP</button>
-	            </div>
-	        </form>
-	    </div>
+		<div class="card login-card mx-auto mt-5"
+			style="max-width: 400px; background-color: rgba(44, 84, 103, 0.1); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid #ffffff40; ">
+			<div class="card-body ">
+				<h4 class="text-center mb-4" style="color: #004865;"><strong>Birth Certificate Download</strong></h4>
+				<hr>
+				<!-- Phone -->
+				<div class="form-group">
+					<label for="phone">Mobile No</label>
+					<span class="text-danger">*</span>
+					<input type="text" id="phoneNumber" class="form-control"
+						placeholder="Enter Registered Mobile number" oninput="validatePhoneNumber(this)">
+				</div>
+
+
+
+				<div class="button-wrapper">
+					<button type="submit" class="btn btn-primary" id="submitBtn">Login</button>
+				</div>
+
+
+				<div class="text-center mt-3 mb-2">
+					<label>
+						If you don't have an account,
+						<a href="#" id="showRegisterCardBtn">click here to Register</a>.
+					</label>
+				</div>
+
+			</div>
+		</div>
+
+	</main>
+
+
+
+	<!-- OTP Modal -->
+
+	<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="" onsubmit="return verifyOtp(1); "> <!--1 mentioned for existing user login  -->
+					<div class="modal-header">
+						<h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP
+							Login</h6>
+						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
+							style="color: black; border: white; background-color: white;">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<div class="row ">
+							<div class="mb-3" style="text-align: center;">
+								<img src="https://gccservices.in/gcc/files/c_d/otp.png" width="50%" alt="Mobileotp">
+							</div>
+						</div>
+
+						<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" id="otperror"></p>
+							</div>
+						</div>
+						<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>
+						<div class="mb-3 text-center">
+							<div id="resend-containers">
+								<p class="mb-0">Didn't receive OTP?</p>
+								<p class="mb-0 text-info" id="resendlink"></p>
+							</div>
+						</div>
+
+
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+						<button type="submit" class="btn btn-primary" id="but">Verify
+							OTP</button>
+					</div>
+				</form>
+			</div>
+		</div>
 	</div>
-</div>
 
 
 
-<!-- jQuery (Only load it once) -->
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+	<!-- jQuery (Only load it once) -->
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<!-- Popper.js (Required for Bootstrap 4) -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+
+	<!-- Bootstrap JS -->
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+
+	<!-- SweetAlert JS (optional if you plan to use it) -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+	<!-- <script th:src="@{/script/loginpage.js}"></script> -->
+
 
-<!-- Popper.js (Required for Bootstrap 4) -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+	<script>
+
+
+		document.addEventListener("DOMContentLoaded", function () {
+			const registerCard = document.querySelector(".register-card");
+			const loginCard = document.querySelector(".login-card");
+
+			function clearRegisterForm() {
+				document.getElementById("name").value = "";
+				document.getElementById("phone").value = "";
+				//document.getElementById("address").value = "";
+			}
+
+			function clearLoginForm() {
+				document.getElementById("phoneNumber").value = "";
+			}
+
+			document.getElementById("showRegisterCardBtn").addEventListener("click", function (e) {
+				e.preventDefault();
+				clearLoginForm();
+				loginCard.style.display = "none";
+				registerCard.style.display = "block";
+			});
+
+			document.getElementById("showLoginCardBtn").addEventListener("click", function (e) {
+				e.preventDefault();
+				clearRegisterForm();
+				registerCard.style.display = "none";
+				loginCard.style.display = "block";
+			});
+		});
+
+
+
+		$(document).ready(function () {
+			// Show Login Card when "Login" is clicked from Register Card
+			$('#showLoginCardBtn').on('click', function (e) {
+				e.preventDefault();
+				$('.register-card').hide();
+				$('.login-card').show();
+			});
+
+			// Show Register Card when "Register" is clicked from Login Card
+			$('#showRegisterCardBtn').on('click', function (e) {
+				e.preventDefault();
+				$('.login-card').hide();
+				$('.register-card').show();
+			});
+
+
+			// When OTP modal is closed
+			$('#otpForm').on('hidden.bs.modal', function () {
+				// Clear all OTP input fields
+				$('.otp-input').val('');
+
+				// Clear OTP error message
+				$('#otperror').text('');
+
+				// Restart the countdown
+				startCountdown();
+			});
+
+		});
+
+
+
+		function validatePhoneNumber(input) {
+			// Remove non-numeric characters
+			let value = input.value.replace(/[^0-9]/g, '');
+
+			// Prevent input if first digit is 0
+			if (value.length === 1 && value[0] === '0') {
+				value = '';
+			}
+
+			// Enforce Indian mobile format: starts with 6-9 and has exactly 10 digits
+			if (value.length > 10) {
+				value = value.slice(0, 10);
+			}
+
+			// Update input value
+			input.value = value;
+
+			// Optional: check for invalid numbers starting with digits other than 6-9
+			if (value.length === 10 && !/^[6-9]\d{9}$/.test(value)) {
+				Swal.fire({
+					title: "Invalid Mobile Number",
+					text: "Please enter a valid 10-digit Indian mobile number starting with 6-9.",
+					icon: "error",
+					confirmButtonText: "OK",
+					allowOutsideClick: false
+				});
+				input.value = "";
+			}
+		}
+
+
+		$('#registersubmit').click(function (event) {
+			event.preventDefault();
+
+			const name = $('#name').val().trim();
+			const mobileNumber = $('#phone').val().trim();
+			//const address = $('#address').val().trim();
+
+			if (!name) {
+				Swal.fire({ icon: 'warning', title: 'Missing Name', text: 'Please enter your name.' });
+				return;
+			}
+
+			if (!mobileNumber || mobileNumber.length !== 10) {
+				Swal.fire({ title: "Invalid Mobile Number", text: "Please enter a valid 10-digit mobile number.", icon: "error" });
+				return;
+			}
+
+
+
+			// Step 1: Check if user already exists
+			$.ajax({
+				type: "POST",
+				url: '/crs/api/checkUser',
+				data: { mobile: mobileNumber },
+				success: function (response) {
+					if (response.exists) {
+						Swal.fire({
+							title: "Already Registered",
+							text: "This mobile number is already registered. Please login.",
+							icon: "info"
+						});
+					} else {
+						// Step 2: Send OTP
+						sendOtp(mobileNumber);
+
+						// Step 3: Wait for user to manually click Verify inside OTP modal,
+						// and if successful, call verifyOtp with a callback
+						$('#but').off('click').on('click', function () {
+							verifyOtp(2, function () { // 2 is mentioned for new user registration 
+								// Step 4: Save new user only after OTP success
+								$.ajax({
+									url: '/crs/api/saveNewUser',
+									type: 'POST',
+									data: {
+										user_name: name,
+
+										user_mobile: mobileNumber
+									},
+									success: function () {
+										Swal.fire({
+											icon: 'success',
+											title: 'Registration Successful',
+											//text: 'Redirecting...'
+										}).then(() => {
+											$('#name').val('');
+											$('#phone').val('');
+											// $('#address').val('');
+											window.location.href = "/crs/birth";
+										});
+									},
+									error: function (xhr) {
+										let message = 'An error occurred.';
+										if (xhr.responseJSON && xhr.responseJSON.message) {
+											message = xhr.responseJSON.message;
+										}
+										Swal.fire({ icon: 'error', title: 'Failed', text: message });
+									}
+								});
+							});
+						});
+					}
+				},
+				error: function () {
+					Swal.fire({
+						title: "Server Error",
+						text: "Unable to check user status.",
+						icon: "error"
+					});
+				}
+			});
+		});
+
+
+
+
+		$('#submitBtn').click(function (event) {
+			event.preventDefault();
+
+			let mobileNumber = $('#phoneNumber').val().trim();
+
+			if (!mobileNumber || mobileNumber.length !== 10) {
+				Swal.fire({
+					title: "Invalid Mobile Number",
+					text: "Please enter a valid 10-digit mobile number.",
+					icon: "error",
+					confirmButtonText: "OK",
+					allowOutsideClick: false
+				});
+				return;
+			}
+
+			// Step 1: Check if user exists
+			$.ajax({
+				type: "POST",
+				url: '/crs/api/checkUser',
+				data: { mobile: mobileNumber },
+				success: function (response) {
+					if (response.exists) {
+
+						// Step 2: Send OTP to registered user
+						sendOtp(mobileNumber);
+
+						// Step 3: Bind OTP verify for login
+						$('#but').off('click').on('click', function () {
+							verifyOtp(1, function () {
+
+
+								// Step 4: Redirect to birth & death page ONLY after OTP success
+								window.location.href = "/crs/birth";
+							});
+						});
+
+					} else {
+						// Not registered
+						Swal.fire({
+							title: "User Not Found",
+							text: "This mobile number is not registered. Please register to continue.",
+							icon: "warning",
+							confirmButtonText: "OK",
+							allowOutsideClick: false
+						}).then(() => {
+							window.location.reload(); // Optionally show registration card instead
+						});
+					}
+				},
+				error: function () {
+					Swal.fire({
+						title: "Server Error",
+						text: "Unable to check user status. Please try again later.",
+						icon: "error",
+						confirmButtonText: "OK"
+					});
+				}
+			});
+		});
+
+
+
+		function sendOtp(mobileNumber) {
+			Swal.fire({
+				title: 'Processing OTP...',
+				text: 'Please wait while we send the OTP.',
+				allowOutsideClick: false,
+				didOpen: () => {
+					Swal.showLoading();
+				}
+			});
+
+			let minDisplayTime = 5000;
+			let startTime = new Date().getTime();
+
+			$.ajax({
+				type: "GET",
+				url: '/crs/api/sendOTP',
+				data: { 'mobile': mobileNumber },
+				dataType: 'json',
+				success: function (response) {
+					let elapsedTime = new Date().getTime() - startTime;
+					let delay = Math.max(0, minDisplayTime - elapsedTime);
+
+					setTimeout(function () {
+						Swal.close();
+						//console.log("OTP sent response:", response);
+
+						$('#mobilenotxt').html(mobileNumber);
+						$('#otpForm').modal({
+							backdrop: 'static',
+							keyboard: false
+						}).modal('show');
+
+						startCountdown();
+					}, delay);
+				},
+				error: function () {
+					Swal.fire({
+						title: "Server Error",
+						text: "There was an issue sending your OTP. Please try again later.",
+						icon: "error",
+						confirmButtonText: "OK"
+					});
+				}
+			});
+		}
 
-<!-- Bootstrap JS -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
-
-<!-- SweetAlert JS (optional if you plan to use it) -->
-<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-
-<!-- <script th:src="@{/script/loginpage.js}"></script> -->
 
 
-<script>
 
 
-document.addEventListener("DOMContentLoaded", function () {
-    const registerCard = document.querySelector(".register-card");
-    const loginCard = document.querySelector(".login-card");
-
-    function clearRegisterForm() {
-        document.getElementById("name").value = "";
-        document.getElementById("phone").value = "";
-        //document.getElementById("address").value = "";
-    }
-
-    function clearLoginForm() {
-        document.getElementById("phoneNumber").value = "";
-    }
-
-    document.getElementById("showRegisterCardBtn").addEventListener("click", function (e) {
-        e.preventDefault();
-        clearLoginForm();
-        loginCard.style.display = "none";
-        registerCard.style.display = "block";
-    });
-
-    document.getElementById("showLoginCardBtn").addEventListener("click", function (e) {
-        e.preventDefault();
-        clearRegisterForm();
-        registerCard.style.display = "none";
-        loginCard.style.display = "block";
-    });
-});
-
-
-
-$(document).ready(function () {
-  // Show Login Card when "Login" is clicked from Register Card
-  $('#showLoginCardBtn').on('click', function (e) {
-    e.preventDefault();
-    $('.register-card').hide();
-    $('.login-card').show();
-  });
-
-  // Show Register Card when "Register" is clicked from Login Card
-  $('#showRegisterCardBtn').on('click', function (e) {
-    e.preventDefault();
-    $('.login-card').hide();
-    $('.register-card').show();
-  });
-  
-  
-	// When OTP modal is closed
-	$('#otpForm').on('hidden.bs.modal', function () {
-	    // Clear all OTP input fields
-	    $('.otp-input').val('');
-
-	    // Clear OTP error message
-	    $('#otperror').text('');
-
-	    // Restart the countdown
-	    startCountdown();
-	});
-  
-});
-
-
- 
- function validatePhoneNumber(input) {
-	    // Remove non-numeric characters
-	    let value = input.value.replace(/[^0-9]/g, '');
-	    
-	    // Prevent input if first digit is 0
-	    if (value.length === 1 && value[0] === '0') {
-	        value = '';
-	    }
-
-	    // Enforce Indian mobile format: starts with 6-9 and has exactly 10 digits
-	    if (value.length > 10) {
-	        value = value.slice(0, 10);
-	    }
-
-	    // Update input value
-	    input.value = value;
-
-	    // Optional: check for invalid numbers starting with digits other than 6-9
-	    if (value.length === 10 && !/^[6-9]\d{9}$/.test(value)) {
-	        Swal.fire({
-	            title: "Invalid Mobile Number",
-	            text: "Please enter a valid 10-digit Indian mobile number starting with 6-9.",
-	            icon: "error",
-	            confirmButtonText: "OK",
-	            allowOutsideClick: false
-	        });
-	        input.value = "";
-	    }
-	}
-
-
- 	$('#registersubmit').click(function (event) {
- 	    event.preventDefault();
-
- 	    const name = $('#name').val().trim();
- 	    const mobileNumber = $('#phone').val().trim();
- 	    //const address = $('#address').val().trim();
-
- 	    if (!name) {
- 	        Swal.fire({ icon: 'warning', title: 'Missing Name', text: 'Please enter your name.' });
- 	        return;
- 	    }
-
- 	    if (!mobileNumber || mobileNumber.length !== 10) {
- 	        Swal.fire({ title: "Invalid Mobile Number", text: "Please enter a valid 10-digit mobile number.", icon: "error" });
- 	        return;
- 	    }
- 	    
-
-
- 	    // Step 1: Check if user already exists
- 	    $.ajax({
- 	        type: "POST",
- 	        url: '/crs/api/checkUser',
- 	        data: { mobile: mobileNumber },
- 	        success: function (response) {
- 	            if (response.exists) {
- 	                Swal.fire({
- 	                    title: "Already Registered",
- 	                    text: "This mobile number is already registered. Please login.",
- 	                    icon: "info"
- 	                });
- 	            } else {
- 	                // Step 2: Send OTP
- 	                sendOtp(mobileNumber);
-
- 	                // Step 3: Wait for user to manually click Verify inside OTP modal,
- 	                // and if successful, call verifyOtp with a callback
- 	                $('#but').off('click').on('click', function () {
- 	                    verifyOtp(2,function () { // 2 is mentioned for new user registration 
- 	                        // Step 4: Save new user only after OTP success
- 	                        $.ajax({
- 	                            url: '/crs/api/saveNewUser',
- 	                            type: 'POST',
- 	                            data: {
- 	                                user_name: name,
- 	                                
- 	                                user_mobile: mobileNumber
- 	                            },
- 	                            success: function () {
- 	                                Swal.fire({
- 	                                    icon: 'success',
- 	                                    title: 'Registration Successful',
- 	                                    //text: 'Redirecting...'
- 	                                }).then(() => {
- 	                                    $('#name').val('');
- 	                                    $('#phone').val('');
- 	                                   // $('#address').val('');
- 	                                    window.location.href = "/crs/loginpage";
- 	                                });
- 	                            },
- 	                            error: function (xhr) {
- 	                                let message = 'An error occurred.';
- 	                                if (xhr.responseJSON && xhr.responseJSON.message) {
- 	                                    message = xhr.responseJSON.message;
- 	                                }
- 	                                Swal.fire({ icon: 'error', title: 'Failed', text: message });
- 	                            }
- 	                        });
- 	                    });
- 	                });
- 	            }
- 	        },
- 	        error: function () {
- 	            Swal.fire({
- 	                title: "Server Error",
- 	                text: "Unable to check user status.",
- 	                icon: "error"
- 	            });
- 	        }
- 	    });
- 	});
- 
- 
-
-	
-	$('#submitBtn').click(function (event) {
-	    event.preventDefault();
-
-	    let mobileNumber = $('#phoneNumber').val().trim();
-
-	    if (!mobileNumber || mobileNumber.length !== 10) {
-	        Swal.fire({
-	            title: "Invalid Mobile Number",
-	            text: "Please enter a valid 10-digit mobile number.",
-	            icon: "error",
-	            confirmButtonText: "OK",
-	            allowOutsideClick: false
-	        });
-	        return;
-	    }
-
-	    // Step 1: Check if user exists
-	    $.ajax({
-	        type: "POST",
-	        url: '/crs/api/checkUser',
-	        data: { mobile: mobileNumber },
-	        success: function (response) {
-	            if (response.exists) {
-	            	
-	                // Step 2: Send OTP to registered user
-	                sendOtp(mobileNumber);
-
-	                // Step 3: Bind OTP verify for login
-	                $('#but').off('click').on('click', function () {
-	                    verifyOtp(1, function () {
-	                    	
-	                    	
-	                        // Step 4: Redirect to birth & death page ONLY after OTP success
-	                        window.location.href = "/crs/birth";
-	                    });
-	                });
-
-	            } else {
-	                // Not registered
-	                Swal.fire({
-	                    title: "User Not Found",
-	                    text: "This mobile number is not registered. Please register to continue.",
-	                    icon: "warning",
-	                    confirmButtonText: "OK",
-	                    allowOutsideClick: false
-	                }).then(() => {
-	                    window.location.reload(); // Optionally show registration card instead
-	                });
-	            }
-	        },
-	        error: function () {
-	            Swal.fire({
-	                title: "Server Error",
-	                text: "Unable to check user status. Please try again later.",
-	                icon: "error",
-	                confirmButtonText: "OK"
-	            });
-	        }
-	    });
-	});
-
-	
-
-	 function sendOtp(mobileNumber) {
-	    Swal.fire({
-	        title: 'Processing OTP...',
-	        text: 'Please wait while we send the OTP.',
-	        allowOutsideClick: false,
-	        didOpen: () => {
-	            Swal.showLoading();
-	        }
-	    });
-
-	    let minDisplayTime = 5000;
-	    let startTime = new Date().getTime();
-
-	    $.ajax({
-	        type: "GET",
-	        url: '/crs/api/sendOTP',
-	        data: { 'mobile': mobileNumber },
-	        dataType: 'json',
-	        success: function (response) {
-	            let elapsedTime = new Date().getTime() - startTime;
-	            let delay = Math.max(0, minDisplayTime - elapsedTime);
-
-	            setTimeout(function () {
-	                Swal.close();
-	                //console.log("OTP sent response:", response);
-
-	                $('#mobilenotxt').html(mobileNumber);
-	                $('#otpForm').modal({
-	                    backdrop: 'static',
-	                    keyboard: false
-	                }).modal('show');
-
-	                startCountdown();
-	            }, delay);
-	        },
-	        error: function () {
-	            Swal.fire({
-	                title: "Server Error",
-	                text: "There was an issue sending your OTP. Please try again later.",
-	                icon: "error",
-	                confirmButtonText: "OK"
-	            });
-	        }
-	    });
-	} 
-	 
-	 
-	 
-	 
-		
 		function verifyOtp(flag, onSuccessCallback) {
 			//alert("inside line 849")
-			
-	        Swal.fire({
-	            title: 'Verifying OTP...',
-	            text: 'Please wait while we verify the OTP.',
-	            allowOutsideClick: false,
-	            didOpen: () => {
-	                Swal.showLoading();
-	            }
-	        });
-
-	        const minDisplayTime = 2000;
-	        const startTime = new Date().getTime();
-
-	        let otpValue = '';
-	        $('.otp-input').each(function () {
-	            otpValue += $(this).val();
-	        });
-
-	        const mobileNumber = $('#mobilenotxt').text().trim();
-
-	        $.ajax({
-	            type: "GET",
-	            url: '/crs/api/verifyOTP',
-	            data: {'otp': otpValue, 'mobNo': mobileNumber, 'flag': flag},
-	            dataType: 'json',
-	            success: function (response) {
-	            	
-	                //console.log("response...",response);
-	                if (response.userName) {
-	                    localStorage.setItem("userName", response.userName);
-	                }
-	                const elapsedTime = new Date().getTime() - startTime;
-	                const delay = Math.max(0, minDisplayTime - elapsedTime);
-
-	                setTimeout(function () {
-	                    Swal.close();
-	                    if (response.status === "Success") {
-	                    	//alert("inside line 890 " + response.userName);
-	                        //console.log("Welcome, " , response.userName);
-	                        Swal.fire({
-	                            title: "OTP Verified!",
-	                            text: "Your OTP has been successfully verified.",
-	                            icon: "success",
-	                            confirmButtonText: "OK",
-	                            allowOutsideClick: false
-	                        }).then(() => {
-	                            $('#otpForm').modal('hide');
-	                            //$('#sendOtpButton').hide();
-	                            $('#phoneNumber').prop('disabled', true);
-	                            $('#verifiedOTP').prop('disabled', false).css('display', 'block');
-	                            if (typeof onSuccessCallback === 'function') {
-	                                onSuccessCallback();  // ✅ Call the registration save logic here
-	                            }
-
-	                            /* if(flag==1){
-                                 window.location.href = "/birthanddeath";
-                             }else{
-                                 window.location.href = "/loginpage";
-                             } */
-	                            //saveDetails();
-	                           
-	                        });
-	                    } else {
-	                        Swal.fire({
-	                            title: "OTP Incorrect",
-	                            text: "The OTP you entered is incorrect. Please try again.",
-	                            icon: "error",
-	                            confirmButtonText: "Retry"
-	                        });
-	                    }
-	                }, delay);
-	            },
-	            error: function () {
-	                Swal.fire({
-	                    title: "Verification Failed",
-	                    text: "There was an issue verifying your OTP. Please try again later.",
-	                    icon: "error"
-	                });
-	            }
-	        });
-
-	        return false;
-	    } 
-	
-	
-
-	// Declare the timeout variable globally
-	let resendTimeout = null;
-
-	// Countdown and resend handler
-	function startCountdown() {
-	    // Clear any existing countdown interval
-	    if (resendTimeout) {
-	        clearInterval(resendTimeout);
-	        resendTimeout = null;
-	    }
-
-	    let timeleft = 60;
-	    $('#resendlink').html('Please wait.. <span id="countdown">60</span>s');
-
-	    resendTimeout = setInterval(function () {
-	        timeleft--;
-	        $('#countdown').text(timeleft);
-
-	        if (timeleft <= 0) {
-	            clearInterval(resendTimeout);
-	            resendTimeout = null; // Clear reference
-	            $('#resendlink').html('<a href="#" id="resend-link" class="text-info" onclick="return resendOTP();">Resend OTP</a>');
-	        }
-	    }, 1000);
-	}
-
-	
-	
-	
-	// Resend OTP logic
-	function resendOTP() {
-	    const mobileNumber = $('#mobilenotxt').text().trim();
-	    if (!mobileNumber || mobileNumber.length !== 10) return false;
-
-	    $.ajax({
-	        type: "GET",
-	        url: '/crs/api/sendOTP',
-	        data: { 'mobile': mobileNumber },
-	        dataType: 'json',
-	        success: function (response) {
-	            Swal.fire({
-	                title: "OTP Resent",
-	                text: "A new OTP has been sent to your mobile.",
-	                icon: "info",
-	                confirmButtonText: "OK",
-	                allowOutsideClick: false
-	            }).then(() => {
-	            	  // Clear all OTP input fields
-	                for (let i = 1; i <= 5; i++) {
-	                    $(`#otp${i}`).val('');
-	                }
-
-	                startCountdown();        // Start countdown again if needed
-	            });
-	        },
-	        error: function () {
-	            Swal.fire({
-	                title: "Error",
-	                text: "Could not resend OTP. Please try again.",
-	                icon: "error"
-	            });
-	        }
-	    });
-
-	    return false; // prevent default link behavior
-	}
-
-
-	 // For OTP input box
+
+			Swal.fire({
+				title: 'Verifying OTP...',
+				text: 'Please wait while we verify the OTP.',
+				allowOutsideClick: false,
+				didOpen: () => {
+					Swal.showLoading();
+				}
+			});
+
+			const minDisplayTime = 2000;
+			const startTime = new Date().getTime();
+
+			let otpValue = '';
+			$('.otp-input').each(function () {
+				otpValue += $(this).val();
+			});
+
+			const mobileNumber = $('#mobilenotxt').text().trim();
+
+			$.ajax({
+				type: "GET",
+				url: '/crs/api/verifyOTP',
+				data: { 'otp': otpValue, 'mobNo': mobileNumber, 'flag': flag },
+				dataType: 'json',
+				success: function (response) {
+
+					//console.log("response...",response);
+					if (response.userName) {
+						localStorage.setItem("userName", response.userName);
+					}
+					const elapsedTime = new Date().getTime() - startTime;
+					const delay = Math.max(0, minDisplayTime - elapsedTime);
+
+					setTimeout(function () {
+						Swal.close();
+						if (response.status === "Success") {
+							//alert("inside line 890 " + response.userName);
+							//console.log("Welcome, " , response.userName);
+							Swal.fire({
+								title: "OTP Verified!",
+								text: "Your OTP has been successfully verified.",
+								icon: "success",
+								confirmButtonText: "OK",
+								allowOutsideClick: false
+							}).then(() => {
+								$('#otpForm').modal('hide');
+								//$('#sendOtpButton').hide();
+								$('#phoneNumber').prop('disabled', true);
+								$('#verifiedOTP').prop('disabled', false).css('display', 'block');
+								if (typeof onSuccessCallback === 'function') {
+									onSuccessCallback();  // ✅ Call the registration save logic here
+								}
+
+								/* if(flag==1){
+								 window.location.href = "/birthanddeath";
+							 }else{
+								 window.location.href = "/loginpage";
+							 } */
+								//saveDetails();
+
+							});
+						} else {
+							Swal.fire({
+								title: "OTP Incorrect",
+								text: "The OTP you entered is incorrect. Please try again.",
+								icon: "error",
+								confirmButtonText: "Retry"
+							});
+						}
+					}, delay);
+				},
+				error: function () {
+					Swal.fire({
+						title: "Verification Failed",
+						text: "There was an issue verifying your OTP. Please try again later.",
+						icon: "error"
+					});
+				}
+			});
+
+			return false;
+		}
+
+
+
+		// Declare the timeout variable globally
+		let resendTimeout = null;
+
+		// Countdown and resend handler
+		function startCountdown() {
+			// Clear any existing countdown interval
+			if (resendTimeout) {
+				clearInterval(resendTimeout);
+				resendTimeout = null;
+			}
+
+			let timeleft = 60;
+			$('#resendlink').html('Please wait.. <span id="countdown">60</span>s');
+
+			resendTimeout = setInterval(function () {
+				timeleft--;
+				$('#countdown').text(timeleft);
+
+				if (timeleft <= 0) {
+					clearInterval(resendTimeout);
+					resendTimeout = null; // Clear reference
+					$('#resendlink').html('<a href="#" id="resend-link" class="text-info" onclick="return resendOTP();">Resend OTP</a>');
+				}
+			}, 1000);
+		}
+
+
+
+
+		// Resend OTP logic
+		function resendOTP() {
+			const mobileNumber = $('#mobilenotxt').text().trim();
+			if (!mobileNumber || mobileNumber.length !== 10) return false;
+
+			$.ajax({
+				type: "GET",
+				url: '/crs/api/sendOTP',
+				data: { 'mobile': mobileNumber },
+				dataType: 'json',
+				success: function (response) {
+					Swal.fire({
+						title: "OTP Resent",
+						text: "A new OTP has been sent to your mobile.",
+						icon: "info",
+						confirmButtonText: "OK",
+						allowOutsideClick: false
+					}).then(() => {
+						// Clear all OTP input fields
+						for (let i = 1; i <= 5; i++) {
+							$(`#otp${i}`).val('');
+						}
+
+						startCountdown();        // Start countdown again if needed
+					});
+				},
+				error: function () {
+					Swal.fire({
+						title: "Error",
+						text: "Could not resend OTP. Please try again.",
+						icon: "error"
+					});
+				}
+			});
+
+			return false; // prevent default link behavior
+		}
+
+
+		// For OTP input box
 		$('.otp-input').on('keyup', function (e) {
 			var $this = $(this);
 			if ($this.val().length === 1) {
@@ -831,10 +833,11 @@ $(document).ready(function () {
 			}
 		});
 
-	 
 
-</script>
+
+	</script>
 
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/crslogspages/death.html b/src/main/resources/templates/modules/crslogspages/death.html
index b9f5d1d..3da7be9 100644
--- a/src/main/resources/templates/modules/crslogspages/death.html
+++ b/src/main/resources/templates/modules/crslogspages/death.html
@@ -704,7 +704,7 @@ $(document).ready(function () {
 
 document.addEventListener("DOMContentLoaded", function () {
     const today = new Date().toISOString().split("T")[0]; // yyyy-mm-dd format
-    document.getElementById("dateofbirth").setAttribute("max", today);
+    //document.getElementById("dateofbirth").setAttribute("max", today);
     document.getElementById("dateofdeath").setAttribute("max", today);
 });
 
@@ -848,7 +848,7 @@ function validateCaptcha(type) {
 
 
 document.addEventListener("DOMContentLoaded", function () {
-  generateCaptcha("birth");
+ // generateCaptcha("birth");
   generateCaptcha("death");
 });
 
@@ -1010,7 +1010,7 @@ if (!validateCaptcha('death')) {
 
 const formattedDod = dod.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
 
-// console.log("dod:", formattedDod);
+//console.log("dod:", formattedDod);
 $('#pageLoader').show();
 
     const payload = {
@@ -1029,10 +1029,11 @@ $.ajax({
     contentType: 'application/json',
     data: JSON.stringify(payload),
     success: function (response) {
+
         $('#pageLoader').hide();
 
         if (response && response.certificate_details && response.certificate_details.length > 0) {
-            let html = '<table id="deathDataTable" class="table table-bordered"><thead><tr>' +
+            let html = '<table id="deathDataTable" class="table table-bordered table-striped"><thead><tr>' +
                 '<th>S.No</th><th>Reg No</th><th>Person Name</th>' +
                 '<th>Father Name</th><th>Mother Name</th><th>DOD</th><th>Certificate Link</th></tr></thead><tbody>';
 
diff --git a/src/main/resources/templates/modules/crslogspages/deathloginpage.html b/src/main/resources/templates/modules/crslogspages/deathloginpage.html
index 3b15832..4932d8c 100644
--- a/src/main/resources/templates/modules/crslogspages/deathloginpage.html
+++ b/src/main/resources/templates/modules/crslogspages/deathloginpage.html
@@ -1,826 +1,828 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
+
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>GCC -  Death</title>
-
-<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
-
-
-<!-- Include Bootstrap Icons CDN in <head> if not already -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
-
-
-<!-- <link th:href="@{/styles/loginpage.css}" rel="stylesheet" /> -->
-<style>
-
-/* Header Styling */
-.header {
-    background-color: #134356;
-    padding: 10px 20px;
-    color: rgb(255, 255, 255);
-    font-family: Arial, sans-serif;
-}
-
-.header .logo img {
-    height: 60px;
-}
-
-.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: 80px;
-    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;
-}
-
-
-/* otp*/
-.otp-input-box {
-	display: flex;
-	justify-content: center;
-	gap: 10px;
-	/* Adjust spacing between the inputs */
-}
-
-.otp-input {
-	width: 50px;
-	/* Width for a square input */
-	height: 50px;
-	/* Height for a square input */
-	font-size: 24px;
-	/* Make the digits larger */
-	text-align: center;
-	/* Center the digit inside the box */
-	border: 1px solid #ccc;
-	/* Optional: add a border */
-	border-radius: 5px;
-	/* Optional: rounded corners */
-	outline: none;
-	/* Remove default focus outline */
-	transition: border-color 0.3s ease;
-}
-
-.otp-input:focus {
-	border-color: #007bff;
-	/* Change border color on focus */
-}
-
-/* otp*/
-
-/*send otp styles*/
-.input-group .form-control {
-	border-right: 0;
-	/* Remove right border of the input to blend with the button */
-}
-
-.input-group-append .btn {
-	border-left: 0;
-	/* Remove left border of the button */
-}
-
-.bottom-container {
-	margin-bottom: 50px; /* Adjust as needed */
-}
-
-
-
-
-
-/* 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 */
-    }
-     
-}
-
-
-
-
-.button-wrapper {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px; /* adds space from the top */
-}
-
-#registersubmit {
-  background-color: #0c4f63;
-  border: none;
-  width: 150px; /* optional: set fixed width */
-}
-
-#submitBtn {
-  background-color: #0c4f63;
-  border: none;
-  width: 150px; /* optional: set fixed width */
-}
-
-
-</style>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>GCC - Death</title>
+
+	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
+
+
+	<!-- Include Bootstrap Icons CDN in <head> if not already -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
+
+	<!-- <link th:href="@{/styles/loginpage.css}" rel="stylesheet" /> -->
+	<style>
+		/* Header Styling */
+		.header {
+			background-color: #134356;
+			padding: 10px 20px;
+			color: rgb(255, 255, 255);
+			font-family: Arial, sans-serif;
+		}
+
+		.header .logo img {
+			height: 60px;
+		}
+
+		.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: 80px;
+			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;
+		}
+
+
+		/* otp*/
+		.otp-input-box {
+			display: flex;
+			justify-content: center;
+			gap: 10px;
+			/* Adjust spacing between the inputs */
+		}
+
+		.otp-input {
+			width: 50px;
+			/* Width for a square input */
+			height: 50px;
+			/* Height for a square input */
+			font-size: 24px;
+			/* Make the digits larger */
+			text-align: center;
+			/* Center the digit inside the box */
+			border: 1px solid #ccc;
+			/* Optional: add a border */
+			border-radius: 5px;
+			/* Optional: rounded corners */
+			outline: none;
+			/* Remove default focus outline */
+			transition: border-color 0.3s ease;
+		}
+
+		.otp-input:focus {
+			border-color: #007bff;
+			/* Change border color on focus */
+		}
+
+		/* otp*/
+
+		/*send otp styles*/
+		.input-group .form-control {
+			border-right: 0;
+			/* Remove right border of the input to blend with the button */
+		}
+
+		.input-group-append .btn {
+			border-left: 0;
+			/* Remove left border of the button */
+		}
+
+		.bottom-container {
+			margin-bottom: 50px;
+			/* Adjust as needed */
+		}
+
+
+
+
+
+		/* 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 */
+			}
+
+		}
+
+
+
+
+		.button-wrapper {
+			display: flex;
+			justify-content: center;
+			margin-top: 20px;
+			/* adds space from the top */
+		}
+
+		#registersubmit {
+			background-color: #0c4f63;
+			border: none;
+			width: 150px;
+			/* optional: set fixed width */
+		}
+
+		#submitBtn {
+			background-color: #0c4f63;
+			border: none;
+			width: 150px;
+			/* optional: set fixed width */
+		}
+	</style>
 </head>
+
 <body style="background-color: #ebf1fa;">
 
-<!-- Header Start-->
-<header>
-<div class="header d-flex justify-content-between align-items-center">
-    <!-- Left: Logo -->
-    <div class="logo">
-        <a href="https://chennaicorporation.gov.in/gcc/" >
-    <img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Logo">
-  </a>
-        
-    </div>
-
-    <!-- Center: Text -->
-    <div class="center-text">
-        GREATER CHENNAI 
-        CORPORATION
-    </div>
-    
-    
-    
-<div class="center">
-   <a href="https://chennaicorporation.gov.in/gcc/" >
-    <i class="bi bi-house-fill" style="font-size: 40px; color:#93adc8"></i>
-  </a>
-</div>
-
-</div>
-
-
-
-</header>
-<!-- Header End-->
-
-
-<main class="container mt-4">
-    <!-- First Card -->
-    <!-- Register Card -->  
-<!-- Register Card -->
-<div class="card  register-card mx-auto mt-5" style="max-width: 400px; background-color: rgba(44, 84, 103, 0.1); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid #ffffff40; display:none;">
-    <div class="card-body ">
-      <h4 class="text-center mb-4" style="color: #004865;"><strong>Registration of Death Certificate Download</strong></h4>
-  <hr>
-      <!-- Name -->
-      <div class="form-group">
-        <label for="name">Name</label><span class="text-danger">*</span>
-        <input type="text" class="form-control " id="name" placeholder="Enter your name" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
-      </div>
-  
-      <!-- Phone -->
-      <div class="form-group">
-        <label for="phone">Mobile No</label><span class="text-danger">*</span>
-        <input type="text" class="form-control" id="phone" placeholder="Enter Mobile number"  oninput="validatePhoneNumber(this)">
-      </div>
-  
-      <!-- Address -->
-<!--       <div class="form-group">
+	<!-- Header Start-->
+	<header>
+		<div class="header d-flex justify-content-between align-items-center">
+			<!-- Left: Logo -->
+			<div class="logo">
+				<a href="https://chennaicorporation.gov.in/gcc/">
+					<img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Logo">
+				</a>
+
+			</div>
+
+			<!-- Center: Text -->
+			<div class="center-text">
+				GREATER CHENNAI
+				CORPORATION
+			</div>
+
+
+
+			<div class="center">
+				<a href="https://chennaicorporation.gov.in/gcc/">
+					<i class="bi bi-house-fill" style="font-size: 40px; color:#93adc8"></i>
+				</a>
+			</div>
+
+		</div>
+
+
+
+	</header>
+	<!-- Header End-->
+
+
+	<main class="container mt-4">
+		<!-- First Card -->
+		<!-- Register Card -->
+		<!-- Register Card -->
+		<div class="card  register-card mx-auto mt-5"
+			style="max-width: 400px; background-color: rgba(44, 84, 103, 0.1); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid #ffffff40; display:none;">
+			<div class="card-body ">
+				<h4 class="text-center mb-4" style="color: #004865;"><strong>Registration of Death Certificate
+						Download</strong></h4>
+				<hr>
+				<!-- Name -->
+				<div class="form-group">
+					<label for="name">Name</label><span class="text-danger">*</span>
+					<input type="text" class="form-control " id="name" placeholder="Enter your name"
+						oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
+				</div>
+
+				<!-- Phone -->
+				<div class="form-group">
+					<label for="phone">Mobile No</label><span class="text-danger">*</span>
+					<input type="text" class="form-control" id="phone" placeholder="Enter Mobile number"
+						oninput="validatePhoneNumber(this)">
+				</div>
+
+				<!-- Address -->
+				<!--       <div class="form-group">
         <label for="address">Address</label><span class="text-danger">*</span>
         <textarea class="form-control" id="address" rows="2" placeholder="Enter your Address"></textarea>
       </div> -->
-  
 
- 
-  <div class="button-wrapper">
-		  <button type="submit" class="btn btn-primary" id="registersubmit">Register</button>
+
+
+				<div class="button-wrapper">
+					<button type="submit" class="btn btn-primary" id="registersubmit">Register</button>
+				</div>
+
+
+
+				<div class="text-center mt-3 mb-2">
+
+					<label>
+						If you already have an account,
+						<a href="#" id="showLoginCardBtn">click here to login</a>.
+					</label>
+
+				</div>
+
+
+			</div>
 		</div>
 
 
 
-<div class="text-center mt-3 mb-2">
-
-	     <label>
-	         If you already have an account,
-	         <a href="#" id="showLoginCardBtn">click here to login</a>.
-	     </label>
-
-</div>
-  
-      
-    </div>
-  </div>
-  
-  
-
-<div class="card login-card mx-auto mt-5" style="max-width: 400px; background-color: rgba(44, 84, 103, 0.1); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid #ffffff40; " >
-    <div class="card-body ">
-      <h4 class="text-center mb-4" style="color: #004865;"><strong>Death Certificate Download</strong></h4>
-<hr>
-      <!-- Phone -->
-      <div class="form-group">
-        <label for="phone">Mobile No</label>
-        <span class="text-danger">*</span>
-	        <input type="text"
-			id="phoneNumber" class="form-control"
-			placeholder="Enter Registered Mobile number"
-			oninput="validatePhoneNumber(this)">
-      </div>
-  
-
- 
-  <div class="button-wrapper">
-		  <button type="submit" class="btn btn-primary" id="submitBtn">Login</button>
-	  </div>
-
-
-<div class="text-center mt-3 mb-2">
-	     <label>
-	         If you don't have an account,
-	         <a href="#" id="showRegisterCardBtn">click here to Register</a>.
-	     </label>
-	 </div>
-
-    </div>
-  </div>
-
-</main>
-
-
-
-<!-- OTP Modal -->
-
-<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="" onsubmit="return verifyOtp(1); "> <!--1 mentioned for existing user login  -->
-	            <div class="modal-header">
-	                <h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP
-	                    Login</h6>
-	                <button type="button" class="close" data-bs-dismiss="modal"
-	                    aria-label="Close"
-	                    style="color: black; border: white; background-color: white;">
-	                    <span aria-hidden="true">&times;</span>
-	                </button>
-	            </div>
-	            <div class="modal-body">
-	                <div class="row ">
-	                    <div class="mb-3" style="text-align: center;">
-	                        <img src="https://gccservices.in/gcc/files/c_d/otp.png"
-	                            width="50%" alt="Mobileotp">
-	                    </div>
-	                </div>
-	
-	                <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" id="otperror"></p>
-	                    </div>
-	                </div>
-	                <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>
-	                <div class="mb-3 text-center">
-	                    <div id="resend-containers">
-	                        <p class="mb-0">Didn't receive OTP?</p>
-	                        <p class="mb-0 text-info" id="resendlink"></p>
-	                    </div>
-	                </div>
-	
-	
-	            </div>
-	            <div class="modal-footer">
-	                <button type="button" class="btn btn-secondary"
-	                    data-bs-dismiss="modal">Close</button>
-	                <button type="submit" class="btn btn-primary" id="but">Verify
-	                    OTP</button>
-	            </div>
-	        </form>
-	    </div>
+		<div class="card login-card mx-auto mt-5"
+			style="max-width: 400px; background-color: rgba(44, 84, 103, 0.1); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid #ffffff40; ">
+			<div class="card-body ">
+				<h4 class="text-center mb-4" style="color: #004865;"><strong>Death Certificate Download</strong></h4>
+				<hr>
+				<!-- Phone -->
+				<div class="form-group">
+					<label for="phone">Mobile No</label>
+					<span class="text-danger">*</span>
+					<input type="text" id="phoneNumber" class="form-control"
+						placeholder="Enter Registered Mobile number" oninput="validatePhoneNumber(this)">
+				</div>
+
+
+
+				<div class="button-wrapper">
+					<button type="submit" class="btn btn-primary" id="submitBtn">Login</button>
+				</div>
+
+
+				<div class="text-center mt-3 mb-2">
+					<label>
+						If you don't have an account,
+						<a href="#" id="showRegisterCardBtn">click here to Register</a>.
+					</label>
+				</div>
+
+			</div>
+		</div>
+
+	</main>
+
+
+
+	<!-- OTP Modal -->
+
+	<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="" onsubmit="return verifyOtp(1); "> <!--1 mentioned for existing user login  -->
+					<div class="modal-header">
+						<h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP
+							Login</h6>
+						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
+							style="color: black; border: white; background-color: white;">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<div class="row ">
+							<div class="mb-3" style="text-align: center;">
+								<img src="https://gccservices.in/gcc/files/c_d/otp.png" width="50%" alt="Mobileotp">
+							</div>
+						</div>
+
+						<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" id="otperror"></p>
+							</div>
+						</div>
+						<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>
+						<div class="mb-3 text-center">
+							<div id="resend-containers">
+								<p class="mb-0">Didn't receive OTP?</p>
+								<p class="mb-0 text-info" id="resendlink"></p>
+							</div>
+						</div>
+
+
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+						<button type="submit" class="btn btn-primary" id="but">Verify
+							OTP</button>
+					</div>
+				</form>
+			</div>
+		</div>
 	</div>
-</div>
 
 
 
-<!-- jQuery (Only load it once) -->
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+	<!-- jQuery (Only load it once) -->
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<!-- Popper.js (Required for Bootstrap 4) -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+
+	<!-- Bootstrap JS -->
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+
+	<!-- SweetAlert JS (optional if you plan to use it) -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+	<!-- <script th:src="@{/script/loginpage.js}"></script> -->
+
 
-<!-- Popper.js (Required for Bootstrap 4) -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+	<script>
+
+
+		document.addEventListener("DOMContentLoaded", function () {
+			const registerCard = document.querySelector(".register-card");
+			const loginCard = document.querySelector(".login-card");
+
+			function clearRegisterForm() {
+				document.getElementById("name").value = "";
+				document.getElementById("phone").value = "";
+				//document.getElementById("address").value = "";
+			}
+
+			function clearLoginForm() {
+				document.getElementById("phoneNumber").value = "";
+			}
+
+			document.getElementById("showRegisterCardBtn").addEventListener("click", function (e) {
+				e.preventDefault();
+				clearLoginForm();
+				loginCard.style.display = "none";
+				registerCard.style.display = "block";
+			});
+
+			document.getElementById("showLoginCardBtn").addEventListener("click", function (e) {
+				e.preventDefault();
+				clearRegisterForm();
+				registerCard.style.display = "none";
+				loginCard.style.display = "block";
+			});
+		});
+
+
+
+		$(document).ready(function () {
+			// Show Login Card when "Login" is clicked from Register Card
+			$('#showLoginCardBtn').on('click', function (e) {
+				e.preventDefault();
+				$('.register-card').hide();
+				$('.login-card').show();
+			});
+
+			// Show Register Card when "Register" is clicked from Login Card
+			$('#showRegisterCardBtn').on('click', function (e) {
+				e.preventDefault();
+				$('.login-card').hide();
+				$('.register-card').show();
+			});
+
+
+			// When OTP modal is closed
+			$('#otpForm').on('hidden.bs.modal', function () {
+				// Clear all OTP input fields
+				$('.otp-input').val('');
+
+				// Clear OTP error message
+				$('#otperror').text('');
+
+				// Restart the countdown
+				startCountdown();
+			});
+
+		});
+
+
+
+		function validatePhoneNumber(input) {
+			// Remove non-numeric characters
+			let value = input.value.replace(/[^0-9]/g, '');
+
+			// Prevent input if first digit is 0
+			if (value.length === 1 && value[0] === '0') {
+				value = '';
+			}
+
+			// Enforce Indian mobile format: starts with 6-9 and has exactly 10 digits
+			if (value.length > 10) {
+				value = value.slice(0, 10);
+			}
+
+			// Update input value
+			input.value = value;
+
+			// Optional: check for invalid numbers starting with digits other than 6-9
+			if (value.length === 10 && !/^[6-9]\d{9}$/.test(value)) {
+				Swal.fire({
+					title: "Invalid Mobile Number",
+					text: "Please enter a valid 10-digit Indian mobile number starting with 6-9.",
+					icon: "error",
+					confirmButtonText: "OK",
+					allowOutsideClick: false
+				});
+				input.value = "";
+			}
+		}
+
+
+		$('#registersubmit').click(function (event) {
+			event.preventDefault();
+
+			const name = $('#name').val().trim();
+			const mobileNumber = $('#phone').val().trim();
+			//const address = $('#address').val().trim();
+
+			if (!name) {
+				Swal.fire({ icon: 'warning', title: 'Missing Name', text: 'Please enter your name.' });
+				return;
+			}
+
+			if (!mobileNumber || mobileNumber.length !== 10) {
+				Swal.fire({ title: "Invalid Mobile Number", text: "Please enter a valid 10-digit mobile number.", icon: "error" });
+				return;
+			}
+
+
+
+			// Step 1: Check if user already exists
+			$.ajax({
+				type: "POST",
+				url: '/crs/api/checkUser',
+				data: { mobile: mobileNumber },
+				success: function (response) {
+					if (response.exists) {
+						Swal.fire({
+							title: "Already Registered",
+							text: "This mobile number is already registered. Please login.",
+							icon: "info"
+						});
+					} else {
+						// Step 2: Send OTP
+						sendOtp(mobileNumber);
+
+						// Step 3: Wait for user to manually click Verify inside OTP modal,
+						// and if successful, call verifyOtp with a callback
+						$('#but').off('click').on('click', function () {
+							verifyOtp(2, function () { // 2 is mentioned for new user registration 
+								// Step 4: Save new user only after OTP success
+								$.ajax({
+									url: '/crs/api/saveNewUser',
+									type: 'POST',
+									data: {
+										user_name: name,
+
+										user_mobile: mobileNumber
+									},
+									success: function () {
+										Swal.fire({
+											icon: 'success',
+											title: 'Registration Successful',
+											//text: 'Redirecting...'
+										}).then(() => {
+											$('#name').val('');
+											$('#phone').val('');
+											// $('#address').val('');
+											window.location.href = "/crs/death";
+										});
+									},
+									error: function (xhr) {
+										let message = 'An error occurred.';
+										if (xhr.responseJSON && xhr.responseJSON.message) {
+											message = xhr.responseJSON.message;
+										}
+										Swal.fire({ icon: 'error', title: 'Failed', text: message });
+									}
+								});
+							});
+						});
+					}
+				},
+				error: function () {
+					Swal.fire({
+						title: "Server Error",
+						text: "Unable to check user status.",
+						icon: "error"
+					});
+				}
+			});
+		});
+
+
+
+
+		$('#submitBtn').click(function (event) {
+			event.preventDefault();
+
+			let mobileNumber = $('#phoneNumber').val().trim();
+
+			if (!mobileNumber || mobileNumber.length !== 10) {
+				Swal.fire({
+					title: "Invalid Mobile Number",
+					text: "Please enter a valid 10-digit mobile number.",
+					icon: "error",
+					confirmButtonText: "OK",
+					allowOutsideClick: false
+				});
+				return;
+			}
+
+			// Step 1: Check if user exists
+			$.ajax({
+				type: "POST",
+				url: '/crs/api/checkUser',
+				data: { mobile: mobileNumber },
+				success: function (response) {
+					if (response.exists) {
+
+						// Step 2: Send OTP to registered user
+						sendOtp(mobileNumber);
+
+						// Step 3: Bind OTP verify for login
+						$('#but').off('click').on('click', function () {
+							verifyOtp(1, function () {
+
+
+								// Step 4: Redirect to birth & death page ONLY after OTP success
+								window.location.href = "/crs/death";
+							});
+						});
+
+					} else {
+						// Not registered
+						Swal.fire({
+							title: "User Not Found",
+							text: "This mobile number is not registered. Please register to continue.",
+							icon: "warning",
+							confirmButtonText: "OK",
+							allowOutsideClick: false
+						}).then(() => {
+							window.location.reload(); // Optionally show registration card instead
+						});
+					}
+				},
+				error: function () {
+					Swal.fire({
+						title: "Server Error",
+						text: "Unable to check user status. Please try again later.",
+						icon: "error",
+						confirmButtonText: "OK"
+					});
+				}
+			});
+		});
+
+
+
+		function sendOtp(mobileNumber) {
+			Swal.fire({
+				title: 'Processing OTP...',
+				text: 'Please wait while we send the OTP.',
+				allowOutsideClick: false,
+				didOpen: () => {
+					Swal.showLoading();
+				}
+			});
+
+			let minDisplayTime = 5000;
+			let startTime = new Date().getTime();
+
+			$.ajax({
+				type: "GET",
+				url: '/crs/api/sendOTP',
+				data: { 'mobile': mobileNumber },
+				dataType: 'json',
+				success: function (response) {
+					let elapsedTime = new Date().getTime() - startTime;
+					let delay = Math.max(0, minDisplayTime - elapsedTime);
+
+					setTimeout(function () {
+						Swal.close();
+						//console.log("OTP sent response:", response);
+
+						$('#mobilenotxt').html(mobileNumber);
+						$('#otpForm').modal({
+							backdrop: 'static',
+							keyboard: false
+						}).modal('show');
+
+						startCountdown();
+					}, delay);
+				},
+				error: function () {
+					Swal.fire({
+						title: "Server Error",
+						text: "There was an issue sending your OTP. Please try again later.",
+						icon: "error",
+						confirmButtonText: "OK"
+					});
+				}
+			});
+		}
 
-<!-- Bootstrap JS -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
-
-<!-- SweetAlert JS (optional if you plan to use it) -->
-<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-
-<!-- <script th:src="@{/script/loginpage.js}"></script> -->
 
 
-<script>
 
 
-document.addEventListener("DOMContentLoaded", function () {
-    const registerCard = document.querySelector(".register-card");
-    const loginCard = document.querySelector(".login-card");
-
-    function clearRegisterForm() {
-        document.getElementById("name").value = "";
-        document.getElementById("phone").value = "";
-        //document.getElementById("address").value = "";
-    }
-
-    function clearLoginForm() {
-        document.getElementById("phoneNumber").value = "";
-    }
-
-    document.getElementById("showRegisterCardBtn").addEventListener("click", function (e) {
-        e.preventDefault();
-        clearLoginForm();
-        loginCard.style.display = "none";
-        registerCard.style.display = "block";
-    });
-
-    document.getElementById("showLoginCardBtn").addEventListener("click", function (e) {
-        e.preventDefault();
-        clearRegisterForm();
-        registerCard.style.display = "none";
-        loginCard.style.display = "block";
-    });
-});
-
-
-
-$(document).ready(function () {
-  // Show Login Card when "Login" is clicked from Register Card
-  $('#showLoginCardBtn').on('click', function (e) {
-    e.preventDefault();
-    $('.register-card').hide();
-    $('.login-card').show();
-  });
-
-  // Show Register Card when "Register" is clicked from Login Card
-  $('#showRegisterCardBtn').on('click', function (e) {
-    e.preventDefault();
-    $('.login-card').hide();
-    $('.register-card').show();
-  });
-  
-  
-	// When OTP modal is closed
-	$('#otpForm').on('hidden.bs.modal', function () {
-	    // Clear all OTP input fields
-	    $('.otp-input').val('');
-
-	    // Clear OTP error message
-	    $('#otperror').text('');
-
-	    // Restart the countdown
-	    startCountdown();
-	});
-  
-});
-
-
- 
- function validatePhoneNumber(input) {
-	    // Remove non-numeric characters
-	    let value = input.value.replace(/[^0-9]/g, '');
-	    
-	    // Prevent input if first digit is 0
-	    if (value.length === 1 && value[0] === '0') {
-	        value = '';
-	    }
-
-	    // Enforce Indian mobile format: starts with 6-9 and has exactly 10 digits
-	    if (value.length > 10) {
-	        value = value.slice(0, 10);
-	    }
-
-	    // Update input value
-	    input.value = value;
-
-	    // Optional: check for invalid numbers starting with digits other than 6-9
-	    if (value.length === 10 && !/^[6-9]\d{9}$/.test(value)) {
-	        Swal.fire({
-	            title: "Invalid Mobile Number",
-	            text: "Please enter a valid 10-digit Indian mobile number starting with 6-9.",
-	            icon: "error",
-	            confirmButtonText: "OK",
-	            allowOutsideClick: false
-	        });
-	        input.value = "";
-	    }
-	}
-
-
- 	$('#registersubmit').click(function (event) {
- 	    event.preventDefault();
-
- 	    const name = $('#name').val().trim();
- 	    const mobileNumber = $('#phone').val().trim();
- 	    //const address = $('#address').val().trim();
-
- 	    if (!name) {
- 	        Swal.fire({ icon: 'warning', title: 'Missing Name', text: 'Please enter your name.' });
- 	        return;
- 	    }
-
- 	    if (!mobileNumber || mobileNumber.length !== 10) {
- 	        Swal.fire({ title: "Invalid Mobile Number", text: "Please enter a valid 10-digit mobile number.", icon: "error" });
- 	        return;
- 	    }
- 	    
-
-
- 	    // Step 1: Check if user already exists
- 	    $.ajax({
- 	        type: "POST",
- 	        url: '/crs/api/checkUser',
- 	        data: { mobile: mobileNumber },
- 	        success: function (response) {
- 	            if (response.exists) {
- 	                Swal.fire({
- 	                    title: "Already Registered",
- 	                    text: "This mobile number is already registered. Please login.",
- 	                    icon: "info"
- 	                });
- 	            } else {
- 	                // Step 2: Send OTP
- 	                sendOtp(mobileNumber);
-
- 	                // Step 3: Wait for user to manually click Verify inside OTP modal,
- 	                // and if successful, call verifyOtp with a callback
- 	                $('#but').off('click').on('click', function () {
- 	                    verifyOtp(2,function () { // 2 is mentioned for new user registration 
- 	                        // Step 4: Save new user only after OTP success
- 	                        $.ajax({
- 	                            url: '/crs/api/saveNewUser',
- 	                            type: 'POST',
- 	                            data: {
- 	                                user_name: name,
- 	                                
- 	                                user_mobile: mobileNumber
- 	                            },
- 	                            success: function () {
- 	                                Swal.fire({
- 	                                    icon: 'success',
- 	                                    title: 'Registration Successful',
- 	                                    //text: 'Redirecting...'
- 	                                }).then(() => {
- 	                                    $('#name').val('');
- 	                                    $('#phone').val('');
- 	                                   // $('#address').val('');
- 	                                    window.location.href = "/crs/loginpage";
- 	                                });
- 	                            },
- 	                            error: function (xhr) {
- 	                                let message = 'An error occurred.';
- 	                                if (xhr.responseJSON && xhr.responseJSON.message) {
- 	                                    message = xhr.responseJSON.message;
- 	                                }
- 	                                Swal.fire({ icon: 'error', title: 'Failed', text: message });
- 	                            }
- 	                        });
- 	                    });
- 	                });
- 	            }
- 	        },
- 	        error: function () {
- 	            Swal.fire({
- 	                title: "Server Error",
- 	                text: "Unable to check user status.",
- 	                icon: "error"
- 	            });
- 	        }
- 	    });
- 	});
- 
- 
-
-	
-	$('#submitBtn').click(function (event) {
-	    event.preventDefault();
-
-	    let mobileNumber = $('#phoneNumber').val().trim();
-
-	    if (!mobileNumber || mobileNumber.length !== 10) {
-	        Swal.fire({
-	            title: "Invalid Mobile Number",
-	            text: "Please enter a valid 10-digit mobile number.",
-	            icon: "error",
-	            confirmButtonText: "OK",
-	            allowOutsideClick: false
-	        });
-	        return;
-	    }
-
-	    // Step 1: Check if user exists
-	    $.ajax({
-	        type: "POST",
-	        url: '/crs/api/checkUser',
-	        data: { mobile: mobileNumber },
-	        success: function (response) {
-	            if (response.exists) {
-	            	
-	                // Step 2: Send OTP to registered user
-	                sendOtp(mobileNumber);
-
-	                // Step 3: Bind OTP verify for login
-	                $('#but').off('click').on('click', function () {
-	                    verifyOtp(1, function () {
-	                    	
-	                    	
-	                        // Step 4: Redirect to birth & death page ONLY after OTP success
-	                        window.location.href = "/crs/death";
-	                    });
-	                });
-
-	            } else {
-	                // Not registered
-	                Swal.fire({
-	                    title: "User Not Found",
-	                    text: "This mobile number is not registered. Please register to continue.",
-	                    icon: "warning",
-	                    confirmButtonText: "OK",
-	                    allowOutsideClick: false
-	                }).then(() => {
-	                    window.location.reload(); // Optionally show registration card instead
-	                });
-	            }
-	        },
-	        error: function () {
-	            Swal.fire({
-	                title: "Server Error",
-	                text: "Unable to check user status. Please try again later.",
-	                icon: "error",
-	                confirmButtonText: "OK"
-	            });
-	        }
-	    });
-	});
-
-	
-
-	 function sendOtp(mobileNumber) {
-	    Swal.fire({
-	        title: 'Processing OTP...',
-	        text: 'Please wait while we send the OTP.',
-	        allowOutsideClick: false,
-	        didOpen: () => {
-	            Swal.showLoading();
-	        }
-	    });
-
-	    let minDisplayTime = 5000;
-	    let startTime = new Date().getTime();
-
-	    $.ajax({
-	        type: "GET",
-	        url: '/crs/api/sendOTP',
-	        data: { 'mobile': mobileNumber },
-	        dataType: 'json',
-	        success: function (response) {
-	            let elapsedTime = new Date().getTime() - startTime;
-	            let delay = Math.max(0, minDisplayTime - elapsedTime);
-
-	            setTimeout(function () {
-	                Swal.close();
-	                //console.log("OTP sent response:", response);
-
-	                $('#mobilenotxt').html(mobileNumber);
-	                $('#otpForm').modal({
-	                    backdrop: 'static',
-	                    keyboard: false
-	                }).modal('show');
-
-	                startCountdown();
-	            }, delay);
-	        },
-	        error: function () {
-	            Swal.fire({
-	                title: "Server Error",
-	                text: "There was an issue sending your OTP. Please try again later.",
-	                icon: "error",
-	                confirmButtonText: "OK"
-	            });
-	        }
-	    });
-	} 
-	 
-	 
-	 
-	 
-		
 		function verifyOtp(flag, onSuccessCallback) {
 			//alert("inside line 849")
-			
-	        Swal.fire({
-	            title: 'Verifying OTP...',
-	            text: 'Please wait while we verify the OTP.',
-	            allowOutsideClick: false,
-	            didOpen: () => {
-	                Swal.showLoading();
-	            }
-	        });
-
-	        const minDisplayTime = 2000;
-	        const startTime = new Date().getTime();
-
-	        let otpValue = '';
-	        $('.otp-input').each(function () {
-	            otpValue += $(this).val();
-	        });
-
-	        const mobileNumber = $('#mobilenotxt').text().trim();
-
-	        $.ajax({
-	            type: "GET",
-	            url: '/crs/api/verifyOTP',
-	            data: {'otp': otpValue, 'mobNo': mobileNumber, 'flag': flag},
-	            dataType: 'json',
-	            success: function (response) {
-	            	
-	                //console.log("response...",response);
-	                if (response.userName) {
-	                    localStorage.setItem("userName", response.userName);
-	                }
-	                const elapsedTime = new Date().getTime() - startTime;
-	                const delay = Math.max(0, minDisplayTime - elapsedTime);
-
-	                setTimeout(function () {
-	                    Swal.close();
-	                    if (response.status === "Success") {
-	                    	//alert("inside line 890 " + response.userName);
-	                        //console.log("Welcome, " , response.userName);
-	                        Swal.fire({
-	                            title: "OTP Verified!",
-	                            text: "Your OTP has been successfully verified.",
-	                            icon: "success",
-	                            confirmButtonText: "OK",
-	                            allowOutsideClick: false
-	                        }).then(() => {
-	                            $('#otpForm').modal('hide');
-	                            //$('#sendOtpButton').hide();
-	                            $('#phoneNumber').prop('disabled', true);
-	                            $('#verifiedOTP').prop('disabled', false).css('display', 'block');
-	                            if (typeof onSuccessCallback === 'function') {
-	                                onSuccessCallback();  // ✅ Call the registration save logic here
-	                            }
-
-	                            /* if(flag==1){
-                                 window.location.href = "/birthanddeath";
-                             }else{
-                                 window.location.href = "/loginpage";
-                             } */
-	                            //saveDetails();
-	                           
-	                        });
-	                    } else {
-	                        Swal.fire({
-	                            title: "OTP Incorrect",
-	                            text: "The OTP you entered is incorrect. Please try again.",
-	                            icon: "error",
-	                            confirmButtonText: "Retry"
-	                        });
-	                    }
-	                }, delay);
-	            },
-	            error: function () {
-	                Swal.fire({
-	                    title: "Verification Failed",
-	                    text: "There was an issue verifying your OTP. Please try again later.",
-	                    icon: "error"
-	                });
-	            }
-	        });
-
-	        return false;
-	    } 
-	
-	
-
-	// Declare the timeout variable globally
-	let resendTimeout = null;
-
-	// Countdown and resend handler
-	function startCountdown() {
-	    // Clear any existing countdown interval
-	    if (resendTimeout) {
-	        clearInterval(resendTimeout);
-	        resendTimeout = null;
-	    }
-
-	    let timeleft = 60;
-	    $('#resendlink').html('Please wait.. <span id="countdown">60</span>s');
-
-	    resendTimeout = setInterval(function () {
-	        timeleft--;
-	        $('#countdown').text(timeleft);
-
-	        if (timeleft <= 0) {
-	            clearInterval(resendTimeout);
-	            resendTimeout = null; // Clear reference
-	            $('#resendlink').html('<a href="#" id="resend-link" class="text-info" onclick="return resendOTP();">Resend OTP</a>');
-	        }
-	    }, 1000);
-	}
-
-	
-	
-	
-	// Resend OTP logic
-	function resendOTP() {
-	    const mobileNumber = $('#mobilenotxt').text().trim();
-	    if (!mobileNumber || mobileNumber.length !== 10) return false;
-
-	    $.ajax({
-	        type: "GET",
-	        url: '/crs/api/sendOTP',
-	        data: { 'mobile': mobileNumber },
-	        dataType: 'json',
-	        success: function (response) {
-	            Swal.fire({
-	                title: "OTP Resent",
-	                text: "A new OTP has been sent to your mobile.",
-	                icon: "info",
-	                confirmButtonText: "OK",
-	                allowOutsideClick: false
-	            }).then(() => {
-	            	  // Clear all OTP input fields
-	                for (let i = 1; i <= 5; i++) {
-	                    $(`#otp${i}`).val('');
-	                }
-
-	                startCountdown();        // Start countdown again if needed
-	            });
-	        },
-	        error: function () {
-	            Swal.fire({
-	                title: "Error",
-	                text: "Could not resend OTP. Please try again.",
-	                icon: "error"
-	            });
-	        }
-	    });
-
-	    return false; // prevent default link behavior
-	}
-
-
-	 // For OTP input box
+
+			Swal.fire({
+				title: 'Verifying OTP...',
+				text: 'Please wait while we verify the OTP.',
+				allowOutsideClick: false,
+				didOpen: () => {
+					Swal.showLoading();
+				}
+			});
+
+			const minDisplayTime = 2000;
+			const startTime = new Date().getTime();
+
+			let otpValue = '';
+			$('.otp-input').each(function () {
+				otpValue += $(this).val();
+			});
+
+			const mobileNumber = $('#mobilenotxt').text().trim();
+
+			$.ajax({
+				type: "GET",
+				url: '/crs/api/verifyOTP',
+				data: { 'otp': otpValue, 'mobNo': mobileNumber, 'flag': flag },
+				dataType: 'json',
+				success: function (response) {
+
+					//console.log("response...",response);
+					if (response.userName) {
+						localStorage.setItem("userName", response.userName);
+					}
+					const elapsedTime = new Date().getTime() - startTime;
+					const delay = Math.max(0, minDisplayTime - elapsedTime);
+
+					setTimeout(function () {
+						Swal.close();
+						if (response.status === "Success") {
+							//alert("inside line 890 " + response.userName);
+							//console.log("Welcome, " , response.userName);
+							Swal.fire({
+								title: "OTP Verified!",
+								text: "Your OTP has been successfully verified.",
+								icon: "success",
+								confirmButtonText: "OK",
+								allowOutsideClick: false
+							}).then(() => {
+								$('#otpForm').modal('hide');
+								//$('#sendOtpButton').hide();
+								$('#phoneNumber').prop('disabled', true);
+								$('#verifiedOTP').prop('disabled', false).css('display', 'block');
+								if (typeof onSuccessCallback === 'function') {
+									onSuccessCallback();  // ✅ Call the registration save logic here
+								}
+
+								/* if(flag==1){
+								 window.location.href = "/birthanddeath";
+							 }else{
+								 window.location.href = "/loginpage";
+							 } */
+								//saveDetails();
+
+							});
+						} else {
+							Swal.fire({
+								title: "OTP Incorrect",
+								text: "The OTP you entered is incorrect. Please try again.",
+								icon: "error",
+								confirmButtonText: "Retry"
+							});
+						}
+					}, delay);
+				},
+				error: function () {
+					Swal.fire({
+						title: "Verification Failed",
+						text: "There was an issue verifying your OTP. Please try again later.",
+						icon: "error"
+					});
+				}
+			});
+
+			return false;
+		}
+
+
+
+		// Declare the timeout variable globally
+		let resendTimeout = null;
+
+		// Countdown and resend handler
+		function startCountdown() {
+			// Clear any existing countdown interval
+			if (resendTimeout) {
+				clearInterval(resendTimeout);
+				resendTimeout = null;
+			}
+
+			let timeleft = 60;
+			$('#resendlink').html('Please wait.. <span id="countdown">60</span>s');
+
+			resendTimeout = setInterval(function () {
+				timeleft--;
+				$('#countdown').text(timeleft);
+
+				if (timeleft <= 0) {
+					clearInterval(resendTimeout);
+					resendTimeout = null; // Clear reference
+					$('#resendlink').html('<a href="#" id="resend-link" class="text-info" onclick="return resendOTP();">Resend OTP</a>');
+				}
+			}, 1000);
+		}
+
+
+
+
+		// Resend OTP logic
+		function resendOTP() {
+			const mobileNumber = $('#mobilenotxt').text().trim();
+			if (!mobileNumber || mobileNumber.length !== 10) return false;
+
+			$.ajax({
+				type: "GET",
+				url: '/crs/api/sendOTP',
+				data: { 'mobile': mobileNumber },
+				dataType: 'json',
+				success: function (response) {
+					Swal.fire({
+						title: "OTP Resent",
+						text: "A new OTP has been sent to your mobile.",
+						icon: "info",
+						confirmButtonText: "OK",
+						allowOutsideClick: false
+					}).then(() => {
+						// Clear all OTP input fields
+						for (let i = 1; i <= 5; i++) {
+							$(`#otp${i}`).val('');
+						}
+
+						startCountdown();        // Start countdown again if needed
+					});
+				},
+				error: function () {
+					Swal.fire({
+						title: "Error",
+						text: "Could not resend OTP. Please try again.",
+						icon: "error"
+					});
+				}
+			});
+
+			return false; // prevent default link behavior
+		}
+
+
+		// For OTP input box
 		$('.otp-input').on('keyup', function (e) {
 			var $this = $(this);
 			if ($this.val().length === 1) {
@@ -831,10 +833,11 @@ $(document).ready(function () {
 			}
 		});
 
-	 
 
-</script>
+
+	</script>
 
 
 </body>
+
 </html>
\ No newline at end of file