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.

866 lines
39 KiB

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