@extends('admin.layouts.app')

@section('content')
<section id='admin'>
    <div class='box'>
        <div class="box-content">
            <div class='box-title'>
                <a href="{{ route('admin.courses.show', $module->course->id) }}">
                    <div class='box-back'>
                        <i class="fa fa-chevron-left"></i>
                    </div>
                </a>
                <p><a href='{{ route('admin.index') }}'>Administración</a> > <a href='{{ route('admin.courses.index') }}'>Cursos</a> > <a href='{{ route('admin.courses.show', $module->course->id) }}'>Detalle de Curso</a> > <b>Detalle de Modulo</b></p>
            </div>

            @if ( session('msg') )
                <div class="alert alert-success">
                    {{ session('msg') }}
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @endif
            @if ( session('error') )
                <div class="alert alert-danger">
                    {{ session('error') }}
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @endif

            @if (!$module->enabled)
                <div class="alert alert-warning">
                    Este modulo esta deshabilitado
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @endif
            @if (count($module->activeQuizzes) < 2)
                <div class="alert alert-warning">
                    Este modulo tiene menos de 2 cuestionarios
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @endif

            <div class="box-content">
                <div class="admin-show-title">
                    <h3>{{$module->course->title }} > {{ $module->title }}</h3>
                </div>
                <div class="admin-show">
                    <div class="admin-show-image">
                        <img src='/storage/modulos/{{ $module->photo }}'>

                        @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] / 1000, 1, 0) }} KB</small>
                                            @else
                                                <small>{{ round($file[1] / 1e+6, 1) }} MB</small>
                                            @endif
                                        </div>
                                        <a href='/storage/files/{{ $file[0] }}' download>
                                            <i class="fas fa-file-download"></i>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        @if(count($module->activeQuizzes) > 0)
                            <div class="admin-show-quizzes">
                                <h2>Cuestionarios</h2>
                                <p>Este modulo tiene {{ count($module->activeQuizzes) }} cuestionarios</p>
                                @foreach($module->activeQuizzes as $moduleQuiz)
                                    <div class="admin-show-quiz">
                                        <p>Nº Preguntas: {{ count($moduleQuiz->quiz->questions) }}</p>
                                        <a href="{{ route('admin.modules.quizzes.show', ['module_id' => $module->id, 'id' => $moduleQuiz->id] )}}">
                                            <i class="fas fa-arrow-right"></i>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @endif 
                    </div>

                    <div class='admin-show-content'>
                        @if($module->video)
                        <div class="module-video-container">
                            <div id='video' class="admin-show-data">
                            </div>
                            <script>
                                const videoId = window.validateYouTubeUrl('{{ $module->video }}')
                                const videoFrame = "<iframe src='https://www.youtube.com/embed/"+ videoId +"?modestbranding=1' frameborder='0' allowfullscreen></iframe><br/>"
                                const videoDiv = document.querySelector('#video')
                                videoDiv.innerHTML = videoFrame
                            </script>
                        </div>
                    @endif
                        <div class="admin-show-data">
                            {!! $module->description !!}
                        </div>
                    </div>
                </div>
            </div>
            <div class='push'></div>
            <div class='box-actions'>
                <form action="{{ route('admin.modules.enable',  ['id' => $module->id, 'enabled' => $enabledAction]) }}" method="POST">
                    {{ method_field('PUT') }}
                    {{ csrf_field() }}
                    <button onclick="return confirm('¿{{ $enabledButton }} modulo?')" class='btn btn-primary btn-submit'>
                        <i class="fas fa-eye-slash"></i>
                        {{ $enabledButton }}
                    </button>
                </form>
                <a href="{{ route('admin.modules.quizzes.create', $module->id) }}">
                    <button class='btn btn-primary'>
                        <i class="fas fa-clipboard"></i>
                        Agregar cuestionario
                    </button>
                </a>
                <a href="{{ route('admin.modules.edit', $module->id) }}">
                    <button class='btn btn-primary'>
                        <i class="fas fa-edit"></i>
                        Editar / Modificar
                    </button>
                </a>
                @if(!$module->enabled)
                    <form action="{{ route('admin.modules.destroy', $module->id) }}" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <button onclick="return confirm('¿Eliminar modulo?')"  class='btn btn-delete btn-submit'>
                            <i class="fas fa-trash-alt"></i>
                            Eliminar
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection