@extends('layouts.base')

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

@section('title')
{{Lang::get('socialAction.detailProject.detalle de proyecto')}} - {{ $nombre }}
@stop
@section('description')
   {{Lang::get('socialAction.detailProject.detalles de los proyectos')}}
@stop

@section('content')
{!! Breadcrumbs::render('social-action-detail-project', $nombre) !!}
<div class="container">
   <div class="titulo_categoria">
      <span>{{Lang::get('socialAction.detailProject.accion social')}}</span>
      <div class="subtitulo_categoria">
         {{Lang::get('socialAction.detailProject.detalles del proyecto')}}
      </div>
   </div>
   <div id="accionSocialDetalle" idioma={{$codIdioma}} url={{$url}} 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">{{Lang::get('socialAction.detailProject.descripcion')}}</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">{{Lang::get('socialAction.detailProject.resultados')}}</div>
                     <p v-html="proyecto.resultados" class="text-justify"></p>
                  </div>
               </div>
            </div>
            <div class="col-md-4">
               <div class="wrapper_proyecto_caracteristicas well">
                  <div class="titulo_proyecto_caracteristicas">{{Lang::get('socialAction.detailProject.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">{{Lang::get('socialAction.detailProject.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">{{Lang::get('socialAction.detailProject.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">{{Lang::get('socialAction.detailProject.objetivo especifico')}}</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">{{Lang::get('socialAction.detailProject.financiadores')}}
                  </div>                  
                  <div v-for="colab in proyecto.colaboradores" :key="colab.id">
                     <div>@{{colab.nombre}}</div>
                     <div v-if="hasImagen64(colab)" style class="funder_img">
                        <img
                           class="img-responsive"
                           v-bind:src="'data:image/jpeg;base64,'+colab.imagen64"
                           style="max-width: 35%;"
                        />
                     </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: {},
        },

        computed: {
                      
        },
        mounted () {
            this.codIdioma = this.$el.attributes.idioma.value
            this.idEdicion = this.$el.attributes.idEdicion.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 
                    console.log(JSON.stringify(this.proyecto)) 
                    let yearString = ""
                    this.proyecto.years.forEach(y => {                       
                        yearString += y + " "
                     })
                     this.$set(this.proyecto, 'yearString', yearString)                 
                })            
            
        },
    
        methods: {
            hasImagen64 : function(colab) {
               return (colab.imagen64 != null)                
            }
        },
        

    });

           
</script>

@stop

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