You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

961 lines
36 KiB

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