nhance/app/Views/ticket_feedback_form.php
2025-04-03 16:49:06 +05:30

837 lines
29 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- App favicon -->
<link rel="shortcut icon" href="<?= base_url() . "public"; ?>/assets/images/Nhance_Favi.svg">
<title>Nhance Experience Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/parsleyjs@2.9.2/dist/parsley.min.js"></script>
<style>
.navbar-custom {
top: -10px !important;
height: 61px !important;
/* background-color: #02a8b5;
*/
background-color: #02a8b5;
}
.logo-box {
top: -10px !important;
height: 50px !important;
}
body {
background-color: #f0f0f0;
font-family: 'Roboto', sans-serif;
}
.nhance-form-card {
max-width: 740px;
margin: 32px auto;
background: #fff;
border-radius: 30px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
padding: 32px 24px;
}
.nhance-form-card-details {
max-width: 740px;
margin: 20px auto;
/* Reduced vertical margin */
background: #fff;
border-radius: 20px;
/* Slightly smaller radius */
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
padding: 20px 16px;
/* Reduced padding */
}
/* Adjust form group spacing */
.nhance-form-card-details .form-group {
margin-bottom: 12px;
/* Reduced spacing between rows */
}
/* Compact label styling */
.nhance-form-card-details label {
font-size: 14px;
/* Smaller font size */
margin-bottom: 0;
}
/* Compact input styling */
.nhance-form-card-details .form-control-plaintext {
font-size: 14px;
/* Smaller font size */
padding-top: 4px !important;
padding-bottom: 4px !important;
}
/* Adjust grid columns spacing */
.nhance-form-card-details .col-md-4 {
padding-right: 8px;
}
.nhance-form-card-details .col-md-8 {
padding-left: 8px;
}
.nhance-form-header {
font-size: 32px;
font-weight: 400;
color: #202124;
margin-bottom: 8px;
}
.nhance-form-subtitle {
font-size: 14px;
color: #5f6368;
margin-bottom: 24px;
}
.divider {
border-top: 1px solid #dadce0;
margin: 24px 0;
}
.form-group {
margin-bottom: 24px;
}
label {
font-size: 16px;
font-weight: 400;
color: #202124;
display: block;
}
.form-control {
height: 48px;
border: 1px solid #dadce0;
border-radius: 4px;
padding: 12px 14px;
font-size: 14px;
color: #202124;
transition: border-color 0.2s;
}
.form-control:focus {
border-color: #1a73e8;
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
outline: none;
}
textarea.form-control {
height: auto;
min-height: 100px;
resize: vertical;
}
.required-asterisk {
color: #d93025;
margin-left: 4px;
}
.btn-nhance {
background-color: #1a73e8;
color: white;
border-radius: 4px;
padding: 12px 24px;
border: none;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
transition: background-color 0.2s, box-shadow 0.2s;
}
.btn-nhance:hover {
background-color: #1557b0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.half-framed-textbox {
position: relative;
margin: 20px 0;
}
.border-animation {
position: absolute;
bottom: -2px;
/* Align with input bottom */
height: 2px;
background: #6200ea;
width: 0;
transition: width 0.3s ease;
}
.col-md-9 {
position: relative;
/* Contain the animation within the input column */
}
.half-framed-textbox input {
width: 100%;
padding: 8px;
font-size: 16px;
outline: none;
background: transparent;
position: relative;
text-align: left !important;
height: auto !important;
/* padding-left: 0 !important; */
/* padding-bottom: 0 !important; */
}
.half-framed-textbox .form-control {
border: none !important;
border-bottom: 2px solid #dadce0 !important;
box-shadow: none !important;
text-align: left !important;
height: auto !important;
height: auto !important;
padding-top: 18px !important;
padding-bottom: 0px !important;
line-height: 1.5 !important;
margin-bottom: 21px;
/* padding-left: 0 !important; */
/* padding-bottom: 0 !important; */
}
.form-control {
height: auto !important;
min-height: 48px;
}
.navbar-custom {
position: fixed;
top: 0;
width: 100%;
height: 61px;
background-color: #02a8b5;
display: flex;
align-items: center;
/* Center vertically */
justify-content: space-between;
/* Align logo and header properly */
padding: 0 20px;
/* Add some spacing */
z-index: 1000;
/* Ensure it stays above other content */
}
.logo-box img {
margin-top: auto;
height: 35px;
}
main {
flex: 1;
}
.feedback-header {
flex-grow: 1;
/* Allow it to take remaining space */
text-align: center;
font-size: 18px;
font-weight: bold;
color: white;
font-size: 32px;
font-weight: 400;
margin-top: auto;
font-family: 'sans-serif', serif;
}
</style>
<style>
.swal-modal {
background-color: white;
width: 80%;
max-width: 400px;
padding: 30px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.swal-title {
color: #595959;
font-size: 24px;
margin: 0 0 10px 0;
}
.swal-text {
color: #545454;
font-size: 16px;
margin: 15px 0;
}
.swal-icon {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto 20px;
background-color: #a5dc86;
display: flex;
align-items: center;
justify-content: center;
animation: scaleIn 0.4s ease-out;
}
.swal-icon::after {
content: '';
display: block;
width: 30px;
height: 50px;
border: solid white;
border-width: 0 4px 4px 0;
transform: rotate(45deg);
margin-top: -8px;
}
@keyframes scaleIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@media (max-width: 480px) {
.swal-modal {
width: 90%;
padding: 20px;
}
}
</style>
<!-- Style for Loader -->
<style>
.loader-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #00000069;
z-index: 99999;
}
.loader {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
font-size: 0;
color: #00c9d0;
display: inline-block;
margin: -25px 0 0 -25px;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader div {
background-color: #6ad9cf;
display: inline-block;
float: none;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
opacity: .5;
border-radius: 50%;
-webkit-animation: ballPulseDouble 2s ease-in-out infinite;
animation: ballPulseDouble 2s ease-in-out infinite;
}
.loader div:last-child {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
</style>
<style>
.parsley-required{
color: red !important;
}
.swal-icon-error {
background-color: #f27474;
}
.swal-icon-error::before,
.swal-icon-error::after {
content: '';
position: absolute;
width: 40px;
height: 4px;
background-color: white;
}
.swal-icon-error::before {
transform: rotate(45deg);
}
.swal-icon-error::after {
transform: rotate(-45deg);
}
.swal-button-error {
background-color: #dc3545;
}
.swal-button-error:hover {
background-color: #bb2d3b;
}
</style>
</head>
<body>
<!-- Topbar Start -->
<div class="navbar-custom">
<div class="logo-box d-flex align-items-center">
<img src="<?= base_url() . "public"; ?>/assets/images/Nhance_Favi_white_2.png" alt="Logo">
</div>
<div class="feedback-header">
Nhance Experience Form
</div>
</div>
<!-- end Topbar -->
<input type="hidden" id="ticket_id" value="<?= $ticket_id ?>">
<input type="hidden" id="login_type" value="<?= $viewer ?>">
<input type="hidden" id="form_submission_state" value="<?= $form_submitted ?>">
<!-- <div class="nhance-form-card">
<div class="nhance-form-header">Nhance Experience Form</div>
<div class="nhance-form-subtitle">Fill in the details to enhance your experience</div>
</div> -->
<form id="feedbackForm" data-parsley-validate>
<div class="nhance-form-card-details" style="margin-top : 70px;">
<div class="form-group d-flex align-items-center">
<div class="col-md-4">
<label for="email" class="mb-0 mr-2">Email &nbsp; </label>
</div>
<div class="col-md-8">
<input type="text" value="<?= isset($ticket_data['emp_mail']) ? $ticket_data['emp_mail'] : "" ?>" class="form-control-plaintext" id="email" readonly>
</div>
</div>
<div class="form-group d-flex align-items-center">
<div class="col-md-4">
<label for="name">Your name </label>
</div>
<div class="col-md-8">
<input type="text" value="<?= isset($ticket_data['emp_name']) ? $ticket_data['emp_name'] : "" ?>" class="form-control-plaintext" id="name" readonly>
</div>
</div>
<div class="form-group d-flex align-items-center">
<div class="col-md-4">
<label for="client_name">Your Employer </label>
</div>
<div class="col-md-8">
<input type="text" value="<?= isset($ticket_data['client_name']) ? $ticket_data['client_name'] : "" ?>" class="form-control-plaintext" id="client_name" readonly>
</div>
</div>
<div class="form-group d-flex align-items-center ">
<div class="col-md-4">
<label for="emp_code">Your Employer ID </label>
</div>
<div class="col-md-8">
<input type="text" value="<?= isset($ticket_data['emp_code']) ? $ticket_data['emp_code'] : "" ?>" class="form-control-plaintext" id="emp_code" readonly>
</div>
</div>
<div class="form-group d-flex align-items-center">
<div class="col-md-4">
<label for="claim_number">Your Claim ID</label>
</div>
<div class="col-md-8">
<input type="text" value="<?= isset($ticket_data['claim_number']) ? $ticket_data['claim_number'] : "" ?>" class="form-control-plaintext" id="claim_number" readonly>
</div>
</div>
</div>
<div class="nhance-form-card">
<div class="form-group">
<label for="satisfaction_level">Your satisfaction level with Nhance in explanation of the claims settlement process<span class="text-danger"> *</span></label>
<div class="error-container" id="responsiveness-error"></div>
<div class="form-check">
<input class="form-check-input" type="radio" name="your_satisfaction_level_with_nhance_in_explanation_of_the_claims_settlement_process" id="highly_satisfied" required data-parsley-errors-container="#responsiveness-error">
<label class="form-check-label" for="highly_satisfied">
Highly satisfied
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="your_satisfaction_level_with_nhance_in_explanation_of_the_claims_settlement_process" id="satisfied" required>
<label class="form-check-label" for="satisfied">
Satisfied
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="your_satisfaction_level_with_nhance_in_explanation_of_the_claims_settlement_process" id="neutral" required>
<label class="form-check-label" for="neutral">
Neutral
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="your_satisfaction_level_with_nhance_in_explanation_of_the_claims_settlement_process" id="dissatisfied" required>
<label class="form-check-label" for="dissatisfied">
Dissatisfied
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="your_satisfaction_level_with_nhance_in_explanation_of_the_claims_settlement_process" id="highly_dissatisfied" required>
<label class="form-check-label" for="highly_dissatisfied">
Highly dissatisfied
</label>
</div>
</div>
<div class="form-group">
<label for="claim_number">Your satisfaction level with Nhance responsiveness & professionalism throughout the process<span class="text-danger"> *</span></label>
<div class="error-container" id="responsiveness-error_1"></div>
<div class="form-check">
<input class="form-check-input" type="radio" name="your_satisfaction_level_with_nhance_responsiveness_and_professionalism_throughout_the_process" id="highly_satisfied_1" required data-parsley-errors-container="#responsiveness-error_1">
<label class="form-check-label" for="highly_satisfied_1">
Highly satisfied
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="your_satisfaction_level_with_nhance_responsiveness_and_professionalism_throughout_the_process" id="satisfied_1" required>
<label class="form-check-label" for="satisfied_1">
Satisfied
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="your_satisfaction_level_with_nhance_responsiveness_and_professionalism_throughout_the_process" id="neutral_1" required>
<label class="form-check-label" for="neutral_1">
Neutral
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="your_satisfaction_level_with_nhance_responsiveness_and_professionalism_throughout_the_process" id="dissatisfied_1" required>
<label class="form-check-label" for="dissatisfied_1">
Dissatisfied
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="your_satisfaction_level_with_nhance_responsiveness_and_professionalism_throughout_the_process" id="highly_dissatisfied_1" required>
<label class="form-check-label" for="highly_dissatisfied_1">
Highly dissatisfied
</label>
</div>
</div>
<div class="form-group">
<label for="claim_number">How satisfied were you with the time taken for Claim settlement? <span class="text-danger"> *</span></label>
<div class="error-container" id="responsiveness-error_2"></div>
<div class="form-check">
<input class="form-check-input" type="radio" name="how_satisfied_were_you_with_the_time_taken_for_claim_settlement" id="claim_was_settled_on_time" required data-parsley-errors-container="#responsiveness-error_2">
<label class="form-check-label" for="claim_was_settled_on_time">
Claim was settled on time
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="how_satisfied_were_you_with_the_time_taken_for_claim_settlement" id="claim_settlement_took_longer_than_expected">
<label class="form-check-label required" for="claim_settlement_took_longer_than_expected">
Claim settlement took longer than expected
</label>
</div>
</div>
<div class="form-group">
<label for="claim_number">How satisfied are you with the Policy's terms and coverage<span class="text-danger"> *</span></label>
<div class="error-container" id="responsiveness-error_3"></div>
<div class="form-check">
<input class="form-check-input" type="radio" name="how_satisfied_are_you_with_the_policys_terms_and_coverage" id="highly_satisfied_2" required data-parsley-errors-container="#responsiveness-error_3">
<label class="form-check-label" for="highly_satisfied_2">
Highly satisfied
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="how_satisfied_are_you_with_the_policys_terms_and_coverage" id="satisfied_2" required>
<label class="form-check-label" for="satisfied_2">
Satisfied
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="how_satisfied_are_you_with_the_policys_terms_and_coverage" id="neutral_2" required>
<label class="form-check-label" for="neutral_2">
Neutral
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="how_satisfied_are_you_with_the_policys_terms_and_coverage" id="dissatisfied_2" required>
<label class="form-check-label" for="dissatisfied_2">
Dissatisfied
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="how_satisfied_are_you_with_the_policys_terms_and_coverage" id="highly_dissatisfied_2" required>
<label class="form-check-label" for="highly_dissatisfied_2">
Highly dissatisfied
</label>
</div>
</div>
<div class="form-group">
<label for="claim_number">Would you recommend us? <span class="text-danger">*</span></label>
<div class="error-container" id="responsiveness-error_4"></div>
<div class="form-check">
<input class="form-check-input" type="radio" id="absolutely" name="would_you_recommend_us" required data-parsley-errors-container="#responsiveness-error_4">
<label class="form-check-label" for="absolutely">
Absolutely!
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="would_you_recommend_us" id="maybe_depends_on_improvements" required>
<label class="form-check-label" for="maybe_depends_on_improvements">
May be, depends on improvements.
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="would_you_recommend_us" id="no" required>
<label class="form-check-label" for="no">
No
</label>
</div>
</div>
<div class="form-group half-framed-textbox">
<label for="feedback"> Tell us how we can do better!</label>
<input type="text" class="form-control" id="feedback" name="feedback">
</div>
</div>
<div class="d-flex justify-content-center mt-3">
<button type="submit" id="feedbackFormSubmitButton" class="btn-nhance">Submit</button>
</div>
</form>
<div id="formSuccessPage">
</div>
<!-- Loader start -->
<div class="loader-mask">
<div class="loader">
<img src="<?= base_url() . "public" ?>/assets/images/nhance-loader-fast.gif" height="40" width="40" alt="Loading...">
</div>
</div>
<!-- Loader end -->
<footer class="text-center py-3 mt-auto" style="background-color: #f8f9fa; color: #5f6368;">
<p class="mb-0">© 2025 Nhance India Pvt Ltd. All Rights Reserved.</p>
</footer>
<script>
$(document).ready(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
var form_submitted_state = $("#form_submission_state").val();
var login_type = $("#login_type").val();
if (form_submitted_state == 1 && login_type != 1) {
$("#feedbackForm").hide();
const container = document.getElementById("formSuccessPage");
container.innerHTML = `
<div class = "nhance-form-card" style="margin-top : 70px;">
<div class="swal-icon"></div>
<h2 class="swal-title d-flex justify-content-center">Success!</h2>
<div class="swal-text d-flex justify-content-center">Your Feedback has been Received Successfully.</div>
</div>
`;
} else if (form_submitted_state == 1 && login_type == 1) {
$("#feedbackFormSubmitButton").hide();
var formData = <?= !empty($ticket_data['feedback_json']) ? $ticket_data['feedback_json'] : '{}' ?>;
console.log("Form data received : ", formData);
var feedbackText = formData.feedback;
$("#feedback").val(feedbackText).prop("readonly", true);
delete formData.feedback;
Object.values(formData).forEach((data, key) => {
console.log("key : ", data);
if (data.length > 1) {
$(`#${data}`).prop("checked", true);
}
})
} else if (form_submitted_state == 0 && login_type == 1) {
$("#feedbackForm").hide();
const container = document.getElementById("formSuccessPage");
container.innerHTML = `
<div class="nhance-form-card" style="margin-top: 70px;">
<div class="swal-icon swal-icon-error"></div>
<h2 class="swal-title d-flex justify-content-center">Error!</h2>
<div class="swal-text d-flex justify-content-center" id="errorMessage">User has not Submitted the Feedback Yet</div>
</div>
`;
}
})
$("#feedbackForm").submit(function(event) {
event.preventDefault();
if (!$(this).parsley().isValid()) {
return;
}
formData = $("#feedbackForm").serializeArray();
var would_you_recommend_us_id = $("[name='would_you_recommend_us']:checked").attr("id") || "";
var how_satisfied_are_you_with_the_policys_terms_and_coverage_id = $("[name='how_satisfied_are_you_with_the_policys_terms_and_coverage']:checked").attr("id") || "";
var how_satisfied_were_you_with_the_time_taken_for_claim_settlement_id = $("[name='how_satisfied_were_you_with_the_time_taken_for_claim_settlement']:checked").attr("id") || "";
var your_satisfaction_level_with_nhance_responsiveness_and_professionalism_throughout_the_process_id = $("[name='your_satisfaction_level_with_nhance_responsiveness_and_professionalism_throughout_the_process']:checked").attr("id") || "";
var your_satisfaction_level_with_nhance_in_explanation_of_the_claims_settlement_process_id = $("[name='your_satisfaction_level_with_nhance_in_explanation_of_the_claims_settlement_process']:checked").attr("id") || "";
formData.push({
name: "your_satisfaction_level_with_nhance_in_explanation_of_the_claims_settlement_process",
value: your_satisfaction_level_with_nhance_in_explanation_of_the_claims_settlement_process_id
});
formData.push({
name: "would_you_recommend_us",
value: would_you_recommend_us_id
});
formData.push({
name: "your_satisfaction_level_with_nhance_responsiveness_and_professionalism_throughout_the_process",
value: your_satisfaction_level_with_nhance_responsiveness_and_professionalism_throughout_the_process_id
});
formData.push({
name: "how_satisfied_were_you_with_the_time_taken_for_claim_settlement",
value: how_satisfied_were_you_with_the_time_taken_for_claim_settlement_id
});
formData.push({
name: "how_satisfied_are_you_with_the_policys_terms_and_coverage",
value: how_satisfied_are_you_with_the_policys_terms_and_coverage_id
});
var data = filterFormData(formData);
var ticket_id = $("#ticket_id").val();
console.log("Form Data : ", data);
console.log("Form Dataticket_id : ", ticket_id);
var url = "<?= base_url('claims-feedback-form') ?>" + `/${ticket_id}`;
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
$.ajax({
url: url,
data: data,
type: 'POST',
success: function(response) {
if (response.status) {
console.log("Success:", response);
} else {
console.log("Failure");
}
location.reload(true);
},
error: function(xhr, status, error) {
console.error("AJAX Error:", error);
}
})
$("#feedbackForm")[0].reset();
});
function filterFormData(data) {
return data.filter(entry => entry.value !== "on");
}
</script>
</body>
</html>