@extends('layouts.base')

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

@section('title')
{{Lang::get('studies.bachelor.estudiar bachillerato')}}
@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>{{Lang::get('studies.aula abierta')}}</span>
        @if ($tipo == 1)
        <div class="subtitulo_categoria">{{Lang::get('studies.semipresenciales')}}</div>
        @elseif ($tipo == 2)
        <div class="subtitulo_categoria">{{Lang::get('studies.online')}}</div>
        @else
        <div class="subtitulo_categoria">{{Lang::get('studies.adaptado')}}</div>
        @endif
    </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 v-if="hasCursos()" >
            
                <div class="courseList" v-for="c in getCursos()" :key="c.idTitulacion">
                    <ul>
                        <li>
                            <a v-on:click="goto_curso(c.idTitulacion, c.nombreTitulacion)">- @{{c.nombreTitulacion}}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div v-else>
            @if ($tipo == 1)
            <div>
                No existen cursos {{Lang::get('studies.tipo semipresenciales')}} habilitados actualmente
            </div>
            @elseif ($tipo == 2)
            <div>
                No existen cursos {{Lang::get('studies.tipo online')}} habilitados actualmente
            </div>
            @else
            <div>
                No existen cursos {{Lang::get('studies.tipo adaptado')}} habilitados actualmente
            </div>
            @endif
            </div>
        </div>
    
        <div id="matricularse" class="tab-pane fade">            
            <h4 style="font-size: 19px">
                @if ($tipo == 1)
                <div>
                    Descripción de como matricularse para los tipo semipresenciales
                </div>
                @elseif ($tipo == 2)
                <div>
                    Descripción de como matricularse para los tipo onlines
                </div>
                @else
                <div>
                    Descripción de como matricularse para los tipo adaptados
                </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: null,
            tipo: null
        },
        computed: {},
        mounted () {
            this.codIdioma = this.$el.attributes.codIdioma.value
            this.tipo = this.$el.attributes.tipo.value
            var params = { params: { codIdioma: this.codIdioma } }
            if (this.tipo == 1) {
            axios
            .get(this.$el.attributes.url.value + '/getCursosSemipresenciales', params)
            .then(
                response => {
                    this.cursos = response.data
                })
            } else if (this.tipo == 2) {
                axios
            .get(this.$el.attributes.url.value + '/getCursosOnline', params)
            .then(
                response => {
                    this.cursos = response.data
                })
            } else {
                axios
            .get(this.$el.attributes.url.value + '/getCursosAdaptados', params)
            .then(
                response => {
                    this.cursos = response.data
                })
            }
        },
    
        methods: {
            hasCursos: function() {
                console.log("hasCursos: " + (this.cursos !== undefined) && (this.cursos.length > 0))
                return (this.cursos !== undefined) && (this.cursos.length > 0)
            },
            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() {
                return this.cursos
            },
        },
    });

           
</script>
@stop