@extends('layouts.base')

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

@section('title')
Detalle de proyecto - {{ $nombre }}
@stop
@section('description')
Detalles de los proyectos en los que colabora Radio ECCA.
@stop

@section('content')
{!! Breadcrumbs::render('social-action-detail-project', $nombre) !!}
<div class="container">
   <div class="titulo_categoria">
      <span>Acción Social</span>
      <div class="subtitulo_categoria">
         Detalles del proyecto
      </div>
   </div>
   <div id="accionSocialDetalle" idioma={{$codIdioma}} url={{$url}} urlMiEcca={{$urlMiEcca}} idEdicion={{$id}} class="row">
      <div class="detalle_proyecto">
         <div class="row">
            <div class="col-md-8">
               <div class="titulo col-md-12">
                  @{{proyecto.nombre}}
               </div>

               <div class="row">
                  <div class="proyecto_wrapper col-md-12">
                     <div class="titulo_proyecto">Descripción</div>
                     <p v-html="proyecto.descripcion" class="text-justify"></p>
                  </div>
               </div>
               <div v-if="proyecto.resultados" class="row">                 
                  <div class="proyecto_wrapper col-md-12">
                     <div class="titulo_proyecto">Resultados</div>
                     <p v-html="proyecto.resultados" class="text-justify"></p>
                  </div>
               </div>
               
               <div class="row important col-md-8">
                  <div v-if="hasMatriculacion" style="float:right" class="col-md-6 wrapper-important">
                      <a href="#" v-on:click="matriculacion()">
                          Matriculación
                      </a>
                  </div>

                  <div v-else-if="hasInscripcion" style="float:right" class="col-md-6 wrapper-important">
                      <a href="#" v-on:click="matriculacion()">
                          Preinscripción
                      </a>
                  </div>
              </div>
            </div>
            <div class="col-md-4">
               <div class="wrapper_proyecto_caracteristicas well">
                  <div class="titulo_proyecto_caracteristicas">Año</div>
                  <div style="font-size: 30px; margin-top: -20px; color: #555555">@{{ proyecto.yearString }}</div>
               </div>
               <div class="wrapper_proyecto_caracteristicas well">
                  <div class="titulo_proyecto_caracteristicas">Etiquetas</div>
                  <!-- Código de etiquetas -->
                  <div v-for="et in proyecto.etiquetas" :key="et.id">
                     <div>@{{et}}</div>                     
                  </div>
               </div>
               <div v-if="proyecto.objetivoGeneral" class="wrapper_proyecto_caracteristicas well">
                  <div class="titulo_proyecto_caracteristicas">Objetivo general</div>
                  <p v-html="proyecto.objetivoGeneral" class="text-justify"></p>
               </div>
               <div v-if="proyecto.objetivoEspecifico" class="wrapper_proyecto_caracteristicas well">
                  <div class="titulo_proyecto_caracteristicas">Objetivo específico</div>
                  <p v-html="proyecto.objetivoEspecifico" class="text-justify"></p>
               </div>

               <div v-if="proyecto.colaboradores && proyecto.colaboradores.length > 0" class="wrapper_proyecto_caracteristicas well">
                  <div class="titulo_proyecto_caracteristicas">Financiadores
                  </div>                  
                  <div v-for="colab in proyecto.colaboradores" :key="colab.id">
                     <div>@{{colab.nombre}}</div>
                     <div v-if="hasImagen64(colab)" style="width: 70%; margin-top: 5px;" class="funder_img">
                        <img
                           class="img-responsive"
                           v-bind:src="'data:image/jpeg;base64,'+colab.imagen64"
                           style="height: 100%; max-height: 120px; width: 100%; object-fit: contain;"
                        />
                     </div>
                  </div>
               </div>               
            </div>
         </div>         
      </div>
   </div>
</div>

<div class="spacer"></div>
<!-- /.row -->

<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: '#accionSocialDetalle',

        
        data: { 
            codIdioma: null,
            proyecto: {},
            urlMiEcca: null
        },

        computed: {
           hasMatriculacion: function() {
              return this.proyecto.inPeriodoMatriculacion
           },
           hasInscripcion: function() {
              return this.proyecto.inPeriodoPreinscripcion
           }
                      
        },
        mounted () {
            this.codIdioma = this.$el.attributes.idioma.value
            this.idEdicion = this.$el.attributes.idEdicion.value
            this.urlMiEcca = this.$el.attributes.urlMiEcca.value
            var params = { params: { idEdicion: this.idEdicion, codIdioma: this.codIdioma } } 
           axios
            .get(this.$el.attributes.url.value + '/getAccionSocialWebPublicaById', params)
            .then(
                response => {
                    this.proyecto = response.data 
                    let yearString = ""
                    this.proyecto.years.forEach(y => {                       
                        yearString += y + " "
                     })
                     this.$set(this.proyecto, 'yearString', yearString)                 
                })            
            
        },
    
        methods: {
            hasImagen64 : function(colab) {
               return (colab.imagen64 != null)                
            },
            matriculacion: function() {
                if (this.hasMatriculacion) {
                    window.open(this.urlMiEcca + "/matriculacion?idEdicion=" + this.idEdicion)
                } else if (this.hasInscripcion) {
                    window.open(this.urlMiEcca + "/preinscripcion?idEdicion=" + this.idEdicion)
                }
            },
        },
        

    });

           
</script>

@stop

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