@extends('layouts.base')

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

@section('title')
Estudios Aula Abierta
@stop

@section('content')
@if ($tipo == 1)
{!! Breadcrumbs::render('study-semipresencial') !!}
@elseif ($tipo == 2)
{!! Breadcrumbs::render('study-online') !!}
@else
{!! Breadcrumbs::render('study-adaptado') !!}
@endif

<div class="container" id="vueLibre" codIdioma={{$codIdioma}} tipo={{$tipo}} url={{$url}}>
    <div class="titulo_categoria">
        <span>Aprendizaje a lo largo de la vida</span>
        @if ($tipo == 1)
        <div class="subtitulo_categoria">Semipresenciales</div>
        @elseif ($tipo == 2)
        <div class="subtitulo_categoria">Online</div>
        @else
        <div class="subtitulo_categoria">Adaptados</div>
        @endif
    </div>
    <hr>
    <hr>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#cursos">Cursos</a></li>
        <li><a data-toggle="tab" href="#matricularse">Cómo matricularse</a></li>
    </ul>
    <div class="tab-content">
        <div id="cursos" class="tab-pane fade in active">
           
           <div class="login-form">
               <div class="form-group"> 
                  <input autocomplete="off" class="form-control" placeholder="Por ejemplo: Inglés, Matemáticas..." 
                     v-model="nombreCurso" required="required" name="clave" type="text" id="clave" accesskey="b">
                  
               </div>
               <input id="submitBtn" type="button" v-on:click="getCursos()" class="btn form-control" value="Buscar" >
               <input style="display:none;" id="submitBtnClear" type="button" v-on:click="clearAccion()" class="btn form-control">
               
           </div>
           
            <div v-if="hasCursos()" style="padding: 0px 35px;">
                <div class="courseList" v-for="c in cursos" :key="c.idTitulacion">
                    <ul>
                        <li>
                            <a v-on:click="goto_curso(c.idTitulacion, c.nombreTitulacion)">- @{{c.nombreTitulacion}}</a>
                        </li>
                    </ul>
                </div>
               <div style="margin-top: 20px; text-align: center;">
                  <button :disabled="!pagina > 0" type="button" class="btn btn-info btn-flat" style="color: #ffffff;background-color: #0069ad;border-color: #0069ad;" v-on:click="goAnterior()">
                     Anterior
                  </button>
                  <button :disabled="totalElementos === 0 || ((pagina+1)*10) >= totalElementos" type="button" class="btn btn-info btn-flat" style="color: #ffffff;background-color: #0069ad;border-color: #0069ad;" v-on:click="goSiguiente()">
                     Siguiente
                  </button>
               </div>
            </div>
            <div v-else-if="loadingCursos" style="padding: 0px 35px;">
                Cargando...
            </div>
            <div v-else>
            @if ($tipo == 1)
            <div style="padding: 0px 35px;">
                No se han encontrado cursos semipresenciales
            </div>
            @elseif ($tipo == 2)
            <div style="padding: 0px 35px;">
                No se han encontrado cursos online
            </div>
            @else
            <div style="padding: 0px 35px;">
                No se han encontrado cursos adaptados
            </div>
            @endif
            </div>
        </div>
    
        <div id="matricularse" class="tab-pane fade">            
            <h4 style="font-size: 19px">
                @if ($tipo == 1)
                <div>
                    <p>
                        Pinchando en el curso que desee del listado de la oferta semipresencial. Una vez realizada la matrícula, recibirá unas claves que le permitirán el acceso.
                    </p>
                    <ul>
                        <li>
                            <p>
                                Todos nuestros cursos siguen la <a href="estudiar/metodolog%C3%ADa"> metodología </a> propia de Radio ECCA.
                            </p>
                        </li>
                    </ul>

                </div>
                @elseif ($tipo == 2)
                <div>
                    <h1>Acceso y manejo de la plataforma</h1>
                    <br>
                    <p>
                        Pinchando en el curso que desee del listado de la oferta online. Una vez realizada la matrícula, recibirá unas claves que le permitirán el acceso.
                    </p>
                    <ul>
                        <li>
                            <p>
                                Todos nuestros cursos siguen la <a href="estudiar/metodolog%C3%ADa"> metodología </a> propia de Radio ECCA.
                            </p>
                        </li>
                    </ul>
                    <br>
                    <h1>Videotutoriales</h1>
                    <br>
                    <div class="row">
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="Para seguir nuestros cursos online, deberá matricularse desde la página web  de Radio ECCA. En este vídeo le explicamos cómo hacerlo."><a href="https://youtu.be/jtSBnZthoeA">Cómo matricularme</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jtSBnZthoeA?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="En este vídeo se explica, brevemente, la función de cada una de las opciones que figuran en el menú de la web Miecca."><a href="https://youtu.be/PQuAFItChVg">Conociendo la interfaz</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PQuAFItChVg?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div> 
                        </div>
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="Con este vídeo aprenderá cómo acceder a su matrícula y activar los módulos que desee."><a href="https://youtu.be/pXiBXhNcw4k">Matrículas y activación de módulos</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/pXiBXhNcw4k?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="Este vídeo le muestra los pasos que debe seguir para realizar una solicitud en la web Miecca."><a href="https://youtu.be/264SZQ48vnU">Cómo realizar una solicitud</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/264SZQ48vnU?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="En este vídeo le mostraremos cómo puede consultar sus calificaciones en la web Miecca."><a href="https://youtu.be/y6_0f1no5Rk">Mis calificaciones</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/y6_0f1no5Rk?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div> 
                        </div>
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="En este vídeo le mostraremos cómo consultar la información respecto a las becas o ayudas al estudio que se le han concedido."><a href="https://youtu.be/NV5z4ZZTdI4">Ayudas al estudio</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/NV5z4ZZTdI4?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="Con este vídeo aprenderá a consultar los pagos realizados y a obtener un justificante."><a href="https://youtu.be/wjj8UUNBC4Y">Mis pagos</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wjj8UUNBC4Y?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="En este vídeo le indicamos los pasos que debe seguir para acceder a la web Miecca."><a href="https://youtu.be/n_3oA_F45wg">Cómo accedo a la web Miecca</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/n_3oA_F45wg?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div> 
                        </div>
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="Desde la web Miecca podrá acceder a la plataforma educativa, en este vídeo le explicamos el procedimiento."><a href="https://youtu.be/OAr3XRUL1f0">Cómo accedo a la plataforma educativa</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/OAr3XRUL1f0?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="En este vídeo le indicamos cómo podrá conocer el centro de orientación que tiene asignado y el profesorado que le acompañará durante su formación."><a href="https://youtu.be/1kXaX7ke6K8">Mi centro de orientación</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/1kXaX7ke6K8?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="En este vídeo le mostramos cómo acceder a sus notificaciones y a la cesta de la compra de la web Miecca."><a href="https://youtu.be/gAYdImTQJmw">Mis notificaciones y cesta de pago</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gAYdImTQJmw?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div> 
                        </div>
                        <div class="col-md-4">
                            <h4 style="font-size: 19px" title="Con este vídeo aprenderá a consultar y firmar sus matrículas."><a href="https://youtu.be/FE1a3ykSi2I">Mis matrículas</a></h4><br>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/FE1a3ykSi2I?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
                            </div>
                        </div>
                    </div>
                    <br>
                </div>
                @else
                <div>
                    <p>
                        Pinchando en el curso que desee del listado de la oferta de cursos adaptados. Una vez realizada la matrícula, recibirá unas claves que le permitirán el acceso.
                    </p>
                    <ul>
                        <li>
                            <p>
                                Todos nuestros cursos siguen la <a href="estudiar/metodolog%C3%ADa"> metodología </a> propia de Radio ECCA.
                            </p>
                        </li>
                    </ul>

                </div>
                @endif
            </h4>
        </div>
    </div>    
    <hr>
    <br>
</div>
<!-- /.row -->
<!-- 
    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: '#vueLibre',
        props: {},
        data: { 
            cursos: [],
            codIdioma: "",
            tipo: null,
            loadingCursos: false,
            pagina: 0,
            totalElementos: 0,
            
            nombreCurso: "",
        },
        computed: {
        },
        mounted () {
            this.loadingCursos = true;
            this.codIdioma = this.$el.attributes.codIdioma.value
            this.tipo = this.$el.attributes.tipo.value
            this.getCursos()
        },
    
        methods: {
            hasCursos: function() {
                return (this.cursos) && (this.cursos.length > 0)
            },
            goto_curso: function(id, nombre) {
                route = "{{route('study-libres', ['id' => '?id?', 'nombre' => '?nombre?'])}}"
                route = route.replace('?id?', id)
                let nombreTitulacion = nombre.replace(/\//g,'-')
                route = route.replace('?nombre?', nombreTitulacion)
                location.href = route
            },
            getCursos: function() {
               var params = { params: { nombreCurso: this.nombreCurso, codIdioma: this.codIdioma, pagina: this.pagina } }
               if (this.tipo == 1) { 
               axios
               .get(this.$el.attributes.url.value + '/getCursosSemipresenciales', params)
               .then(
                   response => {
                       this.cursos = response.data.content
                       this.totalElementos = response.data.totalElements;
                       this.loadingCursos = false;
                   })
               } else if (this.tipo == 2) {
                   axios
               .get(this.$el.attributes.url.value + '/getCursosOnline', params)
               .then(
                   response => {
                       this.cursos = response.data.content
                       this.totalElementos = response.data.totalElements;
                       this.loadingCursos = false;
                   })
               } else {
                   axios
               .get(this.$el.attributes.url.value + '/getCursosAdaptados', params)
               .then(
                   response => {
                       this.cursos = response.data.content
                       this.totalElementos = response.data.totalElements;
                       this.loadingCursos = false;
                   })
               }
            },
            goSiguiente: function() {
            this.pagina++;
            this.getCursos();
            },
            goAnterior: function() {
               this.pagina--;
               this.getCursos();
            },
            clearAccion: function() {
               this.error = false
               this.acciones = []
            }
        },
    });

           
</script>
@stop    

@section('js-code-post')
{!! Minify::javascript('/js/custom.js')->withFullUrl() !!}
<script>
   $(document).ready(function () {
      

      $('form').submit(function (event) {
         console.log('form')
         $('#clave').keyup();
         event.preventDefault();
      });

      /*Listener para hacer la búsqueda dinámica a partir de 3 caractéres*/
      $('#clave').keyup(function (e) {
         console.log('keyup')
         clearTimeout($.data(this, 'timer'));
         if (e.keyCode == 13)
            search(true);
         else
            $(this).data('timer', setTimeout(search, 750));
      });

   });
   function cleanTextForUrl(text) {
      var clean = text.toLowerCase()
              .replace(/[(]/g, '')
              .replace(/[)]/g, '')
              .replace(/[:]/g, '')
              .replace(/[áàäâå]/g, 'a')
              .replace(/[éèëê]/g, 'e')
              .replace(/[íìïî]/g, 'i')
              .replace(/[óòöô]/g, 'o')
              .replace(/[úùüû]/g, 'u')
              .replace(/[ýÿ]/g, 'y')
              .replace(/[ñ]/g, 'n')
              .replace(/[ç]/g, 'c')
              .replace(/^\-+|[^a-zA-Z0-9\/_| -]+|\-+$/g, '')
              .replace(/[\/_| -]+/g, '-');
      return clean;
   }
   /*Búsqueda en la base de datos*/
   function search(force) {
      var existingString = $("#clave").val();
      document.getElementById("submitBtn").click()
   }
</script>

@stop