@extends('layouts.base')

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

@section('title')
Estudiar
@stop

@section('content')
{!! Breadcrumbs::render('study-estructurado', $nombre) !!}
<div class="container" id="vueIdCurso" idCurso={{$id}} codIdioma={{$codIdioma}} url="{{$url}}" urlMiEcca={{$urlMiEcca}}>
    <div class="titulo_categoria">
        <span v-html="curso.nombreTitulacion"></span>
        <div class="subtitulo_categoria">Estudios ECCA</div>
    </div>
    <hr>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Información</a></li>
        <li><a data-toggle="tab" href="#modalidades">Estructura</a></li>
        <li><a data-toggle="tab" href="#menu1">Requisitos</a></li>
        <li><a data-toggle="tab" href="#menu2">Minitutoriales aula virtual</a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <div class="row">
                <div class="col-md-6">
                    <h3 v-html="curso.nombreTitulacion"></h3>
                    <p v-html="curso.descripcion"></p>
                    <img title="Alumna estudiando bachiller" class="img-responsive" :src="randomImage">
                </div>
                <div class="col-md-6">
                    <h3>¿Cómo matricularse?</h3>
                    <div class="row">
                        <div class="col-md-12">
                            <p v-html="curso.matriculacion"></p>
                        </div>
                    </div>
                    <h3>Fechas de interés</h3>
                    <div class="row pb-4">
                        <div class="col-md-12">
                            <span v-if="curso.fechaInicioMatriculacion && curso.fechaFinMatriculacion"><u>Fecha de matriculación</u>: @{{curso.fechaInicioMatriculacion}} - @{{curso.fechaFinMatriculacion}}<br/></span>
                            <span v-if="curso.fechaInicioImparticion && curso.fechaFinImparticion"><u>Fecha de impartición</u>: @{{curso.fechaInicioImparticion}} - @{{curso.fechaFinImparticion}}<br/></span>
                        </div>
                    </div>
                    <h3>Contacte con nosotros</h3>
                    <div class="col-md-12">
                        <blockquote class="blockquote-reverse">
                            <div>
                                <a href="mailto:teleformacion@radioecca.org?Subject=Contacto%20Web%20Teleformación%20Ges" target="_top">teleformacion@radioecca.org
                                </a>
                            </div>
                            <div style="margin-top: 10px;" class="phone">
                                <a href="tel:+34902312212">902 312 212</a>
                            </div>
                        </blockquote>
                    </div>
                    <br>
                    <br>
                    <div v-if="inMatriculacion" >
                        <h3 style="color: rgb( 255, 150, 0 ); text-align: center; font-weight: 600 ">
                            MATRÍCULA ABIERTA
                        </h3>
                    </div>
                    <div v-else-if="inPreinscripcion" >
                        <h3 style="color: rgb( 255, 150, 0 ); text-align: center; font-weight: 600 ">
                            PREINSCRIPCIÓN ABIERTA
                        </h3>
                    </div>
                    <div v-else>
                        <h3 style="text-align: center;">
                            MATRÍCULA CERRADA
                        </h3>
                    </div>
                </div>
            </div>
        </div>
        <div id="modalidades" class="tab-pane fade">            
            <div v-if="hasModalidad()">
                <div v-for="mod in getModalidades()" :key="mod.id">
                    <h4 style="font-size: 19px">@{{mod.nombre}}</h4>
                    <br>
                    <div class="well" style="overflow-x:auto;">
                        <div class="table-response">
                            <tabla-arbol :elementos="getElementos(mod.id)" :arbolX="getArbolX()" :arbolY="getArbolY()" ></tabla-arbol>
                            </tabla-arbol>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="menu1" class="tab-pane fade">
            <div class="row">
                <div class="col-md-12">
                    <div v-html ="curso.requisitos"></div>
                </div>
            </div>
            <br>
        </div>
        
        <div id="menu2" class="tab-pane fade">
     <h1 style="text-align: center">Acceso y manejo de la plataforma.</h1>
	 <br><br>
	<div class="row">
	  <div class="col-md-4">
            <h4 style="font-size: 19px"><a href="https://www.youtube.com/HjbLc68aucY">Video 1. Cómo acceder a la web.</a></h4><br>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/HjbLc68aucY?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
          </div>
        </div>
        <div class="col-md-4">
             <h4 style="font-size: 19px"><a href="https://youtu.be/t17a29Ogo6Q">Video 2. Cómo realizar preguntas al profesorado.</a></h4>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/t17a29Ogo6Q?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
          </div> 
        </div>
	<div class="col-md-4">
             <h4 style="font-size: 19px"><a href="https://youtu.be/yagZ_UypaZE">Video 3. Las aulas virtuales.</a></h4><br>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/yagZ_UypaZE?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
          </div>
        </div>
    </div>
	<br><br>
    <div class="row">
        <div class="col-md-4">
             <h4 style="font-size: 19px"><a href="https://youtu.be/Svmj43885SM">Video 4. Cómo seguir las clases.</a></h4><br>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Svmj43885SM?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
          </div>
        </div>
        <div class="col-md-4">
             <h4 style="font-size: 19px"><a href="https://youtu.be/iLbr2UB44mk">Video 5. Cómo subir un trabajo.</a></h4><br>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/iLbr2UB44mk?rel=0&amp;controls=1&amp;showinfo=0;theme=light;modestbranding=1;autoplay=0;color=white"></iframe>
          </div> 
        </div>
    </div>

</div>
        
    </div>
    <div class="row important col-md-8">
       <!-- <div v-if="curso.inPeriodoMatriculacion" style="float:right" class="col-md-6 wrapper-important">
            <a href="#" v-on:click="matriculacion()">
                Matriculación
            </a>
        </div> -->

        <div v-else-if="curso.inPeriodoPreinscripcion" style="float:right" class="col-md-6 wrapper-important">
            <a href="#" v-on:click="matriculacion()">
                Preinscripción
            </a>
        </div>
    </div>
    <div v-if="hasDocumentos()" class="row important col-md-12">
        <h3>
            Documentación necesaria
        </h3>
        <div v-for="doc in curso.documentacion" :key="doc.id" class="wrapper-important3 col-md-3" style="margin-top:1rem;">
            <a data-toggle="tooltip" :title="doc.nombre" target="_blank" v-on:click="downloadPDF(doc.id, doc.nombre)"
                class="documentacion">
                Descargar @{{doc.nombre}}
            </a>
        </div>
    </div>
    <hr>
    <br>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <h3>¿Cómo se estudia?</h3>
                    <p v-html="curso.metodoEstudio"></p>
                </div>
            </div>
        </div>
        <div v-if="colaboradores && colaboradores.length > 0" class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <h3>Financiadores</h3>
                    <div class="wrapper_proyecto_caracteristicas">
                        <div v-for="colab in colaboradores" :key="colab.id">
                            <h4 style="margin-top: 10px;">@{{colab.nombre}}</h4>
                            <div v-if="colab.imagen64" style="max-width:200px; max-height:200px">
                                <img
                                   style="max-width:100%;max-height:100%"
                                   v-bind:src="'data:image/jpeg;base64,'+colab.imagen64"
                                />
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>
<div class="spacer"></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">

//Componente final para mostrar las materias
var ComponenteTdTablaArbol = Vue.component( 'ComponenteTdTablaArbol', {
    props: {
        x: Number, //Array con la estructura del árbol 
        y: Number,  //Número de elementos de la cabecera
        elementos: Array,
    },
    template:
            `  
            <td style="padding:5px">
                <div v-for="item in this.elementos" >
                    <span>@{{item.nombre}}</span>
                </div>
            </td>
            `
});
var ComponenteCabeceraTablaArbol = Vue.component( 'ComponenteCabeceraTablaArbol', {
    props: {
        arbolNivelX: Array, //Array con la estructura del árbol 
        nProfundidadY: Number  //Número de niveles de la cabecera lateral
    },
    template:
            `  
            <tr v-if="this.arbolNivelX.length > 0">
                <td :colspan="this.nProfundidadY"></td>
                <template v-for="hijo in this.arbolNivelX">
                    <th style="padding:5px" :colspan="hijo.nEltosUltimoNivel" :key="hijo.nombre">@{{hijo.nombre}}</th>
                </template>
            </tr>
            `
});
var ComponenteCabeceraLateralTablaArbol = Vue.component( 'ComponenteCabeceraLateralTablaArbol', {
    props: {
        arbolNivelY: Array, //Array con la estructura del árbol 
        longitudX: Number,  //Número de elementos de la cabecera
        elementos: Array, //Elementos que contiene la tabla
    },
    components: {
        'TdTablaArbol': ComponenteTdTablaArbol
    },
    computed: {
        nFila : function () { return (this.arbolNivelY.length > 0) ? this.arbolNivelY[0].posicion : null}
    },
    methods: {
        getElementos: function(x,y){  //Obtiene el elemento según la posición
            return this.elementos.filter((elem) => (elem.x == x) && (elem.y == y))
        }
    },

    template:
            `
            <tr style="border-top: 2px solid #dddddd;" v-if="this.arbolNivelY.length > 0">
                <template v-for="hijo in this.arbolNivelY">
                    <th style="vertical-align:top; padding:10px;" :rowspan="hijo.nEltosUltimoNivel" :key="hijo.nombre">@{{hijo.nombre}}</th>
                </template>
                <template v-for="n in this.longitudX">
                    <td-tabla-arbol :key="nFila+'-'+n" :x="n" :y="nFila" :elementos="getElementos(n,nFila)">
                    </td-tabla-arbol>
                </template>
            </tr>
            `
});

var ComponenteTablaArbol = Vue.component( 'ComponenteTablaArbol', {
    data: function() {
        return {
            arbolX: [],
            arbolY: [],
            elementos: []
        }
    },
    props: {
    },
    components: {
        'CabeceraTablaArbol': ComponenteCabeceraTablaArbol,
        'CabeceraLateralTablaArbol': ComponenteCabeceraLateralTablaArbol
    },
    created: function() {
        this.arbolX = this.$attrs.arbolx
        this.arbolY = this.$attrs.arboly
        
        this.elementos = this.$attrs.elementos
    },
    computed: {
        profundidadX: function() { 
            if (!this.arbolX || this.arbolX.length == 0) {
                return 0 
            }
            return this.arbolX.reduce( function (elem, valor) { return (elem.nProfundidad > valor.nProfundidad) ? elem : valor}).nProfundidad
        },
        profundidadY: function() { 
            if (!this.arbolY || this.arbolY.length == 0) {
                return 0
            }
            return this.arbolY.reduce( function (elem, valor) { return (elem.nProfundidad > valor.nProfundidad) ? elem : valor}).nProfundidad
        },
        longitudX: function () { 
            if (!this.arbolX || this.arbolX.length == 0) {
                return 0
            }
            return this.arbolX.reduce( function (elem, valor) { return (elem.pos > valor.pos) ? elem : valor}).posicion 
        },
        longitudY: function () { 
            if (!this.arbolY || this.arbolY.length == 0) {
                return []
            }
            return this.arbolY.reduce( function (elem, valor) { return (elem.pos > valor.pos) ? elem : valor}).posicion
        }
    },
    methods: {
        arbolProfundidad: function(i){  //Obtiene los elementos del árbol con profundidad i 
            return this.arbolX.filter((element) => element.nProfundidad == i);
        },
        arbolPosicion: function(i){  //Obtiene los elementos del árbol con profundidad i
            return this.arbolY.filter((element) => element.posicion == i);
        }
    },
    template:
            `  
            <table class="table">
                <cabecera-tabla-arbol  v-for="n in profundidadX" 
                    :key="'cabecera' +n" 
                    :arbolNivelX="arbolProfundidad(n)" 
                    :nProfundidadY="profundidadY">
                </cabecera-tabla-arbol>
                <cabecera-lateral-tabla-arbol v-for="n in longitudY" 
                    :key="'lateral'+n" 
                    :arbolNivelY="arbolPosicion(n)" 
                    :longitudX="longitudX"
                    :elementos="elementos">
                </cabecera-lateral-tabla-arbol>
            </table>
            `
});

    new Vue({
        el: '#vueIdCurso',
        components: {
            'tablaArbol': ComponenteTablaArbol
        },
        props: {},
        data: { 
            curso: {},
            listaSecuencia: [],
            listaContenido: [],
            elementos: [],
            idTitulacion: null,
            codIdioma: null,
            urlMiEcca: null,
            randomImage: null,
            numeroImagenes: 2,
            colaboradores: [],
            images: [
                "/img/foto_ges.jpg",
                "/img/foto_bachiller.jpg"
            ]
        },
        computed: {
            verModalidadByIdd: function(id) {
                var verModalidad = false
                this.curso.modalidades.forEach(mod => {
                    if (mod.id === id)
                        verModalidad = mod.mostrarModalidad
                })
                return verModalidad
            },
                
            inMatriculacion: function() {
                return this.curso.inPeriodoMatriculacion
            },
            inPreinscripcion: function() {
                return this.curso.inPeriodoPreinscripcion
            },
        },
        created () {
            this.randomImage = this.images[Math.floor((Math.random() * this.numeroImagenes))]
        },
        mounted () {
            this.idTitulacion = this.$el.attributes.idCurso.value
            this.codIdioma = this.$el.attributes.codIdioma.value
            this.urlMiEcca = this.$el.attributes.urlMiEcca.value

            //Se obtiene la edición
            var params = { params: { idEdicion: this.idTitulacion, codIdioma: this.codIdioma } }
            axios
            .get(this.$el.attributes.url.value + '/getTitulacionById', params)
            .then(
                response => {
                    this.curso = response.data
                    document.title = document.title + " " + this.curso.nombreTitulacion
                    this.generaListasArboles()
                    this.rellenaElementosModalidades()
                })
            
            //Recogemos las entidades colaboradoras de la edición
            var params = { params: { idEdicion: this.idTitulacion } }
            axios
            .get(this.$el.attributes.url.value + '/getColaboradoresEdicion', params)
            .then(
                response => {
                    this.colaboradores = response.data
                })
        },
    
        methods: {
            matriculacion: function() {
                if (this.curso.inPeriodoPreinscripcion) {
                    window.open(this.urlMiEcca + "/preinscripcion?idEdicion=" + this.idTitulacion)
                } else if (this.curso.inPeriodoMatriculacion) {
                    window.open(this.urlMiEcca + "/matriculacionEstructurado?idEdicion=" + this.idTitulacion)
                }
            },
            downloadPDF: function(idDocumento, nombreDocumento) {
                var params = {responseType:"blob", params: { idDocumento: idDocumento, idEdicion: this.curso.idTitulacion } }
                axios
                .get(this.$el.attributes.url.value + '/getDocumentoDriveByIdEdicion', params)
                .then(
                    response => {
                        const url = window.URL.createObjectURL(new Blob([response.data]));
                        const link = document.createElement('a');
                        link.href = url;
                        link.setAttribute('download', nombreDocumento);
                        document.body.appendChild(link);
                        link.click();
                    })
                .catch(error=> {
                })
            },
            rellenaElementosModalidades: function() {
                this.curso.modalidades.forEach(mod => {
                    mod.elementos = this.unidadesXY(mod.unidades)
                })
            },
            mostrarModalidad: function(id) {
                this.curso.modalidades.forEach(mod => {
                    if (mod.id === id)
                        mod.mostrarModalidad = true
                })
            },
            //Método para comprobar si se tiene que ver la modalidad con id
            verModalidadById: function(id) {
                var verModalidad = false
                this.curso.modalidades.forEach(mod => {
                    if (mod.id === id)
                        verModalidad = mod.mostrarModalidad
                })
                return verModalidad
            },
            getModalidades: function() {
                return this.curso.modalidades
            },
            unidadesXY: function (unidades) {
                unidades.map(function (unidad) {
                    if (!unidad.x)
                        unidad.x = this.listaContenido.find((elem) => elem.id === unidad.contenidoId).posicion
                    if (!unidad.y)
                        unidad.y = this.listaSecuencia.find((elem) => elem.id === unidad.secuenciaId).posicion
                }, this)
                return unidades
            },

            generaListasArboles: function () {
                let posInicial = 1
                auxProfundidad = 0
                let nProfundidad = 0
                if (!this.isTipoLibre) {
                    //Se recorre cada árbol
                    for (var i = 0, l = this.curso.arbolSecuenciaProducto.length; i < l; ++i) {
                        if (i > 0)
                            posInicial = this.curso.arbolSecuenciaProducto[i - 1].posicion + this.curso.arbolSecuenciaProducto[i - 1].nEltosUltimoNivel
                        this.curso.arbolSecuenciaProducto[i].nEltosUltimoNivel = this.recorre(this.curso.arbolSecuenciaProducto[i], nProfundidad, posInicial, true, auxProfundidad)
                    }
                    posInicial = 1
                    auxProfundidad = 0

                    for (var i = 0, l = this.curso.arbolContenidoProducto.length; i < l; ++i) {
                        if (i > 0)
                            posInicial = this.curso.arbolContenidoProducto[i - 1].posicion + this.curso.arbolContenidoProducto[i - 1].nEltosUltimoNivel
                        this.curso.arbolContenidoProducto[i].nEltosUltimoNivel = this.recorre(this.curso.arbolContenidoProducto[i], nProfundidad, posInicial, false, auxProfundidad)
                    }
                    this.listSecuencia = []
                    this.listContenido = []
                    //Se recorre cada árbol para transformarlo a lista
                    for (var i = 0, l = this.curso.arbolSecuenciaProducto.length; i < l; ++i) {
                        this.recorreToList(this.curso.arbolSecuenciaProducto[i], true)
                    }

                    for (var i = 0, l = this.curso.arbolContenidoProducto.length; i < l; ++i) {
                        this.recorreToList(this.curso.arbolContenidoProducto[i], false)
                    }
                }
            },
            hasModalidad: function() {
                return (this.curso !== undefined) && (this.curso.modalidades !== undefined) && (this.curso.modalidades.length > 0)
            },
            hasDocumentos: function() {
                return (this.curso !== undefined) && (this.curso.documentacion !== undefined) && (this.curso.documentacion.length > 0)
            },

            getArbolX: function(id) {
                return this.listaContenido
            },
            getArbolY: function(id) {
                return this.listaSecuencia
            },
            getElementos: function(id) {
                var index = this.curso.modalidades.findIndex(function (mod) {
                    return mod.id === id
                })
                if (index !== -1) {
                    return this.curso.modalidades[index].elementos
                }
            },
            recorreToList: function (elemento, secuencia) {
                var copy = (JSON.parse(JSON.stringify(elemento)))
                delete copy['hijos']
                if (secuencia){
                    this.listaSecuencia.push(copy)
                } else {
                    this.listaContenido.push(copy)
                }
                if (elemento.hijos && elemento.hijos.length > 0) {
                    for (var i = 0, l = elemento.hijos.length; i < l; ++i) {
                        this.recorreToList(elemento.hijos[i], secuencia)
                    }
                }
            },
            recorre: function (arbol, nProfundidad, pos, secuencia, auxProfundidad) {
                nProfundidad++
                arbol.nEltosUltimoNivel = 0
                arbol.nProfundidad = nProfundidad
                arbol.posicion = pos
                if (!arbol.hijos || arbol.hijos.length == 0) {
                    if (auxProfundidad == 0) { //Se asigna el nivel de profundidad de los elementos si no se ha asignado 
                        auxProfundidad = nProfundidad
                    }
                    if (secuencia)
                        this.nFilas++
                    else
                        this.nColumnas++
                    arbol.nEltosUltimoNivel = 1
                    return 1;
                }
                else {
                    for (var i = 0, l = arbol.hijos.length; i < l; ++i) {
                        var a = arbol.hijos[i]
                        var pos;
                        if (i == 0)
                            pos = arbol.posicion
                        else {
                            pos = arbol.hijos[i - 1].posicion + arbol.hijos[i - 1].nEltosUltimoNivel
                        }
                        var num = this.recorre(a, nProfundidad, pos, secuencia)
                        arbol.nEltosUltimoNivel += num
                    }
                }                
                return arbol.nEltosUltimoNivel;
            },
        },
    });

           
</script>
@stop