@extends('layouts.app')

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

<section id='module-show'>
    <div class='container'>
        <div class='box'>
            <div class="box-content">
                <div class="module-header">
                    <h3>{{ $module->course->title }}</h3>
                </div>

                <div class="module-progress">
                    <div class="item active">
                        <div class="number">1</div>
                        <div class="text">Resumen</div>
                    </div>
                    <div class="item">
                        <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">¡Bienvenido al modulo <b>{{ $module->title }}</b>!</p>

                <hr class='hr-full'>
                
                <div class="module-description">
                    <span>
                    {!! $module->description !!}
                    </span>
                </div>

                <div class="module-assets">
                    @if($module->video)
                        <div id='module-video'>

                        </div>          
                        <script>
                            const videoId = window.validateYouTubeUrl('{{ $module->video }}')
                            const videoFrame = "<iframe width='560' height='315' src='http://www.youtube.com/embed/"+ videoId +"?modestbranding=1' frameborder='0' allowfullscreen></iframe><br/>"
                            const videoDiv = document.querySelector('#module-video')
                            videoDiv.innerHTML += videoFrame
                        </script>
                    @endif
                    @if(count(json_decode($module->files)) > 0)
                        <div class="module-files">
                            <h2>Archivos descargables</h2>
                            @foreach(json_decode($module->files) as $file)
                                <div class="module-file">
                                    <div class="module-file-info">
                                        <p>{{ substr($file[0], 14) }}</p>
                                        <div class='module-file-mask'></div>
                                        @if($file[1] < 1000000)
                                            <small>{{ bcdiv($file[1] / 1024, 1, 2) }} KB</small>
                                        @else
                                            <small>{{ bcdiv($file[1] / 1024 / 1024, 1, 2) }} MB</small>
                                        @endif
                                    </div>
                                    <a href='/storage/files/{{ $file[0] }}' download>
                                        <i class="fas fa-file-download"></i>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
                <div class="module-start">
                    <a href="{{ route('courses.go', $module->course->id) }}">
                        <button class='btn btn-big'>
                            Volver al Curso
                        </button>
                    </a>
                    <a href='{{ route('modules.go', ['course_id' => $module->course->id, 'id' => $module->id]) }}'>
                        <button class='btn btn-primary btn-big'>¡Empezar Modulo!</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection