balaji
/
GCC_Officer_Portal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
This portal only for GCC Officers. Based on there roles and Group ID they can view there module`s Like PGR, QR Public Asset Feedback, Makkalai Thedi Mayor,etc...
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.
26 Commits
2 Branches
0 Tags
289 MiB
Branch: main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
GCC_Officer_Portal/target/classes/templates/modules/taxcollection/request-create.html

874 lines
39 KiB
Raw Permalink Normal View History

Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
​
​
​
​
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
All Modules APIS and Scripts Updated PGR PAI ERP to Loacl Db Sync and other module API and function added. V1.2
2 years ago
Main Branch Files Project is built upon this base framework with sample scripts, utilizing Java, Spring Boot, Maven, and MySQL.
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" dir="">
  3. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  5. <body>
  6. <link rel="stylesheet" type="text/css" href="node_modules/jquery.datetimepicker/jquery.datetimepicker.css"/ >
  7. <!--[if lt IE 8]>
  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>
  9. <![endif]-->
  11. <div class="wrapper">
  12. <!-- header top menu Start -->
  13. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  14. <!-- header top menu end -->
  16. <div class="page-wrap">
  17. <!--=============== Left Menu side Start ================-->
  18. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  19. <!--=============== Left side End ================-->
  20. <div class="main-content">
  21. <div class="container-fluid">
  22. <div class="page-header">
  23. <div class="row align-items-end">
  24. <div class="col-lg-8">
  25. <div class="page-header-title">
  26. <i class="far fa-calendar-plus bg-blue"></i>
  27. <div class="d-inline">
  28. <h5>Create Request</h5>
  29. <span>1913 Tax Collection Module</span>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="col-lg-4">
  34. <nav class="breadcrumb-container" aria-label="breadcrumb">
  35. <ol class="breadcrumb">
  36. <li class="breadcrumb-item">
  37. <a href="index"><i class="ik ik-home"></i></a>
  38. </li>
  39. <li class="breadcrumb-item" aria-current="page">1913 Tax Collection</li>
  40. <li class="breadcrumb-item active" aria-current="page">Create Request</li>
  41. </ol>
  42. </nav>
  43. </div>
  44. </div>
  45. </div>
  46. <hr>
  47. <div class="row">
  48. <div class="col-md-6">
  49. <div class="card">
  50. <form class="request-form" id="request-form" onsubmit="return saveRequest();">
  51. <div class="card-header"><h3>Request Form</h3></div>
  52. <div class="card-body">
  53. <div class="form-group">
  54. <label for="exampleInputPassword1">Name</label>
  55. <input type="text" class="form-control" name="name" id="name" placeholder="Name" autocomplete="off" required>
  56. </div>
  57. <div class="row">
  58. <div class="col-md-6">
  59. <label for="exampleInputEmail1">Property tax number</label>
  60. <div class="form-group input-group input-group-button">
  61. <input type="text" class="form-control" id="ptax" placeholder="00-000-00000-000" autocomplete="off" required>
  62. <div class="input-group-append">
  63. <button class="btn btn-primary" type="button" id="ptaxsearchbtn" autocomplete="off" onclick="displayPtaxInfo();return false;"><i class="ik ik-search"></i></button>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="col-md-6">
  68. <div class="form-group">
  69. <label for="exampleInputUsername1">Mobile Number</label>
  70. <input type="text" class="form-control" id="mobileno" placeholder="Enter your 10-digit mobile number" autocomplete="off" required>
  71. </div>
  72. </div>
  73. </div>
  75. <div class="row">
  76. <div class="col-md-6">
  77. <div class="form-group">
  78. <label for="availabilitydate">Availability Date & Time</label>
  79. <input type="text" class="form-control" name="availabilitydate" id="availabilitydate" placeholder="Year/Month/date Hours:Minutes" autocomplete="off" required>
  80. </div>
  81. </div>
  82. <div class="col-md-6">
  83. <div class="form-group">
  84. <label for="usertype">User Type</label>
  85. <select class="form-control" name="usertype" id="usertype" required>
  86. <option>Senior citizen</option>
  87. <option>Disability</option>
  88. </select>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="card-footer text-right">
  94. <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>
  95. <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
  96. </div>
  97. </form>
  98. </div>
  99. </div>
  100. <div class="col-md-6">
  101. <div class="card">
  102. <div class="card-header"><h3>Property tax Information</h3></div>
  103. <div class="card-body" id="ptaxPersonalInfo">
  105. </div>
  106. </div>
  107. </div>
  109. <div class="card">
  110. <div class="card-block">
  111. <div class="d-flex">
  112. <h4 class="card-title">Today tax collection request list</h4>
  114. </div>
  116. <div>
  117. <table id="requestDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
  118. <thead class="thead-dark">
  119. <tr role="row">
  120. <th class="text-center no-sort" width="1%">S.No</th>
  121. <th class="text-center" width="20%">Name</th>
  122. <th class="text-center" width="20%">Property tax number</th>
  123. <th class="text-center" width="20%">Mobile Number</th>
  124. <th class="text-center" width="20%">Availability Date</th>
  125. <th class="text-center" width="20%">User Type</th>
  126. <th class="text-center" width="20%">Status</th>
  127. <th class="text-center no-sort" style="width:50px;">Action</th>
  128. </tr>
  129. </theadclass="thead-dark">
  130. <tbody>
  131. <tr th:each="taxCollectionRequestList, i : ${taxCollectionRequestEntities}" class="taxCollectionRequestList text-capitalize">
  132. <td th:text="${i.count}">0</td>
  133. <td th:text="${taxCollectionRequestList.name}"></td>
  134. <td th:text="${taxCollectionRequestList.ptax}"></td>
  135. <td th:text="${taxCollectionRequestList.mobile}"></td>
  136. <td th:text="${taxCollectionRequestList.availabilitydate}"></td>
  137. <td th:text="${taxCollectionRequestList.usertype}"></td>
  138. <td>
  139. <a th:href="@{#}" th:text="${taxCollectionRequestList.status}" th:classappend="${taxCollectionRequestList.status == 'open'} ? 'badge badge-success mb-1' : 'badge badge-secondary mb-1'" th:onclick="return callStatusUpdate([[${taxCollectionRequestList.request_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Update Current Status" data-original-title="Update Current Status"></a>
  140. </td>
  141. <td class="text-center">
  142. <a th:href="@{#}" th:onclick="return callView([[${taxCollectionRequestList.request_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="View Request Details" data-original-title="View Request Details"><i class="ik ik-eye f-16 text-blue"></i></a>&nbsp;&nbsp;
  143. </td>
  144. </tr>
  145. </tbody>
  146. <tfoot class="thead-dark">
  147. <tr>
  148. <th class="text-center">S.No</th>
  149. <th class="text-center">Name</th>
  150. <th class="text-center">Property tax number</th>
  151. <th class="text-center">Mobile Number</th>
  152. <th class="text-center">Availability Date</th>
  153. <th class="text-center">User Type</th>
  154. <th class="text-center">Status</th>
  155. <th class="text-center">Action</th>
  156. </tr>
  157. </tfoot>
  158. </table>
  159. </div>
  160. </div>
  161. </div>
  162. <img src="/images/userimg/my.jpeg">
  163. </div>
  164. </div>
  165. </div>
  167. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  168. </div>
  169. </div>
  171. <div class="modal fade" id="taxCollectionRequestView" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
  172. <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
  173. <div class="modal-content">
  174. <div class="modal-header">
  175. <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Details</h5>
  176. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  177. </div>
  178. <div class="modal-body">
  179. <div class="row">
  181. <div class="col-xl-6 col-md-6" id="requestDetails">
  183. </div>
  184. <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="pTaxdetails">
  185. &nbsp;
  186. </div>
  187. </div>
  188. </div>
  189. <div class="modal-footer">
  190. <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  196. <div class="modal fade" id="taxCollectionRequestUpdate" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
  197. <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
  198. <div class="modal-content">
  200. <div class="modal-header">
  201. <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Status Update Form</h5>
  202. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  203. </div>
  204. <div class="modal-body">
  205. <div class="row">
  207. <div class="col-xl-6 col-md-6" id="requestDetailsUpdate">
  209. </div>
  210. <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="statusUpdateForm">
  211. &nbsp;
  212. </div>
  214. <div class="card table-card mb-0">
  216. <h5 class="text-warning pl-10 text-center">Status History</h5>
  218. <div class="card-block pb-0">
  219. <div class="table-responsive">
  220. <table class="table table-hover mb-0">
  221. <thead>
  222. <tr>
  223. <th>Company</th>
  224. <th>Start Date</th>
  225. <th>End Date</th>
  226. <th>Status</th>
  227. </tr>
  228. </thead>
  229. <tbody>
  230. <tr>
  231. <td>Apple Company</td>
  232. <td>23/05/2017</td>
  233. <td>04/08/2018</td>
  234. <td><label class="badge badge-success">Paid</label></td>
  235. </tr>
  236. </tbody>
  237. </table>
  238. </div>
  239. </div>
  240. </div>
  242. </div>
  243. </div>
  244. <div class="modal-footer">
  245. <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
  246. </div>
  248. </div>
  249. </div>
  250. </div>
  252. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  254. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  255. <script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
  256. <script src="node_modules/amcharts3/amcharts/amcharts.js"></script>
  257. <script src="node_modules/amcharts3/amcharts/serial.js"></script>
  258. <script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
  259. <script src="node_modules/jquery.datetimepicker/jquery.datetimepicker.full.min.js"></script>
  260. <script th:inline="javascript">
  261. var loginUserID = /*[[${LoginUserId}]]*/'';
  262. $(document).ready(function() {
  263. // Input masking for the desired format
  264. $('#ptax').mask('00-000-00000-000');
  265. $('#mobileno').mask('0000000000');
  267. // For datetime picker
  268. jQuery('#availabilitydate').datetimepicker({
  269. minTime:'10:00',
  270. maxTime:'18:01',
  271. minDate: 0, // Today
  272. //minDate:'-1970/01/2',
  273. //maxDate:'+1970/01/2',
  274. //timepicker:false, // Disable time picker
  275. mask:false,
  276. disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
  277. disabledDates:['2023/08/31','2023/08/11','2023/08/12'], // Disable date on holidays
  278. /*
  279. // Disable all weekends
  280. onGenerate:function( ct ){
  281. jQuery(this).find('.xdsoft_date.xdsoft_weekend')
  282. .addClass('xdsoft_disabled');
  283. }
  284. */
  285. });
  287. });
  289. function displayPtaxInfo(ptax){
  290. var inputElement = $('#ptax');
  292. inputElement.removeClass('is-invalid');
  294. // Disable the button to prevent multiple clicks
  295. $("#ptaxsearchbtn").prop("disabled", true);
  297. // Show the loading icon on the button
  298. $("#ptaxsearchbtn").html('<i class="fas fa-spinner fa-spin"></i>');
  300. var ptax = inputElement.val();
  301. var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
  303. // Check if the tax value is not null and follows the format
  304. if (ptax !== null && formatRegex.test(ptax)) {
  305. console.log('ptax value is valid:', ptax);
  306. // Check if the tax value has the correct length as per the format (15 characters)
  307. if (ptax.length === 16) {
  308. console.log('ptax value length is correct.');
  309. getPtaxInfo(ptax);
  310. } else {
  311. console.log('ptax value length is incorrect.');
  313. inputElement.addClass('is-invalid');
  315. $("#ptaxsearchbtn").prop("disabled", false);
  316. $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
  317. }
  318. } else {
  319. console.log('ptax value is not valid or null.');
  321. inputElement.addClass('is-invalid'); //Error
  323. $("#ptaxsearchbtn").prop("disabled", false);
  324. $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
  325. }
  326. }
  328. function getPtaxInfo(ptax){
  329. call_loading('ptaxPersonalInfo','start');
  330. //var ptax = '04-042-03251-000';
  331. var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
  332. $.ajax({
  333. url: apiUrl,
  334. type: 'GET',
  335. dataType: 'json',
  336. success: function(jsonResponse) {
  337. // Handle the API response data here
  338. console.log('Data from API:', jsonResponse);
  340. // Parse the JSON response into a JavaScript object
  341. var data = jsonResponse;
  342. if(data.ResultStatus=="False")
  343. {
  344. $("#ptaxPersonalInfo").html("<center>"+nodata(data.Message)+"</center>");
  345. $("#ptaxsearchbtn").prop("disabled", false);
  346. $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
  347. }
  348. else{
  349. // Access the values
  350. var owner = data.PROPTAX[0].Owner;
  351. var address = data.PROPTAX[0].Address;
  352. //var famCardNo = data.PROPTAX[0].Fam_Card_No;
  353. var mobNo = data.PROPTAX[0].Mob_No;
  354. var email = data.PROPTAX[0].Email_ID;
  356. // HTML content
  357. var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
  358. ' <tbody>' +
  359. ' <tr>' +
  360. ' <td>Property tax number</td>' +
  361. ' <td class="font-medium">'+ptax+'</td>' +
  362. ' </tr>' +
  363. ' <tr>' +
  364. ' <td>Owner Name</td>' +
  365. ' <td class="font-medium">'+owner+'</td>' +
  366. ' </tr>' +
  367. ' <tr>' +
  368. ' <td>Address</td>' +
  369. ' <td class="font-medium">'+address+'</td>' +
  370. ' </tr>' +
  371. ' <tr>' +
  372. ' <td>Mobile No</td>' +
  373. ' <td class="font-medium">'+mobNo+'</td>' +
  374. ' </tr>' +
  375. ' </tbody>' +
  376. '</table>';
  377. $("#ptaxPersonalInfo").html(ptaxPersonalinfoHtml);
  378. // Enable the button
  379. $("#ptaxsearchbtn").prop("disabled", false);
  380. $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
  381. }
  382. },
  383. error: function(xhr, status, error) {
  384. // Handle errors here
  385. console.error('Error fetching data:', status, error);
  386. // Enable the button
  387. $("#ptaxsearchbtn").prop("disabled", false);
  388. $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
  389. }
  390. });
  391. }
  393. function saveRequest(){
  394. // Disable the button to prevent multiple clicks
  395. $("#requestSubmitBtn").prop("disabled", true);
  397. // Show the loading icon on the button
  398. $("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
  399. var name = $('#name').val();
  401. var inputElement = $('#ptax');
  402. var ptax = inputElement.val();
  403. var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
  404. inputElement.removeClass('is-invalid');
  406. var inputElementMobileNo = $('#mobileno');
  407. var mobileNo = inputElementMobileNo.val();
  408. var mobileFormatRegex = /^\d{10}$/; //'0000000000';
  409. inputElementMobileNo.removeClass('is-invalid');
  411. var inputElementUsertype = $('#usertype');
  412. var usertype = inputElementUsertype.val();
  413. //inputElementUsertype.removeClass('is-invalid');
  415. var inputElementAvailabilityDate = $('#availabilitydate');
  416. var availabilitydate = inputElementAvailabilityDate.val();
  418. var selectedDateTime = new Date(availabilitydate);
  419. var currentDateTime = new Date();
  421. if (selectedDateTime < currentDateTime) {
  422. alert('Selected date and time must be greater than or equal to the current date and time.');
  423. inputElementAvailabilityDate.addClass('is-invalid');
  424. $("#requestSubmitBtn").prop("disabled", false);
  425. $("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
  426. return false; // Prevent form submission
  427. }
  429. var formData = new FormData();
  431. // Check if the tax value is not null and follows the format
  432. if (ptax !== null && formatRegex.test(ptax) && ptax.length == 16) {
  434. // Mobile number Check
  435. if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
  436. $("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Submitting your request, please wait...');
  438. formData.append('name',name);
  439. formData.append('ptax', ptax );
  440. formData.append('mobile', mobileNo );
  441. formData.append('usertype', usertype );
  442. formData.append('availabilitydate', availabilitydate);
  443. formData.append('created_by', loginUserID);
  445. submitSaveRequest(formData);
  447. $("#requestSubmitBtn").html('Your request has been successfully submitted!');
  448. } else {
  449. inputElementMobileNo.addClass('is-invalid');
  450. $("#requestSubmitBtn").prop("disabled", false);
  451. $("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
  452. }
  454. } else {
  455. console.log('ptax value is not valid or null.');
  457. inputElement.addClass('is-invalid'); //Error
  459. $("#requestSubmitBtn").prop("disabled", false);
  460. $("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
  461. }
  462. return false;
  463. }
  465. function submitSaveRequest(formData){
  466. $.ajax({
  467. type: "POST",
  468. url: '/gcc/api/taxcollection/saveTaxCollectionRequest',
  469. data: formData,
  470. contentType: false,
  471. processData: false,
  472. }).done(function(response) {
  473. Swal.fire(
  474. 'Complaint Status Update!',
  475. 'Complaint closed Successfully!',
  476. 'success'
  477. ).then(() => {
  478. location.reload();
  479. });
  481. }).fail(function(jqXHR, textStatus, errorThrown) {
  482. $("#requestSubmitBtn").prop("disabled", false);
  483. // Log the error and any relevant information
  484. console.error("Error sending request: " + textStatus + " " + errorThrown);
  486. });
  487. }
  488. </script>
  489. <script>
  490. $(document).ready(function() {
  492. // DataTables buttons configuration
  493. var buttons = [
  494. {
  495. extend: 'pageLength',
  496. className: 'btn btn-warning'
  497. },
  498. {
  499. title: 'Data export',
  500. extend: 'copyHtml5',
  501. text: 'Copy',
  502. className: 'btn btn-secondary',
  503. id: 'copyBtn'
  504. },
  505. {
  506. extend: 'excelHtml5',
  507. text: 'Excel',
  508. className: 'btn btn-secondary',
  509. id: 'excelBtn'
  510. },
  511. {
  512. extend: 'csvHtml5',
  513. text: 'CSV',
  514. className: 'btn btn-secondary',
  515. id: 'csvBtn'
  516. },
  517. {
  518. extend: 'pdfHtml5',
  519. text: 'PDF',
  520. className: 'btn btn-secondary',
  521. id: 'pdfBtn'
  522. },
  524. ];
  526. $('#requestDatatable').DataTable( {
  527. dom: 'Bftip',
  528. columnDefs: [
  529. { targets: 'no-sort', orderable: false }
  530. ],
  531. lengthMenu: [
  532. [ 50, 100, 200, 500, -1 ],
  533. [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
  534. ],
  535. scrollY: '50vh',
  536. fixedColumns: {
  537. left: 1,
  538. right: 1
  539. },
  540. buttons: [buttons],
  541. fixedHeader: true,
  542. autoWidth: true,
  543. responsive: true,
  544. searching: false,
  545. select: false,
  546. processing: false,
  547. } );
  548. } );
  550. function callView(request_id){
  551. $('#taxCollectionRequestView').modal({
  552. backdrop: 'static',
  553. keyboard: false
  554. })
  555. $('#taxCollectionRequestView').modal('show');
  557. call_loading('requestDetails','start');
  558. getTaxCollectionRequestDetails(request_id);
  559. call_loading('pTaxdetails','start');
  561. return false;
  562. }
  564. function getTaxCollectionRequestDetails(request_id){
  565. var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
  566. $.ajax({
  567. url: apiUrl,
  568. type: 'GET',
  569. dataType: 'json',
  570. success: function(jsonResponse) {
  571. // Handle the API response data here
  572. console.log('Data from API:', jsonResponse);
  573. // Parse the JSON response into a JavaScript object
  574. var data = jsonResponse;
  576. // Access the values
  577. var request_id = data.request_id;
  578. var requestNo = data.requestNo;
  579. var name = data.name;
  580. var mobile = data.mobile;
  581. var ptax = data.ptax;
  582. var usertype = data.usertype;
  583. var availabilitydate = data.availabilitydate;
  584. var status = data.status;
  585. var cdate = data.cDate;
  587. // HTML content
  588. var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
  589. ' <tbody>' +
  590. ' <tr>' +
  591. ' <td>Name</td>' +
  592. ' <td class="font-medium">'+name+'</td>' +
  593. ' </tr>' +
  594. ' <tr>' +
  595. ' <td>Property tax number</td>' +
  596. ' <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
  597. ' </tr>' +
  598. ' <tr>' +
  599. ' <td>Mobile Number</td>' +
  600. ' <td class="font-medium">'+mobile+'</td>' +
  601. ' </tr>' +
  602. ' <tr>' +
  603. ' <td>Availability Date & Time</td>' +
  604. ' <td class="font-medium">'+availabilitydate+'</td>' +
  605. ' </tr>' +
  606. ' <tr>' +
  607. ' <td>User Type</td>' +
  608. ' <td class="font-medium">'+usertype+'</td>' +
  609. ' </tr>' +
  610. ' <tr>' +
  611. ' <td>Current Status</td>' +
  612. ' <td class="font-medium">'+status+'</td>' +
  613. ' </tr>' +
  614. ' <tr>' +
  615. ' <td>Request Created On</td>' +
  616. ' <td class="font-medium">'+cdate+'</td>' +
  617. ' </tr>' +
  618. ' </tbody>' +
  619. '</table>';
  620. $("#requestDetails").html(ptaxPersonalinfoHtml);
  621. getpTaxDetails(ptax);
  622. },
  623. error: function(xhr, status, error) {
  624. // Handle errors here
  625. console.error('Error fetching collection reqtest data:', status, error);
  627. }
  628. });
  629. }
  631. function getpTaxDetails(ptax){
  633. var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
  634. $.ajax({
  635. url: apiUrl,
  636. type: 'GET',
  637. dataType: 'json',
  638. success: function(jsonResponse) {
  639. // Handle the API response data here
  640. console.log('Data from API:', jsonResponse);
  641. // Parse the JSON response into a JavaScript object
  642. var data = jsonResponse;
  643. if (data.ResultStatus === "True") {
  644. // Access the values
  645. var owner = data.PROPTAX[0].Owner;
  646. var address = data.PROPTAX[0].Address;
  647. var mobNo = data.PROPTAX[0].Mob_No;
  648. var email = data.PROPTAX[0].Email_ID;
  650. // HTML content
  651. var ptaxPersonalinfoHtml = '<table class="table table-borderless">' +
  652. ' <tbody>' +
  653. ' <tr>' +
  654. ' <td>Property tax number</td>' +
  655. ' <td class="font-medium">'+ptax+'</td>' +
  656. ' </tr>' +
  657. ' <tr>' +
  658. ' <td>Owner Name</td>' +
  659. ' <td class="font-medium">'+owner+'</td>' +
  660. ' </tr>' +
  661. ' <tr>' +
  662. ' <td>Address</td>' +
  663. ' <td class="font-medium">'+address+'</td>' +
  664. ' </tr>' +
  665. ' <tr>' +
  666. ' <td>Mobile No</td>' +
  667. ' <td class="font-medium">'+mobNo+'</td>' +
  668. ' </tr>' +
  669. ' </tbody>' +
  670. '</table>';
  671. $("#pTaxdetails").html(ptaxPersonalinfoHtml);
  673. // if Ptax data fetched then load valid message
  674. 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>';
  675. $("#pTaxVerification").html(validPtax);
  676. }
  677. else {
  678. // No data found
  679. console.log("Message: " + data.Message);
  680. 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>';
  681. $("#pTaxVerification").html(inValidPtax);
  683. $("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
  684. }
  685. // Enable tooltip for model page
  686. $('[data-toggle="tooltip"]').tooltip();
  687. },
  688. error: function(xhr, status, error) {
  689. // Handle errors here
  690. console.error('Error fetching pTax data:', status, error);
  692. }
  693. });
  694. }
  696. function callStatusUpdate(request_id){
  697. $('#taxCollectionRequestUpdate').modal({
  698. backdrop: 'static',
  699. keyboard: false
  700. })
  701. $('#taxCollectionRequestUpdate').modal('show');
  703. call_loading('requestDetailsUpdate','start');
  704. getTaxCollectionRequestUpdate(request_id);
  705. call_loading('statusUpdateForm','start');
  707. return false;
  708. }
  710. function getTaxCollectionRequestUpdate(request_id){
  711. var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
  712. $.ajax({
  713. url: apiUrl,
  714. type: 'GET',
  715. dataType: 'json',
  716. success: function(jsonResponse) {
  717. // Handle the API response data here
  718. console.log('Data from API:', jsonResponse);
  719. // Parse the JSON response into a JavaScript object
  720. var data = jsonResponse;
  722. // Access the values
  723. var request_id = data.request_id;
  724. var requestNo = data.requestNo;
  725. var name = data.name;
  726. var mobile = data.mobile;
  727. var ptax = data.ptax;
  728. var usertype = data.usertype;
  729. var availabilitydate = data.availabilitydate;
  730. var status = data.status;
  731. var cdate = data.cDate;
  733. // HTML content
  734. var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
  735. ' <tbody>' +
  736. ' <tr>' +
  737. ' <td>Name</td>' +
  738. ' <td class="font-medium">'+name+'</td>' +
  739. ' </tr>' +
  740. ' <tr>' +
  741. ' <td>Property tax number</td>' +
  742. ' <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
  743. ' </tr>' +
  744. ' <tr>' +
  745. ' <td>Mobile Number</td>' +
  746. ' <td class="font-medium">'+mobile+'</td>' +
  747. ' </tr>' +
  748. ' <tr>' +
  749. ' <td>Availability Date & Time</td>' +
  750. ' <td class="font-medium">'+availabilitydate+'</td>' +
  751. ' </tr>' +
  752. ' <tr>' +
  753. ' <td>User Type</td>' +
  754. ' <td class="font-medium">'+usertype+'</td>' +
  755. ' </tr>' +
  756. ' <tr>' +
  757. ' <td>Current Status</td>' +
  758. ' <td class="font-medium">'+status+'</td>' +
  759. ' </tr>' +
  760. ' <tr>' +
  761. ' <td>Request Created On</td>' +
  762. ' <td class="font-medium">'+cdate+'</td>' +
  763. ' </tr>' +
  764. ' </tbody>' +
  765. '</table>';
  766. $("#requestDetailsUpdate").html(ptaxPersonalinfoHtml);
  767. showStatusUpdateForm(request_id, status);
  768. },
  769. error: function(xhr, status, error) {
  770. // Handle errors here
  771. console.error('Error fetching collection reqtest data:', status, error);
  773. }
  774. });
  775. }
  777. function showStatusUpdateForm(request_id, status){
  779. var selectInput = `<select class="form-control" name="requestStatus" id="requestStatus" required>
  780. <option value="open">Open</option>
  781. <option value="close">Close</option>
  782. </select>`;
  784. var textareaInput=`<textarea class="form-control" name="statusComments" id="statusComments" rows="4"></textarea>`;
  786. var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
  787. '<div class="card table-card mb-0"><div class="card-header" style="background-color: #ffe1003b !important;"><h3>Update Form</h3></div>' +
  788. '<div class="card-block p-0">' +
  789. '<table class="table table-borderless">' +
  790. ' <tbody>' +
  791. ' <tr>' +
  792. ' <td width="30%">Current Status</td>' +
  793. ' <td class="font-medium">'+selectInput+'</td>' +
  794. ' </tr>' +
  795. ' <tr>' +
  796. ' <td colspan="2">Status Comments' + textareaInput+'</td>' +
  797. ' </tr>' +
  798. ' </tbody>' +
  799. '</table>' +
  800. '</div><div class="card-footer text-center">' +
  801. ' <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
  802. ' <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
  803. '</div></div></form>';
  805. $("#statusUpdateForm").html(ptaxPersonalinfoHtml);
  808. var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
  809. $.ajax({
  810. url: apiUrl,
  811. type: 'GET',
  812. dataType: 'json',
  813. success: function(jsonResponse) {
  814. // Handle the API response data here
  815. console.log('Data from API:', jsonResponse);
  816. // Parse the JSON response into a JavaScript object
  817. var data = jsonResponse;
  818. if (data.ResultStatus === "True") {
  819. // Access the values
  820. var owner = data.PROPTAX[0].Owner;
  821. var address = data.PROPTAX[0].Address;
  822. var mobNo = data.PROPTAX[0].Mob_No;
  823. var email = data.PROPTAX[0].Email_ID;
  825. // HTML content
  826. var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
  827. '<div class="card table-card"><div class="card-header"><h3>Update Form</h3></div>' +
  828. '<div class="card-block">' +
  829. '<table class="table table-borderless">' +
  830. ' <tbody>' +
  831. ' <tr>' +
  832. ' <td>Current Status</td>' +
  833. ' <td class="font-medium">'+ptax+'</td>' +
  834. ' </tr>' +
  835. ' <tr>' +
  836. ' <td>Status Comments</td>' +
  837. ' <td class="font-medium">'+owner+'</td>' +
  838. ' </tr>' +
  839. ' <tr>' +
  840. ' <td>Address</td>' +
  841. ' <td class="font-medium">'+
  843. ' </td>' +
  844. ' </tr>' +
  845. ' </tbody>' +
  846. '</table>' +
  847. '</div><div class="card-footer text-center">' +
  848. ' <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
  849. ' <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
  850. '</div></div></form>';
  851. $("#statusUpdateForm").html(ptaxPersonalinfoHtml);
  852. }
  853. else {
  854. // No data found
  855. console.log("Status history: " + data.Message);
  856. //$("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
  857. }
  858. // Enable tooltip for model page
  859. $('[data-toggle="tooltip"]').tooltip();
  860. },
  861. error: function(xhr, status, error) {
  862. // Handle errors here
  863. console.error('Error fetching Status history:', status, error);
  865. }
  866. });
  867. }
  869. function saveStatus(){
  870. return false;
  871. }
  872. </script>
  873. </body>
  874. </html>