@extends('layout.base')

@section('page_content')
  <div id="galeria">
    <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" id="thumbs">
            @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}}/galeria.css" />
@endpush

@push('readyjs')
  let media = [
    @foreach ($imagenes as $media)
      '{!!$media->media->html!!}',
    @endforeach
  ]
  let thumbs = $('#thumbs .image img')
  thumbs.each((i, el) => {
    let src = $(el).attr('src')
    if (src == '#') {
      return
    }
    let w = el.width
    let h = el.height
    let parent = $(el).parent()
    let r = w / h
    if (r > 1) {
      $(el).height(parent.height())
      $(el).width(parent.height() * r)
    } else {
      $(el).width(parent.width())
      $(el).height(parent.width() / r)
    }
  })
  $('.imagen').css('cursor', 'pointer').click(function() {
    var id = $(this).attr('data-id')
    var src = media[id]
    $('#seleccionada').html(src)
    if (src.indexOf('<img') < 0) {
      $('#seleccionada').removeClass('image').addClass('embed')
      $('#seleccionada').find('video').width($('#seleccionada').width())
    } else {
      $('#seleccionada').removeClass('embed').addClass('image')
    }
  })
@endpush