@extends('layout.padrao')
@section('title', 'Intranet')
@section('content')

@include('Intranet.menu')

<div class="row">
    <div class="w-100"></div>
    <div class="col-sm-3 larguraColuna">
        <div class="text-center">
            <div class="titleComunicados">Comunicados</div> 
        </div>
        <div class="bloco bg-white separaBlocos comunicadosArea">
                <!-- Delimitando área de comunicados com um wrapper -->
            <div class="wrapperComunicado">
                <!-- Modelo de comunicado -->
                <!-- <div class="blocoComunicado"> -->
                    <div class="row">
                        <!-- <div class="col">
                            <div class="imgComunicado">
                                <img src="{!! asset('/image/nologo.png') !!}" class="imgEvent">   
                            </div>
                        </div>
                        <div class="col">
                            <div class="textoComunicado">
                                <div class="titulo">
                                    <p>Título do Comunicado</p>
                                </div>
                                <div class="descricao">
                                    <p>Área de descrição do comunicado. Exercitation sit nostrud commodo minim. Aliqua ad commodo dolor proident.</p>
                                </div>
                            </div>
                        </div> -->
                        <div class="col chartArea">
                            <p>Em breve</p> 
                        </div>
                    </div>
                <!-- </div> -->
            </div>
            
        </div>
        @if(Auth::user()->checkCharacteristics(['1', '2', '3', '4']))
            <style>
                .comunicadosArea {
                    height: 426px !important;
                }
            </style>

            <div class="row">
                <div class="col-6 middleBloco separaBlocos">
                    <a href="/wallpapers">
                        <div class="bloco bg-white">
                            <img src="{!! asset('/image/icons/maki_art-gallery.svg') !!}" class="icon">
                            <p class="titleBloco margin-top-15"> Wallpapers </p>
                        </div>
                    </a>
                </div>
                <div class="col-6 middleBloco separaBlocos">
                    <a href="/contratacao" class="text-white">
                        <div class="bloco bg-blue">
                            <img src="{!! asset('/image/icons/ls_bag.svg') !!}" class="icon">
                            <p class="titleBloco margin-top-15">Processos de Contratação e Demissão</p>
                        </div>
                    </a>
                </div>
            </div>
        @else
            <style>
                .comunicadosArea {
                    height: 670px !important;
                }
            </style>
        @endif
    </div>

    @if(Auth::user()->checkCharacteristics(['1', '2', '3', '4']))
        <div class="col-sm-3 larguraColuna">
            <div class="row">
                <div class="col-6 middleBloco separaBlocos">
                    <a href="/cards">
                        <div class="bloco bg-white display-flex align-items-center place-content-center">
                            <div class="display-flex align-items-center flex-direction-column">
                                <img src="{!! asset('/image/icons/clarity_update-line.svg') !!}" class="display-flex justify-content-center align-items-center" style="width: 50%">
                                <p class="margin-top-15 text-center"> 
                                    <b>Solicitação de Melhorias do Sistema</b>
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 middleBloco separaBlocos">
                    @if(Auth::user()->checkCharacteristics(['1', '2', '3', '4']))
                        <a href="/procedimentosOperacionais">
                            <div class="bloco bg-white">
                                <img src="{!! asset('/image/icons/testFail.svg') !!}" class="icon filter-blue">
                                <p class="margin-top-15">
                                    <b>Procedimentos </br> Operacionais</b>
                                </p>
                            </div>
                        </a>
                    @else
                        <a href="/procedimentosOperacionais">
                            <div class="bloco bg-white">
                                <img src="{!! asset('/image/icons/testFail.svg') !!}" class="icon filter-blue">
                                <p class="margin-top-15">
                                    <b>Procedimentos </br> Operacionais</b>
                                </p>
                            </div>
                        </a>
                    @endif
                </div>
                <div class="w-100"></div>
                <div class="col-6 middleBloco separaBlocos emBreve">
                    <a href="#">
                        <div class="bloco bg-white">
                            <img src="{!! asset('/image/icons/si-glyph_money-coin.svg') !!}" class="icon">
                            <p class="margin-top-15">
                                <b>Em Breve</b> 
                                </br> 
                                Solicitação de Reembolso
                            </p>
                            <!-- <p class="titleBloco"> Solicitação de Reembolso </p> -->
                        </div>
                    </a>
                </div>
                <div class="col-6 middleBloco separaBlocos">
                    <div class="bloco bg-white grupoBotoes display-flex align-items-center flex-direction-column justify-content-center">
                        <a class="btnLink" href="/politicasDaEmpresa">
                            <div class="btn-group btn-group-mini col margin-top-4" role="group" aria-label="Button group">
                                <button type="button" class="btn btn-secondary btnHeight" data-toggle="tooltip" data-placement="top" title="Políticas da Empresa">
                                    <i class="fas fa-file-alt" style="font-size:30px"></i>
                                </button>
                                <button type="button" class="btn btn-blue btnHeight btnWidth">Políticas da </br> Empresa</button>
                            </div>
                            <p class="margin-top-10 legendaText text-center">
                                <b>Políticas da Empresa</b>
                            </p>
                        </a>

                        <div class="w-100 margin-top-15"></div>
                        <a class="btnLink" href="/resolucaoDeProblemas">
                            <div class="btn-group btn-group-mini col" role="group" aria-label="Button group">
                                <button type="button" class="btn btn-secondary btnHeight" data-toggle="tooltip" data-placement="top" title="Resolução de Problemas">
                                    <i class="fas fa-exclamation-circle" style="font-size:30px"></i>
                                </button>
                                <button type="button" class="btn btn-blue btnHeight btnWidth">Resolução de </br> Problemas</button>
                            </div>
                            <p class="margin-top-10 legendaText text-center">
                                <b>Resolução de Problemas</b>
                            </p>
                        </a>

                    </div>
                </div>
                @if(Auth::user()->checkCharacteristics(['1', '2', '4', '8']))
                    <!-- Somente Coordenadores e Gerentes têm acesso -->
                    <div class="w-100"></div>
                    <div class="col separaBlocos">
                        <div class="bloco bg-white grupoBotoes">
                            <a href="/colaboradores">
                                <div class="btn-group col margin-top-4" role="group" aria-label="Button group">
                                    <button type="button" class="btn btn-secondary btnHeight" data-toggle="tooltip" data-placement="top" title="Colaboradores CSA">
                                        <img src="{!! asset('/image/icons/fluent_people-32-filled.svg') !!}">
                                    </button>
                                    <button type="button" class="btn btn-blue btnHeight btnWidth">Colaboradores CSA</button>
                                </div>
                            </a>

                            <div class="w-100 margin-top-15"></div>
                            <a href="/armadores">
                                <div class="btn-group col" role="group" aria-label="Button group">
                                    <button type="button" class="btn btn-secondary btnHeight" data-toggle="tooltip" data-placement="top" title="Armadores">
                                        <img src="{!! asset('/image/icons/fluent_people-audience-24-filled.svg') !!}">
                                    </button>
                                    <button type="button" class="btn btn-blue btnHeight btnWidth">Armadores</button>
                                </div>
                            </a>

                            <div class="w-100 margin-top-15"></div>
                            <a href="/listaDePesagem">
                                <div class="btn-group col" role="group" aria-label="Button group">
                                    <button type="button" class="btn btn-secondary btnHeight" data-toggle="tooltip" data-placement="top" title="Lista de Pesagem">
                                        <img src="{!! asset('/image/icons/octicon_container-16.svg') !!}">
                                    </button>
                                    <button type="button" class="btn btn-blue btnHeight btnWidth">Lista de Pesagem</button>
                                </div>
                            </a>

                        </div>
                    </div>
                @else
                    <!-- Usuários em geral têm acesso -->
                    <style>
                        .btnHeight{
                            font-size: 1.2rem;
                        }
                        @media (min-width: 1340px) and (max-width: 2507px){
                            .btnHeight.simple2 {
                                display: none !important;
                            }

                            .btnHeight.simple1 {
                                display: block !important;
                            }

                            .simple1{
                                border-radius: 4px !important;
                            }
                        }
                    </style>

                    <div class="w-100"></div>
                    <div class="col-6 middleBloco separaBlocos">
                        <a href="/wallpapers">
                            <div class="bloco bg-white">
                                <img src="{!! asset('/image/icons/maki_art-gallery.svg') !!}" class="icon">
                                <p class="titleBloco margin-top-15"> Wallpapers </p>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 middleBloco separaBlocos">
                        <div class="bloco bg-white grupoBotoes">
                            <a href="/colaboradores">
                                <div class="btn-group col margin-top-4" role="group" aria-label="Button group">
                                    <button type="button" class="btn btn-secondary btnHeight simple1" data-toggle="tooltip" data-placement="top" title="Colaboradores CSA">
                                        <img src="{!! asset('/image/icons/fluent_people-32-filled.svg') !!}">
                                    </button>
                                    <button type="button" class="btn btn-blue btnHeight btnWidth simple2">Colaboradores CSA</button>
                                </div>
                            </a>

                            <div class="w-100 margin-top-15"></div>

                            <a href="/armadores">
                                <div class="btn-group col" role="group" aria-label="Button group">
                                    <button type="button" class="btn btn-secondary btnHeight simple1" data-toggle="tooltip" data-placement="top" title="Armadores">
                                        <img src="{!! asset('/image/icons/fluent_people-audience-24-filled.svg') !!}">
                                    </button>
                                    <button type="button" class="btn btn-blue btnHeight btnWidth simple2">Armadores</button>
                                </div>
                            </a>

                            <div class="w-100 margin-top-15"></div>

                            <a href="/listaDePesagem">
                                <div class="btn-group col" role="group" aria-label="Button group">
                                    <button type="button" class="btn btn-secondary btnHeight simple1" data-toggle="tooltip" data-placement="top" title="Lista de Pesagem">
                                        <img src="{!! asset('/image/icons/octicon_container-16.svg') !!}">
                                    </button>
                                    <button type="button" class="btn btn-blue btnHeight btnWidth simple2">Lista de Pesagem</button>
                                </div>
                            </a>

                        </div>
                    </div>
                @endif
            </div>
        </div>
    @endif
    @if(Auth::user()->checkCharacteristics(['1', '2', '3', '4']))
    <div class="col-sm-6 larguraColuna">
    @else
    <div class="col-sm-9 larguraColuna">
    @endif
        <div class="row">
            <div class="col-12 separaBlocos">
                <div class="bloco bg-white galeria">
                    <p>
                      Galeria de Imagens -
                      <span class="badge badge-light badgeTitle"></span>
                      <a href="/galeriaDeImagens">
                        <button class="btn btn-blue margin-left-5">
                          Mais imagens
                        </button>
                      </a>
                    </p>
                    <div class="gallery display-flex justify-content-center">
                      <div class="row col justify-content-center">
                        <div class="row col objGaleria"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="w-100"></div>
            <div class="col-12 separaBlocos emBreve">
                <div class="bloco bg-white organograma">
                    <div class="chartArea">
                        <p>Em breve</p> 
                        <p>Organograma</p> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
  .col-1 {
      flex: 0 0 4.3%;
      max-width: 4.3%;
  }

  .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: -30px;
        z-index: 99;
      }
  
  img {
    -webkit-transform: translate3d(0, 0, 0);
  }
  .imgEvent{
    height: 124px;
    width: 94%;
    margin-bottom: 10px;
  }
</style>

@include('bibliotecas.slickCarousel')
@include('bibliotecas.slickLightbox')
<script>
    let imgFolder, titleFolder;

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    }) 

    $.ajax({
      type: "GET",
      url: '/galeriaDeImagensTable',
      datatype: "json",
      async: false,
      success: function (data) {
        let lastAlbum = data.pop();
        imgFolder = lastAlbum.folder;
        titleFolder = lastAlbum.title;
      }
    });
    
    $('.badgeTitle').append(titleFolder);
    
    for (let i = 1; i <= 12; i++) {
      $('.objGaleria').append(
        '<div class="team-image">' +
          '<img src="{!! asset("/image/eventos/' + imgFolder + '/' + i +
          '.jpg") !!}" class="imgEvent">' +
        '</div>'
      )
    }
    
    $('.objGaleria').slick({
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      rows: 2,
      autoplay: true,
      autoplaySpeed: 5000,
    });

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

    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })


    // function showMenuIntranet(){
    //     // var menu = $('#navbarIntranetContent');
    //     var menu = document.getElementById("navbarIntranetContent")

    //     console.log(menu);

    //     if(menu.style.display == "none"){
    //         menu.style.display = "block";
    //     } else{
    //         menu.style.display = "none";
    //     }
    // }
</script>
@include('Intranet.style')
@endSection