<?php $__env->startSection('css'); ?>
<?php echo Minify::stylesheet('/css/studiesListenClass.css')->withFullUrl(); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('title'); ?>
Escuchar clase: <?php echo e($name); ?>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('description'); ?>
Escuchar la clases: <?php echo e($name); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<?php echo Breadcrumbs::render('study-bank-class-listen', $name ); ?>

<div class="container">
    <div class="titulo_categoria">
        <?php if($materials): ?>
        <span>Material complementario y clases</span>
        <?php else: ?>
        <span>Escuchar clases</span>
        <?php endif; ?>
        <div class="subtitulo_categoria"><?php echo e($name); ?></div>
    </div>
    <?php if($materials): ?>
    <div class="titulo" id="coopera_titulo">
        Descargue el material complementario y siga las clases
    </div>
    <?php else: ?>
    <div class="titulo" id="coopera_titulo">
        Escuche las clases del módulo elegido
    </div>
    <?php endif; ?>
    <p>
        <?php if($materials): ?>
        Haga clic sobre el material complementario, e introduzca las claves que le han proporcionado, para visualizar los archivos en formato 
        <a href="https://get.adobe.com/es/reader/" target="_blank"> PDF</a>.<br>
        Recuerde que estos archivos son descargables (clic sobre el archivo con el botón derecho y seleccione la opción "guardar enlace como..." o "guardar destino como...").<br>
        <?php endif; ?>
        Si desea escuchar una clase, haga clic en la casilla de audio correspondiente. La emisión comenzará de forma automática.<br>
        Si desea disponer de una clase para escucharla en cualquier momento, sin necesidad de conexión a internet, haga clic sobre la opción  "Descargar esta clase", 
        alojada debajo de la portada del curso (aparece después de seleccionar un audio).
    </p>
    <div class="wrapper-listen-class">
        <div class="col-md-4 col-xs-12 image">
            <img class="img-responsive" src="<?php echo e($image); ?>">
            <!-- WebPlayer-->
            <div class="player-wrapper oculto">
                <audio id="player" controls="controls">
                    <source id="mp3_src" src="" type="audio/mpeg" />
                </audio>
                <div class="info-player"></div>
                <div class="download-mp3"></div>
            </div>
            <!--*********-->
        </div>
        <div class="col-md-8 col-xs-12 audio-wrapper">
            <?php if($materials): ?>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Material complementario</h3>
                </div>
                <div class="panel-body">
                    <?php foreach($materials as $material): ?>
                    <div class="col-md-2 col-xs-4 download">
                        <a title="Haga click para visualizar este material o botón derecho para opciones de descarga" target="_blank" href="<?php echo e($materialPath.$material->resource); ?>">
                            <div class="pdf"></div>
                            <?php echo e($material->resource); ?>

                        </a>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <br>
            <?php endif; ?>
            <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">
                    <?php foreach($audios as $audio): ?>
                    <div class="item col-md-2 col-sm-4 col-xs-6">
                        <div class="audio">
                            <a title="Haga click para escuchar este audio" target="_blank" dir="<?php echo e($downloadPath.$audio->audioFile); ?>" href="<?php echo e($audioPath.$audio->audioFile); ?>"> <?php echo e($audio->description); ?> </a>
                            <span class="play-icon oculto glyphicon glyphicon-play" aria-hidden="true"></span>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="spacer"></div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('js-code-post'); ?>
<?php echo Minify::javascript('/js/custom.js')->withFullUrl(); ?>

<script>
   function change(sourceUrl) {
       var audio = $("#player");
       $("#mp3_src").attr("src", sourceUrl);
       /****************/
       audio[0].pause();
       audio[0].load();//suspends and restores all audio element
       audio[0].play();
       /****************/
   }

   $(".audio a").click(function (e) {
       $(".audio").each(function () {
           $(this).removeClass("active");
       });
       $(this).parent().addClass("active");

       $(".play-icon").each(function () {
           $(this).addClass("oculto");
       });
       $(this).siblings(".play-icon").removeClass("oculto");

       $(".player-wrapper").removeClass("oculto");
       var url = $(this).attr("href");
       change(url);

       $(".info-player").html("Está escuchando la " + $(this).text());

       var downloadAudio = $(this).attr("dir");
       $(".download-mp3").html('<a href=' + encodeURI(downloadAudio) + '>Descargar esta clase <span class="glyphicon glyphicon-download" aria-hidden="true"></span></a>');

       e.preventDefault();
   });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.base', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>