@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">
            <img src="{{$imagenes[0]}}" id="seleccionada" />
          </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">
            @foreach ($imagenes as $imagen)
              <div class="column">
                <div class="ui image" class="imagen">
                  <img src="{{$imagen}}" class="imagen" />
                </div>
              </div>
            @endforeach
          </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">
    $(document).ready(function() {
      $('.imagen').css('cursor', 'pointer').click(function() {
        var src = $(this).attr('src')
        $('#seleccionada').attr('src', src)
      })
    })
  </script>
@endpush