<?php include '../onlinemcq/inc_classes.php';?>
<?php include "../classes/thumbnail_images.class.php";
if($_REQUEST['record_id'])
	$record_id = $_REQUEST['record_id'];
else
	$record_id ='';

$select_name="select * from stud_login where stud_login_id='".$record_id."'";
$ptr_name=mysql_query($select_name);
$data_name=mysql_fetch_array($ptr_name);
$name=$data_name['name'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<!--<script src="dist/modal-box.js"></script>-->
<link rel="stylesheet" type="text/css" href="dist/modal-box.css" />
<link rel="stylesheet" type="text/css" href="dist/themes.css" />
<style>
@font-face {
    font-family: 'Monotype Corsiva';
    src: url('MonotypeCorsiva_Regular.ttf');
}

* {
	box-sizing: border-box;
}
body {
	font-family: Monotype Corsiva ;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Certificate of Covid-19</title>
<style>
.container {
    position: relative;
    text-align: center;
    color: white;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.reg_no {
    /*position: fixed;
    top: 67.8%;
    left: 31%;
	font-size: 22px !important;
	color:#2C4382;
	font-weight:bold;
	font-family:Monotype Corsiva !important;
	opacity:10;*/
	
	position: absolute;
    top: 90.5%;
    right: 55%;
	font-size: 22px !important;
	color:#2C4382;
	font-style:normal;
	font-family:  Monotype Corsiva  !important;
	font-weight: 800;
	opacity:10;
    transform: translate(-50%, -50%);
}
/*.cer_no {
    position: absolute;
    top: 130px;
    left: 40px;
}*/
.award_on {
   /* position:fixed;
    top: 67.8%;
    left: 65%;
	font-size: 22px !important;
	color:#2C4382;
	font-weight:bold;
	font-family:Monotype Corsiva !important;*/
	position: absolute;
    top: 90.6%;
    right: 0%;
    font-size: 22px;
	color:#2C4382;
	font-style:normal;
	font-family:  	Monotype Corsiva  !important;
	font-weight: 800;
	opacity:10;
    transform: translate(-50%, -50%);
}

.centered {
    position: absolute;
    top: 55%;
    left: 56%;
    font-size: 55px;
	width:628px;
	color:#2C4382;
	font-style:normal;
	font-family:  Monotype Corsiva  !important;
	font-weight: 500;
	opacity:10;
    transform: translate(-50%, -50%);
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

@media print {
    .print {
      	display: none;
    }
	#my-modal-info
	{
		display: none;
	}
	#my-modal-info2
	{
		display: none;
	}
	#certficate_copy
	{
		display: none;
	}
}
.input_btn {
    background-color: #0066cc;
    border: medium none;
    box-shadow: 3px 3px 3px #888888;
    color: #ffffff;
    cursor: pointer;
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    height: 50px;
	width:749px
	
}
.input_btn:hover {
	color:#333333;
}
</style>
<style> 
	#loader { 
		border: 12px solid #f3f3f3; 
		border-radius: 50%; 
		border-top: 12px solid #444444; 
		width: 70px; 
		height: 70px; 
		animation: spin 1s linear infinite; 
	} 
	  
	@keyframes spin { 
		100% { 
			transform: rotate(360deg); 
		} 
	} 
	  
	.center { 
		position: absolute; 
		top: 0; 
		bottom: 0; 
		left: 0; 
		right: 0; 
		margin: auto; 
	} 
	body {
		
		}
</style> 

</head>
<body >
<div id="loader" class="center"></div> 

<input type="button" class="input_btn" id="create_pdf" value="Download Certificate"><br/>
<form class="form" style="max-width: none; width: 750px;">
<div class="container" >
	<img src="img/covid19certificate.jpeg" width="750px" height="1050px" alt="Certificate" style="-webkit-background-size:cover;-moz-background-size:cover;-o-background-size: cover;background-size: cover;">
	<div class="centered"><?php echo ucfirst($name); ?><input type="hidden" name="name" value="<?php echo $name; ?>" style="width:500px"></div>
	<!--<div class="course">COVID-19 AN AWARENESS PROGRAM</div>-->
	<div class="reg_no"> <span style="font-family: monospace !important;font-weight: 500 !important;">No.</span> &nbsp;&nbsp;<?php if($record_id)echo date('Y.m').'.'.$record_id; ?><input type="hidden" name="reg_no" value="<?php if($record_id)echo date('Y.m').'.'.$record_id; ?>" style="width:150px"></div>
	<div class="award_on"><span style="font-family: monospace !important;font-weight: 500 !important;">Zurich </span>&nbsp;&nbsp;<?php echo date('M-Y'); ?><input type="hidden" name="award_on" Placeholder="Award on" class="datepicker" value="<?php echo date('d-m-Y'); ?>" style="width:150px"></div>
</div>
</form>
</body>
</html>
<script> 
    document.onreadystatechange = function() { 
        if (document.readyState !== "complete") { 
            document.querySelector( 
              "body").style.visibility = "hidden"; 
            document.querySelector( 
              "#loader").style.visibility = "visible"; 
        } else { 
            document.querySelector( 
              "#loader").style.display = "none"; 
            document.querySelector( 
              "body").style.visibility = "visible"; 
        } 
    }; 
</script>
<script>
    (function () {
        var
         form = $('.form'),
         cache_width = form.width(),
         a4 = [595.28, 841.89]; // for a4 size paper width and height

        $('#create_pdf').on('click', function () {
            $('body').scrollTop(0);
            createPDF();
        });
        //create pdf
        function createPDF() {
            getCanvas().then(function (canvas) {
                var
                 img = canvas.toDataURL("image/png"),
                 doc = new jsPDF({
                     unit: 'px',
                     format: 'a4'
                 });
                doc.addImage(img, 'JPEG', 20, 20);
                doc.save('covid19award<?php echo $record_id; ?>cert.pdf');
                form.width(cache_width);
            });
        }

        // create canvas object
        function getCanvas() {
            form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
            return html2canvas(form, {
                imageTimeout: 2000,
                removeContainer: true
            });
        }

    }());
</script>
<script>
    /*
 * jQuery helper plugin for examples and tests
 */
    (function ($) {
        $.fn.html2canvas = function (options) {
            var date = new Date(),
            $message = null,
            timeoutTimer = false,
            timer = date.getTime();
            html2canvas.logging = options && options.logging;
            html2canvas.Preload(this[0], $.extend({
                complete: function (images) {
                    var queue = html2canvas.Parse(this[0], images, options),
                    $canvas = $(html2canvas.Renderer(queue, options)),
                    finishTime = new Date();

                    $canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
                    $canvas.siblings().toggle();

                    $(window).click(function () {
                        if (!$canvas.is(':visible')) {
                            $canvas.toggle().siblings().toggle();
                            throwMessage("Canvas Render visible");
                        } else {
                            $canvas.siblings().toggle();
                            $canvas.toggle();
                            throwMessage("Canvas Render hidden");
                        }
                    });
                    throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + 4000);
                }
            }, options));

            function throwMessage(msg, duration) {
                window.clearTimeout(timeoutTimer);
                timeoutTimer = window.setTimeout(function () {
                    $message.fadeOut(function () {
                        $message.remove();
                    });
                }, duration || 2000);
                if ($message)
                    $message.remove();
                $message = $('<div ></div>').html(msg).css({
                    margin: 0,
                    padding: 10,
                    background: "#000",
                    opacity: 0.7,
                    position: "fixed",
                    top: 10,
                    right: 10,
                    fontFamily: 'Tahoma',
                    color: '#fff',
                    fontSize: 12,
                    borderRadius: 12,
                    width: 'auto',
                    height: 'auto',
                    textAlign: 'center',
                    textDecoration: 'none'
                }).hide().fadeIn().appendTo('body');
            }
        };
    })(jQuery);
</script>