<?php
$howdenAPIURL = 'https://id.howdensolutions.com/howdenAPIService/api/compliance/complaint/v1/';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>Customer Complaint Form | Howden Indonesia - Official Working Website</title>
<link rel="icon" href="{{ URL::asset('resources/assets/images/favicon.png') }}">
<link href="{{ URL::asset('resources/assets/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('resources/assets/font-awesome/css/font-awesome.css') }}" rel="stylesheet">
<link href="{{ URL::asset('resources/assets/css/plugins/toastr/toastr.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('resources/assets/js/plugins/gritter/jquery.gritter.css') }}" rel="stylesheet">
<link href="{{ URL::asset('resources/assets/css/plugins/iCheck/custom.css') }}" rel="stylesheet">
<link href="{{ URL::asset('resources/assets/css/plugins/select2/select2.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('resources/assets/css/plugins/select2/select2-bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('resources/assets/css/animate.css') }}" rel="stylesheet">
<link href="{{ URL::asset('resources/assets/css/plugins/sweetalert/sweetalert.css') }}" rel="stylesheet">
<link href="{{ URL::asset('resources/assets/css/style.css') }}" rel="stylesheet">
<style>
.customer-complaint-form {
margin-top:50px;
}
.requiredFillMark{
color:red;
}
.carousel-item {
max-height: 470px;
min-width: auto;
}
.wait {
animation-delay: 10s;
}
.label-question {
font-weight: bold;
}
#tobaModal {
height: 100vh;
overflow-y: auto;
}
</style>
</head>
<body style="background-color:#FFFFFF">
<div class="container">
<!-- Form -->
<div class="row customer-complaint-form">
<div class="col-lg-12">
<div class="ibox" id="iboxCustomerComplaintForm">
<div class="ibox-title">
<h2 style="text-align: center;"><b>CUSTOMER COMPLAINT FORM</b></h2>
<h5 class="animate_animated animate_bounce"><small> Please use this form to give us suggestions, compliments or complaints.<br/>Click <a href="#" data-toggle="modal" data-target="#checkStatusComplaintModal" data-backdrop="static" data-keyboard="false">here</a> to check complaint status.<br/>Click <a href="#" data-toggle="modal" data-target="#tobaModal" data-backdrop="static" data-keyboard="false">here</a> to show <b>Term of Business Agreement</b></small></h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#" class="dropdown-item">Config option 1</a>
</li>
<li><a href="#" class="dropdown-item">Config option 2</a>
</li>
</ul>
</div>
</div>
<div class="ibox-content">
<div class="sk-spinner sk-spinner-three-bounce">
<div class="sk-bounce1"></div>
<div class="sk-bounce2"></div>
<div class="sk-bounce3"></div>
</div>
<form id="customerComplaintForm" method="POST" action="{{ $howdenAPIURL.'submit-form' }}" enctype="multipart/form-data">
<div class="form-group" style="padding:25px; 0">
<img class="float-right" src="{{ URL::asset('resources/assets/images/howden_logo.png') }}" alt="Howden" height="30">
</div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">Salutation <span class="requiredFillMark">*</span></label>
<div class="col-sm-3">
<select class="form-control m-b requiredFill" name="salutation">
<option value="">-- Please Choose --</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="PT.">PT.</option>
<option value="CV.">CV.</option>
<option value="UD.">UD.</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">Name <span class="requiredFillMark">*</span></label>
<div class="col-sm-12">
<input type="text" class="form-control requiredFill" name="name" placeholder="e.g : John Doe">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">E-mail <span class="requiredFillMark">*</span></label>
<div class="col-sm-12">
<input type="email" class="form-control requiredFill" name="email" placeholder="e.g : john.doe@mail.com">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">Account Type <span class="requiredFillMark">*</span></label>
<div class="col-sm-6">
<select id="complaintAs" class="form-control m-b requiredFill" name="account_type">
<option value="">-- Please Choose --</option>
<option value="individual">Individual</option>
<option value="company">Company</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="companyName">
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">Company Name <span class="requiredFillMark">*</span></label>
<div class="col-sm-12">
<input type="text" id="companyName" class="form-control" name="company" placeholder="e.g : John Doe Family Pte Ltd">
</div>
</div>
<div class="hr-line-dashed"></div>
</div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">Reference Number of Type Document <span class="requiredFillMark">*</span></label>
<div class="col-sm-6">
<select id="reffNoOfTypeDoc" class="form-control m-b requiredFill" name="reff_no_of_type_doc">
<option value="">-- Please Choose --</option>
<option value="policy">Policy</option>
<option value="contract">Contract</option>
<option value="invoice_no">Invoice Number</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="reffNo">
<div class="form-group">
<label class="col-sm-12 col-form-label label-question"><span id="reffNoText"></span> <span class="requiredFillMark">*</span></label>
<div class="col-sm-12">
<input type="text" class="form-control requiredFill" name="reff_no" placeholder="e.g : XYZ-12345">
</div>
</div>
<div class="hr-line-dashed"></div>
</div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">About <span class="requiredFillMark">*</span></label>
<div class="col-sm-6">
<select class="form-control m-b requiredFill" name="about">
<option value="">-- Please Choose --</option>
<option value="claim">Claim</option>
<option value="service">Service</option>
<option value="system">System</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">Risk <span class="requiredFillMark">*</span></label>
<div class="col-sm-6">
<select id="risk" class="form-control m-b requiredFill" name="risk">
<option value="">-- Please Choose --</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">Subject <span class="requiredFillMark">*</span></label>
<div class="col-sm-12">
<input type="text" class="form-control requiredFill" name="subject" placeholder="e.g : Claim process took a long time">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">Details <span class="requiredFillMark">*</span></label>
<div class="col-sm-12">
<textarea class="form-control requiredFill" rows="5" name="details" placeholder="e.g : Detail Complaint"></textarea>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question">Attachment</label>
<div class="col-sm-12">
<div class="attachmentArea">
</div>
<button type="button" id="addAttachment" class="btn btn-xs btn-primary"><i class="fa fa-plus" aria-hidden="true"></i> Add Attachment</button>
<br/><br/>
<small><b>Notes:</b> *.png, *.jpg, *.jpeg, *.pdf, *.doc, *.docx, *.xls, *.xlsx, *.ppt, *.pptx, *.eml are allowed, and size must be smaller than 5Mb.</small>
</div>
</div>
<div class="hr-line-dashed"></div>
<!-- Agreement -->
<div class="form-group">
<div class="col-sm-12">
<div class="i-checks"><label><input id="agreementCheck" type="checkbox" value=""> <b>Disclaimer :</b><br/><br/><ul><li><i>The information filled in form is true and valid. PT Howden Insurance Brokers Indonesia is not liable to any lawful obligations arising from any false or invalid information in this application form whatsoever, all the false or invalid information will not be processed.</i></li><li><i>The client hereby agree to render PT Howden Insurance Brokers Indonesia a right to handle complaint including but not limited to grab data from records, emails, documents, confidential data, and others, liaise with relatable Parties e.g. (Insurer, Adjuster, Legal Advisor, etc) to settled complaint.</i></li><li><i>The client hereby released PT Howden Insurance Brokers Indonesia from any material or immaterial damages if eventually, there is no evidence of damages caused by PT Howden Insurance Brokers Indonesia.</i></li><ul> </label></div>
</div>
</div>
<div class="g-recaptcha" data-sitekey="6LfjIXopAAAAAGVMHH8nmptV7I3xmdc5nE7kk89y"></div>
<div class="form-group">
<label class="col-sm-12 col-form-label label-question"><span class="requiredFillMark">*</span> <i>is required</i></label>
</div>
<!-- End of Agreement -->
<div class="form-group row" style="margin-top:30px;">
<div class="col-sm-4 col-sm-offset-2">
<button type="button" id="btnClearComplaintForm" class="btn btn-danger">Clear</button>
<button type="button" id="btnSubmitComplaintForm" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End of Form -->
<p style="font-weight:8px;text-align: center;">
Copyright © <?= date('Y') ?> PT. Howden Insurance Brokers Indonesia. All rights reserved.<br/>
Authorised and regulated by Otoritas Jasa Keuangan (OJK).<br/>
Member of The Association of Indonesian Insurance & Reinsurance Brokers (APPARINDO).
</p>
</div>
<!-- Modal -->
<div class="modal inmodal fade" id="checkStatusComplaintModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title checkStatusFromTitle">Check Status Feedback or Complaint
</h4>
</div>
<div class="modal-body">
<div class="panel-body checkStatusBody">
<form id="checkStatusForm" action="{{ $howdenAPIURL.'check-status' }}" method="GET">
<div class="form-group row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<div class="input-group">
<input type="text" class="form-control" name="ticketNo" placeholder="e.g : XYZ-12345">
<span class="input-group-append">
<button type="button" id="checkStatusButton" class="btn btn-primary">Check!</button>
</span>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal inmodal fade" id="tobaModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close btnCloseTOBAModal" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">
Term of Business Agreement
</h4>
</div>
<!-- Start of TOBA -->
<div class="modal-body">
<div class="panel-body" style="height: 24.5rem;">
<object class="pdf" data={{ URL::asset('resources/assets/pdf/TOBA.pdf') }} width="100%" height="100%"></object>
</div>
</div>
<!-- End of TOBA -->
<div class="modal-footer">
<button type="button" class="btn btn-white btnCloseTOBAModal" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Mainly scripts -->
{{-- <script src="{{ URL::asset('resources/assets/js/jquery-3.1.1.min.js') }}"></script> --}}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.4.1.min.js"></script>
<script src="{{ URL::asset('resources/assets/js/popper.min.js') }}"></script>
<script src="{{ URL::asset('resources/assets/js/bootstrap.js') }}"></script>
<script src="{{ URL::asset('resources/assets/js/plugins/metisMenu/jquery.metisMenu.js') }}"></script>
<script src="{{ URL::asset('resources/assets/js/plugins/slimscroll/jquery.slimscroll.min.js') }}"></script>
<!-- Custom and plugin javascript -->
<script src="{{ URL::asset('resources/assets/js/inspinia.js') }}"></script>
<script src="{{ URL::asset('resources/assets/js/plugins/pace/pace.min.js') }}"></script>
<script src="{{ URL::asset('resources/assets/js/plugins/toastr/toastr.min.js') }}"></script>
<script src="{{ URL::asset('resources/assets/js/plugins/iCheck/icheck.min.js') }}"></script>
<script src="{{ URL::asset('resources/assets/js/plugins/select2/select2.full.min.js') }}"></script>
<script src="{{ URL::asset('resources/assets/js/plugins/sweetalert/sweetalert.min.js') }}"></script>
<script src="{{ URL::asset('resources/assets/js/plugins/jquery-cookie/jquery.cookie.js') }}"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
$(document).ready(function() {
var cookieName = 'tplCookieConsent';
var cookieLifetime = 1;
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function buttonAttachment(){
var numAttachment = $('.attachment').length;
if ( numAttachment == 0 ) {
$('#addAttachment').html('<i class="fa fa-plus" aria-hidden="true"></i> Add Attachment');
} else {
$('#addAttachment').html('<i class="fa fa-plus" aria-hidden="true"></i> Add More Attachment');
}
if ( numAttachment >= 5 ) {
$('#addAttachment').hide();
} else {
$('#addAttachment').show();
}
}
function checkValue(value,arr){
var status = 'Not Allowed';
for(var i=0; i<arr.length; i++){
var name = arr[i];
if(name == value){
status = 'Allowed';
break;
}
}
return status;
}
function checkFileSize(file){
if( file[0].files[0].size > 5000000 ) {
toastr.error('Please upload file less than 5MB.', 'Error :');
file.val('');
return false;
}
}
function checkExtention(file){
var ext = file.val().split(/\.(?=[^\.]+$)/).pop();
var extentionAllowedToUpload = ['png','jpg','jpeg','pdf','doc','docx','xls','xlsx','ppt','pptx','eml'];
if ( checkValue(ext, extentionAllowedToUpload) == 'Not Allowed' ) {
toastr.error('Uploaded file extensions are not allowed.', 'Error :');
file.focus();
file.val('');
isSubmit = false;
return false;
}
}
function resetForm() {
$('input[name="g-recaptcha-response"]').val('');
$('select[name="salutation"]').val('');
$('input[name="name"]').val('');
$('input[name="email"]').val('');
$('select[name="account_type"]').val('');
$('.companyName').hide();
$('input[name="company"]').val('');
$('.reffNo').hide();
$('select[name="reff_no_of_type_doc"]').val('');
$('input[name="reff_no"]').val('');
$('select[name="about"]').val('');
$('#risk').val('').trigger('change') ;
$('input[name="subject"]').val('');
$('textarea[name="details"]').val('');
$('.attachmentArea').html('');
$('.i-checks').iCheck('uncheck');
}
function getRecaptcha() {
$('input[name="g-recaptcha-response"]').remove();
if (typeof grecaptcha !== 'undefined' && grecaptcha.reset) {
try {
grecaptcha.reset();
} catch (error) {
console.log('reCAPTCHA reset error:', error);
}
} else {
console.log('reCAPTCHA not loaded yet');
}
//grecaptcha.ready(function() {
// grecaptcha.execute('6LfjIXopAAAAAGVMHH8nmptV7I3xmdc5nE7kk89y', {action: 'homepage'}).then(function(token) {
// $('#customerComplaintForm, #checkStatusForm').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
// });
//});
}
$.ajax({
url: '{{ $howdenAPIURL."all-risk" }}',
method: 'GET',
dataType: 'json',
success: function(data) {
var riskData = data.data;
$.each(riskData, function(index, riskData) {
$('#risk').append('<option value="'+(riskData.riskID)+'"'+'>'+(riskData.riskName)+'</option>');
});
$("#risk").select2({
theme: 'bootstrap4',
placeholder: "-- Please Choose --"
});
}
});
$(document).on('change', '#complaintAs', function(e) {
if ( $(this).val() == 'company' ) {
$('.companyName').show();
$('#companyName').addClass('requiredFill');
} else {
$('.companyName').hide();
$('#companyName').val('');
$('#companyName').removeClass('requiredFill');
}
});
$(document).on('change', '#reffNoOfTypeDoc', function(e) {
if ( $(this).val() == '' ) {
$('#reffNoText').text('');
$('.reffNo').hide();
} else {
$('#reffNoText').text($(this).find('option:selected').text());
$('.reffNo').show();
}
});
$(document).on('change', '.attachment', function(e) {
checkFileSize($(this));
checkExtention($(this));
});
$(document).on('click', '#addAttachment', function(e) {
$('.attachmentArea').append('<div class="input-group m-b"><button type="button" class="btn btn-xs btn-danger deleteAttachment" title="Delete Attachment"><i class="fa fa-times" aria-hidden="true"></i></button> <input type="file" class="requiredFill attachment" name="attachment[]" multiple=""></div>');
buttonAttachment();
});
$(document).on('click', '.deleteAttachment', function(e) {
$(this).closest('.input-group').remove();
buttonAttachment();
});
$(document).on('click', '#btnSubmitComplaintForm', function(e) {
e.preventDefault();
var isSubmit = true;
$('.requiredFill').each(function(){
// Required Check
if ( $(this).val() == "" ) {
toastr.error('This is required.', 'Error :');
$(this).focus();
isSubmit = false;
return false;
}
if ( $(this).hasClass('attachment') ) {
checkFileSize($(this));
checkExtention($(this));
}
});
if ( isSubmit ) {
if ( $('.i-checks').iCheck('update')[0].checked == false ) {
toastr.error('Please check Disclaimer if you want to proceed.', 'Error :');
$('.i-checks').focus();
isSubmit = false;
return false;
}
var form_data = new FormData();
var other_data = $('#customerComplaintForm').serializeArray();
var totalfiles = $('.attachment').length;
if ( totalfiles > 0 ) {
for ( var index = 0; index < totalfiles; index++ ) {
form_data.append("attachment[]", $('.attachment')[index].files[0]);
}
}
$.each(other_data,function(key,input){
form_data.append(input.name, input.value);
});
$('#iboxCustomerComplaintForm').children('.ibox-content').toggleClass('sk-loading');
$.ajax({
url: $("#customerComplaintForm").attr('action'),
type: 'post',
data: form_data,
dataType: 'json',
contentType: false,
processData: false,
success: function(response){
console.log(response);
$('#iboxCustomerComplaintForm').children('.ibox-content').toggleClass('sk-loading');
resetForm();
getRecaptcha();
toastr.success('Thanks for your Complaint! We will review and follow up your Complaint.');
},
error : function($xhr, textStatus,errorThrown){
$('#iboxCustomerComplaintForm').children('.ibox-content').toggleClass('sk-loading');
toastr.error('Failed to sent your form, please try later or contact our administrator by other way.', 'Error :');
}
});
}
return false;
});
$(document).on('click', '#btnClearComplaintForm', function(e) {
$('#customerComplaintForm')[0].reset();
$('.i-checks').prop('checked', false).iCheck('update');
$('.attachmentArea').html('');
buttonAttachment();
});
$(document).on('click', '#checkStatusButton', function(e) {
var isSubmit = true;
$('#checkStatusButton').attr('disabled', true);
$('input[name="ticketNo"]').attr('readonly', true);
if ( $('input[name="ticketNo"]').val() == "" ) {
toastr.error('This is required.', 'Error :');
$('input[name="ticketNo"]').focus();
isSubmit = false;
$('#checkStatusButton').attr('disabled', false);
$('input[name="ticketNo"]').attr('readonly', false);
getRecaptcha();
return false;
}
if ( isSubmit ) {
$.ajax({
url: $("#checkStatusForm").attr('action'),
type: 'GET',
data: $("#checkStatusForm").serialize(),
dataType: 'JSON',
success: function(response){
if ( response.status == 'error' ) {
toastr.error(response.message, 'Error :');
} else if ( response.status == 'success' ) {
$('.checkStatusFromTitle').html('Check Status Feedback or Complaint<br/>Ticket No. '+$('input[name="ticketNo"]').val());
$('.checkStatusBody').html(response.checkStatusBody);
$(".timeline-item").each(function(index){
$(this).addClass('animated pulse');
$(this).css({
'animation-delay' : (1+index) + 's'
});
});
}
$('#checkStatusButton').attr('disabled', false);
$('input[name="ticketNo"]').attr('readonly', false);
getRecaptcha();
},
error : function($xhr, textStatus,errorThrown){
toastr.error('Failed to check your status Feedback or Complaint, please try later or contact our administrator by other way.', 'Error :');
}
});
}
});
$(document).on('click', '.close', function(e) {
$('#checkStatusButton').attr('disabled', false);
$('input[name="ticketNo"]').attr('readonly', false);
$('.checkStatusFromTitle').html('Check Status Feedback or Complaint');
$('.checkStatusBody').html('<form id="checkStatusForm" action="{{ $howdenAPIURL."check-status" }}" method="GET"> <div class="form-group row"> <div class="col-lg-2"></div><div class="col-lg-8"> <div class="input-group"> <input type="text" class="form-control" name="ticketNo" placeholder="e.g : XYZ-12345"> <span class="input-group-append"> <button type="button" id="checkStatusButton" class="btn btn-primary">Check!</button> </span> </div></div><div class="col-lg-2"></div></div></form>');
getRecaptcha();
});
let toast = $('.toast');
setTimeout(function() {
toast.toast({
delay: 5000,
animation: true
});
toast.toast('show');
}, 2200);
toastr.options.progressBar = true;
toastr.options.closeButton = true;
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
});
@if($generateTicketNo != '')
$('#checkStatusComplaintModal').modal('show');
$('input[name="ticketNo"]').val('{{ $generateTicketNo }}').attr('readonly', true);
$('input[name="g-recaptcha-response"]').remove();
getRecaptcha();
@else
getRecaptcha();
@endif
resetForm();
$('.requiredFill').attr('autocomplete','off');
$('.reffNo').hide();
// Modal : TOBA
$('.panel-title-pdf').html('TOBA ( Terms Of Business Agreement )');
function setTOBACookie(){
$.cookie('TOBACookie', '1', { expires: 1, path: '/' });
}
function deleteTOBACookie(){
$.cookie('TOBACookie', '', { expires: 0, path: '/' });
}
function _getCookie(){
var name = "TOBACookie" + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function _shouldShowPopup(){
if (_getCookie()) {
return false;
} else {
return true;
}
}
$(document).on('click', '.btnCloseTOBAModal', function(e) {
setTOBACookie();
});
if (_shouldShowPopup()) {
$('#tobaModal').modal('show');
}
setInterval(function(){
getRecaptcha();
}, 90 * 1000);
});
</script>
</body>
</html>
Copyright © 2026 PT. Howden Insurance Brokers Indonesia. All rights reserved.
Authorised and regulated by Otoritas Jasa Keuangan (OJK).
Member of The Association of Indonesian Insurance & Reinsurance Brokers (APPARINDO).