@extends('student.layouts.app')
@section('titlePage', 'Course - Status')
@section('content')
<script>
    document.getElementById("kts-5").classList.add("active");
</script>


<button type="button" class="btn btn-primary" id="get-pdf" onclick="getPDF();">Download as PDF</button>

<div id="budgeting-pdf">Hello World!</div>

@endsection


@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
	function getPDF() {
		return html2canvas($('#budgeting-pdf'), {
			backgroundColor: "#7ecc49",
			onrendered: function(canvas) {
				var myImage = canvas.toDataURL("image/png");
				// Adjust width and height
				var imgWidth = (canvas.width * 70) / 370;
				var imgHeight = (canvas.height * 75) / 340;
				// jspdf changes
				var pdf = new jsPDF('p', 'mm', 'a4');
				pdf.addImage(myImage, 'png', 5, 20, imgWidth, imgHeight); // 2: 19
				pdf.save('Student-report.pdf');
			}
		});
	}
</script>
@endpush