You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
12 KiB
256 lines
12 KiB
<!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>
|