@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('scripts')
  <script type="text/javascript">
    var media = [
      @foreach ($imagenes as $media)
        '{!!$media->media->html!!}',
      @endforeach
    ]
    $(document).ready(function() {
      $('.imagen').css('cursor', 'pointer').click(function() {
        var id = $(this).attr('data-id')
        var src = media[id]
        $('#seleccionada').html(src)
      })
    })
  </script>
@endpush