@extends('layouts.base')

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

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

@section('content')
{!! Breadcrumbs::render('study-bank-class-listen', $name ) !!}
<div class="container">
    <div class="titulo_categoria">
        @if ($materials)
        <span>Material complementario y clases</span>
        @else
        <span>Escuchar clases</span>
        @endif
        <div class="subtitulo_categoria">{{ $name }}</div>
    </div>
    @if ($materials)
    <div class="titulo" id="coopera_titulo">
        Descargue el material complementario y siga las clases
    </div>
    @else
    <div class="titulo" id="coopera_titulo">
        Escuche las clases del módulo elegido
    </div>
    @endif
    <p>
        @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>
        @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="{{ $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">
            @if ($materials)
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Material complementario</h3>
                </div>
                <div class="panel-body">
                    @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="{{ $materialPath.$material->resource }}">
                            <div class="pdf"></div>
                            {{ $material->resource }}
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
            <br>
            @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">
                    @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="{{ $downloadPath.$audio->audioFile }}" href="{{ $audioPath.$audio->audioFile }}"> {{ $audio->description }} </a>
                            <span class="play-icon oculto glyphicon glyphicon-play" aria-hidden="true"></span>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<div class="spacer"></div>

@stop

@section('js-code-post')
{!! 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>
@stop