Property_Tax_Aptmt/src/main/webapp/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="viewport" content="initial-scale=1">
   <title>Welcome to Greater Chennai Corporation</title>
   <link rel="stylesheet" href="style.css" />
   <style>
body {
	background-image: url("bg.jpg");
	height: 500px; 
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
	/* Resize the background image to cover the entire container */
}
</style>
  </head>
  <body background="desktop/RiponBuilding.jpg;"> 
  <form action="data.jsp" class="form" method="post">
      <h2 class="heading">Property Tax Appointment</h2>
         <h4 class="heading">Senior Citizen Request</h4>
      <div class="box">
        <div class="firstbox">
       <div> 
          <h3><label for="exampleInputPassword1"><span id="onlinepayment-sub">
			Search By &nbsp;
				  <input type="radio" id="isNew" name="isNew" value='N' checked onClick="setIsExistingSelected(1)" style="font-size: 10.5px;"> 
				  Existing Bill Number &nbsp; 
  				  <input name="isNew" type="radio" id="isNew" value='Y' onClick="setIsExistingSelected(0)" style="font-size: 10.5px;"> 
  				   General Revision New Bill Number  </span></label></h3>
        </div>
          </div>
          </div>     
       <div class="box">
        <div class="firstbox">
          <div class="inputcontainer">
            <label class="label" for="zone"> Zone </label>
            <select class="blockinput" name="zone" id="zone" onchange="getDivision()">
              <option value="0">Select Zone</option>
              <option value="01">01</option>
              <option value="02">02</option>
              <option value="03">03</option>
              <option value="04">04</option>
              <option value="05">05</option>
              <option value="06">06</option>
              <option value="07">07</option>
              <option value="08">08</option>
              <option value="09">09</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
            </select>
          </div>
          <div class="inputcontainer">
            <label class="label" for="division"> Division </label>
            <select class="blockinput" name="division" id="division">
              <option value="0">Select Division</option>
            </select>
          </div>
          <div class="inputcontainer">
            <label class="label" for="billno"> Bill No </label>
            <input
              class="blockinput"
              id="billno"
              type="text" name="billno"
            />
          </div>
          <div class="inputcontainer div_sub_no">
            <label class="label" for="subno"> Sub No </label>
            <input
              class="blockinput"
              id="subno"
              type="text" name="subno"
              placeholder="000"
              readonly
            />
          </div><br>
          </div>
          <button type="submit" class="button">Submit</button>
        </div>
    </form>
    
      <h2 class="heading ">Details</h2>
      
      <div class="box form">
      <span id="status" style="color: red" style="font-weight:bold"></span>
        <div class="secondbox">
          <div class="inputcontainer2">
            <label class="label2" for="assessname" > Assessee Name </label>
            <input
              class="input"
              id="assessname"
              type="text"
              disabled
              placeholder="Name"
              style="font-weight:bold"/>
          </div>
          <div class="inputcontainer2">
            <label class="label2" for="address" > Address </label>
              <textarea
              class="input"
              id="address"
              disabled
              placeholder="Address" 
              style="font-weight:bold"></textarea>
          </div>
          <div class="inputcontainer2">
            <label class="label2" for="presenttax" > Present Tax </label>
            <input
              class="input"
              id="presenttax"
              type="text"
              disabled
              placeholder="Present Tax"
              style="font-weight:bold"
            />
          </div>
          <div class="inputcontainer2">
            <label class="label2" for="due"> Due </label>
            <input
              class="input"
              id="due"
              type="text"
              disabled
              placeholder="Due"
              style="font-weight:bold"
            />
          </div>
          <div class="inputcontainer2">
            <label class="label2" for="mobileno" > Mobile Number </label>
            <input
              class="input"
              id="mobileno"
              type="number"
              disabled
              placeholder="Mobile Number"
              style="font-weight:bold"
            />
          </div>
        </div>
      </div>
    <form id="form_appointment" class="">
      <h2 class="heading ">Appointment Booking Details</h2>
      <div class="box form">
        <div class="secondbox">
        <div class="inputcontainer2">
            <label class="label2" for="propertyid" > Property ID </label>
            <input 
              class="input"
              id="propertyid"
              disabled
              placeholder="00-000-00000-000"
              type="text" name="propertyid"
	          maxlength="16"
	          style="font-weight:bold"
            />
          </div>
          <div class="inputcontainer2">
            <label class="label2" for="contactaddress"> Contact Address </label>
            <textarea
              class="input"
              id="contactaddress"
              onclick="validateContAddr()"
              placeholder="Enter Contact Address"
            ></textarea>
          </div>
          <div class="inputcontainer2">
            <label class="label2" for="mobno"> Contact Number </label>
            <input
              class="inputnum"
              id="mobno"
              type="number"
			  pattern="\d*"
			  maxlength="10"
              placeholder="Enter Contact Number"
            />
            <button type="button" class="button" id="btn_send_otp" onclick="sendOtp()">OTP</button>
          </div>
        <div class="inputcontainer2" id="otp">
            <label class="label2" for="mobno"> </label>
            <input class="inputnum" id="otpvalue" type="text" pattern="\d*" maxlength="6" placeholder="Enter OTP"/>
            <button class="button" type="button" onClick="verifyOtp()" id="btn_verify_otp">Verify</button>
        </div> </div>
        <div class="thirdbox">
          <div class="inputcontainer3">
            <label class="label" for="age"> Age </label>
            <input class="blockinput" id="age" type="text" placeholder="Age" disabled/>
          </div>
          <div class="inputcontainer3">
            <label class="label" for="appdate"> Appointment Date </label>
            <input class="blockinput date_picker" id="appdate" type="date" placeholder="" onkeydown="return false" disabled />
          </div>
          <div class="inputcontainer3">
            <label class="label" for="apptime"> Appointment Time </label>
            <input class="blockinput" id="apptime" type="time" placeholder="" min="6:00"  max="20:00" disabled />
          </div>
        </div>
      </div>
      <div class="buttonbox">
        <button type="button" class="button" id="save" onClick="insertData()">Save</button>
        <button type="reset" class="button" id="clear">Clear</button>
      </div>
    </form>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
    
    	var boolIsExistingSelected = 1;
		$(document).ready(function(){
			var today = new Date().toISOString().split('T')[0];
			document.getElementsByClassName('date_picker')[0].setAttribute('min', today);
		});
		
		function setIsExistingSelected( val ) {
			boolIsExistingSelected = val;
			
			if(false == val){
				$('#subno').val('000');
				$('#subno').attr('disabled', 'disabled');
				$('.div_sub_no').hide();
				
			}else {
				$('#subno').attr('disabled', false);
				$('.div_sub_no').show();
			}
		}
		
		
		$('.form').submit(function(e){
			$('#assessname').val('');
			$('#address').val('');
			$('#presenttax').val('');
			$('#due').val('');
			$('#mobileno').val('');
			$('#propertyid').val('');
			e.preventDefault();
			var zone = $('#zone').val();
			var division = $('#division').val();
			var subno = $('#subno').val();
			
			if(subno == '' ){
				subno = '000';
			}
			
			/*if(parseInt( division ) < 10){
				division = '00'+division;
			}
			if(parseInt( division ) < 100){
				division = '0'+division;
				console.log('d: ' + division);
			}*/
			
			
			
			var billno = $('#billno').val();
			var url = 'data.jsp?zone='+zone+'&division='+division+'&billno='+billno+'&subno='+subno+'&isExistingSelected='+boolIsExistingSelected;
			
						
			$('#status').html('<p>Searching data..</p>');

			$.ajax({
				url: url,
				data: {},
				complete: function(xhr, statusText){
					if(xhr.status == 200 && xhr.responseText != '' && xhr.responseText != null){
						console.log('l: ' + xhr.responseText.trim().length);
						if(xhr.responseText.trim().length == 0) {
							$('#status').html('<p>No data found.</p>');
							return;
						}
						$('#status').html('');
						var json = $.parseJSON(xhr.responseText);
						
						console.log(json.length);
						$('#assessname').val(json[0].OWNERSNAME);
						$('#address').val(json[0].ADDRESS);
						$('#presenttax').val(json[0].AGGREGATE_CURRENT_DEMAND);
						$('#due').val(json[0].DUE); 
						$('#mobileno').val(json[0].MOBILENO);
						$('#propertyid').val(json[0].UPICNO);
					}
				},
				error: function(xhr, statusText, err){
					
				}
			});
		});
		
		$('#form_appointment').submit(function(e) {
			e.preventDefault();
		});
		
			
		function getDivision() {
			var zone = $('#zone').val();
			var url = 'getDivision.jsp?zone='+zone;
			$.ajax({
				url: url,
				data: {},
				complete: function(xhr, statusText){
					if(xhr.status == 200 && xhr.responseText != '' && xhr.responseText != null){
						var arrObjDivisions = $.parseJSON(xhr.responseText);
						var options = '';
						$(arrObjDivisions).each(function(){
							if(this.DIVISION != null){
								options += '<option value="'+this.DIVISION+'">'+this.DIVISION+'</option>';
							}
													
						});
						$('#division').html(options);						
					}
				},
				error: function(xhr, statusText, err){
					
				}
			});
		}
		
		function validateContactNumber() {
		  var contact_number = $('#mobno').val();
	
		  if(contact_number.length != 10){
		  	alert('Please enter 10 digit mobile number.');
		    return false;
		  }
		  
		  return true;
		}
		
		function sendOtp() {
			
			// validating property id
			var property_id = $('#propertyid').val();
			
			if(property_id == '') {
				alert('Invalid property id.');
				return;
			}
			
			// validating contact number
		  if( false == validateContactNumber() ) {
		  	return false;
		  }
		  
		  var contact_number = $('#mobno').val();
		  
		  // sending OTP
		  $.post('send_otp.jsp?mobno='+contact_number,function(response) {
		  	alert(response);
		  	document.getElementById('otp').style.display="flex";
		  	$('#otpvalue').focus();
		  	$('#btn_send_otp').attr('disabled','disabled');
		  });
		  
		}
		
		function verifyOtp() {
			var entered_otp = $('#otpvalue').val();
			
			if(entered_otp == '' || entered_otp.legth == 0) {
				alert('Please enter OTP.');
				return;
			}
			
			$.post('otp_verification.jsp?entered_otp='+entered_otp,function(response){
				
				if(response == 'success') {
					$('#age').attr('disabled',false);
					$('#appdate').attr('disabled',false);
					$('#apptime').attr('disabled',false);
					$('#save').attr('disabled',false);
					$('#clear').attr('disabled',false);
					$('#btn_verify_otp').attr('disabled','disabled');
				}else{
					alert(response);
				}
			});
		}
		
		function insertData() {

			// age validation
			var property_id = $('#propertyid').val();
			var contact_address = $('#contactaddress').val();
			var mobile_number = $('#mobno').val();
			var age = $('#age').val();
			var app_date = $('#appdate').val();
			var app_time = $('#apptime').val();
			
		if( contact_address == '' || contact_address.length == 0 ){
			alert('Please enter contact address');
			return;
		}
		  
		  if(age < 60) {
		  	alert('Age should be 60 or greater than 60.');
		    return;
		  }
		  
		  if(app_date == '' || app_date.length == 0){
			  alert('Please select date.');
			  return;
		  }
		  
		  if( app_time == '' || app_time.length == 0 ){
			  alert('Please choose time.');
			  return;
		  }
		  
		  var array_time = app_time.split(':'); 
		  if(array_time[0] < 6 || array_time[0] > 20) {
			  alert('Please select time between 6:00 to 20:00');
			  return;
		  }
		  
		  $.post('save.jsp',{
			  'age': age,
			  'app_date': app_date,
			  'app_time': app_time,
			  'property_id': property_id,
			  'contact_address': contact_address,
			  'mobile_number' : mobile_number
		  },function(response){
			  alert(response);
			  window.location.reload();
		  });
		}
		
	</script>
  </body>
</html>