

<?php $__env->startSection('css'); ?>
<?php echo Minify::stylesheet('/css/studiesListenClass.css')->withFullUrl(); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('title'); ?>
Escuchar clase: <?php echo e($nombre); ?>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('description'); ?>
Escuchar la clases: <?php echo e($nombre); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<?php echo Breadcrumbs::render('study-bank-class-listen', $nombre ); ?>

<div class="container" id="audiosVue" idAccion="<?php echo e($id); ?>" url="<?php echo e($url); ?>">
    <div class="titulo_categoria">
        <span>Escuchar clases</span>
        <div class="subtitulo_categoria"><?php echo e($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" style="width:201px; height:282px">
                <img  v-bind:src="'data:image/jpeg;base64,'+portadaAccion" style="max-width:100%;max-height:100%"/>
            </div>
            <div v-if="!hasPortada">
                <img  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 = "<?php echo e(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 = "<?php echo e(route('study-aa')); ?>"
                    location.href = route
                }
            },
            prueba: function(url) {
                window.open(url)
            }
        },
        

    });

           
</script>
<?php $__env->stopSection(); ?>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.base', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>