@extends('Layouts.index')
@section('content')
        <section>
            <div class="image-wrapper bg-full bg-image  foreground">
                <div class="image-wrapper bg-full bg-image mb-7 bg-overlay bg-overlay-500 background" data-image-src="./needed/img/illustrations/ben4.png">
                    <div class="card-body rounded-0 px-9 py-3 px-xl-16 pt-xl-4 pb-xl-6">
                        <div class="row align-items-center gy-6">
                            <div class="col-lg-12 d-flex">
                                <div class="col-md-3">
                                    <div class="pe-3">
                                        <img src="{{ asset('/assets/img/avatars/t3.jpg')}}" alt="User Image" width="182" height="182" class="avatar-img rounded-circle">
                                    </div>
                                </div>
                               
                                <div class="col-md-5">
                                    <div class="d-flex">
                                        <h2 class="fs-37 mb-0 text-white me-3">{{ $user->fullname }}</h2>
                                        
                                    </div>
                                    <p class="text-white mb-1">Status Personil :<span class="mb-1 ms-1">{{ isset($contact->status->status) ? $contact->status->status : '-' }}</span></p>
                                        <p class="text-white mb-1">Job :<span class="mb-1 ms-1">{{ isset($contact->job->job) ? $contact->job->job : '-' }}</span></p>
                                        <p class="text-white mb-1">{{ $course->nama }}</p>
                                        <a href="{{ url('/ProfilePeserta') }}/{{ base64_encode(session()->get('user')[0]['id_lms']) }}" class="btn more btn-primary py-1 fw-normal fs-11">Kembali Ke Profil</a>
                                </div>

                            </div>
                            <!-- <div class="col-lg-12 col-xl-12 mt-0">
                                <div class="align-items-center justify-content-center d-flex mb-4">
                                    <li class="nav-item d-none d-md-block px-4 pt-2 py-1">
                                        <a href="./contact.html" class="btn btn-sm btn-warning fw-semibold rounded p-3 py-1 fs-18"><span class="me-4"><i class="fa-regular fa-bookmark"></i></span>Cek Status Sertifikat</a>
                                    </li>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    <!--/.card-body -->
                </div>
                <!--/.card -->
            </div>
        </section>

        <section class="bg-gray">
            <div class="container pt-8 pb-8">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-body">
                                <h3 class="mb-3 display-4">Sertifikat <span class="ms-4"><i class="fa-solid fa-certificate text-yellow"></i></span></h4>
                                    <h5 class="mb-1">Sertifikat Tersedia Untuk Dibuat!</h5>
                                    <!-- <p class="fs-16">Sepertinya kamu belum menyelesaikan kelas ini, Ayo selesaikan semua materi di kelasnya dan dapatkan sertifikatnya!</p> -->
                                    <!-- <div class="card">
                                        <figure class="card-img-top rounded">
                                            <img  src="../screen/needed/img/sertifikat/Sertifikat-firman.png" width="300" height="200" alt="">
                                        </figure>
                                    </div> -->
                                    <!-- Vertically centered scrollable modal -->
                                    <!-- Button trigger modal -->
                                    <div class="certificate-print">
                                    @include('sertifikat-temp-offline')
                                </div>
                                    <button type="button" class="btn more btn-secondary py-1 fw-normal fs-15" id="btn-download-sertifikat" onclick="btnDownload()">
                                        Download
                                    </button>
                                    <!-- <a href="profile-settings-mentee.html" class="btn btn-secondary py-1 fw-normal fs-15">Upload Sertifikat Ke Linkedin</a> -->
                                    
                                    <!-- Modal -->
                                      
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-gray">
            <div class="container pt-8 pb-8">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="card bg-soft-primary border mb-0 border-primary">
                            <div class="card-body py-3">
                                <h4 class="fw-semibold"> <span><i class="fa-solid fa-circle-info text-info me-2"></i></span>Ambil Langkah Selanjutnya!</h4>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <h4 class="fw-semibold fs-18 ms-5">Learning Plan</h4>
                                        <p class="fs-14 ms-5">Untuk memperdalam pengetahuan dan kemampuan mu ayo ikuti kelas lainnya yg berkaitan dengan kelas ini.</p>
                                        <a href="{{ url('/ProfilePeserta') }}/{{ base64_encode(session()->get('user')[0]['id_lms']) }}" class="btn btn-primary py-1 fw-normal fs-15 mx-5">Lihat Learning Plan</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        

    </div>
    <!-- /Main Wrapper -->

@endsection
<style type="text/css">
    .certificate-print {
        position: absolute;
        left: -9999px;
    }
</style>
<script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script type="text/javascript" nonce="sha256-SYCOinUrocIgkbXC9Rmb2vAqaCyZ36CPeL64DlyB8IU=">
    function btnDownload(){
        $('#btn-download-sertifikat').prop('disabled', true)
        $('#preloader').show()
        printPdf()
    }
    function printPdf() {

        
        const invoice = this.document.getElementById("certificate-div");
        var opt = {
            margin: 0,
            filename: 'Sertifikat.pdf',
            html2canvas: {
                scale: 2
            },
            image: {
                type: 'jpeg'
            },
            jsPDF: {
                unit: 'in',
                format: 'A4',
                orientation: 'landscape'
            }
        };
        $('#preloader').show();
        html2pdf().from(invoice).set(opt).save().then(
            () => {
                window.close();
                $('#btn-download-sertifikat').prop('disabled', false)
                $('#preloader').hide();
            }
        )
        $('#preloader').hide();
    }
    // window.onload = (event) => {

    //     printPdf();


    // }
</script>