diff --git a/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.java b/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.java
index a7e3a6de..d439d73d 100644
--- a/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.java
+++ b/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.java
@@ -90,11 +90,11 @@ public class WhatsappController {
                         StandardCharsets.UTF_8.toString());
 			
 			
-			if("COMPLETED".equalsIgnoreCase(returnedAction)) {
-       		 
-				urlString="https://sendapiv1.pinbot.ai/pinwa/sendMessage?apikey=5c995535-6244-11f0-98fc-02c8a5e042bd&from=919445061913&to="+mobile+"&templateid=3304034&type=template&placeholders="+placeholders;
+	        if("COMPLETED".equalsIgnoreCase(returnedAction)) {
+	      		 
+				urlString="https://sendapiv1.pinbot.ai/pinwa/sendMessage?apikey=5c995535-6244-11f0-98fc-02c8a5e042bd&from=919445061913&to="+mobile+"&templateid=3310383&type=template&placeholders="+placeholders;
 				
-        	}
+	    	}
         	
         	if("UNATTENDED".equalsIgnoreCase(returnedAction)) {
         	       	        		
diff --git a/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/controller/Maincontroller.java b/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/controller/Maincontroller.java
index 2a5e6e03..31664053 100644
--- a/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/controller/Maincontroller.java
+++ b/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/controller/Maincontroller.java
@@ -27,4 +27,16 @@ public class Maincontroller {
 		return "modules/roadwar/regform";
 	}
 	
+	
+	@GetMapping("/updateform")
+	public String updateForm(Model model) {
+		String LoginUserId = LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId", LoginUserId);
+
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+
+		return "modules/roadwar/updateform";
+	}
+	
 }
diff --git a/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/controller/RegisterApiController.java b/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/controller/RegisterApiController.java
index 9754a3a3..9c224199 100644
--- a/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/controller/RegisterApiController.java
+++ b/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/controller/RegisterApiController.java
@@ -6,7 +6,11 @@ import java.util.List;
 import java.util.Map;
 
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
@@ -61,4 +65,129 @@ public class RegisterApiController {
 
 	    return response;
 	}
+	
+	
+	
+	@GetMapping("/getRoadNamesByWard")
+	public Map<String, Object> getRoadNamesByWard(@RequestParam String ward) {
+		Map<String, Object> response = new HashMap<>();
+		List<Map<String, Object>> roads = registerService.getRoadNamesByWard(ward);
+		if (!roads.isEmpty()) {
+			response.put("status", true);
+			response.put("message", "Road names fetched successfully");
+			response.put("data", roads);
+		} else {
+			response.put("status", false);
+			response.put("message", "No roads found for ward: " + ward);
+			response.put("data", Collections.emptyList());
+		}
+		return response;
+	}
+	
+	
+	@GetMapping("/getRoadType")
+	public Map<String, Object> getRoadType() {
+		Map<String, Object> response = new HashMap<>();
+		List<Map<String, Object>> roadTypes = registerService.getRoadType();
+		if (!roadTypes.isEmpty()) {
+			response.put("status", true);
+			response.put("message", "Road types fetched successfully");
+			response.put("data", roadTypes);
+		} else {
+			response.put("status", false);
+			response.put("message", "No road types found");
+			response.put("data", Collections.emptyList());
+		}
+		return response;
+	}
+	
+	
+	
+	@GetMapping("/getMonthList")
+	public Map<String, Object> getMonthList() {
+		Map<String, Object> response = new HashMap<>();
+		List<Map<String, Object>> months = registerService.getMonthList();
+		if (!months.isEmpty()) {
+			response.put("status", true);
+			response.put("message", "Month list fetched successfully");
+			response.put("data", months);
+		} else {
+			response.put("status", false);
+			response.put("message", "No months found");
+			response.put("data", Collections.emptyList());
+		}
+		return response;
+	}
+	
+	
+	
+	@GetMapping("/getYearList")
+	public Map<String, Object> getYearList() {
+		Map<String, Object> response = new HashMap<>();
+		List<Map<String, Object>> years = registerService.getYearList();
+		if (!years.isEmpty()) {
+			response.put("status", true);
+			response.put("message", "Year list fetched successfully");
+			response.put("data", years);
+		} else {
+			response.put("status", false);
+			response.put("message", "No Year found");
+			response.put("data", Collections.emptyList());
+		}
+		return response;
+	}
+	
+	
+	@PostMapping("/saveRoadWarDetails")
+	public Map<String, Object> saveRoadWarDetails(@RequestBody Map<String, Object> payload) {
+		return registerService.saveRoadWarDetails(payload);
+	}
+	
+	
+	@GetMapping("/getAllRoadWarDetails")
+	public ResponseEntity<?> getAllRoadWarDetails(
+	        @RequestParam(required = false) String zone,
+	        @RequestParam(required = false) String ward,
+	        @RequestParam(required = false) String roadName) {
+
+	    try {
+
+	        List<Map<String, Object>> response =
+	        		registerService.getAllRoadWarDetails(zone, ward, roadName);
+
+	        return ResponseEntity.ok(response);
+
+	    } catch (Exception e) {
+
+	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+	                .body(Collections.singletonMap("error",
+	                        "Failed to fetch data : " + e.getMessage()));
+	    }
+	}
+	
+	
+	
+	@GetMapping("/getRoadWarDetailsById")
+	public ResponseEntity<?> getRoadWarDetailsById(
+	        @RequestParam String refid) {
+
+	    try {
+
+	        Map<String, Object> response =
+	                registerService.getRoadWarDetailsById(refid);
+
+	        return ResponseEntity.ok(response);
+
+	    } catch (Exception e) {
+
+	        Map<String, Object> error = new HashMap<>();
+	        error.put("status", false);
+	        error.put("message", "Failed to fetch data : " + e.getMessage());
+
+	        return ResponseEntity
+	                .status(HttpStatus.INTERNAL_SERVER_ERROR)
+	                .body(error);
+	    }
+	}
+	
 }
diff --git a/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/service/RegisterService.java b/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/service/RegisterService.java
index 061d02be..de2705f5 100644
--- a/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/service/RegisterService.java
+++ b/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/roadwar/service/RegisterService.java
@@ -1,6 +1,13 @@
 package in.gov.chennaicorporation.gccoffice.roadwar.service;
 
+import java.net.URI;
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
+import java.time.LocalDate;
+import java.time.format.DateTimeFormatter;
+import java.util.ArrayList;
 import java.util.Collections;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
@@ -10,7 +17,14 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Qualifier;
 import org.springframework.core.env.Environment;
 import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.PreparedStatementCreator;
+import org.springframework.jdbc.support.GeneratedKeyHolder;
+import org.springframework.jdbc.support.KeyHolder;
 import org.springframework.stereotype.Service;
+import org.springframework.web.client.RestTemplate;
+
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
 
 @Service
 public class RegisterService {
@@ -21,6 +35,8 @@ public class RegisterService {
 	@Autowired
 	private  Environment environment;
 	
+	 
+	
 	@Autowired
 	public void setDataSource(@Qualifier("mysqlRoadWarDataSource") DataSource dataSource) {
 		this.jdbcTemplate = new JdbcTemplate(dataSource);
@@ -52,7 +68,251 @@ public class RegisterService {
 			 return Collections.emptyList();
 		}
 	}
+	
+	
+	public List<Map<String, Object>> getRoadNamesByWard(String ward) {
+		try {
+			String encodedWard = URLEncoder.encode("'" + ward + "'", StandardCharsets.UTF_8.toString());
+			String url = "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/EDPMobile2025/FeatureServer/0/query"
+					+ "?where=new_ward%3D" + encodedWard
+					+ "&outFields=road_id%2Croad_name"
+					+ "&returnGeometry=false"
+					+ "&f=geojson";
+
+			RestTemplate restTemplate = new RestTemplate();
+			String responseBody = restTemplate.getForObject(URI.create(url), String.class);
+
+			ObjectMapper objectMapper = new ObjectMapper();
+			JsonNode root = objectMapper.readTree(responseBody);
+			JsonNode features = root.path("features");
+
+			List<Map<String, Object>> roadList = new ArrayList<>();
+			if (features.isArray()) {
+				for (JsonNode feature : features) {
+					JsonNode props = feature.path("properties");
+					Map<String, Object> roadInfo = new HashMap<>();
+					roadInfo.put("road_id",   props.path("road_id").asText());
+					roadInfo.put("road_name", props.path("road_name").asText());
+					roadList.add(roadInfo);
+				}
+			}
+			return roadList;
+
+		} catch (Exception e) {
+			e.printStackTrace();
+			return Collections.emptyList();
+		}
+	}
+	
+	
+	
+	public List<Map<String, Object>> getRoadType() {
+		String sql = "Select id,road_type as roadType from road_type_master where is_active = 1 and is_delete = 0";
+		try {
+			return jdbcTemplate.queryForList(sql);
+		} catch (Exception e) {
+			e.printStackTrace();
+			return Collections.emptyList();
+		}
+	}
+	
+	
+	public List<Map<String, Object>> getMonthList() {
+		String sql = "SELECT id, month_name FROM month_master WHERE is_active = 1 AND is_delete = 0 ORDER BY id";
+		try {
+			return jdbcTemplate.queryForList(sql);
+		} catch (Exception e) {
+			e.printStackTrace();
+			return Collections.emptyList();
+		}
+	}
+	
+	
+	public List<Map<String, Object>> getYearList() {
+		String sql = "SELECT id, year_name FROM year_master WHERE is_active = 1 AND is_delete = 0 ORDER BY id DESC";
+		try {
+			return jdbcTemplate.queryForList(sql);
+		} catch (Exception e) {
+			e.printStackTrace();
+			return Collections.emptyList();
+		}
+	}
+	
+	
+	public Map<String, Object> saveRoadWarDetails(Map<String, Object> payload) {
+		Map<String, Object> result = new HashMap<>();
+		try {
+
+			String insertRoad = "INSERT INTO road_details_master "
+					+ "(zone, ward, road_name, road_type,  road_length, road_avg_width, road_area, "
+					+ " footpath_material, footpath_length, footpath_width, footpath_from_location, footpath_to_location, "
+					+ " is_swd, swd_from, swd_to, swd_length, swd_size, "
+					+ " is_scp, scp_count, is_manhole, manhole_count, manhole_location, "
+					+ " is_cpipe, cpipe_count, is_rwh, rwh_count, "
+					+ " sewer_length, sewer_size, "
+					+ " is_electric_poles, ep_count, is_hml, culvert_bridge_count, details, "
+					+ " is_busshelter, busshelter_count, is_centermedian, erp_asset_code, cby,road_id) "
+					+ "VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)";
+
+			KeyHolder keyHolder = new GeneratedKeyHolder();
+
+			jdbcTemplate.update((PreparedStatementCreator) con -> {
+				var ps = con.prepareStatement(insertRoad, new String[] { "id" });
+				ps.setObject(1, payload.get("zone"));
+				ps.setObject(2, payload.get("ward"));
+				ps.setObject(3, payload.get("road_name"));
+				ps.setObject(4, payload.get("road_type"));
+//				ps.setObject(5, payload.get("highway_ans"));
+				ps.setObject(5, payload.get("road_length"));
+				ps.setObject(6, payload.get("road_avg_width"));
+				ps.setObject(7, payload.get("road_area"));
+				ps.setObject(8, payload.get("footpath_material"));
+				ps.setObject(9, payload.get("footpath_length"));
+				ps.setObject(10, payload.get("footpath_width"));
+				ps.setObject(11, payload.get("footpath_from_location"));
+				ps.setObject(12, payload.get("footpath_to_location"));
+				ps.setObject(13, payload.get("is_swd"));
+				ps.setObject(14, payload.get("swd_from"));
+				ps.setObject(15, payload.get("swd_to"));
+				ps.setObject(16, payload.get("swd_length"));
+				ps.setObject(17, payload.get("swd_size"));
+				ps.setObject(18, payload.get("is_scp"));
+				ps.setObject(19, payload.get("scp_count"));
+				ps.setObject(20, payload.get("is_manhole"));
+				ps.setObject(21, payload.get("manhole_count"));
+				ps.setObject(22, payload.get("manhole_location"));
+				ps.setObject(23, payload.get("is_cpipe"));
+				ps.setObject(24, payload.get("cpipe_count"));
+				ps.setObject(25, payload.get("is_rwh"));
+				ps.setObject(26, payload.get("rwh_count"));
+				ps.setObject(27, payload.get("sewer_length"));
+				ps.setObject(28, payload.get("sewer_size"));
+				ps.setObject(29, payload.get("is_electric_poles"));
+				ps.setObject(30, payload.get("ep_count"));
+				ps.setObject(31, payload.get("is_hml"));
+				ps.setObject(32, payload.get("culvert_bridge_count"));
+				ps.setObject(33, payload.get("details"));
+				ps.setObject(34, payload.get("is_busshelter"));
+				ps.setObject(35, payload.get("busshelter_count"));
+				ps.setObject(36, payload.get("is_centermedian"));
+				ps.setObject(37, payload.get("erp_asset_code"));
+				ps.setObject(38, payload.get("cby"));
+				ps.setObject(39, payload.get("road_id"));
+				return ps;
+			}, keyHolder);
+
+			long generatedId = keyHolder.getKey().longValue();
+			String datePrefix = LocalDate.now().format(DateTimeFormatter.ofPattern("ddMMYYYY"));
+			String refId = datePrefix + generatedId;
+
+			jdbcTemplate.update(
+					"UPDATE road_details_master SET ref_id = ? WHERE id = ?",
+					refId, generatedId);
+
+			List<Map<String, Object>> relayingList = (List<Map<String, Object>>) payload.get("relaying_details");
+
+			if (relayingList != null && !relayingList.isEmpty()) {
+				String insertRelay = "INSERT INTO relaying_details "
+						+ "(road_ref_id, relay_month, relay_year, cr_value, road_type, remarks, cby) "
+						+ "VALUES (?,?,?,?,?,?,?)";
+
+				for (Map<String, Object> relay : relayingList) {
+					jdbcTemplate.update(insertRelay,
+							refId,
+							relay.get("relay_month"),
+							relay.get("relay_year"),
+							relay.get("cr_value"),
+							relay.get("road_type"),
+							relay.get("remarks"),
+							payload.get("cby"));
+				}
+			}
+
+			result.put("status", true);
+			result.put("message", "Road war details saved successfully");
+			result.put("ref_id", refId);
+
+		} catch (Exception e) {
+			e.printStackTrace();
+			result.put("status", false);
+			result.put("message", "Failed to save road war details: " + e.getMessage());
+		}
+		return result;
+	}
+	
+	
+	
+	public List<Map<String, Object>> getAllRoadWarDetails(
+	        String zone,
+	        String ward,
+	        String roadName) {
+
+	    StringBuilder sql = new StringBuilder(" SELECT rdm.*,rtm.road_type as road_type_name  FROM road_details_master rdm " +
+	    										" LEFT JOIN road_type_master rtm ON rtm.id= rdm.road_type " +
+	    										" WHERE 1=1 ");
+
+	    List<Object> params = new ArrayList<>();
+
+	    if (zone != null && !zone.isEmpty()) {
+	        sql.append(" AND rdm.zone = ?");
+	        params.add(zone);
+	    }
+
+	    if (ward != null && !ward.isEmpty()) {
+	        sql.append(" AND rdm.ward = ?");
+	        params.add(ward);
+	    }
+
+	    if (roadName != null && !roadName.isEmpty()) {
+	        sql.append(" AND rdm.road_name = ?");
+	        params.add(roadName);
+	    }
+	    
+	    sql.append(" AND rdm.is_active=1 AND rdm.is_delete=0 ");
+
+	    sql.append(" ORDER BY rdm.id DESC");
+
+	    return jdbcTemplate.queryForList(sql.toString(), params.toArray());
+	}
 
 	
+	public Map<String, Object> getRoadWarDetailsById(String refid) {
+
+	    Map<String, Object> result = new HashMap<>();
+
+	    try {
+
+	        String sql =
+	                "SELECT rdm.*, rtm.road_type As road_type_name " +
+	                "FROM road_details_master rdm " +
+	                "LEFT JOIN road_type_master rtm ON rtm.id = rdm.road_type " +
+	                "WHERE rdm.ref_id = ? AND rdm.is_active=1 AND rdm.is_delete=0  ";
+
+	        Map<String, Object> road =
+	                jdbcTemplate.queryForMap(sql, refid);
+
+	        result.putAll(road);
+
+	        List<Map<String, Object>> relayingDetails =
+	                jdbcTemplate.queryForList(
+	                        " SELECT rd.*,mm.month_name,ym.year_name "
+	                        + " FROM relaying_details rd "
+	                        + " LEFT JOIN month_master mm on mm.id = rd.relay_month "
+	                        + " LEFT JOIN year_master ym on ym.id = rd.relay_year "
+	                        + " WHERE rd.road_ref_id = ? AND rd.is_active=1 AND rd.is_delete=0  ",
+	                        refid);
+
+	        result.put("relayingDetails", relayingDetails);
+	        result.put("status", true);
+
+	    } catch (Exception e) {
+
+	        result.put("status", false);
+	        result.put("message", e.getMessage());
+
+	    }
+
+	    return result;
+	}
 	
 }
diff --git a/gcc_officer_portal/src/main/resources/templates/modules/callcenterqaqc/agentqaqccalls.html b/gcc_officer_portal/src/main/resources/templates/modules/callcenterqaqc/agentqaqccalls.html
index 8497b358..f77d8e70 100644
--- a/gcc_officer_portal/src/main/resources/templates/modules/callcenterqaqc/agentqaqccalls.html
+++ b/gcc_officer_portal/src/main/resources/templates/modules/callcenterqaqc/agentqaqccalls.html
@@ -781,9 +781,9 @@
             	    	$('.submitid').prop('disabled', false).text('Submit');
             	    	// Trigger WhatsApp message functions based on action
            	               	              	    	
-/*                 	    if (action === "UNATTENDED" || action === "COMPLETED" ) {               	    	
+                 	    if (action === "UNATTENDED" || action === "COMPLETED" ) {               	    	
                 	    	checkforUnattendedwhatsappmsg(complaintNumber,action,complaintTypeName,cellnumber,name);               	    	
-                	    } */           	    	
+                	    }           	    	
                 	    
             	    }            	   
             	    else{
diff --git a/gcc_officer_portal/src/main/resources/templates/modules/roadwar/regform.html b/gcc_officer_portal/src/main/resources/templates/modules/roadwar/regform.html
index 548bba67..d1320add 100644
--- a/gcc_officer_portal/src/main/resources/templates/modules/roadwar/regform.html
+++ b/gcc_officer_portal/src/main/resources/templates/modules/roadwar/regform.html
@@ -4,7 +4,7 @@
 
 <head th:replace="~{fragments/modules/base/head :: head}"></head>
 <style>
-	
+
 </style>
 
 <body>
@@ -45,45 +45,484 @@
 							</div>
 						</div>
 					</div>
-					
+
 					<div class="row mt-3">
 						<div class="col-12">
-							<div class="card">							
+							<div class="card">
 								<div class="card-body">
-								 <h5 class="card-title">Road Details</h5>
-								 <div class="card-block">
-								 	
-								 	<div class="row">
-								 		
-								 		<div class="col-md-3">
-											<label for="zone">Zone<span class="text-danger">*</span></label>
-											<input type="text" class="form-control" id="zone" name="zone" required="required">
+									<h5 class="card-title">Road Details</h5>
+									<span th:text="${LoginUserId}" id="userIdSpan" style="display: none;"></span>
+									<div class="card-block">
+
+										<div class="row">
+
+
+
+
+											<div class="col-md-4 mb-3">
+												<label for="zoneDropdown" class="form-label"> Select
+													Zone <span class="text-danger">*</span>
+												</label> <select id="zoneDropdown" class="form-control">
+													<option value="">Select Zone</option>
+													<!-- Zones will be loaded dynamically -->
+												</select>
+
+											</div>
+
+											<div class="col-md-4 mb-3">
+
+												<label for="wardDropdown" class="form-label"> Select
+													Ward <span class="text-danger">*</span>
+												</label> <select id="wardDropdown" class="form-control">
+													<option value="">Select Ward</option>
+													<!-- Wards will be loaded based on selected zone -->
+												</select>
+											</div>
+
+
+											<div class="col-md-4 mb-3">
+												<label for="roadDropdown" class="form-label">
+													Name of the Road <span class="text-danger">*</span>
+												</label>
+
+												<select id="roadDropdown" class="form-control">
+													<option value="">Select Road</option>
+												</select>
+											</div>
+
+
+
+											<div class="col-md-4 mb-3">
+												<label for="roadTypeDropdown" class="form-label">
+													Road Type <span class="text-danger">*</span>
+												</label>
+
+												<select id="roadTypeDropdown" class="form-control">
+													<option value="">Select Road Type</option>
+												</select>
+											</div>
+
+											<div class="col-md-4 mb-3">
+												<label for="length" class="form-label">Length (m)<span
+														class="text-danger">*</span></label>
+												<input type="text" class="form-control decimal-only" id="length"
+													name="length" required="required" placeholder="e.g. 200.5">
+											</div>
+
+
+
+											<div class="col-md-4 mb-3">
+												<label for="averageWidth" class="form-label">Average Width (m)<span
+														class="text-danger">*</span></label>
+												<input type="text" class="form-control decimal-only" id="averageWidth"
+													name="averageWidth" required="required" placeholder="e.g. 6.5">
+											</div>
+
+
+
+
+											<div class="col-md-4 mb-3">
+												<label for="area" class="form-label">Area (m)<span
+														class="text-danger">*</span></label>
+												<input type="text" class="form-control decimal-only" id="area"
+													name="area" required="required" placeholder="e.g. 1200.0">
+											</div>
+
+
+											<div class="col-md-4 mb-3">
+												<label for="footpathDropdown" class="form-label">
+													Foot Path Material <span class="text-danger">*</span>
+												</label>
+
+												<select id="footpathDropdown" class="form-control">
+													<option value="">Select Material</option>
+													<option value="Tar">Tar</option>
+													<option value="Concrete">Concrete</option>
+												</select>
+											</div>
+
+											<div class="col-md-4 mb-3">
+												<label for="fplength" class="form-label">Length Of Foot Path (m) <span
+														class="text-danger">*</span></label>
+												<input type="text" class="form-control decimal-only" id="fplength"
+													name="fplength" required="required" placeholder="e.g. 180.0">
+											</div>
+
+
+
+											<div class="col-md-4 mb-3">
+												<label for="fpwidth" class="form-label">Average Width (m) <span
+														class="text-danger">*</span></label>
+												<input type="text" class="form-control decimal-only" id="fpwidth"
+													name="fpwidth" required="required" placeholder="e.g. 1.5">
+											</div>
+
+
+											<div class="col-md-8 mb-3">
+												<label class="form-label">
+													Foot Path Location <span class="text-danger">*</span>
+												</label>
+
+												<div class="row">
+													<div class="col-md-6">
+														<label for="footPathFrom">From</label>
+														<input type="text" class="form-control" id="footPathFrom"
+															name="footPathFrom">
+													</div>
+
+													<div class="col-md-6">
+														<label for="footPathTo">To</label>
+														<input type="text" class="form-control" id="footPathTo"
+															name="footPathTo">
+													</div>
+												</div>
+											</div>
+
+
 										</div>
-										
-										<div class="col-md-3">
-											<label for="ward">Ward<span class="text-danger">*</span></label>
-											<input type="text" class="form-control" id="ward" name="ward" required="required">
+
+									</div>
+
+									<hr>
+
+
+									<h5 class="card-title">SWD Details</h5>
+									<div class="card-block">
+
+										<div class="row">
+											<div class="col-md-6 mb-3">
+												<label class="form-label">
+													SWD available or Not ?
+													<span class="text-danger">*</span>
+												</label>
+
+												<div>
+													<label class="mr-3">
+														<input type="radio" name="swdAvailable" value="yes">
+														Yes
+													</label>
+
+													<label>
+														<input type="radio" name="swdAvailable" value="no">
+														No
+													</label>
+												</div>
+											</div>
+
+											<div id="swdSection" class="col-md-12" style="display:none;">
+												<div class="row">
+
+													<div class="col-md-3 mb-3">
+														<label for="">From <span class="text-danger">*</span></label>
+														<input type="text" class="form-control" id="fromswd">
+													</div>
+
+													<div class="col-md-3 mb-3">
+														<label for="">To <span class="text-danger">*</span></label>
+														<input type="text" class="form-control" id="toswd">
+													</div>
+
+													<div class="col-md-3 mb-3">
+														<label for="swdlength">length (m)<span class="text-danger">*</span></label>
+														<input type="text" class="form-control" id="swdlength">
+													</div>
+
+													<div class="col-md-3 mb-3">
+														<label for="">Size (inches)<span class="text-danger">*</span></label>
+														<input type="text" class="form-control" id="size">
+													</div>
+
+												</div>
+											</div>
+
+
+											<!-- ═══ SWD-dependent fields — shown only when SWD = yes ═══ -->
+											<div id="swdDependentFields" class="col-md-12" style="display:none;">
+												<div class="row">
+
+													<div class="col-md-6 mb-4">
+														<label class="form-label">
+															Slit catch pit Available or Not?
+															<span class="text-danger">*</span>
+														</label>
+														<div>
+															<label class="mr-3">
+																<input type="radio" name="scpAvailable" value="yes"> Yes
+															</label>
+															<label>
+																<input type="radio" name="scpAvailable" value="no"> No
+															</label>
+														</div>
+														<div id="scpSection" style="display:none; margin-top:15px;">
+															<label for="scpCount">Count</label>
+															<input type="text" class="form-control" id="scpCount">
+														</div>
+													</div>
+
+													<div class="col-md-6 mb-4">
+														<label class="form-label">
+															Man hole Available or Not? <span class="text-danger">*</span>
+														</label>
+														<div>
+															<label class="mr-3">
+																<input type="radio" name="mhAvailable" value="yes"> Yes
+															</label>
+															<label>
+																<input type="radio" name="mhAvailable" value="no"> No
+															</label>
+														</div>
+														<div id="mhSection" style="display:none; margin-top:15px;">
+															<div class="row">
+																<div class="col-md-6 mb-3">
+																	<label for="mhCount">Count</label>
+																	<input type="text" class="form-control" id="mhCount"
+																		name="mhCount">
+																</div>
+																<div class="col-md-6 mb-3">
+																	<label for="mhType">Man Hole Location
+																		<span class="text-danger">*</span>
+																	</label>
+																	<select class="form-control" id="mhType"
+																		name="mhType">
+																		<option value="">Select Location</option>
+																		<option value="both side">Both Side</option>
+																		<option value="single side">Single Side</option>
+																	</select>
+																</div>
+															</div>
+														</div>
+													</div>
+
+													<div class="col-md-6 mb-4">
+														<label class="form-label">
+															ChutPipe Available or Not? <span class="text-danger">*</span>
+														</label>
+														<div>
+															<label class="mr-3">
+																<input type="radio" name="cpAvailable" value="yes"> Yes
+															</label>
+															<label>
+																<input type="radio" name="cpAvailable" value="no"> No
+															</label>
+														</div>
+														<div id="cpSection" style="display:none; margin-top:15px;">
+															<label for="cpCount">Count</label>
+															<input type="text" class="form-control" id="cpCount">
+														</div>
+													</div>
+
+													<div class="col-md-6 mb-4">
+														<label class="form-label">
+															Rain Water Harvesting Available or Not?
+															<span class="text-danger">*</span>
+														</label>
+														<div>
+															<label class="mr-3">
+																<input type="radio" name="rwAvailable" value="yes"> Yes
+															</label>
+															<label>
+																<input type="radio" name="rwAvailable" value="no"> No
+															</label>
+														</div>
+														<div id="rwSection" style="display:none; margin-top:15px;">
+															<label for="rwCount">Count</label>
+															<input type="text" class="form-control" id="rwCount">
+														</div>
+													</div>
+												</div>
+											</div>
+
+
+												
+													<div class="col-md-6 mb-4">
+														<label class="form-label">
+															Electricity Poles Available or Not?
+														</label>
+														<div>
+															<label class="mr-3">
+																<input type="radio" name="epAvailable" value="yes"> Yes
+															</label>
+															<label>
+																<input type="radio" name="epAvailable" value="no"> No
+															</label>
+														</div>
+														<div id="epSection" style="display:none; margin-top:15px;">
+															<label for="epCount">Count</label>
+															<input type="text" class="form-control" id="epCount">
+														</div>
+													</div>
+
+													<div class="col-md-6 mb-4">
+														<label class="form-label">
+															High Mass Light Available or Not?
+														</label>
+														<div>
+															<label class="mr-3">
+																<input type="radio" name="hmlAvailable" value="yes"> Yes
+															</label>
+															<label>
+																<input type="radio" name="hmlAvailable" value="no"> No
+															</label>
+														</div>
+													</div>
+
+													<div class="col-md-6 mb-4">
+														<label class="form-label">
+															Bus Shelter Available or Not?
+														</label>
+														<div>
+															<label class="mr-3">
+																<input type="radio" name="bsAvailable" value="yes"> Yes
+															</label>
+															<label>
+																<input type="radio" name="bsAvailable" value="no"> No
+															</label>
+														</div>
+														<div id="bsSection" style="display:none; margin-top:15px;">
+															<label for="bsCount">Count</label>
+															<input type="text" class="form-control" id="bsCount">
+														</div>
+													</div>
+
+													<div class="col-md-6 mb-4">
+														<label class="form-label">
+															Center Median Available or Not?
+														</label>
+														<div>
+															<label class="mr-3">
+																<input type="radio" name="cmAvailable" value="yes"> Yes
+															</label>
+															<label>
+																<input type="radio" name="cmAvailable" value="no"> No
+															</label>
+														</div>
+														<!-- <div id="cmSection" style="display:none; margin-top:15px;">
+															<label for="cmCount">Count</label>
+															<input type="text" class="form-control" id="cmCount">
+														</div> -->
+													</div><!-- </div> -->
+												
+											
+											<!-- ═══ end SWD-dependent fields ═══ -->
+
+											<div class="col-md-6 mb-3">
+												<label for="sewerLength" class="form-label">Length Of Sewer (m)
+													<span class="text-danger">*</span></label>
+												<input type="text" class="form-control decimal-only" id="sewerLength"
+													name="sewerLength" required="required" placeholder="e.g. 190.5">
+											</div>
+
+											<div class="col-md-6 mb-3">
+												<label for="sewerSize" class="form-label">Size of sewer (inches)
+													<span class="text-danger">*</span></label>
+												<input type="text" class="form-control decimal-only" id="sewerSize"
+													name="sewerSize" required="required" placeholder="e.g. 300.0">
+											</div>
+
+											<div class="col-md-6 mb-3">
+												<label for="noofcb" class="form-label">No of Culverts &amp;
+													Bridges</label>
+												<input type="text" class="form-control" id="noofcb" name="noofcb">
+											</div>
+
+											<div class="col-md-12 mb-3">
+												<label for="detailsofcb" class="form-label">Details of Culverts &amp;
+													Bridges With date of Construction</label>
+												<textarea class="form-control" id="detailsofcb"
+													name="detailsofcb"></textarea>
+											</div>
+
 										</div>
-										
-										<div class="col-md-6">
-											<label for="roadname">Name of the Road<span class="text-danger">*</span></label>
-											<input type="text" class="form-control" id="roadname" name="roadname" required="required">
+
+									</div>
+
+
+
+									<!-- Relaying Details -->
+
+									<hr>
+									<br>
+									<h5 class="card-title">Relaying Details</h5>
+									<div id="roadRelayingContainer">
+
+										<div class="card-block relaying-block mb-3">
+											<div class="row">
+
+												<div class="col-md-3 mb-3">
+													<label class="form-label">
+														Month of Relaying <span class="text-danger">*</span>
+													</label>
+													<select class="form-control monthDropdown" name="monthId[]">
+														<option value="">Select Month</option>
+													</select>
+												</div>
+
+												<div class="col-md-3 mb-3">
+													<label class="form-label">
+														Year of Relaying <span class="text-danger">*</span>
+													</label>
+													<select class="form-control yearDropdown" name="yearId[]">
+														<option value="">Select Year</option>
+													</select>
+												</div>
+
+												<div class="col-md-3 mb-3">
+													<label class="form-label">
+														CR Value
+														<span class="text-danger">*</span>
+													</label>
+													<input type="text" class="form-control" name="crValue[]">
+												</div>
+
+												<div class="col-md-3 mb-3">
+													<label class="form-label">
+														Type/Subgrade box of the road
+														<span class="text-danger">*</span>
+													</label>
+													<input type="text" class="form-control" name="roadType[]">
+												</div>
+
+
+												<div class="col-md-12 mb-3">
+													<label class="form-label">
+														Remarks <span class="text-danger">*</span>
+													</label>
+													<textarea class="form-control" name="remarks[]"></textarea>
+												</div>
+												
+												<div class="col-md-12 mb-3 d-flex justify-content-end">
+												    <button type="button" class="btn btn-danger removeBlock d-none">
+												        Remove
+												    </button>
+												</div>
+
+											</div>
 										</div>
-								 	
-								 	</div>
-								 	
-								 </div>
-								 
-								
+
+									</div>
+
+									<div class="text-end ">
+										<button type="button" id="addMoreBtn" class="btn btn-primary">
+											+ Add More
+										</button>
+									</div>
+
+									<div class="text-center mt-4 mb-3">
+										<button type="button" class="btn btn-success mr-2" id="saveBtn"> Save
+											Details</button>
+
+										<button type="reset" class="btn btn-secondary" id="resetBtn"> Reset</button>
+									</div>
+
+								</div>
 							</div>
 						</div>
-					</div>
-								
-								
 
+
+
+					</div>
 				</div>
-			</div>
-			
+
 			</div>
 
 
@@ -102,8 +541,8 @@
 		</div>
 
 	</div>
-	
-	
+
+
 
 
 	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
@@ -113,7 +552,721 @@
 
 
 	<script type="text/javascript">
-		
+
+		var createdBy = /*[[${LoginUserId}]]*/'';
+
+		$(document).ready(function () {
+
+			loadRoadTypes();
+
+
+			$.ajax({
+				url: '/gcc/api/roadwarweb/register/getzones',
+				type: 'GET',
+				success: function (response) {
+
+					$('#zoneDropdown').empty()
+						.append('<option value="">Select Zone</option>');
+
+					if (response.status) {
+
+						$.each(response.data, function (index, zone) {
+
+							$('#zoneDropdown').append(
+								'<option value="' + zone.zone_name + '">' +
+								zone.zone_name +
+								'</option>'
+							);
+
+						});
+
+					}
+				},
+				error: function () {
+					alert('Failed to load zones.');
+				}
+			});
+
+
+			loadMonths();
+			loadYears();
+
+			$("#addMoreBtn").click(function () {
+
+				let block = $(".relaying-block:first").clone();
+
+				block.find("input").val("");
+				block.find("textarea").val("");
+				block.find("select").val("");
+
+				block.find(".removeBlock").removeClass("d-none");
+
+				$("#roadRelayingContainer").append(block);
+
+				loadMonths(block.find(".monthDropdown"));
+				loadYears(block.find(".yearDropdown"));
+			});
+
+			$(document).on("click", ".removeBlock", function () {
+				$(this).closest(".relaying-block").remove();
+			});
+
+		});
+
+
+		$('#zoneDropdown').change(function () {
+
+			let zone = $(this).val();
+
+			$('#wardDropdown').empty()
+				.append('<option value="">Select Ward</option>');
+
+			if (zone) {
+
+				$.ajax({
+					url: '/gcc/api/roadwarweb/register/getwardbyzone',
+					type: 'GET',
+					data: {
+						zone: zone
+					},
+					success: function (response) {
+
+						if (response.status) {
+
+							$.each(response.data, function (index, ward) {
+
+								$('#wardDropdown').append(
+									'<option value="' + ward.ward_name + '">' +
+									ward.ward_name +
+									'</option>'
+								);
+
+							});
+
+						}
+
+					},
+					error: function () {
+						alert('Failed to load wards.');
+					}
+				});
+
+			}
+
+
+
+
+		});
+
+
+		$('#wardDropdown').change(function () {
+
+			let ward = $(this).val();
+
+			$('#roadDropdown').empty()
+				.append('<option value="">Select Road</option>');
+
+			if (ward) {
+
+				$.ajax({
+					url: '/gcc/api/roadwarweb/register/getRoadNamesByWard',
+					type: 'GET',
+					data: {
+						ward: ward
+					},
+					beforeSend: function () {
+						$("#pageLoader").show();
+					},
+					success: function (response) {
+
+						console.log("API Response:", response);
+
+						if (response.status && response.data.length > 0) {
+
+							$.each(response.data, function (index, road) {
+
+								console.log("Road:", road);
+
+								$('#roadDropdown').append(
+									$('<option>', {
+										value: road.road_id,
+										text:  road.road_name
+									}).attr('data-road-name', road.road_name)
+								);
+							});
+							
+							// Destroy existing Select2 if already initialized
+					        if ($('#roadDropdown').hasClass("select2-hidden-accessible")) {
+					            $('#roadDropdown').select2('destroy');
+					        }
+
+					        // Initialize Select2
+					        $('#roadDropdown').select2({
+					            placeholder: "Select Road",
+					            allowClear: true,
+					            width: '100%'
+					        });
+
+						} else {
+							console.log("No roads found");
+						}
+					},
+					error: function (xhr, status, error) {
+						console.log("Error:", error);
+						console.log(xhr.responseText);
+					},
+					complete: function () {
+						$("#pageLoader").hide();
+					}
+				});
+			}
+		});
+
+
+
+
+		function loadRoadTypes() {
+			$.ajax({
+				url: '/gcc/api/roadwarweb/register/getRoadType',
+				type: 'GET',
+				success: function (response) {
+
+					if (response.status) {
+
+						let dropdown = $("#roadTypeDropdown");
+
+						// Clear existing options except default
+						dropdown.empty();
+						dropdown.append('<option value="">Select Road Type</option>');
+
+						$.each(response.data, function (index, item) {
+							dropdown.append(
+								'<option value="' + item.id + '">' +
+								item.roadType +
+								'</option>'
+							);
+						});
+
+					} else {
+						alert(response.message);
+					}
+				},
+				error: function (xhr, status, error) {
+					console.error("Error fetching road types:", error);
+				}
+			});
+		}
+
+
+		function loadMonths(dropdown = $(".monthDropdown")) {
+
+			$.ajax({
+				url: "/gcc/api/roadwarweb/register/getMonthList",
+				type: "GET",
+				success: function (response) {
+
+					if (response.status) {
+
+						dropdown.each(function () {
+
+							let select = $(this);
+
+							select.empty()
+								.append('<option value="">Select Month</option>');
+
+							$.each(response.data, function (i, month) {
+
+								select.append(
+									`<option value="${month.id}">
+	                                ${month.month_name}
+	                             </option>`
+								);
+
+							});
+
+						});
+
+					}
+
+				}
+			});
+
+		}
+
+
+		function loadYears(dropdown = $(".yearDropdown")) {
+
+			$.ajax({
+				url: "/gcc/api/roadwarweb/register/getYearList",
+				type: "GET",
+				success: function (response) {
+
+					if (response.status) {
+
+						dropdown.each(function () {
+
+							let select = $(this);
+
+							select.empty()
+								.append('<option value="">Select Year</option>');
+
+							$.each(response.data, function (i, year) {
+
+								select.append(
+									`<option value="${year.id}">
+	                                ${year.year_name}
+	                             </option>`
+								);
+
+							});
+
+						});
+
+					}
+
+				}
+			});
+
+		}
+
+
+		$(document).on('change', 'input[name="swdAvailable"]', function () {
+
+			if ($(this).val() === 'yes') {
+				$('#swdSection').slideDown();
+				$('#swdDependentFields').slideDown();
+			} else {
+				$('#swdSection').slideUp();
+				$('#swdSection').find('input, select').val('');
+
+				
+				$('#swdDependentFields').slideUp();
+				$('#swdDependentFields').find('input[type="radio"]').prop('checked', false);
+				$('#swdDependentFields').find('input[type="text"], select').val('');
+				$('#scpSection, #mhSection, #cpSection, #rwSection').hide();
+			}
+		});
+
+
+		$(document).on('change', 'input[name="scpAvailable"]', function () {
+
+			if ($(this).val() === 'yes') {
+				$('#scpSection').slideDown();
+			} else {
+				$('#scpSection').slideUp();
+
+				// Optional: clear fields when hidden
+				$('#scpSection').find('input, select').val('');
+			}
+		});
+
+
+		$(document).on('change', 'input[name="mhAvailable"]', function () {
+
+			if ($(this).val() === 'yes') {
+				$('#mhSection').slideDown();
+			} else {
+				$('#mhSection').slideUp();
+
+				// Optional: clear fields when hidden
+				$('#mhSection').find('input, select').val('');
+			}
+		});
+
+
+		$(document).on('change', 'input[name="cpAvailable"]', function () {
+
+			if ($(this).val() === 'yes') {
+				$('#cpSection').slideDown();
+			} else {
+				$('#cpSection').slideUp();
+
+				// Optional: clear fields when hidden
+				$('#cpSection').find('input, select').val('');
+			}
+		});
+
+
+
+		$(document).on('change', 'input[name="rwAvailable"]', function () {
+
+			if ($(this).val() === 'yes') {
+				$('#rwSection').slideDown();
+			} else {
+				$('#rwSection').slideUp();
+
+				// Optional: clear fields when hidden
+				$('#rwSection').find('input, select').val('');
+			}
+		});
+
+
+		$(document).on('change', 'input[name="epAvailable"]', function () {
+
+			if ($(this).val() === 'yes') {
+				$('#epSection').slideDown();
+			} else {
+				$('#epSection').slideUp();
+
+				// Optional: clear fields when hidden
+				$('#epSection').find('input, select').val('');
+			}
+		});
+
+		$(document).on('change', 'input[name="bsAvailable"]', function () {
+
+			if ($(this).val() === 'yes') {
+				$('#bsSection').slideDown();
+			} else {
+				$('#bsSection').slideUp();
+
+				// Optional: clear fields when hidden
+				$('#bsSection').find('input, select').val('');
+			}
+		});
+
+
+
+		/* $(document).on('change', 'input[name="cmAvailable"]', function () {
+
+			if ($(this).val() === 'yes') {
+				$('#cmSection').slideDown();
+			} else {
+				$('#cmSection').slideUp();
+
+				// Optional: clear fields when hidden
+				$('#cmSection').find('input, select').val('');
+			}
+		}); */
+
+
+		$(document).on('change', 'input[name="hmlAvailable"]', function () {
+
+			if ($(this).val() === 'yes') {
+				$('#hmlSection').slideDown();
+			} else {
+				$('#hmlSection').slideUp();
+				$('#hmlSection').find('input, select').val('');
+			}
+		});
+
+
+		// ── Decimal-only enforcement for (m) and (inches) inputs ────────────────
+		$(document).on('keypress', '.decimal-only', function (e) {
+			let char = String.fromCharCode(e.which);
+			let val = $(this).val();
+			// Allow digits and a single decimal point
+			if (!/[0-9.]/.test(char)) { e.preventDefault(); return; }
+			if (char === '.' && val.indexOf('.') !== -1) { e.preventDefault(); }
+		});
+
+		// Paste guard: strip non-numeric characters
+		$(document).on('paste', '.decimal-only', function (e) {
+			setTimeout(() => {
+				let v = $(this).val().replace(/[^0-9.]/g, '');
+				// Keep only first decimal point
+				let parts = v.split('.');
+				if (parts.length > 2) v = parts[0] + '.' + parts.slice(1).join('');
+				$(this).val(v);
+			}, 0);
+		});
+
+
+
+		$("#saveBtn").click(function () {
+			
+			let userId = document.getElementById('userIdSpan').textContent;
+			
+			
+			let length = $("#length").val().trim();
+			let avgWidth = $("#averageWidth").val().trim();
+			let area = $("#area").val().trim();
+			let fpLen = $("#fplength").val().trim();
+			let fpWidth = $("#fpwidth").val().trim();
+			
+			let footpathDropdown =$("#footpathDropdown").val() ;
+			
+			let footpathfrom=$("#footPathFrom").val().trim()
+			let footpathto=$("#footPathTo").val().trim()
+			let swdVal = $('input[name="swdAvailable"]:checked').val();
+			
+			
+			let sewerLength=$("#sewerLength").val().trim();
+			let sewerSize=$("#sewerSize").val().trim();
+			
+			// Zone
+			if (!$("#zoneDropdown").val()) {
+			    Swal.fire("Missing Field", "Please select a Zone.", "warning");
+			    
+			    return;
+			}
+
+			// Ward
+			if (!$("#wardDropdown").val()) {
+			    Swal.fire("Missing Field", "Please select a Ward.", "warning");
+			    
+			    return;
+			}
+
+			// Road Name
+			if (!$("#roadDropdown").val()) {
+			    Swal.fire("Missing Field", "Please select a Road Name.", "warning");
+			    
+			    return;
+			}
+
+			// Road Type
+			if (!$("#roadTypeDropdown").val()) {
+			    Swal.fire("Missing Field", "Please select a Road Type.", "warning");
+			    
+			    return;
+			}
+
+			// Road Length
+			
+			 
+			
+			if (!length) {
+			    Swal.fire("Missing Field", "Please enter Road Length.", "warning");
+			    return;
+			}
+			
+
+			// Average Width
+			
+			
+			if (!avgWidth) {
+			    Swal.fire("Missing Field", "Please enter Average Width.", "warning");
+			    return;
+			}
+
+			// Area
+			
+			
+			if (!area) {
+			    Swal.fire("Missing Field", "Please enter Road Area.", "warning");
+			    return;
+			}
+
+			// Footpath Material
+			if (!footpathDropdown || footpathDropdown === "") {
+			    Swal.fire("Missing Field", "Please select Foot Path Material.", "warning");
+			    return;
+			}
+
+			// Footpath Length
+			
+			
+			if (!fpLen) {
+			    Swal.fire("Missing Field", "Please enter Foot Path Length.", "warning");
+			    return;
+			}
+
+			// Footpath Width
+			
+			
+			if (!fpWidth) {
+			    Swal.fire("Missing Field", "Please enter Foot Path Width.", "warning");			    
+			    return;
+			}
+
+			// Footpath From
+			if (!footpathfrom) {
+			    Swal.fire("Missing Field", "Please enter Foot Path From location.", "warning");
+			   
+			    return;
+			}
+
+			// Footpath To
+			if (!footpathto) {
+			    Swal.fire("Missing Field", "Please enter Foot Path To location.", "warning");
+			    return;
+			}
+
+			// SWD Available
+			
+			if (!swdVal) {
+			    Swal.fire("Missing Field", "Please select SWD Available or Not.", "warning");
+			    return;
+			}
+
+			
+			if (!sewerLength) {
+			    Swal.fire("Missing Field", "Please enter Sewer Length.", "warning");
+			    return;
+			}
+
+			// Sewer Size
+			if (!sewerSize) {
+			    Swal.fire("Missing Field", "Please enter Sewer Size.", "warning");
+			    return;
+			}
+			
+			
+			if (swdVal === "yes") {
+
+			    if (!$("#fromswd").val().trim()) {
+			        Swal.fire("Missing Field", "Please enter SWD From location.", "warning");
+			        return;
+			    }
+
+			    if (!$("#toswd").val().trim()) {
+			        Swal.fire("Missing Field", "Please enter SWD To location.", "warning");
+			        return;
+			    }
+
+			    if (!$("#swdlength").val().trim()) {
+			        Swal.fire("Missing Field", "Please enter SWD Length.", "warning");
+			        return;
+			    }
+
+			    if (!$("#size").val().trim()) {
+			        Swal.fire("Missing Field", "Please enter SWD Size.", "warning");
+			        return;
+			    }
+
+			    if (!$('input[name="scpAvailable"]:checked').val()) {
+			        Swal.fire("Missing Field", "Please select Slit Catch Pit Available or Not.", "warning");
+			        return;
+			    }
+			}
+			
+			
+
+			let relayingDetails = [];
+
+			$("#roadRelayingContainer .relaying-block").each(function () {
+
+				relayingDetails.push({
+					relay_month: $(this).find(".monthDropdown").val(),
+					relay_year: $(this).find(".yearDropdown").val(),
+					cr_value: $(this).find('input[name="crValue[]"]').val(),
+					road_type: $(this).find('input[name="roadType[]"]').val(),
+					remarks: $(this).find('textarea[name="remarks[]"]').val()
+				});
+
+			}); 
+			
+			console.log("road id>>>>>",$("#roadDropdown").val());
+
+			let payload = {
+
+				zone: $("#zoneDropdown").val(),
+				ward: $("#wardDropdown").val(),
+				/* road_name: $("#roadDropdown").val(), */
+				
+				road_id: $("#roadDropdown").val(),
+				
+    			road_name: $("#roadDropdown option:selected").data("road-name"),
+				road_type: $("#roadTypeDropdown").val(),
+				
+
+				road_length: $("#length").val(),
+				road_avg_width: $("#averageWidth").val(),
+				road_area: $("#area").val(),
+
+				footpath_material: $("#footpathDropdown").val(),
+				footpath_length: $("#fplength").val(),
+				footpath_width: $("#fpwidth").val(),
+				footpath_from_location: $("#footPathFrom").val(),
+				footpath_to_location: $("#footPathTo").val(),
+
+				is_swd: $('input[name="swdAvailable"]:checked').val() || "",
+				swd_from: $('input[name="swdAvailable"]:checked').val() === "yes" ? $("#fromswd").val() : null,
+				swd_to: $('input[name="swdAvailable"]:checked').val() === "yes" ? $("#toswd").val() : null,
+				swd_length: $('input[name="swdAvailable"]:checked').val() === "yes" ? $("#swdlength").val() : null,
+				swd_size: $('input[name="swdAvailable"]:checked').val() === "yes" ? $("#size").val() : null,
+
+				is_scp: $('input[name="scpAvailable"]:checked').val() || "",
+				scp_count: $('input[name="scpAvailable"]:checked').val() === "yes" ? $("#scpCount").val() : null,
+
+				is_manhole: $('input[name="mhAvailable"]:checked').val() || "",
+				manhole_count: $('input[name="mhAvailable"]:checked').val() === "yes" ? $("#mhCount").val() : null,
+				manhole_location: $('input[name="mhAvailable"]:checked').val() === "yes" ? $("#mhType").val() : null,
+
+				is_cpipe: $('input[name="cpAvailable"]:checked').val() || "",
+				cpipe_count: $('input[name="cpAvailable"]:checked').val() === "yes" ? $("#cpCount").val() : null,
+
+				is_rwh: $('input[name="rwAvailable"]:checked').val() || "",
+				rwh_count: $('input[name="rwAvailable"]:checked').val() === "yes" ? $("#rwCount").val() : null,
+
+				sewer_length: $("#sewerLength").val(),
+				sewer_size: $("#sewerSize").val(),
+
+				is_electric_poles: $('input[name="epAvailable"]:checked').val() || "",
+				ep_count: $('input[name="epAvailable"]:checked').val() === "yes" ? $("#epCount").val() : null,
+
+				is_hml: $('input[name="hmlAvailable"]:checked').val() || "",
+
+
+				culvert_bridge_count: $("#noofcb").val().trim()|| null,
+				details: $("#detailsofcb").val().trim()|| null,
+
+				is_busshelter: $('input[name="bsAvailable"]:checked').val() || "",
+				busshelter_count: $('input[name="bsAvailable"]:checked').val() === "yes" ? $("#bsCount").val() : null,
+
+				is_centermedian: $('input[name="cmAvailable"]:checked').val() || "",
+
+				erp_asset_code: "",
+				cby: userId,
+
+				relaying_details: relayingDetails
+			};
+
+			console.log(payload);
+
+			$.ajax({
+				url: "/gcc/api/roadwarweb/register/saveRoadWarDetails",
+				type: "POST",
+				contentType: "application/json",
+				data: JSON.stringify(payload),
+
+				beforeSend: function () {
+					$("#pageLoader").show();
+				},
+
+				success: function (response) {
+
+					$("#pageLoader").hide();
+
+					if (response.status) {
+
+						Swal.fire({
+							icon: "success",
+							title: "Success",
+							text: response.message
+						}).then(() => {
+							location.reload();
+						});
+
+					} else {
+
+						Swal.fire({
+							icon: "error",
+							title: "Error",
+							text: response.message
+						});
+
+					}
+
+				},
+
+				error: function () {
+
+					$("#pageLoader").hide();
+
+					Swal.fire({
+						icon: "error",
+						title: "Error",
+						text: "Failed to save details"
+					});
+
+				}
+			});
+
+		});
+
+
 	</script>
 
 </body>
diff --git a/gcc_officer_portal/src/main/resources/templates/modules/roadwar/updateform.html b/gcc_officer_portal/src/main/resources/templates/modules/roadwar/updateform.html
new file mode 100644
index 00000000..30fafa2a
--- /dev/null
+++ b/gcc_officer_portal/src/main/resources/templates/modules/roadwar/updateform.html
@@ -0,0 +1,1635 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.custom-width1 {
+	width: 30%; /* Adjust the width as needed */
+}
+#roadWarModal .modal-body {
+    max-height: 80vh;  /* Limit the height to 70% of the viewport */
+    overflow-y: auto;  /* Enable vertical scrolling */
+}
+</style>
+
+<body>
+
+
+<div class="wrapper">
+		<!-- header top menu Start -->
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+		
+		<div class="page-wrap">
+		
+		<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+		
+		
+		
+		<div class="main-content">
+				<div class="container-fluid">
+					<div class="page-header mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fa fa-list-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>Update Form</h5>
+										<span>Road War</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i class="ik ik-home"></i></a>
+										</li>
+										<li class="breadcrumb-item" aria-current="page">Road War</li>
+										<li class="breadcrumb-item active" aria-current="page">Update Form</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div class="card-header">
+									<span style="font-size: medium;font-weight: bold;">Reports Filters</span>
+								</div>
+								<div class="card-body">
+									<div class="row">
+									
+									<div class="col-md-4 mb-3">
+												<label for="zoneDropdown" class="form-label"> Select
+													Zone <span class="text-danger">*</span>
+												</label> <select id="zoneDropdown" class="form-control">
+													<option value="">Select Zone</option>
+													<!-- Zones will be loaded dynamically -->
+												</select>
+
+											</div>
+
+											<div class="col-md-4 mb-3">
+
+												<label for="wardDropdown" class="form-label"> Select
+													Ward <span class="text-danger">*</span>
+												</label> <select id="wardDropdown" class="form-control">
+													<option value="">Select Ward</option>
+													<!-- Wards will be loaded based on selected zone -->
+												</select>
+											</div>
+
+
+											<div class="col-md-4 mb-3">
+												<label for="roadDropdown" class="form-label">
+													Name of the Road <span class="text-danger">*</span>
+												</label>
+
+												<select id="roadDropdown" class="form-control">
+													<option value="">Select Road</option>
+												</select>
+											</div>
+				
+									
+										<div class="col-md-12 mb-2 d-flex justify-content-center">
+											<button type="submit" id="searchBtn" 
+												class="btn btn-primary mx-2">Search</button>
+
+											<button class="btn btn-danger mx-2" id="resetBtn" name="reset" type="button">Reset</button>
+
+										</div>
+									
+									
+								</div>
+							</div>
+						</div>
+					</div>
+			
+			         <div class="col-md-12">
+							<div class="card">
+							<div class="card-header">
+								<span style="font-size: medium;font-weight: bold;">Reports List</span>
+							</div>
+							<div class="card-body">
+								<div class="table-responsive" >
+
+									<table id="ReportDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+										<thead class="thead-dark">
+											<tr role="row">
+
+												<th class="text-center no-sort">S.No</th>
+												<th class="text-center">Zone</th>
+												<th class="text-center">Ward</th>
+												<th class="text-center custom-width1">Road Name</th>
+												<th class="text-center">Road Type</th>
+												<th class="text-center">Road Length(m)</th>
+												<th class="text-center">Road Average Width(m)</th>
+												<th class="text-center">Area(m)</th>
+												<th class="text-center">Foot Path Material</th>
+												<th class="text-center">Foot Path Length(m)</th>
+												<th class="text-center">Foot Path Width(m)</th>	
+												
+												<th class="text-center">Action</th>
+											</tr>
+										</thead>
+										<tbody>
+
+										</tbody>
+									</table>
+								</div>
+							</div>
+						 </div>
+						</div>
+			
+				</div>
+				</div>
+
+			</div>
+		
+		
+		
+		<div id="pageLoader"
+				style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				<div style="position: relative; top: 50%; transform: translateY(-50%);">
+					<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+						<span class="sr-only">Loading...</span>
+					</div>
+					<!-- Add the 'Please wait' text below the spinner -->
+					<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				</div>
+			</div>
+		
+		
+		<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		
+		</div>
+		
+	</div>
+
+<!-- modal body -->
+
+	<div class="modal fade" id="roadWarModal" tabindex="-1" role="dialog" aria-labelledby="roadWarModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+    <div class="modal-dialog modal-xl" role="document" style="max-width:95%;">
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <h5 class="modal-title">
+                    Road War Details
+                </h5>
+
+                <button type="button"
+                        class="close"
+                        data-dismiss="modal">
+                    <span>&times;</span>
+                </button>
+            </div>
+
+            <div class="modal-body">
+			<h5 class="modal-title">Road Details</h5>
+                <div class="row">
+
+                    <div class="col-md-3 mb-3">
+                        <label class="form-label">Zone<span class="text-danger">*</span></label>
+                        <input type="text"
+                               id="view_zone"
+                               class="form-control">
+                    </div>
+
+                    <div class="col-md-3 mb-3">
+                        <label class="form-label">Ward</label>
+                        <input type="text"
+                               id="view_ward"
+                               class="form-control">
+                    </div>
+
+                    <div class="col-md-6 mb-3">
+                        <label class="form-label">Road Name</label>
+                        <input type="text"
+                               id="view_road_name"
+                               class="form-control">
+                    </div>
+
+                    <div class="col-md-3 mb-3">
+                        <label class="form-label">Road Type</label>
+                        <input type="text"
+                               id="view_road_type"
+                               class="form-control">
+                    </div>
+
+                    <div class="col-md-3 mb-3">
+                        <label class="form-label">Road Length (m)</label>
+                        <input type="text"
+                               id="view_road_length"
+                               class="form-control">
+                    </div>
+
+                    <div class="col-md-3 mb-3">
+                        <label class="form-label">Average Width (m)</label>
+                        <input type="text"
+                               id="view_road_avg_width"
+                               class="form-control" >
+                    </div>
+
+                    <div class="col-md-3 mb-3">
+                        <label class="form-label">Area (m)</label>
+                        <input type="text"
+                               id="view_road_area"
+                               class="form-control" >
+                    </div>
+
+                    <div class="col-md-2 mb-3">
+                        <label class="form-label">Footpath Material</label>
+                        <!-- <input type="text"
+                               id="view_footpath_material"
+                               class="form-control" > -->
+                          <select id="view_footpath_material" class="form-control">
+								<option value="">Select Material</option>
+								<option value="Tar">Tar</option>
+								<option value="Concrete">Concrete</option>
+							</select>
+                    </div>
+
+                    <div class="col-md-2 mb-3">
+                        <label class="form-label">Footpath Length (m)</label>
+                        <input type="text"
+                               id="view_footpath_length"
+                               class="form-control" >
+                    </div>
+                    
+                    <div class="col-md-2 mb-3">
+						    <label for="view_fpwidth" class="form-label">
+						        Average Width (m)
+						    </label>
+						
+						    <input type="text"
+						           class="form-control"
+						           id="view_fpwidth" >
+						</div>
+						
+									<div class="col-md-6 mb-3">
+									
+									    <label class="form-label">
+									        Foot Path Location
+									    </label>
+									
+									    <div class="row">
+									
+									        <div class="col-md-6">
+									            <label for="view_footPathFrom">From</label>
+									
+									            <input type="text"
+									                   class="form-control"
+									                   id="view_footPathFrom" >
+									        </div>
+									
+									        <div class="col-md-6">
+									            <label for="view_footPathTo">To</label>
+									
+									            <input type="text"
+									                   class="form-control"
+									                   id="view_footPathTo" >
+									        </div>
+									
+									    </div>
+									
+									</div>
+							
+                		</div>
+                		
+                		<hr>
+                		
+                		<div class="row">
+
+						    <div class="col-md-6 mb-3">
+						        <label class="form-label">
+						            SWD Available or Not?
+						        </label>
+						
+						        <div>
+						            <label class="mr-3">
+						                <input type="radio"
+						                       name="update_swdAvailable"
+						                       value="yes">
+						                Yes
+						            </label>
+						
+						            <label>
+						                <input type="radio"
+						                       name="update_swdAvailable"
+						                       value="no">
+						                No
+						            </label>
+						        </div>
+						    </div>
+						
+						    <div id="update_swdSection"
+						         class="col-md-12"
+						         style="display:none;">
+						
+						        <div class="row">
+						
+						            <div class="col-md-3 mb-3">
+						                <label>From</label>
+						                <input type="text"
+						                       class="form-control"
+						                       id="update_fromswd">
+						            </div>
+						
+						            <div class="col-md-3 mb-3">
+						                <label>To</label>
+						                <input type="text"
+						                       class="form-control"
+						                       id="update_toswd">
+						            </div>
+						
+						            <div class="col-md-3 mb-3">
+						                <label>Length (m)</label>
+						                <input type="text"
+						                       class="form-control"
+						                       id="update_swdlength">
+						            </div>
+						
+						            <div class="col-md-3 mb-3">
+						                <label>Size (inches)</label>
+						                <input type="text"
+						                       class="form-control"
+						                       id="update_size">
+						            </div>
+						
+						        </div>
+						
+						    </div>
+						
+						</div>
+						
+						<div id="update_swdDependentFields"
+						     class="col-md-12"
+						     style="display:none;">
+						
+						    <div class="row">
+						
+						        <!-- SCP -->
+						
+						        <div class="col-md-6 mb-4">
+						
+						            <label class="form-label">
+						                Slit Catch Pit Available or Not?
+						            </label>
+						
+						            <div>
+						
+						                <label class="mr-3">
+						                    <input type="radio"
+						                           name="update_scpAvailable"
+						                           value="yes">
+						                    Yes
+						                </label>
+						
+						                <label>
+						                    <input type="radio"
+						                           name="update_scpAvailable"
+						                           value="no">
+						                    No
+						                </label>
+						
+						            </div>
+						
+						            <div id="update_scpSection"
+						                 style="display:none;margin-top:15px;">
+						
+						                <label>Count</label>
+						
+						                <input type="text"
+						                       class="form-control"
+						                       id="update_scpCount">
+						
+						            </div>
+						
+						        </div>
+						
+						        <!-- MANHOLE -->
+						
+						        <div class="col-md-6 mb-4">
+						
+						            <label class="form-label">
+						                Man Hole Available or Not?
+						            </label>
+						
+						            <div>
+						
+						                <label class="mr-3">
+						                    <input type="radio"
+						                           name="update_mhAvailable"
+						                           value="yes">
+						                    Yes
+						                </label>
+						
+						                <label>
+						                    <input type="radio"
+						                           name="update_mhAvailable"
+						                           value="no">
+						                    No
+						                </label>
+						
+						            </div>
+						
+						            <div id="update_mhSection"
+						                 style="display:none;margin-top:15px;">
+						
+						                <div class="row">
+						
+						                    <div class="col-md-6">
+						                        <label>Count</label>
+						
+						                        <input type="text"
+						                               class="form-control"
+						                               id="update_mhCount">
+						                    </div>
+						
+						                    <div class="col-md-6">
+						                        <label>Location</label>
+						
+						                        <select class="form-control"
+						                                id="update_mhType">
+						
+						                            <option value="">
+						                                Select Location
+						                            </option>
+						
+						                            <option value="both side">
+						                                Both Side
+						                            </option>
+						
+						                            <option value="single side">
+						                                Single Side
+						                            </option>
+						
+						                        </select>
+						
+						                    </div>
+						
+						                </div>
+						
+						            </div>
+						
+						        </div>
+						
+						        <!-- CHUT PIPE -->
+						
+						        <div class="col-md-6 mb-4">
+						
+						            <label class="form-label">
+						                Chut Pipe Available or Not?
+						            </label>
+						
+						            <div>
+						
+						                <label class="mr-3">
+						                    <input type="radio"
+						                           name="update_cpAvailable"
+						                           value="yes">
+						                    Yes
+						                </label>
+						
+						                <label>
+						                    <input type="radio"
+						                           name="update_cpAvailable"
+						                           value="no">
+						                    No
+						                </label>
+						
+						            </div>
+						
+						            <div id="update_cpSection"
+						                 style="display:none;margin-top:15px;">
+						
+						                <label>Count</label>
+						
+						                <input type="text"
+						                       class="form-control"
+						                       id="update_cpCount">
+						
+						            </div>
+						
+						        </div>
+						
+						        <!-- RWH -->
+						
+						        <div class="col-md-6 mb-4">
+						
+						            <label class="form-label">
+						                Rain Water Harvesting Available or Not?
+						            </label>
+						
+						            <div>
+						
+						                <label class="mr-3">
+						                    <input type="radio"
+						                           name="update_rwAvailable"
+						                           value="yes">
+						                    Yes
+						                </label>
+						
+						                <label>
+						                    <input type="radio"
+						                           name="update_rwAvailable"
+						                           value="no">
+						                    No
+						                </label>
+						
+						            </div>
+						
+						            <div id="update_rwSection"
+						                 style="display:none;margin-top:15px;">
+						
+						                <label>Count</label>
+						
+						                <input type="text"
+						                       class="form-control"
+						                       id="update_rwCount">
+						
+						            </div>
+						
+						        </div>
+        
+        
+						   <div class="col-md-6 mb-4">
+						
+						    <label class="form-label">
+						        Electricity Pole Available or Not?
+						    </label>
+						
+						    <div>
+						        <label class="mr-3">
+						            <input type="radio"
+						                   name="update_epAvailable"
+						                   value="yes">
+						            Yes
+						        </label>
+						
+						        <label>
+						            <input type="radio"
+						                   name="update_epAvailable"
+						                   value="no">
+						            No
+						        </label>
+						    </div>
+						
+						    <div id="update_epSection"
+						         style="display:none;margin-top:15px;">
+						
+						        <label>Count</label>
+						
+						        <input type="text"
+						               class="form-control"
+						               id="update_epCount">
+						
+						    </div>
+						
+						</div>
+						
+						<div class="col-md-6 mb-4">
+
+						    <label class="form-label">
+						        High Mass Light Available or Not?
+						    </label>
+						
+						    <div>
+						        <label class="mr-3">
+						            <input type="radio"
+						                   name="update_hmlAvailable"
+						                   value="yes">
+						            Yes
+						        </label>
+						
+						        <label>
+						            <input type="radio"
+						                   name="update_hmlAvailable"
+						                   value="no">
+						            No
+						        </label>
+						    </div>
+						
+						</div>
+						
+						<div class="col-md-6 mb-4">
+
+							    <label class="form-label">
+							        Bus Shelter Available or Not?
+							    </label>
+							
+							    <div>
+							        <label class="mr-3">
+							            <input type="radio"
+							                   name="update_bsAvailable"
+							                   value="yes">
+							            Yes
+							        </label>
+							
+							        <label>
+							            <input type="radio"
+							                   name="update_bsAvailable"
+							                   value="no">
+							            No
+							        </label>
+							    </div>
+							
+							    <div id="update_bsSection"
+							         style="display:none;margin-top:15px;">
+							
+							        <label>Count</label>
+							
+							        <input type="text"
+							               class="form-control"
+							               id="update_bsCount">
+							
+							    </div>
+							
+							</div>
+							
+							
+							<div class="col-md-6 mb-4">
+
+							    <label class="form-label">
+							        Center Median Available or Not?
+							    </label>
+							
+							    <div>
+							        <label class="mr-3">
+							            <input type="radio"
+							                   name="update_cmAvailable"
+							                   value="yes">
+							            Yes
+							        </label>
+							
+							        <label>
+							            <input type="radio"
+							                   name="update_cmAvailable"
+							                   value="no">
+							            No
+							        </label>
+							    </div>
+							
+							   <!--  <div id="update_cmSection"
+							         style="display:none;margin-top:15px;">
+							
+							        <label>Count</label>
+							
+							        <input type="text"
+							               class="form-control"
+							               id="update_cmCount">
+							
+							    </div> -->
+							
+							</div>
+							</div>
+
+					</div>
+							
+							<div class="row">
+							
+								<div class="col-md-4 mb-3">
+									    <label class="form-label">
+									        Length Of Sewer (m)
+									    </label>
+									
+									    <input type="text"
+									           class="form-control"
+									           id="update_sewerLength">
+									</div>
+									
+									<div class="col-md-4 mb-3">
+									    <label class="form-label">
+									        Size of Sewer (inches)
+									    </label>
+									
+									    <input type="text"
+									           class="form-control"
+									           id="update_sewerSize">
+									</div>
+									
+									<div class="col-md-4 mb-3">
+									    <label class="form-label">
+									        No of Culverts & Bridges
+									    </label>
+									
+									    <input type="text"
+									           class="form-control"
+									           id="update_noofcb">
+									</div>
+									
+									<div class="col-md-12 mb-3">
+									    <label class="form-label">
+									        Details of Culverts & Bridges With Date of Construction
+									    </label>
+									
+									    <textarea class="form-control"
+									              id="update_detailsofcb"
+									              rows="4"></textarea>
+									</div></div>
+
+    						
+
+                <hr>
+
+                <h5>Relaying Details</h5>
+                             
+                <div id="relayingContainer"></div>
+                
+                <div class="text-left mb-3">
+				    <button type="button"
+				            class="btn btn-primary"
+				            id="btnAddRelay">
+				        + Add More
+				    </button>
+				</div>
+
+					<div class="text-center mt-4">
+					    <button type="button"
+					            class="btn btn-success"
+					            id="btnUpdateRoadWar">
+					        Update
+					    </button>
+					
+					    <button type="button"
+					            class="btn btn-secondary ml-2"
+					            data-dismiss="modal">
+					        Cancel
+					    </button>
+					</div>
+
+            </div>
+
+        </div>
+    </div>
+</div>
+	
+
+
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+	
+	<script type="text/javascript">
+	
+	let monthList = [];
+	let yearList = [];
+	
+	function loadMonthMaster() {
+
+	    return $.ajax({
+	        url: "/gcc/api/roadwarweb/register/getMonthList",
+	        type: "GET",
+	        success: function(response) {
+
+	            if (response.status) {
+	                monthList = response.data;
+	            }
+	        }
+	    });
+	}
+
+	function loadYearMaster() {
+
+	    return $.ajax({
+	        url: "/gcc/api/roadwarweb/register/getYearList",
+	        type: "GET",
+	        success: function(response) {
+
+	            if (response.status) {
+	                yearList = response.data;
+	            }
+	        }
+	    });
+	}
+	
+	$(document).ready(function () {
+		
+		var table = $('#ReportDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false }
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '80vh',
+            scrollX: true,
+            
+            buttons: [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary',
+                    id: 'copyBtn'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary',
+                    id: 'excelBtn'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary',
+                    id: 'csvBtn'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary',
+                    id: 'pdfBtn'
+                }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: false,
+            searching: true,
+            select: false,
+            processing: true
+        });
+		
+		
+		$.ajax({
+			url: '/gcc/api/roadwarweb/register/getzones',
+			type: 'GET',
+			success: function (response) {
+
+				$('#zoneDropdown').empty()
+					.append('<option value="">Select Zone</option>');
+
+				if (response.status) {
+
+					$.each(response.data, function (index, zone) {
+
+						$('#zoneDropdown').append(
+							'<option value="' + zone.zone_name + '">' +
+							zone.zone_name +
+							'</option>'
+						);
+
+					});
+
+				}
+			},
+			error: function () {
+				alert('Failed to load zones.');
+			}
+		});
+		
+		
+		$("#resetBtn").click(function () {
+		    location.reload();
+		});
+		
+		
+		loadRoadWarDetails();
+		
+		
+		
+		$(document).on('click', '.viewBtn', function () {
+			
+			 const refId = $(this).data('refid');
+
+			    console.log("Ref Id = " + refId);
+			    loadMonthMaster();
+			    loadYearMaster();
+			    fetchRoadWarDetails(refId);
+
+   		});	
+		
+	});
+	
+	
+	$('input[name="update_swdAvailable"]').change(function () {
+
+	    if ($(this).val() === 'yes') {
+
+	        $("#update_swdSection").show();
+	        $("#update_swdDependentFields").show();
+
+	    } else {
+
+	        $("#update_swdSection").hide();
+	        $("#update_swdDependentFields").hide();
+
+	        $("#update_fromswd").val('');
+	        $("#update_toswd").val('');
+	        $("#update_swdlength").val('');
+	        $("#update_size").val('');
+
+	        $('input[name="update_scpAvailable"]').prop('checked', false);
+	        $('input[name="update_mhAvailable"]').prop('checked', false);
+	        $('input[name="update_cpAvailable"]').prop('checked', false);
+	        $('input[name="update_rwAvailable"]').prop('checked', false);
+	        
+	        $('input[name="update_epAvailable"]').prop('checked', false);
+	        $('input[name="update_bsAvailable"]').prop('checked', false);
+	        $('input[name="update_cmAvailable"]').prop('checked', false);
+	        $('input[name="update_hmlAvailable"]').prop('checked', false);
+	        
+
+	        $("#update_scpSection").hide();
+	        $("#update_mhSection").hide();
+	        $("#update_cpSection").hide();
+	        $("#update_rwSection").hide();
+	        $("#update_epSection").hide();
+	        $("#update_bsSection").hide();
+	        $("#update_cmSection").hide();
+	        $("#update_hmlSection").hide();
+
+	        $("#update_scpCount").val('');
+	        $("#update_mhCount").val('');
+	        $("#update_mhType").val('');
+	        $("#update_cpCount").val('');
+	        $("#update_rwCount").val('');
+	        $("#update_epCount").val('');
+	        $("#update_bsCount").val('');
+	        $("#update_cmCount").val('');
+	        $("#update_hmlCount").val('');
+	    }
+
+	});
+	
+	
+	 $('input[name="update_scpAvailable"]').change(function () {
+
+	        if ($(this).val() === 'yes') {
+	            $("#update_scpSection").show();
+	        } else {
+	            $("#update_scpSection").hide();
+	            $("#update_scpCount").val('');
+	        }
+
+	    });
+	 
+	 
+	 $('input[name="update_mhAvailable"]').change(function () {
+
+	        if ($(this).val() === 'yes') {
+	            $("#update_mhSection").show();
+	        } else {
+	            $("#update_mhSection").hide();
+	            $("#update_mhCount").val('');
+	            $("#update_mhType").val('');
+	        }
+
+	    });
+	 
+	 
+	 $('input[name="update_cpAvailable"]').change(function () {
+
+	        if ($(this).val() === 'yes') {
+	            $("#update_cpSection").show();
+	        } else {
+	            $("#update_cpSection").hide();
+	            $("#update_cpCount").val('');
+	            
+	        }
+
+	    });
+	 
+	 
+	 $('input[name="update_rwAvailable"]').change(function () {
+
+	        if ($(this).val() === 'yes') {
+	            $("#update_rwSection").show();
+	        } else {
+	            $("#update_rwSection").hide();
+	            $("#update_rwCount").val('');
+	            
+	        }
+
+	    });
+	 
+	 
+	 
+	 $('input[name="update_epAvailable"]').change(function () {
+
+	        if ($(this).val() === 'yes') {
+	            $("#update_epSection").show();
+	        } else {
+	            $("#update_epSection").hide();
+	            $("#update_epCount").val('');
+	            
+	        }
+
+	    });
+	 
+	 
+	 $('input[name="update_bsAvailable"]').change(function () {
+
+	        if ($(this).val() === 'yes') {
+	            $("#update_bsSection").show();
+	        } else {
+	            $("#update_bsSection").hide();
+	            $("#update_bsCount").val('');
+	            
+	        }
+
+	    });
+	 
+	 
+	 
+	 $('input[name="update_cmAvailable"]').change(function () {
+
+	        if ($(this).val() === 'yes') {
+	            $("#update_cmSection").show();
+	        } else {
+	            $("#update_cmSection").hide();
+	            $("#update_cmCount").val('');
+	            
+	        }
+
+	    });
+	
+	
+	$('#zoneDropdown').change(function () {
+
+		let zone = $(this).val();
+
+		$('#wardDropdown').empty()
+			.append('<option value="">Select Ward</option>');
+
+		if (zone) {
+
+			$.ajax({
+				url: '/gcc/api/roadwarweb/register/getwardbyzone',
+				type: 'GET',
+				data: {
+					zone: zone
+				},
+				success: function (response) {
+
+					if (response.status) {
+
+						$.each(response.data, function (index, ward) {
+
+							$('#wardDropdown').append(
+								'<option value="' + ward.ward_name + '">' +
+								ward.ward_name +
+								'</option>'
+							);
+
+						});
+
+					}
+
+				},
+				error: function () {
+					alert('Failed to load wards.');
+				}
+			});
+
+		}
+
+	});
+	
+	
+	$('#wardDropdown').change(function () {
+
+		let ward = $(this).val();
+
+		$('#roadDropdown').empty()
+			.append('<option value="">Select Road</option>');
+
+		if (ward) {
+
+			$.ajax({
+				url: '/gcc/api/roadwarweb/register/getRoadNamesByWard',
+				type: 'GET',
+				data: {
+					ward: ward
+				},
+				beforeSend: function () {
+					$("#pageLoader").show();
+				},
+				success: function (response) {
+
+					console.log("API Response:", response);
+
+					if (response.status && response.data.length > 0) {
+
+						$.each(response.data, function (index, road) {
+
+							console.log("Road:", road);
+
+							$('#roadDropdown').append(
+								$('<option>', {
+									value: road.road_name,
+									text: road.road_name
+								})
+							);
+						});
+						
+						 // Destroy existing Select2 if already initialized
+				        if ($('#roadDropdown').hasClass("select2-hidden-accessible")) {
+				            $('#roadDropdown').select2('destroy');
+				        }
+
+				        // Initialize Select2
+				        $('#roadDropdown').select2({
+				            placeholder: "Select Road",
+				            allowClear: true,
+				            width: '100%'
+				        });
+
+
+					} else {
+						console.log("No roads found");
+					}
+				},
+				error: function (xhr, status, error) {
+					console.log("Error:", error);
+					console.log(xhr.responseText);
+				},
+				complete: function () {
+					$("#pageLoader").hide();
+				}
+			});
+		}
+	});
+	
+	
+	
+	$("#searchBtn").click(function () {
+
+	    loadRoadWarDetails();
+
+	});
+	
+	
+	function loadRoadWarDetails() {
+
+	    let zone = $("#zoneDropdown").val();
+	    let ward = $("#wardDropdown").val();
+	    let roadName = $("#roadDropdown").val();
+
+	    $("#pageLoader").show();
+
+	    $.ajax({
+
+	        url: "/gcc/api/roadwarweb/register/getAllRoadWarDetails",
+	        type: "GET",
+
+	        data: {
+	            zone: zone,
+	            ward: ward,
+	            roadName: roadName
+	        },
+
+	        success: function (response) {
+
+	            let tbody = $("#ReportDatatable tbody");
+
+	            tbody.empty();
+
+	            if (response.length > 0) {
+
+	                $.each(response, function (index, item) {
+
+	                    tbody.append(`
+	                    		 <tr class="text-center">
+	                            <td>${index + 1}</td>
+	                            <td>${item.zone || ''}</td>
+	                            <td>${item.ward || ''}</td>
+	                            <td>${item.road_name || ''}</td>
+	                            <td>${item.road_type_name || ''}</td>
+	                            <td>${item.road_length || ''}</td>
+	                            <td>${item.road_avg_width || ''}</td>
+	                            <td>${item.road_area || ''}</td>
+	                            <td>${item.footpath_material || ''}</td>
+	                            <td>${item.footpath_length || ''}</td>
+	                            <td>${item.footpath_width || ''}</td>
+	                            
+	                            <td>
+	                            <button class="btn btn-primary btn-sm viewBtn"
+	                                    data-refid="${item.ref_id}">
+	                                View
+	                            </button>
+	                        </td>
+	                        
+	                        </tr>
+	                    `);
+
+	                });
+
+	            } else {
+
+	                tbody.append(`
+	                    <tr>
+	                        <td colspan="11" class="text-center">
+	                            No Records Found
+	                        </td>
+	                    </tr>
+	                `);
+	            }
+	        },
+
+	        error: function () {
+
+	            alert("Failed to load data");
+
+	        },
+
+	        complete: function () {
+
+	            $("#pageLoader").hide();
+
+	        }
+
+	    });
+	}
+	
+	
+	
+	function fetchRoadWarDetails(refId) {
+
+	    $.ajax({
+
+	        url: '/gcc/api/roadwarweb/register/getRoadWarDetailsById',
+
+	        type: 'GET',
+
+	        data: {
+	            refid: refId
+	        },
+
+	        success: function (response) {
+
+	            console.log(response);
+
+	            $("#view_zone").val(response.zone);
+	            $("#view_ward").val(response.ward);
+	            $("#view_road_name").val(response.road_name);
+	            $("#view_road_type").val(response.road_type_name);
+	            $("#view_road_length").val(response.road_length);
+	            $("#view_road_avg_width").val(response.road_avg_width);
+	            $("#view_road_area").val(response.road_area);
+	            $("#view_footpath_material").val(response.footpath_material);
+	            $("#view_footpath_length").val(response.footpath_length);
+	            
+	            
+	            $("#view_fpwidth").val(response.footpath_width);
+
+	            $("#view_footPathFrom")
+	                .val(response.footpath_from_location);
+
+	            $("#view_footPathTo")
+	                .val(response.footpath_to_location);
+	            
+	            
+	            if(response.is_swd === 'yes'){
+
+	                $('input[name="update_swdAvailable"][value="yes"]')
+	                    .prop('checked', true);
+
+	                $("#update_swdSection").show();
+	                $("#update_swdDependentFields").show();
+
+	                $("#update_fromswd").val(response.swd_from);
+	                $("#update_toswd").val(response.swd_to);
+	                $("#update_swdlength").val(response.swd_length);
+	                $("#update_size").val(response.swd_size);
+
+	            }else{
+
+	                $('input[name="update_swdAvailable"][value="no"]')
+	                    .prop('checked', true);
+
+	                $("#update_swdSection").hide();
+	                $("#update_swdDependentFields").hide();
+	            }
+	            
+	            
+	            
+	            if(response.is_scp &&
+	            		   response.is_scp.toLowerCase() === 'yes'){
+
+	            		    $('input[name="update_scpAvailable"][value="yes"]')
+	            		        .prop('checked', true);
+
+	            		    $('#update_scpSection').show();
+
+	            		    $('#update_scpCount')
+	            		        .val(response.scp_count);
+
+	            		}else{
+
+	            		    $('input[name="update_scpAvailable"][value="no"]')
+	            		        .prop('checked', true);
+
+	            		    $('#update_scpSection').hide();
+	            		}
+	            
+	            
+	            if(response.is_manhole &&
+	            		   response.is_manhole.toLowerCase() === 'yes'){
+
+	            		    $('input[name="update_mhAvailable"][value="yes"]')
+	            		        .prop('checked', true);
+
+	            		    $('#update_mhSection').show();
+
+	            		    $('#update_mhCount')
+	            		        .val(response.manhole_count);
+
+	            		    $('#update_mhType')
+	            		        .val(response.manhole_location);
+
+	            		}else{
+
+	            		    $('input[name="update_mhAvailable"][value="no"]')
+	            		        .prop('checked', true);
+	            		}
+
+	            
+	        
+
+	            if(response.is_cpipe === 'yes'){
+
+	                $('input[name="update_cpAvailable"][value="yes"]')
+	                    .prop('checked', true);
+
+	                $('#update_cpSection').show();
+
+	                $('#update_cpCount')
+	                    .val(response.cpipe_count);
+
+	            }else{
+
+	                $('input[name="update_cpAvailable"][value="no"]')
+	                    .prop('checked', true);
+
+	                $('#update_cpSection').hide();
+	            }
+
+
+	            
+
+	            if(response.is_rwh === 'yes'){
+
+	                $('input[name="update_rwAvailable"][value="yes"]')
+	                    .prop('checked', true);
+
+	                $('#update_rwSection').show();
+
+	                $('#update_rwCount')
+	                    .val(response.rwh_count);
+
+	            }else{
+
+	                $('input[name="update_rwAvailable"][value="no"]')
+	                    .prop('checked', true);
+
+	                $('#update_rwSection').hide();
+	            }
+	            
+	            
+	            if(response.is_electric_poles === 'yes'){
+
+	                $('input[name="update_epAvailable"][value="yes"]')
+	                    .prop('checked', true);
+
+	                $('#update_epSection').show();
+
+	                $('#update_epCount')
+	                    .val(response.ep_count);
+
+	            }else{
+
+	                $('input[name="update_epAvailable"][value="no"]')
+	                    .prop('checked', true);
+
+	                $('#update_epSection').hide();
+	            }
+	            
+	            
+	         // HIGH MASS LIGHT
+
+	            if(response.is_hml === 'yes'){
+
+	                $('input[name="update_hmlAvailable"][value="yes"]')
+	                    .prop('checked', true);
+
+	            }else{
+
+	                $('input[name="update_hmlAvailable"][value="no"]')
+	                    .prop('checked', true);
+	            }
+
+
+	            // BUS SHELTER
+
+	            if(response.is_busshelter === 'yes'){
+
+	                $('input[name="update_bsAvailable"][value="yes"]')
+	                    .prop('checked', true);
+
+	                $('#update_bsSection').show();
+
+	                $('#update_bsCount')
+	                    .val(response.busshelter_count);
+
+	            }else{
+
+	                $('input[name="update_bsAvailable"][value="no"]')
+	                    .prop('checked', true);
+
+	                $('#update_bsSection').hide();
+	            }
+
+
+	            // CENTER MEDIAN
+
+	            if(response.is_centermedian === 'yes'){
+
+	                $('input[name="update_cmAvailable"][value="yes"]')
+	                    .prop('checked', true);
+
+	                /* $('#update_cmSection').show(); */
+
+	                $('#update_cmCount')
+	                    .val(response.cm_count);
+
+	            }else{
+
+	                $('input[name="update_cmAvailable"][value="no"]')
+	                    .prop('checked', true);
+
+	                /* $('#update_cmSection').hide(); */
+	            }
+	            
+	            
+	            
+	            $("#update_sewerLength")
+	            .val(response.sewer_length);
+
+		        $("#update_sewerSize")
+		            .val(response.sewer_size);
+	
+		        $("#update_noofcb")
+		            .val(response.culvert_bridge_count);
+	
+		        $("#update_detailsofcb")
+		            .val(response.details);
+	            
+	            
+	            
+		        let container = $("#relayingContainer");
+		        container.empty();
+
+		        if (response.relayingDetails &&
+		            response.relayingDetails.length > 0) {
+
+		            $.each(response.relayingDetails, function(index, item) {
+
+		                container.append(createRelayBlock(item));
+
+		            });
+		        }
+
+	            $("#roadWarModal").modal("show");
+
+	        },
+
+	        error: function () {
+
+	            Swal.fire({
+	                icon: 'error',
+	                title: 'Error',
+	                text: 'Unable to fetch details'
+	            });
+
+	        }
+
+	    });
+
+	}
+	$(document).on('click', '.removeRelayRow', function () {
+
+	    let totalRows = $('.relay-block').length;
+
+	    // If only one block exists, don't allow removal
+	    if (totalRows === 1) {
+
+	        Swal.fire(
+	            'Warning',
+	            'At least one relaying detail is required',
+	            'warning'
+	        );
+
+	        return;
+	    }
+
+	    $(this).closest('.relay-block').remove();
+	});
+	
+	
+	function createRelayBlock(item = {}) {
+
+	    let monthOptions =
+	        '<option value="">Select Month</option>';
+
+	    monthList.forEach(month => {
+
+	        monthOptions += `
+	            <option value="${month.id}"
+	                ${month.id == item.relay_month ? 'selected' : ''}>
+	                ${month.month_name}
+	            </option>`;
+	    });
+
+	    let yearOptions =
+	        '<option value="">Select Year</option>';
+
+	    yearList.forEach(year => {
+
+	        yearOptions += `
+	            <option value="${year.id}"
+	                ${year.id == item.relay_year ? 'selected' : ''}>
+	                ${year.year_name}
+	            </option>`;
+	    });
+
+	    return `
+	        <div class="relay-block border p-3 mb-3">
+
+	            <div class="row">
+
+	                <div class="col-md-3">
+	                    <label>Month</label>
+
+	                    <select class="form-control relay_month">
+	                        ${monthOptions}
+	                    </select>
+	                </div>
+
+	                <div class="col-md-3">
+	                    <label>Year</label>
+
+	                    <select class="form-control relay_year">
+	                        ${yearOptions}
+	                    </select>
+	                </div>
+
+	                <div class="col-md-3">
+	                    <label>CR Value</label>
+
+	                    <input type="text"
+	                           class="form-control cr_value"
+	                           value="${item.cr_value || ''}">
+	                </div>
+
+	                <div class="col-md-3">
+	                    <label>Road Type</label>
+
+	                    <input type="text"
+	                           class="form-control road_type"
+	                           value="${item.road_type || ''}">
+	                </div>
+
+	                <div class="col-md-12 mt-3">
+	                    <label>Remarks</label>
+
+	                    <textarea class="form-control remarks">${item.remarks || ''}</textarea>
+	                </div>
+
+	                <div class="col-md-12 mt-3 text-right">
+	                    <button type="button"
+	                            class="btn btn-danger btn-sm removeRelayRow">
+	                        Remove
+	                    </button>
+	                </div>
+
+	            </div>
+
+	        </div>
+	    `;
+	}
+	
+	$(document).on('click', '#btnAddRelay', function () {
+
+	    $('#relayingContainer')
+	        .append(createRelayBlock());
+
+	});
+	
+	</script>
+	
+	
+	
+	
+	</body>
+	</html>