@extends('admin.layouts.app')

@section('content')
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js">
</script>
<style>
    header {
        position: relative !important;
    }
    main {
        padding: 30px 0 !important;
    }
    #go {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }
    #render {
        display: inline-flex;
        flex-flow: column;
    }
    #render canvas {
        border: 1px solid #f3f3f3;
        margin: 10px;
        -webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 16px -10px rgba(0,0,0,0.75);
        pointer-events: none;
    }
</style>

<section id='admin'>
    <div class='container'>
        <div class='box'>
            <div class="box-content">
                <h3 style='text-align: center; margin-bottom: 10px'>{{ $module->course->title }} > {{ $module->title }}</h3>
                <div id="go">
                    <div id="render"></div>
                </div>     
            </div>   
        </div>
    </div>
</section>
<script type="text/javascript">
    function renderPDF(url, canvasContainer, options) {
    
        var options = options || { scale: 1.5 };
            
        function renderPage(page) {
            var viewport = page.getViewport(options.scale);
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            
            canvas.height = viewport.height;
            canvas.width = viewport.width;
    
            canvasContainer.appendChild(canvas);
            
            page.render(renderContext);
        }
        
        function renderPages(pdfDoc) {
            for(var num = 1; num <= pdfDoc.numPages; num++)
                pdfDoc.getPage(num).then(renderPage);
        }
    
        pdfjsLib.disableWorker = true;
        pdfjsLib.getDocument(url).then(renderPages);
    
    }   
    renderPDF("/storage/{{ $module->pdf }}", document.getElementById('render'));
</script>     
@endsection