<div id="galeria">
  @if (count($producto->imagenes()))
    <div class="ui image" data-id="0">
      <img src="{{$urls->images}}/{{mb_strtolower($producto->nombre)}}/{{$producto->imagen()}}" />
    </div>
    <div class="ui grid" id="thumbnails">
      @foreach ($producto->imagenes() as $i => $image)
        @if ($i == 0)
          @continue
        @endif
        <div class="three wide column">
          <div class="ui image" data-id="{{$i}}">
            <img src="{{$urls->images}}/{{mb_strtolower($producto->nombre)}}/{{$image}}" />
          </div>
        </div>
      @endforeach
    </div>
  @endif
</div>

@push('scripts')
  <script type="text/javascript">
    var galeria = {
      images: [
        @foreach ($producto->imagenes() as $image)
          '{{$urls->images}}/{{mb_strtolower($producto->nombre)}}/{{$image}}',
        @endforeach
      ],
      populateThumbs: (current) => {
        var thumbs = $('#thumbnails')
        thumbs.html('')
        $.each(galeria.images, (i, el) => {
          if (i == current) {
            return
          }
          thumbs.append(
            $('<div></div>').attr('class', 'three wide column').append(
              $('<div></div>').attr('class', 'ui image').attr('data-id', i).append(
                $('<img />').attr('src', el)
              )
            )
          )
        })
        $('#galeria').find('.grid .image').click(function(e) {
          var id = $(this).attr('data-id')
          galeria.changeImage(id)
        })
      },
      changeImage: (id) => {
        var big = $('#galeria>.image')
        big.find('img').attr('src', images[id])
        big.attr('data-id', id)
        galeria.populateThumbs(id)
      },
      setup: () => {
        $('#galeria').find('.grid .image').click(function(e) {
          var id = $(this).attr('data-id')
          galeria.changeImage(id)
        })
      }
    }
    $(document).ready(() => {
      galeria.setup()
    })
  </script>
@endpush
