<script>
// function validate() {
//     var cat_name = $('#cat_name').val();

//     save_category();
// }
 </script>



 <style>
#modal-add-category {
    overflow-y: scroll;
}
 </style>
 <div class="modal fade" id="modal-add-section-document" name="modal-add-section-document" role="dialog"
     aria-hidden="true">
     <form role="form" id="medical_exam_section_document_form" name="medical_exam_section_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 for <input class="widget-header"
                             id='up_sec_name' name="up_sec_name"
                             style="border:none;text-align :left;padding-left: 0px;"><input type="hidden"
                             class="widget-header" id='up_sec_id' name="up_sec_id" style="border:none">
                     </h5>
                     <div class="widget-toolbar">
                         <div class="widget-menu">
                             <button type="button" class="close" data-dismiss="modal"><i
                                     class="ace-icon fa fa-times"></i>
                             </button>

                         </div>
                     </div>
                 </div>

                 <div class="modal-body">

                     <div class="row">
                         <div class="col-xs-3">

                         </div>
                         <input id="appoint" type="hidden" style="height: 30px" class="form-control"
                             name="appointment_id" id="appointment_id" value="<?php echo $checkup_id?>" />
                         <input id="emp_id" name="emp_id" type="hidden" value="<?php  echo $emp_id?>" />
                         <input id="doc_id" name="doc_id" type="hidden" />


                         <div class="col-xs-6">
                             <input type="text" style="width:100%" 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_section" name="file_medical_exam_section"
                                         onchange="return fileValidation()" />
                                 </div>
                                 <input type="hidden" name="medical_exam_id_doc" id="medical_exam_id_doc"
                                     value="<?php  echo $_REQUEST['patient_id']; ?>">

                             </div>
                         </div>
                     </div>








                 </div>
                 <div class="widget-toolbox padding-8 clearfix">
                     <button type="button" onclick="save_checkup_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>
.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() {
    $("#opd_form").submit(function(e) {
        e.preventDefault();
    });
    $('#modal-add-document').modal("show");
}

function image(value) {
    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">'

    content += '<div class="modal-content">'
    content += '<div class="modal-header">'
    content += '<h5 class="modal-title" style="text-align: center">Image '
    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">'
    content += '<div class="row"><a href=' + src + ' download><div class="form-group col-sm-12">'

    content += '</div><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  target="_blank" onclick="getMedicalDocument()">'

// 			  content+='</a>'
// 			// content+='</div>'
// 			 content+='</div><div><div>'



// $("#image_div").html(content);
// $('#modal-img').modal("show");

// }

function save_checkup_medical_exam_doc() {
    $.ajax({
        url: "save_checkup_section_document.php",
        method: "POST",
        data: new FormData(document.getElementById("medical_exam_section_document_form")),
        contentType: false,
        processData: false,
        success: function(data) {
            BootstrapDialog.alert('Document Uploaded Successfully ');


            // getMedicalDocData();
            location.reload();
            $("#modal-add-section-document").modal('hide');
        },
        error: function(data) {
            BootstrapDialog.alert('Error Uploading Document');
        }
    });
}

function fileValidation() {
    var fileInput = document.getElementById('file_medical_exam_section');
    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_checkup_section(id) {
    $("#doc_id").val(id);
    $("#medical_exam_section_document_form").attr('target', '_blank');
    $("#medical_exam_section_document_form").attr('method', 'POST');
    $("#medical_exam_section_document_form").attr('action', 'get_checkup_section_document.php?doc_id=' + id);
    $("#medical_exam_section_document_form").submit();
}

function getMedicalDocData() {
    $.ajax({
        url: "get_opd_document.php",
        method: "get",
        data: {
            appointment_id: $('#appointment_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_checkup_section('" + data
                    .id +
                    "')\"   /> </td>"
                content +=
                    '<td align="center"><a href="#" class="btn-lg" data-toggle="tooltip" id="deletebtn" onclick="delete_checkup_section_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_checkup_section_document(' +
                    data.id +
                    ')"  title="Delete"><span class="glyphicon glyphicon-trash"></span></a></td></tr>'
                $("#medical_doc_id tbody").append(content);
            }
        },
        error: function(data) {}

    });
}

function delete_checkup_section_document(delete_id) {
    $("#medical_doc_id").on("click", ".glyphicon-trash", function(event) {
        $('#medical_doc_' + delete_id).remove();
    });
    $.ajax({
        url: "delete_checkup_section_document.php",
        data: {
            delete_id: delete_id
        },
        method: "POST",

        success: function(data) {
            BootstrapDialog.alert('Document Deleted Successfully ');


            //getMedicalDocData();
            location.reload();
        },
        error: function(data) {
            BootstrapDialog.alert('Error In deleting Upload Document');
        }
    });
}
 </script>