@extends('layout.padrao')
@section('content')

<style>
  img {
    -webkit-transform: translate3d(0, 0, 0);
  }

  .imgEvent {
    border-radius: 7% !important;
    max-height: 200px !important;
    margin: 8px;
  }

  .albumTitle{
    margin-top: -9px;
    margin-left: 0px;
  }

</style>

@include('Intranet.menu')
<div class="col col-12 margin-bottom-30 display-flex justify-content-center flex-column ajusteMobile" style="min-height:400px">
  <div class="display-flex align-items-center margin-bottom-30" style="margin-left: 2%">
    <a href="/galeriaDeImagens">
      <button type="reset" class="btn btn-padrao"> 
        <i class="fas fa-arrow-left"></i> Voltar 
      </button>
    </a>
    <div class="row col albumTitle"></div>
  </div>
  
  <div class="w-100"></div>
  <div class="col col-sm-12 col-md-12 col-lg-12 display-flex justify-content-center">
    <div class="row col galeriaDeImagensCarousel"></div>
  </div>
</div>

@include('bibliotecas.slickCarousel')
@include('bibliotecas.slickLightbox')
<script>
  queryStringVessel = window.location.search;

  let folder = getParameterByName('folder');
  let albumName = getParameterByName('name');
  let totalImages = getParameterByName('total');
  let imgGalleryItems = $('.galeriaDeImagensCarousel');
  let maxImages = Math.round(imgGalleryItems.parent('div').width() / 351);

  function getParameterByName(name, url = window.location.search) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
  }

  $('.albumTitle').append(
    '<h2> Álbum: ' + albumName + '</h2>'
  );

  for (let i = 1; i <= totalImages; i++) {
    imgGalleryItems.append(
      '<div class="team-image">'+
      '<img src="{!! asset("/image/eventos/' + folder + '/' + i +
      '.jpg") !!}" class="col imgEvent" width="100%" style="margin-left: 0px !important">'+
      '</div>'
    );
  }

  imgGalleryItems.slick({
    infinite: true,
    slidesToShow: maxImages,
    slidesToScroll: 1,
    rows: 3,
    autoplay: true,
    autoplaySpeed: 5000,
  });

  imgGalleryItems.slickLightbox({
    src: 'src',
    itemSelector: '.team-image img',
    slick: {
    itemSelector: 'a',
    navigateByKeyboard: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 4000,
    }
  });
</script>

@include('Intranet.style')
@endSection