@extends('layouts.base')

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

@section('title')
{{Lang::get('studies.oferta formativa de radio ecca')}}
@stop
@section('description')
{{Lang::get('studies.graduado escolar a distancia')}}
@stop

@section('content')
{!! Breadcrumbs::render('study') !!}


<div class="container">
    <div class="titulo_categoria">
        <span>{{Lang::get('studies.oferta formativa ecca')}}</span>
    </div>
    <div class="col-md-12">
        <div class="titulo">
            {{Lang::get('studies.oferta completa')}}
        </div>
    </div>
    <div id="vueCatalogo" idioma={{$codIdioma}} url={{$url}} class="row">
        <div class="col-md-8">
            <div class="col-md-12">
                <div class="subtitulo">
                    {{Lang::get('studies.titulaciones oficiales')}}
                </div>
                <div v-for="c in getCursosOficiales" :key="c.idTitulacion">
                    <div class="image-substitute-wrapper">
                        <h3>
                            <a href="#" v-on:click="goto_route(c)">
                                @{{c.nombreTitulacion}}
                            </a>
                        </h3>
                    </div>
                    <div class="caption">
                    <p v-html="c.descripcion" class="text-justify"></p>
                    </div>
                </div>
                <div class="subtitulo">
                    {{Lang::get('studies.titulaciones propias')}}
                </div>
                <div v-for="c in getCursosPropios" :key="c.idTitulacion">
                    <div class="image-substitute-wrapper">
                        <h3>
                            <a href="#" v-on:click="goto_route(c)">
                                @{{c.nombreTitulacion}}
                            </a>
                        </h3>
                    </div>
                    <div class="caption">
                        <p v-html="c.descripcion" class="text-justify"></p>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="col-md-4 important">
            <br>
            <div class="col-xs-12">
                <img class="img-responsive" src="{{ asset('img/study-photo.jpg') }}">
            </div>
            <br>
            <div class="col-xs-12 wrapper-important">
                <a href="{{ route('study-aa-starred') }}">{{Lang::get('studies.cursos destacados')}}</a>
            </div>
            <div class="col-xs-12 wrapper-important2">
                <a href="{{ route('study-methodology') }}">{{Lang::get('studies.metodologia')}}</a>
            </div>
            <div class="col-xs-12 wrapper-important2">
                <a href="{{ route('study-advantages') }}">{{Lang::get('studies.ventajas')}}</a>
            </div>
        </div>
    </div>
</div>

<div class="spacer"></div>
<div class="image-viewer hide">
    <img id="load-image" class="img-responsive">
</div>

<!-- 
    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: '#vueCatalogo',
        props:{
        },
        
        data: { 
            cursosOficiales: [],
            cursosPropios: [],
            codIdioma:null
            
        },
        created: function() {},
        computed: {
            getCursosOficiales: function() {
                return this.cursosOficiales
            },
            getCursosPropios: function() {
                return this.cursosPropios
            },
        },
        mounted () {
            this.codIdioma = this.$el.attributes.idioma.value
            
            var params = { params: { codIdioma: this.codIdioma } } //Settear el idioma que tiene la pagina en ese momento
           axios
            .get(this.$el.attributes.url.value + '/getTitulacionesOficialesAbiertas', params)
            .then(
                response => (
                    this.cursosOficiales = response.data
                ))
                axios
            .get(this.$el.attributes.url.value + '/getTitulacionesNoOficialesAndLibresAbiertas', params)
            .then(
                response => (
                    this.cursosPropios = response.data
                ))
            
            
        },
    
        methods: {
            goto_route: function(curso) {
                if (curso.idTitulacion !== null) {
                    route = "{{route('study-estructurados', ['id' => '?id?', 'nombre' => '?nombre?'])}}"
                    route = route.replace('?id?', curso.idTitulacion)
                    let nombreTitulacion = curso.nombreTitulacion.replace(/\//g,'-')
                    route = route.replace('?nombre?', nombreTitulacion)
                    location.href = route
                } else { 
                    route = "{{route('study-aa')}}"
                    location.href = route
                }
            },
        },
        

    });

           
</script>
@stop

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

<script>
   $(".image-item").click(function (event) {
       event.preventDefault();
       var href = $(this).attr("href");
       $(".image-viewer").removeClass("hide");
       $("#load-image").attr("src", href);
   });
   $(".image-viewer").click(function () {
       $(this).addClass("hide");
   });
</script>
@stop