@extends('layout.padrao')
@section('content')
<style>
  img {
    -webkit-transform: translate3d(0,0,0);
  }
  .albumDeImagem a{
    transition: 0.4s;
  }
  .albumDeImagem a:hover{
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.382)) opacity(0.9);
  }

  .gallery .col{
    max-height: 770px;
    overflow: scroll;
  }

  .capaAlbum {
    filter: brightness(0.5) blur(2px);
  }

</style>

@include('Intranet.menu')

<div class="col col-12 margin-bottom-30 ajusteMobile">
    <div class="col margin-bottom-30">
        <h2>
          Galeria de Imagens
        </h2>
    </div>

    <div class="w-100"></div>

    <div class="col col-sm-12 col-md-12 col-lg-12">
      <div class="row albumDeImagem"></div>
      <div class="gallery"> 
    </div>
</div>


<script>
  $.ajax({
    url: '/galeriaDeImagensTable',
    type: 'get',
    cache: false,
    dataType: 'json',
    success: function (dados) {
      $.each(dados.reverse(), function (index, element) {
        $('.albumDeImagem').append(
          '<div class="col-lg-3 col-md-4 col-sm-6">' +
            '<a href="/galeriaDeImagens/album/?folder='+ element['folder'] +'&name='+ element['title'] + '&total=' + element['totalImages'] + '" class="display-flex justify-content-center align-items-center margin-bottom-30 padding-0" style="background: #000000bf; border-radius: 15px">' +
              '<div class="text-center" style="position: absolute;text-align: center;z-index: 1;justify-content: center;">' +
                '<div class="title display-flex flex-column" style="color:#fff; max-width: 85%; margin-left: 5%">'+
                  '<p style="font-size: 5rem"><i class="fas fa-images"></i></p>'+
                  '<p style="font-size: 2rem"> '+ element['title'] + '</p>' +
                '</div>'+
              '</div>'+
              '<div class="capaAlbum">'+
                '<img src="{!! asset("/image/eventos/'+ element['folder'] +'/1.jpg") !!}" width="100%" height="130px" style="border-radius: 15px 0 0;">' +
                '<img src="{!! asset("/image/eventos/'+ element['folder'] +'/2.jpg") !!}" width="100%" height="130px" style="border-radius: 0 0 0 15px;">' +
              '</div>'+
              '<div class="capaAlbum">'+
                '<img src="{!! asset("/image/eventos/'+ element['folder'] +'/3.jpg") !!}" width="100%" height="130px" style="border-radius: 0 15px 0 0;">' +
                '<img src="{!! asset("/image/eventos/'+ element['folder'] +'/4.jpg") !!}" width="100%" height="130px" style="border-radius: 0 0 15px 0;">' +
              '</div>'+
            '</a>'+
          '</div>'   
        );
      }); 
    },
    error: function (dados) {
      console.log(dados);
      console.log('error');
    }
  });
</script>
@include('Intranet.style')
@endSection