GCC_Officer_Portal/target/classes/templates/modules/garbagecollection/request-create.html

<!DOCTYPE html>
<html lang="en" dir="">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head>
    <body>
		<link rel="stylesheet" type="text/css" href="/assets/node_modules/jquery.datetimepicker/jquery.datetimepicker.min.css"/ >
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div class="wrapper">
			<!-- header top menu Start -->
			 <header th:replace="~{fragments/modules/base/header :: header}"></header>
			<!-- header top menu end -->

            <div class="page-wrap">
				<!--=============== Left Menu side Start ================-->
				<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
				<!--=============== Left side End ================-->
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="page-header">
                            <div class="row align-items-end">
                                <div class="col-lg-8">
                                    <div class="page-header-title">
                                        <i class="far fa-calendar-plus bg-blue"></i>
                                        <div class="d-inline">
                                            <h5>Create Request</h5>
                                            <span>1913 Tax Collection Module</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="index"><i class="ik ik-home"></i></a>
                                            </li>
                                            <li class="breadcrumb-item" aria-current="page">1913 Tax Collection</li>
                                            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
							<div class="col-md-6">
                                <div class="card">
									<form class="forms-sample">
	                                    <div class="card-header"><h3>Request Form</h3></div>
	                               		<div class="card-body">
											<div class="form-group">
	                                            <label for="exampleInputPassword1">Name</label>
	                                            <input type="text" class="form-control" name="name" id="name" placeholder="Name" required>
	                                        </div>
											<div class="row">
                                                <div class="col-md-6">
													<label for="exampleInputEmail1">Property tax number</label>
													<div class="form-group input-group input-group-button">
                                                        <input type="text" class="form-control" id="ptax" placeholder="00-000-00000-000" required>
                                                        <div class="input-group-append">
                                                            <button class="btn btn-primary" type="button" id="ptaxsearchbtn" onclick="displayPtaxInfo();return false;"><i class="ik ik-search"></i></button>
                                                        </div>
                                                    </div>
			                                    </div>
                                                <div class="col-md-6">
			                                        <div class="form-group">
			                                            <label for="exampleInputUsername1">Mobile Number</label>
			                                            <input type="text" class="form-control" id="mobileno" placeholder="Enter your 10-digit mobile number" required>
			                                        </div>
			                                    </div>
                                            </div>
	                                        
	                                        <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail3">Availability Date & Time</label>
                                                        <input type="text" class="form-control" id="datetimepicker">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
		                                                <label for="exampleSelectGender">User Type</label>
		                                                <select class="form-control" id="exampleSelectGender">
		                                                    <option>Senior citizen</option>
		                                                    <option>Disability</option>
		                                                </select>
		                                            </div>
                                                </div>
                                            </div>
	                                  	</div>
	                                  	<div class="card-footer text-right">
											<button type="reset" class="btn btn-light mr-2">Cancel</button>
                                        	<button type="submit" class="btn btn-primary">Submit</button>
	                                	</div>
                                	</form>
                                </div>
                            </div>
							<div class="col-md-6">
								<div class="card">
                                    <div class="card-header"><h3>Property tax Information</h3></div>
                               		<div class="card-body" id="ptaxPersonalInfo">
									
									</div>
								</div>
							</div>
							
							<div class="card">
                                <div class="card-block">
									<div class="d-flex">
                                        <h4 class="card-title">Today tax collection request list</h4>
                                    </div>
                                </div>
                            </div>
                           
                        </div>
                    </div>
                </div>

                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
            </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="/assets/node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
        <script src="/assets/node_modules/amcharts3/amcharts/amcharts.js"></script>
        <script src="/assets/node_modules/amcharts3/amcharts/serial.js"></script>
        <script src="/assets/node_modules/amcharts3/amcharts/themes/light.js"></script>
        <script src="/assets/node_modules/jquery.datetimepicker/jquery.datetimepicker.full.min.js"></script>
       	<script>
			$(document).ready(function() {
			  // Input masking for the desired format
			  $('#ptax').mask('00-000-00000-000');
			  $('#mobileno').mask('0000000000');
			  
			  // For datetime picker
			  jQuery('#datetimepicker').datetimepicker({
				  minTime:'10:00',
				  maxTime:'18:01',
				  minDate: 0, // Today
				  //minDate:'-1970/01/2',
				  //maxDate:'+1970/01/2',
				  //timepicker:false, // Disable time picker
				  mask:true,
				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
				  weekends:['2023/08/10','2023/08/11','2023/08/12'], // Disable date on holidays
				  
				  // Disable all weekends
				  onGenerate:function( ct ){
				    jQuery(this).find('.xdsoft_date.xdsoft_weekend')
				      .addClass('xdsoft_disabled');
				  }
			  });
			  
			});
			
			function displayPtaxInfo(ptax){
				var inputElement = $('#ptax');
				
				inputElement.removeClass('is-invalid');
				
				// Disable the button to prevent multiple clicks
				$("#ptaxsearchbtn").prop("disabled", true);
				
				// Show the loading icon on the button
				$("#ptaxsearchbtn").html('<i class="fas fa-spinner fa-spin"></i>');
				  
				var ptax = inputElement.val();
				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
				
				// Check if the tax value is not null and follows the format
				if (ptax !== null && formatRegex.test(ptax)) {
				  console.log('ptax value is valid:', ptax);
				  // Check if the tax value has the correct length as per the format (15 characters)
				  if (ptax.length === 16) {
				    console.log('ptax value length is correct.');
				    getPtaxInfo(ptax);
				  } else {
				    console.log('ptax value length is incorrect.');
				    
				    inputElement.addClass('is-invalid');
				    
				    $("#ptaxsearchbtn").prop("disabled", false);
    				$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
				  }
				} else {
				  console.log('ptax value is not valid or null.');
				  
				  inputElement.addClass('is-invalid'); //Error
				  
				  $("#ptaxsearchbtn").prop("disabled", false); 
    			  $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
				}
			}
			
			function getPtaxInfo(ptax){
				//var ptax = '04-042-03251-000';
				var apiUrl = '/taxcollection/api/getPropertTaxPersonalDetails?ptax='+ptax;
				$.ajax({
				    url: apiUrl,
				    type: 'GET',
				    dataType: 'json',
				    success: function(jsonResponse) {
						// Handle the API response data here
						console.log('Data from API:', jsonResponse);
						// Parse the JSON response into a JavaScript object
						var data = jsonResponse;
						
						// Access the values
						var owner = data.PROPTAX[0].Owner;
						var address = data.PROPTAX[0].Address;
						//var famCardNo = data.PROPTAX[0].Fam_Card_No;
						var mobNo = data.PROPTAX[0].Mob_No;
						var email = data.PROPTAX[0].Email_ID;
						
						// HTML content
						var ptaxPersonalinfoHtml = '<table class="table table-borderless">' +
						           '  <tbody>' +
								   '    <tr>' +
						           '      <td>Property tax number</td>' +
						           '      <td class="font-medium">'+ptax+'</td>' +
						           '    </tr>' +
						           '    <tr>' +
						           '      <td>Owner Name</td>' +
						           '      <td class="font-medium">'+owner+'</td>' +
						           '    </tr>' +
						           '    <tr>' +
						           '      <td>Address</td>' +
						           '      <td class="font-medium">'+address+'</td>' +
						           '    </tr>' +
						           '    <tr>' +
						           '      <td>Mobile No</td>' +
						           '      <td class="font-medium">'+mobNo+'</td>' +
						           '    </tr>' +
						           '  </tbody>' +
						           '</table>';
						$("#ptaxPersonalInfo").html(ptaxPersonalinfoHtml);
						// Enable the button
						$("#ptaxsearchbtn").prop("disabled", false);
    					$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
				    },
				    error: function(xhr, status, error) {
				      // Handle errors here
				      console.error('Error fetching data:', status, error);
				      // Enable the button
				      $("#ptaxsearchbtn").prop("disabled", false);
				      $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
				    }
				});
			}
		</script>
    </body>
</html>