yoganandhank
/
gcc_office_campaign_project
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
1 Commit
1 Branch
0 Tags
142 KiB
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
gcc_office_campaign_project/frontend/callcenter/agentscampaign.html

1807 lines
75 KiB
Raw Permalink Normal View History

first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  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. }
  9. .custom-width2 {
  10. width: 200px; /* Adjust the width as needed */
  11. }
  13. .custom-width3 {
  14. width: 100px;
  15. }
  17. table td {
  18. text-align: center;
  19. }
  21. #campaignTable {
  22. display: none;
  23. }
  25. .modal-body {
  26. max-height: 70vh;
  27. overflow-y: auto; /* Enables vertical scrolling */
  28. overflow-x: hidden; /* Hides horizontal scrolling */
  29. padding-right: 15px; /* Prevents content cutoff */
  30. }
  31. </style>
  32. <body>
  34. <!--[if lt IE 8]>
  35. <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>
  36. <![endif]-->
  38. <div class="wrapper">
  39. <!-- header top menu Start -->
  40. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  41. <!-- header top menu end -->
  43. <div class="page-wrap">
  44. <!--=============== Left Menu side Start ================-->
  45. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  46. <!--=============== Left side End ================-->
  47. <div class="main-content">
  48. <div class="container-fluid">
  49. <div class="page-header mb-2">
  50. <div class="row align-items-end">
  51. <div class="col-lg-8">
  52. <div class="page-header-title">
  53. <i class="fas fa-headset bg-blue"></i>
  54. <div class="d-inline">
  55. <h5>Agent's Campaign</h5>
  56. <span>1913 Agent's Campaign</span>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="col-lg-4">
  61. <nav class="breadcrumb-container" aria-label="breadcrumb">
  62. <ol class="breadcrumb">
  63. <li class="breadcrumb-item"><a href="/gcc/index"><i
  64. class="ik ik-home"></i></a></li>
  65. <li class="breadcrumb-item" aria-current="page">1913
  66. Campaign</li>
  67. <li class="breadcrumb-item active" aria-current="page">Agents
  68. Campaign</li>
  69. </ol>
  70. </nav>
  71. </div>
  72. </div>
  73. </div>
  74. <h4 class="h4 text-right text-mute" style="font-size: 12px;">
  75. Auto refresh in <font id="refresh-countdown">00</font> seconds
  76. </h4>
  78. <div class="row">
  79. <div class="col-md-12 mt-2">
  80. <div class="card">
  81. <div class="card-block">
  82. <div class="page-header-title">
  83. <h4 style="margin: 0; font-weight: bold;" class="text-center">
  84. <span th:text="${agent_name}"></span>' s Campaign
  85. </h4>
  86. <div
  87. class="mt-2 d-flex justify-content-between align-items-center">
  88. <h5 style="margin: 0; font-weight: bold; font-style: italic;">Campaign
  89. List</h5>
  90. <button type="button" class="btn btn-primary" id="refresh">
  91. <i class="ik ik-refresh-ccw"></i>Refresh
  92. </button>
  93. </div>
  94. <hr>
  95. </div>
  96. <div>
  97. <table id="Agenttask"
  98. class="table table-striped table-bordered table-hover dataTable"
  99. role="grid" style="width: 99%;">
  100. <thead class="thead-dark">
  101. <tr role="row">
  102. <th class="text-center no-sort">S.No</th>
  103. <th class="text-center">Category</th>
  104. <th class="text-center">CampaignName</th>
  105. <th class="text-center">Calls Assigned</th>
  106. <th class="text-center">Calls Completed</th>
  107. <th class="text-center">Calls Pending</th>
  108. <!-- <th class="text-center">C Date</th> -->
  109. </tr>
  110. </thead>
  111. <tbody>
  113. <tr th:each="agentsCampaign, iterStat : ${agentsCampaigns}">
  114. <td th:text="${iterStat.index + 1}" class="text-center"></td>
  115. <!-- Serial number -->
  116. <td th:text="${agentsCampaign['category_name']}"
  117. class="text-center"></td>
  118. <!-- Category name -->
  119. <td th:text="${agentsCampaign['campaign_name']}"
  120. class="text-center"></td>
  121. <!-- Campaign name -->
  122. <td th:text="${agentsCampaign['calls_assigned']}"
  123. class="text-center"></td>
  124. <td th:text="${agentsCampaign['complete_count']}"
  125. class="text-center"></td>
  126. <td th:text="${agentsCampaign['pending_count']}"
  127. class="text-center"></td>
  128. <!-- <td th:text="${agentsCampaign['created_date']}" class="text-center"></td> -->
  131. </tr>
  133. </tbody>
  136. </table>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  142. <div class="col-md-12" id="tablesforcalls" style="display: block;">
  143. <div class="card">
  144. <div class="card-block">
  148. <div class="page-header-title">
  151. <div class="col-md-12">
  152. <div class="row">
  153. <button id="primaryButton" class="btn btn-success">Non-Processed
  154. Calls</button>
  155. <button id="secondaryButton"
  156. class="btn btn-secondary btn-custom ml-3">Processed
  157. Calls</button>
  158. </div>
  159. </div>
  161. <hr>
  163. </div>
  165. <div>
  166. <div class="table-responsive" id="primaryTable"
  167. style="display: block;">
  168. <table id="AgentDatatable"
  169. class="table table-bordered table-hover dataTable"
  170. role="grid">
  171. <thead class="thead-dark">
  172. <tr role="row">
  173. <th>S.No</th>
  175. <th class="text-center">Name</th>
  176. <th class="text-center">MobileNumber</th>
  178. <th class="text-center">ViewDetails</th>
  180. <th class="text-center custom-width1">Callstatus</th>
  182. <th class="text-center custom-width2">Remarks</th>
  183. <th class="text-center">Submit</th>
  185. </tr>
  186. </thead>
  187. <tbody>
  188. <!-- Loop through the agentsCampaignsList -->
  189. <th:block th:each="item, stat : ${agentsCampaignsList}">
  190. <tr>
  191. <td th:text="${stat.index + 1}"></td>
  192. <!-- S.No (Index + 1) -->
  193. <td class="text-center" th:text="${item.field_1}"></td>
  194. <!-- Name -->
  195. <td class="text-center" th:text="${item.field_2}"></td>
  196. <!-- Address -->
  198. <!-- View Details Button -->
  199. <!-- <td class="text-center">
  200. <button class="btn btn-primary">View</button>
  201. </td>-->
  202. <!-- View Details Button -->
  203. <td class="text-center">
  204. <button class="btn btn-primary view-details"
  205. th:data-categoryid="${item.category_id}"
  206. th:data-campaignid="${item.campaign_id}"
  207. th:data-agentid="${item.agent_id}"
  208. th:data-dataid="${item.data_id}" data-toggle="modal"
  209. data-target="#campaignModal">View</button>
  210. </td>
  212. <!-- <td class="text-center">
  213. <button class="btn btn-primary questionview-details"
  214. th:data-categoryid="${item.category_id}"
  215. th:data-cmpaignid="${item.campaign_id}"
  216. th:data-agentid="${item.agent_id}"
  218. th:data-dataid="${item.data_id}"
  219. data-toggle="modal"
  220. data-target="#questionCampaignView">
  221. View
  222. </button>
  223. </td>-->
  227. <!-- Action Dropdown -->
  228. <td class="text-center"><select
  229. class="form-control action-dropdown"
  230. th:id="'callStatusDropdown-' + ${stat.index}"
  231. name="action">
  232. <option value="">Select Call Status</option>
  233. </select></td>
  235. <!-- <td class="text-center"><select
  236. class="form-control form-control-sm action-select action-dropdown">
  237. <option value="Select Call Status" selected>Select Call Status</option>
  238. <option th:each="status : ${CampActions}"
  239. th:value="${status.call_status}"
  240. th:text="${status.call_status}"></option>
  241. </select>
  242. </td> -->
  247. <!-- Remarks Textarea -->
  248. <td class="text-center"><textarea
  249. class="form-control" name="remarks" id="remarks"
  250. th:text="${item.remarks}"></textarea></td>
  251. <td class="text-center">
  252. <button class="btn btn-primary submit-button submitid"
  253. th:id="'submit-btn-' + ${stat.index}"
  254. th:data-categoryid="${item.category_id}"
  255. th:data-campaignid="${item.campaign_id}"
  256. th:data-agentid="${item.agent_id}"
  257. th:data-dataid="${item.data_id}"
  258. th:onclick="|submitAction('${item.data_id}', '${stat.index}', '${item.agent_id}', '${item.campaign_id}')|">
  260. Submit</button>
  261. </td>
  264. </tr>
  265. </th:block>
  266. </tbody>
  269. </table>
  270. </div>
  271. </div>
  272. <div class="table-responsive" id="secondaryTable"
  273. style="display: none;">
  274. <table id="AgentDatatable1"
  275. class="table table-bordered table-hover dataTable"
  276. role="grid">
  277. <thead class="thead-dark">
  278. <tr role="row">
  279. <th>S.No</th>
  281. <th class="text-center">Name</th>
  282. <th class="text-center">MobileNumber</th>
  284. <th class="text-center">ViewDetails</th>
  286. <th class="text-center custom-width1">Callstatus</th>
  288. <th class="text-center custom-width2">Remarks</th>
  291. </tr>
  292. </thead>
  293. <tbody>
  294. <!-- Loop through the agentsCampaignsList -->
  295. <th:block th:each="item, stat : ${agentsCampaignsList1}">
  296. <tr>
  297. <td th:text="${stat.index + 1}"></td>
  298. <!-- S.No (Index + 1) -->
  299. <td class="text-center" th:text="${item.field_1}"></td>
  300. <!-- Name -->
  301. <td class="text-center" th:text="${item.field_2}"></td>
  302. <!-- Address -->
  305. <td class="text-center">
  306. <button class="btn btn-primary view-details1"
  307. th:data-categoryid="${item.category_id}"
  308. th:data-campaignid="${item.campaign_id}"
  309. th:data-agentid="${item.agent_id}"
  310. th:data-dataid="${item.data_id}" data-toggle="modal"
  311. data-target="#campaignModal2">View</button>
  312. </td>
  315. <td th:text="${item.call_status}"></td>
  318. <!-- Remarks Textarea -->
  319. <td class="text-center"><textarea
  320. class="form-control" name="remarks" id="remarks"
  321. th:text="${item.remarks}" readonly></textarea></td>
  324. </tr>
  325. </th:block>
  326. </tbody>
  329. </table>
  330. </div>
  333. </div>
  335. </div>
  336. </div>
  339. <div class="col-md-12" id="tablesforpendingcalls"
  340. style="display: none;">
  341. <div class="card">
  342. <div class="card-block">
  343. <div class="page-header-title">
  344. <h5 style="margin: 0; font-weight: bold;">
  345. <span id="campaign-names-display"
  346. style="font-weight: bold; color: blue; margin-right: 5px;"></span>-
  347. Further Calls List
  348. </h5>
  349. <hr>
  350. </div>
  351. <div>
  352. <table id="Pendingtasktable"
  353. class="table table-bordered table-hover dataTable"
  354. role="grid">
  355. <thead class="thead-dark">
  356. <tr role="row">
  357. <th>S.No</th>
  359. <th class="text-center">Name</th>
  361. <th class="text-center">Mobile number</th>
  362. <th class="text-center">ViewDetails</th>
  363. <th class="text-center custom-width1">Callstatus</th>
  364. <th class="text-center custom-width2">Remarks</th>
  365. <th class="text-center">Send Message</th>
  366. <th class="text-center">Status</th>
  367. </tr>
  368. </thead>
  369. <tbody>
  371. </tbody>
  373. </table>
  374. </div>
  377. </div>
  379. </div>
  380. </div>
  384. </div>
  387. </div>
  388. </div>
  390. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  391. </div>
  392. <!-- <div class="modal fade" id="CampaignView" tabindex="-1"
  393. role="dialog" aria-labelledby="CampaignView"
  394. aria-hidden="true" data-backdrop="static" data-keyboard="false">
  395. <div class="modal-dialog modal-lg" role="document">
  396. <div class="modal-content">
  397. <div class="modal-header">
  398. <h5 class="modal-title">Campaign Details</h5>
  399. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  400. <span aria-hidden="true">&times;</span>
  401. </button>
  402. </div>
  403. <div class="modal-body">
  404. <div id="CampaignViewContent">Loading...</div>
  405. </div>
  406. </div>
  407. </div>
  408. </div>
  409. <div class="modal fade" id="questionCampaignView" tabindex="-1"
  410. role="dialog" aria-labelledby="CampaignView"
  411. aria-hidden="true" data-backdrop="static" data-keyboard="false">
  412. <div class="modal-dialog modal-lg" role="document">
  413. <div class="modal-content">
  414. <div class="modal-header">
  415. <h5 class="modal-title">Campaign Details</h5>
  416. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  417. <button type="button" class="btn btn-primary" id="submitAnswers">Submit</button>
  419. </div>
  420. <div class="modal-body">
  421. <div id="questionsCampaignView">Loading...</div>
  422. </div>
  423. </div>
  424. </div>
  425. </div> -->
  426. <div class="modal fade" id="campaignModal" tabindex="-1" role="dialog"
  427. aria-labelledby="campaignModalLabel" aria-hidden="true"
  428. data-backdrop="static" data-keyboard="false">
  429. <div class="modal-dialog modal-lg modal-dialog-scrollable"
  430. role="document">
  431. <div class="modal-content">
  432. <div class="modal-header">
  433. <h5 class="modal-title">Details & Questions</h5>
  434. <button type="button" class="close" data-dismiss="modal"
  435. aria-label="Close">
  436. <span aria-hidden="true">&times;</span>
  437. </button>
  438. </div>
  439. <div class="modal-body">
  440. <!-- Section for Campaign Details -->
  441. <div id="campaignDetails">
  442. <h5>Details</h5>
  443. <div id="CampaignViewContent">Loading...</div>
  444. </div>
  446. <hr>
  448. <!-- Section for Questions and Answers -->
  449. <div id="campaignQuestions">
  450. <h5>Questions</h5>
  451. <div id="questionsCampaignView">Loading...</div>
  452. </div>
  453. </div>
  454. <div class="modal-footer d-flex justify-content-center">
  456. <button type="button" class="btn btn-primary" id="submitAnswers">Submit
  457. Answers</button>
  458. <button type="button" class="btn btn-secondary"
  459. data-dismiss="modal">Close</button>
  460. </div>
  461. </div>
  462. </div>
  463. </div>
  466. <div class="modal fade" id="campaignModal2" tabindex="-1" role="dialog"
  467. aria-labelledby="campaignModalLabel" aria-hidden="true"
  468. data-backdrop="static" data-keyboard="false">
  469. <div class="modal-dialog modal-lg modal-dialog-scrollable"
  470. role="document">
  471. <div class="modal-content">
  472. <div class="modal-header">
  473. <h5 class="modal-title">Details & Questions</h5>
  474. <button type="button" class="close" data-dismiss="modal"
  475. aria-label="Close">
  476. <span aria-hidden="true">&times;</span>
  477. </button>
  478. </div>
  479. <div class="modal-body">
  480. <!-- Section for Campaign Details -->
  481. <div id="campaignDetails1">
  482. <h5>Details</h5>
  483. <div id="CampaignViewContent1">Loading...</div>
  484. </div>
  486. <hr>
  488. <!-- Section for Questions and Answers -->
  489. <div id="campaignQuestions1">
  490. <h5>Questions</h5>
  491. <div id="questionsCampaignView1">Loading...</div>
  492. </div>
  493. </div>
  494. <div class="modal-footer d-flex justify-content-center">
  496. <!-- <button type="button" class="btn btn-primary" id="submitAnswers">Submit
  497. Answers</button> -->
  498. <button type="button" class="btn btn-secondary"
  499. data-dismiss="modal">Close</button>
  500. </div>
  501. </div>
  502. </div>
  503. </div>
  507. </div>
  511. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  513. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  514. <script
  515. src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
  519. <script>
  521. $(document).ready(function() {
  523. $(".view-details1").click(function () {
  524. let categoryId = $(this).data("categoryid");
  525. let campaignId = $(this).data("campaignid");
  526. let agentId = $(this).attr("data-agentid");
  527. let dataId = $(this).attr("data-dataid");
  529. console.log("Fetching details for categoryId:", categoryId);
  530. console.log("Fetching questions for campaignId:", campaignId);
  532. // Fetch campaign details
  534. $.ajax({
  535. url: "/gcc/api/agents/Campaignview",
  536. type: "GET",
  537. data: { categoryId, agentId, dataId },
  538. success: function (response) {
  539. console.log(response);
  540. let modalContent = `<div class="container-fluid">
  541. <table class="table table-bordered">
  542. <tbody>`;
  544. if (response.length > 0) {
  545. let item = response[0];
  546. let keys = Object.keys(item);
  548. for (let i = 0; i < keys.length; i += 3) {
  549. modalContent += `<tr>`;
  551. // Loop through 3 items per row
  552. for (let j = 0; j < 3; j++) {
  553. if (i + j < keys.length) {
  554. let key = keys[i + j];
  555. let value = item[key] ? item[key] : "-";
  557. /* modalContent += `
  558. <th class="bg-light text-dark p-2 text-center">${key.replace(/_/g, " ")}</th>
  559. <td style="word-wrap: break-word; white-space: normal; max-width: 200px;">${value}</td>`;
  560. } */
  562. let displayValue = (typeof value === "string" && value.startsWith("http"))
  563. ? `<a href="${value}" target="_blank" style="text-decoration: none; color: blue;">${value}</a>`
  564. : value;
  566. modalContent += `
  567. <th class="bg-light text-dark p-2 text-center">${key.replace(/_/g, " ")}</th>
  568. <td style="word-wrap: break-word; white-space: normal; max-width: 200px;">${displayValue}</td>`;
  569. }
  570. }
  572. modalContent += `</tr>`;
  573. }
  574. } else {
  575. modalContent += `<tr><td colspan="6" class="text-center">No data available</td></tr>`;
  576. }
  578. modalContent += `</tbody></table></div>`;
  580. $("#CampaignViewContent1").html(modalContent);
  581. },
  582. error: function () {
  584. $("#CampaignViewContent1").html("<p>Error fetching campaign details.</p>");
  585. }
  586. });
  588. // Fetch related questions
  589. $.ajax({
  590. url: "/gcc/api/agents/questions",
  591. type: "GET",
  592. data: { categoryId, campaignId },
  593. success: function (response) {
  594. console.log(response);
  595. renderQuestions1(response, campaignId, agentId, dataId);
  596. },
  597. error: function () {
  599. $("#questionsCampaignView1").html("<p>Error fetching questions.</p>");
  600. }
  601. });
  603. // Show modal after fetching details
  605. $("#campaignModal1").modal("show");
  606. });
  608. $(".view-details").click(function () {
  609. let categoryId = $(this).data("categoryid");
  610. let campaignId = $(this).data("campaignid");
  611. let agentId = $(this).attr("data-agentid");
  612. let dataId = $(this).attr("data-dataid");
  614. $("#submitAnswers").attr("data-categoryid", categoryId);
  615. $("#submitAnswers").attr("data-campaignid", campaignId);
  616. $("#submitAnswers").attr("data-agentid", agentId);
  617. $("#submitAnswers").attr("data-dataid", dataId);
  619. console.log("Fetching details for categoryId:", categoryId);
  620. console.log("Fetching questions for campaignId:", campaignId);
  622. // Fetch campaign details
  624. $.ajax({
  625. url: "/gcc/api/agents/Campaignview",
  626. type: "GET",
  627. data: { categoryId, agentId, dataId },
  628. success: function (response) {
  629. console.log(response);
  630. let modalContent = `<div class="container-fluid">
  631. <table class="table table-bordered">
  632. <tbody>`;
  634. if (response.length > 0) {
  635. let item = response[0];
  636. let keys = Object.keys(item);
  638. for (let i = 0; i < keys.length; i += 3) {
  639. modalContent += `<tr>`;
  641. // Loop through 3 items per row
  642. for (let j = 0; j < 3; j++) {
  643. if (i + j < keys.length) {
  644. let key = keys[i + j];
  645. let value = item[key] ? item[key] : "-";
  647. /* modalContent += `
  648. <th class="bg-light text-dark p-2 text-center">${key.replace(/_/g, " ")}</th>
  649. <td style="word-wrap: break-word; white-space: normal; max-width: 200px;">${value}</td>`;
  650. } */
  652. let displayValue = (typeof value === "string" && value.startsWith("http"))
  653. ? `<a href="${value}" target="_blank" style="text-decoration: none; color: blue;">${value}</a>`
  654. : value;
  656. modalContent += `
  657. <th class="bg-light text-dark p-2 text-center">${key.replace(/_/g, " ")}</th>
  658. <td style="word-wrap: break-word; white-space: normal; max-width: 200px;">${displayValue}</td>`;
  659. }
  660. }
  662. modalContent += `</tr>`;
  663. }
  664. } else {
  665. modalContent += `<tr><td colspan="6" class="text-center">No data available</td></tr>`;
  666. }
  668. modalContent += `</tbody></table></div>`;
  669. $("#CampaignViewContent").html(modalContent);
  671. },
  672. error: function () {
  673. $("#CampaignViewContent").html("<p>Error fetching campaign details.</p>");
  675. }
  676. });
  678. // Fetch related questions
  679. $.ajax({
  680. url: "/gcc/api/agents/questions",
  681. type: "GET",
  682. data: { categoryId, campaignId },
  683. success: function (response) {
  684. console.log(response);
  685. renderQuestions(response, campaignId, agentId, dataId);
  686. },
  687. error: function () {
  688. $("#questionsCampaignView").html("<p>Error fetching questions.</p>");
  690. }
  691. });
  693. // Show modal after fetching details
  694. $("#campaignModal").modal("show");
  696. });
  698. function renderQuestions1(data, campaignId, agentId, dataId) {
  699. let html = `<div class="container">`;
  700. let allAnswered = true; // Track if all answers exist
  702. data.forEach(question => {
  703. let questionId = question.question_id;
  704. let inputField = "";
  706. // Fetch existing answer
  707. $.ajax({
  708. url: "/gcc/api/agents/fetchAnswer",
  709. type: "GET",
  710. data: { campaignId, agentId, questionId, dataId },
  711. async: false, // Ensure answer is fetched before rendering
  712. success: function (answerResponse) {
  713. let existingAnswer = (answerResponse.length > 0) ? answerResponse[0].campaign_answer : null;
  714. let isReadOnly = existingAnswer ? "readonly" : "";
  716. inputField = generateInputField2(question, existingAnswer, isReadOnly);
  718. // If any question does not have an answer, allow form submission
  719. if (!existingAnswer) {
  720. allAnswered = false;
  721. }
  722. }
  723. });
  725. html += `
  726. <div class="row align-items-center mb-3">
  727. <div class="col-md-8">
  728. <label class="font-weight-bold">${question.questions}<span class="text-danger">*</span></label>
  729. </div>
  730. <div class="col-md-4">${inputField}</div>
  731. </div>`;
  732. });
  734. html += `</div>`;
  736. $("#questionsCampaignView1").html(html);
  738. // Hide submit button if all questions have answers
  739. /* if (allAnswered) {
  740. $("#submitAnswers").hide();
  741. } else {
  742. $("#submitAnswers").show();
  743. } */
  744. }
  746. function renderQuestions(data, campaignId, agentId, dataId) {
  747. let html = `<div class="container">`;
  748. let allAnswered = true; // Track if all answers exist
  750. data.forEach(question => {
  751. let questionId = question.question_id;
  752. let inputField = "";
  754. // Fetch existing answer
  755. $.ajax({
  756. url: "/gcc/api/agents/fetchAnswer",
  757. type: "GET",
  758. data: { campaignId, agentId, questionId, dataId },
  759. async: false, // Ensure answer is fetched before rendering
  760. success: function (answerResponse) {
  761. let existingAnswer = (answerResponse.length > 0) ? answerResponse[0].campaign_answer : null;
  762. let isReadOnly = existingAnswer ? "readonly" : "";
  764. inputField = generateInputField(question, existingAnswer, isReadOnly);
  766. // If any question does not have an answer, allow form submission
  767. if (!existingAnswer) {
  768. allAnswered = false;
  769. }
  770. }
  771. });
  773. html += `
  774. <div class="row align-items-center mb-3">
  775. <div class="col-md-8">
  776. <label class="font-weight-bold">${question.questions}<span class="text-danger">*</span></label>
  777. </div>
  778. <div class="col-md-4">${inputField}</div>
  779. </div>`;
  780. });
  782. html += `</div>`;
  783. $("#questionsCampaignView").html(html);
  786. // Hide submit button if all questions have answers
  787. if (allAnswered) {
  788. $("#submitAnswers").hide();
  789. } else {
  790. $("#submitAnswers").show();
  791. }
  792. }
  794. function generateInputField2(question, existingAnswer, isReadOnly) {
  795. let html = "";
  798. if (question.answer_type_id == 1) { // Text Input
  799. html = `<input type="text" class="form-control answer-input"
  800. data-questionid="${question.question_id}"
  801. value="${existingAnswer || ''}"
  802. readonly
  803. ${isReadOnly}/>`;
  804. }
  805. else if (question.answer_type_id == 2) { // Radio Buttons
  806. question.answers.forEach(ans => {
  807. let checked = (existingAnswer === ans) ? "checked" : "disabled";
  808. let isReadOnlyAttr = existingAnswer ? 'onclick="return false;"' : ""; // Prevent change
  809. html += `
  810. <div class="form-check form-check-inline">
  811. <input class="form-check-input answer-input" type="radio"
  812. name="q_${question.question_id}" value="${ans}"
  813. data-questionid="${question.question_id}"
  814. ${checked} ${isReadOnlyAttr}>
  815. <label class="form-check-label">${ans}</label>
  816. </div>`;
  817. });
  818. }
  819. else if (question.answer_type_id == 3) { // Dropdown (Select)
  820. let isDisabled = existingAnswer ? 'disabled' : 'disabled'; // Disable only when an answer exists
  822. html = `<select class="form-control answer-input"
  823. data-questionid="${question.question_id}" ${isDisabled}>
  824. <option value="" disabled ${!existingAnswer ? "selected" : ""}>
  825. Select an option
  826. </option>`; // Show "Select an option" only if no answer exists
  828. question.answers.forEach(ans => {
  829. let selected = (existingAnswer === ans) ? "selected" : "";
  830. html += `<option value="${ans}" ${selected}>${ans}</option>`;
  831. });
  833. html += `</select>`;
  834. }
  835. else if (question.answer_type_id == 4) { // Checkbox
  836. question.answers.forEach(ans => {
  837. let checked = (existingAnswer && existingAnswer.includes(ans)) ? "checked" : "disabled";
  838. let isReadOnlyAttr = existingAnswer ? 'onclick="return false;"' : ""; // Prevent change
  839. html += `
  840. <div class="form-check">
  841. <input class="form-check-input answer-input" type="checkbox"
  842. value="${ans}" data-questionid="${question.question_id}"
  843. ${checked} ${isReadOnlyAttr}>
  844. <label class="form-check-label">${ans}</label>
  845. </div>`;
  846. });
  848. }
  850. return html;
  851. }
  853. function generateInputField(question, existingAnswer, isReadOnly) {
  854. let html = "";
  857. if (question.answer_type_id == 1) { // Text Input
  858. html = `<input type="text" class="form-control answer-input"
  859. data-questionid="${question.question_id}"
  860. value="${existingAnswer || ''}"
  861. ${isReadOnly}/>`;
  862. }
  863. else if (question.answer_type_id == 2) { // Radio Buttons
  864. question.answers.forEach(ans => {
  865. let checked = (existingAnswer === ans) ? "checked" : "";
  866. let isReadOnlyAttr = existingAnswer ? 'onclick="return false;"' : ""; // Prevent change
  867. html += `
  868. <div class="form-check form-check-inline">
  869. <input class="form-check-input answer-input" type="radio"
  870. name="q_${question.question_id}" value="${ans}"
  871. data-questionid="${question.question_id}"
  872. ${checked} ${isReadOnlyAttr}>
  873. <label class="form-check-label">${ans}</label>
  874. </div>`;
  875. });
  876. }
  877. else if (question.answer_type_id == 3) { // Dropdown (Select)
  878. let isDisabled = existingAnswer ? 'disabled' : ''; // Disable only when an answer exists
  880. html = `<select class="form-control answer-input"
  881. data-questionid="${question.question_id}" ${isDisabled}>
  882. <option value="" disabled ${!existingAnswer ? "selected" : ""}>
  883. Select an option
  884. </option>`; // Show "Select an option" only if no answer exists
  886. question.answers.forEach(ans => {
  887. let selected = (existingAnswer === ans) ? "selected" : "";
  888. html += `<option value="${ans}" ${selected}>${ans}</option>`;
  889. });
  891. html += `</select>`;
  892. }
  893. else if (question.answer_type_id == 4) { // Checkbox
  894. question.answers.forEach(ans => {
  895. let checked = (existingAnswer && existingAnswer.includes(ans)) ? "checked" : "";
  896. let isReadOnlyAttr = existingAnswer ? 'onclick="return false;"' : ""; // Prevent change
  897. html += `
  898. <div class="form-check">
  899. <input class="form-check-input answer-input" type="checkbox"
  900. value="${ans}" data-questionid="${question.question_id}"
  901. ${checked} ${isReadOnlyAttr}>
  902. <label class="form-check-label">${ans}</label>
  903. </div>`;
  904. });
  906. }
  908. return html;
  909. }
  912. // Submit only new answers
  913. $("#submitAnswers").off('click').on('click', function () {
  914. let answersArray = [];
  915. let allAnswered = true; // Flag to check if all required fields are answered
  916. let categoryId = $(this).attr("data-categoryid");
  917. let campaignId = $(this).attr("data-campaignid");
  918. let agentId = $(this).attr("data-agentid");
  919. let dataId = $(this).attr("data-dataid");
  921. let processedQuestions = new Set(); // To prevent duplicate question processing
  923. $(".answer-input").each(function () {
  924. let questionId = $(this).data("questionid");
  925. let answerValue = null;
  927. if (processedQuestions.has(questionId)) {
  928. return; // Skip duplicate question IDs
  929. }
  931. if ($(this).is(":radio")) {
  932. answerValue = $(`input[name="q_${questionId}"]:checked`).val();
  934. } else if ($(this).is("select")) {
  935. answerValue = $(this).val();
  936. } else if ($(this).is(":checkbox")) {
  937. answerValue = $(`input[data-questionid="${questionId}"]:checked`).map(function () {
  938. return $(this).val();
  939. }).get().join(", ");
  940. } else {
  941. answerValue = $(this).val();
  942. }
  944. if (!answerValue || answerValue.trim() === "") {
  945. allAnswered = false;
  946. //$(this).addClass("is-invalid");
  947. } else {
  948. $(this).removeClass("is-invalid");
  949. processedQuestions.add(questionId);
  950. answersArray.push({
  951. campaign_id: campaignId,
  952. data_id: dataId,
  953. agent_id: agentId,
  954. question_id: questionId,
  955. campaign_answer: answerValue
  956. });
  957. }
  958. });
  960. if (!allAnswered) {
  961. Swal.fire({
  962. icon: "warning",
  963. title: "Missing Fields!",
  964. text: "Please fill in all required fields before submitting.",
  965. confirmButtonText: "OK"
  966. });
  967. return;
  968. }
  970. console.log("Submitting Answers:", answersArray);
  972. $('#submitAnswers').attr('disabled', true).text('Processing');
  973. $.ajax({
  974. url: "/gcc/api/agents/submitAnswers",
  975. type: "POST",
  976. contentType: "application/json",
  977. data: JSON.stringify({ answers: answersArray }),
  978. success: function (response) {
  979. $('#submitAnswers').attr('disabled', false).text('Submit Answers');
  980. Swal.fire({
  981. title: 'Success!',
  982. text: response,
  983. icon: 'success',
  984. allowOutsideClick: false, // Disable clicking outside the modal to close it
  985. allowEscapeKey: false, // Disable escape key to close the modal
  986. allowEnterKey: false, // Disable enter key to close the modal
  987. confirmButtonText: "OK"
  988. }).then(() => {
  989. $('#submitAnswers').attr('disabled', false).text('Submit Answers');
  990. $('#campaignModal').modal('hide');
  991. });
  992. },
  993. error: function (xhr) {
  994. $('#submitAnswers').attr('disabled', false).text('Submit Answers');
  995. let errorMessage = "";
  996. if (xhr.responseText) {
  997. errorMessage = xhr.responseText; // Use backend message if available
  998. }
  999. Swal.fire({
  1000. icon: "error",
  1001. title: "Submission Failed!",
  1002. text: errorMessage,
  1003. confirmButtonText: "OK"
  1004. });
  1005. }
  1006. });
  1007. });
  1011. let option_val = '';
  1013. $.ajax({
  1014. url: "/gcc/api/agents/callstatus",
  1015. type: "GET",
  1016. success: function (data) {
  1017. //dropdown.empty();
  1018. //dropdown.append('<option value="">Select Call Status</option>');
  1019. $.each(data, function (index, item) {
  1020. option_val = option_val + '<option value="' + item.id + '">' + item.call_status + '</option>';
  1021. //console.log(option_val);
  1022. });
  1023. add_data();
  1024. }
  1026. });
  1028. function add_data(){
  1030. $(".action-dropdown").each(function () {
  1031. //alert($(this));
  1032. let dropdown = $(this);
  1033. //if (!dropdown.find("option[value='']").length) {
  1034. dropdown.empty();
  1035. dropdown.append('<option value="">Select Call Status</option>');
  1036. dropdown.append(option_val);
  1037. // }
  1038. });
  1040. }
  1045. /* $(".action-dropdown").each(function () {
  1046. let dropdown = $(this);
  1047. $.ajax({
  1048. url: "/gcc/api/agents/callstatus",
  1049. type: "GET",
  1050. success: function (data) {
  1051. dropdown.empty();
  1052. dropdown.append('<option value="">Select Call Status</option>');
  1053. $.each(data, function (index, item) {
  1054. dropdown.append('<option value="' + item.id + '">' + item.call_status + '</option>');
  1055. });
  1056. }
  1057. });
  1058. }); */
  1059. /* function submitAction(dataId, index,agentId,campaignId) {
  1060. let row = $(`#submit-btn-${index}`).closest("tr");
  1061. // Get selected dropdown value and textarea value
  1062. let callStatus = row.find(".action-dropdown").val(); // Ensure you're getting the correct value
  1063. let remarks = row.find("textarea[name='remarks']").val() || "N/A";
  1064. console.log("sxdnx",remarks);
  1067. // Make an AJAX POST request to submit the data
  1068. $.ajax({
  1069. url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
  1070. type: 'POST',
  1071. contentType: 'application/json',
  1072. data: JSON.stringify({
  1073. data_id: dataId,
  1074. agent_id: agentId,
  1075. campaign_id:campaignId,
  1076. call_status: callStatus, // Use "call_status" as the key to match the controller parameter name
  1077. remarks: remarks
  1078. }),
  1079. success: function(response) {
  1080. console.log('Data Updated successfully:', response);
  1081. // Update the button and form fields after successful submission
  1082. Swal.fire({
  1083. title: 'Success!',
  1084. text: 'Data Updated successfully!',
  1085. icon: 'success',
  1086. timer: 2000,
  1087. showConfirmButton: false
  1088. })
  1089. let button = $(`#submit-btn-${index}`);
  1090. button.text('Submitted').removeClass('btn-primary').addClass('btn-primary').prop('disabled', true);
  1091. $(`#AgentDatatable tbody .action-dropdown[data-index="${index}"]`).prop('disabled', true);
  1092. $(`#AgentDatatable tbody textarea[name="remarks"]`).eq(index).prop('disabled', true);
  1093. },
  1094. error: function(xhr, status, error) {
  1095. console.error('Error submitting data:', error);
  1096. }
  1097. });
  1098. }*/
  1102. var buttons = [
  1103. {
  1104. extend: 'pageLength',
  1105. className: 'btn btn-warning'
  1106. },
  1107. {
  1108. title: 'Data export',
  1109. extend: 'copyHtml5',
  1110. text: 'Copy',
  1111. className: 'btn btn-secondary'
  1112. },
  1113. {
  1114. extend: 'excelHtml5',
  1115. text: 'Excel',
  1116. className: 'btn btn-secondary'
  1117. },
  1118. {
  1119. extend: 'csvHtml5',
  1120. text: 'CSV',
  1121. className: 'btn btn-secondary'
  1122. },
  1123. {
  1124. extend: 'pdfHtml5',
  1125. text: 'PDF',
  1126. className: 'btn btn-secondary'
  1127. }
  1129. ];
  1132. $('#Agenttask').DataTable({
  1133. dom: 'Bftip',
  1134. columnDefs: [
  1135. {targets: 'no-sort', orderable: false}
  1136. ],
  1137. lengthMenu: [
  1138. [50, 100, 200, 500, -1],
  1139. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  1140. ],
  1141. scrollY: '20vh',
  1142. fixedColumns: {
  1143. left: 1,
  1144. right: 1
  1145. },
  1146. buttons: buttons,
  1147. fixedHeader: true,
  1148. autoWidth: true,
  1149. responsive: true,
  1150. searching: true,
  1151. select: false,
  1152. processing: false,
  1153. });
  1154. var table= $('#AgentDatatable').DataTable({
  1155. dom: 'Bftip',
  1156. columnDefs: [
  1157. {targets: 'no-sort', orderable: false}
  1158. ],
  1159. lengthMenu: [
  1160. [50, 100, 200, 500, -1],
  1161. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  1162. ],
  1163. scrollY: '50vh',
  1164. fixedColumns: {
  1165. left: 1,
  1166. right: 1
  1167. },
  1168. buttons: buttons,
  1169. fixedHeader: true,
  1170. autoWidth: true,
  1171. responsive: true,
  1172. searching: true,
  1173. select: false,
  1174. processing: true,
  1175. });
  1177. table.on('draw', function () {
  1178. var pageInfo = table.page.info();
  1179. //console.log('User navigated to page: ' + (pageInfo.page + 1)); // Page numbers are zero-based
  1180. add_data();
  1181. });
  1183. $('#AgentDatatable1').DataTable({
  1184. dom: 'Bftip',
  1185. columnDefs: [
  1186. {targets: 'no-sort', orderable: false}
  1187. ],
  1188. lengthMenu: [
  1189. [50, 100, 200, 500, -1],
  1190. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  1191. ],
  1192. scrollY: '50vh',
  1193. fixedColumns: {
  1194. left: 1,
  1195. right: 1
  1196. },
  1197. buttons: buttons,
  1198. fixedHeader: true,
  1199. autoWidth: true,
  1200. responsive: true,
  1201. searching: true,
  1202. select: false,
  1203. processing: false,
  1204. });
  1205. });
  1206. $('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
  1207. $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
  1210. $('#primaryButton').click(function () {
  1211. $('#primaryTable').show();
  1212. $('#secondaryTable').hide();
  1214. $(this).addClass('btn-success').removeClass('btn-secondary');
  1215. $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
  1216. $('#AgentDatatable').DataTable().columns.adjust().draw();
  1217. });
  1219. $('#secondaryButton').click(function () {
  1220. $('#primaryTable').hide();
  1221. $('#secondaryTable').show();
  1223. $(this).addClass('btn-success').removeClass('btn-secondary');
  1224. $('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
  1225. $('#AgentDatatable1').DataTable().columns.adjust().draw();
  1227. });
  1230. document.getElementById("refresh").addEventListener("click", function() {
  1231. location.reload(); // Reloads the current page
  1232. });
  1236. function submitAction(dataId, index, agentId, campaignId) {
  1237. let row = $(`#submit-btn-${index}`).closest("tr");
  1241. // Get selected dropdown value and textarea value
  1243. let callStatusDropdown = row.find(".action-dropdown"); // Get the dropdown element
  1244. let callStatus = callStatusDropdown.find("option:selected").text().trim(); // Get selected text
  1245. //let callStatus = callStatusDropdown.val();
  1247. let remarks = row.find("textarea[name='remarks']").val() || "N/A"; // Default to "N/A" if empty
  1249. console.log("Data ID:", dataId);
  1250. console.log("Agent ID:", agentId);
  1251. console.log("Campaign ID:", campaignId);
  1252. console.log("Call Status:", callStatus);
  1253. console.log("Remarks:", remarks);
  1256. if (!callStatus || callStatus === "Select Call Status") {
  1257. console.log("❌ Call status is required.");
  1258. Swal.fire({
  1259. title: 'Validation Error!',
  1260. text: 'Please select a Call Status before submitting.',
  1261. icon: 'warning',
  1262. confirmButtonText: 'OK'
  1263. });
  1264. return;
  1265. }
  1267. if (remarks === "" || remarks === "N/A") {
  1268. console.log("❌ Remarks cannot be empty.");
  1269. Swal.fire({
  1270. title: 'Validation Error!',
  1271. text: 'Please enter remarks before submitting.',
  1272. icon: 'warning',
  1273. confirmButtonText: 'OK'
  1274. });
  1275. return;
  1276. }
  1278. // If call status is not "INFORMATION GIVEN", submit immediately
  1279. if (callStatus !== "INFORMATION GIVEN") {
  1280. submitData(dataId, agentId, campaignId, callStatus, remarks, row, index);
  1281. return;
  1282. }
  1284. // If call status is "INFORMATION GIVEN", check database counts first
  1285. $.ajax({
  1286. url: `/gcc/api/agents/checkCounts?dataId=${dataId}&campaignId=${campaignId}`,
  1287. type: 'GET',
  1289. success: function(response) {
  1290. console.log("DB Count Check Response:", response);
  1292. if (response.length > 0) { // ✅ Ensure response contains data
  1293. let answersCount = response[0].answersCount || 0;
  1294. let questionsCount = response[0].questionsCount || 0;
  1296. console.log("Answers Count:", answersCount);
  1297. console.log("Questions Count:", questionsCount);
  1299. // ✅ If call status is NOT "INFORMATION GIVEN", allow submission directly
  1300. if (callStatus === "INFORMATION GIVEN" && questionsCount !== answersCount) {
  1301. console.log("❌ Counts do not match! Submission blocked.");
  1302. Swal.fire({
  1303. title: 'Incomplete!',
  1304. text: `You have answered only ${answersCount} out of ${questionsCount} required questions.`,
  1305. icon: 'error',
  1306. confirmButtonText: 'OK'
  1307. });
  1308. } else {
  1309. console.log("✅ Proceeding with submission.");
  1310. submitData(dataId, agentId, campaignId, callStatus, remarks, row, index);
  1311. }
  1312. } else {
  1313. console.log("❌ No count data received. Blocking submission.");
  1314. Swal.fire({
  1315. title: 'Error!',
  1316. text: 'Could not retrieve question counts. Please try again later.',
  1317. icon: 'error'
  1318. });
  1319. }
  1320. },
  1321. error: function(xhr, status, error) {
  1322. console.error('Error fetching count data:', error);
  1323. Swal.fire({
  1324. title: 'Error!',
  1325. text: 'Failed to check question counts. Please contact support.',
  1326. icon: 'error'
  1327. });
  1328. }
  1329. });
  1330. }
  1332. // Function to submit data
  1333. function submitData(dataId, agentId, campaignId, callStatus, remarks, row, index) {
  1335. $('.submitid').prop('disabled', true).text('Submitting');
  1337. $.ajax({
  1338. url: '/gcc/api/agents/savecall',
  1339. type: 'POST',
  1340. contentType: 'application/json',
  1341. data: JSON.stringify({
  1342. data_id: dataId,
  1343. agent_id: agentId,
  1344. campaign_id: campaignId,
  1345. call_status: callStatus,
  1346. remarks: remarks
  1347. }),
  1348. success: function(response) {
  1349. $('.submitid').prop('disabled', false).text('Submit');
  1350. console.log('Data Updated successfully:', response);
  1352. Swal.fire({
  1353. title: 'Success!',
  1354. text: 'Data Updated successfully!',
  1355. icon: 'success',
  1356. allowOutsideClick: false, // Disable clicking outside the modal to close it
  1357. allowEscapeKey: false, // Disable escape key to close the modal
  1358. allowEnterKey: false, // Disable enter key to close the modal
  1359. showConfirmButton: true
  1360. }).then((result) => {
  1361. if (result.isConfirmed) {
  1362. //console.log("ok button clicked");
  1363. $('.submitid').prop('disabled', false).text('Submit');
  1365. const table = $('#AgentDatatable').DataTable();
  1367. // Remove the row from the table
  1368. table.row(row).remove().draw(false);
  1370. // Recalculate and update S.No column
  1371. table.rows().every(function(index) {
  1372. $(this.node()).find('td:first-child').text(index + 1);
  1373. });
  1375. table.draw(false);
  1376. }
  1377. });
  1378. },
  1379. error: function(xhr, status, error) {
  1380. console.error('Error submitting data:', error);
  1381. }
  1382. });
  1383. }
  1388. // Make an AJAX POST request to submit the data
  1390. //working
  1393. /* function submitAction(dataId, index,agentId,campaignId) {
  1394. // Get selected dropdown value and textarea value
  1395. let row = $(`#submit-btn-${index}`).closest("tr");
  1396. // Get selected dropdown value and textarea value
  1397. let callStatusDropdown = row.find(".action-dropdown"); // Ensure you're getting the correct value
  1398. let callStatus = callStatusDropdown.find("option:selected").text();
  1399. let remarks = row.find("textarea[name='remarks']").val() || "N/A";
  1400. console.log(dataId);
  1401. console.log(agentId);
  1402. console.log(campaignId);
  1403. console.log(callStatus);
  1404. console.log(remarks);
  1408. // Make an AJAX POST request to submit the data
  1409. $.ajax({
  1410. url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
  1411. type: 'POST',
  1412. contentType: 'application/json',
  1413. data: JSON.stringify({
  1414. data_id: dataId,
  1415. agent_id: agentId,
  1416. campaign_id:campaignId,
  1417. call_status: callStatus, // Use "call_status" as the key to match the controller parameter name
  1418. remarks: remarks
  1419. }),
  1421. success: function(response) {
  1422. console.log('Data Updated successfully:', response);
  1423. // Update the button and form fields after successful submission
  1424. Swal.fire({
  1425. title: 'Success!',
  1426. text: 'Data Updated successfully!',
  1427. icon: 'success',
  1428. timer: 2000,
  1429. showConfirmButton: true
  1430. }).then((result) => {
  1431. if (result.isConfirmed) {
  1432. console.log("ok button");
  1433. $('.submitid').prop('disabled', false).text('Submit');
  1435. const table = $('#AgentDatatable').DataTable();
  1437. // Remove the row
  1438. table.row($(row)).remove();
  1440. // Reorder S.No column
  1441. table.rows().every(function (index) {
  1442. const row = this.node();
  1443. $(row).find('td:first-child').text(index + 1); // Update S.No
  1444. });
  1446. // Redraw the table
  1447. table.draw(false);
  1449. }
  1450. });
  1451. },
  1452. error: function(xhr, status, error) {
  1453. console.error('Error submitting data:', error);
  1454. }
  1455. });
  1456. }*/
  1458. /* function PendingCampaignDetails(campaignId, callsPerAgent, agentId) {
  1459. console.log('Calling PendingCampaignDetails with:', {
  1460. callsPerAgent: callsPerAgent,
  1461. campaignId: campaignId,
  1462. agentId: agentId
  1463. });
  1465. $.ajax({
  1466. url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
  1467. type: 'GET',
  1468. success: function (response) {
  1469. console.log(response);
  1470. if (response) {
  1471. // Populate modal fields with data
  1472. //$('#campaign_id').val(response.campaign_id);
  1473. $('#campaign_names').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
  1474. // Display the campaign name near the h5 element
  1475. $('#campaign-names-display').text(response.campaign_name); // Add text dynamically to the element
  1477. } else {
  1478. console.error('Error fetching campaign details:', error);
  1479. }
  1480. },
  1481. error: function (xhr, status, error) {
  1482. console.error('Error fetching campaign details:', error);
  1483. alert('An error occurred while fetching campaign details.');
  1484. }
  1485. });
  1487. // Get the card element by its ID (e.g., 'tablesforcalls')
  1488. var cardElement = document.getElementById('tablesforpendingcalls');
  1490. // Toggle the display property based on current state
  1491. if (cardElement.style.display === 'block') {
  1492. cardElement.style.display = 'none'; // Hide the card if it's currently displayed
  1493. } else {
  1494. cardElement.style.display = 'block'; // Show the card if it's hidden
  1495. }
  1497. $.ajax({
  1498. url: '/gcc/api/campaign/startcampaign?campaign_id=' + campaignId + '&calls_per_agent=' + callsPerAgent, // URL to your Spring Boot controller
  1499. type: 'GET', // GET request
  1500. contentType: 'application/json',
  1501. success: function(response) {
  1502. console.log('Campaign started successfully:', response);
  1504. // We are focusing on matching the agent_id since campaign_id is constant (24)
  1505. let dataIds = [];
  1506. response.forEach(function(item) {
  1507. console.log('Checking agent_id:', item.agent_id, 'against passed agent_id:', agentId);
  1509. if (item.agent_id === agentId) {
  1510. dataIds = item.data_ids; // Get the corresponding data_ids
  1511. console.log('Match found. Data IDs:', dataIds);
  1512. }
  1513. });
  1515. if (dataIds.length > 0) {
  1516. console.log('Data IDs for Agent ID ' + agentId + ':', dataIds);
  1518. // Fetch the data for the matched data IDs
  1519. $.ajax({
  1520. url: '/gcc/api/agents/getPendingDataByIds?ids=' + dataIds.join(','), // dataIds is the array [6, 7]
  1521. type: 'GET',
  1522. contentType: 'application/json',
  1523. success: function(response) {
  1524. console.log('Data retrieved successfully:', response);
  1526. // Initialize DataTable if not already done
  1527. let table = $('#Pendingtasktable').DataTable();
  1529. // Clear existing rows in the table
  1530. table.clear();
  1532. // Process and append the new data to the DataTable
  1533. let rows = [];
  1534. response.forEach(function(item, index) {
  1535. let row = [
  1536. index + 1, // S.No
  1537. item.id, // ID
  1538. item.name, // Name
  1539. item.address, // Address
  1540. item.dues, // Dues
  1541. item.cellnumber, // Mobile Number
  1543. `<div class="text-center">
  1544. <button class="btn btn-primary" onclick="ViewDetails('${item.viewdetails}')">View</button>
  1545. </div>`,
  1547. // Dropdown for Action
  1548. `<div class="text-center">
  1549. <select class="form-control action-dropdown2" name="action" data-index="${index}">
  1550. <option value="NONE" ${item.call_status === "NONE" ? "selected" : ""}>Call Status</option>
  1551. <option value="INFORMATION_GIVEN" ${item.call_status === "INFORMATION_GIVEN" ? "selected" : ""}>INFORMATION GIVEN</option>
  1552. <option value="UNATTENDED" ${item.call_status === "UNATTENDED" ? "selected" : ""}>UNATTENDED</option>
  1553. <option value="CALL_BACK_LATER" ${item.call_status === "CALL_BACK_LATER" ? "selected" : ""}>CALL BACK LATER</option>
  1554. <option value="SWITCH_OFF" ${item.call_status === "SWITCH_OFF" ? "selected" : ""}>SWITCH OFF</option>
  1555. <option value="WRONG_NUMBER" ${item.call_status === "WRONG_NUMBER" ? "selected" : ""}>WRONG NUMBER</option>
  1556. </select>
  1557. </div>`,
  1559. // Textarea for Remarks (populate saved remarks)
  1560. `<div class="text-center">
  1561. <textarea class="form-control" name="remarks">${item.remarks ? item.remarks : ""}</textarea>
  1562. </div>`,
  1565. // WhatsApp Message Button
  1566. `<div class="text-center">
  1567. <button class="btn btn-success" onclick="sendWhatsAppMessage('${item.cellnumber}', '${item.id}', '${item.viewdetails}')">Send</button>
  1568. </div>`,
  1570. // Centered Button for Submit Action (Initially disabled)
  1571. `<div class="text-center">
  1572. <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>
  1574. </div>`
  1575. ];
  1577. rows.push(row);
  1578. });
  1580. // Append the rows to your table
  1581. $('#Pendingtasktable').DataTable().rows.add(rows).draw();
  1584. // Add event listener to each dropdown to enable/disable the button
  1585. $('.action-dropdown2').on('change', function() {
  1586. let selectedValue = $(this).val();
  1587. let index = $(this).data('index');
  1588. let button = $('#submitt-btn-' + index);
  1591. // Enable the button if a valid option is selected, otherwise keep it disabled
  1592. if (selectedValue === 'NONE') {
  1593. button.prop('disabled', true);
  1594. button.text('Update');
  1595. button.removeClass('btn-primary').addClass('btn-primary');
  1596. } else {
  1597. button.prop('disabled', false);
  1598. button.text('Update');
  1599. button.removeClass('btn-primary').addClass('btn-primary');
  1600. }
  1601. });
  1603. $('.action-dropdown2').on('change', function () {
  1604. let selectedValue = $(this).val(); // Dropdown value
  1605. let index = $(this).data('index'); // Index of the row
  1606. let button = $('#submit-btn-' + index); // The submit button
  1607. let remarksField = $('textarea[name="remarks"]').eq(index); // The remarks textarea
  1609. // Function to check if the button should be enabled
  1610. function toggleButtonState() {
  1611. let remarksValue = remarksField.val().trim(); // Trimmed value of remarks
  1612. if (selectedValue !== 'NONE' && remarksValue !== '') {
  1613. button.prop('disabled', false);
  1614. button.text('Update');
  1615. button.removeClass('btn-primary').addClass('btn-primary');
  1616. } else {
  1617. button.prop('disabled', true);
  1618. button.text('Update');
  1619. button.removeClass('btn-primary').addClass('btn-primary');
  1620. }
  1621. }
  1623. // Toggle button state based on the current conditions
  1624. toggleButtonState();
  1626. // Add an event listener to the remarks field to recheck conditions
  1627. remarksField.on('input', function () {
  1628. toggleButtonState();
  1629. });
  1630. });
  1633. },
  1634. error: function(xhr, status, error) {
  1635. console.error('Error retrieving data:', error);
  1636. }
  1637. });
  1638. }
  1639. else {
  1640. console.log('No matching data found for Agent ID ' + agentId);
  1641. }
  1642. },
  1643. error: function(xhr, status, error) {
  1644. console.error('Error starting campaign:', error);
  1645. }
  1646. });
  1648. initializeAgentsDataTable();
  1649. // Show the #tablesforcalls div
  1650. //document.getElementById('tablesforpendingcalls').style.display = 'block';
  1651. } */
  1653. /* function editAction(dataId, index,agentId,campaignId) {
  1654. // Get selected dropdown value and textarea value
  1655. let action = $('.action-dropdown2[data-index="' + index + '"]').val(); // Ensure you're getting the correct value
  1656. let remarks = $(`#Pendingtasktable tbody textarea[name="remarks"]`).eq(index).val();
  1658. // Make an AJAX POST request to submit the data
  1659. $.ajax({
  1660. url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
  1661. type: 'POST',
  1662. contentType: 'application/json',
  1663. data: JSON.stringify({
  1664. data_id: dataId,
  1665. agent_id: agentId,
  1666. campaign_id:campaignId,
  1667. call_status: action, // Use "call_status" as the key to match the controller parameter name
  1668. remarks: remarks
  1669. }),
  1670. success: function(response) {
  1671. console.log('Data Updated successfully:', response);
  1673. // Update the button and form fields after successful submission
  1675. Swal.fire({
  1676. title: 'Success!',
  1677. text: 'Data Updated successfully!',
  1678. icon: 'success',
  1679. timer: 2000,
  1680. showConfirmButton: false
  1681. })
  1685. },
  1686. error: function(xhr, status, error) {
  1687. console.error('Error submitting data:', error);
  1688. }
  1689. });
  1690. } */
  1693. function initializeAgentsDataTable() {
  1694. if (!$.fn.DataTable.isDataTable('#AgentDatatable')) {
  1695. $('#AgentDatatable').DataTable({
  1696. dom: 'Bftip',
  1697. columnDefs: [{ targets: 'no-sort', orderable: false }],
  1698. lengthMenu: [
  1699. [50, 100, 200, 500, -1],
  1700. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  1701. ],
  1702. scrollY: '60vh',
  1703. fixedColumns: { left: 1, right: 1 },
  1704. buttons: [
  1705. { extend: 'pageLength', className: 'btn btn-warning' },
  1706. { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
  1707. { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
  1708. { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
  1709. { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
  1710. ],
  1711. fixedHeader: true,
  1712. autoWidth: true,
  1713. responsive: true,
  1714. searching: true,
  1715. select: false,
  1716. processing: false
  1717. });
  1718. }
  1720. // Initialize the Pendingtasktable if it is not already initialized
  1721. if (!$.fn.DataTable.isDataTable('#Pendingtasktable')) {
  1722. $('#Pendingtasktable').DataTable({
  1723. dom: 'Bftip',
  1724. columnDefs: [{ targets: 'no-sort', orderable: false }],
  1725. lengthMenu: [
  1726. [50, 100, 200, 500, -1],
  1727. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  1728. ],
  1729. scrollY: '60vh',
  1730. fixedColumns: { left: 1, right: 1 },
  1731. buttons: [
  1732. { extend: 'pageLength', className: 'btn btn-warning' },
  1733. { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
  1734. { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
  1735. { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
  1736. { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
  1737. ],
  1738. fixedHeader: true,
  1739. autoWidth: true,
  1740. responsive: true,
  1741. searching: true,
  1742. select: false,
  1743. processing: false
  1744. });
  1745. }
  1746. }
  1747. //view url for specific id details
  1748. function ViewDetails(url) {
  1749. if(url)
  1750. {
  1751. window.open( url,'_blank');
  1752. }
  1753. else
  1754. { Swal.fire({
  1755. title: 'Error!',
  1756. text: 'NO Data Available!',
  1757. icon: 'error',
  1758. timer: 2000,
  1759. showConfirmButton: false
  1760. })
  1761. }
  1762. }
  1765. //whatsapp message function
  1766. /* function sendWhatsAppMessage(cellnumber, billNo, viewdetailsUrl) {
  1767. // Build the dynamic WhatsApp message URL
  1768. 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)}`;
  1770. // Send the WhatsApp message
  1771. $.ajax({
  1772. url: '/gcc/api/whatsapp/send-whatsapp-message', // Replace with your service path
  1773. type: 'POST',
  1774. data: { msgUrl: msgUrl },
  1775. success: function(response) {
  1776. console.log('WhatsApp message sent successfully', response);
  1777. //alert('WhatsApp message sent!');
  1778. Swal.fire({
  1779. title: 'Success!',
  1780. text: 'Message sent successfully!',
  1781. icon: 'success',
  1782. timer: 2000,
  1783. showConfirmButton: false
  1784. })
  1786. },
  1787. error: function(xhr, status, error) {
  1788. console.error('Error sending WhatsApp message:', error);
  1789. //alert('Failed to send WhatsApp message.');
  1791. Swal.fire({
  1792. title: 'Error!',
  1793. text: 'Message Not sent!',
  1794. icon: 'error',
  1795. timer: 2000,
  1796. showConfirmButton: false
  1797. })
  1798. }
  1799. });
  1800. } */
  1803. </script>
  1806. </body>
  1807. </html>