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.
 
 
 
 

961 lines
36 KiB

<!DOCTYPE html>
<html lang="en" dir="">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f8f9fa;
}
.card {
border-radius: 15px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.community-hall-title {
color: #007bff;
}
textarea {
/* width: 200px;
height:15px;
line-height:15px;
min-width: 200px;
max-width: 300px; */
transition: width 0.25s;
resize: none;
overflow: hidden;
}
/* Add your custom styles here */
@media (max-width: 576px) {
/* Small devices (576px and down) */
.community-hall-title {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="/assets/node_modules/jquery.datetimepicker/jquery.datetimepicker.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 New Circular</h5>
<span>Circular 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">Circular</li>
<li class="breadcrumb-item active" aria-current="page">Create
Circular</li>
</ol>
</nav>
</div>
</div>
</div>
<hr>
<div class="container-fluid">
<div class="row justify-content-center align-items-center ">
<div class="col-12 col-md-10">
<div class="card">
<form class="request-form" id="request-form"
onsubmit="return saveRequest();">
<div class="card-header" style="height: 20px">
<h3>Form</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">
<div class="col-md-12 ">
<div class="form-group">
<label for="usertype">Document Category :</label> <select
class="form-control" name="usertype" id="usertype"
required>
<option>Common</option>
<option>Flood</option>
</select>
</div>
</div>
</div>
<div class="col-6">
<div class="col-md-12">
<div class="form-group">
<label for="usertype">Type :</label> <select
class="form-control" name="usertype" id="usertype"
required>
<option>Circular</option>
<option>Minutes</option>
<option>Regular Report</option>
<option>Rainfall Report</option>
</select>
</div>
</div>
</div>
<!-- </div> -->
<!-- <div class="row"> -->
<div class="col-6">
<div class="col-md-12">
<div class="form-group">
<label for="usertype">From Department :</label> <select
class="form-control" name="usertype" id="usertype"
required>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="col-6">
<div class="col-md-12">
<div class="form-group">
<label for="availabilitydate">Date :</label> <input
type="text" class="form-control"
name="availabilitydate" id="availabilitydate"
placeholder="Year/Month/date Hours:Minutes"
autocomplete="off" required>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-6">
<div class="col-md-12">
<div class="form-group">
<label for="textarea2">Subject</label>
<textarea class="form-control" id="textarea2" rows="5"
placeholder="Subject"
data-autosize-input='{ "space": 40 }'></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="row"> -->
<!-- <div class="form-group">
<h7 class="mb-2 pb-1">
SMS :
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="sms" id="common" value="option1" /> <label
class="form-check-label" for="common">Send</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="sms" id="flood" value="option2" /> <label
class="form-check-label" for="flood">Not Send</label>
</div>
</h7>
</div> -->
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="usertype">SMS :</label> <select
class="form-control" name="usertype" id="usertype"
required>
<option>Send</option>
<option>Not Send</option>
</select>
</div>
</div>
<div class="col-md-9">
<div class="form-group">
<label for="exampleInputPassword1">SMS Subject</label> <input
type="text" class="form-control" name="name" id="name"
placeholder="SMS Subject" autocomplete="off"
maxlength="87" required>
</div>
</div>
</div>
<!-- <div class="form-group">
<label for="textarea2">Subject :</label>
<textarea class="form-control" id="textarea2" rows="1"></textarea>
</div> -->
<div class="col-md-6">
<label for="file" class="col-form-label">Select
File:</label>
<div class="custom-file">
<input type="file" class="file" id="file" name="file"
required onchange="updateFileName(this)"> <label
class="custom-file-label" for="file" id="fileLabel">Choose
file</label>
</div>
</div>
</div>
<div class="card-footer text-right" style="height: 52px">
<button type="reset" class="btn btn-secondary mr-2">
<i class="ik ik-refresh-cw"></i>Reset
</button>
<button type="submit" class="btn btn-success"
id="requestSubmitBtn">
<i class="ik ik-save"></i>Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
</div>
</div>
<!-- <div class="modal fade" id="taxCollectionRequestView" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xl-6 col-md-6" id="requestDetails">
</div>
<div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="pTaxdetails">
&nbsp;
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
</div>
</div>
</div>
</div> -->
<!-- <div class="modal fade" id="taxCollectionRequestUpdate" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Status Update Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xl-6 col-md-6" id="requestDetailsUpdate">
</div>
<div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="statusUpdateForm">
&nbsp;
</div>
<div class="card table-card mb-0">
<h5 class="text-warning pl-10 text-center">Status History</h5>
<div class="card-block pb-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Company</th>
<th>Start Date</th>
<th>End Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple Company</td>
<td>23/05/2017</td>
<td>04/08/2018</td>
<td><label class="badge badge-success">Paid</label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
</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="/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 th:inline="javascript">
var loginUserID = /*[[${LoginUserId}]]*/'';
$(document).ready(function() {
// Input masking for the desired format
$('#ptax').mask('00-000-00000-000');
$('#mobileno').mask('0000000000');
// For datetime picker
jQuery('#availabilitydate').datetimepicker({
minTime:'10:00',
maxTime:'18:01',
minDate: 0, // Today
//minDate:'-1970/01/2',
//maxDate:'+1970/01/2',
//timepicker:false, // Disable time picker
mask:false,
disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
disabledDates:['2023/08/31','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');
}
*/
});
});
$('textarea').on({input: function(){
var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).css({'height':totalHeight});
}
});
function updateFileName(input) {
var fileName = input.files[0].name;
document.getElementById('fileLabel').innerText = fileName;
}
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){
call_loading('ptaxPersonalInfo','start');
//var ptax = '04-042-03251-000';
var apiUrl = '/api/taxcollection/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 text-capitalize">' +
' <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>');
}
});
}
function saveRequest(){
// Disable the button to prevent multiple clicks
$("#requestSubmitBtn").prop("disabled", true);
// Show the loading icon on the button
$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
var name = $('#name').val();
var inputElement = $('#ptax');
var ptax = inputElement.val();
var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
inputElement.removeClass('is-invalid');
var inputElementMobileNo = $('#mobileno');
var mobileNo = inputElementMobileNo.val();
var mobileFormatRegex = /^\d{10}$/; //'0000000000';
inputElementMobileNo.removeClass('is-invalid');
var inputElementUsertype = $('#usertype');
var usertype = inputElementUsertype.val();
//inputElementUsertype.removeClass('is-invalid');
var inputElementAvailabilityDate = $('#availabilitydate');
var availabilitydate = inputElementAvailabilityDate.val();
var selectedDateTime = new Date(availabilitydate);
var currentDateTime = new Date();
if (selectedDateTime < currentDateTime) {
alert('Selected date and time must be greater than or equal to the current date and time.');
inputElementAvailabilityDate.addClass('is-invalid');
$("#requestSubmitBtn").prop("disabled", false);
$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
return false; // Prevent form submission
}
var formData = new FormData();
// Check if the tax value is not null and follows the format
if (ptax !== null && formatRegex.test(ptax) && ptax.length == 16) {
// Mobile number Check
if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Submitting your request, please wait...');
formData.append('name',name);
formData.append('ptax', ptax );
formData.append('mobile', mobileNo );
formData.append('usertype', usertype );
formData.append('availabilitydate', availabilitydate);
formData.append('created_by', loginUserID);
submitSaveRequest(formData);
$("#requestSubmitBtn").html('Your request has been successfully submitted!');
} else {
inputElementMobileNo.addClass('is-invalid');
$("#requestSubmitBtn").prop("disabled", false);
$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
}
} else {
console.log('ptax value is not valid or null.');
inputElement.addClass('is-invalid'); //Error
$("#requestSubmitBtn").prop("disabled", false);
$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
}
return false;
}
function submitSaveRequest(formData){
$.ajax({
type: "POST",
url: '/api/taxcollection/saveTaxCollectionRequest',
data: formData,
contentType: false,
processData: false,
}).done(function(response) {
Swal.fire(
'Complaint Status Update!',
'Complaint closed Successfully!',
'success'
).then(() => {
location.reload();
});
}).fail(function(jqXHR, textStatus, errorThrown) {
$("#requestSubmitBtn").prop("disabled", false);
// Log the error and any relevant information
console.error("Error sending request: " + textStatus + " " + errorThrown);
});
}
</script>
<!-- <script>
$(document).ready(function() {
// DataTables buttons configuration
var 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'
},
];
$('#requestDatatable').DataTable( {
dom: 'Bftip',
columnDefs: [
{ targets: 'no-sort', orderable: false }
],
lengthMenu: [
[ 50, 100, 200, 500, -1 ],
[ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
],
scrollY: '50vh',
fixedColumns: {
left: 1,
right: 1
},
buttons: [buttons],
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: false,
select: false,
processing: false,
} );
} );
function callView(request_id){
$('#taxCollectionRequestView').modal({
backdrop: 'static',
keyboard: false
})
$('#taxCollectionRequestView').modal('show');
call_loading('requestDetails','start');
getTaxCollectionRequestDetails(request_id);
call_loading('pTaxdetails','start');
return false;
}
function getTaxCollectionRequestDetails(request_id){
var apiUrl = '/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
$.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 request_id = data.request_id;
var requestNo = data.requestNo;
var name = data.name;
var mobile = data.mobile;
var ptax = data.ptax;
var usertype = data.usertype;
var availabilitydate = data.availabilitydate;
var status = data.status;
var cdate = data.cDate;
// HTML content
var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
' <tbody>' +
' <tr>' +
' <td>Name</td>' +
' <td class="font-medium">'+name+'</td>' +
' </tr>' +
' <tr>' +
' <td>Property tax number</td>' +
' <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
' </tr>' +
' <tr>' +
' <td>Mobile Number</td>' +
' <td class="font-medium">'+mobile+'</td>' +
' </tr>' +
' <tr>' +
' <td>Availability Date & Time</td>' +
' <td class="font-medium">'+availabilitydate+'</td>' +
' </tr>' +
' <tr>' +
' <td>User Type</td>' +
' <td class="font-medium">'+usertype+'</td>' +
' </tr>' +
' <tr>' +
' <td>Current Status</td>' +
' <td class="font-medium">'+status+'</td>' +
' </tr>' +
' <tr>' +
' <td>Request Created On</td>' +
' <td class="font-medium">'+cdate+'</td>' +
' </tr>' +
' </tbody>' +
'</table>';
$("#requestDetails").html(ptaxPersonalinfoHtml);
getpTaxDetails(ptax);
},
error: function(xhr, status, error) {
// Handle errors here
console.error('Error fetching collection reqtest data:', status, error);
}
});
}
function getpTaxDetails(ptax){
var apiUrl = '/api/taxcollection/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;
if (data.ResultStatus === "True") {
// Access the values
var owner = data.PROPTAX[0].Owner;
var address = data.PROPTAX[0].Address;
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>';
$("#pTaxdetails").html(ptaxPersonalinfoHtml);
// if Ptax data fetched then load valid message
var validPtax = ptax+'&nbsp;<font class="custom-tooltip-success"><a href="#" class="text-success" onclick="return false;" data-container=".custom-tooltip-success" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify success" data-original-title="Property tax number cross-verify success"><i class="ik ik-check-circle"></i></font>';
$("#pTaxVerification").html(validPtax);
}
else {
// No data found
console.log("Message: " + data.Message);
var inValidPtax = ptax+'&nbsp;<font class="custom-tooltip-warning"><a href="#" class="text-warning" onclick="return false;" data-container=".custom-tooltip-warning" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify failed" data-original-title="Property tax number cross-verify failed"><i class="ik ik-alert-triangle"></i></font>';
$("#pTaxVerification").html(inValidPtax);
$("#pTaxdetails").html('<center><img src="/assets/images/nodata.png"></br>No Record Found</center>');
}
// Enable tooltip for model page
$('[data-toggle="tooltip"]').tooltip();
},
error: function(xhr, status, error) {
// Handle errors here
console.error('Error fetching pTax data:', status, error);
}
});
}
function callStatusUpdate(request_id){
$('#taxCollectionRequestUpdate').modal({
backdrop: 'static',
keyboard: false
})
$('#taxCollectionRequestUpdate').modal('show');
call_loading('requestDetailsUpdate','start');
getTaxCollectionRequestUpdate(request_id);
call_loading('statusUpdateForm','start');
return false;
}
function getTaxCollectionRequestUpdate(request_id){
var apiUrl = '/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
$.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 request_id = data.request_id;
var requestNo = data.requestNo;
var name = data.name;
var mobile = data.mobile;
var ptax = data.ptax;
var usertype = data.usertype;
var availabilitydate = data.availabilitydate;
var status = data.status;
var cdate = data.cDate;
// HTML content
var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
' <tbody>' +
' <tr>' +
' <td>Name</td>' +
' <td class="font-medium">'+name+'</td>' +
' </tr>' +
' <tr>' +
' <td>Property tax number</td>' +
' <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
' </tr>' +
' <tr>' +
' <td>Mobile Number</td>' +
' <td class="font-medium">'+mobile+'</td>' +
' </tr>' +
' <tr>' +
' <td>Availability Date & Time</td>' +
' <td class="font-medium">'+availabilitydate+'</td>' +
' </tr>' +
' <tr>' +
' <td>User Type</td>' +
' <td class="font-medium">'+usertype+'</td>' +
' </tr>' +
' <tr>' +
' <td>Current Status</td>' +
' <td class="font-medium">'+status+'</td>' +
' </tr>' +
' <tr>' +
' <td>Request Created On</td>' +
' <td class="font-medium">'+cdate+'</td>' +
' </tr>' +
' </tbody>' +
'</table>';
$("#requestDetailsUpdate").html(ptaxPersonalinfoHtml);
showStatusUpdateForm(request_id, status);
},
error: function(xhr, status, error) {
// Handle errors here
console.error('Error fetching collection reqtest data:', status, error);
}
});
}
function showStatusUpdateForm(request_id, status){
var selectInput = `<select class="form-control" name="requestStatus" id="requestStatus" required>
<option value="open">Open</option>
<option value="close">Close</option>
</select>`;
var textareaInput=`<textarea class="form-control" name="statusComments" id="statusComments" rows="4"></textarea>`;
var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
'<div class="card table-card mb-0"><div class="card-header" style="background-color: #ffe1003b !important;"><h3>Update Form</h3></div>' +
'<div class="card-block p-0">' +
'<table class="table table-borderless">' +
' <tbody>' +
' <tr>' +
' <td width="30%">Current Status</td>' +
' <td class="font-medium">'+selectInput+'</td>' +
' </tr>' +
' <tr>' +
' <td colspan="2">Status Comments' + textareaInput+'</td>' +
' </tr>' +
' </tbody>' +
'</table>' +
'</div><div class="card-footer text-center">' +
' <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
' <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
'</div></div></form>';
$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
var apiUrl = '/api/taxcollection/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;
if (data.ResultStatus === "True") {
// Access the values
var owner = data.PROPTAX[0].Owner;
var address = data.PROPTAX[0].Address;
var mobNo = data.PROPTAX[0].Mob_No;
var email = data.PROPTAX[0].Email_ID;
// HTML content
var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
'<div class="card table-card"><div class="card-header"><h3>Update Form</h3></div>' +
'<div class="card-block">' +
'<table class="table table-borderless">' +
' <tbody>' +
' <tr>' +
' <td>Current Status</td>' +
' <td class="font-medium">'+ptax+'</td>' +
' </tr>' +
' <tr>' +
' <td>Status Comments</td>' +
' <td class="font-medium">'+owner+'</td>' +
' </tr>' +
' <tr>' +
' <td>Address</td>' +
' <td class="font-medium">'+
' </td>' +
' </tr>' +
' </tbody>' +
'</table>' +
'</div><div class="card-footer text-center">' +
' <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
' <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
'</div></div></form>';
$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
}
else {
// No data found
console.log("Status history: " + data.Message);
//$("#pTaxdetails").html('<center><img src="/assets/images/nodata.png"></br>No Record Found</center>');
}
// Enable tooltip for model page
$('[data-toggle="tooltip"]').tooltip();
},
error: function(xhr, status, error) {
// Handle errors here
console.error('Error fetching Status history:', status, error);
}
});
}
function saveStatus(){
return false;
}
</script> -->
</body>
</html>