pgr/src/main/resources/templates/checklistofficer/checklistofficer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>CheckList User</title>
	<!-- Google Font -->
	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
	<!-- Bootstrap CSS -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
		integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
		crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
	<style>
		/*rating style for css*/
		.rating {
			direction: rtl;
			display: inline-flex;
			font-size: 24px;
		}

		.rating input {
			display: none;
		}

		.rating label {
			color: #ddd;
			cursor: pointer;
			margin: 0;
		}

		.rating input:checked~label {
			color: #414f69;
		}

		.rating label:hover,
		.rating label:hover~label {
			color: #414f69;
		}

		/* Style for resizing content */
		.resizable-content {
			font-size: medium;
			transition: font-size 0.3s ease;
		}


		.comment-table {
			width: 100%;
			border-collapse: collapse;
		}

		.comment-table td {
			padding: 0.5rem;
			border: 1px solid #ddd;
			/* Light border color */
		}

		.comment-table td:first-child {
			width: 25%;
			/* Adjust as needed for label column width */
			font-weight: bold;
		}

		.comment-table td:nth-child(2) {
			width: 75%;
			/* Adjust as needed for value column width */
		}
	</style>
</head>

<body>

	<!-- Insert the header fragment -->

	<div th:insert="~{fragments/header :: headerFragment}"></div>

	<div class="container mt-4">
		<!-- Loader GIF -->
		<div id="loader" style="display: none; text-align: center;">
			<img src="images/Thin broken ring.gif" alt="Loading..." />
		</div>



		<div class="mt-1">
			<div class="row align-items-center justify-content-center">
				<h4 class="title resizable-content" style="color: #414f69;">Check Complaint Status</h4>
			</div>
		</div>
		<!-- Card Section -->
		<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
			<div class="card mb-3 resizable-content">
				<div class="card-header text-white" style="background-color: #414f69;">1. Complaining Person's Details
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							Complainant ID:
							<input type="text" id="complaintid" class="form-control" value="" disabled>
						</div>
						<div class="col-md-6">
							Complainant Mobile Number:
							<input type="text" id="complaint-mobile-number" class="form-control" value="" disabled>
						</div>
						<div class="col-md-6">
							Complainant Name:
							<input type="text" id="complaint-customer-name" class="form-control" value="" disabled>
						</div>

						<!--<div class="col-md-6">
							Gender:
							<select class="form-control" id="gender" disabled>
								<option value="0">Select Gender</option>
								<option value="male">Male</option>
								<option value="female">Female</option>
								<option value="transgender">Transgender</option>
							</select>
						</div>-->
					</div>
				</div>
			</div>

			<div class="card mb-3 resizable-content">
				<div class="card-header text-white" style="background-color: #414f69;">2. Complaint Location Details
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-4">
							Complainant Street:
							<input type="text" id="street" class="form-control" disabled>
						</div>
						<div class="col-md-4">
							Complainant Zone:
							<input type="text" class="form-control" id="zone" disabled>
						</div>
						<div class="col-md-4">
							Complainant Ward:
							<input type="text" class="form-control" id="ward" disabled>
						</div>
						<div class="col-md-4">
							Complainant Area:
							<input type="text" class="form-control" id="area" disabled>
						</div>
						<div class="col-md-4">
							Complainant Locality:
							<input type="text" class="form-control" id="location" disabled>
						</div>
					</div>
				</div>
			</div>

			<div class="card resizable-content">
				<div class="card-header text-white" style="background-color: #414f69;">3. Complaint Type</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-4">
							Complainant Type:
							<input type="text" class="form-control" id="complaintType" disabled>
						</div>

						<!--<div class="col-md-4">
							Complainant Sub-Type:
							<input type="text" class="form-control" disabled>
						</div>
						<div class="col-md-4">
							Complainant Title:
							<input type="text" class="form-control" disabled>
						</div>-->
						<div class="col-md-12">
							Complainant Description:
							<input type="text" class="form-control" id="complaintdesc" disabled>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="card mb-3 resizable-content">
			<div class="card-header text-white" style="background-color: #414f69;">Complaint Action</div>
			<div class="card-body">
				<div class="row">
					<!--<div class="col-md-2" id="">Aug 24<br>7.00 pm</div>-->

					<div class="col-md-4">
						Complaint Closed Date:

						<input type="text" class="form-control" id="commentDate" disabled>
					</div>
					<div class="col-md-4">
						Official Name:
						<input type="text" class="form-control" id="commentuser" disabled>
					</div>
					<!--<div class="col-md-2"><button class="btn  btn-sm"
							style="background-color: #414f69;color: white;" id="status"></button></div>-->
					<div class="col-md-4">
						Status:
						<input type="text" class="form-control" id="status"
							style="background-color: #414f69;color: white;" disabled>
					</div>
				</div>


			</div>
		</div>


		<div class="card mb-3 resizable-content">
			<div class="card-header text-white" style="background-color: #414f69;">Complaint Action History</div>
			<div class="card-body">
				<div id="comments-container"></div> <!-- Container for comments -->
			</div>
		</div>



		<div class="card mb-3 resizable-content">
			<div class="card-header text-white" style="background-color: #414f69;">Update Complaint</div>
			<div class="card-body">
				<div class="row">
					<div class="col-md-6">
						Change Complaint Status:
						<select class="form-control" name="complaintStatusID" id="complaintStatus">
							<option value="0">Choose</option>
							<option value="8">WITHDRAW</option>
							<option value="9">REOPENED</option>
							<option value="10" selected="true">CLOSE</option>
						</select>
					</div>

					<div class="col-md-6" id="img" style="display: none;">
						Photo:
						<input type="file" class="form-control" id="photo">
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						Details of Complaint:
						<textarea class="form-control" id="othercomplaint-details" rows="3"
							placeholder="Enter complaint details" maxlength="400" required></textarea>
					</div>
				</div>
				<div class="row align-items-center justify-content-center" style="margin-top: 5px;">
					<button class="btn btn-sm" style="background-color: #414f69;color: white;">Submit</button>
				</div>
			</div>
		</div>
	</div>



	<!-- Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

	<script>

	</script>


	<!-- JavaScript to handle button clicks -->
	<script>

		//   /api/getComplaintDetailsbyId
		$(document).ready(function () {
			var urlParams = new URLSearchParams(window.location.search);
			var complaintNo = urlParams.get('complaintno');

			if (complaintNo) {
				$('#loader').show();

				$.ajax({
					url: '/api/getComplaintDetailsbyId', // Replace with your actual API endpoint
					type: 'GET',
					data: {complaintid: complaintNo},
					success: function (response) {
						console.log('API response:', response);
						$('#loader').hide();

						if (Array.isArray(response) && response.length > 0) {
							var complaintListHistory = response[0].ComplaintListHistory;

							if (Array.isArray(complaintListHistory) && complaintListHistory.length > 0) {
								var complaintDetails = complaintListHistory[0];

								// Decode HTML entities before populating fields
								function decodeHtmlEntities(str) {
									var txt = document.createElement('textarea');
									txt.innerHTML = str;
									return txt.value;
								}

								// Populate other form fields
								document.getElementById("complaintid").value = complaintDetails.complaintid || '';
								document.getElementById("complaint-mobile-number").value = complaintDetails.CustomerMobile || '';
								document.getElementById("complaint-customer-name").value = complaintDetails.CustomerName || '';
								document.getElementById("street").value = complaintDetails.Street || '';
								document.getElementById("zone").value = complaintDetails.Zone || '';
								document.getElementById("ward").value = complaintDetails.Division || '';
								document.getElementById("area").value = complaintDetails.Area || '';
								document.getElementById("location").value = complaintDetails.Location || '';
								document.getElementById("complaintType").value = complaintDetails.complainttype || '';

								// Decode and populate complaint description
								document.getElementById("complaintdesc").value = decodeHtmlEntities(complaintDetails.complaintdetails || '');

								document.getElementById("commentDate").value = complaintDetails.complaintcloseddate || '';
								document.getElementById("commentuser").value = complaintDetails.Officialname || '';
								document.getElementById("status").value = complaintDetails.complaintcurrentstatus || '';

								// Handle nested Comments array
								if (Array.isArray(complaintDetails.Comments) && complaintDetails.Comments.length > 0) {
									var commentsContainer = $('#comments-container');
									commentsContainer.empty(); // Clear the container

									var comments = complaintDetails.Comments;
									var lastComment = comments[comments.length - 1];

									// Decode HTML entities for last comment
									function decodeHtmlEntities(str) {
										var txt = document.createElement('textarea');
										txt.innerHTML = str;
										return txt.value;
									}

									// Handle last comment
									var userImageHtml = '';
									if (Array.isArray(lastComment.userimages) && lastComment.userimages.length > 0) {
										var imageUrl = lastComment.userimages[0].Comp_Image;
										if (imageUrl && imageUrl !== 'null') {
											userImageHtml = `
                                    <div class="col-md-12">
                                        <img src="${imageUrl}" alt="User Image" class="img-fluid">
                                    </div>`;
										}
									}

									var lastCommentHtml = `
                            <div class="row mb-3">
                                <table class="comment-table">
                                    <tr>
                                        <td style="color:#3c4959">User:</td>
                                        <td>${lastComment.user || ''}</td>
                                    </tr>
                                    <tr>
                                        <td style="color:#3c4959">Message:</td>
                                        <td>${lastComment.message || ''}</td>
                                    </tr>
                                    <tr>
                                        <td style="color:#3c4959">Comment Date:</td>
                                        <td>${lastComment.comment_date || ''}</td>
                                    </tr>
                                    ${userImageHtml}
                                </table>
                            </div>
                            <hr>`;

									commentsContainer.append(lastCommentHtml);

									// Add dropdown button for other comments
									if (comments.length > 1) {
										var dropdownHtml = `
                                <button id="show-all-comments" class="btn  mt-3" style="margin-bottom: 10px;background-color: #3c4959;
    color: white;">Show All Comments</button>
                                <div id="all-comments" style="display:none;">`;

										// Add all comments to dropdown
										comments.forEach(function (comment, index) {
											if (index < comments.length - 1) { // Skip the last comment
												var userImageHtml = '';
												if (Array.isArray(comment.userimages) && comment.userimages.length > 0) {
													var imageUrl = comment.userimages[0].Comp_Image;
													if (imageUrl && imageUrl !== 'null') {
														userImageHtml = `
                                                <div class="col-md-12">
                                                    <img src="${imageUrl}" alt="User Image" class="img-fluid">
                                                </div>`;
													}
												}

												dropdownHtml += `
                                        <div class="row mb-3">
                                            <table class="comment-table">
                                                <tr>
                                                    <td style="color:#3c4959">User:</td>
                                                    <td>${comment.user || ''}</td>
                                                </tr>
                                                <tr>
                                                    <td style="color:#3c4959">Message:</td>
                                                    <td>${comment.message || ''}</td>
                                                </tr>
                                                <tr>
                                                    <td style="color:#3c4959">Comment Date:</td>
                                                    <td>${comment.comment_date || ''}</td>
                                                </tr>
                                                ${userImageHtml}
                                            </table>
                                        </div>
                                        <hr>`;
											}
										});

										dropdownHtml += '</div>';

										commentsContainer.append(dropdownHtml);

										// Toggle display of all comments
										$('#show-all-comments').click(function () {
											$('#all-comments').toggle();
											$(this).text($(this).text() === 'Show All Comments' ? 'Hide Comments' : 'Show All Comments');
										});
									}
								} else {
									$('#comments-container').html('<p>No comments found.</p>');
								}
							} else {
								alert('No complaint details found in ComplaintListHistory.');
							}
						} else {
							alert('Unexpected response structure.');
						}
					},
					error: function (xhr, status, error) {
						console.log('Error:', xhr.responseText);
						alert('An error occurred while fetching complaint details.');
						$('#loader').hide();
					}
				});
			} else {
				alert('No complaint number provided.');
			}
		});





		$(document).ready(function () {
			$('#complaintStatus').change(function () {
				if ($(this).val() == '9') { // Show the image field if 'REOPENED' is selected
					$('#img').show();
				} else {
					$('#img').hide();
				}
			});

			// Handle the form submission
			$('.btn').click(function (e) {
				e.preventDefault();

				var complaintId = 'YOUR_COMPLAINT_ID'; // You should fetch this dynamically
				var status = $('#complaintStatus').val();
				var message = $('#othercomplaint-details').val();

				// Validate the "Details of Complaint" field
				if (message.trim() === "") {
					// Display a SweetAlert validation message if the field is empty
					Swal.fire({
						title: 'Validation Error!',
						text: 'Please enter the details of the complaint.',
						icon: 'warning',
						confirmButtonText: 'OK'
					});
					return; // Stop the form submission if the field is empty
				}

				// Convert image to base64 if it's selected
				var imageFile = $('#photo')[0].files[0];
				var compImage = '';

				if (imageFile) {
					var reader = new FileReader();
					reader.readAsDataURL(imageFile);
					reader.onload = function () {
						compImage = reader.result.split(',')[1]; // Extract base64 part

						// Proceed with the AJAX call after the image is converted
						updateComplaint(complaintId, message, status, compImage);
					};
				} else {
					// No image selected, proceed with the AJAX call without the image
					updateComplaint(complaintId, message, status, '');
				}
			});

			// Function to send the AJAX request to the backend
			function updateComplaint(complaintId, message, status, compImage) {
				$.ajax({
					url: '/updateComplaint', // Adjust this to match your endpoint
					type: 'POST',
					data: {
						ComplaintId: complaintId,   // complaintId mapped from your backend
						Message: message,           // message field
						Status: status,             // status dropdown
						Comp_Image: compImage       // base64 image data
					},
					success: function (response) {
						// Display SweetAlert and redirect on 'OK'
						Swal.fire({
							title: 'Success!',
							text: 'Complaint updated successfully.',
							icon: 'success',
							confirmButtonText: 'OK'
						}).then((result) => {
							if (result.isConfirmed) {
								// Redirect to home.html after clicking OK
								window.location.href = 'home';
							}
						});
					},
					error: function (xhr, status, error) {
						// Handle error
						console.error('Error updating complaint:', error);
					}
				});
			}
		});


	</script>




</body>

</html>