bb_sign/app/Views/client_docs_preview.php

340 lines
13 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<style>
.otp-input {
text-align: center;
letter-spacing: 0.5rem;
}
.file_approved {
border-top: 1px dotted #000;
padding-top: 3px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<div class="content-page">
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-2"> </div>
<div class="col-8">
<div class="page-title-box page-title-box-alt">
<h4 class="page-title"><?php echo $docData->service_name; ?>
<a class="download-btnn" style="color:#000;">
<i class="fas fa-download"></i>
</a>
</h4>
<div class="page-title-right">
<a onclick="window.history.back()" class="btn btn-secondary waves-effect waves-light"> Close </a>
<?php if($docData->is_approved != 1){ ?>
<a href="#" class="btn btn-danger waves-effect waves-light" data-toggle="modal" data-target="#reject-modal"> Reject </a>
<a href="#" data-toggle="modal" data-target="#approve-modal" class="btn btn-primary waves-effect waves-light"> Approve </a>
<?php } ?>
</div>
</div>
</div>
<div class="col-2"> </div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-2"> </div>
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="template-header">
</div>
<div class="template-body">
<?php echo $body_html; ?>
</div>
<div >
<?php if($docData->is_approved == 1){ echo ' <div class="file_approved"> Approved at '.date('d-m-Y H:i:s', strtotime($docData->updated_at)).' through OTP sent to '.$clientData->mobile_no.' from ip address '.$docData->ip_address.'</div>'; } ?>
</div>
</div>
</div>
</div><!-- end col-->
<div class="col-2"> </div>
</div>
</div> <!-- container -->
</div> <!-- content -->
<!-- SignIn modal content -->
<div id="reject-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" aria-modal="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="text-center mt-2 mb-4">
<h4>Document Rejection</h4>
</div>
<input type="hidden" id="doc_id" value="<?php echo $docData->doc_id; ?>">
<div class="form-group">
<label for="rejection_reason">Rejection Reason</label>
<textarea class="form-control" name="rejection_reason" id="rejection_reason" rows="5" required="" placeholder="Rejection Reason"></textarea>
</div>
<div class="form-group text-center">
<button class="btn btn-rounded btn-primary" type="button" id="submit_button">Submit</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- SignIn modal content -->
<div id="approve-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" aria-modal="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="text-center mt-2 mb-4">
<h4>Document Approve</h4>
</div>
<div class="form-group" id="approve_error"></div>
<div class="form-group">
<label for="rejection_reason">Mobile No</label>
<input type="text" readonly class="form-control" id="mobile_no" value="<?php echo $clientData->mobile_no; ?>">
</div>
<div class="loader-mask modal-loader-mask" style="display:none;">
<div class="loader modal-loader" style="display:none;">
Please Wait <img src="<?= base_url() . "public" ?>/assets/images/simple_loader.gif" height="30" width="30" alt="Loading...">
</div>
</div>
<div class="form-group" id="otp_hide" style="display:none;">
<label for="otp">OTP</label>
<input type="text" name="otp" id="otp" class="form-control otp-input" maxlength="6" pattern="\d{6}">
</div>
<div class="form-group mb-0 text-right" id="approve_resend_otp_hide" style="margin-top: 10px;display:none;">
<a href="#" id="approve_resend_otp">Resend OTP</a>
</div>
<div class="form-group text-center">
<button class="btn btn-primary btn-block" id="generate_otp" type="button">Generate OTP </button>
</div>
<div class="form-group text-center" id="submit_hide" style="display:none;">
<button class="btn btn-rounded btn-primary" type="button" id="approve_submit_button">Submit</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$('#generate_otp').click(function (params) {
event.preventDefault(); // Prevent form submission
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
$.getJSON('https://api.ipify.org?format=json', function(data) {
var clientIp = data.ip;
$.ajax({
url: '<?php echo base_url()."doc_generate_otp"?>',
method: 'POST',
data: {
mobile_no : $('#mobile_no').val(),
doc_id : $('#doc_id').val(),
clientIp: clientIp
},
success: function(response) {
console.log(response);
if(response){
$('#approve_error').html('OTP Sent Successfully').css('color','green');
$('#generate_otp').hide();
$('#otp_hide').show();
$('#submit_hide').show();
$('#approve_resend_otp_hide').show();
}else{
// pan_error.html('PAN number mismatch. Please try again.');
// pan_error.css('color','red');
}
$('.loader').fadeOut();
$('.loader-mask').fadeOut('slow');
},
error: function(xhr, status, error) {
// Handle any errors
$('.loader').fadeOut();
$('.loader-mask').fadeOut('slow');
console.error('Error generating OTP: ' + error);
}
});
})
})
$('#approve_submit_button').click(function (params) {
var formData ={
otp : $('#otp').val(),
doc_id : $('#doc_id').val(),
is_approved: 1
}
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
$('#approve_error').html('');
$.ajax({
type: 'POST',
url: '<?php echo base_url()."doc_verify_otp"?>',
data: formData,
dataType: 'json',
success: function(response) {
console.log(response);
if (response) {
window.location.reload();
}else{
$('#approve_error').html('OTP Incorrect. Please try again.');
$('#approve_error').css('color','red');
}
$('.loader').fadeOut();
$('.loader-mask').fadeOut('slow');
},
error: function(xhr, status, error) {
// Handle error response here
console.error(xhr.responseText);
$('.loader').fadeOut();
$('.loader-mask').fadeOut('slow');
}
});
})
$('#submit_button').click(function (params) {
var formData ={
rejection_reason : $('#rejection_reason').val(),
doc_id : $('#doc_id').val(),
is_approved: 2
}
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
$.ajax({
type: 'POST',
url: '<?php echo base_url()."doc_rejection"?>',
data: formData,
dataType: 'json',
success: function(response) {
console.log(response);
if (response) {
window.location.reload();
}
$('.loader').fadeOut();
$('.loader-mask').fadeOut('slow');
},
error: function(xhr, status, error) {
// Handle error response here
console.error(xhr.responseText);
$('.loader').fadeOut();
$('.loader-mask').fadeOut('slow');
}
});
})
$('#approve_resend_otp').click(function (params) {
$('#approve_error').html('');
event.preventDefault(); // Prevent form submission
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
$.getJSON('https://api.ipify.org?format=json', function(data) {
var clientIp = data.ip;
$.ajax({
url: '<?php echo base_url()."doc_generate_otp"?>',
method: 'POST',
data: {
mobile_no : $('#mobile_no').val(),
doc_id : $('#doc_id').val(),
clientIp: clientIp
},
success: function(response) {
console.log(response);
if(response){
$('#approve_error').html('OTP Sent Successfully').css('color','green');
}else{
// $('#approve_error').html('PAN number mismatch. Please try again.');
// $('#approve_error').css('color','red');
}
$('.loader').fadeOut();
$('.loader-mask').fadeOut('slow');
},
error: function(xhr, status, error) {
// Handle any errors
$('.loader').fadeOut();
$('.loader-mask').fadeOut('slow');
console.error('Error generating OTP: ' + error);
}
});
})
})
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".download-btnn").addEventListener("click", async function() {
const { jsPDF } = window.jspdf;
var element = document.querySelector(".card-body");
const canvas = await html2canvas(element);
var imgData = canvas.toDataURL('image/png');
var pdf = new jsPDF('p', 'mm', 'a4');
var imgWidth = 210;
var pageHeight = 297;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var position = 0;
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
pdf.addPage();
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
pdf.save('download.pdf');
});
});
</script>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->