@extends('layouts.base')

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

@section('title')
{{Lang::get('studies.starred.oferta de cursos destacados de aula abierta')}}
@stop
@section('description')
{{Lang::get('studies.starred.vea aqui los cursos destacados')}}

@stop

@section('content')
{!! Breadcrumbs::render('study-aa-starred') !!}
<div class="container" id="vueDestacados" codIdioma="{{$codIdioma}}" url="{{$url}}">
    <div class="titulo_categoria">
        <span>{{Lang::get('studies.starred.cursos destacados')}}</span>
    </div>

    <div class="row starred-wrapper" >
    <div class="col-md-3 item-wrapper" v-for="c in getCursos" :key="c.idTitulacion">
            <div class="item">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>@{{c.nombreTitulacion}}</h1>
                        <p v-html="c.descripcion">
                        </p>
                        <a class="btn btn-large btn-primary" v-on:click="goto_route(c)">
                            {!! Lang::get('studies.starred.informese aqui') !!}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="spacer"></div>
</div>
<div class="spacer"></div>
<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: '#vueDestacados',
        props: {
        },
        data: { 
            cursos: [],
            codIdioma: null
        },
        computed: {
            getCursos: function() {
                return this.cursos
            }
        },
        mounted () {
            this.codIdioma = this.$el.attributes.codIdioma.value
            var params = { params: { codIdioma: this.codIdioma } }
            axios
            .get(this.$el.attributes.url.value + '/getLastASAulaLibreWebPublica', params)
            .then(
                response => {
                    this.cursos = response.data
                })
            
        },
        methods: {
            
            goto_route: function(curso) {
                route = "{{route('study-libres', ['id' => '?id?', 'nombre' => '?nombre?'])}}"
                route = route.replace('?id?', curso.idTitulacion)
                let nombreTitulacion = curso.nombreTitulacion.replace(/\//g,'-')
                route = route.replace('?nombre?', nombreTitulacion)
                location.href = route
            }
        },
    });

           
</script>
@stop

@section('js-code-post')
    {!! Minify::javascript('/js/custom.js')->withFullUrl() !!}
@stop