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.

936 lines
36 KiB

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