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.

888 lines
48 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  4. <style>
  5. .custom-width1 {
  6. width: 140px; /* Adjust the width as needed */
  7. }
  8. .custom-width2 {
  9. width: 200px; /* Adjust the width as needed */
  10. }
  11. .custom-width3{
  12. width: 100px;
  13. }
  14. table td {
  15. text-align: center;
  16. }
  17. </style>
  18. <body>
  19. <!--[if lt IE 8]>
  20. <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>
  21. <![endif]-->
  22. <div class="wrapper">
  23. <!-- header top menu Start -->
  24. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  25. <!-- header top menu end -->
  26. <div class="page-wrap">
  27. <!--=============== Left Menu side Start ================-->
  28. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  29. <!--=============== Left side End ================-->
  30. <div class="main-content">
  31. <div class="container-fluid">
  32. <div class="page-header mb-2">
  33. <div class="row align-items-end">
  34. <div class="col-lg-8">
  35. <div class="page-header-title">
  36. <i class="fas fa-headset bg-blue"></i>
  37. <div class="d-inline">
  38. <h5>Agent's Campaign</h5>
  39. <span>1913 Agent's Campaign</span>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="col-lg-4">
  44. <nav class="breadcrumb-container" aria-label="breadcrumb">
  45. <ol class="breadcrumb">
  46. <li class="breadcrumb-item"><a href="index"><i
  47. class="ik ik-home"></i></a></li>
  48. <li class="breadcrumb-item" aria-current="page">1913 Campaign</li>
  49. <li class="breadcrumb-item active" aria-current="page">Agents Campaign</li>
  50. </ol>
  51. </nav>
  52. </div>
  53. </div>
  54. </div>
  55. <h4 class="h4 text-right text-mute" style="font-size: 12px;">
  56. Auot refresh in <font id="refresh-countdown">00</font> seconds
  57. </h4>
  58. <div class="row">
  59. <div class="col-md-12 mt-2">
  60. <div class="card">
  61. <div class="card-block">
  62. <div class="page-header-title" >
  63. <h4 style="margin: 0;font-weight: bold;" class="text-center"><span th:text="${agent_name}"></span>' s Campaign</h4>
  64. <div class="mt-2 d-flex justify-content-between align-items-center">
  65. <h5 style="margin: 0; font-weight: bold; font-style: italic;">Campaign List</h5>
  66. <button type="button" class="btn btn-primary" id="refresh"><i class="ik ik-refresh-ccw"></i>Refresh</button>
  67. </div>
  68. <hr>
  69. </div>
  70. <div>
  71. <table id="Agenttask" class="table table-striped table-bordered table-hover dataTable" role="grid" style="width:99%;">
  72. <thead class="thead-dark">
  73. <tr role="row">
  74. <th class="text-center no-sort">S.No</th>
  75. <th class="text-center" >Category</th>
  76. <th class="text-center" >CampaignName</th>
  77. <th class="text-center">Calls Assigned</th>
  78. <th class="text-center">Calls Pending</th>
  79. <th class="text-center">Calls Completed</th>
  80. <th class="text-center">Follow ups</th>
  81. <th class="text-center " >Start Calls</th>
  82. <th class="text-center " >Further Calls</th>
  83. </tr>
  84. </thead>
  85. <tbody>
  86. <tr th:each="agentsCampaign, iterStat : ${agentsCampaigns}">
  87. <td th:text="${iterStat.index + 1}" class="text-center"></td> <!-- Serial number -->
  88. <td th:text="${agentsCampaign['category_name']}" class="text-center"></td> <!-- Category name -->
  89. <td th:text="${agentsCampaign['campaign_name']}" class="text-center"></td> <!-- Campaign name -->
  90. <td th:text="${agentsCampaign['calls_assigned']}" class="text-center"></td>
  91. <td th:text="${agentsCampaign['pending_count']}" class="text-center"></td>
  92. <td th:text="${agentsCampaign['complete_count']}" class="text-center"></td>
  93. <td th:text="${agentsCampaign['followup_count']}" class="text-center"></td>
  94. <td class="text-center">
  95. <!-- Add your action button -->
  96. <button type="button" class="btn btn-primary"
  97. th:onclick="'viewCampaignDetails(' + ${agentsCampaign['campaign_id']} + ',' + ${agentsCampaign['calls_per_agent']} + ',' + ${agentsCampaign['agent_id']} + ')'">
  98. view
  99. </button>
  100. </td>
  101. <td class="text-center">
  102. <button type="button" class="btn btn-info"
  103. th:onclick="'PendingCampaignDetails(' + ${agentsCampaign['campaign_id']} + ',' + ${agentsCampaign['calls_per_agent']} + ',' + ${agentsCampaign['agent_id']} + ')'">
  104. view
  105. </button>
  106. </td>
  107. </tr>
  108. </tbody>
  109. <tfoot class="thead-dark">
  110. <tr role="row">
  111. <th class="text-center no-sort">S.No</th>
  112. <th class="text-center" >Category</th>
  113. <th class="text-center" >CampaignName</th>
  114. <th class="text-center">Calls Assigned</th>
  115. <th class="text-center">Calls Pending</th>
  116. <th class="text-center">Calls Completed</th>
  117. <th class="text-center">Follow ups</th>
  118. <th class="text-center " >Start Calls</th>
  119. <th class="text-center " >Further Calls</th>
  120. </tr>
  121. </tfoot>
  122. </table>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="col-md-12" id="tablesforcalls" style="display: none;">
  128. <div class="card">
  129. <div class="card-block">
  130. <div class="page-header-title" >
  131. <h5 style="margin: 0;font-weight: bold;"><span id="campaign-name-display" style="font-weight: bold;color:blue; margin-right: 5px;"></span>- Calls List</h5><hr>
  132. </div>
  133. <div>
  134. <table id="AgentDatatable" class="table table-bordered table-hover dataTable" role="grid">
  135. <thead class="thead-dark">
  136. <tr role="row">
  137. <th >S.No</th>
  138. <th class="custom-width3">ID</th>
  139. <th class="text-center">Name</th>
  140. <th class="text-center">Address</th>
  141. <th class="text-center">Balance Amount</th>
  142. <th class="text-center">Mobile number</th>
  143. <th class="text-center">ViewDetails</th>
  144. <th class="text-center custom-width1">Action</th>
  145. <th class="text-center custom-width2">Remarks</th>
  146. <th class="text-center">Send Message</th>
  147. <th class="text-center">Status</th>
  148. </tr>
  149. </thead>
  150. <tbody>
  151. </tbody>
  152. <tfoot class="thead-dark">
  153. <tr role="row">
  154. <th >S.No</th>
  155. <th class="custom-width3">ID</th>
  156. <th class="text-center">Name</th>
  157. <th class="text-center">Address</th>
  158. <th class="text-center">Balance Amount</th>
  159. <th class="text-center">Mobile number</th>
  160. <th class="text-center">ViewDetails</th>
  161. <th class="text-center custom-width1">Action</th>
  162. <th class="text-center custom-width2">Remarks</th>
  163. <th class="text-center">Send Message</th>
  164. <th class="text-center"> Status</th>
  165. </tr>
  166. </tfoot>
  167. </table>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. <div class="col-md-12" id="tablesforpendingcalls" style="display: none;">
  173. <div class="card">
  174. <div class="card-block">
  175. <div class="page-header-title" >
  176. <h5 style="margin: 0;font-weight: bold;"><span id="campaign-names-display" style="font-weight: bold;color:blue; margin-right: 5px;"></span>- Further Calls List</h5><hr>
  177. </div>
  178. <div>
  179. <table id="Pendingtasktable" class="table table-bordered table-hover dataTable" role="grid">
  180. <thead class="thead-dark">
  181. <tr role="row">
  182. <th>S.No</th>
  183. <th class="custom-width3">ID</th>
  184. <th class="text-center">Name</th>
  185. <th class="text-center">Address</th>
  186. <th class="text-center">Balance Amount</th>
  187. <th class="text-center">Mobile number</th>
  188. <th class="text-center">ViewDetails</th>
  189. <th class="text-center custom-width1">Action</th>
  190. <th class="text-center custom-width2">Remarks</th>
  191. <th class="text-center">Send Message</th>
  192. <th class="text-center">Status</th>
  193. </tr>
  194. </thead>
  195. <tbody>
  196. </tbody>
  197. <tfoot class="thead-dark">
  198. <tr role="row">
  199. <th>S.No</th>
  200. <th class="custom-width3">ID</th>
  201. <th class="text-center">Name</th>
  202. <th class="text-center">Address</th>
  203. <th class="text-center">Balance Amount</th>
  204. <th class="text-center">Mobile number</th>
  205. <th class="text-center">ViewDetails</th>
  206. <th class="text-center custom-width1">Action</th>
  207. <th class="text-center custom-width2">Remarks</th>
  208. <th class="text-center">Send Message</th>
  209. <th class="text-center"> Status</th>
  210. </tr>
  211. </tfoot>
  212. </table>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. </div>
  220. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  221. </div>
  222. </div>
  223. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  224. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  225. <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
  226. <script>
  227. $(document).ready(function() {
  228. var buttons = [
  229. {
  230. extend: 'pageLength',
  231. className: 'btn btn-warning'
  232. },
  233. {
  234. title: 'Data export',
  235. extend: 'copyHtml5',
  236. text: 'Copy',
  237. className: 'btn btn-secondary'
  238. },
  239. {
  240. extend: 'excelHtml5',
  241. text: 'Excel',
  242. className: 'btn btn-secondary'
  243. },
  244. {
  245. extend: 'csvHtml5',
  246. text: 'CSV',
  247. className: 'btn btn-secondary'
  248. },
  249. {
  250. extend: 'pdfHtml5',
  251. text: 'PDF',
  252. className: 'btn btn-secondary'
  253. }
  254. ];
  255. $('#Agenttask').DataTable({
  256. dom: 'Bftip',
  257. columnDefs: [
  258. {targets: 'no-sort', orderable: false}
  259. ],
  260. lengthMenu: [
  261. [50, 100, 200, 500, -1],
  262. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  263. ],
  264. scrollY: '30vh',
  265. fixedColumns: {
  266. left: 1,
  267. right: 1
  268. },
  269. buttons: buttons,
  270. fixedHeader: true,
  271. autoWidth: true,
  272. responsive: true,
  273. searching: true,
  274. select: false,
  275. processing: false,
  276. });
  277. });
  278. document.getElementById("refresh").addEventListener("click", function() {
  279. location.reload(); // Reloads the current page
  280. });
  281. function viewCampaignDetails(campaignId, callsPerAgent, agentId) {
  282. console.log('Calling viewCampaignDetails with:', {
  283. callsPerAgent: callsPerAgent,
  284. campaignId: campaignId, // this is 24, constant
  285. agentId: agentId // this will change
  286. });
  287. $.ajax({
  288. url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
  289. type: 'GET',
  290. success: function (response) {
  291. console.log(response);
  292. if (response) {
  293. // Populate modal fields with data
  294. //$('#campaign_id').val(response.campaign_id);
  295. $('#campaign_names').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
  296. // Display the campaign name near the h5 element
  297. $('#campaign-name-display').text(response.campaign_name); // Add text dynamically to the element
  298. } else {
  299. console.error('Error fetching campaign details:', error);
  300. }
  301. },
  302. error: function (xhr, status, error) {
  303. console.error('Error fetching campaign details:', error);
  304. alert('An error occurred while fetching campaign details.');
  305. }
  306. });
  307. // Get the card element by its ID (e.g., 'tablesforcalls')
  308. var cardElement = document.getElementById('tablesforcalls');
  309. // Toggle the display property based on current state
  310. if (cardElement.style.display === 'block') {
  311. cardElement.style.display = 'none'; // Hide the card if it's currently displayed
  312. } else {
  313. cardElement.style.display = 'block'; // Show the card if it's hidden
  314. }
  315. $.ajax({
  316. url: '/gcc/api/campaign/startcampaign?campaign_id=' + campaignId + '&calls_per_agent=' + callsPerAgent, // URL to your Spring Boot controller
  317. type: 'GET', // GET request
  318. contentType: 'application/json',
  319. success: function(response) {
  320. console.log('Campaign started successfully:', response);
  321. // We are focusing on matching the agent_id since campaign_id is constant (24)
  322. let dataIds = [];
  323. response.forEach(function(item) {
  324. console.log('Checking agent_id:', item.agent_id, 'against passed agent_id:', agentId);
  325. if (item.agent_id === agentId) {
  326. dataIds = item.data_ids; // Get the corresponding data_ids
  327. console.log('Match found. Data IDs:', dataIds);
  328. }
  329. });
  330. if (dataIds.length > 0) {
  331. console.log('Data IDs for Agent ID ' + agentId + ':', dataIds);
  332. // Fetch the data for the matched data IDs
  333. $.ajax({
  334. url: '/gcc/api/agents/getdataByIds?ids=' + dataIds.join(','), // dataIds is the array [6, 7]
  335. type: 'GET',
  336. contentType: 'application/json',
  337. success: function(response) {
  338. console.log('Data retrieved successfully:', response);
  339. // Initialize DataTable if not already done
  340. let table = $('#AgentDatatable').DataTable();
  341. // Clear existing rows in the table
  342. table.clear();
  343. // Process and append the new data to the DataTable
  344. let rows = [];
  345. response.forEach(function(item, index) {
  346. let row = [
  347. index + 1, // S.No
  348. item.id, // ID
  349. item.name, // Name
  350. item.address, // Address
  351. item.dues, // Dues
  352. item.cellnumber, // Mobile Number
  353. `<div class="text-center">
  354. <button class="btn btn-primary" onclick="ViewDetails('${item.viewdetails}')">View</button>
  355. </div>`,
  356. // Dropdown for Action
  357. `<div class="text-center">
  358. <select class="form-control action-dropdown" name="action" data-index="${index}" ${item.call_status && item.call_status !== 'NONE' ? 'disabled' : ''}>
  359. <option value="NONE" ${item.call_status === "NONE" ? "selected" : ""}>Call Status</option>
  360. <option value="INFORMATION_GIVEN" ${item.call_status === "INFORMATION_GIVEN" ? "selected" : ""}>INFORMATION GIVEN</option>
  361. <option value="UNATTENDED" ${item.call_status === "UNATTENDED" ? "selected" : ""}>UNATTENDED</option>
  362. <option value="CALL_BACK_LATER" ${item.call_status === "CALL_BACK_LATER" ? "selected" : ""}>CALL BACK LATER</option>
  363. <option value="SWITCH_OFF" ${item.call_status === "SWITCH_OFF" ? "selected" : ""}>SWITCH OFF</option>
  364. <option value="WRONG_NUMBER" ${item.call_status === "WRONG_NUMBER" ? "selected" : ""}>WRONG NUMBER</option>
  365. </select>
  366. </div>`,
  367. // Textarea for Remarks (populate saved remarks)
  368. `<div class="text-center">
  369. <textarea class="form-control" name="remarks" ${item.call_status && item.call_status !== 'NONE' ? 'disabled' : ''}>${item.remarks ? item.remarks : ""}</textarea>
  370. </div>`,
  371. // WhatsApp Message Button
  372. `<div class="text-center">
  373. <button class="btn btn-success" onclick="sendWhatsAppMessage('${item.cellnumber}', '${item.id}', '${item.viewdetails}')">Send</button>
  374. </div>`,
  375. // Centered Button for Submit Action (Initially disabled)
  376. `<div class="text-center">
  377. <button class="btn btn-primary submit-button" id="submit-btn-${index}" disabled onclick="submitAction(${item.data_id}, ${index}, ${agentId},${campaignId})">${item.call_status && item.call_status !== 'NONE' ? 'Submit' : 'Submit'}</button>
  378. </div>`
  379. ];
  380. rows.push(row);
  381. });
  382. // Append the rows to your table
  383. $('#AgentDatatable').DataTable().rows.add(rows).draw();
  384. $('.action-dropdown').on('change', function () {
  385. let selectedValue = $(this).val(); // Dropdown value
  386. let index = $(this).data('index'); // Index of the row
  387. let button = $('#submit-btn-' + index); // The submit button
  388. let remarksField = $('textarea[name="remarks"]').eq(index); // The remarks textarea
  389. // Function to check if the button should be enabled
  390. function toggleButtonState() {
  391. let remarksValue = remarksField.val().trim(); // Trimmed value of remarks
  392. if (selectedValue !== 'NONE' && remarksValue !== '') {
  393. button.prop('disabled', false);
  394. button.text('Submit');
  395. button.removeClass('btn-primary').addClass('btn-primary');
  396. } else {
  397. button.prop('disabled', true);
  398. button.text('Submit');
  399. button.removeClass('btn-primary').addClass('btn-primary');
  400. }
  401. }
  402. // Toggle button state based on the current conditions
  403. toggleButtonState();
  404. // Add an event listener to the remarks field to recheck conditions
  405. remarksField.on('input', function () {
  406. toggleButtonState();
  407. });
  408. });
  409. },
  410. error: function(xhr, status, error) {
  411. console.error('Error retrieving data:', error);
  412. }
  413. });
  414. }
  415. else {
  416. console.log('No matching data found for Agent ID ' + agentId);
  417. }
  418. },
  419. error: function(xhr, status, error) {
  420. console.error('Error starting campaign:', error);
  421. }
  422. });
  423. initializeAgentsDataTable();
  424. // Show the #tablesforcalls div
  425. //document.getElementById('tablesforcalls').style.display = 'block';
  426. }
  427. function submitAction(dataId, index,agentId,campaignId) {
  428. // Get selected dropdown value and textarea value
  429. let action = $('.action-dropdown[data-index="' + index + '"]').val(); // Ensure you're getting the correct value
  430. let remarks = $(`#AgentDatatable tbody textarea[name="remarks"]`).eq(index).val() || "N/A";
  431. // Make an AJAX POST request to submit the data
  432. $.ajax({
  433. url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
  434. type: 'POST',
  435. contentType: 'application/json',
  436. data: JSON.stringify({
  437. data_id: dataId,
  438. agent_id: agentId,
  439. campaign_id:campaignId,
  440. call_status: action, // Use "call_status" as the key to match the controller parameter name
  441. remarks: remarks
  442. }),
  443. success: function(response) {
  444. console.log('Data Updated successfully:', response);
  445. // Update the button and form fields after successful submission
  446. Swal.fire({
  447. title: 'Success!',
  448. text: 'Data Updated successfully!',
  449. icon: 'success',
  450. timer: 2000,
  451. showConfirmButton: false
  452. })
  453. let button = $(`#submit-btn-${index}`);
  454. button.text('Submitted').removeClass('btn-primary').addClass('btn-primary').prop('disabled', true);
  455. $(`#AgentDatatable tbody .action-dropdown[data-index="${index}"]`).prop('disabled', true);
  456. $(`#AgentDatatable tbody textarea[name="remarks"]`).eq(index).prop('disabled', true);
  457. },
  458. error: function(xhr, status, error) {
  459. console.error('Error submitting data:', error);
  460. }
  461. });
  462. }
  463. function PendingCampaignDetails(campaignId, callsPerAgent, agentId) {
  464. console.log('Calling PendingCampaignDetails with:', {
  465. callsPerAgent: callsPerAgent,
  466. campaignId: campaignId,
  467. agentId: agentId
  468. });
  469. $.ajax({
  470. url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
  471. type: 'GET',
  472. success: function (response) {
  473. console.log(response);
  474. if (response) {
  475. // Populate modal fields with data
  476. //$('#campaign_id').val(response.campaign_id);
  477. $('#campaign_names').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
  478. // Display the campaign name near the h5 element
  479. $('#campaign-names-display').text(response.campaign_name); // Add text dynamically to the element
  480. } else {
  481. console.error('Error fetching campaign details:', error);
  482. }
  483. },
  484. error: function (xhr, status, error) {
  485. console.error('Error fetching campaign details:', error);
  486. alert('An error occurred while fetching campaign details.');
  487. }
  488. });
  489. // Get the card element by its ID (e.g., 'tablesforcalls')
  490. var cardElement = document.getElementById('tablesforpendingcalls');
  491. // Toggle the display property based on current state
  492. if (cardElement.style.display === 'block') {
  493. cardElement.style.display = 'none'; // Hide the card if it's currently displayed
  494. } else {
  495. cardElement.style.display = 'block'; // Show the card if it's hidden
  496. }
  497. $.ajax({
  498. url: '/gcc/api/campaign/startcampaign?campaign_id=' + campaignId + '&calls_per_agent=' + callsPerAgent, // URL to your Spring Boot controller
  499. type: 'GET', // GET request
  500. contentType: 'application/json',
  501. success: function(response) {
  502. console.log('Campaign started successfully:', response);
  503. // We are focusing on matching the agent_id since campaign_id is constant (24)
  504. let dataIds = [];
  505. response.forEach(function(item) {
  506. console.log('Checking agent_id:', item.agent_id, 'against passed agent_id:', agentId);
  507. if (item.agent_id === agentId) {
  508. dataIds = item.data_ids; // Get the corresponding data_ids
  509. console.log('Match found. Data IDs:', dataIds);
  510. }
  511. });
  512. if (dataIds.length > 0) {
  513. console.log('Data IDs for Agent ID ' + agentId + ':', dataIds);
  514. // Fetch the data for the matched data IDs
  515. $.ajax({
  516. url: '/gcc/api/agents/getPendingDataByIds?ids=' + dataIds.join(','), // dataIds is the array [6, 7]
  517. type: 'GET',
  518. contentType: 'application/json',
  519. success: function(response) {
  520. console.log('Data retrieved successfully:', response);
  521. // Initialize DataTable if not already done
  522. let table = $('#Pendingtasktable').DataTable();
  523. // Clear existing rows in the table
  524. table.clear();
  525. // Process and append the new data to the DataTable
  526. let rows = [];
  527. response.forEach(function(item, index) {
  528. let row = [
  529. index + 1, // S.No
  530. item.id, // ID
  531. item.name, // Name
  532. item.address, // Address
  533. item.dues, // Dues
  534. item.cellnumber, // Mobile Number
  535. `<div class="text-center">
  536. <button class="btn btn-primary" onclick="ViewDetails('${item.viewdetails}')">View</button>
  537. </div>`,
  538. // Dropdown for Action
  539. `<div class="text-center">
  540. <select class="form-control action-dropdown2" name="action" data-index="${index}">
  541. <option value="NONE" ${item.call_status === "NONE" ? "selected" : ""}>Call Status</option>
  542. <option value="INFORMATION_GIVEN" ${item.call_status === "INFORMATION_GIVEN" ? "selected" : ""}>INFORMATION GIVEN</option>
  543. <option value="UNATTENDED" ${item.call_status === "UNATTENDED" ? "selected" : ""}>UNATTENDED</option>
  544. <option value="CALL_BACK_LATER" ${item.call_status === "CALL_BACK_LATER" ? "selected" : ""}>CALL BACK LATER</option>
  545. <option value="SWITCH_OFF" ${item.call_status === "SWITCH_OFF" ? "selected" : ""}>SWITCH OFF</option>
  546. <option value="WRONG_NUMBER" ${item.call_status === "WRONG_NUMBER" ? "selected" : ""}>WRONG NUMBER</option>
  547. </select>
  548. </div>`,
  549. // Textarea for Remarks (populate saved remarks)
  550. `<div class="text-center">
  551. <textarea class="form-control" name="remarks">${item.remarks ? item.remarks : ""}</textarea>
  552. </div>`,
  553. // WhatsApp Message Button
  554. `<div class="text-center">
  555. <button class="btn btn-success" onclick="sendWhatsAppMessage('${item.cellnumber}', '${item.id}', '${item.viewdetails}')">Send</button>
  556. </div>`,
  557. // Centered Button for Submit Action (Initially disabled)
  558. `<div class="text-center">
  559. <button class="btn btn-primary submit-button" id="submitt-btn-${index}" disabled onclick="editAction(${item.data_id}, ${index}, ${agentId},${campaignId})">${item.call_status && item.call_status !== 'NONE' ? 'Update' : 'Update'}</button>
  560. </div>`
  561. ];
  562. rows.push(row);
  563. });
  564. // Append the rows to your table
  565. $('#Pendingtasktable').DataTable().rows.add(rows).draw();
  566. // Add event listener to each dropdown to enable/disable the button
  567. $('.action-dropdown2').on('change', function() {
  568. let selectedValue = $(this).val();
  569. let index = $(this).data('index');
  570. let button = $('#submitt-btn-' + index);
  571. // Enable the button if a valid option is selected, otherwise keep it disabled
  572. if (selectedValue === 'NONE') {
  573. button.prop('disabled', true);
  574. button.text('Update');
  575. button.removeClass('btn-primary').addClass('btn-primary');
  576. } else {
  577. button.prop('disabled', false);
  578. button.text('Update');
  579. button.removeClass('btn-primary').addClass('btn-primary');
  580. }
  581. });
  582. /* $('.action-dropdown2').on('change', function () {
  583. let selectedValue = $(this).val(); // Dropdown value
  584. let index = $(this).data('index'); // Index of the row
  585. let button = $('#submit-btn-' + index); // The submit button
  586. let remarksField = $('textarea[name="remarks"]').eq(index); // The remarks textarea
  587. // Function to check if the button should be enabled
  588. function toggleButtonState() {
  589. let remarksValue = remarksField.val().trim(); // Trimmed value of remarks
  590. if (selectedValue !== 'NONE' && remarksValue !== '') {
  591. button.prop('disabled', false);
  592. button.text('Update');
  593. button.removeClass('btn-primary').addClass('btn-primary');
  594. } else {
  595. button.prop('disabled', true);
  596. button.text('Update');
  597. button.removeClass('btn-primary').addClass('btn-primary');
  598. }
  599. }
  600. // Toggle button state based on the current conditions
  601. toggleButtonState();
  602. // Add an event listener to the remarks field to recheck conditions
  603. remarksField.on('input', function () {
  604. toggleButtonState();
  605. });
  606. }); */
  607. },
  608. error: function(xhr, status, error) {
  609. console.error('Error retrieving data:', error);
  610. }
  611. });
  612. }
  613. else {
  614. console.log('No matching data found for Agent ID ' + agentId);
  615. }
  616. },
  617. error: function(xhr, status, error) {
  618. console.error('Error starting campaign:', error);
  619. }
  620. });
  621. initializeAgentsDataTable();
  622. // Show the #tablesforcalls div
  623. //document.getElementById('tablesforpendingcalls').style.display = 'block';
  624. }
  625. function editAction(dataId, index,agentId,campaignId) {
  626. // Get selected dropdown value and textarea value
  627. let action = $('.action-dropdown2[data-index="' + index + '"]').val(); // Ensure you're getting the correct value
  628. let remarks = $(`#Pendingtasktable tbody textarea[name="remarks"]`).eq(index).val();
  629. // Make an AJAX POST request to submit the data
  630. $.ajax({
  631. url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
  632. type: 'POST',
  633. contentType: 'application/json',
  634. data: JSON.stringify({
  635. data_id: dataId,
  636. agent_id: agentId,
  637. campaign_id:campaignId,
  638. call_status: action, // Use "call_status" as the key to match the controller parameter name
  639. remarks: remarks
  640. }),
  641. success: function(response) {
  642. console.log('Data Updated successfully:', response);
  643. // Update the button and form fields after successful submission
  644. Swal.fire({
  645. title: 'Success!',
  646. text: 'Data Updated successfully!',
  647. icon: 'success',
  648. timer: 2000,
  649. showConfirmButton: false
  650. })
  651. },
  652. error: function(xhr, status, error) {
  653. console.error('Error submitting data:', error);
  654. }
  655. });
  656. }
  657. function initializeAgentsDataTable() {
  658. if (!$.fn.DataTable.isDataTable('#AgentDatatable')) {
  659. $('#AgentDatatable').DataTable({
  660. dom: 'Bftip',
  661. columnDefs: [{ targets: 'no-sort', orderable: false }],
  662. lengthMenu: [
  663. [50, 100, 200, 500, -1],
  664. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  665. ],
  666. scrollY: '60vh',
  667. fixedColumns: { left: 1, right: 1 },
  668. buttons: [
  669. { extend: 'pageLength', className: 'btn btn-warning' },
  670. { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
  671. { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
  672. { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
  673. { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
  674. ],
  675. fixedHeader: true,
  676. autoWidth: true,
  677. responsive: true,
  678. searching: true,
  679. select: false,
  680. processing: false
  681. });
  682. }
  683. // Initialize the Pendingtasktable if it is not already initialized
  684. if (!$.fn.DataTable.isDataTable('#Pendingtasktable')) {
  685. $('#Pendingtasktable').DataTable({
  686. dom: 'Bftip',
  687. columnDefs: [{ targets: 'no-sort', orderable: false }],
  688. lengthMenu: [
  689. [50, 100, 200, 500, -1],
  690. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  691. ],
  692. scrollY: '60vh',
  693. fixedColumns: { left: 1, right: 1 },
  694. buttons: [
  695. { extend: 'pageLength', className: 'btn btn-warning' },
  696. { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
  697. { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
  698. { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
  699. { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
  700. ],
  701. fixedHeader: true,
  702. autoWidth: true,
  703. responsive: true,
  704. searching: true,
  705. select: false,
  706. processing: false
  707. });
  708. }
  709. }
  710. //view url for specific id details
  711. function ViewDetails(url) {
  712. if(url)
  713. {
  714. window.open( url,'_blank');
  715. }
  716. else
  717. { Swal.fire({
  718. title: 'Error!',
  719. text: 'NO Data Available!',
  720. icon: 'error',
  721. timer: 2000,
  722. showConfirmButton: false
  723. })
  724. }
  725. }
  726. //whatsapp message function
  727. function sendWhatsAppMessage(cellnumber, billNo, viewdetailsUrl) {
  728. // Build the dynamic WhatsApp message URL
  729. let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${cellnumber}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Greetings+from+Greater+Chennai+Corporation%2C%0A%0AProperty+Bill+No+${billNo}%0A%0ASkip+the+hassle+and+pay+your+property+tax+easily+on+WhatsApp.+It%E2%80%99s+quick%2C+stress-free%2C+and+just+a+few+taps+away%21+%F0%9F%93%B2%0A%0ASimply+click+the+button+below+to+view+your+payment+details+and+complete+your+payment+today%21+%F0%9F%92%B8&media_url=https%3A%2F%2Fres.cloudinary.com%2Fdpub5muar%2Fimage%2Fupload%2Fv1727080053%2Fang8tqjqdcxuqoeiuvjl.jpg&isTemplate=true&cta_button_url=${encodeURIComponent(viewdetailsUrl)}`;
  730. // Send the WhatsApp message
  731. $.ajax({
  732. url: '/gcc/api/whatsapp/send-whatsapp-message', // Replace with your service path
  733. type: 'POST',
  734. data: { msgUrl: msgUrl },
  735. success: function(response) {
  736. console.log('WhatsApp message sent successfully', response);
  737. //alert('WhatsApp message sent!');
  738. Swal.fire({
  739. title: 'Success!',
  740. text: 'Message sent successfully!',
  741. icon: 'success',
  742. timer: 2000,
  743. showConfirmButton: false
  744. })
  745. },
  746. error: function(xhr, status, error) {
  747. console.error('Error sending WhatsApp message:', error);
  748. //alert('Failed to send WhatsApp message.');
  749. Swal.fire({
  750. title: 'Error!',
  751. text: 'Message Not sent!',
  752. icon: 'error',
  753. timer: 2000,
  754. showConfirmButton: false
  755. })
  756. }
  757. });
  758. }
  759. </script>
  760. </body>
  761. </html>