@extends('layouts.base')

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

@section('title')
Oferta formativa de Radio ECCA
@stop
@section('description')
Graduado escolar a distancia, graduado escolar para adultos, formación online, graduado en educación secundaria, bachillerato, formación profesional, graduado adultos, graduado en eso,  idiomas.
@stop

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


<div class="container">
    <div class="titulo_categoria">
        <span>Oferta formativa ECCA</span>
    </div>
    <div class="col-md-12">
        <div class="titulo">
        </div>
    </div>
    <div id="vueCatalogo" idioma={{$codIdioma}} url={{$url}} class="row">
        <div class="col-md-8">
        
            <div v-if="showTitulacionesDisponibles" class="col-md-12">
                <!-- FORMACIÓN BÁSICA INICIAL -->
                <div v-if="getCursosFBI.length > 0">
                    <div class="subtitulo">
                        <a data-toggle="collapse" href="#collapseFormacionBasicaInicial" role="button" aria-expanded="false" aria-controls="collapseExample">
                        FORMACIÓN BÁSICA INICIAL
                        </a>
                    </div>
                    <div class="caption">
                        <p class="text-justify">La Formación Básica Inicial contribuirá a desarrollar en el alumnado adulto las capacidades que le permitan prepararle para incorporarse a la Formación Básica Postinicial (GES) con garantías de éxito.</p>
                    </div>
                    <div class="collapse" id="collapseFormacionBasicaInicial" style="margin-bottom: 2rem;">
                        <div v-for="c in getCursosFBI" :key="c.idTitulacion">
                            <div class="image-substitute-wrapper">
                                <h4 style="margin-top: 20px; margin-bottom: 10px; font-weight: normal !important">
                                    <a href="#" v-on:click="goto_route(c)">
                                        @{{c.nombreTitulacion}}
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- GRADUADO EN EDUCACIÓN SECUNDARIA -->
                <div v-if="getCursosFBI.length > 0">
                    <div class="subtitulo">
                        <a data-toggle="collapse" href="#collapseFormacionBasicaGes" role="button" aria-expanded="false" aria-controls="collapseExample">
                        GRADUADO EN EDUCACIÓN SECUNDARIA
                        </a>
                    </div>
                    <div class="caption">
                        <p class="text-justify">Titulación mínima en el Estado español que proporciona la formación básica que le permitirá acceder a estudios superiores.</p>
                    </div>
                    <div class="collapse" id="collapseFormacionBasicaGes" style="margin-bottom: 2rem;">
                        <div v-for="c in getCursosGES" :key="c.idTitulacion">
                            <div class="image-substitute-wrapper">
                                <h4 style="margin-top: 20px; margin-bottom: 10px; font-weight: normal !important">
                                    <a href="#" v-on:click="goto_route(c)">
                                        @{{c.nombreTitulacion}}
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- GES EXTREMADURA -->
                <div v-if="getCursosExtremadura.length > 0">
                    <div class="subtitulo">
                        <a data-toggle="collapse" href="#collapseFormacionBasicaExt" role="button" aria-expanded="false" aria-controls="collapseExample">
                        GES NIVEL I (ECCA Extremadura)
                        </a>
                    </div>
                    <div class="caption">
                        <p class="text-justify">Nivel I de la Formación Básica Postinicial que le permitirá acceder al Nivel II de GES.</p>
                    </div>
                    <div class="collapse" id="collapseFormacionBasicaExt" style="margin-bottom: 2rem;">
                        <div v-for="c in getCursosExtremadura" :key="c.idTitulacion">
                            <div class="image-substitute-wrapper">
                                <h4 style="margin-top: 20px; margin-bottom: 10px; font-weight: normal !important">
                                    <a href="#" v-on:click="goto_route(c)">
                                        @{{c.nombreTitulacion}}
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- BACHILLERATO -->
                <div v-if="getCursosBachillerato.length > 0">
                    <div class="subtitulo">
                        <a data-toggle="collapse" href="#collapseBachillerato" role="button" aria-expanded="false" aria-controls="collapseExample">
                            BACHILLERATO
                        </a>
                    </div>
                    <div class="caption">
                        <p class="text-justify">El Bachillerato tiene como finalidad proporcionar al alumnado formación de carácter general que le permita adquirir una madurez intelectual y humana, y además, acceder a la educación superior.</p>
                    </div>
                    <div class="collapse" id="collapseBachillerato" style="margin-bottom: 2rem;">
                        <div v-for="c in getCursosBachillerato" :key="c.idTitulacion">
                            <div class="image-substitute-wrapper">
                                <h4 style="margin-top: 20px; margin-bottom: 10px; font-weight: normal !important">
                                    <a href="#" v-on:click="goto_route(c)">
                                        @{{c.nombreTitulacion}}
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- CICLO -->
                <div v-if="getCursosCicloSuperior.length > 0">
                    <div class="subtitulo">
                        <a data-toggle="collapse" href="#collapseCicloSuperior" role="button" aria-expanded="false" aria-controls="collapseExample">
                        Ciclo Superior de Integración Social
                        </a>
                    </div>
                    <div class="caption">
                        <p class="text-justify">Estos estudios están dirigidos a todas aquellas personas que deseen actualizar su cualificación profesional.</p>
                    </div>
                    
                    <div class="collapse" id="collapseCicloSuperior" style="margin-bottom: 2rem;">
                        <div v-for="c in getCursosCicloSuperior" :key="c.idTitulacion">
                            <div class="image-substitute-wrapper">
                                <h4 style="margin-top: 20px; margin-bottom: 10px; font-weight: normal !important">
                                    <a href="#" v-on:click="goto_route(c)">
                                        @{{c.nombreTitulacion}}
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div v-for="c in getCursosPropios" :key="c.idTitulacion">
                    <div class="image-substitute-wrapper">
                        <h3>
                            <a href="#" v-on:click="goto_route(c)" style="font-size:20px;">
                                @{{c.nombreTitulacion}}
                                <!-- PONE A MANO EL NOMBRE PARA EL ARRANQUE, MIENTRAS SE ESPERA ACTUALIZACIÓN DEL SGIS -->
                               <!-- Aprendizaje a lo largo de la vida -->
                            </a>
                        </h3>
                    </div>
                    <div class="caption">
                            <p v-html="c.descripcion" class="text-justify"></p>
                    </div>
                </div>
            </div>
            <div v-else class="col-md-12" style="padding-top:15px;">
                Cargando...
            </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') }}">CURSOS DESTACADOS</a>
            </div>
            <div class="col-xs-12 wrapper-important2">
                <a href="{{ route('study-methodology') }}">METODOLOGÍA</a>
            </div>
            <div class="col-xs-12 wrapper-important2">
                <a href="{{ route('study-advantages') }}">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,
            titOficialesLoaded: false,
            titNoOficialesLoaded:false
        },
        created: function() {},
        computed: {
            getCursosBachillerato: function() {
                return this.cursosOficiales.filter(c => c.bachillerato);
            },
            getCursosCicloSuperior: function() {
                return this.cursosOficiales.filter(c => c.cicloSuperior);
            },          
            getCursosFBI: function() {
                return this.cursosOficiales.filter(c => c.fbi);
            },
            getCursosGES: function() {
                return this.cursosOficiales.filter(c => c.ges);
            },
            getCursosExtremadura: function() {
                return this.cursosPropios.filter(c => c.ges);
            },
            getCursosPropios: function() {
                return this.cursosPropios.filter(c => !c.ges);
            },
            showTitulacionesDisponibles: function() {
                return this.titOficialesLoaded && this.titNoOficialesLoaded;
            },
            
        },
        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.titOficialesLoaded = true;
                    this.cursosOficiales = response.data;
                })
                axios
            .get(this.$el.attributes.url.value + '/getTitulacionesNoOficialesAndLibresAbiertas', params)
            .then(
                response => {
                    this.titNoOficialesLoaded = true;
                    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