ESH/image_popup.php
2024-10-23 18:28:06 +05:30

284 lines
10 KiB
PHP

<style>
#modal-add-document{
overflow-y:scroll;
}
</style>
<div id="image_div">
</div>
<div class="modal fade" id="modal-add-document" name="modal-add-document" role="dialog" aria-hidden="true">
<form role="form" id="medical_exam_document_form" name="medical_exam_document_form" enctype="multipart/form-data" action="#" method="post">
<div class="modal-dialog">
<div class="modal-content">
<div class="widget-header">
<h5 class="widget-title">Upload Supporting Document </h5>
<div class="widget-toolbar">
<div class="widget-menu">
<button type="button" class="close" style="" data-dismiss="modal"
><i class="ace-icon fa fa-times"></i>
</button>
</div>
</div>
</div>
<div class="modal-body">
<div class="row" style="margin-top:0px;">
<div class="col-xs-3">
</div>
<div class="col-xs-6">
<select style="width: 271px;" name= "medical_exam_document_opt" id="medical_exam_document_opt" onclick="load()">
<?php
$query = "SELECT id, document_name, code FROM document_type_master";
$result = @mysqli_query($conn,$query);
while( $row = mysqli_fetch_assoc($result)){
echo '<option value="'.$row['document_name'].'" >'.$row['document_name'].'</option>';
}
?>
</select>
<input type="text" style="width:100%; margin-top: 5px; margin-left:0px" placeholder="Enter Document Name" id="medical_exam_document" name="medical_exam_document" />
</div>
</div>
<div class="row" style="margin-top: 10px">
<div class="form-group">
<div class="col-xs-3">
</div>
<div class="col-xs-6">
<div class="form-group">
<input type="file" id="file_medical_exam" name="file_medical_exam" onchange="return fileValidation()"/>
</div>
<input id="doc_id" name="doc_id" type="hidden" />
<input type="hidden" name="medical_exam_id_doc" id="medical_exam_id_doc" value="<?php echo $_REQUEST['medical_exam_id']; ?>">
</div>
</div>
</div>
</div>
<div class="widget-toolbox padding-8 clearfix" >
<button type="button" id="upload" onclick="save_medical_exam_doc()"
class="btn btn-info btn-sm save_button" ><i class="ace-icon fa fa-floppy-o bigger-110"></i>Upload </button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times bigger-110"></i>Cancel</button>
</div>
</div>
</div>
</form>
</div>
<style>
.row{
margin-top:40px;
padding: 0 10px;
}
.clickable{
cursor: pointer;
}
.panel-heading span {
margin-top: -20px;
font-size: 15px;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
<script>
function open_popup_img(){
$("#medical_examination_form").submit(function(e){
e.preventDefault();
});
$('#medical_exam_document').val("");
$('#file_medical_exam').val("");
$('#modal-add-document').modal("show");
}
function open_doc_popup_img(medical_exam_id){
$("#medical_examination_form").submit(function(e){
e.preventDefault();
});
$('#medical_exam_id_doc').val(medical_exam_id);
$('#medical_exam_document').val("");
$('#file_medical_exam').val("");
$('#modal-add-document').modal("show");
}
function image(value,title){
var src=value.src;
var content="";
var content='<div class="modal fade" id="modal-img" role="dialog" aria-hidden="true">'
content+='<div class="modal-dialog modal-lg" style="width:80%;height:100%">'
content+='<div class="modal-content" style="width:100%;height:100%">'
content+='<div class="modal-header">'
content+='<h5 class="modal-title" style="text-align: center">'+title
content+='<button type="button" class="close" data-dismiss="modal"'
content+='aria-label="Close">'
content+='<span aria-hidden="true">&times;</span>'
content+='</button></h5>'
content+='</div>'
content+='<div class="modal-body" style="width:100%;height:100%">'
content+='<a href='+src+' download><div class="form-group col-sm-12">'
content+='</div style="width:100%;height:100%" ><img height="300" weight="300" src='+src+' alt="new image"/></a></div>'
content+='</div>'
content+='</div><div><div>'
$("#image_div").html(content);
$('#modal-img').modal("show");
}
function pdf_preview(value, title){
var src=value.src;
var content="";
var content='<div class="modal fade" id="modal-img" role="dialog" aria-hidden="true">'
content+='<div class="modal-dialog modal-lg" style="width:80%;height:100%" >'
content+='<div class="modal-content" style="width:100%;height:100%">'
content+='<div class="modal-header">'
content+='<h5 class="modal-title" style="text-align: center">'+title
content+='<button type="button" class="close" data-dismiss="modal"'
content+='aria-label="Close">'
content+='<span aria-hidden="true">&times;</span>'
content+='</button></h5>'
content+='</div>'
// content+='<div class="modal-body" style="width:100%;height:100%">'
content+='<a href='+src+' download>'
content+='<iframe style="width:100%;height:100%" src='+src+'/></iframe></a>'
// content+='</div>'
content+='</div><div><div>'
$("#image_div").html(content);
$('#modal-img').modal("show");
}
function save_medical_exam_doc(){
$("#upload").disabled = true;
$.ajax({
url:"save_medical_exam_document.php",
method:"POST",
data:new FormData(document.getElementById("medical_exam_document_form")),
contentType:false,
processData:false,
success:function(data){
BootstrapDialog.alert('Document uploaded successfully ');
getMedicalDocData();
$("#modal-add-document").modal('hide');
},
error:function(data){
BootstrapDialog.alert('Error Uploading Document');
}
});
}
function fileValidation(){
var fileInput = document.getElementById('file_medical_exam');
var filePath = fileInput.value;
var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.pdf)$/i;
if(!allowedExtensions.exec(filePath)){
BootstrapDialog.alert('Please upload only image and pdf file ');
fileInput.value = '';
return false;
}else{
return;
}
}
function getMedicalDocument(id){
$("#doc_id").val(id);
$("#medical_exam_document_form").attr('target', '_blank');
$("#medical_exam_document_form").attr('method', 'POST');
$("#medical_exam_document_form").attr('action', 'get_document.php');
$("#medical_exam_document_form").submit();
}
var counter=0;
function getMedicalDocData(){
$.ajax({
url:"getMedicalDocData.php",
method:"get",
data:{medical_exam_id:$('#medical_exam_id').val()},
dataType:'json',
async:false,
success:function(data){
var content="";
if (data.medical_doc_type=='application/pdf'){
content="<tr id='medical_doc_"+data.id+"'><td>"+data.medical_doc_desc+"</td><td>"
content+="<a href= \"#\" ><img src= \"images/pdf.png\" width=\"35\" height=\"35\" onclick=\"$('#med_doc_"+data.id+"').click()\" /></a> <img id=\"med_doc_"+data.id+"\" style= \"display:none\" src = \"data:"+data.medical_doc_type+";base64,"+data.medical_doc+"\" alt = \"pdf\" onclick=\"getMedicalDocument('"+data.id+"')\" /> </td>"
content+='<td align="center"><a href="#" class="btn-lg" data-toggle="tooltip" id="deletebtn" onclick="delete_opd_document('+data.id+')" title="Delete"><span class="glyphicon glyphicon-trash"></span></a></td></tr>'
$("#medical_doc_id tbody").append(content);
}else{
content="<tr id='medical_doc_"+data.id+"'><td>"+data.medical_doc_desc+"</td><td>"
content+="<img width=\"35\" height=\"35\" src = \"data:"+data.medical_doc_type+";base64,"+data.medical_doc+"\" alt = \"new image\" onclick=\"image(this,'"+data.medical_doc_desc+"')\" /></td>"
content+='<td align="center"><a href="#" class="btn-lg" data-toggle="tooltip" id="deletebtn" onclick="delete_opd_document('+data.id+')" title="Delete"><span class="glyphicon glyphicon-trash"></span></a></td></tr>'
$("#medical_doc_id tbody").append(content);
}
counter++;
},
error:function(data){
}
});
}
function delete_opd_document(delete_id){
$("#medical_doc_id").on("click", ".glyphicon-trash", function (event) {
$('#medical_doc_'+delete_id).remove();
});
$.ajax({
url:"delete_sickness_document.php",
data:{delete_id:delete_id},
method:"POST",
success:function(data){
BootstrapDialog.alert('Document Deleted Successfully ');
//getMedicalDocData();
},
error:function(data){
BootstrapDialog.alert('Error In deleting Upload Document');
}
});
}
document.getElementById("medical_exam_document").style.display = "none";
function load(){
var option = document.getElementById("medical_exam_document_opt").value;
if(option == "Other"){
document.getElementById("medical_exam_document").value = "";
document.getElementById("medical_exam_document").style.display = "block";
}else{
document.getElementById("medical_exam_document").style.display = "none";
document.getElementById("medical_exam_document").value = document.getElementById("medical_exam_document_opt").value;
}
}
</script>