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.
 
 
 
 

969 lines
39 KiB

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}">
</head>
<style>
.required {
color: red;
}
.card-box {
box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
height: 140px;
}
@media ( max-width : 768px) {
.card-box {
text-align: center;
}
}
.custom-width1 {
width: 120px; /* Adjust the width as needed */
}
.custom-width2 {
width: 100px; /* Adjust the width as needed */
}
#modalBody h4 {
font-weight: bold;
margin-top: 15px;
margin-bottom: 10px;
}
#modalBody p {
margin: 5px 0;
}
#modalBody hr {
margin: 15px 0;
}
.comment {
margin-bottom: 20px;
}
.comment p {
margin: 0;
}
hr {
border: 1px solid #ccc;
}
.col-4 {
font-weight: bold;
text-align: right;
}
.col-8 {
padding-left: 20px;
}
.comment {
padding: 10px 0;
}
.comment .text-muted {
font-size: 0.9em;
color: #6c757d;
}
.comment hr {
border-top: 1px solid #ccc;
}
.comment .btn-link {
font-size: 0.9em;
text-decoration: underline;
color: #007bff;
}
/* Make the modal body scrollable */
#detailsModal .modal-body {
max-height: 70vh; /* Limit the height to 70% of the viewport */
overflow-y: auto; /* Enable vertical scrolling */
}
</style>
<body>
<div class="wrapper">
<!-- Header -->
<header th:replace="~{fragments/modules/base/header :: header}"></header>
<div class="page-wrap">
<!-- Left Menu -->
<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
<div class="main-content">
<div class="container-fluid">
<div class="page-header">
<div class="row align-items-end">
<div class="col-lg-6">
<div class="page-header-title">
<i class="ik ik-layers bg-blue"></i>
<div class="d-inline">
<h5>Agent's Followup Calls</h5>
<span>1913 Followup Call List</span>
</div>
</div>
</div>
<div class="col-lg-6">
<nav class="breadcrumb-container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/gcc/index"><i
class="ik ik-home"></i></a></li>
<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
<li class="breadcrumb-item" aria-current="page">Agents
QAQC</li>
<li class="breadcrumb-item active" aria-current="page">Public FollowUp Calls</li>
</ol>
</nav>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="page-header-title">
<h5 style="margin: 0; font-weight: bold;">Today Assigned
Calls</h5>
</div>
<div>
<div class="row mt-2">
<!-- Total Calls Assigned -->
<div class="col-xl-3 col-md-6 col-sm-12">
<div class="card card-box p-3 text-center mt-4">
<h6 class="text-facebook mb-4">
<b>Total Calls Assigned</b>
</h6>
<h4 class="text-twitter fw-700 mt-4"
th:text="${details[0]?.Total_Calls_assigned}">
<!-- Display Total Calls Assigned -->
</h4>
</div>
</div>
<!-- QA&QC Calls -->
<div class="col-xl-3 col-md-6 col-sm-12">
<div class="card card-box p-3 text-center mt-4">
<h6 class="text-facebook mb-4">
<b>QA&QC Calls</b>
</h6>
<h4 class="text-twitter fw-700 mt-4"
th:text=" ${details[0]?.Closed_Call_count}">
<!-- Display Closed Calls Count -->
</h4>
</div>
</div>
<!-- In-progress Calls -->
<div class="col-xl-2 col-md-6 col-sm-12">
<div class="card card-box p-3 text-center mt-4 ">
<h6 class="text-facebook mb-4">
<b>In-progress Calls</b>
</h6>
<h4 class="text-twitter fw-700 mt-4"
th:text="${details[0]?.Inprogress_Call_count}">
<!-- Display In-progress Calls Count -->
</h4>
</div>
</div>
<!-- Follow-up Calls -->
<div class="col-xl-2 col-md-6 col-sm-12" >
<div class="card card-box p-3 text-center mt-4">
<h6 class="text-facebook mb-2">
<b>Official Follow-up Calls</b>
</h6>
<h4 class="text-twitter fw-700 mt-3"
th:text="${details[0]?.Followup_Call_count}">
<!-- Display Follow-up Calls Count -->
</h4>
</div>
</div>
<div class="col-xl-2 col-md-6 col-sm-12" style="background-color: aqua;">
<div class="card card-box p-3 text-center mt-4">
<h6 class="text-facebook mb-2">
<b>Public Follow-up Calls</b>
</h6>
<h4 class="text-twitter fw-700 mt-3"
th:text="${details[0]?.PublicFollowup_Call_count}">
<!-- Display Follow-up Calls Count -->
</h4>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<div class="card-header">
<h3 style="font-weight: bold; font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
<span th:text="${agent[0]['agent_name']}"
style="font-weight: bold; font-size: large;"></span>'s
Followup Calls List
</h3>
</div>
<div class="card-block">
<div class="col-md-12 ">
<div class="row">
<button id="primaryButton" class="btn btn-success">Non-Processed
Calls</button>
<button id="secondaryButton"
class="btn btn-secondary btn-custom ml-3">Processed
Calls</button>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive" id="primaryTable"
style="display: block;">
<table id="QaqcDatatable"
class="table table-striped table-bordered table-hover dataTable"
role="grid">
<thead class="thead-dark">
<tr role="row">
<th class="text-center">S.No</th>
<th class="text-center">ID</th>
<th class="text-center">Complaint Date</th>
<th class="text-center">Public Name</th>
<th class="text-center">Public PhoneNo</th>
<th class="text-center">Complaint Type</th>
<th class="text-center custom-width2">View</th>
<th class="text-center custom-width1">Actions</th>
<th class="text-center">Remarks</th>
<th class="text-center">Submit</th>
</tr>
</thead>
<tbody>
<!-- Thymeleaf loop for populating data -->
<tr th:each="call, iterStat : ${qaqcfollowuplists}">
<td th:text="${iterStat.index + 1}" class="text-center"></td>
<td th:text="${call['complaint_number']}"
class="text-center complaint-select"></td>
<td th:text="${call['complaint_date']}"
class="text-center"></td>
<td th:text="${call['complaint_person_name']}"
class="text-center"></td>
<td th:text="${call['complaint_mobilenumber']}"
class="text-center"></td>
<!-- <td th:text="${call['official_name']}"
class="text-center"></td>
<td th:text="${call['official_mobilenum']}"
class="text-center"></td> -->
<td th:text="${call['complaint_type']}"
class="text-center"></td>
<!-- view function -->
<td class="text-center">
<button type="button" class="btn btn-info details-btn"
style="margin-bottom: 3px"
th:data-complaint-number="${call['complaint_number']}">
View</button>
</td>
<td class="text-center"><select
class="form-control form-control-sm action-select action-dropdown">
<option value="" selected>Select</option>
<option th:each="status : ${qaqccategorylists}"
th:value="${status.call_status}"
th:text="${status.call_status}"></option>
</select>
<div class="schedule-call d-none mt-2">
<!-- <span class="schedule-text">Schedule Call</span> -->
<input type="date" class="date-picker form-control"
name="remainderDate">
</div></td>
<td class="text-center"><input type="text"
class="form-control form-control-sm"
placeholder="Remarks"></td>
<td class="text-center">
<button class="btn btn-primary btn-sm submit-btn submitid"
th:data-id="${call['data_id']}"
th:complaint-select="${call['complaint_number']}"
th:data-name="${call['complaint_person_name']}"
th:data-number="${call['complaint_mobilenumber']}"
th:data-complaint-type="${call['complaint_type']}"
onclick="submitComplaint(this)" disabled="disabled">
Submit</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive" id="secondaryTable"
style="display: none;">
<table id="SecondaryDatatable"
class="table table-striped table-bordered table-hover dataTable"
role="grid">
<thead class="thead-dark">
<tr role="row">
<th class="text-center">S.No</th>
<th class="text-center">ID</th>
<th class="text-center">Complaint Date</th>
<th class="text-center">Public Name</th>
<th class="text-center">Public PhoneNo</th>
<th class="text-center">Complaint Type</th>
<th class="text-center">View Details</th>
<th class="text-center custom-width1">Actions</th>
<th class="text-center">Remarks</th>
</tr>
</thead>
<tbody>
<tr th:each="call, iterStat : ${fcSubmitDetails}">
<td th:text="${iterStat.index + 1}" class="text-center"></td>
<td th:text="${call['complaint_number']}"
class="text-center complaint-select"></td>
<td th:text="${call['complaint_date']}"
class="text-center"></td>
<td th:text="${call['complaint_person_name']}"
class="text-center"></td>
<td th:text="${call['complaint_mobilenumber']}"
class="text-center"></td>
<td th:text="${call['complaint_type']}"
class="text-center"></td>
<td class="text-center">
<button type="button" class="btn btn-info"
th:data-complaint-number="${call['complaint_number']}">View</button>
</td>
<td th:text="${call['call_status']}" class="text-center"></td>
<td th:text="${call['remarks']}" class="text-center"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
</div>
</div>
<!--Details button Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="detailsModalLabel">Complaint
Details</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="modalBody">
<!-- Details will be populated here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Include jQuery and Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script th:replace="~{fragments/modules/base/script :: script}"></script>
<!-- sweet alert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.btn-info', function () {
// Retrieve the complaint number from the data attribute
var complaintNumber = $(this).data('complaint-number');
// Call the viewDetails function with the complaint number
viewDetails(complaintNumber);
});
$('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
$('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
// Toggle functionality for Primary and Secondary buttons
$('#primaryButton').click(function () {
$('#primaryTable').show();
$('#secondaryTable').hide();
$(this).addClass('btn-success').removeClass('btn-secondary');
$('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
$('#QaqcDatatable').DataTable().columns.adjust().draw();
});
$('#secondaryButton').click(function () {
$('#primaryTable').hide();
$('#secondaryTable').show();
$(this).addClass('btn-success').removeClass('btn-secondary');
$('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
$('#SecondaryDatatable').DataTable().columns.adjust().draw();
});
var table = $('#QaqcDatatable').DataTable({
dom: 'Bftip',
columnDefs: [
{ targets: 'no-sort', orderable: false }
],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', 'Show all']
],
scrollY: '50vh',
fixedColumns: {
left: 1,
right: 1
},
buttons: [
{
extend: 'pageLength',
className: 'btn btn-warning'
},
{
title: 'Data export',
extend: 'copyHtml5',
text: 'Copy',
className: 'btn btn-secondary',
id: 'copyBtn'
},
{
extend: 'excelHtml5',
text: 'Excel',
className: 'btn btn-secondary',
id: 'excelBtn'
},
{
extend: 'csvHtml5',
text: 'CSV',
className: 'btn btn-secondary',
id: 'csvBtn'
},
{
extend: 'pdfHtml5',
text: 'PDF',
className: 'btn btn-secondary',
id: 'pdfBtn'
}
],
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: true, // Enable default search functionality
select: false,
processing: false
});
var table1 = $('#SecondaryDatatable').DataTable({
dom: 'Bftip',
columnDefs: [
{ targets: 'no-sort', orderable: false }
],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', 'Show all']
],
scrollY: '50vh',
fixedColumns: {
left: 1,
right: 1
},
buttons: [
{
extend: 'pageLength',
className: 'btn btn-warning'
},
{
title: 'Data export',
extend: 'copyHtml5',
text: 'Copy',
className: 'btn btn-secondary',
id: 'copyBtn'
},
{
extend: 'excelHtml5',
text: 'Excel',
className: 'btn btn-secondary',
id: 'excelBtn'
},
{
extend: 'csvHtml5',
text: 'CSV',
className: 'btn btn-secondary',
id: 'csvBtn'
},
{
extend: 'pdfHtml5',
text: 'PDF',
className: 'btn btn-secondary',
id: 'pdfBtn'
}
],
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: true,
select: false,
processing: false
});
// // Event listeners for changes in dropdown, remarks, and date picker
$(document).on('change', '.action-dropdown', function () {
const parentRow = $(this).closest('tr');
const schedulerDiv = parentRow.find('.schedule-call');
schedulerDiv.toggleClass('d-none', $(this).val() !== 'FOLLOWUP');
validateFields(parentRow);
});
$(document).on('input', 'input[type="text"]', function () {
const parentRow = $(this).closest('tr');
validateFields(parentRow);
});
$(document).on('change', '.date-picker', function () {
const parentRow = $(this).closest('tr');
validateFields(parentRow);
});
// Validate function to check conditions for enabling/disabling submit button
function validateFields(row) {
const actionSelect = row.find('.action-select');
const remarksInput = row.find('input[type="text"]');
const submitButton = row.find('.submit-btn');
const actionValue = actionSelect.val().trim();
const remarksFilled = remarksInput.val().trim() !== "";
const followUpSelected = actionValue === "FOLLOWUP";
const remainderDateFilled = row.find('.date-picker').val()?.trim() !== ""; // Check if date is selected
// Enable submit button based on conditions
if (
(followUpSelected && remainderDateFilled && remarksFilled) || (actionValue !== "FOLLOWUP" && actionValue !=="Select") // FOLLOWUP requires remainder date and remarks
) {
submitButton.prop('disabled', false); // Enable submit button
} else {
submitButton.prop('disabled', true); // Disable submit button
}
}
// Initial validation for all rows on page load
$("#QaqcDatatable tbody tr").each(function () {
const row = $(this);
const submitButton = row.find('.submit-btn');
submitButton.prop('disabled', true); // Ensure submit button is initially disabled
validateFields(row); // Validate fields for further interaction
});
// Re-validate fields on input changes
$("#QaqcDatatable").on('input change', '.action-select, input[type="text"], .date-picker', function () {
const row = $(this).closest('tr');
validateFields(row);
});
});
function submitComplaint(button) {
var userId = document.getElementById('userIdSpan').textContent;
const row = button.parentNode.parentNode;
// Fetch the values from the corresponding cells in the row
const dataId = row.querySelector('.submit-btn').getAttribute('data-id'); // Fetch the data_id
const action = row.querySelector('.action-select').value.trim(); // Fetch the action value
const complaintNumber = row.querySelector('.complaint-select').innerText.trim(); // Fetch complaint number
const remarks = row.querySelector('input[type="text"]').value.trim(); // Fetch the remarks value
const remainderDate = row.querySelector('.date-picker')?.value.trim(); // Fetch the remainder date (if any)
/* console.log(row);
console.log(dataId);
console.log(action);
console.log(complaintNumber);
console.log(remarks);
console.log(remainderDate); */
$('.submitid').prop('disabled', true).text('Submitting...');
const name = button.getAttribute('data-name')?.trim() || "N/A";
const cellnumber = button.getAttribute('data-number');
const complaintTypeName = button.getAttribute('data-complaint-type');
// Validation
if (!dataId || !action || action === "Select") {
Swal.fire("Error", "Action is required!", "error");
$('.submitid').prop('disabled', false).text('Submit');
return;
}
if (action !== 'COMPLETED' && remarks === "") {
Swal.fire("Error", "Fill Remarks", "error");
$('.submitid').prop('disabled', false).text('Submit');
return;
}
if (action === 'FOLLOWUP' && remarks === "" && (!remainderDate || remainderDate === "")) {
Swal.fire("Error", "Schedule Date is required for Follow-Up!", "error");
$('.submitid').prop('disabled', false).text('Submit');
return;
}
// AJAX Request
$.ajax({
url: '/gcc/api/callcenterqaqc/agent/publicfollowupcalls/update',
type: 'POST',
data: {
dataId: dataId,
complaintNumber: complaintNumber,
action: action,
remarks: remarks,
remainderDate: remainderDate,
userId:userId
},
success: function (response) {
if (response === "Success") {
//Validate cellnumber
if (!isNaN(cellnumber) || !cellnumber.trim() === "") {
//console.log("valid phone number");
$('.submitid').prop('disabled', false).text('Submit');
// Trigger WhatsApp message functions based on action
if (action === "UNATTENDED") {
//sendWhatsAppMessageUnattended(name, complaintNumber, cellnumber, complaintTypeName);
} else if (action === "REOPEN") {
//sendWhatsAppMessageReopened(name, complaintNumber, cellnumber, complaintTypeName);
}
}
else{
console.log("not valid phone number,So message not sent");
}
Swal.fire({
icon: 'success',
title: 'Success',
text: 'Complaint updated successfully!',
allowOutsideClick: false, // Disable clicking outside the modal to close it
allowEscapeKey: false, // Disable escape key to close the modal
allowEnterKey: false, // Disable enter key to close the modal
showConfirmButton: true, // Ensure the confirm button is visible
}).then((result) => {
if (result.isConfirmed) {
$('.submitid').prop('disabled', false).text('Submit');
const table = $('#QaqcDatatable').DataTable();
// Remove the row
table.row($(row)).remove();
// Reorder S.No column
table.rows().every(function (index) {
const row = this.node();
$(row).find('td:first-child').text(index + 1); // Update S.No
});
// Redraw the table
table.draw(false);
}
});
}
else if (response === "error") {
$('.submitid').prop('disabled', false).text('Submit');
Swal.fire("Error", "Failed to update complaint. Please try again later.", "error");
}
else {
$('.submitid').prop('disabled', false).text('Submit');
Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
}
},
error: function (xhr, status, error) {
$('.submitid').prop('disabled', false).text('Submit');
Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
}
});
}
//view button script
function viewDetails(complaintNumber) {
document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
$('#detailsModal').modal('show');
// Fetch the main complaint details
$.ajax({
url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
type: 'GET',
data:{complaintNumber:complaintNumber},
success: function (data) {
//console.log('Complaint Data:', data);
// Fetch agent response details
$.ajax({
url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
type: 'GET',
data: { complaintNumber },
success: function (agentResponse) {
//console.log('Agent Response:', agentResponse);
// Use the logic for building complaint and agent details as HTML
const detailsHtml = generateDetailsHtml(data, agentResponse);
// Update modal content
document.getElementById('modalBody').innerHTML = detailsHtml;
},
error: function () {
document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
}
});
},
error: function () {
document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
}
});
}
// Function to generate complaint and agent details HTML
function generateDetailsHtml(data, agentResponse) {
// Helper function to format date to yyyy-mm-dd
function formatDate(dateStr) {
if (!dateStr) return 'N/A';
const date = new Date(dateStr);
return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
}
// Format complaint messages
let messagesHtml = '';
if (data.comments && data.comments.length > 0) {
data.comments.forEach((comment) => {
const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
: '<p style="color: red;">No image available for this comment.</p>';
messagesHtml += `
<div class="comment mb-4">
<div class="row">
<div class="col-2 text-center">
<p class="text-muted">${comment.comment_date}</p>
</div>
<div class="col-10">
<p><strong>${comment.user || 'N/A'}</strong> Says:</p>
<p>${comment.message || 'No message available'}</p>
<div class="user-image">${commentImageLink}</div>
</div>
</div>
</div>
`;
});
} else {
messagesHtml = '<p>No comments available.</p>';
}
// Format agent responses
let agentRepliedHtml = '';
if (agentResponse.length > 0) {
agentResponse.forEach((agentItem) => {
agentRepliedHtml += `
<div class="comment mb-4">
<div class="row">
<div class="col-2 text-center">
<p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
</div>
<div class="col-10">
<p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
<p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
<p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
</div>
</div>
</div>
`;
});
} else {
agentRepliedHtml = '<p>No agent replied messages available.</p>';
}
// Check for user images
const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
: '<p style="color: red;">UserImages: No image available.</p>';
// Combine all sections into the final HTML
const detailsHtml = `
<div class="row">
<div class="col-md-12">
<h4>Complaint Person's Details:</h4>
<div class="row">
<div class="col-6">
<p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
</div>
<div class="col-6">
<p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
</div>
<div class="col-6">
<p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
</div>
<div class="col-6">
<p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
</div>
<div class="col-6">
<p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
</div>
</div>
</div>
</div>
<hr>
<h4>Complaint Details:</h4>
<div class="row">
<div class="col-6">
<p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
</div>
<div class="col-6">
<p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
</div>
<div class="col-6">
<p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
</div>
<div class="col-6">
<p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
</div>
</div>
<hr>
<h4>Complaint Messages:</h4>
${messagesHtml}
<hr>
<h4>Agent Replied Messages:</h4>
${agentRepliedHtml}
<hr>
${imageLink}
`;
return detailsHtml;
}
//whatsapp message function for REOPENED
function sendWhatsAppMessageReopened(name,complaintNumber,cellnumber,complaintTypeName) {
//console.log('whatsapp CustomerMobile:', cellnumber);
//console.log('name:',name);
//console.log('id:',complaintNumber);
//console.log('complainttype',complaintTypeName)
let viewstatus = "pgr" ;
// Send the WhatsApp message pending
let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Dear+Mr%2FMs+${encodeURIComponent(name)}%2C%0A%0AYour+complaint+regarding+${encodeURIComponent(complaintTypeName)}+with+complaint+number+%2A${encodeURIComponent(complaintNumber)}%2A+has+been+reopened+based+on+your+feedback.%0AThe+relevant+department+is+working+to+resolve+the+issue%2C+and+updates+will+be+provided+on+the+progress.%0A%0AClick+the+button+below+to+view+your+complaint+status%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-Greater+Chennai+Corporation&buttonUrlParam=${encodeURIComponent(viewstatus)}`
let tamilmsgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=%E0%AE%85%E0%AE%A9%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%2F%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%AE%E0%AE%A4%E0%AE%BF+${encodeURIComponent(name)}%2C%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%2A${encodeURIComponent(complaintNumber)}%2A%2C+${encodeURIComponent(complaintTypeName)}+%E0%AE%A4%E0%AF%8A%E0%AE%9F%E0%AE%B0%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%A9+%E0%AE%95%E0%AE%B0%E0%AF%81%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AF%81%E0%AE%95%E0%AE%B3%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%85%E0%AE%9F%E0%AE%BF%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%88%E0%AE%AF%E0%AE%BF%E0%AE%B2%E0%AF%8D%2C+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%8D+%E0%AE%AE%E0%AF%80%E0%AE%A3%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%A4%E0%AE%BF%E0%AE%B1%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%B3%E0%AF%8D%E0%AE%B3%E0%AE%A4%E0%AF%81.%0A%E0%AE%9A%E0%AE%AE%E0%AF%8D%E0%AE%AA%E0%AE%A8%E0%AF%8D%E0%AE%A4%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F+%E0%AE%A4%E0%AF%81%E0%AE%B1%E0%AF%88+%E0%AE%85%E0%AE%A4%E0%AE%BF%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%87%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%AA%E0%AE%BF%E0%AE%B0%E0%AE%9A%E0%AF%8D%E0%AE%9A%E0%AE%BF%E0%AE%A9%E0%AF%88%E0%AE%AF%E0%AF%88+%E0%AE%A4%E0%AF%80%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%AA%E0%AE%A3%E0%AE%BF%E0%AE%AF%E0%AE%BE%E0%AE%B1%E0%AF%8D%E0%AE%B1%E0%AE%BF+%E0%AE%B5%E0%AE%B0%E0%AF%81%E0%AE%95%E0%AE%BF%E0%AE%A9%E0%AF%8D%E0%AE%B1%E0%AE%A9%E0%AE%B0%E0%AF%8D.%0A%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A4%E0%AE%B1%E0%AF%8D%E0%AE%AA%E0%AF%8B%E0%AE%A4%E0%AF%88%E0%AE%AF+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88+%E0%AE%95%E0%AF%81%E0%AE%B1%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%95%E0%AE%B5%E0%AE%B2%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%B5%E0%AE%BF%E0%AE%B0%E0%AF%88%E0%AE%B5%E0%AE%BF%E0%AE%B2%E0%AF%8D+%E0%AE%AE%E0%AF%87%E0%AE%B2%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%B5%E0%AE%B4%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D.%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88%E0%AE%AF%E0%AF%88%E0%AE%AA%E0%AF%8D+%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%95%E0%AF%80%E0%AE%B4%E0%AF%87+%E0%AE%89%E0%AE%B3%E0%AF%8D%E0%AE%B3+%E0%AE%AA%E0%AF%8A%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%A9%E0%AF%88%E0%AE%95%E0%AF%8D+%E0%AE%95%E0%AE%BF%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D+%E0%AE%9A%E0%AF%86%E0%AE%AF%E0%AF%8D%E0%AE%AF%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-%E0%AE%AA%E0%AF%86%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AE%95%E0%AE%B0+%E0%AE%9A%E0%AF%86%E0%AE%A9%E0%AF%8D%E0%AE%A9%E0%AF%88+%E0%AE%AE%E0%AE%BE%E0%AE%A8%E0%AE%95%E0%AE%B0%E0%AE%BE%E0%AE%9F%E0%AF%8D%E0%AE%9A%E0%AE%BF.&buttonUrlParam=${encodeURIComponent(viewstatus)}`
$.ajax({
url: '/gcc/qaqc/api/whatsapp/send-whatsapp-message', // Replace with your service path
type: 'POST',
data: { msgUrl: msgUrl,
tamilmsgUrl: tamilmsgUrl},
success: function(response) {
//console.log('WhatsApp message sent successfully', response);
console.log('success');
//alert('WhatsApp message sent!');
},
error: function(xhr, status, error) {
console.error('Error sending WhatsApp message:', error);
//alert('Failed to send WhatsApp message.');
Swal.fire({
title: 'Error!',
text: 'Message Not sent!',
icon: 'error',
timer: 2000,
showConfirmButton: false
})
}
});
}
</script>
</body>
</html>