@extends('layouts.app')

@section('content')
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js">
</script>

<style type="text/css" media="print">
    body { visibility: hidden; display: none }
</style>

<section>
    <div class='container' oncontextmenu="return false;">
        <div class='box'>
            <div class="box-content">
                <div class="module-header">
                    <h2>Curso de {{ $module->course->title }}</h2>
                    <h3>Modulo {{ $module->title }}</h3>    
                </div>
                
                <div class="module-progress">
                    <div class="item">
                        <div class="number">1</div>
                        <div class="text">Resumen</div>
                    </div>
                    <div class="item active">
                        <div class="number">2</div>
                        <div class="text">Contenido</div>
                    </div>
                    <div class="item">
                        <div class="number">3</div>
                        <div class="text">Repaso de conocimientos</div>
                    </div>
                    <div class="item">
                        <div class="number">4</div>
                        <div class="text">Cuestionario</div>
                    </div>
                </div>

                <p style="text-align: center">Este es el material del modulo, toda la información necesaria esta aquí.</p>
                
                <hr class='hr-full'>

                <div class="module-actions">
                    <a href="{{ route('modules.show', ['course_id' => $module->course->id, 'id' => $module->id]) }}">
                        <button class='btn btn-big'>
                            Volver al Modulo
                        </button>
                    </a>
                    <a onclick="return confirm('Es necesario leer el contenido antes de continuar ¿Continuar?')" href="{{ route('quizzes.goCheck', ['course_id' => $module->course->id, 'id' => $module->id]) }}">
                        <button class='btn btn-big btn-primary'>
                            Continuar
                        </button>
                    </a>
                </div>

                <div id="module-go">
                    <div id="module-render"></div>
                    <div class="module-go-footer">
                        <a href="{{ route('quizzes.goCheck', ['course_id' => $module->course->id, 'id' => $module->id]) }}">
                            <button class='btn btn-primary btn-big'>Continuar</button>
                        </a>
                    </div>
                </div>

                <script type="text/javascript">
                    showLoader();
                    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).then(hideLoader);
                    
                    }   
                </script> 
            
                <script type="text/javascript">
                    renderPDF("/storage/{{ $module->pdf }}", document.getElementById('module-render'));
                </script>  
            </div>
        </div>
    </div>
</section>
@endsection