|
|
<!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>
|
