<?php
// Redirige a otra URL
header("Location: https://www.ecca.edu.es");
exit(); // Asegúrate de que el script se detenga después de la redirección
?>


<?php $__env->startSection('css'); ?>
<?php echo Minify::stylesheet('/css/study.css')->withFullUrl(); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('title'); ?>
Estudiar Catálogo
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<?php echo Breadcrumbs::render('study-aa-catalogue'); ?>

<div class="container" id="vueLibre" codIdioma=<?php echo e($codIdioma); ?> url=<?php echo e($url); ?>>
    <div class="titulo_categoria">
        <span>Aula Abierta</span>
        <div class="subtitulo_categoria">Catálogo</div>
    </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="row">
                <div class="col-md-12">
                    <h3 style="font-size: 19px">Cursos organizados por áreas, navegue por cada una de ellas para buscar el curso que desee</h3>
                    <br>
                </div>
            </div>
            
            <div class="courseList" v-if="hasClasificaciones" v-for="c in getClasificacion" :key="c.idClasificacion">
                <ul>
                    <li>
                        <a data-toggle="collapse" class="collapse-click collapsed" 
                            v-on:click="getCursosCategoria(c)">{{c.nombreClasificacion}}
                        </a>

                        <div v-if="c.loading" style="font-size: 14px; margin-top: 8px;">Cargando...</div>
                        <div v-else-if="isExpanded(c.idClasificacion) && c.empty" style="font-size: 14px; margin-top: 8px;">No se han encontrado cursos</div>

                        <div v-show="isExpanded(c.idClasificacion)" v-for="t in getTitulaciones(c.idClasificacion)" :key="t.idTitulacion">
                            <a style="padding-left:10px;" v-on:click="goto_curso(t.idTitulacion, t.nombreTitulacion)">- {{t.nombreTitulacion}}</a>
                        </div>
                    </li>
                </ul>
            </div>
            <div v-if="loadingCategorias">
                <span style="font-size: 16px">Cargando...</span>
            </div>
        </div>
    
        <div id="matricularse" class="tab-pane fade">
            <h3>Cómo matricularse</h3>
            <p>
                Para seguir estudios en el Aula Abierta o Formación Profesional para el Empleo, es preciso inscribirse de una de las dos siguientes maneras:
            </p>
            <h3>1) Oferta radio</h3>
            <p>
                En uno de los centros y oficinas de Radio ECCA. En ese momento, el/la participante recibe el soporte didáctico necesario (material impreso, disquetes de prácticas, vídeo, etc.), según las características del curso. Tendrá que escuchar las clases a través de la radio o bajarlas de nuestra página web a través del servicio al alumnado banco de clases y realizar los trabajos previstos (prácticas, casos, guías, cuestionarios, evaluaciones, etc.).
            </p>
            <h3>2) Oferta online</h3>
            <p>
                Pinchando en el curso que desee del listado de la oferta que tenga la matrícula abierta en ese momento. Una vez realizada la matrícula, recibirá unas claves que le permitirán el acceso.
            </p>
            <h3>3) Videotutoriales</h3>
            <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>
    </div>    
    <hr>
    <br>
</div>
<!-- /.row -->
<!-- 
    Componente Vue para cargar los datos
-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    new Vue({
        el: '#vueLibre',
        props: {},
        data: { 
            clasificaciones: [],
            codIdioma: null,
            loadingCategorias: false
        },
        computed: {
            hasClasificaciones: function() {
                return (this.clasificaciones) && (this.clasificaciones.length > 0)
            },
            
            getClasificacion: function() {
                return this.clasificaciones.filter(clas => {
                    return clas.nombreClasificacion !== undefined
                })
            },
        },
        mounted () {
            this.loadingCategorias = true;
            this.codIdioma = this.$el.attributes.codIdioma.value
            var params = { params: { codIdioma: this.codIdioma } }
            axios
            .get(this.$el.attributes.url.value + '/getClasificacionAccionesAulaAbierta', params)
            .then(
                response => {
                    this.clasificaciones = response.data
                    this.loadingCategorias = false;
                })
        },
    
        methods: {
            isExpanded: function(id) {
                return this.clasificaciones.indexOf(id) !== -1
            },
            getCursosCategoria: function(clasificacion) {
                if (clasificacion.titulacionesLibres === null && !clasificacion.empty) {
                    clasificacion.loading = true;
                    
                    var params = { params: { codIdioma: this.codIdioma, idClasificacion: clasificacion.idClasificacion } }
                    axios
                    .get(this.$el.attributes.url.value + '/getTitulacionesAulaAbiertaByClasificacion', params)
                    .then(
                        response => {
                            //Si hay, se añaden los cursos a la clasificación
                            if (response.data.length > 0) {
                                var index = this.clasificaciones.findIndex(clas => {
                                    return clas.idClasificacion === clasificacion.idClasificacion
                                })
                                this.clasificaciones[index].titulacionesLibres = response.data
                            } else {
                                clasificacion.empty = true;
                            }
                            //Se muestran los cursos
                            this.getCursos(clasificacion.idClasificacion);
                            clasificacion.loading = false;
                        })
                } else {
                    this.getCursos(clasificacion.idClasificacion);
                }
            },
            goto_curso: function(id, nombre) {
                route = "<?php echo e(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(id) {
                if (this.isExpanded(id))
                    this.clasificaciones.splice(this.clasificaciones.indexOf(id), 1);
                else
                    this.clasificaciones.push(id);
            },
            getTitulaciones: function(id) {
                var index = this.clasificaciones.findIndex(clas => {
                    return clas.idClasificacion === id
                })
                if (index !== -1) {
                    return this.clasificaciones[index].titulacionesLibres
                }
            }
        },
    });

           
</script>
<?php $__env->stopSection(); ?>


<?php $__env->startSection('js-code-post'); ?>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery(document).on('click', '.panel-heading', function(){
        jQuery(this).next().toggle();
    });
});
</script>

<?php $__env->stopSection(); ?>      
<?php echo $__env->make('layouts.base', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>