This portal only for GCC Officers. Based on there roles and Group ID they can view there module`s Like PGR, QR Public Asset Feedback, Makkalai Thedi Mayor,etc...
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

979 lines
42 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/modules/base/head :: head}">
  4. </head>
  5. <style>
  6. .required {
  7. color: red;
  8. }
  9. .card-box {
  10. box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
  11. }
  12. #modalBody h4 {
  13. font-weight: bold;
  14. margin-top: 15px;
  15. margin-bottom: 10px;
  16. }
  17. #modalBody p {
  18. margin: 5px 0;
  19. }
  20. #modalBody hr {
  21. margin: 15px 0;
  22. }
  23. .comment {
  24. margin-bottom: 20px;
  25. }
  26. .comment p {
  27. margin: 0;
  28. }
  29. hr {
  30. border: 1px solid #ccc;
  31. }
  32. .col-4 {
  33. font-weight: bold;
  34. text-align: right;
  35. }
  36. .col-8 {
  37. padding-left: 20px;
  38. }
  39. .comment {
  40. padding: 10px 0;
  41. }
  42. .comment .text-muted {
  43. font-size: 0.9em;
  44. color: #6c757d;
  45. }
  46. .comment hr {
  47. border-top: 1px solid #ccc;
  48. }
  49. .comment .btn-link {
  50. font-size: 0.9em;
  51. text-decoration: underline;
  52. color: #007bff;
  53. }
  54. /* Make the modal body scrollable */
  55. #detailsModal .modal-body {
  56. max-height: 70vh; /* Limit the height to 70% of the viewport */
  57. overflow-y: auto; /* Enable vertical scrolling */
  58. }
  59. </style>
  60. <body>
  61. <div class="wrapper">
  62. <!-- header top menu Start -->
  63. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  64. <!-- header top menu end -->
  65. <div class="page-wrap">
  66. <!--=============== Left Menu side Start ================-->
  67. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  68. <!--=============== Left side End ================-->
  69. <div class="main-content">
  70. <div class="container-fluid">
  71. <div class="page-header mb-2">
  72. <div class="row align-items-end">
  73. <div class="col-lg-8">
  74. <div class="page-header-title">
  75. <i class="fas fa-question-circle bg-blue"></i>
  76. <div class="d-inline">
  77. <h5>PGR Complaint Status</h5>
  78. <span>1913 Check PGR Complaint Status</span>
  79. </div>
  80. </div>
  81. </div>
  82. <div class="col-lg-4">
  83. <nav class="breadcrumb-container" aria-label="breadcrumb">
  84. <ol class="breadcrumb">
  85. <li class="breadcrumb-item"><a href="/gcc/index"><i
  86. class="ik ik-home"></i></a></li>
  87. <li class="breadcrumb-item" aria-current="page">PGR
  88. Complaint Status</li>
  89. <li class="breadcrumb-item active" aria-current="page">Check
  90. Status</li>
  91. </ol>
  92. </nav>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="row mt-4">
  97. <div class="col-12">
  98. <div class="card">
  99. <div
  100. class="card-header d-flex justify-content-between align-items-center">
  101. <h3 class="mb-0" style="font-weight: bold">Check Complaint
  102. Status</h3>
  103. <!-- div class="d-flex">
  104. <button type="button" class="btn btn-primary" id="searchBtn">Search</button>
  105. </div> -->
  106. <div class="d-flex">
  107. <input type="date" class="form-control mr-2" id="startDate"
  108. placeholder="Start Date"> <input type="date"
  109. class="form-control mr-2" id="endDate" placeholder="End Date">
  110. <input class="form-control mr-2" placeholder="complaintnumber"
  111. id="complaintNumber"> <input
  112. class="form-control mr-2" placeholder="mobilenumber"
  113. id="complaintMobileNumber"> <select id="year"
  114. class="year-dropdown"></select>
  115. <button type="submit" class="btn btn-primary ml-2"
  116. id="searchBtn">Search</button>
  117. <button type="button" class="btn btn-secondary ml-2"
  118. id="resetBtn">Reset</button>
  119. </div>
  120. </div>
  121. <div class="row mt-4">
  122. <div class="col-md-12">
  123. <!-- <div class="card"> -->
  124. <div class="card-body">
  125. <div class="table-responsive">
  126. <table id="AgentQaqcDatatable"
  127. class="table table-striped table-bordered table-hover dataTable"
  128. role="grid">
  129. <thead class="thead-dark">
  130. <tr role="row">
  131. <th class="text-center no-sort">S.No</th>
  132. <th class="text-center no-sort">Complaint Number</th>
  133. <th class="text-center">Complaint Date</th>
  134. <th class="text-center no-sort">Name</th>
  135. <th class="text-center no-sort">Mobile Number</th>
  136. <th class="text-center">ComplaintType</th>
  137. <th class="text-center no-sort ">View</th>
  138. <th class="text-center">Call Status</th>
  139. <th class="text-center">Updated Date</th>
  140. </tr>
  141. </thead>
  142. <tbody>
  143. </tbody>
  144. </table>
  145. </div>
  146. </div>
  147. <!-- </div> -->
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. <div id="pageLoader"
  156. style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
  157. <div
  158. style="position: relative; top: 50%; transform: translateY(-50%);">
  159. <div class="spinner-border text-primary" role="status"
  160. style="width: 3rem; height: 3rem;">
  161. <span class="sr-only">Loading...</span>
  162. </div>
  163. <!-- Add the 'Please wait' text below the spinner -->
  164. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please
  165. wait...</p>
  166. </div>
  167. </div>
  168. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  169. </div>
  170. </div>
  171. <!--Details button Modal -->
  172. <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
  173. aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  174. <div class="modal-dialog modal-lg" role="document">
  175. <div class="modal-content">
  176. <div class="modal-header">
  177. <h5 class="modal-title" id="detailsModalLabel">Complaint
  178. Details</h5>
  179. <button type="button" class="close" data-dismiss="modal"
  180. aria-label="Close">
  181. <span aria-hidden="true">&times;</span>
  182. </button>
  183. </div>
  184. <div class="modal-body" id="modalBody">
  185. <!-- Details will be populated here -->
  186. </div>
  187. <div class="modal-footer">
  188. <button type="button" class="btn btn-secondary"
  189. data-dismiss="modal">Close</button>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. <!-- in the code use to show the download different type microsoft -->
  195. <!-- Include jQuery and Bootstrap JavaScript -->
  196. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  197. <script
  198. src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  199. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  200. <!-- sweet alert -->
  201. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  202. <script type="text/javascript">
  203. $(document).ready(function() {
  204. $('#AgentQaqcDatatable').DataTable({
  205. dom: 'Bftip',
  206. columnDefs: [
  207. { targets: 'no-sort', orderable: false }
  208. ],
  209. lengthMenu: [
  210. [50, 100, 200, 500, -1],
  211. ['50 rows', '100 rows', '200 rows', 'Show all']
  212. ],
  213. scrollY: '50vh',
  214. fixedColumns: {
  215. left: 1,
  216. right: 1
  217. },
  218. buttons: [
  219. {
  220. extend: 'pageLength',
  221. className: 'btn btn-warning'
  222. },
  223. {
  224. title: 'Data export',
  225. extend: 'copyHtml5',
  226. text: 'Copy',
  227. className: 'btn btn-secondary',
  228. id: 'copyBtn'
  229. },
  230. {
  231. extend: 'excelHtml5',
  232. text: 'Excel',
  233. className: 'btn btn-secondary',
  234. id: 'excelBtn'
  235. },
  236. {
  237. extend: 'csvHtml5',
  238. text: 'CSV',
  239. className: 'btn btn-secondary',
  240. id: 'csvBtn'
  241. },
  242. {
  243. extend: 'pdfHtml5',
  244. text: 'PDF',
  245. className: 'btn btn-secondary',
  246. id: 'pdfBtn'
  247. }
  248. ],
  249. fixedHeader: true,
  250. autoWidth: true,
  251. responsive: true,
  252. searching: true,
  253. select: false,
  254. processing: false
  255. });
  256. // Get current year
  257. const currentYear = new Date().getFullYear();
  258. // Get reference to the year dropdown
  259. const yearDropdown = document.getElementById('year');
  260. // Populate the dropdown with years
  261. for (let year = currentYear; year >= 2010; year--) {
  262. const option = document.createElement('option');
  263. option.value = year;
  264. option.textContent = year;
  265. yearDropdown.appendChild(option);
  266. }
  267. document.getElementById('resetBtn').addEventListener('click', function () {
  268. event.preventDefault();
  269. window.location.href="/gcc/callcenterqaqccomplaintstatus/complaintstatus";
  270. });
  271. // Event listener for From Date selection
  272. $("#startDate").on("change", function() {
  273. const startDate = $(this).val(); // Get the selected start date
  274. // Set the min value for To Date to be the selected From Date
  275. $("#endDate").attr("min", startDate);
  276. });
  277. // Event listener for To Date selection
  278. $("#endDate").on("change", function() {
  279. const endDate = $(this).val(); // Get the selected end date
  280. // Set the max value for From Date to be the selected To Date
  281. $("#startDate").attr("max", endDate);
  282. });
  283. document.getElementById('searchBtn').addEventListener('click', function (e) {
  284. let startDate = document.getElementById('startDate').value;
  285. let endDate = document.getElementById('endDate').value;
  286. const complaintNumber = $('#complaintNumber').val().toUpperCase();; // Fetch complaint number from input
  287. const complaintMobileNumber = $('#complaintMobileNumber').val(); // Fetch mobile number (if exists)
  288. const complaintYear=$('#year').val();
  289. //console.log("startdate: ", startDate);
  290. //console.log("enddate: ", endDate);
  291. //console.log("complaintNumber:",complaintNumber);
  292. //console.log("complaintMobileNumber",complaintMobileNumber);
  293. //console.log("complaintYear",complaintYear);
  294. // Check if all required fields are empty
  295. if (!startDate && !endDate && !complaintNumber && !complaintMobileNumber) {
  296. Swal.fire({
  297. icon: 'warning',
  298. title: 'Error',
  299. text: 'Please fill in at least one field to proceed.',
  300. showConfirmButton: true,
  301. timer: 3000
  302. });
  303. e.preventDefault(); // Prevent the default action
  304. return; // Stop further execution
  305. }
  306. // Specific validation for startDate and endDate
  307. if ((startDate && !endDate) || (!startDate && endDate)) {
  308. Swal.fire({
  309. icon: 'warning',
  310. title: 'Error',
  311. text: 'Please select both start and end dates.',
  312. showConfirmButton: true,
  313. timer: 3000
  314. });
  315. e.preventDefault();
  316. return;
  317. }
  318. if(complaintNumber !== '' && complaintMobileNumber !==''){
  319. Swal.fire({
  320. icon: 'info',
  321. title: 'Info',
  322. text: 'Please Enter any one either ComplaintNumber or MobileNumber',
  323. showConfirmButton: true,
  324. });
  325. e.preventDefault();
  326. return;
  327. }
  328. //complaintdetails datatable function script
  329. if (complaintMobileNumber === '' && complaintNumber !== '') {
  330. $('#pageLoader').show();
  331. $.ajax({
  332. url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
  333. type: 'GET',
  334. dataType: 'json',
  335. data: { complaintNumber },
  336. success: function (response) {
  337. $('#pageLoader').hide();
  338. // Initialize or update the DataTable
  339. let table = $('#AgentQaqcDatatable').DataTable({
  340. destroy: true, // Reinitialize the DataTable
  341. searching: true, // Enable search
  342. autoWidth: true,
  343. responsive: true,
  344. paging: true, // Enable pagination
  345. info: true, // Show table info
  346. data: response ? [response] : [],
  347. columns: [
  348. { data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' },
  349. { data: 'complaintid', defaultContent: '-', className: 'text-center' },
  350. { data: 'complaintdate', defaultContent: '-', className: 'text-center' },
  351. { data: 'complainantName', defaultContent: '-', className: 'text-center' },
  352. { data: 'mobileNumber', defaultContent: '-', className: 'text-center' },
  353. { data: 'complaintType', defaultContent: '-', className: 'text-center' },
  354. {
  355. data: 'complaintid',
  356. render: function (data) {
  357. return `
  358. <button type="button" class="btn btn-info details-btn"
  359. data-complaint-number="${data}">
  360. View
  361. </button>`;
  362. },
  363. className: 'text-center'
  364. },
  365. { data: 'currentStatus', defaultContent: '-', className: 'text-center' },
  366. { data: 'greatestDate', defaultContent: '-', className: 'text-center' }
  367. ],
  368. dom: 'Bfrtip', // Include buttons in the DOM layout
  369. buttons: [
  370. {
  371. extend: 'pageLength',
  372. className: 'btn btn-warning'
  373. },
  374. {
  375. title: 'Data export',
  376. extend: 'copyHtml5',
  377. text: 'Copy',
  378. className: 'btn btn-secondary',
  379. id: 'copyBtn'
  380. },
  381. {
  382. extend: 'excelHtml5',
  383. text: 'Excel',
  384. className: 'btn btn-secondary',
  385. id: 'excelBtn'
  386. },
  387. {
  388. extend: 'csvHtml5',
  389. text: 'CSV',
  390. className: 'btn btn-secondary',
  391. id: 'csvBtn'
  392. },
  393. {
  394. extend: 'pdfHtml5',
  395. text: 'PDF',
  396. className: 'btn btn-secondary',
  397. id: 'pdfBtn'
  398. }
  399. ],
  400. columnDefs: [
  401. { targets: 'no-sort', orderable: false }
  402. ],
  403. lengthMenu: [
  404. [50, 100, 200, 500, -1],
  405. ['50 rows', '100 rows', '200 rows', 'Show all']
  406. ],
  407. scrollY: '50vh',
  408. fixedColumns: {
  409. left: 1,
  410. right: 1
  411. }
  412. });
  413. },
  414. error: function () {
  415. $('#pageLoader').hide();
  416. $('#AgentQaqcDatatable').DataTable().clear().destroy();
  417. $('#AgentQaqcDatatable tbody').html(`
  418. <tr>
  419. <td colspan="9" class="text-center text-danger">Failed to load data</td>
  420. </tr>
  421. `);
  422. }
  423. });
  424. }
  425. if (complaintMobileNumber !== '' && complaintNumber === '' && complaintYear !== '') {
  426. $('#pageLoader').show();
  427. $.ajax({
  428. url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetailsByMobileNumber',
  429. type: 'GET',
  430. dataType: 'json',
  431. data: { complaintMobileNumber, startDate, endDate, complaintYear },
  432. success: function (response) {
  433. $('#pageLoader').hide();
  434. // Initialize or update the DataTable
  435. let table = $('#AgentQaqcDatatable').DataTable({
  436. destroy: true, // Reinitialize the DataTable
  437. searching: true, // Enable search
  438. autoWidth: true,
  439. responsive: true,
  440. paging: true, // Enable pagination
  441. info: true, // Show table info
  442. order: [], // Disable initial ordering
  443. data: response && response.status === "success" ? response.complaints : [],
  444. columns: [
  445. { data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' },
  446. { data: 'complaintid', defaultContent: '-', className: 'text-center' },
  447. { data: 'complaintdate', defaultContent: '-', className: 'text-center' },
  448. { data: 'complainantName', defaultContent: '-', className: 'text-center' },
  449. { data: 'mobileNumber', defaultContent: '-', className: 'text-center' },
  450. { data: 'complaintType', defaultContent: '-', className: 'text-center' },
  451. {
  452. data: 'complaintid',
  453. render: function (data) {
  454. return `
  455. <button type="button" class="btn btn-info details-btn"
  456. data-complaint-number="${data}">
  457. View
  458. </button>`;
  459. },
  460. className: 'text-center'
  461. },
  462. { data: 'currentStatus', defaultContent: '-', className: 'text-center' },
  463. { data: 'complaintcloseddate', defaultContent: '-', className: 'text-center' }
  464. ],
  465. dom: 'Bfrtip', // Include buttons in the DOM layout
  466. buttons: [
  467. {
  468. extend: 'pageLength',
  469. className: 'btn btn-warning'
  470. },
  471. {
  472. title: 'Data export',
  473. extend: 'copyHtml5',
  474. text: 'Copy',
  475. className: 'btn btn-secondary',
  476. id: 'copyBtn'
  477. },
  478. {
  479. extend: 'excelHtml5',
  480. text: 'Excel',
  481. className: 'btn btn-secondary',
  482. id: 'excelBtn'
  483. },
  484. {
  485. extend: 'csvHtml5',
  486. text: 'CSV',
  487. className: 'btn btn-secondary',
  488. id: 'csvBtn'
  489. },
  490. {
  491. extend: 'pdfHtml5',
  492. text: 'PDF',
  493. className: 'btn btn-secondary',
  494. id: 'pdfBtn'
  495. }
  496. ],
  497. columnDefs: [
  498. { targets: 'no-sort', orderable: false }
  499. ],
  500. lengthMenu: [
  501. [50, 100, 200, 500, -1],
  502. ['50 rows', '100 rows', '200 rows', 'Show all']
  503. ],
  504. scrollY: '50vh',
  505. fixedColumns: {
  506. left: 1,
  507. right: 1
  508. }
  509. });
  510. },
  511. error: function () {
  512. $('#pageLoader').hide();
  513. $('#AgentQaqcDatatable').DataTable().clear().destroy();
  514. $('#AgentQaqcDatatable tbody').html(`
  515. <tr>
  516. <td colspan="9" class="text-center text-danger">Failed to load data</td>
  517. </tr>
  518. `);
  519. }
  520. });
  521. }
  522. });
  523. // Handle the "View" button click
  524. $('#AgentQaqcDatatable').on('click', '.details-btn', function () {
  525. const complaintNumber = $(this).data('complaint-number');
  526. // Call the `viewDetails` function
  527. viewDetails(complaintNumber);
  528. });
  529. // Display detailed modal
  530. function viewDetails(complaintNumber) {
  531. document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
  532. $('#detailsModal').modal('show');
  533. // Fetch the main complaint details
  534. $.ajax({
  535. url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
  536. type: 'GET',
  537. data:{complaintNumber:complaintNumber},
  538. success: function (data) {
  539. console.log('Complaint Data:', data);
  540. // Fetch agent response details
  541. $.ajax({
  542. url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
  543. type: 'GET',
  544. data: { complaintNumber },
  545. success: function (agentResponse) {
  546. //console.log('Agent Response:', agentResponse);
  547. // Use the logic for building complaint and agent details as HTML
  548. const detailsHtml = generateDetailsHtml(data, agentResponse);
  549. // Update modal content
  550. document.getElementById('modalBody').innerHTML = detailsHtml;
  551. },
  552. error: function () {
  553. document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
  554. }
  555. });
  556. },
  557. error: function () {
  558. document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
  559. }
  560. });
  561. }
  562. // Function to generate complaint and agent details HTML
  563. function generateDetailsHtml(data, agentResponse) {
  564. // Helper function to format date to yyyy-mm-dd
  565. function formatDate(dateStr) {
  566. if (!dateStr) return 'N/A';
  567. const date = new Date(dateStr);
  568. return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
  569. }
  570. // Format complaint messages
  571. let messagesHtml = '';
  572. if (data.comments && data.comments.length > 0) {
  573. data.comments.forEach((comment) => {
  574. const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
  575. ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
  576. : '<p style="color: red;">No image available for this comment.</p>';
  577. messagesHtml += `
  578. <div class="comment mb-4">
  579. <div class="row">
  580. <div class="col-2 text-center">
  581. <p class="text-muted">${comment.comment_date}</p>
  582. </div>
  583. <div class="col-10">
  584. <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
  585. <p>${comment.message || 'No message available'}</p>
  586. <div class="user-image">${commentImageLink}</div>
  587. </div>
  588. </div>
  589. </div>
  590. `;
  591. });
  592. } else {
  593. messagesHtml = '<p>No comments available.</p>';
  594. }
  595. // Format agent responses
  596. let agentRepliedHtml = '';
  597. if (agentResponse.length > 0) {
  598. agentResponse.forEach((agentItem) => {
  599. agentRepliedHtml += `
  600. <div class="comment mb-4">
  601. <div class="row">
  602. <div class="col-2 text-center">
  603. <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
  604. </div>
  605. <div class="col-10">
  606. <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
  607. <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
  608. <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
  609. </div>
  610. </div>
  611. </div>
  612. `;
  613. });
  614. } else {
  615. agentRepliedHtml = '<p>No agent replied messages available.</p>';
  616. }
  617. // Check for user images
  618. const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
  619. const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
  620. ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
  621. : '<p style="color: red;">UserImages: No image available.</p>';
  622. // Combine all sections into the final HTML
  623. const detailsHtml = `
  624. <div class="row">
  625. <div class="col-md-12">
  626. <h4>Complaint Person's Details:</h4>
  627. <div class="row">
  628. <div class="col-6">
  629. <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
  630. </div>
  631. <div class="col-6">
  632. <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
  633. </div>
  634. </div>
  635. <div class="row">
  636. <div class="col-6">
  637. <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
  638. </div>
  639. <div class="col-6">
  640. <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
  641. </div>
  642. </div>
  643. <div class="row">
  644. <div class="col-6">
  645. <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
  646. </div>
  647. <div class="col-6">
  648. <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
  649. </div>
  650. </div>
  651. <div class="row">
  652. <div class="col-6">
  653. <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
  654. </div>
  655. <div class="col-6">
  656. <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
  657. </div>
  658. </div>
  659. </div>
  660. </div>
  661. <hr>
  662. <h4>Complaint Details:</h4>
  663. <div class="row">
  664. <div class="col-6">
  665. <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
  666. </div>
  667. <div class="col-6">
  668. <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
  669. </div>
  670. </div>
  671. <div class="row">
  672. <div class="col-6">
  673. <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
  674. </div>
  675. <div class="col-6">
  676. <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
  677. </div>
  678. </div>
  679. <div class="row">
  680. <div class="col-6">
  681. <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
  682. </div>
  683. <div class="col-6">
  684. <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
  685. </div>
  686. </div>
  687. <div class="row">
  688. <div class="col-6">
  689. <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
  690. </div>
  691. </div>
  692. <hr>
  693. <h4>Complaint Messages:</h4>
  694. ${messagesHtml}
  695. <hr>
  696. <h4>Agent Replied Messages:</h4>
  697. ${agentRepliedHtml}
  698. <hr>
  699. ${imageLink}
  700. `;
  701. return detailsHtml;
  702. }
  703. //function for viewing complaintdetails
  704. /* function viewDetails(complaintNumber, complaintMode, complaintDept) {
  705. // Display a loading message while data is being fetched
  706. document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
  707. $('#detailsModal').modal('show');
  708. // Fetch the main complaint details
  709. $.ajax({
  710. url: `/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails`,
  711. type: 'GET',
  712. dataType: 'json',
  713. data: { complaintNumber: complaintNumber, complaintMode: complaintMode, complaintDept: complaintDept },
  714. success: function (data) {
  715. console.log(data);
  716. // Fetch agent response details
  717. $.ajax({
  718. url: `/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory`,
  719. type: 'GET',
  720. data: { complaintNumber: complaintNumber },
  721. success: function (agentResponse) {
  722. console.log('Agent Response:', agentResponse);
  723. const agentItem = agentResponse.find(
  724. (item) => item.complaint_number === complaintNumber
  725. );
  726. // Helper function to format date to yyyy-mm-dd
  727. function formatDate(dateStr) {
  728. if (!dateStr) return 'N/A';
  729. const date = new Date(dateStr);
  730. return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
  731. }
  732. // Prepare complaint messages
  733. let messagesHtml = '';
  734. if (data.comments && data.comments.length > 0) {
  735. data.comments.forEach((comment) => {
  736. const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
  737. ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
  738. : '<p style="color: red;">No image available for this comment.</p>';
  739. messagesHtml += `
  740. <div class="comment mb-4">
  741. <div class="row">
  742. <div class="col-2 text-center">
  743. <p class="text-muted">${comment.comment_date}</p>
  744. </div>
  745. <div class="col-10">
  746. <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
  747. <p>${comment.message || 'No message available'}</p>
  748. <div class="user-image">${commentImageLink}</div>
  749. </div>
  750. </div>
  751. </div>
  752. `;
  753. });
  754. } else {
  755. messagesHtml = '<p>No comments available.</p>';
  756. }
  757. let agentRepliedHtml = '';
  758. // Iterate through all responses matching the complaint number
  759. const matchingResponses = agentResponse.filter(item => item.complaint_number === complaintNumber);
  760. if (matchingResponses.length > 0) {
  761. matchingResponses.forEach(agentItem => {
  762. agentRepliedHtml += `
  763. <div class="comment mb-4">
  764. <div class="row">
  765. <div class="col-2 text-center">
  766. <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
  767. </div>
  768. <div class="col-10">
  769. <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
  770. <p><strong>Remarks: </strong>${agentItem.remarks || 'No remarks provided'}</p>
  771. <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
  772. </div>
  773. </div>
  774. </div>
  775. `;
  776. });
  777. } else {
  778. agentRepliedHtml = '<p>No agent replied messages available.</p>';
  779. }
  780. // Check for user images
  781. const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
  782. const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
  783. ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
  784. : '<p style="color: red;">UserImages: No image available.</p>';
  785. // Combine all details into the modal content
  786. const detailsHtml = `
  787. <div class="row">
  788. <div class="col-md-12">
  789. <h4>Complaint Person's Details:</h4>
  790. <div class="row">
  791. <div class="col-6">
  792. <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
  793. </div>
  794. <div class="col-6">
  795. <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
  796. </div>
  797. </div>
  798. <div class="row">
  799. <div class="col-6">
  800. <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
  801. </div>
  802. <div class="col-6">
  803. <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
  804. </div>
  805. </div>
  806. <div class="row">
  807. <div class="col-6">
  808. <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
  809. </div>
  810. <div class="col-6">
  811. <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
  812. </div>
  813. </div>
  814. <div class="row">
  815. <div class="col-6">
  816. <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
  817. </div>
  818. <div class="col-6">
  819. <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
  820. </div>
  821. </div>
  822. </div>
  823. </div>
  824. <hr>
  825. <h4>Complaint Details:</h4>
  826. <div class="row">
  827. <div class="col-6">
  828. <p><strong>Complaint Dept:</strong> ${complaintDept || 'N/A'}</p>
  829. </div>
  830. <div class="col-6">
  831. <p><strong>Complaint Mode:</strong> ${complaintMode || 'N/A'}</p>
  832. </div>
  833. </div>
  834. <div class="row">
  835. <div class="col-6">
  836. <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
  837. </div>
  838. <div class="col-6">
  839. <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
  840. </div>
  841. </div>
  842. <div class="row">
  843. <div class="col-6">
  844. <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
  845. </div>
  846. <div class="col-6">
  847. <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
  848. </div>
  849. </div>
  850. <hr>
  851. <h4>Complaint Messages:</h4>
  852. ${messagesHtml}
  853. <hr>
  854. <h4>Agent Replied Messages:</h4>
  855. ${agentRepliedHtml}
  856. <hr>
  857. ${imageLink}
  858. `;
  859. // Update the modal content
  860. document.getElementById('modalBody').innerHTML = detailsHtml;
  861. },
  862. error: function () {
  863. document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
  864. }
  865. });
  866. },
  867. error: function () {
  868. document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
  869. }
  870. });
  871. } */
  872. });
  873. </script>
  874. </body>
  875. </html>