<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>