@extends('layouts.landing')

@section('title', 'Elearning Course Certification')

@section('content')
<style>
    .btn-round-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 7px 0px;
        display: inline-block;
        line-height: 35px!important;
        text-align: center;
    }
    .btn-round-sm:hover {
        width: 55px;
        height: 55px;
        padding: 10px 0px;
        transition: .3s;
    }
    .active-border {
        border-left: 2px solid #007bff;
    }
    .btn-line {
        border-bottom: 4px solid;
        width: 80px;
    }
    .btn-line-1 {
        border-bottom: 4px solid #eee;
        width: 80px;
    }
    .line {
        opacity: 0;
    }
    .choices>.dropdown-menu {
        width: 100% !important;
    }
    .hide-input {
        visibility: hidden;
        display: none;
    }
    /* img {
        max-width: 150px;
    } */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<div class="row ">
    <div class="col">
        <a href="{{route('elearn.quiz', $course->id)}}" class="text-color mb-4"><i class="feather-arrow-left mr-2"></i> Back</a>
    </div>
</div>
<div class="row align-items-center justify-content-center">
    <div class="col-12 col-lg-7 col-xl-7">
        <div class="card shadow-xss rounded-xxl border-0 mt-4 ps-4 pt-4 pe-4 pb-3 mb-3">
            <div class="card-header">
                <div class="row ">
                    <div class="col">
                        <h5>Certificate Preview</h5>
                    </div>
                    <div class="col-auto">
                        <button id="downloadCertificate" onclick="printCertificate('certBackground')" class="text-color"><i class="feather-download"></i> Download</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="certBackground" style="height: 732px; background: {{@$certificate->custom_background_image_path ? @$certificate->custom_background_image_path : (@$certificate->background_color ? @$certificate->background_color : '#fff7cc') }};" class="text-center bg_output">
                    <div class="pt-4">
                        <img id="new_output" src="{{@$certificate->logo_image_path}}" alt="Socialite" style="width: 200px">
                    </div>
                    <div class="mt-3" style="color: #222">
                        <h5 class="font-weight-bold cert-secondary-color">{{@$certificate->header}}</h5>
                    </div>

                    <div class="mt-3" style="color: #222">
                        <h2 class="cert-title cert-primary-color" id="display-cert-title"> {{@$certificate->title}} </h2>
                    </div>

                    <div class="mt-3" style="color: #222">
                        <h5 class="cert cert-secondary-color" id="display-cert-subtitle">{{@$certificate->subtitle}}</h5>
                    </div>

                    <div class="mt-3" style="font-family:Times New Roman; color: #222">
                        <h2 class="cert-award cert-primary-color">{{Auth::user()->first_name}} {{Auth::user()->last_name}}</h2>
                    </div>

                    <div class="mt-3" style="padding: 0px 100px 0px 100px; font-size: 21px; color: #222">
                        <h5 class="cert cert-secondary-color" id="display-cert-description">{{@$certificate->description}}</h5>
                    </div>

                    <div class="mt-3">
                        <h6 class="cert cert-secondary-color" style="font-weight:400; color: #222" >{{\Carbon\Carbon::parse($user_time->time)->toFormattedDateString()}}</h6>
                    </div>
                    <div class="row" style="margin-top: 50px;">
                        <div class="col-md-6 text-center">
                            <img src="{{@$certificate->signature_path}}" id="output" style="width: 120px; border-bottom:1px solid black; padding:0px 10px 0px 10px;" alt="Signature">
                            <div class="mt-2 cert-primary-color" style="font-family:Times New Roman; color: #222">
                                <h5 class="font-weight-bold" id="display-signature-name">{{@$certificate->signature_name}}</h5>
                            </div>
                            <div style="font-size: 14px; color: #222">
                                <p class="cert-secondary-color" style="" id="display-signature-title">{{@$certificate->signature_title}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="editor"></div>

                {{-- <div id="htmlContent">
                    <h2 style="color: #0094ff">Hello</h2>
                    <h3>About this Code:</h3>
                    <p>Demo of how to convert and Download HTML page to PDF file with CSS, using JavaScript and jQuery.</p>
                    <table>
                      <tbody>
                        <tr>
                          <th>Person</th>
                          <th>Contact</th>
                          <th>Country</th>
                        </tr>
                        <tr>
                          <td>John</td>
                          <td>+2345678910</td>
                          <td>Germany</td>
                        </tr>
                        <tr>
                          <td>Jacob</td>
                          <td>+1234567890</td>
                          <td>Mexico</td>
                        </tr>
                        <tr>
                          <td>Eleven</td>
                          <td>+91234567802</td>
                          <td>Austria</td>
                        </tr>
                      </tbody>
                    </table>
                </div>
                <div id="editor"></div>
                <p>
                    <button id="generatePDF">generate PDF</button>
                </p> --}}
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // var doc = new jsPDF();
    // var specialElementHandlers = {
    //     '#editor': function (element, renderer) {
    //         return true;
    //     }
    // };

    // $('#downloadCertificate').click(function () {
    //     doc.fromHTML($('#certBackground').html(), 15, 15, {
    //         'width': 700,
    //         'elementHandlers': specialElementHandlers
    //     });
    //     doc.save('{{Auth::user()->first_name}}_certificate.pdf');
    // });

    function printCertificate(el)
    {
        var restorepage = $('body').html();
        var printcontent = $('#' + el).clone();
        $('body').empty().html(printcontent);
        window.print();
        $('body').html(restorepage);
    }
</script>
@endsection