@extends("layouts.app_new")
@section("title")
    Course Certificate
@endsection
@section("content")
<style type="text/css">
    
#btnExport
{
  transition: 0.5s;
    display: inline-block;
    padding: 13px 25px;
    position: relative;
    background-color: #388cc8;
    color: #ffffff;
    border-width: 2px;
    border-style: solid;
    border-color: #388cc8;
    border-radius: 1px;
    font-size: 13.5px;
    font-weight: 700;
}
#tblCustomers
{
      background-size: 100% !important;
}
.certicate-div
{
    min-height: auto !important;
}
</style>
            <!-- Start Courses Details Area -->
        <section class="courses-details-area ptb-70">
            <div class="container">
                <div class="certicate-div" id="tblCustomers"  style="background: url('{{url('/assets3/img/certificate.png')}}')no-repeat;">
                    <div class="certificate-content">
                        @if(Auth::check())
                        <h3 class="certificate-name">{{Auth::user()->title.' '.Auth::user()->name.' '.Auth::user()->l_name}}</h3>
                        @else
                        <h3 class="certificate-name">{{$user->title.' '.$user->name.' '.$user->l_name}}</h3>
                        
                        @endif
                        <h3 class="cer-course-name">{{$Course->name}}</h3>
                    </div>
                    <div class="credit-hours">
                        <h4>@php
                            $creditHours = explode(":",$Course->credit_hours);
                            if($creditHours[0] != 00){

                                echo ((int)$creditHours[0])." Hours ";

                            }

                            if($creditHours[1] != 00){
                                echo ((int)$creditHours[1])." Minutes";
                            }
                            @endphp
                            </h4>
                    </div>
                    <div class="certificate-date">
                        <h4>{{ \Carbon\Carbon::parse($CourseEnroll->certificate_issue_date)->format('d.m.Y')}}</h4>
                    </div>

                    <div class="certificate-qr" id="qrcode">
                    </div>
                </div>
               <!--  <img src="{{url('/assets3/img/certificate.png')}}" class="certificate-img"> -->
               <div class="col-md-12 text-center">
                <br>
                    <input type="button" id="btnExport" value="Download" />
               </div>
            </div>
        </section>
        <!-- End Courses Details Area -->

@endsection
@section("script")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" integrity="sha512-NFUcDlm4V+a2sjPX7gREIXgCSFja9cHtKPOL1zj6QhnE0vcY695MODehqkaGYTLyL2wxe/wtr4Z49SvqXq12UQ==" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    
    $("body").on("click", "#btnExport", function () {
            html2canvas($('#tblCustomers')[0], {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    var docDefinition = {
                        content: [{
                            image: data,
                            width: 500
                        }]
                    };
                    pdfMake.createPdf(docDefinition).download("Course-Certificate.pdf");
                }
            });
        });

$('#qrcode').qrcode("{{url('/verify-course/'.$CourseEnroll->certificate_unique_id)}}");
$('.print-button').on('click', function() {  
  window.print();  
  return false; // why false?
});

</script>

@endsection