emhancement for treee pruning module

src/main/resources/templates/modules/public/form.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
+
 <head>
     <meta charset="utf-8">
     <title>GCC Green Committee</title>
@@ -53,7 +54,8 @@
             padding: 10px;
             display: none;
             flex-direction: column;
-     z-index: 1000; /* Add z-index to bring the menu above other elements */
+            z-index: 1000;
+            /* Add z-index to bring the menu above other elements */
         }
 
         .menu-dropdown a {
@@ -84,9 +86,11 @@
             .menu-dropdown {
                 right: 0;
                 left: 0;
-         z-index: 1000; /* Add z-index to bring the menu above other elements */
+                z-index: 1000;
+                /* Add z-index to bring the menu above other elements */
             }
         }
+
         /*css for map in step2*/
         #googleMap {
             height: 300px;
@@ -163,9 +167,11 @@
         #suggestions ul li:hover {
             background-color: #f0f0f0;
         }
+
         .multi-select-dropdown {
             position: relative;
         }
+
         .dropdown-checkbox-menu {
             position: absolute;
             background: #fff;
@@ -178,6 +184,7 @@
             padding: 10px;
             border-radius: 5px;
         }
+
         .otp-input-box {
             /*display: flex;
               justify-content: space-between;*/
@@ -294,15 +301,15 @@ textarea.form-control {
             .row {
                 row-gap: 15px;
             }
+
             #sendOtpButton {
                 margin-top: 10px !important;
             }
         }
-
-    
     </style>
 
 </head>
+
 <body style="background-color: #f1f3f4;">
 
     <!-- Header Start-->
@@ -345,21 +352,28 @@ textarea.form-control {
 
         <div class="p-4">
             <form id="publicform" enctype="multipart/form-data">
-			<div class="section-header text-center"><h5>GREEN COMMITTEE CITIZEN FORM (PUBLIC)</h5></div>
+                <div class="section-header text-center">
+                    <h5>GREEN COMMITTEE CITIZEN FORM (PUBLIC)</h5>
+                </div>
                 <div class="row mb-3 mt-2">
                     <div class="col-md-4">
                         <label class="form-label">Petitioner Name<span class="text-danger">*</span></label>
-		          <input type="text" class="form-control" id="pname" name="name" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" placeholder="Enter Name" required>
+                        <input type="text" class="form-control" id="pname" name="name"
+                            oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" placeholder="Enter Name"
+                            required>
                     </div>
                     <div class="col-md-3">
                         <label class="form-label">Mobile Number<span class="text-danger">*</span></label>
-		          <input type="text" class="form-control" id="mobile_no" name="mobile_no" oninput="validatePhoneNumber(this)" placeholder="Enter Mobile Number" required>
+                        <input type="text" class="form-control" id="mobile_no" name="mobile_no"
+                            oninput="validatePhoneNumber(this)" placeholder="Enter Mobile Number" required>
                     </div>
                     <div class="col-md-2" id="otpbeforeverified">
-		        	<button type="button" class="btn btn-primary" id="sendOtpButton" style="margin-top: 32px;">Send OTP</button>		        	
+                        <button type="button" class="btn btn-primary" id="sendOtpButton" style="margin-top: 32px;">Send
+                            OTP</button>
                     </div>
                     <div class="col-md-2" id="otpafterverified" style="display: none;">
-						<i class="fa-solid fa-circle-check"style="margin-top: 40px;font-size: x-large;color: green;"></i>
+                        <i class="fa-solid fa-circle-check"
+                            style="margin-top: 40px;font-size: x-large;color: green;"></i>
                     </div>
 
                 </div>
@@ -371,8 +385,10 @@ textarea.form-control {
                         <input type="radio" name="gender" value="T" class="ms-3 ml-3"> Transgender
                     </div>
                     <div class="col-md-8">
-			        <label class="form-label">Tree Land Location (Also click the street in Map)<span class="text-danger">*</span></label>
-			        <textarea class="form-control" id="address" name="address" maxlength="255" placeholder="Type Tree Address Here" required ></textarea>
+                        <label class="form-label">Tree Land Location (Also click the street in Map)<span
+                                class="text-danger">*</span></label>
+                        <textarea class="form-control" id="address" name="address" maxlength="255"
+                            placeholder="Type Tree Address Here" required></textarea>
                     </div>
                 </div>
                 <!-- <div class="row mb-3">
@@ -420,20 +436,77 @@ textarea.form-control {
 
                 </div>
 
-				<div class="row mb-3">
+                <!-- <div class="row mb-3">
                     <div class="col-md-4">
                         <label class="form-label">Details of Complaint<span class="text-danger">*</span></label>
 
-				        <!-- Dropdown clickable box -->
+
+
+                      
                         <div class="multi-select-dropdown">
                             <div id="dropdownToggle" class="form-control" style="cursor:pointer;" required>
                                 Select Options
                             </div>
+                            <small class="text-danger">
+                                <strong>Note:</strong> Only one complaint can be selected.
+                            </small>
+
                            
-				            <!-- Checkbox list appears here -->
                             <div id="compnature_checkbox_list" class="dropdown-checkbox-menu"></div>
                         </div>
                     </div>
+                </div>-->
+                <div class="row mb-3">
+
+                    <!-- Left Side -->
+                    <div class="col-md-4">
+                        <label class="form-label">
+                            Details of Complaint<span class="text-danger">*</span>
+                        </label>
+                        <select id="complaintDropdown" class="form-control" required>
+                            <option value="">Select Complaint</option>
+                        </select>
+
+                        <div class="text-danger mt-2">
+                            <strong>Note:</strong> Only one complaint can be selected.
+                        </div>
+
+
+                        <!-- <div class="multi-select-dropdown">
+                            <div id="dropdownToggle" class="form-control" style="cursor:pointer;" required>
+                                Select Options
+                            </div>
+                            <div class="text-danger mt-2">
+                                <strong>Note:</strong> Only one complaint can be selected.
+                            </div>-->
+
+                        <!-- <small class="text-danger">
+                                <strong>Note:</strong> Only one complaint can be selected.
+                            </small>-->
+
+                        <!--- <div id="compnature_checkbox_list" class="dropdown-checkbox-menu"></div>
+                    </div>-->
+                    </div>
+
+                    <!-- Right Side -->
+                    <div class="col-md-8">
+                        <div class="alert alert-info mb-0 py-2">
+                            <strong>Instructions:</strong><br>
+
+                            <strong>NOTE: </strong>For tree pruning complaints, please raise your complaint through the
+                            PGR portal
+                            <strong>Complaint Type:</strong> Park and Playground
+                            <br>
+
+                            <strong>Complaint Sub-Type:</strong> Obstruction of Trees
+                            <br>
+
+                            <a href="https://gccservices.in/pgr/registercomplaints" target="_blank">
+                                Click here to raise the complaint
+                            </a>
+                        </div>
+                    </div>
+
                 </div>
 
                 <!-- Dynamic input rows -->
@@ -442,24 +515,28 @@ textarea.form-control {
                 <div class="row mb-3">
                     <div class="col-md-12">
                         <label class="form-label">Remarks<span class="text-danger">*</span></label>
-				        <textarea class="form-control" id="remarks" name="remarks" maxlength="255" placeholder="Enter Remarks" required></textarea>
+                        <textarea class="form-control" id="remarks" name="remarks" maxlength="255"
+                            placeholder="Enter Remarks" required></textarea>
                     </div>
                 </div>
 
                 <div class="row mb-3" id="img_container">
                     <div class="col-md-6">
                         <label class="form-label">Upload Image 1 (jpg/jpeg)<span class="text-danger">*</span></label>
-			          <input type="file" class="form-control" id="c1image" accept=".jpg,.jpeg," name="c1image" required="required">
+                        <input type="file" class="form-control" id="c1image" accept=".jpg,.jpeg," name="c1image"
+                            required="required">
                     </div>
                     <div class="col-md-6">
                         <label class="form-label">Upload Image 2 (jpg/jpeg)<span class="text-danger">*</span></label>
-			          <input type="file" class="form-control" id="c2image" accept=".jpg,.jpeg," name="c2image" required="required">
+                        <input type="file" class="form-control" id="c2image" accept=".jpg,.jpeg," name="c2image"
+                            required="required">
                     </div>
                 </div>
                 <span>OTP validation is mandatory for submitting the form.<span class="text-danger">*</span></span>
                 <div class="text-center mt-4">
 
-					<button type="submit" class="btn btn-success" name="submitBtn" id="submitBtn" disabled>Submit</button>
+                    <button type="submit" class="btn btn-success" name="submitBtn" id="submitBtn"
+                        disabled>Submit</button>
 
                 </div>
 
@@ -531,7 +608,8 @@ textarea.form-control {
         </div><!--end modal-dialog-->
     </div>
 
-<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+    <div 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>
@@ -558,7 +636,7 @@ let mobile_valid=false;
 
         $(document).ready(function () {
 
-    let checkboxList = $("#compnature_checkbox_list");
+            /*let checkboxList = $("#compnature_checkbox_list");
              let natureContainer = $("#naturecontainer");
  
              // Toggle dropdown on click
@@ -571,7 +649,7 @@ $(document).ready(function () {
                  if (!$(e.target).closest(".multi-select-dropdown").length) {
                      checkboxList.hide();
                  }
-    });
+             });*/
 
             // Fetch API data
             fetch('/greencommittee/api/getcompnatureforpublic')
@@ -580,8 +658,17 @@ $(document).ready(function () {
                     if (result.status !== "success") return;
 
                     let list = result.data;
+                    let dropdown = $("#complaintDropdown");
 
-            list.forEach(d => {
+                    list.forEach(function (d) {
+                        dropdown.append(
+                            `<option value="${d.id}" data-name="${d.name}">
+            ${d.name}
+        </option>`
+                        );
+                    });
+
+                    /*list.forEach(d => {
                         checkboxList.append(`
                     <div class="form-check">
                         <input type="checkbox" 
@@ -594,11 +681,11 @@ $(document).ready(function () {
                         </label>
                     </div>
                 `);
-            });
+                    });*/
                 });
 
             // Handle checkbox selection
-    $(document).on("change", ".nature-check", function () {
+            /*$(document).on("change", ".nature-check", function () {
         
                 let id = $(this).data("id");
                 let name = $(this).data("name");
@@ -632,10 +719,76 @@ $(document).ready(function () {
                         $("#treeRow").remove();
                     }
                 }
+            });*/
+
+            $(document).on("change", "#complaintDropdown", function () {
+
+                $("#treeRow").remove();
+
+                let id = $(this).val();
+                let name = $("#complaintDropdown option:selected").data("name");
+
+                if (!id) {
+                    return;
+                }
+
+                $("#naturecontainer").html(`
+        <div class="row" id="treeRow">
+            <div class="col-md-4 mb-3">
+                <label class="form-label">
+                    No. of Trees - ${name}
+                    <span class="text-danger">*</span>
+                </label>
+
+                <input type="number"
+                       class="form-control"
+                       id="trees_${id}"
+                       value="1"
+                       disabled>
+            </div>
+        </div>
+    `);
             });
+            // Handle Complaint Selection (Only One Selection Allowed)
+            /*$(document).on("change", ".nature-check", function () {
+
+                // If checked, uncheck all others
+                if ($(this).is(":checked")) {
+                    $(".nature-check").not(this).prop("checked", false);
+                }
+
+                // Remove previous tree input
+                $("#treeRow").remove();
+
+                let checked = $(".nature-check:checked");
+
+                if (checked.length > 0) {
+
+                    let id = checked.data("id");
+                    let name = checked.data("name");
+
+                    $("#naturecontainer").html(`
+            <div class="row" id="treeRow">
+                <div class="col-md-4 mb-3">
+                    <label class="form-label">
+                        No. of Trees - ${name}
+                        <span class="text-danger">*</span>
+                    </label>
+                    <input type="number"
+                           class="form-control"
+                           id="trees_${id}"
+                           value="1"
+                           disabled>
+                </div>
+            </div>
+        `);
+                }
+
+                updateDropdownLabel();
+            });*/
 
             // Update dropdown text with selected names
-    function updateDropdownLabel() {
+            /*function updateDropdownLabel() {
                 let selected = [];
 
                 $(".nature-check:checked").each(function () {
@@ -647,7 +800,16 @@ $(document).ready(function () {
                 } else {
                     $("#dropdownToggle").text(selected.join(", "));
                 }
+            }*/  /* function updateDropdownLabel() {
+
+                let checked = $(".nature-check:checked");
+
+                if (checked.length === 0) {
+                    $("#dropdownToggle").text("Select Complaint");
+                } else {
+                    $("#dropdownToggle").text(checked.data("name"));
                 }
+            }*/
 
 
 
@@ -917,20 +1079,43 @@ $('#publicform').submit(function (e) {
             let compDetailsList = [];
             let invalidCount = false;
 
-    $(".nature-check:checked").each(function () {
-        let id = $(this).data("id");
+
+            let id = $("#complaintDropdown").val();
+
+            if (id) {
                 let count = $("#trees_" + id).val();
 
-        // Validate invalid count (empty OR zero-like OR negative)
                 if (!count || Number(count) <= 0) {
                     invalidCount = true;
                 }
 
                 compDetailsList.push({
                     id: id,
-            count: count
+                    count: 1
                 });
+            }
+
+            /*$(".nature-check:checked").each(function () {
+                // let id = $(this).data("id");
+                let count = $("#trees_" + id).val();
+
+                // Validate invalid count (empty OR zero-like OR negative)
+                if (!count || Number(count) <= 0) {
+                    invalidCount = true;
+                }
+
+                
+            //for default one tree by ak
+            let id = $("#complaintDropdown").val();
+
+
+            if (id) {
+                compDetailsList.push({
+                    id: id,
+                    count: 1
                 });
+            }
+        });*/
             if (compDetailsList.length === 0) {
                 $('#pageLoader').hide();
                 $('#submitBtn').prop('disabled', false).text('Submit');
@@ -1214,4 +1399,5 @@ $('#sendOtpButton').click(function () {
         });
     </script>
 </body>
+
 </html>