@extends('layouts.base')

@section('css')
{!! Minify::stylesheet('/css/studiesListenClass.css')->withFullUrl() !!}
@stop

@section('title')
Escuchar clase: {{ $nombre }}
@stop
@section('description')
Escuchar la clases: {{ $nombre }}
@stop

@section('content')
{!! Breadcrumbs::render('study-bank-class-listen', $nombre ) !!}
<div class="container" id="audiosVue" idAccion="{{$id}}" url="{{$url}}">
    <div class="titulo_categoria">
        <span>Escuchar clases</span>
        <div class="subtitulo_categoria">{{ $nombre }}</div>
    </div>
    
    <div class="titulo" id="coopera_titulo">
        Escuche las clases del módulo elegido
    </div>
    
    <p>
        Si desea escuchar una clase, haga clic en la casilla de audio correspondiente. Se abrirá una nueva pestaña con la clase seleccionada para ser escuchada.<br>
        Si desea disponer de una clase para escucharla en cualquier momento, sin necesidad de conexión a internet, en la pestaña que se abre tendrá la opción de ser descargada.
    </p>
    <div class="wrapper-listen-class">
        <div class = "col-md-4 col-xs-12 image">
            <div v-if="hasPortada">
                <img class="img-responsive" v-bind:src="'data:image/jpeg;base64,'+portadaAccion" />
            </div>
            <div v-if="!hasPortada">
                <img class="img-responsive" src=""/>
            </div>
        </div>
            
        <div class="col-md-8 col-xs-12 audio-wrapper">
            <div class="panel panel-primary" style="border: none;">
                <div class="panel-heading">
                    <h3 class="panel-title">Clases disponibles</h3>
                </div>
                <div class="panel-body" style="padding: 15px 0px 0px 0px; background: #f6f6f6">
                    <div v-if="hasAudios()">
                        <div v-for="audio in getAudios()" :key="audio.idFile" class="item col-md-2 col-sm-4 col-xs-6">
                            <div class="audio">
                            
                            <a style="overflow:hidden" data-toggle="tooltip" :title="audio.nameFile" href="#" v-on:click="prueba(audio.urlFile)"> @{{audio.nameFile}} </a>
                                <span class="play-icon oculto glyphicon glyphicon-play" aria-hidden="true"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="spacer"></div>

<!-- 
    Componente Vue para cargar los datos
-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#audiosVue',
        props:{
        },
        
        data: { 
            audios: [],
            portadaAccion: null
            
        },
        created: function() {},
        computed: {
            hasPortada: function() {
                return (this.portadaAccion != undefined) && (this.portadaAccion != null) && (this.portadaAccion != "")
            },
        },
        mounted () {
            this.idAccion = this.$el.attributes.idAccion.value
            
            var params = { params: { idAccion: this.idAccion } } //Settear el idioma que tiene la pagina en ese momento
            axios
            .get(this.$el.attributes.url.value + '/getUrlClasesAccion', params)
            .then(
                response => {
                    this.audios = response.data
                })
            //llamada para recoger la portada    
            axios
            .get(this.$el.attributes.url.value + '/getPortadaAccion', params)
            .then(
                response => {
                    this.portadaAccion = response.data
                })
        },
    
        methods: {
            
            getAudios: function() {
                return this.audios
            },
            hasAudios: function() {
                return (this.audios !== undefined) && (this.audios.length > 0)
            },
            goto_route: function(curso) {
                if (curso.idTitulacion !== null) {
                    route = "{{route('study-estructurados', ['id' => '?id?', 'nombre' => '?nombre?'])}}"
                    route = route.replace('?id?', curso.idTitulacion)
                    let nombreTitulacion = curso.nombreTitulacion.replace(/\//g,'-')
                    route = route.replace('?nombre?', nombreTitulacion)
                    location.href = route
                } else { 
                    route = "{{route('study-aa')}}"
                    location.href = route
                }
            },
            prueba: function(url) {
                window.open(url)
            }
        },
        

    });

           
</script>
@stop

@stop