@extends('layouts/apply_layout')
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
@section('title')
@endsection
@section('navContent')
@include('partials/_navUmsProfile')
@endsection
@section('content')
<link rel="stylesheet" type="text/css" href="{{asset('css/applicantProfile/profile.css')}}">
@php  @endphp


<div id="cv" class="instaFade">
	<div class="mainDetails">
		<div id="headshot" class="quickFade">
			<img src="{{asset('uploads/images/studentProfile/profilePicture')}}/{{$admitCardDetails->profileImageName}}" alt="Alan Smith" />
		</div>
		
		<div id="name" style="padding-top:5%;">
			<h1 class="quickFade delayTwo">Admit Card</h1>
		</div>
		
		<div class="clear"></div>
	</div>
	
	<div id="mainArea" class="quickFade delayFive">
		<section>
			<div class="sectionTitle">
				<h1>Information</h1>
			</div>
			
			<div class="sectionContent" style="padding-bottom:2%;">
				<table class="table">
					<thead></thead>
					<tbody>
						<tr>
							<td style="text-align: left;">Name : {{Auth::guard('applicant')->user()->name}}</td>
							<td style="text-align: left;">Roll No : {{$admitCardDetails->rollNo}}</td>
						</tr>
						<tr>
							<td style="text-align: left;">Program : {{$admitCardDetails->program}}</td>
							<td style="text-align: left;">Phone:{{$admitCardDetails->mobileNo}} </td>
						</tr>
						
					</tbody>
					<tfoot></tfoot>
				</table>
			</div>
			<div class="clear"></div>
		</section>
	</div>
</div>
<div class="download" style="width:90%;margin:30px auto ;max-width: 800px;background:#ededed;">
	<div style="padding-top:1%;padding-left:1%;"><button class="btn btn-info" id="downloadButton" >Download</button></div>
</div>
<div id="editor"></div>
<script>
	function getPDFFileButton () {
			// Select which div with id that need to be printed
			// to print body $('body')
			// here printing div with content id $("#content")
			// using html canvas to save as required pdf to image to preserve css
			return html2canvas($('#cv'), {
				background: "#ffffff",
				onrendered: function(canvas) {
					var myImage = canvas.toDataURL("{{asset('uploads/images/studentProfile/profilePicture')}}/{{$admitCardDetails->profileImageName}}");
					// Adjust width and height
					var imgWidth = (canvas.width * 55)/240 
					var imgHeight = (canvas.height * 70)/240 
					// jspdf changes
					var pdf = new jsPDF('p', 'mm', 'a4');
					pdf.addImage(myImage, 'JPEG', 15, 2, imgWidth, imgHeight); // 2: 19
					pdf.save('Download.pdf');
				}
			});
		}
		$("#downloadButton").on("click", function () {
			getPDFFileButton ();
		});
	</script>

	@endsection