nhance/app/Views/client_basic_info.php

686 lines
31 KiB
PHP
Executable File

<style>
.image-preview {
border: 1px solid #00999E;
border-radius: 12px;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
/* margin-right: 15px; */
}
.image-preview img {
width: 50px;
height: 50px;
object-fit: contain;
transition: transform 0.2s ease-in-out;
}
.image-preview:hover img {
transform: scale(1.2);
cursor: zoom-in;
}
.upload-btn {
background-color: #00999E;
color: #fff;
border: none;
border-radius: 25px;
padding: 6px 20px;
margin-right: 10px;
cursor: pointer;
font-size: 14px;
}
.helper-text {
font-size: 12px;
color: #666;
margin-top: 8px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
max-width: 285px;
}
.hidden-input {
display: none;
}
.switch {
position: relative;
display: inline-block;
width: 54px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 19px;
width: 19px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.hr-processed-options {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 1.25rem;
flex-wrap: nowrap;
white-space: nowrap;
width: auto;
max-width: 100%;
}
.hr-processed-option {
display: inline-flex;
align-items: center;
justify-content: flex-start;
flex: 0 0 auto;
width: auto;
margin: 0;
}
.hr-radio-input {
appearance: auto;
-webkit-appearance: radio;
width: 14px;
height: 14px;
margin-top: 0;
margin-right: 0.35rem;
margin-left: 0;
position: static;
float: none;
vertical-align: middle;
}
.hr-radio-label {
display: inline-block;
width: auto;
margin: 0;
white-space: nowrap;
line-height: 1.2;
}
#hr_file_processed_by_error_container {
display: block;
width: 100%;
margin-top: 0.25rem;
clear: both;
}
#hr_file_processed_by_error_container .parsley-errors-list {
margin-bottom: 0;
}
</style>
<div class="tab-pane fade active show" id="general-q-tab">
<div class="row">
<div class="col-12">
<div class="card-body">
<form role="form" class="parsley-examples" method="post" id="general_form" enctype="multipart/form-data">
<input type="hidden" value="<?= csrf_hash() ?>" name="<?= csrf_token() ?>" />
<input type="hidden" name="PrimaryKey" id="general_PrimaryKey" value="<?= isset($client['id']) ? $client['id'] : '' ?>"/>
<input type="hidden" name="client_id" id="client_id" />
<div class="form-group">
<!-- <div class="form-row">
<div class="form-group">
<label for="">Upload Your Logo</label> <br>
<img
src="<?= isset($client['client_logo']) && !empty($client['client_logo']) ? base_url() . "public/uploads/logo/" . $client['client_logo'] : base_url()."public/assets/images/avatar_2x.png" ?>"
width="75" height="75"
id="uploadPreview"
class="avatar img-circle img-thumbnail"
style="border-radius:25px; border:1px solid #00999E;padding:10px;color:#00999E;"
alt="avatar"/>
<span style="margin-bottom:5px;">
<input type="file" name="client_logo" id="client_logo" accept=".jpg,.jpeg,.png" onchange="PreviewImage();"><br>
<i class="text">( Image dimensions 100 x 100 pixels and size of 200KB. )</i>
</span>
<br>
</div>
</div> -->
<!-- Client Logo -->
<div class="form-group col-md-12">
<label for="client_logo">Upload Your Logo</label>
<div class="row align-items-center">
<!-- Left column: Image -->
<div class="col-auto">
<div class="image-preview">
<img src="<?= isset($client['client_logo']) && !empty($client['client_logo']) ? base_url() . "public/uploads/logo/" . $client['client_logo'] : base_url() . "public/assets/images/avatar_2x.png" ?>"
id="uploadPreview0"
class="avatar img-circle img-thumbnail"
alt="Client Logo" onerror="this.src='<?= base_url() . 'public/assets/images/avatar_2x.png' ?>'" />
</div>
</div>
<!-- Right column: Buttons + text -->
<div class="col">
<div class="d-flex">
<button type="button" class="upload-btn" onclick="document.getElementById('client_logo').click();">Upload</button>
<!-- <button type="button" class="delete-btn" onclick="removeImage0();">Delete</button> -->
</div>
<div class="helper-text" id="fileNameText0">
<?= isset($client['client_logo']) && !empty($client['client_logo']) ? $client['client_logo'] : '( Upload Your Logo )' ?>
</div>
</div>
</div>
<small class="mt-1 text-muted d-block">Allowed: JPG, JPEG, PNG. Size : 200KB Dimension : 100 X 100 Pixels</small>
<div id="client_logo_error_container"></div>
<!-- Hidden File Input -->
<input type="file" class="hidden-input"
id="client_logo" name="client_logo"
accept="image/jpeg, image/jpg, image/png"
onchange="PreviewImage0(event);"
data-parsley-client-max-file-size="200"
data-parsley-client-file-extension="jpg,jpeg,png"
data-parsley-client-max-file-size-message="Maximum file size allowed is 200KB."
data-parsley-client-file-extension-message="Only JPG, JPEG, PNG files are allowed."
data-parsley-errors-container="#client_logo_error_container"
/>
</div>
<!-- TPA Logo Ends -->
<div class="form-row">
<div class="form-group col-md-4">
<label for="entity_type_id">Entity Type <span
class="text-danger">*</span></label>
<select class="form-control" id="entity_type" name="entity_type_id" required>
<option value="">Select Entity</option>
<?php foreach($entity ?? [] as $value) { ?>
<?php if(isset($client['entity_type_id'])){ ?>
<?php if($value['id'] == $client['entity_type_id']) { ?>
<option value="<?= $value['id'] ?>" selected><?= $value['name'] ?></option>
<?php } else { ?>
<option value="<?= $value['id'] ?>"><?= $value['name'] ?></option>
<?php } ?>
<?php } else { ?>
<option value="<?= $value['id'] ?>"><?= $value['name'] ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class="form-group col-md-4">
<label for="client_name">Client Name<span
class="text-danger">*</span></label>
<input type="text" class="form-control" id="client_name"
data-old-name="<?= isset($client['client_name']) ? $client['client_name'] : '' ?>"
placeholder="Enter Client Name"
value="<?= isset($client['client_name']) ? $client['client_name'] : '' ?>" name="client_name"
required maxlength="45" data-parsley-minlength="2" data-parsley-maxlength="45"
data-parsley-pattern="^[a-zA-Z0-9\s_-]+$"
data-parsley-pattern-message="Only letters, numbers, spaces, underscore (_) and hyphen (-) are allowed.">
</div>
<div class="form-group col-md-4">
<label for="short_name">Client Short Name<span
class="text-danger">*</span></label>
<input type="text" class="form-control" id="short_name" data-parsley-minlength="2"
data-parsley-maxlength="15" data-parsley-pattern="/^[a-zA-Z0-9_\- ]+$/"
data-old-short="<?= isset($client['short_name']) ? $client['short_name'] : '' ?>" placeholder="Enter Short Name"
value="<?= isset($client['short_name']) ? $client['short_name'] : '' ?>" name="short_name" onkeyup="validateInput(this, 'clients', 'short_name', 'clientBtnSubmit')" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="pan">PAN<span class="text-danger"></span></label>
<input type="text" class="form-control" id="pan" placeholder="Enter PAN Number" data-parsley-error-message="Invalid PAN Number. Example: ABCDE1234F" value="<?= isset($client['pan']) ? $client['pan'] : '' ?>" name="pan"
maxlength="10" data-parsley-maxlength="10" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Z]{5}[0-9]{4}[A-Z]$">
</div>
<!-- <div class="form-group col-md-4">
<label for="gst">GST<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="gst" placeholder="Enter GST Number" data-parsley-error-message="Invalid GST Number. Example: 12ABCDE1234F5Z6" value="<?= isset($client['gst']) ? $client['gst'] : '' ?>" name="gst" data-parsley-trigger="change" data-parsley-pattern="^\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}$" required>
</div> -->
<div class="form-group col-md-4">
<label for="parent_client_id">Parent Group<span class="text-danger"></span></label>
<select class="form-control" id="parent_client_id" name="parent_client_id">
<option value="" >Select Parent</option>
<?php foreach($clients ?? [] as $value) { ?>
<option value="<?= $value['id'] ?>" <?= isset($client['parent_client_id']) && $client['parent_client_id'] == $value['id'] ? "selected" : '' ?>><?= $value['client_name'] ?></option>
<?php } ?>
</select>
</div>
<div class="form-group col-md-4">
<label>Enrollment file processed by <span class="text-danger">*</span></label>
<div class="hr-processed-options">
<div class="hr-processed-option">
<input class="hr-radio-input"
type="radio"
name="hr_file_processed_by"
id="hr_processed"
value="1"
required
data-parsley-trigger="change"
data-parsley-errors-container="#hr_file_processed_by_error_container"
<?php echo(isset($client['hr_file_processed_by']) && $client['hr_file_processed_by'] == 1) ? 'checked' : '' ?>>
<label class="hr-radio-label" for="hr_processed">HR</label>
</div>
<div class="hr-processed-option">
<input class="hr-radio-input"
type="radio"
name="hr_file_processed_by"
id="account_manager_processed"
value="2"
data-parsley-trigger="change"
data-parsley-errors-container="#hr_file_processed_by_error_container"
<?php echo(isset($client['hr_file_processed_by']) && $client['hr_file_processed_by'] == 2) ? 'checked' : '' ?>>
<label class="hr-radio-label" for="account_manager_processed">Account Manager</label>
</div>
</div>
<div id="hr_file_processed_by_error_container"></div>
</div>
</div>
<hr>
</div>
<!-- <div>
<label class="switch">
<input id="is_download_btn" type="checkbox" name="is_download_btn" <?php // echo(isset($client['is_download_btn']) && $client['is_download_btn'] == 1) ? 'checked' : '' ?>>
<span class="slider round" style="height: 27px;"></span>
</label>
<label for="is_download_btn" style=" position: relative;bottom: 5px;">Enable Client Export Option</label>
</div> -->
<div class="form-group text-right m-b-0">
<button type="submit" class="btn btn-primary waves-effect waves-light mr-1"
id="clientBtnSubmit">Submit</button>
<button type="button" class="btn btn-secondary waves-effect btnBack"
id="btnBack">Cancel</button>
</div>
</form>
</div>
</div> <!-- end col-->
</div>
</div>
<!-- end -->
<!-- Image Preview Modal -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content" style="background: transparent; border: 0;">
<div class="modal-body text-center p-0">
<img src="" id="modalImage" class="img-fluid rounded" alt="Full-size preview" style="max-height: 90vh; cursor: zoom-out;">
</div>
</div>
</div>
</div>
<!-- /.modal -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const switchCheckbox = document.getElementById('switch-checkbox');
const switchInner = document.querySelector('.switch-inner');
if (switchInner) {
switchInner.addEventListener('click', function() {
switchCheckbox.checked = !switchCheckbox.checked;
switchInner.style.transform = switchCheckbox.checked ? 'translateX(100%)' : 'translateX(0)';
});
}
});
</script>
<script>function PreviewImage0(event) {
const input = event.target;
const file = input.files[0];
if (file) {
// Show preview
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('uploadPreview0').src = e.target.result;
};
reader.readAsDataURL(file);
// Show file name
document.getElementById('fileNameText0').innerText = file.name;
}
}
function removeImage0() {
// Reset preview to default
document.getElementById('uploadPreview0').src = "<?= base_url() . 'public/assets/images/avatar_2x.png' ?>";
document.getElementById('fileNameText0').innerText = '( Upload Your TPA Logo )';
document.getElementById('client_logo').value = ""; // clear file input
}
</script>
<script>
var PrimaryKey = $('#general_PrimaryKey').val();
var form_action = '';
$(document).ready(function() {
if (window.Parsley) {
Parsley.addValidator('clientMaxFileSize', {
requirementType: 'integer',
validateString: function(_value, maxSizeKb, parsleyInstance) {
const files = parsleyInstance.element.files;
if (!files || !files.length) return true;
return (files[0].size / 1024) <= maxSizeKb;
}
});
Parsley.addValidator('clientFileExtension', {
requirementType: 'string',
validateString: function(_value, allowedExtensions, parsleyInstance) {
const files = parsleyInstance.element.files;
if (!files || !files.length) return true;
const allowed = allowedExtensions.split(',').map(function(ext) {
return ext.trim().toLowerCase();
});
const fileName = files[0].name || '';
const extension = fileName.split('.').pop().toLowerCase();
return allowed.indexOf(extension) !== -1;
}
});
}
$('#client_logo').change(function() {
validateFile(this);
return;
});
$('#parent_client_id').select2();
// Handle image preview click to open modal
$('.image-preview').on('click', function() {
const imgSrc = $(this).find('img').attr('src');
// Don't open modal for the placeholder image
if (imgSrc && !imgSrc.includes('avatar_2x.png')) {
$('#modalImage').attr('src', imgSrc);
$('#imagePreviewModal').modal('show');
}
});
// Close modal on click (either on image or backdrop)
$('#imagePreviewModal').on('click', function() {
$(this).modal('hide');
});
});
$(document).ready(function () {
$('#general_form').parsley({
trigger: 'input'
});
$("#general_form").submit(function(event) {
event.preventDefault();
var $submitButton = $('#general_form').find('button[type="submit"]');
$submitButton.prop('disabled', true); // Disable the submit button
var isValid = $('#general_form').parsley().validate();
if (!isValid) {
$submitButton.prop('disabled', false);
console.log('Form is Empty', 'Warning');
return ;
}
if(PrimaryKey === ''){
form_action = '<?= base_url("client/general/create"); ?>';
}else{
form_action = '<?= base_url("client/general/edit"); ?>';
}
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
var formData = new FormData($('#general_form')[0]);
var OptionsHTML1 = ''
$.ajax({
data:formData,
url: form_action,
type: "POST",
dataType: 'json',
processData: false,
contentType: false,
success: function(res) {
console.log(res);
console.log($('#general_PrimaryKey').val());
if($('#general_PrimaryKey').val() == ""){
window.location.href = '<?= base_url("client/list/"); ?>' + res.data.id;
}
if(res){
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
$('#kyc_tab').click();
$('#btnBranchAdd').show();
$('#BtnAdd').show();
$('#relation_form').show();
$('#btnBranchAdd').show();
var message = (PrimaryKey === '') ? 'Client General Info Created successfully' : 'Client General Info Updated successfully';
toastr.success(message, 'Success');
$submitButton.prop('disabled', false);
let client_name = res.data.client_name ? (' - ' + res.data.client_name) : '';
$('#client_heading').text(client_name);
}, 1000);
}
var idToUse = res.data.id ? res.data.id : res.data.PrimaryKey;
$('#client_id').val(idToUse);
$('#general_PrimaryKey').val(idToUse);
$('#client_id_relation').val(idToUse);
$('#relation_PrimaryKey').val(idToUse);
$('#client_id_branch').val(idToUse);
$('#client_id_for_client_branch').val(idToUse);
$('#client_id_policy').val(idToUse);
$('#policy_PrimaryKey').val(idToUse);
$('#client_id_kyc').val(idToUse);
$('#kyc_PrimaryKey').val(idToUse);
$('#Client_id').val(idToUse);
$('#entity_type').val(res.data.entity_type_id);
var client_id_for_file = res.data.id;
if(PrimaryKey === ''){
$.ajax({
url: '<?= base_url("client/kyc/list/"); ?>' + res.data.entity_type_id,
type: "GET",
dataType: 'json',
processData: false,
contentType: false,
success: function (res) {
console.log('kyc docs', res);
var tbody = $('#tbody');
tbody.empty();
$.each(res.data, function (index, item) {
var row = `<tr>
<td> ${item.file_name}</td>
<td id="form_${item.id}" style=""><form class="ajax" ><input class="file-input__input" type="file" name="file_name" accept=".jpg,.jpeg,.png"><br><small class="text-muted">Allowed: JPG, JPEG, PNG.</small>
<input type="hidden" class="form-control" value="<?= csrf_hash() ?>" name="<?= csrf_token() ?>" />
<input type="hidden" class="form-control" value="${item.id}" name="kyc_doc_type_id" />
<input type="hidden" name="client_id" id="id_for_kyc_file" value="${client_id_for_file}"/>
<button class="btn btn-sm btn-primary submit" style="position: relative;right: 80px;">Submit</button></form></td>
<td id="name_${item.id}" style="display:none;"></td>
<td><i data-id="${item.id}" class="mdi mdi-delete btnKycDelete" style="font-size:18px;"></i></td>
</tr>`;
tbody.append(row);
});
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
console.error(status, error);
}
});
}
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
console.error(status, error);
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
$submitButton.prop('disabled', false);
if (xhr.status === 400) {
let response = JSON.parse(xhr.responseText);
let errorMessages = "";
let seenMessages = []; // Array to store unique messages
if (response.errors) {
$.each(response.errors, function (field, message) {
if (!seenMessages.includes(message)) {
errorMessages += `• ${message}<br>`;
seenMessages.push(message); // Mark this message as "seen"
}
});
toastr.error(errorMessages, 'Validation Error', { "allowHtml": true });
} else {
toastr.warning(response.message || 'Validation failed', 'Warning');
}
} else if (xhr.status === 403) {
let response = JSON.parse(xhr.responseText);
toastr.error(response.message, 'Security Policy');
} else if (xhr.status === 404) {
toastr.warning('Resource not found', 'Warning');
} else if (xhr.status === 500) {
toastr.error('Something went wrong . Please try again later.', 'Server Error');
} else {
toastr.error('An unexpected error occurred. Please try again later.', 'Error');
}
}, 1000);
}
});
});
});
function onlyNumbers(event){
var charcode;
charcode = event.which || event.keyCode;
if(charcode>= 48 && charcode <= 57)return true;
return false;
}
function validateFile(input) {
if (!input.files || !input.files[0]) return;
const file = input.files[0];
const allowedExtensions = ["jpg", "jpeg", "png"];
const fileExtension = file.name.split(".").pop().toLowerCase();
const fileSize = file.size / 1024; // KB
// Log Initial Info
console.log("File Selected:", file.name);
console.log("File Size:", fileSize.toFixed(2) + " KB");
// Check if the file extension is allowed
if (!allowedExtensions.includes(fileExtension)) {
toastr.warning('Only JPG, JPEG, PNG files are allowed.', 'Invalid file type.');
resetImageInput(input);
return;
}
// Check file size
if (fileSize > 200) {
console.error("Validation Failed: File too large (" + fileSize.toFixed(2) + " KB)");
toastr.warning('Maximum file size allowed is 200KB.', 'File size exceeds limit.');
resetImageInput(input);
return;
}
// Check image dimensions
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = function() {
console.log("Dimensions Detected:", this.width + "x" + this.height);
if (this.width !== 100 || this.height !== 100) {
console.error("Validation Failed: Wrong dimensions.");
toastr.warning('Image dimensions should be 100x100 pixels.', 'Invalid image dimensions.');
resetImageInput(input); // CRITICAL: This stops the file from being sent
}else {
console.log("Validation Passed: Image is 100x100 and under 200KB.");
// If both size and dimensions are valid, you can proceed with your logic here
// For example, you can display the image
const reader = new FileReader();
reader.onload = function(e) {
$("#uploadPreview0").attr("src", e.target.result);
};
reader.readAsDataURL(file);
}
};
}
// Helper function to clear the preview and the file input
function resetImageInput(input) {
input.value = ""; // This clears the file so it won't be submitted
$("#uploadPreview0").attr("src", "<?= base_url()?>/public/assets/images/avatar_2x.png");
$("#fileNameText0").text("( Upload Your Logo )");
$("#client_logo_error_container").empty();
}
</script>