@extends('layouts.base')

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

@section('title')
{{Lang::get('studies.bachelor.estudiar bachillerato')}}
@stop

@section('content')
{!! Breadcrumbs::render('study-aa-catalogue') !!}
<div class="container" id="vueLibre" codIdioma={{$codIdioma}} url={{$url}}>
    <div class="titulo_categoria">
        <span>{{Lang::get('studies.aula abierta')}}</span>
        <div class="subtitulo_categoria">{{Lang::get('studies.catalogo')}}</div>
    </div>
    <hr>
    <hr>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#cursos">{{Lang::get('studies.cursos')}}</a></li>
        <li><a data-toggle="tab" href="#matricularse">{{Lang::get('studies.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">{{Lang::get('studies.organizados por areas')}}</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="getCursos(c.idClasificacion)">@{{c.nombreClasificacion}}
                        </a>
                        <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>
    
        <div id="matricularse" class="tab-pane fade">            
            <h4 style="font-size: 19px">Descripción para matricularse</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: { 
            clasificaciones: [],
            codIdioma: null
        },
        computed: {
            hasClasificaciones: function() {
                return (this.clasificaciones !== undefined) && (this.clasificaciones.length > 0)
            },
            
            getClasificacion: function() {
                return this.clasificaciones.filter(clas => {
                    return clas.nombreClasificacion !== undefined
                })
            },
        },
        mounted () {
            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
                })
        },
    
        methods: {
            isExpanded: function(id) {
                return this.clasificaciones.indexOf(id) !== -1
            },
            goto_curso: function(id, nombre) {
                route = "{{route('study-libres', ['id' => '?id?', 'nombre' => '?nombre?'])}}"
                route = route.replace('?id?', id)
                route = route.replace('?nombre?', nombre)
                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>
@stop


@section('js-code-post')
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery(document).on('click', '.panel-heading', function(){
        jQuery(this).next().toggle();
    });
});
</script>

@stop