@extends('layouts.public')

@section('content')
<div class="container">
<!--Conteúdo-->
<h1 class="titulo-padrao">Colaboradores</h1>
<ul class="nav nav-tabs tab-ramais">
  <li class="nav-item">
    <a class="nav-link active" id="button-colaboradores" href="#colaboradores" onclick="colaboradores();">Colaboradores</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="button-ambientes" href="#ambientes" onclick="ambientes();">Ambientes</a>
  </li>
</ul>
</div>
<section id="colaboradores">
    <div class="container">
        <div class="box-colaboradores">
            <!--h1 class="titulo-padrao">Colaboradores</h1-->
            <div class="galeria">
                <div class="pesquisa input-group mb-3">
                    <input id="search" type="text" class="form-control topo__pesquisa" placeholder="Pesquisar ramal colaborador" aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button id="pesquisa" class="btn btn-outline-secondary" type="button">
                            <svg class="svg-lupa-dims">
                                <use xlink:href="{{ asset('svg/site/sprite-svg/sprite.svg#lupa') }}"></use>
                            </svg>
                        </button>
                    </div>
                </div>
                <div id="box-galeria" class="box-galeria">
                    @include('site.pesquisa._colaboradores')
                </div>
                <a id="verMais" style="margin-top: 35px; max-width: 400px; margin: auto;" class="btn-ver-todos text-center mt-3" >Ver mais</a>
                <div style="align-items: center; justify-content: space-around; display: flex;">
                    <img id="loading" width="200px" height="200px" src="{{asset('images/icones/loading.gif')}}" style="display:none;">
                </div>
            </div>
        </div>
    </div>
</section>
<section id="ramais-ambientes">
    <div class="container">
        <div style="padding-bottom:1%; padding-top:3%;"-->
            <form class="form-inline justify-content-left">
                <input id="search-ambientes" type="text" class="topo__pesquisa form-control " placeholder="Pesquisar ramal Ambiente" aria-label="search ambientes" aria-describedby="ambientes">
                <button class="btn btn-outline-secondary" id="pesquisa-ambientes" type="button">
                  <svg class="svg-lupa-dims">
                      <use xlink:href="{{ asset('svg/site/sprite-svg/sprite.svg#lupa') }}"></use>
                  </svg>
                </button>
            </form>
        </div>
        <div id="ambientes" class="row"  style="padding-left:1.5%; padding-bottom:1.5%">
           @include('site.pesquisa._ramais-ambientes')
        </div>
        <div style="padding-bottom:1.5%">
            <a id="verMaisAmbientes" style="margin-top: 35px; max-width: 400px; margin: auto;" class="btn-ver-todos text-center mt-3" >Ver mais</a>
            <div style="align-items: center; justify-content: space-around; display: flex;">
                <img id="loading" width="200px" height="200px" src="{{asset('images/icones/loading.gif')}}" style="display:none;">
            </div>
        </div>
    </div>
</section>
<!--Fim Conteúdo-->

@endsection

@push('scripts')
<script>

   colaboradores();
    var skipe = 0;
        //Filtro da pesquisa de colaboradores obtem o que foi digitado e em seguida apertado ENTER
        $('#search').keypress(function(e) {
            skipe = 0;
            if(e.which == 13) {
                chamarAtualizar();
            }
        });

          //Filtro da pesquisa de ambientes obtem o que foi digitado e em seguida apertado ENTER
        $('#search-ambientes').keypress(function(e) {
            skipe = 0;
            if(e.which == 13) {
                chamarAtualizarAmbiente();
            }
        });

        //Filtro da pesquisa de colaboradores obtem o que foi digitado e em seguida apertado o submit
        $('#pesquisa').on('click', function(e) {
            skipe = 0;
            e.preventDefault();
            chamarAtualizar();
        });

        //Filtro da pesquisa de ambientes obtem o que foi digitado e em seguida apertado o submit
        $('#pesquisa-ambientes').on('click', function(e) {
            skipe = 0;
            e.preventDefault();
            chamarAtualizarAmbiente();

        });

        //Botão veja mais da tela de colaboradores que atualiza a listagem de acordo com os novos resultados
        $('#verMais').on('click', function(e) {
            skipe = skipe+15;
            chamarAtualizar(true);
        });

        //Botão veja mais da tela de ambientes que atualiza a listagem de acordo com os novos resultados
        $('#verMaisAmbientes').on('click', function(e) {
            skipe = skipe+15;
            chamarAtualizarAmbiente(true);
        });

        //Função responsável por chamar a pesquisa AJAX da tela de colaboradores
        function chamarAtualizar(append = false)
        {
            var filter = $('#search').val();

            atualizar(skipe, filter, append);
        }

        //Função responsável por chamar a pesquisa AJAX da tela de ambientes
        function chamarAtualizarAmbiente(append = false)
        {
            var filter = $('#search-ambientes').val();

            atualizarAmbientes(skipe, filter, append);
        }

        //Chamada AJAX responsável por atualizar os resultados da tela de colaboradores
        function atualizar(skipe, filter, append)
        {

            $.ajax({
                type: 'GET',
                url: '/lista/atualizaColaboradores/'+skipe+'/'+filter,
                beforeSend:function(){
                    //ATIVA GIF LOADER
                    $('#loading').css('display', 'block');
                },
                success: function(data){
                    if(append) $('#box-galeria').append(data);
                    else $('#box-galeria').html(data);

                    $('#loading').css('display', 'none');
                },
                error: function(){
                    alert("Algo deu errado!");
                    $('#loading').css('display', 'none');
                }
            });

            return false;
        }

        //Chamada AJAX responsável por atualizar os resultados da tela de ambientes
        function atualizarAmbientes(skipe, filter, append)
        {

           $.ajax({
                type: 'GET',
                url: '/lista/atualizaAmbientes/'+ skipe + '/' + filter,
                beforeSend: function(){
                    $('#loading').css('display', 'block');
                },
                success: function(data){
                    if(append){
                        $('#ambientes').append(data);
                    }else{
                        $('#ambientes').html(data);
                    }

                    $('#loading').css('display', 'none');
                },
                error: function(){
                    alert("Algo deu errado!");
                    $('#loading').css('display', 'none');
                }
           });
        }

        //Função responsável por esconder e alterar o titulo principal na aba de ambientes
        function ambientes()
        {
            $('#colaboradores').hide();
            $('#ramais-ambientes').show();
            $('#button-colaboradores').removeClass('nav-link active');
            $('#button-colaboradores').addClass('nav-link');
            $('#button-ambientes').addClass('nav-link active');
            $(".titulo-padrao").text('Ambientes');
        }

        //Função responsável por esconder e alterar o titulo principal na aba de colaboradores
        function colaboradores()
        {
            $('#ramais-ambientes').hide();
            $('#colaboradores').show();
            $('#button-ambientes').removeClass('nav-link active');
            $('#button-ambientes').addClass('nav-link');
            $('#button-colaboradores').addClass('nav-link active');
            $(".titulo-padrao").text('Colaboradores');
        }
</script>
@endpush