@extends('layouts.base')

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

@section('title')
Estudiar Aula Abierta
@stop

@section('content')
{!! Breadcrumbs::render('study-aula-abierta', $nombre) !!}
<div class="container" id="vueIdCursoLibre" idCurso={{$id}} codIdioma={{$codIdioma}} url="{{$url}}" urlMiEcca={{$urlMiEcca}}>
    <hr>
    <div v-if="curso.imagenPortadaAccion" style="display: flex; justify-content: space-around; padding-top: 150px;">
        <div style="margin: 0 3rem 0 0 !important;width:201px; height:282px">
            <img style="max-height:100%"
                v-bind:src="'data:image/jpeg;base64,'+curso.imagenPortadaAccion"
            />
        </div>
        <div class="titulo_categoria" style="padding-top: 5rem;">
            <span v-html="curso.nombreTitulacion"></span>
            <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>
    </div>
    <div v-if="!curso.imagenPortadaAccion" class="titulo_categoria">
        <span v-html="curso.nombreTitulacion"></span>
    </div>
    <hr>
    <!-- Pestañas -->
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#introduccion">Introducción</a></li>
        <li><a data-toggle="tab" href="#edicion">Edición</a></li>
        <li v-if="curso && curso.requisitos"><a data-toggle="tab" href="#requisitos">Requisitos</a></li>
        <li><a data-toggle="tab" href="#objetivos">Objetivos</a></li>
        <li><a data-toggle="tab" href="#contenido">Programa de contenidos</a></li>
    </ul>
    <!-- Contenido de las pestañas -->
    <div class="tab-content">
        <div id="introduccion" class="tab-pane fade in active">
        <!-- Introducción -->
        <div class="row">
                <div class="col-md-12">
                    <div v-html ="curso.introduccion"></div>
                </div>
            </div>
        </div>
        <!-- Edición -->
        <div id="edicion" class="tab-pane fade">            
            <div class="row">
                <div class="col-md-12">
                    <h4>Datos generales de la edición</h4>
                    <span v-if="curso.entidadReconocimiento"><u>Reconoce</u>: @{{curso.entidadReconocimiento}}<br/></span>
                    <span v-if="curso.fechaInicioMatriculacion && curso.fechaFinMatriculacion"><u>Fechas de matriculación</u>: @{{curso.fechaInicioMatriculacion}} - @{{curso.fechaFinMatriculacion}}<br/></span>
                    <!--<span v-if="curso.fechaInicioImparticion && curso.fechaFinImparticion"><u>Fechas de impartición</u>: @{{curso.fechaInicioImparticion}} - @{{curso.fechaFinImparticion}}<br/></span>-->
                    <span v-if="curso.nDiasMargenRealizacion"><u>Número de días para la realización del curso</u>: @{{curso.nDiasMargenRealizacion}} días<br/></span>
                    <span v-if="curso.horasCertificadas"><u>Horas certificadas</u>: @{{parseFloat(curso.horasCertificadas)}} horas<br/></span>
                    <span v-if="getPrecio"><u>Precio</u>: @{{getPrecio}}€</span>
                </div>
            </div>
        </div>
        <!-- Requisitos -->
        <div v-if="curso && curso.requisitos" id="requisitos" class="tab-pane fade">
            <div class="row">
                <div class="col-md-12">
                    <div v-html ="curso.requisitos"></div>
                </div>
            </div>
        </div>
        <!-- Objetivos -->
        <div id="objetivos" class="tab-pane fade">            
            <div class="row">
                <div class="col-md-12">
                    <div v-html ="curso.objetivos"></div>
                </div>
            </div>
        </div>
        <!-- Programa de contenidos -->
        <div id="contenido" class="tab-pane fade">
            <div class="row">
                <div class="col-md-12">
                    <div v-html ="curso.contenido"></div>
                </div>
            </div>
            <br>
        </div>
    </div>
    <div v-if="!curso.imagenPortadaAccion" 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>
    <hr>
    <br>
</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">

    new Vue({
        el: '#vueIdCursoLibre',
        props: {
            
        },
        data: { 
            curso: {},
            idTitulacion: null,
            codIdioma: null,
            urlMiEcca: null,
            //colaboradores: []
        },
        computed: {
            getPrecio: function() {
                let precio = null;
                if (this.curso && this.curso.centroPrecios && this.curso.centroPrecios.length == 1) {
                    if (this.curso.centroPrecios[0].centro.nombre === "Centro Virtual ECCA") {
                        precio = this.curso.centroPrecios[0].precio.precio;
                    }
                }
                return precio;
            }
        },
        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
                })
        },
        methods: {
            matriculacion: function() {
                if (this.curso.inPeriodoPreinscripcion) {
                    window.open(this.urlMiEcca + "/preinscripcion?idEdicion=" + this.idTitulacion)
                } else if (this.curso.inPeriodoMatriculacion) {
                    window.open(this.urlMiEcca + "/matriculacion?idEdicion=" + this.idTitulacion)
                }
            }
        },
    });

           
</script>
@stop