@extends('layout.base')

@section('page_content')
  <div id="evento">
    <div class="ui container">
      <div class="ui two columns stackable grid">
        <div class="column">
          <div class="ui image" id="seleccionada">
            @if ($imagenes !== false)
              {!!array_values($imagenes)[0]->media->html!!}
            @else
              Imagen no encontrada.
            @endif
          </div>
        </div>
        <div class="column">
          <h2 class="ui header">
            <strong>
              {{mb_strtoupper($evento->titulo)}}
            </strong>
            {{$evento->empresa}}
            <div class="sub header">
              <i>
                {{ucwords($evento->servicio)}}
              </i>
            </div>
          </h2>
          <p>
            {{$evento->descripcion}}
          </p>
          <div class="ui four column grid">
            @if ($imagenes !== false)
              @foreach (array_values($imagenes) as $i => $imagen)
                <div class="column">
                  <div class="ui image imagen" data-id="{{$i}}">
                    {!!$imagen->thumb->html!!}
                  </div>
                </div>
              @endforeach
            @else
              <div class="column">
                No hay imagenes.
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/evento.css" />
@endpush

@push('readyjs')
  let media = [
    @foreach ($imagenes as $media)
      '{!!$media->media->html!!}',
    @endforeach
  ]
  $('.imagen').css('cursor', 'pointer').click(function() {
    var id = $(this).attr('data-id')
    var src = media[id]
    $('#seleccionada').html(src)
  })
@endpush